/* =========================================================================
   Cinematic: full-bleed scene photos, night-blue shades, cream type, one saffron action color
   Design tokens are the single source of truth: never hardcode a raw hex,
   a raw shadow or an ad-hoc pixel gap in a component rule below.
   ========================================================================= */

:root {
  /* ---- Color: "cinematic" palette, pulled from the scene photos ---- */
  --bg: #F7F3EC;            /* warm paper ground for content areas */
  --bg-tint: #EFE8DC;
  --surface: #FFFFFF;
  --surface-sunk: #F1EBE1;

  --ink: #1B1712;           /* warm near-black — 16:1 on --bg */
  --muted: #5E554A;         /* 6.8:1 on --bg */
  --border: #E6DDCF;
  --border-strong: #D3C6B3;

  --primary: #1F2B45;       /* night blue — white text 13:1 */
  --primary-dark: #1F2B45;
  --primary-darker: #121A2C;
  --primary-tint: #E6E9F0;
  --primary-ink: #1F2B45;

  --success: #7BC8A4;       /* soft mint — always with --ink */
  --success-dark: #2E7D5B;
  --success-tint: #E1F2E9;
  --success-ink: #1F5C42;

  --accent: #E9A23B;        /* saffron — the one action color, always with --ink (8.6:1) */
  --accent-tint: #FBEBD0;

  --accent2: #6E527F;       /* muted plum — white text 6.6:1 */
  --accent2-tint: #EEE8F2;

  --sky: #9DB4D6;
  --sky-tint: #E6ECF5;
  --sky-ink: #2E4A75;

  --pink: #F2A0A8;          /* soft rose: wrong answer / word needs strengthening */
  --danger: #D4545F;
  --danger-dark: #B23A46;
  --danger-tint: #FBE5E7;
  --danger-ink: #8E2532;

  --focus: #1F2B45;

  /* mastery scale: differs in lightness, not just hue */
  --m-0: #FFFFFF;
  --m-12: #C9D2E2;
  --m-34: #6C7FA3;
  --m-5: #1F2B45;

  /* dark photographic surfaces (hero, game stage) */
  --night: #0E1626;
  --stage: #0E1626;
  --on-stage: #F6EFE4;      /* cream on night — 15:1 */
  --on-stage-muted: #CFC6B8;
  --glass: rgba(246, 239, 228, .14);
  --glass-strong: rgba(14, 22, 38, .55);

  /* ---- Spacing: 4pt scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radius ---- */
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Elevation: one soft warm scale, low -> high ---- */
  --shadow-sm: 0 1px 2px rgba(22, 18, 58, .06), 0 2px 6px rgba(22, 18, 58, .07);
  --shadow: 0 2px 8px rgba(22, 18, 58, .12);
  --shadow-md: 0 6px 18px rgba(22, 18, 58, .14);
  --shadow-lg: 0 8px 24px rgba(22, 18, 58, .16);
  --shadow-xl: 0 16px 40px rgba(22, 18, 58, .20);
  --shadow-inset: inset 0 -3px 0 rgba(22, 18, 58, .10);

  /* ---- Type ---- */
  --font-display: "Frank Ruhl Libre", "David Libre", Georgia, serif;
  --font-body: "Rubik", "Segoe UI", Arial, sans-serif;
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);   /* decelerate on arrival */
  --ease-in: cubic-bezier(0.5, 0, 0.9, 0.4);    /* accelerate on leaving */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --flip-ease: cubic-bezier(0.45, 0.05, 0.15, 1);

  /* ---- Layering ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-overlay: 1000;

  /* ---- Layout ---- */
  --container: 1000px;
  --tap: 44px; /* minimum touch target */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.6;
  direction: rtl;
  min-height: 100%;
  overflow-x: clip; /* full-bleed scenes use 100vw, which includes the scrollbar width */
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0;
  text-wrap: balance;
}

#app {
  --app-pad: var(--space-4);
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--app-pad) var(--app-pad) var(--space-16);
  min-height: 100vh;
  min-height: 100dvh;
}

::selection { background: var(--accent); color: var(--ink); }

/* Focus: never removed, only restyled (focus-states / focus-appearance) */
:where(a, button, input, select, textarea, [tabindex], [role="button"]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Every tappable surface gets instant, non-reflowing press feedback */
button,
[role="button"],
.card,
.game-card,
.study-banner,
.level-node,
.memory-card-outer,
.match-item,
.letter-tile,
.tile-slot,
.study-cell,
.association-card {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }

/* ===== Inline SVG icon system (one family: 24px box, ~1.85 stroke, round caps) ===== */
.icon-svg {
  width: 1.35em;
  height: 1.35em;
  flex: none;
  display: block;
  overflow: visible;
}
.icon-svg.is-sm { width: 1.1em; height: 1.1em; }
.icon-svg.is-lg { width: 1.6em; height: 1.6em; }

/* ===== Topbar ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-3);
  flex-wrap: wrap;
}

.topbar h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.xp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  background: var(--accent-tint);
  border: 2px solid var(--accent);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.xp-badge .icon-svg { color: var(--ink); }

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.back-btn:hover { background: var(--bg-tint); box-shadow: var(--shadow); }
.back-btn:active { transform: scale(0.97); box-shadow: var(--shadow-sm); }

/* ===== Generic grid / cards ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
}

.card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 700;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card:hover:not(.locked) { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card:active:not(.locked) { transform: scale(0.98); box-shadow: var(--shadow-sm); }
.card.locked {
  cursor: not-allowed;
  background: var(--surface-sunk);
  color: var(--muted);
  box-shadow: none;
}
.card .sub {
  display: block;
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: var(--space-1);
}

.game-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: start;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-4);
  min-height: 132px;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.game-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
.game-card:active { transform: scale(0.98); box-shadow: var(--shadow); }
.game-card .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-3);
  background: var(--primary-tint);
  color: var(--primary-dark);
  border-radius: var(--radius-sm);
  font-size: 1.5rem;
}
.game-card h3 { margin: 0 0 var(--space-1); color: var(--ink); font-size: var(--fs-md); }
.game-card p { margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 400; line-height: 1.5; }

/* Fixed column counts so rows stay visually balanced at every breakpoint */
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: 780px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
}
@media (max-width: 420px) {
  .game-grid { grid-template-columns: 1fr; max-width: 380px; }
}

