@font-face {
  font-family: 'Syne';
  src: url('fonts/syne700.woff2') format('woff2'); 
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Syne - Extra Bold (800) */
@font-face {
  font-family: 'Syne';
  src: url('fonts/syne800.woff2') format('woff2'); 
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* DM Sans - Regular (400) */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dmsans.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ── */
:root {
  /* Base palette */
  --ink:       #0a0a14;
  --ink2:      #0f0f1e;
  --glass:     rgba(255,255,255,0.04);
  --glass-b:   rgba(255,255,255,0.09);
  --rim:       rgba(255,255,255,0.10);
  --rim2:      rgba(255,255,255,0.06);
  --text:      #f0eeff;
  --subtext:   #8b85aa;
  --brand:     #7c5cfc;
  --brand2:    #a78bfa;

  /* Tile spectrum — bold chromatic progression */
  --t2-bg:    #1e2a4a; --t2-fg:    #7eb8ff; --t2-glow:   #3a7bd5;
  --t4-bg:    #1a3a2a; --t4-fg:    #5df5a0; --t4-glow:   #22c55e;
  --t8-bg:    #2d2a10; --t8-fg:    #ffe033; --t8-glow:   #eab308;
  --t16-bg:   #311a0a; --t16-fg:   #ff9d2e; --t16-glow:  #f97316;
  --t32-bg:   #2e0f0f; --t32-fg:   #ff5757; --t32-glow:  #ef4444;
  --t64-bg:   #2a0a22; --t64-fg:   #ff4dcd; --t64-glow:  #ec4899;
  --t128-bg:  #1c0f38; --t128-fg:  #b97aff; --t128-glow: #a855f7;
  --t256-bg:  #0a1830; --t256-fg:  #50c8ff; --t256-glow: #06b6d4;
  --t512-bg:  #0f2918; --t512-fg:  #00f5b4; --t512-glow: #10b981;
  --t1024-bg: #291a00; --t1024-fg: #ffca28; --t1024-glow:#f59e0b;
  --t2048-bg: #1f0a00; --t2048-fg: #ff7c2a; --t2048-glow:#ea580c;
  --t-hi-bg:  #1c0033; --t-hi-fg:  #ffffff; --t-hi-glow: #c084fc;

  /* Board */
  --board-bg:  rgba(255,255,255,0.03);
  --cell-empty:rgba(255,255,255,0.03);
  --board-gap: 8px;
  --board-pad: 10px;

  /* Ad banner */
  --ad-h: 60px;

  /* Safe areas */
  --sat: env(safe-area-inset-top,    0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
  --sar: env(safe-area-inset-right,  0px);

  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --radius:       14px;
}

/* ... the rest of the original file remains unchanged ... */

/* ── Reset ── */
*,*::before,*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0; padding: 0;
}
html { height:100%; overflow:hidden; position:fixed; width:100%; }
body {
  width:100%; height:100%; height:100dvh;
  overflow:hidden; overscroll-behavior:none;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  padding: var(--sat) var(--sar) var(--sab) var(--sal);
  touch-action: none;
}

/* ── Animated cosmic background ── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 20% 15%, rgba(124,92,252,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(236,72,153,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 60% 10%, rgba(6,182,212,0.10) 0%, transparent 50%),
    linear-gradient(160deg, #0a0a14 0%, #0d0d1f 50%, #0a0a14 100%);
}

/* ── Subtle star field ── */
body::after {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.4) 0%, transparent 0%),
    radial-gradient(1px 1px at 40% 65%, rgba(255,255,255,0.3) 0%, transparent 0%),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,0.35) 0%, transparent 0%),
    radial-gradient(1px 1px at 85% 50%, rgba(255,255,255,0.25) 0%, transparent 0%),
    radial-gradient(1px 1px at 55% 85%, rgba(255,255,255,0.3) 0%, transparent 0%),
    radial-gradient(1.5px 1.5px at 30% 45%, rgba(200,180,255,0.45) 0%, transparent 0%),
    radial-gradient(1.5px 1.5px at 75% 70%, rgba(180,220,255,0.4) 0%, transparent 0%);
}

/* ── App shell ── */
#app { position:relative; width:100%; height:100%; display:flex; flex-direction:column; z-index:1; }

