/* ═══════════════════════════════════════════════════════════════════════════
   QUIZPLACE v4 — "The Vault"
   
   Aesthetic: Heavy editorial × premium gaming. Think Stripe meets Figma 
   meets a high-end game dashboard. Completely original layout language.
   
   Key differences from anything before:
   - Side navigation instead of top tabs (desktop)
   - Pill-based accent system, not box-fills  
   - Split-surface cards (dark panel + lighter content area)
   - Monochrome base with one vivid accent color
   - Typography: Bebas for numbers, Syne 800 for headings, DM Mono for UI
═══════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  --bg:   #09090f;
  --s1:   #111118;
  --s2:   #18181f;
  --s3:   #1f1f2a;
  --s4:   #272735;

  --ln:   rgba(255,255,255,.06);
  --ln2:  rgba(255,255,255,.11);
  --ln3:  rgba(255,255,255,.2);

  --ink:  #f2f0ff;
  --ink2: #7a7899;
  --ink3: rgba(255,255,255,.07);

  /* Accent: electric indigo → vivid violet */
  --a:    #818cf8;
  --a2:   #c084fc;
  --adim: rgba(129,140,248,.1);
  --aglow:rgba(129,140,248,.28);
  --grad: linear-gradient(135deg,#818cf8 0%,#c084fc 100%);

  --ok:   #34d399;
  --err:  #f87171;
  --warn: #fbbf24;
  --info: #60a5fa;
  --pink: #f472b6;

  /* Radius */
  --rr:  6px;
  --rl:  12px;
  --rx:  18px;
  --rpill: 999px;

  /* Motion */
  --spring: cubic-bezier(.22,.68,0,1.2);
  --smooth: cubic-bezier(.4,0,.2,1);
  --ms: 150ms;

  /* Legacy aliases — keep everything working */
  --card: var(--s1); --card2: var(--s2); --card-hover: var(--s3);
  --border: var(--ln); --border2: var(--ln2); --border-active: rgba(129,140,248,.4);
  --text: var(--ink); --sub: var(--ink2); --muted: var(--ink3);
  --o: var(--a); --o2: var(--a2); --o-grad: var(--grad);
  --glow: var(--aglow); --glow2: rgba(192,132,252,.2);
  --g: var(--ok); --r: var(--err); --b: var(--info);
  --y: var(--warn); --pk: var(--pink); --in: var(--a);
  --ac: var(--a); --p: var(--a2);
  --r-sm: var(--rr); --r-md: var(--rl); --r-lg: var(--rl); --r-xl: var(--rx);
  --t: all var(--ms) var(--smooth);
  --font-title: 'Bebas Neue',sans-serif;
  --font-mono: 'DM Mono',monospace;
  --font-body: 'Syne',sans-serif;
  --f-title: 'Bebas Neue',sans-serif;
  --f-ui: 'Syne',sans-serif;
  --f-mono: 'DM Mono',monospace;
  --accent: var(--a); --accent-2: var(--a2);
  --accent-dim: var(--adim); --accent-glow: var(--aglow);
  --green: var(--ok); --red: var(--err); --yellow: var(--warn); --blue: var(--info);
  --surface-1: var(--s1); --surface-2: var(--s2); --surface-3: var(--s3);
  --line: var(--ln); --line-2: var(--ln2);
  --radius: var(--rr); --radius-lg: var(--rl); --radius-xl: var(--rx);
  --ease: var(--spring); --ease-2: var(--smooth); --dur: var(--ms);

  --surface-soft:rgba(255,255,255,.05);
  --surface-strong:rgba(255,255,255,.09);
  --paper-shadow:0 8px 32px rgba(0,0,0,.4);
  --hint:var(--ink3);
  --surface:var(--s1);
}

/* ── THEMES ──────────────────────────────────────────────────────────────── */
body.theme-light {
  --bg:#f5f5f0; --s1:#ffffff; --s2:#f0efea; --s3:#e5e4de; --s4:#d8d7d0;
  --ln:rgba(0,0,0,.07); --ln2:rgba(0,0,0,.13); --ln3:rgba(0,0,0,.05);
  --ink:#1a1a2e; --ink2:#6b6b85; --ink3:rgba(0,0,0,.06);
  --a:#6366f1; --a2:#8b5cf6;
  --adim:rgba(99,102,241,.08); --aglow:rgba(99,102,241,.2);
  --grad:linear-gradient(135deg,#6366f1,#8b5cf6);
  --ok:#16a34a; --err:#dc2626; --warn:#d97706;
  --card:var(--s1); --card2:var(--s2); --border:var(--ln); --border2:var(--ln2);
  --text:var(--ink); --sub:var(--ink2); --muted:var(--ink3);
  --o:var(--a); --o-grad:var(--grad); --glow:var(--aglow);
  --g:var(--ok); --r:var(--err); --b:#2563eb; --y:var(--warn);
  --accent:var(--a); --accent-dim:var(--adim); --accent-glow:var(--aglow);
  --green:var(--ok); --red:var(--err); --yellow:var(--warn); --blue:#2563eb;
  --surface-1:var(--s1); --surface-2:var(--s2); --line:var(--ln); --line-2:var(--ln2);
}
body.theme-quizhub {
  --bg:#07040a; --s1:#100d16; --s2:#181420; --s3:#201b2a; --s4:#282233;
  --ln:rgba(232,93,32,.08); --ln2:rgba(232,93,32,.15); --ln3:rgba(232,93,32,.04);
  --ink:#fff0e8; --ink2:#9a6045;
  --a:#f97316; --a2:#fb923c;
  --adim:rgba(249,115,22,.1); --aglow:rgba(249,115,22,.3);
  --grad:linear-gradient(135deg,#c2410c,#f97316);
  --card:var(--s1); --card2:var(--s2); --border:var(--ln); --border2:var(--ln2);
  --text:var(--ink); --sub:var(--ink2); --muted:var(--ink3);
  --o:var(--a); --o-grad:var(--grad); --glow:var(--aglow);
  --accent:var(--a); --accent-dim:var(--adim); --accent-glow:var(--aglow);
}
body.theme-slate {
  --bg:#0d1117; --s1:#161b22; --s2:#21262d; --s3:#2d333b; --s4:#373e47;
  --ln:rgba(255,255,255,.08); --ln2:rgba(255,255,255,.14);
  --ink:#e6edf3; --ink2:#8b949e;
  --a:#58a6ff; --a2:#79c0ff;
  --adim:rgba(88,166,255,.1); --aglow:rgba(88,166,255,.25);
  --grad:linear-gradient(135deg,#1f6feb,#58a6ff);
  --ok:#3fb950; --err:#f85149; --warn:#d29922;
  --card:var(--s1); --card2:var(--s2); --border:var(--ln); --border2:var(--ln2);
  --text:var(--ink); --sub:var(--ink2); --muted:rgba(255,255,255,.06);
  --o:var(--a); --o-grad:var(--grad); --glow:var(--aglow);
}
body.theme-rose {
  --bg:#0f0507; --s1:#180a10; --s2:#200f17; --s3:#281420; --s4:#301928;
  --ln:rgba(244,114,182,.08); --ln2:rgba(244,114,182,.15);
  --ink:#fdf2f8; --ink2:#c084a0;
  --a:#f472b6; --a2:#fb7185;
  --adim:rgba(244,114,182,.1); --aglow:rgba(244,114,182,.3);
  --grad:linear-gradient(135deg,#db2777,#f472b6);
  --card:var(--s1); --card2:var(--s2); --border:var(--ln); --border2:var(--ln2);
  --text:var(--ink); --sub:var(--ink2); --muted:rgba(244,114,182,.05);
  --o:var(--a); --o-grad:var(--grad); --glow:var(--aglow);
}
body.theme-neon{--bg:#000510;--s1:#060b1a;--s2:#080e22;--s3:#0a1128;--s4:#0c143a;--ln:rgba(0,100,255,.12);--ln2:rgba(0,100,255,.22);--ink:#e0f0ff;--ink2:#6699cc;--a:#a855f7;--a2:#ec4899;--adim:rgba(168,85,247,.1);--aglow:rgba(168,85,247,.4);--grad:linear-gradient(135deg,#a855f7,#ec4899);--ok:#00ffaa;--err:#ff3366;--warn:#ffee00;--card:var(--s1);--card2:var(--s2);--border:var(--ln);--border2:var(--ln2);--text:var(--ink);--sub:var(--ink2);--muted:rgba(0,100,255,.08);--o:var(--a);--o-grad:var(--grad);--glow:var(--aglow);}
body.theme-retro{--bg:#0a1200;--s1:#0d1a00;--s2:#101f00;--s3:#132600;--s4:#162d00;--ln:rgba(0,255,65,.09);--ln2:rgba(0,255,65,.16);--ink:#00ff41;--ink2:#44aa00;--a:#00ff41;--a2:#44ff00;--adim:rgba(0,255,65,.08);--aglow:rgba(0,255,65,.4);--grad:linear-gradient(135deg,#00c832,#00ff41);--ok:#44ff00;--err:#ff4400;--warn:#ffee00;--card:var(--s1);--card2:var(--s2);--border:var(--ln);--border2:var(--ln2);--text:var(--ink);--sub:var(--ink2);--muted:rgba(0,255,65,.05);--o:var(--a);--o-grad:var(--grad);--glow:var(--aglow);}
body.theme-ocean{--bg:#020c1b;--s1:#0a192f;--s2:#0d2040;--s3:#10274d;--s4:#132e5a;--ln:rgba(100,255,218,.08);--ln2:rgba(100,255,218,.14);--ink:#ccd6f6;--ink2:#8892b0;--a:#64ffda;--a2:#57cbff;--adim:rgba(100,255,218,.08);--aglow:rgba(100,255,218,.3);--grad:linear-gradient(135deg,#00b4d8,#64ffda);--ok:#52e0b0;--err:#ff4d6d;--warn:#ffd166;--card:var(--s1);--card2:var(--s2);--border:var(--ln);--border2:var(--ln2);--text:var(--ink);--sub:var(--ink2);--muted:rgba(100,255,218,.05);--o:var(--a);--o-grad:var(--grad);--glow:var(--aglow);}
body.theme-sunset{--bg:#100508;--s1:#180a0d;--s2:#1f0d11;--s3:#261015;--s4:#2d1319;--ln:rgba(255,102,51,.09);--ln2:rgba(255,102,51,.16);--ink:#ffe0d0;--ink2:#cc7755;--a:#ff6633;--a2:#ff9500;--adim:rgba(255,102,51,.09);--aglow:rgba(255,102,51,.35);--grad:linear-gradient(135deg,#ff4500,#ff9500);--ok:#ffaa00;--err:#ff2244;--warn:#ffdd00;--card:var(--s1);--card2:var(--s2);--border:var(--ln);--border2:var(--ln2);--text:var(--ink);--sub:var(--ink2);--muted:rgba(255,102,51,.05);--o:var(--a);--o-grad:var(--grad);--glow:var(--aglow);}
body.theme-blood{--bg:#080002;--s1:#100005;--s2:#16000a;--s3:#1c000f;--s4:#220014;--ln:rgba(255,0,51,.09);--ln2:rgba(255,0,51,.16);--ink:#ffe0e8;--ink2:#cc4466;--a:#ff0033;--a2:#ff4466;--adim:rgba(255,0,51,.09);--aglow:rgba(255,0,51,.4);--grad:linear-gradient(135deg,#cc0022,#ff0033);--ok:#ff6600;--err:#ff0055;--card:var(--s1);--card2:var(--s2);--border:var(--ln);--border2:var(--ln2);--text:var(--ink);--sub:var(--ink2);--muted:rgba(255,0,51,.05);--o:var(--a);--o-grad:var(--grad);--glow:var(--aglow);}
body.theme-mint{--bg:#001a0f;--s1:#002514;--s2:#002e18;--s3:#00371c;--s4:#004020;--ln:rgba(0,255,170,.08);--ln2:rgba(0,255,170,.15);--ink:#ccffe8;--ink2:#44cc88;--a:#00ffaa;--a2:#44ff88;--adim:rgba(0,255,170,.08);--aglow:rgba(0,255,170,.35);--grad:linear-gradient(135deg,#00cc88,#00ffaa);--ok:#44ff88;--err:#ff4466;--warn:#aaff44;--card:var(--s1);--card2:var(--s2);--border:var(--ln);--border2:var(--ln2);--text:var(--ink);--sub:var(--ink2);--muted:rgba(0,255,170,.05);--o:var(--a);--o-grad:var(--grad);--glow:var(--aglow);}
body.theme-void{--bg:#000;--s1:#050505;--s2:#080808;--s3:#0b0b0b;--s4:#0e0e0e;--ln:rgba(255,255,255,.07);--ln2:rgba(255,255,255,.13);--ink:#fff;--ink2:#888;--a:#fff;--a2:#ccc;--adim:rgba(255,255,255,.07);--aglow:rgba(255,255,255,.15);--grad:linear-gradient(135deg,#aaa,#fff);--ok:#aaa;--err:#fff;--card:var(--s1);--card2:var(--s2);--border:var(--ln);--border2:var(--ln2);--text:var(--ink);--sub:var(--ink2);--muted:rgba(255,255,255,.04);--o:var(--a);--o-grad:var(--grad);--glow:var(--aglow);}
body.theme-candy{--bg:#0a0015;--s1:#120020;--s2:#180028;--s3:#1e0030;--s4:#240038;--ln:rgba(255,68,255,.1);--ln2:rgba(255,68,255,.18);--ink:#fff0ff;--ink2:#cc88ff;--a:#ff44ff;--a2:#aa44ff;--adim:rgba(255,68,255,.1);--aglow:rgba(255,68,255,.4);--grad:linear-gradient(135deg,#cc00ff,#ff44ff);--ok:#44ffcc;--err:#ff4488;--warn:#ffff44;--card:var(--s1);--card2:var(--s2);--border:var(--ln);--border2:var(--ln2);--text:var(--ink);--sub:var(--ink2);--muted:rgba(255,68,255,.06);--o:var(--a);--o-grad:var(--grad);--glow:var(--aglow);}

/* ── RESET ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Syne','DM Mono',sans-serif;
  font-size:15px; font-weight:400; line-height:1.6;
  min-height:100vh; -webkit-font-smoothing:antialiased;
  transition:background .35s,color .35s;
}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--ln2);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--ink2)}

/* ── ANIMATIONS ──────────────────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{transform:scale(.82) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-12px)}40%{transform:translateX(12px)}60%{transform:translateX(-7px)}80%{transform:translateX(7px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes loaderPulse{0%,100%{opacity:.3}50%{opacity:.9}}
@keyframes bossAtk{0%,100%{transform:none}30%{transform:translateX(-22px) scale(1.12)}60%{transform:translateX(12px) scale(1.06)}}
@keyframes monsterAtk{0%,100%{transform:none}25%{transform:translateX(30px) scale(1.2)}60%{transform:translateX(-10px) scale(.9)}}
@keyframes dodgeAnim{0%{transform:none}30%{transform:translateY(-18px) rotate(-8deg)}70%{transform:translateY(-12px) rotate(5deg)}100%{transform:none}}
@keyframes dmgFloat{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1;transform:translate(-50%,-130%) scale(1.5)}100%{opacity:0;transform:translate(-50%,-320%) scale(.8)}}
@keyframes screenF{from{opacity:.35}to{opacity:0}}
@keyframes fire{0%,100%{transform:scaleY(1) rotate(-1deg)}50%{transform:scaleY(1.18) rotate(1deg)}}
@keyframes comboIn{0%{transform:scale(0) rotate(-20deg);opacity:0}60%{transform:scale(1.3) rotate(5deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes bobUp{0%,100%{transform:none}50%{transform:translateY(-5px)}}
@keyframes bossEntry{from{transform:translateY(-20px) scale(1.2);opacity:0}to{transform:none;opacity:1}}
@keyframes spellBlast{0%{transform:translate(-50%,-50%) scale(0) rotate(-30deg);opacity:1}50%{transform:translate(-50%,-50%) scale(2.5) rotate(15deg);opacity:1}100%{transform:translate(-50%,-50%) scale(4) rotate(30deg);opacity:0}}
@keyframes cardFlipIn{from{transform:rotateY(90deg) scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes snowfall{from{transform:translateY(-20px) rotate(0)}to{transform:translateY(110vh) rotate(720deg);opacity:0}}
@keyframes fireRise{from{transform:none;opacity:1}to{transform:translateY(-200px) scale(.3);opacity:0}}
@keyframes partyRainbow{0%{background:rgba(255,0,0,.03)}50%{background:rgba(0,255,0,.03)}100%{background:rgba(255,0,0,.03)}}
@keyframes scareIn{from{transform:scale(0) rotate(-20deg)}to{transform:none}}
@keyframes scareFlash{0%,100%{background:#000}50%{background:#f00}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 20px var(--aglow)}50%{box-shadow:0 0 40px var(--aglow),0 0 60px var(--aglow)}}

.aFU{animation:fadeUp .26s var(--smooth) both}
.aPI{animation:popIn .2s var(--spring) both}
.aSH{animation:shake .4s var(--smooth)}
.aBS{animation:bossAtk .5s var(--smooth)}
.aMA{animation:monsterAtk .4s var(--smooth)}
.aDG{animation:dodgeAnim .4s var(--smooth)}

body.reduced-motion *{animation:none!important;transition:none!important}
body.high-contrast{--ln:rgba(255,255,255,.3);--ln2:rgba(255,255,255,.55)}
body.zen-mode #nav{opacity:0;pointer-events:none}
body.bg-dots{background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:22px 22px}
body.bg-grid{background-image:linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px);background-size:28px 28px}
body.bg-scan{background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px)}

/* ── LOADER ──────────────────────────────────────────────────────────────── */
.qp-loader{position:fixed;inset:0;z-index:9999999;background:#09090f;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .4s}
.qp-loader-brand{display:flex;align-items:center;gap:0;margin-bottom:40px}
.qp-loader-word{font-family:'Bebas Neue',sans-serif;font-size:52px;color:#f2f0ff;letter-spacing:6px}
.qp-loader-mark{font-family:'Bebas Neue',sans-serif;font-size:52px;color:#fff;background:var(--grad);padding:2px 14px;letter-spacing:6px;border-radius:6px;box-shadow:0 0 28px var(--aglow)}
.qp-loader-track{width:180px;height:2px;background:var(--s3);border-radius:99px;overflow:hidden;margin-bottom:20px}
.qp-loader-fill{height:100%;background:var(--grad);border-radius:99px;width:0;transition:width .35s var(--smooth)}
.qp-loader-msg{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink2);letter-spacing:4px;animation:loaderPulse 1.4s ease infinite}

/* ══════════════════════════════════════════════════════════════════════════
   NAV — top bar, clean, minimal. Tabs are text-only with pill active state.
══════════════════════════════════════════════════════════════════════════ */
#nav {
  position:fixed; top:0; left:0; right:0; height:54px;
  background:rgba(9,9,15,.9);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--ln);
  display:flex; align-items:center; padding:0 16px;
  z-index:900; gap:10px;
}
body.theme-light #nav{background:rgba(245,245,240,.92)}
#nav::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--a) 40%,var(--a2) 60%,transparent 100%);
  opacity:.55;
}
.logo{font-family:'Syne',sans-serif;display:flex;align-items:center;gap:0;flex-shrink:0;cursor:pointer;text-decoration:none;transition:opacity var(--ms) var(--smooth)}
.logo:hover{opacity:.7}
.logo-q{font-size:16px;color:var(--ink);letter-spacing:.07em;font-weight:800;text-transform:uppercase}
.logo-h{font-size:16px;color:#fff;background:var(--grad);padding:2px 9px;letter-spacing:.07em;font-weight:800;text-transform:uppercase;border-radius:5px;margin-left:2px;box-shadow:0 0 16px var(--aglow)}
body.theme-light .logo-h{color:#fff}

.ntabs{display:flex;flex:1;justify-content:center;gap:2px;overflow-x:auto;scrollbar-width:none;padding:0 8px}
.ntabs::-webkit-scrollbar{display:none}
.ntab{
  height:30px;padding:0 12px;
  background:none;border:none;
  color:var(--ink2);
  font-family:'Syne',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  cursor:pointer;border-radius:var(--rpill);
  transition:all var(--ms) var(--smooth);white-space:nowrap;
}
.ntab:hover{color:var(--ink);background:rgba(255,255,255,.06)}
body.theme-light .ntab:hover{background:rgba(0,0,0,.06)}
.ntab.on{
  color:#fff;
  background:var(--grad);
  box-shadow:0 2px 16px var(--aglow);
}
body.theme-light .ntab.on{color:#fff}
body.theme-quizhub .ntab.on{background:linear-gradient(135deg,#c2410c,#f97316);box-shadow:0 2px 16px rgba(249,115,22,.3)}

.nav-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}
.nav-icon-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--rr);border:1px solid var(--ln2);cursor:pointer;transition:all var(--ms) var(--smooth);color:var(--ink2);font-size:13px}
.nav-icon-btn:hover{border-color:var(--a);color:var(--a);background:var(--adim)}
.nav-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);cursor:pointer;flex-shrink:0;box-shadow:0 0 6px rgba(52,211,153,.5)}
#app{margin-top:54px;min-height:calc(100vh - 54px)}
.wrap{max-width:780px;margin:0 auto;padding:40px 24px}
.hidden{display:none!important}

/* ── UTILS ───────────────────────────────────────────────────────────────── */
.title-xl{font-family:'Bebas Neue',sans-serif;font-size:40px;letter-spacing:.05em;line-height:1.05}
.title-lg{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:.04em;line-height:1.1}
.font-title{font-family:'Bebas Neue',sans-serif}.text-mono{font-family:'DM Mono',monospace}
.text-small{font-size:11px}.text-xs{font-size:10px}
.ls-2{letter-spacing:2px}.ls-3{letter-spacing:3px}.ls-4{letter-spacing:4px}.ls-5{letter-spacing:5px}
.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.center{display:flex;align-items:center;justify-content:center}
.gap-sm{gap:8px}.gap-md{gap:16px}.gap-lg{gap:24px}
.w-full{width:100%}.flex-1{flex:1}.text-center{text-align:center}.italic{font-style:italic}
.text-muted{color:var(--ink2)}.text-main{color:var(--ink)}.text-sub{color:var(--ink2)}
.text-accent{color:var(--a)}.text-success{color:var(--ok)}
.text-danger{color:var(--err)}.text-warn{color:var(--warn)}.text-blue{color:var(--info)}
.bg-in{background:var(--a)!important}.v-sep{width:1px;background:var(--ln)}
.ad-1{animation-delay:.1s}.ad-12{animation-delay:.12s}.ad-15{animation-delay:.15s}
.ad-16{animation-delay:.16s}.ad-2{animation-delay:.2s}.ad-20{animation-delay:.20s}.ad-24{animation-delay:.24s}

/* ══════════════════════════════════════════════════════════════════════════
   CARD — split-surface design. Dark outer, slightly lighter inner glow.
══════════════════════════════════════════════════════════════════════════ */
.card{
  background:var(--s1);
  border:1px solid var(--ln);
  border-radius:var(--rl);
  padding:18px;
  position:relative;overflow:hidden;
  transition:border-color var(--ms) var(--smooth),box-shadow var(--ms) var(--smooth);
}
/* Top shimmer line — unique feel */
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--ln2) 30%,rgba(255,255,255,.15) 50%,var(--ln2) 70%,transparent 100%);
  pointer-events:none;
}
body.theme-light .card{box-shadow:0 1px 6px rgba(0,0,0,.06)}
body.theme-light .card::before{background:linear-gradient(90deg,transparent,rgba(0,0,0,.07),transparent)}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--grad);color:#fff;border:none;
  padding:11px 22px;
  font-family:'DM Mono',monospace;font-size:11px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  cursor:pointer;border-radius:var(--rr);
  box-shadow:0 2px 14px var(--aglow);
  transition:all var(--ms) var(--smooth);white-space:nowrap;
  position:relative;overflow:hidden;
}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.13) 0%,transparent 55%);pointer-events:none;border-radius:inherit}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--aglow);filter:brightness(1.08)}
.btn:active{transform:none;filter:brightness(.95)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}

.btnG{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:transparent;color:var(--ink2);border:1px solid var(--ln2);
  padding:10px 18px;font-family:'DM Mono',monospace;font-size:11px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;cursor:pointer;border-radius:var(--rr);
  transition:all var(--ms) var(--smooth);white-space:nowrap;
}
.btnG:hover{border-color:var(--a);color:var(--a);background:var(--adim)}
.btnG:active{transform:scale(.98)}
.btnG:disabled{opacity:.35;cursor:not-allowed}

.btn-sm{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--ln2);color:var(--ink2);padding:6px 11px;font-family:'DM Mono',monospace;font-size:10px;font-weight:600;letter-spacing:1px;cursor:pointer;border-radius:var(--rr);transition:all var(--ms) var(--smooth)}
.btn-sm:hover{border-color:var(--a);color:var(--a)}