/* ===== Entrance stagger (30-50ms per item), skipped under reduced motion ===== */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.stagger-in > * { animation: rise-in var(--dur-slow) var(--ease-out) both; }
.stagger-in > *:nth-child(1) { animation-delay: 0ms; }
.stagger-in > *:nth-child(2) { animation-delay: 40ms; }
.stagger-in > *:nth-child(3) { animation-delay: 80ms; }
.stagger-in > *:nth-child(4) { animation-delay: 120ms; }
.stagger-in > *:nth-child(5) { animation-delay: 160ms; }
.stagger-in > *:nth-child(6) { animation-delay: 200ms; }
.stagger-in > *:nth-child(7) { animation-delay: 240ms; }
.stagger-in > *:nth-child(8) { animation-delay: 280ms; }
.stagger-in > *:nth-child(9) { animation-delay: 320ms; }
.stagger-in > *:nth-child(10) { animation-delay: 360ms; }
.stagger-in > *:nth-child(n + 11) { animation-delay: 400ms; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  background: var(--primary-dark);
  color: #fff;
  border: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 700;
  box-shadow: var(--shadow), var(--shadow-inset);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover:not(:disabled) { background: var(--primary-darker); box-shadow: var(--shadow-md), var(--shadow-inset); }
.btn:active:not(:disabled) { transform: scale(0.97); box-shadow: var(--shadow-sm); }

.btn.secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn.secondary:hover:not(:disabled) { background: var(--bg-tint); box-shadow: var(--shadow); }

.btn.accent { background: var(--sky); color: var(--ink); }
.btn.accent:hover:not(:disabled) { background: #6A7DE6; }

.btn.danger { background: var(--danger-dark); color: #fff; }
.btn.danger:hover:not(:disabled) { background: #A3134A; }

.btn.ghost {
  background: transparent;
  color: var(--primary-ink);
  border: none;
  box-shadow: none;
}
.btn.ghost:hover:not(:disabled) { background: var(--primary-tint); box-shadow: none; }

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== HUD ===== */
.hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  min-height: var(--tap);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.hud .mistakes { color: var(--danger-ink); }
.hud .score { color: var(--primary-ink); }

/* ===== Lives (SVG hearts; filled = intact, cracked outline = lost) ===== */
.lives {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.life-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--danger);
  transform-origin: 50% 60%;
}
.life-dot .icon-svg { width: 24px; height: 24px; }
.life-dot .heart-fill { fill: currentColor; }
.life-dot.lost { color: var(--border-strong); transform: scale(0.88) rotate(10deg); }
.life-dot.lost .heart-fill { fill: none; }
.life-dot.lost-new { animation: life-lost-pop 0.55s var(--ease-spring); }
@keyframes life-lost-pop {
  0% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(1.5) rotate(-14deg); }
  100% { transform: scale(0.88) rotate(10deg); }
}

.prompt-word {
  text-align: center;
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  margin: var(--space-2) 0 var(--space-6);
  overflow-wrap: anywhere;
}

/* ===== Result screen ===== */
.result-screen {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-10) var(--space-5);
  margin-top: var(--space-5);
  max-width: 560px;
  margin-inline: auto;
}
.result-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  margin-bottom: var(--space-4);
  background: var(--accent-tint);
  color: var(--ink);
}
.result-medal .icon-svg { width: 40px; height: 40px; }
.result-screen.is-lost .result-medal { background: var(--danger-tint); color: var(--danger-ink); }
.result-screen h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: 2.2rem;
  line-height: 1.1;
  margin: 0 0 var(--space-2);
}
.result-screen p { margin: 0; color: var(--muted); font-size: var(--fs-md); }
.result-screen .actions { margin-top: var(--space-6); }

/* ===== Level path (home) ===== */
.level-path {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-5) 0 var(--space-8);
}
.level-path::before {
  content: "";
  position: absolute;
  top: var(--space-8);
  bottom: var(--space-8);
  right: 50%;
  width: 6px;
  transform: translateX(50%);
  background-image: linear-gradient(var(--border-strong) 58%, transparent 0%);
  background-size: 6px 22px;
  background-repeat: repeat-y;
  border-radius: var(--radius-pill);
  z-index: var(--z-base);
}
.level-node-row {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  display: flex;
  margin: var(--space-1) 0;
}
.level-node-row.align-right { justify-content: flex-end; padding-left: 8%; }
.level-node-row.align-left { justify-content: flex-start; padding-right: 8%; }
.level-node-row.align-center { justify-content: center; }

.level-node {
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  box-shadow: var(--shadow-md), inset 0 -4px 0 rgba(22, 18, 58, .14);
  background: var(--primary-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font-weight: 800;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.level-node .num { font-size: var(--fs-xl); line-height: 1; }
.level-node .lbl { font-size: var(--fs-xs); font-weight: 500; line-height: 1.1; }
.level-node .icon-svg { width: 18px; height: 18px; }
.level-node:hover:not(.locked) { transform: translateY(-5px) scale(1.04); box-shadow: var(--shadow-xl), inset 0 -4px 0 rgba(22, 18, 58, .14); }
.level-node:active:not(.locked) { transform: scale(0.97); box-shadow: var(--shadow), inset 0 -2px 0 rgba(22, 18, 58, .14); }
.level-node.locked {
  cursor: not-allowed;
  background: var(--surface-sunk);
  color: var(--muted);
  box-shadow: none;
  border: 1px solid var(--border-strong);
}
.level-node.c1 { background: var(--primary-dark); color: #fff; }
.level-node.c2 { background: var(--success-dark); color: #fff; }
.level-node.c3 { background: var(--accent2); color: #fff; }
.level-node.c4 { background: var(--sky); color: var(--ink); }
.level-node.c0 { background: var(--accent); color: var(--ink); }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.level-node.current:not(.locked) { animation: bob 1.8s ease-in-out infinite; }
.level-node.current:not(.locked)::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  pointer-events: none;
}

/* ===== Memory match ===== */
.memory-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.memory-grid {
  display: grid;
  gap: var(--space-2);
  width: 100%;
}
.memory-card-outer {
  perspective: 900px;
  cursor: pointer;
  min-height: var(--tap);
}
.memory-card-outer.matched { cursor: default; }
.memory-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.45s var(--flip-ease);
  transform-style: preserve-3d;
}
.memory-card-outer.flipped .memory-card-inner,
.memory-card-outer.matched .memory-card-inner {
  transform: rotateY(180deg);
}
.memory-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-1);
  font-weight: 700;
  font-size: clamp(0.75rem, 2vw, 1rem);
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-sm);
}
.memory-card-front {
  background: var(--primary);
  color: var(--accent);
}
.memory-card-front .icon-svg { width: 26px; height: 26px; }
.memory-card-front .star-fill { fill: currentColor; }
.memory-card-back {
  background: var(--surface);
  color: var(--ink);
  transform: rotateY(180deg);
}
/* Side-coded so a flip instantly reads as "Arabic transliteration" vs "Hebrew meaning" */
.memory-card-back.side-translit {
  background: var(--sky-tint);
  border-color: var(--sky);
  color: var(--sky-ink);
}
.memory-card-back.side-meaning {
  background: var(--primary-tint);
  border-color: var(--primary);
  color: var(--primary-ink);
}
.memory-card-outer.matched .memory-card-back {
  animation: memory-match-glow 0.8s var(--ease-out) forwards;
}
@keyframes memory-match-glow {
  0% { background: var(--success-tint); border-color: var(--success); color: var(--success-ink); }
  100% { background: var(--success-dark); border-color: var(--success-dark); color: #fff; }
}
.memory-card-outer.mismatch { animation: memory-shake 0.5s ease-in-out; }
.memory-card-outer.mismatch .memory-card-back {
  background: var(--danger-tint);
  border-color: var(--danger);
  color: var(--danger-ink);
}
@keyframes memory-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.memory-turn-hud { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.player-scores { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.player-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-sunk);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--muted);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
.player-badge.active {
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow);
  transform: scale(1.04);
}
.player-badge.p0.active { background: var(--primary-dark); }
.player-badge.p1.active { background: var(--accent2); }
.player-badge.p2.active { background: var(--sky); color: var(--ink); }

