/* MYTHOS — scène 1920×1080 partagée entre le jeu et l'overlay (mise à l'échelle par transform). */
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:clip;font-family:var(--body);font-size:18px}
#stage .abs{position:absolute}
#bg{position:absolute;inset:0;overflow:hidden;background:#04080a}
#bg .layer{position:absolute;inset:-4%;background-size:cover;background-position:center;transition:opacity 1.4s;animation:ken 40s ease-in-out infinite alternate}
#bg .l-boss{filter:blur(6px) brightness(.38) saturate(1.1)}
#bg .l-terrain{opacity:0;filter:brightness(.5) saturate(1.1)}
#bg .l-terrain.on{opacity:.9}
#bg .fog{position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='300'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.008 .02' numOctaves='3'/><feColorMatrix values='0 0 0 0 .6  0 0 0 0 .75  0 0 0 0 .75  0 0 0 .5 -.12'/></filter><rect width='700' height='300' filter='url(%23f)'/></svg>");background-size:1400px 600px;opacity:.28;animation:mist 120s linear infinite;mix-blend-mode:screen}
#bg .vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 38%,rgba(0,0,0,.72) 100%)}
#bg .madv{position:absolute;inset:0;opacity:0;transition:opacity 1.2s;background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(110,40,170,.55) 100%);mix-blend-mode:multiply}
#bg .redv{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 50%,transparent 25%,rgba(200,30,40,.7) 100%)}
.overlay-mode #bg{background:transparent}.overlay-mode #bg .layer,.overlay-mode #bg .fog,.overlay-mode #bg .vig{display:none}
#amb{position:absolute;inset:0;pointer-events:none}

