/* ══════════════════════════════════════
   THÈME LIGHT (défaut) — blanc/beige premium
   THÈME DARK — cyberpunk sombre
══════════════════════════════════════ */
:root,[data-theme="light"]{
  --bg:#ffffff;
  --bg2:#f4f8ff;
  --bg3:#eaf2ff;
  --surface:#ffffff;
  --surface2:#f8fbff;
  --border:rgba(0,180,255,0.22);
  --border-gold:rgba(180,140,0,0.28);
  --text:#1a1a2e;
  --text2:#3a3a5c;
  --muted:#8a8aaa;
  --gold:#c8960a;
  --gold-neon:#f5c400;
  --gold-glow:rgba(245,196,0,0.38);
  --blue-neon:#00b4ff;
  --blue-glow:rgba(0,180,255,0.32);
  --green:#00a855;
  --red:#e53030;
  --purple:#8b00e8;
  --cyan:#00b8c8;
  --shadow:rgba(0,0,0,0.07);
  --shadow-lg:rgba(0,0,0,0.13);
  --r:14px;
  --particle-op:0.95;
  --scan-op:0.04;
}
[data-theme="dark"]{
  --bg:#0a0a12;
  --bg2:#10101c;
  --bg3:#16162a;
  --surface:#1a1a2e;
  --surface2:#12121e;
  --border:rgba(0,180,255,0.22);
  --border-gold:rgba(245,196,0,0.28);
  --text:#f0f0f8;
  --text2:#b0b0cc;
  --muted:rgba(180,180,210,0.5);
  --gold:#f5c400;
  --gold-neon:#ffe033;
  --gold-glow:rgba(245,196,0,0.4);
  --blue-neon:#00d4ff;
  --blue-glow:rgba(0,212,255,0.35);
  --green:#00e676;
  --red:#ff3a3a;
  --purple:#c040ff;
  --cyan:#00fff7;
  --shadow:rgba(0,0,0,0.4);
  --shadow-lg:rgba(0,0,0,0.7);
  --particle-op:0.90;
  --scan-op:0.015;
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0;}
html,body{min-height:100vh;background:var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif;overflow-x:hidden;transition:background 0.3s,color 0.3s;}

/* Background ambiance */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 15% 15%,rgba(0,180,255,0.08) 0%,transparent 65%),
    radial-gradient(ellipse 50% 55% at 85% 85%,rgba(245,196,0,0.06) 0%,transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 10%,rgba(0,184,200,0.05) 0%,transparent 70%),
    repeating-linear-gradient(0deg,transparent,transparent 48px,rgba(0,180,255,0.06) 48px,rgba(0,180,255,0.06) 49px),
    repeating-linear-gradient(90deg,transparent,transparent 48px,rgba(0,180,255,0.06) 48px,rgba(0,180,255,0.06) 49px);
}
[data-theme="dark"] body::before{
  background:
    radial-gradient(ellipse 60% 45% at 15% 15%,rgba(0,180,255,0.06) 0%,transparent 65%),
    radial-gradient(ellipse 50% 55% at 85% 85%,rgba(245,196,0,0.05) 0%,transparent 65%),
    repeating-linear-gradient(0deg,transparent,transparent 48px,rgba(0,180,255,0.025) 48px,rgba(0,180,255,0.025) 49px),
    repeating-linear-gradient(90deg,transparent,transparent 48px,rgba(0,180,255,0.025) 48px,rgba(0,180,255,0.025) 49px);
}

#cyberCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--particle-op);}

.screen{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 16px 80px;}
.screen.hidden{display:none!important;}

/* ══ BARRE DE CONTRÔLES GLOBALE (bas d'écran) ══ */
.global-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:999;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:5px 16px;
  background:var(--surface);
  border-top:1px solid var(--border);
  box-shadow:0 -4px 20px var(--shadow);
}
.gb-btn{
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:20px;
  border:1px solid var(--border);
  background:var(--bg2);
  color:var(--text2);font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;
  cursor:pointer;transition:all 0.2s;white-space:nowrap;
}
.gb-btn:hover{border-color:var(--blue-neon);color:var(--blue-neon);box-shadow:0 0 12px var(--blue-glow);}
.gb-btn.active{border-color:var(--gold-neon);color:var(--gold);background:rgba(245,196,0,0.08);}
.gb-sep{width:1px;height:20px;background:var(--border);}

/* ══ SPLASH ══ */
.splash-logo{
  font-family:'Syne',sans-serif;font-size:clamp(48px,14vw,96px);font-weight:800;
  line-height:0.9;text-align:center;
  color:var(--text);
  position:relative;
  
}
.splash-logo .logo-shot{
  background:linear-gradient(135deg,var(--blue-neon),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 18px var(--blue-glow));
}
.splash-logo .logo-gold{
  background:linear-gradient(135deg,var(--gold-neon),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 14px var(--gold-glow));
  font-size:0.52em;letter-spacing:3px;display:block;text-transform:uppercase;font-weight:700;
}
.splash-sub{
  font-size:11px;color:var(--blue-neon);letter-spacing:5px;text-transform:uppercase;
  margin:10px 0 28px;text-align:center;
  text-shadow:0 0 10px var(--blue-glow);
  font-weight:500;
}
.splash-modes{display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px;}
.mode-btn{
  padding:14px 18px;border-radius:var(--r);
  border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;text-align:left;
  font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:14px;transition:all 0.22s;
  position:relative;overflow:hidden;
  box-shadow:0 2px 12px var(--shadow);
}
.mode-btn::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mode-color,var(--gold-neon));box-shadow:0 0 10px var(--mode-color,var(--gold-neon));}
.mode-btn:hover{border-color:var(--mode-color,var(--gold-neon));transform:translateX(4px);box-shadow:0 4px 20px var(--shadow-lg);}
.mode-icon{font-size:22px;flex-shrink:0;}
.mode-info{display:flex;flex-direction:column;gap:3px;}
.mode-title{font-size:14px;font-weight:700;letter-spacing:0.3px;color:var(--text);}
.mode-desc{font-size:11px;color:var(--muted);font-weight:500;line-height:1.4;}
.coming-soon{font-size:8px;background:var(--red);color:#fff;padding:2px 5px;border-radius:8px;margin-left:5px;vertical-align:middle;letter-spacing:0.5px;}
.mode-featured{border-color:rgba(0,180,255,0.3);}
.splash-extras{display:flex;margin-top:14px;justify-content:center;}
.extra-btn{
  padding:7px 0px;border-radius:20px;
  border:1px solid var(--border);background:var(--surface2);
  color:var(--muted);font-size:11px;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-weight:600;transition:all 0.2s;
}
.extra-btn:hover{border-color:var(--gold-neon);color:var(--gold);}

/* ══ MATCHMAKING ══ */
#screenMatchmaking{gap:20px;}
.mm-box{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:32px 28px;max-width:420px;width:100%;text-align:center;
  box-shadow:0 8px 40px var(--shadow-lg);
}
.mm-title{font-family:'Syne',sans-serif;font-size:24px;font-weight:800;color:var(--gold);letter-spacing:1px;margin-bottom:20px;}
.mm-inputs{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.mm-input{
  width:100%;padding:14px 18px;
  border:1.5px solid var(--border);border-radius:10px;
  font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;
  background:var(--bg2);outline:none;color:var(--text);text-align:center;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.mm-input:focus{border-color:var(--blue-neon);box-shadow:0 0 0 3px var(--blue-glow);}
.mm-input::placeholder{color:var(--muted);font-weight:400;}

/* ══ DIFF SELECT ══ */
#screenDiffSelect{gap:20px;}
.diff-select-box{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:28px 24px;max-width:420px;width:100%;
  box-shadow:0 8px 40px var(--shadow-lg);
}
.diff-select-title{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;color:var(--blue-neon);letter-spacing:1px;margin-bottom:4px;text-align:center;text-shadow:0 0 16px var(--blue-glow);}
.diff-select-sub{font-size:12px;color:var(--muted);text-align:center;margin-bottom:20px;}
.diff-opt{display:flex;flex-direction:column;gap:8px;}
.diff-opt-btn{
  padding:13px 16px;border-radius:10px;
  border:1px solid var(--border);background:var(--bg2);
  cursor:pointer;text-align:left;font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:12px;transition:all 0.2s;
}
.diff-opt-btn:hover{transform:translateX(4px);}
.diff-opt-btn.d-relax{border-color:rgba(0,180,255,0.25);}
.diff-opt-btn.d-relax:hover{border-color:var(--blue-neon);box-shadow:0 0 14px var(--blue-glow);}
.diff-opt-btn.d-easy{border-color:rgba(0,168,85,0.3);}
.diff-opt-btn.d-easy:hover{border-color:var(--green);box-shadow:0 0 14px rgba(0,168,85,0.2);}
.diff-opt-btn.d-medium{border-color:rgba(245,196,0,0.3);}
.diff-opt-btn.d-medium:hover{border-color:var(--gold-neon);box-shadow:0 0 14px var(--gold-glow);}
.diff-opt-btn.d-hard{border-color:rgba(229,48,48,0.3);}
.diff-opt-btn.d-hard:hover{border-color:var(--red);box-shadow:0 0 14px rgba(229,48,48,0.2);}
.diff-opt-icon{font-size:22px;}
.diff-opt-info{display:flex;flex-direction:column;gap:3px;}
.diff-opt-name{font-size:14px;font-weight:700;}
.diff-opt-desc{font-size:11px;color:var(--muted);font-weight:500;line-height:1.4;}

/* ══ STORY MAP ══ */
#screenStory{gap:0;padding:5px 5px 50px;}
.story-header{width:100%;max-width:680px;margin:0 auto;padding:16px 16px 0;display:flex;align-items:center;justify-content:space-between;}
.story-title{font-size:20px;font-weight:800;color:var(--gold);letter-spacing:1px;}
.story-progress{font-size:7px;color:var(--muted); display:none;}
.story-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:10px 16px;max-width:680px;width:100%;margin:0 auto;}
.story-level{
  aspect-ratio:1;border-radius:10px;border:4px solid var(--border);
  background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;
  cursor:pointer;transition:all 0.2s;position:relative;color:var(--muted);
  box-shadow:0 2px 8px var(--shadow);
}
.story-level.unlocked{color:var(--text);}
.story-level.unlocked:hover{transform:scale(1.06);box-shadow:0 6px 20px var(--shadow-lg);}
.story-level.beaten{background:rgba(0,168,85,0.07);border-color:rgba(0,168,85,0.4);color:var(--green);}
.story-level.locked{opacity:0.3;cursor:not-allowed;}
.story-level.current{animation:currentPulse 1.8s ease-in-out infinite;}
@keyframes currentPulse{0%,100%{box-shadow:0 0 0 0 var(--gold-glow);}50%{box-shadow:0 0 0 6px transparent;}}
.story-level.relax-zone{border-color:rgba(0,180,255,0.2);}
.story-level.easy-zone{border-color:rgba(0,168,85,0.2);}
.story-level.medium-zone{border-color:rgba(245,196,0,0.2);}
.story-level.hard-zone{border-color:rgba(229,48,48,0.2);}
.story-stars{font-size:7px;letter-spacing:0px;margin-top:2px;line-height:1;}
.zone-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:0 16px 8px;max-width:680px;width:calc(100% - 32px);}
.zone-tag{font-size:8px;padding:4px 3px;border-radius:8px;text-align:center;font-weight:600;letter-spacing:0.3px;}

/* ══ NARRATIVE ══ */
#screenNarrative{
  gap:0;
  padding:20px 16px 100px;
  align-items:center;
  justify-content:center;
}
.narrative-wrap{
  max-width:560px;
  margin:0 auto;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}
