/* ── Variables ─────────────────────────────────────────────── */
:root {
  --coral:   #FF6B6B;
  --mint:    #4ECDC4;
  --yellow:  #FFE66D;
  --sky:     #74B9FF;
  --purple:  #A29BFE;
  --green:   #55EFC4;
  --dark:    #dde6f0;        /* primary text — near-white */
  --mid:     #7a95b0;        /* secondary text */
  --light:   #1c2e42;        /* inner element backgrounds */
  --card:    #162535;        /* card background */
  --white:   #FFFFFF;        /* text on coloured buttons/headers */
  --border:  #253a54;        /* borders throughout */
  --on-acc:  #0d1f2d;        /* dark text for use on bright accent backgrounds */
  --shadow:  0 4px 24px rgba(0,0,0,0.45);
  --radius:  18px;
}

/* ── Reset / Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(135deg, #0a1520 0%, #152030 50%, #0e1c2c 100%);
  min-height: 100vh;
  color: var(--dark);
  font-size: 18px;
}

.app-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

/* ── Page card ─────────────────────────────────────────────── */
.page-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
}

.subtitle a {
  color: var(--sky);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-block;
  border: none;
  border-radius: 50px;
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 14px 32px;
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--coral);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(255,107,107,0.4);
}
.btn-primary:hover { box-shadow: 0 6px 18px rgba(255,107,107,0.5); transform: translateY(-1px); }

.btn-start {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, var(--coral), #fd79a8);
  color: var(--white);
  font-size: 1.3rem;
  padding: 18px;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(255,107,107,0.4);
  border: none;
  cursor: pointer;
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  font-weight: 900;
  margin-top: 28px;
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn-start:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,107,107,0.5); }
.btn-start:active { transform: scale(0.98); }

/* ── Setup page ────────────────────────────────────────────── */
.page-title {
  font-size: 2.2rem;
  font-weight: 900;
  text-align: center;
  color: var(--coral);
  margin-bottom: 6px;
}
.subtitle {
  text-align: center;
  color: var(--mid);
  font-size: 1.05rem;
  margin-bottom: 28px;
  line-height: 1.5;
}
.section-label {
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mid);
  margin-bottom: 12px;
  margin-top: 24px;
}

.ops-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.op-section {
  border-radius: 14px;
  border: 3px solid var(--border);
  padding: 12px;
  transition: border-color 0.2s, background 0.2s;
}
.op-section.active {
  border-color: var(--mint);
  background: #0d2a2e;
}

.op-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.op-checkbox { display: none; }

.op-btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  background: var(--light);
  color: var(--dark);
  transition: background 0.2s, color 0.2s;
  user-select: none;
}
.op-section.active .op-btn {
  background: var(--mint);
  color: var(--on-acc);
}

/* Difficulty toggle buttons (Easy / Carries / Borrowing) */
.sub-opts.visible { display: flex; }
.sub-opts {
  display: none;
  flex-direction: row;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px dashed #1d4040;
}
.diff-btn {
  flex: 1;
  text-align: center;
  padding: 7px 6px;
  border-radius: 8px;
  border: 2px solid var(--border);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
  color: var(--dark);
}
.diff-btn input[type="checkbox"] { display: none; }
.diff-btn.active {
  border-color: var(--mint);
  background: var(--mint);
  color: var(--on-acc);
}

/* ── Mode selector ─────────────────────────────────────────── */
.mode-buttons {
  display: flex;
  gap: 12px;
}
.mode-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  border: 3px solid var(--border);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  user-select: none;
  color: var(--dark);
}
.mode-btn input[type="radio"] { display: none; }
.mode-btn.active {
  border-color: var(--sky);
  background: #0f2440;
  color: var(--sky);
}

/* ── Error message ─────────────────────────────────────────── */
.error-msg {
  color: var(--coral);
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: 12px;
  text-align: center;
}
.hidden { display: none !important; }

/* ── Quiz page ─────────────────────────────────────────────── */
.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.timer-badge {
  background: var(--yellow);
  color: var(--on-acc);
  font-weight: 900;
  font-size: 1.3rem;
  padding: 8px 18px;
  border-radius: 50px;
  min-width: 80px;
  text-align: center;
}

.quiz-title,
.progress-label {
  font-weight: 700;
  font-size: 1rem;
  color: var(--mid);
}

/* List mode */
.question-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }

.question-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: 101px;
  background: var(--light);
  border-radius: 12px;
  font-size: 1.15rem;
}
.q-number {
  font-weight: 900;
  color: var(--mid);
  min-width: 28px;
}
.q-display {
  font-weight: 700;
  flex: 1;
  font-size: 1.2rem;
}
.answer-field {
  width: 80px;
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  background: var(--card);
  color: var(--dark);
  border: 3px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  outline: none;
  transition: border-color 0.2s;
}
.answer-field:focus { border-color: var(--mint); }

.btn-submit {
  display: block;
  width: 100%;
  text-align: center;
}

/* Single mode */
.quiz-single .question-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0 16px;
  gap: 20px;
}

.question-display {
  font-size: 3rem;
  font-weight: 900;
  color: var(--dark);
  text-align: center;
  letter-spacing: -0.5px;
}

.answer-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.answer-input-large {
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  text-align: center;
  width: 160px;
  padding: 12px 16px;
  background: var(--light);
  color: var(--dark);
  border: 4px solid var(--border);
  border-radius: 16px;
  outline: none;
  transition: border-color 0.2s;
}
.answer-input-large:focus { border-color: var(--mint); }

.btn-next {
  font-size: 1.2rem;
  padding: 14px 40px;
}

.hint {
  font-size: 0.95rem;
  color: var(--coral);
  font-weight: 700;
  min-height: 1.4em;
  text-align: center;
}

.qchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 12px;
}
.qchip {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--dark);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.2s ease, border-color 0.2s ease;
}
.qchip:hover { transform: scale(1.08); }
.qchip-answered {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--dark);
}
.qchip-current {
  border-color: var(--sky);
  background: var(--sky);
  color: white;
  transform: scale(1.1);
}

/* ── Results page ──────────────────────────────────────────── */
.results-card { text-align: center; }

.perfect-header,
.great-header {
  margin-bottom: 20px;
}
.perfect-header h1, .great-header h1 {
  font-size: 2rem;
  font-weight: 900;
  color: var(--dark);
  margin-bottom: 8px;
}
.big-star {
  font-size: 4rem;
  margin-bottom: 8px;
}
.cheer {
  color: var(--mid);
  font-size: 1.05rem;
}

.time-badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--on-acc);
  border-radius: 50px;
  padding: 10px 24px;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 16px 0 28px;
}

.review-section {
  text-align: left;
  margin-bottom: 28px;
}
.review-section h2 {
  font-size: 1.3rem;
  font-weight: 900;
  margin-bottom: 6px;
}
.review-intro {
  color: var(--mid);
  font-size: 0.95rem;
  margin-bottom: 18px;
}

.wrong-card {
  background: #1c1510;
  border: 2px solid #3d2a14;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.wrong-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.wrong-question {
  font-size: 1.4rem;
  font-weight: 900;
}
.your-answer {
  font-size: 0.9rem;
  color: var(--mid);
  font-weight: 600;
}
.wrong-card-fixed {
  background: #12251a;
  border-color: #2f5c3a;
}

/* ── Write-it-in correction ────────────────────────────────── */
.fix-it {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px dashed var(--border);
}
.fix-it-label {
  font-size: 1.05rem;
  font-weight: 800;
}
.fix-it-input {
  width: 110px;
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  text-align: center;
  background: var(--light);
  color: var(--dark);
  border: 3px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  outline: none;
  transition: border-color 0.2s;
}
.fix-it-input-word {
  width: 240px;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}
.fix-it-input:focus { border-color: var(--mint); }
.fix-it-input:read-only { border-color: var(--green); color: var(--green); }
.fix-it-hint {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mid);
}
.fix-it-hint-good { color: var(--green); }
.fix-it-hint-miss { color: var(--coral); }

/* ── Results gate ──────────────────────────────────────────── */
.results-gate {
  margin-top: 24px;
  padding: 12px 16px;
  text-align: center;
  font-weight: 800;
  color: var(--yellow);
  background: rgba(255, 230, 109, 0.08);
  border: 2px solid rgba(255, 230, 109, 0.3);
  border-radius: 12px;
}
.results-gate.gate-open {
  color: var(--green);
  background: rgba(85, 239, 196, 0.08);
  border-color: rgba(85, 239, 196, 0.3);
}
.results-gate.gate-flash { animation: gate-shake 0.4s; }
@keyframes gate-shake {
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
.results-actions.actions-locked .btn {
  opacity: 0.35;
  cursor: not-allowed;
}
.results-actions.actions-locked .btn:hover,
.results-actions.actions-locked .btn:active {
  transform: none;
}

.btn-again {
  font-size: 1.2rem;
  padding: 16px 40px;
}

/* ── Worked solution ───────────────────────────────────────── */
.worked-solution {
  font-size: 1rem;
  color: var(--dark);
}
.worked-title {
  font-weight: 700;
  margin-bottom: 10px;
}
.worked-answer {
  margin-top: 10px;
  font-size: 1.05rem;
}
.worked-answer strong { color: var(--mint); font-size: 1.2rem; }

.worked-explanation {
  margin-top: 14px;
  padding: 12px 14px;
  background: #0d2a2e;
  border-left: 4px solid var(--mint);
  border-radius: 8px;
}
.worked-explanation-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--mint);
  margin: 0 0 6px;
  letter-spacing: 0.3px;
}
.worked-explanation-body {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--dark);
  margin: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.worked-steps {
  margin: 8px 0 8px 20px;
  line-height: 1.8;
  font-size: 0.95rem;
}

.kinder-dots {
  font-size: 1.3rem;
  letter-spacing: 2px;
  color: var(--mint);
  margin: 4px 0;
}
.kinder-plus { font-size: 1.1rem; font-weight: 700; margin: 2px 0; color: var(--mid); }
.kinder-line { border-top: 2px solid var(--border); margin: 6px 0; }
.kinder-answer { color: var(--coral) !important; }

