:root {
  --shadow: 0 4px 10px rgba(31, 58, 104, 0.18);
  --shadow-lg: 0 12px 28px rgba(31, 58, 104, 0.25);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "SF Pro Text",
    system-ui, "Helvetica Neue", sans-serif;
}

/* ─── THEMES ─────────────────────────────────────────────────
   Each theme overrides the color custom-properties only.
   Theme is applied via body[data-theme="…"] (see settings.js).      */

/* All themes now bumped a notch in saturation & vibrance for a fresher,
   more kid-friendly feel. The dark squares are slightly bolder so the new
   bold-outlined Chessnut pieces really pop against them. */
body, body[data-theme="sunset"] {
  --bg: #fff2c4;
  --bg-soft: #ffd97a;
  --bg-grad-1: #ffb300;
  --bg-grad-2: #ff5722;
  --ink: #1a2f5c;
  --ink-soft: #4a6593;
  --ink-mute: #7a8db0;
  --accent: #ff9800;
  --accent-warm: #d84315;
  --good: #2e7d32;
  --bad: #d32f2f;
  --light-sq: #ffd180;
  --dark-sq: #b25a13;
  --select: #ffea00;
  --legal: #2e7d32;
  --capture: #d84315;
  --last-move: #ffd54f;
}

body[data-theme="ocean"] {
  --bg: #b3e9ff;
  --bg-soft: #4dd0e1;
  --bg-grad-1: #00bcd4;
  --bg-grad-2: #01579b;
  --ink: #052340;
  --ink-soft: #01579b;
  --ink-mute: #4a7ab0;
  --accent: #00e5ff;
  --accent-warm: #006064;
  --good: #00897b;
  --bad: #ff1744;
  --light-sq: #80deea;
  --dark-sq: #0277bd;
  --select: #ffea00;
  --legal: #00897b;
  --capture: #ff1744;
  --last-move: #ffd54f;
}

body[data-theme="forest"] {
  --bg: #dcedc8;
  --bg-soft: #aed581;
  --bg-grad-1: #66bb6a;
  --bg-grad-2: #1b5e20;
  --ink: #1b3a0a;
  --ink-soft: #1b5e20;
  --ink-mute: #558b2f;
  --accent: #76ff03;
  --accent-warm: #ef6c00;
  --good: #2e7d32;
  --bad: #c62828;
  --light-sq: #c5e1a5;
  --dark-sq: #2e7d32;
  --select: #ffea00;
  --legal: #2e7d32;
  --capture: #ef6c00;
  --last-move: #ffd54f;
}

body[data-theme="candy"] {
  --bg: #ffd1e1;
  --bg-soft: #ff80ab;
  --bg-grad-1: #ec407a;
  --bg-grad-2: #ad1457;
  --ink: #4a0e3d;
  --ink-soft: #ad1457;
  --ink-mute: #8e5a82;
  --accent: #ff1744;
  --accent-warm: #880e4f;
  --good: #2e7d32;
  --bad: #ff1744;
  --light-sq: #ffc1d8;
  --dark-sq: #ad1457;
  --select: #ffea00;
  --legal: #2e7d32;
  --capture: #ff1744;
  --last-move: #ffd54f;
}

body[data-theme="royal"] {
  --bg: #ddc7ff;
  --bg-soft: #b388ff;
  --bg-grad-1: #7c4dff;
  --bg-grad-2: #311b92;
  --ink: #1f0858;
  --ink-soft: #311b92;
  --ink-mute: #7e63a8;
  --accent: #ffd600;
  --accent-warm: #ff6f00;
  --good: #2e7d32;
  --bad: #d50000;
  --light-sq: #d1c4e9;
  --dark-sq: #4527a0;
  --select: #ffea00;
  --legal: #2e7d32;
  --capture: #d50000;
  --last-move: #ffd54f;
}

body[data-theme="volcano"] {
  --bg: #ffd3b0;
  --bg-soft: #ff8a65;
  --bg-grad-1: #ff3d00;
  --bg-grad-2: #4a0000;
  --ink: #2a0a00;
  --ink-soft: #bf360c;
  --ink-mute: #8d4a3a;
  --accent: #ff6d00;
  --accent-warm: #b71c1c;
  --good: #2e7d32;
  --bad: #b71c1c;
  --light-sq: #ffab91;
  --dark-sq: #bf360c;
  --select: #ffea00;
  --legal: #2e7d32;
  --capture: #b71c1c;
  --last-move: #ffd54f;
}

body[data-theme="galaxy"] {
  --bg: #1a0d3d;
  --bg-soft: #4527a0;
  --bg-grad-1: #d500f9;
  --bg-grad-2: #0d0026;
  --ink: #2a1850;
  --ink-soft: #4527a0;
  --ink-mute: #7e63a8;
  --accent: #00e5ff;
  --accent-warm: #f50057;
  --good: #00c853;
  --bad: #ff1744;
  --light-sq: #9575cd;
  --dark-sq: #311b92;
  --select: #ffea00;
  --legal: #00c853;
  --capture: #ff1744;
  --last-move: #ffd54f;
}