.narrative-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.narrative-robot{font-size:60px;animation:robotBreathe 2.5s ease-in-out infinite;margin-bottom:18px;}
@keyframes robotBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.07);filter:drop-shadow(0 0 16px var(--blue-glow));}}
.narrative-bubble{
  background:var(--surface);border:1.5px solid var(--border);border-radius:18px;padding:24px;
  box-shadow:0 8px 36px var(--shadow-lg);position:relative;width:100%;
}
.narrative-bubble::before{content:'';position:absolute;top:-10px;left:50%;transform:translateX(-50%);border:10px solid transparent;border-bottom-color:var(--border);border-top:0;}
.narrative-text{font-size:14px;line-height:1.85;color:var(--text2);font-style:italic;font-weight:400;}
.narrative-machine{font-size:10px;color:var(--blue-neon);font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:10px;text-shadow:0 0 8px var(--blue-glow);}
.narrative-continue{
  position:static;
  transform:none;
  width:100%;
  max-width:560px;

  padding:18px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--blue-neon),var(--cyan));
  border:none;

  font-family:'Syne',sans-serif;
  font-size:15px;
  font-weight:800;
  color:#fff;
  cursor:pointer;

  box-shadow:0 8px 30px var(--blue-glow);
  transition:filter 0.2s, transform 0.2s;
}
.narrative-continue:hover{transform:translateY(-2px);filter:brightness(1.1);}

/* ══ OATH ══ */
.oath-box{
  background:var(--surface);border:1px solid var(--border-gold);border-radius:20px;
  padding:30px 26px;max-width:460px;width:100%;text-align:center;
  box-shadow:0 8px 40px var(--shadow-lg);
}
.oath-title{font-family:'Syne',sans-serif;font-size:32px;font-weight:800;color:var(--gold);letter-spacing:1px;margin-bottom:10px;}
.oath-text{font-size:13px;line-height:1.85;color:var(--text2);margin-bottom:20px;}
.oath-check{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1.5px solid var(--border);border-radius:10px;padding:14px 16px;cursor:pointer;margin-bottom:16px;text-align:left;transition:border-color 0.2s;}
.oath-check:hover{border-color:var(--gold-neon);}
.oath-check input{width:18px;height:18px;cursor:pointer;accent-color:var(--gold-neon);flex-shrink:0;}
.oath-check span{font-size:13px;font-weight:600;color:var(--text);}

