:root{
  --gold:#c9a227; --gold-dim:#7a6418; --blood:#a4161a; --bone:#d8cdb6;
  --stone:#15120e; --stone2:#221c14; --panel:#100d09;
  --magic:#5d8bff; --rare:#ffd24a; --legend:#ff8c2e; --common:#a8a8a8;
  --hp:#b1121b; --mana:#1d4ed8; --xp:#c9a227;
}
*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:Georgia,'Times New Roman',serif;color:var(--bone)}
canvas#game{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;cursor:crosshair}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%)}
#bloodfx{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center, transparent 40%, rgba(164,22,26,.85) 100%);opacity:0;transition:opacity .12s}
#lowhp{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px 40px rgba(164,22,26,.0);opacity:0}

/* ============ HUD ============ */
#hud{position:absolute;inset:0;pointer-events:none;font-size:14px}
.orb{position:absolute;bottom:14px;width:104px;height:104px;border-radius:50%;border:3px solid #3a2e16;
  background:#0a0806;overflow:hidden;box-shadow:0 0 18px rgba(0,0,0,.9), inset 0 0 22px #000}
.orb .fill{position:absolute;left:0;right:0;bottom:0;transition:height .18s}
.orb .gloss{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.32), transparent 42%)}
.orb .val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:bold;
  text-shadow:0 1px 3px #000, 0 0 6px #000;font-size:17px;letter-spacing:1px}
#orbHP{left:18px}
#orbHP .fill{background:linear-gradient(180deg,#e23535,#7e0c12 70%,#4d060a)}
#orbMP{right:18px}
#orbMP .fill{background:linear-gradient(180deg,#4f7bff,#16308f 70%,#0a1a52)}

#xpwrap{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:min(560px,46vw);height:10px;
  border:1px solid #4a3a14;background:#0a0806;border-radius:4px;overflow:hidden}
#xpbar{height:100%;width:0%;background:linear-gradient(90deg,#7a6418,var(--gold));box-shadow:0 0 8px var(--gold)}
#lvltag{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:var(--gold);
  font-size:13px;letter-spacing:2px;text-shadow:0 0 8px #000;text-transform:uppercase}

#beltwrap{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.beltslot{width:46px;height:46px;border:2px solid #4a3a14;background:linear-gradient(180deg,#1a140c,#0c0906);
  border-radius:6px;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;
  box-shadow:inset 0 0 10px #000;font-size:11px}
.beltslot .key{position:absolute;top:-8px;left:-6px;background:#241c10;border:1px solid var(--gold-dim);
  border-radius:4px;padding:0 4px;font-size:10px;color:var(--gold)}
.beltslot .cnt{position:absolute;bottom:1px;right:4px;font-weight:bold;color:#fff;text-shadow:0 0 4px #000}
.beltslot .ico{font-size:22px;filter:drop-shadow(0 0 4px rgba(0,0,0,.8))}

#topbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);text-align:center}
#dlvl{color:var(--bone);font-size:15px;letter-spacing:3px;text-transform:uppercase;text-shadow:0 0 10px #000,0 2px 4px #000}
#goldtag{color:var(--gold);font-size:13px;margin-top:2px;text-shadow:0 0 6px #000}

#bossbarwrap{position:absolute;top:54px;left:50%;transform:translateX(-50%);width:min(620px,60vw);display:none}
#bossname{text-align:center;color:#ff5d4a;letter-spacing:3px;font-size:14px;text-transform:uppercase;text-shadow:0 0 10px #000;margin-bottom:3px}
#bossbarbg{height:14px;border:1px solid #5e1410;background:#120505;border-radius:3px;overflow:hidden;box-shadow:0 0 14px rgba(0,0,0,.8)}
#bossbar{height:100%;width:100%;background:linear-gradient(180deg,#ff4536,#7e0c12);transition:width .15s}

#minimap{position:absolute;top:14px;right:14px;border:2px solid #5a4620;border-radius:8px;background:rgba(8,6,4,.85);
  box-shadow:0 0 18px rgba(0,0,0,.85), inset 0 0 0 1px rgba(232,195,90,.12)}
#minimap::after{content:''}
#mmHint{position:absolute;top:220px;right:14px;width:200px;text-align:center;color:#9a8a66;font-size:10px;
  letter-spacing:1px;text-shadow:0 1px 2px #000;pointer-events:none}
#hint{position:absolute;top:52%;left:50%;transform:translate(-50%,0);color:#fff;text-shadow:0 0 8px #000,0 2px 4px #000;
  font-size:15px;letter-spacing:1px;opacity:0;transition:opacity .15s;pointer-events:none}
#keysrow{position:absolute;top:14px;left:14px;color:#8d8268;font-size:11px;letter-spacing:1px;line-height:1.7;text-shadow:0 1px 3px #000}

#toasts{position:absolute;top:96px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{background:rgba(12,9,5,.92);border:1px solid var(--gold-dim);color:var(--bone);padding:7px 18px;border-radius:4px;
  font-size:14px;letter-spacing:1px;box-shadow:0 0 18px rgba(0,0,0,.8);animation:toastin .25s ease-out}
.toast.quest{border-color:var(--gold);color:var(--gold)}
.toast.legend{border-color:var(--legend);color:var(--legend)}
@keyframes toastin{from{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:none}}

#dmgnums{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dmgnum{position:absolute;font-weight:bold;font-size:18px;text-shadow:0 0 5px #000,0 2px 2px #000;animation:dmgup .8s ease-out forwards}
@keyframes dmgup{0%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-60px) scale(1.25)}}

/* ============ PANELS ============ */
.panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(180deg,#17120b,#0c0906);
  border:2px solid var(--gold-dim);border-radius:8px;box-shadow:0 0 60px rgba(0,0,0,.95), inset 0 0 40px rgba(0,0,0,.7);
  display:none;z-index:30;padding:0;max-height:92vh;overflow:auto}
