/* ============================================================
   EmojiDle v3 — Design System (Mobile-First)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600&display=swap');

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overscroll-behavior: none;
}

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --bg:         #07091a;
  --surface:    #0e1028;
  --surface-2:  #161832;
  --surface-3:  #1e2040;
  --border:     rgba(255,255,255,0.07);
  --border-2:   rgba(255,255,255,0.13);
  --text:       #f0f0ff;
  --text-muted: #8888bb;
  --text-faint: #44446a;

  --accent:       #7c4fff;
  --accent-2:     #22d3ee;
  --accent-glow:  rgba(124,79,255,0.35);
  --accent-glass: rgba(124,79,255,0.12);

  --correct:     #22c55e; --correct-bg: #166534;
  --present:     #f59e0b; --present-bg: #854d0e;
  --absent:      #374151; --absent-bg:  #111827;

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --bounce: cubic-bezier(0.34,1.56,0.64,1);
}

[data-theme="light"] {
  --bg: #f0f0f8; --surface: #fff; --surface-2: #f0f0f8; --surface-3: #e4e4f0;
  --border: rgba(0,0,0,0.07); --border-2: rgba(0,0,0,0.13);
  --text: #0e0e20; --text-muted: #606080; --text-faint: #c0c0d0;
  --absent: #9ca3af; --absent-bg: #4b5563;
}

[data-colorblind="true"] {
  --correct: #0ea5e9; --correct-bg: #0c4a6e;
  --present: #f97316; --present-bg: #7c2d12;
}

/* ── App Shell ───────────────────────────────────────────── */
#app {
  width: 100%; height: 100dvh;
  position: relative; overflow: hidden;
  max-width: 480px; margin: 0 auto;
}

/* ── Screens ─────────────────────────────────────────────── */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transform: translateX(40px);
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
  background: var(--bg);
}
.screen.active { opacity: 1; pointer-events: all; transform: translateX(0); }
.screen.exit-left { opacity: 0; transform: translateX(-40px); }


/* ══════════════════════════════════════════════════════
   MAIN MENU
══════════════════════════════════════════════════════ */
.menu-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.blob {
  position: absolute; border-radius: 50%; filter: blur(70px);
  animation: blob-float 12s ease-in-out infinite;
}
.blob-1 { width:280px; height:280px; background:radial-gradient(circle,rgba(124,79,255,.25),transparent 70%); top:-60px; left:-60px; animation-duration:14s; }
.blob-2 { width:220px; height:220px; background:radial-gradient(circle,rgba(34,211,238,.18),transparent 70%); bottom:60px; right:-40px; animation-duration:10s; animation-delay:-3s; }
.blob-3 { width:160px; height:160px; background:radial-gradient(circle,rgba(244,114,182,.15),transparent 70%); top:45%; left:50%; animation-duration:18s; animation-delay:-8s; }

.menu-scroll {
  position: relative; z-index: 1; flex: 1;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Topbar */
.menu-topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; }
.menu-topbar-right { display:flex; gap:4px; }

.ghost-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-muted); cursor: pointer;
  transition: background 140ms, transform 140ms var(--bounce);
}
.ghost-btn:hover { background:rgba(255,255,255,.12); color:var(--text); }
.ghost-btn:active { transform:scale(0.90); }

/* Hero */
.menu-hero { display:flex; flex-direction:column; align-items:center; padding:12px 20px 20px; text-align:center; }
.hero-icon-wrap {
  width:76px; height:76px;
  background: linear-gradient(135deg,var(--surface-2),var(--surface-3));
  border:1px solid var(--border-2); border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 30px var(--accent-glow);
  animation: hero-float 4s ease-in-out infinite;
  margin-bottom:12px;
}
.hero-icon { font-size:40px; }
.hero-logo { font-family:'Outfit',sans-serif; font-size:40px; font-weight:900; letter-spacing:-1.5px; line-height:1; margin-bottom:4px; }
.logo-gradient { background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-tagline { font-size:13px; color:var(--text-muted); font-weight:500; margin-bottom:12px; }

.streak-pill {
  display:inline-flex; align-items:center; gap:5px;
  background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(245,158,11,.05));
  border:1px solid rgba(245,158,11,.3); border-radius:var(--r-full);
  padding:5px 12px;
  font-family:'Outfit',sans-serif; font-size:13px; font-weight:700; color:#f59e0b;
}
.streak-label { font-size:12px; color:rgba(245,158,11,.7); font-weight:500; }