body[data-theme="mint"] {
  --bg: #b9f6ca;
  --bg-soft: #69f0ae;
  --bg-grad-1: #00e676;
  --bg-grad-2: #00695c;
  --ink: #0a3d2c;
  --ink-soft: #00695c;
  --ink-mute: #4db6ac;
  --accent: #1de9b6;
  --accent-warm: #00bfa5;
  --good: #00897b;
  --bad: #d50000;
  --light-sq: #a7ffeb;
  --dark-sq: #00897b;
  --select: #ffea00;
  --legal: #00897b;
  --capture: #d50000;
  --last-move: #ffd54f;
}

body[data-theme="cherry"] {
  --bg: #ffcdd2;
  --bg-soft: #ef9a9a;
  --bg-grad-1: #e53935;
  --bg-grad-2: #880e4f;
  --ink: #3e0011;
  --ink-soft: #b71c1c;
  --ink-mute: #ad5360;
  --accent: #ff1744;
  --accent-warm: #c2185b;
  --good: #2e7d32;
  --bad: #b71c1c;
  --light-sq: #ffb0b8;
  --dark-sq: #b71c1c;
  --select: #ffea00;
  --legal: #2e7d32;
  --capture: #ff1744;
  --last-move: #ffd54f;
}

body[data-theme="tropical"] {
  --bg: #b2ebf2;
  --bg-soft: #80deea;
  --bg-grad-1: #00bfa5;
  --bg-grad-2: #ff6f00;
  --ink: #002f33;
  --ink-soft: #00695c;
  --ink-mute: #4db6ac;
  --accent: #ff8a65;
  --accent-warm: #d84315;
  --good: #00897b;
  --bad: #d84315;
  --light-sq: #80deea;
  --dark-sq: #00838f;
  --select: #ffea00;
  --legal: #00897b;
  --capture: #ff5722;
  --last-move: #ffab40;
}

body[data-theme="sunflower"] {
  --bg: #fffde7;
  --bg-soft: #fff176;
  --bg-grad-1: #ffd600;
  --bg-grad-2: #ff6f00;
  --ink: #3e2723;
  --ink-soft: #5d4037;
  --ink-mute: #8d6e63;
  --accent: #ef6c00;
  --accent-warm: #d84315;
  --good: #2e7d32;
  --bad: #d32f2f;
  --light-sq: #fff59d;
  --dark-sq: #6d4c41;
  --select: #ffea00;
  --legal: #2e7d32;
  --capture: #d32f2f;
  --last-move: #ffca28;
}

body[data-theme="lavender"] {
  --bg: #f3e5f5;
  --bg-soft: #ce93d8;
  --bg-grad-1: #ab47bc;
  --bg-grad-2: #4a148c;
  --ink: #2a0c4a;
  --ink-soft: #6a1b9a;
  --ink-mute: #9c4eaa;
  --accent: #8e24aa;
  --accent-warm: #aa00ff;
  --good: #2e7d32;
  --bad: #d50000;
  --light-sq: #e1bee7;
  --dark-sq: #8e24aa;
  --select: #ffea00;
  --legal: #2e7d32;
  --capture: #d50000;
  --last-move: #ffd54f;
}

body[data-theme="aurora"] {
  --bg: #b2ebf2;
  --bg-soft: #4dd0e1;
  --bg-grad-1: #00e676;
  --bg-grad-2: #ec407a;
  --ink: #002233;
  --ink-soft: #006064;
  --ink-mute: #4db6ac;
  --accent: #00e5ff;
  --accent-warm: #ec407a;
  --good: #00c853;
  --bad: #f50057;
  --light-sq: #80deea;
  --dark-sq: #00838f;
  --select: #ffea00;
  --legal: #00c853;
  --capture: #f50057;
  --last-move: #ffd54f;
}

body[data-theme="cyber"] {
  --bg: #0d0026;
  --bg-soft: #1a0d3d;
  --bg-grad-1: #ff0080;
  --bg-grad-2: #00ffff;
  --ink: #1a0033;
  --ink-soft: #4527a0;
  --ink-mute: #7e63a8;
  --accent: #c51162;
  --accent-warm: #00838f;
  --good: #00c853;
  --bad: #d50000;
  --light-sq: #80deea;
  --dark-sq: #c51162;
  --select: #ffea00;
  --legal: #00c853;
  --capture: #d50000;
  --last-move: #ffea00;
}

