/* ===== Passe visuelle 1.6 : textures, cadres, éclairage — thème bleu nuit + or ===== */
:root{--ui-tex:url(img/ui.webp);--gold-hi:#f4dca0;--navy:#0a1020;--navy2:#141c33}
/* titre : illustration d'accueil */
#splash{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s;overflow:hidden;background:#05030a}
#splash::before{content:'';position:absolute;inset:-3%;background:url(img/splash.webp) 62% 50%/cover no-repeat;animation:splashDrift 40s ease-in-out infinite alternate;filter:saturate(1.08) contrast(1.04)}
#splash::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,3,10,.94) 0,rgba(4,3,10,.74) 26%,rgba(4,3,10,.2) 58%,rgba(4,3,10,0) 78%),linear-gradient(0deg,rgba(4,3,10,.8),rgba(4,3,10,0) 30%),radial-gradient(ellipse at 60% 45%,rgba(0,0,0,0) 50%,rgba(2,1,6,.7) 100%)}
@keyframes splashDrift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.07) translate(-1.2%,-.8%)}}
body[data-screen=title] #splash{opacity:1}
body[data-screen=title] #stage{opacity:0}
#stage{transition:opacity .4s}
/* panneaux : plaque de métal bleu nuit, filet or intérieur, lueur chaude */
.panel,.menu,#hotbar,#spells,.pf,#bossframe .b-bar,#meter,#pvp-top,.pt-team{background-image:linear-gradient(180deg,rgba(24,30,54,.9),rgba(8,10,22,.94)),var(--ui-tex);background-size:auto,256px 256px;background-blend-mode:normal,normal}
.panel{border:1px solid #8a6f36;box-shadow:0 0 0 1px #000,0 12px 44px rgba(0,0,0,.65),inset 0 0 0 1px rgba(244,220,160,.14),inset 0 1px 0 rgba(255,238,190,.25),inset 0 0 60px rgba(0,0,0,.45)}
.panel,.menu{outline:1px solid rgba(232,195,90,.2);outline-offset:-5px}
/* titres et typographie */
h1,h2,h3,.lbl,.room-head .lbl{font-family:var(--font);letter-spacing:.06em}
.lbl{color:#c9a75a;text-shadow:0 1px 2px #000}
.btn{background:linear-gradient(180deg,#34406a,#161e3a);border-color:#8a6f36;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -8px 12px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.55)}
.btn.gold{background:linear-gradient(180deg,#fbe39a 0,#d8a93a 38%,#a87a22 62%,#7a5414);border-color:#ffe9a8;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -6px 10px rgba(80,40,0,.35),0 3px 12px rgba(0,0,0,.55),0 0 18px rgba(232,170,60,.25)}
.btn:hover{filter:brightness(1.18)}
/* barre d'action : cadre gravé et légèrement lumineux */
#hotbar,#spells{background-image:linear-gradient(180deg,rgba(40,48,78,.92),rgba(8,10,20,.95)),var(--ui-tex);border:1px solid #b79a58;box-shadow:0 0 0 2px #05070d,0 0 0 3px #6a5a38,0 10px 34px #000b,inset 0 1px 0 rgba(244,220,160,.35),inset 0 0 24px rgba(0,0,0,.5);border-radius:6px}
.hb,.spell{background:radial-gradient(circle at 50% 35%,#222a44,#080b16);border-color:#a8905c;border-radius:5px;box-shadow:inset 0 0 0 1px #05070d,inset 0 0 10px rgba(0,0,0,.7),0 2px 5px #000a}
.hb.ready,.hb:not(.cd):hover{box-shadow:inset 0 0 0 1px #05070d,0 0 10px rgba(244,220,160,.45),0 2px 5px #000a}
.hb canvas{filter:drop-shadow(0 1px 1px #000)}
/* cadres de groupe / boss */
.pf{border:1px solid #4a4a6a;border-left:3px solid #6a5a38;box-shadow:0 3px 10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07)}
.pf.sel{border-color:var(--gold);box-shadow:0 0 12px rgba(232,195,90,.5),inset 0 1px 0 rgba(255,255,255,.1)}
.pf .bar{border-radius:2px;box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
.pf .hp>div{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 4px rgba(0,0,0,.3)}
#bossframe .b-bar,.b-bar{border:1px solid #b79a58;border-radius:3px;box-shadow:0 0 0 1px #05070d,0 4px 14px #000a,inset 0 0 8px #000}
.b-fill{background:linear-gradient(180deg,#e0685a 0,#b8493e 40%,#6a2420 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.b-name{text-shadow:0 2px 4px #000,0 0 14px rgba(232,195,90,.35);color:var(--gold-hi);font-family:var(--font)!important}
/* barre de PV/mana joueur */
.res,.bar-hp,#hp-bar{box-shadow:inset 0 1px 3px #000}
/* fiches de classe / salon */
.ccard{background-image:linear-gradient(180deg,rgba(30,38,66,.9),rgba(8,10,20,.92)),var(--ui-tex);background-size:auto,256px 256px;border-color:#6a5a38;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 8px #0008}
.ccard.sel,.ccard:hover{border-color:var(--gold);box-shadow:0 0 14px rgba(232,195,90,.45),inset 0 0 18px rgba(232,195,90,.12)}
.slot{background-image:linear-gradient(180deg,rgba(40,48,80,.5),rgba(8,10,20,.6));box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
/* infobulles */
#tooltip,.tooltip,.tip{background-image:linear-gradient(180deg,rgba(26,34,60,.97),rgba(6,8,18,.98)),var(--ui-tex);border:1px solid #b79a58;box-shadow:0 8px 28px #000c,inset 0 1px 0 rgba(244,220,160,.3)}
/* résultats */
#screen-results .panel{box-shadow:0 0 0 1px #000,0 0 80px rgba(232,170,60,.12),0 12px 44px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,238,190,.3)}
/* classement */
body:has(.board){background:radial-gradient(ellipse at 18% 0,rgba(70,90,150,.25),transparent 55%),radial-gradient(ellipse at 100% 40%,rgba(180,120,50,.12),transparent 60%),#070a14}
header{background:linear-gradient(180deg,rgba(6,8,18,.96),rgba(6,8,18,.7)),url(img/splash.webp) 50% 40%/cover;border-bottom:1px solid #8a6f36!important}
.hero{position:relative}
.board{background-image:linear-gradient(145deg,rgba(22,30,54,.94),rgba(8,10,20,.96)),var(--ui-tex);background-size:auto,256px 256px;border-color:#8a6f36!important;box-shadow:0 14px 50px #000b,inset 0 1px 0 rgba(244,220,160,.25)}
h1{text-shadow:0 2px 0 #3a2008,0 0 22px rgba(232,170,60,.3)}
.crest{background:linear-gradient(#b8943c40,#0a1020);border-color:#b79a58;box-shadow:0 0 0 5px rgba(183,154,88,.08),0 0 30px rgba(232,170,60,.18),inset 0 1px rgba(244,220,160,.4)}
.play a{background-image:linear-gradient(180deg,rgba(30,38,66,.9),rgba(8,10,20,.92)),var(--ui-tex)}

/* Salon : la colonne de gauche reste entièrement visible, la liste défile si besoin */
#screen-lobby .lobby-left{max-height:calc(100vh - 48px);overflow:hidden}
#screen-lobby #slots{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:2px}
#screen-lobby .lobby-actions,#screen-lobby .lobby-bottom,#screen-lobby .room-head{flex:0 0 auto}

/* ===== Anti-débordement : barre d'action, infobulles, cartes de classe et de sorts ===== */
#hotbar{gap:6px;padding:7px 8px;max-width:calc(100vw - 16px)}
#hotbar .hb{width:72px;height:92px;padding:0;overflow:visible;display:block;font-family:var(--ui);box-sizing:border-box;flex:0 1 72px;min-width:0}
#hotbar .hb canvas{position:absolute;left:3px;top:3px;width:calc(100% - 6px);height:62px;border-radius:4px}
#hotbar .hb .key{left:3px;top:3px;min-width:16px;max-width:calc(100% - 8px);text-align:center;font-size:13px;line-height:15px;padding:0 4px;overflow:hidden;white-space:nowrap}
#hotbar .hb .cost{right:5px;top:50px;bottom:auto;font-size:11px;line-height:12px;max-width:calc(100% - 12px);overflow:hidden;white-space:nowrap;text-overflow:clip}
#hotbar .hb .cdov,#hotbar .hb .gcd{inset:3px 3px auto 3px;height:62px;bottom:auto;border-radius:4px}
#hotbar .hb .cdt{inset:3px 3px auto 3px;height:62px;bottom:auto;font-size:clamp(14px,1.7vw,22px);white-space:nowrap;overflow:hidden}
#hotbar .hb .hb-name{position:absolute;left:2px;right:2px;top:67px;height:22px;box-sizing:border-box;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:9.5px;line-height:11px;text-align:center;color:#efe4cc;overflow-wrap:break-word;word-break:normal;hyphens:auto;text-shadow:0 1px 1px #000}
@media (max-width:1100px),(max-height:700px){#hotbar .hb{width:64px;height:84px;flex-basis:64px}#hotbar .hb canvas,#hotbar .hb .cdov,#hotbar .hb .gcd,#hotbar .hb .cdt{height:55px}#hotbar .hb .cost{top:44px;font-size:10px}#hotbar .hb .hb-name{top:60px;font-size:9px;line-height:10px;height:20px}}
@media (max-width:700px){#hotbar{gap:3px;padding:5px}#hotbar .hb{width:calc((100vw - 52px)/5);flex-basis:auto}}
#tooltip{max-width:min(320px,calc(100vw - 16px));box-sizing:border-box;overflow-wrap:break-word;word-break:normal}
#tooltip .tt-h{min-width:0}#tooltip .tt-h>div{min-width:0}
#tooltip .tt-n,#tooltip .tt-m,#tooltip .tt-d{overflow-wrap:break-word}
.ccard .cn{flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:4px 5px 5px}
.ccard .cn>span:first-child,.ccard .cn>b{max-width:100%;white-space:normal;overflow-wrap:break-word;line-height:1.1;font-size:clamp(11px,.9vw,13px);display:block}
.ccard .role{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;font-size:9px;padding:1px 5px;display:inline-block}
#spec-picker>*{min-width:0}#spec-picker *{overflow-wrap:break-word}
#class-detail .ab,#class-detail li,#class-detail .abil{min-width:0}
#class-detail *{overflow-wrap:break-word}
.pf-name,.pf .nm,.b-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.slot *{min-width:0}
button.btn,.btn{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.btn small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#pres-txt,#pmana-txt,.pb span,.pb b{line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ---- finition v1.6 : panneaux, titres, boutons ---- */
.panel,.menu{box-shadow:0 14px 48px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,225,160,.22),inset 0 0 0 1px rgba(255,255,255,.04),inset 0 -40px 60px -40px rgba(0,0,0,.55)}
.panel h2,.menu h2,.lobby-left .code,#res-title{text-shadow:0 2px 0 rgba(0,0,0,.7),0 0 18px rgba(232,195,90,.18)}
.btn{position:relative;overflow:hidden;transition:filter .15s,transform .1s,box-shadow .15s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%);transition:transform .5s}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(1px)}
#screen-lobby .slot,.ccard{transition:transform .12s,box-shadow .15s,border-color .15s}
.ccard:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 0 1px rgba(232,195,90,.55)}
.ccard canvas,.ccard img{filter:drop-shadow(0 3px 3px rgba(0,0,0,.6))}
::selection{background:rgba(232,195,90,.35)}

/* ---- sélection de classe v1.6.1 : cartes égales, noms sur une ligne, badges alignés ---- */
.lobby-right,#class-grid{container-type:inline-size}
#class-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(6px,.9cqi,12px);align-items:stretch;padding:2px}
.ccard{display:flex;flex-direction:column;align-items:stretch;padding:0;min-width:0;border-radius:6px;text-align:center;background-clip:padding-box;position:relative}
.ccard canvas{width:100%;height:auto;aspect-ratio:1/1;flex:0 0 auto;object-fit:contain;object-position:50% 50%;background:none}
.ccard .cn{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:5px;flex:1 1 auto;padding:5px 4px 7px;min-width:0;margin-top:auto;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.35))}
.ccard .cn>span:first-child{display:block;max-width:100%;white-space:nowrap;overflow:visible;overflow-wrap:normal;word-break:keep-all;hyphens:none;line-height:1.15;text-align:center;font-size:var(--cn-fs,clamp(10px,calc((100cqi - 7 * 8px) / 8 / 7.6),15px));letter-spacing:.01em}
.ccard .role{flex:0 0 auto;max-width:100%;margin-top:auto;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(8.5px,calc((100cqi - 56px) / 8 / 9.5),11px);line-height:14px;height:14px;padding:0 6px;border-radius:7px;display:block}
.ccard:hover{transform:translateY(-3px)}
.ccard.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 18px rgba(232,195,90,.5),inset 0 0 22px rgba(232,195,90,.16);background-image:linear-gradient(180deg,rgba(70,58,28,.92),rgba(14,12,20,.95)),var(--ui-tex)}
.ccard.sel::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.ccard:not(.sel):hover{border-color:rgba(232,195,90,.7)}
@container (max-width:700px){#class-grid{grid-template-columns:repeat(auto-fill,minmax(92px,150px));justify-content:center}.ccard .cn>span:first-child{font-size:var(--cn-fs,clamp(11px,calc(min(150px,(100cqi - 3 * 8px) / 4) / 8),15px))}.ccard .role{font-size:10px}}
@media (max-width:1000px){#class-grid{grid-template-columns:repeat(auto-fill,minmax(92px,150px));justify-content:center}}
/* choix de spécialisation : portrait à gauche, texte à droite, jamais coupé au milieu d'un mot */
#spec-picker{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px}
.spec-choice{display:grid;grid-template-columns:62px minmax(0,1fr);column-gap:12px;row-gap:3px;align-items:start;align-content:start;min-width:0;padding:10px 12px;border-radius:6px;transition:border-color .15s,box-shadow .15s,transform .12s}
.spec-choice .spec-skin{grid-row:1/3;grid-column:1;width:62px;height:62px;margin:0;float:none;border-radius:6px;background:rgba(0,0,0,.25)}
.spec-choice b{grid-column:2;margin:0;font-size:clamp(13px,.95vw,15px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spec-choice span{grid-column:2;overflow-wrap:break-word;word-break:normal;hyphens:manual}
.spec-choice:hover{border-color:rgba(232,195,90,.7);transform:translateY(-1px)}
.spec-choice.selected{box-shadow:inset 3px 0 var(--gold),0 0 14px rgba(232,195,90,.25)}
@media (max-width:700px){.slot .sel-col{min-width:0}.slot .sel-col .dd-btn{min-width:76px;max-width:100px}.slot .x{margin-left:0;padding:0 2px}.slot{gap:6px}}
.dd-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* compagnons bots (salon raid) : classe + spécialisation côte à côte sous le nom */
.slot.bot-edit{flex-wrap:wrap;row-gap:6px;align-items:center}
.slot.bot-edit>div:nth-child(2){flex:1 1 0;min-width:0}
.slot.bot-edit .sel-col{order:5;flex:1 1 100%;flex-direction:row;gap:6px;width:100%;min-width:0;margin-left:0}
.slot.bot-edit .sel-col .dd,.slot.bot-edit .sel-col select{flex:1 1 0;min-width:0}
.slot.bot-edit .sel-col .dd-btn{min-width:0;max-width:none;width:100%;padding:4px 8px;font-size:12px;box-sizing:border-box}
.slot.bot-edit .x{order:3}
.slot .sel-col .dd-text{min-width:0}