:root{
  --bg:#080810;--s1:#0f0f1a;--s2:#161625;--s3:#1e1e30;
  --b:rgba(255,255,255,0.06);--b2:rgba(255,255,255,0.12);
  --purple:#7c6af7;--pl:#a89cf7;--pl2:#c4bafb;
  --teal:#2dd4a0;--tl2:#5de8bb;
  --amber:#f5a623;--pink:#f06292;
  --text:#eeedf8;--muted:#8886a0;--r:12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',sans-serif;font-size:15px;
  min-height:100vh;overflow-x:hidden;
}
 
/* ── BACKGROUND FX ── */
.bg-fx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-fx::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(124,106,247,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,106,247,0.03) 1px,transparent 1px);
  background-size:60px 60px;
}
.orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.2;animation:orb-drift 20s ease-in-out infinite}
.orb-1{width:600px;height:600px;background:var(--purple);top:-200px;left:-150px;animation-delay:0s}
.orb-2{width:500px;height:500px;background:var(--teal);bottom:-150px;right:-100px;animation-delay:-7s}
.orb-3{width:400px;height:400px;background:#e040fb;top:40%;left:50%;animation-delay:-13s;opacity:.1}
@keyframes orb-drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.05)}66%{transform:translate(-20px,30px) scale(.95)}}
@keyframes boss-glow{
  0%,100%{box-shadow:0 0 20px rgba(240,98,146,.2)}
  50%{box-shadow:0 0 40px rgba(240,98,146,.5),0 0 80px rgba(240,98,146,.15)}
}
 
/* ── LAYOUT ── */
.app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.screen{display:none;flex:1}
/* .screen.active{display:flex;flex-direction:column} */
.screen.active{display:flex;flex-direction:column;min-height:100vh}
 
/* ── DESKTOP SHELL ── */
@media(min-width:900px){
  .home-layout{display:grid;grid-template-columns:360px 1fr;min-height:100vh}
  .home-sidebar{
    border-right:1px solid var(--b);padding:2rem;
    background:rgba(15,15,26,.6);backdrop-filter:blur(20px);
    display:flex;flex-direction:column;gap:1.25rem;overflow-y:visible;
  }
  .home-main{padding:2.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem}
  .mobile-only{display:none}
}
@media(max-width:899px){
  .home-layout{display:flex;flex-direction:column;padding:1.25rem;gap:1rem}
  .home-sidebar{display:contents}
  .home-main{display:contents}
  .desktop-only{display:none}
  .mobile-only{display:none}
}
 
/* ── LOGO ── */
.logo-wrap{text-align:center;padding:1.5rem 0 1rem}
.logo-title{
  font-family:'Cinzel',serif;font-size:clamp(2rem,4vw,3rem);
  font-weight:900;letter-spacing:4px;line-height:1;
  background:linear-gradient(135deg,#c4bafb 0%,var(--purple) 40%,var(--teal) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 40px rgba(124,106,247,.4));
  animation:logo-glow 3s ease-in-out infinite;
}
@keyframes logo-glow{0%,100%{filter:drop-shadow(0 0 40px rgba(124,106,247,.4))}50%{filter:drop-shadow(0 0 60px rgba(124,106,247,.7))}}
.logo-sub{font-size:.7rem;color:var(--muted);letter-spacing:.25em;text-transform:uppercase;margin-top:.5rem}
.logo-rune{font-size:1.5rem;margin-bottom:.5rem;animation:rune-spin 8s linear infinite;display:inline-block}
@keyframes rune-spin{to{transform:rotate(360deg)}}
 
/* ── PROFIL CARD ── */
.profile-card{
  background:linear-gradient(135deg,rgba(124,106,247,.12),rgba(45,212,160,.08));
  border:1px solid rgba(124,106,247,.25);border-radius:16px;padding:1.25rem;
}
.profile-top{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:1rem}
.avatar{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  background:linear-gradient(135deg,var(--purple),var(--teal));
  display:flex;align-items:center;justify-content:center;font-size:24px;
  box-shadow:0 0 20px rgba(124,106,247,.4);
  animation:avatar-pulse 3s ease-in-out infinite;
}
@keyframes avatar-pulse{0%,100%{box-shadow:0 0 20px rgba(124,106,247,.4)}50%{box-shadow:0 0 35px rgba(124,106,247,.7)}}
.profile-info{flex:1;min-width:0}
.profile-lvl{font-size:.7rem;color:var(--pl);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.profile-title{font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;color:var(--text);margin:.15rem 0 .5rem}
.xp-track{height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.xp-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--purple),var(--tl2));transition:width 1s cubic-bezier(.22,1,.36,1)}
.xp-lbl{font-size:.65rem;color:var(--muted);margin-top:.35rem}
.profile-pts{text-align:center;flex-shrink:0;min-width:48px}
.pts-val{font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;color:var(--teal)}
.pts-lbl{font-size:.6rem;color:var(--muted)}
 
/* ── INVENTAIRE ── */
.inv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.inv-item{
  background:var(--s2);border:1px solid var(--b);border-radius:10px;
  padding:.6rem .4rem;text-align:center;cursor:default;transition:all .2s;
}
.inv-item:not(.empty):hover{border-color:var(--b2);transform:translateY(-2px)}
.inv-item.empty{opacity:.3}
.inv-item.empty:hover{opacity:1}
.inv-emoji{font-size:1.3rem;display:block;margin-bottom:.2rem}
.inv-name{font-size:.6rem;color:var(--muted);display:block}
.inv-count{font-family:'Cinzel',serif;font-size:.85rem;font-weight:700;color:var(--amber)}
 
/* ── SECTION LABEL ── */
.sec-lbl{
  font-size:.65rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.15em;
  display:flex;align-items:center;gap:.5rem;
}
.sec-lbl::after{content:'';flex:1;height:1px;background:var(--b)}
 
/* ── CAMPAIGN CARD ── */
.campaign-card{
  background:var(--s1);border:1px solid rgba(245,166,35,.2);border-radius:16px;
  padding:1.25rem 1.5rem;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;
}
.campaign-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(245,166,35,.06),transparent);
  pointer-events:none;
}
.campaign-card:hover{border-color:rgba(245,166,35,.45);transform:translateY(-2px);box-shadow:0 8px 32px rgba(245,166,35,.15)}
.campaign-inner{display:flex;align-items:center;gap:1rem}
.campaign-icon{font-size:2.5rem;flex-shrink:0;filter:drop-shadow(0 0 12px rgba(245,166,35,.5))}
.campaign-meta{flex:1}
.campaign-name{font-family:'Cinzel',serif;font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:.2rem}
.campaign-sub{font-size:.75rem;color:var(--muted);margin-bottom:.6rem}
.camp-prog-track{height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.camp-prog-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--amber),#f5c842);transition:width .8s}
.campaign-pct{font-family:'Cinzel',serif;font-size:1.2rem;font-weight:700;color:var(--amber);flex-shrink:0}
.chevron{color:var(--muted);font-size:1.2rem;flex-shrink:0}
 