/* ══ BATTLE ══ */
#screenBattle{
  padding:0;
  align-items:stretch;
  justify-content:flex-start;
  height:100dvh;
  min-height:unset;
  overflow:hidden;
}
.arena{
  width:100%;max-width:860px;margin:0 auto;
  display:flex;flex-direction:column;
  position:relative;z-index:1;
  height:calc(100dvh - 48px); /* 48px = global bar */
  overflow:hidden;
}
.fighters{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;padding:6px 8px 0;align-items:end;}
.fighter{
  background:var(--surface);border:1.5px solid var(--border);border-radius:12px;
  padding:8px 10px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden;
  box-shadow:0 2px 10px var(--shadow);
}
.fighter.p1{border-color:rgba(0,180,255,0.4)!important;animation:p1Glow 2s ease-in-out infinite;}
@keyframes p1Glow{0%,100%{box-shadow:0 0 10px rgba(0,180,255,0.4) inset;}50%{box-shadow:0 0 22px rgba(0,180,255,0.4) inset;}}
.fighter.ai{border-color:rgba(229,48,48,0.6)!important;animation:aiGlow 2s ease-in-out infinite;}
@keyframes aiGlow{0%,100%{box-shadow:0 0 10px rgba(229,48,48,0.15) inset;}50%{box-shadow:0 0 22px rgba(229,48,48,0.35) inset;}}
.fighter-header{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;overflow:hidden;}
.fighter-sprite-ico{font-size:22px;flex-shrink:0;animation:idle 2.2s ease-in-out infinite;}
.fighter.right-side .fighter-sprite-ico{transform:scaleX(-1);animation:idleFlip 2.2s ease-in-out infinite 0.6s;}
@keyframes idle{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
@keyframes idleFlip{0%,100%{transform:scaleX(-1) translateY(0);}50%{transform:scaleX(-1) translateY(-3px);}}
.fighter-name{font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fighter-name.p1c{color:var(--blue-neon);}
.fighter-name.aic{color:var(--red);}
.hp-bar-bg{height:5px;background:rgba(128,128,128,0.15);border-radius:10px;overflow:hidden;}
.hp-bar{height:100%;border-radius:10px;transition:width 0.4s cubic-bezier(0.25,1,0.5,1);}
.hp-bar.p1b{background:linear-gradient(90deg,var(--blue-neon),var(--cyan));}
.hp-bar.aib{background:linear-gradient(90deg,var(--red),#ff6060);}
.hp-bar.low{animation:hpPulse 0.5s infinite alternate;}
@keyframes hpPulse{from{opacity:1;}to{opacity:0.35;}}
.hp-val{font-size:9px;font-weight:600;color:var(--muted);}
.super-indicators{display:flex;gap:2px;flex-wrap:wrap;margin-top:1px;}
.sp-dot{width:12px;height:12px;border-radius:50%;border:1px solid var(--gold-neon);background:rgba(245,196,0,0.1);font-size:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sp-dot.active{background:var(--gold-neon);box-shadow:0 0 6px var(--gold-glow);}
.sp-dot.used{opacity:0.2;}
.vs-badge{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;color:var(--gold);text-shadow:0 0 12px var(--gold-glow);align-self:center;}

/* ── Score bar ── */
.score-bar{display:flex;align-items:center;justify-content:center;gap:10px;padding:2px 10px;background:var(--bg2);border-bottom:1px solid var(--border);}
.score-display{font-family:'Syne',sans-serif;font-size:15px;font-weight:800;color:var(--gold);letter-spacing:1px;}
.streak-display{font-size:10px;font-weight:700;color:var(--red);letter-spacing:1px;}
.combo-display{font-size:10px;font-weight:700;color:var(--cyan);letter-spacing:1px;}

/* ── Round header ── */
.round-header{display:flex;align-items:center;justify-content:space-between;padding:4px 10px;background:var(--bg2);border-bottom:1px solid var(--border);}
#roundLabel{
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:13px;letter-spacing:0.5px;
  color:var(--blue-neon);background:rgba(0,180,255,0.07);
  border:1px solid rgba(0,180,255,0.2);padding:4px 10px;border-radius:7px;
  text-shadow:0 0 8px var(--blue-glow);
  display:inline-flex;align-items:center;white-space:nowrap;line-height:1;
}
.diff-badge{padding:3px 8px;border-radius:12px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.diff-relax{background:rgba(0,180,255,0.1);color:var(--blue-neon);border:1px solid rgba(0,180,255,0.25);}
.diff-easy{background:rgba(0,168,85,0.1);color:var(--green);border:1px solid rgba(0,168,85,0.25);}
.diff-medium{background:rgba(245,196,0,0.1);color:var(--gold);border:1px solid rgba(245,196,0,0.25);}
.diff-hard{background:rgba(229,48,48,0.1);color:var(--red);border:1px solid rgba(229,48,48,0.25);}
.points-info{font-size:10px;font-weight:700;}
.points-info.pt-relax{color:var(--blue-neon);}
.points-info.pt-easy{color:var(--green);}
.points-info.pt-medium{color:var(--gold);}
.points-info.pt-hard{color:var(--red);}

/* ── Formula ── */
.formula-zone{margin:4px 8px;padding:8px 14px;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;text-align:center;position:relative;box-shadow:0 2px 10px var(--shadow);flex:1;display:flex;flex-direction:column;justify-content:center;}
.formula-label{font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;font-weight:500;}
.formula-big{font-family:'Share Tech Mono',monospace;font-size:clamp(20px,6vw,38px);color:var(--text);letter-spacing:3px;user-select:none;-webkit-user-select:none;transition:all 0.1s;min-height:40px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;}
.formula-big.glitch{animation:glitch 0.08s infinite;}
@keyframes glitch{
  0%{text-shadow:2px 0 var(--red),-2px 0 var(--cyan);transform:translateX(0);}
  25%{text-shadow:-3px 0 var(--red),3px 0 var(--cyan);transform:translateX(-3px);clip-path:inset(20% 0 60% 0);}
  50%{text-shadow:3px 0 var(--green),-3px 0 var(--red);transform:translateX(3px);clip-path:inset(60% 0 10% 0);opacity:0.9;}
  75%{text-shadow:-2px 0 var(--purple),2px 0 var(--gold);transform:translateX(-1px);clip-path:inset(40% 0 30% 0);opacity:0.3;}
  100%{text-shadow:none;transform:translateX(0);opacity:1;}
}
.formula-big.flash{animation:flashAnim 0.3s 2;}
@keyframes flashAnim{0%,100%{opacity:1;}50%{opacity:0;}}
.formula-big.blind-mode{filter:blur(10px);cursor:pointer;transition:filter 0.4s;}
.formula-big.blind-mode.revealed{filter:blur(0);}
.blind-hint{font-size:9px;color:var(--purple);text-align:center;letter-spacing:1px;margin-top:2px;font-weight:600;animation:pulse 1.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:0.5;}50%{opacity:1;}}
.formula-answer{
  font-size:11px;
  color:var(--green);
  margin-top:4px;
  display:none;
  letter-spacing:1px;
  font-weight:600;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
}

/* ── Timer ── */
.timer-zone{padding:3px 10px;border-bottom:1px solid var(--border);background:var(--bg2);}
.timer-row{display:flex;align-items:center;gap:8px;}
.timer-bar-bg{flex:1;height:4px;background:rgba(128,128,128,0.15);border-radius:10px;overflow:hidden;}
.timer-bar{height:100%;border-radius:10px;transition:width 0.1s linear;}
.timer-bar.t-relax{background:linear-gradient(90deg,var(--blue-neon),var(--cyan));}
.timer-bar.t-easy{background:linear-gradient(90deg,var(--green),#80ffba);}
.timer-bar.t-medium{background:linear-gradient(90deg,var(--gold),var(--gold-neon));}
.timer-bar.t-hard{background:linear-gradient(90deg,var(--red),#ff8080);}
.timer-bar.urgent{animation:timerPulse 0.25s infinite alternate;}
@keyframes timerPulse{from{opacity:1;}to{opacity:0.2;}}
.timer-num{font-family:'Syne',sans-serif;font-size:17px;font-weight:800;min-width:24px;text-align:center;color:var(--gold);}
.timer-num.urgent{color:var(--red);}
.timer-num.no-timer{color:var(--blue-neon);font-size:12px;letter-spacing:1px;}

/* ── Feedback ── */
.feedback-bar{
  text-align:center;
  padding:3px 10px;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.5px;
  border-bottom:1px solid var(--border);
  display:none;
  line-height:1.5;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  opacity:0;
  transition:opacity 0.35s ease;
}
.feedback-bar.show{display:block;}
.feedback-bar.show.visible{opacity:1;}
.feedback-bar.ok{background:rgba(0,168,85,0.08);color:var(--green);border-color:rgba(0,168,85,0.2);}
.feedback-bar.fail{background:rgba(229,48,48,0.08);color:var(--red);border-color:rgba(229,48,48,0.2);}
.feedback-bar.draw{background:rgba(245,196,0,0.08);color:var(--gold);border-color:rgba(245,196,0,0.2);}

/* ── Answer ── */
.answer-zone{padding:5px 8px;display:flex;flex-direction:column;gap:5px;}
.player-answer-row{
  display:flex;
  gap:6px;
  width:100%;
  min-width:0;
}
.ans-input{
  flex:2;
  min-width:0;
  background:var(--bg2);
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  font-family:'Share Tech Mono',monospace;
  font-size:18px;
  font-weight:700;
  color:var(--text);
  outline:none;
  text-align:center;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.ans-input:focus{border-color:var(--blue-neon);box-shadow:0 0 0 3px var(--blue-glow);}
.ans-input.correct{border-color:var(--green);background:rgba(0,168,85,0.06);}
.ans-input.wrong{border-color:var(--red);animation:inputShake 0.4s ease;}
.ans-input:disabled{opacity:0.35;}
@keyframes inputShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}
.fire-btn{
  flex:1;
  min-width:0;
  max-width:none;
  padding:10px 8px;
  background:linear-gradient(135deg,var(--blue-neon),var(--cyan));
  border:none;
  border-radius:10px;
  font-family:'Syne',sans-serif;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 4px 14px var(--blue-glow);
  transition:all 0.15s;
}
.fire-btn:hover{transform:translateY(-1px);filter:brightness(1.1);}
.fire-btn:disabled{opacity:0.25;cursor:not-allowed;transform:none;box-shadow:none;}
.fire-btn.validated{background:linear-gradient(135deg,var(--green),#40e090);box-shadow:0 4px 14px rgba(0,168,85,0.3);}

/* ── Order ── */
.order-zone{padding:4px 10px;}
.order-label{font-size:9px;color:var(--gold);font-weight:700;letter-spacing:1px;text-align:center;margin-bottom:4px;text-transform:uppercase;}
.order-options{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;}
.order-btn{
  padding:10px 6px;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;
  font-family:'Share Tech Mono',monospace;font-size:16px;font-weight:900;color:var(--text);
  cursor:pointer;text-align:center;transition:all 0.15s;box-shadow:0 1px 5px var(--shadow);
}
.order-btn:active{transform:scale(0.95);}
.order-btn.correct-order{border-color:var(--green);background:rgba(0,168,85,0.1);color:var(--green);}
.order-btn.wrong-order{border-color:var(--red);background:rgba(229,48,48,0.08);animation:inputShake 0.4s ease;}

/* ── Numpad ── */
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px 8px 5px;}
.numpad-btn{
  padding:9px 6px;background:var(--surface);border:1px solid var(--border);border-radius:9px;
  font-family:'Share Tech Mono',monospace;font-size:16px;font-weight:900;color:var(--text);
  cursor:pointer;text-align:center;transition:all 0.1s;user-select:none;
  box-shadow:0 1px 4px var(--shadow);
}
.numpad-btn:active{background:rgba(0,180,255,0.1);border-color:var(--blue-neon);transform:scale(0.94);}
.numpad-btn.del{background:rgba(229,48,48,0.06);border-color:rgba(229,48,48,0.25);color:var(--red);}
.numpad-btn.neg{background:rgba(0,180,255,0.06);border-color:rgba(0,180,255,0.2);color:var(--blue-neon);}

/* ── Supers ── */
.supers-zone{padding:4px 8px;border-top:1px solid var(--border);background:var(--bg2);display:flex;gap:5px;flex-wrap:nowrap;}
.sp-btn{
  flex:1;min-width:0;max-width:none;
  background:var(--surface);border:1px solid var(--border);border-radius:9px;
  padding:6px 7px;font-family:'Space Grotesk',sans-serif;font-size:9px;font-weight:700;color:var(--text);
  cursor:pointer;transition:all 0.2s;text-align:center;line-height:1.3;
  box-shadow:0 1px 5px var(--shadow);
}
.sp-btn:hover:not(:disabled){transform:translateY(-2px);}
.sp-btn:disabled{opacity:0.25;cursor:not-allowed;}
.sp-btn .sp-name{font-size:9px;font-weight:700;display:block;}
.sp-btn .sp-desc{font-size:8px;color:var(--muted);display:block;}
.sp-btn .sp-uses{font-size:8px;margin-top:1px;color:var(--muted);}
.sp-btn.flash-btn{border-color:rgba(245,196,0,0.4);}
.sp-btn.flash-btn:not(:disabled){box-shadow:0 0 10px var(--gold-glow);animation:superGlow 2.5s ease-in-out infinite;}
.sp-btn.glitch-btn{border-color:rgba(200,0,255,0.35);}
.sp-btn.glitch-btn:not(:disabled){animation:superGlowPurple 2.5s ease-in-out infinite;}
.sp-btn.shield-btn{border-color:rgba(0,180,255,0.35);}
.sp-btn.shield-btn:not(:disabled){animation:superGlowBlue 2.5s ease-in-out infinite;}
.sp-btn.shield-btn.active-shield{background:rgba(0,180,255,0.1);border-color:var(--blue-neon);box-shadow:0 0 14px var(--blue-glow);}
@keyframes superGlow{0%,100%{box-shadow:0 1px 5px var(--shadow);}50%{box-shadow:0 0 14px var(--gold-glow);}}
@keyframes superGlowPurple{0%,100%{box-shadow:0 1px 5px var(--shadow);}50%{box-shadow:0 0 14px rgba(200,0,255,0.35);}}
@keyframes superGlowBlue{0%,100%{box-shadow:0 1px 5px var(--shadow);}50%{box-shadow:0 0 14px var(--blue-glow);}}

/* ── Bottom battle ── */
.battle-bottom{display:flex;gap:6px;padding:3px 8px 4px;background:var(--bg2);}
.bg-warning-bar{
  text-align:center;
  padding:2px 10px 5px;
  background:var(--bg2);
  font-size:8px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:0.3px;
  border-top:1px solid var(--border);
}
.pause-btn,.quit-btn{
  flex:1;padding:8px 8px;border-radius:9px;
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;cursor:pointer;transition:all 0.2s;
  box-shadow:0 1px 5px var(--shadow);
}
.pause-btn{border:1px solid rgba(0,180,255,0.35);background:rgba(0,180,255,0.05);color:var(--blue-neon);}
.pause-btn:hover{border-color:var(--blue-neon);box-shadow:0 0 10px var(--blue-glow);}
.quit-btn{border:1px solid rgba(229,48,48,0.35);background:rgba(229,48,48,0.05);color:var(--red);}
.quit-btn:hover{border-color:var(--red);}

/* ── Pause overlay ── */
.pause-overlay{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);}
.pause-overlay.hidden{display:none!important;}
.pause-box{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px 28px;max-width:300px;width:90%;text-align:center;box-shadow:0 16px 60px var(--shadow-lg);}
.pause-title{font-family:'Syne',sans-serif;font-size:36px;font-weight:800;color:var(--gold);margin-bottom:20px;}
.pause-btns{display:flex;flex-direction:column;gap:10px;}
.pause-resume{padding:14px;border-radius:10px;background:linear-gradient(135deg,var(--gold-neon),var(--gold));border:none;font-family:'Syne',sans-serif;font-size:14px;font-weight:800;color:#1a1a00;cursor:pointer;}
.pause-quit{padding:12px;border-radius:10px;background:transparent;border:1px solid rgba(229,48,48,0.4);font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;color:var(--red);cursor:pointer;}

/* ── Results ── */
.results-box{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px 22px;max-width:420px;width:100%;text-align:center;box-shadow:0 12px 50px var(--shadow-lg);}
.res-emoji{font-size:52px;margin-bottom:8px;}
.res-title{font-family:'Syne',sans-serif;font-size:clamp(20px,6vw,32px);font-weight:800;color:var(--gold);letter-spacing:0px;margin-bottom:4px;}
.res-subtitle{font-size:12px;color:var(--muted);margin-bottom:14px;}
.stars-reward{display:flex;justify-content:center;gap:10px;margin-bottom:12px;font-size:30px;}
.star-earned{animation:starPop 0.4s cubic-bezier(0.175,0.885,0.32,1.275) forwards;opacity:0;}
.star-empty{opacity:0.15;filter:grayscale(1);}
@keyframes starPop{0%{transform:scale(0) rotate(-30deg);opacity:0;}70%{transform:scale(1.3) rotate(5deg);opacity:1;}100%{transform:scale(1) rotate(0);opacity:1;}}
.res-score{font-family:'Syne',sans-serif;font-size:24px;font-weight:800;color:var(--gold);margin-bottom:14px;}
.res-rows{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.res-row{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:10px 14px;}
.res-rank{font-size:20px;}
.res-name{flex:1;font-weight:700;font-size:13px;text-align:left;}
.res-hp{font-size:11px;font-weight:700;}
.res-btns{display:flex;flex-direction:column;gap:7px;}
.res-btn{padding:13px;border-radius:9px;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:0.3px;transition:all 0.2s;border:none;}
.res-btn.gold{background:linear-gradient(135deg,var(--blue-neon),var(--cyan));color:#fff;box-shadow:0 4px 16px var(--blue-glow);}
.res-btn.gold:hover{filter:brightness(1.1);transform:translateY(-1px);}
.res-btn.outline{background:transparent;color:var(--muted);border:1px solid var(--border);}
.res-btn.outline:hover{border-color:var(--gold-neon);color:var(--gold);}
/* Reward special finale */
.reward-box{background:rgba(245,196,0,0.07);border:1.5px solid var(--border-gold);border-radius:12px;padding:14px;margin-bottom:12px;text-align:center;}
.reward-box .reward-title{font-family:'Syne',sans-serif;font-size:16px;font-weight:800;color:var(--gold);margin-bottom:4px;}
.reward-box .reward-text{font-size:11px;color:var(--text2);line-height:1.6;}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(6px);}
.modal-overlay.hidden{display:none!important;}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px;max-width:420px;width:100%;box-shadow:0 16px 60px var(--shadow-lg);max-height:80vh;overflow-y:auto;}
.modal-title{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;color:var(--gold);letter-spacing:0.5px;margin-bottom:14px;text-align:center;}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.shop-item{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px 8px;text-align:center;opacity:0.5;}
.shop-item-icon{font-size:24px;margin-bottom:5px;}
.shop-item-name{font-size:11px;font-weight:700;margin-bottom:3px;}
.shop-item-price{font-size:11px;color:var(--gold);font-weight:700;}
.lb-row{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:9px 12px;margin-bottom:6px;}
.lb-rank{font-size:18px;min-width:26px;}
.lb-name{flex:1;font-weight:700;font-size:13px;}
.elo-badge{font-size:10px;font-weight:700;color:var(--blue-neon);}
.donation-grid{display:flex;gap:8px;justify-content:center;margin-bottom:12px;flex-wrap:wrap;}
.don-btn{padding:10px 16px;border:1px solid var(--border);border-radius:9px;background:var(--bg2);font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;cursor:pointer;color:var(--gold);}
.funtoken{background:var(--bg2);border:1px solid rgba(0,180,255,0.25);border-radius:9px;padding:12px;text-align:center;margin-bottom:12px;}
.close-btn{width:100%;margin-top:10px;padding:11px;border:1px solid var(--border);border-radius:9px;background:transparent;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;cursor:pointer;color:var(--muted);}
.close-btn:hover{border-color:var(--gold-neon);color:var(--gold);}
.btn-back{position:relative;top:auto;left:auto;z-index:100;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:7px 13px;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;cursor:pointer;color:var(--muted);transition:all 0.2s;box-shadow:0 1px 5px var(--shadow);}
.btn-back:hover{color:var(--gold);border-color:var(--gold-neon);}

/* ── FX ── */
.fighter.hurt{animation:fighterHurt 0.5s ease;}
@keyframes fighterHurt{0%,100%{}30%{background:rgba(229,48,48,0.2);}60%{transform:translateX(5px);}}
.fighter.attack{animation:fighterAttack 0.4s ease;}
@keyframes fighterAttack{0%,100%{}40%{transform:translateX(-7px) scale(1.04);}}
.fighter.shielded{
  box-shadow:0 0 20px var(--gold-glow), 0 0 40px rgba(245,196,0,0.18), inset 0 0 12px rgba(245,196,0,0.12) !important;
  border-color:var(--gold-neon) !important;
  animation:shieldPulse 1.4s ease-in-out infinite;
}
@keyframes shieldPulse{
  0%,100%{box-shadow:0 0 14px var(--gold-glow), inset 0 0 8px rgba(245,196,0,0.10);}
  50%{box-shadow:0 0 28px rgba(245,196,0,0.55), 0 0 50px rgba(245,196,0,0.22), inset 0 0 18px rgba(245,196,0,0.18);}
}
.absent-badge{position:absolute;top:-22px;background:var(--red);color:#fff;font-size:8px;font-weight:700;padding:2px 7px;border-radius:4px;white-space:nowrap;animation:absentPulse 0.9s ease-in-out infinite;}
@keyframes absentPulse{0%,100%{opacity:1;}50%{opacity:0.3;}}

/* Impact FX — épuré, peu de texte, flou tardif */
.impact-fx{
  position:fixed;pointer-events:none;z-index:10000;
  font-family:'Syne',sans-serif;font-weight:800;letter-spacing:1px;
  top:50%;left:50%;
  transform:translate(-50%,-50%) translate(var(--sx,0px),var(--sy,-30vh)) scale(0.2);
  text-shadow:0 0 24px var(--sc,#ff3a3a);
  animation:impactZoom 1.1s cubic-bezier(0.22,1,0.36,1) forwards;
  font-size:clamp(32px,10vw,64px);white-space:nowrap;
}
@keyframes impactZoom{
  0%{opacity:0;transform:translate(-50%,-50%) translate(var(--sx,0px),var(--sy,-30vh)) scale(0.15);}
  25%{opacity:1;transform:translate(-50%,-50%) translate(calc(var(--sx,0px)*0.3),calc(var(--sy,-30vh)*0.3)) scale(1.2);}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.5);}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1.3);}
  85%{opacity:0.9;transform:translate(-50%,-50%) scale(1.4);filter:blur(0);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2);filter:blur(12px);}
}
.attack-travel-fx{position:fixed;pointer-events:none;z-index:10000;left:0;top:0;transform:translate(-50%,-50%) scale(0.4);animation:atkFX 0.65s cubic-bezier(0.22,1,0.36,1) forwards;font-size:clamp(26px,7vw,42px);will-change:transform,left,top;transition:left 0.65s cubic-bezier(0.22,1,0.36,1),top 0.65s cubic-bezier(0.22,1,0.36,1);}
@keyframes atkFX{0%{opacity:0.2;transform:translate(-50%,-50%) scale(0.3);}20%{opacity:1;transform:translate(-50%,-50%) scale(0.8);}100%{opacity:1;transform:translate(-50%,-50%) scale(1.5);}}
.hp-loss-fx {
  position: fixed;
  pointer-events: none;
  z-index: 10001;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 42px;
  color: var(--red) !important;
  text-shadow: 0 0 18px rgba(229,48,48,0.7), 0 2px 8px rgba(0,0,0,0.35);
  transform: translate(-50%, 0);
  animation: hpLossPop 0.75s ease-out forwards;
  letter-spacing: -1px;
}

@keyframes hpLossPop {
  0%   { opacity: 0;   transform: translate(-50%, 0px)   scale(0.6); }
  20%  { opacity: 1;   transform: translate(-50%, -10px) scale(1.2); }
  55%  { opacity: 0.95; transform: translate(-50%, -20px) scale(1.05); }
  100% { opacity: 0;   transform: translate(-50%, -30px) scale(0.9); }
}

.score-pop{position:fixed;pointer-events:none;z-index:10002;font-family:'Syne',sans-serif;font-size:clamp(16px,4vw,26px);font-weight:800;white-space:nowrap;color:var(--gold);text-shadow:0 0 12px var(--gold-glow);animation:scorePop 1.1s ease-out forwards;}
@keyframes scorePop{0%{opacity:0;transform:translate(-50%,-50%) scale(0.4);}20%{opacity:1;transform:translate(-50%,-50%) scale(1.2);}60%{opacity:1;transform:translate(-50%,-75%) scale(1);}100%{opacity:0;transform:translate(-50%,-110%) scale(0.8);}}
.arena.slowmo{animation:slowMoPulse 0.5s ease;}
@keyframes slowMoPulse{0%{transform:scale(1);}35%{transform:scale(1.025);}100%{transform:scale(1);}}
.formula-zone.slowmo-hit{animation:formulaShock 0.45s ease;}
@keyframes formulaShock{0%{transform:scale(1);}25%{transform:scale(1.05);}50%{transform:scale(0.98);}100%{transform:scale(1);}}

.critical-flash{
  animation: criticalFlash 0.45s ease;
}
@keyframes criticalFlash{
  0%{box-shadow:0 0 0 rgba(0,255,255,0);}
  25%{box-shadow:0 0 30px rgba(0,255,255,0.9);}
  100%{box-shadow:0 0 0 rgba(0,255,255,0);}
}

/* ── Round transition ── */
.formula-zone.round-in{animation:roundIn 0.35s cubic-bezier(0.22,1,0.36,1);}
@keyframes roundIn{0%{opacity:0;transform:scale(0.93) translateY(8px);}100%{opacity:1;transform:scale(1) translateY(0);}}

/* ── Streak badge ── */
.streak-display{font-family:'Syne',sans-serif;font-size:13px;font-weight:800;color:var(--red);text-shadow:0 0 8px rgba(229,48,48,0.5);}
.combo-display{font-family:'Syne',sans-serif;font-size:11px;font-weight:800;color:var(--gold);letter-spacing:1px;}

/* ══════════════════════════════════════
   RESPONSIVE — DESKTOP (≥ 768px)
══════════════════════════════════════ */
@media (min-width: 768px) {

  /* ── Écrans généraux ── */
  .screen {
    padding: 16px 32px 50px;
  }

  /* ── Global bar ── */
  .global-bar {
    padding: 5px 32px;
    gap: 14px;
  }
  .gb-btn {
    font-size: 13px;
    padding: 9px 20px;
  }

  /* ── Splash ── */
  .splash-modes {
    max-width: 560px;
    gap: 12px;
  }
  .mode-btn {
    padding: 18px 22px;
    font-size: 16px;
  }
  .mode-icon { font-size: 26px; }
  .mode-title { font-size: 16px; }
  .mode-desc { font-size: 12px; }
  .splash-extras { margin-top: 18px; gap: 10px; }
  .extra-btn { font-size: 13px; padding: 10px 18px; }

  /* ── Matchmaking ── */
  .mm-box { max-width: 520px; padding: 40px 36px; }
  .mm-title { font-size: 28px; }
  .mm-input { font-size: 18px; padding: 16px 20px; }

  /* ── Diff select ── */
  .diff-select-box { max-width: 520px; padding: 36px 32px; }
  .diff-select-title { font-size: 26px; }
  .diff-opt-btn { padding: 16px 20px; }
  .diff-opt-icon { font-size: 26px; }
  .diff-opt-name { font-size: 16px; }
  .diff-opt-desc { font-size: 13px; }

  /* ── Story map ── */
  .story-header { max-width: 648px; }
  .story-title { font-size: 26px; }
  .story-progress { font-size: 14px; display: none;}
  .story-grid {
    max-width: 648px;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 5px 24px;
  }
  .story-level {
    font-size: 18px;
    border-radius: 12px;
  }
  .story-stars { font-size: 9px; }
  .zone-legend {
    max-width: 600px;
    width: calc(100% - 48px);
    margin: 0 24px 2px;
    gap: 8px;
  }
  .zone-tag { font-size: 10px; padding: 6px 8px; }

  /* ── Narrative ── */
  .narrative-wrap { max-width: 700px; gap: 32px; }
  .narrative-robot { font-size: 80px; }
  .narrative-bubble { padding: 36px; }
  .narrative-text { font-size: 17px; line-height: 2; }
  .narrative-machine { font-size: 11px; }
  .narrative-continue {
    max-width: 700px;
    font-size: 17px;
    padding: 20px;
  }

  /* ── Btn back ── */
  .btn-back {
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 11px;
  }

  /* ── Oath ── */
  .oath-box { max-width: 560px; padding: 40px 36px; }
  .oath-title { font-size: 38px; }
  .oath-text { font-size: 15px; }
  .oath-check span { font-size: 15px; }

  /* ── BATTLE — layout identique au mobile, juste plus grand ── */
  #screenBattle { align-items: center; justify-content: flex-start; padding: 0; overflow: hidden; }

  .arena {
    max-width: 860px;
    height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
  }

  /* Fighters plus grands */
  .fighter { padding: 12px 14px; border-radius: 14px; }
  .fighter-sprite-ico { font-size: 30px; }
  .fighter-name { font-size: 13px; }
  .hp-bar-bg { height: 7px; }
  .hp-val { font-size: 11px; }
  .vs-badge { font-size: 22px; }

  /* Score bar */
  .score-bar { padding: 6px 16px; }
  .score-display { font-size: 19px; }
  .streak-display, .combo-display { font-size: 13px; }

  /* Round header */
  .round-header { padding: 8px 16px; }
  #roundLabel { font-size: 16px; padding: 6px 14px; }
  .diff-badge { font-size: 11px; padding: 5px 12px; }
  .points-info { font-size: 13px; }

  /* Feedback */
  .feedback-bar { font-size: 13px; padding: 8px 16px; }

  /* Formula */
  .formula-zone { padding: 8px 20px; border-radius: 14px; }
  .formula-label { font-size: 10px; letter-spacing: 2px; margin-bottom: 4px; }
  .formula-big { font-size: clamp(22px, 3.5vw, 42px); min-height: 48px; letter-spacing: 3px; }
  .formula-answer { font-size: 13px; }

  /* Timer */
  .timer-zone { padding: 5px 16px; }
  .timer-bar-bg { height: 5px; }
  .timer-num { font-size: 18px; min-width: 28px; }

  /* Answer zone */
  .answer-zone { padding: 5px 16px; }
  .ans-input { font-size: 20px; padding: 10px 14px; border-radius: 10px; }
  .fire-btn { font-size: 12px; padding: 10px 12px; border-radius: 10px; }

  /* Order */
  .order-zone { padding: 4px 16px; }
  .order-label { font-size: 10px; }
  .order-btn { padding: 9px 10px; font-size: 17px; border-radius: 10px; }

  /* Numpad — même taille que tablette */
  .numpad { gap: 5px; padding: 4px 16px 6px; }
  .numpad-btn { padding: 9px 6px; font-size: 16px; border-radius: 9px; }

  /* Supers */
  .supers-zone { padding: 5px 16px; gap: 7px; }
  .sp-btn { min-width: 100px; padding: 6px 8px; }
  .sp-btn .sp-name { font-size: 10px; }
  .sp-btn .sp-desc { font-size: 9px; }
  .sp-btn .sp-uses { font-size: 9px; }

  /* Battle bottom */
  .battle-bottom { padding: 5px 16px 6px; gap: 10px; }
  .pause-btn, .quit-btn { font-size: 13px; padding: 10px 10px; border-radius: 11px; }
  .bg-warning-bar { font-size: 10px; padding: 3px 16px 6px; }

  /* Results */
  .results-box { max-width: 560px; padding: 36px 32px; }
  .res-emoji { font-size: 68px; }
  .res-title { font-size: 36px; }
  .res-subtitle { font-size: 14px; }
  .stars-reward { font-size: 38px; gap: 14px; }
  .res-score { font-size: 30px; }
  .res-row { padding: 12px 18px; border-radius: 11px; }
  .res-rank { font-size: 24px; }
  .res-name { font-size: 15px; }
  .res-hp { font-size: 13px; }
  .res-btn { padding: 16px; font-size: 15px; border-radius: 11px; }

  /* Modal */
  .modal-box { max-width: 560px; padding: 28px 32px; }
  .modal-title { font-size: 26px; }
  .shop-grid { gap: 12px; }
  .shop-item { padding: 16px 12px; }
  .shop-item-icon { font-size: 30px; }
  .shop-item-name { font-size: 13px; }
  .shop-item-price { font-size: 13px; }
  .lb-row { padding: 12px 16px; border-radius: 11px; }
  .lb-name { font-size: 15px; }
  .elo-badge { font-size: 12px; }
  .don-btn { font-size: 14px; padding: 12px 20px; }
  .close-btn { font-size: 14px; padding: 14px; }

  /* Pause overlay */
  .pause-box { max-width: 380px; padding: 40px 36px; }
  .pause-title { font-size: 44px; }
  .pause-resume { padding: 16px; font-size: 16px; }
  .pause-quit { padding: 14px; font-size: 15px; }

  /* HP loss FX plus visible */
  .hp-loss-fx { font-size: 42px; }
  .score-pop { font-size: clamp(20px, 3vw, 34px); }

  /* Dots de supers */
  .sp-dot { width: 16px; height: 16px; font-size: 8px; }
}

/* ══ TRÈS GRAND ÉCRAN (≥ 1100px) ══ */
@media (min-width: 1100px) {
  .splash-modes { max-width: 680px; }
  .mode-btn { padding: 20px 26px; }
  .mode-title { font-size: 17px; }
  .mode-desc { font-size: 13px; }

  .arena { max-width: 1060px; }
  .formula-big { font-size: clamp(36px, 3.5vw, 64px); }

  .story-grid {
    max-width: 648px;
    gap: 12px;
  }
  .story-level { font-size: 30px; }
  .narrative-wrap { max-width: 820px; }
  .narrative-text { font-size: 18px; }
}

/* ══ TIMER FREEZE ══ */
.timer-frozen {
  transition: none !important;
  opacity: 0.45;
  filter: grayscale(0.7);
}
#timerNum.timer-frozen {
  color: var(--muted) !important;
}

/* ══ CRITICAL HIT FX ══ */

/* Overlay "CRITIQUE !" au centre écran */
.crit-overlay {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 6vw, 68px);
  font-weight: 800;
  letter-spacing: clamp(1px, 0.8vw, 4px);
  pointer-events: none;
  z-index: 10010;
  white-space: normal;
  text-align: center;
  width: min(88vw, 480px);
  word-break: break-word;
  animation: critPopAnim 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.crit-player {
  color: #fff;
  text-shadow: 0 0 30px var(--cyan), 0 0 60px var(--blue-neon), 0 0 8px #fff;
}
.crit-ai {
  color: #fff;
  text-shadow: 0 0 30px var(--red), 0 0 60px #ff6060, 0 0 8px #ffaaaa;
}
@keyframes critPopAnim {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  35%  { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
  80%  { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Flash plein écran */
.crit-screen-flash {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 10009;
  animation: critScreenFlash 0.55s ease-out forwards;
}
.crit-screen-player {
  background: radial-gradient(ellipse at center, rgba(0,212,255,0.45) 0%, rgba(0,180,255,0.15) 50%, transparent 80%);
}
.crit-screen-ai {
  background: radial-gradient(ellipse at center, rgba(255,60,60,0.45) 0%, rgba(229,48,48,0.15) 50%, transparent 80%);
}
@keyframes critScreenFlash {
  0%   { opacity: 1; }
  40%  { opacity: 0.8; }
  100% { opacity: 0; }
}

/* Shake arène */
.screen-shake {
  animation: arenaShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes arenaShake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
  100% { transform: translateX(0); }
}

/* Flash blanc sur le fighter qui encaisse */
.fighter-crit-hit {
  animation: fighterCritHit 0.42s ease forwards;
}
@keyframes fighterCritHit {
  0%   { filter: brightness(1); }
  20%  { filter: brightness(4) saturate(0); }
  55%  { filter: brightness(2) saturate(0.3); }
  100% { filter: brightness(1) saturate(1); }
}

/* ══ ANSWER REVEALED ══ */
.formula-answer.answer-revealed {
  display: block !important;
  font-size: clamp(26px, 5vw, 44px) !important;
  font-weight: 800 !important;
  color: var(--gold-neon) !important;
  text-shadow: 0 0 22px var(--gold-glow), 0 0 6px var(--gold-glow);
  letter-spacing: 2px;
  animation: answerPop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes answerPop {
  0%   { transform: scale(0.65) translateY(10px); opacity: 0; }
  65%  { transform: scale(1.1) translateY(-4px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ══════════════════════════════════════
   XP BAR — Progression globale visible
══════════════════════════════════════ */
.xp-bar-wrap {
  width: 100%;
  max-width: 400px;
  margin: 0px auto 0;
  padding: 0 4px;
}
.xp-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.xp-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(128,128,128,0.15);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-neon), var(--blue-neon));
  border-radius: 10px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 8px var(--gold-glow);
}
#xpGainPop {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 9999;
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--gold-neon);
  text-shadow: 0 0 12px var(--gold-glow);
  pointer-events: none;
}
#xpGainPop.hidden { display: none; }
.xp-pop-anim {
  animation: xpPopUp 1.8s ease-out forwards;
}
@keyframes xpPopUp {
  0%   { opacity: 0; transform: translateY(10px) scale(0.8); }
  20%  { opacity: 1; transform: translateY(-4px) scale(1.1); }
  60%  { opacity: 1; transform: translateY(-16px) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) scale(0.9); }
}

/* ══ LEVEL UP OVERLAY ══ */
.levelup-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20000;
  text-align: center;
  background: var(--surface);
  border: 2px solid var(--gold-neon);
  border-radius: 20px;
  padding: 28px 36px;
  box-shadow: 0 0 60px var(--gold-glow), 0 20px 60px var(--shadow-lg);
  animation: levelupPop 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}
.levelup-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(24px, 6vw, 40px);
  font-weight: 800;
  color: var(--gold-neon);
  text-shadow: 0 0 20px var(--gold-glow);
  letter-spacing: 2px;
}
.levelup-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 1px;
}
@keyframes levelupPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  30%  { transform: translate(-50%, -50%) scale(1); }
  75%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* ══ TUTORIEL ══ */
#screenTutorial {
  position: fixed;
  inset: 0;
  z-index: 15000;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(10px);
}
#screenTutorial.hidden { display: none !important; }

.tuto-box {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 16px 60px var(--shadow-lg);
  position: relative;
}
.tuto-header {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--blue-neon);
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 0 0 10px var(--blue-glow);
}
.tuto-step-icon {
  font-size: 52px;
  text-align: center;
  margin-bottom: 14px;
  animation: tutoPulse 2s ease-in-out infinite;
}
@keyframes tutoPulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.tuto-step-title {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--gold);
  text-align: center;
  margin-bottom: 10px;
}
.tuto-step-text {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.75;
  text-align: center;
  margin-bottom: 20px;
}
.tuto-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.tuto-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.25s;
}
.tuto-dot.active {
  background: var(--blue-neon);
  box-shadow: 0 0 8px var(--blue-glow);
  width: 20px;
  border-radius: 4px;
}
.tuto-btns {
  display: flex;
  gap: 10px;
}
.tuto-btn-prev {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.tuto-btn-prev:hover { border-color: var(--gold-neon); color: var(--gold); }
.tuto-btn-next {
  flex: 2;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--blue-neon), var(--cyan));
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px var(--blue-glow);
  transition: all 0.2s;
}
.tuto-btn-next:hover { filter: brightness(1.1); transform: translateY(-1px); }
.tuto-skip {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  background: none;
  border: none;
  font-family: 'Space Grotesk', sans-serif;
}
.tuto-skip:hover { color: var(--text2); }