.groups-display, .div-check {
  font-size: 1rem;
  font-weight: 600;
  background: #0d2a2e;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 6px 0;
  overflow-x: auto;
  white-space: nowrap;
}

/* ── Column-method table ───────────────────────────────────── */
.column-method {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.6rem;
  font-weight: 700;
  border-collapse: collapse;
  margin: 12px auto;
}
.column-method td {
  text-align: center;
  min-width: 2rem;
  padding: 2px 6px;
  line-height: 1.4;
}
.column-method .op-cell {
  text-align: right;
  padding-right: 8px;
  min-width: 2.2rem;
  font-weight: 700;
}
.column-method .carry {
  color: var(--coral);
  font-size: 0.75em;
  vertical-align: bottom;
  font-weight: 900;
}
.column-method .line-row td {
  border-top: 3px solid var(--dark);
  padding: 0;
  height: 4px;
}
.column-method .answer-row td.answer {
  color: var(--mint);
  font-weight: 900;
}

/* Borrow indicators */
.borrow-row td { font-size: 0.75em; vertical-align: bottom; padding-bottom: 0; }
.borrow-orig {
  text-decoration: line-through;
  color: #4a6580;
}
.borrow-new {
  color: var(--coral);
  font-weight: 900;
  margin-left: 1px;
}

/* ── Stacked question (column layout for non-kinder ops) ───── */
.stacked-question {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  border-collapse: collapse;
  font-size: inherit;
  line-height: 1.3;
}

/* In list mode rows, fix to a readable size */
.question-row .stacked-question {
  font-size: 1.5rem;
}

.stacked-question .sq-op {
  text-align: right;
  padding-right: 8px;
  min-width: 1.8rem;
  color: var(--coral);
  font-weight: 900;
}
.stacked-question .sq-num {
  text-align: right;
  min-width: 2.5rem;
  padding: 1px 4px;
}
.stacked-question .sq-line td {
  border-top: 3px solid var(--dark);
  padding: 0;
  height: 5px;
}
.stacked-question .sq-blank {
  text-align: right;
  color: #4a6580;
  font-size: 0.85em;
  padding-top: 2px;
}

/* List rows containing a stacked question: vertically center siblings against the stack */
.row-stacked {
  align-items: center;
}
.row-stacked .answer-field {
  margin-left: auto;
}
.sq-equals {
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0 4px;
  color: var(--mid);
}

/* ── Setup top bar (scores + help links) ───────────────────── */
.setup-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
}
.scores-link,
.shop-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  border: 2px solid var(--border);
  background: var(--light);
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s, color 0.15s;
}
.scores-link {
  color: var(--yellow);
  border-color: #5a4a14;
}
.scores-link:hover {
  border-color: var(--yellow);
  box-shadow: 0 4px 14px rgba(255,230,109,0.25);
  transform: translateY(-1px);
}
.shop-link {
  color: var(--mint);
  border-color: #14403c;
}
.shop-link:hover {
  border-color: var(--mint);
  box-shadow: 0 4px 14px rgba(78,205,196,0.3);
  transform: translateY(-1px);
}
.scores-link:active, .shop-link:active { transform: scale(0.97); }
.help-link {
  position: absolute;
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--light);
  color: var(--mid);
  font-size: 0.8rem;
  font-weight: 900;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.help-link:hover { border-color: var(--mid); color: var(--dark); }

/* ── Help page ─────────────────────────────────────────────── */
.help-card { max-width: 100%; }
.help-authors {
  text-align: center;
  padding: 14px 0 20px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
}
.help-authors p { font-size: 1.05rem; }
.help-version { color: var(--mid); font-size: 0.9rem; margin-top: 4px; }
.help-section {
  margin-bottom: 24px;
}
.help-section h2 {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--coral);
  margin-bottom: 8px;
}
.help-section p, .help-section li {
  color: var(--dark);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 6px;
}
.help-section ol, .help-section ul {
  margin-left: 20px;
}
.help-section code {
  background: var(--light);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.88rem;
  color: var(--mint);
}
.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.help-table td {
  padding: 8px 10px;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.help-table tr:last-child td { border-bottom: none; }
.help-table td:first-child {
  white-space: nowrap;
  padding-right: 16px;
  color: var(--dark);
}
.help-table td:last-child { color: var(--mid); }

/* ── Admin / settings page ─────────────────────────────────── */
.admin-input {
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  font-size: 1.1rem;
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--light);
  color: var(--dark);
  width: 100%;
  max-width: 320px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-input:focus {
  outline: none;
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(78,205,196,0.25);
}
.admin-error {
  color: var(--coral);
  font-weight: 700;
  margin-top: 10px;
}
.admin-saved {
  color: var(--mint);
  font-weight: 700;
  margin: 0 0 16px;
}
.admin-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
  flex-wrap: wrap;
}
.admin-back {
  color: var(--mid);
  text-decoration: none;
  font-weight: 700;
}
.admin-back:hover { color: var(--coral); }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.admin-table col.admin-col-label { width: auto; }
.admin-table col.admin-col-weight { width: 110px; }
.admin-table tr { border-bottom: 1px solid var(--border); }
.admin-table tr:last-child { border-bottom: none; }
.admin-table td {
  padding: 10px 8px;
  color: var(--dark);
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-table td:not(:first-child) { text-align: center; }
.admin-table th {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mid);
  padding: 6px 8px 10px;
  border-bottom: 2px solid var(--border);
  text-align: center;
}
.admin-table th:first-child { text-align: left; }
.admin-table .admin-key {
  color: var(--mid);
  font-family: 'Courier New', monospace;
  font-size: 0.82em;
  margin-left: 6px;
}
/* table-layout: fixed divides a phone-width table until the topic label
   ellipsises to nothing and the cost box is 40px wide. Below 600px let the
   columns size to their content and scroll inside .table-scroll instead —
   the weights table grows a column per child, so this only gets worse with
   four kids. */
@media (max-width: 600px) {
  .table-scroll .admin-table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
  }
  .table-scroll .shop-edit-table .shop-name { min-width: 170px; }
}

.admin-weight {
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--light);
  color: var(--dark);
  width: 90px;
  text-align: right;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-weight:focus {
  outline: none;
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(78,205,196,0.25);
}
.admin-weight[value="0"], .admin-weight[value="0.0"] {
  color: var(--coral);
  border-color: rgba(255,107,107,0.4);
}
.admin-logout {
  background: none;
  border: none;
  color: var(--mid);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 8px 0;
  margin-top: 24px;
}
.admin-logout:hover { color: var(--coral); }

/* ── Player selector ───────────────────────────────────────── */
.player-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}
.player-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border-radius: 12px;
  border: 3px solid var(--border);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  user-select: none;
  text-align: center;
  color: var(--dark);
}
.player-total {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--yellow);
  margin-top: 4px;
  min-height: 1em;
}
.player-lifetime {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--mint);
  margin-top: 2px;
}
.player-btn input[type="radio"] { display: none; }
/* Per-player accent — set once from the data-color attribute, then reused by
   every player-coloured element (buttons, name badges, shop tabs). Lets the
   first-run wizard pick any palette colour without name-specific CSS. */
[data-color="sky"]    { --accent: var(--sky); }
[data-color="purple"] { --accent: var(--purple); }
[data-color="mint"]   { --accent: var(--mint); }
[data-color="coral"]  { --accent: var(--coral); }
[data-color="green"]  { --accent: var(--green); }
[data-color="yellow"] { --accent: var(--yellow); }
.player-btn[data-color].active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, #0e1422); color: var(--accent); }
.player-btn-demo.active  { border-color: var(--border); background: var(--light); color: var(--mid); }

/* ── Score earned card (results page) ──────────────────────── */
.score-earned {
  background: #1c1a08;
  border: 2px solid #ffc107;
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
}
.score-earned-rating {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--yellow);
  margin-bottom: 6px;
}
.score-earned-bonus  {
  display: inline-block;
  background: var(--mint);
  color: #0d1f2d;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}
.score-earned-label  { font-size: 1.05rem; margin-bottom: 6px; }
.score-earned-meta   { color: var(--mid); font-size: 0.95rem; margin-bottom: 4px; }
.score-earned-ops    { color: var(--mid); font-size: 0.9rem; font-style: italic; }
.score-earned-demo   { border-style: dashed; opacity: 0.75; }

.mix-badge {
  display: inline-block;
  background: var(--mint);
  color: #0d1f2d;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 12px;
  vertical-align: middle;
  margin-left: 6px;
  letter-spacing: 0.03em;
}

/* ── Results action buttons ────────────────────────────────── */
.results-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.btn-scores {
  background: var(--yellow);
  color: var(--on-acc);
  box-shadow: 0 4px 12px rgba(255,230,109,0.25);
}
.btn-scores:hover { box-shadow: 0 6px 18px rgba(255,230,109,0.4); transform: translateY(-1px); }

/* ── Scores page ───────────────────────────────────────────── */
.scores-topbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 4px;
}
.btn-home {
  font-size: 1rem;
  font-weight: 700;
  padding: 8px 18px;
  background: var(--light);
  color: var(--mid);
  border: 2px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.btn-home:hover {
  border-color: var(--coral);
  color: var(--coral);
}
.scores-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 12px 0 0;
}
.scores-section {
  margin-top: 32px;
}
.scores-section + .scores-section {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 2px dashed var(--border);
}
.scores-section-title {
  font-size: 1.4rem;
  font-weight: 900;
  margin: 0;
  letter-spacing: 0.5px;
}
.player-scores {
  border-radius: 16px;
  border: 3px solid var(--border);
  overflow: hidden;
}
.player-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.player-name {
  font-size: 1.2rem;
  font-weight: 900;
  padding: 14px 16px;
  margin: 0;
  color: var(--on-acc);
  flex: 1;
}
.player-name[data-color] { background: var(--accent); }
.btn-clear-scores {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 10px;
  margin-right: 8px;
  background: transparent;
  color: var(--mid);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.btn-clear-scores:hover {
  color: #e17055;
  border-color: #e17055;
}
.player-running-total {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--yellow);
  text-align: center;
  padding: 6px 0 2px;
  margin: 0;
  min-height: 1.5em;
}
.scores-list { padding: 10px; }
.no-scores {
  color: var(--mid);
  font-size: 0.9rem;
  text-align: center;
  padding: 20px 8px;
  line-height: 1.5;
}
.score-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--light);
  border: 2px solid transparent;
}
.score-top {
  background: #1e1a08;
  border-color: #ffc107;
}
.score-rank {
  font-weight: 900;
  font-size: 1rem;
  color: var(--mid);
  min-width: 26px;
  padding-top: 3px;
}
.score-top .score-rank { color: #f39c12; }
.score-details { flex: 1; min-width: 0; }
.score-rating    { font-size: 1.3rem; font-weight: 900; color: var(--dark); }
.score-time-diff { font-size: 0.85rem; color: var(--mid); margin: 2px 0; }
.score-date      { font-size: 0.82rem; color: var(--mid); }
.score-ops       { font-size: 0.82rem; color: var(--mid); font-style: italic; margin-top: 2px; }

/* ── Times table selector ──────────────────────────────────── */
#section-mul {
  grid-column: span 2;
}