/* ===== Player-name entry (multiplayer memory) ===== */
.name-entry-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  max-width: 340px;
  margin: 0 auto;
}
.name-entry-field { display: flex; flex-direction: column; gap: var(--space-1); }
.name-entry-label { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.name-entry-input {
  font-size: var(--fs-base);
  font-weight: 700;
  font-family: inherit;
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-strong);
  width: 100%;
  text-align: center;
  direction: rtl;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.name-entry-input:hover { box-shadow: var(--shadow); }
.name-entry-input.p0 { border-color: var(--primary); }
.name-entry-input.p1 { border-color: var(--accent2); }
.name-entry-input.p2 { border-color: var(--sky); }

/* ===== Multiple choice ===== */
.options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  max-width: 560px;
  margin: 0 auto;
}
.option-btn {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
  min-height: 60px;
  font-size: var(--fs-base);
  font-weight: 700;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.option-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.option-btn:active:not(:disabled) { transform: scale(0.98); box-shadow: var(--shadow-sm); }
.option-btn.correct { background: var(--success-tint); border-color: var(--success); color: var(--success-ink); }
.option-btn.wrong { background: var(--danger-tint); border-color: var(--danger); color: var(--danger-ink); }
.option-btn:disabled { cursor: default; transform: none; }

/* ===== Matching ===== */
.match-columns {
  display: flex;
  gap: var(--space-6);
  justify-content: center;
}
.match-col { display: flex; flex-direction: column; gap: var(--space-2); width: 220px; }
.match-item {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-2);
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  overflow-wrap: anywhere;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.match-item:hover:not(.matched) { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.match-item.selected {
  background: var(--accent-tint);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.match-item.matched {
  border-color: var(--success);
  background: var(--success-tint);
  color: var(--success-ink);
  cursor: default;
  box-shadow: none;
}
.match-item.wrong-flash {
  border-color: var(--danger);
  background: var(--danger-tint);
  color: var(--danger-ink);
  animation: shake-x 0.35s var(--ease-out);
}
@keyframes shake-x {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ===== Type answer ===== */
.type-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.type-input {
  font-size: var(--fs-lg);
  font-weight: 700;
  font-family: inherit;
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-strong);
  width: 100%;
  max-width: 340px;
  text-align: center;
  direction: rtl;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.type-input::placeholder { color: var(--muted); font-weight: 400; font-size: var(--fs-base); }
.type-input.correct { border-color: var(--success); background: var(--success-tint); }
.type-input.wrong { border-color: var(--danger); background: var(--danger-tint); animation: shake-x 0.35s var(--ease-out); }
.type-input[readonly] { background: var(--surface-sunk); }
.type-input.correct[readonly] { background: var(--success-tint); }
.type-input.wrong[readonly] { background: var(--danger-tint); }
.feedback-msg {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
  min-height: 1.6em;
  font-weight: 700;
  font-size: var(--fs-sm);
  text-align: center;
}
.feedback-msg.correct { color: var(--success-ink); }
.feedback-msg.wrong { color: var(--danger-ink); }

/* ===== Letter building ===== */
.tile-slots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-height: 56px;
  margin-bottom: var(--space-5);
}
.tile-slot {
  width: 48px;
  height: var(--tap);
  border: 2px dashed var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.tile-slot.active {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-tint);
  box-shadow: var(--shadow);
}
.tile-slot.wrong {
  border-color: var(--danger);
  border-style: solid;
  color: var(--danger-ink);
  background: var(--danger-tint);
  animation: shake-x 0.35s var(--ease-out);
}
.tile-slot.correct {
  border-color: var(--success);
  border-style: solid;
  color: var(--success-ink);
  background: var(--success-tint);
}
.tile-pool {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.letter-tile {
  min-width: 48px;
  height: var(--tap);
  padding: 0 var(--space-2);
  background: var(--accent);
  color: var(--ink);
  border: none;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow), inset 0 -3px 0 rgba(22, 18, 58, .14);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.letter-tile:hover:not(.used) { transform: translateY(-3px); box-shadow: var(--shadow-md), inset 0 -3px 0 rgba(22, 18, 58, .14); }
.letter-tile:active:not(.used) { transform: scale(0.96); box-shadow: var(--shadow-sm); }
.letter-tile.used { opacity: 0.25; cursor: default; box-shadow: none; }

/* ===== Falling words ===== */
.falling-field {
  position: relative;
  width: 100%;
  height: 420px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  touch-action: none;
}
.falling-field-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(22, 18, 58, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 18, 58, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.falling-word {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--shadow);
  will-change: transform;
}
.falling-word.lane-a { border-color: var(--accent2); }
.falling-word.lane-b { border-color: var(--sky); }
.falling-word.lane-c { border-color: var(--primary); }
.falling-word.caught-correct { animation: catch-glow 0.35s var(--ease-out) forwards; z-index: var(--z-raised); }
.falling-word.caught-wrong {
  animation: shake 0.35s var(--ease-out) forwards;
  background: var(--danger-tint);
  border-color: var(--danger);
  color: var(--danger-ink);
  z-index: var(--z-raised);
}
@keyframes catch-glow {
  0% { background: var(--surface); transform: translate(var(--cx), var(--cy)) scale(1); }
  40% { background: var(--success-tint); border-color: var(--success); transform: translate(var(--cx), var(--cy)) scale(1.28); }
  100% { background: var(--success-tint); border-color: var(--success); transform: translate(var(--cx), var(--cy)) scale(1.05); opacity: 0.9; }
}
@keyframes shake {
  0%, 100% { transform: translate(var(--cx), var(--cy)); }
  20% { transform: translate(calc(var(--cx) - 7px), var(--cy)); }
  40% { transform: translate(calc(var(--cx) + 7px), var(--cy)); }
  60% { transform: translate(calc(var(--cx) - 5px), var(--cy)); }
  80% { transform: translate(calc(var(--cx) + 5px), var(--cy)); }
}
.catcher {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 96px;
  height: 38px;
  will-change: transform;
}
.catcher-glow {
  position: absolute;
  inset: -12px;
  background: radial-gradient(closest-side, rgba(255, 210, 63, 0.55), transparent 70%);
  filter: blur(6px);
  animation: catcher-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes catcher-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.1); }
}
.catcher-body {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--accent);
  border-radius: 14px 14px 22px 22px;
  box-shadow: var(--shadow-md), inset 0 -6px 0 rgba(22, 18, 58, 0.22);
  overflow: hidden;
}
.catcher-shine {
  position: absolute;
  top: 3px;
  left: var(--space-2);
  right: var(--space-2);
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
  border-radius: var(--radius-xs);
  pointer-events: none;
}
.falling-hint {
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.5;
  margin-top: var(--space-2);
  max-width: 62ch;
  margin-inline: auto;
}
.icon-btn-pair { gap: var(--space-4); }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
}