/* ══ TOAST NOTIFICATION ══ */
.toast-notif {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20001;
  background: var(--surface);
  border: 1px solid var(--gold-neon);
  border-radius: 20px;
  padding: 10px 20px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  box-shadow: 0 4px 20px var(--gold-glow);
  animation: toastIn 3s ease-out forwards;
  white-space: nowrap;
}
@keyframes toastIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* ══ ACCESSIBILITÉ — Focus visible ══ */
:focus-visible {
  outline: 2px solid var(--blue-neon);
  outline-offset: 3px;
  border-radius: 6px;
}
button:focus-visible {
  outline: 2px solid var(--gold-neon);
  outline-offset: 3px;
}

/* ══ SKIP LINK ══ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 99999;
  padding: 8px 16px;
  background: var(--gold-neon);
  color: #1a1a00;
  font-weight: 700;
  border-radius: 8px;
  font-size: 13px;
  transition: top 0.2s;
  font-family: 'Space Grotesk', sans-serif;
}
.skip-link:focus { top: 8px; }

/* ══ LOADING SCREEN ══ */
#loadingScreen {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition: opacity 0.5s ease;
}
#loadingScreen.fade-out { opacity: 0; pointer-events: none; }
.loading-logo {
  font-family: 'Syne', sans-serif;
  font-size: 48px;
  /*font-weight: 800;*/
  color: var(--text);
}
.loading-logo span {
  background: linear-gradient(135deg, var(--blue-neon), var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.loading-bar-bg {
  width: 200px;
  height: 4px;
  background: rgba(128,128,128,0.15);
  border-radius: 10px;
  overflow: hidden;
}
.loading-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-neon), var(--blue-neon));
  border-radius: 10px;
  animation: loadBar 1.2s ease-out forwards;
}
@keyframes loadBar {
  0%   { width: 0%; }
  60%  { width: 80%; }
  100% { width: 100%; }
}
.loading-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