.sub-opts-times {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px dashed #1d4040;
}
.sub-opts-times.visible { display: block; }

.times-presets {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.preset-btn {
  flex: 1;
  padding: 8px 6px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--light);
  color: var(--mid);
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.preset-btn:hover {
  border-color: var(--coral);
  color: var(--coral);
  background: #1c2e42;
}

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

/* Six across leaves ~31px circles on a 320px phone — too small for a child's
   finger. Four across keeps them thumb-sized; it just takes three rows. */
@media (max-width: 480px) {
  .times-grid { grid-template-columns: repeat(4, 1fr); }
}

.times-btn {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--border);
  background: var(--light);
  color: var(--mid);
  font-weight: 900;
  font-size: 1.15rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.times-btn input { display: none; }
.times-btn:hover {
  border-color: var(--coral);
  color: var(--dark);
}
.times-btn.active {
  border-color: var(--coral);
  background: var(--coral);
  color: var(--on-acc);
  box-shadow: 0 0 0 3px rgba(255,107,107,0.35), 0 4px 14px rgba(255,107,107,0.5);
}

/* ── Responsive ────────────────────────────────────────────── */
/* ── Scores page: balance + lifetime row ───────────────────── */
.player-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  padding: 4px 8px 8px;
  margin: 0;
  font-weight: 800;
  font-size: 0.95rem;
}
.pts-balance  { color: var(--yellow); }
.pts-lifetime { color: var(--mint); }

/* ── Shop page ─────────────────────────────────────────────── */
.shop-card { max-width: 100%; }

