/* ===========================================================
   Knowdle — styles.css
   Warm, illustrated, playful aesthetic.
   =========================================================== */

:root {
  /* Warm illustrated palette */
  --bg: #fff5ed;
  --bg-2: #ffe9d9;
  --surface: #ffffff;
  --surface-2: #fff0f5;
  --ink: #2d1659;
  --ink-dim: #6e5c8c;
  --ink-faint: #b3a7c7;

  --pink: #ff3d7f;
  --pink-soft: #ffd1dc;
  --pink-deep: #e02968;
  --purple: #6b2eff;
  --purple-soft: #e4d9ff;
  --purple-deep: #4a1ec1;
  --yellow: #ffc83d;
  --yellow-soft: #fff0c9;
  --mint: #4dd9a8;
  --mint-soft: #c8f5e3;
  --coral: #ff6b4a;
  --coral-soft: #ffd5c9;
  --sky: #5fb8ff;
  --sky-soft: #cce8ff;

  --grad-warm: linear-gradient(135deg, #ff3d7f 0%, #6b2eff 100%);
  --grad-sunny: linear-gradient(135deg, #ffc83d 0%, #ff6b4a 100%);
  --grad-mint: linear-gradient(135deg, #4dd9a8 0%, #5fb8ff 100%);
  --grad-bg: linear-gradient(180deg, #fff5ed 0%, #ffe9d9 100%);

  --shadow-sm: 0 2px 8px rgba(45, 22, 89, 0.06);
  --shadow: 0 8px 24px rgba(45, 22, 89, 0.10);
  --shadow-lg: 0 20px 50px rgba(45, 22, 89, 0.18);
  --shadow-glow-pink: 0 8px 30px rgba(255, 61, 127, 0.30);
  --shadow-glow-purple: 0 8px 30px rgba(107, 46, 255, 0.25);

  --radius: 22px;
  --radius-lg: 32px;
  --radius-sm: 14px;
  --radius-xs: 10px;

  --font-display: "Fredoka", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 15% 8%, rgba(255, 200, 61, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(77, 217, 168, 0.10) 0%, transparent 35%),
    radial-gradient(circle at 80% 90%, rgba(255, 61, 127, 0.08) 0%, transparent 40%),
    var(--grad-bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }
input { font-family: inherit; font-size: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ----- Topbar ----- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(255, 245, 237, 0.9);
  border-bottom: 1px solid rgba(45, 22, 89, 0.06);
  min-height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  flex-shrink: 0;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--grad-warm);
  color: white;
  font-weight: 700;
  font-size: 18px;
  margin-right: 6px;
  box-shadow: 0 2px 10px rgba(255, 61, 127, 0.25);
}

.topnav { display: flex; gap: 2px; flex-shrink: 1; min-width: 0; overflow: hidden; }
.topnav a {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--ink-dim);
  font-weight: 700;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.topnav a:hover { color: var(--ink); background: var(--surface-2); }

.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 11px;
  border-radius: 999px;
  background: white;
  border: 1.5px solid var(--yellow);
  font-weight: 800;
  font-size: 13px;
  color: var(--coral);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.level-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--grad-warm);
  color: white;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
}

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

.icon-btn {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--ink-dim);
  transition: background 0.15s;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

/* Tablet / smaller desktop: drop the third nav link */
@media (max-width: 760px) {
  .topnav a:nth-child(3) { display: none; }
}

/* Mobile: tighten further, drop the music button + level badge text */
@media (max-width: 540px) {
  .topbar { padding: 10px 12px; gap: 6px; }
  .brand { font-size: 19px; }
  .brand-mark { width: 28px; height: 28px; font-size: 16px; margin-right: 4px; }
  .topnav { display: none; }
  .topbar-right { gap: 4px; }
  .level-badge, .streak-badge { padding: 5px 9px; font-size: 12px; }
  .icon-btn { width: 30px; height: 30px; font-size: 14px; }
  #musicToggle { display: none; }
}

/* Very narrow phones: drop music + sound, keep level + streak only */
@media (max-width: 380px) {
  #soundToggle { display: none; }
}

/* ----- App container ----- */
.app {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 100px;
}

/* ----- Hero ----- */
.hero { position: relative; padding: 30px 0 16px; text-align: center; }

.hero-art {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 8px;
  aspect-ratio: 16 / 9;
}
.hero-art svg { width: 100%; height: 100%; display: block; }

/* SVG animations need transform-box: fill-box so transform-origin
   resolves against the element's own bounding box, not the viewBox.
   Without it the sun rays spin around the center of the whole SVG. */
.float { animation: float 6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.float-2 { animation: float 7s ease-in-out infinite -1.5s; transform-origin: center; transform-box: fill-box; }
.float-3 { animation: float 8s ease-in-out infinite -3s; transform-origin: center; transform-box: fill-box; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-16px) rotate(3deg); }
}

@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 30s linear infinite; transform-origin: center; transform-box: fill-box; }

.hero h1 {
  font-size: clamp(38px, 6.5vw, 64px);
  font-weight: 600;
  margin: 8px 0 12px;
  line-height: 1.0;
  letter-spacing: -0.02em;
}
.hero h1 .accent-1 { color: var(--pink); }
.hero h1 .accent-2 { color: var(--purple); }

.hero p {
  font-size: 18px;
  color: var(--ink-dim);
  margin: 0 auto 18px;
  max-width: 540px;
  font-weight: 500;
}

/* ----- Daily card ----- */
.daily-card {
  background: var(--grad-warm);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: var(--shadow-glow-pink);
  position: relative;
  overflow: hidden;
  color: white;
}

.daily-card::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255, 200, 61, 0.4) 0%, transparent 65%);
  pointer-events: none;
}
.daily-card::after {
  content: "";
  position: absolute;
  bottom: -40%; left: -10%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 65%);
  pointer-events: none;
}

.daily-emoji {
  font-size: 64px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
  position: relative;
  z-index: 1;
}

.daily-content { flex: 1; min-width: 0; position: relative; z-index: 1; }

.daily-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 6px;
}

.daily-title {
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  font-family: var(--font-display);
}

.daily-meta { font-size: 14px; opacity: 0.85; font-weight: 600; }

.daily-countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid transparent;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
  font-family: var(--font-body);
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--ink); color: white; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--purple); box-shadow: var(--shadow-glow-purple); }

.btn-warm { background: white; color: var(--pink-deep); box-shadow: var(--shadow); }
.btn-warm:hover { background: var(--yellow-soft); }

.btn-ghost {
  background: transparent;
  border: 2px solid rgba(45, 22, 89, 0.15);
  color: var(--ink-dim);
  box-shadow: none;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-dim); }

@media (max-width: 600px) {
  .daily-card { flex-direction: column; text-align: center; padding: 26px 22px; }
  .daily-emoji { font-size: 56px; }
}

/* ----- XP bar ----- */
.xp-bar-wrap {
  margin: 22px 0 0;
  background: white;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}

.xp-bar-info {
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-dim);
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.xp-bar-info .lvl { color: var(--purple); font-size: 16px; }

.xp-bar {
  flex: 1;
  height: 10px;
  background: var(--purple-soft);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.xp-fill {
  height: 100%;
  background: var(--grad-warm);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- Section heads ----- */
.section-head {
  margin: 44px 0 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.section-head h2 { font-size: 28px; font-weight: 600; margin: 0; }
.section-head .filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  padding: 8px 16px;
  border-radius: 999px;
  background: white;
  border: 2px solid transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-dim);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-body);
  box-shadow: var(--shadow-sm);
}
.chip:hover { color: var(--ink); transform: translateY(-1px); }
.chip.active { background: var(--ink); color: white; border-color: var(--ink); }

/* ----- Quiz grid ----- */
.quiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.quiz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  cursor: pointer;
  transition: transform 0.14s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s;
  text-align: left;
  font: inherit;
  color: inherit;
  border: none;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  font-family: var(--font-body);
}

.quiz-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--card-tint, var(--pink-soft)) 0%, transparent 60%);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s;
}
.quiz-card:hover::before { opacity: 0.85; }
.quiz-card:hover { transform: translateY(-4px) rotate(-0.5deg); box-shadow: var(--shadow-lg); }

.quiz-card[data-cat-color="geo"]    { --card-tint: var(--mint-soft); }
.quiz-card[data-cat-color="hist"]   { --card-tint: var(--yellow-soft); }
.quiz-card[data-cat-color="sport"]  { --card-tint: var(--coral-soft); }
.quiz-card[data-cat-color="sci"]    { --card-tint: var(--sky-soft); }
.quiz-card[data-cat-color="lit"]    { --card-tint: var(--purple-soft); }
.quiz-card[data-cat-color="know"]   { --card-tint: var(--pink-soft); }
.quiz-card[data-cat-color="easy"]   { --card-tint: var(--yellow-soft); }
/* New categories — 8 additional */
.quiz-card[data-cat-color="music"]  { --card-tint: var(--purple-soft); }
.quiz-card[data-cat-color="film"]   { --card-tint: var(--coral-soft); }
.quiz-card[data-cat-color="tv"]     { --card-tint: var(--pink-soft); }
.quiz-card[data-cat-color="games"]  { --card-tint: var(--sky-soft); }
.quiz-card[data-cat-color="books"]  { --card-tint: var(--yellow-soft); }
.quiz-card[data-cat-color="myth"]   { --card-tint: var(--coral-soft); }
.quiz-card[data-cat-color="food"]   { --card-tint: var(--yellow-soft); }
.quiz-card[data-cat-color="animal"] { --card-tint: var(--mint-soft); }

.quiz-card-emoji { font-size: 40px; line-height: 1; position: relative; z-index: 1; }

.quiz-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  position: relative;
  z-index: 1;
}

.quiz-card-meta {
  font-size: 13px;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.quiz-card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.4; }

.quiz-card-best {
  font-size: 12px;
  color: var(--purple);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* ----- Play view ----- */
.play-shell { padding-top: 18px; }

.play-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.play-head .back-link {
  font-size: 14px;
  color: var(--ink-dim);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.15s;
}
.play-head .back-link:hover { background: white; color: var(--ink); }

.play-title-block { text-align: center; }

.play-title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 600;
  margin: 0;
  font-family: var(--font-display);
}

.play-subtitle {
  font-size: 13px;
  color: var(--ink-dim);
  margin-top: 4px;
  font-weight: 600;
}

.play-actions { display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 600px) {
  .play-head { grid-template-columns: auto 1fr auto; }
  .play-head .back-link span { display: none; }
}

/* ----- Stats bar ----- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.stat {
  background: white;
  border-radius: var(--radius-sm);
  padding: 16px 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.stat-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
}

.stat-value {
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-display);
  margin-top: 2px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.stat.timer .stat-value { color: var(--mint); }
.stat.timer.urgent .stat-value { color: var(--yellow); }
.stat.timer.critical .stat-value { color: var(--pink); animation: pulse 0.5s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.98); }
}

/* ----- Input ----- */
.guess-row { position: relative; margin-bottom: 18px; }

.guess-input {
  width: 100%;
  background: white;
  border: 3px solid transparent;
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  font-size: 18px;
  font-weight: 700;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.guess-input::placeholder { color: var(--ink-faint); font-weight: 600; }
.guess-input:focus { border-color: var(--purple); box-shadow: var(--shadow-glow-purple); }
.guess-input.flash-correct { animation: flashGreen 0.4s; }
.guess-input.flash-dup { animation: flashYellow 0.3s; }

@keyframes flashGreen {
  0%, 100% { border-color: transparent; }
  30% { border-color: var(--mint); background: var(--mint-soft); }
}
@keyframes flashYellow {
  0%, 100% { border-color: transparent; }
  50% { border-color: var(--yellow); }
}

.start-overlay {
  background: white;
  border-radius: var(--radius);
  padding: 32px 28px;
  text-align: center;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}

.start-overlay h3 { margin: 0 0 6px; font-size: 24px; font-weight: 600; }
.start-overlay p { color: var(--ink-dim); margin: 0 0 18px; font-size: 14px; font-weight: 600; }

/* ----- Answer grid ----- */
.answers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px;
  background: white;
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.answer-cell {
  background: var(--surface-2);
  border-radius: var(--radius-xs);
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 2px solid transparent;
  font-variant-numeric: tabular-nums;
  transition: all 0.2s;
}

.answer-cell .num {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  min-width: 22px;
  font-weight: 700;
}

.answer-cell.got {
  background: var(--mint-soft);
  color: var(--ink);
  border-color: var(--mint);
  animation: pop 0.3s;
}
.answer-cell.got .num { color: var(--mint); }

.answer-cell.revealed {
  background: var(--coral-soft);
  color: var(--coral);
  border-color: var(--coral);
}
.answer-cell.revealed .num { color: var(--coral); }

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@media (max-width: 600px) {
  .answers-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: 10px; gap: 4px; }
  .answer-cell { padding: 9px 11px; font-size: 13px; min-height: 34px; }
}

/* ----- Results screen ----- */
.results {
  text-align: center;
  padding: 36px 24px;
  background: white;
  border-radius: var(--radius-lg);
  margin-bottom: 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.results-emoji { font-size: 72px; margin-bottom: 8px; position: relative; }

.results h3 {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.results-score {
  font-size: 56px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  margin: 14px 0;
}
.results-score .got { color: var(--purple); }
.results-score .total { color: var(--ink-faint); }

.results-meta {
  font-size: 14px;
  color: var(--ink-dim);
  margin-bottom: 16px;
  font-weight: 700;
}

.results-xp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--purple-soft);
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  color: var(--purple);
  margin-bottom: 16px;
}

.results-grid {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 1.2;
  margin: 18px 0;
  white-space: pre;
  display: inline-block;
  text-align: left;
}

.results-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Up next card */
.up-next {
  margin-top: 16px;
  background: white;
  border-radius: var(--radius);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.18s;
  border: none;
  font: inherit;
  color: inherit;
  width: 100%;
  font-family: var(--font-body);
}
.up-next:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.up-next-emoji { font-size: 38px; }
.up-next-info { flex: 1; min-width: 0; text-align: left; }
.up-next-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.up-next-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 2px 0 0;
}
.up-next-cta { font-size: 14px; font-weight: 800; color: var(--purple); white-space: nowrap; }
.up-next-countdown { font-variant-numeric: tabular-nums; }