/* ══ NARRATIF — niveau ══ */
.narrative-lvl {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
}

/* ══ XP BLOCK — Story Map ══ */
.story-xp-block {
  width: 92%;
  max-width: 600px;
  margin: 1px auto 0;
  padding: 10px 16px;
  background: var(--surface);
  /*border: 1px solid var(--border-gold);*/
  border-radius: 12px;
  box-shadow: 0 2px 10px var(--shadow);
}
.story-xp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.story-xp-label {
  /*font-family: 'Syne', sans-serif;*/
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.5px;
}
.story-xp-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.story-xp-bg {
  width: 100%;
  height: 8px;
  background: rgba(128,128,128,0.15);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.story-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-neon), var(--blue-neon));
  border-radius: 10px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 8px var(--gold-glow);
}
.story-xp-stats {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.3px;
}

/* ══ LOGO SPLASH ══ */
.splash-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.splash-logo-icon {
  width: clamp(64px, 14vw, 96px);
  height: clamp(64px, 14vw, 96px);
  filter: drop-shadow(0 0 18px rgba(0,180,255,0.5)) drop-shadow(0 0 8px rgba(245,196,0,0.3));
  animation: logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}
.splash-wordmark {
  font-family: 'Syne', sans-serif;
  font-size: clamp(43px, 12vw, 0px);
  /*font-weight: 800;*/
  /*letter-spacing: -2px;*/
  line-height: 1;
  text-align: center;
}
/* ── Titre LogicShot : blanc + glow doré ── */
.splash-wordmark .logo-gold,
.splash-wordmark .logo-shot {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  filter: none;
  text-shadow:
    0 0 6px  #ffd700,
    0 0 14px rgba(245,196,0,0.90),
    0 0 30px rgba(245,196,0,0.65),
    0 0 60px rgba(245,196,0,0.35),
    0 0 90px rgba(245,196,0,0.15);
  animation: goldPulse 3s ease-in-out infinite;
}
.splash-wordmark .logo-gold {
  /*font-size: 0.52em;*/
  /*letter-spacing: 4px;*/
  /*display: block;*/
  /*text-transform: uppercase;*/
  font-weight: 700;
}
@keyframes goldPulse {
  0%,100% {
    text-shadow:
      0 0 6px  #02b5ff,
      0 0 14px rgba(245,196,0,0.90),
      0 0 30px rgba(245,196,0,0.65),
      0 0 60px rgba(245,196,0,0.35);
  }
  50% {
    text-shadow:
      0 0 10px #ffd700,
      0 0 22px rgba(245,196,0,1),
      0 0 50px rgba(245,196,0,0.80),
      0 0 90px rgba(245,196,0,0.45);
  }
}