/* ── FREE MODE CARD ── */
.free-card{
  background:var(--s1);border:1px solid var(--b);border-radius:16px;
  padding:1.25rem 1.5rem;cursor:pointer;transition:all .25s;
  display:flex;align-items:center;gap:1rem;
}
.free-card:hover{border-color:var(--b2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.free-card-icon{font-size:2rem;flex-shrink:0}
.free-card-info{flex:1}
.free-card-name{font-family:'Cinzel',serif;font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:.15rem}
.free-card-sub{font-size:.75rem;color:var(--muted)}
 
/* ── BOUTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.5rem;border-radius:var(--r);border:none;
  font-family:'Cinzel',serif;font-size:.85rem;font-weight:700;letter-spacing:.05em;
  cursor:pointer;transition:all .2s;position:relative;overflow:hidden;width:100%;
}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn-primary{background:linear-gradient(135deg,var(--purple),#5b4fcf);color:#fff;box-shadow:0 4px 20px rgba(124,106,247,.4)}
.btn-primary:hover{box-shadow:0 8px 32px rgba(124,106,247,.6)}
.btn-amber{background:linear-gradient(135deg,var(--amber),#e8831a);color:#fff;box-shadow:0 4px 20px rgba(245,166,35,.3)}
.btn-ghost{background:rgba(255,255,255,.04);border:1px solid var(--b);color:var(--muted);font-family:'Inter',sans-serif;font-weight:500}
.btn-ghost:hover{color:var(--text);border-color:var(--b2);background:rgba(255,255,255,.07)}
.btn-sm{padding:.65rem 1.2rem;font-size:.75rem;width:auto}
 
/* ── LOADING ── */
#loadingScreen{align-items:center;justify-content:center;flex:1}
.loading-wrap{text-align:center;padding:3rem}
.rune-loader{font-size:3rem;animation:rune-spin 1.5s linear infinite;margin-bottom:1.5rem;display:block}
.loading-title{font-family:'Cinzel',serif;font-size:1.3rem;font-weight:700;margin-bottom:.5rem}
.loading-sub{font-size:.85rem;color:var(--muted)}
.loading-dots::after{content:'';animation:dots 1.5s infinite}
@keyframes dots{0%{content:''}33%{content:'.'}66%{content:'..'}100%{content:'...'}}
 
/* ── CAMPAIGN MAP SCREEN ── */
.subscreen-wrap{max-width:900px;margin:0 auto;width:100%;padding:2.5rem 3rem}
@media(max-width:899px){.subscreen-wrap{padding:1.25rem}}
.back-row{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}
.back-btn{
  background:rgba(255,255,255,.05);border:1px solid var(--b);border-radius:8px;
  padding:.5rem 1rem;color:var(--muted);font-size:.8rem;cursor:pointer;transition:all .2s;
}
.back-btn:hover{color:var(--text);border-color:var(--b2)}
.subscreen-title{font-family:'Cinzel',serif;font-size:1.2rem;font-weight:700}

@media(min-width:900px){
  #profileScreen .subscreen-wrap,
  #freeScreen .subscreen-wrap,
  #campaignsScreen .subscreen-wrap,
  #categoryScreen .subscreen-wrap,
  #campaignScreen .subscreen-wrap,
  #shopScreen .subscreen-wrap,
  #leaderboardScreen .subscreen-wrap,
  #duelMenuScreen .subscreen-wrap,
  #duelLobbyScreen .subscreen-wrap,
  #duelGameScreen .subscreen-wrap,
  #duelResultScreen .subscreen-wrap{
    max-width:95%;
    width:100%;
    margin:0 auto;
    padding:3rem 4rem;
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }
}
 
/* ── ZONE LIST ── */
.zone-list{display:flex;flex-direction:column;gap:.5rem}
.zone{
  background:var(--s1);border:1px solid var(--b);border-radius:14px;
  padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;
  transition:all .2s;
}
.zone.unlocked{cursor:pointer}
.zone.unlocked:hover{border-color:var(--b2);transform:translateX(4px);box-shadow:4px 0 20px rgba(0,0,0,.3)}
.zone.locked{opacity:.4;cursor:not-allowed}
.zone.done{border-color:rgba(45,212,160,.25);background:rgba(45,212,160,.04)}
.zone.current{border-color:rgba(245,166,35,.3);background:rgba(245,166,35,.04)}
.zone.boss-zone{border-color:rgba(240,98,146,.3);background:rgba(240,98,146,.04)}
.zone-icon{font-size:1.8rem;flex-shrink:0;width:40px;text-align:center}
.zone-info{flex:1;min-width:0}
.zone-name{font-family:'Cinzel',serif;font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:.15rem}
.zone-desc{font-size:.72rem;color:var(--muted);margin-bottom:.4rem}
.zone-prog{height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.zone-prog-fill{height:100%;border-radius:2px;background:var(--teal);transition:width .6s}
.zone-right{text-align:right;flex-shrink:0}
.tag{font-size:.65rem;padding:.25rem .6rem;border-radius:20px;font-weight:600;display:inline-block;margin-bottom:.25rem}
.tag-easy{background:rgba(45,212,160,.15);color:var(--teal)}
.tag-med{background:rgba(245,166,35,.15);color:var(--amber)}
.tag-hard{background:rgba(124,106,247,.15);color:var(--pl)}
.tag-boss{background:rgba(240,98,146,.15);color:var(--pink)}
.tag-done{background:rgba(45,212,160,.15);color:var(--teal)}
.xp-small{font-size:.65rem;color:var(--muted)}
.connector{text-align:center;color:var(--b2);font-size:.9rem;padding:.1rem 0}
 
/* ── FREE SCREEN ── */
.theme-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.theme-chip{
  padding:.5rem 1rem;border-radius:30px;border:1px solid var(--b);
  background:var(--s2);color:var(--muted);font-size:.8rem;
  cursor:pointer;transition:all .2s;
}
.theme-chip:hover{border-color:var(--b2);color:var(--text)}
.theme-chip.selected{background:rgba(124,106,247,.15);border-color:var(--purple);color:var(--pl);font-weight:600}
.nb-row{display:flex;gap:.5rem;margin-bottom:1.25rem}
.nb-chip{
  flex:1;padding:.7rem;border-radius:10px;border:1px solid var(--b);
  background:var(--s2);color:var(--muted);font-family:'Cinzel',serif;
  font-size:.9rem;font-weight:700;cursor:pointer;text-align:center;transition:all .2s;
}
.nb-chip:hover{border-color:var(--b2);color:var(--text)}
.nb-chip.selected{background:rgba(124,106,247,.15);border-color:var(--purple);color:var(--pl)}
 
/* ── NOUVEAU COMBAT LAYOUT 3 COLONNES ── */
#combatScreen{padding:0;overflow:hidden}
.combat-layout{
  display:grid;
  grid-template-columns:280px 1fr 280px;
  grid-template-rows:auto 1fr;
  min-height:100vh;
  gap:0;
}
@media(max-width:899px){
  .combat-layout{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    min-height:unset;
    padding:1rem;
    gap:.75rem;
  }
  .combat-player-col,.combat-monster-col{display:none}
  .combat-center-col{padding:0}
}

.combat-player-col{
  background:rgba(124,106,247,.04);
  border-right:1px solid var(--b);
  padding:1.5rem 1.25rem;
  display:flex;flex-direction:column;
  align-items:center;gap:1rem;
}
.combat-monster-col{
  background:rgba(240,98,146,.04);
  border-left:1px solid var(--b);
  padding:1.5rem 1.25rem;
  display:flex;flex-direction:column;
  align-items:center;gap:1rem;
}
.combat-center-col{
  padding:1.5rem 2rem;
  display:flex;flex-direction:column;
  gap:.75rem;overflow-y:auto;
}

/* Carte joueur */
.combat-player-card{
  background:linear-gradient(135deg,rgba(124,106,247,.12),rgba(45,212,160,.06));
  border:1px solid rgba(124,106,247,.25);border-radius:16px;
  padding:1.25rem;width:100%;text-align:center;
}
.combat-player-name{
  font-family:'Cinzel',serif;font-size:1rem;font-weight:700;
  color:var(--text);margin:.5rem 0 .2rem;
}
.combat-player-race{font-size:.72rem;color:var(--muted);margin-bottom:.75rem}
.combat-xp-track{
  height:6px;background:rgba(255,255,255,.08);border-radius:3px;
  overflow:hidden;margin-bottom:.3rem;
}
.combat-xp-fill{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--purple),var(--tl2));
  transition:width .6s cubic-bezier(.22,1,.36,1);
}
.combat-xp-lbl{font-size:.65rem;color:var(--muted)}
.combat-score-big{
  font-family:'Cinzel',serif;font-size:1.8rem;font-weight:900;
  color:var(--teal);margin-top:.5rem;
}
.combat-score-lbl{font-size:.65rem;color:var(--muted)}
.combat-streak-display{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .8rem;border-radius:20px;
  background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.25);
  font-size:.8rem;color:var(--amber);font-weight:700;
  transition:all .3s;margin-top:.25rem;
  min-height:28px;
}

/* Carte monstre */
.combat-monster-card{
  background:linear-gradient(135deg,rgba(240,98,146,.08),rgba(124,106,247,.06));
  border:1px solid rgba(240,98,146,.2);border-radius:16px;
  padding:1.25rem;width:100%;text-align:center;
}
.combat-monster-emoji-big{
  font-size:5rem;line-height:1;display:block;
  filter:drop-shadow(0 0 24px rgba(240,98,146,.5));
  animation:monster-idle 3s ease-in-out infinite;
  margin:.5rem 0;
}
.combat-monster-name-big{
  font-family:'Cinzel',serif;font-size:.95rem;font-weight:700;
  color:var(--text);margin-bottom:.5rem;line-height:1.3;
}