/* Size buttons */
.size-btn{background:transparent;border:1px solid var(--ln2);color:var(--ink2);padding:7px 10px;font-family:'DM Mono',monospace;font-size:10px;font-weight:600;letter-spacing:1px;cursor:pointer;border-radius:var(--rr);transition:all var(--ms) var(--smooth);text-transform:uppercase}
.size-btn:hover{border-color:var(--a);color:var(--ink)}
.size-btn.active{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 0 12px var(--aglow)}
.size-btn.home-size-btn{flex:1;padding:8px 4px;font-size:10px}

/* ── INPUTS ──────────────────────────────────────────────────────────────── */
input,textarea,select{background:var(--s2);border:1px solid var(--ln2);color:var(--ink);caret-color:var(--ink);font-family:'DM Mono',monospace;font-size:13px;border-radius:var(--rr);transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px var(--adim)}
input[type=range]{background:none;border:none;box-shadow:none}
input[type=color]{cursor:pointer}
body.theme-light input,body.theme-light textarea,body.theme-light select{background:#fff;border-color:rgba(0,0,0,.15);color:#111827!important;caret-color:#111827}
input::placeholder,textarea::placeholder{color:var(--ink2);opacity:.85}
body.theme-light input::placeholder,body.theme-light textarea::placeholder{color:#6b7280}

.qp-select{width:100%;background:var(--s2);border:1px solid var(--ln2);color:var(--ink);padding:11px 13px;font-family:'DM Mono',monospace;font-size:13px;outline:none;cursor:pointer;border-radius:var(--rr)}
.qp-select:focus{border-color:var(--a);box-shadow:0 0 0 3px var(--adim)}
body.theme-light .qp-select{background:#fff;border-color:rgba(0,0,0,.15)}

.hp-cnt-wrap{position:relative;display:inline-block}
.hp-cnt-display{width:54px;background:var(--s2);border:1px solid var(--ln2);color:var(--ink);padding:7px 4px;font-family:'DM Mono',monospace;font-size:11px;text-align:center;cursor:pointer;user-select:none;border-radius:var(--rr)}
.hp-cnt-display.is-custom{background:var(--grad);border-color:transparent;color:#fff;font-weight:700}
.hp-cnt-input{display:none;width:54px;background:var(--s2);border:2px solid var(--a);color:var(--ink);padding:7px 4px;font-family:'DM Mono',monospace;font-size:11px;text-align:center;outline:none;position:absolute;top:0;left:0;border-radius:var(--rr)}

.field-label{font-size:10px;color:var(--ink2);letter-spacing:2px;margin-bottom:6px;font-family:'DM Mono',monospace;text-transform:uppercase}
.field-label-3{font-size:10px;color:var(--ink2);letter-spacing:3px;display:block;margin-bottom:5px;font-family:'DM Mono',monospace;text-transform:uppercase}

/* ══════════════════════════════════════════════════════════════════════════
   ANSWER BUTTONS — completely redesigned
   Left: color indicator line. Background: faint tinted. Corner: answer letter.
══════════════════════════════════════════════════════════════════════════ */
.oBtn{
  width:100%;
  background:var(--s2);
  border:1px solid var(--ln);
  color:var(--ink2);
  padding:14px 18px;font-size:14px;text-align:left;
  cursor:pointer;font-family:'Syne',sans-serif;font-weight:400;
  line-height:1.5;border-radius:var(--rl);
  transition:all var(--ms) var(--smooth);
  position:relative;
}
.oBtn:hover:not(:disabled){
  border-color:var(--a);color:var(--ink);
  background:var(--s3);
  box-shadow:inset 3px 0 0 var(--a);
  transform:translateX(2px);
}
.oBtn.cor{background:rgba(52,211,153,.07)!important;border-color:var(--ok)!important;color:var(--ok)!important;cursor:default;box-shadow:inset 3px 0 0 var(--ok)!important;transform:none!important}
.oBtn.wrg{background:rgba(248,113,113,.07)!important;border-color:var(--err)!important;color:var(--err)!important;cursor:default;box-shadow:none!important;transform:none!important}
.oBtn.dim{background:transparent!important;border-color:var(--ln)!important;color:var(--ink3)!important;cursor:default;opacity:.5}
body.theme-light .oBtn{background:#fff;border-color:rgba(0,0,0,.1);color:#6b6b85}
body.theme-light .oBtn:hover:not(:disabled){background:#f5f5f0;border-color:var(--a);color:var(--ink)}

.tfBtn{width:100%;background:var(--s2);border:1px solid var(--ln);color:var(--ink2);padding:28px;font-family:'Bebas Neue',sans-serif;font-size:36px;letter-spacing:5px;cursor:pointer;border-radius:var(--rx);transition:all var(--ms) var(--smooth);text-align:center}
.tfBtn:hover:not(:disabled){border-color:var(--a);color:var(--ink);background:var(--s3);box-shadow:0 0 30px var(--aglow)}
.tfBtn.cor{background:rgba(52,211,153,.07)!important;border-color:var(--ok)!important;color:var(--ok)!important;cursor:default}
.tfBtn.wrg{background:rgba(248,113,113,.07)!important;border-color:var(--err)!important;color:var(--err)!important;cursor:default}
.tfBtn.dim{background:transparent!important;border-color:var(--ln)!important;color:var(--ink3)!important;cursor:default;opacity:.5}

.oBtn,.tfBtn,.btn,.btnG{touch-action:manipulation}
canvas{touch-action:none}
.dpad-btn{touch-action:manipulation}

/* ── GAME HEADER ─────────────────────────────────────────────────────────── */
.game-screen{max-width:680px;margin:0 auto;padding:32px 22px}
.gc-hdr{margin-bottom:16px}
.gc-hdr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.gc-hdr-label{font-size:10px;color:var(--ink2);letter-spacing:3px;padding:4px 10px;background:var(--s2);border:1px solid var(--ln);border-left:3px solid var(--a);border-radius:0 var(--rr) var(--rr) 0;font-family:'DM Mono',monospace;text-transform:uppercase}
.gc-score{font-family:'Bebas Neue',sans-serif;font-size:24px;color:var(--a)}
.gc-hdr-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--ink2);margin-top:2px;font-family:'DM Mono',monospace}
.hpbar{height:3px;background:var(--ln);border-radius:99px;overflow:hidden;min-width:80px}
.hpbar-fill{height:100%;background:var(--grad);border-radius:99px;transition:width .3s var(--smooth)}

/* ── RESULT SCREEN ───────────────────────────────────────────────────────── */
.result-shell{max-width:500px;margin:0 auto;padding:60px 22px;text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center}
.result-kicker{font-size:10px;color:var(--ink2);letter-spacing:4px;font-family:'DM Mono',monospace;text-transform:uppercase}
.result-stars{font-family:'Bebas Neue',sans-serif;font-size:48px;color:var(--res-col,var(--a));letter-spacing:5px;text-shadow:0 0 24px var(--res-col,var(--aglow))}
.result-pct{font-family:'Bebas Neue',sans-serif;font-size:108px;color:var(--res-col,var(--a));line-height:1;text-shadow:0 0 50px var(--res-col,var(--aglow))}
.result-pct-suf{font-family:'Bebas Neue',sans-serif;font-size:46px;color:var(--ink3)}
.result-msg{font-size:14px;color:var(--ink2)}
.result-extra{font-size:11px;color:var(--a);letter-spacing:2px;background:var(--adim);border:1px solid rgba(129,140,248,.2);padding:7px 18px;border-radius:var(--rr)}
.result-saveas{font-size:11px;color:var(--ink2);letter-spacing:2px;font-family:'DM Mono',monospace}
.result-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ══════════════════════════════════════════════════════════════════════════
   GAMES PAGE — proper two-column desktop layout
══════════════════════════════════════════════════════════════════════════ */
.games-shell{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:0;
  max-width:1080px;
  margin:0 auto;
  padding:32px 24px;
  align-items:start;
  min-height:calc(100vh - 54px);
}
.games-intro{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink2);letter-spacing:4px;text-transform:uppercase;margin-bottom:22px}
.games-cat{
  font-family:'DM Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:.16em;color:var(--ink2);text-transform:uppercase;
  margin:22px 0 10px;padding-bottom:8px;
  border-bottom:1px solid var(--ln);
}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px;margin-bottom:8px}

/* Game card — new shape: colored left bar + icon + text */
.game-card{
  background:var(--s1);
  border:1px solid var(--ln);
  border-radius:var(--rl);
  padding:16px 14px;
  cursor:pointer;
  transition:all var(--ms) var(--smooth);
  position:relative;overflow:hidden;
}
.game-card::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad);opacity:0;
  transition:opacity var(--ms) var(--smooth);
  border-radius:var(--rl) 0 0 var(--rl);
}
.game-card:hover{
  border-color:var(--ln2);
  background:var(--s2);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.game-card:hover::after{opacity:1}
.game-card.selected{border-color:var(--a);background:var(--adim)}
.game-card.selected::after{opacity:1}
.game-card-icon{font-size:24px;margin-bottom:9px;line-height:1}
.game-card-name{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;margin-bottom:3px;color:var(--ink);letter-spacing:.01em}
.game-card-desc{font-size:11px;color:var(--ink2);line-height:1.45}
body.theme-light .game-card{background:#fff;border-color:rgba(0,0,0,.08)}
body.theme-light .game-card:hover{background:#f8f8f4;box-shadow:0 6px 20px rgba(0,0,0,.1)}

/* Right panel — sticky launch area */
.games-side{position:sticky;top:70px;padding-left:20px}
.games-panel{
  background:var(--s1);
  border:1px solid var(--ln);
  border-radius:var(--rx);
  padding:22px;
  min-height:220px;
}
body.theme-light .games-panel{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.games-panel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px 0;gap:10px;text-align:center}
.games-panel-empty-icon{font-size:38px;opacity:.25}
.games-panel-empty-text{font-size:11px;color:var(--ink2);font-family:'DM Mono',monospace;letter-spacing:2px;text-transform:uppercase}
.gpick-shell{padding:2px 0}
.gpick-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.gpick-icon{font-size:30px;line-height:1}
.gpick-title{font-family:'Syne',sans-serif;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:.02em}
.gpick-desc{font-size:11px;color:var(--ink2);margin-top:2px}
.gpick-section{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:8px;font-family:'DM Mono',monospace}
.gpick-list{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.gpick-btns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.gpick-diff{display:flex;gap:6px;margin-bottom:20px}
.quiz-pick-btn{display:block;width:100%;background:var(--s2);border:1px solid var(--ln2);color:var(--ink2);padding:9px 13px;text-align:left;font-family:'DM Mono',monospace;font-size:11px;cursor:pointer;border-radius:var(--rr);transition:all var(--ms) var(--smooth);margin-bottom:4px;letter-spacing:.5px}
.quiz-pick-btn:hover,.quiz-pick-btn.active{border-color:var(--a);color:var(--a);background:var(--adim)}

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE — New layout: two column on desktop
   Left: welcome + quick play. Right: action shortcuts + recent activity.
══════════════════════════════════════════════════════════════════════════ */
.home-shell{min-height:calc(100vh - 54px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px;padding:40px 22px}
.home-kicker{font-size:11px;letter-spacing:5px;color:var(--a);margin-bottom:14px;font-family:'DM Mono',monospace;text-transform:uppercase}
.home-logo{display:inline-flex;align-items:center;gap:8px}
.home-logo-word{font-family:'Bebas Neue',sans-serif;font-size:72px;color:var(--ink);letter-spacing:2px;text-shadow:0 0 40px var(--aglow);line-height:1}
.home-logo-mark{font-family:'Bebas Neue',sans-serif;font-size:72px;color:#fff;background:var(--grad);padding:4px 12px;letter-spacing:2px;box-shadow:0 4px 28px var(--aglow);line-height:1;border-radius:4px}
body.theme-light .home-logo-mark{color:#fff}
.home-tagline{font-size:11px;letter-spacing:4px;color:var(--ink2);margin-top:10px;font-family:'DM Mono',monospace;text-transform:uppercase}
.home-stats{display:flex;gap:22px;justify-content:center}
.home-stat-value{font-family:'Bebas Neue',sans-serif;font-size:36px;line-height:1}
.home-stat-label{font-size:10px;color:var(--ink2);letter-spacing:3px;font-family:'DM Mono',monospace}
.home-quick{border-top:2px solid var(--a);max-width:460px;width:100%;padding:24px;display:flex;flex-direction:column;gap:12px;border-radius:var(--rl);background:var(--s1)}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.home-btn-row{display:flex;gap:5px}
.home-count-row{display:flex;gap:4px;align-items:center}
.home-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ── AUTH ────────────────────────────────────────────────────────────────── */
.auth-ovl{position:fixed;inset:0;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.auth-card{max-width:420px;width:100%;background:var(--s1);border:1px solid var(--ln2);border-top:2px solid var(--a);padding:32px 28px;text-align:center;border-radius:var(--rx);box-shadow:0 24px 80px rgba(0,0,0,.6)}
body.theme-light .auth-card{background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.14)}
.auth-brand{font-family:'Bebas Neue',sans-serif;font-size:44px;color:var(--a);letter-spacing:3px;margin-bottom:2px;line-height:1}
.auth-subtitle{font-size:10px;color:var(--ink2);letter-spacing:4px;margin-bottom:22px;font-family:'DM Mono',monospace;text-transform:uppercase}
.auth-google-btn{width:100%;background:#fff;color:#1a1a1a;border:none;padding:12px 20px;font-size:13px;font-weight:700;font-family:'DM Mono',monospace;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px;letter-spacing:1px;border-radius:var(--rr);box-sizing:border-box;opacity:.4;transition:all var(--ms) var(--smooth)}
.auth-google-btn:hover{opacity:.9;transform:translateY(-1px)}
.auth-divider{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.auth-divider-line{flex:1;height:1px;background:var(--ln2)}
.auth-divider-text{font-size:9px;color:var(--ink2);letter-spacing:2px;font-family:'DM Mono',monospace;text-transform:uppercase}
.auth-tabs{display:flex;gap:2px;margin-bottom:16px;background:var(--s2);border:1px solid var(--ln);border-radius:var(--rr);padding:3px}
.auth-tab-btn{flex:1;padding:8px;border:none;border-radius:5px;font-family:'DM Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1px;cursor:pointer;background:transparent;color:var(--ink2);transition:all var(--ms) var(--smooth);text-transform:uppercase}
.auth-tab-btn.on{background:var(--grad);color:#fff;box-shadow:0 0 12px var(--aglow)}
.auth-input{width:100%;background:var(--s2);border:1px solid var(--ln2);color:var(--ink);padding:12px 14px;font-family:'DM Mono',monospace;font-size:13px;outline:none;margin-bottom:8px;box-sizing:border-box;border-radius:var(--rr);transition:border-color .15s,box-shadow .15s}
.auth-input:focus{border-color:var(--a);box-shadow:0 0 0 3px var(--adim)}
body.theme-light .auth-input{background:#f5f5f0;border-color:rgba(0,0,0,.15)}
.auth-username-row{display:none}
.pw-strength{text-align:left;margin-bottom:8px;display:none}
.auth-err{font-size:11px;color:var(--err);min-height:18px;margin-bottom:10px;text-align:left;font-family:'DM Mono',monospace}
.auth-rc{margin-bottom:10px;display:flex;justify-content:center}
.auth-submit{width:100%;font-size:13px;letter-spacing:2px;opacity:.4}
.auth-tos{margin-top:12px;display:flex;align-items:flex-start;gap:10px;background:rgba(255,255,255,.03);border:1px solid var(--ln);padding:11px 14px;text-align:left;border-radius:var(--rr)}
.auth-tos-check{width:16px;height:16px;flex-shrink:0;margin-top:2px;accent-color:var(--a);cursor:pointer}
.auth-tos-label{font-size:10px;color:var(--ink2);line-height:1.75;cursor:pointer}
.auth-tos-link{background:none;border:none;color:var(--a);font-family:'DM Mono',monospace;font-size:10px;cursor:pointer;padding:0;text-decoration:underline;font-weight:700}
.auth-or-guest{margin-top:10px;text-align:center}
.auth-or-text{font-size:9px;color:var(--ink2);letter-spacing:2px;font-family:'DM Mono',monospace}
.auth-guest-btn{width:100%;background:transparent;border:1px solid var(--ln2);color:var(--ink2);padding:11px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;cursor:pointer;margin-top:10px;transition:all var(--ms) var(--smooth);border-radius:var(--rr);text-transform:uppercase}
.auth-guest-btn:hover{border-color:var(--a);color:var(--a)}
.auth-guest-note{font-size:9px;color:var(--ink2);letter-spacing:1px;margin-top:5px;text-align:center;font-family:'DM Mono',monospace}
.auth-fb-warn{margin-top:10px;font-size:10px;color:var(--err);letter-spacing:1px;font-family:'DM Mono',monospace}
.pw-bars{display:flex;gap:3px;margin-bottom:5px}.pw-bar{flex:1;height:3px;border-radius:2px;transition:background .2s}
.pw-label{font-size:10px;letter-spacing:1px;margin-bottom:4px;font-family:'DM Mono',monospace}
.pw-chips{display:flex;flex-wrap:wrap;gap:4px}.pw-chip{font-size:9px;padding:2px 6px;border-radius:10px}

/* ── NOTIFICATIONS ───────────────────────────────────────────────────────── */
.notif-bell{position:fixed;bottom:20px;left:20px;z-index:8900;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.notif-badge{display:none;position:absolute;top:-4px;right:-4px;width:14px;height:14px;background:var(--err);border-radius:50%;font-size:9px;color:#fff;align-items:center;justify-content:center;font-weight:700}
.notif-toast{background:var(--s2);border:1px solid var(--ln2);border-left:3px solid var(--a);padding:12px 14px;font-family:'Syne',sans-serif;font-size:12.5px;font-weight:500;color:var(--ink);max-width:300px;border-radius:var(--rl);box-shadow:0 8px 32px rgba(0,0,0,.6);animation:fadeUp .2s var(--smooth) both;display:flex;align-items:center;gap:10px}
.notif-icon{font-size:16px}.notif-text{flex:1;line-height:1.4}.notif-close{background:none;border:none;color:var(--ink2);cursor:pointer;font-size:14px;padding:0 0 0 6px}

/* ── DAILY GOAL ──────────────────────────────────────────────────────────── */
.daily-goal-wrap{max-width:460px;margin:0 auto 24px;padding:0 22px}
.card.daily-goal-card{padding:14px 18px;display:flex;align-items:center;gap:14px}
.daily-goal-emoji{font-size:28px}
.daily-goal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:10px}
.daily-goal-track{height:3px;background:var(--ln);border-radius:3px;overflow:hidden}
.daily-goal-fill{height:100%;border-radius:3px;transition:width .4s var(--smooth);background:var(--grad)}
.daily-goal-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:5px;gap:10px}
.daily-goal-btn{background:none;border:none;color:var(--ink2);font-size:10px;cursor:pointer;font-family:'DM Mono',monospace;letter-spacing:1px;padding:0}

/* ── OVERLAYS ────────────────────────────────────────────────────────────── */
.qp-ovl{position:fixed;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(4px);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.goal-modal{background:var(--s1);border:1px solid var(--ln2);padding:24px;max-width:320px;width:100%;text-align:center;border-radius:var(--rx)}
.goal-title{font-family:'Bebas Neue',sans-serif;font-size:24px;color:var(--a);letter-spacing:2px;margin-bottom:16px}
.goal-sub{font-size:12px;color:var(--ink2);margin-bottom:16px}
.goal-grid{display:flex;gap:8px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}
.goal-opt{background:var(--s2);color:var(--ink);border:1px solid var(--ln2);padding:10px 16px;font-family:'DM Mono',monospace;font-size:13px;cursor:pointer;border-radius:var(--rr);transition:all var(--ms) var(--smooth)}
.goal-opt.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 0 12px var(--aglow)}
.goal-cancel{width:100%;background:none;border:1px solid var(--ln2);color:var(--ink2);padding:9px;font-family:'DM Mono',monospace;font-size:11px;cursor:pointer;border-radius:var(--rr);transition:all var(--ms) var(--smooth)}
.goal-cancel:hover{border-color:var(--a);color:var(--a)}

/* ── QUIZZES ─────────────────────────────────────────────────────────────── */
.page-head{margin-bottom:26px}
.qz-row{background:var(--s1);border:1px solid var(--ln);border-left:3px solid var(--q-accent,var(--a));padding:16px 18px;display:flex;align-items:center;gap:12px;border-radius:var(--rl);transition:all var(--ms) var(--smooth)}
.qz-row:hover{border-color:var(--ln2);background:var(--s2)}
.qz-row-title{font-family:'Bebas Neue',sans-serif;font-size:19px;color:var(--q-accent,var(--a));line-height:1.1}
.qz-row-meta{font-size:10px;color:var(--ink2);letter-spacing:2px;margin-top:3px;font-family:'DM Mono',monospace}
.qz-row-desc{font-size:11px;color:var(--ink2);margin-top:4px;font-style:italic}
.qz-row-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-pad-qz{padding:9px 13px!important}.qz-link-btn{color:#a855f7;border-color:#a855f7}.qz-share-btn{color:var(--info);border-color:var(--info)}
.icon-btn{background:none;border:1px solid var(--ln2);color:var(--ink2);padding:9px 13px;cursor:pointer;font-family:'DM Mono',monospace;transition:all var(--ms) var(--smooth);border-radius:var(--rr)}
.icon-btn:hover{border-color:var(--a);color:var(--a)}
.card.qz-token{border-top:2px solid var(--warn);padding:20px;margin-bottom:18px}
.qz-token-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.qz-token-title{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--warn);letter-spacing:2px}
.qz-token-bar{display:flex;align-items:center;gap:4px}
.qz-token-desc{font-size:10px;color:var(--ink2);letter-spacing:2px;margin-bottom:12px;font-family:'DM Mono',monospace}
.qz-tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px}
.tier-btn{background:var(--s2);border:1px solid var(--ln2);color:var(--ink);padding:14px 8px;font-family:'DM Mono',monospace;cursor:pointer;text-align:center;transition:all var(--ms) var(--smooth);border-radius:var(--rl)}
.tier-btn:hover{border-color:var(--a)}
.tier-btn.on{background:rgba(251,191,36,.1);border-color:var(--warn);color:var(--warn)}
.tier-emoji{font-size:22px;margin-bottom:4px}.tier-label{font-size:11px;font-weight:700;letter-spacing:2px;margin-bottom:3px}.tier-desc{font-size:10px;opacity:.8;margin-bottom:6px}.tier-cost{font-size:12px;font-weight:700}
.card.qz-gen{border-top:2px solid var(--a);padding:22px;margin-bottom:22px}
.qz-gen-title{font-family:'Bebas Neue',sans-serif;font-size:24px;color:var(--a);letter-spacing:2px;margin-bottom:4px}
.qz-gen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:10px}
.mb-0{margin-bottom:0!important}.mb-12{margin-bottom:12px!important}
.qz-search{width:100%;background:var(--s2);border:1px solid var(--ln2);color:var(--ink);padding:10px;font-family:'DM Mono',monospace;font-size:13px;outline:none;margin:12px 0;border-radius:var(--rr)}
.gen-files{border:1px solid var(--ln);border-radius:var(--rl);padding:16px;margin-bottom:12px}
.gen-files-title{font-size:10px;color:var(--ink2);letter-spacing:3px;margin-bottom:8px;font-family:'DM Mono',monospace}
.gen-files-desc{font-size:11px;color:var(--ink2);margin-bottom:10px;line-height:1.6}
.file-drop{border:2px dashed var(--ln2);padding:22px 18px;text-align:center;cursor:pointer;transition:all .2s;font-family:'DM Mono',monospace;border-radius:var(--rl)}
.file-drop:hover{border-color:var(--a);background:var(--adim)}
.file-drop-emoji{font-size:28px;margin-bottom:6px}.file-drop-cta{font-size:12px;color:var(--a);letter-spacing:1px;margin-bottom:4px}.file-drop-sub{font-size:10px;color:var(--ink2)}
.file-list{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}.file-msg{font-size:11px;margin-top:8px;min-height:18px;color:var(--ok)}
.card.qz-json{padding:18px;margin-bottom:18px}
.qz-kicker{font-size:10px;color:var(--ink2);letter-spacing:3px;margin-bottom:12px;font-family:'DM Mono',monospace}
.dropzone{border:2px dashed var(--ln2);padding:32px 20px;text-align:center;cursor:pointer;transition:all .2s;border-radius:var(--rl)}
.dropzone:hover{border-color:var(--a);background:var(--adim)}
.dropzone-title{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--ink2);letter-spacing:2px;transition:color .2s}
.dropzone:hover .dropzone-title{color:var(--a)}
.dropzone-sub{font-size:11px;color:var(--ink2);margin-top:5px}
.qz-list-kicker{font-size:10px;color:var(--ink2);letter-spacing:3px;margin-bottom:10px;font-family:'DM Mono',monospace}
.qz-list{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.qz-summary{font-size:11px;color:var(--ink2);letter-spacing:2px;cursor:pointer;padding:8px 0;list-style:none;font-family:'DM Mono',monospace}
.qz-manual{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.card.qz-manual-card{padding:16px}.qz-confirm{text-align:center;font-size:12px;min-height:20px;margin-top:8px;color:var(--ok);font-family:'DM Mono',monospace}
.qz-prev-ovl{position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:9000;overflow-y:auto;padding:20px}
.qz-prev-wrap{max-width:720px;margin:0 auto}
.qz-prev-sticky{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;gap:12px;position:sticky;top:0;background:rgba(9,9,15,.96);backdrop-filter:blur(10px);padding:14px 0;z-index:10}
.qz-prev-title{font-family:'Bebas Neue',sans-serif;font-size:34px;color:var(--a);letter-spacing:2px;line-height:1.1}
.qz-prev-sub{font-size:11px;color:var(--ink2);margin-top:3px;font-family:'DM Mono',monospace}
.qz-prev-actions{display:flex;gap:8px;flex-shrink:0}
.btn-save-all{background:var(--ok);color:#000;border:none;padding:10px 18px;font-family:'DM Mono',monospace;font-size:11px;font-weight:700;cursor:pointer;letter-spacing:2px;border-radius:var(--rr)}
.btn-ovl-close{background:none;border:1px solid var(--ln2);color:var(--ink2);padding:10px 16px;cursor:pointer;font-family:'DM Mono',monospace;font-size:12px;border-radius:var(--rr);transition:all var(--ms) var(--smooth)}
.btn-ovl-close:hover{border-color:var(--a);color:var(--a)}
.qz-prev-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.qz-prev-stat{background:var(--s1);border:1px solid var(--ln);padding:12px;text-align:center;border-radius:var(--rl)}
.qz-prev-stat-num{font-family:'Bebas Neue',sans-serif;font-size:28px;line-height:1.1}
.qz-prev-stat-lab{font-size:10px;color:var(--ink2);letter-spacing:2px;font-family:'DM Mono',monospace}
.qz-prev-section{font-size:10px;color:var(--ink2);letter-spacing:3px;margin-bottom:8px;font-family:'DM Mono',monospace}
.qz-prev-qcard{background:var(--s1);border:1px solid var(--ln);padding:14px;margin-bottom:8px;position:relative;border-radius:var(--rl)}
.qz-prev-qhdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:10px}
.qz-prev-qmeta{font-size:10px;color:var(--ink2);letter-spacing:2px;font-family:'DM Mono',monospace}
.qz-prev-del{background:none;border:none;color:var(--ink2);cursor:pointer;font-size:14px;padding:2px 6px;transition:color .15s}
.qz-prev-del:hover{color:var(--err)}
.qz-prev-qtext{font-size:14px;margin-bottom:10px;line-height:1.6}
.qz-prev-qtext-sm{font-size:14px;margin-bottom:8px}
.qz-prev-opts{display:flex;flex-wrap:wrap;gap:6px}
.qz-prev-correct{font-size:10px;color:var(--ink2);margin-top:8px;font-family:'DM Mono',monospace}
.qz-prev-exp{font-size:10px;color:var(--ink2);margin-top:6px;font-style:italic}

/* ── SOCIAL ──────────────────────────────────────────────────────────────── */
.social-wrap{max-width:900px}
.social-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.social-xp{padding:14px 18px;min-width:180px}
.social-xp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.social-xp-label{font-size:9px;color:var(--ink2);letter-spacing:3px;font-family:'DM Mono',monospace;text-transform:uppercase}
.social-xp-value{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--a)}
.xp-bar{height:3px;background:var(--ln);border-radius:2px;overflow:hidden;margin-top:4px}
.xp-bar-fill{height:100%;background:var(--grad);border-radius:2px;transition:width .5s var(--smooth)}
.xp-note{font-size:9px;color:var(--ink2);margin-top:4px;font-family:'DM Mono',monospace}
.xp-all{font-size:10px;color:var(--ok);letter-spacing:1px;font-family:'DM Mono',monospace}
.social-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:20px}
.social-card{padding:18px;cursor:pointer;position:relative;overflow:hidden;transition:all var(--ms) var(--smooth)}
.social-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--card-accent,var(--a));opacity:.7;border-radius:var(--rl) var(--rl) 0 0}
.social-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.social-card-icon{font-size:26px;margin-bottom:10px;line-height:1}
.social-card-title{font-family:'Syne',sans-serif;font-size:12px;font-weight:800;letter-spacing:.04em;margin-bottom:4px}
.social-card-desc{font-size:10px;color:var(--ink2);line-height:1.4;margin-bottom:8px}
.social-card-status{font-size:9px;color:var(--ink2);letter-spacing:1px;font-family:'DM Mono',monospace;text-transform:uppercase}
.social-card-status.ok{color:var(--ok)}.social-card-status.accent{color:var(--a)}
.social-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.schip{padding:8px 14px;border:1px solid var(--ln2);background:transparent;color:var(--ink2);font-family:'DM Mono',monospace;font-size:11px;font-weight:600;cursor:pointer;border-radius:var(--rr);transition:all var(--ms) var(--smooth);white-space:nowrap;letter-spacing:.02em}
.schip:hover{border-color:var(--a);color:var(--ink)}.schip-on{border-color:var(--a)!important;background:var(--adim)!important;color:var(--a)!important;font-weight:700!important}

/* ── SCORES ──────────────────────────────────────────────────────────────── */
.score-tabs{display:flex;gap:4px;margin-bottom:20px;background:var(--s1);border:1px solid var(--ln);padding:4px;border-radius:var(--rl);overflow-x:auto;scrollbar-width:none}
.score-tabs::-webkit-scrollbar{display:none}
.score-tab{padding:9px 16px;border:none;border-radius:var(--rr);font-family:'DM Mono',monospace;font-size:11px;font-weight:600;cursor:pointer;background:transparent;color:var(--ink2);transition:all var(--ms) var(--smooth);white-space:nowrap;letter-spacing:1px;text-transform:uppercase}
.score-tab.on{background:var(--grad);color:#fff;box-shadow:0 0 12px var(--aglow)}
.score-controls{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.score-select{background:var(--s2);border:1px solid var(--ln2);color:var(--ink);padding:8px 12px;font-family:'DM Mono',monospace;font-size:11px;border-radius:var(--rr);outline:none;cursor:pointer}
.score-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--s1);border:1px solid var(--ln);border-radius:var(--rl);margin-bottom:6px;transition:all var(--ms) var(--smooth)}
.score-row:hover{border-color:var(--ln2);background:var(--s2)}
.gscore-rank{font-size:11px;color:var(--ink2);min-width:28px;font-family:'DM Mono',monospace}
.gscore-pct{font-family:'Bebas Neue',sans-serif;font-size:28px;line-height:1;min-width:64px}
.card.score-summary{display:flex;gap:28px;padding:20px 24px;margin-bottom:20px;flex-wrap:wrap}
.score-stat-value{font-family:'Bebas Neue',sans-serif;font-size:34px;line-height:1}
.score-stat-label{font-size:10px;color:var(--ink2);letter-spacing:2px;font-family:'DM Mono',monospace;text-transform:uppercase}
.heatmap-wrap{overflow-x:auto;margin-bottom:20px}

/* ── SETTINGS ────────────────────────────────────────────────────────────── */
.settings-wrap{max-width:680px;margin:0 auto;padding:0 0 60px}
.settings-layout{display:block}
.stabs{display:flex;gap:2px;background:var(--s1);border:1px solid var(--ln);padding:4px;border-radius:var(--rl);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.stabs::-webkit-scrollbar{display:none}
.stab{flex:1;min-width:70px;padding:9px 6px;background:none;border:none;border-radius:var(--rr);color:var(--ink2);font-family:'DM Mono',monospace;font-size:10px;cursor:pointer;font-weight:700;letter-spacing:1px;transition:all var(--ms) var(--smooth);white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:3px;text-transform:uppercase}
.stab .stab-icon{font-size:16px;line-height:1}
.stab:hover{color:var(--ink);background:rgba(255,255,255,.04)}
body.theme-light .stab:hover{background:rgba(0,0,0,.04)}
.stab.active{background:var(--grad);color:#fff;box-shadow:0 0 12px var(--aglow)}
.ssec{display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:3px;color:var(--ink2);margin:22px 0 8px;text-transform:uppercase;font-family:'DM Mono',monospace}
.ssec:first-child{margin-top:0}.ssec span:first-child{font-size:13px}
.sgroup{background:var(--s1);border:1px solid var(--ln);border-radius:var(--rl);overflow:hidden;margin-bottom:4px}
body.theme-light .sgroup{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.srow{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--ln);gap:12px;transition:background var(--ms)}
.srow:last-child{border-bottom:none}.srow:hover{background:rgba(255,255,255,.02)}
body.theme-light .srow:hover{background:rgba(0,0,0,.02)}
.srow-info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.srow-label{font-size:13.5px;color:var(--ink);font-family:'Syne',sans-serif;font-weight:500}
.srow-desc{font-size:11px;color:var(--ink2);line-height:1.4}
.stog{flex-shrink:0;background:var(--ln2);color:var(--ink2);border:none;padding:6px 14px;cursor:pointer;font-family:'DM Mono',monospace;font-size:11px;font-weight:600;border-radius:var(--rpill);transition:all var(--ms) var(--smooth);min-width:52px}
.stog:hover{background:var(--s3);color:var(--ink)}
.stog-on{background:var(--grad)!important;color:#fff!important;box-shadow:0 0 10px var(--aglow)}
.schips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.sreset{background:none;border:1px solid var(--ln2);color:var(--ink2);padding:5px 10px;font-family:'DM Mono',monospace;font-size:10px;cursor:pointer;border-radius:var(--rr);transition:all var(--ms) var(--smooth)}
.sreset:hover{border-color:var(--ink2);color:var(--ink)}
.scard-stat{background:var(--s1);border:1px solid var(--ln);padding:18px;text-align:center;border-radius:var(--rl);flex:1}
.scard-stat .sv{font-size:28px;font-weight:700;font-family:'Bebas Neue',sans-serif;letter-spacing:1px}
.scard-stat .sk{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-top:4px;font-family:'DM Mono',monospace;font-weight:600}
.sdanger{background:var(--s1);border:1px solid var(--ln);border-top:2px solid var(--err);padding:18px;border-radius:0 0 var(--rl) var(--rl)}
.sinfobox{background:rgba(129,140,248,.06);border:1px solid rgba(129,140,248,.18);border-left:3px solid var(--a);padding:14px 16px;border-radius:0 var(--rl) var(--rl) 0;font-size:12.5px;color:var(--ink2);line-height:1.7;margin-bottom:12px}
.sslider-row{background:var(--s1);border:1px solid var(--ln);padding:16px 18px;border-radius:var(--rl);display:flex;align-items:center;gap:12px;margin-bottom:8px}
.stheme-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:8px}
.stheme-cell{cursor:pointer;text-align:center}
.stheme-swatch{height:48px;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:15px;border-radius:var(--rr) var(--rr) 0 0;transition:transform .12s}
.stheme-cell:hover .stheme-swatch{transform:scale(1.06)}
.stheme-name{font-size:10px;letter-spacing:.04em;margin-top:5px;font-family:'DM Mono',monospace;font-weight:500}
.sprofile-card{background:var(--s1);border:1px solid var(--ln);border-radius:var(--rl);padding:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.stchar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
.stchar{padding:14px 8px;border:1px solid var(--ln2);background:transparent;cursor:pointer;border-radius:var(--rl);text-align:center;transition:all var(--ms) var(--smooth)}
.stchar:hover{border-color:var(--a);background:var(--adim)}
.stchar.active{border-color:#a855f7;background:rgba(168,85,247,.1)}
.stchar .tc-emoji{font-size:26px;margin-bottom:6px}
.stchar .tc-name{font-size:10px;color:var(--ink2);font-family:'DM Mono',monospace;font-weight:600;letter-spacing:.03em}

/* ── DUNGEON / BATTLE ────────────────────────────────────────────────────── */
.dungeon-wrap{display:flex;height:calc(100vh - 54px);overflow:hidden}
.dungeon-main{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;gap:8px}
.dungeon-grid{display:grid;gap:1px;background:#030303;border:1px solid rgba(129,140,248,.18);box-shadow:0 0 40px rgba(129,140,248,.15)}
.dungeon-sidebar{width:180px;background:var(--s1);border-left:1px solid var(--ln);padding:12px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;flex-shrink:0;font-size:11px}
.battle-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:5000;display:flex;align-items:flex-end;animation:fadeUp .2s var(--smooth)}
.battle-panel{background:var(--s1);width:100%;max-height:80vh;overflow-y:auto;padding:22px;border-top:2px solid var(--ac)}

/* ── MISC ────────────────────────────────────────────────────────────────── */
.compact .card{padding:14px!important}.compact .oBtn{padding:11px 12px!important}.compact .btn{padding:9px 14px!important}
.unknown-screen{text-align:center;padding:80px;color:var(--ink2)}
.file-pill{background:var(--s2);border:1px solid var(--ln2);padding:4px 10px;font-size:10px;color:var(--ink2);border-radius:var(--rr);display:inline-flex;align-items:center;gap:6px;font-family:'DM Mono',monospace}
.fb-missing{text-align:center;padding:60px 24px}
.fb-missing-icon{font-size:48px;margin-bottom:12px}
.fb-missing-title{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:2px;margin-bottom:8px}
.fb-missing-sub{font-size:13px;color:var(--ink2)}
h1,h2,h3{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ══════════════════════════════════════════════════════════════════════════
   HOME v4 — Two-column dashboard layout
══════════════════════════════════════════════════════════════════════════ */
.home-v4 {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 36px 24px 80px;
  align-items: start;
  min-height: calc(100vh - 54px);
}

/* Greeting */
.home-v4-greeting { margin-bottom: 24px; }
.home-v4-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: .18em;
  color: var(--a); text-transform: uppercase;
  margin-bottom: 8px;
}
.home-v4-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1; letter-spacing: 2px;
  color: var(--ink);
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}
.home-v4-streak {
  margin-top: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 11px; color: var(--warn); letter-spacing: 1px;
}

/* Stats bar */
.home-v4-stats {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 18px;
  background: var(--s1); border: 1px solid var(--ln);
  border-radius: var(--rl); margin-bottom: 16px;
}
body.theme-light .home-v4-stats { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.home-v4-stat { display: flex; flex-direction: column; gap: 2px; }
.home-v4-stat-n { font-family: 'Bebas Neue', sans-serif; font-size: 26px; line-height: 1; color: var(--ink); }
.home-v4-stat-l { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--ink2); letter-spacing: .08em; text-transform: uppercase; }
.home-v4-stat-div { width: 1px; height: 28px; background: var(--ln); flex-shrink: 0; }

/* Quick Play card */
.home-v4-play {
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: var(--rx);
  padding: 20px;
  margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.home-v4-play::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad);
}
body.theme-light .home-v4-play { background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.07); }
.home-v4-play-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px; color: var(--a);
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 12px;
}
.home-v4-play-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin: 14px 0;
}
.home-v4-play-group {}
.home-v4-play-groupLabel {
  font-family: 'DM Mono', monospace;
  font-size: 9px; color: var(--ink2);
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 6px;
}
.home-v4-play-btns { display: flex; gap: 4px; }
.home-v4-play-btn { margin-top: 4px; padding: 13px; font-size: 12px; }

/* Recent games */
.home-v4-recent, .home-v4-empty {
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: var(--rx);
  overflow: hidden;
}
body.theme-light .home-v4-recent, body.theme-light .home-v4-empty {
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.home-v4-empty { padding: 36px 24px; text-align: center; }
.home-v4-section-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ln);
  font-family: 'DM Mono', monospace; font-size: 10px;
  color: var(--ink2); letter-spacing: .1em; text-transform: uppercase;
}
.home-v4-see-all {
  background: none; border: none; color: var(--a);
  font-family: 'DM Mono', monospace; font-size: 10px;
  cursor: pointer; letter-spacing: .05em; transition: opacity .15s;
}
.home-v4-see-all:hover { opacity: .7; }
.home-v4-score-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--ln);
  transition: background var(--ms) var(--smooth);
}
.home-v4-score-row:last-child { border-bottom: none; }
.home-v4-score-row:hover { background: var(--s2); }
body.theme-light .home-v4-score-row:hover { background: var(--s2); }
.home-v4-score-pct {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px; line-height: 1; min-width: 58px;
}
.home-v4-score-info { flex: 1; min-width: 0; }
.home-v4-score-name {
  font-size: 13px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: 'Syne', sans-serif; font-weight: 500;
}
.home-v4-score-meta {
  font-size: 10px; color: var(--ink2);
  font-family: 'DM Mono', monospace; margin-top: 2px;
}
.home-v4-retry {
  background: none; border: 1px solid var(--ln2);
  color: var(--ink2); width: 28px; height: 28px;
  border-radius: 50%; cursor: pointer; font-size: 14px;
  transition: all var(--ms) var(--smooth); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.home-v4-retry:hover { border-color: var(--a); color: var(--a); }

/* RIGHT SIDE */

/* Token bar */
.home-v4-tokens {
  background: var(--s1); border: 1px solid var(--ln);
  border-radius: var(--rl); padding: 14px 16px;
  margin-bottom: 12px;
}
body.theme-light .home-v4-tokens { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.home-v4-tokens-row { display: flex; justify-content: space-between; align-items: center; }
.home-v4-tokens-label {
  font-family: 'DM Mono', monospace; font-size: 10px;
  color: var(--ink2); letter-spacing: .1em; text-transform: uppercase;
}
.home-v4-tokens-count { font-size: 18px; letter-spacing: 2px; }
.home-v4-tokens-sub {
  font-family: 'DM Mono', monospace; font-size: 10px;
  color: var(--ink2); margin-top: 6px; letter-spacing: .04em;
}

/* Shortcuts list */
.home-v4-shortcuts {
  background: var(--s1); border: 1px solid var(--ln);
  border-radius: var(--rx); overflow: hidden;
}
body.theme-light .home-v4-shortcuts { background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.home-v4-shortcut {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 16px;
  background: none; border: none; border-bottom: 1px solid var(--ln);
  cursor: pointer; text-align: left;
  transition: background var(--ms) var(--smooth);
}
.home-v4-shortcut:last-child { border-bottom: none; }
.home-v4-shortcut:hover { background: var(--s2); }
body.theme-light .home-v4-shortcut:hover { background: rgba(0,0,0,.03); }
.home-v4-shortcut:hover .home-v4-sc-icon { transform: scale(1.15); }
.home-v4-sc-icon {
  font-size: 20px; flex-shrink: 0;
  transition: transform var(--ms) var(--spring);
}
.home-v4-sc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.home-v4-sc-label {
  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--ink); letter-spacing: .01em;
}
.home-v4-shortcut:hover .home-v4-sc-label { color: var(--sc, var(--a)); }
.home-v4-sc-desc {
  font-family: 'DM Mono', monospace; font-size: 10px;
  color: var(--ink2); letter-spacing: .03em;
}
.home-v4-sc-arrow {
  font-size: 18px; color: var(--ln2); flex-shrink: 0;
  transition: transform var(--ms) var(--smooth), color var(--ms);
}
.home-v4-shortcut:hover .home-v4-sc-arrow { transform: translateX(3px); color: var(--sc, var(--a)); }


/* ═══════════════════════════════════════════════════════════════════════
   SETTINGS v2 — design system
   Uses its own s2- namespace so it can't conflict with anything else.
   Visual direction: editorial, clean rows, iOS-inspired toggles,
   generous whitespace, sharp typography.
═══════════════════════════════════════════════════════════════════════ */

/* ── Layout ─────────────────────────────────────────────────────────── */
.s2-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 20px 100px;
}
.s2-header { margin-bottom: 24px; }
.s2-title {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ── Tab bar ─────────────────────────────────────────────────────────── */
.s2-tabs {
  display: flex;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.s2-tabs::-webkit-scrollbar { display: none; }
.s2-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 52px;
  padding: 9px 6px;
  background: none;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.s2-tab-icon { font-size: 16px; line-height: 1; }
.s2-tab-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sub);
  text-transform: uppercase;
}
.s2-tab:hover .s2-tab-label { color: var(--text); }
.s2-tab.active { background: var(--card2); }
.s2-tab.active .s2-tab-label { color: var(--a); }

/* ── Section heading ─────────────────────────────────────────────────── */
.s2-sec {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sub);
  text-transform: uppercase;
  margin: 24px 0 8px;
}
.s2-sec:first-child { margin-top: 0; }

/* ── Card (group of rows) ────────────────────────────────────────────── */
.s2-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
}
.s2-card > .s2-row:not(:last-child),
.s2-card > label.s2-row:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

/* ── Row ─────────────────────────────────────────────────────────────── */
.s2-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  gap: 14px;
}
.s2-toggle-row { cursor: default; }
.s2-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.s2-row-label {
  font-size: 14px;
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-weight: 500;
  line-height: 1.3;
}
.s2-row-desc {
  font-size: 11px;
  color: var(--sub);
  line-height: 1.4;
  margin-top: 1px;
}

/* ── iOS-style toggle ────────────────────────────────────────────────── */
.s2-toggle {
  position: relative;
  width: 46px;
  height: 26px;
  background: var(--border2);
  border: none;
  border-radius: 99px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
  padding: 0;
}
.s2-toggle.on { background: var(--a); }
body.theme-light .s2-toggle { background: rgba(0,0,0,.15); }
body.theme-light .s2-toggle.on { background: var(--a); }
.s2-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s cubic-bezier(.175,.885,.32,1.275);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  display: block;
}
.s2-toggle.on .s2-toggle-knob { transform: translateX(20px); }