/* Menu body */
.menu-body { padding:0 14px 20px; display:flex; flex-direction:column; gap:12px; }

/* Section label */
.section-label {
  font-family:'Outfit',sans-serif; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:1px; color:var(--text-muted);
  padding-left:2px;
}

/* Daily featured card */
.mode-card-daily {
  background: linear-gradient(var(--surface),var(--surface)) padding-box,
              linear-gradient(135deg,var(--accent),var(--accent-2)) border-box;
  border: 1.5px solid transparent;
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; position: relative; overflow: hidden;
  text-align: left; color: var(--text); width: 100%;
  transition: all 140ms var(--ease);
}
.mode-card-daily:active { transform: scale(0.98); }

.mcd-glow {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(124,79,255,.12),rgba(34,211,238,.08));
  transition: opacity 140ms;
}
.mcd-left { display:flex; align-items:center; gap:14px; }
.mcd-icon { font-size:32px; width:56px; height:56px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; }
.mcd-title { font-family:'Outfit',sans-serif; font-size:17px; font-weight:800; }
.mcd-desc  { font-size:12px; color:var(--text-muted); margin-top:2px; }
.mcd-badge {
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; font-family:'Outfit',sans-serif; font-size:13px; font-weight:700;
  padding:7px 16px; border-radius:var(--r-full); flex-shrink:0;
}

/* Mode tiles 2×2 grid */
.modes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mode-tile {
  background: var(--surface);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 16px 14px;
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; cursor: pointer; position: relative; overflow: hidden;
  text-align: center; color: var(--text);
  transition: all 150ms var(--ease);
  min-height: 120px;
}
.mode-tile:active { transform: scale(0.95); }