/* ===== Banners (study / associations / progress / saved set) ===== */
.study-banner {
  display: flex;
  width: 100%;
  text-align: start;
  font-family: inherit;
  align-items: center;
  gap: var(--space-4);
  background: var(--accent2);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 -3px 0 rgba(22, 18, 58, .14);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  min-height: 76px;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.study-banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), inset 0 -3px 0 rgba(22, 18, 58, .14); }
.study-banner:active { transform: scale(0.99); box-shadow: var(--shadow-sm); }
.study-banner .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  color: #fff;
}
.study-banner .icon .icon-svg { width: 28px; height: 28px; }
.study-banner h3 { margin: 0 0 2px; color: inherit; font-size: var(--fs-md); }
.study-banner p { margin: 0; font-size: var(--fs-sm); font-weight: 400; opacity: 0.92; line-height: 1.45; }
.study-banner.assoc-banner { background: var(--primary-dark); }
.study-banner.saved-set-banner { background: var(--success-dark); }
.study-banner.progress-banner { background: var(--sky); color: var(--ink); }
.study-banner.progress-banner .icon { background: rgba(22, 18, 58, 0.14); color: var(--ink); }

/* ===== "My progress" screen ===== */
.progress-top-badges {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.progress-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-variant-numeric: tabular-nums;
}
.progress-badge.streak { background: var(--sky-tint); border-color: var(--sky); }
.progress-badge.streak .icon-svg { color: var(--primary-dark); }
.progress-badge.xp { background: var(--accent-tint); border-color: var(--accent); }
.progress-badge.xp .icon-svg { color: var(--ink); }

.progress-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}
@media (max-width: 640px) {
  .progress-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.progress-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-2);
  text-align: center;
}
.progress-stat .num {
  display: block;
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.progress-stat .lbl { display: block; margin-top: var(--space-2); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.progress-stat.band-0 .num { color: var(--muted); }
.progress-stat.band-12 .num { color: var(--danger-ink); }
.progress-stat.band-34 .num { color: var(--accent2); }
.progress-stat.band-5 .num { color: var(--success-ink); }

.section-title {
  font-size: var(--fs-md);
  color: var(--ink);
  margin: var(--space-6) 0 var(--space-3);
}

.leech-flag {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--danger-tint);
  color: var(--danger-ink);
  border: 1px solid var(--danger);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
.leech-flag .icon-svg { width: 14px; height: 14px; }

/* ===== Visual associations gallery ===== */
.assoc-practice-btn {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto var(--space-6);
}

.association-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 720px) {
  .association-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .association-grid { grid-template-columns: 1fr; }
}
.association-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.association-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.association-thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.association-card img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.association-explanation {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  border-top: 1px solid var(--border);
}

/* ===== Lightbox ===== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 18, 58, 0.9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  z-index: var(--z-overlay);
  padding: var(--space-6);
  overflow-y: auto;
  cursor: zoom-out;
}
.lightbox-img {
  max-width: 92vw;
  max-height: 74vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  cursor: default;
  background: var(--surface);
}
.lightbox-caption {
  max-width: 640px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  cursor: default;
}
.lightbox-close {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
}

/* ===== Study page / tables ===== */
.study-page {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.study-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.study-controls .btn { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); }

.sync-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.sync-status.active {
  color: var(--success-ink);
  background: var(--success-tint);
  border-color: var(--success);
  border-style: solid;
}

.study-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.study-row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: var(--space-1);
}
.study-row.study-header {
  background: var(--accent-tint);
  border-color: var(--accent);
  box-shadow: none;
  padding: var(--space-2) var(--space-1);
}
.study-row-num {
  width: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 700;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.study-row-check {
  width: var(--tap);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.study-checkbox {
  width: 24px;
  height: 24px;
  accent-color: var(--accent2);
  cursor: pointer;
}
.study-cell-header {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.study-cell {
  position: relative;
  flex: 1;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border-radius: var(--radius-xs);
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  overflow-wrap: anywhere;
  transition: background var(--dur-fast) var(--ease-out);
}
.study-cell-arabic { background: var(--primary-tint); color: var(--primary-ink); }
.study-cell-hebrew { background: var(--success-tint); color: var(--success-ink); }
.study-text { transition: opacity var(--dur-fast) var(--ease-out); }
.study-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.study-overlay .icon-svg { width: 22px; height: 22px; }
.study-cell.masked .study-text { opacity: 0; }
.study-cell.masked .study-overlay { opacity: 1; }

.study-row-mastered {
  width: 104px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mastered-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
  font-size: var(--fs-xs);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.mastered-btn .icon-svg { width: 14px; height: 14px; }
.mastered-btn:hover { background: var(--bg-tint); }
.mastered-btn.active {
  background: var(--success-tint);
  border-color: var(--success);
  color: var(--success-ink);
}
.study-row.mastered-row { opacity: 0.65; }

/* ===== Round setup flow (mode select / manual picker / pre-game study) ===== */
.flow-title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.15;
  color: var(--ink);
  margin: var(--space-1) 0 var(--space-5);
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  color: var(--primary-ink);
  font-weight: 700;
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  padding: var(--space-3) var(--space-2);
  min-height: var(--tap);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-2);
  transition: background var(--dur-fast) var(--ease-out);
}
.back-link:hover { background: var(--primary-tint); }
.back-link.is-centered {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto var(--space-4);
}
.mode-select .game-grid { max-width: 820px; }
.manual-picker .study-table,
.pregame-study .study-table {
  max-height: 55vh;
  overflow-y: auto;
  padding: 2px;
}

/* centers a pill button on its own line without breaking its inline-flex layout */
.block-center {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin: var(--space-5) auto 0;
}
.stack-gap { margin-top: var(--space-4); }

/* ===== "E" additions: buttons, speech bubble, game stage, session HUD, end screen ===== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Primary call to action: sun yellow with ink text (12.6:1) */
.btn.cta {
  background: var(--accent);
  color: var(--ink);
  font-weight: 800;
  min-height: 52px;
  border-radius: 18px;
  box-shadow: none;
}
.btn.cta:hover:not(:disabled) { background: #FFC61A; box-shadow: none; }
.btn.outline {
  background: transparent;
  color: var(--primary);
  font-weight: 800;
  min-height: 50px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 2.5px var(--primary);
}
.btn.outline:hover:not(:disabled) { background: var(--primary-tint); box-shadow: inset 0 0 0 2.5px var(--primary); }

/* Speech bubble: the motif for "spoken" Arabic — a rounded card with a small tail */
.bubble { position: relative; }
.bubble::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 40px;
  width: 22px;
  height: 22px;
  background: inherit;
  border-radius: 4px;
  transform: rotate(45deg);
}

.prompt-word.bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  background: var(--surface);
  color: var(--ink);
  border-radius: 30px;
  padding: var(--space-6) var(--space-5) var(--space-8);
  margin: 0 auto var(--space-8);
  max-width: 560px;
}
.prompt-label { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.prompt-text { font-size: clamp(2.2rem, 9vw, 3.6rem); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; text-align: center; }
.prompt-word.bubble.is-compact { padding: var(--space-4) var(--space-5) var(--space-5); margin-bottom: var(--space-6); }
.prompt-word.bubble.is-compact .prompt-text { font-size: clamp(1.8rem, 7vw, 2.6rem); }

/* ---- The cobalt game stage (only while a round is being played) ---- */
.game-stage {
  background: var(--stage);
  color: var(--on-stage);
  border-radius: 32px;
  padding: var(--space-5) var(--space-4) var(--space-8);
  --focus: var(--accent);
}
.game-stage .flow-title { color: var(--on-stage); }
.game-stage .falling-hint,
.game-stage .stage-hint,
.game-stage .name-entry-label { color: var(--on-stage-muted); }
.game-stage .back-link { color: var(--on-stage); }
.game-stage .back-link:hover { background: rgba(255, 255, 255, .14); }
.game-stage .btn:not(.cta):not(.secondary) { background: var(--accent); color: var(--ink); }
.game-stage .btn.secondary { border-color: transparent; }
.game-stage .hud { background: rgba(255, 255, 255, .14); border-color: transparent; color: var(--on-stage); box-shadow: none; }
.game-stage .falling-field { border-color: transparent; }
.stage-hint { text-align: center; margin: 0 0 var(--space-4); font-size: var(--fs-sm); }

.game-stage .option-btn,
.game-stage .match-item { border-color: transparent; }
.option-btn { min-height: 72px; border-radius: 22px; font-size: var(--fs-md); }
.option-btn.correct { background: var(--success); border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }
.option-btn.wrong { background: var(--pink); border-color: transparent; color: var(--ink); animation: shake-x 0.35s var(--ease-out); }
.option-btn.dimmed { opacity: .45; }
.match-item { font-family: inherit; color: var(--ink); width: 100%; }
.match-item.matched { background: var(--success); border-color: transparent; color: var(--ink); }
.match-item.wrong-flash { background: var(--pink); border-color: transparent; color: var(--ink); }

.game-stage .feedback-msg { padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); }
.game-stage .feedback-msg:empty { padding: 0; }
.game-stage .feedback-msg.correct { background: var(--success); color: var(--ink); }
.game-stage .feedback-msg.wrong { background: var(--pink); color: var(--ink); }
.type-form .btn.cta { min-width: 180px; }

/* ---- Session HUD: progress segments, hearts, score, multiplier ---- */
.session-hud { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); }
.session-top { display: flex; align-items: center; gap: var(--space-3); }
.session-progress { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.session-progress .seg { height: 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .22); transition: background var(--dur) var(--ease-out); }
.session-progress .seg.is-done { background: var(--accent); }
.session-progress .seg.is-current { background: var(--on-stage); }
.session-lives { display: flex; gap: 2px; }
.session-lives .life-dot { color: var(--pink); }
.session-lives .life-dot.lost { color: rgba(255, 255, 255, .35); }
.session-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); }
.session-score { position: relative; display: flex; flex-direction: column; }
.session-label { font-size: var(--fs-sm); color: var(--on-stage-muted); }
.session-score-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.7rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.session-pop {
  position: absolute;
  inset-inline-start: 100%;
  bottom: 6px;
  margin-inline-start: var(--space-2);
  background: var(--success);
  color: var(--ink);
  font-weight: 800;
  font-size: var(--fs-sm);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  pointer-events: none;
  animation: points-pop 800ms var(--ease-out) forwards;
}
@keyframes points-pop {
  0% { opacity: 0; transform: translateY(6px) scale(.8); }
  20% { opacity: 1; transform: translateY(0) scale(1.08); }
  70% { opacity: 1; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-14px) scale(1); }
}
.session-mult-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.session-mult {
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.1;
  padding: 4px 14px;
  border-radius: 14px;
}
.session-mult.is-bump { animation: mult-bump 420ms var(--ease-spring); }
@keyframes mult-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.3) rotate(-4deg); }
  100% { transform: scale(1); }
}
.session-streak { font-size: var(--fs-xs); color: var(--on-stage-muted); }