/* ══ STORY RESET BUTTON STYLED ══ */
.story-reset-btn {
  font-size: 7px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--red);
  background: rgba(229,48,48,0.06);
  border: 1px solid rgba(229,48,48,0.3);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.3px;
}
.story-reset-btn:hover {
  background: rgba(229,48,48,0.14);
  border-color: var(--red);
  box-shadow: 0 0 10px rgba(229,48,48,0.2);
}

/* ══ XP BADGE RÉSULTATS ══ */
.res-xp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245,196,0,0.08);
  border: 1px solid rgba(245,196,0,0.3);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 10px;
  animation: xpBadgePop 0.5s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: 0.3s;
}
.res-xp-icon {
  font-size: 16px;
}
.res-xp-level {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
  font-family: 'Space Grotesk', sans-serif;
}
@keyframes xpBadgePop {
  0%   { opacity: 0; transform: scale(0.7) translateY(6px); }
  70%  { transform: scale(1.05) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ══════════════════════════════════════
   ONLINE 1v1 — Écrans Menu & Lobby
══════════════════════════════════════ */
.online-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 40px var(--shadow-lg);
}
.online-title {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--gold);
  text-align: center;
  letter-spacing: 0.5px;
  text-shadow: 0 0 14px var(--gold-glow);
}
.online-sub {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: -4px;
  letter-spacing: 0.3px;
}
.online-or {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 2px 0;
}
.online-btn {
  padding: 13px 18px;
  border-radius: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  border: 1.5px solid;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.online-btn.primary {
  background: var(--gold-neon);
  color: #1a1200;
  border-color: var(--gold-neon);
  box-shadow: 0 0 18px var(--gold-glow);
}
.online-btn.primary:hover:not(:disabled) {
  box-shadow: 0 0 32px var(--gold-glow);
  transform: translateY(-2px);
}
.online-btn.secondary {
  background: transparent;
  color: var(--blue-neon);
  border-color: var(--blue-neon);
}
.online-btn.secondary:hover:not(:disabled) {
  background: rgba(0,180,255,0.07);
  box-shadow: 0 0 18px var(--blue-glow);
  transform: translateY(-2px);
}
.online-btn.outline {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
  font-size: 13px;
  padding: 10px 14px;
}
.online-btn.outline:hover:not(:disabled) {
  border-color: var(--gold-neon);
  color: var(--gold);
}
.online-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Code affiché en grand dans le lobby ── */
.room-code-display {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(44px, 14vw, 68px);
  font-weight: 700;
  color: var(--gold-neon);
  text-align: center;
  letter-spacing: 14px;
  text-shadow: 0 0 24px var(--gold-glow);
  animation: codePulse 2.4s ease-in-out infinite;
  user-select: all;
}
@keyframes codePulse {
  0%,100% { text-shadow: 0 0 20px var(--gold-glow); }
  50%      { text-shadow: 0 0 44px var(--gold-glow), 0 0 8px rgba(255,255,255,0.15); }
}

/* ── Spinner d'attente ── */
.lobby-spinner {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 6px 0;
}
.lobby-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-neon);
  opacity: 0.3;
  animation: dotBounce 1.2s ease-in-out infinite;
}
.lobby-dot:nth-child(2) { animation-delay: 0.2s; }
.lobby-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
  0%,100% { opacity: 0.2; transform: translateY(0); }
  50%      { opacity: 0.9; transform: translateY(-5px); }
}