/* ── Chips (multi-select) ────────────────────────────────────────────── */
.s2-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.s2-chip {
  padding: 7px 13px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--sub);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 7px;
  transition: all .14s;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.s2-chip:hover { border-color: var(--a); color: var(--text); }
.s2-chip.on {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 10px var(--glow);
}
body.theme-light .s2-chip.on { color: #fff; }

/* ── Theme grid ──────────────────────────────────────────────────────── */
.s2-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.s2-theme-cell {
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  padding: 0;
  transition: transform .12s;
}
.s2-theme-cell:hover { transform: translateY(-2px); }
.s2-theme-swatch {
  width: 100%;
  aspect-ratio: 1.4;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  transition: border-color .15s;
}
.s2-theme-cell.active .s2-theme-swatch {
  border-color: var(--a);
  box-shadow: 0 0 0 2px var(--glow);
}
.s2-theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.s2-theme-lock {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 6px;
}
.s2-theme-name {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--sub);
  margin-top: 5px;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.s2-theme-xp {
  display: block;
  font-size: 8px;
  color: var(--sub);
  opacity: .6;
}

/* ── AI presets ──────────────────────────────────────────────────────── */
.s2-preset-btn {
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.2);
  color: var(--a);
  padding: 5px 10px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  cursor: pointer;
  border-radius: 5px;
  letter-spacing: 0.04em;
  transition: all .14s;
}
.s2-preset-btn:hover { background: rgba(99,102,241,.16); }