body[data-theme="autumn"] {
  --bg: #ffccbc;
  --bg-soft: #ff8a65;
  --bg-grad-1: #e65100;
  --bg-grad-2: #4e342e;
  --ink: #2a0d00;
  --ink-soft: #5d2c0a;
  --ink-mute: #8d5a3a;
  --accent: #ff6f00;
  --accent-warm: #bf360c;
  --good: #558b2f;
  --bad: #b71c1c;
  --light-sq: #ffab91;
  --dark-sq: #8b4513;
  --select: #ffea00;
  --legal: #558b2f;
  --capture: #b71c1c;
  --last-move: #ffca28;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  background:
    radial-gradient(circle at 15% 0%, var(--bg-grad-1) 0%, transparent 40%),
    radial-gradient(circle at 90% 100%, var(--bg-grad-2) 0%, transparent 45%),
    var(--bg);
  background-attachment: fixed;
  transition: background-color 280ms ease;
}

#app {
  max-width: 760px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top, 16px)) 16px
           max(16px, env(safe-area-inset-bottom, 16px));
  min-height: 100%;
}

/* ─── Screen switching ──────────────────────────────────────── */
.screen {
  display: grid;
  gap: 14px;
}
.screen[hidden] {
  display: none !important;
}

/* ─── Topbar (game/analysis/puzzles) ───────────────────────── */
.topbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}
.brand-emoji {
  font-size: 28px;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.1));
}
.level-badge {
  background: var(--ink);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow);
  text-align: center;
  justify-self: center;
  border: none;
  cursor: pointer;
  font-family: var(--font);
}
.level-badge:active { transform: scale(0.97); }
.screen-title {
  font-weight: 700;
  font-size: 17px;
  text-align: center;
  justify-self: center;
  color: var(--ink);
}
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--ink);
  font-size: 20px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:active { transform: scale(0.95); }