/* ----- Achievements ----- */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.achievement {
  background: white;
  border-radius: var(--radius-sm);
  padding: 18px 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform 0.15s;
}
.achievement.unlocked { background: var(--yellow-soft); }
.achievement:hover { transform: translateY(-2px); }

.achievement-emoji {
  font-size: 36px;
  margin-bottom: 6px;
  filter: grayscale(1) opacity(0.35);
  transition: filter 0.3s;
}
.achievement.unlocked .achievement-emoji { filter: none; }

.achievement-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.achievement.locked .achievement-name { color: var(--ink-faint); }

.achievement-desc { font-size: 11px; color: var(--ink-dim); margin-top: 2px; font-weight: 600; }

/* ----- Stats dashboard ----- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.dash-card {
  background: white;
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.dash-card .dash-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dash-card .dash-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 4px;
}
.dash-card .dash-sub { font-size: 12px; color: var(--ink-dim); margin-top: 2px; font-weight: 600; }

/* ----- Bonus round flash ----- */
.bonus-banner {
  background: var(--grad-sunny);
  border-radius: var(--radius);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  color: white;
  box-shadow: var(--shadow-glow-pink);
  animation: bonusEntry 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes bonusEntry {
  from { opacity: 0; transform: translateY(-12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.bonus-banner .bonus-emoji { font-size: 44px; }
.bonus-banner h3 { margin: 0; font-size: 22px; font-weight: 600; }
.bonus-banner p { margin: 2px 0 0; font-size: 13px; opacity: 0.92; font-weight: 600; }

/* ----- Static / page ----- */
.static-page {
  max-width: 720px;
  margin: 30px auto 60px;
  padding: 36px;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.static-page h1 { margin-top: 0; font-size: 32px; font-weight: 600; }
.static-page h2 { margin-top: 28px; font-size: 22px; font-weight: 600; }
.static-page p { color: var(--ink-dim); }

/* ----- Footer ----- */
.footer {
  padding: 24px 28px;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-faint);
  font-weight: 600;
}
.footer-links { display: flex; gap: 18px; }
.footer-links a:hover { color: var(--ink); }

@media (max-width: 600px) {
  .footer { flex-direction: column; gap: 8px; }
}

/* ----- Toast ----- */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: white;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  box-shadow: var(--shadow);
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }
.toast.success { background: var(--mint); color: var(--ink); }

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

/* ----- Milestone overlay ----- */
.milestone {
  position: fixed;
  inset: 0;
  background: rgba(45, 22, 89, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 250;
  backdrop-filter: blur(6px);
  animation: milestoneIn 0.3s ease-out;
}
@keyframes milestoneIn { from { opacity: 0; } to { opacity: 1; } }

.milestone-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  text-align: center;
  max-width: 380px;
  margin: 24px;
  box-shadow: var(--shadow-lg);
  animation: milestonePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes milestonePop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.milestone-emoji {
  font-size: 84px;
  margin-bottom: 8px;
  display: block;
  animation: spin-once 1s ease-out;
}
@keyframes spin-once {
  from { transform: rotate(-360deg) scale(0); }
  to { transform: rotate(0deg) scale(1); }
}

.milestone-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 6px;
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.milestone-desc { color: var(--ink-dim); font-weight: 600; margin: 0 0 22px; }

/* ===========================================================
   Knowdle Word — daily word game
   Mint = correct, yellow = present, muted purple = absent.
   =========================================================== */

.daily-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 18px;
}
@media (max-width: 720px) {
  .daily-pair { grid-template-columns: 1fr; }
}

.daily-card-word {
  background: linear-gradient(135deg, var(--mint-soft) 0%, var(--sky-soft) 100%);
  border-color: var(--mint);
}
.daily-card-word .daily-emoji {
  background: var(--grad-mint);
}
/* Light-gradient cards need dark text — white is unreadable on pastels. */
.daily-card-word .daily-label,
.daily-card-word .daily-title,
.daily-card-word .daily-meta,
.daily-card-word .daily-countdown,
.daily-card-multi .daily-label,
.daily-card-multi .daily-title,
.daily-card-multi .daily-meta,
.daily-card-multi .daily-countdown,
.daily-card-hol .daily-label,
.daily-card-hol .daily-title,
.daily-card-hol .daily-meta,
.daily-card-hol .daily-countdown {
  color: var(--ink);
}
.daily-card-word .daily-label,
.daily-card-multi .daily-label,
.daily-card-hol .daily-label {
  color: var(--ink-dim);
}
.daily-card-word .daily-countdown,
.daily-card-multi .daily-countdown,
.daily-card-hol .daily-countdown {
  background: rgba(45, 22, 89, 0.08);
  color: var(--ink);
}

.btn-mint {
  background: var(--grad-mint);
  color: white;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(77, 217, 168, 0.35);
}
.btn-mint:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(77, 217, 168, 0.45);
}

.word-shell {
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.word-board {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 6px;
  width: min(92vw, 360px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.word-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.word-row.shake { animation: word-shake 0.32s cubic-bezier(.36,.07,.19,.97); }
@keyframes word-shake {
  10%,90% { transform: translateX(-1px); }
  20%,80% { transform: translateX(1px); }
  30%,50%,70% { transform: translateX(-2px); }
  40%,60% { transform: translateX(2px); }
}

.word-tile {
  background: white;
  border: 2px solid var(--purple-soft);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 6vw, 30px);
  color: var(--ink);
  user-select: none;
  text-transform: uppercase;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.word-tile.filled {
  border-color: var(--ink-faint);
  animation: word-pop 0.1s ease-out;
}
@keyframes word-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.word-tile.correct {
  background: var(--mint);
  border-color: var(--mint);
  color: white;
  animation: word-flip 0.32s ease-in-out;
}
.word-tile.present {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  animation: word-flip 0.32s ease-in-out;
}
.word-tile.absent {
  background: #b3a7c7;
  border-color: #b3a7c7;
  color: white;
  animation: word-flip 0.32s ease-in-out;
}
@keyframes word-flip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(60deg); }
  100% { transform: rotateX(0); }
}
/* Stagger the flip across columns — tighter than before so the whole row
   resolves in ~0.5s instead of dragging out for over a second. */
.word-row .word-tile:nth-child(1).correct,
.word-row .word-tile:nth-child(1).present,
.word-row .word-tile:nth-child(1).absent { animation-delay: 0s; }
.word-row .word-tile:nth-child(2).correct,
.word-row .word-tile:nth-child(2).present,
.word-row .word-tile:nth-child(2).absent { animation-delay: 0.05s; }
.word-row .word-tile:nth-child(3).correct,
.word-row .word-tile:nth-child(3).present,
.word-row .word-tile:nth-child(3).absent { animation-delay: 0.10s; }
.word-row .word-tile:nth-child(4).correct,
.word-row .word-tile:nth-child(4).present,
.word-row .word-tile:nth-child(4).absent { animation-delay: 0.15s; }
.word-row .word-tile:nth-child(5).correct,
.word-row .word-tile:nth-child(5).present,
.word-row .word-tile:nth-child(5).absent { animation-delay: 0.20s; }

/* Mobile: even calmer. Skip the 3D flip entirely (it's the most jarring
   bit on small screens) and just fade the colors in via the existing
   transition on .word-tile. Pop + shake also dial down. */
@media (max-width: 520px) {
  .word-tile.correct,
  .word-tile.present,
  .word-tile.absent { animation: none; }
  .word-tile.filled { animation: none; }
  .word-row.shake { animation-duration: 0.24s; }
}

.word-msg {
  min-height: 36px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border-radius: var(--radius-xs);
  padding: 8px 16px;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.word-msg.show {
  opacity: 1;
  background: var(--ink);
  color: white;
  display: inline-block;
  width: auto;
  align-self: center;
  box-shadow: var(--shadow);
}
.word-msg.show.warn { background: var(--coral); }
.word-msg.show.reveal { background: var(--purple); letter-spacing: 0.15em; }

.word-keyboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.word-kb-row {
  display: flex;
  gap: 5px;
  justify-content: center;
}
.word-kb-key {
  flex: 1;
  min-height: 52px;
  max-width: 42px;
  background: white;
  color: var(--ink);
  border: 1.5px solid var(--purple-soft);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.05s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  padding: 0 4px;
  box-shadow: 0 1px 0 rgba(45,22,89,0.08);
}
.word-kb-key:active { transform: translateY(1px); }
.word-kb-wide {
  flex: 1.5;
  max-width: 64px;
  font-size: 12px;
}
.word-kb-key.correct {
  background: var(--mint);
  color: white;
  border-color: var(--mint);
}
.word-kb-key.present {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
}
.word-kb-key.absent {
  background: #b3a7c7;
  color: white;
  border-color: #b3a7c7;
}
@media (max-width: 480px) {
  .word-kb-key { min-height: 46px; font-size: 13px; padding: 0 2px; }
  .word-kb-wide { font-size: 11px; }
}

/* Results panel — reuses .results base styles where possible */
.word-results { padding-bottom: 18px; }
.word-solution-row {
  font-weight: 700;
  color: var(--ink-dim);
  margin: 8px 0 4px;
}
.word-definition {
  max-width: 420px;
  margin: 4px auto 8px;
  padding: 8px 14px;
  background: rgba(107, 46, 255, 0.06);
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.4;
  animation: hol-fade-in 0.4s ease-out;
}
.word-def-pos {
  font-weight: 700;
  font-style: normal;
  color: var(--purple);
  margin-right: 4px;
  text-transform: lowercase;
  font-size: 12px;
  letter-spacing: 0.05em;
}
.word-solution {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--purple);
  font-size: 20px;
}
.word-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 14px 0 10px;
}
.word-stat {
  text-align: center;
  background: white;
  border-radius: var(--radius-xs);
  padding: 10px 6px;
  border: 1px solid var(--purple-soft);
}
.word-stat-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.word-stat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.word-dist-title {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 14px 0 6px;
  font-size: 16px;
  text-align: center;
}
.word-dist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 360px;
  margin: 0 auto;
}
.word-dist-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.word-dist-num {
  font-weight: 700;
  width: 18px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 13px;
}
.word-dist-bar-wrap { flex: 1; }
.word-dist-bar {
  background: var(--ink-faint);
  color: white;
  height: 22px;
  border-radius: 4px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-weight: 700;
  font-size: 12px;
  min-width: 24px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.word-dist-bar.current {
  background: var(--mint);
}
.word-next-line {
  text-align: center;
  font-weight: 700;
  color: var(--ink-dim);
  font-size: 13px;
  margin: 12px 0 4px;
}

/* ===========================================================
   Knowdle Multi — 4/8/16 simultaneous Wordle boards
   =========================================================== */

.multi-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.multi-mode-chips {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 4px;
}
.multi-chip {
  padding: 7px 14px;
  border-radius: 999px;
  background: white;
  color: var(--ink-dim);
  border: 1.5px solid var(--purple-soft);
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
  position: relative;
}
.multi-chip:hover { background: var(--surface-2); color: var(--ink); }
.multi-chip.active {
  background: var(--grad-mint);
  color: white;
  border-color: var(--mint);
  box-shadow: 0 4px 12px rgba(77, 217, 168, 0.3);
}
.multi-chip.played::after {
  content: "✓";
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--mint);
  color: white;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

.multi-status {
  display: flex;
  gap: 16px;
  justify-content: center;
  background: white;
  border-radius: var(--radius-xs);
  padding: 10px 16px;
  border: 1px solid var(--purple-soft);
  max-width: 320px;
  margin: 0 auto;
}
.multi-status-block { text-align: center; }
.multi-status-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.multi-status-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.multi-status.urgent .multi-status-num { color: var(--coral); }

/* ---- The grid of boards ---------------------------------------------
   Tile aspect ratio shrinks vertically as N grows, so an 8-board game
   doesn't produce four very-tall thin strips. 4-boards stays square
   (Quordle-style, recognizable). 8-boards uses 1.4:1 tiles (wider than
   tall) so each board reads as a compact rectangle, the whole grid
   fits without endless scrolling, and the keyboard stays visible. */
.multi-grid {
  display: grid;
  gap: 12px;
  margin: 0 auto;
  width: 100%;
}
.multi-grid[data-n="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 640px;
}
.multi-grid[data-n="8"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1080px;
}
@media (max-width: 720px) {
  .multi-grid { gap: 8px; }
  .multi-grid[data-n="8"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .multi-grid { gap: 6px; }
  .multi-grid[data-n="4"] { max-width: 100%; }
  .multi-grid[data-n="8"] { max-width: 100%; gap: 5px; }
}

.multi-board {
  display: grid;
  gap: 3px;
  background: rgba(255, 255, 255, 0.4);
  padding: 5px;
  border-radius: 10px;
  border: 1px solid var(--purple-soft);
  transition: opacity 0.3s, border-color 0.3s, background 0.3s;
}
.multi-board.won {
  border-color: var(--mint);
  background: rgba(77, 217, 168, 0.10);
}
.multi-board.lost {
  border-color: var(--coral);
  background: rgba(255, 107, 74, 0.06);
  opacity: 0.85;
}
.multi-grid[data-n="4"] .multi-board { gap: 5px; padding: 8px; }
.multi-grid[data-n="8"] .multi-board { gap: 3px; padding: 5px; border-radius: 8px; }

.multi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}
.multi-grid[data-n="4"] .multi-row { gap: 5px; }
.multi-grid[data-n="8"] .multi-row { gap: 3px; }

.multi-row.shake { animation: word-shake 0.4s cubic-bezier(.36,.07,.19,.97); }

.multi-tile {
  background: white;
  border: 1.5px solid var(--purple-soft);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  user-select: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
/* 4 boards: keep classic Quordle square tile (recognizable, easy to read). */
.multi-grid[data-n="4"] .multi-tile {
  aspect-ratio: 1 / 1;
  font-size: clamp(16px, 3.6vw, 26px);
  border-width: 2px;
  border-radius: 7px;
}
/* 8 boards: tiles ~1.4× wider than tall so the 13-row board reads as
   a manageable rectangle and four 8-row columns of boards still fit
   one screen on a typical laptop without a giant scroll. */
.multi-grid[data-n="8"] .multi-tile {
  aspect-ratio: 1.35 / 1;
  font-size: clamp(11px, 1.6vw, 16px);
}
@media (max-width: 720px) {
  .multi-grid[data-n="8"] .multi-tile {
    aspect-ratio: 1.5 / 1;
    font-size: clamp(10px, 2.4vw, 14px);
  }
}

.multi-tile.filled {
  border-color: var(--ink-faint);
  animation: word-pop 0.12s ease-out;
}
.multi-tile.correct { background: var(--mint); border-color: var(--mint); color: white; animation: word-flip 0.5s ease-in-out; }
.multi-tile.present { background: var(--yellow); border-color: var(--yellow); color: var(--ink); animation: word-flip 0.5s ease-in-out; }
.multi-tile.absent { background: #b3a7c7; border-color: #b3a7c7; color: white; animation: word-flip 0.5s ease-in-out; }

/* Solution pills on results */
.multi-solutions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 14px 0;
}
.multi-sol-pill {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--purple-soft);
  background: white;
}
.multi-sol-pill.won { background: var(--mint); color: white; border-color: var(--mint); }
.multi-sol-pill.missed { background: rgba(255, 107, 74, 0.1); color: var(--coral); border-color: var(--coral); }

/* Three-card daily layout (List / Word / Multi) */
.daily-pair.daily-trio {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) {
  .daily-pair.daily-trio { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .daily-pair.daily-trio { grid-template-columns: 1fr; }
}
.daily-card-multi {
  background: linear-gradient(135deg, var(--purple-soft) 0%, var(--pink-soft) 100%);
  border-color: var(--purple);
}
.daily-card-multi .daily-emoji { background: var(--grad-warm); }

.btn-purple {
  background: var(--grad-warm);
  color: white;
  font-weight: 700;
  box-shadow: var(--shadow-glow-purple);
}
.btn-purple:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(107, 46, 255, 0.35); }

/* ===========================================================
   Knowdle Higher or Lower — two-card comparison game
   =========================================================== */

.hol-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hol-pack-chips {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.hol-chip {
  padding: 7px 14px;
  border-radius: 999px;
  background: white;
  color: var(--ink-dim);
  border: 1.5px solid var(--purple-soft);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hol-chip:hover { background: var(--surface-2); color: var(--ink); }
.hol-chip.active {
  background: var(--grad-warm);
  color: white;
  border-color: var(--purple);
  box-shadow: var(--shadow-glow-purple);
}
.hol-chip.played::after {
  content: "✓";
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--mint);
  color: white;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

.hol-status {
  display: flex;
  gap: 16px;
  justify-content: center;
  background: white;
  border-radius: var(--radius-xs);
  padding: 10px 16px;
  border: 1px solid var(--purple-soft);
  max-width: 320px;
  margin: 0 auto;
}

.hol-stage { width: 100%; }

.hol-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
  margin: 0 auto;
}

.hol-card {
  background: white;
  border: 2px solid var(--purple-soft);
  border-radius: var(--radius);
  padding: 28px 16px 22px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 280px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.hol-card-left {
  background: linear-gradient(135deg, var(--mint-soft) 0%, var(--sky-soft) 100%);
  border-color: var(--mint);
}
.hol-card-right {
  background: linear-gradient(135deg, var(--pink-soft) 0%, var(--purple-soft) 100%);
  border-color: var(--pink);
}

.hol-emoji {
  font-size: clamp(48px, 8vw, 76px);
  line-height: 1;
  margin: 0 0 4px;
}
.hol-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 2.4vw, 22px);
  color: var(--ink);
  line-height: 1.2;
  padding: 0 4px;
}
.hol-prompt {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-dim);
  margin: 4px 0 4px;
}
.hol-buttons {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.hol-btn, .hol-btn-lower {
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.05s, box-shadow 0.15s;
}
.hol-btn-lower {
  background: var(--coral);
  color: white;
  box-shadow: 0 6px 18px rgba(255, 107, 74, 0.35);
}
.hol-btn:active, .hol-btn-lower:active { transform: translateY(1px); }
.hol-btn:disabled, .hol-btn-lower:disabled { opacity: 0.5; cursor: not-allowed; }

.hol-value-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 10px;
}
.hol-value-num {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.hol-value-unit {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.hol-revealed-value {
  display: none;
}
.hol-card-right.revealed .hol-revealed-value { display: flex; animation: hol-fade-in 0.4s ease-out; }
.hol-card-right.revealed .hol-buttons { display: none; }
.hol-card-right.revealed .hol-prompt { display: none; }
@keyframes hol-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hol-verdict {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin-top: 10px;
  opacity: 0;
}
.hol-verdict.right { color: var(--mint); opacity: 1; animation: hol-pop-in 0.35s cubic-bezier(.68,-0.55,.27,1.55); }
.hol-verdict.wrong { color: var(--coral); opacity: 1; animation: hol-pop-in 0.35s cubic-bezier(.68,-0.55,.27,1.55); }
@keyframes hol-pop-in {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.hol-vs {
  align-self: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 3vw, 24px);
  color: var(--ink-dim);
  background: white;
  border-radius: 50%;
  width: clamp(40px, 7vw, 56px);
  height: clamp(40px, 7vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--purple-soft);
  box-shadow: var(--shadow-sm);
  letter-spacing: 0.05em;
}

@media (max-width: 640px) {
  .hol-pair {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
  }
  .hol-card { min-height: 220px; padding: 20px 14px 18px; }
}

/* Daily sequence grid */
.hol-sequence {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin: 12px 0 8px;
  flex-wrap: wrap;
}
.hol-seq-cell {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: white;
}
.hol-seq-cell.correct { background: var(--mint); }
.hol-seq-cell.wrong { background: var(--coral); }

/* HoL home card */
.daily-card-hol {
  background: linear-gradient(135deg, var(--coral-soft) 0%, var(--yellow-soft) 100%);
  border-color: var(--coral);
}
.daily-card-hol .daily-emoji { background: var(--grad-sunny); }
.btn-coral {
  background: var(--grad-sunny);
  color: white;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(255, 107, 74, 0.35);
}
.btn-coral:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255, 107, 74, 0.45); }

/* Four-card daily layout — always 2x2 on desktop. The card's internal
   horizontal layout (emoji + content + button) needs ~400px minimum,
   and 4-up grids on a ~1200px container squish to ~280px which breaks
   word-wrapping and pushes the button onto the title. 2x2 looks cleaner
   anyway — symmetrical pair of pairs, easier to scan. */
.daily-pair.daily-quad {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 600px) {
  .daily-pair.daily-quad { grid-template-columns: 1fr; }
}

/* =============================================================
   Knowdle Kids — banner, hub, picture game
   ============================================================= */

/* Card-color tints for new kid quiz categories */
.quiz-card[data-cat-color="math"] { --card-tint: var(--sky-soft); }
.quiz-card[data-cat-color="arts"] { --card-tint: var(--pink-soft); }

/* ---- Home-page Kids banner ---- */
.kids-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 22px 0 28px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--grad-warm);
  color: white;
  box-shadow: var(--shadow-glow-purple);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kids-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-pink); }