/* ── Inputs ──────────────────────────────────────────────────────────── */
.s2-input-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--sub);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.s2-input {
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 9px 12px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  border-radius: 8px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.s2-input:focus {
  border-color: var(--a);
  box-shadow: 0 0 0 3px var(--glow);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.s2-btn-primary {
  background: var(--grad);
  color: #fff;
  border: none;
  padding: 10px 18px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  border-radius: 8px;
  transition: all .15s;
  box-shadow: 0 2px 10px var(--glow);
}
.s2-btn-primary:hover { opacity: .88; transform: translateY(-1px); }
.s2-btn-ghost {
  background: transparent;
  color: var(--sub);
  border: 1px solid var(--border2);
  padding: 8px 14px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all .14s;
  white-space: nowrap;
}
.s2-btn-ghost:hover { border-color: var(--a); color: var(--a); }
.s2-full-btn { width: 100%; text-align: center; }
.s2-btn-danger {
  background: rgba(239,68,68,.1);
  border: 1px solid var(--r);
  color: var(--r);
  padding: 9px 16px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  transition: all .14s;
}
.s2-btn-danger:hover { background: rgba(239,68,68,.2); }

/* ── Profile card ────────────────────────────────────────────────────── */
.s2-profile-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
}
.s2-avatar {
  width: 48px;
  height: 48px;
  background: var(--grad);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', serif;
  font-size: 24px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 16px var(--glow);
}

/* ── Stats row ───────────────────────────────────────────────────────── */
.s2-stats-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.s2-stat {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
}
.s2-stat-n {
  font-family: 'Bebas Neue', serif;
  font-size: 30px;
  line-height: 1;
  color: var(--text);
  margin-bottom: 3px;
}
.s2-stat-l {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--sub);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Character grid ──────────────────────────────────────────────────── */
.s2-char-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.s2-char {
  padding: 14px 8px;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: all .14s;
}
.s2-char:hover { border-color: var(--a); background: var(--card2); }
.s2-char.active {
  border-color: var(--p);
  background: rgba(139,92,246,.1);
}

/* ── Danger card ─────────────────────────────────────────────────────── */
.s2-danger-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--r);
  border-radius: 0 0 10px 10px;
  padding: 16px;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media(max-width:600px){
  .s2-wrap { padding: 20px 14px 80px; }
  .s2-title { font-size: 22px; }
  .s2-theme-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
  .s2-char-grid { grid-template-columns: repeat(4, 1fr); }
  .s2-stats-row { gap: 6px; }
  .s2-tab-label { font-size: 8px; }
  .s2-chip { font-size: 10px; padding: 6px 10px; }
  .s2-row-label { font-size: 13px; }
}


