/* v4.3.0 — page « Ouvrir l'événement » (biome de l'événement en fond) + bandeau « événement en cours » de l'accueil (Arène).
   Le fond (.evp-bg) est monté par js/pages/events.js dans <body> (SCENE.mount) ; body.evp-on remonte le contenu au-dessus. Les packs réutilisent les classes du marché (.mk-pk…). */
body .evp-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
body .evp-bg::after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;background:linear-gradient(180deg,#000a 0,#0003 26%,#0004 60%,#000c 100%)}
body.evp-on .wrap{position:relative;z-index:1}
.evp{display:grid;gap:14px;text-align:left}
.evp-bar{display:flex}
.evp-hero{text-align:center;padding:20px 14px 16px;border-radius:24px;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 30%,#000d),#000b);backdrop-filter:blur(10px);box-shadow:0 0 44px -12px var(--c)}
.evp-hero>i{display:block;font-size:3.6rem;font-style:normal;line-height:1.1;filter:drop-shadow(0 0 16px var(--c))}
.evp-hero h2{margin:.1em 0 .2em;color:#fff;text-shadow:0 0 20px var(--c)}
.evp-hero p{margin:.3em 0}
.evp-chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.evp-sec{padding:14px;border-radius:20px;background:#000b;border:1px solid #ffffff1c;backdrop-filter:blur(10px)}
.evp-sec>.h3:first-child{margin-top:0}
.evp-sec .mk-packs2{margin-top:10px}
.evp-only{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;opacity:.85}
.evp.plain .evp-hero{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 32%,#06180e),#06180e)}
.evp.plain .evp-sec{background:#06180ecc}
.ev-open{margin-left:auto;white-space:nowrap}
/* bandeau d'accueil */
.ev-ban{display:flex;align-items:center;gap:12px;margin:10px 0;padding:10px 14px;text-align:left;cursor:pointer;color:inherit;text-decoration:none;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--c) 26%,transparent),transparent 70%);box-shadow:0 0 22px -8px var(--c)}
.ev-ban>i{font-size:2rem;font-style:normal;filter:drop-shadow(0 0 8px var(--c))}
.ev-ban>div{flex:1;min-width:0;display:flex;flex-direction:column}.ev-ban b{color:var(--c)}.ev-ban small{opacity:.8}
.ev-ban-go{font-weight:800;font-size:.85rem;color:var(--c);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.ev-ban{animation:evBan 3.2s ease-in-out infinite}@keyframes evBan{0%,100%{box-shadow:0 0 22px -8px var(--c)}50%{box-shadow:0 0 30px -4px var(--c)}}}

/* v4.3.1 — niveaux personnalisés d'un événement (liste fait / pas fait) */
.ev-lv{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.ev-lv li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1c;transition:transform .15s,border-color .15s}
.ev-lv li:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--c,#c6ff3d) 70%,transparent)}
.ev-lv li.next{border-color:var(--c,#c6ff3d);box-shadow:0 0 18px -8px var(--c,#c6ff3d)}
.ev-lv li.done{background:color-mix(in srgb,var(--c,#c6ff3d) 14%,#0008)}
.ev-lv li.lock{opacity:.6}
.ev-lv li.boss .ev-lvn{background:color-mix(in srgb,#f5c542 35%,#000);border-color:#f5c542}
.ev-lvn{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font-style:normal;font-weight:800;background:#0006;border:2px solid color-mix(in srgb,var(--c,#c6ff3d) 70%,transparent)}
.ev-lv li.done .ev-lvn{background:var(--c,#c6ff3d);color:#06180e}
.ev-lv .ev-t{flex:1;min-width:0;display:flex;flex-direction:column}
.ev-lv .ev-t small{opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-lvch{white-space:nowrap}

/* v4.3.2 — téléphone : plus rien ne dépasse en largeur (liste des événements, page « Ouvrir l'événement », niveaux / combats, fiche d'un niveau).
   Cause principale : .evp est une grille à colonne « auto » (elle s'élargissait au contenu le plus large, ex. un texte en nowrap) → colonne minmax(0,1fr). */
.evp{grid-template-columns:minmax(0,1fr)}
.ev,.evp,.evp>*,.evp-sec,.evp-sec>*{min-width:0;max-width:100%;box-sizing:border-box}
.evp-sec,.ev-fin,.ev-rw,.ev h3,.evp-hero h2,.evp-hero p{overflow-wrap:anywhere}
.ev header{flex-wrap:wrap}
.ev header>div{flex:1 1 150px;min-width:0}
.ev-ch li{grid-template-columns:minmax(0,1fr) auto}.ev-ch li>*{min-width:0}
.ev-lv li{min-width:0}.ev-lv .ev-t{overflow-wrap:anywhere}
.ev-lv .ev-t small{white-space:normal;overflow:visible;text-overflow:clip}
.ev-lv li .cp-st{flex:none}
.ev-todo{margin:8px 0 0;font-weight:800;color:#fde68a}
.sheet.cl{overflow-x:hidden;overflow-wrap:anywhere}
@media (max-width:520px){
.evp-sec{padding:12px 10px}
.ev{padding:12px}
.ev-open{margin-left:0;flex:1 1 100%;white-space:normal;text-align:center}
.ev-lv li{gap:8px;padding:8px}
.ev-lvn{width:30px;height:30px}
.evp-hero{padding:16px 10px 14px}
.ev-ban{flex-wrap:wrap}.ev-ban-go{white-space:normal}
}

/* v4.3.2 — backdrop-filter par-dessus un décor animé = très coûteux sur iPhone : fond plus opaque à la place */
@media (pointer:coarse) and (max-width:700px){
  .evp-hero,.evp-sec{backdrop-filter:none;-webkit-backdrop-filter:none}
  .evp-hero{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 30%,#000e),#000d)}
  .evp-sec{background:#000d}
}