.mode-tile-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--mc, #7c4fff) 12%, transparent) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 200ms;
}
.mode-tile.active .mode-tile-glow { opacity: 1; }
.mode-tile.active {
  border-color: var(--mc, #7c4fff);
  box-shadow: 0 0 18px color-mix(in srgb, var(--mc, #7c4fff) 35%, transparent);
}

.mode-tile-icon {
  font-size: 30px; line-height: 1;
  width: 52px; height: 52px;
  background: color-mix(in srgb, var(--mc, #7c4fff) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--mc, #7c4fff) 30%, transparent);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
}
.mode-tile-name { font-family:'Outfit',sans-serif; font-size:14px; font-weight:800; }
.mode-tile-desc { font-size:10px; color:var(--text-muted); line-height:1.3; }
.mode-tile-best { font-size:10px; color:var(--text-faint); margin-top:2px; font-weight:600; }

/* Mode setup (category + start) */
.mode-setup {
  background: var(--surface);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  animation: slide-in-setup 0.3s var(--bounce);
}

.setup-label { font-family:'Outfit',sans-serif; font-size:13px; font-weight:600; color:var(--text-muted); }

.cat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }

.cat-pill {
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--r-md); padding: 8px 3px;
  display: flex; flex-direction: column; align-items: center; gap:3px;
  font-size: 16px; color: var(--text-muted); cursor: pointer;
  transition: all 140ms var(--bounce);
}
.cat-pill span { font-family:'Outfit',sans-serif; font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.2px; }
.cat-pill.active { background:var(--accent-glass); border-color:var(--accent); color:var(--text); box-shadow:0 0 10px var(--accent-glow); }
.cat-pill:active { transform:scale(0.92); }

.btn-start {
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  border: none; border-radius: var(--r-md);
  color: #fff; font-family:'Outfit',sans-serif; font-size:15px; font-weight:700;
  padding: 14px; cursor: pointer; width: 100%;
  box-shadow: 0 4px 18px var(--accent-glow);
  transition: all 140ms var(--ease);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-start:hover { filter:brightness(1.08); transform:translateY(-1px); }
.btn-start:active { transform:translateY(1px); }

.menu-footer { padding:14px; text-align:center; }
.menu-footer-text { font-size:11px; color:var(--text-faint); }

/* Modes howto */
.modes-howto { display:flex; flex-direction:column; gap:8px; }
.mode-howto-row { font-size:13px; color:var(--text-muted); padding:10px 12px; background:var(--surface-2); border-radius:var(--r-md); border:1px solid var(--border); line-height:1.5; }
.mode-howto-row b, .mode-howto-row span { font-weight:700; }


/* ══════════════════════════════════════════════════════
   GAME SCREEN
══════════════════════════════════════════════════════ */
#screen-game { flex-direction:column; height:100dvh; overflow:hidden; }

/* Header */
.game-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; flex-shrink:0;
  border-bottom:1px solid var(--border);
  background:var(--surface); gap:6px;
}

.game-back-btn {
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--text-muted); font-size:22px; font-weight:700;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 140ms; flex-shrink:0; padding-bottom:2px;
}
.game-back-btn:hover { background:var(--surface-3); color:var(--text); }
.game-back-btn:active { transform:scale(0.90); }

.game-header-center { flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; }
.game-mode-badge {
  font-family:'Outfit',sans-serif; font-size:12px; font-weight:800;
  padding:3px 10px; border-radius:var(--r-full); white-space:nowrap;
  background:var(--accent-glass); border:1px solid var(--accent); color:#a78bfa;
}
/* Dynamic badge colors per mode */
.game-mode-badge[data-mode="blitz"]    { background:rgba(245,158,11,.12); border-color:#f59e0b; color:#f59e0b; }
.game-mode-badge[data-mode="marathon"] { background:rgba(34,197,94,.12);  border-color:#22c55e; color:#22c55e; }
.game-mode-badge[data-mode="endless"]  { background:rgba(236,72,153,.12); border-color:#ec4899; color:#ec4899; }
.game-mode-badge[data-mode="practice"] { background:rgba(34,211,238,.12); border-color:#22d3ee; color:#22d3ee; }

.game-progress { font-size:11px; font-weight:600; color:var(--text-faint); font-family:'Outfit',sans-serif; }

.game-header-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* Timer in header */
.header-timer {
  background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.4);
  border-radius:var(--r-sm); padding:4px 8px;
}
.timer-val {
  font-family:'Outfit',sans-serif; font-size:15px; font-weight:800;
  color:#f59e0b; font-variant-numeric:tabular-nums;
  transition:color 0.3s;
}
.timer-val.danger { color:#ef4444; animation:pulse-danger 0.6s ease infinite; }

/* Lives in header */
.header-lives { display:flex; gap:3px; align-items:center; }
.life-heart { font-size:16px; transition: all 0.3s var(--bounce); }
.life-heart.lost { opacity:0.25; filter:grayscale(1); transform:scale(0.8); }

/* Score in header */
.header-score { display:flex; flex-direction:column; align-items:center; }
.score-val { font-family:'Outfit',sans-serif; font-size:15px; font-weight:900; line-height:1; }
.score-pts { font-size:9px; color:var(--text-muted); font-weight:600; text-transform:uppercase; }

/* Streak in header */
.header-streak { font-family:'Outfit',sans-serif; font-size:13px; font-weight:700; color:#f59e0b; }

/* Timer bar */
.timer-bar-wrap {
  height:5px; background:var(--surface-3); flex-shrink:0; overflow:hidden;
}
.timer-bar-fill {
  height:100%; width:100%;
  background:linear-gradient(90deg,#22c55e 0%,#f59e0b 60%,#ef4444 100%);
  background-size:300% 100%; background-position:left;
  transform-origin:left; transition:width 1s linear;
}

/* Attempt dots */
.attempt-bar { display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 16px; flex-shrink:0; }
.attempt-dot { width:7px; height:7px; border-radius:50%; background:var(--surface-3); border:1.5px solid var(--border-2); transition:all 250ms var(--ease); }
.attempt-dot.done-win  { background:var(--correct);  border-color:var(--correct); }
.attempt-dot.done-lose { background:var(--present);  border-color:var(--present); }
.attempt-dot.done-miss { background:var(--absent);   border-color:var(--absent); }
.attempt-dot.current   { background:var(--accent); border-color:var(--accent); box-shadow:0 0 6px var(--accent-glow); transform:scale(1.3); }

/* Emoji display */
.game-emoji-wrap { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 14px 6px; }
.game-category-label { font-family:'Outfit',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-faint); background:var(--surface-2); border:1px solid var(--border); padding:3px 12px; border-radius:var(--r-full); display:flex; gap:4px; align-items:center; }
.game-emoji {
  background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-xl);
  padding:12px 20px; display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:6px; width:100%; min-height:60px;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.emoji-char { font-size:36px; line-height:1; display:inline-block; animation:emoji-pop .5s var(--bounce) forwards; opacity:0; transition:transform .2s var(--bounce); }
.emoji-char:hover { transform:scale(1.2) rotate(-8deg); }
.game-hint-text { font-size:11px; font-weight:600; color:var(--text-faint); min-height:14px; text-align:center; }

/* Guess history */
.guess-history-wrap { flex-shrink:0; padding:0 10px; max-height:110px; overflow-y:auto; }
.guess-history { display:flex; flex-direction:column; gap:3px; align-items:center; }
.history-row { display:flex; gap:3px; align-items:center; flex-wrap:wrap; justify-content:center; animation:slide-in-row .25s var(--bounce); }
.history-tile { width:26px; height:26px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-family:'Outfit',sans-serif; font-size:10px; font-weight:800; color:#fff; flex-shrink:0; }
.history-tile.correct { background:var(--correct-bg); border:1px solid var(--correct); }
.history-tile.present { background:var(--present-bg); border:1px solid var(--present); }
.history-tile.absent  { background:var(--absent-bg);  border:1px solid var(--absent); color:var(--text-muted); }
.history-tile.space   { background:transparent; border:none; width:8px; }

/* Answer slots */
.answer-area { flex-shrink:0; padding:6px 10px; display:flex; align-items:center; justify-content:center; }
.answer-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: center;
  padding: 4px 2px;
  width: 100%;
}
.answer-word {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
.word-sep {
  width: 6px; height: var(--sz, 44px);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.word-sep::after {
  content: '/';
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
}

.answer-slot {
  --sz:44px;
  width:var(--sz); height:var(--sz); border-radius:var(--r-sm);
  border:2px solid var(--border-2); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-size:calc(var(--sz)*.42); font-weight:800; color:var(--text);
  cursor:pointer; transition:all 140ms var(--ease); flex-shrink:0; text-transform:uppercase;
}
.answer-slot.filled { border-color:var(--accent); background:var(--accent-glass); animation:slot-pop .15s var(--bounce); }
.answer-slot.filled:active { transform:scale(0.88); }
.answer-slot.hint-revealed { border-color:#22d3ee !important; background:rgba(34,211,238,.1) !important; box-shadow:0 0 8px rgba(34,211,238,.4); }
.answer-slot.revealed.correct { background:var(--correct-bg); border-color:var(--correct); color:#fff; }
.answer-slot.revealed.present { background:var(--present-bg); border-color:var(--present); color:#fff; }
.answer-slot.revealed.absent  { background:var(--absent-bg);  border-color:var(--absent);  color:var(--text-muted); }
.answer-slot.flip-out { animation:slot-flip-out .2s ease forwards; }
.answer-slot.flip-in  { animation:slot-flip-in  .2s ease forwards; }

.slot-space { width:10px; height:var(--sz,44px); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.slot-space::after { content:''; width:2px; height:40%; background:var(--border-2); border-radius:1px; }

/* Letter pool */
.pool-wrap { flex:1; padding:4px 8px; display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:0; }
.letter-pool { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; align-content:center; width:100%; }

.letter-tile {
  --tsz:48px;
  width:var(--tsz); height:var(--tsz); border-radius:var(--r-sm);
  background:var(--surface-2); border:1.5px solid var(--border-2);
  display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-size:calc(var(--tsz)*.40); font-weight:800; color:var(--text);
  cursor:pointer; transition:all 140ms var(--bounce); text-transform:uppercase; flex-shrink:0;
  box-shadow:0 3px 0 rgba(0,0,0,.3);
}
.letter-tile:hover  { background:var(--surface-3); transform:translateY(-2px); box-shadow:0 5px 0 rgba(0,0,0,.3); }
.letter-tile:active { transform:translateY(2px); box-shadow:none; }
.letter-tile.used   { opacity:.22; cursor:default; transform:none; box-shadow:none; pointer-events:none; }
.letter-tile.hint-tile { border-color:#22d3ee; background:rgba(34,211,238,.08); box-shadow:0 3px 0 rgba(0,0,0,.3),0 0 10px rgba(34,211,238,.3); }

/* Game action bar */
.game-actions {
  flex-shrink:0; display:flex; gap:6px; padding:7px 10px;
  padding-bottom:calc(7px + env(safe-area-inset-bottom));
  background:var(--surface); border-top:1px solid var(--border);
}

.btn-hint-full, .btn-clear, .btn-skip, .btn-submit {
  height:50px; border-radius:var(--r-md); border:none;
  font-family:'Outfit',sans-serif; font-size:13px; font-weight:700;
  cursor:pointer; transition:all 140ms var(--ease);
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.btn-hint-full {
  flex:1.2; background:var(--surface-2); border:1.5px solid var(--border-2); color:var(--text-muted);
}
.btn-hint-full:hover:not(:disabled) { background:rgba(34,211,238,.1); border-color:#22d3ee; color:#22d3ee; }
.btn-hint-full:disabled { opacity:.35; cursor:not-allowed; }

.btn-clear {
  flex:0.7; background:var(--surface-2); border:1.5px solid var(--border-2); color:var(--text-muted); font-size:16px;
}
.btn-clear:hover { background:rgba(239,68,68,.1); border-color:#ef4444; color:#ef4444; }

.btn-skip {
  flex:1; background:var(--surface-2); border:1.5px solid var(--border-2); color:var(--text-muted);
}
.btn-skip:hover { background:rgba(245,158,11,.1); border-color:#f59e0b; color:#f59e0b; }

.btn-submit {
  flex:2; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
  box-shadow:0 4px 16px var(--accent-glow); font-size:14px;
}
.btn-submit:hover:not(:disabled) { filter:brightness(1.1); transform:translateY(-1px); }
.btn-submit:active:not(:disabled) { transform:translateY(1px); }
.btn-submit:disabled { background:var(--surface-3); color:var(--text-faint); box-shadow:none; cursor:not-allowed; }


/* ══════════════════════════════════════════════════════
   PUZZLE TRANSITION OVERLAY
══════════════════════════════════════════════════════ */
.transition-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,9,26,.85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 800;
  animation: overlay-fade-in .2s var(--ease);
}
.transition-overlay[hidden] { display:none !important; }

.transition-card {
  background: var(--surface);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-xl);
  padding: 28px 24px;
  width: calc(100% - 32px); max-width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: card-bounce-in .4s var(--bounce);
  text-align: center;
}

.tr-result-icon { font-size: 56px; line-height: 1; animation: result-pop .5s var(--bounce); }
.tr-label { font-family:'Outfit',sans-serif; font-size: 20px; font-weight: 800; }
.tr-label.correct { color: var(--correct); }
.tr-label.wrong   { color: #ef4444; }

.tr-answer-wrap { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:8px 14px; }
.tr-answer-lbl { font-size:10px; color:var(--text-faint); font-weight:600; text-transform:uppercase; letter-spacing:.8px; margin-bottom:3px; }
.tr-answer { font-family:'Outfit',sans-serif; font-size:17px; font-weight:900; }

.tr-points { font-family:'Outfit',sans-serif; font-size:22px; font-weight:900; color:var(--correct); }
.tr-points.zero { color:var(--text-muted); }

.tr-progress { font-size:12px; color:var(--text-muted); font-weight:600; }

.tr-next-bar-wrap { width:100%; height:4px; background:var(--surface-3); border-radius:2px; overflow:hidden; }
.tr-next-bar { height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:2px; transition:width .05s linear; }
.tr-next-label { font-size:11px; color:var(--text-faint); }


/* ══════════════════════════════════════════════════════
   OVERLAYS / SHEETS
══════════════════════════════════════════════════════ */
.overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  z-index:500; display:flex; align-items:flex-end; justify-content:center;
  animation:overlay-fade-in .2s var(--ease);
}
.overlay[hidden] { display:none !important; }

.sheet {
  background:var(--surface); border:1px solid var(--border-2);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  width:100%; max-width:480px; max-height:88dvh;
  display:flex; flex-direction:column;
  animation:sheet-slide-up .35s var(--bounce);
  overflow:hidden; padding-bottom:env(safe-area-inset-bottom);
}

.sheet-handle { width:36px; height:4px; background:var(--border-2); border-radius:2px; margin:10px auto 0; flex-shrink:0; }

.sheet-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
.sheet-title { font-family:'Outfit',sans-serif; font-size:18px; font-weight:800; }
.sheet-close { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); cursor:pointer; font-size:14px; transition:all 140ms; }
.sheet-close:hover { background:var(--surface-3); color:var(--text); }

.sheet-body { overflow-y:auto; padding:18px; flex:1; }

/* Settings */
.setting-row { display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--border); }
.setting-label { font-family:'Outfit',sans-serif; font-size:15px; font-weight:700; margin-bottom:2px; }
.setting-desc { font-size:12px; color:var(--text-muted); }
.toggle { position:relative; cursor:pointer; }
.toggle input { display:none; }
.toggle-track { display:block; width:48px; height:28px; background:var(--surface-3); border:1.5px solid var(--border-2); border-radius:var(--r-full); position:relative; transition:background 250ms; }
.toggle-thumb { position:absolute; width:20px; height:20px; background:#fff; border-radius:50%; top:3px; left:3px; box-shadow:0 2px 4px rgba(0,0,0,.3); transition:transform 250ms var(--bounce); }
.toggle input:checked + .toggle-track { background:var(--accent); border-color:var(--accent); }
.toggle input:checked + .toggle-track .toggle-thumb { transform:translateX(20px); }
.divider { height:1px; background:var(--border); margin:14px 0; }
.btn-danger { width:100%; padding:13px; background:rgba(239,68,68,.1); border:1.5px solid rgba(239,68,68,.3); border-radius:var(--r-md); color:#ef4444; font-family:'Outfit',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:all 140ms; }
.btn-danger:hover { background:rgba(239,68,68,.2); }

/* Stats */
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
.stat-card { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:14px 12px; text-align:center; }
.stat-val { font-family:'Outfit',sans-serif; font-size:30px; font-weight:900; line-height:1; margin-bottom:3px; }
.stat-lbl { font-size:11px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.dist-row { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.dist-n { font-family:'Outfit',sans-serif; font-size:13px; font-weight:700; width:14px; text-align:center; color:var(--text-muted); }
.dist-bar-bg { flex:1; height:24px; background:var(--surface-3); border-radius:5px; overflow:hidden; }
.dist-bar { height:100%; background:var(--accent); border-radius:5px; display:flex; align-items:center; justify-content:flex-end; padding-right:7px; font-family:'Outfit',sans-serif; font-size:12px; font-weight:700; color:#fff; min-width:26px; transition:width .8s var(--ease); }
.dist-bar.highlight { background:var(--correct-bg); }

/* Mode best scores */
#mode-scores-list { display:flex; flex-direction:column; gap:8px; }
.mode-score-row { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); }
.mode-score-name { font-family:'Outfit',sans-serif; font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; }
.mode-score-val { font-family:'Outfit',sans-serif; font-size:16px; font-weight:800; }

/* Achievements */
#ach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; }
.ach-card { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:10px 6px; text-align:center; }
.ach-card.unlocked { border-color:var(--accent); }
.ach-card-icon { font-size:22px; margin-bottom:3px; }
.ach-card-name { font-family:'Outfit',sans-serif; font-size:10px; font-weight:700; line-height:1.2; }

/* Result sheet */
.result-sheet { max-height:92dvh; }
.result-body { padding:18px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; align-items:center; }
.result-big-emoji, .session-mode-icon { font-size:60px; animation:result-pop .6s var(--bounce); line-height:1; }
.result-heading { font-family:'Outfit',sans-serif; font-size:24px; font-weight:900; letter-spacing:-.5px; text-align:center; }
.result-sub { font-size:14px; color:var(--text-muted); text-align:center; margin-top:-6px; }
.result-answer-box { background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--r-md); padding:12px 18px; text-align:center; width:100%; }
.result-answer-label { font-size:10px; color:var(--text-faint); font-weight:600; text-transform:uppercase; letter-spacing:.8px; margin-bottom:5px; }
.result-answer-val { font-family:'Outfit',sans-serif; font-size:20px; font-weight:900; }
.result-share-grid { display:flex; flex-direction:column; gap:2px; align-items:center; width:100%; }
.result-share-row { display:flex; gap:2px; }
.result-share-tile { width:18px; height:18px; border-radius:3px; flex-shrink:0; }
.result-share-tile.correct { background:var(--correct-bg); }
.result-share-tile.present { background:var(--present-bg); }
.result-share-tile.absent  { background:var(--absent-bg); }
.result-share-tile.space   { background:transparent; width:6px; }
.result-actions { display:flex; flex-direction:column; gap:8px; width:100%; }
.btn-share { background:linear-gradient(135deg,var(--accent),var(--accent-2)); border:none; border-radius:var(--r-md); color:#fff; padding:14px; font-family:'Outfit',sans-serif; font-size:15px; font-weight:700; cursor:pointer; width:100%; box-shadow:0 4px 16px var(--accent-glow); transition:all 140ms; }
.btn-share:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn-next, .btn-menu { background:var(--surface-2); border:1.5px solid var(--border-2); border-radius:var(--r-md); color:var(--text); padding:13px; font-family:'Outfit',sans-serif; font-size:14px; font-weight:700; cursor:pointer; width:100%; transition:all 140ms; }
.btn-next:hover, .btn-menu:hover { background:var(--surface-3); }
.result-countdown-wrap { font-size:13px; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
.result-countdown { font-family:'Outfit',sans-serif; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); }

/* Session result */
.session-new-best { background:linear-gradient(135deg,rgba(34,197,94,.2),rgba(34,211,238,.1)); border:1.5px solid var(--correct); border-radius:var(--r-full); padding:7px 18px; font-family:'Outfit',sans-serif; font-size:14px; font-weight:800; color:var(--correct); }
.session-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; }
.session-stat { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 8px; text-align:center; }
.session-stat-val { font-family:'Outfit',sans-serif; font-size:24px; font-weight:900; line-height:1; margin-bottom:3px; }
.session-stat-lbl { font-size:10px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }

/* Achievement popup */
#achievement-popup { position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(200px); background:var(--surface); border:1.5px solid var(--accent); border-radius:var(--r-lg); padding:14px 18px; display:flex; align-items:center; gap:12px; box-shadow:0 8px 32px var(--accent-glow); z-index:700; max-width:320px; width:calc(100% - 32px); animation:ach-slide-in .5s var(--bounce) forwards; }
#achievement-popup[hidden] { display:none; }
.ach-icon { font-size:34px; }
.ach-badge-label { font-family:'Outfit',sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:#a78bfa; margin-bottom:2px; }
.ach-name { font-family:'Outfit',sans-serif; font-size:15px; font-weight:800; }
.ach-desc { font-size:12px; color:var(--text-muted); }

/* Toast */
#toast-container { position:fixed; top:68px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:5px; z-index:600; pointer-events:none; width:calc(100% - 28px); max-width:360px; }
.toast { background:var(--text); color:var(--bg); padding:9px 16px; border-radius:var(--r-full); font-family:'Outfit',sans-serif; font-size:13px; font-weight:700; box-shadow:0 4px 20px rgba(0,0,0,.4); animation:toast-in .3s var(--bounce); text-align:center; }
.toast.success { background:var(--correct); color:#fff; }
.toast.error   { background:#ef4444; color:#fff; }
.toast.warning { background:var(--present); color:#000; }
.toast.fade-out { animation:toast-out .25s var(--ease) forwards; }

/* Confetti */
#confetti-canvas { position:fixed; inset:0; pointer-events:none; z-index:400; }

/* Scrollbar */
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:2px; }

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes blob-float { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(20px,-30px) scale(1.05)} 66%{transform:translate(-15px,20px) scale(.95)} }
@keyframes hero-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes emoji-pop  { 0%{opacity:0;transform:scale(.3) rotate(-15deg)} 60%{opacity:1;transform:scale(1.15) rotate(3deg)} 100%{opacity:1;transform:scale(1) rotate(0deg)} }
@keyframes slot-pop   { 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }
@keyframes slot-flip-out { 0%{transform:scaleY(1)} 100%{transform:scaleY(0)} }
@keyframes slot-flip-in  { 0%{transform:scaleY(0)} 100%{transform:scaleY(1)} }
@keyframes slide-in-row  { from{opacity:0;transform:translateY(-8px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes slide-in-setup { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-10px)} 35%{transform:translateX(9px)} 55%{transform:translateX(-7px)} 75%{transform:translateX(5px)} 90%{transform:translateX(-3px)} }
@keyframes bounce-row { 0%,100%{transform:translateY(0)} 25%{transform:translateY(-8px)} 50%{transform:translateY(-3px)} 75%{transform:translateY(-5px)} }
@keyframes sheet-slide-up { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes overlay-fade-in { from{opacity:0} to{opacity:1} }
@keyframes card-bounce-in { from{opacity:0;transform:scale(.85) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes toast-in  { from{opacity:0;transform:scale(.85) translateY(-6px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes toast-out { from{opacity:1;transform:scale(1) translateY(0)} to{opacity:0;transform:scale(.9) translateY(-6px)} }
@keyframes result-pop { 0%{transform:scale(.2) rotate(-20deg)} 60%{transform:scale(1.2) rotate(5deg)} 100%{transform:scale(1) rotate(0deg)} }
@keyframes ach-slide-in { from{transform:translateX(-50%) translateY(200px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }
@keyframes pulse-danger { 0%,100%{opacity:1} 50%{opacity:.4} }

@media (max-width:360px) {
  .cat-grid { grid-template-columns:repeat(6,1fr); gap:4px; }
  .letter-tile { --tsz:40px; }
  .answer-slot { --sz:36px; }
}
@media (min-height:760px) {
  .game-emoji-wrap { padding:14px 14px 8px; }
  .emoji-char { font-size:40px; }
}