.kids-banner-emoji { font-size: 44px; line-height: 1; flex-shrink: 0; }
.kids-banner-text { flex: 1; min-width: 0; }
.kids-banner-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.15em;
  opacity: 0.85; text-transform: uppercase;
}
.kids-banner-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; line-height: 1.05; margin-top: 2px;
}
.kids-banner-meta { font-size: 13px; opacity: 0.9; margin-top: 4px; }
.kids-banner-cta {
  background: rgba(255, 255, 255, 0.18);
  padding: 10px 18px; border-radius: 999px;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
  backdrop-filter: blur(6px);
}
@media (max-width: 520px) {
  .kids-banner { padding: 14px 16px; gap: 12px; }
  .kids-banner-emoji { font-size: 34px; }
  .kids-banner-title { font-size: 20px; }
  .kids-banner-meta { font-size: 12px; }
  .kids-banner-cta { padding: 8px 12px; font-size: 13px; }
}

/* ---- Kids hub layout ---- */
.kids-hub-shell { padding: 8px 0 40px; }
.kids-hero { text-align: center; padding: 18px 0 28px; }
.kids-hero-emoji { font-size: 56px; line-height: 1; }
.kids-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 44px; line-height: 1; margin: 14px 0 8px;
}
.kids-hero p { color: var(--ink-dim); font-size: 16px; }

/* Big picture-game tile on hub */
.kids-pic-tile {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 26px; margin: 0 0 30px;
  border-radius: var(--radius);
  background: var(--grad-sunny);
  color: white;
  box-shadow: 0 14px 30px rgba(255, 107, 74, 0.30);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.kids-pic-tile:hover { transform: translateY(-2px); }
.kids-pic-tile-emoji { font-size: 56px; line-height: 1; flex-shrink: 0; }
.kids-pic-tile-text { flex: 1; min-width: 0; }
.kids-pic-tile-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.15em;
  opacity: 0.85; text-transform: uppercase;
}
.kids-pic-tile-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; line-height: 1.05; margin-top: 4px;
}
.kids-pic-tile-meta { font-size: 13px; opacity: 0.9; margin-top: 4px; }
.kids-pic-tile-cta {
  background: rgba(255, 255, 255, 0.22);
  padding: 12px 20px; border-radius: 999px;
  font-weight: 700; font-size: 15px;
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .kids-pic-tile { padding: 16px 18px; gap: 12px; }
  .kids-pic-tile-emoji { font-size: 40px; }
  .kids-pic-tile-title { font-size: 22px; }
}

/* Filter rows (used in hub AND picture-game setup) */
.kids-filters { margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.kids-filter-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.kids-filter-label {
  font-weight: 700; font-size: 13px;
  color: var(--ink-dim); text-transform: uppercase;
  letter-spacing: 0.08em; min-width: 70px;
}
.kids-empty {
  grid-column: 1 / -1;
  padding: 40px 20px; text-align: center;
  color: var(--ink-dim);
  background: var(--surface-2); border-radius: var(--radius);
}

/* ---- Picture game ---- */
.kids-pic-shell { padding: 0 0 40px; }

.kids-pic-setup {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 18px;
}
.kids-pic-pool-info {
  font-size: 14px; color: var(--ink-dim);
  padding: 8px 0;
}
.kids-pic-start { align-self: flex-start; min-width: 160px; }
.kids-pic-start[disabled] { opacity: 0.5; cursor: not-allowed; }

.kids-pic-stage {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 20px 0;
}
.kids-pic-frame {
  width: 100%; max-width: 480px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
}
.kids-pic-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.kids-pic-prompt {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; color: var(--ink-dim);
}
.kids-pic-input-row {
  display: flex; gap: 10px;
  width: 100%; max-width: 480px;
  align-items: stretch;
}
.kids-pic-input-row .guess-input { flex: 1; }
.kids-pic-input-row .btn { flex-shrink: 0; }

/* Recent stream + results */
.kids-pic-recent { display: none; }

.kids-pic-results {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 30px 26px;
  margin-top: 24px;
  box-shadow: var(--shadow);
  text-align: center;
}
.kids-pic-results h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; margin: 0 0 16px;
}
.kids-pic-score {
  display: flex; flex-direction: column; align-items: center;
  margin: 14px 0 12px;
}
.kp-score-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 72px; line-height: 1;
  background: var(--grad-warm);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kp-score-label { color: var(--ink-dim); font-size: 14px; margin-top: 4px; }
.kp-summary { color: var(--ink-dim); font-size: 14px; margin-top: 8px; }
.kp-recap { margin: 22px 0 12px; text-align: left; }
.kp-recap-label {
  font-size: 12px; font-weight: 700;
  color: var(--ink-dim); letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 8px;
}
.kp-recap-item {
  display: inline-block;
  padding: 4px 10px; margin: 3px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--ink-dim);
}
.kp-recap-found { background: var(--mint-soft); color: var(--ink); }
.kp-recap-skip { background: var(--surface-2); color: var(--ink-faint); }
.kp-actions {
  display: flex; gap: 10px; justify-content: center; margin-top: 18px;
  flex-wrap: wrap;
}

/* Mobile picture game tweaks */
@media (max-width: 520px) {
  .kids-pic-setup { padding: 20px 18px; }
  .kids-pic-prompt { font-size: 18px; }
  .kp-score-num { font-size: 56px; }
}