/* Timer circulaire */
.timer-circle-wrap{
  display:flex;flex-direction:column;align-items:center;
  gap:.35rem;margin-bottom:.25rem;
}
.timer-circle-svg{transform:rotate(-90deg)}
.timer-circle-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:4}
.timer-circle-fill{
  fill:none;stroke-width:4;stroke-linecap:round;
  transition:stroke-dashoffset .1s linear, stroke .3s;
}
.timer-seconds{
  font-family:'Cinzel',serif;font-size:1.4rem;font-weight:900;
  color:var(--text);transition:color .3s;
}
.timer-label{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
 
/* ── MONSTER CARD ── */
.monster-card{
  background:linear-gradient(135deg,var(--s1),var(--s2));
  border:1px solid var(--b);border-radius:18px;padding:1.25rem 1.5rem;
  transition:all .5s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden;
}
.monster-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--purple),transparent);
  opacity:.6;
}
.monster-card.dying{opacity:0;transform:scale(.92) translateY(-12px) rotate(-1deg)}
.monster-card.boss-card-active{border-color:rgba(240,98,146,.4)}
.monster-card.boss-card-active::before{background:linear-gradient(90deg,transparent,var(--pink),transparent)}
.monster-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}
.monster-type{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.3rem}
.monster-name{font-family:'Cinzel',serif;font-size:1.2rem;font-weight:700;color:var(--text);line-height:1.2}
.monster-emoji{font-size:3rem;line-height:1;filter:drop-shadow(0 0 16px rgba(124,106,247,.5));animation:monster-idle 3s ease-in-out infinite}
@keyframes monster-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.monster-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.75rem}
.hp-label{font-size:.65rem;color:var(--muted);margin-bottom:.35rem;display:flex;justify-content:space-between}
.hp-track{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;position:relative}
.hp-fill{
  height:100%;border-radius:4px;transition:width .12s linear,background .3s;width:100%;
  background:linear-gradient(90deg,var(--teal),var(--tl2));
  box-shadow:0 0 10px rgba(45,212,160,.4);
}
.hp-fill.warn{background:linear-gradient(90deg,var(--amber),#f5c842);box-shadow:0 0 10px rgba(245,166,35,.4)}
.hp-fill.danger{background:linear-gradient(90deg,var(--pink),#ff8a65);box-shadow:0 0 10px rgba(240,98,146,.4)}
 
/* ── QUESTION ── */
.q-card{background:var(--s2);border:1px solid var(--b);border-radius:14px;padding:1.25rem 1.5rem}
.q-num{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem}
.q-text{font-family:'Cinzel',serif;font-size:clamp(.95rem,2.5vw,1.15rem);font-weight:700;line-height:1.5;color:var(--text)}
 
/* ── ITEMS ROW ── */
.items-row{display:flex;gap:.5rem}
.item-btn{
  background:var(--s2);border:1px solid var(--b);border-radius:10px;
  padding:.6rem .8rem;display:flex;align-items:center;gap:.4rem;
  font-size:.75rem;color:var(--text);cursor:pointer;transition:all .2s;
  flex:1;justify-content:center;
}
.item-btn:hover:not(:disabled){border-color:var(--b2);background:var(--s3);transform:translateY(-1px)}
.item-btn:disabled{opacity:.25;cursor:not-allowed}
.item-btn.active{border-color:var(--amber);color:var(--amber);background:rgba(245,166,35,.1);box-shadow:0 0 12px rgba(245,166,35,.2)}
.item-cnt{font-size:.65rem;color:var(--muted);margin-left:auto}
 
/* ── ANSWERS ── */
.answers{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
@media(max-width:400px){.answers{grid-template-columns:1fr}}
.ans-btn{
  background:var(--s2);border:1px solid var(--b);border-radius:var(--r);
  padding:.9rem 1rem;color:var(--text);font-size:.82rem;font-family:'Inter',sans-serif;
  cursor:pointer;text-align:left;line-height:1.4;transition:all .15s;
  position:relative;overflow:hidden;
}
.ans-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03),transparent);pointer-events:none}
.ans-btn:hover:not(:disabled){border-color:rgba(124,106,247,.4);background:var(--s3);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.ans-btn.correct{background:rgba(45,212,160,.12);border-color:var(--teal);color:var(--tl2);box-shadow:0 0 20px rgba(45,212,160,.2)}
.ans-btn.wrong{background:rgba(240,98,146,.1);border-color:var(--pink);color:var(--pink)}
.ans-btn.reveal{background:rgba(45,212,160,.06);border-color:rgba(45,212,160,.3);color:var(--teal)}
.ans-btn:disabled{cursor:default}
 
/* ── IA BUBBLE ── */
.ia-bubble{
  background:rgba(124,106,247,.08);border:1px solid rgba(124,106,247,.2);
  border-radius:var(--r);padding:.9rem 1.1rem;
  font-size:.8rem;color:var(--muted);line-height:1.6;display:none;
}
.ia-bubble.show{display:block;animation:fadeUp .3s ease}
.ia-bubble strong{color:var(--pl)}
.btn-next{
  width:100%;padding:.85rem;border-radius:var(--r);
  border:1px solid var(--b);background:rgba(255,255,255,.04);
  color:var(--text);font-family:'Inter',sans-serif;font-size:.85rem;font-weight:500;
  cursor:pointer;transition:all .2s;display:none;
}
.btn-next.show{display:block;animation:fadeUp .3s ease}
.btn-next:hover{border-color:var(--b2);background:rgba(255,255,255,.07)}
 
/* ── REWARD SCREEN ── */
.reward-wrap{
  max-width:520px;margin:0 auto;width:100%;padding:2rem 1.5rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;flex:1;justify-content:center;
}
#onboardingScreen .reward-wrap {
  justify-content:flex-start;
  padding:1rem 1.5rem;
  gap:.6rem;
  overflow-y:auto;
  max-height:100vh;
}

@media(max-height:900px){
  #onboardingScreen .logo-rune { display:none; }
  #onboardingScreen .reward-wrap { gap:.4rem; padding:.75rem 1.5rem; }
  #onboardingScreen .onb-race { padding:.6rem; }
  #onboardingScreen .onb-race-icon { font-size:1.8rem; margin-bottom:.1rem; }
  #onboardingScreen .onb-race-bonus { font-size:.62rem; padding:.15rem .4rem; }
  #onboardingScreen #onbPreview { padding:.6rem 1rem; }
  #onboardingScreen #onbAvatarWrap { display:none; }
}

@media(max-height:700px){
  #onboardingScreen .reward-wrap { gap:.3rem; }
  #onboardingScreen .logo-title { font-size:1.4rem; }
  #onboardingScreen .sec-lbl { margin-bottom:.4rem !important; }
  #onboardingScreen .onb-gender { padding:.6rem; }
  #onboardingScreen .onb-race { padding:.5rem; }
  #onboardingScreen .onb-race-name { font-size:.82rem; }
  #onboardingScreen .onb-race-desc { display:none; }
  #onboardingScreen .btn { padding:.7rem 1.5rem; }
  #onboardingScreen #onbPreview { display:none; }
}

.reward-icon-big{font-size:4rem;animation:reward-pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes reward-pop{from{transform:scale(0) rotate(-15deg)}to{transform:scale(1) rotate(0)}}
.reward-title{font-family:'Cinzel',serif;font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,var(--amber),var(--pl));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.reward-sub{font-size:.85rem;color:var(--muted);line-height:1.6;max-width:380px}
.reward-items-list{width:100%;display:flex;flex-direction:column;gap:.5rem}
.reward-item-row{
  background:var(--s2);border:1px solid var(--b);border-radius:12px;
  padding:.9rem 1.1rem;display:flex;align-items:center;gap:.9rem;text-align:left;
}
.reward-item-icon{font-size:1.6rem;flex-shrink:0}
.reward-item-info{flex:1}
.reward-item-name{font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:.1rem}
.reward-item-desc{font-size:.7rem;color:var(--muted)}
.reward-item-type{font-size:.6rem;padding:.2rem .55rem;border-radius:20px;font-weight:700;flex-shrink:0}
.type-perm{background:rgba(124,106,247,.15);color:var(--pl)}
.type-conso{background:rgba(245,166,35,.15);color:var(--amber)}
.reward-btns{width:100%;display:flex;flex-direction:column;gap:.5rem}

/* ── CHEST REWARD ANIMATION ── */
.chest-scene-wrap{
  max-width:520px;margin:0 auto;width:100%;padding:2rem 1.5rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:1rem;flex:1;justify-content:center;
}
.chest-result-title{
  font-family:'Cinzel',serif;font-size:1.8rem;font-weight:900;
  background:linear-gradient(135deg,var(--amber),var(--pl));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:fadeUp .4s .1s both;
}
.chest-result-sub{font-size:.85rem;color:var(--muted);line-height:1.6;max-width:380px;animation:fadeUp .4s .2s both}
.chest-stage{
  position:relative;width:200px;height:148px;
  margin:.25rem auto 0;
  animation:chest-drop .6s cubic-bezier(.34,1.4,.64,1) both;
}
.chest-3d-ctx{perspective:700px}
.chest-el{width:160px;margin:0 auto}
.chest-lid-wrap{transform-origin:50% 100%;transform-style:preserve-3d}
.chest-lid-wrap.open{animation:lid-flip .52s cubic-bezier(.4,0,.2,1) forwards}
.chest-lid-top{
  height:56px;
  background:linear-gradient(180deg,#B07840 0%,#8B5A30 65%,#6B4220 100%);
  border-radius:8px 8px 0 0;
  border:3px solid #2E1A08;border-bottom:none;
  position:relative;
  box-shadow:0 -3px 12px rgba(0,0,0,.5),inset 0 2px 6px rgba(255,190,80,.2);
}
.chest-lid-band{
  position:absolute;bottom:11px;left:0;right:0;height:11px;
  background:linear-gradient(180deg,#B8830A,#F0A020,#B8830A);
  border-top:2px solid #2E1A08;border-bottom:2px solid #2E1A08;
}
.chest-body-btm{
  height:80px;
  background:linear-gradient(180deg,#7A5228 0%,#5A3818 100%);
  border-radius:0 0 12px 12px;
  border:3px solid #2E1A08;border-top:none;
  position:relative;
  box-shadow:0 14px 40px rgba(0,0,0,.75);
}
.chest-body-band{
  position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);
  height:11px;
  background:linear-gradient(180deg,#B8830A,#F0A020,#B8830A);
  border-top:2px solid #2E1A08;border-bottom:2px solid #2E1A08;
}
.chest-clasp{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#FFD770,#C87800 80%);
  border:3px solid #2E1A08;
  box-shadow:0 0 14px rgba(245,160,30,.7),inset 0 2px 4px rgba(255,255,255,.2);
}
.chest-glow{
  position:absolute;bottom:78px;left:50%;transform:translateX(-50%);
  width:160px;height:4px;border-radius:50%;
  pointer-events:none;z-index:6;
}
.chest-glow.burst{animation:glow-erupt 1.4s ease both}
@keyframes glow-erupt{
  0%{box-shadow:none}
  25%{box-shadow:0 -28px 55px 45px rgba(255,210,60,.9),0 0 80px 35px rgba(255,165,20,.6)}
  60%{box-shadow:0 -14px 28px 18px rgba(255,175,40,.35)}
  100%{box-shadow:0 -5px 14px 7px rgba(255,145,20,.1)}
}
.chest-sparks{position:absolute;bottom:82px;left:50%;transform:translateX(-50%);width:0;height:0;pointer-events:none;z-index:7}
.chest-spark{
  position:absolute;border-radius:50%;
  transform:translate(-50%,-50%);
  animation:spark-fly .85s ease both;
}
@keyframes spark-fly{
  0%{transform:translate(-50%,-50%) scale(0);opacity:1}
  35%{opacity:1;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(1)}
  100%{transform:translate(calc(-50% + var(--sx2)),calc(-50% + var(--sy2))) scale(0);opacity:0}
}
.chest-rewards-list{width:100%;display:flex;flex-direction:column;gap:.5rem}
.chest-reward-card{
  background:var(--s2);border:1px solid var(--b);border-radius:12px;
  padding:.9rem 1.1rem;display:flex;align-items:center;gap:.9rem;text-align:left;
  opacity:0;animation:card-appear .4s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes card-appear{
  0%{transform:translateY(22px) scale(.88);opacity:0}
  60%{transform:translateY(-4px) scale(1.02)}
  100%{transform:translateY(0) scale(1);opacity:1}
}
.chest-continue-btn{width:100%;opacity:0;transition:opacity .4s;pointer-events:none}
.chest-continue-btn.show{opacity:1;pointer-events:auto}
@keyframes chest-drop{
  0%{transform:translateY(-80px) scale(.7);opacity:0}
  55%{transform:translateY(8px) scale(1.05);opacity:1}
  75%{transform:translateY(-4px) scale(.97)}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes lid-flip{
  0%{transform:rotateX(0deg)}
  100%{transform:rotateX(-115deg)}
}
.chest-el.shaking{animation:chest-shake .52s ease}
@keyframes chest-shake{
  0%,100%{transform:translateX(0) rotate(0)}
  15%{transform:translateX(-4px) rotate(-3deg)}
  30%{transform:translateX(4px) rotate(3deg)}
  45%{transform:translateX(-3px) rotate(-2deg)}
  60%{transform:translateX(3px) rotate(2deg)}
  75%{transform:translateX(-2px) rotate(-1deg)}
  90%{transform:translateX(1px)}
}

/* ── RESULT SCREEN ── */
.result-wrap{
  max-width:520px;margin:0 auto;width:100%;padding:2rem 1.5rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;flex:1;justify-content:center;
}
.result-icon{font-size:4rem;animation:reward-pop .5s cubic-bezier(.34,1.56,.64,1);display:block}
.result-title{font-family:'Cinzel',serif;font-size:2rem;font-weight:900;background:linear-gradient(135deg,var(--pl2),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.result-sub{font-size:.85rem;color:var(--muted)}
.result-xp{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:30px;background:rgba(124,106,247,.12);border:1px solid rgba(124,106,247,.25);font-size:.85rem;color:var(--pl);font-weight:600}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;width:100%}
.stat-card{background:var(--s2);border:1px solid var(--b);border-radius:12px;padding:1rem .75rem;text-align:center}
.stat-val{font-family:'Cinzel',serif;font-size:1.6rem;font-weight:700;margin-bottom:.2rem}
.stat-lbl{font-size:.65rem;color:var(--muted)}
.result-btns{width:100%;display:flex;flex-direction:column;gap:.5rem}
 
/* ── LEVEL UP SCREEN ── */
.levelup-wrap{
  max-width:400px;margin:0 auto;width:100%;padding:2rem 1.5rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;flex:1;justify-content:center;
}
.levelup-icon{font-size:5rem;animation:levelup-bounce .6s cubic-bezier(.34,1.56,.64,1);display:block}
@keyframes levelup-bounce{from{transform:scale(0) translateY(40px)}to{transform:scale(1) translateY(0)}}
.levelup-title{font-family:'Cinzel',serif;font-size:2.2rem;font-weight:900;background:linear-gradient(135deg,var(--amber),var(--pl));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.levelup-sub{font-size:.95rem;color:var(--muted);line-height:1.6}
.levelup-title-unlock{margin-top:.75rem;font-size:.9rem;color:var(--gold,#f0b429);background:rgba(240,180,41,.1);border:1px solid rgba(240,180,41,.25);border-radius:8px;padding:.5rem 1rem;display:inline-block}
.levelup-rays{position:absolute;inset:0;pointer-events:none;z-index:0}
 
/* ── PROFIL SCREEN ── */
.badges-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
@media(min-width:600px){.badges-grid{grid-template-columns:repeat(6,1fr)}}
.badge-card{background:var(--s2);border:1px solid var(--b);border-radius:12px;padding:.9rem .6rem;text-align:center;transition:all .2s}
.badge-card:not(.locked){cursor:pointer}
.badge-card:not(.locked):hover{border-color:var(--b2);transform:translateY(-2px)}
.badge-card.locked{opacity:.45}
.badge-card.locked:hover{opacity:1}
.badge-card.badge-active{border-color:var(--purple);background:rgba(124,106,247,.12);box-shadow:0 0 14px rgba(124,106,247,.25)}
.badge-card-icon{font-size:1.6rem;margin-bottom:.3rem;position:relative;display:inline-block}
.badge-active-dot{position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--purple);border:1.5px solid var(--s2)}
.badge-card-name{font-size:.6rem;color:var(--muted);line-height:1.3}
.title-grid{display:flex;flex-wrap:wrap;gap:.4rem}
.title-chip{padding:.4rem .85rem;border-radius:20px;border:1px solid var(--b);background:var(--s2);color:var(--muted);font-size:.75rem;cursor:pointer;transition:all .2s;position:relative;overflow:visible}
.title-chip:hover:not(.locked){border-color:var(--b2);color:var(--text)}
.title-chip.selected{background:rgba(124,106,247,.15);border-color:var(--purple);color:var(--pl);font-weight:600}
.title-chip.locked{opacity:.45;cursor:not-allowed}
.title-chip.locked:hover{opacity:1}
.title-chip.locked:hover .inv-tooltip{opacity:1}
.inv-full{display:flex;flex-direction:column;gap:.5rem}
.inv-full-row{background:var(--s2);border:1px solid var(--b);border-radius:12px;padding:.9rem 1.1rem;display:flex;align-items:center;gap:.9rem}
.inv-full-icon{font-size:1.6rem;flex-shrink:0}
.inv-full-info{flex:1}
.inv-full-name{font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:.1rem}
.inv-full-desc{font-size:.7rem;color:var(--muted)}
.inv-full-count{font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;color:var(--amber);flex-shrink:0}
 
/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes xpPop{0%{opacity:0;transform:translateY(0) scale(.8)}30%{opacity:1;transform:translateY(-22px) scale(1.15)}80%{opacity:1;transform:translateY(-32px)}100%{opacity:0;transform:translateY(-42px) scale(.9)}}
.xp-pop{position:fixed;font-size:.85rem;font-weight:700;color:var(--teal);pointer-events:none;animation:xpPop 1.3s ease forwards;z-index:999;text-shadow:0 0 10px rgba(45,212,160,.6)}
 
/* ── PARTICLES ── */
.particle{position:fixed;pointer-events:none;z-index:998;border-radius:50%;animation:particle-fly 1s ease-out forwards}
@keyframes particle-fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:var(--translate) scale(0)}}

/* ── SETTINGS ── */
.settings-btn{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:100;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--b2);
  background:rgba(15,15,26,.85);backdrop-filter:blur(12px);
  color:var(--muted);font-size:1.2rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.settings-btn:hover{color:var(--text);border-color:var(--purple);box-shadow:0 0 20px rgba(124,106,247,.3)}
.settings-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.settings-overlay.open{opacity:1;pointer-events:all}
.settings-drawer{
  position:fixed;top:50%;left:50%;z-index:201;
  width:380px;max-width:90vw;max-height:85vh;
  background:rgba(15,15,26,.97);backdrop-filter:blur(24px);
  border:1px solid var(--b);border-radius:20px;
  padding:1.75rem 1.5rem;
  display:flex;flex-direction:column;gap:1.25rem;overflow-y:auto;
  transform:translate(-50%,-50%) scale(.92);
  opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s;
}
.settings-drawer.open{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;pointer-events:all;
}

/* ── PLAYER PROFILE MODAL ── */
.player-profile-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.player-profile-overlay.open{opacity:1;pointer-events:all}
.player-profile-drawer{
  position:fixed;top:50%;left:50%;z-index:201;
  width:360px;max-width:92vw;max-height:88vh;overflow-y:auto;
  background:rgba(15,15,26,.97);backdrop-filter:blur(24px);
  border:1px solid var(--b);border-radius:20px;
  padding:1.5rem;
  transform:translate(-50%,-50%) scale(.92);
  opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s;
}
.player-profile-drawer.open{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;pointer-events:all;
}
body.light-mode .player-profile-drawer{background:rgba(240,237,232,.97)}
.pp-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}
.pp-avatar-wrap{flex-shrink:0;width:72px;height:72px;border-radius:50%;overflow:hidden;border:2px solid var(--b2);display:flex;align-items:center;justify-content:center;background:rgba(124,106,247,.08)}
.pp-identity{flex:1;min-width:0}
.pp-pseudo{font-family:'Cinzel',serif;font-size:1.05rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-title{font-size:.7rem;color:var(--purple);font-style:italic;margin-top:.1rem}
.pp-level{font-size:.75rem;color:var(--teal);margin-top:.25rem;font-weight:600}
.pp-section{margin-bottom:1rem}
.pp-section-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:.5rem}
.pp-badges{display:flex;flex-wrap:wrap;gap:.4rem}
.pp-badge{display:flex;align-items:center;gap:.3rem;background:rgba(124,106,247,.1);border:1px solid rgba(124,106,247,.2);border-radius:8px;padding:.3rem .55rem;font-size:.72rem;color:var(--text)}
.pp-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.pp-stat{background:var(--s1);border:1px solid var(--b);border-radius:10px;padding:.55rem .75rem;display:flex;flex-direction:column;gap:.15rem}
.pp-stat-val{font-family:'Cinzel',serif;font-size:.9rem;font-weight:700;color:var(--text)}
.pp-stat-lbl{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.pp-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;padding:.3rem;border-radius:6px}
.pp-close:hover{color:var(--text)}
.lb-row{cursor:pointer}
.podium-block{cursor:pointer}

/* ── CONFIRM MODAL ── */
.confirm-drawer{
  position:fixed;top:50%;left:50%;z-index:201;
  width:320px;max-width:90vw;
  background:rgba(15,15,26,.97);backdrop-filter:blur(24px);
  border:1px solid var(--b);border-radius:20px;
  padding:1.75rem 1.5rem;
  display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center;
  transform:translate(-50%,-50%) scale(.92);
  opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s;
}
.confirm-drawer.open{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;pointer-events:all;
}
body.light-mode .confirm-drawer{background:rgba(240,237,232,.97)}
.confirm-icon{font-size:3rem}
.confirm-title{font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;color:var(--text)}
.confirm-sub{font-size:.82rem;color:var(--muted);line-height:1.5}
.confirm-btns{display:flex;gap:.6rem;width:100%}
.confirm-btns .btn{font-size:.8rem;padding:.75rem}

.settings-header{display:flex;align-items:center;justify-content:space-between}
.settings-title{font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;color:var(--text)}
.settings-close{background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;padding:.25rem;transition:color .2s}
.settings-close:hover{color:var(--text)}
.settings-section{display:flex;flex-direction:column;gap:.6rem}
.settings-label{font-size:.65rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.15em}
.settings-input{
  background:var(--s2);border:1px solid var(--b);border-radius:10px;
  padding:.7rem 1rem;color:var(--text);font-family:'Inter',sans-serif;font-size:.85rem;
  width:100%;outline:none;transition:border-color .2s;
}
.settings-input:focus{border-color:var(--purple)}
.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem}
.av-btn{
  background:var(--s2);border:1px solid var(--b);border-radius:8px;
  padding:.4rem;font-size:1.2rem;cursor:pointer;text-align:center;transition:all .2s;
}
.av-btn:hover{border-color:var(--b2);transform:scale(1.1)}
.av-btn.selected{border-color:var(--purple);background:rgba(124,106,247,.15)}
.theme-btns{display:flex;gap:.5rem}
.theme-color-btn{
  flex:1;padding:.7rem;border-radius:10px;border:2px solid var(--b);
  background:var(--s2);cursor:pointer;transition:all .2s;text-align:center;font-size:.75rem;color:var(--muted);
}
.theme-color-btn:hover{border-color:var(--b2);color:var(--text)}
.theme-color-btn.selected{color:var(--text)}

.about-box{background:var(--s2);border:1px solid var(--b);border-radius:10px;padding:1rem;font-size:.78rem;color:var(--muted);line-height:1.7}
.about-box strong{color:var(--pl)}
.btn-danger{background:rgba(240,98,146,.08);border:1px solid rgba(240,98,146,.25);color:var(--pink);border-radius:10px;padding:.75rem;width:100%;cursor:pointer;font-size:.82rem;font-family:'Inter',sans-serif;transition:all .2s}
.btn-danger:hover{background:rgba(240,98,146,.15);border-color:rgba(240,98,146,.5)}
/* Sidebar desktop settings btn */
.sidebar-settings-btn{
  display:flex;align-items:center;gap:.6rem;width:100%;
  background:rgba(255,255,255,.04);border:1px solid var(--b);border-radius:var(--r);
  padding:.7rem 1rem;color:var(--muted);font-size:.8rem;cursor:pointer;transition:all .2s;margin-top:.5rem;
}
.sidebar-settings-btn:hover{color:var(--text);border-color:var(--b2)}
/* Thème vert */
body.theme-green{
  --purple:#2dd4a0;--pl:#5de8bb;--pl2:#a0f0d8;
  --teal:#4ade80;--tl2:#86efac;
  --bg:#080f0e;--s1:#0a1612;--s2:#0f1f1a;--s3:#162b24;
}
body.theme-green .orb-1{background:#2dd4a0}
body.theme-green .orb-2{background:#4ade80}
body.theme-green .orb-3{background:#06b6d4}

body.theme-red{
  --purple:#e53935;--pl:#ef9a9a;--pl2:#ffcdd2;
  --teal:#ff6f00;--tl2:#ffb300;
  --bg:#0f0808;--s1:#1a0a0a;--s2:#1f0f0f;--s3:#2b1616;
}
body.theme-red .orb-1{background:#e53935}
body.theme-red .orb-2{background:#ff6f00}
body.theme-red .orb-3{background:#b71c1c}

body.theme-gold{
  --purple:#f5a623;--pl:#f5c842;--pl2:#ffe082;
  --teal:#ffd700;--tl2:#ffe57f;
  --bg:#0f0e08;--s1:#1a180a;--s2:#1f1c0f;--s3:#2b2716;
}
body.theme-gold .orb-1{background:#f5a623}
body.theme-gold .orb-2{background:#ffd700}
body.theme-gold .orb-3{background:#e65100}

/* Mode clair */
body.light-mode{
  --bg:#f0ede8;--s1:#e8e4de;--s2:#dedad3;--s3:#d0cbc2;
  --b:rgba(0,0,0,0.08);--b2:rgba(0,0,0,0.16);
  --text:#1a1828;--muted:#6b6880;
}
body.light-mode .bg-fx::before{
  background-image:
    linear-gradient(rgba(124,106,247,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,106,247,0.05) 1px,transparent 1px);
}
body.light-mode .orb{opacity:.12}
body.light-mode .home-sidebar{background:rgba(240,237,232,.85)}
body.light-mode .logo-title{filter:drop-shadow(0 0 20px rgba(124,106,247,.3))}

body.light-mode .settings-drawer{
  background:rgba(240,237,232,.97);
  border-color:rgba(0,0,0,.12);
}
body.light-mode .settings-input{
  background:rgba(255,255,255,.7);
  color:var(--text);
}
body.light-mode .av-btn{
  background:rgba(255,255,255,.6);
}
body.light-mode .theme-color-btn{
  background:rgba(255,255,255,.6);
  color:var(--text);
}
body.light-mode .about-box{
  background:rgba(255,255,255,.5);
}

/* ── COMBAT IMMERSIF ── */
.combat-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  transition:background 1.5s ease;opacity:.18;
}
#combatScreen{position:relative}
#combatScreen .combat-layout{position:relative;z-index:1}

/* Flash rouge erreur */
.flash-wrong{animation:flash-red .4s ease}
@keyframes flash-red{
  0%{background:rgba(240,98,146,0)}
  30%{background:rgba(240,98,146,.18)}
  100%{background:rgba(240,98,146,0)}
}

/* Monstre plus grand */
.monster-emoji{
  font-size:5rem;line-height:1;
  filter:drop-shadow(0 0 24px rgba(124,106,247,.6));
  animation:monster-idle 3s ease-in-out infinite;
  transition:transform .2s;
  display:block;text-align:center;margin:.5rem 0;
}
.monster-top{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;margin-bottom:.75rem;gap:.25rem;
}
.monster-name{font-size:1.4rem}

/* Animation attaque */
@keyframes monster-attack{
  0%{transform:translateX(0) scale(1)}
  25%{transform:translateX(18px) scale(1.15)}
  50%{transform:translateX(-10px) scale(1.05)}
  100%{transform:translateX(0) scale(1)}
}
@keyframes monster-hurt{
  0%{transform:translateX(0) rotate(0)}
  20%{transform:translateX(-14px) rotate(-5deg)}
  50%{transform:translateX(10px) rotate(3deg)}
  80%{transform:translateX(-6px)}
  100%{transform:translateX(0) rotate(0)}
}
.monster-attacking{animation:monster-attack .4s cubic-bezier(.22,1,.36,1)}
.monster-hurting{animation:monster-hurt .5s cubic-bezier(.22,1,.36,1)}

/* Timer pulse */
@keyframes hp-pulse{
  0%,100%{transform:scaleX(1);filter:brightness(1)}
  50%{transform:scaleX(1.01);filter:brightness(1.4)}
}
@keyframes hp-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}
.hp-track.danger-pulse{animation:hp-shake .15s infinite}
.hp-fill.danger{animation:hp-pulse .4s infinite}

/* ── MODE ENTRAÎNEMENT ── */
.mode-tabs{display:flex;gap:.4rem;margin-bottom:1.25rem}
.mode-tab{
  flex:1;padding:.65rem;border-radius:10px;border:1px solid var(--b);
  background:var(--s2);color:var(--muted);font-family:'Cinzel',serif;
  font-size:.78rem;font-weight:700;cursor:pointer;text-align:center;transition:all .2s;
}
.mode-tab:hover{border-color:var(--b2);color:var(--text)}
.mode-tab.selected{background:rgba(124,106,247,.15);border-color:var(--purple);color:var(--pl)}
.mode-tab.training.selected{background:rgba(45,212,160,.15);border-color:var(--teal);color:var(--teal)}
.training-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .8rem;border-radius:20px;
  background:rgba(45,212,160,.12);border:1px solid rgba(45,212,160,.25);
  font-size:.7rem;color:var(--teal);font-weight:600;
}
.timer-toggle-row{display:flex;align-items:center;justify-content:space-between;
  background:var(--s2);border:1px solid var(--b);border-radius:10px;padding:.75rem 1rem;margin-bottom:1.25rem}
.timer-toggle-label{font-size:.82rem;color:var(--text)}
.timer-toggle-sub{font-size:.7rem;color:var(--muted)}

/* ── BOUTIQUE ── */
.shop-grid{display:flex;flex-direction:column;gap:.6rem}
.shop-item{
  background:var(--s1);border:1px solid var(--b);border-radius:14px;
  padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;transition:all .2s;
}
.shop-item:hover{border-color:var(--b2)}
.shop-item-icon{font-size:2rem;flex-shrink:0}
.shop-item-info{flex:1}
.shop-item-name{font-family:'Cinzel',serif;font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:.15rem}
.shop-item-desc{font-size:.72rem;color:var(--muted)}
.shop-buy-btn{
  background:linear-gradient(135deg,var(--amber),#e8831a);color:#fff;
  border:none;border-radius:10px;padding:.55rem 1rem;
  font-family:'Cinzel',serif;font-size:.75rem;font-weight:700;
  cursor:pointer;transition:all .2s;flex-shrink:0;white-space:nowrap;
}
.shop-buy-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(245,166,35,.4)}
.shop-buy-btn:disabled{opacity:.3;cursor:not-allowed;transform:none}
.shop-pts-display{
  background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.25);
  border-radius:10px;padding:.6rem 1rem;text-align:center;margin-bottom:1rem;
  font-family:'Cinzel',serif;font-size:1rem;font-weight:700;color:var(--amber);
}

/* ── TRANSITIONS ── */
@keyframes screenIn{
  from{opacity:0;transform:scale(.96) translateY(12px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes screenOut{
  from{opacity:1;transform:scale(1) translateY(0)}
  to{opacity:0;transform:scale(1.03) translateY(-8px)}
}
.screen.active{
  animation:screenIn 350ms cubic-bezier(.22,1,.36,1) forwards;
}
.screen.leaving{
  display:flex;flex-direction:column;min-height:100vh;
  animation:screenOut 200ms ease forwards;
  pointer-events:none;
}

/* ── TAILLE POLICE AJUSTABLE ── */
@media(min-width:1400px){
  body{font-size:17px}
  .home-sidebar{padding:2.5rem}
  .home-main{padding:3rem}
}

@media(min-width:1800px){
  body{font-size:19px}
  .home-sidebar{padding:3rem;max-width:420px}
  .home-layout{grid-template-columns:420px 1fr}
}

@media(min-width:2400px){
  body{font-size:22px}
  .home-sidebar{padding:3.5rem;max-width:500px}
  .home-layout{grid-template-columns:500px 1fr}
  .combat-layout{max-width:960px}
}

/* ── BOSS VICTORY FX ── */
@keyframes confetti-fall{
  0%{transform:translateY(-100px) rotate(0deg);opacity:1}
  100%{transform:translateY(110vh) rotate(720deg);opacity:0}
}
@keyframes ray-expand{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.8}
  100%{transform:translate(-50%,-50%) scale(4);opacity:0}
}
@keyframes firework-pop{
  0%{transform:translate(var(--fx),var(--fy)) scale(0);opacity:1}
  100%{transform:translate(var(--tx),var(--ty)) scale(1);opacity:0}
}
.boss-victory-overlay{
  position:fixed;inset:0;z-index:997;pointer-events:none;overflow:hidden;
}
.confetti-piece{
  position:absolute;top:-20px;width:10px;height:10px;
  border-radius:2px;animation:confetti-fall linear forwards;
}
.ray{
  position:absolute;top:50%;left:50%;
  width:200vmax;height:200vmax;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(245,166,35,.15) 0%,transparent 70%);
  animation:ray-expand 1.5s ease-out forwards;
  pointer-events:none;
}
.fw-particle{
  position:absolute;width:6px;height:6px;border-radius:50%;
  animation:firework-pop .8s ease-out forwards;
}

/* ── BOSS DEFEAT FX ── */
@keyframes defeat-crack{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.6}
  100%{transform:translate(-50%,-50%) scale(3);opacity:0}
}
@keyframes defeat-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}
@keyframes defeat-drop{
  0%{transform:translateY(-20px) rotate(var(--rot));opacity:1}
  100%{transform:translateY(110vh) rotate(calc(var(--rot) + 360deg));opacity:0}
}
.defeat-overlay{
  position:fixed;inset:0;z-index:997;pointer-events:none;overflow:hidden;
}
.defeat-ring{
  position:absolute;top:50%;left:50%;
  width:200vmax;height:200vmax;border-radius:50%;
  background:radial-gradient(ellipse,rgba(240,98,146,.15) 0%,transparent 60%);
  animation:defeat-crack 1.2s ease-out forwards;
}
.defeat-shard{
  position:absolute;width:8px;height:8px;
  animation:defeat-drop linear forwards;
  clip-path:polygon(50% 0%,100% 100%,0% 100%);
}

.defeat-shake-body{animation:defeat-shake .5s ease}

/* ── TOOLTIP ITEM ── */
.inv-item{position:relative}
.inv-tooltip{
  position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);
  background:rgba(15,15,26,.97);border:1px solid var(--b2);
  border-radius:10px;padding:.6rem .8rem;
  font-size:.72rem;color:var(--text);line-height:1.5;
  white-space:normal;min-width:160px;max-width:260px;
  text-align:center;pointer-events:none;
  opacity:0;transition:opacity .2s;z-index:50;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.inv-tooltip::after{
  content:'';position:absolute;top:100%;left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:var(--b2);
}
.inv-item:hover .inv-tooltip{opacity:1}

/* ── TOOLTIP STATS ── */
.home-sidebar{overflow:visible}
.profile-card{overflow:visible}
.profile-top{overflow:visible}
.stat-tip{position:relative;cursor:default}
.stat-tip .inv-tooltip{
  top:calc(100% + 8px);bottom:auto;
  width:220px;min-width:unset;max-width:unset;
  white-space:normal;text-align:center;
}
.stat-tip .inv-tooltip::after{
  top:auto;bottom:100%;
  border-top-color:transparent;
  border-bottom-color:var(--b2);
}
.stat-tip:hover .inv-tooltip{opacity:1}

.avatar{overflow:visible}

.avatar.stat-tip .inv-tooltip{
  left:100%;bottom:auto;top:50%;
  transform:translateY(-50%);
  margin-left:10px;
  width:240px;
}
.avatar.stat-tip .inv-tooltip::after{
  top:50%;bottom:auto;left:auto;right:100%;
  transform:translateY(-50%);
  border-top-color:transparent;
  border-bottom-color:transparent;
  border-right-color:var(--b2);
  border-left-color:transparent;
}

.badge-card:hover .inv-tooltip{opacity:1}

/* ── BADGE UNLOCK FX ── */
@keyframes badge-pop{
  0%{transform:translate(-50%,-50%) scale(0) rotate(-15deg);opacity:0}
  60%{transform:translate(-50%,-50%) scale(1.2) rotate(5deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
}
@keyframes badge-shine{
  0%{transform:translateX(-100%) rotate(45deg)}
  100%{transform:translateX(200%) rotate(45deg)}
}
.badge-unlock-overlay{
  position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;
  animation:fadeUp .3s ease;
}
.badge-unlock-card{
  position:fixed;top:50%;left:50%;
  background:linear-gradient(135deg,var(--s1),var(--s2));
  border:2px solid var(--amber);border-radius:24px;
  padding:2.5rem 2rem;text-align:center;
  min-width:280px;max-width:340px;
  box-shadow:0 0 60px rgba(245,166,35,.3);
  animation:badge-pop .5s cubic-bezier(.34,1.56,.64,1) forwards;
  overflow:hidden;
}
.badge-unlock-card::after{
  content:'';position:absolute;top:0;left:0;
  width:60px;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  animation:badge-shine 1s ease .5s forwards;
}
.badge-unlock-emoji{font-size:5rem;display:block;margin-bottom:1rem;filter:drop-shadow(0 0 20px rgba(245,166,35,.6))}
.badge-unlock-label{font-size:.7rem;color:var(--amber);text-transform:uppercase;letter-spacing:.2em;font-weight:700;margin-bottom:.5rem}
.badge-unlock-name{font-family:'Cinzel',serif;font-size:1.4rem;font-weight:900;color:var(--text);margin-bottom:.5rem}
.badge-unlock-desc{font-size:.8rem;color:var(--muted);line-height:1.5;margin-bottom:1.5rem}

#splashScreen{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg);display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:1rem;transition:opacity .3s ease;
}
#splashScreen.hidden{opacity:0;pointer-events:none;}

/* ── LEADERBOARD ── */
.podium-block{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  flex:1;max-width:120px;
}
.podium-avatar{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,var(--purple),var(--teal));
  display:flex;align-items:center;justify-content:center;font-size:24px;
  box-shadow:0 0 20px rgba(124,106,247,.3);
}
.podium-avatar.gold{background:linear-gradient(135deg,#f5a623,#f5c842);box-shadow:0 0 20px rgba(245,166,35,.5)}
.podium-avatar.silver{background:linear-gradient(135deg,#9e9e9e,#e0e0e0);box-shadow:0 0 16px rgba(200,200,200,.4)}
.podium-avatar.bronze{background:linear-gradient(135deg,#cd7f32,#e8a44a);box-shadow:0 0 16px rgba(205,127,50,.4)}
.podium-name{font-size:.72rem;font-weight:600;color:var(--text);text-align:center;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium-score{font-family:'Cinzel',serif;font-size:.85rem;font-weight:700;color:var(--teal)}
.podium-base{
  width:100%;border-radius:10px 10px 0 0;display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:1.2rem;font-weight:900;
}
.podium-base.gold{height:70px;background:linear-gradient(135deg,rgba(245,166,35,.2),rgba(245,166,35,.08));border:1px solid rgba(245,166,35,.4);color:var(--amber)}
.podium-base.silver{height:50px;background:linear-gradient(135deg,rgba(200,200,200,.15),rgba(200,200,200,.05));border:1px solid rgba(200,200,200,.3);color:#ccc}
.podium-base.bronze{height:35px;background:linear-gradient(135deg,rgba(205,127,50,.15),rgba(205,127,50,.05));border:1px solid rgba(205,127,50,.3);color:#cd7f32}
.lb-row{
  background:var(--s1);border:1px solid var(--b);border-radius:12px;
  padding:.85rem 1.1rem;display:flex;align-items:center;gap:.9rem;transition:all .2s;
}
.lb-row:hover{border-color:var(--b2)}
.lb-row.me{background:rgba(124,106,247,.06);border-color:rgba(124,106,247,.25)}
.lb-row.lb-match{border-color:rgba(45,212,160,.5);background:rgba(45,212,160,.07);box-shadow:0 0 0 2px rgba(45,212,160,.15)}
.lb-row.lb-dim{opacity:.2}
.podium-block.lb-match{outline:2px solid rgba(45,212,160,.5);border-radius:14px}
.lb-rank{font-family:'Cinzel',serif;font-size:.9rem;font-weight:700;width:28px;text-align:center;flex-shrink:0}
.lb-avatar{font-size:1.4rem;flex-shrink:0}
.lb-info{flex:1;min-width:0}
.lb-pseudo{font-size:.85rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.lb-stats{display:flex;gap:.6rem;font-size:.63rem;color:var(--muted);margin-top:.25rem;flex-wrap:wrap}
.lb-badge{font-size:.6rem;padding:.15rem .5rem;border-radius:20px;font-weight:700;white-space:nowrap}
.lb-badge-elite{background:rgba(240,98,146,.15);color:var(--pink)}
.lb-badge-tryhard{background:rgba(124,106,247,.15);color:var(--pl)}
.lb-badge-challenger{background:rgba(45,212,160,.12);color:var(--teal)}
.lb-score{font-family:'Cinzel',serif;font-size:1rem;font-weight:700;color:var(--teal);flex-shrink:0}

/* ── ONBOARDING ── */
.onb-gender{
  flex:1;padding:.75rem;border-radius:14px;border:1px solid var(--b);
  background:var(--s2);cursor:pointer;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  transition:all .2s;
}
.onb-gender:hover{border-color:var(--b2);transform:translateY(-2px)}
.onb-gender.selected{border-color:var(--purple);background:rgba(124,106,247,.12)}

.onb-race{
  padding:.75rem;border-radius:14px;border:1px solid var(--b);
  background:var(--s2);cursor:pointer;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  transition:all .2s;position:relative;overflow:hidden;
}
.onb-race:hover{border-color:var(--b2);transform:translateY(-2px)}
.onb-race.selected{border-color:var(--purple);background:rgba(124,106,247,.12);box-shadow:0 0 20px rgba(124,106,247,.2)}
.onb-race-icon{font-size:2.5rem;margin-bottom:.25rem}
.onb-race-name{font-family:'Cinzel',serif;font-size:.95rem;font-weight:700;color:var(--text)}
.onb-race-desc{font-size:.72rem;color:var(--muted)}
.onb-race-bonus{font-size:.7rem;color:var(--teal);font-weight:600;margin-top:.2rem;padding:.2rem .5rem;background:rgba(45,212,160,.08);border-radius:20px}

/* ── VESTIAIRE ── */
.wardrobe-hero {
  display:flex;flex-direction:column;align-items:center;
  gap:1rem;padding:2rem 1rem;
  background:linear-gradient(135deg,rgba(124,106,247,.1),rgba(45,212,160,.06));
  border:1px solid rgba(124,106,247,.2);border-radius:20px;
  margin-bottom:1.5rem;position:relative;overflow:hidden;
}
.wardrobe-hero::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(124,106,247,.15),transparent 70%);
  pointer-events:none;
}
.wardrobe-avatar-wrap {
  width:120px;height:120px;border-radius:24px;
  background:linear-gradient(135deg,rgba(124,106,247,.2),rgba(45,212,160,.1));
  border:2px solid rgba(124,106,247,.3);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 40px rgba(124,106,247,.3);
  position:relative;z-index:1;
}
.wardrobe-race-name {
  font-family:'Cinzel',serif;font-size:1.4rem;font-weight:900;
  color:var(--text);position:relative;z-index:1;
}
.wardrobe-race-sub {
  font-size:.78rem;color:var(--muted);position:relative;z-index:1;
}
.wardrobe-bonus-badge {
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem 1rem;border-radius:30px;
  background:rgba(45,212,160,.12);border:1px solid rgba(45,212,160,.25);
  font-size:.75rem;color:var(--teal);font-weight:600;
  position:relative;z-index:1;
}
.wardrobe-section {
  margin-bottom:1.5rem;
}
.equipment-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;
}
.equipment-slot {
  background:var(--s2);border:1px solid var(--b);border-radius:14px;
  padding:1rem .75rem;text-align:center;transition:all .2s;
  position:relative;
}
.equipment-slot.equipped {
  border-color:rgba(124,106,247,.4);
  background:rgba(124,106,247,.08);
  box-shadow:0 0 16px rgba(124,106,247,.1);
}
.equipment-slot.empty { opacity:.35; }
.equipment-slot-icon { font-size:1.8rem;display:block;margin-bottom:.4rem }
.equipment-slot-name { font-size:.65rem;color:var(--muted);display:block;margin-bottom:.2rem }
.equipment-slot-count {
  font-family:'Cinzel',serif;font-size:.9rem;font-weight:700;
  color:var(--amber);
}
.equipment-slot.equipped .equipment-slot-count { color:var(--purple) }
.equipped-check {
  position:absolute;top:.4rem;right:.4rem;
  width:16px;height:16px;border-radius:50%;
  background:var(--teal);display:flex;align-items:center;justify-content:center;
  font-size:.55rem;color:#fff;font-weight:700;
}
.history-row {
  background:var(--s1);border:1px solid var(--b);border-radius:12px;
  padding:.85rem 1.1rem;display:flex;align-items:center;gap:.9rem;
  transition:all .2s;
}
.history-row:hover { border-color:var(--b2); }
.history-icon { font-size:1.4rem;flex-shrink:0;width:32px;text-align:center }
.history-info { flex:1;min-width:0 }
.history-name { font-size:.82rem;font-weight:600;color:var(--text) }
.history-date { font-size:.65rem;color:var(--muted);margin-top:.1rem }
.history-xp {
  font-family:'Cinzel',serif;font-size:.85rem;
  font-weight:700;color:var(--teal);flex-shrink:0;
}
.stat-row {
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1rem;background:var(--s2);border:1px solid var(--b);
  border-radius:10px;margin-bottom:.4rem;
}
.stat-row-label { font-size:.8rem;color:var(--muted) }
.stat-row-val { font-family:'Cinzel',serif;font-size:.9rem;font-weight:700;color:var(--text) }
.stat-row-val.green { color:var(--teal) }
.clickable-avatar {
  cursor:pointer;transition:all .2s;
}
.clickable-avatar:hover {
  transform:scale(1.05);
  box-shadow:0 0 30px rgba(124,106,247,.6) !important;
}

/* ── ARMOIRE COSMÉTIQUES ── */
.cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin-bottom: .5rem;
}
@media(min-width: 600px) {
  .cosmetic-grid { grid-template-columns: repeat(3, 1fr); }
}
.cosmetic-slot {
  background: var(--s2); border: 1px solid var(--b);
  border-radius: 14px; padding: .9rem .75rem;
  text-align: center; position: relative;
  transition: all .2s;
}
.cosmetic-slot.unlocked { cursor: pointer; }
.cosmetic-slot.unlocked:hover {
  border-color: var(--b2); transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.cosmetic-slot.equipped {
  border-color: rgba(124,106,247,.5);
  background: rgba(124,106,247,.1);
  box-shadow: 0 0 20px rgba(124,106,247,.15);
}
.cosmetic-slot.locked {
  opacity: .45; cursor: default;
}
.cosmetic-slot.locked:hover {
  opacity: 1;
}
.cosmetic-emoji {
  display: flex; align-items: center; justify-content: center;
  height: 44px; margin-bottom: .35rem; font-size: 1.8rem;
}
.cosmetic-name {
  font-size: .72rem; font-weight: 600; color: var(--text);
  display: block; margin-bottom: .3rem;
}
.cosmetic-rarity {
  font-size: .58rem; font-weight: 700; padding: .15rem .5rem;
  border-radius: 20px; display: inline-block; margin-bottom: .3rem;
}
.cosmetic-lock {
  display: block; font-size: .9rem; margin-bottom: .2rem;
}
.cosmetic-source {
  display: block; font-size: .6rem; color: var(--muted);
  line-height: 1.4;
}
.equipped-check {
  position: absolute; top: .4rem; right: .4rem;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--purple); display: flex;
  align-items: center; justify-content: center;
  font-size: .6rem; color: #fff; font-weight: 700;
}

/* ── CLASSEMENT PAR RACE ── */
.race-faction-card {
  background:var(--s1);border:1px solid var(--b);border-radius:14px;
  padding:1rem 1.25rem;transition:all .2s;cursor:pointer;
}
.race-faction-card:hover { border-color:var(--b2); transform:translateY(-1px); }
.race-faction-card.expanded { border-color:rgba(124,106,247,.35); }
.race-faction-header { display:flex;align-items:center;gap:.9rem; }
.race-faction-rank { font-size:1.4rem;flex-shrink:0;width:32px;text-align:center }
.race-faction-avatar {
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;flex-shrink:0;
}
.race-faction-info { flex:1;min-width:0 }
.race-faction-name { font-family:'Cinzel',serif;font-size:1rem;font-weight:700;color:var(--text) }
.race-faction-sub { font-size:.68rem;color:var(--muted);margin-top:.15rem }
.race-faction-score { text-align:right;flex-shrink:0 }
.race-faction-pts { font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;color:var(--teal) }
.race-faction-lbl { font-size:.6rem;color:var(--muted) }
.race-bar-wrap { height:4px;background:rgba(255,255,255,.06);border-radius:2px;margin-top:.6rem;overflow:hidden }
.race-bar { height:100%;border-radius:2px;transition:width .8s cubic-bezier(.22,1,.36,1) }
.race-badges-row { display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.5rem }
.race-badge {
  font-size:.6rem;padding:.2rem .5rem;border-radius:20px;font-weight:600;
}
.race-players-list {
  margin-top:.85rem;padding-top:.85rem;
  border-top:1px solid var(--b);
  display:flex;flex-direction:column;gap:.4rem;
}
.race-player-row {
  display:flex;align-items:center;gap:.75rem;
  padding:.55rem .75rem;border-radius:10px;
  background:var(--s2);
}
.race-player-rank { font-size:.8rem;font-weight:700;color:var(--muted);width:20px;flex-shrink:0 }
.race-player-info { flex:1;min-width:0 }
.race-player-pseudo { font-size:.82rem;font-weight:600;color:var(--text) }
.race-player-title { font-size:.65rem;color:var(--muted) }
.race-player-score { font-family:'Cinzel',serif;font-size:.88rem;font-weight:700;color:var(--teal);flex-shrink:0 }

@media(min-width:900px){
  #profileScreen .subscreen-wrap{
    max-width:100%;
    padding:2rem 3rem;
  }
  #profileScreen .cosmetic-grid{
    grid-template-columns:repeat(4,1fr);
  }
  #profileScreen #wardrobeContent > div {
    grid-template-columns:280px 1fr;
  }
}

.combat-player-col{
  background:rgba(124,106,247,.04);
  border-right:1px solid var(--b);
  padding:1.5rem 1.25rem;
  display:flex;flex-direction:column;
  align-items:center;gap:1rem;
  justify-content:flex-start;
}
.combat-monster-col{
  background:rgba(240,98,146,.04);
  border-left:1px solid var(--b);
  padding:1.5rem 1.25rem;
  display:flex;flex-direction:column;
  align-items:center;gap:1rem;
  justify-content:flex-start;
}
.combat-center-col{
  padding:1.5rem 2rem;
  display:flex;flex-direction:column;
  gap:.75rem;overflow-y:auto;
  justify-content:center;
}

.loading-narration{
  font-size:.85rem;color:var(--muted);line-height:1.8;
  max-width:480px;margin:1rem auto 0;text-align:center;
  font-style:italic;animation:fadeUp .5s ease;
}

/* ── NETWORK BANNER ── */
#networkBanner{
  position:fixed;top:0;left:0;right:0;
  background:rgba(245,166,35,.12);
  border-bottom:1px solid rgba(245,166,35,.3);
  color:var(--amber);text-align:center;
  font-size:.78rem;font-weight:600;letter-spacing:.02em;
  padding:.45rem 1rem;z-index:10000;
  transform:translateY(-100%);transition:transform .35s ease;
}
#networkBanner.visible{transform:translateY(0)}