/* Interface de combat — charte : Lilita One (titres, chiffres, boutons, contour #1E1430) + Nunito 800/900,
   boutons très arrondis, contour 4-5 px, ombre pleine dessous ; doré = action principale, violet = secondaire,
   vert = AUTO actif, rouge = alertes. Tout est dessiné dans un repère de 390 px de large, mis à l'échelle par main.js. */
@font-face{font-family:Lilita;src:url(../../assets/fonts/lilita-one-latin-400-normal.woff2) format("woff2");font-display:block}
@font-face{font-family:Nun;font-weight:800;src:url(../../assets/fonts/nunito-latin-800-normal.woff2) format("woff2");font-display:block}
@font-face{font-family:Nun;font-weight:900;src:url(../../assets/fonts/nunito-latin-900-normal.woff2) format("woff2");font-display:block}
:root{--o:#1E1430;--gold:linear-gradient(#ffe45e,#f2a541 60%,#e08a1e);--vio:linear-gradient(#7b63e8,#4b33b0);--grn:linear-gradient(#8cf58a,#2fa35e);--red:linear-gradient(#ff8a7a,#d8323b)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0c0718;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}
body{background:radial-gradient(ellipse at 50% 40%,#2a1c52 0,#140c28 55%,#0a0614 100%)}
#col{position:absolute;top:0;left:0;overflow:hidden;background:#140c28;box-shadow:0 0 60px rgba(0,0,0,.6)}
#gl{position:absolute;left:0;top:0;display:block}
#safe{position:fixed;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#ui{position:absolute;left:0;top:0;width:390px;--tap:44px;transform-origin:0 0;font-family:Nun,system-ui,sans-serif;font-weight:800;color:#fff;overflow:hidden;--st:0px;--sb:0px;--fd:.95s}
button{font:inherit;color:inherit;margin:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.t{font-family:Lilita,system-ui,sans-serif;letter-spacing:.02em;-webkit-text-stroke:5px var(--o);paint-order:stroke fill}
.t3{font-family:Lilita,system-ui,sans-serif;-webkit-text-stroke:3.5px var(--o);paint-order:stroke fill}
.bar{height:14px;border-radius:999px;background:#2a1e44;border:3px solid var(--o);overflow:hidden;position:relative}
.bar i{display:block;height:100%;border-radius:999px;width:100%;transition:width .22s ease-out}
.btn{border-radius:16px;border:4px solid var(--o);box-shadow:0 5px 0 var(--o),inset 0 4px 0 rgba(255,255,255,.4),inset 0 -5px 0 rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;height:46px;min-width:46px;background:var(--vio);transition:transform .06s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--o),inset 0 4px 0 rgba(255,255,255,.4),inset 0 -5px 0 rgba(0,0,0,.18)}
.btn.gold{background:var(--gold)} .btn.vio{background:var(--vio)} .btn.grn{background:var(--grn)}
.btn.big{height:58px;border-radius:20px;border-width:5px;box-shadow:0 6px 0 var(--o),inset 0 5px 0 rgba(255,255,255,.4),inset 0 -6px 0 rgba(0,0,0,.18);padding:0 22px}
.hide{display:none!important}
.dot{border-radius:50%;border:2.5px solid var(--o);display:flex;align-items:center;justify-content:center;flex:none}
.dot svg{display:block}
.pt{border-radius:50%;background-color:#2a1e44;background-size:cover;background-position:center;flex:none}

/* ---------- haut ---------- */
.topgrad{position:absolute;left:0;right:0;top:0;height:calc(168px + var(--st));background:linear-gradient(rgba(22,14,44,.95),rgba(22,14,44,.84) 60%,rgba(22,14,44,.4) 84%,rgba(22,14,44,0));pointer-events:none}
.lvl{position:absolute;left:10px;right:10px;top:calc(8px + var(--st));display:flex;align-items:center;gap:8px;height:28px}
.lvl .id{background:var(--gold);border:3px solid var(--o);border-radius:10px;padding:0 8px;box-shadow:0 3px 0 var(--o);font-family:Lilita;font-size:16px;color:var(--o);line-height:22px;flex:none}
.lvl .nm{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;padding:2px 0 2px 3px;margin-left:-3px}
.lvl .wv{background:rgba(42,30,68,.92);border:3px solid var(--o);border-radius:999px;padding:1px 10px;font:900 12px Nun;color:#e7deff;flex:none;white-space:nowrap}
.boss{position:absolute;left:10px;right:10px;top:calc(42px + var(--st));height:52px}
.boss .pt{position:absolute;left:0;top:0;width:50px;height:50px;border:4px solid var(--o);box-shadow:0 4px 0 var(--o),inset 0 0 0 3px #ff5a6a;z-index:2}
.boss .row{position:absolute;left:56px;right:0;top:0;display:flex;align-items:center;gap:6px;height:22px}
.boss .nm{font-size:18px;line-height:22px;white-space:nowrap;padding-left:3px;margin-left:-3px}
.boss .hp{margin-left:auto;font:900 12px Nun;color:#fff;white-space:nowrap}
.boss .hp span{color:#b9add8}
.boss .bar{position:absolute;left:40px;right:0;top:24px;height:22px;border-width:4px;box-shadow:0 4px 0 var(--o)}
.boss .bar .ghost{position:absolute;left:0;top:0;background:#fff3c4;transition:width .7s ease-out .25s}
.boss .bar .fill{position:absolute;left:0;top:0;background:var(--red);box-shadow:inset 0 4px 0 rgba(255,255,255,.4)}
.boss .bar b{position:absolute;top:0;bottom:0;width:3px;background:rgba(30,20,48,.55)}
.boss .tg{position:absolute;left:56px;width:110px;top:48px;height:7px;border-width:2px}
.boss .tg i{background:linear-gradient(#bff0ff,#3da9e8)}
.boss .st{position:absolute;left:172px;top:45px;display:flex;gap:2px}
.order{position:absolute;left:10px;right:6px;top:calc(104px + var(--st));display:flex;align-items:center;gap:5px;height:46px}
.noboss .order{top:calc(50px + var(--st))}.noboss .topgrad{height:calc(116px + var(--st))}.noboss .ban{top:calc(140px + var(--st))}
.order .lb{font-size:13px;color:#ffe45e;margin-right:1px;padding-left:3px;flex:none}
.chip{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:3px solid var(--o);box-shadow:0 3px 0 var(--o);padding:3px;background:#ff5a6a;transition:width .15s,height .15s}
.chip.ally{background:#4fb4ff}
.chip.act{width:44px;height:44px;background:#ffe45e;box-shadow:0 3px 0 var(--o),0 0 14px #ffe45e}
.chip .pt{width:100%;height:100%;border:2px solid var(--o)}
.chip.act::after{content:"";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:9px solid #ffe45e;filter:drop-shadow(0 2px 0 var(--o))}

/* ---------- barres au-dessus des combattants ---------- */
.units,.floats{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.ub{position:absolute;left:0;top:0;width:66px;margin-left:-33px;margin-top:-22px;display:flex;align-items:flex-start;gap:2px;will-change:transform}
.ub.sm{width:58px;margin-left:-29px}
.ub .dot{width:15px;height:15px;border-width:2px;margin-top:-2px}
.ub .col{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.ub .hpb{height:9px;border-width:2px}
.ub .hpb i{background:var(--grn);box-shadow:inset 0 2px 0 rgba(255,255,255,.4)}
.ub.foe .hpb i{background:var(--red)}
.ub .tgb{height:6px;border-width:2px;margin-right:8px}
.ub .tgb i{background:linear-gradient(#bff0ff,#3da9e8)}
.ub .st{position:absolute;left:17px;top:-13px;display:flex;gap:1px}
.sdot{width:13px;height:13px;border-radius:50%;border:2px solid var(--o);display:flex;align-items:center;justify-content:center;font:900 8px/1 Nun;color:#fff}
.sdot.burn{background:#ff6a3a}.sdot.root{background:#2fa35e}.sdot.taunt{background:#ff3b4e}.sdot.atk{background:#f2a541}

/* ---------- chiffres qui s'envolent ---------- */
.fl{position:absolute;left:0;top:0;white-space:nowrap;font-family:Lilita,system-ui,sans-serif;font-size:26px;line-height:1;color:#fff;-webkit-text-stroke:5px var(--o);paint-order:stroke fill;text-shadow:0 3px 0 var(--o);opacity:0;will-change:transform,opacity;text-align:center}
.fl.go{animation:fl var(--fd) cubic-bezier(.2,.8,.3,1) forwards}
.fl.dmg{color:#ffe45e}.fl.weak{color:#d9d2ea;font-size:22px}.fl.strong{color:#ffb03a;font-size:30px}
.fl.crit{color:#ffe45e;font-size:40px;-webkit-text-stroke-width:7px;text-shadow:0 4px 0 var(--o)}
.fl.crit small{display:block;font-size:17px;color:#ff5a4e;-webkit-text-stroke-width:4px;margin-bottom:-2px;transform:rotate(-5deg)}
.fl.heal{color:#7dff8e}.fl.burn{color:#ff8a3a;font-size:22px}
.fl.txt{font-size:17px;-webkit-text-stroke-width:4px}
.fl.txt.g{color:#8dff8a}.fl.txt.r{color:#ff6a6a}.fl.txt.y{color:#ffe45e}.fl.txt.w{color:#d9d2ea}
@keyframes fl{0%{opacity:0;transform:translate(-50%,-30%) scale(.4)}14%{opacity:1;transform:translate(-50%,-70%) scale(1.25)}28%{transform:translate(-50%,-82%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-170%) scale(.95)}}
.paused .fl.go,.paused .ready .rays,.paused .ann.go,.paused .ban.go,.paused .ready .ring{animation-play-state:paused}

/* ---------- bandeau d'ultime + annonces ---------- */
.ban{position:absolute;left:0;right:0;top:calc(196px + var(--st));height:62px;display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(30,20,48,0),rgba(30,20,48,.92) 18%,rgba(30,20,48,.92) 82%,rgba(30,20,48,0));border-top:4px solid var(--bc,#ffe45e);border-bottom:4px solid var(--bc,#ffe45e)}
.ban.go{animation:ban calc(var(--fd)*2.6) ease-out forwards}
.ban .pt{width:50px;height:50px;border:4px solid var(--o);box-shadow:0 0 0 3px var(--bc,#ffe45e)}
.ban .tx{display:flex;flex-direction:column;align-items:flex-start}
.ban .who{font:900 12px Nun;color:#e7deff;line-height:13px}
.ban .nm{font-size:27px;line-height:30px;color:#ffe45e;white-space:nowrap;padding:0 4px;margin:0 -4px}
@keyframes ban{0%{opacity:0;transform:translateX(-60px) skewX(-8deg)}12%{opacity:1;transform:translateX(6px) skewX(-8deg)}18%{transform:translateX(0) skewX(-8deg)}80%{opacity:1;transform:translateX(0) skewX(-8deg)}100%{opacity:0;transform:translateX(50px) skewX(-8deg)}}
.ann{position:absolute;left:0;right:0;top:36%;text-align:center;font-size:44px;color:#ffe45e;pointer-events:none;opacity:0;-webkit-text-stroke-width:8px}
.ann.go{animation:ann calc(var(--fd)*1.5) ease-out forwards}
@keyframes ann{0%{opacity:0;transform:scale(.3)}18%{opacity:1;transform:scale(1.15)}28%{transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(1.05)}}

/* ---------- bas ---------- */
.botgrad{position:absolute;left:0;right:0;bottom:0;height:calc(238px + var(--sb));background:linear-gradient(rgba(22,13,40,0),rgba(22,13,40,.86) 16%,#1a1030 32%);pointer-events:none}
.ctrl{position:absolute;left:12px;right:12px;bottom:calc(152px + var(--sb));display:flex;align-items:center;justify-content:space-between;gap:8px;height:48px}
.who{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.who .pt{width:40px;height:40px;border:3px solid var(--o);box-shadow:0 3px 0 var(--o),0 0 0 3px #ffe45e inset,0 0 12px #ffe45e}
.who .tx{min-width:0;flex:1}
.who .l1{font-size:15px;line-height:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px;margin:0 -3px}
.who .l2{font:900 11px/13px Nun;color:#ffb38a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btns{display:flex;gap:7px;flex:none}
.btns .btn{height:max(46px,var(--tap));min-width:max(46px,var(--tap))} /* zone tactile >= 44 px réels même quand l'interface est réduite */
.btns .btn span{font-size:17px}
#b-speed{width:48px}#b-auto{width:66px}#b-pause{width:46px}
.panel{position:absolute;left:10px;right:10px;bottom:calc(12px + var(--sb));height:130px;background:rgba(42,30,74,.86);border:4px solid var(--o);border-radius:24px;box-shadow:0 6px 0 rgba(0,0,0,.4),inset 0 4px 0 rgba(255,255,255,.08);display:flex;justify-content:space-around;align-items:flex-start;padding:10px 6px 0}
.ult{position:relative;width:84px;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;min-height:108px}
.ult .wrap{position:relative;width:70px;height:70px}
.ult .ring{position:absolute;inset:0;border-radius:50%;border:4px solid var(--o);background:conic-gradient(var(--rc,#8f7be8) calc(var(--p,0)*1%),#2a1e44 0);box-shadow:0 5px 0 var(--o)}
.ult .pt{position:absolute;inset:9px;border:3px solid var(--o);filter:saturate(.75) brightness(.8);box-shadow:inset 0 5px 0 rgba(255,255,255,.28)}
.ult .dot{position:absolute;left:-5px;top:-3px;width:22px;height:22px;border-width:3px}
.ult .pc{position:absolute;right:-7px;bottom:-4px;background:var(--o);border-radius:9px;padding:1px 6px;font:900 11px Nun;color:#d9d0ff}
.ult .tag{position:absolute;left:50%;top:-12px;transform:translateX(-50%) rotate(-4deg);font-size:15px;color:#ffe45e;white-space:nowrap;display:none;padding:0 4px}
.ult .rays{position:absolute;left:-22px;top:-22px;width:114px;height:114px;border-radius:50%;background:repeating-conic-gradient(from 8deg,rgba(255,228,94,.55) 0 9deg,rgba(255,228,94,0) 9deg 30deg);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);display:none}
.ult .nm{font-size:13px;line-height:15px;white-space:nowrap;padding:0 3px}
.ult .bar{width:62px;height:9px;border-width:2px;margin-top:-2px}
.ult .bar i{background:var(--grn);box-shadow:inset 0 2px 0 rgba(255,255,255,.4)}
.ult.near{--rc:#ffb03a}.ult.near .pt{filter:none}.ult.near .pc{color:#ffe45e}
.ult.ready{--rc:#ffe45e}
.ult.ready .ring{background:conic-gradient(from 0deg,#fff3a8,#f2a541,#ffe45e,#f2a541,#fff3a8);box-shadow:0 0 0 3px #fff6c2,0 0 22px 5px rgba(255,214,70,.95),0 5px 0 var(--o);animation:pulse .7s ease-in-out infinite alternate}
.ult.ready .pt{filter:none}.ult.ready .pc{display:none}.ult.ready .tag,.ult.ready .rays{display:block}
.ult.ready .rays{animation:spin 6s linear infinite}.ult.ready .nm{color:#ffe45e}
.ult.armed .ring{animation:none;box-shadow:0 0 0 3px #fff,0 0 22px 5px rgba(255,255,255,.9),0 5px 0 var(--o)}
.ult.ko .pt{filter:grayscale(1) brightness(.45)}.ult.ko .ring{--p:0}.ult.ko .nm{color:#8d84a8}.ult.ko .pc{color:#ff6a6a}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- écrans par-dessus ---------- */
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(14,8,30,.86);padding:24px;text-align:center;z-index:20}
.ov.soft{background:linear-gradient(rgba(14,8,30,.88),rgba(14,8,30,.55) 45%,rgba(14,8,30,.9))}
.ov h1{margin:0;font-weight:400;font-size:46px;line-height:48px;color:#ffe45e;-webkit-text-stroke-width:8px}
.ov h1 small{display:block;font-size:22px;color:#fff;-webkit-text-stroke-width:5px;line-height:26px}
.ov h2{margin:0;font-weight:400;font-size:24px;-webkit-text-stroke-width:5px}
.ov p{margin:0;font:800 15px/20px Nun;color:#e7deff;max-width:300px}
.ov .btn.big{min-width:230px}
.ov .btn.big span{font-size:22px}
.ov .btn .sub{display:block;font:900 11px/12px Nun;color:var(--o);-webkit-text-stroke:0;opacity:.8}
.lv{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.lv .btn{justify-content:flex-start;gap:10px;min-width:300px;height:64px;padding:0 14px}
.lv .btn .n{font-size:26px;min-width:58px;text-align:left;padding-left:3px}
.lv .btn .d{display:flex;flex-direction:column;align-items:flex-start;-webkit-text-stroke:0}
.lv .btn .d b{font:900 15px/17px Nun;color:var(--o)}.lv .btn .d i{font:800 11px/13px Nun;color:rgba(30,20,48,.75);font-style:normal}
.stars{display:flex;gap:6px;height:74px;align-items:center}
.stars svg{width:64px;height:64px;filter:drop-shadow(0 4px 0 var(--o))}
.stars svg.on{animation:star .45s cubic-bezier(.2,1.6,.4,1) backwards}
.stars svg:nth-child(2){width:78px;height:78px;animation-delay:.18s}.stars svg:nth-child(3){animation-delay:.36s}
@keyframes star{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}
.gold{display:flex;align-items:center;gap:8px;background:rgba(42,30,68,.92);border:4px solid var(--o);border-radius:999px;padding:4px 18px 4px 8px;box-shadow:0 4px 0 var(--o)}
.gold .coin{width:30px;height:30px;border-radius:50%;background:var(--gold);border:3px solid var(--o);box-shadow:inset 0 3px 0 rgba(255,255,255,.5)}
.gold span{font-size:24px;color:#ffe45e}
.gold em{font:900 12px Nun;color:#e7deff;font-style:normal;margin-right:4px}
.rowb{display:flex;gap:12px;margin-top:6px}
.rowb .btn.big{min-width:0;padding:0 20px}
.load .lbar{width:220px;height:20px;border-width:4px}.load .lbar i{background:var(--gold);width:0}
.err{color:#ff8a8a!important}
#fps{position:absolute;left:6px;bottom:calc(150px + var(--sb));font:900 10px/12px ui-monospace,monospace;color:#9dff9d;background:rgba(0,0,0,.6);padding:3px 5px;border-radius:5px;z-index:30;white-space:pre;pointer-events:none;text-align:left}

/* cible désignée : icône de viseur au-dessus de la barre de vie */
.aim{position:absolute;left:0;top:0;width:26px;height:26px;margin-left:-13px;margin-top:-56px;will-change:transform;pointer-events:none}
.aim svg{display:block;animation:aimbob .7s ease-in-out infinite alternate;filter:drop-shadow(0 2px 0 rgba(30,20,48,.55))}
@keyframes aimbob{from{transform:translateY(0) scale(1)}to{transform:translateY(-5px) scale(1.12)}}
.paused .aim svg{animation-play-state:paused}
.btn.snd{padding:0 18px;min-width:170px}.btn.snd span{font-size:16px}.btn.snd.off{filter:saturate(.35) brightness(.8)}
.lv{gap:11px}.lv .btn{height:60px}

/* ---------- jalon 2 : boutons ×2 et AUTO — même convention pour les deux ----------
   ACTIVÉ = vert vif lumineux + voyant coché ; DÉSACTIVÉ = gris-violet terne, sans lueur, voyant éteint. */
.btn.tog{position:relative;background:linear-gradient(#6c6488,#49425f);box-shadow:0 5px 0 var(--o),inset 0 3px 0 rgba(255,255,255,.12),inset 0 -5px 0 rgba(0,0,0,.22)}
.btn.tog span{color:#aaa2c4}
.btn.tog .led{position:absolute;right:-7px;top:-8px;width:19px;height:19px;border-radius:50%;border:3px solid var(--o);background:#39324f;box-shadow:0 2px 0 var(--o)}
.btn.tog.on{background:linear-gradient(#b4ff96,#45dd62 52%,#1faa4b);box-shadow:0 5px 0 var(--o),inset 0 4px 0 rgba(255,255,255,.55),inset 0 -5px 0 rgba(0,0,0,.16),0 0 18px 4px rgba(120,255,140,.8)}
.btn.tog.on span{color:#fff}
.btn.tog.on .led{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.4l2.3 2.3 4.6-5' fill='none' stroke='%231a9a44' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:0 2px 0 var(--o),0 0 8px #b4ff96}
.btn.tog:active{box-shadow:0 2px 0 var(--o),inset 0 3px 0 rgba(255,255,255,.12),inset 0 -5px 0 rgba(0,0,0,.22)}
.btn.tog.on:active{box-shadow:0 2px 0 var(--o),inset 0 4px 0 rgba(255,255,255,.55),inset 0 -5px 0 rgba(0,0,0,.16),0 0 18px 4px rgba(120,255,140,.8)}
/* états des nouveaux héros */
.sdot.ice{background:#7fe6ff}.sdot.slow{background:#3db8f0}.sdot.def{background:#ff5ad8}.sdot.hex{background:#9b5cf0}.sdot.fool{background:#e8c860;color:var(--o)}.sdot.shd{background:#bff0ff;border-radius:4px 4px 7px 7px}.sdot.grd{background:#e8c860;border-radius:4px}
.fl.txt.b{color:#9fe8ff}.fl.txt.p{color:#e3a6ff}.fl.refl{color:#e3a6ff;font-size:22px}
/* bulle d'aide en combat */
.tipb{position:absolute;left:0;right:0;top:calc(206px + var(--st));display:flex;justify-content:center;pointer-events:none;z-index:6;animation:tipin .35s cubic-bezier(.2,1.4,.4,1) backwards}
.noboss .tipb{top:calc(150px + var(--st))}
.tipb span{position:relative;background:#fff;color:var(--o);font:900 15px/19px Nun;padding:9px 16px;border-radius:18px;border:4px solid var(--o);box-shadow:0 5px 0 rgba(30,20,48,.55);max-width:300px;text-align:center}
.tipb span::after{content:"";position:absolute;right:54px;bottom:-15px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:14px solid var(--o)}
.tipb span::before{content:"";position:absolute;right:57px;bottom:-8px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid #fff;z-index:1}
@keyframes tipin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

/* --- écran de victoire : expérience de l'équipe (une barre par héros), puis « NIVEAU N ! » pour chaque héros qui monte --- */
.ov.wait .rowb,.ov.wait #b-wlevels{visibility:hidden}
.xpl{display:flex;flex-direction:column;gap:5px;width:100%;max-width:300px}
.xr{display:flex;align-items:center;gap:8px;background:rgba(42,30,68,.92);border:3px solid var(--o);border-radius:14px;padding:3px 8px 3px 4px}
.xr .pt{width:34px;height:34px;border-radius:10px;border:3px solid var(--o);background-size:cover;flex:none}
.xr .xm{flex:1;min-width:0}
.xr .x1{display:flex;justify-content:space-between;font:900 12px/15px Nun;color:#fff}.xr .x1 i{font-style:normal;color:#ffd84a}
.xr .bar{height:10px;border-width:2.5px;margin-top:2px}.xr .bar i{background:linear-gradient(#bff0ff,#3da9e8);transition:width var(--xd,.6s) ease-out}
.xr .xu{font:900 12px/15px Nun;color:#8dff8a;white-space:nowrap;flex:none;min-width:0}
.xr.up{border-color:#8dff8a;box-shadow:0 0 12px rgba(140,255,138,.55)}.xr.up .pt{animation:pulse .35s ease-in-out 4 alternate}.xr.up .x1 i{color:#8dff8a}
.lvb{position:absolute;left:50%;top:50%;width:270px;margin:-120px 0 0 -135px;z-index:26;border-radius:26px;background:linear-gradient(#3b2a7c,#231652);border:5px solid var(--o);box-shadow:0 0 0 3px #ffe45e,0 0 40px 10px rgba(255,214,70,.6),0 8px 0 rgba(0,0,0,.45);padding:14px 14px 16px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.lvb.go{animation:lvbin .34s cubic-bezier(.2,1.5,.4,1) backwards}
@keyframes lvbin{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.lvb .ry{position:absolute;left:50%;top:60px;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,228,94,.5) 0 8deg,rgba(255,228,94,0) 8deg 24deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);animation:spin 9s linear infinite;pointer-events:none;z-index:-1}
.lvb .pt{position:relative;width:86px;height:86px;border-radius:24px;border:5px solid var(--o);background-size:cover;box-shadow:0 0 0 3px #ffe45e,0 0 22px 6px rgba(255,228,94,.8);animation:pulse .32s ease-in-out infinite alternate}
.lvb h2{margin:4px 0 0;font-weight:400;font-size:34px;line-height:38px;color:#ffe45e;-webkit-text-stroke-width:7px}
.lvb .nm{font-size:18px;line-height:22px;padding:0 4px}
.lvb .gn{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:3px}
.lvb .gn span{background:rgba(20,12,44,.85);border:3px solid var(--o);border-radius:999px;padding:2px 10px;font:900 13px/18px Nun;color:#fff;white-space:nowrap;animation:tipin .3s cubic-bezier(.2,1.4,.4,1) backwards}
.lvb .gn span:nth-child(2){animation-delay:.12s}.lvb .gn span:nth-child(3){animation-delay:.24s}
.lvb .gn b{color:#8dff8a}
/* --- première victoire : fenêtre de récompense par-dessus l'écran de victoire --- */
.ov.gift{z-index:28;background:rgba(10,6,24,.82);overflow:hidden;animation:scrfade .25s ease-out}
@keyframes scrfade{from{opacity:0}to{opacity:1}}
.gf-rays{position:absolute;left:50%;top:50%;width:1100px;height:1100px;margin:-550px 0 0 -550px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,222,110,.34) 0 7deg,rgba(255,222,110,0) 7deg 20deg);-webkit-mask:radial-gradient(circle,#000 8%,transparent 62%);mask:radial-gradient(circle,#000 8%,transparent 62%);animation:spin 18s linear infinite;pointer-events:none}
.gf-box{position:relative;width:100%;max-width:324px;border-radius:28px;background:linear-gradient(#40308a,#241754);border:5px solid var(--o);box-shadow:0 0 0 3px #ffe45e,0 0 46px 12px rgba(255,214,70,.55),0 8px 0 rgba(0,0,0,.45);padding:18px 16px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;animation:lvbin .4s cubic-bezier(.2,1.5,.4,1) backwards}
.gf-box h2{margin:0;font-weight:400;font-size:35px;line-height:40px;color:#ffe45e;-webkit-text-stroke-width:7px}
.gf-box h3{margin:0;font-weight:400;font-size:21px;line-height:25px;color:#fff;-webkit-text-stroke-width:5px}
.gf-cry{display:grid;grid-template-columns:repeat(5,44px);gap:4px 6px;margin:8px 0 4px;padding:10px 14px;border-radius:20px;background:rgba(20,12,44,.7);border:3px solid var(--o)}
.gf-cry i{display:flex;align-items:center;justify-content:center;height:40px;filter:drop-shadow(0 0 7px rgba(200,150,255,.95));animation:gfc .62s cubic-bezier(.3,.9,.4,1.3) var(--d) backwards}
@keyframes gfc{0%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.25) rotate(-140deg)}35%{opacity:1}100%{opacity:1;transform:none}}
.gf-box p{max-width:none;font:900 17px/22px Nun;color:#fff}.gf-box p b{color:#e3ccff;font-size:22px}
.ov .gf-box .btn.big{min-width:250px;height:66px;margin-top:8px;animation:tipin .35s cubic-bezier(.2,1.4,.4,1) 1.1s backwards,gfglow .8s ease-in-out 1.5s infinite alternate}
.ov .gf-box .btn.big span{font-size:28px}
@keyframes gfglow{from{box-shadow:0 6px 0 var(--o),inset 0 5px 0 rgba(255,255,255,.4),inset 0 -6px 0 rgba(0,0,0,.18),0 0 0 0 rgba(255,228,94,.0)}to{box-shadow:0 6px 0 var(--o),inset 0 5px 0 rgba(255,255,255,.4),inset 0 -6px 0 rgba(0,0,0,.18),0 0 26px 8px rgba(255,228,94,.85)}}

/* ======================= JALON 3 ======================= */
/* --- boss du jour : compteur « Dégâts de l'équipe », paliers, tours restants ; vie du boss en barres empilées (×N) --- */
.raid{position:absolute;left:10px;right:10px;top:calc(150px + var(--st));height:48px;border-radius:16px;background:rgba(26,16,56,.9);border:3px solid var(--o);padding:3px 12px 0;pointer-events:none}
.raid .r1{display:flex;align-items:baseline;gap:8px;height:24px}
.raid .lb{font:900 11.5px/24px Nun;color:#e7deff;white-space:nowrap}
.raid #u-rdscore{font-size:22px;line-height:24px;color:#ffe45e;font-weight:400;display:inline-block;transform-origin:left center}
.raid #u-rdscore.pop{animation:rdpop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes rdpop{0%{transform:scale(1)}40%{transform:scale(1.45);color:#fff}100%{transform:scale(1)}}
.raid .lf{margin-left:auto;font:900 11.5px/24px Nun;color:#bff0ff;white-space:nowrap}
.raid .trk{position:relative;height:9px;margin:3px 10px 0 2px;border-radius:999px;background:#2a1e44;border:2.5px solid var(--o)}
.raid .trk>i{display:block;height:100%;border-radius:999px;background:var(--gold);transition:width .3s ease-out}
.raid .trk b{position:absolute;top:50%;width:19px;height:19px;margin:-9.5px 0 0 -9.5px;border-radius:50%;background:#4a4466;border:2.5px solid var(--o);font:900 10.5px/14px Nun;color:#b9add8;text-align:center;transition:background .2s,transform .2s}
.raid .trk b.on{background:linear-gradient(#ffe45e,#f2a541);color:var(--o);transform:scale(1.18);box-shadow:0 0 9px 2px rgba(255,214,70,.9)}
.raidm .ban{top:calc(246px + var(--st))}.raidm .tipb{top:calc(256px + var(--st))}.raidm .topgrad{height:calc(220px + var(--st))}
.boss .hp .xn{font-family:Lilita;font-size:19px;line-height:20px;color:#ffe45e;-webkit-text-stroke:3.5px var(--o);paint-order:stroke fill;font-weight:400}
.boss.alt .bar .fill{background:linear-gradient(#ffb86a,#f2762e)}
.inraid #b-restart{display:none}
/* --- duos complices : bandeau court en début de combat (ne bloque rien) --- */
.duo{position:absolute;left:0;right:0;top:calc(212px + var(--st));display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none;opacity:0;z-index:5}
.noboss .duo{top:calc(158px + var(--st))}.raidm .duo{top:calc(262px + var(--st))}
.duo.go{animation:duoin 3.2s ease-out forwards}
@keyframes duoin{0%{opacity:0;transform:translateX(-40px)}9%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0;transform:translateX(30px)}}
.duo .dl{display:flex;align-items:center;gap:0;background:linear-gradient(90deg,rgba(30,20,48,.94),rgba(74,44,130,.94));border:3px solid var(--o);border-radius:999px;padding:3px 16px 3px 4px;box-shadow:0 0 0 2px #ffe45e,0 4px 0 rgba(0,0,0,.35)}
.duo .pt{width:32px;height:32px;border:3px solid var(--o)}.duo .pt+.pt{margin-left:-9px}
.duo span{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px}
.duo em{font:900 10px/11px Nun;color:#ffe45e;font-style:normal;letter-spacing:.08em}
.duo b{font-size:15px;line-height:18px;font-weight:400;color:#fff;white-space:nowrap}
.paused .duo.go{animation-play-state:paused}
/* --- récapitulatif par héros (victoire : repliable ; boss du jour : toujours affiché) --- */
.rc-tog{background:rgba(42,30,68,.92);border:3px solid var(--o);border-radius:999px;padding:4px 14px;font:900 12.5px/16px Nun;color:#e7deff;position:relative}
.rc-tog::before{content:"";position:absolute;inset:-9px -8px}
.rcp{display:flex;flex-direction:column;gap:4px;width:100%;max-width:310px}
.rcp .rlg{display:flex;justify-content:center;gap:12px;font:900 11px/14px Nun;color:#e7deff}
.rcp .rlg span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px;border:2px solid var(--o);vertical-align:-1px}
.rcp .rlg .dmg::before{background:#ff6a6a}.rcp .rlg .heal::before{background:#6fdc7c}.rcp .rlg .taken::before{background:#5fb4ff}
.rcp .rr{display:flex;align-items:center;gap:8px;background:rgba(42,30,68,.92);border:3px solid var(--o);border-radius:14px;padding:3px 8px 4px 4px;text-align:left}
.rcp .pt{width:38px;height:38px;border-radius:11px;border:3px solid var(--o)}
.rcp .rm{flex:1;min-width:0}.rcp .rm>b{display:block;font:900 11.5px/13px Nun;color:#fff}
.rcp .rb{position:relative;height:9px;margin-top:2px;border-radius:999px;background:#2a1e44;margin-right:52px}
.rcp .rb i{display:block;height:100%;min-width:3px;border-radius:999px}
.rcp .rb.dmg i{background:linear-gradient(#ff8a7a,#d8323b)}.rcp .rb.heal i{background:linear-gradient(#8cf58a,#2fa35e)}.rcp .rb.taken i{background:linear-gradient(#8fd0ff,#3d7fe8)}
.rcp .rb span{position:absolute;left:100%;top:-3px;width:50px;margin-left:3px;text-align:right;font:900 10.5px/14px Nun;color:#fff;white-space:nowrap}
/* --- fin du boss du jour --- */
#o-raid{gap:9px;padding:14px 20px}
#o-raid h1{font-size:34px;line-height:38px}
.rd-sum{display:flex;flex-direction:column;align-items:center}
.rd-sum em{font:900 13px/16px Nun;color:#e7deff;font-style:normal}
.rd-sum b{font-size:50px;line-height:54px;color:#ffe45e;font-weight:400;-webkit-text-stroke-width:8px}
.rd-sum span{font:900 13px/18px Nun;color:#bff0ff}
.rd-sum span.rec{color:var(--o);background:var(--gold);border:3px solid var(--o);border-radius:999px;padding:1px 14px;animation:pulse .4s ease-in-out infinite alternate}
.rd-tiers{display:flex;gap:5px;width:100%;max-width:330px}
.rd-tiers .tr{flex:1;min-width:0;border-radius:12px;border:3px solid var(--o);background:rgba(42,30,68,.92);padding:3px 2px 4px;display:flex;flex-direction:column;align-items:center;gap:1px;opacity:.55}
.rd-tiers .tr.on{opacity:1;background:rgba(74,52,130,.96);box-shadow:0 0 0 2px #ffe45e}
.rd-tiers .tr b{width:19px;height:19px;border-radius:50%;background:#4a4466;border:2.5px solid var(--o);font:900 10.5px/14px Nun;color:#b9add8}
.rd-tiers .tr.on b{background:var(--gold);color:var(--o)}
.rd-tiers .tr i{font:900 10.5px/13px Nun;color:#fff;font-style:normal}
.rd-tiers .tr .cchip{height:21px;font-size:11px;padding:0 5px 0 2px;gap:2px;border-width:2px}.rd-tiers .tr .cchip .coin{width:12px;height:12px;border-width:1.5px}.rd-tiers .tr .cchip svg{width:12px;height:12px}

/* ---------- jalon 4 : scènes d'histoire (bulles de Maître Rabais, panneau de fin de chapitre) ---------- */
.story{position:absolute;inset:0;z-index:40;pointer-events:auto}
.story.hide{display:none}
.st-skip{position:absolute;right:12px;top:calc(12px + var(--st));min-width:84px;min-height:var(--tap,44px);padding:0 16px;border-radius:22px;border:3px solid var(--o);background:rgba(30,20,48,.72);color:#fff;font:900 15px/1 Nun;box-shadow:0 4px 0 rgba(30,20,48,.5)}
.st-skip.hide,.st-bub.hide,.st-panel.hide{display:none}
.st-bub{position:absolute;left:12px;right:12px;bottom:calc(118px + var(--sb));display:flex;gap:12px;align-items:center;background:#fff;border:4px solid var(--o);border-radius:22px;padding:12px 14px 12px 12px;box-shadow:0 6px 0 rgba(30,20,48,.55)}
.st-bub.go{animation:tipin .32s cubic-bezier(.2,1.4,.4,1) backwards}
.st-bub.me{flex-direction:row-reverse;background:#fff6d8}
.st-pt{flex:0 0 76px;width:76px;height:76px;border-radius:50%;border:4px solid var(--o);background:#5a2440 center/cover no-repeat;box-shadow:0 3px 0 rgba(30,20,48,.4)}
.st-pt.none{display:none}
.st-tx{flex:1;min-width:0;color:var(--o)}
.st-tx b{display:block;font:400 17px/1.1 Lilita;color:#7a4bd6;letter-spacing:.3px;margin-bottom:3px}
.st-bub.me .st-tx b{color:#c2700a}
.st-tx p{margin:0;font:900 16px/21px Nun}
.st-tx i{display:block;margin-top:4px;font:800 11px/1 Nun;font-style:normal;color:#8d86a8;text-align:right}
.st-panel{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%);background:linear-gradient(#4a3a8e,#2a1c52);border:4px solid var(--o);border-radius:26px;padding:22px 20px 20px;text-align:center;color:#fff;box-shadow:0 8px 0 rgba(30,20,48,.6);animation:tipin .4s cubic-bezier(.2,1.4,.4,1) backwards}
.st-panel small{display:inline-block;font:900 13px/1 Nun;letter-spacing:1.5px;text-transform:uppercase;color:var(--o);background:#ffd23f;border:3px solid var(--o);border-radius:14px;padding:5px 12px}
.st-panel h2{margin:12px 0 8px;font:400 40px/1 Lilita;color:#ffe45e;-webkit-text-stroke:0;text-shadow:0 3px 0 var(--o),0 0 0 var(--o)}
.st-panel p{margin:0 0 16px;font:800 15px/21px Nun;color:#e9e2ff}
.st-panel .btn{min-width:180px;min-height:52px;font-size:19px}

/* écran de chargement illustré (Barnabé sort du portail, validé par Dylan le 12/11) : affiché dès l'ouverture (#boot) puis sous la barre réelle (#o-load) */
#boot,.ov.load{background:#1a1036 url(../../assets/loading/fond_chargement.jpg) center top/cover no-repeat;background-image:image-set(url(../../assets/loading/fond_chargement.webp) type("image/webp"),url(../../assets/loading/fond_chargement.jpg) type("image/jpeg"))}
#boot{position:absolute;inset:0;z-index:1}#ui{z-index:2}#boot.hide{display:none}
.ov.load{justify-content:flex-end;gap:10px;padding-bottom:max(34px,calc(env(safe-area-inset-bottom) + 22px))}
.ov.load h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.load .lbar{width:min(300px,78%)}
.load #u-loadtx{font:400 22px/26px Lilita;color:#fff;-webkit-text-stroke:5px #1E1430;paint-order:stroke fill}
.load #u-ltip{font:800 13px/18px Nun;color:#e7deff;max-width:310px;min-height:36px}.load #u-ltip b{color:#ffd84a}