: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;scrollbar-width:none}
*::-webkit-scrollbar{display:none}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
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}
  .home-main > *{flex-shrink:0}
  .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);z-index:3}
.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;
  margin-bottom:.75rem;
}
.sec-lbl::after{content:'';flex:1;height:1px;background:var(--b)}

.home-modes-grid{display:flex;flex-direction:column;gap:.65rem}

@keyframes quest-skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.quest-skel{background:var(--s2);border:1px solid var(--b);border-radius:12px;padding:.7rem .85rem;display:flex;align-items:center;gap:.85rem}
.quest-skel-bar,.skel-bar{background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.04) 100%);background-size:200% 100%;animation:quest-skeleton-shimmer 1.4s ease-in-out infinite;border-radius:4px}
.skel-card{background:var(--s2);border:1px solid var(--b);border-radius:12px;padding:.85rem 1rem;margin-bottom:.55rem}

/* ── CADRES D'AVATAR ANIMÉS ── */
/* Le wrapper a une isolation pour que le ::before en z-index:-1 reste local au container.
   Le ::before dépasse de 8px tout autour pour faire un vrai disque coloré derrière l'avatar
   (qui peut avoir des éléments qui dépassent via overflow:visible). */
.avatar-frame{
  position:relative;
  display:inline-block;
  border-radius:50%;
  isolation:isolate;
  line-height:0;
}
.avatar-frame::before{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}
.avatar-frame > svg{position:relative;z-index:0;display:block}