/* ---- End screen ---- */
.end-screen {
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-4);
}
.end-hearts { display: flex; justify-content: center; gap: 4px; color: var(--border-strong); }
.end-hearts .icon-svg { width: 28px; height: 28px; }
.end-hearts .heart-fill { fill: none; }
.end-title {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.1;
}
.end-score-card {
  background: var(--primary);
  color: #fff;
  border-radius: 30px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.end-score-card.bubble::after { left: auto; right: 40px; }
.end-score-line { display: flex; align-items: baseline; gap: var(--space-2); }
.end-score-num { font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.end-score-unit { font-size: var(--fs-md); font-weight: 500; }
.end-best { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); color: #E3E8FF; }
.end-best-bar { height: 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .22); overflow: hidden; }
.end-best-bar span { display: block; height: 100%; max-width: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.end-best-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--accent);
  color: var(--ink);
  font-weight: 800;
  font-size: var(--fs-sm);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  animation: mult-bump 520ms var(--ease-spring) 200ms both;
}
.end-xp { align-self: flex-start; background: rgba(255, 255, 255, .16); font-size: var(--fs-sm); font-weight: 700; padding: 6px 12px; border-radius: var(--radius-pill); }
.end-missed { background: var(--surface); border-radius: 26px; padding: var(--space-4) var(--space-5); margin-top: var(--space-2); }
.end-missed h3 { margin: 0 0 var(--space-2); font-size: var(--fs-md); }
.end-missed-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.end-missed-row:last-of-type { border-bottom: 0; }
.end-missed-mark { width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--pink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.end-missed-word { flex: 1; font-weight: 800; font-size: var(--fs-md); }
.end-missed-meaning { color: var(--muted); }
.end-missed-note, .end-perfect { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.end-perfect { text-align: center; font-size: var(--fs-base); }
.end-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.end-actions .btn { width: 100%; }
.end-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.end-links .back-link { margin: 0; }

/* ===== Site-wide photo backdrop with floating words ===== */
html, body { background: var(--night); }
#app { color: var(--on-stage); position: relative; z-index: 1; }
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(120% 90% at 70% 20%, #6B4A2B 0%, #2A1E16 55%, var(--night) 100%);
}
.backdrop-layer { position: absolute; inset: -4%; will-change: transform; }
.backdrop-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; transition: filter 400ms var(--ease-out), transform 400ms var(--ease-out); }
.backdrop-photo.is-missing { visibility: hidden; }
.backdrop-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 22, 38, .55) 0%, rgba(14, 22, 38, .35) 35%, rgba(14, 22, 38, .62) 70%, rgba(14, 22, 38, .86) 100%);
}
.backdrop-words { overflow: hidden; transition: opacity 400ms var(--ease-out); }
.backdrop-words.is-far { opacity: .28; filter: blur(1.6px); }
.backdrop-words.is-mid { opacity: .45; }
.backdrop-words.is-near { opacity: .62; }
.float-word {
  position: absolute;
  top: 100%;
  padding: .22em .6em;
  border-radius: .5em;
  font-family: var(--font-body);
  font-weight: 800;
  white-space: nowrap;
  color: var(--ink);
  box-shadow: 0 .3em .8em rgba(14, 22, 38, .3);
  animation: word-rise var(--dur-w, 30s) linear var(--delay-w, 0s) 1 both;
}
@keyframes word-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--rot-w, 0deg)); }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--sway-w, 0px), calc(-100vh - 160%), 0) rotate(calc(var(--rot-w, 0deg) * -1)); }
}
.float-word.band-m5 { background: var(--accent); }
.float-word.band-weak { background: var(--pink); }
.float-word.band-m34, .float-word.band-m12 { background: rgba(246, 239, 228, .9); }
.float-word.band-m0 { background: rgba(246, 239, 228, .12); color: var(--on-stage); box-shadow: inset 0 0 0 1.5px rgba(246, 239, 228, .55); }

