:root{
  --gold:#e8c35a; --gold2:#a9822f; --bg:#0d0914; --panel:rgba(16,11,26,.90); --line:#6b5226; --txt:#efe6d2; --dim:#a79b86;
  --red:#d9473b; --green:#58c765; --blue:#4a8cff; --yellow:#e8c840;
  --font:'Cinzel','Trajan Pro','Palatino Linotype','Book Antiqua','Noto Serif','DejaVu Serif',Georgia,serif;
  --ui:'Segoe UI','Noto Sans','DejaVu Sans',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#05030a;color:var(--txt);font-family:var(--ui);font-size:14px}
input{-webkit-user-select:text;user-select:text}
#app{position:fixed;inset:0;overflow:hidden}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,rgba(0,0,0,0) 45%,rgba(3,1,8,.55) 80%,rgba(2,0,6,.85) 100%)}
#hurtflash{position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 120px 30px rgba(220,30,30,.65);transition:opacity .25s}
#hurtflash.on{opacity:1;transition:none}
#hurtflash.zone{box-shadow:inset 0 0 90px 10px rgba(255,120,30,.55)}
.hidden{display:none!important}
.screen{position:absolute;inset:0;pointer-events:none}
.screen>*{pointer-events:auto}
.panel{background:linear-gradient(180deg,rgba(28,20,42,.93),rgba(12,8,20,.93));border:1px solid var(--line);border-radius:10px;box-shadow:0 0 0 1px #000,0 10px 40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(232,195,90,.12),inset 0 0 40px rgba(0,0,0,.4)}
.lbl{font-family:var(--font);letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:var(--gold2);margin:6px 0}
.dim{color:var(--dim)} .hint{color:var(--dim);font-size:12px}
.err{color:#ff8a7a;min-height:18px;font-size:13px;text-align:center}

/* boutons */
.btn{font-family:var(--font);font-weight:700;letter-spacing:.05em;color:var(--txt);cursor:pointer;border:1px solid var(--line);border-radius:6px;padding:9px 16px;font-size:14px;background:linear-gradient(180deg,#3a2c52,#201634);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.5);transition:transform .08s,filter .15s,box-shadow .15s}
.btn:hover{filter:brightness(1.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 14px rgba(232,195,90,.35)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.gold{background:linear-gradient(180deg,#f0cf6a,#b58526 60%,#8a6218);color:#24160a;border-color:#f6dc8c;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.btn.danger{background:linear-gradient(180deg,#8a2a2a,#4a1414);border-color:#c04a4a}
.btn.big{padding:13px 20px;font-size:17px;display:block;width:100%}
.btn.big small{display:block;font-size:11px;font-weight:400;opacity:.75;letter-spacing:.02em;margin-top:2px;font-family:var(--ui)}
.btn.small{padding:5px 10px;font-size:12px}
.btn:disabled{filter:grayscale(.8) brightness(.7);cursor:not-allowed}

/* titre */
#screen-title{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;padding:0 0 30px 6vw}
.logo{text-align:left!important}
.menu{align-self:flex-start}
.logo{text-align:center;text-shadow:0 4px 30px #000;margin-top:-10px}
.logo-sub{font-family:var(--font);letter-spacing:.5em;font-size:13px;color:var(--gold2);text-transform:uppercase}
.logo h1{font-family:var(--font);font-weight:900;line-height:.92;margin:4px 0 8px}
.l-ratl{display:block;font-size:min(14vh,120px);letter-spacing:.12em;background:linear-gradient(180deg,#fff2b8 0%,#e8c35a 45%,#9c6a1c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #3a1a08) drop-shadow(0 0 22px rgba(255,150,40,.45))}
.l-arena{display:block;font-size:min(6.2vh,48px);letter-spacing:.7em;margin-right:-.7em;color:#d8cfe8;text-shadow:0 0 18px rgba(160,100,255,.6),0 2px 0 #000}
.tag{color:#cdbfa2;font-size:14px;letter-spacing:.08em}
.menu{width:340px;padding:18px;display:flex;flex-direction:column;gap:10px}
.field{display:flex;flex-direction:column;gap:4px}.field span{font-family:var(--font);font-size:11px;letter-spacing:.14em;color:var(--gold2);text-transform:uppercase}
input[type=text],input:not([type]){background:#0b0712;border:1px solid var(--line);color:var(--txt);padding:9px 10px;border-radius:6px;font-size:15px;font-family:var(--ui);outline:none}
input:focus{border-color:var(--gold);box-shadow:0 0 10px rgba(232,195,90,.3)}
.joinrow{display:flex;gap:8px}.joinrow input{width:110px;text-align:center;letter-spacing:.35em;font-weight:700;font-family:var(--font);text-transform:uppercase;font-size:17px}.joinrow .btn{flex:1}
.menu-links{display:flex;justify-content:space-between;font-size:12px}.menu-links a{color:var(--gold);cursor:pointer;text-decoration:underline dotted}.menu-links a:hover{color:#fff}
.credits{position:absolute;bottom:10px;font-size:11px;color:#8b8197;letter-spacing:.06em}

/* salon */
#screen-lobby{display:grid;grid-template-columns:360px 1fr;gap:16px;padding:18px;align-items:start}
.lobby-left{padding:14px;display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 36px)}
.room-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.code{font-family:var(--font);font-size:38px;font-weight:900;letter-spacing:.22em;color:var(--gold);text-shadow:0 0 14px rgba(255,170,50,.4)}
#slots{display:flex;flex-direction:column;gap:6px}
.slot{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid #3a2e4e;border-radius:8px;background:rgba(255,255,255,.03);min-height:52px;position:relative}
.slot.me{border-color:var(--gold);background:rgba(232,195,90,.07)}
.slot.empty{opacity:.4;border-style:dashed;justify-content:center;color:var(--dim)}
.slot canvas{width:40px;height:40px;border-radius:6px;border:1px solid #000;flex:none}
.slot .nm{font-family:var(--font);font-weight:700;font-size:14px}.slot .cl{font-size:12px;color:var(--dim)}
.slot .st{margin-left:auto;font-size:12px;font-weight:700;padding:2px 8px;border-radius:10px}
.st.ok{background:rgba(88,199,101,.2);color:#8fe89a}.st.no{background:rgba(255,255,255,.08);color:var(--dim)}
.slot .crown{color:var(--gold);margin-right:2px}
.slot select{background:#0b0712;color:var(--txt);border:1px solid var(--line);border-radius:4px;font-size:12px;padding:2px}
.slot .x{cursor:pointer;color:#c66;margin-left:6px;font-weight:700;padding:0 4px}
.lobby-actions{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.lobby-bottom{display:flex;gap:8px;margin-top:8px}.lobby-bottom .btn.big{flex:1;width:auto}
.lobby-right{padding:14px;display:flex;flex-direction:column;gap:8px;max-width:760px;justify-self:end;width:100%;max-height:calc(100vh - 36px);overflow:auto}
#class-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ccard{position:relative;border:1px solid #3a2e4e;border-radius:8px;overflow:hidden;cursor:pointer;background:#120c1c;transition:transform .12s,border-color .12s,box-shadow .12s}
.ccard:hover{transform:translateY(-2px);border-color:var(--gold2)}
.ccard.sel{border-color:var(--gold);box-shadow:0 0 16px rgba(232,195,90,.5)}
.ccard canvas{display:block;width:100%;aspect-ratio:1/.8;object-fit:cover;object-position:50% 25%}
.ccard .cn{padding:4px 6px 5px;font-family:var(--font);font-weight:700;font-size:13px;display:flex;justify-content:space-between;align-items:center}
.role{font-family:var(--ui);font-size:10px;padding:1px 6px;border-radius:8px;font-weight:700;letter-spacing:.03em}
.role.tank{background:#2d4a8a;color:#cfe0ff}.role.healer{background:#2a7a3a;color:#d0ffd8}.role.dps{background:#8a2a2a;color:#ffd6d0}
#class-detail{border-top:1px solid #3a2e4e;padding-top:10px}
.cd-head{display:flex;gap:12px;align-items:center}.cd-head h3{font-family:var(--font);font-size:22px}.cd-head p{color:var(--dim);font-size:13px;margin-top:2px}
.cd-stats{display:flex;gap:14px;font-size:12px;color:var(--dim);margin:6px 0 8px}.cd-stats b{color:var(--txt)}
.abl{display:flex;gap:10px;padding:5px;border-radius:6px;align-items:flex-start}.abl:hover{background:rgba(255,255,255,.05)}
.abl canvas{width:44px;height:44px;flex:none}.abl .an{font-family:var(--font);font-weight:700;font-size:13px}.abl .ad{font-size:12px;color:#c4b9a8;line-height:1.35}.abl .am{font-size:11px;color:var(--gold2)}

/* HUD */
#bossframe{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:min(620px,52vw);text-align:center;pointer-events:none}
.b-name{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font);font-weight:900;font-size:20px;letter-spacing:.08em;text-shadow:0 2px 6px #000;padding:0 6px}
#b-phase{font-size:12px;color:var(--gold);letter-spacing:.2em;text-transform:uppercase}
.b-bar{position:relative;height:24px;border:2px solid #20141a;border-radius:4px;background:#1a0c10;box-shadow:0 0 0 1px var(--line),0 4px 12px rgba(0,0,0,.6);overflow:hidden}
.b-fill{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(180deg,#e9594a,#a21e1e 60%,#7a1010);transition:width .15s}
.b-ghost{position:absolute;inset:0 auto 0 0;width:100%;background:rgba(255,230,200,.5);transition:width .9s .25s}
.b-bar i{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.55)}
.b-bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;text-shadow:0 1px 3px #000;letter-spacing:.04em}
.b-cast{position:relative;height:20px;margin:6px 40px 0;border:2px solid #2a1a10;background:#150d08;border-radius:3px;opacity:0;transition:opacity .15s;overflow:hidden}
.b-cast.on{opacity:1}.b-cast.int{border-color:var(--gold);box-shadow:0 0 14px rgba(232,195,90,.75)}
.bc-fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(180deg,#ffb04a,#c0601a)}
.b-cast.int .bc-fill{background:linear-gradient(180deg,#ffe58a,#d8a020)}
.b-cast span{position:absolute;top:0;bottom:0;display:flex;align-items:center;font-size:12px;font-weight:700;text-shadow:0 1px 2px #000}
#bc-name{left:8px}#bc-time{right:8px}
.b-extra{display:flex;justify-content:space-between;margin-top:4px;padding:0 6px;font-size:12px;color:var(--dim)}
#b-debuffs{display:flex;gap:3px}#b-debuffs canvas{width:22px;height:22px}
#b-enrage{font-variant-numeric:tabular-nums}#b-enrage.warn{color:#ff7a5a;font-weight:700}

#party{position:absolute;left:12px;top:50%;transform:translateY(-58%);display:flex;flex-direction:column;gap:7px;width:232px}
.pf{position:relative;display:flex;gap:7px;padding:5px 6px;border:1px solid #3a2e4e;border-radius:6px;background:rgba(10,6,18,.78);cursor:pointer;transition:border-color .15s,opacity .2s}
.pf:hover{border-color:var(--gold2)}.pf.sel{border-color:var(--gold);box-shadow:0 0 10px rgba(232,195,90,.5)}.pf.aggro{border-color:#e0453a;box-shadow:0 0 10px rgba(224,69,58,.6)}
.pf.dead{opacity:.5;filter:grayscale(1)}.pf.me .pf-name:after{content:' ◂';color:var(--gold)}
.pf canvas.pf-icon{width:38px;height:38px;border-radius:5px;flex:none;border:1px solid #000}
.pf-main{flex:1;min-width:0}
.pf-name{font-family:var(--font);font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000}
.pf .bar{position:relative;height:13px;background:#150d12;border:1px solid #000;border-radius:3px;overflow:hidden;margin-top:2px}
.pf .bar.r{height:6px}
.pf .bar>div{position:absolute;inset:0 auto 0 0;width:100%;transition:width .12s}
.pf .hp>div{background:linear-gradient(180deg,#6fe27a,#2a8a3a)}.pf .hp>div.mid{background:linear-gradient(180deg,#ecd24a,#a88a1a)}.pf .hp>div.low{background:linear-gradient(180deg,#f06a5a,#a02a22)}
.pf .abs{position:absolute;inset:0 auto 0 0;background:rgba(220,235,255,.65);width:0;mix-blend-mode:screen}
.pf .bar b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;text-shadow:0 1px 2px #000;z-index:2}
.rs-mana{background:linear-gradient(180deg,#5aa0ff,#2a50b8)}.rs-energy{background:linear-gradient(180deg,#f4de5a,#b08a1a)}
.pf-buffs{display:flex;gap:2px;margin-top:2px;min-height:14px;flex-wrap:wrap}.pf-buffs .bi{position:relative;width:15px;height:15px}.pf-buffs canvas{width:15px;height:15px}
.bi.debuff:after{content:'';position:absolute;inset:0;border:1.5px solid #ff5a5a;border-radius:3px;pointer-events:none}
.bi .stk{position:absolute;right:-1px;bottom:-2px;font-size:9px;font-weight:900;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000}
.pf .tag-bot{font-size:9px;color:var(--dim);margin-left:4px;font-family:var(--ui);font-weight:400}

#threat{position:absolute;right:12px;top:100px;width:190px;padding:6px 8px;border:1px solid #3a2e4e;border-radius:6px;background:rgba(10,6,18,.7);pointer-events:none}
.t-title{font-family:var(--font);font-size:11px;letter-spacing:.2em;color:var(--gold2);text-transform:uppercase;margin-bottom:3px}
.tl{position:relative;height:16px;margin-bottom:2px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.05);font-size:11px}
.tl>div{position:absolute;inset:0 auto 0 0;opacity:.85}.tl>span{position:absolute;inset:0;padding:0 5px;display:flex;justify-content:space-between;align-items:center;text-shadow:0 1px 2px #000;z-index:1}

#center-msgs{position:absolute;left:0;right:0;top:20%;text-align:center;pointer-events:none}
#countdown{font-family:var(--font);font-weight:900;font-size:min(22vh,150px);color:#fff4c4;text-shadow:0 0 40px rgba(255,160,40,.8),0 5px 0 #4a2208;opacity:0;line-height:1}
#countdown.pop{animation:cdpop .9s ease-out}
@keyframes cdpop{0%{opacity:0;transform:scale(2)}15%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(.85)}}
#countdown small{display:block;font-size:.2em;letter-spacing:.3em;text-transform:uppercase}
#banner{opacity:0}
#banner.show{animation:bnshow 3.4s ease-out}
@keyframes bnshow{0%{opacity:0;transform:scale(1.5);letter-spacing:.5em}12%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.bn-main{font-family:var(--font);font-weight:900;font-size:min(10vh,76px);letter-spacing:.14em;color:#ff5a3a;text-shadow:0 0 30px rgba(255,60,20,.9),0 4px 0 #300}
.bn-sub{font-family:var(--font);font-size:22px;letter-spacing:.3em;color:#ffe0b0;text-shadow:0 2px 8px #000;text-transform:uppercase}
#subtitle{position:absolute;left:50%;transform:translateX(-50%);bottom:230px;max-width:60vw;padding:7px 18px;background:rgba(0,0,0,.55);border-radius:6px;font-family:var(--font);font-style:italic;font-size:17px;color:#ffd9a0;text-align:center;opacity:0;transition:opacity .4s;pointer-events:none}
#subtitle.on{opacity:1}
#subtitle b{color:#ff8a6a;font-style:normal;margin-right:6px}
#toasts{position:absolute;left:50%;transform:translateX(-50%);bottom:262px;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.toast{padding:5px 14px;border-radius:14px;background:rgba(20,10,10,.8);border:1px solid #a04a3a;color:#ffb4a0;font-weight:700;font-size:13px;animation:toast 2s forwards}
.toast.good{border-color:#4a8a4a;color:#b8ffb8;background:rgba(10,24,12,.8)}
@keyframes toast{0%{opacity:0;transform:translateY(8px)}10%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}

#playerbar{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none}
#playerbar>*{pointer-events:auto}
.pbars{display:flex;flex-direction:column;gap:3px;width:372px}
.pb{position:relative;height:20px;background:#120a10;border:2px solid #1a1018;border-radius:4px;box-shadow:0 0 0 1px var(--line);overflow:hidden}.pb.res{height:12px}
.pb>div{position:absolute;inset:0 auto 0 0;width:100%;transition:width .1s}
#php-fill{background:linear-gradient(180deg,#72ea7e,#2a8a3a 70%,#1c6a2a)}#php-fill.mid{background:linear-gradient(180deg,#f0d850,#a88a1a)}#php-fill.low{background:linear-gradient(180deg,#f06a5a,#a02a22)}
.pb span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;text-shadow:0 1px 3px #000}.pb.res span{font-size:9px}
#p-cast{position:relative;width:300px;height:18px;background:#120d06;border:2px solid #2a1c10;border-radius:3px;overflow:hidden;opacity:0;transition:opacity .1s}
#p-cast.on{opacity:1}#pc-fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(180deg,#ffe58a,#d8a020)}#pc-name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;text-shadow:0 1px 2px #000}
#p-buffs{display:flex;gap:3px;min-height:26px;pointer-events:auto}#p-buffs .bi{position:relative;width:26px;height:26px}#p-buffs canvas{width:26px;height:26px}
#hotbar{display:flex;gap:6px;padding:6px 8px;background:linear-gradient(180deg,rgba(32,22,46,.92),rgba(12,8,20,.92));border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.7),inset 0 0 0 1px rgba(232,195,90,.12)}
.hb{position:relative;width:60px;height:60px;border-radius:7px;cursor:pointer}
.hb canvas{width:60px;height:60px;border-radius:7px;display:block}
.hb .key{position:absolute;left:3px;top:1px;font-size:12px;font-weight:900;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000,0 0 3px #000}
.hb .cdov{position:absolute;inset:0;border-radius:7px;background:conic-gradient(rgba(5,3,10,.78) var(--p,0deg),rgba(0,0,0,0) 0);pointer-events:none}
.hb .gcd{position:absolute;inset:0;border-radius:7px;background:conic-gradient(rgba(255,255,255,.25) var(--g,0deg),rgba(0,0,0,0) 0);pointer-events:none}
.hb .cdt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:#fff;text-shadow:0 0 4px #000,0 0 4px #000;pointer-events:none}
.hb .cost{position:absolute;right:3px;bottom:1px;font-size:10px;font-weight:900;color:#9fd0ff;text-shadow:0 0 3px #000,0 0 3px #000}
.hb.energy .cost{color:#ffe070}
.hb.nores canvas{filter:brightness(.55) saturate(.6) hue-rotate(-10deg)}
.hb.range:after{content:'';position:absolute;inset:0;border-radius:7px;box-shadow:inset 0 0 0 2px rgba(255,60,60,.9),inset 0 0 14px rgba(255,0,0,.55);pointer-events:none}
.hb.cast:after{content:'';position:absolute;inset:-2px;border-radius:9px;box-shadow:0 0 0 2px var(--gold),0 0 14px rgba(255,200,80,.9);pointer-events:none}
.hb.press{animation:hbp .18s}@keyframes hbp{0%{transform:scale(.88);filter:brightness(1.8)}100%{transform:none}}
.hb.ready-flash:before{content:'';position:absolute;inset:-3px;border-radius:9px;border:2px solid #fff;animation:rdy .5s forwards;pointer-events:none}@keyframes rdy{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
#p-target{font-size:12px;color:var(--txt);text-shadow:0 1px 3px #000;pointer-events:none}
#btn-menu{position:absolute;right:12px;top:12px}
#pingbox{position:absolute;right:12px;bottom:8px;font-size:11px;color:var(--dim);pointer-events:none}

/* résultats */
#screen-results{display:flex;align-items:center;justify-content:center;background:rgba(3,1,8,.55)}
.results{width:min(780px,94vw);padding:24px 28px;text-align:center}
.results h2{font-family:var(--font);font-size:min(10vh,72px);font-weight:900;letter-spacing:.14em;line-height:1}
.results h2.win{background:linear-gradient(180deg,#fff2b8,#e8c35a 50%,#9c6a1c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 20px rgba(255,190,60,.5))}
.results h2.lose{color:#c23a30;text-shadow:0 0 24px rgba(220,30,20,.6)}
#res-sub{color:var(--dim);margin:8px 0 14px;font-size:15px}
#res-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}
#res-table th{font-family:var(--font);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold2);padding:4px 6px;border-bottom:1px solid var(--line)}
#res-table td{padding:6px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle}
#res-table .nm{display:flex;align-items:center;gap:8px;font-family:var(--font);font-weight:700}#res-table canvas{width:30px;height:30px;border-radius:5px}
.meter{position:relative;height:16px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;min-width:120px}.meter>div{position:absolute;inset:0 auto 0 0}.meter span{position:absolute;inset:0;padding:0 6px;display:flex;align-items:center;font-size:11px;font-weight:700;text-shadow:0 1px 2px #000}
.award{display:inline-block;font-size:10px;padding:1px 6px;border-radius:8px;background:rgba(232,195,90,.2);color:var(--gold);margin-left:4px;font-family:var(--ui)}
.res-actions{display:flex;gap:10px;margin-top:18px;justify-content:center}.res-actions .btn.big{width:auto;min-width:230px}

/* modales */
.modal{position:absolute;inset:0;background:rgba(2,0,6,.65);display:flex;align-items:center;justify-content:center;z-index:50}
.modal-box{width:min(620px,94vw);max-height:92vh;overflow:auto;padding:20px 24px;display:flex;flex-direction:column;gap:10px}.modal-box.small{width:360px}
.modal-box h3{font-family:var(--font);font-size:24px;color:var(--gold);letter-spacing:.08em}.modal-box h4{font-family:var(--font);color:var(--gold2);margin-top:6px;letter-spacing:.1em;text-transform:uppercase;font-size:13px}
.modal-box ul{padding-left:20px;line-height:1.55;color:#d8cdb8;font-size:13px}
.help-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px}.help-grid b{color:var(--gold);font-family:var(--font)}
.slider{display:flex;flex-direction:column;gap:3px;font-size:13px}.slider input{width:100%;accent-color:#e8c35a}
#tooltip{position:fixed;z-index:100;max-width:300px;pointer-events:none;padding:9px 12px;border:1px solid var(--gold2);border-radius:7px;background:rgba(10,6,18,.97);box-shadow:0 6px 24px #000;font-size:12.5px;line-height:1.4}
#tooltip .tt-n{font-family:var(--font);font-weight:900;font-size:15px;color:var(--gold)}#tooltip .tt-m{color:var(--gold2);font-size:11px;margin:2px 0 4px}#tooltip .tt-d{color:#d8cdb8}
#soundgate{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:6px 16px;border-radius:16px;background:rgba(20,14,34,.85);border:1px solid var(--gold2);color:var(--gold);font-size:13px;pointer-events:none;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.5}}
@media (max-height:700px){.logo h1 .l-ratl{font-size:12vh}.menu{gap:7px;padding:12px}.hb,.hb canvas{width:52px;height:52px}#subtitle{bottom:200px}}
@media (max-width:1000px){#screen-lobby{grid-template-columns:1fr}#party{width:190px}#threat{display:none}#class-grid{grid-template-columns:repeat(4,1fr)}}

.lobby-bottom .btn.big{font-size:15px;padding:12px 10px}
.tl.aggro>span>span:first-child:before{content:'⚔ '}

/* Raid tactique : priorité aux consignes et aux capacités. */
#raid-advice{position:absolute;top:145px;left:50%;transform:translateX(-50%);max-width:650px;padding:10px 18px;border:1px solid #b98b45;border-radius:6px;background:#17101eef;color:#ffe4aa;font:600 14px var(--ui);text-align:center;pointer-events:none}
#raid-advice:empty,#raid-advice[hidden]{display:none}
#raid-advice.danger{background:#361514f0;border-color:#ff795b;color:#fff1de}#raid-advice.good{border-color:#8ce5c1;color:#b7ffe0}
#class-mechanic{padding:6px 14px;border-radius:5px;background:#17101eea;color:#d6c9b3;font:600 13px var(--ui)}#class-mechanic[hidden]{display:none}
#class-mechanic.primed{color:#ffe0a1;border:1px solid #e99842}
.hb{padding:0;border:1px solid #8b7049;background:#19121e;color:#fff;height:80px;font-family:var(--ui)}
.hb canvas{width:58px;height:58px}.hb-name{position:absolute;top:61px;left:-3px;right:-3px;font-size:9px;line-height:10px;text-align:center;color:#eee3cf}
.hb.empowered{outline:2px solid #ffc669;box-shadow:0 0 22px #fa8b3670}.hb:focus-visible,.ccard:focus-visible{outline:3px solid #fff4bf;outline-offset:3px}
.ccard{color:var(--txt);font-family:var(--ui)}
.pf-name,.b-name{font-family:var(--ui)}.pf-buffs .bi,.pf-buffs canvas{width:20px;height:20px}.bi .stk{font-size:12px}
#res-coach{font-size:14px;line-height:1.6;margin-top:16px;color:#e6d8b7}.results{width:min(1000px,96vw)}
@media(max-width:700px){#party{top:115px;left:6px;transform:none;width:116px;gap:3px}.pf{gap:3px;padding:3px}.pf canvas.pf-icon{width:22px;height:22px}.pf-name{font-size:10px}.pf-buffs{min-height:0}#bossframe{width:calc(100vw - 85px)}#raid-advice{top:80px;width:90vw;font-size:12px}#screen-lobby{overflow:auto}.lobby-left{max-height:none}#playerbar{bottom:6px}.pbars{width:min(372px,94vw)}#class-mechanic{font-size:11px;text-align:center}.credits{max-width:90vw}.results{overflow:auto;max-height:95vh}#res-table{font-size:11px}.meter{min-width:60px}}

.hb .cost{bottom:23px}.hb .cdov,.hb .gcd{bottom:20px}

/* Interface de raid : métal sombre, accent bronze, cadres compacts. */
:root{--panel:#13171ef2;--line:#55534a;--gold:#ddc187;--gold2:#b7a17a;--txt:#e8e7e3;--dim:#a3abb5}
.panel{border-radius:5px;background:linear-gradient(#20252ef7,#10141bf7);border-color:#55534a;box-shadow:0 12px 36px #0008,inset 0 0 0 1px #090c11}
.btn{border-radius:3px;font-family:var(--ui);letter-spacing:.02em;background:linear-gradient(#343c48,#1e252e);border-color:#626871;font-weight:600}
.btn.gold{background:linear-gradient(#bda16b,#806439);border-color:#dcc18a;color:#fff8e8;text-shadow:0 1px 3px #0008}
.lbl{font-family:var(--ui);font-size:11px;letter-spacing:.12em;color:#b7a98c}.role{font-family:var(--ui)}
#bossframe{top:18px;width:min(540px,55vw)}.b-name{font:600 15px var(--ui);letter-spacing:0;margin-bottom:5px}.b-bar{height:20px;border-radius:2px}.b-fill{background:linear-gradient(#b8493e,#752b28)}.b-bar span{font-size:11px}.b-cast{margin:5px 0 0;height:20px;border-radius:2px}.b-extra{font-size:11px}
#party{width:175px;left:18px;top:45%;gap:5px;transform:translateY(-45%)}.pf{background:#10151ded;border-color:#434a55;border-radius:3px;padding:5px;gap:5px}.pf canvas.pf-icon{width:30px;height:30px;border-radius:2px}.pf-name{font-size:11px}.pf .bar{height:12px;border-radius:1px}.pf .bar.r{height:3px}.pf-buffs{min-height:0}.pf.sel{box-shadow:inset 2px 0 #e0c58d;border-color:#c4aa75}.pf.aggro{box-shadow:inset 2px 0 #e35e4b;border-color:#b44f43}
#threat{width:150px;right:18px;top:95px;background:#10151ddb;border-color:#434a55;border-radius:3px}.t-title{font:600 10px var(--ui)}.tl{font-size:10px;height:14px}
#raid-advice{top:119px;font-size:13px;border-radius:3px;background:#131a23eb;padding:8px 16px;max-width:560px}
#playerbar{bottom:17px;gap:4px}.pbars{width:350px}.pb{height:17px;border:1px solid #0b1015;border-radius:2px;box-shadow:0 0 0 1px #434a55}.pb.res{height:9px}.pb span{font-size:11px}.pb.res span{font-size:9px}
#class-mechanic{background:#10151de8;font-size:12px;border-radius:3px}#p-buffs{min-height:22px}#p-cast{height:17px;width:350px;border-radius:2px}
#hotbar{border-radius:4px;padding:5px;gap:5px;border-color:#6b6250;background:linear-gradient(#252a30ed,#0b1018ed);box-shadow:0 3px 16px #0009}
.hb{width:64px;height:78px;border-radius:3px;border-color:#7c7565;background:#0c1119}.hb canvas{width:62px;height:58px;border-radius:2px}.hb-name{top:60px;left:0;right:0;font-size:9px;line-height:9px}.hb .key{left:4px;top:2px;font-size:13px}.hb .cost{right:4px;bottom:22px;font-size:10px}.hb .cdt{font-size:22px;bottom:18px}.hb .cdov,.hb .gcd{border-radius:2px}.hb.empowered{outline:1px solid #ffca6b;box-shadow:0 0 14px #eb973755}
#p-target{font-size:11px;color:#bec5cb}.b-name,#p-target,.pf-name{text-shadow:0 1px 2px #000}
#screen-lobby{grid-template-columns:330px 1fr;gap:18px;padding:24px}.lobby-right{max-height:calc(100vh - 48px);overflow:auto}#class-grid{grid-template-columns:repeat(8,minmax(65px,1fr));gap:6px}.ccard{border-radius:3px;background:#151b24;border:1px solid #48505c}.ccard.sel{border-color:#d7bb7d;background:#383226}.cn{font-family:var(--ui);font-size:12px}.code{font-family:var(--ui);font-size:30px;text-shadow:none;letter-spacing:.16em}
#spec-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 16px}.spec-choice{border:1px solid #48505c;background:#141b24;color:#e0e6e9;text-align:left;padding:12px;cursor:pointer;border-radius:3px}.spec-choice b{display:block;color:#dec492;font-size:14px;margin-bottom:5px}.spec-choice span{font-size:12px;line-height:1.45;color:#b0bac5}.spec-choice.selected{border-color:#d7bb7d;box-shadow:inset 3px 0 #d7bb7d;background:#292820}.spec-choice:focus-visible{outline:2px solid white}.cd-head h3{font-family:var(--ui);font-size:20px}.abl .an{font-family:var(--ui)}
@media(max-width:1000px){#screen-lobby{grid-template-columns:1fr;overflow:auto}.lobby-right{max-height:none}#class-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){#party{width:105px;top:175px;left:6px;transform:none}.pf canvas.pf-icon{display:none}.pf-buffs .bi,.pf-buffs canvas{width:15px;height:15px}#bossframe{width:calc(100vw - 90px);left:8px;transform:none}.b-name{font-size:12px}#raid-advice{top:105px;width:92vw;font-size:11px}#spec-picker{grid-template-columns:1fr}#screen-lobby{padding:12px}#hotbar{gap:3px}.hb{width:57px}.hb canvas{width:55px}#class-mechanic{max-width:94vw;font-size:10px}.pbars,#p-cast{width:315px}}
#b-debuffs .bi{position:relative;width:18px;height:18px;flex:none}#b-debuffs img{display:block;width:18px;height:18px}#subtitle{font:italic 13px var(--ui);max-width:520px;background:#10151dba;bottom:250px;padding:6px 12px}

/* Listes déroulantes natives lisibles (salon) : fond sombre, texte clair, sélection or */
select{color-scheme:dark;background-color:#0b0712;color:var(--txt)}
select option,select optgroup{background-color:#120c1d;color:#f3ead6}
select option:checked{background:#6b5226 linear-gradient(#6b5226,#6b5226);color:#fff3d2}
select option:disabled{color:#8f8570}