/* Pink — Supporter */
.avatar-frame-pink::before{
  background:linear-gradient(135deg,#f06292,#c2185b,#f06292);
  background-size:200% 200%;
  animation:frame-shift 4s ease infinite;
  box-shadow:0 0 14px rgba(240,98,146,.55),0 0 4px rgba(240,98,146,.7) inset;
}

/* Gold — Top 3 alltime */
.avatar-frame-gold::before{
  background:linear-gradient(135deg,#fbbf24,#f5c842,#d97706,#fbbf24);
  background-size:300% 300%;
  animation:frame-shift 3s ease infinite;
  box-shadow:0 0 18px rgba(245,200,66,.7),0 0 6px rgba(245,200,66,.9) inset;
}

/* Sparkle — Streak 100j+ */
.avatar-frame-sparkle::before{
  background:conic-gradient(from 0deg,#7c6af7,#fbbf24,#2dd4a0,#f06292,#7c6af7);
  animation:frame-rotate 6s linear infinite;
  box-shadow:0 0 20px rgba(124,106,247,.6),0 0 10px rgba(45,212,160,.4);
}

/* Floral — 50 sessions : fleurs roses qui tournent sur fond vert pastel */
.avatar-frame-floral::before{
  background:
    radial-gradient(circle at 50% 0%,   #f9a8d4 7%, transparent 9%),
    radial-gradient(circle at 100% 50%, #f9a8d4 7%, transparent 9%),
    radial-gradient(circle at 50% 100%, #f9a8d4 7%, transparent 9%),
    radial-gradient(circle at 0% 50%,   #f9a8d4 7%, transparent 9%),
    radial-gradient(circle at 85% 15%,  #fef3c7 5%, transparent 7%),
    radial-gradient(circle at 15% 85%,  #fef3c7 5%, transparent 7%),
    radial-gradient(circle at 15% 15%,  #fef3c7 5%, transparent 7%),
    radial-gradient(circle at 85% 85%,  #fef3c7 5%, transparent 7%),
    linear-gradient(135deg,#86efac,#4ade80,#86efac);
  animation:frame-rotate 12s linear infinite;
  box-shadow:0 0 14px rgba(74,222,128,.55);
}

/* Flames — 10 boss vaincus : flammes orange/rouge agressives */
.avatar-frame-flames::before{
  background:
    conic-gradient(from 0deg,#fbbf24 0deg,#f97316 60deg,#dc2626 120deg,#f97316 180deg,#fbbf24 240deg,#f97316 300deg,#dc2626 360deg);
  animation:frame-rotate 2.5s linear infinite;
  box-shadow:
    0 0 16px rgba(249,115,22,.7),
    0 0 28px rgba(220,38,38,.45),
    inset 0 0 8px rgba(255,200,0,.6);
  filter:saturate(1.2);
}

/* Cosmic — niveau 10 : galaxie violette avec étoiles scintillantes */
.avatar-frame-cosmic::before{
  background:
    radial-gradient(circle at 20% 30%, #fff 1%, transparent 2%),
    radial-gradient(circle at 80% 20%, #fff 1.2%, transparent 2.2%),
    radial-gradient(circle at 65% 85%, #fff 1%, transparent 2%),
    radial-gradient(circle at 30% 75%, #fff 1.5%, transparent 2.5%),
    radial-gradient(circle at 90% 60%, #fff 1%, transparent 2%),
    conic-gradient(from 45deg,#1e1b4b,#7c3aed,#1e1b4b,#a855f7,#1e1b4b,#7c3aed,#1e1b4b);
  animation:frame-rotate 10s linear infinite;
  box-shadow:0 0 18px rgba(124,58,237,.65),0 0 8px rgba(168,85,247,.5);
}

/* Spooky — Halloween : fond violet avec fantômes blancs flottants */
.avatar-frame-spooky::before{
  background:
    radial-gradient(circle at 50% 0%,   #f5f5fa 8%, transparent 11%),
    radial-gradient(circle at 100% 50%, #f5f5fa 8%, transparent 11%),
    radial-gradient(circle at 50% 100%, #f5f5fa 8%, transparent 11%),
    radial-gradient(circle at 0% 50%,   #f5f5fa 8%, transparent 11%),
    linear-gradient(135deg,#1a0a2e,#4a1a6a,#2d1050);
  animation:frame-rotate 8s linear infinite;
  box-shadow:0 0 16px rgba(124,58,237,.5),inset 0 0 8px rgba(245,158,11,.4);
  filter:drop-shadow(0 0 4px rgba(245,158,11,.6));
}
.frame-preview.avatar-frame-spooky::before{
  background:
    radial-gradient(circle at 50% 0%,   #f5f5fa 14%, transparent 18%),
    radial-gradient(circle at 100% 50%, #f5f5fa 14%, transparent 18%),
    radial-gradient(circle at 50% 100%, #f5f5fa 14%, transparent 18%),
    radial-gradient(circle at 0% 50%,   #f5f5fa 14%, transparent 18%),
    linear-gradient(135deg,#1a0a2e,#4a1a6a);
  animation:frame-rotate 8s linear infinite;
  box-shadow:0 0 14px rgba(245,158,11,.5);
}

/* Snow — Noel : fond bleu glace avec flocons blancs */
.avatar-frame-snow::before{
  background:
    radial-gradient(circle at 25% 20%, #fff 2%, transparent 3%),
    radial-gradient(circle at 75% 30%, #fff 2.5%, transparent 3.5%),
    radial-gradient(circle at 60% 75%, #fff 2%, transparent 3%),
    radial-gradient(circle at 30% 80%, #fff 1.5%, transparent 2.5%),
    radial-gradient(circle at 90% 60%, #fff 2%, transparent 3%),
    conic-gradient(from 0deg,#1e3a8a,#3b82f6,#dbeafe,#3b82f6,#1e3a8a);
  animation:frame-rotate 14s linear infinite;
  box-shadow:0 0 18px rgba(147,197,253,.7),0 0 8px rgba(255,255,255,.5);
}
.frame-preview.avatar-frame-snow::before{
  background:
    radial-gradient(circle at 25% 25%, #fff 8%, transparent 11%),
    radial-gradient(circle at 75% 30%, #fff 10%, transparent 13%),
    radial-gradient(circle at 60% 75%, #fff 8%, transparent 11%),
    linear-gradient(135deg,#1e3a8a,#3b82f6);
  animation:frame-rotate 14s linear infinite;
  box-shadow:0 0 14px rgba(147,197,253,.6);
}

/* Hearts — Saint-Valentin : fond rose avec coeurs pulsants */
.avatar-frame-hearts::before{
  background:
    radial-gradient(circle at 30% 25%, #ff6b9d 4%, transparent 6%),
    radial-gradient(circle at 70% 30%, #ff6b9d 5%, transparent 7%),
    radial-gradient(circle at 65% 75%, #ff6b9d 4%, transparent 6%),
    radial-gradient(circle at 25% 75%, #ff6b9d 5%, transparent 7%),
    conic-gradient(from 30deg,#fce7f3,#f472b6,#ec4899,#f472b6,#fce7f3);
  animation:frame-rotate 9s linear infinite;
  box-shadow:0 0 18px rgba(244,114,182,.7),0 0 6px rgba(255,107,157,.5);
}
.frame-preview.avatar-frame-hearts::before{
  background:
    radial-gradient(circle at 30% 30%, #ff6b9d 14%, transparent 18%),
    radial-gradient(circle at 70% 30%, #ff6b9d 14%, transparent 18%),
    radial-gradient(circle at 50% 80%, #ff6b9d 14%, transparent 18%),
    linear-gradient(135deg,#f472b6,#ec4899);
  animation:frame-rotate 9s linear infinite;
  box-shadow:0 0 14px rgba(244,114,182,.6);
}

/* Sun — Ete : fond bleu ciel avec rayons solaires */
.avatar-frame-sun::before{
  background:
    radial-gradient(circle at 50% 50%, #fde047 22%, transparent 25%),
    conic-gradient(from 0deg,#fde047,#fbbf24,#fde047 30deg,#7dd3fc 60deg,#fde047 90deg,#fbbf24 120deg,#fde047 150deg,#7dd3fc 180deg,#fde047 210deg,#fbbf24 240deg,#fde047 270deg,#7dd3fc 300deg,#fde047 330deg,#fde047);
  animation:frame-rotate 12s linear infinite;
  box-shadow:0 0 22px rgba(253,224,71,.7),0 0 10px rgba(251,191,36,.6);
}
.frame-preview.avatar-frame-sun::before{
  background:
    radial-gradient(circle at 50% 50%, #fde047 35%, #fbbf24 50%, transparent 55%),
    linear-gradient(135deg,#7dd3fc,#0ea5e9);
  animation:frame-rotate 12s linear infinite;
  box-shadow:0 0 18px rgba(253,224,71,.7);
}

/* Fireworks — Nouvel An : feux d'artifice multicolores sur ciel nocturne */
.avatar-frame-fireworks::before{
  background:
    radial-gradient(circle at 20% 25%, #fde047 4%, transparent 5.5%),
    radial-gradient(circle at 80% 25%, #fb7185 4.5%, transparent 6%),
    radial-gradient(circle at 50% 15%, #22d3ee 4%, transparent 5.5%),
    radial-gradient(circle at 25% 75%, #a855f7 4.5%, transparent 6%),
    radial-gradient(circle at 75% 75%, #34d399 4%, transparent 5.5%),
    conic-gradient(from 0deg,#0f172a,#1e1b4b,#312e81,#1e1b4b,#0f172a);
  animation:frame-rotate 10s linear infinite;
  box-shadow:0 0 22px rgba(251,191,36,.6),0 0 8px rgba(168,85,247,.5);
}
.frame-preview.avatar-frame-fireworks::before{
  background:
    radial-gradient(circle at 25% 25%, #fde047 14%, transparent 18%),
    radial-gradient(circle at 75% 25%, #fb7185 14%, transparent 18%),
    radial-gradient(circle at 50% 75%, #22d3ee 14%, transparent 18%),
    linear-gradient(135deg,#1e1b4b,#312e81);
  animation:frame-rotate 10s linear infinite;
  box-shadow:0 0 16px rgba(251,191,36,.6);
}

/* Easter — Paques : oeufs pastel sur fond vert printemps */
.avatar-frame-easter::before{
  background:
    radial-gradient(ellipse at 25% 25%, #fde047 4% 6%, transparent 7%),
    radial-gradient(ellipse at 75% 25%, #f9a8d4 4% 6%, transparent 7%),
    radial-gradient(ellipse at 50% 80%, #93c5fd 4% 6%, transparent 7%),
    radial-gradient(ellipse at 20% 80%, #c4b5fd 3% 5%, transparent 6%),
    radial-gradient(ellipse at 90% 60%, #6ee7b7 3% 5%, transparent 6%),
    conic-gradient(from 0deg,#bbf7d0,#6ee7b7,#86efac,#bbf7d0);
  animation:frame-rotate 13s linear infinite;
  box-shadow:0 0 18px rgba(110,231,183,.55),0 0 6px rgba(249,168,212,.4);
}
.frame-preview.avatar-frame-easter::before{
  background:
    radial-gradient(ellipse at 25% 30%, #fde047 14% 18%, transparent 20%),
    radial-gradient(ellipse at 75% 30%, #f9a8d4 14% 18%, transparent 20%),
    radial-gradient(ellipse at 50% 80%, #93c5fd 14% 18%, transparent 20%),
    linear-gradient(135deg,#bbf7d0,#6ee7b7);
  animation:frame-rotate 13s linear infinite;
  box-shadow:0 0 14px rgba(110,231,183,.55);
}

/* Birthday — Anniversaire Questor : confettis */
.avatar-frame-birthday::before{
  background:
    radial-gradient(circle at 20% 25%, #f472b6 2%, transparent 3%),
    radial-gradient(circle at 80% 20%, #fbbf24 2%, transparent 3%),
    radial-gradient(circle at 65% 80%, #34d399 2%, transparent 3%),
    radial-gradient(circle at 30% 70%, #60a5fa 2%, transparent 3%),
    radial-gradient(circle at 90% 55%, #f87171 2%, transparent 3%),
    radial-gradient(circle at 10% 50%, #a855f7 2%, transparent 3%),
    conic-gradient(from 0deg,#1e1b4b,#a855f7,#1e1b4b,#ec4899,#1e1b4b,#fbbf24,#1e1b4b);
  animation:frame-rotate 11s linear infinite;
  box-shadow:0 0 18px rgba(168,85,247,.6),0 0 8px rgba(251,191,36,.5);
}
.frame-preview.avatar-frame-birthday::before{
  background:
    radial-gradient(circle at 20% 30%, #f472b6 12%, transparent 16%),
    radial-gradient(circle at 80% 30%, #fbbf24 12%, transparent 16%),
    radial-gradient(circle at 50% 80%, #34d399 12%, transparent 16%),
    linear-gradient(135deg,#a855f7,#ec4899);
  animation:frame-rotate 11s linear infinite;
  box-shadow:0 0 14px rgba(168,85,247,.5);
}

/* Aperçu des cadres dans le wardrobe (cercle simple sans avatar) */
.frame-preview{
  position:relative;
  width:48px;
  height:48px;
  border-radius:50%;
  flex-shrink:0;
  isolation:isolate;
}
.frame-preview::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
}
.frame-preview::after{
  content:'';
  position:absolute;
  inset:6px;
  border-radius:50%;
  background:var(--s2);
  z-index:1;
}
.frame-preview.avatar-frame-pink::before{
  background:linear-gradient(135deg,#f06292,#c2185b,#f06292);
  background-size:200% 200%;
  animation:frame-shift 4s ease infinite;
  box-shadow:0 0 12px rgba(240,98,146,.5);
}
.frame-preview.avatar-frame-gold::before{
  background:linear-gradient(135deg,#fbbf24,#f5c842,#d97706,#fbbf24);
  background-size:300% 300%;
  animation:frame-shift 3s ease infinite;
  box-shadow:0 0 16px rgba(245,200,66,.65);
}
.frame-preview.avatar-frame-sparkle::before{
  background:conic-gradient(from 0deg,#7c6af7,#fbbf24,#2dd4a0,#f06292,#7c6af7);
  animation:frame-rotate 6s linear infinite;
  box-shadow:0 0 18px rgba(124,106,247,.55);
}
.frame-preview.avatar-frame-floral::before{
  background:
    radial-gradient(circle at 50% 0%,   #f9a8d4 12%, transparent 14%),
    radial-gradient(circle at 100% 50%, #f9a8d4 12%, transparent 14%),
    radial-gradient(circle at 50% 100%, #f9a8d4 12%, transparent 14%),
    radial-gradient(circle at 0% 50%,   #f9a8d4 12%, transparent 14%),
    linear-gradient(135deg,#86efac,#4ade80,#86efac);
  animation:frame-rotate 12s linear infinite;
  box-shadow:0 0 12px rgba(74,222,128,.5);
}
.frame-preview.avatar-frame-flames::before{
  background:conic-gradient(from 0deg,#fbbf24 0deg,#f97316 90deg,#dc2626 180deg,#f97316 270deg,#fbbf24 360deg);
  animation:frame-rotate 2.5s linear infinite;
  box-shadow:0 0 14px rgba(249,115,22,.65);
}
.frame-preview.avatar-frame-cosmic::before{
  background:
    radial-gradient(circle at 25% 35%, #fff 5%, transparent 10%),
    radial-gradient(circle at 75% 60%, #fff 5%, transparent 10%),
    conic-gradient(from 45deg,#1e1b4b,#7c3aed,#a855f7,#1e1b4b);
  animation:frame-rotate 10s linear infinite;
  box-shadow:0 0 16px rgba(124,58,237,.6);
}
.frame-preview.equipped{outline:2px solid var(--teal);outline-offset:2px}
.frame-preview.locked{filter:grayscale(.6) opacity(.45)}
.frame-preview{cursor:pointer;transition:transform .15s}
.frame-preview:not(.locked):hover{transform:scale(1.08)}

@keyframes frame-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes frame-rotate{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
.home-modes-grid .home-sec-lbl:not(:first-child){margin-top:.9rem}

/* ── 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,
  #tournamentMenuScreen .subscreen-wrap,
  #tournamentLobbyScreen .subscreen-wrap,
  #tournamentGameScreen .subscreen-wrap,
  #tournamentResultScreen .subscreen-wrap,
  #survivalScreen .subscreen-wrap,
  #survivalResultScreen .subscreen-wrap,
  #soloHubScreen .subscreen-wrap,
  #multiplayerHubScreen .subscreen-wrap,
  #communityHubScreen .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 ── */
.free-section{background:var(--s1);border:1px solid var(--b);border-radius:14px;padding:1rem 1.25rem;margin-bottom:.75rem}
.free-section-lbl{font-size:.65rem;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.75rem}
.free-options-row{display:flex;gap:.75rem}
.free-section-half{flex:1;margin-bottom:.75rem}

/* ── MODE LIBRE : hero d'introduction ── */
.free-hero{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.25rem;margin-bottom:1rem;
  background:linear-gradient(135deg,rgba(124,106,247,.10) 0%,rgba(245,166,35,.06) 100%);
  border:1px solid rgba(124,106,247,.25);
  border-radius:14px;
}
.free-hero-icon{
  font-size:2rem;line-height:1;flex-shrink:0;
  filter:drop-shadow(0 0 12px rgba(245,166,35,.45));
}
.free-hero-title{
  font-family:'Cinzel',serif;
  font-size:1rem;font-weight:700;
  color:var(--amber);line-height:1.2;
}
.free-hero-sub{
  font-size:.74rem;color:var(--muted);
  margin-top:.15rem;line-height:1.4;
}

.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem}
.theme-chip{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:.7rem .4rem;border-radius:12px;border:1px solid var(--b);
  background:var(--s2);color:var(--muted);
  cursor:pointer;transition:transform .15s,border-color .15s,background .15s,box-shadow .2s;
  text-align:center;overflow:hidden;
}
.theme-chip::before{
  content:'';position:absolute;inset:0;border-radius:12px;
  background:radial-gradient(circle at 50% 0%,rgba(124,106,247,.18) 0%,transparent 70%);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.theme-chip:hover{
  border-color:var(--b2);color:var(--text);
  transform:translateY(-2px);
}
.theme-chip:hover::before{opacity:1}
.theme-chip.selected{
  background:rgba(124,106,247,.14);
  border-color:var(--purple);color:var(--pl);
  box-shadow:0 0 0 1px rgba(124,106,247,.4),0 4px 14px -4px rgba(124,106,247,.45);
}
.theme-chip.selected::before{opacity:.6}
.theme-chip .tc-icon{transition:transform .25s}
.theme-chip:hover .tc-icon{transform:scale(1.12)}
.theme-chip.selected .tc-icon{transform:scale(1.18)}
.tc-icon{font-size:1.4rem;line-height:1;position:relative;z-index:1}
.tc-name{font-size:.68rem;font-weight:600;line-height:1.2;position:relative;z-index:1}

.nb-row{display:flex;gap:.5rem;margin-bottom:0}
.nb-chip{
  flex:1;padding:.75rem .5rem;border-radius:10px;border:1px solid var(--b);
  background:var(--s2);color:var(--muted);font-family:'Cinzel',serif;
  font-size:.88rem;font-weight:700;cursor:pointer;text-align:center;
  transition:transform .15s,border-color .15s,background .15s,box-shadow .2s,color .15s;
}
.nb-chip:hover{
  border-color:var(--b2);color:var(--text);
  transform:translateY(-1px);
}
.nb-chip.selected{
  background:rgba(124,106,247,.15);border-color:var(--purple);color:var(--pl);
  box-shadow:0 0 0 1px rgba(124,106,247,.35),0 3px 10px -3px rgba(124,106,247,.4);
}
/* Difficulté avec couleurs sémantiques + glow */
.nb-chip.diff-easy.selected{
  background:rgba(45,212,160,.15);border-color:var(--teal);color:var(--teal);
  box-shadow:0 0 0 1px rgba(45,212,160,.35),0 3px 10px -3px rgba(45,212,160,.45);
}
.nb-chip.diff-med.selected{
  background:rgba(245,166,35,.15);border-color:var(--amber);color:var(--amber);
  box-shadow:0 0 0 1px rgba(245,166,35,.35),0 3px 10px -3px rgba(245,166,35,.45);
}
.nb-chip.diff-hard.selected{
  background:rgba(240,98,146,.15);border-color:var(--pink);color:var(--pink);
  box-shadow:0 0 0 1px rgba(240,98,146,.35),0 3px 10px -3px rgba(240,98,146,.45);
}

/* ── MODE LIBRE : récap dynamique ── */
.free-recap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1rem;margin:.5rem 0 .75rem;
  background:rgba(245,166,35,.06);
  border:1px solid rgba(245,166,35,.22);
  border-radius:12px;
  font-size:.78rem;color:var(--text);
  font-weight:500;
}
.free-recap-mode{font-weight:700;color:var(--amber)}
.free-recap-theme{color:var(--text)}
.free-recap-time{color:var(--muted);font-style:italic}
.free-recap-sep{color:var(--muted);opacity:.5}
.free-recap:empty{display:none}

/* ── Toggle switch (utilisé pour Timer en mode Entraînement) ── */
.music-toggle{
  position:relative;flex-shrink:0;
  width:42px;height:24px;padding:0;
  background:var(--s2);
  border:1px solid var(--b);
  border-radius:999px;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
.music-toggle::after{
  content:'';position:absolute;
  top:2px;left:2px;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--muted);
  transition:transform .2s,background .2s;
}
.music-toggle:hover{border-color:var(--b2)}
.music-toggle.on{
  background:rgba(45,212,160,.18);
  border-color:var(--teal);
}
.music-toggle.on::after{
  transform:translateX(18px);
  background:var(--teal);
}

/* ── MODE LIBRE : bouton "Combattre" plus impactant ── */
.btn-combat{
  background:linear-gradient(135deg,#f5a623 0%,#e08a18 50%,#c97810 100%) !important;
  color:#1a0a08 !important;
  border:none !important;
  font-family:'Cinzel',serif;
  font-weight:700;font-size:1rem;
  letter-spacing:.05em;
  box-shadow:0 4px 18px -4px rgba(245,166,35,.55),inset 0 1px 0 rgba(255,255,255,.25);
  position:relative;
  transition:transform .15s,box-shadow .2s;
}
.btn-combat:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 24px -4px rgba(245,166,35,.7),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-combat:active{transform:translateY(0)}
.btn-combat::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.3) 0%,transparent 60%);
  opacity:.8;pointer-events:none;
}

/* ── MODE SURVIE : variantes thématiques ── */
.free-hero-survival{
  background:linear-gradient(135deg,rgba(229,57,53,.12) 0%,rgba(194,24,91,.08) 100%);
  border-color:rgba(229,57,53,.3);
}
.free-hero-survival .free-hero-icon{
  filter:drop-shadow(0 0 12px rgba(229,57,53,.55));
}
.free-hero-survival .free-hero-title{color:#ff6b6b}

.survival-rule-bar{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.5rem .9rem;margin-bottom:1rem;
  background:rgba(229,57,53,.08);
  border:1px solid rgba(229,57,53,.25);
  border-radius:10px;
  font-size:.74rem;color:var(--muted);
}
.survival-rule-bar strong{color:var(--text)}

.free-recap-survival{
  background:rgba(229,57,53,.07);
  border-color:rgba(229,57,53,.25);
}
.free-recap-survival .free-recap-mode{color:#ff6b6b}

.btn-survival{
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 50%,#c2185b 100%) !important;
  color:#fff !important;
  border:none !important;
  font-family:'Cinzel',serif;
  font-weight:700;font-size:1rem;
  letter-spacing:.05em;
  box-shadow:0 4px 18px -4px rgba(229,57,53,.55),inset 0 1px 0 rgba(255,255,255,.18);
  position:relative;
  transition:transform .15s,box-shadow .2s;
}
.btn-survival:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 24px -4px rgba(229,57,53,.7),inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-survival:active{transform:translateY(0)}
.btn-survival::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.22) 0%,transparent 60%);
  opacity:.8;pointer-events:none;
}

/* ── TOURNOI : variantes thématiques (amber profond) ── */
.free-hero-tournament{
  background:linear-gradient(135deg,rgba(245,166,35,.14) 0%,rgba(229,57,53,.06) 100%);
  border-color:rgba(245,166,35,.32);
}
.free-hero-tournament .free-hero-icon{filter:drop-shadow(0 0 12px rgba(245,166,35,.55))}
.free-hero-tournament .free-hero-title{color:var(--amber)}

.free-recap-tournament{background:rgba(245,166,35,.07);border-color:rgba(245,166,35,.25)}
.free-recap-tournament .free-recap-mode{color:var(--amber)}

.btn-tournament{
  background:linear-gradient(135deg,#f5a623 0%,#e08a18 50%,#c97810 100%) !important;
  color:#1a0a08 !important;border:none !important;
  font-family:'Cinzel',serif;font-weight:700;font-size:1rem;letter-spacing:.05em;
  box-shadow:0 4px 18px -4px rgba(245,166,35,.55),inset 0 1px 0 rgba(255,255,255,.25);
  position:relative;transition:transform .15s,box-shadow .2s;
}
.btn-tournament:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 24px -4px rgba(245,166,35,.7),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-tournament:active{transform:translateY(0)}
.btn-tournament::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.3) 0%,transparent 60%);
  opacity:.8;pointer-events:none;
}

/* ── DUEL : variantes thématiques (purple) ── */
.free-hero-duel{
  background:linear-gradient(135deg,rgba(124,106,247,.14) 0%,rgba(240,98,146,.06) 100%);
  border-color:rgba(124,106,247,.32);
}
.free-hero-duel .free-hero-icon{filter:drop-shadow(0 0 12px rgba(124,106,247,.55))}
.free-hero-duel .free-hero-title{color:var(--pl)}

.free-recap-duel{background:rgba(124,106,247,.07);border-color:rgba(124,106,247,.25)}
.free-recap-duel .free-recap-mode{color:var(--pl)}

.btn-duel{
  background:linear-gradient(135deg,#8e7dfa 0%,#7c6af7 50%,#6b5be0 100%) !important;
  color:#fff !important;border:none !important;
  font-family:'Cinzel',serif;font-weight:700;font-size:1rem;letter-spacing:.05em;
  box-shadow:0 4px 18px -4px rgba(124,106,247,.6),inset 0 1px 0 rgba(255,255,255,.2);
  position:relative;transition:transform .15s,box-shadow .2s;
}
.btn-duel:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 24px -4px rgba(124,106,247,.75),inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-duel:active{transform:translateY(0)}
.btn-duel::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.25) 0%,transparent 60%);
  opacity:.8;pointer-events:none;
}

/* ── BOSS EN DUO : variantes thématiques (teal) ── */
.free-hero-coop{
  background:linear-gradient(135deg,rgba(45,212,160,.14) 0%,rgba(124,106,247,.06) 100%);
  border-color:rgba(45,212,160,.32);
}
.free-hero-coop .free-hero-icon{filter:drop-shadow(0 0 12px rgba(45,212,160,.55))}
.free-hero-coop .free-hero-title{color:var(--teal)}

.free-recap-coop{background:rgba(45,212,160,.07);border-color:rgba(45,212,160,.25)}
.free-recap-coop .free-recap-mode{color:var(--teal)}

.btn-coop{
  background:linear-gradient(135deg,#3ee0b8 0%,#2dd4a0 50%,#1ab088 100%) !important;
  color:#0a2e22 !important;border:none !important;
  font-family:'Cinzel',serif;font-weight:700;font-size:1rem;letter-spacing:.05em;
  box-shadow:0 4px 18px -4px rgba(45,212,160,.55),inset 0 1px 0 rgba(255,255,255,.3);
  position:relative;transition:transform .15s,box-shadow .2s;
}
.btn-coop:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 24px -4px rgba(45,212,160,.7),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-coop:active{transform:translateY(0)}
.btn-coop::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.32) 0%,transparent 60%);
  opacity:.8;pointer-events:none;
}

/* Bandeau règles Boss en duo (3 colonnes, ou stack mobile) */
.coop-rule-bar{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
  padding:.6rem;margin-bottom:1rem;
  background:rgba(45,212,160,.06);
  border:1px solid rgba(45,212,160,.22);
  border-radius:10px;
}
.coop-rule-item{
  text-align:center;font-size:.7rem;color:var(--muted);
  padding:.3rem .4rem;line-height:1.4;
}
.coop-rule-item strong{color:var(--text);display:block;margin-bottom:.1rem;font-size:.72rem}

/* Card "Rejoindre" partagée par tournoi/duel/coop */
.join-card{
  background:var(--s2);
  border:1px dashed var(--b);
  border-radius:14px;
  padding:1rem 1.25rem;
}
.join-code-input{
  width:100%;padding:.85rem 1rem;
  border-radius:10px;border:1px solid var(--b);
  background:var(--s1);color:var(--text);
  font-family:'Cinzel',serif;
  font-size:1.3rem;font-weight:700;
  letter-spacing:.4em;text-transform:uppercase;
  text-align:center;box-sizing:border-box;
  transition:border-color .15s;
}
.join-code-input:focus{
  outline:none;border-color:var(--amber);
}
.join-code-input::placeholder{color:var(--muted);opacity:.4;letter-spacing:.4em}

/* ── SAISON : refonte ── */
.season-hero{
  background:linear-gradient(135deg,rgba(124,106,247,.12) 0%,rgba(245,166,35,.06) 100%);
  border:1px solid rgba(124,106,247,.28);
  border-radius:14px;
  padding:1rem 1.25rem;
  margin-bottom:1rem;
}
.season-hero-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;margin-bottom:.85rem;
}
.season-month{
  font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;
  color:var(--text);line-height:1.1;
}
.season-tier-current{
  font-size:.74rem;color:var(--purple);font-weight:600;
  margin-top:.2rem;
}
.season-xp-current{text-align:right}
.season-xp-value{
  font-family:'Cinzel',serif;font-size:1.4rem;font-weight:700;
  color:var(--purple);line-height:1;
}
.season-xp-label{font-size:.62rem;color:var(--muted);margin-top:.2rem;letter-spacing:.05em;text-transform:uppercase}
.season-progress-bar{
  background:rgba(255,255,255,.05);border-radius:6px;
  height:8px;overflow:hidden;margin-bottom:.55rem;
}
.season-progress-fill{
  background:linear-gradient(90deg,var(--purple),var(--amber));
  height:100%;transition:width .4s;
  box-shadow:0 0 12px rgba(124,106,247,.4);
}
.season-progress-info{font-size:.72rem;color:var(--muted);text-align:center}

/* Récompense phare */
.season-prize{margin-bottom:1.25rem}
.season-prize-label{
  font-size:.65rem;font-weight:700;color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem;
}
.season-prize-card{
  display:flex;align-items:center;gap:.85rem;
  padding:.85rem 1rem;
  background:linear-gradient(135deg,rgba(245,166,35,.10) 0%,rgba(124,106,247,.06) 100%);
  border:1px solid rgba(245,166,35,.32);
  border-radius:14px;
  box-shadow:0 0 0 1px rgba(245,166,35,.12),0 6px 20px -8px rgba(245,166,35,.4);
}
.season-prize-icon{
  width:60px;height:60px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border-radius:12px;
}
.season-prize-info{flex:1;min-width:0}
.season-prize-name{
  font-family:'Cinzel',serif;font-weight:700;
  font-size:.95rem;color:var(--amber);line-height:1.2;
}
.season-prize-cond{font-size:.7rem;color:var(--muted);margin-top:.2rem}
.season-prize-status{flex-shrink:0;font-size:.78rem;font-weight:600;padding:.2rem .55rem;border-radius:8px}
.season-prize-status.claimed{color:var(--teal);background:rgba(45,212,160,.1)}
.season-prize-status.locked{color:var(--muted);background:rgba(255,255,255,.05)}

/* Section labels (avec compteur) */
.season-section-lbl{
  display:flex;align-items:center;gap:.5rem;
  margin-top:1rem;margin-bottom:.6rem;
}
.season-count-badge{
  font-size:.65rem;font-weight:700;
  background:rgba(245,166,35,.15);
  color:var(--amber);
  padding:.1rem .45rem;border-radius:999px;
  letter-spacing:0;text-transform:none;
}

/* Grille tiers — une seule colonne, cartes aérées */
.season-tier-grid{display:flex;flex-direction:column;gap:.55rem}

/* Légende Free / Premium au-dessus de la liste */
.season-tracks-legend{
  display:flex;flex-wrap:wrap;gap:1.1rem;
  padding:.6rem .9rem;
  background:rgba(124,106,247,.05);
  border:1px solid rgba(124,106,247,.18);
  border-radius:10px;
  margin-bottom:.85rem;
  font-size:.74rem;color:var(--muted);
}
.season-tracks-legend-item{display:flex;align-items:center;gap:.45rem}
.season-tracks-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.season-tracks-legend-dot.free{background:var(--purple);box-shadow:0 0 6px rgba(124,106,247,.5)}
.season-tracks-legend-dot.premium-on{background:var(--amber);box-shadow:0 0 6px rgba(245,166,35,.5)}
.season-tracks-legend-dot.premium-off{
  background:transparent;border:1.5px dashed rgba(255,255,255,.35);
  box-sizing:border-box;
}

/* Card tier : 3 zones — numéro / contenu / action */
.season-tier-card{
  display:grid;
  grid-template-columns:3rem 1fr auto;
  gap:1rem;align-items:center;
  padding:.85rem 1.1rem;
  background:var(--s2);
  border:1px solid var(--b);
  border-left:4px solid var(--b);
  border-radius:12px;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.season-tier-card.reached{
  background:rgba(245,166,35,.05);
  border-color:rgba(245,166,35,.22);
  border-left-color:var(--amber);
}
.season-tier-card.claimed{
  background:rgba(45,212,160,.04);
  border-color:rgba(45,212,160,.18);
  border-left-color:var(--teal);
  opacity:.55;
}
.season-tier-card.highlight{
  border-left-color:var(--amber);
  box-shadow:0 0 0 1px rgba(245,166,35,.4),0 6px 18px -6px rgba(245,166,35,.5);
}

/* Numéro de tier — gros, centré */
.season-tier-num{
  font-family:'Cinzel',serif;font-weight:800;
  font-size:1.3rem;color:var(--purple);
  text-align:center;
  position:relative;
  letter-spacing:.02em;
}
.season-tier-card.reached .season-tier-num{color:var(--amber)}
.season-tier-card.claimed .season-tier-num{color:var(--teal)}
.season-cos-badge{
  position:absolute;top:-.55rem;right:.05rem;
  font-size:.7rem;
  filter:drop-shadow(0 0 5px rgba(245,166,35,.7));
}

/* Bloc info — seuil + tracks empilés */
.season-tier-info{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.season-tier-thresh{font-size:.78rem;font-weight:600;color:var(--text)}

/* Les 2 pistes (Free + Premium) côte à côte, plus grandes et lisibles */
.season-tier-tracks{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.season-tier-track{
  display:flex;flex-direction:column;gap:.3rem;
  padding:.55rem .8rem;
  border-radius:8px;
  border:1px solid transparent;
}
.season-tier-track.free{
  background:rgba(124,106,247,.10);
  border-color:rgba(124,106,247,.25);
}
.season-tier-track.premium.unlocked{
  background:linear-gradient(135deg,rgba(245,166,35,.16) 0%,rgba(245,166,35,.06) 100%);
  border-color:rgba(245,166,35,.42);
  box-shadow:0 0 14px -6px rgba(245,166,35,.4);
}
.season-tier-track.premium.locked{
  background:rgba(255,255,255,.02);
  border:1px dashed rgba(255,255,255,.14);
  opacity:.55;
}
.season-tier-track-label{
  font-family:'Cinzel',serif;font-weight:700;
  font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;
}
.season-tier-track.free .season-tier-track-label{color:var(--purple)}
.season-tier-track.premium.unlocked .season-tier-track-label{color:var(--amber)}
.season-tier-track.premium.locked .season-tier-track-label{color:var(--muted)}
.season-tier-track-rewards{
  color:var(--text);font-size:.78rem;line-height:1.45;
}
.season-tier-track.premium.locked .season-tier-track-rewards{color:var(--muted)}

/* Si une seule piste (pas de premium reward), elle prend toute la largeur */
.season-tier-tracks:has(.season-tier-track:only-child){grid-template-columns:1fr}

.season-tier-status{flex-shrink:0;width:2.5rem;text-align:center}
.season-tier-status.claimed{color:var(--teal);font-weight:700;font-size:1.2rem}
.season-tier-status.locked{color:var(--muted);font-size:.95rem}

.season-tier-claim{
  flex-shrink:0;
  padding:.45rem .85rem;
  background:linear-gradient(135deg,#f5a623,#e08a18);
  color:#1a0a08;border:none;
  border-radius:8px;
  font-family:'Cinzel',serif;
  font-size:.78rem;font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .12s,box-shadow .15s;
  box-shadow:0 2px 8px -2px rgba(245,166,35,.4);
}
.season-tier-claim:hover{
  transform:scale(1.05);
  box-shadow:0 4px 14px -2px rgba(245,166,35,.6);
}

/* Bandeau Premium (CTA achat OU statut actif) */
.season-premium-banner{
  display:flex;align-items:center;justify-content:space-between;gap:.85rem;
  padding:.85rem 1.1rem;
  border-radius:14px;
  margin-bottom:1rem;
}
.season-premium-banner.cta{
  background:linear-gradient(135deg,rgba(245,166,35,.14) 0%,rgba(124,106,247,.10) 100%);
  border:1px solid rgba(245,166,35,.32);
  box-shadow:0 0 0 1px rgba(245,166,35,.12),0 6px 18px -8px rgba(245,166,35,.4);
}
.season-premium-banner.active{
  background:linear-gradient(135deg,rgba(245,166,35,.10) 0%,rgba(45,212,160,.08) 100%);
  border:1px solid rgba(45,212,160,.3);
  font-family:'Cinzel',serif;font-weight:700;
  font-size:.88rem;color:var(--teal);
  text-align:center;justify-content:center;
}
.season-premium-cta-text{flex:1;min-width:0}
.season-premium-cta-title{
  font-family:'Cinzel',serif;font-weight:700;font-size:.95rem;
  color:var(--amber);line-height:1.2;
}
.season-premium-cta-sub{
  font-size:.7rem;color:var(--muted);margin-top:.18rem;line-height:1.3;
}
.season-premium-buy-btn{
  flex-shrink:0;
  padding:.6rem 1.1rem;
  background:linear-gradient(135deg,#f5a623,#e08a18);
  color:#1a0a08;border:none;
  border-radius:10px;
  font-family:'Cinzel',serif;
  font-size:.9rem;font-weight:700;
  letter-spacing:.03em;
  cursor:pointer;
  transition:transform .15s,box-shadow .2s;
  box-shadow:0 3px 12px -2px rgba(245,166,35,.5);
}
.season-premium-buy-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 18px -2px rgba(245,166,35,.7);
}
.season-premium-buy-btn:active{transform:translateY(0)}

/* Tag "✨ Premium" a cote du titre des paliers */
.season-premium-tag{
  display:inline-block;margin-left:.35rem;
  font-size:.62rem;font-weight:700;
  background:rgba(245,166,35,.15);
  color:var(--amber);
  padding:.1rem .45rem;border-radius:999px;
  letter-spacing:.04em;text-transform:uppercase;
}


@media(max-width:720px){
  .season-premium-banner{padding:.6rem .8rem !important;gap:.6rem !important}
  .season-premium-cta-title{font-size:.82rem !important}
  .season-premium-cta-sub{font-size:.62rem !important}
  .season-premium-buy-btn{padding:.45rem .8rem !important;font-size:.8rem !important}
}

@media(max-width:720px){
  .season-hero{padding:.75rem .9rem !important;margin-bottom:.7rem !important}
  .season-month{font-size:.95rem !important}
  .season-tier-current{font-size:.66rem !important}
  .season-xp-value{font-size:1.15rem !important}
  .season-xp-label{font-size:.56rem !important}
  .season-progress-info{font-size:.66rem !important}
  .season-prize-card{padding:.6rem .75rem !important;gap:.55rem !important}
  .season-prize-icon{width:48px !important;height:48px !important}
  .season-prize-name{font-size:.82rem !important}
  .season-prize-cond{font-size:.62rem !important}
  .season-tier-grid{gap:.45rem !important}
  .season-tier-card{
    grid-template-columns:2.4rem 1fr auto !important;
    gap:.7rem !important;padding:.65rem .8rem !important;
  }
  .season-tier-num{font-size:1rem !important}
  .season-tier-thresh{font-size:.7rem !important}
  .season-tier-tracks{grid-template-columns:1fr !important;gap:.35rem !important}
  .season-tier-track{padding:.4rem .55rem !important}
  .season-tier-track-label{font-size:.6rem !important}
  .season-tier-track-rewards{font-size:.7rem !important}
  .season-tier-claim{padding:.35rem .6rem !important;font-size:.68rem !important}
  .season-tier-status{width:1.8rem !important;font-size:.85rem !important}
  .season-tracks-legend{font-size:.68rem !important;gap:.7rem !important;padding:.5rem .7rem !important}
}
 
/* ── 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;
}
/* Desktop : HP bar sans style particulier (géré par inline) */
.combat-top-section{display:contents}
.combat-hp-bar{
  background:var(--s2);border:1px solid var(--b);
  border-radius:10px;padding:.6rem 1rem;
}

@media(max-width:899px){
  .combat-layout{
    display:flex;flex-direction:column;
    height:100%;
    min-height:unset;
    padding:.75rem;
    gap:.6rem;
  }
  .combat-player-col,.combat-monster-col{display:none !important}
  .combat-center-col{
    padding:0;gap:.6rem;
    flex:1;min-height:0;
    overflow-y:auto;
    justify-content:flex-start;
  }
  /* Timer centré — HP bar masquée sur mobile */
  .combat-top-section{
    display:flex;align-items:center;justify-content:center;gap:.75rem;
  }
  .combat-top-section .timer-circle-wrap{flex-shrink:0}
  .combat-hp-bar{display:none}
}

.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;
}

/* 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:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 0 24px rgba(240,98,146,.5));
  animation:monster-idle 3s ease-in-out infinite;
  margin:.5rem 0;min-height:5rem;
}
.combat-monster-emoji-big svg{width:100px;height:125px;display:block;}
.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 ── */
/* Score pill — mobile uniquement */
.combat-score-pill{display:none}
@media(max-width:899px){
  .combat-score-pill{
    display:inline-flex;align-items:center;
    background:rgba(45,212,160,.1);border:1px solid rgba(45,212,160,.25);
    border-radius:20px;padding:.15rem .65rem;
    font-size:.75rem;font-weight:700;color:var(--teal);letter-spacing:.02em;
  }
}

.answers{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
/* Lettre A/B/C/D — désactivée sur desktop, visible sur mobile */
.ans-letter{display:none}
.ans-text{flex:1}
.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;
  display:flex;align-items:center;gap:.6rem;
}
.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}

/* ── Style mobile quiz ── */
@media(max-width:899px){
  .answers{grid-template-columns:1fr 1fr;gap:.55rem}
  .ans-btn{
    padding:.85rem .75rem;font-size:.8rem;
    border-radius:12px;
  }
  /* Question plus lisible */
  .q-card{padding:1.1rem 1.1rem;border-radius:14px}
  .q-text{text-align:center;font-size:1rem !important;line-height:1.55}
  .q-num{text-align:center}
  /* Timer : recalibré pour SVG 72px */
  .timer-circle-svg{width:72px !important;height:72px !important}
  .timer-seconds{font-size:1.35rem !important}
  .timer-circle-wrap > div{margin-top:-52px !important;margin-bottom:36px !important}
  /* Pas de scroll page sur l'écran combat */
  #combatScreen{height:100dvh;overflow:hidden}
  /* Écran résultat : contenu décalé vers le bas */
  .result-wrap{padding-top:4rem !important;justify-content:flex-start !important}
}
 
/* ── 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-buy-col{display:flex;flex-direction:column;align-items:center;gap:.4rem;flex-shrink:0}
.shop-qty-row{display:flex;align-items:center;gap:.4rem}
.qty-btn{
  width:28px;height:28px;border-radius:8px;border:1px solid var(--b2);
  background:var(--s2);color:var(--text);font-size:1rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s;line-height:1;
}
.qty-btn:hover{background:var(--b2);border-color:var(--pl)}
.qty-val{
  min-width:22px;text-align:center;font-family:'Cinzel',serif;
  font-size:.85rem;font-weight:700;color:var(--text);
}
.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}
.title-chip-tooltip{left:0;transform:none;text-align:left;width:200px;min-width:unset}
.title-chip-tooltip::after{left:12px;transform:none}

/* ── TOOLTIP STATS ── */
.home-sidebar{overflow:visible}
.profile-card{overflow:visible;position:relative;z-index:2}
.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}

/* Sidebar contrainte à 100vh — règle après l'override overflow:visible ci-dessus */
@media(min-width:900px){
  .home-layout{height:100vh}
  .home-sidebar{height:100vh;overflow-y:auto}
}

.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;}

/* ── TOURNOI LOBBY ── */
.tour-player-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.85rem;
}
.tour-player-card{
  background:var(--s2);
  border:1px solid var(--b);
  border-radius:16px;
  padding:1rem .75rem .85rem;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  transition:border-color .2s;
}
.tour-player-card.filled{border-color:rgba(45,212,160,.35)}
.tour-player-card.is-me{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.tour-player-card.empty{
  border-style:dashed;
  opacity:.35;
  justify-content:center;
}
.tour-player-avatar{display:flex;justify-content:center;align-items:center;height:64px}
.tour-player-name{font-size:.78rem;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tour-player-you{font-size:.6rem;color:var(--teal);text-transform:uppercase;letter-spacing:.08em;font-weight:700}

/* ── MODALE CONFIRMATION ── */
.confirm-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  transition:opacity .2s;
  display:flex;align-items:center;justify-content:center;
}
.confirm-overlay.open{opacity:1;pointer-events:all}
.confirm-dialog{
  background:rgba(15,15,26,.97);
  border:1px solid var(--b);
  border-radius:20px;
  padding:1.75rem 1.5rem;
  width:320px;max-width:90vw;
  text-align:center;
  transform:scale(.92);
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.confirm-overlay.open .confirm-dialog{transform:scale(1)}

/* ── 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}
.lb-filter-btn{
  display:flex;align-items:center;gap:.3rem;padding:.4rem .75rem;
  background:var(--s2);border:1px solid var(--b);border-radius:8px;
  color:var(--muted);font-size:.75rem;cursor:pointer;white-space:nowrap;
  transition:border-color .2s;font-family:inherit;
}
.lb-filter-lbl{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem}
.lb-search-wrap{position:relative;margin-bottom:1rem}
.lb-search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:.85rem}
.lb-search-input{width:100%;box-sizing:border-box;padding:.6rem 1rem .6rem 2.4rem;background:var(--s2);border:1px solid var(--b);border-radius:10px;color:var(--text);font-size:.82rem;outline:none;transition:border-color .2s}
.lb-search-input:focus{border-color:var(--purple)}

/* ── 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;
}
.cosmetic-slot-type {
  position: absolute; top: .35rem; left: .4rem;
  font-size: .65rem; opacity: .4; line-height: 1;
}

/* ── ACCORDÉON VESTIAIRE ── */
.accordion-section {
  background: var(--s2);
  border: 1px solid var(--b);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s;
}
.accordion-section.open {
  border-color: var(--b2);
}
.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.accordion-header:hover {
  background: rgba(255,255,255,.03);
}
.accordion-chevron {
  color: var(--muted);
  font-size: 1.2rem;
  display: inline-block;
  transition: transform .2s;
  line-height: 1;
}
.accordion-chevron.open {
  transform: rotate(90deg);
}
.accordion-body {
  padding: 0 .75rem .75rem;
  border-top: 1px solid var(--b);
}
.accordion-group-body {
  padding: .4rem .5rem .5rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border-top: 1px solid var(--b);
}
.accordion-campaign {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.018);
}
.accordion-campaign.open {
  border-color: rgba(255,255,255,.09);
}
.accordion-campaign-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .85rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.accordion-campaign-header:hover {
  background: rgba(255,255,255,.03);
}
.accordion-campaign-body {
  padding: 0 .6rem .6rem;
  border-top: 1px solid rgba(255,255,255,.05);
}

/* ── 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;
    height:100vh;
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  #profileScreen #tabPersonnageContent{
    flex:1;
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  #profileScreen #tabProgressionContent{
    flex:1;
    min-height:0;
    overflow-y:auto;
  }
  #profileScreen #wardrobeContent{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:row;
  }
  #profileScreen .cosmetic-grid{
    grid-template-columns:repeat(4,1fr);
  }
}

.wardrobe-left-panel{
  width:fit-content;
  min-width:220px;
  max-width:320px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:1.5rem 1.25rem;
  border-right:1px solid var(--b);
  overflow:hidden;
}
.wardrobe-right-panel{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:0 1.5rem 2rem;
  overflow-y:auto;
  background:var(--s1);
}
.wardrobe-right-panel > *{
  flex-shrink:0;
}

/* ── ARMURERIE : sub-tabs par slot ── */
.wardrobe-slot-tabs{
  display:flex;gap:.5rem;
  position:sticky;top:0;z-index:10;
  background:var(--s1);
  padding:1.25rem 0 .75rem;
  margin-bottom:.5rem;
  border-bottom:1px solid var(--b);
  box-shadow:0 8px 12px -8px rgba(0,0,0,.5);
}
.wardrobe-slot-tab{
  flex:1;padding:.6rem .5rem;
  background:var(--s2);
  border:1px solid var(--b);
  border-radius:10px;
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.18rem;
  font-family:inherit;color:var(--text);
  transition:background .15s,border-color .15s,color .15s;
}
.wardrobe-slot-tab:hover{
  background:var(--s1);
  border-color:rgba(245,166,35,.3);
}
.wardrobe-slot-tab.active{
  background:rgba(245,166,35,.12);
  border-color:var(--amber);
  color:var(--amber);
}
.wardrobe-slot-tab-icon{font-size:1.25rem;line-height:1}
.wardrobe-slot-tab-label{font-family:'Cinzel',serif;font-weight:700;font-size:.78rem}
.wardrobe-slot-tab-count{font-size:.66rem;color:var(--muted);font-weight:600}
.wardrobe-slot-tab.active .wardrobe-slot-tab-count{color:var(--amber)}

/* ── ARMURERIE : sections par état ── */
.wardrobe-section-block{
  margin-bottom:1.25rem;
}
.wardrobe-section-header{
  display:flex;align-items:center;gap:.5rem;
  font-family:'Cinzel',serif;
  font-size:.82rem;font-weight:700;
  color:var(--text);
  margin-bottom:.65rem;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--b);
}
.wardrobe-section-title{flex:1}
.wardrobe-section-count{
  font-size:.68rem;color:var(--muted);font-weight:600;
  background:var(--s2);
  padding:.12rem .55rem;
  border-radius:999px;
}
.wardrobe-section-header .accordion-chevron{
  font-size:1.1rem;color:var(--muted);
  transition:transform .2s;
}
.wardrobe-section-header .accordion-chevron.open{
  transform:rotate(90deg);
}
.cosmetic-hint{
  display:block;
  font-size:.66rem;color:var(--purple);
  margin-top:.2rem;font-style:italic;
}

/* ── HAUTS FAITS : cards avec description ── */
.ach-card{
  display:flex;align-items:center;gap:.85rem;
  padding:.8rem .9rem;
  background:var(--s2);
  border:1px solid var(--b);
  border-radius:12px;
  transition:transform .15s,border-color .15s;
}
.ach-card.claimable{
  background:rgba(245,166,35,.08);
  border-color:rgba(245,166,35,.32);
  box-shadow:0 0 0 1px rgba(245,166,35,.15),0 4px 14px -6px rgba(245,166,35,.4);
}
.ach-card.claimed{
  background:rgba(45,212,160,.05);
  border-color:rgba(45,212,160,.22);
  opacity:.7;
}
.ach-icon{
  font-size:1.7rem;width:2.4rem;
  text-align:center;flex-shrink:0;line-height:1;
}
.ach-info{flex:1;min-width:0}
.ach-label{
  font-family:'Cinzel',serif;
  font-weight:700;font-size:.92rem;
  color:var(--text);
  margin-bottom:.15rem;
}
.ach-desc{
  font-size:.72rem;color:var(--muted);
  margin-bottom:.4rem;line-height:1.35;
}
.ach-progress-bar{
  background:rgba(255,255,255,.05);
  border-radius:4px;height:6px;
  overflow:hidden;margin-bottom:.25rem;
}
.ach-progress-fill{
  height:100%;width:0;
  background:var(--purple);
  transition:width .4s;
}
.ach-card.claimable .ach-progress-fill{background:var(--amber)}
.ach-card.claimed   .ach-progress-fill{background:var(--teal)}
.ach-rewards{
  font-size:.68rem;color:var(--muted);
}
.ach-status{
  flex-shrink:0;font-size:.72rem;font-weight:600;
  padding:.2rem .55rem;border-radius:8px;
}
.ach-status.claimed{color:var(--teal);background:rgba(45,212,160,.1)}
.ach-status.locked{color:var(--muted);background:rgba(255,255,255,.04)}
.ach-claim-btn{
  flex-shrink:0;
  padding:.42rem .85rem;
  background:linear-gradient(135deg,#f5a623,#e08a18);
  color:#1a0a08;border:none;
  border-radius:8px;
  font-family:'Cinzel',serif;
  font-size:.74rem;font-weight:700;
  cursor:pointer;
  transition:transform .12s,box-shadow .15s;
  box-shadow:0 2px 8px -2px rgba(245,166,35,.4);
}
.ach-claim-btn:hover{
  transform:scale(1.05);
  box-shadow:0 3px 12px -2px rgba(245,166,35,.6);
}
@media(max-width:720px){
  .ach-card{padding:.6rem .7rem !important;gap:.55rem !important}
  .ach-icon{font-size:1.4rem !important;width:1.9rem !important}
  .ach-label{font-size:.82rem !important}
  .ach-desc{font-size:.66rem !important;margin-bottom:.3rem !important}
  .ach-rewards{font-size:.62rem !important}
  .ach-claim-btn{padding:.32rem .65rem !important;font-size:.65rem !important}
}

/* ── PROGRESSION : bandeau de stats ── */
.progression-stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.65rem;
  margin-bottom:1.5rem;
}
.stat-card{
  background:var(--s2);
  border:1px solid var(--b);
  border-radius:12px;
  padding:.85rem .6rem;
  text-align:center;
  display:flex;flex-direction:column;justify-content:center;gap:.15rem;
}
.stat-icon{
  font-size:1.4rem;line-height:1;margin-bottom:.15rem;
}
.stat-value{
  font-family:'Cinzel',serif;
  font-size:1.4rem;font-weight:700;
  color:var(--amber);line-height:1.1;
}
.stat-label{
  font-size:.72rem;font-weight:600;
  color:var(--text);margin-top:.1rem;
}
.stat-sub{
  font-size:.62rem;color:var(--muted);
  margin-top:.1rem;
}
@media(max-width:720px){
  .progression-stats-grid{
    grid-template-columns:repeat(2,1fr);gap:.5rem;
  }
  .stat-card{padding:.65rem .45rem}
  .stat-value{font-size:1.15rem}
  .stat-label{font-size:.65rem}
  .stat-sub{font-size:.58rem}
}

/* Mobile : sub-tabs plus compactes */
@media(max-width:720px){
  .wardrobe-slot-tab{padding:.45rem .4rem}
  .wardrobe-slot-tab-icon{font-size:1.05rem}
  .wardrobe-slot-tab-label{font-size:.72rem}
  .wardrobe-slot-tab-count{font-size:.62rem}
}

.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)}



/* ══ MODE SURVIE ══ */
.survival-card{border-color:rgba(229,57,53,.3)!important;background:linear-gradient(135deg,rgba(229,57,53,.07),rgba(194,24,91,.05))!important}
.survival-card:hover{border-color:rgba(229,57,53,.6)!important}
.survival-heart{font-size:1.3rem;transition:transform .2s;display:inline-block;line-height:1}
.survival-heart.lost{filter:grayscale(1);opacity:.3;transform:scale(.8)}
.survival-heart.losing{animation:heart-lose .4s ease forwards}
.survival-heart.healing{animation:heart-heal .55s ease}
@keyframes heart-lose{0%{transform:scale(1.3)}50%{transform:scale(.6) rotate(-20deg)}100%{transform:scale(.8);filter:grayscale(1);opacity:.3}}
@keyframes heart-heal{0%{transform:scale(1)}40%{transform:scale(1.5)}70%{transform:scale(.9)}100%{transform:scale(1)}}
#survivalLivesDisplay{display:flex!important}
#survivalLivesDisplay[style*="none"]{display:none!important}
.survival-stat-card{
  background:var(--s1);border:1px solid var(--b);border-radius:14px;
  padding:.9rem 1.4rem;min-width:90px;
}
.survival-stat-val{font-family:'Cinzel',serif;font-size:1.6rem;font-weight:900;color:var(--text)}
.survival-stat-lbl{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.2rem}

/* ── MOBILE NAV STRIPS (masqués sur desktop) ── */
.mobile-home-nav{display:none}
.mob-profile-strip{display:none}
.profile-mobile-nav{display:none}

/* Wrappers layout (transparents sur desktop) */
.profile-screen-layout{display:flex;flex-direction:column;flex:1}
.simple-screen-layout{display:flex;flex-direction:column;flex:1}

/* Ecrans pleine largeur : grilles et listes longues respirent mieux */
#seasonScreen .subscreen-wrap,
#achievementsScreen .subscreen-wrap,
#friendsScreen .subscreen-wrap,
#freeScreen .subscreen-wrap,
#survivalScreen .subscreen-wrap,
#tournamentMenuScreen .subscreen-wrap,
#duelMenuScreen .subscreen-wrap,
#coopBossMenuScreen .subscreen-wrap{
  max-width:none;
}
.simple-mobile-nav{display:none}
.settings-mobile-nav{display:none}
.settings-inner{display:flex;flex-direction:column;gap:1.25rem;flex:1;overflow-y:auto}

/* ── TÉLÉPHONE PAYSAGE (ex: Galaxy S25 ~780×360) ── */
@media (orientation:landscape) and (max-height:500px){

  /* ── HOME : strip nav gauche + contenu unique ── */
  .home-layout{
    display:grid !important;
    grid-template-columns:56px 1fr !important;
    height:100vh;
    overflow:hidden;
    padding:0 !important;
    gap:0 !important;
    min-height:unset !important;
  }

  /* Sidebar desktop → cachée */
  .home-sidebar{display:none !important}

  /* Strip nav gauche */
  .mobile-home-nav{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    padding:.5rem .25rem;
    gap:.5rem;
    background:rgba(8,8,16,.97);
    border-right:1px solid var(--b);
    height:100vh;
    overflow:hidden;
  }
  .mob-nav-avatar{
    width:36px;height:36px;border-radius:10px;
    background:linear-gradient(135deg,var(--purple),var(--teal));
    display:flex;align-items:center;justify-content:center;
    font-size:18px;cursor:pointer;flex-shrink:0;
    box-shadow:0 0 12px rgba(124,106,247,.35);
    overflow:hidden;
  }
  .mob-nav-avatar:hover{box-shadow:0 0 18px rgba(124,106,247,.6)}
  .mob-nav-avatar svg{width:36px !important;height:36px !important}
  .mob-nav-sep{width:32px;height:1px;background:var(--b);flex-shrink:0}
  .mob-nav-btn{
    width:36px;height:36px;border-radius:10px;border:1px solid var(--b);
    background:rgba(255,255,255,.04);font-size:1.1rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:all .2s;
  }
  .mob-nav-btn:hover{background:rgba(255,255,255,.09);border-color:var(--b2)}
  .mob-nav-back{font-family:'Cinzel',serif;font-weight:700;color:var(--muted)}

  /* Contenu principal : scroll unique */
  .home-main{
    display:flex !important;
    flex-direction:column;
    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    padding:.55rem .65rem !important;
    gap:.45rem !important;
  }

  /* Strip profil compact (top du home-main) */
  .mob-profile-strip{
    display:flex !important;
    align-items:center;
    gap:.75rem;
    background:var(--s2);
    border:1px solid var(--b);
    border-radius:10px;
    padding:.45rem .7rem;
    flex-shrink:0;
  }
  .mob-strip-info{flex:1;min-width:0}
  .mob-strip-pseudo{
    font-family:'Cinzel',serif;font-size:.82rem;font-weight:700;
    color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .mob-strip-lvl{font-size:.62rem;color:var(--muted);margin-top:.05rem}
  .mob-strip-stats{display:flex;gap:.6rem;flex-shrink:0}
  .mob-strip-stat{font-size:.72rem;color:var(--muted)}
  .mob-strip-stat b{color:var(--text)}

  /* Boss card compact */
  #dailyBossCard{padding:.55rem .8rem !important;flex-shrink:0}
  #dailyBossCard .campaign-icon{font-size:2rem}
  #dailyBossCard .campaign-name{font-size:.95rem}
  #dailyBossCard .campaign-sub{font-size:.65rem;margin-bottom:0}
  #dailyBossCard .campaign-pct{font-size:1.1rem}

  /* Grille de modes : 2 colonnes — pas de flex:1 (le scroll naturel de home-main suffit avec 10+ cards) */
  .home-modes-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:.4rem;
    align-content:start;
    flex-shrink:0;
  }
  .home-sec-lbl{display:none !important}

  /* Mode buttons dans la grille */
  .home-modes-grid .free-card{
    padding:.55rem .65rem !important;
    gap:.5rem;
    margin:0 !important;
  }
  .home-modes-grid .free-card-icon{font-size:1.5rem;flex-shrink:0}
  .home-modes-grid .free-card-name{font-size:.78rem;margin-bottom:0}
  .home-modes-grid .free-card-sub{display:none}
  .home-modes-grid .chevron{display:none}

  /* ── PROFILE SCREEN ── */
  .profile-screen-layout{
    display:grid !important;
    grid-template-columns:56px 1fr;
    height:100vh;
    overflow:hidden;
    flex:unset;
  }
  .profile-mobile-nav{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    padding:.5rem .25rem;
    gap:.5rem;
    background:rgba(8,8,16,.97);
    border-right:1px solid var(--b);
    height:100vh;
    overflow:hidden;
  }
  /* Bouton retour en texte dans le strip */
  #profileMobileBack{
    font-size:.95rem;font-weight:700;color:var(--muted);
    font-family:'Cinzel',serif;
  }
  /* Boutons onglets mobile */
  .mob-tab-btn{font-size:1rem;color:var(--muted)}
  .mob-tab-btn.mob-tab-active{
    color:var(--purple);
    background:rgba(124,106,247,.15) !important;
    border-color:rgba(124,106,247,.4) !important;
  }
  /* Masquer back-row et mode-tabs dans la subscreen */
  #profileScreen .back-row,
  #profileScreen #profileModeTabs{display:none !important}
  /* Subscreen : scroll unique */
  #profileScreen .subscreen-wrap{
    overflow-y:auto !important;
    height:100vh;
    max-height:100vh;
    padding:.65rem .75rem !important;
  }
  /* Vestiaire compact */
  .wardrobe-hero{padding:1rem .75rem !important;gap:.6rem !important;margin-bottom:.75rem !important}
  .wardrobe-avatar-wrap{width:80px !important;height:80px !important;border-radius:16px !important}
  .wardrobe-race-name{font-size:1rem !important}
  .wardrobe-race-sub{display:none}
  .wardrobe-bonus-badge{font-size:.65rem !important;padding:.3rem .7rem !important}
  .equipment-grid{gap:.5rem !important}
  .equipment-slot{padding:.6rem .5rem !important}
  .equipment-slot-icon{font-size:1.4rem !important}
  .cosmetic-grid{gap:.4rem !important}
  .cosmetic-slot{padding:.6rem .5rem !important}
  .cosmetic-emoji{height:34px !important;font-size:1.4rem !important}
  .cosmetic-name{font-size:.62rem !important}
  /* Progression compact */
  .title-grid{gap:.3rem !important}
  .title-chip{padding:.3rem .65rem !important;font-size:.7rem !important}
  .badges-grid{gap:.4rem !important}
  .badge-card{padding:.6rem .4rem !important}
  .badge-card-icon{font-size:1.3rem !important}

  /* ── PARAMÈTRES : full-screen avec strip nav ── */
  .settings-overlay.open{display:none !important}
  .settings-drawer.open{
    position:fixed;
    top:0 !important;left:0 !important;
    width:100vw !important;height:100vh !important;
    max-width:100vw !important;max-height:100vh !important;
    border-radius:0 !important;
    transform:none !important;
    display:grid !important;
    grid-template-columns:56px 1fr;
    padding:0 !important;
    gap:0;
    overflow:hidden;
    opacity:1;pointer-events:all;
  }
  .settings-mobile-nav{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    padding:.5rem .25rem;
    gap:.5rem;
    background:rgba(8,8,16,.97);
    border-right:1px solid var(--b);
    height:100vh;
    overflow:hidden;
  }
  .settings-inner{
    overflow-y:auto;
    height:100vh;
    padding:.65rem .85rem !important;
    gap:.85rem !important;
  }
  .settings-header{padding-top:.1rem}
  /* Sections compactes */
  .settings-section{gap:.4rem !important}
  .theme-color-btn{padding:.5rem .4rem !important;font-size:.7rem !important}
  .about-box{font-size:.72rem !important;padding:.65rem !important}

  /* ── BOUTIQUE (+ autres écrans simples) ── */
  .simple-screen-layout{
    display:grid !important;
    grid-template-columns:56px 1fr;
    height:100vh;
    overflow:hidden;
    flex:unset;
  }
  .simple-mobile-nav{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    padding:.5rem .25rem;
    gap:.5rem;
    background:rgba(8,8,16,.97);
    border-right:1px solid var(--b);
    height:100vh;
    overflow:hidden;
  }
  #shopScreen .subscreen-wrap,
  .simple-screen-layout .subscreen-wrap{
    overflow-y:auto !important;
    height:100vh;
    max-height:100vh;
    padding:.65rem .75rem !important;
  }
  #shopScreen .back-row,
  .simple-screen-layout .back-row{display:none !important}
  /* Boutique : items plus compacts */
  .shop-pts-display{padding:.45rem .75rem !important;font-size:.85rem !important;margin-bottom:.6rem !important}
  .shop-item{padding:.65rem .9rem !important;gap:.7rem !important}
  .shop-item-icon{font-size:1.5rem !important}
  .shop-item-name{font-size:.82rem !important}
  .shop-item-desc{font-size:.65rem !important}
  .shop-buy-btn{padding:.45rem .8rem !important;font-size:.7rem !important}

  /* ── COMBAT : compact en paysage ── */
  .combat-layout{padding:.4rem !important;gap:.35rem !important}
  .combat-center-col{padding:.4rem .5rem !important;gap:.35rem !important}
  .q-card{padding:.5rem .75rem !important}
  .q-num{font-size:.58rem;margin-bottom:.35rem}
  .q-text{font-size:.84rem !important;line-height:1.35}
  .ans-btn{padding:.5rem .65rem !important;font-size:.76rem !important;line-height:1.3}
  .answers{gap:.35rem !important}
  .items-row{gap:.35rem}
  .item-btn{padding:.4rem .5rem;font-size:.68rem}
  .btn-next{padding:.6rem !important;font-size:.78rem !important}
  .ia-bubble{padding:.5rem .7rem !important;font-size:.72rem !important}
  .timer-circle-svg{width:48px !important;height:48px !important}
  .timer-seconds{font-size:1rem !important}
  .timer-label{display:none}
  .combat-hp-bar{padding:.35rem .6rem !important}
  .hp-track{height:6px}

  /* ── SOUS-ÉCRANS ── */
  .subscreen-wrap{padding:.65rem .75rem !important}
  .back-row{margin-bottom:.6rem !important}
  .subscreen-title{font-size:.95rem !important}
  .btn{padding:.6rem .9rem !important;font-size:.78rem !important}
  .btn-sm{padding:.45rem .8rem !important;font-size:.7rem !important}
  .campaign-card{padding:.6rem .85rem !important}
  .campaign-icon{font-size:1.7rem}

  /* ── RÉSULTATS / RÉCOMPENSES ── */
  .reward-wrap,.result-wrap,.chest-scene-wrap,.levelup-wrap{
    padding:.75rem !important;gap:.55rem !important;justify-content:flex-start !important
  }
  .reward-icon-big,.result-icon{font-size:2.5rem !important}
  .reward-title,.result-title{font-size:1.15rem !important}
  .levelup-title{font-size:1.3rem !important}
  .levelup-icon{font-size:2.8rem !important}
  .result-stats{gap:.4rem !important}
  .stat-val{font-size:1.1rem !important}
  .chest-stage{width:110px;height:82px;margin:.1rem auto 0 !important}
  .chest-el{width:92px}
  .chest-lid-top{height:32px}
  .chest-body-btm{height:46px}

  /* ── LOGIN ── */
  #loginScreen .reward-wrap{padding:.6rem 1rem !important;gap:.45rem !important}
  #loginScreen .logo-rune{font-size:1.6rem !important}
  #loginScreen .logo-title{font-size:1.5rem !important}
  #loginScreen .logo-sub{font-size:.7rem !important}
  #loginScreen [style*="max-width:320px"]{margin-bottom:.5rem !important;font-size:.72rem !important}
  #loginScreen .settings-input{padding:.55rem .9rem !important;font-size:.82rem !important}
  #loginScreen .btn{padding:.55rem 1.2rem !important;font-size:.8rem !important}

  /* ── ONBOARDING ── */
  #onboardingScreen .reward-wrap{padding:.55rem .85rem !important;gap:.45rem !important}
  #onboardingScreen .logo-title{font-size:1.3rem !important}
  #onboardingScreen [style*="font-size:.85rem"]{font-size:.72rem !important}
  /* Pseudo */
  #onboardingScreen .sec-lbl{margin-bottom:.3rem !important;font-size:.7rem !important}
  #onbPseudo{padding:.5rem .85rem !important;font-size:.82rem !important}
  /* Genre */
  .onb-gender{padding:.5rem .9rem !important;gap:.3rem !important}
  .onb-gender [style*="font-size:2rem"]{font-size:1.4rem !important}
  .onb-gender [style*="font-size:.85rem"]{font-size:.72rem !important}
  /* Races */
  #raceGrid{gap:.45rem !important}
  .onb-race{padding:.55rem .6rem !important;gap:.2rem !important}
  .onb-race-icon{font-size:1.4rem !important}
  .onb-race-name{font-size:.75rem !important}
  .onb-race-desc{font-size:.62rem !important}
  .onb-race-bonus{font-size:.6rem !important}
  /* Aperçu + bouton */
  #onbPreview{padding:.55rem .9rem !important}
  #onbConfirmBtn{padding:.6rem 1.2rem !important;font-size:.8rem !important}

  /* ── PLAYER PROFILE MODAL ── */
  .player-profile-drawer{max-height:96vh !important;padding:1rem !important}
  .pp-header{gap:.65rem !important;margin-bottom:.75rem !important}
  .pp-avatar-wrap{width:52px !important;height:52px !important}
  .pp-pseudo{font-size:.9rem !important}

  /* ── CONFIRM DRAWERS ── */
  .confirm-drawer{padding:1.25rem 1.25rem 1rem !important;gap:.65rem !important;max-height:96vh !important;overflow-y:auto}
  .confirm-icon{font-size:1.8rem !important}
  .confirm-title{font-size:.95rem !important}
  .confirm-sub{font-size:.75rem !important}
  .confirm-btns{gap:.5rem !important;margin-top:.1rem !important}
  /* Boss confirm : avatar dans confirm-icon */
  #bossConfirmIcon{height:72px !important;font-size:2.5rem !important}
  /* Score explain : plus compact */
  #scoreExplainDrawer{padding:1.25rem !important}
  #scoreExplainDrawer .confirm-icon{font-size:1.5rem !important}
  #scoreExplainDrawer [style*="font-size:.8rem"]{font-size:.72rem !important}
  #scoreExplainDrawer [style*="grid-template-columns:1fr 1fr"]{gap:.3rem !important}

  /* ── COMBAT START OVERLAY ── */
  #combatStartOverlay{gap:.75rem !important}
  #combatStartEmoji{font-size:3rem !important}
  #combatStartName{font-size:1.2rem !important;margin:.35rem 0 .1rem !important}
  #combatStartSub{font-size:.72rem !important}
  #combatStartOverlay [style*="gap:1rem"]{gap:.6rem !important}
  #combatStartOverlay button{padding:.65rem 1.4rem !important;font-size:.8rem !important}

  /* ── CAMPAGNES / CATÉGORIE / DÉTAIL CAMPAGNE ── */
  #campaignsScreen .subscreen-wrap,
  #categoryScreen .subscreen-wrap,
  #campaignScreen .subscreen-wrap{
    overflow-y:auto !important;
    height:100vh;
    max-height:100vh;
    padding:.65rem .75rem !important;
  }
  /* Cards campagne compactes */
  .campaign-card{padding:.5rem .75rem !important}
  .campaign-icon{font-size:1.6rem !important}
  .campaign-name{font-size:.9rem !important}
  .campaign-sub{font-size:.63rem !important;margin-bottom:.15rem !important}
  .campaign-pct{font-size:1rem !important}
  /* Zones dans le détail campagne */
  .zone-list{gap:.35rem !important}
  .zone-item{padding:.5rem .75rem !important;gap:.5rem !important}
  .zone-num{font-size:.75rem !important;width:22px !important}
  .zone-name{font-size:.8rem !important}
  .zone-status{font-size:.7rem !important}
  /* Catégorie : group headers */
  .cat-group-title{font-size:.7rem !important;margin:.4rem 0 .25rem !important}

  /* ── MODE LIBRE ── */
  #freeScreen .subscreen-wrap{
    overflow-y:auto !important;
    height:100vh;
    max-height:100vh;
    padding:.65rem .75rem !important;
  }
  /* Onglets mode masqués (remplacés par strip) */
  .free-mode-tabs{display:none !important}
  #freeScreen .sec-lbl{margin-bottom:.35rem !important;font-size:.7rem !important}
  /* Timer toggle compact */
  .timer-toggle-row{padding:.4rem 0 !important}
  .timer-toggle-label{font-size:.75rem !important}
  .timer-toggle-sub{font-size:.62rem !important}

  /* ── MODE SURVIE ── */
  #survivalScreen .subscreen-wrap{
    overflow-y:auto !important;
    height:100vh;
    max-height:100vh;
    padding:.65rem .75rem !important;
  }
  #survivalScreen [style*="font-size:2.5rem"]{font-size:1.8rem !important;margin-bottom:.25rem !important}
  #survivalScreen [style*="line-height:1.7"]{font-size:.72rem !important}
  #survivalScreen .sec-lbl{margin-bottom:.35rem !important;font-size:.7rem !important}

  /* ── RÉSULTAT SURVIE ── */
  #survivalResultScreen .subscreen-wrap{
    padding:.65rem .85rem !important;
    gap:.65rem !important;
    justify-content:flex-start !important;
  }
  #survivalResultScreen [style*="font-size:3rem"]{font-size:2rem !important}
  #survivalResultScreen [style*="font-size:1.6rem"]{font-size:1.15rem !important}
  .survival-stat-card{padding:.55rem .9rem !important;min-width:70px !important}
  .survival-stat-val{font-size:1.2rem !important}

  /* ── DUEL MENU & LOBBY ── */
  /* back-row déjà masqué par simple-screen-layout .back-row */
  /* Formulaire créer/rejoindre : compact */
  #duelMenuScreen .subscreen-wrap{
    overflow-y:auto !important;
    height:100vh;
    max-height:100vh;
    padding:.65rem .75rem !important;
  }
  #duelMenuScreen .sec-lbl{margin-bottom:.4rem !important;font-size:.7rem !important}
  .theme-grid{gap:.3rem !important;grid-template-columns:repeat(4,1fr) !important}
  .theme-chip{padding:.4rem .25rem !important}
  .tc-icon{font-size:1rem !important}
  .tc-name{font-size:.6rem !important}
  .free-section{padding:.65rem .75rem !important}
  .free-options-row{flex-direction:column;gap:.4rem}
  .nb-row{gap:.3rem !important}
  .nb-chip{padding:.4rem .4rem !important;font-size:.72rem !important}
  .free-hero{padding:.55rem .75rem !important;gap:.6rem !important;margin-bottom:.55rem !important}
  .free-hero-icon{font-size:1.3rem !important}
  .free-hero-title{font-size:.78rem !important}
  .free-hero-sub{font-size:.62rem !important}
  .free-recap{padding:.45rem .65rem !important;font-size:.66rem !important;gap:.3rem !important;margin:.35rem 0 .55rem !important}
  .btn-combat,.btn-survival,.btn-tournament,.btn-duel,.btn-coop{font-size:.85rem !important;padding:.7rem 1rem !important}
  .survival-rule-bar{padding:.4rem .7rem !important;font-size:.66rem !important;margin-bottom:.55rem !important}
  .coop-rule-bar{grid-template-columns:1fr !important;padding:.4rem !important;gap:.3rem !important;margin-bottom:.55rem !important}
  .coop-rule-item{padding:.2rem .3rem !important;font-size:.62rem !important;text-align:left}
  .coop-rule-item strong{display:inline;margin-right:.3rem}
  .join-card{padding:.65rem .85rem !important}
  .join-code-input{padding:.55rem .65rem !important;font-size:1rem !important;letter-spacing:.3em !important}
  #duelJoinCode{padding:.5rem .75rem !important;font-size:.95rem !important}
  /* Lobby : compact */
  #duelLobbyScreen .subscreen-wrap{
    overflow-y:auto !important;
    height:100vh;
    max-height:100vh;
    padding:.65rem .75rem !important;
  }
  #duelLobbyScreen [style*="gap:1rem"]{gap:.5rem !important}
  #duelLobbyThemeDiff{margin-bottom:.5rem !important;font-size:.75rem !important}
  #duelLobbyCode{font-size:1.6rem !important;letter-spacing:.2em !important}
  #duelLobbyStatus{margin-bottom:.75rem !important;font-size:.78rem !important}

  /* ── DUEL JEU ── */
  #duelGameScreen .subscreen-wrap{
    padding:.4rem .55rem !important;
    gap:.35rem !important;
  }
  /* Header scores */
  #duelGameScreen [style*="justify-content:space-between"]{
    padding:.4rem .75rem !important;
    margin-bottom:.35rem !important;
  }
  #duelMyScore,#duelOppScore{font-size:1.1rem !important}
  #duelQNum{font-size:.65rem !important}
  /* Timer */
  #duelGameScreen [style*="width:64px"]{width:44px !important;height:44px !important}
  #duelGameScreen svg[width="64"]{width:44px !important;height:44px !important}
  #duelTimerCircle{r:18 !important}
  #duelTimerSec{font-size:.9rem !important}
  #duelGameScreen [style*="margin-bottom:.75rem"]{margin-bottom:.3rem !important}

  /* ── CLASSEMENT ── */
  /* Onglets mode desktop masqués (remplacés par strip nav) */
  .lb-main-mode-tabs{display:none !important}
  /* Sous-onglets (vue/période/diff) : compacts */
  #lbClassiqueTabs .mode-tabs{flex-wrap:wrap;gap:.3rem !important;margin-bottom:.3rem !important}
  #lbClassiqueTabs .mode-tab{padding:.32rem .55rem !important;font-size:.67rem !important}
  /* Lignes du classement compactes */
  .lb-row{padding:.45rem .6rem !important;gap:.5rem !important}
  .lb-rank{font-size:.8rem !important;width:24px !important}
  .lb-avatar{width:28px !important;height:28px !important}
  .lb-pseudo{font-size:.78rem !important}
  .lb-score{font-size:.82rem !important}
  /* Podium compact */
  #leaderboardPodium{gap:.5rem !important;margin-bottom:.75rem !important;min-height:80px !important}
  .lb-podium-slot{gap:.2rem !important}
  .lb-podium-avatar{width:38px !important;height:38px !important}
  .lb-podium-name{font-size:.6rem !important}
  .lb-podium-score{font-size:.62rem !important}
  .lb-podium-crown{font-size:1rem !important}
  /* Barre de recherche compacte */
  #lbSearch{padding:.45rem .9rem .45rem 2.1rem !important;font-size:.75rem !important}
  /* "Ma position" card compacte */
  #myRankCard{padding:.6rem .85rem !important;margin-top:.6rem !important}
}