/* ── GLOBAL MOBILE BASE ─────────────────────────────────────────────── */
@media(max-width:768px){
  /* Prevent horizontal scroll everywhere */
  html,body{overflow-x:hidden;max-width:100vw}
  *{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}

  /* Better touch scrolling */
  .wrap,.game-screen,[style*="overflow-y"]{-webkit-overflow-scrolling:touch}

  /* Remove hover states on touch — they get stuck */
  @media(hover:none){
    .oBtn:hover,.tfBtn:hover,.btn:hover,.btnG:hover,.card:hover{transform:none!important;box-shadow:none!important}
  }
}

/* ══ PHONE (≤600px) ════════════════════════════════════════════════════ */
@media(max-width:600px){

  /* ── NAV ──────────────────────────────────────────────────────────── */
  #nav{
    padding:0;
    height:auto;
    flex-direction:column;
    position:fixed;top:0;left:0;right:0;
    z-index:9000;
  }

  /* Top row: logo + actions */
  #nav > .logo,#nav > .nav-actions{
    display:flex;align-items:center;
  }
  .nav-top-row{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:0 14px;height:50px;flex-shrink:0;
  }

  /* Tab bar sits below logo row, full width, scrollable, hidden scrollbar */
  .ntabs{
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
    padding:0 4px 0 4px;
    border-top:1px solid var(--border);
    gap:0;
    height:38px;
    flex-shrink:0;
  }
  .ntabs::-webkit-scrollbar{display:none}
  .ntab{
    height:38px;padding:0 14px;font-size:10px;letter-spacing:0.04em;
    flex-shrink:0;border-radius:0;
    white-space:nowrap;
  }
  .ntab.on{border-bottom:2px solid var(--o)}

  /* Logo smaller */
  .logo-q,.logo-h{font-size:16px!important}
  .logo{gap:0}

  /* Nav actions: smaller icons */
  .nav-actions{gap:6px}
  .nav-icon-btn{width:26px;height:26px;font-size:12px}
  .nav-dot{width:7px;height:7px}

  /* Push content below two-row nav (50px top + 38px tabs = 88px) */
  #app{margin-top:88px!important}

  /* ── LAYOUT ───────────────────────────────────────────────────────── */
  .wrap{padding:14px 12px;max-width:100%}
  .game-screen{padding:12px 10px;max-width:100%}

  /* ── BUTTONS ──────────────────────────────────────────────────────── */
  .btn{
    padding:14px 18px;font-size:12px;letter-spacing:1.5px;
    min-height:48px;/* Apple HIG: 44px min tap target */
    display:flex;align-items:center;justify-content:center;
  }
  .btn-sm{padding:10px 14px;font-size:11px;min-height:40px}
  .btnG{padding:12px 16px;font-size:11px;min-height:44px}

  /* Full-width button stacks */
  .btn-row-mobile{display:flex;flex-direction:column;gap:8px}
  .btn-row-mobile .btn,.btn-row-mobile .btnG{width:100%}

  /* ── CARDS ────────────────────────────────────────────────────────── */
  .card{padding:14px 12px;border-radius:8px}

  /* ── QUIZ ANSWER BUTTONS ──────────────────────────────────────────── */
  .oBtn{
    padding:16px 14px;font-size:14px;
    min-height:56px;/* Bigger touch targets for answers */
    border-radius:8px;line-height:1.4;
  }
  .tfBtn{padding:22px;font-size:32px;min-height:80px;border-radius:8px}

  /* Answer grid: always single column on mobile */
  #mcg,#grg,#bOpts,#bossBtns,#lq [style*="grid"]{
    display:flex!important;flex-direction:column!important;gap:10px!important;
  }

  /* ── GAMES PAGE ───────────────────────────────────────────────────── */
  .games-shell{
    display:flex!important;flex-direction:column!important;
    padding:14px 12px!important;gap:16px!important;
    grid-template-columns:none!important;
  }
  .games-side{position:static!important;order:2}
  .games-panel{padding:16px}
  .games-grid{
    grid-template-columns:repeat(2,1fr)!important;gap:8px!important;
  }
  .game-card{padding:14px 12px}
  .game-card-icon{font-size:24px;margin-bottom:8px}
  .game-card-name{font-size:12px}
  .game-card-desc{font-size:10px}

  /* ── QUIZ LAUNCH PANEL ────────────────────────────────────────────── */
  .games-panel .quiz-pick-btn{
    font-size:12px;padding:11px 12px;min-height:44px;
  }

  /* ── SOCIAL / HOME PAGE ───────────────────────────────────────────── */
  .social-card{padding:14px 12px;border-radius:10px}
  .social-card-title{font-size:14px}
  .social-card-desc{font-size:11px}

  /* Home grid: 2 columns */
  [style*="grid-template-columns: 1fr 1fr"][style*="social-card"],
  .social-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}

  /* ── SETTINGS ─────────────────────────────────────────────────────── */
  .stheme-grid{grid-template-columns:repeat(3,1fr)!important}
  .stchar-grid{grid-template-columns:repeat(3,1fr)!important}
  .stab{min-width:50px!important;padding:7px 4px!important;font-size:9px!important}
  .sprofile-card{flex-direction:column;align-items:flex-start;gap:10px}
  .srow{flex-wrap:wrap;gap:8px}
  .stabs{overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .stabs::-webkit-scrollbar{display:none}

  /* Settings input full width */
  .srow input,.srow select{min-width:0;flex:1}

  /* ── QUIZ GENERATOR ───────────────────────────────────────────────── */
  #aiTopic,#aiSubj{width:100%!important;box-sizing:border-box}
  .gen-grid,[style*="display:grid"][style*="aiTopic"]{
    display:flex!important;flex-direction:column!important;gap:10px!important;
  }
  .tier-btn{padding:10px 8px;font-size:10px}

  /* ── OVERLAYS & MODALS ────────────────────────────────────────────── */
  /* All modals: full screen on phone */
  [style*="max-width:560px"],[style*="max-width:580px"],[style*="max-width:480px"],
  [style*="max-width:420px"],[style*="max-width:440px"],[style*="max-width:460px"]{
    max-width:100%!important;width:100%!important;
    margin:0!important;border-radius:0!important;
  }
  /* But keep centered small dialogs */
  [style*="max-width:380px"],[style*="max-width:360px"],[style*="max-width:340px"]{
    max-width:calc(100vw - 24px)!important;
  }

  /* ── DUNGEON ──────────────────────────────────────────────────────── */
  .dungeon-wrap{flex-direction:column!important}
  .dungeon-sidebar{
    width:100%!important;max-width:100%!important;
    flex-direction:row!important;flex-wrap:wrap!important;
    padding:8px 12px!important;gap:8px!important;
    border-right:none!important;border-bottom:1px solid var(--border)!important;
  }
  .dpad{
    grid-template-columns:repeat(3,44px)!important;
    grid-template-rows:repeat(3,44px)!important;
    margin:8px auto!important;
  }
  .dpad-btn{font-size:18px}

  /* ── SCORES / LEADERBOARD ─────────────────────────────────────────── */
  .hpbar{min-width:50px}
  [style*="grid-template-columns: repeat(3"]{
    grid-template-columns:repeat(2,1fr)!important;
  }

  /* ── CHAT ─────────────────────────────────────────────────────────── */
  /* Chat: stack member list above messages on mobile */
  [style*="height:520px"][style*="display:flex"][style*="gap:0"]{
    flex-direction:column!important;height:auto!important;
  }
  [style*="width:200px;flex-shrink:0;border-right"]{
    width:100%!important;max-height:120px!important;
    border-right:none!important;border-bottom:1px solid var(--border)!important;
  }
  #chatMemberList{flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;padding:4px!important}
  #chatMemberList button{min-width:80px;flex-shrink:0}

  /* ── AUTH MODAL ───────────────────────────────────────────────────── */
  .auth-card{padding:20px 16px!important;border-radius:0!important;
    min-height:100vh!important;border:none!important}
  .auth-ovl{align-items:flex-start!important}
  .auth-google-btn{min-height:48px;font-size:12px}
  .auth-input{font-size:16px!important;/* Prevent iOS zoom on focus */min-height:48px}
  .auth-submit{min-height:52px;font-size:13px}

  /* ── LOGIN MODAL: full screen ─────────────────────────────────────── */
  #userModal>div{
    padding:20px 16px!important;max-width:100%!important;
    min-height:100vh;border-radius:0!important;
  }

  /* ── QUIZ RESULTS ─────────────────────────────────────────────────── */
  [style*="grid-template-columns:repeat(3,1fr)"][style*="stat"]{
    grid-template-columns:repeat(2,1fr)!important;
  }

  /* ── ARENA ────────────────────────────────────────────────────────── */
  #arenaBoard{
    width:100%!important;position:static!important;
    flex-direction:row!important;flex-wrap:wrap!important;
    border-right:none!important;border-bottom:1px solid #ec489944!important;
    padding:8px!important;gap:6px!important;max-height:none!important;
  }
  #arenaQArea{margin-top:8px!important}

  /* ── GRAPH MODAL (quiz generator) ─────────────────────────────────── */
  #qsGraphModal>div{
    max-height:92vh!important;border-radius:12px 12px 0 0!important;
    position:fixed!important;bottom:0!important;left:0!important;right:0!important;
    width:100%!important;max-width:100%!important;
  }

  /* ── QUIZSTAR CHAT ────────────────────────────────────────────────── */
  #quizstarPanel,[id*="quizstarPan"]{
    width:100vw!important;right:0!important;left:0!important;
    border-radius:0!important;height:85vh!important;bottom:0!important;
    position:fixed!important;
  }

  /* ── SCORE / XP BAR ──────────────────────────────────────────────── */
  #scoreBar,[id*="xpBar"]{font-size:11px!important}

  /* ── MISC TEXT SIZING ─────────────────────────────────────────────── */
  h1{font-size:clamp(24px,8vw,48px)!important}
  h2{font-size:clamp(18px,5vw,32px)!important}

  /* ── LOADING SCREEN ───────────────────────────────────────────────── */
  #qp-loader span{font-size:36px!important}
  #qp-loader>div:last-of-type{font-size:9px!important}

  /* Prevent game overlays from going off-screen */
  .battle-overlay,.battle-panel{
    padding:12px!important;
    overflow-y:auto!important;
    max-height:100vh!important;
  }
  .battle-panel{border-radius:0!important}

  /* Stack two-column stat grids */
  [style*="display:grid;grid-template-columns:1fr 1fr"]:not(#mcg):not(#grg){
    grid-template-columns:1fr!important;
  }

  /* Combo/streak counter: smaller */
  [style*="font-size:19px"][style*="comboIn"]{font-size:15px!important}

  /* Score display: smaller */
  [id*="score"],[class*="score"]{font-size:clamp(12px,3.5vw,18px)}

  /* Prevent fixed-width panels from overflowing */
  [style*="width:340px"],[style*="width:360px"],[style*="width:380px"]{
    width:100%!important;
  }
}

/* ══ SMALL PHONE (≤400px) ══════════════════════════════════════════════ */
@media(max-width:400px){
  .ntab{padding:0 10px;font-size:9px;letter-spacing:0}
  .logo-q,.logo-h{font-size:14px!important}
  .wrap{padding:10px 8px}
  .stheme-grid{grid-template-columns:repeat(2,1fr)!important}
  .games-grid{grid-template-columns:1fr 1fr!important}
  .oBtn{font-size:13px;padding:14px 10px}
  .tfBtn{font-size:28px;padding:20px}
  .auth-input{font-size:16px!important}

  /* Single column for very small screens */
  [style*="grid-template-columns:1fr 1fr"]:not(#mcg):not(#grg){
    grid-template-columns:1fr!important;
  }

  /* Boss battle: compress layout */
  #bossStage{padding:10px!important}
}

/* ══ LANDSCAPE PHONE ════════════════════════════════════════════════════ */
@media(max-width:768px) and (orientation:landscape) and (max-height:500px){
  #nav{flex-direction:row!important;height:48px!important}
  .ntabs{border-top:none!important;height:100%!important}
  .ntab{height:100%!important;font-size:9px!important}
  #app{margin-top:48px!important}

  /* Compact game screen in landscape */
  .game-screen{padding:8px 12px!important}
  .oBtn{padding:10px 12px!important;min-height:40px!important}
  .tfBtn{padding:14px!important;font-size:22px!important;min-height:56px!important}
}

/* ══ TOUCH DEVICE IMPROVEMENTS (any size) ═══════════════════════════════ */
@media(hover:none) and (pointer:coarse){
  /* All interactive elements need minimum touch target */
  button,input[type=range]{min-height:44px}
  .oBtn,.tfBtn,.btn,.btnG{cursor:default}

  /* Larger range slider thumbs for touch */
  input[type=range]::-webkit-slider-thumb{width:22px!important;height:22px!important}
  input[type=range]::-moz-range-thumb{width:22px!important;height:22px!important}

  /* Prevent text selection on tap */
  .oBtn,.tfBtn,.btn,.btnG,.game-card,.social-card,.card{
    -webkit-user-select:none;user-select:none;
  }

  /* Remove outline (focus rings look bad on touch) */
  button:focus,input:focus,select:focus{outline:none}
  button:focus-visible,input:focus-visible{outline:2px solid var(--o);outline-offset:2px}
}