/* While playing: the words step aside and the photo softens, so nothing distracts or hints */
body.is-playing .backdrop-words { opacity: 0; }
body.is-playing .float-word { animation-play-state: paused; }
body.is-playing .backdrop-photo { filter: blur(10px) brightness(.8); transform: scale(1.06); }

/* ---- Shared surfaces on the photo ---- */
.glass, .glass-card {
  background: rgba(14, 22, 38, .78);
  border: 1px solid rgba(246, 239, 228, .16);
  border-radius: 24px;
  color: var(--on-stage);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass, .glass-card {
    background: rgba(14, 22, 38, .5);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
  }
}
.page-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 6vw, 2.5rem);
  line-height: 1.1;
  color: var(--on-stage);
  text-shadow: 0 2px 12px rgba(14, 22, 38, .5);
}
.page-sub { margin: 0 0 var(--space-5); color: var(--on-stage-muted); line-height: 1.6; max-width: 60ch; }
.flow-title { color: var(--on-stage); }
#app .back-link { color: var(--on-stage); }
#app .back-link:hover { background: rgba(246, 239, 228, .12); }
.btn.cta { background: var(--accent); color: var(--ink); border-radius: var(--radius-pill); box-shadow: none; }
.btn.cta:hover:not(:disabled) { background: #F0B254; box-shadow: none; }
.btn.outline, #app .btn.outline { background: transparent; color: var(--on-stage); box-shadow: inset 0 0 0 1.5px rgba(246, 239, 228, .6); border-radius: var(--radius-pill); }
.btn.outline:hover:not(:disabled) { background: rgba(246, 239, 228, .12); }
#app .btn:not(.cta):not(.outline):not(.secondary):not(.danger) { background: rgba(246, 239, 228, .14); color: var(--on-stage); box-shadow: inset 0 0 0 1px rgba(246, 239, 228, .3); }
#app .btn.secondary { background: var(--on-stage); color: var(--ink); border-color: transparent; }

.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(14, 22, 38, .45);
  border: 1px solid rgba(246, 239, 228, .2);
  color: var(--on-stage);
  font-weight: 700;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.streak-chip .icon-svg { color: rgba(246, 239, 228, .45); }
.streak-chip.is-lit .icon-svg { color: var(--accent); }

/* ---- Levels (snake) ---- */
.levels-head { position: relative; max-width: 640px; margin: 0 auto; padding: var(--space-2) 0 var(--space-4); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.levels-brand-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.levels-brand { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); }
.levels-title { margin: var(--space-6) 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 10vw, 4.4rem); line-height: 1.05; text-shadow: 0 2px 16px rgba(14, 22, 38, .55); }
.levels-title.is-small { font-size: clamp(1.8rem, 6vw, 2.4rem); margin-top: var(--space-4); }
.levels-sub { margin: 0; max-width: 36ch; color: var(--on-stage-muted); line-height: 1.6; }
.level-path { max-width: 520px; margin: 0 auto; }
.level-path::before { background-image: linear-gradient(rgba(246, 239, 228, .45) 58%, transparent 0%); }
.level-node { text-decoration: none; background: rgba(246, 239, 228, .94); color: var(--ink); box-shadow: 0 10px 28px rgba(14, 22, 38, .45), inset 0 -4px 0 rgba(22, 18, 58, .12); }
.level-node.current { background: var(--accent); }
.level-node.current::after { border-color: var(--on-stage); }
.level-node.locked { background: rgba(14, 22, 38, .72); color: var(--on-stage); border: 1.5px dashed rgba(246, 239, 228, .55); box-shadow: none; }

/* ---- Level shell: side nav on desktop, bottom tabs on phones ---- */
.level-shell { display: block; }
.level-nav-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: 0 0 var(--space-4); }
.nav-levels-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--on-stage); text-decoration: none; font-weight: 700; font-size: var(--fs-sm); }
.nav-level-title { margin-inline-end: auto; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; }
.level-nav-links {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: rgba(14, 22, 38, .92);
  border-top: 1px solid rgba(246, 239, 228, .14);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .level-nav-links { background: rgba(14, 22, 38, .68); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}
.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  border-radius: 14px;
  color: var(--on-stage-muted);
  text-decoration: none;
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
}
.nav-link .icon-svg { width: 22px; height: 22px; }
.nav-link.is-active { color: var(--ink); background: var(--accent); }
.nav-label-long { display: none; }
.level-main { padding-bottom: 96px; }
@media (min-width: 900px) {
  .level-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .level-nav {
    position: sticky;
    top: var(--space-4);
    padding: var(--space-4);
    border-radius: 24px;
    background: rgba(14, 22, 38, .55);
    border: 1px solid rgba(246, 239, 228, .14);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .level-nav-head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .level-nav-links { position: static; display: flex; flex-direction: column; gap: 4px; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-link { flex-direction: row; justify-content: flex-start; gap: var(--space-3); padding: 0 var(--space-3); min-height: 46px; font-size: var(--fs-base); text-align: start; }
  .nav-link:hover:not(.is-active) { background: rgba(246, 239, 228, .1); color: var(--on-stage); }
  .nav-label-long { display: inline; }
  .nav-label-short { display: none; }
  .level-main { padding-bottom: var(--space-12); }
}

/* ---- Games page ---- */
.set-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  margin: 0 0 var(--space-5);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(14, 22, 38, .5);
  border: 1px solid rgba(246, 239, 228, .2);
  color: var(--on-stage);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.set-pill-change { color: var(--accent); font-weight: 800; }
.game-grid { max-width: none; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 1100px) { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .game-card { min-height: 0; padding: var(--space-4) var(--space-3); }
  .game-card .icon { width: 42px; height: 42px; margin-bottom: var(--space-2); }
  .game-card h3 { font-size: var(--fs-base); }
  .game-card p { font-size: var(--fs-xs); }
}
.game-card {
  text-decoration: none;
  background: rgba(14, 22, 38, .55);
  border: 1px solid rgba(246, 239, 228, .16);
  color: var(--on-stage);
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.game-card:hover { border-color: rgba(246, 239, 228, .4); box-shadow: 0 12px 30px rgba(14, 22, 38, .4); }
.game-card h3 { color: var(--on-stage); }
.game-card p { color: var(--on-stage-muted); }
.game-card .icon { background: var(--accent); color: var(--ink); }
.game-card .game-best { margin-top: var(--space-2); color: var(--accent); font-weight: 700; }
.game-card .game-best.is-empty { color: var(--on-stage-muted); font-weight: 500; }

/* ---- Practice set page ---- */
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
@media (min-width: 1100px) { .mode-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-height: 150px;
  padding: var(--space-4);
  text-align: start;
  font: inherit;
  border-radius: 22px;
  background: rgba(14, 22, 38, .55);
  border: 1.5px solid rgba(246, 239, 228, .16);
  color: var(--on-stage);
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.mode-card .icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(246, 239, 228, .14); margin-bottom: var(--space-2); }
.mode-card-title { font-weight: 800; font-size: var(--fs-md); }
.mode-card-desc { color: var(--on-stage-muted); font-size: var(--fs-sm); line-height: 1.5; }
.mode-card.is-active { border-color: var(--accent); }
.mode-card.is-active .icon { background: var(--accent); color: var(--ink); }
.mode-card-badge { position: absolute; top: var(--space-3); inset-inline-end: var(--space-3); display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 800; color: var(--accent); }
.set-current { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-5); }
.set-current h2 { margin: 0; font-size: var(--fs-md); }
.word-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.word-chip { background: var(--on-stage); color: var(--ink); font-weight: 700; padding: 4px 12px; border-radius: var(--radius-pill); }
.set-play { text-decoration: none; }
.sticky-actions { position: sticky; bottom: 84px; padding: var(--space-3) 0; }
@media (min-width: 900px) { .sticky-actions { bottom: 0; } }

/* ---- Words page ---- */
.segmented { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--space-4); border-radius: var(--radius-pill); background: rgba(14, 22, 38, .55); border: 1px solid rgba(246, 239, 228, .16); }
.segmented-btn { min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--on-stage); font: inherit; font-weight: 700; cursor: pointer; }
.segmented-btn[aria-pressed="true"] { background: var(--accent); color: var(--ink); }