.pnl{position:absolute;background:linear-gradient(180deg,rgba(10,20,23,.82),rgba(5,10,12,.88));border:1px solid rgba(90,160,170,.35);border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.lbl{font-family:var(--serif);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* ---- colonne gauche : tour */
#leftcol{left:30px;top:56px;width:300px;height:240px;padding:14px 18px}
#leftcol .turn{font-family:var(--serif);font-weight:900;font-size:64px;line-height:1;color:var(--gold);text-shadow:0 0 24px rgba(214,174,94,.4)}
#leftcol .turn small{font-size:24px;color:var(--muted);font-weight:500}
.tpips{display:flex;gap:5px;margin:8px 0 10px}.tpips i{width:16px;height:16px;transform:rotate(45deg);border:1px solid #3a5a60;background:#06100f}
.tpips i.done{background:#355;border-color:#5aa}.tpips i.cur{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px var(--gold)}
#leftcol .win{font-size:17px;color:var(--bone);margin-bottom:8px}
#leftcol .fc{font-size:16px;color:var(--muted);line-height:1.2;border-top:1px solid rgba(90,160,170,.25);padding-top:8px}
#leftcol .fc b{color:#f3b9bc}

/* ---- boss */
#bossbox{left:350px;top:56px;width:1220px;height:240px;border-radius:14px;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 60%,#000);box-shadow:0 0 40px color-mix(in srgb,var(--accent) 30%,transparent),0 8px 30px rgba(0,0,0,.6);cursor:default}
#bossbox .bart{position:absolute;inset:-10px;background-size:cover;background-position:50% var(--focus,25%);filter:saturate(1.1);animation:breathe 9s ease-in-out infinite}
#bossbox .bshade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.25) 32%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.55) 100%),linear-gradient(0deg,rgba(0,0,0,.85) 0,transparent 40%)}
#bossbox .bflash{position:absolute;inset:0;background:#fff;opacity:0;mix-blend-mode:overlay}
#bossbox .bname{position:absolute;left:28px;top:16px}
#bossbox .bphase{font-family:var(--serif);font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 12px var(--accent)}
#bossbox h1{margin:2px 0 0;font-family:var(--serif);font-weight:900;font-size:50px;letter-spacing:.06em;text-shadow:0 3px 18px #000,0 0 30px color-mix(in srgb,var(--accent) 40%,transparent)}
#bossbox .bsub{font-size:20px;font-style:italic;color:#d6dedb;text-shadow:0 2px 8px #000}
#bossbox .orbs{position:absolute;left:28px;bottom:58px;display:flex;align-items:center;gap:7px}
.orb{width:22px;height:22px;border-radius:50%;border:2px solid #7b6a3a;background:#0b0a06;transition:all .4s}
.orb.on{background:radial-gradient(circle at 35% 30%,#fff3b8,#d0a030 60%,#7a5a10);border-color:#f0d27a;box-shadow:0 0 14px #e8b84a}
.orb.pulse{animation:glowPulse .6s}
#bossbox .seals{position:absolute;right:28px;bottom:58px;display:flex;align-items:center;gap:8px}
.rune{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:22px;border-radius:8px;border:2px solid #2a6a68;background:#06100f;color:#2a6a68;transition:all .4s}
.rune.on{border-color:#59e0cf;color:#59e0cf;background:#0b2a28;box-shadow:0 0 16px #35d1bd;text-shadow:0 0 10px #59e0cf}
.rune.cracked{animation:shake .5s}
#bossbox .hpwrap{position:absolute;left:28px;right:28px;bottom:14px}
#bossbox .hp{height:28px;border-radius:99px;background:#050709;border:2px solid rgba(255,255,255,.35);position:relative;overflow:hidden;box-shadow:0 0 18px rgba(0,0,0,.8)}
#bossbox .hpfill{position:relative;z-index:1;height:100%;width:100%;background:linear-gradient(90deg,#6d1a22,#d03b44 70%,#ff7a6a);transition:width .6s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 18px #d03b44}
#bossbox .hpghost{position:absolute;left:0;top:0;height:100%;background:rgba(255,255,255,.55);transition:width 1.1s .35s}
#bossbox .hptick{z-index:2;position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.55)}
#bossbox .hptxt{z-index:2;position:absolute;inset:0;text-align:center;line-height:25px;font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:.1em;text-shadow:0 2px 4px #000}
#bossbox .ptag{position:absolute;top:36px;font-family:var(--serif);font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.55);text-transform:uppercase;transform:translateX(6px)}
#bossbox.hit .bart{animation:shake .4s,breathe 9s ease-in-out infinite}
#bossbox.hit .bflash{animation:flash .35s}
#bossbox.targetable{animation:targetPulse 1s infinite;cursor:crosshair}
#bossbox.dim .bshade{background:rgba(0,0,0,.7)}

/* ---- intention */
#intentbox{left:1590px;top:56px;width:300px;height:240px;padding:14px 16px;border-color:rgba(200,70,80,.6);background:linear-gradient(180deg,rgba(40,8,12,.88),rgba(12,4,6,.92))}
#intentbox.slam{animation:slamIn2 .8s}
@keyframes slamIn2{0%{transform:scale(1.25);opacity:0}40%{transform:scale(.97);opacity:1}100%{transform:none}}
#intentbox .ik{font-size:44px;line-height:1;filter:drop-shadow(0 0 12px rgba(255,80,80,.7))}
#intentbox h3{margin:4px 0 4px;font-family:var(--serif);font-size:21px;color:#ffc4c8;letter-spacing:.04em}
#intentbox p{margin:0;font-size:16.5px;line-height:1.22;color:#e8d9d9}
#intentbox .maj{display:inline-block;font-family:var(--serif);font-size:11px;letter-spacing:.18em;padding:2px 8px;border-radius:99px;border:1px solid #ff6a74;color:#ff9aa0;margin-left:6px;vertical-align:middle}
#intentbox .cancelled{text-decoration:line-through;opacity:.55}
#intentbox .tg{position:absolute;left:16px;right:16px;bottom:12px;font-size:16px;color:#ffb0b6;border-top:1px dashed rgba(255,110,120,.4);padding-top:6px}

/* ---- terrain */
#terrainbox{left:30px;top:308px;width:300px;height:394px;padding:12px 14px;text-align:center}
#terrainbox .card{margin:8px auto 6px;--w:190px}
#terrainbox .tinfo{font-size:15px;color:var(--muted);line-height:1.2}
#terrainbox .tinfo b{color:var(--gold)}
#terrainbox .empty{margin:14px auto 0;width:190px;height:285px;border:2px dashed rgba(120,160,165,.3);border-radius:14px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#5d777b;font-size:16px;gap:10px}
#terrainbox .empty span{font-size:54px;opacity:.4}

/* ---- zones */
.zonebox{position:absolute}
.zonebox .zl{position:absolute;left:0;top:-2px}
.slots{position:absolute;left:0;right:0;top:20px;display:flex;gap:18px;justify-content:center;align-items:flex-start}
#creaturebox{left:350px;top:304px;width:1220px;height:290px}
#utilbox{left:350px;top:596px;width:1220px;height:130px}
#utilbox .grp{position:absolute;top:0;width:590px;height:130px}
#utilbox .grp:nth-child(2){left:630px}
#utilbox .slots{gap:10px;top:18px;justify-content:flex-start}
.slotempty{border:2px dashed rgba(120,160,165,.28);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#4a6468;font-size:14px;font-family:var(--serif);letter-spacing:.1em;flex:none}
.cardwrap{position:relative;flex:none;transition:transform .2s}
.cardwrap .own{position:absolute;left:50%;top:-14px;transform:translateX(-50%);font-size:12px;font-family:var(--serif);letter-spacing:.1em;padding:1px 9px;border-radius:99px;background:rgba(0,0,0,.8);border:1px solid var(--c,#678);z-index:9;white-space:nowrap}
.cardwrap.mine .own{border-color:var(--gold);color:var(--gold)}
.cardwrap .tmr{position:absolute;right:-6px;top:-6px;z-index:9;min-width:26px;height:26px;border-radius:50%;background:#3c2a0e;border:2px solid var(--gold);color:var(--gold);font-family:var(--serif);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.cardwrap .mark{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:56px;z-index:9;filter:drop-shadow(0 0 14px #ff9a3c);display:none}
.cardwrap.queued .mark{display:block;animation:pulse2 .9s infinite}
@keyframes pulse2{50%{transform:translate(-50%,-50%) scale(1.25)}}
.cardwrap.spent .card{filter:grayscale(.7) brightness(.65)}
.cardwrap.ready.mine .card{animation:glowPulse 1.6s infinite}
.cardwrap.targeted .card{box-shadow:0 0 0 4px #ff4a55,0 0 40px 8px rgba(255,60,70,.85)}
.cardwrap.targeted::after{content:"☠ CIBLE";position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);font-family:var(--serif);font-size:13px;letter-spacing:.14em;background:#6d1219;border:1px solid #ff6a74;color:#ffd0d3;border-radius:99px;padding:1px 10px;z-index:9;animation:flicker 1.6s infinite}
.cardwrap.targetable .card{animation:targetPulse 1s infinite;cursor:crosshair}
.cardwrap.dim{opacity:.35;filter:grayscale(.5)}
.cardwrap.fresh{animation:popIn .55s}
.cardwrap.dying{animation:dissolve .6s forwards}
.cardwrap.shaking .card{animation:shake .4s}
.cardwrap.glow .card{box-shadow:0 0 0 3px #fff6c8,0 0 36px 10px rgba(255,230,140,.9)}

/* ---- colonne plan */
#plancol{left:1590px;top:308px;width:300px;height:394px;padding:12px 14px;overflow:hidden}
#plancol .it{display:flex;align-items:center;gap:9px;padding:6px 4px;border-bottom:1px solid rgba(90,160,170,.15);font-size:16px;animation:rise .3s}
#plancol .it .ic{font-size:22px;width:30px;text-align:center}
#plancol .it .tx{flex:1;line-height:1.1}
#plancol .it .tx small{display:block;color:var(--muted);font-size:13px}
#plancol .it .x{width:24px;height:24px;border-radius:50%;border:1px solid #6b3a3f;background:#2a1215;color:#f3a;font-size:14px;line-height:20px;padding:0}
#plancol .it .x:hover{background:#6d1219}
#plancol .none{color:#58737a;font-size:16px;margin-top:10px;font-style:italic}

/* ---- sièges */
#seats{position:absolute;left:30px;top:716px;width:1860px;height:100px;display:flex;gap:16px;justify-content:center}
.seat{position:relative;flex:1;max-width:450px;height:100px;border-radius:12px;padding:8px 12px;display:flex;gap:12px;align-items:center;background:linear-gradient(180deg,rgba(12,24,28,.88),rgba(5,10,12,.92));border:1px solid rgba(90,160,170,.3);box-shadow:0 4px 18px rgba(0,0,0,.5);transition:border-color .3s,opacity .3s}
.seat.me{border-color:var(--gold);box-shadow:0 0 22px rgba(214,174,94,.25),0 4px 18px rgba(0,0,0,.5)}
.seat .av{width:76px;height:76px;border-radius:50%;background-size:cover;background-position:center 20%;border:3px solid #3a5a60;flex:none;position:relative;box-shadow:0 0 16px rgba(0,0,0,.7)}
.seat.me .av{border-color:var(--gold)}
.seat .rd{position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;border-radius:50%;background:#1d6b5c;border:2px solid #7ff0d8;font-size:15px;display:none;align-items:center;justify-content:center}
.seat.ready .rd{display:flex}
.seat .meta{flex:1;min-width:0}
.seat .nm{font-family:var(--serif);font-weight:700;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .nm small{font-size:11px;letter-spacing:.14em;color:var(--muted);margin-left:6px;text-transform:uppercase;font-weight:500}
.seat .rs{display:flex;gap:6px;margin:4px 0 5px}
.seat .rs .gem{width:30px;height:30px;font-size:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;color:#fff;border:2px solid rgba(255,255,255,.75);text-shadow:0 1px 2px #000}
.seat .fol{display:flex;gap:2px}
.seat .fol i{flex:1;height:10px;background:#07090b;border:1px solid #223;transition:all .4s}
.seat .fol i.on{background:linear-gradient(180deg,#b79bff,#6a45c9);border-color:#a58cf0;box-shadow:0 0 8px #8a62e8}
.seat .fol i.t{outline:1px solid rgba(255,255,255,.4);outline-offset:1px}
.seat .side{width:62px;text-align:center;flex:none;font-size:14px;color:var(--muted);line-height:1.25}
.seat .side .pa{display:flex;gap:3px;justify-content:center;margin-bottom:4px}
.seat .side .pa i{width:13px;height:13px;transform:rotate(45deg);border:1px solid #c9a24a;background:#06100f}.seat .side .pa i.on{background:#e8b84a;box-shadow:0 0 8px #e8b84a}
.seat.collapsed{opacity:.6;filter:grayscale(.6)}
.seat.collapsed::after{content:"EFFONDRÉ";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:900;font-size:26px;letter-spacing:.3em;color:#cdb8ff;background:rgba(40,10,70,.5);border-radius:12px;text-shadow:0 0 14px #8a62e8}
.seat.targeted{border-color:#ff4a55;box-shadow:0 0 30px rgba(255,60,70,.6)}
.seat.targeted .tgt{display:block}
.seat .tgt{display:none;position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-family:var(--serif);font-size:12px;letter-spacing:.14em;background:#6d1219;border:1px solid #ff6a74;color:#ffd0d3;border-radius:99px;padding:1px 10px;animation:flicker 1.6s infinite;z-index:3;white-space:nowrap}
.seat.targetable{animation:targetPulse 1s infinite;cursor:crosshair}
.seat.dim{opacity:.4}
.seat .chosen{position:absolute;right:10px;top:-12px;font-size:12px;background:#10343a;border:1px solid var(--teal);border-radius:99px;padding:1px 9px;font-family:var(--serif);letter-spacing:.08em;display:none}
.seat.chose .chosen{display:block}

/* ---- couche d'effets */
#fxlayer{position:absolute;inset:0;pointer-events:none;z-index:60}
.fl{position:absolute;font-family:var(--serif);font-weight:900;text-shadow:0 3px 8px #000,0 0 18px currentColor;white-space:nowrap;animation:floatUp 1.25s ease-out forwards;z-index:61}
.fl.big{font-size:64px}.fl.mid{font-size:40px}.fl.sm{font-size:26px}
.rg{position:absolute;width:140px;height:140px;border-radius:50%;border:5px solid currentColor;box-shadow:0 0 30px currentColor,inset 0 0 30px currentColor;animation:ring .8s ease-out forwards}
.fullflash{position:absolute;inset:0;animation:flash .6s ease-out forwards;pointer-events:none}
.announce{position:absolute;left:0;right:0;top:420px;text-align:center;animation:slamIn 1.6s ease-out forwards;z-index:70}
.announce .a1{font-family:var(--serif);font-weight:900;font-size:90px;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 0 40px currentColor,0 6px 20px #000}
.announce .a2{font-family:var(--serif);font-size:24px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.announce .band{position:absolute;left:0;right:0;top:50%;height:150px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,rgba(0,0,0,.8) 20%,rgba(0,0,0,.8) 80%,transparent);z-index:-1}
.spot{position:absolute;left:960px;top:470px;transform:translate(-50%,-50%);animation:spot 1.15s ease-out forwards;z-index:65;text-align:center}
.spot .cap{margin-top:12px;font-family:var(--serif);font-size:22px;letter-spacing:.1em;text-shadow:0 2px 8px #000;white-space:nowrap}
.spot::before{content:"";position:absolute;left:50%;top:50%;width:520px;height:520px;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--sg,rgba(255,230,160,.5)) 0%,transparent 65%);z-index:-1}
.coin{position:absolute;left:960px;top:470px;font-size:120px;animation:coin 1.1s ease-out forwards;z-index:66;filter:drop-shadow(0 0 20px gold)}
.tgtline{position:absolute;height:4px;background:linear-gradient(90deg,rgba(255,60,70,0),#ff4a55);transform-origin:0 50%;animation:fadeIn .15s,flash 1.2s forwards;z-index:62;box-shadow:0 0 12px #ff4a55}
.toast{position:absolute;left:50%;transform:translateX(-50%);top:830px;background:rgba(8,16,18,.92);border:1px solid var(--teal);border-radius:10px;padding:8px 18px;font-size:19px;animation:rise .25s,fadeIn .25s;z-index:62}
#spotlight{position:absolute;inset:0;pointer-events:none;z-index:65}
.skipbtn{position:absolute;left:50%;transform:translateX(-50%);top:8px;z-index:90;font-family:var(--serif);letter-spacing:.14em;font-size:13px;background:rgba(10,20,22,.9);border:1px solid var(--gold);color:var(--gold);border-radius:99px;padding:6px 16px;display:none}
.skipbtn.on{display:block;animation:fadeIn .2s}
.endscreen{position:absolute;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;flex-direction:column;animation:fadeIn 1s;text-align:center}
.endscreen.victory{background:radial-gradient(circle at 50% 45%,rgba(214,174,94,.35),rgba(0,0,0,.85) 70%)}
.endscreen.defeat{background:radial-gradient(circle at 50% 45%,rgba(120,10,24,.4),rgba(0,0,0,.92) 70%)}
.endscreen h2{font-family:var(--serif);font-weight:900;font-size:130px;letter-spacing:.2em;margin:0;text-shadow:0 0 60px currentColor}
.endscreen.victory h2{color:var(--gold)}.endscreen.defeat h2{color:#e05a63}
.endscreen p{font-size:28px;color:var(--bone);margin:10px 0 0;max-width:900px}
.endscreen .btns{margin-top:34px;display:flex;gap:14px;pointer-events:auto}
.overlay-mode .endscreen{background:radial-gradient(circle at 50% 45%,rgba(0,0,0,.6),transparent 70%)}