/* ══════════════════════════════════════
   NAME SETUP — Écran pseudo 1ère connexion
══════════════════════════════════════ */
#screenNameSetup { background: var(--bg); }
.name-setup-box {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 36px 28px 32px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 48px var(--shadow-lg);
  animation: nsSlideUp 0.45s cubic-bezier(.22,1,.36,1);
}
@keyframes nsSlideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.name-setup-emoji { font-size: 52px; display: block; margin-bottom: 14px; }
.name-setup-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.name-setup-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 24px;
}
.name-setup-input {
  width: 100%;
  padding: 16px 18px;
  border: 2px solid var(--border);
  border-radius: 14px;
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 700;
  background: var(--bg2);
  color: var(--text);
  text-align: center;
  margin-bottom: 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  letter-spacing: 1px;
  box-sizing: border-box;
}
.name-setup-input:focus {
  border-color: var(--blue-neon);
  box-shadow: 0 0 0 3px var(--blue-glow);
}
.name-setup-input::placeholder { color: var(--muted); font-weight: 400; font-size: 16px; }
.name-setup-warn {
  font-size: 12px;
  color: var(--red);
  font-weight: 600;
  min-height: 18px;
  margin-bottom: 4px;
  transition: opacity 0.2s;
}

/* Badge joueur sur le splash */
.splash-player-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px 6px 10px;
  background: rgba(245,196,0,0.08);
  border: 1px solid rgba(245,196,0,0.22);
  border-radius: 99px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  margin: 2px 0 10px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.splash-player-badge:hover { background: rgba(245,196,0,0.14); border-color: var(--gold-neon); }