/* ---- Stats page ---- */
.stats-page { display: flex; flex-direction: column; gap: var(--space-4); }
.stat-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px) { .stat-row { grid-template-columns: 1.3fr 1fr 1fr; } }
.stat-card { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 4px; }
.stat-label { font-size: var(--fs-sm); color: var(--on-stage-muted); font-weight: 700; }
.stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 500; line-height: 1.15; }
.stat-sub { font-size: var(--fs-sm); color: var(--on-stage-muted); }
.goal-bar { height: 10px; border-radius: var(--radius-pill); background: rgba(246, 239, 228, .16); overflow: hidden; margin: 6px 0 2px; }
.goal-bar span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.stats-section { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.section-head h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; }
.section-head span { color: var(--on-stage-muted); font-size: var(--fs-sm); }
.week-chart { padding-top: var(--space-2); }
.week-bars { position: relative; height: 160px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); align-items: end; }
.week-goal { position: absolute; inset-inline: 0; height: 0; border-top: 1.5px dashed rgba(246, 239, 228, .45); pointer-events: none; margin-bottom: 22px; }
.week-col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.week-bar { width: min(36px, 70%); border-radius: 8px 8px 3px 3px; background: rgba(246, 239, 228, .35); }
.week-col.is-goal .week-bar { background: var(--accent); }
.week-col.is-today .week-day { color: var(--on-stage); font-weight: 800; }
.week-val { font-size: var(--fs-xs); font-weight: 700; color: var(--on-stage); min-height: 1em; }
.week-day { font-size: var(--fs-xs); color: var(--on-stage-muted); height: 18px; }
.records { display: flex; flex-direction: column; }
.record-row { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) 0; color: var(--on-stage); text-decoration: none; border-bottom: 1px solid rgba(246, 239, 228, .12); }
.record-row:last-child { border-bottom: 0; }
.record-icon { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; background: rgba(246, 239, 228, .12); }
.record-title { flex: 1; font-weight: 700; }
.record-best { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.record-best.is-empty { color: var(--on-stage-muted); font-weight: 500; }
.stat-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px var(--space-4); }
.stat-word { display: flex; align-items: baseline; gap: var(--space-2); padding: 6px 0; border-bottom: 1px solid rgba(246, 239, 228, .1); }
.stat-word-ar { font-weight: 800; }
.stat-word-he { color: var(--on-stage-muted); flex: 1; }
.stat-word-miss { font-size: var(--fs-xs); color: var(--pink); font-weight: 700; white-space: nowrap; }
.stats-empty { margin: 0; color: var(--on-stage-muted); }
.stats-section .btn.cta { align-self: flex-start; text-decoration: none; }
.word-map { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; width: 100%; max-width: 360px; margin: 0 auto; }
.word-cell { display: block; aspect-ratio: 1; border-radius: 6px; }
.word-cell.m5 { background: var(--accent); }
.word-cell.m34 { background: rgba(246, 239, 228, .85); }
.word-cell.m12 { background: rgba(246, 239, 228, .4); }
.word-cell.m0 { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(246, 239, 228, .35); }
.word-cell.weak { background: var(--pink); box-shadow: inset 0 0 0 2px var(--ink); }
.word-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); }
.legend-item { display: flex; align-items: center; gap: var(--space-2); }
.legend-item .word-cell { width: 14px; height: 14px; border-radius: 4px; flex: none; }

/* ---- Play page ---- */
.play-bar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.play-exit { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: 50%; background: rgba(14, 22, 38, .5); border: 1px solid rgba(246, 239, 228, .2); color: var(--on-stage); }
.play-title { flex: 1; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; }

/* ---- Game stage (unchanged look, dark panel with drifting color) ---- */
.game-stage { position: relative; isolation: isolate; overflow: hidden; background: rgba(14, 22, 38, .82); color: var(--on-stage); border-radius: 32px; padding: var(--space-5) var(--space-4) var(--space-8); --focus: var(--accent); }
.game-stage::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(38% 26% at 14% 20%, rgba(233, 162, 59, .55), transparent 70%),
    radial-gradient(34% 24% at 90% 34%, rgba(123, 200, 164, .45), transparent 70%),
    radial-gradient(40% 28% at 72% 90%, rgba(242, 160, 168, .45), transparent 70%),
    radial-gradient(30% 22% at 18% 76%, rgba(157, 180, 214, .4), transparent 70%);
  animation: stage-drift 18s ease-in-out infinite alternate;
}
.game-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(246, 239, 228, .07) 1.2px, transparent 1.4px); background-size: 22px 22px; }
@keyframes stage-drift { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(3%, -2%, 0) rotate(4deg); } }
.prompt-word.bubble { background: var(--on-stage); color: var(--ink); }
.prompt-text { font-family: var(--font-body); }
.game-stage .option-btn { background: rgba(246, 239, 228, .96); }
.game-stage .option-btn.correct { background: var(--success); }
.game-stage .option-btn.wrong { background: var(--pink); }
.game-stage .match-item:not(.matched):not(.wrong-flash) { background: rgba(246, 239, 228, .96); }
.session-progress .seg { background: rgba(246, 239, 228, .2); }
.session-progress .seg.is-current { background: var(--on-stage); }
.session-lives .life-dot { color: var(--pink); }
.session-lives .life-dot.lost { color: rgba(246, 239, 228, .3); }