/* — Settings — */
      /* Settings layout */
      .settings-wrap{max-width:700px;margin:0 auto;padding:0 0 60px}
      .settings-layout{display:block}
      .stabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px;margin-bottom:24px;border-bottom:1px solid var(--border)}
      .stabs::-webkit-scrollbar{display:none}
      .stab{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 16px;background:none;border:none;border-bottom:2px solid transparent;color:var(--sub);font-family:'Syne',sans-serif;font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:var(--t);white-space:nowrap;margin-bottom:-1px}
      .stab .stab-icon{font-size:18px;line-height:1}
      .stab:hover{color:var(--text)}
      .stab.active{color:var(--o);border-bottom-color:var(--o)}
      /* Section title */
      .ssec{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin:24px 0 10px;display:flex;align-items:center;gap:8px}
      .ssec:first-child{margin-top:0}
      /* Rows */
      .sgroup{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:8px}
      .srow{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);gap:12px}
      .srow:last-child{border-bottom:none}
      .srow-info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
      .srow-label{font-size:13.5px;color:var(--text);font-family:'Syne',sans-serif;font-weight:500}
      .srow-desc{font-size:11px;color:var(--sub);line-height:1.4}
      /* Toggle */
      .stog{flex-shrink:0;background:var(--border2);color:var(--sub);border:none;padding:6px 14px;cursor:pointer;font-family:'Syne',sans-serif;font-size:11px;font-weight:600;border-radius:99px;transition:var(--t);min-width:52px}
      .stog:hover{background:var(--card2);color:var(--text)}
      .stog-on{background:var(--o)!important;color:#fff!important}
      /* Chips */
      .schips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
      .schip{padding:8px 14px;border:1px solid var(--border2);background:transparent;color:var(--sub);font-family:'Syne',sans-serif;font-size:12px;font-weight:500;cursor:pointer;border-radius:7px;transition:var(--t);white-space:nowrap}
      .schip:hover{border-color:var(--o);color:var(--text)}
      .schip-on{border-color:var(--o)!important;background:rgba(37,99,235,.1)!important;color:var(--o)!important;font-weight:700!important}
      /* Misc */
      .sreset{background:none;border:1px solid var(--border2);color:var(--muted);padding:5px 10px;font-family:'Syne',sans-serif;font-size:10px;cursor:pointer;border-radius:5px}
      .sreset:hover{border-color:var(--sub);color:var(--text)}
      .scard-stat{background:var(--card);border:1px solid var(--border);padding:18px;text-align:center;border-radius:10px;flex:1}
      .scard-stat .sv{font-size:28px;font-weight:700;font-family:'Bebas Neue',serif;letter-spacing:1px}
      .scard-stat .sk{font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--sub);margin-top:4px;font-family:'Syne',sans-serif;font-weight:600}
      .sdanger{background:var(--card);border:1px solid var(--border);border-top:3px solid var(--r);padding:18px;border-radius:0 0 8px 8px}
      .sinfobox{background:rgba(139,92,246,.06);border:1px solid rgba(139,92,246,.2);border-left:3px solid #8b5cf6;padding:14px 16px;border-radius:0 8px 8px 0;font-size:12.5px;color:var(--sub);line-height:1.7;margin-bottom:12px}
      .sslider-row{background:var(--card);border:1px solid var(--border);padding:16px 18px;border-radius:10px;display:flex;align-items:center;gap:12px;margin-bottom:8px}
      .stheme-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:8px}
      .stheme-cell{cursor:pointer;text-align:center}
      .stheme-swatch{height:48px;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',serif;font-size:15px;border-radius:8px 8px 0 0;transition:transform .12s}
      .stheme-cell:hover .stheme-swatch{transform:scale(1.06)}
      .stheme-name{font-size:10px;letter-spacing:0.04em;margin-top:5px;font-family:'Syne',sans-serif;font-weight:500}
      .sprofile-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
      .stchar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
      .stchar{padding:14px 8px;border:1px solid var(--border2);background:transparent;cursor:pointer;border-radius:8px;text-align:center;transition:var(--t)}
      .stchar:hover{border-color:var(--o);background:rgba(37,99,235,.05)}
      .stchar.active{border-color:var(--p);background:rgba(139,92,246,.08)}
      .stchar .tc-emoji{font-size:26px;margin-bottom:6px}
      .stchar .tc-name{font-size:10px;color:var(--sub);font-family:'Syne',sans-serif;font-weight:600;letter-spacing:0.03em}

/* Touch action for game areas */
.oBtn,.tfBtn,.btn,.btnG{touch-action:manipulation}
canvas{touch-action:none}
.dpad-btn{touch-action:manipulation}
/* Nav desktop: single row */
.nav-top-row{display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 16px;width:100%;flex:1}
@media(min-width:601px){
  #nav{flex-direction:row!important;height:60px!important;align-items:center}
  .ntabs{border-top:none!important;height:100%!important}
  .ntab{height:100%!important}
  #app{margin-top:60px!important}
  #nav .nav-top-row{padding:0 12px 0 0}
}



/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE + EXTRA THEMES
═══════════════════════════════════════════════════════════════════════ */

/* LIGHT — clean, warm white. Feels like a premium product. */
body.theme-light {
  --bg: #f7f6f3;
  --card: #ffffff;
  --card2: #f0efe9;
  --card-hover: #ebebeb;
  --border: rgba(0,0,0,.09);
  --border2: rgba(0,0,0,.15);
  --border-active: rgba(99,102,241,.5);
  --text: #1a1a2e;
  --sub: #6b6b80;
  --muted: rgba(0,0,0,.07);
  --o: #6366f1;
  --o2: #8b5cf6;
  --o-grad: linear-gradient(135deg,#6366f1,#8b5cf6);
  --glow: rgba(99,102,241,.2);
  --glow2: rgba(139,92,246,.15);
  --g: #16a34a;
  --r: #dc2626;
  --b: #2563eb;
  --y: #d97706;
  --pk: #db2777;
  --in: #6366f1;
  --ac: var(--o);
}
body.theme-light #nav {
  background: rgba(247,246,243,.92);
  border-bottom: 1px solid var(--border);
}
body.theme-light #nav::after {
  background: linear-gradient(90deg, transparent, var(--o), var(--o2), transparent);
  opacity: .3;
}
body.theme-light .ntab { color: #6b6b80; }
body.theme-light .ntab:hover { background: rgba(0,0,0,.06); color: var(--text); }
body.theme-light .ntab.on {
  background: linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.09));
  border: 1px solid rgba(99,102,241,.3);
  color: #6366f1;
  box-shadow: none;
}
body.theme-light .card { box-shadow: 0 1px 4px rgba(0,0,0,.08); }
body.theme-light .card::before { background: linear-gradient(90deg,transparent,rgba(0,0,0,.04),transparent); }
body.theme-light .oBtn {
  background: #fff;
  border-color: rgba(0,0,0,.12);
  color: #6b6b80;
}
body.theme-light .oBtn:hover:not(:disabled) {
  border-color: var(--o);
  color: var(--text);
  background: rgba(99,102,241,.04);
  box-shadow: inset 3px 0 0 var(--o);
}
body.theme-light .qp-select {
  background: #fff;
  border-color: rgba(0,0,0,.15);
  color: var(--text);
}
body.theme-light .auth-card {
  box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 0 0 1px rgba(99,102,241,.1);
}
body.theme-light .auth-input { background: #f7f6f3; }
body.theme-light .sgroup { box-shadow: 0 1px 3px rgba(0,0,0,.06); }
body.theme-light .stog { background: rgba(0,0,0,.1); color: #888; }
body.theme-light .schip { border-color: rgba(0,0,0,.15); color: var(--text); }
body.theme-light input, body.theme-light textarea, body.theme-light select {
  background: #fff;
  border-color: rgba(0,0,0,.15);
  color: #111827 !important;
  caret-color: #111827;
}
body.theme-light .size-btn { background: #fff; border-color: rgba(0,0,0,.15); color: #888; }
body.theme-light .size-btn.active { background: var(--o-grad); border-color: transparent; color: #fff; }
body.theme-light .hp-cnt-display { background: #fff; border-color: rgba(0,0,0,.15); }
body.theme-light .game-card { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
body.theme-light .game-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(99,102,241,.2); }
body.theme-light .score-tab { background: transparent; }
body.theme-light .qp-loader { background: #f7f6f3; }
body.theme-light .qp-loader-word { color: #1a1a2e; }
body.theme-light .notif-toast { background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.15); }
body.theme-light .tfBtn { background: #fff; border-color: rgba(0,0,0,.12); color: #888; }
body.theme-light .btnG { border-color: rgba(0,0,0,.15); color: var(--text); }
body.theme-light .btnG:hover { border-color: var(--o); color: var(--o); background: rgba(99,102,241,.06); }

/* SLATE — desaturated dark blue-grey. Professional, minimal. */
body.theme-slate {
  --bg: #0d1117;
  --card: #161b22;
  --card2: #21262d;
  --card-hover: #252b33;
  --border: rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.14);
  --text: #e6edf3;
  --sub: #7d8590;
  --muted: rgba(255,255,255,.06);
  --o: #58a6ff;
  --o2: #79c0ff;
  --o-grad: linear-gradient(135deg,#1f6feb,#58a6ff);
  --glow: rgba(88,166,255,.25);
  --glow2: rgba(121,192,255,.15);
  --g: #3fb950;
  --r: #f85149;
  --b: #58a6ff;
  --y: #d29922;
  --pk: #f778ba;
  --in: #58a6ff;
  --ac: var(--o);
}

/* ROSE — warm dark pink. Bold, editorial. */
body.theme-rose {
  --bg: #0f0507;
  --card: #170810;
  --card2: #1e0b16;
  --card-hover: #22101b;
  --border: rgba(244,114,182,.08);
  --border2: rgba(244,114,182,.16);
  --text: #fce7f3;
  --sub: #b06a8a;
  --muted: rgba(244,114,182,.05);
  --o: #f472b6;
  --o2: #fb7185;
  --o-grad: linear-gradient(135deg,#f472b6,#fb7185);
  --glow: rgba(244,114,182,.35);
  --glow2: rgba(251,113,133,.25);
  --g: #34d399;
  --r: #f87171;
  --b: #60a5fa;
  --y: #fbbf24;
  --in: #f472b6;
  --ac: var(--o);
}


/* ═══════════════════════════════════════════════════════════════════════
   SETTINGS v2 — design system
   Uses its own s2- namespace so it can't conflict with anything else.
   Visual direction: editorial, clean rows, iOS-inspired toggles,
   generous whitespace, sharp typography.
═══════════════════════════════════════════════════════════════════════ */

/* ── Layout ─────────────────────────────────────────────────────────── */
.s2-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 20px 100px;
}
.s2-header { margin-bottom: 24px; }
.s2-title {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ── Tab bar ─────────────────────────────────────────────────────────── */
.s2-tabs {
  display: flex;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.s2-tabs::-webkit-scrollbar { display: none; }
.s2-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 52px;
  padding: 9px 6px;
  background: none;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.s2-tab-icon { font-size: 16px; line-height: 1; }
.s2-tab-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sub);
  text-transform: uppercase;
}
.s2-tab:hover .s2-tab-label { color: var(--text); }
.s2-tab.active { background: var(--card2); }
.s2-tab.active .s2-tab-label { color: var(--o); }

/* ── Section heading ─────────────────────────────────────────────────── */
.s2-sec {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sub);
  text-transform: uppercase;
  margin: 24px 0 8px;
}
.s2-sec:first-child { margin-top: 0; }

/* ── Card (group of rows) ────────────────────────────────────────────── */
.s2-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
}
.s2-card > .s2-row:not(:last-child),
.s2-card > label.s2-row:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

/* ── Row ─────────────────────────────────────────────────────────────── */
.s2-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  gap: 14px;
}
.s2-toggle-row { cursor: default; }
.s2-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.s2-row-label {
  font-size: 14px;
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-weight: 500;
  line-height: 1.3;
}
.s2-row-desc {
  font-size: 11px;
  color: var(--sub);
  line-height: 1.4;
  margin-top: 1px;
}

/* ── iOS-style toggle ────────────────────────────────────────────────── */
.s2-toggle {
  position: relative;
  width: 46px;
  height: 26px;
  background: var(--border2);
  border: none;
  border-radius: 99px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
  padding: 0;
}
.s2-toggle.on { background: var(--o); }
body.theme-light .s2-toggle { background: rgba(0,0,0,.15); }
body.theme-light .s2-toggle.on { background: var(--o); }
.s2-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s cubic-bezier(.175,.885,.32,1.275);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  display: block;
}
.s2-toggle.on .s2-toggle-knob { transform: translateX(20px); }

/* ── Chips (multi-select) ────────────────────────────────────────────── */
.s2-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.s2-chip {
  padding: 7px 13px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--sub);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 7px;
  transition: all .14s;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.s2-chip:hover { border-color: var(--o); color: var(--text); }
.s2-chip.on {
  background: var(--o-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 10px var(--glow);
}
body.theme-light .s2-chip.on { color: #fff; }

/* ── Theme grid ──────────────────────────────────────────────────────── */
.s2-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.s2-theme-cell {
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  padding: 0;
  transition: transform .12s;
}
.s2-theme-cell:hover { transform: translateY(-2px); }
.s2-theme-swatch {
  width: 100%;
  aspect-ratio: 1.4;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  transition: border-color .15s;
}
.s2-theme-cell.active .s2-theme-swatch {
  border-color: var(--o);
  box-shadow: 0 0 0 2px var(--glow);
}
.s2-theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.s2-theme-lock {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 6px;
}
.s2-theme-name {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--sub);
  margin-top: 5px;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.s2-theme-xp {
  display: block;
  font-size: 8px;
  color: var(--sub);
  opacity: .6;
}

/* ── AI presets ──────────────────────────────────────────────────────── */
.s2-preset-btn {
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.2);
  color: var(--o);
  padding: 5px 10px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  cursor: pointer;
  border-radius: 5px;
  letter-spacing: 0.04em;
  transition: all .14s;
}
.s2-preset-btn:hover { background: rgba(99,102,241,.16); }

/* ── Inputs ──────────────────────────────────────────────────────────── */
.s2-input-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--sub);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.s2-input {
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 9px 12px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  border-radius: 8px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.s2-input:focus {
  border-color: var(--o);
  box-shadow: 0 0 0 3px var(--glow);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.s2-btn-primary {
  background: var(--o-grad);
  color: #fff;
  border: none;
  padding: 10px 18px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  border-radius: 8px;
  transition: all .15s;
  box-shadow: 0 2px 10px var(--glow);
}
.s2-btn-primary:hover { opacity: .88; transform: translateY(-1px); }
.s2-btn-ghost {
  background: transparent;
  color: var(--sub);
  border: 1px solid var(--border2);
  padding: 8px 14px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all .14s;
  white-space: nowrap;
}
.s2-btn-ghost:hover { border-color: var(--o); color: var(--o); }
.s2-full-btn { width: 100%; text-align: center; }
.s2-btn-danger {
  background: rgba(239,68,68,.1);
  border: 1px solid var(--r);
  color: var(--r);
  padding: 9px 16px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  transition: all .14s;
}
.s2-btn-danger:hover { background: rgba(239,68,68,.2); }

/* ── Profile card ────────────────────────────────────────────────────── */
.s2-profile-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
}
.s2-avatar {
  width: 48px;
  height: 48px;
  background: var(--o-grad);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', serif;
  font-size: 24px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 16px var(--glow);
}

/* ── Stats row ───────────────────────────────────────────────────────── */
.s2-stats-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.s2-stat {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
}
.s2-stat-n {
  font-family: 'Bebas Neue', serif;
  font-size: 30px;
  line-height: 1;
  color: var(--text);
  margin-bottom: 3px;
}
.s2-stat-l {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--sub);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Character grid ──────────────────────────────────────────────────── */
.s2-char-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.s2-char {
  padding: 14px 8px;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: all .14s;
}
.s2-char:hover { border-color: var(--o); background: var(--card2); }
.s2-char.active {
  border-color: var(--p);
  background: rgba(139,92,246,.1);
}

/* ── Danger card ─────────────────────────────────────────────────────── */
.s2-danger-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--r);
  border-radius: 0 0 10px 10px;
  padding: 16px;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media(max-width:600px){
  .s2-wrap { padding: 20px 14px 80px; }
  .s2-title { font-size: 22px; }
  .s2-theme-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
  .s2-char-grid { grid-template-columns: repeat(4, 1fr); }
  .s2-stats-row { gap: 6px; }
  .s2-tab-label { font-size: 8px; }
  .s2-chip { font-size: 10px; padding: 6px 10px; }
  .s2-row-label { font-size: 13px; }
}




body.theme-dark{
  --bg:#eee3d2;
  --s1:rgba(255,250,243,.82);
  --s2:#f7efe2;
  --s3:#ecdfcf;
  --s4:#e2d1bc;
  --ln:rgba(47,35,26,.08);
  --ln2:rgba(47,35,26,.15);
  --ln3:rgba(47,35,26,.04);
  --ink:#1d2940;
  --ink2:#6d6a66;
  --ink3:rgba(29,41,64,.06);
  --a:#d55d37;
  --a2:#f0a36b;
  --adim:rgba(213,93,55,.1);
  --aglow:rgba(213,93,55,.22);
  --grad:linear-gradient(135deg,#d55d37 0%,#ef9c5f 100%);
  --ok:#229f7f;
  --err:#d9534f;
  --warn:#d58c2f;
  --info:#3d7db6;
  --pink:#d86aa8;
  --surface-soft:rgba(255,251,246,.74);
  --surface-strong:rgba(255,250,243,.92);
  --paper-shadow:0 20px 60px rgba(76,49,28,.1);
  /* ── Legacy aliases — explicit so they don't chain through :root ── */
  --card:rgba(255,250,243,.82);
  --card2:#f7efe2;
  --card-hover:#ecdfcf;
  --border:rgba(47,35,26,.08);
  --border2:rgba(47,35,26,.15);
  --border-active:rgba(213,93,55,.4);
  --text:#1d2940;
  --sub:#6d6a66;
  --muted:rgba(29,41,64,.38);
  --o:#d55d37;
  --o2:#f0a36b;
  --o-grad:linear-gradient(135deg,#d55d37 0%,#ef9c5f 100%);
  --glow:rgba(213,93,55,.22);
  --g:#229f7f;
  --r:#d9534f;
  --b:#3d7db6;
  --y:#d58c2f;
  --pk:#d86aa8;
  --accent:#d55d37;
  --accent-dim:rgba(213,93,55,.1);
  --accent-glow:rgba(213,93,55,.22);
}
body.theme-light{
  --bg:#f7f1e7;
  --s1:rgba(255,255,255,.92);
  --s2:#fbf7f0;
  --s3:#efe6d9;
  --s4:#e6dac7;
  --ln:rgba(39,31,24,.08);
  --ln2:rgba(39,31,24,.14);
  --ink:#1b2334;
  --ink2:#6f6a61;
  --a:#cb5630;
  --a2:#f2a46e;
  --adim:rgba(203,86,48,.08);
  --aglow:rgba(203,86,48,.18);
  --grad:linear-gradient(135deg,#cb5630 0%,#f2a46e 100%);
  --surface-soft:rgba(255,255,255,.84);
  --surface-strong:rgba(255,255,255,.96);
  --paper-shadow:0 18px 52px rgba(64,44,29,.08);
  --card:rgba(255,255,255,.92);
  --card2:#fbf7f0;
  --card-hover:#efe6d9;
  --border:rgba(39,31,24,.08);
  --border2:rgba(39,31,24,.14);
  --border-active:rgba(203,86,48,.4);
  --text:#1b2334;
  --sub:#6f6a61;
  --muted:rgba(27,35,52,.35);
  --o:#cb5630;
  --o2:#f2a46e;
  --o-grad:linear-gradient(135deg,#cb5630 0%,#f2a46e 100%);
  --glow:rgba(203,86,48,.18);
  --g:#229f7f;
  --r:#c0392b;
  --b:#2980b9;
  --y:#c87f2a;
  --pk:#c2698e;
  --accent:#cb5630;
  --accent-dim:rgba(203,86,48,.08);
  --accent-glow:rgba(203,86,48,.18);
}
body.theme-quizhub{
  --bg:#090604;
  --s1:rgba(18,13,10,.84);
  --s2:#14100d;
  --s3:#211912;
  --s4:#2b2017;
  --ln:rgba(245,124,49,.08);
  --ln2:rgba(245,124,49,.16);
  --ln3:rgba(245,124,49,.04);
  --ink:#f8efe6;
  --ink2:#a18469;
  --ink3:rgba(248,239,230,.05);
  --a:#f57c31;
  --a2:#ffb36c;
  --adim:rgba(245,124,49,.1);
  --aglow:rgba(245,124,49,.24);
  --grad:linear-gradient(135deg,#da5e18 0%,#ff9d4a 100%);
  --ok:#29c58a;
  --warn:#ffc557;
  --surface-soft:rgba(18,13,10,.84);
  --surface-strong:rgba(23,17,13,.94);
  --paper-shadow:0 24px 64px rgba(0,0,0,.34);
  --font-title:'Bebas Neue',sans-serif;
  --card:rgba(18,13,10,.84);
  --card2:#14100d;
  --card-hover:#211912;
  --border:rgba(245,124,49,.08);
  --border2:rgba(245,124,49,.16);
  --border-active:rgba(245,124,49,.5);
  --text:#f8efe6;
  --sub:#a18469;
  --muted:rgba(248,239,230,.38);
  --o:#f57c31;
  --o2:#ffb36c;
  --o-grad:linear-gradient(135deg,#da5e18 0%,#ff9d4a 100%);
  --glow:rgba(245,124,49,.24);
  --g:#29c58a;
  --r:#e05555;
  --b:#5599dd;
  --y:#ffc557;
  --pk:#dd77aa;
  --accent:#f57c31;
  --accent-dim:rgba(245,124,49,.1);
  --accent-glow:rgba(245,124,49,.24);
}
body{
  overflow-x:hidden;
  background:
    radial-gradient(circle at top left,rgba(213,93,55,.14),transparent 34%),
    radial-gradient(circle at top right,rgba(61,125,182,.12),transparent 26%),
    linear-gradient(180deg,rgba(255,255,255,.22),transparent 18%),
    var(--bg);
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}
body::before{
  background-image:
    linear-gradient(var(--ln) 1px,transparent 1px),
    linear-gradient(90deg,var(--ln) 1px,transparent 1px);
  background-size:38px 38px;
  opacity:.28;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.15));
}
body::after{
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 28%,transparent 72%,rgba(255,255,255,.08));
  opacity:.45;
}
#app{
  position:relative;
  z-index:1;
  max-width:1380px;
  margin:0 auto;
  padding:138px 32px 64px;
}
#nav{
  position:fixed;
  top:18px;
  left:24px;
  right:24px;
  height:auto;
  min-height:unset;
  padding:10px 16px;
  display:flex;
  flex-direction:column;
  gap:0;
  border:1px solid var(--border2);
  border-radius:28px;
  background:rgba(255,251,245,.78);
  box-shadow:0 22px 60px rgba(70,46,29,.12);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
}
/* Desktop: nav-top-row holds logo + actions, ntabs below */
.nav-top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:4px 2px 6px;
}
/* On desktop, show tabs full width centered below the top row */
.ntabs{
  width:100%;
  padding:0 2px 4px;
}
body.theme-quizhub #nav{
  background:rgba(16,12,10,.82);
  box-shadow:0 24px 64px rgba(0,0,0,.34);
}
#nav::after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  bottom:10px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border2),transparent);
  opacity:.75;
}
.nav-top-row{display:flex;align-items:center}
.logo{display:flex;align-items:center;cursor:pointer}
.logo-lockup{display:flex;flex-direction:column;gap:4px}
.logo-line{display:flex;align-items:center;line-height:1}
.logo-q,
.logo-h{
  font-family:'Syne',sans-serif;
  font-size:24px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.logo-q{color:var(--ink)}
.logo-h{
  color:#fff;
  background:var(--grad);
  padding:6px 16px 7px;
  border-radius:999px;
  margin-left:6px;
  box-shadow:0 10px 28px var(--aglow);
}
.logo-sub{
  padding-left:4px;
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink2);
}
.ntabs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.ntab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  border:none;
  background:transparent;
  color:var(--ink2);
  border-radius:999px;
  font-family:'Syne',sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.ntab:hover{
  background:var(--s2);
  color:var(--ink);
  transform:translateY(-1px);
}
.ntab.on{
  background:var(--grad);
  color:#fff;
  box-shadow:0 8px 22px var(--aglow);
}
body.theme-quizhub .ntab.on{
  background:var(--grad);
  color:#120d09;
  box-shadow:0 14px 32px rgba(245,124,49,.18);
}
.ntab-icon{font-size:12px;opacity:.74}
.ntab.on .ntab-icon{opacity:1}
.nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.nav-icon-btn{
  width:40px!important;
  height:40px!important;
  border-radius:50%!important;
  border:1px solid var(--border2)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:var(--surface-soft)!important;
  color:var(--ink2)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease!important;
}
.nav-icon-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--paper-shadow);
}
.nav-dot{
  width:16px!important;
  height:16px!important;
  border-radius:999px!important;
  background:#32d26c!important;
  border:3px solid rgba(255,255,255,.76)!important;
  box-shadow:0 0 0 1px rgba(50,210,108,.18),0 0 18px rgba(50,210,108,.34)!important;
}
.qp-loader{
  background:
    radial-gradient(circle at top left,rgba(213,93,55,.12),transparent 30%),
    radial-gradient(circle at top right,rgba(61,125,182,.12),transparent 24%),
    var(--bg);
}
.qp-loader-lockup{display:flex;align-items:center;gap:8px}
.qp-loader-word,
.qp-loader-mark{
  font-family:'Syne',sans-serif;
  font-size:40px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.qp-loader-mark{
  padding:6px 16px 7px;
  border-radius:999px;
}
.qp-loader-sub{
  margin-top:12px;
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink2);
  text-align:center;
}
.card,
.games-panel,
.social-card,
.social-xp,
.home-v4-play,
.home-v4-recent,
.home-v4-empty,
.home-v4-tokens,
.home-v4-shortcuts,
.home-v4-stats,
.s2-card,
.s2-profile-card,
.s2-danger-card,
.sgroup,
#socialSubContent{
  background:var(--surface-soft)!important;
  border:1px solid var(--border)!important;
  border-radius:28px!important;
  box-shadow:var(--paper-shadow)!important;
}
.btn,
.btnG,
.size-btn,
.diff-btn,
.score-tab,
.schip,
.quiz-pick-btn{
  border-radius:999px!important;
}
input,
textarea,
select,
.qp-select,
.s2-input{
  border-radius:18px!important;
  background:var(--surface-strong)!important;
}
.studio-page{display:flex;flex-direction:column;gap:20px}
.studio-hero{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);
  gap:18px;
  align-items:stretch;
}
.studio-hero > * { min-width: 0; overflow: hidden; }
.studio-hero-card,
.studio-rail{
  background:var(--surface-soft);
  border:1px solid var(--border);
  border-radius:30px;
  box-shadow:var(--paper-shadow);
}
.studio-hero-card{
  padding:30px 34px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.studio-kicker{
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--a);
}
.studio-title{
  font-family:'Syne',sans-serif;
  font-size:clamp(28px,3.8vw,56px);
  line-height:.96;
  font-weight:800;
  letter-spacing:-.04em;
  color:var(--ink);
  max-width:100%;
  overflow-wrap:break-word;
  word-break:break-word;
}
.studio-copy{
  max-width:62ch;
  font-size:15px;
  line-height:1.7;
  color:var(--ink2);
}
.studio-brand-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.studio-brand-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:var(--surface-strong);
  border:1px solid var(--border2);
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink2);
}
.studio-brand-pill{
  padding:5px 12px;
  border-radius:999px;
  background:var(--grad);
  color:#fff;
  letter-spacing:.14em;
}
.studio-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding-top:4px;
}
.studio-rail{
  padding:20px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.studio-stat{
  padding:18px;
  border-radius:22px;
  background:var(--surface-strong);
  border:1px solid var(--border);
  min-height:116px;
}
.studio-stat-label{
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink2);
  margin-bottom:10px;
}
.studio-stat-value{
  font-family:'Syne',sans-serif;
  font-size:34px;
  line-height:.95;
  font-weight:800;
  letter-spacing:-.06em;
  color:var(--ink);
}
.studio-stat-copy{
  margin-top:8px;
  font-size:12px;
  line-height:1.55;
  color:var(--ink2);
}
.home-v4{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.82fr);
  gap:20px;
}
.home-v4-main,
.home-v4-side{
  display:flex;
  flex-direction:column;
  gap:20px;
  min-width:0;
  overflow:hidden;
}
.home-v4-greeting{
  padding:32px 34px;
  background:var(--surface-soft);
  border:1px solid var(--border);
  border-radius:30px;
  box-shadow:var(--paper-shadow);
  overflow:hidden;
  min-width:0;
}
.home-v4-eyebrow,
.home-v4-play-label,
.games-intro,
.games-cat,
.social-xp-label{
  font-family:'DM Mono',monospace;
  font-size:10px!important;
  letter-spacing:.38em!important;
  text-transform:uppercase;
}
.home-v4-name{
  margin-top:8px;
  font-family:'Syne',sans-serif;
  font-size:clamp(28px,4vw,52px);
  font-weight:800;
  line-height:.96;
  letter-spacing:-.04em;
  color:var(--ink);
  word-break:break-word;
  overflow-wrap:break-word;
  max-width:100%;
}
.home-v4-streak{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  padding:10px 14px;
  border-radius:999px;
  background:var(--surface-strong);
  border:1px solid var(--border2);
}
.home-v4-play,
.home-v4-recent,
.home-v4-empty,
.home-v4-tokens,
.home-v4-shortcuts,
.home-v4-stats{
  padding:24px 26px!important;
}
.home-v4-play::before{display:none!important}
.home-v4-play-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px!important;
}
.home-v4-shortcuts{padding:10px 0!important}
.home-v4-shortcut{padding:16px 18px!important}
.home-v4-goal{
  padding:22px 24px;
  background:var(--surface-soft);
  border:1px solid var(--border);
  border-radius:28px;
  box-shadow:var(--paper-shadow);
}
.goal-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.goal-track{
  width:100%;
  height:10px;
  background:var(--s3);
  border-radius:999px;
  overflow:hidden;
}
.goal-fill{
  height:100%;
  border-radius:999px;
  background:var(--grad);
}
.goal-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  font-size:12px;
  color:var(--ink2);
}
.quiz-studio{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:20px;
  align-items:start;
}
.quiz-column{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.studio-surface{
  background:var(--surface-soft);
  border:1px solid var(--border);
  border-radius:30px;
  box-shadow:var(--paper-shadow);
  padding:24px 26px;
}
.studio-surface.tight{padding:0}
.studio-surface-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px 24px;
  border-bottom:1px solid var(--border);
}
.studio-surface-title{
  font-family:'Syne',sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ink);
}
.studio-surface-copy{
  margin-top:4px;
  font-size:12px;
  color:var(--ink2);
}
.games-shell{
  display:grid!important;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.82fr);
  gap:20px;
  align-items:start;
}
.games-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;
  gap:14px!important;
  margin-bottom:10px!important;
}
.game-card{
  min-height:184px;
  padding:20px 18px!important;
  border-radius:28px!important;
  background:var(--surface-soft)!important;
}
.game-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 48px rgba(50,34,20,.1)!important;
}
.games-side{padding-left:0!important}
.games-panel{padding:24px!important;top:140px!important}
.quiz-pick-btn{
  width:100%;
  margin-bottom:8px;
  text-align:left;
  padding:12px 14px!important;
  border:1px solid var(--border2)!important;
}
.social-wrap{
  max-width:none!important;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.social-head{
  display:grid!important;
  grid-template-columns:minmax(0,1.3fr) minmax(260px,.75fr);
  gap:18px;
  align-items:stretch!important;
}
.social-cards{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px!important;
}
.social-card{
  padding:20px 18px!important;
  min-height:170px;
}
.social-card-title{font-size:15px!important}
.social-card-desc{
  font-size:11px!important;
  line-height:1.6!important;
}
.social-tabs,
.s2-tabs{
  display:flex;
  gap:8px;
  padding:8px;
  border-radius:999px;
  background:var(--surface-soft);
  border:1px solid var(--border);
  box-shadow:var(--paper-shadow);
  flex-wrap:wrap;
}
#socialSubContent{padding:20px}
.score-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.score-tab{
  padding:12px 18px!important;
  border:1px solid var(--border2)!important;
  background:var(--surface-soft)!important;
  color:var(--ink2)!important;
}
.score-tab.on{
  background:var(--grad)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 6px 18px var(--aglow)!important;
}
body.theme-quizhub .score-tab.on{
  background:var(--grad)!important;
  border-color:transparent!important;
  color:#120d09!important;
}
.s2-wrap{
  max-width:none!important;
  padding:0!important;
}
.s2-header{margin-bottom:16px!important}
.s2-title{
  font-family:'Syne',sans-serif!important;
  font-size:42px!important;
  font-weight:800!important;
  letter-spacing:-.05em!important;
}
.s2-tab{
  min-width:0;
  flex:1;
  justify-content:center;
  border-radius:999px!important;
}
.s2-tab.active{background:var(--grad)!important;box-shadow:0 6px 18px var(--aglow)!important}
body.theme-quizhub .s2-tab.active{background:var(--grad)!important}
/* ── TABLET (≤1100px) ─────────────────────────────────────── */
@media (max-width:1100px){
  #nav{
    top:14px;
    left:16px;
    right:16px;
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0;
    min-height:unset;
  }
  /* Row 1: logo + actions */
  .nav-top-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:12px 16px 10px;
  }
  /* Row 2: tabs */
  .ntabs{
    width:100%;
    padding:0 10px 12px;
    gap:4px;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .ntabs::-webkit-scrollbar{display:none}
  .ntab{flex:0 0 auto;padding:9px 14px;font-size:12px}
  /* Nav actions go to top-right in row 1 */
  .nav-actions{display:flex;align-items:center;gap:8px}
  #app{padding:155px 20px 54px}
  .studio-hero,
  .home-v4,
  .quiz-studio,
  .games-shell,
  .social-head{
    grid-template-columns:1fr!important;
  }
  .studio-rail{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .social-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ── MOBILE (≤680px) ──────────────────────────────────────── */
@media (max-width:680px){
  #nav{
    top:10px;
    left:10px;
    right:10px;
    border-radius:22px;
  }
  .nav-top-row{
    padding:10px 14px 8px;
  }
  /* Logo smaller on mobile */
  .logo-q,.logo-h{font-size:18px!important}
  .logo-h{padding:4px 12px 5px!important}
  .logo-sub{font-size:8px!important;letter-spacing:.28em!important}
  /* Tabs: icon only on very small, icon+label on bigger mobile */
  .ntabs{padding:0 8px 10px;gap:2px}
  .ntab{padding:8px 10px;font-size:11px;gap:5px}
  /* Nav action icons smaller */
  .nav-icon-btn{width:34px!important;height:34px!important;font-size:13px!important}
  .nav-dot{width:12px!important;height:12px!important}
  /* App padding - less top space since nav is shorter */
  #app{padding:136px 12px 40px}
  /* Stack all grids */
  .studio-hero,
  .home-v4,
  .quiz-studio,
  .games-shell,
  .social-head{
    grid-template-columns:1fr!important;
  }
  .studio-rail{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .home-v4-play-row{grid-template-columns:1fr!important}
  .social-cards,
  .games-grid{grid-template-columns:1fr!important}
  /* Card padding reduced on mobile */
  .studio-hero-card,.studio-surface,.home-v4-greeting{padding:20px 18px!important}
  .games-panel,#socialSubContent{padding:16px!important}
  /* Stats grid 2 col on mobile */
  .studio-rail{gap:8px!important}
  /* Home stats bar wraps */
  .home-v4-stats{flex-wrap:wrap;gap:12px!important}
  .home-v4-stat-div{display:none}
  /* vs-settings tabs */
  .vs-tabs{border-radius:16px}
  .vs-tab-label{display:none}
  .vs-tab{min-width:44px;flex:1}
}

/* ── SMALL MOBILE (≤380px) ────────────────────────────────── */
@media (max-width:380px){
  #app{padding:128px 10px 36px}
  .ntab-label{display:none}
  .ntab{padding:8px}
  .studio-title{font-size:32px!important}
}

/* Stat value size responsive */
@media (max-width:680px){
  .studio-stat-value{font-size:26px!important}
  .studio-stat-label{font-size:9px!important}
  .studio-stat{min-height:90px!important;padding:14px!important}
  .home-v4-play-label{margin-bottom:8px!important}
}

/* ── vs- Settings design system ─────────────────────────── */
/* ══════════════════════════════════════════════════════════════════
   SETTINGS vs- design system
   Unrecognisably different from before:
   - Full-width pill tab bar at top
   - Divider labels that span the full card
   - Rows with clean labels + right-side controls
   - iOS toggles with proper slide animation
   - Mosaic theme grid with dot swatches
   - No tiny icons or ALL CAPS overload
══════════════════════════════════════════════════════════════════ */

.vs-wrap { max-width: 720px; margin: 0 auto; padding: 0 0 80px; }

.vs-header { margin-bottom: 22px; }
.vs-title {
  font-family: 'Syne', sans-serif;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--ink);
  line-height: 1;
}

/* ── Tab bar ─────────────────────────────────────────────────── */
.vs-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px;
  margin-bottom: 28px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: var(--paper-shadow);
}
.vs-tabs::-webkit-scrollbar { display: none; }
.vs-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  justify-content: center;
  min-width: 60px;
  padding: 9px 14px;
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink2);
}
.vs-tab:hover { background: var(--surface-strong); color: var(--ink); }
.vs-tab.active {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 6px 18px var(--aglow);
}
.vs-tab-label { font-size: 12px; }