.splash-player-badge .badge-pencil { font-size: 12px; opacity: 0.7; }

/* ══════════════════════════════════════
   SURVIE INFINIE — Redesign complet
══════════════════════════════════════ */
#screenSurvival {
  overflow: hidden;
  padding: 0 !important;
  justify-content: flex-start !important;
  min-height: 100dvh !important;
}

#svArena {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 54px; /* compense la global-bar fixe en bas */
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Top bar : score + combo ── */
.sv-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px 8px;
  flex-shrink: 0;
}
#svScore {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--gold-neon);
  text-shadow: 0 0 14px var(--gold-glow);
  transition: color 0.2s;
}
#svCombo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: var(--red);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── Banque de temps — hero clock ── */
.sv-bank-wrap {
  width: 100%;
  padding: 0 20px 6px;
  text-align: center;
  flex-shrink: 0;
}
.sv-timer-label {
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
}
#svBank {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 13vw, 62px);
  line-height: 1;
  letter-spacing: -2px;
  color: var(--blue-neon);
  text-shadow: 0 0 24px var(--blue-glow);
  transition: color 0.3s, text-shadow 0.3s;
}
.sv-bank-bar-bg {
  width: 100%;
  height: 5px;
  background: rgba(0,0,0,0.08);
  border-radius: 99px;
  margin-top: 6px;
  overflow: hidden;
}
[data-theme="dark"] .sv-bank-bar-bg { background: rgba(255,255,255,0.07); }
#svBankBar {
  height: 100%;
  width: 50%;
  border-radius: 99px;
  background: var(--blue-neon);
  box-shadow: 0 0 10px currentColor;
  transition: width 0.05s linear, background 0.3s;
}

/* ── Question box ── */
#svQuestionBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 20px 0;
  gap: 6px;
  flex: 1;
  min-height: 0;
}

/* Diff badge */
#svDiff {
  font-size: 9px;
  letter-spacing: 3px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 99px;
  border: 1px solid currentColor;
  color: var(--blue-neon);
  flex-shrink: 0;
  align-self: flex-start;
}

/* Formule */
#svFormula {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(22px, 6.5vw, 32px);
  font-weight: 700;
  color: var(--text);
  text-align: center;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 14px 16px;
  width: 100%;
  letter-spacing: 2px;
  flex-shrink: 0;
  box-sizing: border-box;
  box-shadow: 0 4px 24px var(--shadow);
  line-height: 1.3;
}

/* Feedback */
#svFeedback {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  min-height: 20px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

/* Input + bouton valider (réutilise .player-answer-row de battle) */
#svInput {
  font-family: 'Share Tech Mono', monospace;
  font-size: 28px;
  font-weight: 700;
  color: var(--blue-neon);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;
  flex: 1;
  text-align: center;
  min-height: 54px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
#svInput:not([value=""]) {
  border-color: var(--blue-neon);
  box-shadow: 0 0 14px var(--blue-glow);
}

/* Numpad (réutilise .numpad/.numpad-btn du mode battle) */
#svNumpadZone {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#svNumpadZone .numpad {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  width: 100%;
  height: 100%;
}
#svNumpadZone .numpad-btn {
  min-height: 46px;
  font-size: 22px;
  border-radius: 14px;
  box-shadow: 0 2px 8px var(--shadow);
  flex: 1;
}

/* Bouton quitter */
.sv-quit-btn {
  width: 100%;
  margin: 4px 0 0;
  padding: 10px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition: border-color 0.2s;
}
.sv-quit-btn:hover { border-color: var(--red); color: var(--red); }

/* ══ GAME OVER ══ */
#svGameOverBox {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  text-align: center;
  justify-content: center;
  padding: 24px 20px 20px;
  animation: goFadeIn 0.5s cubic-bezier(.22,1,.36,1);
}
@keyframes goFadeIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sv-go-skull {
  font-size: 56px;
  animation: skullIn 0.55s cubic-bezier(.22,1,.36,1);
}
@keyframes skullIn {
  0%   { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  70%  { transform: scale(1.12) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.sv-go-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--text);
  letter-spacing: 4px;
}
#svGoNew {
  display: none;
  background: linear-gradient(135deg, var(--gold-neon), var(--gold));
  color: #000;
  padding: 6px 20px;
  border-radius: 99px;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  box-shadow: 0 4px 18px var(--gold-glow);
}
.sv-go-stats {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 6px 28px var(--shadow);
}
.sv-go-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
.sv-go-label { color: var(--muted); font-size: 13px; font-weight: 500; }
.sv-go-val   { font-weight: 700; font-size: 15px; }
#svGoScore   { font-family: 'Syne', sans-serif; font-weight: 800; color: var(--gold-neon); font-size: 24px; text-shadow: 0 0 14px var(--gold-glow); }
#svGoCorrect { color: var(--green); }
#svGoBest    { color: var(--blue-neon); }
#svGoXP      { color: var(--purple); }
.sv-go-divider {
  height: 1px;
  background: var(--border);
  margin: 2px -4px;
  opacity: 0.6;
}
.sv-go-btns-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.sv-go-btn {
  padding: 14px 6px;
  border: none;
  border-radius: 14px;
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 3px 12px var(--shadow);
}
.sv-go-btn:active { transform: scale(0.95); }
.sv-go-btn.share  { background: linear-gradient(135deg, var(--blue-neon), #0088ee); color: #fff; box-shadow: 0 4px 16px rgba(0,136,238,0.35); }
.sv-go-btn.rank   { background: linear-gradient(135deg, var(--gold-neon), var(--gold)); color: #000; box-shadow: 0 4px 16px var(--gold-glow); }
.sv-go-btn.replay { background: linear-gradient(135deg, #ff4444, #cc0000); color: #fff; box-shadow: 0 4px 16px rgba(200,0,0,0.3); }
.sv-go-btn.menu   { background: none; border: 1.5px solid var(--border); color: var(--muted); font-family: 'Space Grotesk', sans-serif; box-shadow: none; }