/* ─── Home screen ──────────────────────────────────────────── */
.home {
  grid-template-rows: auto auto auto auto;
}
.home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home-hero {
  background: linear-gradient(135deg, #ffffff 0%, var(--bg-soft) 100%);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 2px rgba(31, 58, 104, 0.06),
              0 6px 18px rgba(31, 58, 104, 0.10);
}
.hero-mascot {
  font-size: 56px;
  line-height: 1;
  animation: bob 3s ease-in-out infinite;
}
.hero-text h1 {
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.meta-chip {
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ─── Daily challenge banner ──────────────────────────────── */
.daily-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: none;
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  background: linear-gradient(135deg, #fff7df 0%, #ffd166 100%);
  box-shadow: 0 1px 2px rgba(31, 58, 104, 0.06),
              0 6px 16px rgba(31, 58, 104, 0.10);
  cursor: pointer;
  text-align: left;
  transition: transform 90ms cubic-bezier(0.25, 1.4, 0.5, 1);
}
.daily-banner:active { transform: translateY(1px) scale(0.99); }
.daily-banner.solved {
  background: linear-gradient(135deg, #f0f5e1 0%, #a5d6a7 100%);
}
.daily-banner .db-emoji { font-size: 36px; line-height: 1; }
.daily-banner .db-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.daily-banner .db-title { font-size: 17px; font-weight: 800; color: var(--ink); }
.daily-banner .db-sub   { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.daily-banner .db-arrow { font-size: 22px; color: var(--ink); opacity: 0.5; }

.home-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tactics-card { background: linear-gradient(135deg, #fff 0%, #ffe9b5 100%); }
.quest-card { background: linear-gradient(135deg, #fff 0%, #c5e1a5 100%); }
.endgame-card { background: linear-gradient(135deg, #fff 0%, #b3e5fc 100%); }
.famous-card { background: linear-gradient(135deg, #fff 0%, #ffccbc 100%); }
.big-card {
  background: #fff;
  border: none;
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  /* Two-layer shadow for crisper depth: soft ambient + tight contact. */
  box-shadow: 0 1px 2px rgba(31, 58, 104, 0.06),
              0 6px 16px rgba(31, 58, 104, 0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 130px;
  justify-content: center;
  transition: transform 90ms cubic-bezier(0.25, 1.4, 0.5, 1),
              box-shadow 140ms ease-out;
}
.big-card:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 1px 2px rgba(31, 58, 104, 0.10);
}
.big-card[disabled] { opacity: 0.55; cursor: not-allowed; }
.play-card { background: linear-gradient(135deg, #fff 0%, #fff5d8 100%); }
.puzzles-card { background: linear-gradient(135deg, #fff 0%, #e8f5e9 100%); }
.replay-card { background: linear-gradient(135deg, #fff 0%, #f3e5f5 100%); }
.big-card.play-card {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 16px;
  justify-content: flex-start;
  text-align: left;
  padding: 20px 22px;
}
.big-card.play-card .card-emoji { font-size: 52px; }
.big-card.play-card .card-title { flex: 0 0 auto; }
.card-emoji { font-size: 40px; line-height: 1; }
.card-title { font-size: 22px; font-weight: 700; color: var(--ink); }
.card-sub { font-size: 13px; color: var(--ink-soft); font-weight: 500; }

.home-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

/* ─── Achievements row on home ─────────────────────────────── */
.achievements-row {
  background: #fff;
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.achievements-row .ar-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.achievements-row .ar-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.badge-pill {
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ─── Achievement toast (corner pop-up) ────────────────────── */
.achievement-toast {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 60;
  box-shadow: var(--shadow-lg);
  animation: toast-in 320ms cubic-bezier(0.25, 1.4, 0.5, 1);
  max-width: 90vw;
}
.achievement-toast[hidden] { display: none; }
.achievement-toast .at-emoji { font-size: 26px; line-height: 1; }
.achievement-toast .at-title { font-size: 11px; opacity: 0.7; font-weight: 600; }
.achievement-toast .at-name  { font-size: 14px; font-weight: 700; }
@keyframes toast-in {
  from { transform: translate(-50%, 40px); opacity: 0; }
  to   { transform: translate(-50%, 0);     opacity: 1; }
}

/* ─── Tactics screen ───────────────────────────────────────── */
.tactics-intro {
  background: #fff;
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow);
  font-size: 14px;
  color: var(--ink);
  text-align: center;
}
.tactics-themes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 12px;
}
.tactic-group {
  background: #fff;
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.tactic-group .tg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.tactic-group .tg-emoji { font-size: 28px; line-height: 1; }
.tactic-group .tg-title { font-weight: 700; font-size: 16px; color: var(--ink); }
.tactic-group .tg-progress { font-size: 12px; color: var(--ink-soft); }
.tactic-group .tg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tactic-tile {
  background: var(--bg-soft);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
}
.tactic-tile:active { transform: scale(0.97); }
.tactic-tile.solved {
  background: linear-gradient(135deg, var(--bg-soft) 0%, #d8efd8 100%);
}
.tactic-tile.solved .tt-status { color: var(--good); font-weight: 800; }
.tactic-tile .tt-status { font-size: 16px; color: var(--ink-mute); }

/* ─── Parent dashboard ─────────────────────────────────────── */
.pd-section { text-align: left; margin-bottom: 14px; }
.pd-section .pd-h4 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
}
.pd-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pd-summary > div {
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 10px;
  text-align: center;
}
.pd-summary b {
  display: block;
  font-size: 22px;
  color: var(--ink);
  font-weight: 800;
  line-height: 1;
}
.pd-summary span {
  display: block;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.pd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pd-table th, .pd-table td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.pd-table th {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pd-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--ink);
}
.pd-list li {
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pd-list li:last-child { border-bottom: none; }
.pd-list .pd-count {
  background: var(--bg-soft);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}
.stat-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 14px 8px;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat-num {
  font-size: 26px;
  font-weight: 800;
  /* --ink stays readable on the white stat card across every theme;
     --accent-warm fails contrast on light-bg themes (Candy especially). */
  color: var(--ink);
  letter-spacing: -0.02em;
}
.stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* ─── Mascot ───────────────────────────────────────────────── */
.mascot {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow);
  min-height: 56px;
}
.mascot-avatar {
  font-size: 38px;
  line-height: 1;
  flex-shrink: 0;
  animation: bob 3s ease-in-out infinite;
}
.mascot-avatar.thinking { animation: bob 0.8s ease-in-out infinite; }
.mascot-avatar.happy    { animation: bounce-up 0.6s ease-in-out 2; }
.mascot-avatar.sneaky   { animation: tilt 0.5s ease-in-out; }
.mascot-avatar.champion { animation: party 0.9s ease-in-out 3; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-3px) rotate(2deg); }
}
@keyframes bounce-up {
  0%, 100% { transform: translateY(0)  scale(1); }
  50%      { transform: translateY(-10px) scale(1.15); }
}
@keyframes tilt {
  0%, 100% { transform: rotate(0); }
  35%      { transform: rotate(-12deg); }
  65%      { transform: rotate(12deg); }
}
@keyframes party {
  0%, 100% { transform: scale(1) rotate(0); }
  25%      { transform: scale(1.2) rotate(-12deg); }
  50%      { transform: scale(1.2) rotate(12deg); }
  75%      { transform: scale(1.2) rotate(-8deg); }
}
.mascot-bubble {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

/* ─── Game screen ──────────────────────────────────────────── */
.game {
  grid-template-rows: auto auto 1fr auto auto;
}

/* ─── Board ────────────────────────────────────────────────── */
.board-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.board {
  --board-size: min(92vw, 60vh, 620px);
  width: var(--board-size);
  height: var(--board-size);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--dark-sq);
  position: relative;
}
.square {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.square.light { background: var(--light-sq); }
.square.dark  { background: var(--dark-sq); }
.square .piece {
  width: 92%;
  height: 92%;
  pointer-events: none;
  /* Soft + sharp shadow gives the pieces real lift on the colored squares. */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22))
          drop-shadow(0 0.5px 0.5px rgba(0, 0, 0, 0.15));
  transition: transform 120ms ease-out;
}
.square.selected {
  background: var(--select) !important;
  box-shadow: inset 0 0 0 3px var(--accent-warm);
}
.square.last-move { background: var(--last-move) !important; }
.square .legal-dot {
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: var(--legal);
  opacity: 0.55;
  pointer-events: none;
  animation: pulse 1.4s ease-in-out infinite;
}
/* Drag-and-drop: prevent drag events from bubbling through dot overlays so
 * .drag-over highlight doesn't flicker as the cursor crosses the dot. */
.square .legal-dot, .square .piece { pointer-events: none; }
.square .piece { user-drag: element; -webkit-user-drag: element; }
.square.has-piece .legal-dot {
  width: 88%;
  height: 88%;
  background: transparent;
  border: 4px solid var(--capture);
  opacity: 0.85;
  box-sizing: border-box;
}
/* ─── Coaching mode dot colors ─────────────────────────────── */
.square .legal-dot.dot-safe  { background: #2bb673; opacity: 0.75; }
.square .legal-dot.dot-trade { background: #f4b942; opacity: 0.8; }
.square .legal-dot.dot-hangs { background: #e64a19; opacity: 0.85; }
.square.has-piece .legal-dot.dot-safe  { background: transparent; border-color: #2bb673; }
.square.has-piece .legal-dot.dot-trade { background: transparent; border-color: #f4b942; }
.square.has-piece .legal-dot.dot-hangs { background: transparent; border-color: #e64a19; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
.square.check {
  background: radial-gradient(circle, #ff8a8a 0%, var(--light-sq) 70%) !important;
}
.square.dark.check {
  background: radial-gradient(circle, #d05c5c 0%, var(--dark-sq) 70%) !important;
}
.square .coord {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.55;
  pointer-events: none;
  font-family: var(--font);
}
.square .coord.file { bottom: 2px; right: 4px; }
.square .coord.rank { top: 2px;    left: 4px;  }
.square.light .coord { color: #8a6a3a; }
.square.dark  .coord { color: #f5ead0; }

/* hint arrow overlay */
.hint-arrow {
  position: absolute;
  width: min(92vw, 60vh, 620px);
  height: min(92vw, 60vh, 620px);
  pointer-events: none;
  animation: pop-in 200ms ease-out;
}
/* The [hidden] global attribute isn't applied to SVG elements in all
   browsers — force display:none ourselves. */
.hint-arrow[hidden] {
  display: none !important;
}

/* ─── Status ──────────────────────────────────────────────── */
.status {
  display: flex;
  justify-content: center;
}
.turn-indicator {
  background: var(--bg-soft);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  box-shadow: var(--shadow);
}
.turn-indicator.thinking::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: dots 1.2s steps(4, end) infinite;
}
.turn-indicator.good { background: #d8efd8; color: var(--good); }
.turn-indicator.bad  { background: #ffd8d8; color: var(--bad); }
@keyframes dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}

/* ─── Controls ─────────────────────────────────────────────── */
.controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  padding: 13px 18px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  min-width: 110px;
  justify-content: center;
  transition: transform 80ms ease-out;
  position: relative;
}
.btn:active { transform: translateY(2px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-secondary { background: #fff; color: var(--ink); }
.btn[disabled] { opacity: 0.45; cursor: default; transform: none; }
.btn .badge {
  background: var(--accent);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}

/* ─── Modals ───────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(31, 58, 104, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal.hidden { display: none; }
.modal-card {
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 8px 20px rgba(31, 58, 104, 0.18),
              0 24px 48px rgba(31, 58, 104, 0.22);
  animation: pop-in 280ms cubic-bezier(0.25, 1.4, 0.5, 1);
  max-height: 86vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Keyboard focus visibility for ALL interactive controls in the app.
   Touch users see the same visual via :active; this only kicks in for tab-focus. */
button:focus-visible,
[role="tab"]:focus-visible,
input:focus-visible,
.opening-tile:focus-visible,
.color-tile:focus-visible,
.theme-tile:focus-visible,
.level-tile:focus-visible {
  outline: 3px solid var(--accent-warm);
  outline-offset: 2px;
}
.modal-card.wide { max-width: 480px; }
@keyframes pop-in {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.modal-emoji {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 8px;
}
.modal-card h2 {
  margin: 0 0 8px;
  font-size: 24px;
  color: var(--ink);
}
.modal-card p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}
.result-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.result-buttons .btn { width: 100%; }

/* ─── Level select ─────────────────────────────────────────── */
.level-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.level-tile {
  background: var(--bg-soft);
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 14px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font);
  transition: all 120ms ease-out;
}
.level-tile:active { transform: scale(0.97); }
.level-tile.selected {
  background: var(--accent);
  border-color: var(--accent-warm);
  box-shadow: var(--shadow);
}
.level-tile .level-emoji { font-size: 32px; }
.level-tile .level-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  text-align: center;
}
.level-tile .level-blurb {
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.2;
}
.level-tile .level-num {
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 700;
}

/* ─── Settings ─────────────────────────────────────────────── */
.setting-section {
  text-align: left;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.setting-section:last-of-type { border-bottom: none; }
.setting-h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-weight: 500;
}
.setting-row:last-child { border-bottom: none; }
.setting-row input[type="checkbox"] {
  appearance: none;
  width: 50px;
  height: 28px;
  background: #ddd;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 200ms;
}
.setting-row input[type="checkbox"]:checked { background: var(--good); }
.setting-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  transition: transform 200ms;
}
.setting-row input[type="checkbox"]:checked::after {
  transform: translateX(22px);
}

/* ─── Theme picker (swatches) ──────────────────────────────── */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.theme-tile {
  background: #fff;
  border: 3px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  transition: transform 120ms ease;
}
.theme-tile:active { transform: scale(0.95); }
.theme-tile.selected {
  border-color: var(--accent-warm);
  background: var(--bg-soft);
}
.theme-swatch {
  display: flex;
  height: 22px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.theme-swatch span {
  flex: 1;
  display: block;
}

/* ─── Color picker ──────────────────────────────────────────── */
.color-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.color-tile {
  background: #fff;
  border: 3px solid transparent;
  border-radius: var(--radius);
  padding: 14px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  transition: transform 120ms ease;
  box-shadow: var(--shadow);
}
.color-tile:active { transform: scale(0.96); }
.color-tile.selected {
  border-color: var(--accent-warm);
  background: var(--bg-soft);
}
.color-tile .color-emoji { font-size: 30px; line-height: 1; }
.color-tile .color-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}

/* ─── Opening picker ────────────────────────────────────────── */
.opening-picker {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;  /* don't chain scroll to the modal/body */
  padding-right: 4px;
}
.opening-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.opening-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "emoji name" "emoji desc";
  column-gap: 8px;
  padding: 4px 2px;
  align-items: center;
}
.opening-heading .oh-emoji {
  grid-area: emoji;
  font-size: 24px;
  line-height: 1;
}
.opening-heading .oh-name {
  grid-area: name;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.opening-heading .oh-desc {
  grid-area: desc;
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.3;
}
.opening-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.opening-tile {
  background: var(--bg-soft);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;        /* vertical alignment for the ::before checkmark */
  text-align: left;
  font-family: var(--font);
  transition: transform 120ms ease;
  position: relative;         /* anchor the absolutely-positioned ::before */
}
.opening-tile:active { transform: scale(0.98); }
.opening-tile.selected {
  border-color: var(--accent-warm);
  background: var(--accent);
  box-shadow: var(--shadow);
}
/* Selected tile: force darker text for adequate contrast against --accent
   (which varies by theme, but --ink is always the darkest hue in the palette). */
.opening-tile.selected .ot-desc { color: var(--ink); }
/* Absolutely positioned so the checkmark doesn't reflow the text or shift
   the unselected vs selected tile widths. */
.opening-tile.selected::before {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 8px;
  font-weight: 800;
  color: var(--ink);
  font-size: 13px;
  pointer-events: none;
}
.opening-tile { min-height: 48px; }   /* iOS HIG tap-target floor */
.opening-tile.free { grid-column: 1 / -1; }   /* Free play spans the full row */
.opening-tile .ot-text { flex: 1; min-width: 0; }
.opening-tile .ot-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.25;
}
.opening-tile .ot-desc {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.3;
  margin-top: 2px;
}

/* ─── Tabs ─────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: var(--bg-soft);
  border: none;
  color: var(--ink-soft);
  padding: 12px 14px;
  min-height: 44px;            /* Apple HIG tap target */
  border-radius: 999px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms;
}
.tab.active {
  background: var(--ink);
  color: #fff;
}
.tab-panels { position: relative; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade-in 200ms ease-out; }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Analysis content ─────────────────────────────────────── */
.story-content {
  background: #fff;
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.story-content p { margin: 0 0 10px; line-height: 1.45; }
.story-content p:last-child { margin-bottom: 0; }
.story-content .panel {
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.story-content .panel .panel-emoji { font-size: 28px; line-height: 1; }
.story-content .panel .panel-text { flex: 1; font-size: 15px; line-height: 1.4; }

.moment-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
}
.moment-card .moment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.moment-card .moment-title { font-weight: 700; font-size: 16px; }
.moment-card .moment-tag {
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.moment-card .moment-tag.blunder { background: #ffd8d8; color: var(--bad); }
.moment-card .moment-tag.mistake { background: #ffe6c8; color: var(--accent-warm); }
.moment-card .moment-tag.best    { background: #d8efd8; color: var(--good); }
.moment-card .moment-board {
  width: min(60vw, 320px);
  height: min(60vw, 320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.moment-card .moment-board .square { cursor: default; }
.moment-card .moment-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 14px;
}
.moment-card .moment-comparison .your,
.moment-card .moment-comparison .best {
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 10px;
}
.moment-card .moment-comparison .your { background: #ffe6c8; }
.moment-card .moment-comparison .best { background: #d8efd8; }
.moment-card .moment-comparison .label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  opacity: 0.7;
}
.moment-card .moment-comparison .move-san {
  font-size: 18px;
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
}
.moments-list { display: grid; gap: 14px; }
.muted { color: var(--ink-mute); font-style: italic; text-align: center; padding: 20px 0; }

.progress-bar {
  width: 100%;
  height: 10px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 14px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
  width: 0%;
  transition: width 200ms ease-out;
}

/* ─── Puzzles ──────────────────────────────────────────────── */
.puzzle-intro p {
  margin: 0;
  background: #fff;
  padding: 12px 14px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 15px;
  text-align: center;
}
.puzzles-list { display: grid; gap: 10px; }
.puzzle-tile {
  background: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 36px 1fr 28px;
  gap: 12px;
  align-items: center;
  font-family: var(--font);
}
.puzzle-tile:active { transform: translateY(1px); }
.puzzle-tile .pt-emoji { font-size: 28px; }
.puzzle-tile .pt-title { font-weight: 700; font-size: 15px; }
.puzzle-tile .pt-sub { font-size: 12px; color: var(--ink-soft); }
.puzzle-tile .pt-status { font-size: 18px; text-align: center; }

.screen-footer { padding-top: 8px; }

/* ─── Landscape iPad tweaks ────────────────────────────────── */
@media (orientation: landscape) and (max-height: 820px) {
  .screen.game {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "topbar  topbar"
      "board   side"
      "board   controls";
    gap: 16px;
  }
  .screen.game .topbar     { grid-area: topbar; }
  .screen.game .board-wrap { grid-area: board; }
  .screen.game .mascot     { grid-area: side; align-self: start; }
  .screen.game .status     { grid-area: side; align-self: end; padding-bottom: 12px; }
  .screen.game .controls   { grid-area: controls; }
  .board {
    --board-size: min(70vh, 85vw, 620px);
  }
  .hint-arrow {
    width: min(70vh, 85vw, 620px);
    height: min(70vh, 85vw, 620px);
  }
}

/* ─── Quest map ─────────────────────────────────────────── */
.quest-intro,
.endgame-intro,
.famous-intro {
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
  margin: 0 0 14px;
  padding: 0 8px;
}
.quest-path {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 8px;
}
.quest-node {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow);
  transition: transform 90ms cubic-bezier(0.25, 1.4, 0.5, 1);
  position: relative;
}
.quest-node:nth-child(odd)  { margin-right: 24px; }
.quest-node:nth-child(even) { margin-left:  24px; }
.quest-node:active { transform: scale(0.98); }
.quest-node.beaten {
  background: linear-gradient(135deg, #fff 0%, #d8efd8 100%);
  border-color: var(--good);
}
.quest-node.locked {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-soft);
}
.quest-node .qn-emoji  { font-size: 36px; line-height: 1; }
.quest-node .qn-text   { display: flex; flex-direction: column; flex: 1; }
.quest-node .qn-title  { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.quest-node .qn-name   { font-size: 17px; font-weight: 800; color: var(--ink); }
.quest-node .qn-status { font-size: 22px; color: var(--ink-mute); font-weight: 800; }
.quest-node.beaten .qn-status { color: var(--good); }

/* ─── Endgame trainer ───────────────────────────────────── */
.endgame-list,
.famous-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 8px;
}
.endgame-tile,
.famous-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow);
  font-family: var(--font);
  transition: transform 90ms cubic-bezier(0.25, 1.4, 0.5, 1);
}
.endgame-tile:active,
.famous-tile:active { transform: scale(0.98); }
.endgame-tile.solved {
  background: linear-gradient(135deg, #fff 0%, #d8efd8 100%);
  border-color: var(--good);
}
.endgame-tile .eg-emoji,
.famous-tile .fm-emoji { font-size: 32px; line-height: 1; }
.endgame-tile .eg-text,
.famous-tile .fm-text  { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.endgame-tile .eg-name,
.famous-tile .fm-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.endgame-tile .eg-blurb,
.famous-tile .fm-sub   { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.endgame-tile .eg-status,
.famous-tile .fm-status{ font-size: 22px; color: var(--ink-mute); font-weight: 800; }
.endgame-tile.solved .eg-status { color: var(--good); }

/* ─── Famous game replay ────────────────────────────────── */
.famous-meta {
  background: #fff;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 8px 12px;
  box-shadow: var(--shadow);
}
.famous-meta .fmeta-line  { font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.famous-meta .fmeta-blurb { font-size: 13px; color: var(--ink-soft); }
.famous-commentary {
  background: #fff;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 12px 8px 0;
  box-shadow: var(--shadow);
  min-height: 64px;
}
.fcom-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.fcom-num  { font-weight: 800; color: var(--ink-soft); font-size: 14px; }
.fcom-san  { font-weight: 800; color: var(--accent-warm); font-size: 18px; }
.fcom-who  { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.fcom-note { font-size: 14px; color: var(--ink); margin: 0; line-height: 1.4; }
.famous-controls {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 8px;
  padding: 12px 8px 16px;
}

/* ─── Opening trainer ───────────────────────────────────── */
.trainer-intro,
.setup-intro,
.stickers-intro {
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
  margin: 0 0 14px;
  padding: 0 8px;
}
.trainer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 8px;
}
.trainer-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow);
  font-family: var(--font);
  transition: transform 90ms cubic-bezier(0.25, 1.4, 0.5, 1);
}
.trainer-tile:active { transform: scale(0.98); }
.trainer-tile.learned {
  background: linear-gradient(135deg, #fff 0%, #d8efd8 100%);
  border-color: var(--good);
}
.trainer-tile .tr-emoji { font-size: 30px; line-height: 1; }
.trainer-tile .tr-text  { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.trainer-tile .tr-name  { font-weight: 800; color: var(--ink); font-size: 15px; }
.trainer-tile .tr-sub   { font-size: 12px; color: var(--ink-soft); }
.trainer-tile .tr-status{ font-size: 22px; color: var(--ink-mute); font-weight: 800; }
.trainer-tile.learned .tr-status { color: var(--good); }

/* ─── Sticker book ──────────────────────────────────────── */
.stickers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  padding: 0 8px;
}
.sticker {
  background: #fff;
  border-radius: var(--radius);
  padding: 14px 10px;
  text-align: center;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 2px solid var(--accent);
  transition: transform 90ms;
}
.sticker:active { transform: scale(0.97); }
.sticker.locked {
  opacity: 0.55;
  filter: grayscale(80%);
  border-color: var(--ink-mute);
}
.sticker .st-emoji { font-size: 36px; line-height: 1; }
.sticker .st-name  { font-weight: 800; font-size: 13px; color: var(--ink); }
.sticker .st-desc  { font-size: 11px; color: var(--ink-soft); }

/* ─── Custom position setup ─────────────────────────────── */
.fen-input,
.share-code {
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  padding: 12px;
  border: 2px solid var(--ink-mute);
  border-radius: var(--radius-sm);
  background: #fff;
  resize: vertical;
  box-sizing: border-box;
}
.fen-error {
  color: var(--bad);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  background: rgba(229, 57, 53, 0.08);
  border-radius: var(--radius-sm);
  margin-top: 8px;
}
.setup-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 8px;
}

/* ─── Share modal ──────────────────────────────────────── */
.share-code { margin-top: 8px; min-height: 80px; }

/* ─── Quest cutscene ───────────────────────────────────── */
.cutscene-panels {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}
.cutscene-line {
  background: var(--bg-soft);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--ink);
  margin: 0;
  line-height: 1.4;
}
.explore-board {
  width: 240px;
  margin: 8px auto;
}

/* ─── Mascot customizer ─────────────────────────────────── */
.mascot-customizer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mascot-name-input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--ink-mute);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: var(--font);
  font-weight: 600;
  color: var(--ink);
  box-sizing: border-box;
}
.mascot-colors {
  display: flex;
  gap: 8px;
}
.mascot-color-tile {
  flex: 1;
  height: 48px;
  border-radius: var(--radius-sm);
  border: 3px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
}
.mascot-color-tile.selected {
  border-color: var(--accent-warm);
  transform: scale(1.05);
}
.mascot-color-tile .mc-emoji { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }

/* ─── Chess clock ──────────────────────────────────────── */
.clock-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 8px;
  margin-bottom: 6px;
}
.clock-box {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  transition: border-color 150ms;
}
.clock-box.active {
  border-color: var(--accent-warm);
  background: linear-gradient(135deg, #fff 0%, var(--bg-soft) 100%);
}
.clock-label { display: block; font-size: 11px; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.clock-time  { display: block; font-size: 22px; font-weight: 800; color: var(--ink); font-family: ui-monospace, monospace; }

/* ─── Performance graph ────────────────────────────────── */
.perf-svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 6px;
  box-sizing: border-box;
}

/* ─── Drag-over highlight ──────────────────────────────── */
.square.drag-over {
  outline: 3px solid var(--accent-warm);
  outline-offset: -3px;
}

/* ─── Home cards for new screens ───────────────────────── */
.opening-trainer-card { background: linear-gradient(135deg, #fff 0%, #fff8e1 100%); }
.sticker-card        { background: linear-gradient(135deg, #fff 0%, #f3e5f5 100%); }
.position-card       { background: linear-gradient(135deg, #fff 0%, #e0f2f1 100%); }

/* ─── Mascot avatar color ──────────────────────────────── */
/* Emoji glyphs ignore CSS `color`, so we paint a translucent halo behind
 * the avatar to surface the user's chosen mascot color. */
.mascot-avatar {
  color: var(--mascot-color, #2e7d32);
  background: radial-gradient(circle, var(--mascot-color, #2e7d32) 0%, transparent 65%);
  background-size: 120% 120%;
  background-position: center;
  background-repeat: no-repeat;
}

/* ─── Setting row select styling ───────────────────────── */
.setting-row select {
  padding: 6px 10px;
  border: 2px solid var(--ink-mute);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
}