/* ── Dividers (section headings) ─────────────────────────────── */
.vs-divider {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink2);
  margin: 24px 0 10px;
}
.vs-divider:first-child { margin-top: 0; }

/* ── Block (card wrapper) ────────────────────────────────────── */
.vs-block {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: var(--paper-shadow);
}
.vs-block.vs-padded { padding: 18px 20px; }
.vs-block > .vs-row:not(:last-child),
.vs-block > div > .vs-row:not(:last-child) { border-bottom: 1px solid var(--border); }

/* ── Row ─────────────────────────────────────────────────────── */
.vs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  gap: 16px;
}
.vs-row-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.vs-label {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.vs-desc {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--ink2);
  line-height: 1.4;
  margin-top: 1px;
}

/* ── Toggle ──────────────────────────────────────────────────── */
.vs-toggle {
  position: relative;
  width: 48px;
  height: 28px;
  background: var(--border2);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
  padding: 0;
}
.vs-toggle.on { background: var(--a); }
.vs-knob {
  position: absolute;
  top: 4px; left: 4px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .22s cubic-bezier(.22,.68,0,1.2);
  box-shadow: 0 1px 5px rgba(0,0,0,.25);
  display: block;
}
.vs-toggle.on .vs-knob { transform: translateX(20px); }