/* ═══════════════════════════════════════════════════════
   AD BANNER
═══════════════════════════════════════════════════════ */
#ad-banner {
  position:fixed; left:0; right:0;
  bottom:var(--sab);
  height:var(--ad-h);
  background:rgba(10,10,20,0.95);
  border-top:1px solid var(--rim2);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:center;
  z-index:50;
}
.ad-inner {
  border:1px dashed rgba(255,255,255,0.12);
  border-radius:6px;
  padding:5px 28px;
  font-size:0.58rem; font-weight:600; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--subtext);
}

/* ═══════════════════════════════════════════════════════
   SOUND BUTTON — fixed top-right, always visible on all
   non-game screens. Hidden on game screen (the in-header
   #btn-sound-game is shown there instead).
═══════════════════════════════════════════════════════ */
#btn-sound {
  position: fixed;
  top: max(14px, var(--sat));
  right: max(14px, var(--sar));
  z-index: 300;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--rim);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.05rem;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  touch-action: manipulation; -webkit-appearance: none;
  transition: background 0.15s, transform 0.12s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
#btn-sound:active { transform: scale(0.88); }
@media(hover:hover) {
  #btn-sound:hover { background: rgba(124,92,252,0.2); border-color: var(--brand2); }
}
/* Hide the fixed button when game screen is active
   (the in-header button takes over) */
#game-screen.active ~ #btn-sound,
.screen#game-screen.active + #btn-sound {
  display: none;
}