/* ---- Game tile grid on Kids hub ---- */
.kids-game-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 18px 0 28px;
}
.kids-game-tile {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px; min-height: 120px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative; overflow: hidden;
  cursor: pointer;
}
.kids-game-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kgt-emoji { font-size: 36px; line-height: 1; }
.kgt-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.kgt-meta { color: var(--ink-dim); font-size: 12px; }
.kids-game-pic     { background: linear-gradient(135deg, #fff 60%, #ffe9d9 100%); }
.kids-game-mem     { background: linear-gradient(135deg, #fff 60%, #cce8ff 100%); }
.kids-game-spell   { background: linear-gradient(135deg, #fff 60%, #c8f5e3 100%); }
.kids-game-word    { background: linear-gradient(135deg, #fff 60%, #e4d9ff 100%); }
.kids-game-odd     { background: linear-gradient(135deg, #fff 60%, #ffd1dc 100%); }
.kids-game-missing { background: linear-gradient(135deg, #fff 60%, #d4baf2 100%); }
.kids-game-hang    { background: linear-gradient(135deg, #fff 60%, #ffd5c9 100%); }
.kids-game-math    { background: linear-gradient(135deg, #fff 60%, #fff0c9 100%); }
.kids-game-album   { background: linear-gradient(135deg, #fff 60%, #fff8e0 100%); }
@media (min-width: 700px) {
  .kids-game-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
  .kids-game-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Odd One Out ---- */
.kids-ooo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 520px;
  margin: 18px auto;
}
.ooo-card {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, outline 0.1s;
  outline: 0 solid transparent;
}
.ooo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ooo-card:hover { transform: scale(1.02); }
.ooo-card.ooo-right  { outline: 4px solid var(--mint);   box-shadow: 0 0 24px var(--mint-soft); }
.ooo-card.ooo-wrong  { outline: 4px solid var(--coral);  filter: grayscale(0.5); }
@media (min-width: 700px) {
  .kids-ooo-grid { grid-template-columns: repeat(4, 1fr); max-width: 760px; }
}

/* ---- What's Missing? ---- */
.kids-miss-stage {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 16px 0;
}
.kids-miss-phase {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; color: var(--ink-dim);
}
.kids-miss-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 520px;
  width: 100%;
}
.miss-card {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
}
.miss-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miss-card.miss-hidden { background: var(--grad-warm); }
.miss-q {
  font-family: var(--font-display); font-weight: 700;
  font-size: 56px; color: white;
}

/* ---- Photo Hangman ---- */
.hm-mask {
  font-family: var(--font-mono);
  font-size: 28px; font-weight: 700;
  letter-spacing: 0.1em;
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: center;
}
.hm-mask span { padding: 0 4px; }
.hm-lives {
  font-size: 18px; font-weight: 700;
  color: var(--ink); letter-spacing: 0.1em;
}
.hm-keyboard {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 4px;
  width: 100%; max-width: 560px;
}
.hm-key {
  padding: 10px 4px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 700; font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.1s, opacity 0.1s;
}
.hm-key:hover:not([disabled]) { background: var(--purple-soft); }
.hm-key.hm-hit { background: var(--mint-soft); color: var(--ink); }
.hm-key.hm-miss { background: var(--coral-soft); opacity: 0.6; }
.hm-key[disabled] { cursor: not-allowed; }
@media (max-width: 520px) {
  .hm-keyboard { grid-template-columns: repeat(7, 1fr); }
  .hm-key { padding: 8px 2px; font-size: 13px; }
  .hm-mask { font-size: 22px; }
}

/* ---- Practice Mode (flashcards) ---- */
.practice-shell { padding: 0 0 40px; }
.practice-counter {
  text-align: center;
  font-size: 14px; color: var(--ink-dim);
  font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 12px 0;
}
.practice-card {
  position: relative;
  height: 280px;
  margin: 16px auto;
  max-width: 540px;
  border-radius: var(--radius);
  cursor: pointer;
  perspective: 1200px;
}
.pc-front, .pc-back {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: var(--radius);
  backface-visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.85, 0.4, 1.0);
  box-shadow: var(--shadow);
}
.pc-front {
  background: var(--surface);
  color: var(--ink);
}
.pc-back {
  background: var(--grad-warm);
  color: white;
  transform: rotateY(180deg);
}
.practice-card.flipped .pc-front { transform: rotateY(180deg); }
.practice-card.flipped .pc-back  { transform: rotateY(0deg); }
.pc-prompt { font-size: 14px; color: var(--ink-dim); letter-spacing: 0.15em; text-transform: uppercase; }
.pc-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 96px; line-height: 1; opacity: 0.5; margin-top: 8px;
}
.pc-answer {
  font-family: var(--font-display); font-weight: 700;
  font-size: 38px; line-height: 1.1; padding: 0 24px;
  text-align: center;
}
.practice-controls {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 20px; flex-wrap: wrap;
}
.practice-progress {
  height: 6px; background: var(--surface-2);
  border-radius: 999px; margin: 24px auto 0;
  max-width: 540px; overflow: hidden;
}
.practice-progress > div {
  height: 100%; background: var(--grad-warm);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.practice-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-dim);
  text-decoration: underline;
}
.practice-link:hover { color: var(--purple); }

@media (max-width: 520px) {
  .practice-card { height: 220px; }
  .pc-num { font-size: 72px; }
  .pc-answer { font-size: 28px; }
}

/* ---- Word Bingo ---- */
.kids-bingo-shell { padding: 0 0 40px; }
.bingo-info {
  text-align: center; font-size: 14px;
  color: var(--ink-dim); font-weight: 700;
  margin: 14px 0 6px;
}
.bingo-win {
  color: var(--pink-deep);
  font-size: 18px; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.bingo-card {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 560px;
  margin: 12px auto;
}
.bingo-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform 0.15s ease;
}
.bingo-cell img {
  width: 100%; flex: 1; object-fit: cover;
  filter: grayscale(0.7) opacity(0.6);
  transition: filter 0.3s;
}
.bingo-label {
  font-size: 9px; font-weight: 700;
  padding: 2px 4px;
  text-align: center;
  color: var(--ink-dim);
  background: var(--surface);
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.bingo-cell.bingo-marked img { filter: none; }
.bingo-cell.bingo-marked .bingo-label { color: var(--ink); font-weight: 800; }
.bingo-cell.bingo-line { outline: 3px solid var(--pink); animation: bingoFlash 0.8s ease-in-out infinite alternate; }
@keyframes bingoFlash {
  from { box-shadow: 0 0 0px var(--pink-soft); }
  to   { box-shadow: 0 0 16px var(--pink); }
}
.bingo-stamp {
  position: absolute; top: 6px; right: 6px;
  background: var(--mint); color: white;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.bingo-hint {
  text-align: center; color: var(--ink-dim);
  font-size: 13px; margin-top: 18px;
}
.bingo-hint a { color: var(--purple); text-decoration: underline; }

.kids-game-bingo { background: linear-gradient(135deg, #fff 60%, #ffd1dc 100%); }

/* ---- Math Sprint ---- */
.kids-math-stage {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 30px 0;
}
.kids-math-q {
  font-family: var(--font-display); font-weight: 700;
  font-size: 64px; line-height: 1;
  background: var(--grad-warm);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kids-math-input {
  font-size: 36px;
  text-align: center;
  max-width: 240px;
  font-family: var(--font-display);
  font-weight: 700;
}
@media (max-width: 520px) {
  .kids-math-q { font-size: 44px; }
  .kids-math-input { font-size: 28px; max-width: 180px; }
}

/* ---- Memory match grid ---- */
.kids-mm-grid {
  display: grid;
  gap: 8px;
  max-width: 520px;
  margin: 16px auto 0;
}
.kids-mm-grid-easy   { grid-template-columns: repeat(4, 1fr); }
.kids-mm-grid-medium { grid-template-columns: repeat(4, 1fr); }
.kids-mm-grid-hard   { grid-template-columns: repeat(5, 1fr); }
.kids-mm-grid-expert { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 520px) {
  .kids-mm-grid-hard   { grid-template-columns: repeat(4, 1fr); }
  .kids-mm-grid-expert { grid-template-columns: repeat(4, 1fr); }
}
.mm-card {
  position: relative;
  aspect-ratio: 1 / 1;
  perspective: 700px;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.mm-card-back, .mm-card-front {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  backface-visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.2, 0.85, 0.4, 1.0);
  overflow: hidden;
}
.mm-card-back {
  background: var(--grad-warm);
  color: white;
  font-family: var(--font-display);
  font-weight: 700; font-size: 28px;
  box-shadow: var(--shadow-sm);
}
.mm-card-front {
  background: var(--surface);
  transform: rotateY(180deg);
  box-shadow: var(--shadow-sm);
}
.mm-card-front img { width: 100%; height: 100%; object-fit: cover; }
.mm-card.flipped .mm-card-back  { transform: rotateY(180deg); }
.mm-card.flipped .mm-card-front { transform: rotateY(0deg); }

/* ---- Spelling bee ---- */
.kids-sb-stage {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 16px 0;
}
.sb-mask {
  font-family: var(--font-mono);
  font-size: 26px; font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: center;
}
.sb-mask .sb-letter { color: var(--ink); }
.sb-mask .sb-blank { color: var(--pink); border-bottom: 2px solid var(--pink); padding: 0 4px; }
.sb-mask .sb-space { display: inline-block; width: 12px; }
.sb-hint { font-size: 13px; color: var(--ink-dim); }

/* ---- Sticker Album ---- */
.kids-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.ka-sticker {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}
.ka-sticker.ka-got { background: linear-gradient(135deg, #fff 50%, var(--yellow-soft) 100%); }
.ka-sticker.ka-locked { opacity: 0.6; filter: grayscale(0.4); }
.ka-sticker.ka-got:hover { transform: scale(1.05) rotate(-2deg); }
.ka-emoji { font-size: 36px; line-height: 1; margin-bottom: 6px; }
.ka-name { font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.ka-locked .ka-name { color: var(--ink-faint); }

/* =============================================================
   New mini games — 2048, Cryptogram, Memory Sequence, Word Ladder
   ============================================================= */

/* Tile gradients on Mini Games hub */
.kids-game-2048   { background: linear-gradient(135deg, #fff 60%, #fff0c9 100%); }
.kids-game-crypto { background: linear-gradient(135deg, #fff 60%, #2d1659 220%); color: var(--ink); }
.kids-game-seq    { background: linear-gradient(135deg, #fff 60%, #ffd1dc 100%); }
.kids-game-ladder { background: linear-gradient(135deg, #fff 60%, #c8f5e3 100%); }

/* ---- 2048 ---- */
.kids-2048-shell { padding-bottom: 30px; }
.g2048-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 420px;
  margin: 16px auto 12px;
  background: var(--surface-2);
  padding: 10px;
  border-radius: var(--radius);
  touch-action: none;
}
.g2048-tile {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 5vw, 32px);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  transition: transform 0.12s ease;
}
.g2048-t0    { background: rgba(255, 255, 255, 0.4); }
.g2048-t2    { background: #fff5ed; }
.g2048-t4    { background: #ffe9d9; }
.g2048-t8    { background: #ffd5c9; color: var(--ink); }
.g2048-t16   { background: #ffb89a; color: white; }
.g2048-t32   { background: #ff9a6a; color: white; }
.g2048-t64   { background: var(--coral); color: white; }
.g2048-t128  { background: var(--yellow); color: var(--ink); font-size: clamp(18px, 4.4vw, 28px); }
.g2048-t256  { background: #ffc83d; color: var(--ink); font-size: clamp(18px, 4.4vw, 28px); }
.g2048-t512  { background: var(--mint); color: white; font-size: clamp(18px, 4.4vw, 28px); }
.g2048-t1024 { background: var(--sky); color: white; font-size: clamp(16px, 4vw, 24px); }
.g2048-t2048 { background: var(--grad-warm); color: white; font-size: clamp(16px, 4vw, 24px); box-shadow: 0 0 14px rgba(255, 61, 127, 0.4); }
.g2048-t4096, .g2048-t8192 { background: var(--grad-warm); color: white; font-size: clamp(14px, 3.6vw, 22px); }
.g2048-hint { text-align: center; color: var(--ink-dim); font-size: 13px; margin: 6px 0 18px; }

/* ---- Cryptogram ---- */
.kids-crypto-shell { padding-bottom: 40px; }
.crypto-board {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px 18px;
  margin: 12px auto;
  max-width: 720px;
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 14px 18px;
  line-height: 1.6;
  box-shadow: var(--shadow-sm);
}
.crypto-word {
  display: inline-flex; gap: 2px; flex-wrap: wrap;
}
.crypto-cell {
  display: inline-flex; flex-direction: column;
  align-items: center;
  min-width: 22px;
  padding: 4px 2px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s, box-shadow 0.1s;
}
.crypto-cell:hover { background: var(--surface-2); }
.crypto-cell.crypto-active {
  background: var(--purple-soft);
  box-shadow: 0 0 0 2px var(--purple) inset;
}
.crypto-cell.crypto-ok .cc-guess { color: var(--mint); }
.cc-guess {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; line-height: 1;
  color: var(--ink);
  min-height: 24px;
}
.cc-enc {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 11px;
  color: var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  padding: 0 2px;
  margin-top: 2px;
  letter-spacing: 0.05em;
}
.crypto-punct {
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--ink);
  align-self: flex-start;
  padding: 4px 1px;
}
.crypto-letters {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 4px;
  max-width: 720px;
  margin: 0 auto;
}
.crypto-key {
  padding: 10px 4px;
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 8px;
  font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: background 0.1s;
}
.crypto-key:hover { background: var(--purple-soft); }
.crypto-key.crypto-clear { background: var(--coral-soft); }
@media (max-width: 520px) {
  .crypto-letters { grid-template-columns: repeat(7, 1fr); }
  .cc-guess { font-size: 18px; }
  .crypto-punct { font-size: 18px; }
}

/* ---- Memory Sequence ---- */
.seq-progress {
  display: flex; gap: 8px; justify-content: center;
  margin-top: 4px;
}
.seq-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--purple-soft);
}
.seq-dot-ok  { background: var(--mint); border-color: var(--mint); }
.seq-dot-cur { background: var(--pink); border-color: var(--pink); animation: seqPulse 1s ease-in-out infinite; }
@keyframes seqPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }

/* ---- Word Ladder ---- */
.kids-ladder-shell { padding-bottom: 30px; max-width: 540px; margin: 0 auto; }
.ladder-target {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  margin: 12px 0 18px;
}
.ladder-pill {
  background: var(--purple-soft);
  color: var(--ink);
  padding: 10px 20px;
  border-radius: 999px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.06em;
}
.ladder-pill-end { background: var(--grad-warm); color: white; }
.ladder-arrow { font-size: 22px; color: var(--ink-dim); }
.ladder-par {
  font-size: 12px; font-weight: 700;
  color: var(--ink-dim);
  background: var(--surface-2);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.1em;
}
.ladder-chain {
  display: flex; flex-direction: column; gap: 4px;
  margin: 18px 0;
  max-height: 280px; overflow-y: auto;
}
.ladder-step {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.ladder-tag {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.2em;
  background: var(--mint-soft);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.ladder-msg {
  text-align: center; min-height: 22px;
  font-size: 13px; color: var(--ink-dim);
  font-weight: 700;
}
.ladder-msg-err { color: var(--coral); }

/* =============================================================
   HOME — daily-ritual rebuild
   hero · today's challenge · stats pills · featured · continue · explore
   ============================================================= */

.home-hero {
  padding: 28px 4px 18px;
  text-align: left;
}
.home-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 7vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
}
.home-headline .accent-1 {
  background: var(--grad-warm);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-subhead {
  font-size: clamp(15px, 2.4vw, 17px);
  color: var(--ink-dim);
  margin: 0;
  max-width: 560px;
}

.today-challenge {
  position: relative;
  overflow: hidden;
  background: var(--grad-warm);
  color: white;
  border-radius: var(--radius-lg);
  padding: 24px 26px 22px;
  margin: 6px 0 18px;
  box-shadow: var(--shadow-glow-pink);
  display: grid;
  gap: 16px;
}
.today-challenge::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 70%);
  pointer-events: none;
}
.today-eyebrow {
  position: relative; z-index: 1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  opacity: 0.92;
  text-transform: uppercase;
}
.today-body {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 120px;
}
.today-mascot {
  flex-shrink: 0;
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18));
}
.today-text { flex: 1; min-width: 0; }
.today-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.08;
  margin: 0 0 6px;
}
.today-meta {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.92;
  margin-bottom: 4px;
}
.today-social {
  font-size: 13px;
  opacity: 0.85;
}
.today-cta {
  position: relative; z-index: 1;
  width: 100%;
  font-size: 17px !important;
  padding: 15px 22px !important;
  min-height: 52px;
  background: white !important;
  color: var(--pink-deep) !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}
.today-cta:hover { transform: translateY(-2px); }
.today-challenge.today-played { opacity: 0.94; }
.today-challenge.today-played::after {
  content: "✓";
  position: absolute;
  top: 18px; right: 20px;
  font-size: 18px;
  background: rgba(255,255,255,0.25);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
@media (min-width: 600px) {
  .today-challenge {
    grid-template-columns: 1fr auto;
    grid-template-areas: "eye eye" "body cta";
    align-items: center;
  }
  .today-eyebrow { grid-area: eye; }
  .today-body    { grid-area: body; }
  .today-cta     { grid-area: cta; width: auto; }
}
@media (max-width: 480px) {
  .today-challenge { padding: 20px 20px 18px; }
  .today-body { gap: 14px; min-height: 104px; }
  .today-mascot { width: 96px; height: 96px; }
}

.stats-pills {
  display: flex;
  gap: 10px;
  margin: 0 0 22px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.stats-pills::-webkit-scrollbar { display: none; }
.stat-pill {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1.5px solid var(--surface-2);
  white-space: nowrap;
}
.stat-pill-icon { font-size: 16px; line-height: 1; }
.stat-pill-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.stat-pill-lab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 480px) {
  .stats-pills { gap: 8px; }
  .stat-pill { padding: 8px 12px; flex: 0 0 auto; }
}

.featured-game {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--surface-2);
}
.featured-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--purple);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.featured-body {
  display: flex;
  align-items: center;
  gap: 14px;
}
.featured-mascot {
  flex-shrink: 0;
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
}
.featured-text { flex: 1; min-width: 0; }
.featured-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.12;
  margin: 0 0 4px;
  color: var(--ink);
}
.featured-blurb {
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.4;
}
.featured-cta {
  flex-shrink: 0;
  min-height: 44px;
  font-size: 14px !important;
  padding: 10px 18px !important;
}
@media (max-width: 480px) {
  .featured-body { flex-wrap: wrap; }
  .featured-mascot { width: 64px; height: 64px; }
  .featured-cta { width: 100%; margin-top: 4px; }
}

.continue-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff 60%, var(--mint-soft, #d4f5e2) 100%);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  min-height: 64px;
}
.continue-row:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.continue-emoji { font-size: 32px; line-height: 1; flex-shrink: 0; }
.continue-text { flex: 1; min-width: 0; }
.continue-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 0.18em;
  color: var(--ink-faint); text-transform: uppercase;
}
.continue-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink);
}
.continue-meta { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.continue-cta {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--pink-deep);
  letter-spacing: 0.04em;
}

.explore-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  margin: 22px 0 28px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1.5px solid var(--surface-2);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  min-height: 52px;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.explore-link:hover {
  background: var(--surface-2);
  border-color: var(--purple-soft);
}
.explore-link:active { transform: scale(0.99); }
.explore-text { font-size: 15px; }
.explore-arrow {
  font-size: 20px;
  color: var(--purple);
  transition: transform 0.15s ease;
}
.explore-link:hover .explore-arrow { transform: translateX(4px); }

.mascot-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mascot-slot:empty { background: transparent; }

/* =============================================================
   MOBILE ROCKSTAR PASS — PWA bottom tabs, touch targets, safe areas,
   overscroll containment, type scale, haptic-paired transitions
   ============================================================= */

/* Prevent the browser pull-to-refresh / overscroll bounce inside game
   surfaces — kids dragging on a game shouldn't reload the page. */
html, body {
  overscroll-behavior-y: contain;
}

/* Bottom tab bar — hidden on desktop, shown on mobile (≤720px).
   Positioned with safe-area inset so it floats above the iPhone home
   indicator instead of behind it. */
.bottom-tabs {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: rgba(255, 245, 237, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(45, 22, 89, 0.08);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  box-shadow: 0 -4px 20px rgba(45, 22, 89, 0.06);
}
.bottom-tabs .tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 2px;
  border-radius: var(--radius-xs);
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  min-height: 52px;
  transition: color 0.15s, background 0.15s, transform 0.05s;
}
.bottom-tabs .tab:active { transform: scale(0.94); }
.bottom-tabs .tab-icon {
  font-size: 22px;
  line-height: 1;
  transition: transform 0.15s;
}
.bottom-tabs .tab.tab-active {
  color: var(--pink);
  background: var(--pink-soft);
}
.bottom-tabs .tab.tab-active .tab-icon {
  transform: translateY(-1px) scale(1.1);
}

/* Show bottom tabs on mobile, hide top nav links on mobile,
   pad the main app content so the fixed tab bar doesn't overlap. */
@media (max-width: 720px) {
  .bottom-tabs { display: grid; }
  .topbar .topnav { display: none; }
  .app {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .footer {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  /* In classroom mode, also hide the bottom tabs (kids stay locked in). */
  body.classroom-mode .bottom-tabs { display: none; }
  body.classroom-mode .app { padding-bottom: env(safe-area-inset-bottom); }
}

/* ===== Touch target audit — every interactive element ≥44×44px
   on mobile. We add minimums (not fixed sizes) so existing
   layouts stretch up gracefully without breaking. ===== */
@media (max-width: 720px) {
  /* Chips / filter chips */
  .chip,
  .diff-chip,
  .multi-chip,
  .crypto-key,
  .sudoku-num,
  .hm-key,
  .geo-tile,
  .conn-cell,
  .trivia-choice {
    min-height: 44px;
  }

  /* Buttons */
  .btn,
  button.icon-btn,
  .settings-toggle,
  .ack-close,
  .ach-close,
  .mbox-open,
  .crypto-key {
    min-height: 44px;
  }

  /* Bigger body type — feels more confident at arm's length */
  body { font-size: 17px; }
  .play-subtitle { font-size: 14px; }
  .daily-title  { font-size: 22px; }
  .play-title   { font-size: 22px; }

  /* Tighter padding on game shells so content fills more screen */
  .play-shell,
  .word-shell,
  .multi-shell,
  .kids-pic-shell,
  .kids-mm-shell,
  .kids-sb-shell,
  .kids-anagram-shell,
  .kids-trivia-shell,
  .kids-conn-shell,
  .kids-sudoku-shell,
  .kids-2048-shell,
  .kids-geo-shell,
  .kids-ladder-shell {
    padding-left: 4px;
    padding-right: 4px;
  }

  /* Topbar tighter on mobile — drop nav, focus on brand + status */
  .topbar { padding: 8px 12px; min-height: 52px; }
  .level-badge, .streak-badge { font-size: 13px; padding: 4px 10px; }
}

/* Even more compact on small phones */
@media (max-width: 380px) {
  .bottom-tabs .tab-label { font-size: 9px; }
  .bottom-tabs .tab-icon  { font-size: 20px; }
  .bottom-tabs .tab       { padding: 6px 0; min-height: 48px; }
}

/* iOS standalone (PWA) tweaks — when launched from home screen */
@media (display-mode: standalone) {
  /* Add a touch more top padding for the iOS status bar */
  .topbar { padding-top: max(8px, env(safe-area-inset-top)); }
}

/* =============================================================
   Polish pass — button feel, card stagger, image shimmer,
   stat pulse, hover lift
   ============================================================= */

/* Universal tactile button press — every clickable element gets a
   subtle scale-down on :active so taps feel responsive. */
.btn:active,
button:active:not([disabled]) {
  transform: scale(0.96);
  transition: transform 0.05s ease-out;
}
.kids-game-tile:active,
.daily-card:active,
.quiz-card:active,
.kids-pic-tile:active,
.kids-banner:active,
.home-tile:active {
  transform: scale(0.985);
  transition: transform 0.08s ease-out;
}
body.reduced-motion *:active { transform: none !important; }

/* Quiz-card grid stagger entry — first 16 cards fade up sequentially. */
.quiz-grid .quiz-card {
  animation: cardEnter 0.45s cubic-bezier(0.2, 0.85, 0.4, 1.0) backwards;
}
.quiz-grid .quiz-card:nth-child(1)  { animation-delay: 0.00s; }
.quiz-grid .quiz-card:nth-child(2)  { animation-delay: 0.04s; }
.quiz-grid .quiz-card:nth-child(3)  { animation-delay: 0.08s; }
.quiz-grid .quiz-card:nth-child(4)  { animation-delay: 0.12s; }
.quiz-grid .quiz-card:nth-child(5)  { animation-delay: 0.16s; }
.quiz-grid .quiz-card:nth-child(6)  { animation-delay: 0.20s; }
.quiz-grid .quiz-card:nth-child(7)  { animation-delay: 0.24s; }
.quiz-grid .quiz-card:nth-child(8)  { animation-delay: 0.28s; }
.quiz-grid .quiz-card:nth-child(n+9)  { animation-delay: 0.32s; }
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.reduced-motion .quiz-grid .quiz-card { animation: none; }

/* Image shimmer — the picture frame shows a gradient sweep while img loads.
   When the <img> has loaded data, JS adds .img-ready to fade it in over the
   shimmer (then we hide the shimmer for performance). */
.kids-pic-frame {
  position: relative;
}
.kids-pic-frame::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    var(--surface-2) 30%,
    rgba(255, 255, 255, 0.55) 50%,
    var(--surface-2) 70%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 1.4s ease-in-out infinite;
  border-radius: inherit;
  z-index: 0;
}
.kids-pic-frame img {
  position: relative; z-index: 1;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
.kids-pic-frame img.img-ready,
.kids-pic-frame.img-ready img { opacity: 1; }
.kids-pic-frame.img-ready::before { display: none; }
@keyframes shimmerSweep {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
body.reduced-motion .kids-pic-frame::before { animation: none; }

/* Stat pulse — when JS adds .stat-pulse on update, the value bounces. */
.stat-value.stat-pulse {
  animation: statPulse 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes statPulse {
  0%   { transform: scale(1);   color: var(--ink); }
  35%  { transform: scale(1.18); color: var(--pink); }
  100% { transform: scale(1);   color: var(--ink); }
}
body.reduced-motion .stat-value.stat-pulse { animation: none; }

/* Hover lift — already on quiz cards, but enforce a richer shadow. */
.quiz-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* Game tile hover — subtle rotate + lift for personality. */
.kids-game-tile {
  transition: transform 0.18s cubic-bezier(0.2, 0.85, 0.4, 1.0), box-shadow 0.18s;
}
.kids-game-tile:hover {
  transform: translateY(-3px) rotate(-0.6deg);
  box-shadow: var(--shadow);
}
.kids-game-tile:nth-child(2n):hover { transform: translateY(-3px) rotate(0.6deg); }

/* =============================================================
   Retention systems — quest tile, miss tile, mystery box,
   mastery bars, weekly recap, friend challenge, freeze pip
   ============================================================= */

/* Streak freeze indicator on topbar — appended to .streak-badge */
.streak-badge .freeze-pip {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 6px;
  background: rgba(94, 184, 255, 0.18);
  color: var(--ink);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Home strip — Quest tile + Miss review tile, side by side */
.home-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 14px 0 18px;
}
@media (min-width: 700px) {
  .home-strip { grid-template-columns: 1fr 1fr; }
}
.home-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.home-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.home-tile-quest { background: linear-gradient(135deg, #fff 60%, #fff0c9 100%); }
.home-tile-miss  { background: linear-gradient(135deg, #fff 60%, #ffd1dc 100%); }
.home-tile-emoji { font-size: 32px; line-height: 1; flex-shrink: 0; }
.home-tile-text { flex: 1; min-width: 0; }
.home-tile-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 0.18em;
  color: var(--ink-faint); text-transform: uppercase;
}
.home-tile-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-tile-meta { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.home-tile-bar {
  height: 5px; background: var(--surface-2);
  border-radius: 999px; overflow: hidden;
  margin-top: 6px;
}
.home-tile-fill {
  height: 100%;
  background: var(--grad-warm);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* Mystery Box modal */
.mbox {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(45, 22, 89, 0.65);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  animation: achIn 0.4s cubic-bezier(0.2, 0.85, 0.4, 1.0);
}
.mbox.mbox-out { animation: achOut 0.35s ease-in forwards; }
.mbox-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  text-align: center;
  max-width: 360px; width: calc(100% - 32px);
  box-shadow: var(--shadow-lg), 0 0 80px rgba(255, 200, 61, 0.4);
  animation: achPop 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.mbox-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.25em;
  color: var(--yellow);
  text-transform: uppercase; margin-bottom: 14px;
}
.mbox-shake {
  font-size: 96px; line-height: 1; margin: 8px 0 14px;
  cursor: pointer;
  animation: mboxWiggle 1.2s ease-in-out infinite;
  display: inline-block;
}
@keyframes mboxWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg) scale(1.05); }
  75% { transform: rotate(8deg) scale(1.05); }
}
.mbox-shake.mbox-burst {
  animation: mboxBurst 0.7s cubic-bezier(0.2, 0.85, 0.4, 1.0) forwards;
}
@keyframes mboxBurst {
  0% { transform: scale(1); }
  40% { transform: scale(1.4) rotate(20deg); opacity: 1; }
  100% { transform: scale(0) rotate(120deg); opacity: 0; }
}
.mbox-reward { font-size: 96px; line-height: 1; margin: 8px 0 14px; animation: achEmojiSpin 0.8s ease-out; }
.mbox-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1.1; margin-bottom: 22px;
  background: var(--grad-warm);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.reduced-motion .mbox-shake, body.reduced-motion .mbox-reward { animation: none; }

/* Weekly recap card on profile */
.recap-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.recap-card.recap-card-stack {
  display: flex; flex-direction: column;
  align-items: stretch;
}
.recap-stat { text-align: center; }
.rs-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; line-height: 1;
  background: var(--grad-warm);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rs-label {
  font-size: 11px; color: var(--ink-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-top: 4px;
}
@media (max-width: 480px) {
  .recap-card { grid-template-columns: repeat(2, 1fr); }
}

/* Mastery bars on profile */
.mastery-list {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.mastery-row {
  display: grid;
  grid-template-columns: 110px 1fr 60px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.mastery-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mastery-bar {
  height: 8px; background: var(--surface-2);
  border-radius: 999px; overflow: hidden;
}
.mastery-fill {
  height: 100%;
  background: var(--grad-warm);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.mastery-lvl {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px;
  color: var(--ink-dim);
  text-align: right;
}

/* Friend challenge */
.friend-code {
  font-size: 14px; color: var(--ink);
  text-align: center;
  padding: 4px 0 8px;
}
.friend-code b {
  font-family: var(--font-mono);
  font-size: 18px; letter-spacing: 0.1em;
  color: var(--purple);
}
.friend-blurb {
  font-size: 13px; color: var(--ink-dim);
  text-align: center;
  margin-top: 4px;
}
.challenge-shell { max-width: 720px; margin: 0 auto; padding: 8px 0 40px; }
.challenge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 18px 0;
}
@media (min-width: 600px) {
  .challenge-grid { grid-template-columns: 1fr 1fr; }
}
.challenge-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
}
.challenge-card-self {
  background: linear-gradient(135deg, var(--surface) 60%, var(--purple-soft) 100%);
  border: 2px solid var(--purple);
}
.ch-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  color: var(--ink-faint); text-transform: uppercase;
  margin-bottom: 6px;
}
.ch-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px;
  margin-bottom: 14px;
}
.ch-code {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  margin-left: 6px;
}
.ch-row {
  display: flex; justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--surface-2);
}
.ch-label { font-size: 14px; color: var(--ink-dim); }
.ch-val {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.challenge-cta {
  text-align: center;
  margin-top: 22px;
  padding: 22px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.challenge-cta p { color: var(--ink-dim); margin: 0 0 12px; }
.challenge-cta-row {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}

/* =============================================================
   Geography (Name That State) — US tile-grid map
   ============================================================= */
.kids-geo-shell { padding-bottom: 30px; }
.kids-game-geo  { background: linear-gradient(135deg, #fff 60%, #cce8ff 100%); }

.geo-prompt {
  text-align: center;
  font-size: 18px;
  margin: 8px 0 14px;
  color: var(--ink-dim);
}
.geo-prompt b {
  font-family: var(--font-display);
  color: var(--pink);
  font-size: 22px;
  letter-spacing: 0.04em;
}
.geo-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(9, 1fr);
  gap: 4px;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 12 / 9;
}
.geo-tile {
  background: var(--surface);
  border: 1.5px solid var(--purple-soft);
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(10px, 1.5vw, 14px);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.05s;
  display: flex; align-items: center; justify-content: center;
}
.geo-tile:hover { background: var(--purple-soft); transform: scale(1.04); }
.geo-tile.geo-found {
  background: var(--mint);
  color: white;
  border-color: var(--mint);
  cursor: default;
  pointer-events: none;
}
.geo-tile.geo-flash-wrong {
  background: var(--coral);
  color: white;
  border-color: var(--coral);
  animation: word-shake 0.32s cubic-bezier(.36,.07,.19,.97);
}
@media (max-width: 520px) {
  .geo-tile { font-size: 9px; }
  .geo-prompt { font-size: 15px; }
  .geo-prompt b { font-size: 18px; }
}

/* =============================================================
   Trivia Tower
   ============================================================= */
.kids-trivia-shell { max-width: 640px; margin: 0 auto; padding: 8px 0 30px; }
.kids-game-trivia  { background: linear-gradient(135deg, #fff 60%, #ffd5c9 100%); }

.trivia-ladder {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  margin: 14px 0;
}
.tl-step {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-dim);
}
.tl-step.tl-done { background: var(--mint); color: white; }
.tl-step.tl-cur  { background: var(--grad-warm); color: white;
  box-shadow: 0 0 0 2px var(--ink) inset; }
.tl-step[data-tier="1"] { opacity: 1; }
.tl-step[data-tier="2"] { box-shadow: inset 0 -3px 0 var(--yellow); }
.tl-step[data-tier="3"] { box-shadow: inset 0 -3px 0 var(--coral); }
.tl-step[data-tier="4"] { box-shadow: inset 0 -3px 0 var(--purple); }

.trivia-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.trivia-tier {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.trivia-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 3.2vw, 24px);
  line-height: 1.25;
  margin-bottom: 18px;
  min-height: 60px;
}
.trivia-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.trivia-choice {
  background: var(--surface-2);
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s, transform 0.05s, color 0.12s;
  min-height: 56px;
}
.trivia-choice:hover:not(:disabled) {
  background: var(--purple-soft);
  transform: translateY(-1px);
}
.trivia-choice.elim { opacity: 0.3; cursor: not-allowed; }
.trivia-choice.trivia-right { background: var(--mint); color: white; border-color: var(--mint); }
.trivia-choice.trivia-wrong { background: var(--coral); color: white; border-color: var(--coral); }
.trivia-lifelines {
  display: flex; gap: 8px;
  justify-content: center;
  border-top: 1px solid var(--surface-2);
  padding-top: 12px;
}
@media (max-width: 480px) {
  .trivia-choices { grid-template-columns: 1fr; }
  .trivia-choice { min-height: 52px; }
}

/* =============================================================
   Anagram Daily
   ============================================================= */
.kids-anagram-shell { max-width: 540px; margin: 0 auto; padding: 8px 0 30px; }
.kids-game-anagram { background: linear-gradient(135deg, #fff 60%, #fff0c9 100%); }

.anagram-stage {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px 22px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 18px;
}
.anagram-letters {
  display: flex; justify-content: center; gap: 6px;
  flex-wrap: wrap;
}
.ana-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 52px;
  background: var(--surface-2);
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--ink);
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
}
.ana-letter.ana-hint-on {
  background: var(--mint-soft);
  color: var(--mint);
  border: 2px solid var(--mint);
}
.anagram-input-row {
  display: flex; gap: 8px;
}
.anagram-input-row .guess-input {
  flex: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
}
.anagram-hint {
  display: flex; justify-content: space-between;
  align-items: center;
}
.anagram-tries {
  font-size: 13px; font-weight: 700;
  color: var(--ink-dim);
}
@media (max-width: 480px) {
  .ana-letter { width: 36px; height: 44px; font-size: 22px; }
}

/* =============================================================
   Sudoku
   ============================================================= */
.kids-sudoku-shell { padding-bottom: 30px; }
.kids-game-sudoku { background: linear-gradient(135deg, #fff 60%, #cce8ff 100%); }

.sudoku-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
  max-width: 460px;
  margin: 16px auto 12px;
  background: var(--ink);
  padding: 3px;
  border-radius: 6px;
  aspect-ratio: 1 / 1;
}
.sudoku-cell {
  background: var(--surface);
  border: 0.5px solid var(--purple-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 3.6vw, 22px);
  color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.sudoku-cell.sudoku-given { color: var(--ink); cursor: default; background: var(--surface-2); }
.sudoku-cell.sudoku-sel { background: var(--purple-soft); }
.sudoku-cell.sudoku-wrong { color: var(--coral); background: rgba(255, 107, 74, 0.10); }
.sudoku-cell.sudoku-rb { border-bottom: 2px solid var(--ink); }
.sudoku-cell.sudoku-cb { border-right: 2px solid var(--ink); }

.sudoku-pad {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  max-width: 460px;
  margin: 0 auto;
}
.sudoku-num {
  padding: 14px 0;
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 18px;
  cursor: pointer;
  transition: background 0.1s, transform 0.05s;
}
.sudoku-num:hover { background: var(--purple-soft); }
.sudoku-num:active { transform: scale(0.95); }
.sudoku-num.sudoku-clear { background: var(--coral-soft); font-size: 16px; }
@media (max-width: 460px) {
  .sudoku-pad { grid-template-columns: repeat(5, 1fr); }
  .sudoku-num { padding: 12px 0; font-size: 16px; }
}

/* =============================================================
   Connections
   ============================================================= */
.kids-conn-shell { padding-bottom: 30px; max-width: 640px; margin: 0 auto; }
.kids-game-conn { background: linear-gradient(135deg, #fff 60%, #c89cff 100%); }

.conn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.conn-cell {
  background: var(--surface-2);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 18px 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(11px, 2.2vw, 15px);
  text-align: center;
  cursor: pointer;
  transition: background 0.1s, transform 0.05s, color 0.1s;
  min-height: 64px;
  display: flex; align-items: center; justify-content: center;
  word-break: break-word; line-height: 1.15;
}
.conn-cell:hover { background: var(--purple-soft); }
.conn-cell.conn-sel {
  background: var(--ink);
  color: white;
  transform: scale(0.97);
}
.conn-grid.conn-shake { animation: word-shake 0.4s cubic-bezier(.36,.07,.19,.97); }

.conn-solved {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 8px;
  text-align: center;
  color: var(--ink);
  animation: connSolveIn 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes connSolveIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.conn-solved-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.conn-solved-words {
  font-family: var(--font-display);
  font-weight: 600; font-size: 14px;
  margin-top: 2px; opacity: 0.85;
}
.conn-mistakes {
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.15em;
  margin: 8px 0;
  color: var(--ink-dim);
}
.conn-actions {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 10px;
}
@media (max-width: 480px) {
  .conn-cell { padding: 14px 4px; min-height: 52px; }
}

/* =============================================================
   Classroom Mode + Teachers page
   ============================================================= */
.teachers-shell { max-width: 720px; margin: 0 auto; padding: 8px 0 40px; display:flex; flex-direction:column; gap: 18px; }
.teachers-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.teachers-link-row {
  display: flex; gap: 8px; align-items: stretch;
  margin-top: 8px;
}
.teachers-link {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  border-radius: 999px;
  border: 2px solid var(--purple-soft);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}
.teachers-meta { color: var(--ink-dim); font-size: 13px; margin-top: 10px; }
.teachers-howto {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px; color: var(--ink);
}
.teachers-howto li { line-height: 1.5; }

/* Classroom-mode hides distractions while a kid is on a class link. */
.classroom-shell { padding-bottom: 60px; }
body.classroom-mode .topnav,
body.classroom-mode .topbar-right { display: none; }
body.classroom-mode .footer-links a:not([href="#/"]) { display: none; }

.classroom-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px;
  border-radius: var(--radius);
  background: var(--grad-warm);
  color: white;
  box-shadow: var(--shadow-glow-purple);
  margin: 8px 0 22px;
}
.classroom-emoji { font-size: 56px; line-height: 1; flex-shrink: 0; }
.classroom-banner-text { flex: 1; min-width: 0; }
.classroom-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  opacity: 0.85; text-transform: uppercase;
}
.classroom-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; line-height: 1.05; margin: 4px 0 0;
}
.classroom-sep { opacity: 0.6; font-weight: 500; }
.classroom-level { font-weight: 600; opacity: 0.95; }
.classroom-meta { font-size: 13px; opacity: 0.92; margin-top: 4px; }
.classroom-foot { text-align: center; margin-top: 28px; }
.classroom-exit {
  font-size: 13px; color: var(--ink-faint);
  text-decoration: underline; opacity: 0.7;
}
.classroom-exit:hover { color: var(--ink-dim); opacity: 1; }
@media (max-width: 520px) {
  .classroom-banner { padding: 14px 16px; gap: 12px; }
  .classroom-emoji { font-size: 40px; }
  .classroom-title { font-size: 22px; }
}

/* =============================================================
   Home — Most Popular row + dual-axis filter row
   ============================================================= */
.quiz-grid.quiz-grid-featured {
  margin-bottom: 28px;
  /* Slight color cue so the featured row stands apart from All Quizzes. */
}
.quiz-grid.quiz-grid-featured .quiz-card {
  box-shadow: 0 8px 24px rgba(255, 61, 127, 0.12);
  border: 2px solid rgba(255, 61, 127, 0.18);
}
.quiz-grid.quiz-grid-featured .quiz-card::after {
  content: "🔥";
  position: absolute;
  top: 8px; right: 10px;
  font-size: 16px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}
/* Dual filter axis — category chips above, difficulty chips below.
   Wraps on narrow screens. */
.filter-row {
  display: flex; flex-direction: column;
  gap: 8px; width: 100%;
}
.filter-row .filter-chips {
  flex-wrap: wrap;
}
.filter-row .filter-chips[data-axis="diff"] .chip {
  background: var(--surface);
  border: 1.5px solid var(--purple-soft);
}
.filter-row .filter-chips[data-axis="diff"] .chip.active {
  background: var(--grad-warm); color: white; border-color: transparent;
}

/* =============================================================
   POLISH PASS — onboarding, splash, transitions, settings,
   cinematic achievement reveals, profile heatmap, difficulty chips
   ============================================================= */

/* ---- Route fade-in (between SPA navigations) ---- */
@keyframes routeFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.route-fade-in { animation: routeFade 0.28s cubic-bezier(0.2, 0.85, 0.4, 1.0); }
body.reduced-motion .route-fade-in { animation: none; }

/* ---- Brand splash on first paint ---- */
.brand-splash {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 61, 127, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(107, 46, 255, 0.08) 0%, transparent 50%),
    var(--grad-bg);
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  animation: splashIn 0.4s cubic-bezier(0.2, 0.85, 0.4, 1.0);
  transition: opacity 0.6s, visibility 0.6s;
}
.brand-splash.brand-splash-hide { opacity: 0; visibility: hidden; }
.brand-splash-mark {
  width: 84px; height: 84px;
  background: var(--grad-warm);
  color: white;
  border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 52px;
  box-shadow: var(--shadow-glow-pink);
  animation: splashMark 0.9s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.brand-splash-word {
  font-family: var(--font-display);
  font-weight: 600; font-size: 44px;
  color: var(--ink);
  letter-spacing: -0.02em;
  opacity: 0; animation: splashWord 0.6s 0.25s ease-out forwards;
}
@keyframes splashIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes splashMark {
  0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(0deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes splashWord {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
body.reduced-motion .brand-splash,
body.reduced-motion .brand-splash-mark,
body.reduced-motion .brand-splash-word { animation: none; opacity: 1; }

/* ---- Onboarding modal ---- */
.onboard {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(45, 22, 89, 0.55);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: onbIn 0.3s ease-out;
}
.onboard.onboard-out { animation: onbOut 0.25s ease-in forwards; }
@keyframes onbIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes onbOut { from { opacity: 1; } to { opacity: 0; } }

.onboard-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  max-width: 520px; width: 100%;
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: onbCard 0.45s cubic-bezier(0.2, 0.85, 0.4, 1.0);
}
@keyframes onbCard {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.onboard-step {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}
.onboard-emoji { font-size: 56px; line-height: 1; margin-bottom: 12px; }
.onboard-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 1.1; margin: 0 0 10px;
}
.onboard-sub { color: var(--ink-dim); font-size: 15px; margin: 0 0 22px; }
.onboard-features {
  text-align: left;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 22px;
  font-size: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.of-row { color: var(--ink); }
.of-row span { margin-right: 8px; }
.onboard-input {
  width: 100%; padding: 14px 18px;
  border-radius: 999px;
  border: 2px solid var(--purple-soft);
  font-size: 18px; font-family: var(--font-body);
  text-align: center;
  margin-bottom: 18px;
  transition: border-color 0.15s;
}
.onboard-input:focus { outline: none; border-color: var(--pink); }
.onboard-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.onb-av-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 12px 0 22px;
}
.onb-av {
  background: var(--surface-2);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 10px;
  font-size: 32px; line-height: 1;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.onb-av:hover { transform: scale(1.08); background: var(--purple-soft); }
.onb-av.selected {
  border-color: var(--pink);
  background: var(--pink-soft);
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(255, 61, 127, 0.25);
}
@media (max-width: 500px) {
  .onboard-card { padding: 24px 20px; }
  .onboard-title { font-size: 24px; }
  .onb-av-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Cinematic achievement reveal ---- */
.ach-reveal {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: rgba(45, 22, 89, 0.65);
  backdrop-filter: blur(10px);
  animation: achIn 0.4s cubic-bezier(0.2, 0.85, 0.4, 1.0);
}
.ach-reveal.ach-out { animation: achOut 0.4s ease-in forwards; }
@keyframes achIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes achOut { from { opacity: 1; } to { opacity: 0; } }
.ach-glow {
  position: absolute; inset: -50%;
  background: radial-gradient(circle, rgba(255, 200, 61, 0.4), transparent 50%);
  animation: achGlow 4s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes achGlow {
  from { transform: scale(1) rotate(0deg); }
  to   { transform: scale(1.4) rotate(180deg); }
}
.ach-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 40px 32px 28px;
  max-width: 420px; width: calc(100% - 32px);
  text-align: center;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(255, 200, 61, 0.45);
  animation: achPop 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes achPop {
  0%   { transform: scale(0.3) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.05) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.ach-eyebrow {
  font-size: 11px; font-weight: 800;
  color: var(--yellow); letter-spacing: 0.25em;
  text-transform: uppercase; margin-bottom: 14px;
  text-shadow: 0 1px 2px rgba(255, 200, 61, 0.4);
}
.ach-emoji {
  font-size: 88px; line-height: 1;
  margin: 8px 0 14px;
  animation: achEmojiSpin 1.2s cubic-bezier(0.2, 0.85, 0.4, 1.0);
  filter: drop-shadow(0 8px 20px rgba(255, 200, 61, 0.45));
}
@keyframes achEmojiSpin {
  0%   { transform: rotate(-360deg) scale(0.4); opacity: 0; }
  60%  { transform: rotate(15deg) scale(1.15); opacity: 1; }
  100% { transform: rotate(0deg) scale(1); }
}
.ach-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 1.1; margin-bottom: 6px;
  background: var(--grad-warm);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ach-desc { color: var(--ink-dim); font-size: 14px; margin-bottom: 22px; }
body.reduced-motion .ach-glow,
body.reduced-motion .ach-emoji,
body.reduced-motion .ach-card { animation: none; }

/* ---- Difficulty chips on play start overlay ---- */
.difficulty-chips {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 16px 0 18px;
  flex-wrap: wrap;
}
.diff-chip {
  background: white;
  border: 2px solid var(--purple-soft);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-family: var(--font-body); font-weight: 700;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; min-width: 88px;
  transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.diff-chip:hover { transform: translateY(-1px); background: var(--surface-2); }
.diff-chip.active {
  background: var(--grad-warm);
  border-color: transparent;
  color: white;
  box-shadow: var(--shadow-glow-pink);
}
.dc-name { font-size: 14px; }
.dc-meta { font-size: 10px; opacity: 0.85; font-weight: 600; }
.diff-chip.active .dc-meta { opacity: 0.95; }

/* ---- Settings page ---- */
.settings-shell {
  max-width: 720px; margin: 0 auto;
  padding: 8px 0 40px;
  display: flex; flex-direction: column; gap: 18px;
}
.settings-section {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.settings-h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 18px; margin: 0 0 12px;
}
.settings-row {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-2);
}
.settings-row:last-child { border-bottom: none; }
.settings-label { font-weight: 700; color: var(--ink); font-size: 14px; }
.settings-input {
  flex: 1; max-width: 280px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 2px solid var(--purple-soft);
  font-size: 14px; font-family: var(--font-body);
}
.settings-input:focus { outline: none; border-color: var(--pink); }
.settings-toggle {
  background: var(--surface-2);
  color: var(--ink-dim);
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 8px 22px;
  font-weight: 700; font-size: 13px;
  cursor: pointer;
  min-width: 80px;
  transition: background 0.15s, color 0.15s;
}
.settings-toggle.on {
  background: var(--mint-soft);
  color: var(--ink);
}
.settings-danger { background: rgba(255, 107, 74, 0.04); }
.settings-warn { color: var(--ink-dim); font-size: 13px; margin: 0 0 12px; }

/* Settings: avatar grid uses the onboarding styles. */
.settings-shell .onb-av-grid {
  flex: 1; max-width: 360px;
  margin: 0; gap: 6px;
  grid-template-columns: repeat(6, 1fr);
}

/* ---- Profile hero (avatar + name) ---- */
.profile-hero {
  text-align: center;
  padding: 28px 0 16px;
}
.profile-av {
  font-size: 76px; line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 6px 16px rgba(45, 22, 89, 0.18));
  animation: profileBob 5s ease-in-out infinite alternate;
}
@keyframes profileBob {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
body.reduced-motion .profile-av { animation: none; }
.profile-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 36px; line-height: 1; margin: 0 0 6px;
}
.profile-meta { color: var(--ink-dim); font-size: 14px; margin: 0 0 14px; }
.profile-actions { display: flex; justify-content: center; gap: 8px; }

/* ---- Activity heatmap ---- */
.hm-wrap {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  overflow-x: auto;
}
.hm-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 312px;
}
.hm-row { display: flex; gap: 4px; }
.hm-cell {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--surface-2);
  flex-shrink: 0;
}
.hm-l0 { background: var(--surface-2); }
.hm-l1 { background: var(--mint-soft); }
.hm-l2 { background: var(--mint); }
.hm-l3 { background: linear-gradient(135deg, var(--mint), var(--pink)); }
.hm-today { box-shadow: 0 0 0 2px var(--pink) inset; }
.hm-empty { background: transparent; }
.hm-legend {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font-size: 11px; color: var(--ink-faint);
  justify-content: flex-end;
}
.hm-legend .hm-cell { width: 14px; height: 14px; }
@media (max-width: 480px) {
  .hm-cell { width: 18px; height: 18px; }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.05ms !important;
  }
}
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.05ms !important;
}

/* ===== Mascots ===== */
.mascot {
  --mascot-color: #7a5cff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #ffffff 0%, color-mix(in srgb, var(--mascot-color) 18%, #ffffff) 55%, color-mix(in srgb, var(--mascot-color) 35%, #ffffff) 100%);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--mascot-color) 50%, transparent), 0 2px 6px rgba(0,0,0,0.08);
  overflow: visible;
  flex-shrink: 0;
}
.mascot svg {
  width: 78%;
  height: 78%;
  display: block;
  filter: drop-shadow(0 2px 2px rgba(20, 14, 50, 0.18));
}
.mascot-size-64  { width: 64px;  height: 64px; }
.mascot-size-120 { width: 120px; height: 120px; }
.mascot-size-200 { width: 200px; height: 200px; }
.mascot-size-64 svg  { width: 80%; height: 80%; }
.mascot-size-200 svg { width: 76%; height: 76%; }
.mascot.idle {
  animation: mascot-bounce 3s ease-in-out infinite;
}
.mascot.celebrate {
  animation: mascot-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mascot-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes mascot-pop {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.18) translateY(-10px); }
  60%  { transform: scale(0.95) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}
.mascot-sparkle {
  position: absolute;
  inset: -10px;
  pointer-events: none;
}
.mascot-sparkle span {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ffd84d 0%, #ffd84d 40%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  animation: mascot-spark 0.7s ease-out forwards;
}
.mascot-sparkle span:nth-child(1) { top: 6%;  left: 50%; animation-delay: 0.00s; }
.mascot-sparkle span:nth-child(2) { top: 30%; left: 92%; animation-delay: 0.06s; }
.mascot-sparkle span:nth-child(3) { top: 78%; left: 84%; animation-delay: 0.12s; }
.mascot-sparkle span:nth-child(4) { top: 78%; left: 12%; animation-delay: 0.18s; }
.mascot-sparkle span:nth-child(5) { top: 30%; left: 4%;  animation-delay: 0.24s; }
@keyframes mascot-spark {
  0%   { opacity: 0; transform: scale(0.4) translate(0,0); }
  40%  { opacity: 1; transform: scale(1.4) translate(0,-6px); }
  100% { opacity: 0; transform: scale(0.6) translate(0,-14px); }
}
.mascot-name {
  margin-top: 8px;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  color: var(--ink, #1a1a2e);
  letter-spacing: 0.2px;
}
.mascot-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface, #fff);
}
.mascot-card .mascot-level {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-faint, #6b6680);
}
body.reduced-motion .mascot.idle,
body.reduced-motion .mascot.celebrate,
body.reduced-motion .mascot-sparkle span {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .mascot.idle, .mascot.celebrate, .mascot-sparkle span { animation: none !important; }
}
@media (max-width: 768px) {
  .mascot-size-200 { width: 120px; height: 120px; }
  .mascot-size-120 { width: 96px;  height: 96px; }
  .mascot-size-64  { width: 56px;  height: 56px; }
  .mascot-name { font-size: 13px; }
}

/* ===== Daily Hub + Next-Up Panel ===== */
.daily-hub {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 80px;
}
.daily-hub-head {
  text-align: left;
  margin-bottom: 24px;
}
.daily-hub-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent-1, #ff3d7f);
  margin-bottom: 6px;
}
.daily-hub-title {
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.daily-hub-meta {
  font-size: 14px;
  color: var(--ink-soft, #6b6b78);
  margin-bottom: 14px;
}
.daily-hub-progress {
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.daily-hub-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-1, #ff3d7f), var(--accent-2, #ffb84d));
  border-radius: 999px;
  transition: width 0.4s ease;
}
.daily-hub-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.daily-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  background: #fff;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  border: 2px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-height: 76px;
}
.daily-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.daily-card:active { transform: scale(0.98); }
.daily-card.next {
  border-color: var(--accent-1, #ff3d7f);
  box-shadow: 0 4px 16px rgba(255, 61, 127, 0.15);
}
.daily-card.done {
  background: #f4faf5;
  border-color: rgba(58, 183, 149, 0.25);
  opacity: 0.85;
}
.daily-card-emoji {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
  width: 48px;
  text-align: center;
}
.daily-card-text { flex: 1; min-width: 0; }
.daily-card-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.daily-card-sub {
  font-size: 13px;
  color: var(--ink-soft, #6b6b78);
}
.daily-card-status {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent-1, #ff3d7f);
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.daily-card.done .daily-card-status {
  color: #3ab795;
}
.daily-hub-done {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft, #6b6b78);
  font-weight: 600;
}

/* Next-Up panel — slots into any results screen */
.next-up-panel {
  display: block;
  margin-top: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(255, 61, 127, 0.08), rgba(255, 184, 77, 0.08));
  border: 2px solid rgba(255, 61, 127, 0.2);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
a.next-up-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 61, 127, 0.15);
}
a.next-up-panel:active { transform: scale(0.98); }
.next-up-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent-1, #ff3d7f);
  margin-bottom: 8px;
}
.next-up-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.next-up-emoji {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  width: 44px;
  text-align: center;
}
.next-up-info { flex: 1; min-width: 0; }
.next-up-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 2px;
}
.next-up-meta {
  font-size: 13px;
  color: var(--ink-soft, #6b6b78);
}
.next-up-cta {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-1, #ff3d7f);
  flex-shrink: 0;
  white-space: nowrap;
}
.next-up-panel.done {
  text-align: center;
  background: linear-gradient(135deg, rgba(58, 183, 149, 0.1), rgba(58, 183, 149, 0.04));
  border-color: rgba(58, 183, 149, 0.25);
}
.next-up-panel.done .next-up-eyebrow { color: #3ab795; }
.next-up-panel.done .next-up-title { font-size: 18px; margin-bottom: 4px; }
@media (max-width: 768px) {
  .daily-card { padding: 14px; min-height: 68px; }
  .daily-card-emoji { font-size: 30px; width: 42px; }
  .daily-card-title { font-size: 16px; }
  .daily-card-sub { font-size: 12px; }
  .next-up-emoji { font-size: 28px; width: 40px; }
  .next-up-title { font-size: 15px; }
}

/* ===== Nintendo Polish: Splash + Transitions + ScorePop ===== */

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(circle at 30% 20%, var(--accent-1, var(--pink, #ff3d7f)) 0%, transparent 55%),
    radial-gradient(circle at 75% 85%, var(--accent-2, var(--yellow, #ffc83d)) 0%, transparent 55%),
    var(--surface-1, var(--bg, #fff5ed));
  opacity: 1;
  transition: opacity 0.25s ease-out;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.splash-screen.splash-out { opacity: 0; pointer-events: none; }

.splash-wordmark {
  font-size: clamp(60px, 12vw, 96px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--ink, #2d1659);
  line-height: 1;
  margin: 0;
  animation: splashWordmarkIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  text-shadow: 0 4px 0 rgba(255, 255, 255, 0.35);
}
.splash-tagline {
  font-size: clamp(15px, 2.4vw, 19px);
  font-weight: 600;
  color: var(--ink-dim, #6e5c8c);
  margin: 0;
  opacity: 0;
  animation: splashFadeIn 0.45s ease-out 0.2s forwards;
}
.splash-hint {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint, #b3a7c7);
  margin-top: 22px;
  opacity: 0;
  animation: splashFadeIn 0.6s ease-out 1s forwards;
}

@keyframes splashWordmarkIn {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes splashFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.reduced-motion .splash-screen,
.splash-screen.splash-reduced { transition: none; }
body.reduced-motion .splash-wordmark,
body.reduced-motion .splash-tagline,
body.reduced-motion .splash-hint,
.splash-reduced .splash-wordmark,
.splash-reduced .splash-tagline,
.splash-reduced .splash-hint {
  animation: none;
  opacity: 1;
  transform: none;
}

@media (max-width: 480px) {
  .splash-wordmark { font-size: clamp(48px, 16vw, 72px); }
  .splash-tagline  { font-size: 14px; }
  .splash-hint     { font-size: 11px; margin-top: 16px; }
}

#app { transition: opacity 0.25s ease-in; }
#app.app-fading {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
body.reduced-motion #app,
body.reduced-motion #app.app-fading {
  transition: none;
  opacity: 1;
}

.score-pop {
  position: absolute;
  z-index: 9500;
  transform: translate(-50%, -100%);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  background: var(--mint, #4dd9a8);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  animation: scorePopRise 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.score-pop.score-pop-good   { background: var(--mint, #4dd9a8); color: #0a3a28; }
.score-pop.score-pop-big {
  background: linear-gradient(135deg, #ffd84d, #ff9a3c);
  color: #4a2a00;
  font-size: 24px;
  padding: 8px 16px;
  animation: scorePopRise 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.score-pop.score-pop-streak {
  background: var(--pink, #ff3d7f);
  color: #fff;
}

@keyframes scorePopRise {
  0%   { opacity: 0; transform: translate(-50%, -90%) scale(0.85); }
  15%  { opacity: 1; transform: translate(-50%, -100%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(1); }
}

body.reduced-motion .score-pop,
.score-pop.score-pop-reduced {
  animation: none;
  opacity: 1;
  transform: translate(-50%, -100%);
}

/* ===== Games Discovery Hub ===== */

.games-hub {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 16px 64px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.games-hub-head {
  text-align: center;
  padding: 6px 4px 0;
}

.games-hub-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--accent-1, #ff3d7f);
  margin-bottom: 8px;
}

.games-hub-title {
  font-size: 26px;
  line-height: 1.15;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.surprise-me {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 120px;
  padding: 18px 20px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent-1, #ff3d7f) 0%, var(--accent-2, #ffb84d) 100%);
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(255, 61, 127, 0.28), 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 120ms ease, box-shadow 180ms ease;
  font-family: inherit;
}

.surprise-me:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(255, 61, 127, 0.34), 0 3px 8px rgba(0, 0, 0, 0.10);
}

.surprise-me:active {
  transform: scale(0.97);
}

.surprise-me.spinning {
  animation: surprisePulse 700ms ease-in-out infinite;
  cursor: progress;
}

.surprise-me.surprise-landed {
  animation: surpriseBounce 200ms ease-out;
}

@keyframes surprisePulse {
  0%, 100% { box-shadow: 0 12px 28px rgba(255, 61, 127, 0.28), 0 2px 6px rgba(0, 0, 0, 0.08); }
  50%      { box-shadow: 0 18px 38px rgba(255, 61, 127, 0.45), 0 3px 10px rgba(0, 0, 0, 0.12); }
}

@keyframes surpriseBounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

body.reduced-motion .surprise-me.spinning,
body.reduced-motion .surprise-me.surprise-landed {
  animation: none;
}

.surprise-emoji {
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
  min-width: 56px;
  text-align: center;
}

.surprise-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.surprise-kicker {
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  opacity: 0.92;
}

.surprise-title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.surprise-sub {
  font-size: 13px;
  opacity: 0.88;
}

.surprise-spin {
  font-size: 14px;
  font-weight: 700;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  white-space: nowrap;
}

.games-search-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.games-search {
  width: 100%;
  font-size: 16px;
  padding: 14px 16px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: var(--card-bg, #fff);
  color: inherit;
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.games-search:focus {
  outline: none;
  border-color: var(--accent-1, #ff3d7f);
  box-shadow: 0 0 0 4px rgba(255, 61, 127, 0.14);
}

.games-search-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card-bg, #fff);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.games-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: background 120ms ease, transform 80ms ease;
}

.games-search-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

.games-search-row:active {
  transform: scale(0.98);
}

.games-search-emoji {
  font-size: 24px;
  width: 32px;
  text-align: center;
}

.games-search-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.games-search-title {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.games-search-meta {
  font-size: 12px;
  opacity: 0.7;
}

.games-search-empty {
  padding: 12px 14px;
  font-size: 14px;
  opacity: 0.7;
}

.games-curated {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.games-section-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 700;
  opacity: 0.65;
  padding-left: 4px;
}

.games-curated-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.games-mini-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: none;
  border-radius: 16px;
  background: var(--card-bg, #fff);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: transform 120ms ease, box-shadow 180ms ease;
}

.games-mini-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.games-mini-card:active {
  transform: scale(0.97);
}

.games-mini-emoji {
  font-size: 32px;
  line-height: 1;
  width: 44px;
  text-align: center;
}

.games-mini-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.games-mini-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.games-mini-meta {
  font-size: 12px;
  opacity: 0.7;
}

.games-all-link {
  display: block;
  text-align: center;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-1, #ff3d7f);
  text-decoration: none;
  border-radius: 12px;
  transition: background 120ms ease, transform 80ms ease;
}

.games-all-link:hover {
  background: rgba(255, 61, 127, 0.08);
}

.games-all-link:active {
  transform: scale(0.98);
}

@media (min-width: 720px) {
  .games-hub {
    padding-top: 28px;
    gap: 26px;
  }
  .games-hub-title {
    font-size: 32px;
  }
  .surprise-me {
    min-height: 140px;
    padding: 22px 26px;
    border-radius: 24px;
  }
  .surprise-emoji {
    font-size: 3.5rem;
    min-width: 72px;
  }
  .surprise-title {
    font-size: 1.75rem;
  }
  .games-curated-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* ===== Teachers CTA + Home Random Buttons ===== */
.topnav-cta {
  background: linear-gradient(135deg, var(--accent-1, #ff3d7f), var(--accent-2, #ffb84d));
  color: #fff !important;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-left: 8px;
  box-shadow: 0 2px 8px rgba(255, 61, 127, 0.25);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.topnav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 61, 127, 0.35);
}
.topnav-cta:active { transform: scale(0.97); }

.random-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}
.random-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-height: 88px;
}
.random-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}
.random-btn:active { transform: scale(0.97); }
.random-btn-quiz {
  background: linear-gradient(135deg, rgba(255, 61, 127, 0.08), rgba(255, 184, 77, 0.08));
  border-color: rgba(255, 61, 127, 0.22);
}
.random-btn-mini {
  background: linear-gradient(135deg, rgba(108, 74, 182, 0.08), rgba(58, 183, 149, 0.08));
  border-color: rgba(108, 74, 182, 0.22);
}
.random-btn-emoji {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  width: 44px;
  text-align: center;
}
.random-btn-text { flex: 1; min-width: 0; }
.random-btn-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent-1, #ff3d7f);
  margin-bottom: 2px;
}
.random-btn-mini .random-btn-eyebrow { color: #6c4ab6; }
.random-btn-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.random-btn-cta {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-1, #ff3d7f);
  flex-shrink: 0;
  white-space: nowrap;
}
.random-btn-mini .random-btn-cta { color: #6c4ab6; }
@media (max-width: 768px) {
  .random-row { grid-template-columns: 1fr; }
  .random-btn { padding: 14px; min-height: 72px; }
  .random-btn-emoji { font-size: 28px; width: 40px; }
  .random-btn-title { font-size: 15px; }
  .topnav-cta { display: none; }
}

.hol-pack-chips-label {
  margin-top: 28px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b78);
  opacity: 0.7;
}

/* ===== Compact home overrides ===== */
.hero.hero-compact {
  padding: 16px 0 12px;
  text-align: center;
}
.hero.hero-compact h1 {
  font-size: clamp(28px, 5.5vw, 42px);
  line-height: 1.1;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.hero.hero-compact p {
  font-size: 14px;
  margin: 0;
  color: var(--ink-soft, #6b6b78);
}
.daily-quad-compact .daily-card {
  padding: 12px 14px;
  gap: 10px;
}
.daily-quad-compact .daily-emoji { font-size: 30px; }
.daily-quad-compact .daily-title { font-size: 17px; line-height: 1.2; }
.daily-quad-compact .daily-meta { font-size: 12px; }
.daily-quad-compact .daily-label { font-size: 10px; }
@media (max-width: 768px) {
  .hero.hero-compact { padding: 8px 0 8px; }
  .daily-quad-compact .daily-card { padding: 10px 12px; }
  .daily-quad-compact .daily-emoji { font-size: 26px; }
}

/* ===========================================================
   APP-FEEL SHELL · phone-app polish (Phase 1)
   Glass chrome, fixed topbar/bottom-tabs, active-press scale,
   hide-chrome during gameplay, spring transitions, sheets,
   pull-to-refresh affordance, no-browser-leaks.
   =========================================================== */

html, body {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior-y: contain;
}
body {
  -webkit-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* Glass chrome — semi-transparent + blur, brand cream tint */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(255, 245, 237, 0.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: env(safe-area-inset-top);
}
.bottom-tabs {
  background: rgba(255, 245, 237, 0.88);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Push main content past fixed topbar; padding compensates for bottom-tabs.
   Only applies on mobile where bottom-tabs are visible. */
.app {
  padding-top: calc(60px + env(safe-area-inset-top));
  min-height: 100vh;
  min-height: 100dvh;
}
@media (max-width: 720px) {
  .app { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* In-game state — strip all chrome so gameplay owns the screen */
body.in-game .topbar,
body.in-game .bottom-tabs,
body.in-game .footer {
  display: none !important;
}
body.in-game .app {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Universal active-press scale on every tappable element. Spring easing
   for tactile bounce — matches the brand's playful feel. */
button, .btn, a.btn, .tab, .chip, .quiz-card,
.daily-card, .kids-game-tile, .home-tile, .next-up-panel,
.random-btn, .surprise-me-btn, .topnav a, .footer-links a,
.daily-card-emoji, .icon-btn {
  transition: transform 0.14s cubic-bezier(0.18, 0.89, 0.32, 1.28),
              box-shadow 0.18s ease;
}
button:active, .btn:active, a.btn:active, .tab:active, .chip:active,
.quiz-card:active, .daily-card:active, .kids-game-tile:active,
.home-tile:active, .next-up-panel:active, .random-btn:active,
.surprise-me-btn:active, .icon-btn:active {
  transform: scale(0.96);
}

/* Disable desktop hover-lift on touch devices — sticky-hover is the worst
   "this is a website" tell. */
@media (hover: none) {
  .quiz-card:hover, .daily-card:hover, .kids-game-tile:hover,
  .next-up-panel:hover, .random-btn:hover, .home-tile:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }
}

/* Snap-scroll utility for horizontal carousels (Most Popular row, etc.) */
.scroll-snap-x {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.scroll-snap-x::-webkit-scrollbar { display: none; }
.scroll-snap-x > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Bottom-sheet utility — for any modal/popup */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 99;
}
.sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface-1, #fff);
  border-radius: 28px 28px 0 0;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 0.34s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  z-index: 100;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sheet.open { transform: translateY(0); }
.sheet-handle {
  width: 36px; height: 5px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  margin: 0 auto 14px;
}

/* Section header — standardized small-caps brand-purple eyebrow */
.section-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b78);
  opacity: 0.7;
  margin: 18px 0 8px;
}

/* Reduce motion fallbacks for everything in this layer */
body.reduced-motion .topbar,
body.reduced-motion .bottom-tabs {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 245, 237, 1);
}
body.reduced-motion button:active,
body.reduced-motion .btn:active,
body.reduced-motion .tab:active,
body.reduced-motion .chip:active,
body.reduced-motion .quiz-card:active,
body.reduced-motion .daily-card:active,
body.reduced-motion .kids-game-tile:active {
  transform: none;
}
body.reduced-motion .sheet { transition: none; }

/* ===== Quizzes — per-category carousels ===== */
.quizzes-shell {
  padding: 0 14px 80px;
  max-width: 1080px;
  margin: 0 auto;
}
.cat-row {
  margin: 18px 0 24px;
}
.cat-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 8px;
}
.cat-row-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}
.cat-row-count {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ink-soft, #6b6b78);
  opacity: 0.6;
}
.cat-row-track {
  padding: 4px 4px 8px;
  margin: 0 -4px;
}
/* Fixed-width quiz cards inside a horizontal carousel so they scroll-snap
   instead of all shrinking to fit. */
.cat-row-track .quiz-card {
  flex: 0 0 auto;
  width: 220px;
  min-height: 130px;
}
@media (max-width: 480px) {
  .cat-row-track .quiz-card { width: 180px; min-height: 120px; }
  .cat-row-title { font-size: 16px; }
}

/* ===== HoL pack carousel cards (Spotify-style) ===== */
.hol-pack-track {
  padding: 4px 4px 12px;
  margin: 0 -4px;
}
.hol-pack-card {
  flex: 0 0 auto;
  width: 240px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.hol-pack-card.active {
  border-color: var(--accent-1, #ff3d7f);
  box-shadow: 0 4px 14px rgba(255, 61, 127, 0.18);
}
.hol-pack-card.played {
  background: linear-gradient(135deg, rgba(58, 183, 149, 0.08), rgba(58, 183, 149, 0.02));
  border-color: rgba(58, 183, 149, 0.25);
}
.hol-pack-emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}
.hol-pack-text {
  flex: 1;
  min-width: 0;
}
.hol-pack-title {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hol-pack-blurb {
  font-size: 11px;
  color: var(--ink-soft, #6b6b78);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hol-pack-badge {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 11px;
  font-weight: 800;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3ab795;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 480px) {
  .hol-pack-card { width: 200px; padding: 12px 14px; }
  .hol-pack-emoji { font-size: 24px; width: 32px; }
  .hol-pack-title { font-size: 13px; }
}

/* ===== Game-card carousel sizing (mini-game tiles in /games sections) ===== */
.game-card-track .kids-game-tile {
  flex: 0 0 auto;
  width: 160px;
  min-height: 144px;
}
@media (max-width: 480px) {
  .game-card-track .kids-game-tile { width: 140px; min-height: 128px; }
}