.shop-player-row {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.shop-player {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border-radius: 12px;
  border: 3px solid var(--border);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: center;
  color: var(--dark);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.shop-player[data-color].active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, #0e1422); color: var(--accent); }
.shop-player-demo.active  { border-color: var(--border); background: var(--light); color: var(--mid); }

.shop-balance {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 10px;
  background: var(--light);
  border-radius: 12px;
  font-weight: 800;
  font-size: 1.05rem;
}
.shop-balance-demo {
  text-align: center;
  color: var(--mid);
  background: var(--light);
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 18px;
  font-weight: 700;
}

.shop-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  margin-top: 8px;
}

.shop-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-item {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #1c1a08;
  border: 2px solid #ffc107;
  border-radius: 14px;
  transition: opacity 0.15s;
}
.shop-item.on-sale {
  border-color: var(--yellow, #FFE66D);
  box-shadow: 0 0 0 2px rgba(255, 230, 109, 0.25), 0 0 24px rgba(255, 107, 107, 0.4);
  background: linear-gradient(135deg, #1c1a08 0%, #2a1818 100%);
}
.shop-item.on-sale.unaffordable {
  box-shadow: none;
}
.shop-item.unaffordable {
  opacity: 0.4;
  border-color: var(--border);
  background: var(--light);
}
.shop-item.unaffordable .btn-add { pointer-events: none; }
.shop-item-emoji {
  font-size: 2rem;
  line-height: 1;
  min-width: 2.5rem;
  text-align: center;
}
.shop-item-info { flex: 1; min-width: 0; }
.shop-item-name {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--dark);
}
.shop-item-cost {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--yellow);
  margin-top: 2px;
}
.btn-add {
  padding: 8px 16px;
  font-size: 0.95rem;
}
.btn-add[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.cart-panel {
  background: var(--light);
  border-radius: 14px;
  border: 2px solid var(--border);
  padding: 16px;
  align-self: start;
  position: sticky;
  top: 16px;
}
.cart-title {
  font-size: 1.1rem;
  font-weight: 900;
  margin-bottom: 12px;
  color: var(--dark);
}
.cart-list {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-row {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto 1.5rem;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  background: var(--card);
  border-radius: 8px;
  font-size: 0.9rem;
}
.cart-row-emoji { font-size: 1.1rem; }
.cart-row-name {
  font-weight: 700;
  color: var(--dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-row-cost {
  font-weight: 700;
  color: var(--yellow);
  font-size: 0.85rem;
}
.cart-row-remove { margin: 0; }
.btn-cart-remove {
  background: transparent;
  color: var(--mid);
  border: none;
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
  padding: 2px 6px;
  font-family: inherit;
}
.btn-cart-remove:hover { color: var(--coral); }

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 2px dashed var(--border);
  font-weight: 800;
  font-size: 1.05rem;
}
.cart-total-value { color: var(--yellow); }
.cart-after {
  text-align: right;
  font-size: 0.85rem;
  color: var(--mid);
  margin-bottom: 10px;
}
.cart-empty {
  text-align: center;
  color: var(--mid);
  font-size: 0.95rem;
  padding: 20px 8px;
  line-height: 1.5;
}
.btn-checkout {
  margin-top: 6px;
  font-size: 1.1rem;
  padding: 14px;
}
.btn-checkout[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--light);
  color: var(--mid);
  box-shadow: none;
}
.cart-clear-form { margin-top: 8px; text-align: center; }
.btn-cart-clear {
  background: transparent;
  color: var(--mid);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 12px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
.btn-cart-clear:hover { color: var(--coral); border-color: var(--coral); }

/* ── Checkout page ─────────────────────────────────────────── */
.checkout-card { text-align: center; }
.checkout-header { margin-bottom: 20px; }
.checkout-list {
  list-style: none;
  margin: 16px auto 24px;
  padding: 0;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.checkout-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: 10px;
  align-items: center;
  background: #1c1a08;
  border: 2px solid #ffc107;
  border-radius: 12px;
  padding: 10px 14px;
}
.checkout-item-emoji { font-size: 1.8rem; text-align: center; }
.checkout-item-name { font-weight: 800; color: var(--dark); }
.checkout-item-cost { font-weight: 700; color: var(--yellow); }

.checkout-callout {
  background: linear-gradient(135deg, #0d2a2e, #14304d);
  border: 3px solid var(--mint);
  border-radius: 16px;
  padding: 22px 18px;
  margin: 24px 0 18px;
}
.checkout-callout-emoji { font-size: 3.5rem; line-height: 1; margin-bottom: 8px; }
.checkout-callout-text {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--mint);
  margin: 4px 0;
}
.checkout-callout-sub { color: var(--dark); font-size: 1rem; }

.checkout-balance { margin: 10px 0 18px; font-weight: 800; }

/* ── Confirmation modal ────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 24, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.modal-backdrop.hidden { display: none; }
.modal-card {
  background: var(--card);
  border: 3px solid var(--coral);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 22px;
  max-width: 380px;
  width: 100%;
  text-align: center;
}
.modal-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--dark);
  margin-bottom: 12px;
}
.modal-title span { color: var(--coral); }
.modal-total {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--yellow);
  margin: 6px 0 14px;
  letter-spacing: -0.5px;
}
.modal-warning {
  background: #2a1c0a;
  border: 2px dashed #ffc107;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--yellow);
  margin-bottom: 18px;
}
.modal-warning strong { color: var(--coral); }
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.btn-cancel {
  background: var(--light);
  color: var(--dark);
  border: 2px solid var(--border);
}
.btn-cancel:hover { border-color: var(--mid); }

@media (max-width: 480px) {
  .ops-grid { grid-template-columns: 1fr; }
  /* #section-mul spans both columns on wider screens. Left alone it
     conjures an implicit second column back and overflows the phone. */
  #section-mul { grid-column: auto; }
  .question-display { font-size: 2.4rem; }
  .answer-input-large { font-size: 2rem; width: 140px; }
  .page-card { padding: 24px 18px; }
  .scores-grid { grid-template-columns: 1fr; }
  .player-buttons { flex-wrap: wrap; }
  .shop-layout { grid-template-columns: 1fr; }
  .cart-panel { position: static; }
}

/* --- Daily sale starburst + price markup --- */
.sale-starburst {
  position: absolute;
  top: -18px;
  left: -18px;
  width: 70px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: inherit;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  background:
    radial-gradient(circle at 50% 45%, #ffe066 0%, #ff8a3d 55%, #ff4757 100%);
  clip-path: polygon(
    50% 0%, 60% 18%, 78% 8%, 75% 28%, 95% 25%, 84% 42%,
    100% 50%, 84% 58%, 95% 75%, 75% 72%, 78% 92%, 60% 82%,
    50% 100%, 40% 82%, 22% 92%, 25% 72%, 5% 75%, 16% 58%,
    0% 50%, 16% 42%, 5% 25%, 25% 28%, 22% 8%, 40% 18%
  );
  transform: rotate(-12deg);
  animation: saleWobble 2.4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 2;
}
.sale-starburst-top {
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  line-height: 1;
}
.sale-starburst-bot {
  font-size: 0.7rem;
  line-height: 1;
  margin-top: 2px;
}
@keyframes saleWobble {
  0%   { transform: rotate(-16deg) scale(1.00); }
  100% { transform: rotate(-6deg)  scale(1.08); }
}

.price-strike {
  text-decoration: line-through;
  color: var(--mid, #888);
  font-weight: 700;
  font-size: 0.85rem;
  margin-right: 6px;
  opacity: 0.85;
}
.price-sale {
  color: #FFE66D;
  font-weight: 900;
}

.cart-row-sale {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: linear-gradient(135deg, #ff8a3d, #ff4757);
  color: #fff;
  font-weight: 900;
  font-size: 0.7rem;
  border-radius: 6px;
  letter-spacing: 0.4px;
  vertical-align: middle;
}

.sale-locked-msg {
  text-align: center;
  background: linear-gradient(135deg, rgba(255, 230, 109, 0.15), rgba(255, 138, 61, 0.15));
  border: 2px dashed var(--yellow, #FFE66D);
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 800;
  color: var(--dark);
  margin: 8px 0 12px;
}

.shop-history-link {
  margin-left: auto;
  padding: 4px 10px;
  background: var(--card, #fff);
  color: var(--dark);
  border: 2px solid var(--border, #ccc);
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.85rem;
  text-decoration: none;
}
.shop-history-link:hover {
  border-color: var(--coral, #FF6B6B);
  color: var(--coral, #FF6B6B);
}

/* --- Purchase history page --- */
.history-card .shop-player-row { margin-bottom: 12px; }
.history-summary {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 18px;
  font-weight: 800;
}
.history-group {
  margin-bottom: 18px;
  padding: 12px 14px;
  background: var(--light, #f7f7f7);
  border: 2px solid var(--border, #ddd);
  border-radius: 14px;
}
.history-date {
  font-size: 1.05rem;
  font-weight: 900;
  margin: 0 0 10px 0;
  color: var(--coral, #FF6B6B);
}
.history-list {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.history-row {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: var(--card, #fff);
  border-radius: 8px;
  font-size: 0.95rem;
}
.history-row-sale { box-shadow: inset 0 0 0 2px rgba(255, 230, 109, 0.55); }
.history-row-emoji { font-size: 1.2rem; }
.history-row-name {
  font-weight: 700;
  color: var(--dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-row-cost {
  font-weight: 800;
  color: var(--yellow, #FFE66D);
  white-space: nowrap;
}
.history-subtotal {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  color: var(--dark);
  padding: 6px 10px 0;
  border-top: 1px dashed var(--border, #ddd);
  margin-top: 4px;
}

/* ── Weight badges (setup page) ────────────────────────────── */
.weight-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.4;
}
.weight-badge:empty,
.weight-badge.weight-none { display: none; }
.weight-zero    { background: #2a3a52; color: #9fb3cc; }
.weight-reduced { background: #3a2f1a; color: #ffd27a; }
.weight-boost   { background: #1f3a2a; color: #7fe3a1; }

/* Times-table buttons are small squares — show only the emoji as a corner marker. */
.times-btn { position: relative; }
.times-btn .weight-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 0;
  margin: 0;
  background: transparent;
  font-size: 0;
  line-height: 1;
}
.times-btn .weight-badge::before {
  content: attr(data-emoji);
  font-size: 0.95rem;
}

/* ── Landing page ──────────────────────────────────────────── */
.landing-card {
  text-align: center;
}
.landing-welcome {
  color: var(--mid);
  font-size: 1.1rem;
  margin: 0.5rem 0 1.5rem;
  min-height: 1.4em;
}
.landing-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0 2rem;
}
@media (max-width: 600px) {
  .landing-tiles { grid-template-columns: 1fr; }
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.2rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--on-acc);
  box-shadow: var(--shadow);
  transition: transform 0.1s, box-shadow 0.1s;
  font-weight: 800;
  gap: 0.5rem;
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
}
.tile-maths {
  background: linear-gradient(135deg, var(--coral) 0%, var(--yellow) 100%);
}
.tile-spell {
  background: linear-gradient(135deg, var(--sky) 0%, var(--purple) 100%);
}
.tile-emoji { font-size: 3rem; line-height: 1; }
.tile-title { font-size: 1.7rem; }
.tile-sub { font-size: 0.95rem; opacity: 0.8; font-weight: 600; }

.landing-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.landing-links a {
  color: var(--mid);
  text-decoration: none;
  padding: 0.4rem 0.8rem;
  border-radius: 10px;
  transition: background 0.1s, color 0.1s;
}
.landing-links a:hover {
  background: var(--light);
  color: var(--dark);
}

/* ── Spelling-specific palette overrides ──────────────────── */
.spell-page .page-title { color: var(--sky); }
.spell-page .timer-badge {
  background: var(--purple);
  color: var(--on-acc);
}
.spell-page .btn-start {
  background: linear-gradient(135deg, var(--sky), var(--purple));
  color: var(--on-acc);
}
.spell-page .btn-primary {
  background: var(--sky);
  color: var(--on-acc);
}
.spell-page .btn-primary:hover { background: var(--purple); }
.spell-page .qchip-current { background: var(--sky); color: var(--on-acc); }
.spell-page .qchip-answered { background: var(--purple); color: var(--on-acc); }

/* ── Spelling: level + count chooser ──────────────────────── */
.level-buttons,
.count-buttons {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1.5rem;
}
.level-btn,
.count-btn {
  flex: 1 1 calc(20% - 0.6rem);
  min-width: 110px;
  padding: 1rem 0.5rem;
  background: var(--light);
  border: 2px solid var(--border);
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
  color: var(--dark);
  font-weight: 700;
  transition: background 0.1s, border-color 0.1s, transform 0.1s;
}
.level-btn:hover,
.count-btn:hover { transform: translateY(-1px); }
.level-btn.active,
.count-btn.active {
  background: linear-gradient(135deg, var(--sky), var(--purple));
  border-color: var(--purple);
  color: var(--on-acc);
}
.level-btn input,
.count-btn input { display: none; }

/* Tricky-Words button — spans the full row under the level grid and reads as a
   special, gold-tinted option. Disabled when the player's bank is empty. */
.level-btn-review {
  flex: 1 1 100%;
  background: linear-gradient(135deg, #4a3b12, #6b4f16);
  border-color: var(--gold, #e6b800);
  color: #ffe9a8;
}
.level-btn-review.active {
  background: linear-gradient(135deg, var(--gold, #e6b800), #ff9d2e);
  border-color: #ff9d2e;
  color: #3a2a00;
}
.level-btn-review.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.level-btn-review.disabled:hover { transform: none; }
.review-count { font-weight: 800; }
.review-hint {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--mid);
  text-align: center;
}

/* Tricky-Words results: gold double-points flourish on the score card. */
.score-earned-review { border-color: var(--gold, #e6b800); }
.double-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold, #e6b800), #ff9d2e);
  color: #3a2a00;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* Full-viewport overlay shown during the gTTS prewarm on /spell/start.
   Blocks every click underneath while audio is being prepared, so kids
   can't fire a second submit, jump to another page, or change the form
   mid-request. Hidden by default; the setup-page JS toggles .hidden on
   submit and on every pageshow event. */
.spell-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 21, 32, 0.88);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 1000;
  padding: 1rem;
  text-align: center;
}
.spell-loading-overlay.hidden { display: none; }
.spell-loading-spinner {
  width: 72px;
  height: 72px;
  border: 8px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--sky);
  border-right-color: var(--purple);
  border-radius: 50%;
  animation: spell-loading-spin 0.9s linear infinite;
}
.spell-loading-text {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0;
}
.spell-loading-hint {
  font-size: 0.95rem;
  color: var(--mid);
  margin: 0;
  max-width: 24em;
}
@keyframes spell-loading-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .spell-loading-spinner { animation-duration: 3s; }
}

/* ── Spelling quiz: sentence + audio + input ──────────────── */
.sentence-display {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--dark);
  margin: 1.5rem 0;
  padding: 1.2rem;
  background: var(--light);
  border-radius: 14px;
  letter-spacing: 0.01em;
}
.audio-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin: 1rem 0 1.5rem;
}
.btn-play,
.btn-replay {
  display: inline-block;
  border: none;
  border-radius: 50px;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  background: var(--sky);
  color: var(--on-acc);
  transition: transform 0.1s, background 0.1s;
}
.btn-play:hover,
.btn-replay:hover {
  background: var(--purple);
  transform: translateY(-1px);
}
.btn-play:disabled,
.btn-replay:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.audio-fallback {
  text-align: center;
  color: var(--yellow);
  font-size: 0.95rem;
  margin: 0.5rem 0;
}
.audio-fallback.hidden { display: none; }
.spell-input {
  font-size: 1.8rem;
  text-align: center;
  width: 100%;
  max-width: 360px;
  padding: 0.8rem 1rem;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--light);
  color: var(--dark);
  font-weight: 700;
  font-family: inherit;
}
.spell-input:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(116, 185, 255, 0.25);
}

/* ── Spelling results: highlighted word ───────────────────── */
.worked-sentence {
  font-size: 1.3rem;
  line-height: 1.5;
  margin: 0.5rem 0;
}
.worked-sentence .correct-word {
  color: var(--sky);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.worked-given {
  color: var(--mid);
  font-style: italic;
  margin: 0.5rem 0;
}

/* ── Scores: kind tab toggle ──────────────────────────────── */
.scores-tabs {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.scores-tab {
  padding: 0.6rem 1.4rem;
  background: var(--light);
  border: 2px solid var(--border);
  border-radius: 30px;
  cursor: pointer;
  color: var(--dark);
  font-weight: 700;
  font-family: inherit;
  font-size: 1rem;
  transition: background 0.1s, border-color 0.1s;
}
.scores-tab.active {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--on-acc);
}
.scores-tab.active.spell {
  background: var(--sky);
  border-color: var(--sky);
}
.score-row.hidden { display: none; }

/* ── Landing admin link ───────────────────────────────────── */
.landing-admin {
  color: var(--mid);
  font-size: 0.9rem;
  border: 1px solid var(--border);
}
.landing-admin:hover {
  background: var(--card);
  color: var(--coral);
}

/* ── Admin: section headings + activity cards ─────────────── */
.admin-section-title {
  font-size: 1.5rem;
  margin: 2rem 0 0.4rem;
  color: var(--mint);
  border-bottom: 2px solid var(--border);
  padding-bottom: 0.4rem;
}
.admin-section-title:first-of-type { margin-top: 0; }
.admin-section-intro {
  color: var(--mid);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.admin-weights-intro { margin-top: 1rem; }

/* ── Admin accordions (collapsible sections) ───────────────── */
.admin-accordion {
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 0.9rem 0;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.admin-accordion-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--mint);
  user-select: none;
}
.admin-accordion-summary::-webkit-details-marker { display: none; }
.admin-accordion-summary::after {
  content: "\25B8";          /* ▸ */
  margin-left: auto;
  font-size: 1rem;
  color: var(--mid);
  transition: transform 0.15s ease;
}
.admin-accordion[open] > .admin-accordion-summary::after { transform: rotate(90deg); }
.admin-accordion[open] > .admin-accordion-summary {
  border-bottom: 1px solid var(--border);
}
.admin-accordion-summary:hover { background: rgba(255, 255, 255, 0.04); }
.admin-accordion-summary:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: -2px;
}
.admin-accordion-body { padding: 0.4rem 1.1rem 1.1rem; }
/* Section titles inside an accordion would double up — drop their top margin. */
.admin-accordion-body .admin-section-intro:first-child { margin-top: 0.2rem; }

.admin-activity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 2rem;
}
@media (max-width: 700px) {
  .admin-activity-grid { grid-template-columns: 1fr; }
}
.admin-activity-card {
  background: var(--light);
  border-radius: 14px;
  padding: 1rem 1.2rem 1.2rem;
  border: 1px solid var(--border);
}
.admin-activity-name {
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
  color: var(--dark);
}
.admin-activity-name[data-color] { color: var(--accent); }
.admin-activity-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--dark);
  font-size: 0.95rem;
  margin: 0.2rem 0;
}
.admin-activity-meta {
  color: var(--mid);
  font-size: 0.9rem;
  margin: 0.5rem 0 1rem;
}
.admin-activity-section { margin-top: 1rem; }
.admin-activity-section h4 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: var(--dark);
}
.admin-activity-count {
  color: var(--mid);
  font-weight: 400;
  font-size: 0.85rem;
}
.admin-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.admin-activity-list li {
  display: grid;
  grid-template-columns: minmax(70px, auto) 1fr auto;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.9rem;
  align-items: baseline;
}
.admin-activity-list li:last-child { border-bottom: none; }
.admin-activity-rating {
  font-weight: 700;
  color: var(--yellow);
}
.admin-activity-detail {
  color: var(--dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-activity-date {
  color: var(--mid);
  font-size: 0.85rem;
}
.admin-activity-empty {
  color: var(--mid);
  font-style: italic;
  font-size: 0.9rem;
}

/* ─── Spelling Progress page ──────────────────────────────────────────── */
.spell-progress-card {
  padding-bottom: 14px;
}
.spell-progress-sub {
  font-size: 1.0rem;
  font-weight: 800;
  margin: 18px 14px 8px;
  color: var(--coral);
}
/* .player-scores hides its overflow for the rounded corners, so a table
   wider than the card lost its right-hand columns with no way to reach
   them. Wrap wide tables in this and they scroll on their own. */
.table-scroll {
  overflow-x: auto;
}
.spell-progress-levels {
  width: calc(100% - 28px);
  margin: 0 14px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.spell-progress-levels th,
.spell-progress-levels td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.spell-progress-levels th {
  font-weight: 800;
  color: var(--mid);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.spell-progress-levels tr.lvl-empty td {
  color: var(--mid);
}
.spell-recent-list {
  list-style: none;
  margin: 0 14px;
  padding: 0;
}
.spell-recent-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.9rem;
}
.spell-recent-date { color: var(--mid); }
.spell-recent-level { font-weight: 700; }
.spell-recent-score { font-weight: 800; }
.spell-wrong-list {
  list-style: none;
  margin: 0 14px;
  padding: 0;
}
.spell-wrong-list li {
  padding: 8px 10px;
  margin: 6px 0;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.spell-wrong-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.spell-wrong-word {
  font-size: 1.05rem;
  color: var(--coral);
}
.spell-wrong-meta {
  color: var(--mid);
  font-size: 0.85rem;
}
.spell-wrong-sentence {
  margin-top: 4px;
  color: var(--mid);
  font-size: 0.9rem;
  font-style: italic;
}

/* ── Writing Time! ─────────────────────────────────────────── */
.tile-write {
  background: linear-gradient(135deg, var(--yellow) 0%, var(--green) 100%);
}
.write-page .page-title { color: var(--yellow); }
.write-page .btn-start {
  background: linear-gradient(135deg, var(--yellow), var(--green));
  color: var(--on-acc);
  box-shadow: 0 6px 20px rgba(255,230,109,0.35);
}
.write-page .btn-start:hover { box-shadow: 0 8px 24px rgba(255,230,109,0.45); }

.write-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 820px) {
  .write-layout { grid-template-columns: 1fr; }
}

.write-input,
.write-textarea {
  width: 100%;
  background: var(--light);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--dark);
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  font-size: 1rem;
}
.write-textarea {
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  line-height: 1.5;
  resize: vertical;
  min-height: 160px;
}
.write-input:focus,
.write-textarea:focus {
  outline: none;
  border-color: var(--yellow);
}

.estimate-readout {
  color: var(--mid);
  font-size: 0.95rem;
  margin: 14px 0 0;
  min-height: 1.4em;
}
.estimate-readout strong { color: var(--dark); }

.write-claim-link {
  margin-top: 18px;
  text-align: center;
  color: var(--mid);
  font-size: 0.95rem;
}
.write-claim-link a {
  color: var(--yellow);
  font-weight: 700;
  text-decoration: none;
}
.write-claim-link a:hover { text-decoration: underline; }

/* Preview pane */
.write-preview-wrap { position: sticky; top: 24px; }
.preview-label {
  margin-top: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.preview-status {
  font-size: 0.78rem;
  color: var(--mid);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.preview-pdf-frame {
  aspect-ratio: 1 / 1.414; /* A4 portrait */
  height: auto;
  max-height: 80vh;
}
.preview-empty {
  background: var(--light);
  border: 2px dashed var(--border);
  border-radius: 12px;
  color: var(--mid);
  text-align: center;
  padding: 32px 16px;
  font-size: 0.95rem;
}

/* Sheet viewer page */
.write-sheet-page .sheet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 12px 0;
  color: var(--mid);
  font-size: 0.95rem;
}
.sheet-meta-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  color: var(--mid);
  margin-right: 6px;
}
.sheet-meta-value { color: var(--dark); font-weight: 700; }

.sheet-code-banner {
  margin: 14px 0 18px;
  padding: 14px 16px 18px;
  background: var(--light);
  border: 2px dashed var(--yellow);
  border-radius: 14px;
}
.sheet-code-label {
  display: block;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--mid);
  text-align: center;
  margin-bottom: 10px;
}
.sheet-page-codes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.sheet-page-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
}
.sheet-page-code.claimed {
  border-color: var(--green);
  background: rgba(85,239,196,0.08);
  opacity: 0.85;
}
.sheet-page-code .page-code {
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--yellow);
  letter-spacing: 0.12em;
}
.sheet-page-code.claimed .page-code { color: var(--green); }
.sheet-page-code .page-meta {
  font-size: 0.8rem;
  color: var(--mid);
  margin-top: 2px;
}

.sheet-pdf-frame {
  display: block;
  width: 100%;
  height: 720px;
  max-height: 80vh;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  justify-content: center;
}
.btn-secondary {
  background: var(--light);
  color: var(--dark);
  border: 2px solid var(--border);
}
.btn-secondary:hover { border-color: var(--yellow); color: var(--yellow); }

/* Claim page */
.claim-banner {
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-weight: 700;
  text-align: center;
}
.claim-banner.claim-success {
  background: rgba(85, 239, 196, 0.15);
  color: var(--green);
  border: 2px solid var(--green);
}
.claim-banner.claim-error {
  background: rgba(255, 107, 107, 0.15);
  color: var(--coral);
  border: 2px solid var(--coral);
}
.claim-banner.claim-info {
  background: rgba(255, 230, 109, 0.12);
  color: var(--yellow);
  border: 2px solid var(--yellow);
}

.claim-lookup .claim-code-input,
.claim-award .claim-points-input {
  display: block;
  width: 100%;
  background: var(--light);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--dark);
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}
.claim-award .claim-points-input {
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.claim-lookup .claim-hint {
  color: var(--mid);
  font-size: 0.9rem;
  margin: 4px 0 10px;
}
.claim-code-input:focus,
.claim-points-input:focus {
  outline: none;
  border-color: var(--yellow);
}

.claim-sheet-info {
  background: var(--light);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 14px 0;
  color: var(--dark);
}
.claim-sheet-info p { margin: 4px 0; font-size: 0.95rem; }
.claim-text-preview { color: var(--mid); }

.claim-recommendation {
  color: var(--mid);
  margin: 10px 0;
}
.claim-recommendation strong { color: var(--yellow); }
.claim-hint { font-size: 0.85rem; color: var(--mid); }

.claim-summary-line {
  text-align: center;
  font-size: 1.05rem;
  color: var(--dark);
  margin: 16px 0;
}

.admin-quick-links {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

/* ── Writing sheets admin ─────────────────────────────────── */
.sheets-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.sheets-table {
  margin-top: 12px;
}
.sheets-table td, .sheets-table th {
  font-size: 0.9rem;
}
.sheets-table .page-code {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: 0.08em;
}
.sheet-row-unclaimed td {
  background: rgba(255, 230, 109, 0.06);
}
.sheet-row-claimed td {
  background: rgba(85, 239, 196, 0.05);
  color: var(--mid);
}
.sheet-row-partial td {
  background: rgba(116, 185, 255, 0.06);
}
.sheet-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  border: 1px solid var(--border);
  color: var(--mid);
  background: var(--light);
}
.sheet-pill-unclaimed { color: var(--yellow); border-color: var(--yellow); }
.sheet-pill-partial   { color: var(--sky);    border-color: var(--sky); }
.sheet-pill-claimed   { color: var(--green);  border-color: var(--green); }
.sheet-delete-form { margin: 0; }
.btn-small {
  padding: 6px 14px;
  font-size: 0.85rem;
}
.btn-danger {
  background: var(--coral);
  color: var(--white);
}
.btn-danger:hover { filter: brightness(1.1); }
.btn-danger[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── Progress page additions: focus chips, bars, heatmap ─────────────── */
.focus-areas {
  margin: 8px 14px 18px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 230, 109, 0.06);
  border: 1px solid var(--border);
}
.focus-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mid);
  font-weight: 800;
  margin-bottom: 6px;
}
.focus-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.focus-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  background: var(--light);
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid var(--border);
}
.focus-chip-low  { border-color: rgba(255, 107, 107, 0.6); }
.focus-chip-mid  { border-color: rgba(255, 168,  86, 0.6); }
.focus-chip-hi   { border-color: rgba(255, 230, 109, 0.6); }
.focus-pct {
  color: var(--mid);
  font-size: 0.85rem;
}
.focus-empty {
  margin: 8px 14px 14px;
  color: var(--green);
  font-weight: 700;
}

.bars-title {
  font-size: 0.85rem;
  font-weight: 800;
  margin: 18px 14px 8px;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-only-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(162, 155, 254, 0.18);
  padding: 2px 6px;
  border-radius: 8px;
  margin-left: 6px;
}

.bars-list {
  list-style: none;
  margin: 0 14px;
  padding: 0;
}
.bars-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  padding: 4px 0;
  align-items: center;
  border-bottom: 1px dashed var(--border);
  font-size: 0.85rem;
}
.bars-label {
  color: var(--dark);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bars-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.bar {
  position: relative;
  display: block;
  height: 18px;
  border-radius: 9px;
  background: var(--light);
  border: 1px solid var(--border);
  overflow: hidden;
}
.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 9px;
}
.bar-fill-acc { background: linear-gradient(90deg, var(--mint), var(--green)); }
.bar-fill-spd { background: linear-gradient(90deg, var(--sky), var(--purple)); }
.bar-text {
  position: relative;
  display: block;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 18px;
  color: var(--white);
  mix-blend-mode: luminosity;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.bars-empty {
  color: var(--mid);
  font-style: italic;
  padding: 6px 0;
}

.topic-table th,
.topic-table td {
  white-space: nowrap;
}

/* ─── Admin cross-kid heatmap ────────────────────────────────────────── */
.heatmap-wrap {
  margin: 4px 0 22px;
  overflow-x: auto;
}
.heatmap-table {
  border-collapse: collapse;
  font-size: 0.85rem;
  width: 100%;
  max-width: 540px;
}
.heatmap-table th,
.heatmap-table td {
  padding: 6px 10px;
  text-align: center;
  border: 1px solid var(--border);
}
.heatmap-table th:first-child,
.heatmap-table td:first-child {
  text-align: left;
  color: var(--dark);
  font-weight: 700;
  background: var(--light);
}
.heatmap-table th {
  color: var(--mid);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hm-cell {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hm-cell-meta {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}
.hm-green { background: rgba(85, 239, 196, 0.22); color: var(--green); }
.hm-amber { background: rgba(255, 230, 109, 0.18); color: var(--yellow); }
.hm-red   { background: rgba(255, 107, 107, 0.22); color: var(--coral); }
.hm-na    { background: transparent; color: var(--mid); font-weight: 600; }

/* ── First-run wizard (/welcome) ───────────────────────────── */
.welcome-player {
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 18px;
}
.welcome-name { width: 100%; box-sizing: border-box; }
.welcome-sublabel {
  font-size: 0.85rem;
  color: var(--mid);
  margin: 12px 0 6px;
}
.welcome-emoji-row, .welcome-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.welcome-swatch input, .welcome-color input { display: none; }
.welcome-swatch span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}
.welcome-swatch input:checked + span {
  border-color: var(--mint);
  background: color-mix(in srgb, var(--mint) 18%, #0e1422);
}
.welcome-color { cursor: pointer; }
.welcome-color-dot {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent, var(--sky));
  border: 3px solid transparent;
}
.welcome-color input:checked + .welcome-color-dot {
  border-color: var(--dark);
  box-shadow: 0 0 0 2px var(--accent, var(--sky));
}

/* ── Shop editor (/admin) ──────────────────────────────────── */
.shop-edit-table .shop-col-emoji { width: 64px; }
.shop-edit-table .shop-col-cost  { width: 110px; }
.shop-edit-table .shop-name { width: 100%; box-sizing: border-box; }
.shop-edit-table .shop-emoji { width: 52px; text-align: center; }
.shop-edit-table .shop-cost  { width: 100px; }
.shop-del { font-size: 1rem; }


/* ==========================================================================
   Reading Time!  (/read)
   ========================================================================== */

.tile-read {
  background: linear-gradient(135deg, var(--mint) 0%, var(--sky) 100%);
}

/* --- Setup: mode + band pickers ----------------------------------------- */

.mode-buttons {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1.5rem;
}
.mode-btn {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 0.9rem;
  background: var(--light);
  border: 3px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.1s, transform 0.1s;
}
.mode-btn input { display: none; }
.mode-btn:hover { transform: translateY(-2px); }
.mode-btn.active { border-color: var(--mint); }
.mode-emoji { font-size: 1.8rem; line-height: 1; }
.mode-title { font-size: 1.1rem; font-weight: 800; color: var(--dark); }
.mode-sub { font-size: 0.85rem; color: var(--mid); font-weight: 600; }

.band-buttons {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.4rem;
}
.band-btn {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.9rem 0.7rem;
  background: var(--light);
  border: 3px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.1s, transform 0.1s;
}
.band-btn input { display: none; }
.band-btn:hover { transform: translateY(-2px); }
.band-btn.active { border-color: var(--mint); }
.band-emoji { font-size: 1.6rem; line-height: 1; }
.band-name { font-size: 1.05rem; font-weight: 800; color: var(--dark); }
.band-blurb { font-size: 0.8rem; color: var(--mid); font-weight: 600; }

.band-hint {
  margin: 0 0 1.2rem;
  font-size: 0.9rem;
  color: var(--mid);
  font-weight: 600;
}

.qtype-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1.2rem;
}
.qtype-btn {
  padding: 0.5rem 0.9rem;
  background: var(--light);
  border: 2px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dark);
}
.qtype-btn input { display: none; }
.qtype-btn.active { border-color: var(--mint); background: var(--mint); color: var(--on-acc); }
/* A question type with no items at the chosen level. Greyed rather than hidden,
   so the row of buttons does not reshuffle as you move between levels. */
.qtype-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

.read-aloud-note {
  margin: 0.5rem 0 1.2rem;
  padding: 0.7rem 1rem;
  background: var(--light);
  border-radius: 12px;
  font-size: 0.92rem;
  color: var(--mid);
  font-weight: 600;
}

/* --- Quiz: the passage stays on screen ---------------------------------- */

.passage-panel {
  background: var(--light);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
  max-height: 45vh;
  overflow-y: auto;
}
.passage-title {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
  color: var(--mint);
}
.passage-audio { margin-bottom: 0.8rem; }
.passage-text p {
  margin: 0 0 0.9rem;
  /* Generous size and spacing — this is the text a struggling reader has to
     actually decode, so it gets more room than ordinary body copy. */
  font-size: 1.12rem;
  line-height: 1.85;
  color: var(--dark);
}
.passage-text p:last-child { margin-bottom: 0; }
.passage-source {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--mid);
  font-style: italic;
}

.btn-readaloud {
  background: var(--sky);
  color: var(--on-acc);
  font-size: 1rem;
  padding: 0.55rem 1.1rem;
}
.btn-readaloud-small {
  font-size: 0.88rem;
  padding: 0.4rem 0.9rem;
  background: var(--light);
  color: var(--mid);
  border: 2px solid var(--border);
}

/* --- Quiz: question + options ------------------------------------------- */

.question-context {
  margin: 0 0 0.6rem;
  padding: 0.8rem 1rem;
  background: var(--light);
  border-left: 4px solid var(--sky);
  border-radius: 8px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--dark);
}
.question-text {
  margin: 0 0 0.8rem;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--dark);
}
.question-audio { margin-bottom: 1rem; }

.option-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.option-btn {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.9rem 1.1rem;
  background: var(--light);
  border: 3px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--dark);
  transition: border-color 0.1s, transform 0.1s;
}
.option-btn:hover { transform: translateX(3px); border-color: var(--sky); }
.option-btn.selected { border-color: var(--mint); background: rgba(78, 205, 196, 0.14); }
.option-letter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--card);
  color: var(--mid);
  font-size: 0.95rem;
  font-weight: 800;
}
.option-btn.selected .option-letter { background: var(--mint); color: var(--on-acc); }
.option-text { flex: 1 1 auto; }

.quiz-nav {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
.quiz-nav .btn-next { flex: 1 1 auto; }
.btn-back {
  background: var(--light);
  color: var(--mid);
  border: 2px solid var(--border);
  padding: 0.7rem 1.1rem;
}
.btn-back:disabled { opacity: 0.4; cursor: default; }

/* --- Results ------------------------------------------------------------- */

.wrong-skill {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--light);
  color: var(--mid);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wrong-context {
  margin: 0.6rem 0;
  padding: 0.7rem 0.9rem;
  background: var(--light);
  border-left: 4px solid var(--sky);
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.6;
}
.score-earned-note {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--mid);
  font-weight: 600;
}
.passage-recap {
  margin: 1.5rem 0;
  background: var(--light);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1.2rem;
}
.passage-recap summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--mint);
}
.passage-recap .passage-text { margin-top: 0.9rem; }