/* ── Chips ───────────────────────────────────────────────────── */
.vs-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.vs-chip {
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--ink2);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  transition: all .14s;
  white-space: nowrap;
  letter-spacing: .02em;
}
.vs-chip:hover { border-color: var(--a); color: var(--ink); }
.vs-chip.on { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 4px 12px var(--aglow); }

/* ── Theme grid ──────────────────────────────────────────────── */
.vs-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.vs-theme {
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  padding: 0;
  transition: transform .13s;
}
.vs-theme:hover { transform: translateY(-2px); }
.vs-swatch {
  width: 100%;
  aspect-ratio: 1.4;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid transparent;
  overflow: hidden;
  transition: border-color .15s;
}
.vs-theme.active .vs-swatch {
  border-color: var(--a);
  box-shadow: 0 0 0 3px var(--adim);
}
.vs-swatch-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}
.vs-swatch-lock {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.vs-theme-name {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--ink2);
  margin-top: 5px;
  letter-spacing: .04em;
  line-height: 1.3;
}
.vs-theme-xp {
  font-size: 8px;
  color: var(--ink2);
  opacity: .6;
}

/* ── Input ───────────────────────────────────────────────────── */
.vs-input {
  width: 100%;
  background: var(--surface-strong);
  border: 1px solid var(--border2);
  color: var(--ink);
  padding: 9px 13px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  border-radius: 12px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.vs-input:focus { border-color: var(--a); box-shadow: 0 0 0 3px var(--adim); }

/* ── Preset buttons ──────────────────────────────────────────── */
.vs-preset {
  background: rgba(129,140,248,.08);
  border: 1px solid rgba(129,140,248,.2);
  color: var(--a);
  padding: 5px 11px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  cursor: pointer;
  border-radius: 999px;
  letter-spacing: .04em;
  transition: all .14s;
}
.vs-preset:hover { background: rgba(129,140,248,.16); }

/* ── Buttons ─────────────────────────────────────────────────── */
.vs-btn-accent {
  background: var(--grad);
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 999px;
  transition: all .15s;
  box-shadow: 0 4px 14px var(--aglow);
}
.vs-btn-accent:hover { opacity: .88; transform: translateY(-1px); }
.vs-ghost {
  background: transparent;
  color: var(--ink2);
  border: 1px solid var(--border2);
  padding: 8px 16px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  transition: all .14s;
  white-space: nowrap;
}
.vs-ghost:hover { border-color: var(--a); color: var(--a); }
.vs-full { width: 100%; text-align: center; }

/* ── Profile card ────────────────────────────────────────────── */
.vs-profile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--paper-shadow);
  margin-bottom: 8px;
}
.vs-avatar {
  width: 50px; height: 50px;
  background: var(--grad);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 18px var(--aglow);
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .vs-title { font-size: 28px; }
  .vs-tab-label { display: none; }
  .vs-theme-grid { grid-template-columns: repeat(auto-fill, minmax(62px,1fr)); }
  .vs-tab { min-width: 44px; }
  .vs-row { padding: 13px 16px; }
}


/* ── Tour pulse keyframe ─────────────────────────────────── */
@keyframes tourPulse{
  0%,100%{box-shadow:0 0 0 4px var(--adim,rgba(129,140,248,.12)),0 0 20px var(--aglow)}
  50%{box-shadow:0 0 0 6px var(--adim,rgba(129,140,248,.12)),0 0 36px var(--aglow)}
}

/* ── Root missing vars ───────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════════════
   PHONE SNAP SYSTEM — injected below all other mobile rules
   Overrides fluid stretching with fixed-width layouts per device tier.
══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
   PHONE SNAP LAYOUTS
   ─────────────────────────────────────────────────────────────────────
   Instead of fluid stretching, content locks to fixed widths that match
   real phone dimensions. Each breakpoint is tuned to specific devices.
   
   Snap widths (content column):
     ≤360px  → 100% - 20px (tiny Androids, iPhone SE 1st gen)
     ≤390px  → 362px        (iPhone 14/15 standard, 13/12)
     ≤430px  → 398px        (iPhone Pro Max/Plus, Galaxy S Ultra)
     ≤480px  → 448px        (large Androids, 1+ phones)
   
   The floating nav card follows the same snap widths so nav and content
   always have the same margin — nothing feels accidentally wider.
══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   BASE PHONE SHELL — applies to all phones ≤480px
   Sets up the centering container and clamps font sizes.
───────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* ── Body/root ───────────────────────────────────────────────────── */
  html { overflow-x: hidden; }
  body {
    overflow-x: hidden;
    /* Subtle background gradient looks better on phones */
    background-attachment: fixed;
  }

  /* ── Content container — the snap shell ─────────────────────────── */
  /* #app is already centered via the codex block. We clamp its padding
     so content never touches the screen edge. */
  #app {
    box-sizing: border-box;
    width: 100%;
  }

  /* ── Nav — matches content snap width ───────────────────────────── */
  /* The floating nav card already has left/right values — we override
     to match the content column margin at each snap point. */
  #nav {
    box-sizing: border-box;
  }

  /* ── Content cards — feel intentional on phone ───────────────────── */
  /* Slightly increase border-radius on cards for the phone snap feel */
  .studio-hero-card,
  .studio-rail,
  .studio-surface,
  .home-v4-greeting,
  .home-v4-play,
  .home-v4-recent,
  .home-v4-tokens,
  .home-v4-shortcuts,
  .home-v4-stats,
  .home-v4-empty,
  .games-panel,
  .card,
  .vs-block,
  .vs-profile {
    border-radius: 20px !important;
  }

  /* ── Typography — clamp for readability ─────────────────────────── */
  .studio-title {
    font-size: clamp(28px, 9vw, 48px) !important;
    letter-spacing: -.04em !important;
    line-height: .92 !important;
  }
  .studio-kicker,
  .home-v4-eyebrow {
    font-size: 9px !important;
    letter-spacing: .3em !important;
  }

  /* ── Spacing — tighter on phone ──────────────────────────────────── */
  .studio-hero-card { padding: 22px 20px !important; gap: 14px !important; }
  .home-v4-play { padding: 20px !important; }
  .home-v4-recent,
  .home-v4-tokens,
  .home-v4-shortcuts { padding: 0 !important; }
  .home-v4-stats { padding: 14px 16px !important; }

  /* ── Quick play card ─────────────────────────────────────────────── */
  .home-v4-play-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .home-v4-play-label { margin-bottom: 10px !important; }

  /* ── Studio rail — 2 columns on phone ───────────────────────────── */
  .studio-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 16px !important;
  }
  .studio-stat { padding: 14px 12px !important; min-height: 90px !important; }
  .studio-stat-value { font-size: 26px !important; }
  .studio-stat-label { font-size: 9px !important; }
  .studio-stat-copy { font-size: 11px !important; }

  /* ── Home stats bar ──────────────────────────────────────────────── */
  .home-v4-stats { flex-wrap: wrap !important; gap: 14px !important; }
  .home-v4-stat-div { display: none !important; }
  .home-v4-stat-n { font-size: 22px !important; }
  .home-v4-stat-l { font-size: 8px !important; }

  /* ── Home shortcuts — better spacing ────────────────────────────── */
  .home-v4-shortcut { padding: 13px 16px !important; }
  .home-v4-sc-label { font-size: 13px !important; }
  .home-v4-sc-desc { font-size: 9px !important; }

  /* ── Score rows ──────────────────────────────────────────────────── */
  .home-v4-score-row { padding: 11px 16px !important; }
  .home-v4-score-pct { font-size: 24px !important; min-width: 50px !important; }
  .home-v4-score-name { font-size: 12px !important; }

  /* ── Games page ──────────────────────────────────────────────────── */
  .games-shell {
    padding: 16px 0 !important;
    gap: 14px !important;
  }
  .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .game-card {
    min-height: 130px !important;
    padding: 14px 12px !important;
    border-radius: 18px !important;
  }
  .game-card-icon { font-size: 22px !important; margin-bottom: 8px !important; }
  .game-card-name { font-size: 12px !important; }
  .game-card-desc { font-size: 10px !important; }
  .games-panel { border-radius: 20px !important; }
  .games-intro { margin-bottom: 14px !important; }
  .games-cat { margin: 16px 0 8px !important; }

  /* ── Quiz answer buttons — big touch targets ─────────────────────── */
  .oBtn {
    min-height: 56px !important;
    padding: 15px 14px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
  }
  .tfBtn {
    min-height: 72px !important;
    padding: 20px !important;
    font-size: 30px !important;
    border-radius: 18px !important;
  }

  /* ── Buttons ─────────────────────────────────────────────────────── */
  .btn { min-height: 48px !important; padding: 13px 20px !important; }
  .btnG { min-height: 44px !important; }

  /* ── Settings ────────────────────────────────────────────────────── */
  .vs-wrap { padding: 0 0 80px !important; }
  .vs-title { font-size: 26px !important; }
  .vs-tabs { border-radius: 16px !important; padding: 4px !important; }
  .vs-tab { padding: 8px 10px !important; }
  .vs-tab-label { font-size: 9px !important; }
  .vs-row { padding: 13px 16px !important; }
  .vs-label { font-size: 13px !important; }
  .vs-theme-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)) !important; gap: 6px !important; }
  .vs-swatch { border-radius: 10px !important; }
  .vs-block { border-radius: 16px !important; }

  /* ── Social cards ────────────────────────────────────────────────── */
  .social-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .social-card {
    padding: 14px 12px !important;
    min-height: 130px !important;
    border-radius: 18px !important;
  }

  /* ── Auth modal ──────────────────────────────────────────────────── */
  .auth-input { font-size: 16px !important; } /* prevents iOS zoom */

  /* ── Prevent any element from overflowing ────────────────────────── */
  * { max-width: 100%; }
  img, video, canvas { max-width: 100% !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   SNAP: iPhone Pro Max / Plus / large Androids  (≤430px)
   Content: 398px wide. Nav matches. 16px side margins.
───────────────────────────────────────────────────────────────────── */
@media (max-width: 430px) {
  #nav {
    left: 16px !important;
    right: 16px !important;
    border-radius: 22px !important;
  }
  #app {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .studio-page,
  .home-v4,
  .quiz-studio,
  .games-shell,
  .wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Nav top row padding matches margin */
  .nav-top-row { padding: 10px 14px 8px !important; }
  .ntabs { padding: 0 8px 10px !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   SNAP: iPhone 14/15 standard, 13/12, Galaxy S23 base  (≤390px)
   Content: 362px wide. Nav matches. 14px side margins.
───────────────────────────────────────────────────────────────────── */
@media (max-width: 390px) {
  #nav {
    left: 14px !important;
    right: 14px !important;
    border-radius: 20px !important;
  }
  #app {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* Slightly tighter card padding */
  .studio-hero-card { padding: 20px 18px !important; }
  .home-v4-play { padding: 18px !important; }
  /* Logo slightly smaller */
  .logo-q, .logo-h { font-size: 16px !important; }
  .logo-h { padding: 3px 10px 4px !important; }
  .logo-sub { font-size: 7px !important; letter-spacing: .26em !important; }
  /* Nav top row */
  .nav-top-row { padding: 9px 12px 8px !important; }
  .ntabs { padding: 0 6px 9px !important; gap: 1px !important; }
  .ntab { padding: 7px 9px !important; font-size: 10px !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   SNAP: iPhone SE (2nd/3rd gen), iPhone 13 mini  (≤375px)
   Content: 351px wide. Nav matches. 12px side margins.
───────────────────────────────────────────────────────────────────── */
@media (max-width: 375px) {
  #nav {
    left: 12px !important;
    right: 12px !important;
    border-radius: 18px !important;
  }
  #app {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Compact everything further */
  .studio-hero-card { padding: 18px 16px !important; }
  .home-v4-play { padding: 16px !important; }
  .studio-stat { padding: 12px 10px !important; }
  .studio-stat-value { font-size: 24px !important; }
  .studio-title { font-size: clamp(26px, 9vw, 38px) !important; }
  /* Tab bar text hidden, icon only to save space */
  .ntab-label { display: none !important; }
  .ntab { padding: 7px 8px !important; }
  /* Game cards: tighter */
  .game-card { padding: 12px 10px !important; min-height: 120px !important; }
  /* Nav */
  .nav-top-row { padding: 8px 10px 7px !important; }
  .ntabs { padding: 0 5px 8px !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   SNAP: Very small phones — old Androids, iPhone SE 1st gen  (≤360px)
   Content: full width minus 10px each side. No fixed content width.
───────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  #nav {
    left: 10px !important;
    right: 10px !important;
    border-radius: 16px !important;
  }
  #app {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  /* Single column for everything */
  .games-grid { grid-template-columns: 1fr !important; }
  .studio-rail { grid-template-columns: 1fr 1fr !important; }
  .oBtn { font-size: 13px !important; padding: 13px 12px !important; }
  .tfBtn { font-size: 26px !important; }
  .studio-stat-value { font-size: 22px !important; }
  /* Touch targets still minimum 44px */
  .btn, .btnG { min-height: 44px !important; }
  .nav-icon-btn { width: 30px !important; height: 30px !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   LANDSCAPE PHONE — when rotated
   Nav collapses to single row, content gets more horizontal space.
───────────────────────────────────────────────────────────────────── */
@media (max-width: 844px) and (orientation: landscape) and (max-height: 430px) {
  /* Single row nav in landscape */
  #nav {
    flex-direction: row !important;
    min-height: unset !important;
    align-items: center !important;
    padding: 0 14px !important;
    height: 50px !important;
    top: 10px !important;
  }
  .nav-top-row {
    padding: 0 !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
  .ntabs {
    padding: 0 6px !important;
    height: 50px !important;
    align-items: center !important;
    border-top: none !important;
    justify-content: center !important;
  }
  .ntab { height: 36px !important; padding: 0 10px !important; font-size: 10px !important; }
  .nav-actions { flex-shrink: 0 !important; }
  /* Less top padding in landscape */
  #app { padding-top: 70px !important; }
  /* Compact game screen */
  .game-screen { padding: 8px 12px !important; }
  .oBtn { min-height: 42px !important; padding: 10px 12px !important; }
  .tfBtn { min-height: 56px !important; padding: 12px !important; font-size: 22px !important; }
  /* Two-column layout in landscape phone */
  .home-v4 { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .studio-hero { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .studio-rail { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   TOUCH QUALITY OF LIFE — all phones
───────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Larger range slider thumbs */
  input[type="range"]::-webkit-slider-thumb {
    width: 24px !important;
    height: 24px !important;
  }
  input[type="range"]::-moz-range-thumb {
    width: 24px !important;
    height: 24px !important;
  }
  /* Prevent text selection on tap for interactive elements */
  .oBtn, .tfBtn, .btn, .btnG, .game-card, .ntab, .vs-tab, .vs-chip, .size-btn {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  /* Slightly larger hit area on nav tabs */
  .ntab { min-height: 36px !important; }
  /* No hover states — they get stuck on touch */
  .oBtn:hover, .tfBtn:hover, .game-card:hover {
    transform: none !important;
  }
  /* But DO keep the active/pressed state for feedback */
  .btn:active { transform: scale(.97) !important; }
  .oBtn:active { transform: translateX(0) !important; background: var(--adim, var(--accent-dim)) !important; }
  .game-card:active { transform: scale(.98) !important; }
}