/* End screen sits on the photo after the stage is removed */
.end-title { color: var(--on-stage); font-weight: 500; text-shadow: 0 2px 12px rgba(14, 22, 38, .5); }
.end-score-card { background: rgba(14, 22, 38, .82); color: var(--on-stage); border: 1px solid rgba(246, 239, 228, .16); }
.end-best { color: var(--on-stage-muted); }
.end-perfect { color: var(--on-stage-muted); }
.end-hearts { color: rgba(246, 239, 228, .45); }

@media (prefers-reduced-motion: reduce) {
  .float-word { animation: none; opacity: 1; }
  .game-stage::before { animation: none; }
  .backdrop-photo { transition: none; }
}

/* ===== Scoring kinds: bar progress, catch counter, penalty pop, falling marathon, toast ===== */
.session-progress.is-bar { display: block; height: 8px; border-radius: var(--radius-pill); background: rgba(246, 239, 228, .2); overflow: hidden; }
.session-progress.is-bar .bar-fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: var(--radius-pill); transition: width var(--dur) var(--ease-out); }
.session-score-line { display: inline-flex; align-items: baseline; gap: 4px; }
.session-score-of { font-size: var(--fs-md); color: var(--on-stage-muted); font-variant-numeric: tabular-nums; }
.kind-time .session-score-num, .kind-moves .session-score-num, .kind-catch .session-score-num { font-variant-numeric: tabular-nums; }
.session-pop.is-penalty { background: var(--pink); }
.kind-catch .session-streak, .kind-time .session-streak { font-size: var(--fs-sm); font-weight: 700; color: var(--on-stage); }
.end-detail { font-size: var(--fs-sm); color: var(--on-stage-muted); }

.falling-intro { max-width: 460px; margin: 0 auto; padding: var(--space-6) var(--space-2); text-align: center; display: flex; flex-direction: column; gap: var(--space-3); }
.falling-intro-text { margin: 0; color: var(--on-stage-muted); line-height: 1.6; }
.falling-intro-best { margin: 0; font-weight: 700; }
.falling-field { isolation: isolate; }
.stage-banner {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transform: scale(.92);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.stage-banner.is-shown { opacity: 1; transform: scale(1); }
.pause-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: rgba(14, 22, 38, .72);
  color: var(--on-stage);
  font-weight: 700;
}
.pause-overlay[hidden] { display: none; }

.toast-host { position: fixed; inset-inline: 0; bottom: var(--space-6); z-index: var(--z-overlay); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); pointer-events: none; padding: 0 var(--space-4); }
.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--night);
  color: var(--on-stage);
  border: 1px solid rgba(246, 239, 228, .2);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  animation: toast-in 280ms var(--ease-out) both;
}
.toast .icon-svg { color: var(--accent); }
.toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity 300ms var(--ease-in), transform 300ms var(--ease-in); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .stage-banner { transition: none; }
}

/* ===== Matching: a clearly selected card / Memory: Arabic vs Hebrew faces ===== */
/* Same specificity as the cream card rule above, placed after it so the selected state wins */
.game-stage .match-item.selected:not(.wrong-flash) {
  background: var(--accent);
  color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--ink), 0 6px 18px rgba(14, 22, 38, .35);
  transform: scale(1.04);
}

/* Memory: the flipped face shows which group it belongs to, by color AND by a small label.
   Matched / mismatch colors stay as they were (those rules are more specific). */
.memory-card-back.side-translit { background: #F6D59A; border-color: var(--accent); color: var(--ink); }
.memory-card-back.side-meaning { background: #CFE0F5; border-color: var(--sky); color: var(--ink); }
.memory-card-back.side-translit::before,
.memory-card-back.side-meaning::before {
  position: absolute;
  top: 4px;
  inset-inline-start: 6px;
  font-size: .62rem;
  font-weight: 700;
  opacity: .7;
}
.memory-card-back.side-translit::before { content: "ערבית"; }
.memory-card-back.side-meaning::before { content: "עברית"; }

/* ===== Speaker buttons (word pronunciation) ===== */
.speak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(233, 162, 59, .18);
  color: inherit;
  cursor: pointer;
  vertical-align: middle;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.speak-btn .icon-svg { width: 20px; height: 20px; }
.speak-btn:hover { background: rgba(233, 162, 59, .35); }
.speak-btn:active { transform: scale(.92); }
.speak-btn.is-playing { background: var(--accent); color: var(--ink); }
.speak-btn.in-bubble { margin-inline-start: var(--space-3); width: 44px; height: 44px; background: rgba(233, 162, 59, .25); color: var(--ink); }
.speak-btn.is-small { width: 36px; height: 36px; }
.feedback-msg .speak-btn { margin-inline-start: var(--space-2); width: 36px; height: 36px; color: var(--ink); }
.prompt-text { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.study-row-speak { width: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.end-missed-row .speak-btn { color: var(--ink); }
.stat-word { align-items: center; }

/* ===== Responsive ===== */
@media (max-width: 480px) {
  #app { --app-pad: var(--space-3); padding: var(--app-pad) var(--app-pad) var(--space-12); }
  .topbar h1 { font-size: 1.45rem; }
  .options-grid { grid-template-columns: 1fr; }
  .match-columns { gap: var(--space-2); }
  .match-col { width: 46%; }
  .level-node { width: 92px; height: 92px; }
  .level-node .num { font-size: var(--fs-lg); }
  .study-banner { padding: var(--space-3) var(--space-3); gap: var(--space-3); }
  .study-banner .icon { width: var(--tap); height: var(--tap); }
  .study-cell { font-size: var(--fs-xs); padding: var(--space-1); }
  .study-row-mastered { width: 84px; }
  .prompt-word { font-size: var(--fs-xl); }
}

/* ===== Reduced motion: keep core game feedback, drop decorative motion ===== */
@keyframes points-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stagger-in > * { animation: none; }
  .level-node.current:not(.locked) { animation: none; }
  .catcher-glow { animation: none; }
  .life-dot.lost-new { animation-duration: 1ms; }
  .session-pop { animation-duration: 1200ms; animation-name: points-fade; }
  .session-mult.is-bump, .end-best-badge { animation: none; }
  .option-btn.wrong { animation: none; }
  .card, .game-card, .study-banner, .association-card, .option-btn, .match-item, .letter-tile, .level-node {
    transition-duration: 1ms;
  }
  .card:hover, .game-card:hover, .study-banner:hover, .association-card:hover,
  .option-btn:hover:not(:disabled), .match-item:hover:not(.matched), .letter-tile:hover:not(.used) {
    transform: none;
  }
  .level-node:hover:not(.locked) { transform: none; }
}