@media (max-width: 600px) {
  .passage-panel { max-height: 38vh; padding: 1rem; }
  .passage-text p { font-size: 1.05rem; }
  .band-btn { flex: 1 1 45%; }
}

.spell-progress-sub2 {
  margin: 1.1rem 0 0.4rem;
  font-size: 0.95rem;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Read-aloud button states. The clip is generated on demand, so a press before
   it's ready swaps the icon for a spinner rather than doing nothing. */
.btn-readaloud {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.btn-readaloud .btn-spinner { display: none; }
.btn-readaloud[data-state="loading"] .btn-spinner { display: inline-block; }
.btn-readaloud[data-state="loading"] .readaloud-icon { display: none; }
.btn-readaloud[data-state="loading"] { opacity: 0.75; }
/* Playing: the same button becomes Stop, so a two-minute passage can be cut
   short. Coloured differently so it doesn't read as "play again". */
.btn-readaloud[data-state="playing"] {
  background: var(--coral);
  color: var(--white);
}
.btn-readaloud-small[data-state="playing"] {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
}
/* display:inline-flex above would otherwise beat the browser's [hidden] rule,
   leaving an unusable button on screen when a clip can't be generated. */
.btn-readaloud[hidden] { display: none !important; }
.btn-spinner {
  width: 0.95em;
  height: 0.95em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 2.4s; }
}

/* Reading pace — parent-facing only, never shown to the child mid-round. */
.pace-note {
  margin: 1rem 0 0;
  padding: 0.7rem 1rem;
  background: var(--light);
  border-radius: 12px;
  font-size: 0.88rem;
  color: var(--mid);
  font-weight: 600;
}
.pace-skimmed { color: var(--coral); }

/* ── Accounts (hosted mode only) ────────────────────────────────────────── */

.account-bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.9rem 0;
}
.account-bar-spacer { flex: 1 1 auto; }
.account-bar-home { font-weight: 800; }
.account-bar-link {
  color: var(--muted, #8aa0b8);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.account-bar-link:hover { color: var(--text, #e8eef6); background: rgba(255,255,255,0.06); }

.saved-msg {
  background: rgba(80, 200, 120, 0.15);
  border: 1px solid rgba(80, 200, 120, 0.4);
  color: #8fe3ac;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  margin: 0.6rem 0;
}

.auth-footnote {
  margin-top: 1.2rem;
  opacity: 0.75;
  line-height: 1.5;
}

.account-logout { margin-top: 1.5rem; }

.danger-zone {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 120, 120, 0.25);
}

.welcome-optional {
  font-weight: 400;
  opacity: 0.6;
  font-size: 0.85em;
}

/* ── Service admin console (/manage, hosted mode only) ──────────────────── */

.mg { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.mg-head {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 1.2rem;
}
.mg-title { font-size: 1.5rem; margin: 0; }
.mg-sub { margin: 0.2rem 0 0; opacity: 0.7; font-size: 0.9rem; }
.mg-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mg-navlink {
  color: var(--muted, #8aa0b8); text-decoration: none;
  padding: 0.35rem 0.75rem; border-radius: 999px;
  font-size: 0.9rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.08);
}
.mg-navlink:hover { background: rgba(255,255,255,0.06); color: var(--text, #e8eef6); }
.mg-navlink.is-on { background: rgba(120,170,255,0.18); color: #cfe0ff; border-color: rgba(120,170,255,0.35); }

.mg-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 1.35rem 1.4rem; margin-bottom: 1.15rem;
}
.mg-card h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.mg-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mg-card-head h2 { margin-bottom: 0.6rem; }
.mg-more { font-size: 0.85rem; opacity: 0.75; text-decoration: none; color: var(--muted, #8aa0b8); }
.mg-more:hover { opacity: 1; }
.mg-highlight { border-color: rgba(120,200,150,0.45); background: rgba(80,200,120,0.08); }
.mg-dim { opacity: 0.55; }
.mg-warn { border-color: rgba(255,170,80,0.5); background: rgba(255,170,80,0.1); }
.mg-warn h2 { color: #ffcf8f; }

.mg-stats { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.mg-stat { display: flex; flex-direction: column; }
.mg-stat-value { font-size: 1.4rem; font-weight: 800; }
.mg-stat-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; }

.mg-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mg-table th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.05em; opacity: 0.55; padding: 0.4rem 0.6rem 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mg-table td { padding: 0.55rem 0.6rem 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.mg-table a { color: #9dc4ff; text-decoration: none; font-weight: 600; }
.mg-table a:hover { text-decoration: underline; }
.mg-kid { display: inline-block; margin-right: 0.5rem; white-space: nowrap; }

.mg-pill {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  padding: 0.1rem 0.5rem; border-radius: 999px; vertical-align: middle;
}
.mg-pill-ok    { background: rgba(80,200,120,0.18); color: #8fe3ac; }
.mg-pill-off   { background: rgba(255,120,120,0.15); color: #ffb3b3; }
.mg-pill-admin { background: rgba(200,160,255,0.18); color: #d9c2ff; }

.mg-form-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; }
.mg-form-row label { display: flex; flex-direction: column; font-size: 0.78rem; opacity: 0.75; gap: 0.25rem; }
.mg-form-row .admin-input { margin: 0; }
.mg-grow { flex: 1 1 14rem; }
.mg-grow .admin-input { width: 100%; }

/* .btn-start is the full-width, oversized call-to-action the games use. In a
   dense admin form it should sit inline with the fields it belongs to. */
.mg-form-row .btn-start,
.mg-card .btn-start {
  display: inline-block;
  width: auto;
  font-size: 1rem;
  padding: 12px 22px;
  border-radius: 12px;
  box-shadow: none;
}
.mg-form-row .btn-start:hover, .mg-card .btn-start:hover { transform: none; box-shadow: none; filter: brightness(1.08); }
.mg-card .btn { margin: 0; }

/* Settings rows: title and explanation on the left, the control on the right,
   divided and generously spaced. The stacked heading-paragraph-button layout
   this replaced gave every action the same weight and read as a wall. */
.mg-rows { display: flex; flex-direction: column; }
.mg-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding: 1.25rem 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.mg-row:first-child { border-top: none; padding-top: 0.25rem; }
.mg-row:last-child { padding-bottom: 0.25rem; }
.mg-row-text { flex: 1 1 auto; min-width: 0; }
.mg-row-title { font-weight: 700; font-size: 0.98rem; margin: 0 0 0.3rem; }
.mg-row-desc { font-size: 0.85rem; opacity: 0.7; line-height: 1.55; margin: 0; max-width: 46ch; }
.mg-row-action { flex: 0 0 auto; display: flex; gap: 0.6rem; align-items: center; }
.mg-row-action .btn { white-space: nowrap; }
.mg-row-action .admin-input { width: 12rem; margin: 0; }

/* The one-time password, shown once. Deliberately loud. */
.mg-otp { text-align: center; padding: 1.5rem 1.25rem; }
.mg-otp h2 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.mg-otp-code {
  display: inline-block;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.6rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 0.7rem 1.2rem; margin: 0.8rem 0 0.4rem;
  border-radius: 12px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.14);
  user-select: all;
}
.mg-otp .mg-note { max-width: 44ch; margin-left: auto; margin-right: auto; }

.mg-danger { border-color: rgba(255,120,120,0.4); }
.mg-danger .mg-row-title { color: #ffb3b3; }

@media (max-width: 640px) {
  .mg-row { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .mg-row-action { justify-content: flex-start; flex-wrap: wrap; }
}

.mg-linkrow { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.mg-linkbox { flex: 1 1 auto; margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; }
.mg-password { font-size: 1.1rem; letter-spacing: 0.06em; font-weight: 700; }

.mg-meta { font-size: 0.85rem; opacity: 0.7; margin: 0.4rem 0; }
.mg-note { font-size: 0.85rem; opacity: 0.75; line-height: 1.5; margin: 0.3rem 0 0.7rem; }
.mg-empty { opacity: 0.6; font-style: italic; margin: 0.3rem 0; }
.mg-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; margin-top: 0.8rem; }

@media (max-width: 700px) {
  .mg-table { display: block; overflow-x: auto; }
  .mg-stats { gap: 1rem; }
}

/* ── Sign in / sign up ──────────────────────────────────────────────────── */

/* The card was full width while .admin-input capped at 320px, so the fields and
   the button never lined up. One measured column keeps them the same width. */
.auth-card {
  max-width: 26rem;
  margin: 2.5rem auto;
  padding: 2rem 1.75rem 1.75rem;
}
.auth-card .page-title { text-align: center; margin-bottom: 0.35rem; }
.auth-card .subtitle { text-align: center; margin: 0 0 1.5rem; }

.auth-form { display: flex; flex-direction: column; gap: 1.1rem; }

.auth-field { display: flex; flex-direction: column; gap: 0.4rem; }
.auth-label { font-weight: 700; font-size: 0.95rem; }
.auth-hint { font-size: 0.8rem; opacity: 0.7; line-height: 1.4; }

/* Fields and button share the column width instead of the input's own cap. */
.auth-form .admin-input { max-width: none; width: 100%; box-sizing: border-box; }
.auth-submit { width: 100%; margin-top: 0.4rem; font-size: 1.15rem; padding: 15px; }

.auth-error { margin: 0; text-align: center; }

.auth-footnote {
  margin: 1.5rem 0 0;
  font-size: 0.8rem;
  opacity: 0.7;
  line-height: 1.55;
  text-align: center;
}

@media (max-width: 420px) {
  .auth-card { margin: 1rem auto; padding: 1.5rem 1.15rem; }
}

/* Account settings — sections separated by rules rather than run together, and
   fields in one labelled column instead of wrapping into a ragged grid. */
.auth-card-wide { max-width: 34rem; }

.acct-section { padding: 1.6rem 0; border-top: 1px solid rgba(255,255,255,0.09); }
.acct-section:first-of-type { border-top: none; padding-top: 0.5rem; }
.acct-section:last-of-type { padding-bottom: 0.5rem; }

.acct-heading { font-size: 1.05rem; margin: 0 0 0.4rem; }
.acct-desc { font-size: 0.86rem; opacity: 0.72; line-height: 1.55; margin: 0 0 1rem; max-width: 46ch; }

.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.acct-row .acct-desc { margin: 0; }

.acct-actions { margin-top: 0.3rem; }
.acct-delete { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.acct-delete .admin-input { width: 13rem; margin: 0; }

.acct-danger .acct-heading { color: #ffb3b3; }

.acct-back {
  display: inline-block;
  font-size: 0.85rem; font-weight: 600;
  color: var(--muted, #8aa0b8); text-decoration: none;
  margin-bottom: 0.75rem;
}
.acct-back:hover { color: var(--text, #e8eef6); }

/* The games' full-width call-to-action is wrong on a settings form. */
.btn-compact {
  display: inline-block; width: auto;
  font-size: 1rem; padding: 12px 22px;
  border-radius: 12px; box-shadow: none;
  white-space: nowrap;
}
.btn-compact:hover { transform: none; box-shadow: none; filter: brightness(1.08); }

@media (max-width: 560px) {
  .acct-row { flex-direction: column; align-items: stretch; gap: 0.8rem; }
  .acct-delete .admin-input { width: 100%; }
}

/* ==========================================================================
   Switched-off activities  (see mathkids/features.py)
   ========================================================================== */

/* The tile stays in place rather than disappearing: children ask where an
   activity went, and "coming soon" answers that better than a gap does. */
.tile-soon {
  filter: grayscale(1);
  opacity: 0.42;
  cursor: default;
  box-shadow: none;
}
.tile-soon:hover {
  transform: none;
  box-shadow: none;
}
.tile-soon .tile-sub {
  opacity: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}

.soon-card {
  text-align: center;
  max-width: 34rem;
  margin: 0 auto;
}
.soon-emoji {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  filter: grayscale(1);
  opacity: 0.6;
}
.soon-body {
  color: var(--mid);
  font-size: 1.05rem;
  margin: 0 auto 1.5rem;
  max-width: 26rem;
}
.soon-links {
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Leaderboard  (/leaderboard)
   ========================================================================== */

.leaderboard-card {
  max-width: 34rem;
  margin: 0 auto;
}
.lb-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lb-row {
  display: grid;
  /* rank · emoji (takes the slack — it is the only identifier) · points */
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  /* Tinted with the child's own colour, so two families who both picked the
     same emoji still read as different rows. A left-edge stripe was the first
     attempt and fought the rounded corner. */
  background: color-mix(in srgb, var(--accent, transparent) 10%, var(--light));
  border: 2px solid transparent;
}
/* The leader only. Most families have fewer than four children, so a
   top-three highlight would mark every row and mean nothing. */
.lb-row-top {
  border-color: color-mix(in srgb, var(--yellow) 45%, transparent);
  background: color-mix(in srgb, var(--yellow) 7%, var(--light));
}
.lb-rank {
  font-size: 1.3rem;
  font-weight: 900;
  text-align: center;
  color: var(--mid);
}
.lb-row-top .lb-rank { color: inherit; }
.lb-emoji {
  font-size: 2.1rem;
  line-height: 1;
}
.lb-points {
  font-size: 1.25rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lb-points::after {
  content: " 🏅";
  font-size: 0.9em;
}

/* ==========================================================================
   Rule Time!  (/rule)
   ========================================================================== */

.tile-rule {
  background: linear-gradient(135deg, var(--yellow) 0%, #f6b93b 100%);
  color: var(--on-acc);
}

/* --- Setup --------------------------------------------------------------- */

.rule-intro-note {
  margin: 0.5rem 0 1.2rem;
  padding: 0.7rem 1rem;
  background: var(--light);
  border-radius: 12px;
  font-size: 0.92rem;
  color: var(--mid);
  font-weight: 600;
}
.rule-intro-note strong { color: var(--yellow); }

/* --- Quiz layout --------------------------------------------------------- */

.rule-progress {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--mid);
}

/* One column: the table has to stay on screen while the panel is read, and a
   side-by-side split would push the panel off a phone. Same call the reading
   quiz makes with its passage. */
.rule-board {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.rule-table-card,
.rule-panel {
  background: var(--light);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
}

.rule-story {
  margin: 0 0 1rem;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.65;
  color: var(--dark);
}
.rule-story-small { font-size: 0.95rem; margin-bottom: 0.8rem; }
.rule-story-audio { margin: 0 0 1rem; }

/* --- The table ----------------------------------------------------------- */

.rule-table {
  display: grid;
  grid-template-columns: 1fr 1fr 44px;
  border-top: 2px solid var(--mid);
  /* Figures line up column-wise, which is how you read a jump off a table. */
  font-variant-numeric: tabular-nums;
}

.rule-th {
  padding: 0.5rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--mid);
}

.rule-cell {
  padding: 0.7rem 0.6rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark);
  border-bottom: 1px dashed var(--border);
  transition: background 0.15s;
}
.rule-cell-mark { background: rgba(255, 230, 109, 0.16); }

.rule-tick {
  grid-column: 3;
  padding: 0.7rem 0.2rem;
  text-align: center;
  font-size: 1.1rem;
  color: var(--green);
  border-bottom: 1px dashed var(--border);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s, transform 0.25s;
}
.rule-tick.on { opacity: 1; transform: scale(1); }

/* The jump between two rows. Collapsed to nothing until a step asks for it, so
   the table reads as a plain table first — spotting the jumps is the first move
   the child has to make, not something the page has already made for them. */
.rule-gap {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 44px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.rule-gap.on { max-height: 60px; }
.rule-chip {
  justify-self: start;
  margin: 0.2rem 0.5rem 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--on-acc);
  font-size: 0.8rem;
  font-weight: 800;
}
.rule-chip-pale { background: rgba(255, 230, 109, 0.28); color: var(--yellow); }

.rule-cell-last {
  border-bottom: 0;
  border-top: 3px solid var(--mid);
  background: rgba(255, 255, 255, 0.03);
}
.rule-tick-last { border-bottom: 0; border-top: 3px solid var(--mid); }
.rule-qmark { color: var(--mid); }
.rule-solved { color: var(--green); }

/* --- The panel ----------------------------------------------------------- */

.rule-panel-title {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rule-empty { color: var(--mid); font-weight: 600; margin-bottom: 1rem; }

.rule-label {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--mid);
}

.rule-guess {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.3rem 0 1rem;
  font-size: 1.15rem;
  font-weight: 800;
}
.rule-guess-text { color: var(--dark); }

.rule-input {
  width: 4.5rem;
  padding: 0.5rem;
  text-align: center;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark);
  background: var(--card);
  border: 3px solid var(--border);
  border-radius: 12px;
}
.rule-input-wide { width: 6rem; }
.rule-input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; }
.rule-input.good { border-color: var(--green); background: rgba(85, 239, 196, 0.12); }
.rule-input.bad { border-color: var(--coral); background: rgba(255, 107, 107, 0.12); }
.rule-input[readonly] { opacity: 0.9; }

.rule-feedback {
  margin: 0.8rem 0;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  font-weight: 700;
  line-height: 1.55;
}
.rule-feedback:empty { display: none; padding: 0; margin: 0; }
.rule-feedback.good { background: rgba(85, 239, 196, 0.14); color: var(--green); }
.rule-feedback.bad { background: rgba(255, 107, 107, 0.14); color: var(--coral); }

.rule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1rem;
}
.rule-actions .btn { padding: 0.8rem 1.4rem; font-size: 1rem; }
.rule-actions .btn:disabled { opacity: 0.4; cursor: default; }
.btn-inline { padding: 0.5rem 1.2rem; font-size: 1rem; }
.rule-guess .btn:disabled { opacity: 0.4; cursor: default; }

/* Five bands, and they should sit on one row rather than leaving the last
   one stranded underneath. */
.rule-page .band-btn { flex: 1 1 128px; gap: 0.15rem; }

/* Guidance for the adult choosing, not a label for the child — so it is a
   small muted line under the name rather than the name itself. */
.band-year {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.band-btn.active .band-year { color: var(--mint); }

/* An actual rule of the kind this level hides. The clearest description
   available, so it gets the accent treatment. */
.band-example {
  margin-top: 0.3rem;
  padding: 0.2rem 0.45rem;
  border-radius: 8px;
  background: var(--card);
  color: var(--yellow);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.rule-hint-note {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mid);
}

.rule-again-form { margin-top: 1.2rem; }
.rule-next-form { margin-top: 1.2rem; }

/* --- Worked steps -------------------------------------------------------- */

.rule-steps { margin-top: 0.5rem; }
.rule-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0.8rem;
  padding: 0.9rem 0;
  border-bottom: 1px dashed var(--border);
  animation: rule-rise 0.28s ease both;
}
.rule-step:last-child { border-bottom: 0; }
@keyframes rule-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.rule-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: var(--on-acc);
  font-size: 0.9rem;
  font-weight: 900;
}
.rule-step-body h3 {
  margin: 0.15rem 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--dark);
}
.rule-step-body p { margin: 0 0 0.4rem; line-height: 1.6; }
.rule-step-body p:last-child { margin-bottom: 0; }
.rule-step-body strong { color: var(--yellow); }

.rule-work {
  margin: 0.5rem 0;
  padding: 0.55rem 0.9rem;
  background: var(--card);
  border-left: 4px solid var(--yellow);
  border-radius: 0 8px 8px 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.7;
  white-space: pre-line;
  overflow-x: auto;
  font-variant-numeric: tabular-nums;
}

.rule-answer {
  margin: 0.6rem 0;
  padding: 0.7rem 1rem;
  background: var(--yellow);
  color: var(--on-acc);
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 900;
}
.rule-answer-final { margin: 1rem 0 0.6rem; }

/* --- Results ------------------------------------------------------------- */

.rule-review { border-left-color: var(--yellow); }
.rule-review-solved { opacity: 0.92; }
.rule-badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}
.rule-badge-good { background: rgba(85, 239, 196, 0.16); color: var(--green); }
.rule-badge-miss { background: rgba(255, 107, 107, 0.16); color: var(--coral); }
.rule-review-ask { margin: 0.5rem 0 0; font-weight: 700; line-height: 1.6; }
.rule-review-ask strong { color: var(--green); }

.rule-recap {
  margin-top: 1rem;
  background: var(--light);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 1.1rem;
}
.rule-recap summary { cursor: pointer; font-weight: 800; color: var(--yellow); }

@media (max-width: 600px) {
  .rule-table-card, .rule-panel { padding: 1rem; }
  .rule-table { grid-template-columns: 1fr 1fr 34px; }
  .rule-gap { grid-template-columns: 1fr 1fr 34px; }
  .rule-cell { font-size: 1.05rem; padding: 0.6rem 0.4rem; }
  .rule-th { font-size: 0.72rem; padding: 0.45rem 0.4rem; }
  .rule-guess { font-size: 1rem; }
  .rule-input { width: 3.8rem; }
  .rule-actions .btn { flex: 1 1 100%; text-align: center; }
}