.panel.open{display:block}
.phead{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #3a2e16;
  background:linear-gradient(180deg,#241c10,#17120b)}
.phead h2{font-size:18px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;font-weight:normal;text-shadow:0 0 10px rgba(201,162,39,.35)}
.pclose{pointer-events:auto;cursor:pointer;color:#8d8268;border:1px solid #3a2e16;border-radius:4px;padding:2px 10px;background:#0c0906;font-size:13px}
.pclose:hover{color:var(--gold);border-color:var(--gold)}

/* Inventaire */
#invPanel{width:min(880px,94vw)}
#invBody{display:flex;gap:18px;padding:18px;flex-wrap:wrap}
#charCol{width:360px;flex-shrink:0}
#statsBox{border:1px solid #3a2e16;border-radius:6px;padding:10px 14px;background:rgba(0,0,0,.35);font-size:13px;line-height:1.85}
#statsBox b{color:var(--gold)}
.statline{display:flex;justify-content:space-between}
.statline span:last-child{color:#e8dfc8}
#charCol{width:380px;flex-shrink:0}
.d2plus{color:#ffd24a;font-style:normal;font-weight:bold;text-shadow:0 0 6px rgba(255,210,74,.5)}
.d2boost{color:#caa030;font-size:11px;margin:4px 0 2px;letter-spacing:.4px}
/* ============ ☎ CONTRÔLES TACTILES (mobile / app) ============ */
#tUI{position:fixed;inset:0;z-index:40;pointer-events:none;display:none;user-select:none;-webkit-user-select:none}
#tLook{position:absolute;inset:0;pointer-events:auto;touch-action:none}
#tUI.panelOpen #tLook,#tUI.panelOpen #tJoy,#tUI.panelOpen .tBtn:not(.tMenu){display:none}
#tJoy{position:absolute;left:26px;bottom:30px;width:128px;height:128px;border-radius:50%;
  border:2px solid rgba(202,160,48,.55);background:radial-gradient(circle,rgba(30,24,12,.42),rgba(10,8,4,.55));
  pointer-events:auto;touch-action:none;box-shadow:0 4px 18px rgba(0,0,0,.5)}
#tStick{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#e8c86a,#8a6a20);border:2px solid #caa030;
  box-shadow:0 3px 10px rgba(0,0,0,.6),inset 0 2px 5px rgba(255,240,190,.5)}
.tBtn{position:absolute;width:56px;height:56px;border-radius:50%;pointer-events:auto;touch-action:none;
  display:flex;align-items:center;justify-content:center;font-size:24px;color:#e8d8a8;
  border:2px solid rgba(202,160,48,.6);background:radial-gradient(circle at 50% 35%,rgba(50,40,18,.72),rgba(12,9,4,.8));
  box-shadow:0 4px 14px rgba(0,0,0,.55);text-shadow:0 0 8px rgba(232,200,106,.5)}
.tBtn.dn{transform:scale(.9);background:radial-gradient(circle at 50% 35%,rgba(120,95,35,.85),rgba(40,30,12,.9));border-color:#ffd24a}
#tFire.tBig{width:82px;height:82px;right:26px;bottom:34px;font-size:36px;border-color:#e8b048;border-width:3px}
#tAct{right:126px;bottom:28px}
#tJump{right:118px;bottom:100px;width:50px;height:50px;font-size:20px}
#tS1{right:34px;bottom:136px;width:52px;height:52px}
#tS2{right:96px;bottom:170px;width:52px;height:52px}
#tS3{right:162px;bottom:180px;width:52px;height:52px}
.tBtn.tSkill{font-family:'Georgia',serif;font-weight:bold;font-size:20px;color:#ffd24a}
#tPotHp{left:34px;bottom:176px;width:50px;height:50px;font-size:20px;border-color:rgba(255,90,110,.65)}
#tPotMp{left:96px;bottom:196px;width:50px;height:50px;font-size:18px;border-color:rgba(90,150,255,.6)}
.tBtn.tMenu{top:10px;width:46px;height:46px;font-size:18px;opacity:.92}
#tInv{right:14px}#tSk{right:70px}#tQ{right:126px}#tMap{right:182px}#tEsc{right:238px}
@media (max-height:420px){ /* petits téléphones en paysage : léger resserrage */
  #tJoy{width:112px;height:112px;left:18px;bottom:20px}
  #tFire.tBig{width:72px;height:72px;bottom:24px}
  #tS3{right:150px;bottom:164px}
}
/* ============ ☎ PANNEAUX COMPACTS EN MODE TACTILE ============ */
/* combiné à l'ajusteur JS (mise à l'échelle plein écran), tout reste visible ET tapable */
html.touchUI .panel{font-size:13px}
html.touchUI .phead{padding:8px 12px}
html.touchUI .phead h2{font-size:15px;letter-spacing:2px}
html.touchUI #invBody{gap:10px;padding:10px}
html.touchUI #bagGrid{grid-template-columns:repeat(8,42px);grid-auto-rows:42px;gap:4px}
html.touchUI #charmBelt{grid-template-columns:repeat(6,42px);grid-auto-rows:42px;gap:4px}
html.touchUI #charCol{width:auto}
html.touchUI #statsBox{font-size:11px;line-height:1.6;padding:8px 10px}
html.touchUI #skillBody{gap:8px;padding:10px}
html.touchUI .stree{min-width:200px;padding:8px}
html.touchUI .d2wrap{max-height:none;overflow:visible}
html.touchUI #shopPanel .phead h2{font-size:14px}
#equipGrid.paperdoll{position:relative;width:380px;height:500px;margin:0 auto 8px;display:block;
  background:radial-gradient(ellipse at 50% 42%,rgba(60,48,24,.28),rgba(10,8,5,.0) 70%);
  border:1px solid #3a2e16;border-radius:10px}
.pdHero{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:102%;width:auto;
  opacity:0.98;pointer-events:none;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.75))}
.pdSlot{position:absolute;width:58px;height:58px;background:rgba(14,11,6,.84);
  border:1px solid #4a3a18;border-radius:7px;display:flex;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.55),inset 0 0 14px rgba(0,0,0,.45)}
.pdSlot:hover{border-color:#c9a227;box-shadow:0 0 14px rgba(201,162,39,.4)}
/* ---- disposition ANATOMIQUE façon Diablo 2 : les slots suivent le corps du héros ---- */
.pdHead {left:50%;top:2px;transform:translateX(-50%)}                                  /* casque : la tête */
.pdNeck {left:calc(50% + 44px);top:52px;width:44px;height:44px}                        /* amulette : au cou, collée au casque */
.pdCape {left:calc(50% - 88px);top:52px;width:44px;height:44px}                        /* cape : sur l'épaule */
.pdArme {left:10px;top:116px;width:60px;height:114px}                                  /* arme : DANS LA MAIN (grand fourreau) */
.pdChest{left:50%;top:116px;transform:translateX(-50%);width:66px;height:66px}        /* armure : le torse */
.pdGants{right:10px;top:116px;width:56px;height:56px}                                  /* gants : l'autre main */
.pdBelt {left:50%;top:204px;transform:translateX(-50%);width:86px;height:44px}        /* ceinture : la taille (large) */
.pdRing1{left:22px;top:254px;width:44px;height:44px}                                   /* anneaux : aux doigts */
.pdRing2{right:22px;top:254px;width:44px;height:44px}
.pdFeet {left:50%;bottom:4px;transform:translateX(-50%)}                               /* bottes : les pieds */
.pdSlot .ph{font-size:9px;line-height:1.15;color:#8a7a55;text-align:center;padding:2px}
.eqslot{border:2px solid #3a2e16;border-radius:6px;background:radial-gradient(circle at 50% 30%, #1d1710, #0a0806);
  display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}
.eqslot .ph{color:#4d4231;font-size:11px;letter-spacing:1px;text-align:center}
#bagCol{flex:1;min-width:380px}
#bagGrid{display:grid;grid-template-columns:repeat(8,52px);grid-auto-rows:52px;gap:5px}
#charmBelt{display:grid;grid-template-columns:repeat(6,52px);grid-auto-rows:52px;gap:5px}
.charmSlot{border:1px solid #4a3a6a;border-radius:4px;background:radial-gradient(circle at 50% 40%,#1a1230,#0d0a14);position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center}
.charmSlot.filled{border-color:#c8a0ff;box-shadow:inset 0 0 10px rgba(200,160,255,.25)}
.charmSlot:hover{border-color:#e0c0ff}
.charmSlot .ph{opacity:.3;font-size:20px}
.bslot{border:1px solid #322817;border-radius:4px;background:#0d0a06;position:relative;cursor:pointer}
.bslot:hover,.eqslot:hover{border-color:var(--gold)}
.iticon{position:absolute;inset:3px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:24px}
.iticon.r0{box-shadow:inset 0 0 8px rgba(150,150,150,.25)}
.iticon.r1{box-shadow:inset 0 0 10px rgba(93,139,255,.5)}
.iticon.r2{box-shadow:inset 0 0 10px rgba(255,210,74,.5)}
.iticon.r3{box-shadow:inset 0 0 12px rgba(255,140,46,.7);animation:legendpulse 1.6s infinite}
@keyframes legendpulse{50%{box-shadow:inset 0 0 18px rgba(255,140,46,.95)}}

#tooltip{position:fixed;z-index:99;display:none;background:rgba(8,6,3,.97);border:1px solid #3a2e16;border-radius:6px;
  padding:10px 14px;max-width:280px;pointer-events:none;box-shadow:0 0 30px #000;font-size:13px;line-height:1.6}
#tooltip .tname{font-size:15px;letter-spacing:1px;margin-bottom:2px}
#tooltip .ttype{color:#7d7259;font-size:11px;text-transform:uppercase;letter-spacing:2px;margin-bottom:6px}
#tooltip .taf{color:#9fc0ff}
#tooltip .tbase{color:#e8dfc8}
#tooltip .tact{margin-top:6px;font-size:11px;color:#6e6350}

/* Arbre de compétences */
#skillPanel{width:min(860px,94vw)}
#skillBody{display:flex;gap:14px;padding:18px;flex-wrap:wrap}
.stree{flex:1;min-width:240px;border:1px solid #3a2e16;border-radius:8px;padding:12px;background:rgba(0,0,0,.3)}
.stree h3{text-align:center;letter-spacing:3px;font-size:14px;text-transform:uppercase;margin-bottom:12px;font-weight:normal}
.stree.guerre h3{color:#ff6b5d}.stree.precision h3{color:#7ddf8a}.stree.arcane h3{color:#7da6ff}
.snode{pointer-events:auto;border:1px solid #3a2e16;border-radius:6px;padding:8px 10px;margin-bottom:10px;cursor:pointer;
  background:linear-gradient(180deg,#16110a,#0b0805);position:relative;transition:border-color .15s}
.snode .sn{font-size:13px;color:var(--bone);letter-spacing:1px}
.snode .sd{font-size:11px;color:#8d8268;margin-top:2px;line-height:1.4}
.snode .sr{position:absolute;top:6px;right:8px;font-size:12px;color:var(--gold)}
.snode.locked{opacity:.38;cursor:not-allowed}
.snode.maxed{border-color:var(--gold);box-shadow:inset 0 0 12px rgba(201,162,39,.18)}
.snode.can:hover{border-color:var(--gold);box-shadow:0 0 10px rgba(201,162,39,.3)}
#skillpts{padding:0 18px 14px;color:var(--gold);letter-spacing:1px;font-size:14px}

/* Quêtes */
#questPanel{width:min(560px,92vw)}
#questBody{padding:16px 18px}
.q{border:1px solid #3a2e16;border-left:3px solid var(--gold-dim);border-radius:4px;padding:10px 14px;margin-bottom:10px;background:rgba(0,0,0,.3)}
.q.done{border-left-color:#3f7c46;opacity:.65}
.q .qn{color:var(--gold);letter-spacing:1px;font-size:14px}
.q.done .qn{color:#7ddf8a}
.q .qd{font-size:12px;color:#a99e84;margin:3px 0}
.q .qp{font-size:12px;color:#e8dfc8}
.qbarbg{height:6px;background:#0a0806;border:1px solid #322817;border-radius:3px;margin-top:5px;overflow:hidden}
.qbar{height:100%;background:linear-gradient(90deg,#7a6418,var(--gold))}

/* ============ ÉCRANS ============ */
.screen{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 120%, #2a0d08 0%, #0a0604 55%, #000 100%)}
.screen h1{font-size:clamp(44px,9vw,96px);letter-spacing:14px;color:var(--gold);font-weight:normal;
  text-shadow:0 0 30px rgba(201,162,39,.4), 0 4px 0 #3a2503, 0 8px 24px #000;margin-bottom:4px}
.screen .sub{color:#a4161a;letter-spacing:6px;text-transform:uppercase;font-size:clamp(12px,1.6vw,17px);margin-bottom:34px;text-shadow:0 0 14px rgba(164,22,26,.6)}
.bigbtn{pointer-events:auto;cursor:pointer;font-family:inherit;font-size:19px;letter-spacing:4px;text-transform:uppercase;color:var(--bone);
  background:linear-gradient(180deg,#2d2212,#15100a);border:2px solid var(--gold-dim);border-radius:6px;padding:14px 52px;
  box-shadow:0 0 24px rgba(0,0,0,.8), inset 0 0 14px rgba(0,0,0,.7);transition:.15s}
.bigbtn:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 30px rgba(201,162,39,.25)}
#ctrlhelp{margin-top:30px;color:#8d8268;font-size:13px;letter-spacing:1px;line-height:2;text-align:center;column-count:2;column-gap:46px}
#ctrlhelp b{color:var(--gold)}
#deathScreen,#victoryScreen{display:none;background:radial-gradient(ellipse at center, rgba(60,5,5,.92), rgba(0,0,0,.97))}
#deathScreen h1{color:#a4161a;text-shadow:0 0 40px rgba(164,22,26,.7)}
#victoryScreen{background:radial-gradient(ellipse at center, rgba(60,45,5,.94), rgba(0,0,0,.97))}
.statline2{color:#a99e84;margin:4px 0;font-size:15px;letter-spacing:1px}
.statline2 b{color:var(--gold)}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}

/* ---- Marchand / Shop ---- */
#shopPanel{width:min(940px,96vw)}
#shopBody{display:flex;gap:16px;padding:16px;flex-wrap:wrap}
.shopcol{flex:1;min-width:300px}
.shopcol h3{color:var(--gold);font-size:15px;letter-spacing:1px;margin:0 0 8px;border-bottom:1px solid #3a2c12;padding-bottom:6px}
.shoprow{display:flex;align-items:center;gap:10px;padding:7px 9px;margin-bottom:5px;background:linear-gradient(180deg,#171209,#0d0a05);
  border:1px solid #33270f;border-radius:4px;cursor:pointer;transition:border-color .12s, background .12s}
.shoprow:hover{border-color:var(--gold-dim);background:linear-gradient(180deg,#1f1810,#120d06)}
.shoprow .ic{font-size:20px;width:26px;text-align:center}
.shoprow .nm{flex:1;font-size:13px}
.shoprow .pr{color:var(--gold);font-weight:bold;font-size:13px;white-space:nowrap}
.shoprow.cant{opacity:.45;cursor:not-allowed}
.shoprow.svc{border-color:#4a3a14}
#shopGold{color:var(--gold);font-weight:bold;font-size:14px;padding:0 18px 4px}
.npcline{color:#b9a26a;font-style:italic;font-size:13px;padding:4px 18px 0}

/* ---- Coffre personnel ---- */
#stashPanel{width:min(880px,94vw)}
#stashBody{display:flex;gap:18px;padding:18px;flex-wrap:wrap}
.stashcol{flex:1;min-width:300px}
.stashcol h3{color:var(--gold);font-size:14px;margin:0 0 8px;letter-spacing:1px}
#stashGrid,#stashBag{display:grid;grid-template-columns:repeat(6,52px);gap:6px}
#stashGrid .bslot,#stashBag .bslot{width:52px;height:52px}
.stashhint{color:#8a7a55;font-size:12px;padding:6px 18px 0;font-style:italic}


/* ---- Sélection de classe ---- */
#clsgrid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:920px;margin:18px 0 6px}
.clscard{width:158px;padding:14px 10px;background:linear-gradient(180deg,#171209,#0d0a05);
  border:2px solid #33270f;border-radius:6px;cursor:pointer;text-align:center;transition:all .15s;pointer-events:auto}
.clscard:hover{border-color:var(--gold-dim);transform:translateY(-3px)}
.clscard.sel{border-color:var(--gold);box-shadow:0 0 22px rgba(201,162,39,.35);background:linear-gradient(180deg,#221a0c,#120d06)}
.clscard .cic{font-size:34px;filter:drop-shadow(0 0 8px rgba(0,0,0,.8))}
.clscard .cn{color:var(--gold);font-size:15px;letter-spacing:1px;margin:7px 0 5px;font-weight:bold}
.clscard .cd{color:#a89468;font-size:11px;line-height:1.45}

/* ---- Assignation des sorts ---- */
.bindrow{display:flex;gap:4px;margin-top:7px;flex-wrap:wrap}
.bindbtn{font-size:10px;padding:2px 7px;border:1px solid #4a3a14;border-radius:3px;color:#a89468;cursor:pointer;background:#0d0a05}
.bindbtn:hover{border-color:var(--gold-dim);color:var(--gold)}
.bindbtn.on{background:var(--gold-dim);color:#0d0a05;border-color:var(--gold);font-weight:bold}

/* ---- Multijoueur ---- */
#mpBox{margin-top:16px;padding:14px;border:1px solid #33270f;border-radius:6px;background:rgba(13,10,5,.85);
  max-width:560px;text-align:left;pointer-events:auto}
#mpBox h3{color:var(--gold);font-size:14px;margin:0 0 8px;letter-spacing:1px}
#mpBox textarea{width:100%;height:54px;background:#0a0805;border:1px solid #33270f;color:#c9b88a;
  font-size:10px;border-radius:4px;padding:6px;resize:vertical;box-sizing:border-box}
#mpBox .mbtns{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}
.smallbtn{padding:7px 13px;background:linear-gradient(180deg,#221a0c,#120d06);border:1px solid var(--gold-dim);
  color:var(--gold);font-size:12px;border-radius:4px;cursor:pointer;letter-spacing:.5px}
.smallbtn:hover{border-color:var(--gold);box-shadow:0 0 10px rgba(201,162,39,.3)}
#mpStatus{color:#8aa46a;font-size:11px;font-style:italic;min-height:14px}


/* ---- VR ---- */
#btnVR{display:none;position:fixed;bottom:14px;right:14px;z-index:60;padding:11px 18px;
  background:linear-gradient(180deg,#1a2a4a,#0c1426);border:2px solid #4a6aaa;color:#bfe2ff;
  font-family:Georgia,serif;font-size:14px;letter-spacing:1px;border-radius:6px;cursor:pointer;
  box-shadow:0 0 18px rgba(80,140,255,.35);pointer-events:auto}
#btnVR:hover{border-color:#8ab4ff;box-shadow:0 0 26px rgba(120,170,255,.55)}
#vrTag{color:#8ab4ff;font-size:12px;margin-top:8px;min-height:14px}


/* ---- Nom + skins + sauvegarde ---- */
#plName{background:#0a0805;border:1px solid var(--gold-dim);color:var(--gold);font-family:Georgia,serif;
  font-size:15px;padding:8px 12px;border-radius:4px;text-align:center;letter-spacing:1px;width:220px;pointer-events:auto}
#skinrow{display:flex;gap:8px;margin:10px 0 4px;justify-content:center}
.skinbtn{width:34px;height:34px;border-radius:50%;border:2px solid #33270f;cursor:pointer;pointer-events:auto;transition:all .15s}
.skinbtn:hover{transform:scale(1.12)}
.skinbtn.sel{border-color:var(--gold);box-shadow:0 0 12px rgba(201,162,39,.5)}
#btnContinue{display:none;margin-bottom:8px;background:linear-gradient(180deg,#1c2e14,#0c1408);border-color:#4a8a3a;color:#aef27a}
#saveBox{margin-top:14px;padding:12px;border:1px solid #33270f;border-radius:6px;background:rgba(13,10,5,.85);
  max-width:560px;text-align:left;pointer-events:auto}
#saveBox h3{color:var(--gold);font-size:13px;margin:0 0 6px;letter-spacing:1px}
#saveCode{width:100%;height:44px;background:#0a0805;border:1px solid #33270f;color:#8a9a6a;font-size:9px;
  border-radius:4px;padding:5px;resize:vertical;box-sizing:border-box}
#mePreviewWrap{text-align:center;margin-bottom:10px}
#mePreview{width:96px;height:96px;image-rendering:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}


/* ---- Connexion / compte ---- */
#authScreen{z-index:200}
#authCard{width:min(420px,92vw);background:linear-gradient(180deg,#171209,#0d0a05);
  border:2px solid #33270f;border-radius:8px;padding:28px 32px;pointer-events:auto}
#authCard h2{color:var(--gold);text-align:center;letter-spacing:2px;margin:0 0 4px;font-size:22px}
#authCard .asub{text-align:center;color:#8a7a55;font-style:italic;font-size:12px;margin-bottom:18px}
#authCard label{display:block;color:#a89468;font-size:11px;letter-spacing:1px;margin:10px 0 4px;text-transform:uppercase}
#authCard input{width:100%;box-sizing:border-box;padding:10px 12px;background:#0a0805;border:1px solid #33270f;
  border-radius:4px;color:#e8dcc0;font-family:Georgia,serif;font-size:14px}
#authCard input:focus{outline:none;border-color:var(--gold-dim)}
#authErr{color:#ff9a9a;font-size:12px;min-height:16px;margin-top:8px;text-align:center}
#authCard{max-height:96vh;overflow-y:auto;-webkit-overflow-scrolling:touch} /* 📱 le launcher scrolle : le journal des pepins est lisible en mobile */
.authBtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;align-items:stretch}
.authBtns button{flex:1;padding:12px;background:linear-gradient(180deg,#221a0c,#120d06);
  border:2px solid var(--gold-dim);color:var(--gold);font-family:Georgia,serif;font-size:14px;
  letter-spacing:1px;border-radius:5px;cursor:pointer}
.authBtns button:hover{border-color:var(--gold);box-shadow:0 0 14px rgba(201,162,39,.3)}
/* ⚜ hiérarchie du launcher : 2 actions principales, 2 outils discrets, panneaux pleine largeur */
#btnLogin{order:0;flex:1 1 46%}
#btnRegister{order:1;flex:1 1 46%;margin:0!important}
#btnErr{order:2;flex:1 1 46%!important;width:auto!important;margin:0!important;padding:8px!important;font-size:12px!important}
#btnPad{order:3;flex:1 1 46%!important;width:auto!important;margin:0!important;padding:8px!important;font-size:12px!important;color:#c8b88a}
#errPanel{order:4;flex:1 1 100%!important;box-sizing:border-box;margin:0!important}
#padPanel{order:5;flex:1 1 100%!important;box-sizing:border-box;margin:0!important;max-width:100%}
@media (max-width:560px){#btnLogin,#btnRegister,#btnErr,#btnPad{flex:1 1 100%!important}}
#userTag{position:absolute;top:8px;right:14px;color:#8a7a55;font-size:12px;pointer-events:auto;z-index:30}
#userTag a{color:var(--gold-dim);cursor:pointer;text-decoration:underline}
/* ---- Lobby ---- */
.lobbyRow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 10px;margin-bottom:5px;background:linear-gradient(180deg,#171209,#0d0a05);
  border:1px solid #33270f;border-radius:4px;font-size:13px}
.lobbyEmpty{color:#8a7a55;font-style:italic;font-size:12px;padding:6px}
#mpOnline{color:#7a9a5a;font-size:11px;margin-top:8px;font-style:italic}

/* ---- Badge d'amélioration + comparaison ---- */
.bslot{position:relative}
.upbadge{position:absolute;top:-5px;right:-5px;width:16px;height:16px;line-height:15px;text-align:center;
  background:radial-gradient(circle,#3ad05e,#1a7a32);color:#eafff0;font-weight:bold;font-size:13px;
  border-radius:50%;border:1px solid #aef27a;box-shadow:0 0 8px rgba(80,220,120,.7);pointer-events:none;z-index:2}
.upinline{color:#4ade80;font-weight:bold;text-shadow:0 0 6px rgba(80,220,120,.8)}
#tooltip{max-width:600px}
.cmpwrap{display:flex;gap:16px;align-items:flex-start}
.cmpcol{min-width:230px;max-width:270px}
.cmpeq{border-left:1px solid #3a2c12;padding-left:14px;opacity:.92}
.cmptitle{color:#8a7a55;font-size:10px;letter-spacing:2px;margin-bottom:5px}
.cmpverdict{margin-top:8px;font-size:12px;font-weight:bold;color:#a89468}
.cmpverdict.up{color:#4ade80;text-shadow:0 0 8px rgba(80,220,120,.5)}
.cmpverdict.down{color:#ff6b5d}

/* ---- Arbre de skills v2 ---- */
.stier{color:#6a5a3a;font-size:10px;letter-spacing:2px;text-align:center;margin:10px 0 4px;
  border-top:1px solid #2a2010;padding-top:6px}
.snode .slock{color:#a4675d;font-size:10px;font-style:italic;margin-top:3px}
.snode.capstone{border-color:#caa030;background:linear-gradient(180deg,rgba(60,46,12,.5),rgba(20,14,5,.7))}
.snode.capstone .sn{color:#ffd86a;text-shadow:0 0 10px rgba(255,210,80,.4)}
.snode.locked{opacity:.45;filter:grayscale(.5)}
.snode.can{box-shadow:0 0 10px rgba(120,220,120,.25);border-color:#3a6a3a}

/* ---- Réglages qualité ---- */
.qbtn{background:#1a1408;border:1px solid #4a3a1a;color:#c8b888;padding:6px 10px;
  font-family:Georgia,serif;font-size:12px;cursor:pointer;border-radius:3px}
.qbtn:hover{border-color:#caa030;color:#ffe9b8}
.qbtn.on{background:#3a2c0e;border-color:#caa030;color:#ffd86a;box-shadow:0 0 8px rgba(202,160,48,.3)}

/* ===== Modales du jeu ===== */
.gdOverlay{position:fixed;inset:0;background:rgba(4,3,2,0.72);display:flex;align-items:center;justify-content:center;z-index:300;animation:gdIn .18s ease}
@keyframes gdIn{from{opacity:0}to{opacity:1}}
.gdBox{min-width:320px;max-width:520px;margin:16px;background:linear-gradient(160deg,#171109,#0c0905 70%);
  border:2px solid #6a5320;border-radius:10px;box-shadow:0 0 0 1px #2a200c, 0 18px 60px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,220,140,.08);
  padding:18px 20px 16px;animation:gdPop .22s cubic-bezier(.2,1.4,.4,1);
  max-height:88vh;display:flex;flex-direction:column}
@keyframes gdPop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.gdTitle{font-family:Georgia,serif;color:var(--gold,#e8c35a);font-size:19px;letter-spacing:1px;margin-bottom:10px;
  border-bottom:1px solid #3a2c10;padding-bottom:8px;text-shadow:0 0 14px rgba(232,195,90,.35)}
.gdBody{color:#d8cdb0;font-size:14px;line-height:1.55;margin-bottom:14px;flex-shrink:0}
.gdInput{width:100%;box-sizing:border-box;background:#0a0805;border:1px solid #6a5320;border-radius:6px;color:#ffe9b8;
  font-size:16px;padding:9px 12px;margin-bottom:14px;outline:none}
.gdInput:focus{border-color:var(--gold,#e8c35a);box-shadow:0 0 10px rgba(232,195,90,.25)}
.gdBtns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
  overflow-y:auto;overflow-x:hidden;min-height:0;flex:1 1 auto;
  scrollbar-width:thin;scrollbar-color:#6a5320 #1a1208;padding-right:4px}
.gdBtns::-webkit-scrollbar{width:8px}
.gdBtns::-webkit-scrollbar-thumb{background:#6a5320;border-radius:4px}
.gdBtns::-webkit-scrollbar-track{background:#1a1208}
/* longue liste (choix de gemmes, etc.) : boutons empilés pleine largeur, ancrés en haut */
.gdBtns.gdList{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch}
.gdBtns.gdList .gdBtn{width:100%;text-align:left;box-sizing:border-box}
.gdBtn{background:linear-gradient(180deg,#3a2c10,#241a08);border:1px solid #6a5320;border-radius:6px;color:#ffe9b8;
  font-size:14px;padding:9px 18px;cursor:pointer;letter-spacing:.5px;transition:all .15s}
.gdBtn:hover{border-color:var(--gold,#e8c35a);box-shadow:0 0 12px rgba(232,195,90,.3);transform:translateY(-1px)}
.gdBtn.primary{background:linear-gradient(180deg,#6a5320,#3a2c10);font-weight:bold}
.gdBtn.ghost{background:transparent;color:#9a8a66}

.ktab{background:transparent;border:1px solid #4a3a18;color:#a89878;border-radius:6px;
  padding:6px 14px;cursor:pointer;font-size:13px;font-family:Georgia,serif;letter-spacing:.5px;transition:all .12s}
.ktab:hover{border-color:#6a5320;color:#d8c89a}
.ktab.on{background:linear-gradient(180deg,#3a2c10,#241a08);border-color:#c9a227;color:#ffe9b8;font-weight:bold}

/* ============ ARBRE DE COMPÉTENCES façon DIABLO 2 ============ */
.d2tabs{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.d2tab{background:rgba(0,0,0,.35);border:1px solid #3a2e16;color:#a89878;border-radius:6px;
  padding:7px 12px;font-family:inherit;font-size:12px;letter-spacing:1px;cursor:pointer;transition:all .15s}
.d2tab:hover{border-color:#6a5320;color:#d8c89a}
.d2tab.on{border-color:var(--gold);color:#ffd86a;background:linear-gradient(180deg,rgba(60,46,12,.6),rgba(20,14,5,.8));
  box-shadow:0 0 10px rgba(201,162,39,.25)}
.d2tab .d2cnt{display:inline-block;background:rgba(201,162,39,.18);border-radius:8px;padding:0 6px;
  font-size:10px;color:var(--gold);margin-left:4px}
.d2aff{grid-column:1/-1;color:#ffd86a;font-size:11px;letter-spacing:1px;margin:-2px 0 6px;font-style:italic;
  text-shadow:0 0 8px rgba(255,210,80,.3)}
.d2wrap{grid-column:1/-1;overflow:auto;max-height:52vh;border:1px solid #3a2e16;border-radius:8px;
  background:radial-gradient(ellipse at 50% 0%,rgba(40,30,12,.45),rgba(0,0,0,.5));padding:6px}
.d2tree{position:relative;margin:0 auto}
.d2svg{position:absolute;inset:0;pointer-events:none}
.d2lvl{position:absolute;left:2px;width:42px;text-align:right;color:#6a5a3a;font-size:9px;letter-spacing:1px;
  border-right:1px solid rgba(106,90,58,.3);padding-right:5px;height:16px}
.d2lvl.low{color:#4a3f2c}
.d2node{position:absolute;width:64px;height:64px;border:2px solid #4a3a1c;border-radius:9px;cursor:pointer;
  background:linear-gradient(180deg,rgba(38,30,14,.95),rgba(14,10,4,.97));
  display:flex;align-items:center;justify-content:center;transition:all .12s;box-shadow:0 3px 8px rgba(0,0,0,.5)}
.d2node .d2ic{font-size:27px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.d2node .d2rank{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);
  background:#1a1206;border:1px solid #4a3a1c;border-radius:8px;padding:0 6px;font-size:10px;color:#b8a878;line-height:14px}
.d2node .d2scroll{position:absolute;top:-7px;right:-7px;font-size:13px;filter:drop-shadow(0 1px 2px #000)}
.d2node.locked{opacity:.42;filter:grayscale(.75)}
.d2node.locked .d2ic{filter:grayscale(1) brightness(.7)}
.d2node.on{border-color:#8a7440}
.d2node.on .d2rank{color:var(--gold);border-color:#6a5320}
.d2node.can{border-color:#3a7a3a;box-shadow:0 0 12px rgba(110,220,110,.35),0 3px 8px rgba(0,0,0,.5)}
.d2node.can:hover{transform:scale(1.07);border-color:#5aba5a}
.d2node.maxed{border-color:var(--gold);box-shadow:inset 0 0 14px rgba(201,162,39,.25),0 0 12px rgba(201,162,39,.3)}
.d2node.capstone{border-radius:50%;border-width:3px;border-color:#7a5a20}
.d2node.capstone.maxed{border-color:#ffd86a;box-shadow:0 0 18px rgba(255,210,80,.5)}
.d2node.sel{outline:2px solid #ffd86a;outline-offset:2px}
.d2detail{grid-column:1/-1;border:1px solid #3a2e16;border-radius:8px;background:rgba(0,0,0,.45);
  padding:12px 14px;margin-top:10px;min-height:64px}
.d2detail .d2dn{font-size:14px;color:var(--bone);letter-spacing:1px}
.d2detail .d2dr{color:var(--gold);font-size:12px;margin-left:6px}
.d2detail .d2dd{font-size:11.5px;color:#9a8e72;margin-top:4px;line-height:1.5}
.d2detail .d2hint{color:#7a6e54;font-size:11px;font-style:italic;text-align:center;padding:14px 0}
.d2learn{display:inline-block;margin-top:9px;background:linear-gradient(180deg,#2c4a1c,#16280c);
  border:1px solid #4a7a30;color:#bdf0a0;border-radius:6px;padding:7px 16px;font-family:inherit;
  font-size:12px;letter-spacing:1px;cursor:pointer}
.d2learn:hover{border-color:#7aba50;box-shadow:0 0 10px rgba(120,220,110,.3)}
/* couleurs des voies sur l'onglet actif */
.d2tab.guerre.on{color:#ff8a7a}.d2tab.precision.on{color:#8aef9a}
.d2tab.arcane.on{color:#8ab6ff}.d2tab.occulte.on{color:#caa0ff}

/* ===== MENU DE POSE (X) : objets à placer + raccourcis ===== */
.prow{display:flex;align-items:center;gap:12px;padding:8px 10px;margin:4px 0;border:1px solid #33270f;
  border-radius:8px;background:linear-gradient(180deg,#161007,#0d0905);cursor:pointer;transition:border-color .12s,background .12s}
.prow:hover{border-color:#6a5320;background:linear-gradient(180deg,#1d1509,#120c06)}
.prow.on{border-color:#caa030;background:linear-gradient(180deg,#241a08,#151006);box-shadow:0 0 10px rgba(202,160,48,.25) inset}
.prow img{width:46px;height:46px;image-rendering:pixelated;border:1px solid #3a2c14;border-radius:6px;background:#070503;flex:0 0 auto}
.prow .pic{width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-size:26px;
  border:1px solid #3a2c14;border-radius:6px;background:#070503;flex:0 0 auto}
.prow .pnm{flex:1;color:#e8d8a8;font-size:14px;line-height:1.35}
.prow .pcnt{color:#8a7a55;font-size:11px}
.prow .pbind{color:#ffd24a;font-size:12px;border:1px solid #6a5320;border-radius:6px;padding:2px 8px;background:#1a1206;white-space:nowrap}

/* barre d'état des touches 1-9 dans le menu de pose */
.pkeys{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}
.pkey{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:42px;padding:4px 2px;
  border:1px solid #33270f;border-radius:7px;background:#100b06;font-size:15px}
.pkey b{color:#8a7a55;font-size:11px}
.pkey.pose{border-color:#caa030;background:#1c1407;box-shadow:0 0 6px rgba(202,160,48,.25) inset}
.pkey.sort{border-color:#4a5a8a}
.pkey.objet{border-color:#5a7a4a}

/* ============================================================
   LAUNCHER — SERVEURS DE L'ABÎME (v23)
   ============================================================ */
.srvIntro{color:#a89468;font-size:12px;line-height:1.5;padding:10px 18px 0}
.srvRow{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;
  background:linear-gradient(180deg,rgba(34,26,12,.78),rgba(18,13,6,.88));
  border:1px solid #3a2c10;border-radius:8px;transition:border-color .15s,box-shadow .15s,transform .1s}
.srvRow:hover{border-color:var(--gold-dim,#8a6d1f);box-shadow:0 0 14px rgba(201,162,39,.18);transform:translateY(-1px)}
.srvRow.full{opacity:.55}
.srvRow.full:hover{transform:none;box-shadow:none;border-color:#3a2c10}
.srvInfo{flex:1;min-width:0}
.srvName{color:#ffe9b8;font-size:14px;font-weight:bold;letter-spacing:.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.srvMeta{color:#8a7a55;font-size:11px;margin-top:2px}
.srvLock{margin-right:5px;filter:drop-shadow(0 0 4px rgba(255,210,74,.4))}
.srvBadge{font-size:11px;padding:3px 9px;border-radius:10px;border:1px solid;white-space:nowrap;letter-spacing:.3px}
.srvBadge.d0{color:#9ae87e;border-color:#3a5a2a;background:rgba(40,70,30,.28)}
.srvBadge.d1{color:#ffd24a;border-color:#6a5320;background:rgba(90,70,20,.28)}
.srvBadge.d2{color:#c99aff;border-color:#4a3a6a;background:rgba(60,40,90,.28)}
.srvBadge.d3{color:#ff8a6a;border-color:#7a3a2a;background:rgba(100,40,25,.28)}
.srvPlayers{color:#d8cdb0;font-size:12px;min-width:34px;text-align:center;font-weight:bold}
.srvRow .smallbtn:disabled{opacity:.5;cursor:default}
.srvRow .smallbtn:disabled:hover{border-color:var(--gold-dim);box-shadow:none}
#srvCreate{border:1px solid #3a2c10;border-radius:8px;padding:14px;margin-bottom:12px;
  background:linear-gradient(180deg,rgba(24,17,8,.85),rgba(14,10,5,.9))}
#srvCreate label{display:block;font-size:11px;color:#c8a860;letter-spacing:1px;margin:9px 0 4px;text-transform:uppercase}
#srvCreate label:first-child{margin-top:0}
#srvCreate input,#srvCreate select{width:100%;box-sizing:border-box;background:#120d06;border:1px solid #3a2c10;
  border-radius:6px;color:#ffe9b8;padding:9px 10px;font-size:13px;font-family:inherit}
#srvCreate input:focus,#srvCreate select:focus{outline:none;border-color:var(--gold-dim,#8a6d1f);
  box-shadow:0 0 8px rgba(201,162,39,.2)}
#srvCreate select option{background:#1a130a;color:#ffe9b8}
.srvFormRow{display:flex;gap:10px}
.srvFormRow>div{flex:1;min-width:0}

/* ---- Auth : mot de passe oublié / réinitialisation / courriel ---- */
.authLink{display:block;margin-top:10px;color:#c8a860;font-size:12px;cursor:pointer;
  text-decoration:underline;text-align:center;letter-spacing:.3px}
.authLink:hover{color:#ffd24a}
#forgotBox{margin-top:10px;padding:12px;border:1px solid #3a2c10;border-radius:8px;background:rgba(20,14,6,.55)}
#forgotBox button{width:100%;padding:9px;background:linear-gradient(180deg,#3a2c10,#241a08);
  border:1px solid #6a5320;border-radius:6px;color:#ffe9b8;cursor:pointer;font-size:13px;letter-spacing:.5px}
#forgotBox button:hover{border-color:var(--gold,#e8c35a);box-shadow:0 0 10px rgba(232,195,90,.25)}
#forgotBox button:disabled{opacity:.5;cursor:default;box-shadow:none}
.authNote{font-size:11px;color:#8a7a55;margin-top:8px;line-height:1.45}
#resetBox button#btnResetDo{width:100%;padding:11px;background:linear-gradient(180deg,#6a5320,#3a2c10);
  border:1px solid #8a6d1f;border-radius:6px;color:#ffe9b8;cursor:pointer;font-size:14px;font-weight:bold;letter-spacing:.5px}
#resetBox button#btnResetDo:hover{border-color:var(--gold,#e8c35a);box-shadow:0 0 12px rgba(232,195,90,.3)}
#resetBox button#btnResetDo:disabled{opacity:.5;cursor:default;box-shadow:none}
#regEmailWrap input{width:100%;box-sizing:border-box}

/* ---- Launcher pré-jeu (v24) : par-dessus l'écran titre ---- */
#mpPanel.prelaunch{z-index:60}
#mpSolo{display:none;width:100%;margin-top:12px;padding:10px;font-size:13px;letter-spacing:.5px}
#mpPanel.prelaunch #mpSolo{display:block}

/* ============================================================
   PANNEAU AMIS (v25)
   ============================================================ */
.frIntro{color:#a89468;font-size:12px;line-height:1.5;margin-bottom:12px}
.frAddRow{display:flex;gap:8px;margin-bottom:14px}
.frAddRow input{flex:1;min-width:0;background:#120d06;border:1px solid #3a2c10;border-radius:6px;
  color:#ffe9b8;padding:10px 12px;font-size:14px;font-family:inherit}
.frAddRow input:focus{outline:none;border-color:var(--gold-dim,#8a6d1f);box-shadow:0 0 8px rgba(201,162,39,.2)}
.frAddRow .gdBtn{white-space:nowrap}
.frSecTitle{color:#c8a860;font-size:11px;letter-spacing:1px;text-transform:uppercase;margin:4px 0 8px;font-weight:bold}
#frRequests{margin-bottom:6px}
#frRequests:not(:empty){padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid #2a2010}
.frReqRow{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:6px;
  background:linear-gradient(180deg,rgba(50,40,15,.55),rgba(30,22,8,.7));
  border:1px solid #4a3a18;border-radius:7px}
.frRow{display:flex;align-items:center;gap:10px;padding:9px 11px;margin-bottom:7px;
  background:linear-gradient(180deg,rgba(28,21,10,.7),rgba(16,11,5,.82));
  border:1px solid #322610;border-radius:7px;transition:border-color .15s}
.frRow.on{border-color:#3a5a2a}
.frRow.on:hover{border-color:var(--gold-dim,#8a6d1f)}
.frDot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
.frDot.dotOn{background:#6ee06e;color:#6ee06e}
.frDot.dotOff{background:#5a5148;color:transparent;box-shadow:none}
.frInfo{flex:1;min-width:0;display:flex;flex-direction:column}
.frName{color:#ffe9b8;font-size:14px;font-weight:bold;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frMeta{color:#8a7a55;font-size:11px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frSm{font-size:12px!important;padding:6px 12px!important;white-space:nowrap}
.frSm:disabled{opacity:.5;cursor:default;box-shadow:none}
.frX{background:none;border:none;color:#8a6a55;font-size:15px;cursor:pointer;padding:4px 7px;border-radius:5px;flex-shrink:0;line-height:1}
.frX:hover{color:#ff8a6a;background:rgba(120,40,25,.25)}
.frStatus{color:#8a7a55;font-size:12px;margin-top:12px;text-align:center;min-height:14px}
.frBadge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;
  background:#c0392b;color:#fff;border-radius:9px;font-size:11px;font-weight:bold;line-height:18px;
  text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.6);border:1px solid #7a1f14}

/* ============================================================
   ⚗ ALCHIMIE (v30) : l'alambic — fiole, bulles, flash, pop
   ============================================================ */
#alchFx{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  background:rgba(6,4,2,.55);backdrop-filter:blur(2px)}
#alchFx.on{display:flex;animation:alchIn .25s ease}
@keyframes alchIn{from{opacity:0}to{opacity:1}}
.alchBox{text-align:center}
.alchFlask{position:relative;width:110px;height:150px;margin:0 auto 14px;
  border:3px solid #c8b078;border-top:none;border-radius:0 0 55px 55px;
  background:rgba(255,255,255,.05);overflow:hidden;
  box-shadow:0 0 24px rgba(201,162,39,.25),inset 0 0 18px rgba(0,0,0,.5)}
.alchFlask::before{content:'';position:absolute;left:38px;top:-26px;width:34px;height:30px;
  border:3px solid #c8b078;border-bottom:none;border-radius:8px 8px 0 0;background:rgba(255,255,255,.04)}
.alchLiquid{position:absolute;left:0;right:0;bottom:0;height:8%;
  animation:alchFill 1.35s ease-in forwards;filter:saturate(1.3)}
@keyframes alchFill{to{height:78%}}
.alchBub{position:absolute;bottom:6px;width:9px;height:9px;border-radius:50%;opacity:0;
  animation:alchRise 1.1s ease-in infinite}
@keyframes alchRise{0%{transform:translateY(0) scale(.5);opacity:.9}100%{transform:translateY(-120px) scale(1.25);opacity:0}}
.alchSteam{font-size:22px;animation:alchSteamF 1.4s ease-in-out infinite;margin-top:-6px}
@keyframes alchSteamF{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-9px);opacity:1}}
.alchName{color:#ffe9b8;font-size:17px;letter-spacing:1px;text-shadow:0 2px 8px rgba(0,0,0,.8);margin-top:8px}
.alchFlask.flash{animation:alchFlash .45s ease}
@keyframes alchFlash{0%{box-shadow:0 0 24px rgba(201,162,39,.25)}45%{box-shadow:0 0 70px 22px rgba(255,230,140,.95)}100%{box-shadow:0 0 24px rgba(201,162,39,.25)}}
.alchName.pop{animation:alchPop .45s cubic-bezier(.2,2.2,.4,1)}
@keyframes alchPop{0%{transform:scale(1)}55%{transform:scale(1.45)}100%{transform:scale(1)}}

/* Paliers de compétences herboriste */
.herbPerks{margin-top:7px;border-top:1px dashed #33270f;padding-top:6px}
.herbPerk{font-size:11px;color:#6a5c42;padding:2px 0;letter-spacing:.3px}
.herbPerk.on{color:#9ad47e}
.herbPerk b{color:inherit}