/* ═══════════════════════════════════════════════════════
   SCREENS
═══════════════════════════════════════════════════════ */
.screen {
  position:absolute; top:0; left:0; right:0;
  bottom:calc(var(--ad-h) + var(--sab));
  display:none; flex-direction:column; align-items:center;
  z-index:10; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.screen.active {
  display:flex;
  animation:screenIn 0.38s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes screenIn {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ═══════════════════════════════════════════════════════
   MENU SCREEN
═══════════════════════════════════════════════════════ */
#menu-screen { justify-content:center; padding:28px 24px; }

.qs-wordmark {
  font-family:var(--font-display);
  font-size:0.7rem; font-weight:800;
  letter-spacing:4px; text-transform:uppercase;
  color:var(--brand2); margin-bottom:8px; opacity:0.9;
}

.hero-number {
  font-family:var(--font-display);
  font-size:clamp(5rem, 20vw, 8rem);
  font-weight:800; line-height:0.85;
  background: linear-gradient(135deg,
    #7c5cfc 0%, #a78bfa 25%,
    #06b6d4 50%, #10b981 65%,
    #f59e0b 80%, #ec4899 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-4px; margin-bottom:0;
  filter: drop-shadow(0 0 30px rgba(124,92,252,0.4));
  animation: heroShift 6s ease-in-out infinite alternate;
}
@keyframes heroShift {
  0%   { filter:drop-shadow(0 0 24px rgba(124,92,252,0.4)); }
  50%  { filter:drop-shadow(0 0 40px rgba(6,182,212,0.5)); }
  100% { filter:drop-shadow(0 0 28px rgba(236,72,153,0.45)); }
}

.hero-tagline {
  font-size:0.78rem; font-weight:500;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--subtext); margin-top:14px; margin-bottom:40px;
}

/* Glass card */
.glass-card {
  background:var(--glass);
  border:1px solid var(--rim);
  border-radius:var(--radius);
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
  padding:24px 20px;
  width:100%; max-width:310px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5),
              inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ═══════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════ */
.btn {
  display:block; width:100%; min-height:52px;
  padding:14px 20px; border:none; border-radius:10px;
  font-family:var(--font-body); font-size:0.88rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  cursor:pointer; margin:7px 0;
  transition:transform 0.12s, box-shadow 0.15s, background 0.15s;
  -webkit-appearance:none; touch-action:manipulation;
  position:relative; overflow:hidden;
}
.btn:active { transform:scale(0.95); }

/* Shimmer on primary buttons */
.btn-primary::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  transform:translateX(-100%);
  transition:transform 0.5s;
}
.btn-primary:hover::after { transform:translateX(100%); }

.btn-primary {
  background:linear-gradient(135deg, #7c5cfc, #a855f7 50%, #ec4899);
  color:#fff;
  box-shadow: 0 4px 20px rgba(124,92,252,0.45),
              inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:hover { box-shadow:0 6px 28px rgba(124,92,252,0.65); }

.btn-ghost {
  background:transparent;
  border:1.5px solid var(--rim);
  color:var(--brand2);
}
.btn-ghost:hover { border-color:var(--brand2); background:rgba(167,139,250,0.08); }

.btn-win {
  background:linear-gradient(135deg, #f59e0b, #fbbf24 50%, #f97316);
  color:#1a0800; font-weight:800;
  box-shadow:0 4px 20px rgba(245,158,11,0.5);
}

.divider {
  width:100%; height:1px;
  background:linear-gradient(90deg, transparent, var(--rim), transparent);
  margin:8px 0;
}

/* ═══════════════════════════════════════════════════════
   MODE SELECT
═══════════════════════════════════════════════════════ */
#mode-screen { justify-content:center; padding:24px 20px; }

.section-title {
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:800;
  color:var(--text); text-align:center;
  margin-bottom:20px; letter-spacing:-0.5px;
}

.mode-wrap { width:100%; max-width:300px; }
.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }

.mode-btn {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  min-height:90px; gap:5px;
  background:var(--glass);
  border:1.5px solid var(--rim2);
  border-radius:12px; cursor:pointer;
  transition:all 0.18s;
  touch-action:manipulation; -webkit-appearance:none;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  position:relative; overflow:hidden;
}
.mode-btn::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(124,92,252,0.12), transparent);
  opacity:0; transition:opacity 0.2s;
}
.mode-btn:active { transform:scale(0.94); border-color:var(--brand2); }
.mode-btn:active::before { opacity:1; }
@media(hover:hover) {
  .mode-btn:hover { border-color:var(--brand2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(124,92,252,0.2); }
  .mode-btn:hover::before { opacity:1; }
}
.mode-icon  { font-size:1.6rem; line-height:1; }
.mode-label {
  font-family:var(--font-display); font-size:1.05rem;
  font-weight:800; color:var(--text); letter-spacing:-0.5px;
}
.mode-desc  { font-size:0.62rem; font-weight:600; color:var(--subtext); letter-spacing:0.5px; }

/* ═══════════════════════════════════════════════════════
   GAME SCREEN
═══════════════════════════════════════════════════════ */
#game-screen { justify-content:flex-start; padding:0; overflow:hidden; }

/* Top bar: wordmark + [Sound | Home | Restart] */
.game-header {
  width:100%; max-width:520px; align-self:center;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px 6px; flex-shrink:0;
}
.game-wordmark {
  font-family:var(--font-display); font-size:1.4rem; font-weight:800;
  letter-spacing:-0.5px;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Header button cluster: Sound is left-most, then Home, then Restart */
.header-btns { display:flex; gap:7px; align-items:center; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 9px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--rim2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; color: var(--text);
  transition: all 0.14s; flex-shrink: 0;
  touch-action: manipulation; -webkit-appearance: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.icon-btn:active { transform:scale(0.86); background:rgba(124,92,252,0.2); }
@media(hover:hover) {
  .icon-btn:hover { border-color:var(--brand2); background:rgba(124,92,252,0.12); }
}

/* Score row — sits directly above the board */
.score-row {
  width: 100%; max-width: 520px; align-self: center;
  display: flex; gap: 8px; align-items: stretch;
  padding: 0 14px 8px;
  flex-shrink: 0;
}
.score-pill {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--rim2); border-radius: 10px;
  padding: 8px 10px; text-align: center;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  min-width: 0; overflow: hidden;
}
.score-pill-label {
  font-size: 0.5rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--subtext);
  white-space: nowrap;
}
.score-pill-val {
  font-family: var(--font-display); font-size: 1.15rem;
  font-weight: 800; color: var(--text); line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  display: block; width: 100%;
}

/* Board area — takes ALL remaining space */
#board-area {
  width: 100%; max-width: 520px; align-self: center;
  flex: 1 1 0; min-height: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 0 14px 14px;
}

/* ═══════════════════════════════════════════════════════
   GRID — sized pixel-perfect by JS
═══════════════════════════════════════════════════════ */
#grid-container {
  background:rgba(255,255,255,0.03);
  border:1px solid var(--rim2);
  border-radius:16px;
  padding:var(--board-pad);
  display:grid; gap:var(--board-gap);
  box-shadow:
    0 8px 40px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(124,92,252,0.08);
  flex-shrink:0; touch-action:none;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

/* ── Tiles ── */
.tile {
  width:var(--tsz,64px); height:var(--tsz,64px);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800;
  font-size:var(--tfs,1.4rem); line-height:1;
  background:var(--cell-empty);
  color:var(--subtext);
  position:relative; overflow:hidden;
  transition:background 0.06s;
  word-break:keep-all;
  white-space:nowrap;
}
/* Glossy specular layer */
.tile::before {
  content:''; position:absolute; top:0; left:0; right:0; height:48%;
  background:linear-gradient(rgba(255,255,255,0.13), transparent);
  border-radius:inherit; pointer-events:none; z-index:1;
}
/* Text above gloss */
.tile > span { position:relative; z-index:2; }

/* Tile colours by data-v attribute */
.tile[data-v]              { color:var(--text); }
.tile[data-v="2"]   { background:var(--t2-bg);   color:var(--t2-fg);   box-shadow:0 0 14px var(--t2-glow),   inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 8px rgba(0,0,0,0.4); }
.tile[data-v="4"]   { background:var(--t4-bg);   color:var(--t4-fg);   box-shadow:0 0 14px var(--t4-glow),   inset 0 1px 0 rgba(255,255,255,0.1),  0 2px 8px rgba(0,0,0,0.4); }
.tile[data-v="8"]   { background:var(--t8-bg);   color:var(--t8-fg);   box-shadow:0 0 18px var(--t8-glow),   inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 10px rgba(0,0,0,0.4); }
.tile[data-v="16"]  { background:var(--t16-bg);  color:var(--t16-fg);  box-shadow:0 0 20px var(--t16-glow),  inset 0 1px 0 rgba(255,255,255,0.1),  0 3px 12px rgba(0,0,0,0.4); }
.tile[data-v="32"]  { background:var(--t32-bg);  color:var(--t32-fg);  box-shadow:0 0 22px var(--t32-glow),  inset 0 1px 0 rgba(255,255,255,0.1),  0 4px 14px rgba(0,0,0,0.45); }
.tile[data-v="64"]  { background:var(--t64-bg);  color:var(--t64-fg);  box-shadow:0 0 24px var(--t64-glow),  inset 0 1px 0 rgba(255,255,255,0.1),  0 4px 14px rgba(0,0,0,0.45); }
.tile[data-v="128"] { background:var(--t128-bg); color:var(--t128-fg); box-shadow:0 0 26px var(--t128-glow), inset 0 1px 0 rgba(255,255,255,0.12), 0 5px 18px rgba(0,0,0,0.5); }
.tile[data-v="256"] { background:var(--t256-bg); color:var(--t256-fg); box-shadow:0 0 28px var(--t256-glow), inset 0 1px 0 rgba(255,255,255,0.12), 0 5px 20px rgba(0,0,0,0.5); }
.tile[data-v="512"] { background:var(--t512-bg); color:var(--t512-fg); box-shadow:0 0 30px var(--t512-glow), inset 0 1px 0 rgba(255,255,255,0.1),  0 6px 22px rgba(0,0,0,0.5); }
.tile[data-v="1024"]{ background:var(--t1024-bg);color:var(--t1024-fg);box-shadow:0 0 32px var(--t1024-glow),inset 0 1px 0 rgba(255,255,255,0.1),  0 6px 24px rgba(0,0,0,0.55); }
.tile[data-v="2048"]{ background:var(--t2048-bg);color:var(--t2048-fg);box-shadow:0 0 36px var(--t2048-glow),inset 0 1px 0 rgba(255,255,255,0.1),  0 8px 28px rgba(0,0,0,0.6); animation:pulseWin 1.2s ease-in-out infinite alternate; }
.tile[data-v="hi"]  { background:var(--t-hi-bg); color:var(--t-hi-fg); box-shadow:0 0 40px var(--t-hi-glow), inset 0 1px 0 rgba(255,255,255,0.15), 0 8px 32px rgba(0,0,0,0.6); }

@keyframes pulseWin {
  from { box-shadow:0 0 32px var(--t2048-glow),0 6px 24px rgba(0,0,0,0.55); }
  to   { box-shadow:0 0 52px var(--t2048-glow),0 8px 32px rgba(0,0,0,0.6); }
}

/* Tile animations */
.tile-new         { animation:tNew   0.2s  cubic-bezier(0.175,0.885,0.32,1.5) both; }
.tile-merge-anim  { animation:tMerge 0.22s cubic-bezier(0.175,0.885,0.32,1.5) both; }

@keyframes tNew {
  0%   { transform:scale(0.15); opacity:0; }
  70%  { transform:scale(1.12); }
  100% { transform:scale(1);    opacity:1; }
}
@keyframes tMerge {
  0%  { transform:scale(1); }
  45% { transform:scale(1.22); }
  100%{ transform:scale(1); }
}

/* Score bump */
.score-bump { animation:sBump 0.24s ease-out; }
@keyframes sBump {
  0%  { transform:scale(1);   color:var(--text); }
  35% { transform:scale(1.4); color:var(--brand2); }
  100%{ transform:scale(1);   color:var(--text); }
}

/* ═══════════════════════════════════════════════════════
   LEADERBOARD
═══════════════════════════════════════════════════════ */
#leaderboard-screen { justify-content:flex-start; padding:20px 16px 16px; }
.lb-wrap {
  width:100%; max-width:400px; align-self:center;
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; margin-bottom:12px;
}
.lb-wrap::-webkit-scrollbar { width:3px; }
.lb-wrap::-webkit-scrollbar-thumb { background:var(--rim); border-radius:2px; }
.lb-row {
  display:flex; align-items:center;
  padding:12px 14px; margin-bottom:6px;
  background:var(--glass); border:1px solid var(--rim2); border-radius:10px;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.lb-row.me { border-color:var(--brand); background:rgba(124,92,252,0.1); box-shadow:0 0 14px rgba(124,92,252,0.15); }
.lb-rank { font-family:var(--font-display); font-size:0.95rem; font-weight:800; min-width:36px; color:var(--subtext); }
.lb-rank.gold   { color:#f59e0b; }
.lb-rank.silver { color:#94a3b8; }
.lb-rank.bronze { color:#a0522d; }
.lb-name  { flex:1; font-weight:600; font-size:0.88rem; color:var(--text); margin-left:8px; }
.lb-you   { font-size:0.55rem; color:var(--brand2); letter-spacing:1px; margin-left:4px; font-weight:800; }
.lb-score { font-family:var(--font-display); font-weight:800; font-size:0.95rem; color:var(--text); }
.lb-foot  { width:100%; max-width:400px; align-self:center; }

/* ═══════════════════════════════════════════════════════
   OVERLAYS
═══════════════════════════════════════════════════════ */
.overlay {
  position:fixed; inset:0;
  bottom:calc(var(--ad-h) + var(--sab));
  z-index:200;
  background:rgba(10,10,20,0.88);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  backdrop-filter:blur(20px) saturate(1.5);
  display:none; flex-direction:column;
  align-items:center; justify-content:center;
  padding:28px 20px; text-align:center;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.overlay.active { display:flex; animation:screenIn 0.28s ease both; }

.ov-icon  { font-size:3.2rem; margin-bottom:10px; line-height:1; }
.ov-title {
  font-family:var(--font-display);
  font-size:clamp(2rem,8vw,3rem); font-weight:800;
  color:var(--text); margin-bottom:6px; letter-spacing:-0.5px;
}
.ov-title.won {
  background:linear-gradient(135deg, #f59e0b, #fbbf24, #f97316);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.ov-sub { color:var(--subtext); font-size:0.88rem; margin-bottom:22px; line-height:1.5; }
.ov-card {
  background:rgba(255,255,255,0.05); border:1px solid var(--rim);
  border-radius:14px; padding:22px 20px; width:100%; max-width:270px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
}
.ov-score-label {
  font-size:0.58rem; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--subtext); margin-bottom:4px;
}
.ov-score-val {
  font-family:var(--font-display); font-size:2.3rem;
  font-weight:800; color:var(--text); margin-bottom:18px;
}

/* Tutorial */
.dots { display:flex; gap:8px; margin-bottom:20px; justify-content:center; }
.dot  { width:7px; height:7px; border-radius:50%; background:var(--rim); transition:all 0.25s; }
.dot.active { background:var(--brand2); width:20px; border-radius:4px; box-shadow:0 0 8px var(--brand); }
.tut-icon  { font-size:2.4rem; margin-bottom:10px; line-height:1; }
.tut-title { font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:var(--text); margin-bottom:8px; }
.tut-text  { color:var(--subtext); font-size:0.9rem; line-height:1.7; max-width:280px; margin:0 auto 22px; }

/* Win particles */
@keyframes starOut {
  0%  { transform:translate(-50%,-50%) scale(0); opacity:1; }
  75% { opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(2.8) rotate(360deg); opacity:0; }
}
.win-star { position:absolute; font-size:1.4rem; pointer-events:none; animation:starOut 1s ease-out forwards; }

/* ── Responsive — compact phones ── */
@media(max-height:620px) {
  .hero-number  { font-size:4rem; }
  .hero-tagline { margin-bottom:24px; }
  .glass-card   { padding:14px; }
  .btn          { min-height:44px; padding:10px 14px; margin:4px 0; }
  .mode-btn     { min-height:70px; }
}