/* ==========================================================================
   FAMILY TRAINING OPERATION — main stylesheet
   Hybrid: lived-in field-manual chrome × modern tactical interactives.
   Tablet-first (1024+); also works on desktop. Phone gets a stacked fallback.
   ========================================================================== */

/* --- CSS RESET / TOKENS ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, button, select { font-family: inherit; }
img { max-width: 100%; display: block; }

:root {
  /* Field-manual chrome palette */
  --paper-0:        #ece4d2;       /* kraft top */
  --paper-1:        #e2d8c0;       /* kraft mid */
  --paper-2:        #c9bd9c;       /* kraft deep / borders */
  --paper-ink:      #1b1610;       /* near-black ink */
  --paper-ink-soft: #4a3f2e;
  --paper-stamp:    #b8362a;       /* red stamp */
  --paper-stamp-soft: rgba(184, 54, 42, 0.85);

  /* Modern tactical (interactive cards) */
  --slate-0:        #14181f;       /* deepest card */
  --slate-1:        #1c222b;       /* card */
  --slate-2:        #262d39;       /* raised */
  --slate-3:        #343d4b;       /* hover */
  --slate-border:   #3a4452;
  --slate-text:     #e6e8eb;
  --slate-dim:      #9aa3b0;
  --slate-mute:     #6a737f;

  /* Default kid theme (overridden by .theme-* class) */
  --kid-color:      #5DAA34;
  --kid-color-dark: #3F7A1E;
  --kid-glow:       rgba(130, 200, 70, 0.42);
  --kid-accent:     #C8915A;
  --kid-accent-2:   #4FB8E8;
  --kid-on-primary: #0F1A0A;
  --kid-tint:       rgba(93,170,52,0.10);

  /* Fonts */
  --f-display: "Black Ops One", "Saira Stencil One", Impact, sans-serif;
  --f-sub:     "Barlow Condensed", "Oswald", sans-serif;
  --f-body:    "Barlow", system-ui, -apple-system, sans-serif;
  --f-stamp:   "Special Elite", "Courier Prime", "Courier New", monospace;
  --f-mono:    "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* Geometry */
  --gut: 18px;
  --radius-sm: 4px;
  --radius-md: 8px;
}

/* --- BODY / PAPER BACKDROP ------------------------------------------- */
html, body {
  background: var(--paper-1);
  color: var(--paper-ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.45;
  min-height: 100vh;
}

body {
  /* Kraft paper grain — layered radial + linear noise */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.50) 0%, transparent 38%),
    radial-gradient(circle at 82% 88%, rgba(0,0,0,0.10) 0%, transparent 45%),
    repeating-linear-gradient(125deg, rgba(120,90,40,0.06) 0px, rgba(120,90,40,0.06) 1px, transparent 1px, transparent 5px),
    radial-gradient(ellipse at center, var(--paper-0) 0%, var(--paper-1) 55%, var(--paper-2) 100%);
  background-attachment: fixed;
}

.app {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 28px 80px;
}

/* --- TYPOGRAPHY ------------------------------------------------------ */
.display { font-family: var(--f-display); letter-spacing: 0.02em; line-height: 0.95; }
.sub     { font-family: var(--f-sub); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.stamp   { font-family: var(--f-stamp); letter-spacing: 0.05em; }
.mono    { font-family: var(--f-mono); }
.eyebrow { font-family: var(--f-sub); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 12px; color: var(--paper-ink-soft); }

/* --- HEADER QUOTE BAR ----------------------------------------------- */
.qbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 4px 16px;
  border-bottom: 2px solid var(--paper-ink);
  position: relative;
}
.qbar::after {
  /* second sharp line — military ledger feel */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--paper-ink);
  opacity: 0.35;
}
.qbar-date {
  font-family: var(--f-stamp);
  font-size: 14px;
  white-space: nowrap;
  padding: 6px 14px;
  border: 2px solid var(--paper-ink);
  background: var(--paper-0);
  transform: rotate(-1.2deg);
  flex-shrink: 0;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.18);
}
.qbar-quote {
  font-family: var(--f-stamp);
  font-size: 16px;
  flex: 1;
  position: relative;
  padding-left: 6px;
}
.qbar-quote-text {
  font-style: italic;
}
.qbar-quote-text::before { content: "“"; opacity: 0.6; padding-right: 2px; }
.qbar-quote-text::after  { content: "”"; opacity: 0.6; padding-left:  2px; }
.qbar-quote-author {
  font-family: var(--f-sub);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--paper-ink-soft);
  display: block;
  margin-top: 4px;
}
/* Typewriter typing-in effect */
.qbar-quote .typed { display: inline-block; overflow: hidden; white-space: nowrap; }
.qbar-quote .typed.animate { animation: typewriter 1.4s steps(60, end) both; }
@keyframes typewriter { from { width: 0; } to { width: 100%; } }

.qbar-stamp {
  font-family: var(--f-stamp);
  font-size: 11px;
  color: var(--paper-stamp);
  border: 1.5px solid var(--paper-stamp);
  padding: 4px 10px;
  letter-spacing: 0.18em;
  transform: rotate(2deg);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- COVER HEADER (kid + sport title) -------------------------------- */
.cover {
  margin-top: 32px;
  position: relative;
  padding: 36px 0 32px;
  border-top: 6px solid var(--paper-ink);
  border-bottom: 6px solid var(--paper-ink);
  background:
    linear-gradient(180deg, var(--kid-tint), transparent 60%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0 6px, transparent 6px 12px);
  overflow: hidden;
  transition: background 600ms ease;
}
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kid-pattern, none);
  opacity: 0.08;
  pointer-events: none;
  background-size: var(--kid-pattern-size, 60px);
  transition: opacity 600ms ease;
}
.cover-title {
  font-family: var(--f-display);
  font-size: clamp(40px, 6vw, 78px);
  line-height: 0.94;
  margin: 0;
  letter-spacing: 0.005em;
}
.cover-title .kid-name,
.cover-title .title-line2 {
  display: block;
  line-height: 0.95;
}
.cover-title .kid-name {
  /* Color & filter are set in the per-theme overrides further below */
  position: relative;
}
.cover-title .title-line2 {
  margin-top: 4px;
  font-size: 0.74em;       /* smaller second line so longer sport names fit on one line */
  letter-spacing: 0.012em;
}
.cover-subtitle {
  font-family: var(--f-stamp);
  margin-top: 14px;
  font-size: 15px;
  color: var(--paper-ink-soft);
  letter-spacing: 0.07em;
}
.cover-subtitle .sigil {
  font-size: 22px;
  margin-right: 8px;
  color: var(--kid-color);
  text-shadow: 0 0 8px var(--kid-glow);
}
.cover-stamp {
  position: absolute;
  top: 18px;
  right: 4px;
  font-family: var(--f-stamp);
  color: var(--paper-stamp);
  border: 2px solid var(--paper-stamp);
  padding: 8px 14px;
  font-size: 13px;
  letter-spacing: 0.18em;
  transform: rotate(4deg);
  box-shadow: 3px 3px 0 rgba(184,54,42,0.18);
}
.cover-corner {
  position: absolute;
  bottom: 8px;
  right: 4px;
  font-family: var(--f-stamp);
  color: var(--paper-ink-soft);
  font-size: 11px;
  letter-spacing: 0.15em;
}

/* Theme entry "sweep" — the gradient redraws when kid changes */
.cover.sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, var(--kid-color) 50%, transparent 75%);
  mix-blend-mode: overlay;
  opacity: 0;
  animation: sweep 700ms ease;
  pointer-events: none;
}
@keyframes sweep {
  0%   { opacity: 0; transform: translateX(-30%); }
  40%  { opacity: 0.55; }
  100% { opacity: 0; transform: translateX(30%); }
}

/* --- KID TABS -------------------------------------------------------- */
.kidtabs {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.kidtab {
  position: relative;
  padding: 18px 18px 16px;
  background: var(--paper-0);
  border: 2px solid var(--paper-ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 280ms ease;
  overflow: hidden;
  --tab-color: var(--slate-mute);
}
.kidtab:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,0.16); }
.kidtab::before {
  /* left color stripe per kid */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: var(--tab-color);
}
.kidtab[data-kid="kai"]     { --tab-color: #5DAA34; }
.kidtab[data-kid="xander"]  { --tab-color: #1B68E0; }
.kidtab[data-kid="ari"]     { --tab-color: #1F8FA8; }
.kidtab[data-kid="paisley"] { --tab-color: #B85C8C; }

.kidtab.active {
  background: var(--tab-color);
  color: var(--kid-on-primary, #fff);
  box-shadow: 0 8px 0 rgba(0,0,0,0.22);
  transform: translateY(-2px);
}
.kidtab.active::before { background: rgba(0,0,0,0.35); }
.kidtab.active .kt-name { color: inherit; }
.kidtab .kt-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.kidtab .kt-sigil {
  font-size: 22px;
  font-family: var(--f-display);
}
.kidtab .kt-name {
  font-family: var(--f-display);
  font-size: 22px;
  letter-spacing: 0.02em;
}
.kidtab .kt-code {
  font-family: var(--f-stamp);
  font-size: 11px;
  letter-spacing: 0.18em;
  margin-top: 4px;
  opacity: 0.85;
}
.kidtab .kt-age {
  font-family: var(--f-mono);
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid currentColor;
  margin-left: auto;
  opacity: 0.7;
}
.kidtab.active .kt-age { opacity: 0.95; background: rgba(0,0,0,0.18); border-color: rgba(0,0,0,0.4); }

/* Paisley active = sparkly twist */
.kidtab[data-kid="paisley"].active {
  background: linear-gradient(135deg, #c66c9a, #B85C8C 50%, #8a3f6e);
}
.kidtab[data-kid="paisley"].active::after {
  content: "✦";
  position: absolute;
  top: 8px; right: 10px;
  font-size: 16px;
  color: var(--kid-accent, #D4A35A);
  text-shadow: 0 0 8px rgba(212,163,90,0.9);
  animation: twinkle 2.4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.55; transform: scale(1) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.2) rotate(20deg); }
}

/* --- SPORT PILL ROW ------------------------------------------------- */
.sport-row {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.sport-row .label {
  font-family: var(--f-stamp);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--paper-ink);
}
.sport-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.sport-pill {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  padding: 9px 14px;
  background: var(--paper-0);
  border: 2px solid var(--paper-ink);
  text-transform: uppercase;
  transition: transform 150ms ease, background 200ms ease, color 200ms ease;
}
.sport-pill:hover {
  transform: translateY(-2px);
  background: var(--kid-tint);
}
.sport-pill.active {
  background: var(--kid-color);
  color: var(--kid-on-primary);
  border-color: var(--paper-ink);
  box-shadow: 2px 2px 0 var(--paper-ink);
}
.sport-pill .ico {
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}

/* --- DASHBOARD (stat grid) ------------------------------------------ */
.dashboard {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.stat {
  background: var(--slate-1);
  color: var(--slate-text);
  border: 2px solid var(--paper-ink);
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--paper-ink);
}
.stat::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--kid-color);
}
.stat-label {
  font-family: var(--f-sub);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--slate-dim);
  text-transform: uppercase;
}
.stat-value {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  margin-top: 6px;
  color: var(--kid-color);
  text-shadow: 0 0 12px var(--kid-glow);
  letter-spacing: 0.01em;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-height: 38px;
}
.stat-value .unit {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--slate-dim);
  text-shadow: none;
}
.stat-value .star {
  color: var(--kid-accent, gold);
  text-shadow: 0 0 10px rgba(255,200,60,0.5);
}
.stat-fine {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--slate-mute);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.stat .flame { font-size: 22px; vertical-align: -2px; margin-right: 4px; }

/* --- SECTION TITLES (consistent throughout) ------------------------ */
.section {
  margin-top: 44px;
}
.section-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding-left: 18px;
  position: relative;
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 8px;
  background: var(--kid-color);
  box-shadow: 0 0 12px var(--kid-glow);
}
.section-title h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 40px);
  margin: 0;
  letter-spacing: 0.01em;
}
.section-title .tag {
  font-family: var(--f-stamp);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--paper-ink-soft);
  border: 1.5px dashed var(--paper-ink-soft);
  padding: 4px 10px;
  transform: rotate(-1.2deg);
}

/* --- WARRIOR'S CODE -------------------------------------------------- */
.code-block {
  background: var(--paper-0);
  border: 3px solid var(--paper-ink);
  padding: 26px 28px 28px;
  position: relative;
  margin-top: 8px;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.16);
}
.code-tape {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  background: var(--paper-stamp);
  color: #fff;
  font-family: var(--f-stamp);
  font-size: 13px;
  letter-spacing: 0.22em;
  padding: 6px 22px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
}
.code-lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 36px;
}
.code-line {
  display: flex;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px dashed rgba(0,0,0,0.18);
}
.code-line .num {
  font-family: var(--f-display);
  font-size: 24px;
  color: var(--kid-color);
  min-width: 38px;
  text-shadow: 0 0 6px var(--kid-glow);
}
.code-line .body { flex: 1; }
.code-line .head {
  font-family: var(--f-display);
  font-size: 19px;
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}
.code-line .expl {
  font-family: var(--f-stamp);
  font-size: 14px;
  color: var(--paper-ink-soft);
}

/* --- COLLAPSIBLE (details) ------------------------------------------ */
details.collapsible {
  border: 2px solid var(--paper-ink);
  background: var(--paper-0);
  margin-top: 8px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.14);
}
details.collapsible > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  user-select: none;
}
details.collapsible > summary::-webkit-details-marker { display: none; }
details.collapsible > summary .chev {
  font-family: var(--f-display);
  color: var(--kid-color);
  font-size: 22px;
  transition: transform 200ms ease;
}
details.collapsible[open] > summary .chev { transform: rotate(90deg); }
details.collapsible > summary h3 {
  font-family: var(--f-display);
  font-size: 22px;
  margin: 0;
  letter-spacing: 0.01em;
  flex: 1;
}
details.collapsible > summary .tag {
  font-family: var(--f-stamp);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--paper-ink-soft);
  border: 1.5px dashed var(--paper-ink-soft);
  padding: 3px 8px;
}
details.collapsible > .inner {
  padding: 0 20px 22px;
  border-top: 1px dashed rgba(0,0,0,0.2);
  padding-top: 18px;
}

/* --- WEEK TABS ------------------------------------------------------- */
.weektabs {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.weektab {
  background: var(--paper-0);
  border: 2px solid var(--paper-ink);
  padding: 12px 8px 10px;
  text-align: center;
  position: relative;
  transition: transform 150ms ease, background 200ms ease;
  font-family: var(--f-sub);
}
.weektab:hover { transform: translateY(-2px); background: var(--kid-tint); }
.weektab .wn {
  font-family: var(--f-display);
  font-size: 18px;
  letter-spacing: 0.04em;
}
.weektab .belt-mini {
  height: 8px;
  margin: 6px auto 2px;
  width: 80%;
  border-radius: 1px;
  border: 1px solid var(--paper-ink);
}
.weektab.completed::after {
  content: "✓";
  position: absolute;
  top: -8px; right: -8px;
  background: var(--kid-accent, gold);
  color: var(--paper-ink);
  font-family: var(--f-display);
  font-size: 13px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--paper-ink);
  display: grid;
  place-items: center;
}
.weektab.active {
  background: var(--kid-color);
  color: var(--kid-on-primary);
  box-shadow: 0 4px 0 var(--paper-ink);
  transform: translateY(-3px);
}
.weektab.locked {
  opacity: 0.40;
  background: var(--paper-2);
  cursor: not-allowed;
  position: relative;
}
.weektab.locked:hover { transform: none; background: var(--paper-2); }
.weektab .lock-ico {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  opacity: 0.85;
}

/* --- PHASE BANNER --------------------------------------------------- */
.phase-banner {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 0;
  margin: 12px 0;
  background: var(--slate-0);
  color: var(--slate-text);
  border: 2px solid var(--paper-ink);
  box-shadow: 4px 4px 0 var(--paper-ink);
}
.phase-cell {
  padding: 14px 18px;
  border-right: 1px solid var(--slate-border);
  position: relative;
}
.phase-cell:last-child { border-right: none; }
.phase-cell .lbl {
  font-family: var(--f-sub);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--slate-mute);
}
.phase-cell .val {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--kid-color);
  text-shadow: 0 0 10px var(--kid-glow);
  margin-top: 4px;
  letter-spacing: 0.01em;
}
.phase-cell.theme .val { color: var(--slate-text); text-shadow: none; }

/* --- DAY TABS -------------------------------------------------------- */
.daytabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 12px 0 24px;
}
.daytab {
  position: relative;
  background: var(--paper-0);
  border: 2px solid var(--paper-ink);
  padding: 12px 8px;
  text-align: center;
  transition: transform 150ms ease, background 200ms ease;
}
.daytab:hover { transform: translateY(-2px); background: var(--kid-tint); }
.daytab .dn {
  font-family: var(--f-display);
  font-size: 22px;
}
.daytab .ds {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--paper-ink-soft);
}
.daytab.active {
  background: var(--kid-color);
  color: var(--kid-on-primary);
  box-shadow: 0 4px 0 var(--paper-ink);
  transform: translateY(-3px);
}
.daytab.completed::after {
  content: "★";
  position: absolute;
  top: -10px; right: -10px;
  color: var(--kid-accent, gold);
  font-size: 22px;
  text-shadow: 0 0 8px rgba(255,200,60,0.6);
  animation: pop 240ms ease;
}
@keyframes pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* --- MISSION CARD --------------------------------------------------- */
.mission {
  background: var(--slate-1);
  color: var(--slate-text);
  border: 3px solid var(--paper-ink);
  box-shadow: 8px 8px 0 var(--paper-ink);
  position: relative;
  overflow: hidden;
}
.mission::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--kid-color), var(--kid-accent));
}
.mission-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--slate-border);
  gap: 16px;
  flex-wrap: wrap;
}
.mission-title {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: 0.02em;
  margin: 0;
}
.mission-sub {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--slate-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}
.mission-counter {
  font-family: var(--f-mono);
  font-size: 24px;
  padding: 8px 14px;
  background: var(--slate-0);
  border: 1px solid var(--slate-border);
  color: var(--kid-color);
  text-shadow: 0 0 10px var(--kid-glow);
}
.mission-counter .small { font-size: 14px; color: var(--slate-dim); text-shadow: none; }

.mission-body {
  padding: 18px 26px 22px;
}
.phase-group {
  margin-top: 18px;
}
.phase-group:first-child { margin-top: 6px; }
.phase-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-sub);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--slate-dim);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--slate-border);
}
.phase-group-head .pg-ico {
  width: 14px; height: 14px;
  background: var(--kid-color);
  display: inline-block;
  flex-shrink: 0;
}

/* --- DRILL ROW ------------------------------------------------------- */
.drill {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 6px;
  border-bottom: 1px solid var(--slate-border);
  transition: background 150ms ease;
}
.drill:last-child { border-bottom: none; }
.drill:hover { background: var(--slate-2); }

.drill-check {
  width: 28px; height: 28px;
  border: 2px solid var(--slate-dim);
  background: transparent;
  display: grid;
  place-items: center;
  position: relative;
  transition: all 220ms ease;
  flex-shrink: 0;
  margin-top: 2px;
  overflow: visible;
}
.drill-check:hover { border-color: var(--kid-color); }
.drill-check.checked {
  background: var(--kid-color);
  border-color: var(--kid-color);
  box-shadow: 0 0 0 4px var(--kid-glow);
}
.drill-check.checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 0;
  width: 9px; height: 16px;
  border: solid var(--kid-on-primary);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  animation: stamp 320ms cubic-bezier(.34,1.7,.42,.96);
}
@keyframes stamp {
  0%   { opacity: 0; transform: rotate(45deg) scale(0); }
  60%  { opacity: 1; transform: rotate(45deg) scale(1.25); }
  100% { opacity: 1; transform: rotate(45deg) scale(1); }
}

.drill-body {
  cursor: pointer;
  min-width: 0;
}
.drill-name {
  font-family: var(--f-sub);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-text);
  margin: 0;
}
.drill.done .drill-name {
  color: var(--slate-dim);
  text-decoration: line-through;
  text-decoration-color: var(--kid-color);
  text-decoration-thickness: 2px;
}
.drill-cat {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--kid-accent-2, var(--kid-accent));
  margin-top: 3px;
  text-transform: uppercase;
}
.drill-reps {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--slate-text);
  white-space: nowrap;
  margin-top: 1px;
}
.drill-video {
  background: transparent;
  border: 1px solid var(--slate-border);
  color: var(--slate-dim);
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  transition: all 180ms ease;
  font-size: 12px;
}
.drill-video:hover {
  border-color: var(--kid-color);
  color: var(--kid-color);
  background: var(--slate-2);
}

.drill-detail {
  grid-column: 1 / -1;
  width: 100% !important;
  box-sizing: border-box;
  padding: 14px 18px 16px;
  background: var(--slate-0);
  border-left: 4px solid var(--kid-color);
  margin: 10px 0 4px;
  display: none;
}
.drill.open .drill-detail { display: block; width: 100% !important; animation: expand 260ms ease; }
@keyframes expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.drill-detail .dd-label {
  font-family: var(--f-sub);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--kid-color);
  margin-top: 6px;
  text-transform: uppercase;
}
.drill-detail .dd-label:first-child { margin-top: 0; }
.drill-detail p {
  margin: 4px 0 8px;
  color: var(--slate-text);
  font-size: 14px;
  line-height: 1.5;
}

/* --- REFLECTION ------------------------------------------------------ */
.reflection {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--slate-0);
  border: 1px solid var(--slate-border);
}
.reflection label {
  font-family: var(--f-sub);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--slate-text);
}
.reflection .prompt {
  font-family: var(--f-stamp);
  font-size: 13px;
  color: var(--slate-dim);
  margin: 6px 0 10px;
}
.reflection textarea {
  width: 100%;
  min-height: 78px;
  background: var(--slate-1);
  border: 1px solid var(--slate-border);
  color: var(--slate-text);
  padding: 12px 14px;
  resize: vertical;
  font-family: var(--f-stamp);
  font-size: 14px;
  line-height: 1.5;
}
.reflection textarea:focus {
  outline: 2px solid var(--kid-color);
  outline-offset: -2px;
}

/* --- COMPLETE BUTTON ------------------------------------------------- */
.complete-btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 22px 18px;
  font-family: var(--f-display);
  font-size: 24px;
  letter-spacing: 0.04em;
  text-align: center;
  background: var(--slate-2);
  color: var(--slate-dim);
  border: 2px solid var(--slate-border);
  cursor: not-allowed;
  transition: all 220ms ease;
}
.complete-btn.ready {
  background: var(--kid-color);
  color: var(--kid-on-primary);
  border-color: var(--paper-ink);
  cursor: pointer;
  box-shadow: 0 6px 0 var(--paper-ink), 0 0 30px var(--kid-glow);
  animation: readypulse 1.6s ease-in-out infinite;
}
.complete-btn.done {
  background: var(--slate-1);
  color: var(--kid-color);
  cursor: pointer;
  border: 2px dashed var(--kid-color);
  animation: none;
}
.complete-btn.ready:hover { transform: translateY(-2px); }
.complete-btn.ready:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--paper-ink), 0 0 24px var(--kid-glow); }
@keyframes readypulse {
  0%, 100% { box-shadow: 0 6px 0 var(--paper-ink), 0 0 24px var(--kid-glow); }
  50%      { box-shadow: 0 6px 0 var(--paper-ink), 0 0 56px var(--kid-glow); }
}

/* --- BELT GRID ------------------------------------------------------- */
.belts-intro {
  background: var(--paper-0);
  border: 2px solid var(--paper-ink);
  padding: 18px 22px;
  font-family: var(--f-stamp);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 18px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.14);
}
.belts-grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) { .belts-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 760px)  { .belts-grid { grid-template-columns: repeat(4, 1fr); } }
.belt-card {
  background: var(--paper-0);
  border: 2px solid var(--paper-ink);
  padding: 12px 8px 14px;
  text-align: center;
  position: relative;
  transition: transform 250ms ease;
}
.belt-card:hover { transform: translateY(-4px); }
.belt-card .belt-svg {
  width: 100%;
  height: 56px;
  margin-bottom: 6px;
}
.belt-card .belt-name {
  font-family: var(--f-display);
  font-size: 13px;
  line-height: 1.05;
  letter-spacing: 0.04em;
}
.belt-card .belt-wk {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--paper-ink-soft);
  margin-top: 4px;
  letter-spacing: 0.16em;
}
.belt-card.earned {
  box-shadow: 0 0 0 3px var(--kid-accent, gold), 4px 4px 0 rgba(0,0,0,0.18);
}
.belt-card.earned::before {
  content: "★";
  position: absolute;
  top: -10px; left: -10px;
  font-size: 22px;
  color: var(--kid-accent, gold);
  text-shadow: 0 0 6px rgba(255,200,60,0.7);
}
.belt-card.current {
  outline: 3px dashed var(--kid-color);
  outline-offset: 2px;
}
.belt-card.is-white {
  background: linear-gradient(180deg, var(--paper-0), var(--paper-1));
  position: relative;
}
.belt-card.is-white .belt-wk {
  color: var(--paper-stamp);
  font-weight: 700;
  letter-spacing: 0.2em;
}
.belt-card.is-black .belt-name {
  letter-spacing: 0.06em;
}
.belt-card.is-black.earned::after {
  content: "PATH COMPLETE";
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: #0a0a0a;
  color: #F5C518;
  font-family: var(--f-stamp);
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 3px 8px;
  white-space: nowrap;
}

/* --- DRILL LIBRARY (collapsible content) --------------------------- */
.library-group {
  margin-top: 18px;
}
.library-group:first-child { margin-top: 0; }
.library-cat {
  font-family: var(--f-display);
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--kid-color);
  border-bottom: 2px solid var(--paper-ink);
  padding-bottom: 4px;
  margin-bottom: 10px;
}
.library-entry {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  padding: 10px 4px;
  border-bottom: 1px dashed rgba(0,0,0,0.2);
  align-items: start;
}
.library-entry .le-name {
  font-family: var(--f-sub);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.library-entry .le-how {
  font-family: var(--f-stamp);
  font-size: 13px;
  color: var(--paper-ink-soft);
  margin-top: 4px;
  line-height: 1.5;
}
.library-entry .le-reps {
  font-family: var(--f-mono);
  font-size: 12px;
  white-space: nowrap;
}
.library-entry .le-video {
  background: transparent;
  border: 1px solid var(--paper-ink);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  text-decoration: none;
  color: var(--paper-ink);
  font-size: 11px;
}
.library-entry .le-video:hover {
  background: var(--kid-color);
  color: var(--kid-on-primary);
}

/* --- RESOURCE CARDS ------------------------------------------------- */
.resource-section { margin-top: 18px; }
.resource-section h4 {
  font-family: var(--f-sub);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--paper-ink-soft);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.resource-card {
  display: grid;
  grid-template-columns: 28px 1fr 16px;
  gap: 10px;
  padding: 12px 14px;
  background: var(--paper-1);
  border: 2px solid var(--paper-ink);
  text-decoration: none;
  color: var(--paper-ink);
  transition: transform 160ms ease, background 200ms ease;
  align-items: center;
}
.resource-card:hover { transform: translateY(-2px); background: var(--kid-tint); }
.resource-card .rc-ico {
  width: 24px; height: 24px;
  background: var(--kid-color);
  color: var(--kid-on-primary);
  font-family: var(--f-display);
  font-size: 14px;
  display: grid;
  place-items: center;
}
.resource-card .rc-name {
  font-family: var(--f-sub);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.resource-card .rc-desc {
  font-family: var(--f-stamp);
  font-size: 11px;
  color: var(--paper-ink-soft);
  margin-top: 2px;
  line-height: 1.4;
}
.resource-card .rc-arrow {
  font-family: var(--f-display);
  font-size: 16px;
  opacity: 0.6;
}

/* --- COACH CUES ----------------------------------------------------- */
.cues-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.cue-card {
  background: var(--slate-1);
  color: var(--slate-text);
  border: 2px solid var(--paper-ink);
  padding: 18px 20px;
  position: relative;
  box-shadow: 4px 4px 0 var(--paper-ink);
}
.cue-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--kid-color);
}
.cue-card .ct {
  font-family: var(--f-display);
  font-size: 24px;
  color: var(--kid-color);
  letter-spacing: 0.02em;
  margin: 0 0 4px;
  text-shadow: 0 0 8px var(--kid-glow);
}
.cue-card .cd {
  font-family: var(--f-stamp);
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate-dim);
}

/* --- RESET ---------------------------------------------------------- */
.reset-warn {
  font-family: var(--f-stamp);
  font-size: 14px;
  color: var(--paper-stamp);
  margin-bottom: 14px;
  line-height: 1.5;
}
.reset-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.reset-btn {
  font-family: var(--f-sub);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  padding: 12px 18px;
  background: var(--paper-0);
  border: 2px solid var(--paper-ink);
  text-transform: uppercase;
}
.reset-btn:hover { background: var(--kid-tint); }
.reset-btn.nuke {
  background: var(--paper-stamp);
  color: #fff;
  border-color: var(--paper-ink);
}
.reset-btn.nuke:hover { background: #d04738; }

/* --- FOOTER --------------------------------------------------------- */
.foot {
  margin-top: 80px;
  text-align: center;
  padding: 40px 20px 20px;
  border-top: 3px double var(--paper-ink);
}
.foot-quote {
  font-family: var(--f-stamp);
  font-size: 20px;
  font-style: italic;
  color: var(--paper-ink);
  letter-spacing: 0.05em;
}
.foot-quote::before { content: "“"; }
.foot-quote::after  { content: "”"; }
.foot-sub {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--paper-ink-soft);
  margin-top: 14px;
  text-transform: uppercase;
}

/* --- TOAST ---------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--slate-0);
  color: var(--slate-text);
  font-family: var(--f-display);
  font-size: 20px;
  letter-spacing: 0.04em;
  padding: 16px 26px;
  border: 2px solid var(--paper-ink);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 4px var(--kid-glow);
  z-index: 100;
  opacity: 0;
  transition: opacity 220ms ease, transform 280ms ease;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.star {
  background: linear-gradient(135deg, var(--kid-color), var(--kid-accent));
  color: var(--kid-on-primary);
  text-shadow: 0 0 12px rgba(0,0,0,0.3);
}
.toast.warn {
  background: var(--paper-stamp);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 4px rgba(184,54,42,0.4);
}

/* --- TWEAKS PANEL (custom UI for in-page tweaks) -------------------- */
.tweaks-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 56px;
  height: 56px;
  background: var(--slate-0);
  color: var(--kid-color);
  border: 2px solid var(--paper-ink);
  border-radius: 50%;
  font-family: var(--f-display);
  font-size: 22px;
  box-shadow: 0 6px 0 var(--paper-ink);
  display: none;
}
.tweaks-fab.shown { display: grid; place-items: center; }
.tweaks-panel {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 70;
  width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--slate-0);
  color: var(--slate-text);
  border: 2px solid var(--paper-ink);
  box-shadow: 6px 6px 0 var(--paper-ink);
  padding: 18px 20px;
  display: none;
}
.tweaks-panel.open { display: block; }
.tweaks-panel h4 {
  font-family: var(--f-display);
  font-size: 18px;
  margin: 0 0 12px;
  letter-spacing: 0.02em;
}
.tweak-row {
  margin: 12px 0;
}
.tweak-row label {
  font-family: var(--f-sub);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--slate-dim);
  display: block;
  margin-bottom: 6px;
}
.tweak-row input[type="range"] { width: 100%; accent-color: var(--kid-color); }
.tweak-row .tweak-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tweak-btn {
  background: var(--slate-1);
  border: 1px solid var(--slate-border);
  color: var(--slate-text);
  padding: 6px 10px;
  font-size: 11px;
  font-family: var(--f-sub);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tweak-btn.active {
  background: var(--kid-color);
  color: var(--kid-on-primary);
  border-color: var(--kid-color);
}

/* --- CELEBRATION OVERLAY (session complete / belt earned) ----------- */
.celebrate-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  background: radial-gradient(circle at center, var(--kid-tint) 0%, transparent 80%);
  transition: opacity 200ms ease;
}
.celebrate-overlay.show { opacity: 1; pointer-events: auto; }
.celebrate-card {
  background: var(--slate-0);
  color: var(--slate-text);
  border: 3px solid var(--paper-ink);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 6px var(--kid-glow);
  padding: 44px 64px;
  text-align: center;
  transform: scale(0.6) rotate(-2deg);
  transition: transform 320ms cubic-bezier(.34,1.6,.42,.96);
}
.celebrate-overlay.show .celebrate-card {
  transform: scale(1) rotate(0deg);
}
.celebrate-card .ct-eyebrow {
  font-family: var(--f-stamp);
  font-size: 13px;
  letter-spacing: 0.32em;
  color: var(--kid-color);
  text-transform: uppercase;
}
.celebrate-card .ct-title {
  font-family: var(--f-display);
  font-size: 54px;
  margin: 8px 0 4px;
  letter-spacing: 0.02em;
  color: var(--kid-color);
  text-shadow: 0 0 24px var(--kid-glow);
  line-height: 0.95;
}
.celebrate-card .ct-stars {
  font-family: var(--f-display);
  font-size: 28px;
  color: var(--kid-accent);
  margin-top: 8px;
  letter-spacing: 0.06em;
}
.celebrate-card .ct-sub {
  font-family: var(--f-stamp);
  color: var(--slate-dim);
  font-size: 13px;
  letter-spacing: 0.18em;
  margin-top: 14px;
  text-transform: uppercase;
}

/* Star confetti */
.confetti-piece {
  position: absolute;
  width: 12px; height: 12px;
  color: var(--kid-accent);
  font-size: 18px;
  font-family: var(--f-display);
  pointer-events: none;
  user-select: none;
  animation: confetti-fall 1.6s ease-in forwards;
  text-shadow: 0 0 8px var(--kid-glow);
}
@keyframes confetti-fall {
  0%   { opacity: 0; transform: translate(0,0) rotate(0deg) scale(0.6); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(720deg) scale(1.1); }
}

/* +15 floater on success button */
.score-pop {
  position: absolute;
  font-family: var(--f-display);
  color: var(--kid-accent);
  font-size: 28px;
  text-shadow: 0 0 12px rgba(255,200,60,0.6);
  pointer-events: none;
  animation: score-rise 1.2s ease-out forwards;
}
@keyframes score-rise {
  0%   { opacity: 0; transform: translateY(0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-80px); }
}
/* --- BIRTHDAY FLARE ------------------------------------------------- */
.bday-stamp {
  position: absolute;
  top: 56px;
  right: 16px;
  background: linear-gradient(135deg, #ff4ec8, #fab436);
  color: #fff;
  font-family: var(--f-stamp);
  font-size: 11px;
  padding: 5px 12px;
  letter-spacing: 0.18em;
  border: 2px solid var(--paper-ink);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.22);
  transform: rotate(3deg);
  z-index: 6;
  animation: bday-bob 2.4s ease-in-out infinite;
  white-space: nowrap;
}
.bday-stamp.today {
  font-size: 13px;
  background: linear-gradient(135deg, #ff4ec8, #ffd23f, #4fb8e8, #b85c8c);
  background-size: 300% 300%;
  animation: bday-bob 2.4s ease-in-out infinite, bday-rainbow 4s linear infinite;
}
@keyframes bday-bob { 0%,100%{transform:rotate(3deg) translateY(0)} 50%{transform:rotate(3deg) translateY(-3px)} }
@keyframes bday-rainbow { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.kidtab.bday { animation: bday-glow 2.4s ease-in-out infinite; position: relative; }
.kidtab .kt-cake {
  position: absolute;
  top: -10px; right: -10px;
  font-size: 20px;
  z-index: 3;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  animation: cake-spin 4s ease-in-out infinite;
}
@keyframes bday-glow {
  0%,100% { box-shadow: 0 6px 0 rgba(0,0,0,0.16), 0 0 0 0 rgba(255,200,60,0.0); }
  50%     { box-shadow: 0 6px 0 rgba(0,0,0,0.16), 0 0 0 8px rgba(255,200,60,0.45); }
}
@keyframes cake-spin {
  0%,100% { transform: rotate(-10deg) scale(1); }
  50%     { transform: rotate(10deg) scale(1.1); }
}

/* --- DAILY BRIEFING MODAL ------------------------------------------- */
.briefing-overlay {
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(6px);
}
.briefing-card {
  background: var(--slate-0);
  color: var(--slate-text);
  border: 3px solid var(--paper-ink);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 8px var(--kid-glow);
  padding: 32px 44px 28px;
  width: min(560px, 88vw);
  position: relative;
  text-align: left;
  transform: scale(0.6) rotate(-1.5deg);
  transition: transform 360ms cubic-bezier(.34,1.6,.42,.96);
}
.briefing-overlay.show .briefing-card { transform: scale(1) rotate(0deg); }
.briefing-stamp {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  background: var(--paper-stamp);
  color: #fff;
  font-family: var(--f-stamp);
  font-size: 12px;
  letter-spacing: 0.22em;
  padding: 5px 18px;
  white-space: nowrap;
}
.briefing-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.briefing-sigil {
  font-size: 56px;
  color: var(--kid-color);
  font-family: var(--f-display);
  text-shadow: 0 0 18px var(--kid-glow);
  line-height: 1;
}
.briefing-eyebrow {
  font-family: var(--f-sub);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--slate-mute);
}
.briefing-name {
  font-family: var(--f-display);
  font-size: 32px;
  color: var(--kid-color);
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: 0 0 12px var(--kid-glow);
}
.briefing-code {
  font-family: var(--f-stamp);
  font-size: 13px;
  color: var(--slate-dim);
  margin-top: 4px;
  letter-spacing: 0.15em;
}
.briefing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 18px 0 14px;
}
.briefing-stat {
  background: var(--slate-1);
  border: 1px solid var(--slate-border);
  padding: 10px 12px;
}
.briefing-stat .bs-lbl {
  font-family: var(--f-sub);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--slate-mute);
}
.briefing-stat .bs-val {
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--kid-color);
  margin-top: 2px;
  line-height: 1.1;
}
.briefing-mission {
  font-family: var(--f-stamp);
  font-size: 14px;
  color: var(--slate-dim);
  margin: 14px 0 18px;
  padding: 10px 12px;
  border-left: 4px solid var(--kid-color);
  background: var(--slate-1);
  letter-spacing: 0.08em;
}
.briefing-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.briefing-btn {
  background: var(--kid-color);
  color: var(--kid-on-primary);
  font-family: var(--f-display);
  font-size: 20px;
  letter-spacing: 0.04em;
  padding: 14px 26px;
  border: 2px solid var(--paper-ink);
  flex: 1;
  box-shadow: 0 4px 0 var(--paper-ink), 0 0 24px var(--kid-glow);
  transition: transform 160ms ease;
}
.briefing-btn:hover { transform: translateY(-2px); }
.briefing-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--paper-ink); }
.briefing-skip {
  background: transparent;
  color: var(--slate-mute);
  border: none;
  font-family: var(--f-stamp);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-decoration: underline;
}

/* --- KID MOTIF (decorative SVG on cover) ----------------------------- */
.cover {
  /* leave room for the motif on the right at tablet/desktop widths */
  padding: 38px 28px 32px;
}
.kid-motif {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 280px;
  height: 100px;
  pointer-events: none;
  opacity: 0.92;
  z-index: 2;
}
.kid-motif svg { width: 100%; height: 100%; }
/* Push title text so it doesn't sit under the motif on wide screens */
@media (min-width: 760px) {
  .cover-title    { padding-right: 300px; }
  .cover-subtitle { padding-right: 300px; }
}
/* Title + subtitle stack above the motif; stamp/motif keep their absolute positioning */
.cover-title, .cover-subtitle, .cover-corner { position: relative; z-index: 3; }
.cover .kid-motif { z-index: 2; }
.cover .cover-stamp,
.cover .bday-stamp { z-index: 5; }
.cover-stamp { top: 12px; right: 16px; }
.xander-motif { animation: x-bob 3s ease-in-out infinite; }
@keyframes x-bob {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(-8px); }
}

/* ====================================================================
   COVER MOTIF ANIMATIONS — themed movement per kid
   ==================================================================== */

/* Kai — fuse spark pulses, diamonds shimmer, creeper hiss → flash → explode cycle */
.kai-motif .motif-fuse-spark {
  animation: kai-fuse 0.8s ease-in-out infinite;
  transform-origin: 36px -12px;
}
@keyframes kai-fuse {
  0%, 100% { transform: scale(1); fill: #FFC72C; opacity: 1; }
  50%      { transform: scale(1.6); fill: #FF6B1A; opacity: 0.5; }
}
.kai-motif .motif-creeper-wrap { transform-box: fill-box; transform-origin: 28px 28px; }
.kai-motif .motif-creeper-body {
  animation: kai-creeper-cycle 6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 28px 28px;
}
@keyframes kai-creeper-cycle {
  0%, 55%   { transform: scale(1); opacity: 1; filter: brightness(1); }
  60%       { transform: scale(1.08); opacity: 1; filter: brightness(1.4); }
  65%, 68%  { transform: scale(1.18); opacity: 1; filter: brightness(2.4) saturate(0); }
  72%       { transform: scale(2.1); opacity: 0.45; filter: brightness(1.5) saturate(0.4); }
  78%       { transform: scale(2.8); opacity: 0;   filter: brightness(1.2); }
  82%, 100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}
.kai-motif .motif-creeper-flash {
  animation: kai-creeper-flash 6s ease-in-out infinite;
}
@keyframes kai-creeper-flash {
  0%, 58%, 80%, 100% { opacity: 0; }
  62%, 70%           { opacity: 0.85; }
}
.kai-motif .motif-creeper-blast circle {
  animation: kai-blast 6s ease-out infinite;
  transform-box: fill-box;
  transform-origin: 28px 28px;
}
.kai-motif .motif-creeper-blast circle:nth-child(1) { animation-delay: 0s; }
.kai-motif .motif-creeper-blast circle:nth-child(2) { animation-delay: 0.08s; }
.kai-motif .motif-creeper-blast circle:nth-child(3) { animation-delay: 0.16s; }
@keyframes kai-blast {
  0%, 65%   { opacity: 0; transform: scale(0.4); }
  70%       { opacity: 1; transform: scale(1); }
  85%       { opacity: 0.4; transform: scale(2.2); }
  100%      { opacity: 0; transform: scale(2.6); }
}
.kai-motif .motif-tnt {
  animation: kai-tnt-shake 6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 30px 30px;
}
@keyframes kai-tnt-shake {
  0%, 55% { transform: rotate(0); }
  60%, 64% { transform: rotate(-3deg) scale(1.03); }
  66%, 70% { transform: rotate(3deg) scale(1.03); }
  74%, 100% { transform: rotate(0); }
}
.kai-motif .motif-gem { animation: kai-gem 2.6s ease-in-out infinite; }
.kai-motif .motif-gem-1 { animation-delay: 0s; }
.kai-motif .motif-gem-2 { animation-delay: 0.4s; }
.kai-motif .motif-gem-3 { animation-delay: 0.8s; }
.kai-motif .motif-gem-4 { animation-delay: 1.2s; }
.kai-motif .motif-gem-5 { animation-delay: 1.6s; }
@keyframes kai-gem {
  0%, 100% { fill: #5EE4D9; opacity: 1; }
  50%      { fill: #fff; opacity: 0.7; }
}

/* Xander — rings spin, streaks pulse */
.xander-motif .motif-ring-1 { animation: x-spin 3s linear infinite; transform-origin: 32px 50px; transform-box: fill-box; }
.xander-motif .motif-ring-2 { animation: x-spin 2.4s linear infinite reverse; transform-origin: 22px 22px; transform-box: fill-box; }
@keyframes x-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
.xander-motif .motif-streaks line {
  stroke-dasharray: 100;
  animation: x-streak 1.4s linear infinite;
}
.xander-motif .motif-streaks line:nth-child(1) { animation-delay: 0s; }
.xander-motif .motif-streaks line:nth-child(2) { animation-delay: 0.2s; }
.xander-motif .motif-streaks line:nth-child(3) { animation-delay: 0.4s; }
.xander-motif .motif-streaks line:nth-child(4) { animation-delay: 0.6s; }
@keyframes x-streak {
  0%   { stroke-dashoffset: 100; opacity: 0.3; }
  50%  { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0.3; }
}

/* Ari — pokeball clamshell capture (both halves open, light flash, snap shut, bounce),
   shuriken rotates, bolt flickers */
.ari-motif .motif-pokeball {
  animation: ari-pball-bounce 5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 38px 50px;
}
@keyframes ari-pball-bounce {
  0%, 60%, 100% { transform: translate(0,0); }
  72%           { transform: translate(-6px, -10px) rotate(-6deg); }
  80%           { transform: translate(8px,  -4px) rotate(6deg);  }
  88%           { transform: translate(-3px, -6px) rotate(-3deg); }
  95%           { transform: translate(0, 0) rotate(0); }
}
/* Top red lid — back-hinged clamshell viewed from front: flatten upward (scaleY shrinks
   toward the top edge), translate up to expose the cavity, like a real Pokeball opening. */
.ari-motif .motif-pokeball .pball-top {
  animation: ari-pball-top 5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 0%;       /* top edge of the dome stays put; bottom edge lifts */
}
@keyframes ari-pball-top {
  0%, 12%       { transform: translateY(0) scaleY(1); }
  20%, 45%      { transform: translateY(-4px) scaleY(0.32); }   /* lid lifts + flattens */
  55%, 100%    { transform: translateY(0) scaleY(1); }
}
/* Dark interior cavity — flips from white-half to dark while the lid is open */
.ari-motif .motif-pokeball .pball-cavity {
  animation: ari-pball-cavity 5s ease-in-out infinite;
}
@keyframes ari-pball-cavity {
  0%, 14%, 50%, 100% { opacity: 0; }
  20%, 45%           { opacity: 1; }
}
/* Bottom white half stays still — no rotation */
.ari-motif .motif-pokeball .pball-bot { animation: none; }
/* White light burst — washes out the whole ball while lid is open */
.ari-motif .motif-pokeball .pball-flash {
  animation: ari-pball-flash 5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 38px 38px;
  mix-blend-mode: screen;
}
@keyframes ari-pball-flash {
  0%, 12%, 55%, 100% { opacity: 0; transform: scale(0.4); }
  18%                { opacity: 1; transform: scale(1.4); }
  28%                { opacity: 1; transform: scale(2.0); }
  38%                { opacity: 0.95; transform: scale(2.2); }
  48%                { opacity: 0.6; transform: scale(1.4); }
}
/* Center dot color cycle */
.ari-motif .motif-pokeball .pball-dot {
  animation: ari-pball-dot 5s ease-in-out infinite;
}
@keyframes ari-pball-dot {
  0%, 12%, 95%, 100% { fill: #3DBE5C; }
  20%, 45%           { fill: #fff; }
  55%, 90%           { fill: #E63946; }
}

/* Shuriken — spin in place around its own center, NOT orbit around 0,0 */
.ari-motif .motif-shuriken {
  animation: ari-shuriken 6s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes ari-shuriken {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ari-motif .motif-bolt { animation: ari-bolt 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ari-bolt {
  0%, 50%, 100% { opacity: 1; transform: scale(1); }
  25%           { opacity: 0.45; transform: scale(0.92); }
  75%           { opacity: 0.95; transform: scale(1.05); }
}

/* Paisley — wings flap, wand sparks, stars twinkle, scar pulses */
/* Paisley — wings flap UP/DOWN hinged at the ball body, wand sparks, stars twinkle, scar pulses */
.paisley-motif .motif-wing-left  {
  animation: p-wing-l 0.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 100% 50%;   /* inner edge of left wing (closest to ball) */
}
.paisley-motif .motif-wing-right {
  animation: p-wing-r 0.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 0% 50%;     /* inner edge of right wing (closest to ball) */
}
@keyframes p-wing-l {
  0%, 100% { transform: rotate(-15deg); }
  50%      { transform: rotate(35deg); }
}
@keyframes p-wing-r {
  0%, 100% { transform: rotate(15deg); }
  50%      { transform: rotate(-35deg); }
}
.paisley-motif .motif-wand-spark { animation: p-wand-spark 1.6s ease-in-out infinite; transform-origin: 56px 6px; }
@keyframes p-wand-spark {
  0%, 100% { fill: #F4E8D0; transform: scale(1); }
  50%      { fill: #D4A35A; transform: scale(1.8); }
}
.paisley-motif .motif-star { animation: p-twinkle 2.4s ease-in-out infinite; }
.paisley-motif .motif-star-1 { animation-delay: 0s; }
.paisley-motif .motif-star-2 { animation-delay: 0.6s; }
.paisley-motif .motif-star-3 { animation-delay: 1.2s; }
@keyframes p-twinkle {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.paisley-motif .motif-book { animation: p-book 4s ease-in-out infinite; transform-origin: 25px 35px; }
@keyframes p-book {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(-2deg); }
}
.paisley-motif .motif-scar { animation: p-scar 3s ease-in-out infinite; }
@keyframes p-scar {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(194,84,142,0.5)); }
  50%      { filter: drop-shadow(0 0 8px rgba(194,84,142,1)); }
}

/* Reset This Day button — sits under the Mark-Complete button on the mission card */
.reset-day-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  background: transparent;
  color: var(--paper-stamp);
  border: 1.5px dashed var(--paper-stamp);
  cursor: pointer;
  transition: background 180ms ease;
}
.reset-day-btn:hover { background: rgba(184,54,42,0.12); }

/* Canonical-10 collapsible inside the warrior code block */
.code-book {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed rgba(0,0,0,0.25);
}
.code-book > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-stamp);
  font-size: 13px;
  letter-spacing: 0.10em;
  color: var(--paper-ink);
  user-select: none;
}
.code-book > summary::-webkit-details-marker { display: none; }
.code-book > summary .chev {
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--kid-color);
  transition: transform 200ms ease;
}
.code-book[open] > summary .chev { transform: rotate(90deg); }
.code-book .book-title {
  font-family: var(--f-sub);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
}
.code-book-list {
  margin: 14px 0 0;
  padding-left: 24px;
  font-family: var(--f-stamp);
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper-ink);
  counter-reset: kidcode;
}
.code-book-list li {
  margin: 6px 0;
  padding-left: 4px;
}
.code-book-list li::marker {
  color: var(--kid-color);
  font-family: var(--f-display);
  font-weight: 700;
}
.reflection-bonus {
  display: inline-block;
  margin-left: 10px;
  background: linear-gradient(135deg, #FFC72C, #FF8E1A);
  color: #1a1610;
  font-family: var(--f-stamp);
  font-size: 10px;
  letter-spacing: 0.15em;
  padding: 2px 8px;
  border: 1px solid #1a1610;
  text-transform: uppercase;
  vertical-align: 2px;
  animation: bonus-pulse 2.2s ease-in-out infinite;
}
@keyframes bonus-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,200,40,0); }
  50%      { box-shadow: 0 0 0 4px rgba(255,200,40,0.4); }
}

/* ====================================================================
   UTILITIES PANEL (Reset + Star Progress)
   ==================================================================== */
.util-block {
  padding: 14px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.18);
}
.util-block:last-child { border-bottom: none; }
.util-title {
  font-family: var(--f-display);
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--paper-ink);
  letter-spacing: 0.02em;
}
.util-note {
  font-family: var(--f-stamp);
  font-size: 13px;
  color: var(--paper-ink-soft);
  margin: 0 0 10px;
  line-height: 1.5;
}
.util-note.reset-warn { color: var(--paper-stamp); }

/* Star progress overlay */
.stars-overlay { background: rgba(0,0,0,0.55) !important; backdrop-filter: blur(6px); }
.stars-card {
  background: var(--paper-0);
  color: var(--paper-ink);
  border: 3px solid var(--paper-ink);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  padding: 36px 44px 28px;
  width: min(720px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.6);
  transition: transform 360ms cubic-bezier(.34,1.6,.42,.96);
}
.stars-overlay.show .stars-card { transform: scale(1); }
.stars-card .briefing-stamp {
  background: var(--paper-stamp);
  color: #fff;
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  font-family: var(--f-stamp);
  font-size: 11px;
  letter-spacing: 0.20em;
  padding: 5px 18px;
  white-space: nowrap;
}
.stars-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
  font-family: var(--f-mono);
  font-size: 14px;
}
.stars-table th,
.stars-table td {
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
.stars-table th:first-child,
.stars-table td:first-child {
  text-align: left;
  font-family: var(--f-sub);
  font-weight: 800;
  letter-spacing: 0.08em;
}
.stars-table thead th {
  font-family: var(--f-sub);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--paper-ink-soft);
  border-bottom: 2px solid var(--paper-ink);
}
.stars-table tbody tr.empty td { color: var(--paper-ink-soft); }
.stars-table tbody tr.has    td { color: var(--paper-ink); }
.stars-table tfoot td {
  border-top: 2px solid var(--paper-ink);
  border-bottom: none;
  font-weight: 900;
  font-size: 15px;
  padding-top: 10px;
}
.stars-table .dim { color: var(--paper-ink-soft); font-size: 11px; }
.stars-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  gap: 16px;
  font-family: var(--f-stamp);
}
.stars-foot .dim { color: var(--paper-ink-soft); }

/* --- KID THEME — full per-kid styling -------------------------------- */

/* Kai — Minecraft world: grass + dirt + redstone; favorite RED for name */
.theme-kai .cover {
  background:
    linear-gradient(180deg, rgba(93,170,52,0.20) 0 12%, transparent 12%),
    linear-gradient(180deg, transparent 12%, rgba(139,92,47,0.16) 12% 22%, transparent 22%),
    radial-gradient(circle at 25% 50%, rgba(215,42,42,0.10) 0 220px, transparent 280px),
    linear-gradient(180deg, rgba(215,42,42,0.06), transparent 70%);
}
.theme-kai .cover::before {
  background:
    linear-gradient(0deg, rgba(0,0,0,0.12) 50%, transparent 50%),
    linear-gradient(90deg, rgba(0,0,0,0.12) 50%, transparent 50%);
  background-size: 18px 18px;
  opacity: 0.20;
}
.theme-kai .cover-title .kid-name {
  font-family: "Black Ops One", monospace;
  letter-spacing: 0.06em;
  /* color + filter come from the generic .kid-name rule */
}
.theme-kai .cover-stamp { border-color: #5DAA34; color: #5DAA34; }
.theme-kai .cover-subtitle .sigil { color: #D72A2A; }
.theme-kai .drill-check.checked::after {
  border: none;
  width: 16px; height: 16px;
  background: var(--kid-color);
  left: 4px; top: 4px;
  transform: rotate(0);
  animation: stamp 320ms cubic-bezier(.34,1.7,.42,.96);
  box-shadow:
    -3px 0 0 var(--kid-color-dark),
    0 3px 0 var(--kid-color-dark),
    -3px 3px 0 #000;
}

/* Xander — Sonic: speed streaks + gold rings + red shoes */
.theme-xander .cover {
  background:
    linear-gradient(180deg, rgba(27,104,224,0.24), transparent 80%),
    repeating-linear-gradient(-18deg, transparent 0 80px, rgba(27,104,224,0.20) 80px 84px, transparent 84px 160px),
    repeating-linear-gradient(-18deg, transparent 0 160px, rgba(255,199,44,0.20) 160px 164px, transparent 164px 240px);
}
.theme-xander .cover::before {
  background:
    repeating-linear-gradient(-18deg, transparent 0 14px, rgba(255,255,255,0.55) 14px 15px, transparent 15px 36px);
  background-size: 80px 80px;
  opacity: 0.32;
}
.theme-xander .cover-title .kid-name {
  font-style: italic;
  transform: skewX(-8deg) translateX(-4px);
  display: inline-block;
  letter-spacing: 0.04em;
}
.theme-xander .cover-stamp { border-color: #FFC72C; color: #c98e00; }
.theme-xander .drill-check.checked {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFD23F 0 40%, #FFC72C 60%, #c98e00 100%);
  border-color: #c98e00;
  box-shadow: 0 0 0 4px rgba(255,199,44,0.4);
}
.theme-xander .drill-check.checked::after { border-color: #0E3F8E; }

/* Ari — Pokemon: green primary + pokeball red + electric yellow + Greninja navy */
.theme-ari .cover {
  background:
    linear-gradient(180deg, rgba(61,190,92,0.26), transparent 70%),
    radial-gradient(circle at 90% 30%, rgba(230,57,70,0.20) 0 80px, transparent 130px),
    radial-gradient(circle at 10% 75%, rgba(21,45,92,0.22) 0 100px, transparent 150px);
}
.theme-ari .cover::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 50%, rgba(230,57,70,0.45) 0 7px, transparent 9px);
  background-size: 56px 56px, 56px 56px;
  opacity: 0.32;
}
.theme-ari .cover-title .kid-name {
  font-family: "Black Ops One", sans-serif;
  letter-spacing: 0.04em;
}
.theme-ari .cover-stamp { border-color: #E63946; color: #E63946; }
.theme-ari .drill-check.checked {
  background: linear-gradient(180deg, #E63946 0 50%, #fff 50% 100%);
  border-color: #0d0d0d;
}
.theme-ari .drill-check.checked::after {
  border: none;
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  top: 8px; left: 8px;
  transform: rotate(0);
  box-shadow: 0 0 0 2px #0d0d0d;
}

/* Paisley — Horses + Harry Potter: pink/purple + gold + magic */
.theme-paisley .cover {
  background:
    linear-gradient(180deg, rgba(184,92,140,0.27), rgba(255,246,251,0.10) 70%, transparent 100%),
    radial-gradient(ellipse at 20% 25%, rgba(212,163,90,0.22) 0 70px, transparent 120px),
    radial-gradient(ellipse at 80% 75%, rgba(93,45,122,0.20) 0 80px, transparent 130px);
}
.theme-paisley .cover::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(212,163,90,0.85) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 15% 70%, rgba(184,92,140,0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 30%, rgba(93,45,122,0.6) 0 1px, transparent 2px);
  background-size: 22px 22px, 30px 30px, 36px 36px;
  opacity: 0.55;
}
.theme-paisley .cover-title { font-style: italic; }
.theme-paisley .cover-title .kid-name {
  font-family: "Black Ops One", serif;
  font-style: italic;
  position: relative;
  padding-right: 0.4em;
  /* gradient + filter from generic rule */
}
.theme-paisley .cover-title .kid-name::after {
  content: "✦";
  position: absolute;
  top: -10px; right: -6px;
  font-size: 28px;
  color: #D4A35A;
  -webkit-text-fill-color: #D4A35A;
  text-shadow: 0 0 16px rgba(212,163,90,0.9);
  animation: twinkle 2.4s ease-in-out infinite 0.5s;
  filter: none;
}
.theme-paisley .cover-title .kid-name::before {
  content: "✧";
  position: absolute;
  bottom: -2px; left: -28px;
  font-size: 20px;
  color: #D4A35A;
  -webkit-text-fill-color: #D4A35A;
  text-shadow: 0 0 12px rgba(212,163,90,0.9);
  animation: twinkle 2.6s ease-in-out infinite;
  filter: none;
}
.theme-paisley .cover-stamp { border-color: #D4A35A; color: #B85C8C; }
.theme-paisley .drill-check.checked {
  background: radial-gradient(circle at 30% 30%, #d77eac 0%, #B85C8C 60%, #6D2F5E 100%);
  border-color: #6D2F5E;
  box-shadow: 0 0 0 4px rgba(212,163,90,0.5);
}
.theme-paisley .drill-check.checked::after {
  border-color: #D4A35A;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.7));
}

/* --- KID TAB ACTIVE STATES (per-kid color) -------------------------- */
.kidtab[data-kid="kai"]     { --tab-color: #D72A2A; }
.kidtab[data-kid="xander"]  { --tab-color: #1B68E0; }
.kidtab[data-kid="ari"]     { --tab-color: #3DBE5C; }
.kidtab[data-kid="paisley"] { --tab-color: #B85C8C; }

.kidtab[data-kid="kai"].active {
  background: linear-gradient(180deg, #D72A2A 0 45%, #8B5C2F 45% 75%, #5DAA34 75%);
  box-shadow: 0 6px 0 #000, 0 -2px 0 rgba(255,255,255,0.3) inset;
}
.kidtab[data-kid="kai"].active .kt-name { text-shadow: 2px 2px 0 #000; }
.kidtab[data-kid="xander"].active {
  background: linear-gradient(110deg, #1B68E0 0 60%, #FFC72C 60% 78%, #E32D2D 78%);
}
.kidtab[data-kid="xander"].active .kt-name { font-style: italic; transform: skewX(-6deg); display: inline-block; }
.kidtab[data-kid="ari"].active {
  background: linear-gradient(180deg, #3DBE5C 0 50%, #E63946 50%);
}
.kidtab[data-kid="ari"].active .kt-name { text-shadow: 2px 2px 0 #152D5C; }
.kidtab[data-kid="paisley"].active {
  background: linear-gradient(135deg, #c66c9a, #B85C8C 50%, #6D2F5E);
}
.kidtab[data-kid="paisley"].active::after {
  content: "✦";
  position: absolute;
  top: 8px; right: 10px;
  font-size: 16px;
  color: #D4A35A;
  text-shadow: 0 0 8px rgba(212,163,90,0.9);
  animation: twinkle 2.4s ease-in-out infinite;
}

/* Stat block hover lift for delight */
.stat { transition: transform 220ms ease, box-shadow 220ms ease; }
.stat:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--paper-ink); }

/* ====================================================================
   LIGHT-MODE OVERRIDES — make all "card" surfaces match the paper page.
   ==================================================================== */
.stat {
  background: var(--paper-0);
  color: var(--paper-ink);
  border-color: var(--paper-ink);
  box-shadow: 4px 4px 0 var(--paper-ink);
}
.stat-label { color: var(--paper-ink-soft); }
.stat-fine  { color: var(--paper-ink-soft); }

.phase-banner {
  background: var(--paper-0);
  color: var(--paper-ink);
  border-color: var(--paper-ink);
  box-shadow: 4px 4px 0 var(--paper-ink);
}
.phase-cell { border-right-color: var(--paper-ink-soft); border-bottom-color: var(--paper-ink-soft); }
.phase-cell .lbl { color: var(--paper-ink-soft); }
.phase-cell.theme .val { color: var(--paper-ink); }

.mission {
  background: var(--paper-0);
  color: var(--paper-ink);
  border-color: var(--paper-ink);
  box-shadow: 8px 8px 0 var(--paper-ink);
}
.mission-head { border-bottom-color: var(--paper-ink-soft); }
.mission-title { color: var(--paper-ink); }
.mission-sub   { color: var(--paper-ink-soft); }
.mission-counter {
  background: var(--paper-1);
  border-color: var(--paper-ink-soft);
}

.phase-group-head {
  color: var(--paper-ink-soft);
  border-bottom-color: var(--paper-ink-soft);
}
.drill { border-bottom-color: var(--paper-ink-soft); }
.drill:hover { background: var(--paper-1); }
.drill-name { color: var(--paper-ink); }
.drill.done .drill-name { color: var(--paper-ink-soft); }
.drill-reps { color: var(--paper-ink); }
.drill-check {
  background: transparent;
  border-color: var(--paper-ink-soft);
}
.drill-video {
  background: transparent;
  border-color: var(--paper-ink-soft);
  color: var(--paper-ink-soft);
}
.drill-video:hover {
  background: var(--paper-1);
}
.drill-detail {
  background: var(--paper-1);
  color: var(--paper-ink);
}
.drill-detail p { color: var(--paper-ink); }

.reflection {
  background: var(--paper-1);
  border-color: var(--paper-ink-soft);
}
.reflection label { color: var(--paper-ink); }
.reflection .prompt { color: var(--paper-ink-soft); }
.reflection textarea {
  background: #fffaf2;
  border-color: var(--paper-ink-soft);
  color: var(--paper-ink);
}

.complete-btn {
  background: var(--paper-1);
  color: var(--paper-ink-soft);
  border-color: var(--paper-ink-soft);
}
.complete-btn.ready {
  /* already kid-color; force readable text */
  color: var(--kid-on-primary);
  border-color: var(--paper-ink);
}
.complete-btn.done {
  background: var(--paper-0);
  color: var(--kid-color);
  border: 2px dashed var(--kid-color);
}

.cue-card {
  background: var(--paper-0);
  color: var(--paper-ink);
  border-color: var(--paper-ink);
  box-shadow: 4px 4px 0 var(--paper-ink);
}
.cue-card .ct { color: var(--kid-color); }
.cue-card .cd { color: var(--paper-ink); }

/* Kai — TNT EXPLOSION */
.theme-kai .drill-check.checked {
  animation: kai-tnt-flash 700ms ease-out;
}
@keyframes kai-tnt-flash {
  0%   { background: var(--slate-1); transform: scale(1); box-shadow: 0 0 0 0 rgba(255,200,40,0); }
  18%  { background: #FFC72C; transform: scale(1.35); box-shadow: 0 0 0 12px rgba(255,200,40,0.55), 0 0 60px 24px rgba(255,120,0,0.65); }
  35%  { background: #FF6B1A; transform: scale(1.2);  box-shadow: 0 0 0 22px rgba(255,80,0,0.45), 0 0 80px 36px rgba(255,60,0,0.6); }
  60%  { background: #D72A2A; transform: scale(1.05); box-shadow: 0 0 0 8px rgba(215,42,42,0.4); }
  100% { background: var(--kid-color); transform: scale(1); box-shadow: 0 0 0 4px var(--kid-glow); }
}
/* Spark particles flying out for Kai */
.theme-kai .drill-check.checked::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, #FFC72C 0 3px, transparent 4px),
    radial-gradient(circle at 50% 50%, #FF6B1A 0 2px, transparent 3px);
  background-position: 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  animation: kai-sparks 700ms ease-out;
  opacity: 0;
}
@keyframes kai-sparks {
  0%   { opacity: 1; background-position: 50% 50%, 50% 50%; transform: scale(0.6); }
  60%  { opacity: 1; background-position: -28px -22px, 26px -24px; transform: scale(1.4); }
  100% { opacity: 0; background-position: -36px -30px, 32px -32px; transform: scale(1.6); }
}
.theme-kai .drill-check.checked::after {
  /* Kai's "filled" state = red TNT pixel block instead of the generic checkmark */
  border: none;
  width: 16px; height: 16px;
  background: #D72A2A;
  left: 4px; top: 4px;
  transform: rotate(0);
  box-shadow:
    -3px 0 0 #7a1414,
    0 3px 0 #7a1414,
    -3px 3px 0 #000;
  animation: kai-block-settle 480ms 200ms both;
}
@keyframes kai-block-settle {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.7); }
  60%  { opacity: 1; transform: translateY(2px) scale(1.1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Xander — SONIC RING PICKUP */
.theme-xander .drill-check.checked {
  animation: x-ring-pickup 720ms cubic-bezier(.34,1.7,.42,.96);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFD23F 0 40%, #FFC72C 60%, #c98e00 100%);
  border-color: #c98e00;
  box-shadow: 0 0 0 4px rgba(255,199,44,0.4);
}
@keyframes x-ring-pickup {
  0%   { transform: scale(1) rotate(0);    background: var(--slate-1); border-color: var(--slate-dim); box-shadow: 0 0 0 0 rgba(255,199,44,0); }
  30%  { transform: scale(1.3) rotate(180deg); background: radial-gradient(circle at 35% 35%, #fff 0 40%, #FFC72C 60%, #c98e00 100%); box-shadow: 0 0 0 12px rgba(255,199,44,0.6), 0 0 32px rgba(255,199,44,0.9); }
  70%  { transform: scale(0.85) rotate(540deg); box-shadow: 0 0 0 6px rgba(255,199,44,0.4); }
  100% { transform: scale(1) rotate(720deg); box-shadow: 0 0 0 4px rgba(255,199,44,0.4); }
}
.theme-xander .drill-check.checked::before {
  content: "✦";
  position: absolute;
  top: -8px; right: -10px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 8px #FFC72C;
  animation: x-ring-sparkle 720ms ease-out;
  pointer-events: none;
}
@keyframes x-ring-sparkle {
  0%   { opacity: 0; transform: translate(0,0) scale(0.5); }
  40%  { opacity: 1; transform: translate(8px, -8px) scale(1.2); }
  100% { opacity: 0; transform: translate(16px, -18px) scale(0.6); }
}
.theme-xander .drill-check.checked::after { border-color: #0E3F8E; }

/* Ari — POKEBALL CAPTURE SHAKE */
.theme-ari .drill-check.checked {
  animation: ari-pokeball-shake 1.1s ease-out;
  background: linear-gradient(180deg, #E63946 0 50%, #fff 50% 100%);
  border-color: #0d0d0d;
}
@keyframes ari-pokeball-shake {
  0%   { transform: rotate(0) scale(1); }
  8%   { transform: rotate(-18deg) scale(1.18); }
  16%  { transform: rotate(18deg)  scale(1.18); }
  24%  { transform: rotate(-14deg) scale(1.12); }
  32%  { transform: rotate(14deg)  scale(1.12); }
  40%  { transform: rotate(-10deg) scale(1.08); }
  48%  { transform: rotate(10deg)  scale(1.08); }
  56%  { transform: rotate(-5deg)  scale(1.04); }
  64%  { transform: rotate(0)      scale(1.04); box-shadow: 0 0 0 6px rgba(255,210,63,0.6), 0 0 24px rgba(255,210,63,0.85); }
  72%  { transform: scale(1.15); box-shadow: 0 0 0 12px rgba(255,210,63,0.8), 0 0 40px rgba(255,210,63,1); }
  100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(61,190,92,0.5); }
}
.theme-ari .drill-check.checked::after {
  /* Pokeball center dot — appears AFTER shake completes */
  border: none;
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  top: 8px; left: 8px;
  transform: rotate(0);
  box-shadow: 0 0 0 2px #0d0d0d;
  animation: ari-pokeball-lock 280ms 700ms both;
}
@keyframes ari-pokeball-lock {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.3); background: #FFD23F; box-shadow: 0 0 0 3px #0d0d0d, 0 0 12px #FFD23F; }
  100% { opacity: 1; transform: scale(1); background: #fff; box-shadow: 0 0 0 2px #0d0d0d; }
}

/* Paisley — GOLDEN SNITCH FLY-AROUND */
.theme-paisley .drill-check.checked {
  animation: paisley-snitch-catch 800ms cubic-bezier(.34,1.4,.5,.98);
  background: radial-gradient(circle at 30% 30%, #d77eac 0%, #B85C8C 60%, #6D2F5E 100%);
  border-color: #6D2F5E;
  box-shadow: 0 0 0 4px rgba(212,163,90,0.5);
}
@keyframes paisley-snitch-catch {
  0%   { transform: scale(1) rotate(0); box-shadow: 0 0 0 0 rgba(212,163,90,0); }
  35%  { transform: scale(1.18) rotate(8deg);  box-shadow: 0 0 0 10px rgba(212,163,90,0.6), 0 0 30px rgba(212,163,90,0.9); }
  65%  { transform: scale(0.95) rotate(-4deg); box-shadow: 0 0 0 6px rgba(212,163,90,0.45); }
  100% { transform: scale(1) rotate(0);        box-shadow: 0 0 0 4px rgba(212,163,90,0.5); }
}
.theme-paisley .drill-check.checked::before {
  /* The snitch flies an orbit around the checkbox before being "caught" */
  content: "✦";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  color: #D4A35A;
  font-size: 16px;
  line-height: 14px;
  text-align: center;
  text-shadow: 0 0 10px #D4A35A, 0 0 14px #fff;
  pointer-events: none;
  animation: paisley-snitch-orbit 900ms cubic-bezier(.4,1.3,.5,1) forwards;
}
@keyframes paisley-snitch-orbit {
  0%   { transform: translate(40px, -20px) rotate(0)   scale(0.6); opacity: 0; }
  10%  { opacity: 1; }
  30%  { transform: translate(28px,  20px) rotate(150deg) scale(1); }
  55%  { transform: translate(-22px, 18px) rotate(300deg) scale(1.2); }
  78%  { transform: translate(-18px,-22px) rotate(420deg) scale(1); }
  92%  { transform: translate(  6px, -8px) rotate(540deg) scale(0.85); opacity: 1; }
  100% { transform: translate(  0,    0)   rotate(560deg) scale(0); opacity: 0; }
}
.theme-paisley .drill-check.checked::after {
  border-color: #D4A35A;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.7));
}

/* ====================================================================
   BELT PROMOTION SPLASH
   ==================================================================== */
.belt-celebrate { z-index: 110; }
.belt-celebrate .belt-card {
  /* override the simple celebrate-card */
  background: linear-gradient(180deg, var(--slate-0), #0a0e15);
  color: var(--slate-text);
  border: 4px solid var(--paper-ink);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 8px var(--kid-glow);
  padding: 38px 56px 32px;
  text-align: center;
  width: min(620px, 92vw);
  position: relative;
  transform: scale(0.6) rotate(-2deg);
  transition: transform 380ms cubic-bezier(.34,1.6,.42,.96);
}
.belt-celebrate.show .belt-card { transform: scale(1) rotate(0); }
.belt-celebrate .bc-eyebrow {
  font-family: var(--f-stamp);
  font-size: 14px;
  letter-spacing: 0.36em;
  color: var(--kid-accent, gold);
  text-transform: uppercase;
}
.belt-celebrate .bc-title {
  font-family: var(--f-display);
  font-size: clamp(40px, 5vw, 60px);
  margin: 10px 0 8px;
  letter-spacing: 0.04em;
  color: var(--kid-color);
  text-shadow: 0 0 30px var(--kid-glow);
  line-height: 0.95;
}
.belt-celebrate .bc-belt-wrap {
  margin: 18px auto 10px;
  width: 100%;
  overflow: hidden;
}
.belt-celebrate .bc-belt {
  width: 0;
  animation: belt-unfurl 800ms 200ms cubic-bezier(.4,.0,.2,1) forwards;
  margin: 0 auto;
}
@keyframes belt-unfurl {
  0%   { width: 0; }
  100% { width: 100%; }
}
.belt-celebrate .bc-stars {
  font-family: var(--f-display);
  font-size: 36px;
  color: var(--kid-accent, gold);
  margin: 6px 0 4px;
  letter-spacing: 0.06em;
  text-shadow: 0 0 18px rgba(255,210,60,0.7);
  animation: stars-pop 700ms 700ms cubic-bezier(.34,1.7,.42,.96) both;
}
@keyframes stars-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}
.belt-celebrate .bc-sub {
  font-family: var(--f-stamp);
  color: var(--slate-dim);
  font-size: 13px;
  letter-spacing: 0.20em;
  margin: 10px 0 16px;
  text-transform: uppercase;
}
.belt-celebrate .bc-close {
  background: var(--kid-color);
  color: var(--kid-on-primary);
  font-family: var(--f-display);
  font-size: 18px;
  letter-spacing: 0.06em;
  padding: 12px 28px;
  border: 2px solid var(--paper-ink);
  box-shadow: 0 4px 0 var(--paper-ink);
  margin-top: 8px;
}
.belt-celebrate .bc-close:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--paper-ink); }
.belt-celebrate .bc-close:active { transform: translateY(2px); box-shadow: 0 0 0 var(--paper-ink); }

/* ====================================================================
   UNIFIED PAPER BACKDROP — kraft tone, classic field-manual feel.
   ==================================================================== */
html, body { background: var(--paper-1); }
body {
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.50) 0%, transparent 38%),
    radial-gradient(circle at 82% 88%, rgba(0,0,0,0.10) 0%, transparent 45%),
    repeating-linear-gradient(125deg, rgba(120,90,40,0.06) 0px, rgba(120,90,40,0.06) 1px, transparent 1px, transparent 5px),
    radial-gradient(ellipse at center, var(--paper-0) 0%, var(--paper-1) 55%, var(--paper-2) 100%);
  background-attachment: fixed;
  color: var(--paper-ink);
}
/* Theme-tinted hairline glow at the very top (subtle per-kid pop) */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 220px;
  background: radial-gradient(ellipse at top, var(--kid-glow), transparent 70%);
  pointer-events: none;
  opacity: 0.40;
  z-index: 0;
  transition: background 800ms ease;
}
.app { position: relative; z-index: 1; }

/* Override any earlier theme-specific body bg with the paper default */
.theme-kai body,    body.theme-kai,
.theme-xander body, body.theme-xander,
.theme-ari body,    body.theme-ari,
.theme-paisley body,body.theme-paisley {
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.50) 0%, transparent 38%),
    radial-gradient(circle at 82% 88%, rgba(0,0,0,0.10) 0%, transparent 45%),
    repeating-linear-gradient(125deg, rgba(120,90,40,0.06) 0px, rgba(120,90,40,0.06) 1px, transparent 1px, transparent 5px),
    radial-gradient(ellipse at center, var(--paper-0) 0%, var(--paper-1) 55%, var(--paper-2) 100%);
}

/* Quote bar is back on paper, with the original ink tone */
.qbar { color: var(--paper-ink); }
.qbar { border-bottom-color: var(--paper-ink); }
.qbar::after { background: var(--paper-ink); opacity: 0.35; }
.qbar-date {
  background: var(--paper-0);
  color: var(--paper-ink);
  border-color: var(--paper-ink);
}
.qbar-quote { color: var(--paper-ink); }
.qbar-quote-author { color: var(--paper-ink-soft); }
.qbar-stamp { color: var(--paper-stamp); border-color: var(--paper-stamp); background: transparent; }

/* Kid tabs back to paper */
.kidtab {
  background: var(--paper-0);
  color: var(--paper-ink);
  border-color: var(--paper-ink);
}
.kidtab:hover { background: var(--paper-1); }
.kidtab .kt-code { color: var(--paper-ink-soft); }
.kidtab .kt-age  { color: var(--paper-ink-soft); border-color: var(--paper-ink-soft); }
.kidtab.active .kt-age { color: rgba(0,0,0,0.85); border-color: rgba(0,0,0,0.45); background: rgba(255,255,255,0.18); }

/* Sport pills */
.sport-row .label { color: var(--paper-ink); }
.sport-pill { background: var(--paper-0); color: var(--paper-ink); border-color: var(--paper-ink); }

/* Section titles + tags back to paper */
.section-title h2 { color: var(--paper-ink); }
.section-title .tag { color: var(--paper-ink-soft); border-color: var(--paper-ink-soft); }

/* Collapsible sections — paper-tone (original) */
details.collapsible {
  background: var(--paper-0);
  border-color: var(--paper-ink);
}
details.collapsible > summary h3 { color: var(--paper-ink); }
details.collapsible > summary .tag { color: var(--paper-ink-soft); border-color: var(--paper-ink-soft); }
details.collapsible > summary .chev { color: var(--kid-color); }

/* Belt cards & belt intro — paper */
.belts-intro { background: var(--paper-0); color: var(--paper-ink); border-color: var(--paper-ink); }
.belt-card   { background: var(--paper-0); color: var(--paper-ink); border-color: var(--paper-ink); }

/* Week & day tabs back to paper */
.weektab { background: var(--paper-0); border-color: var(--paper-ink); color: var(--paper-ink); }
.daytab  { background: var(--paper-0); border-color: var(--paper-ink); color: var(--paper-ink); }
.weektab.locked { background: var(--paper-2); }

/* Phase banner — keep dark; original look */
.phase-banner { border-color: var(--paper-ink); }

/* Footer — paper */
.foot { border-top-color: var(--paper-ink); }
.foot-quote { color: var(--paper-ink); }
.foot-sub   { color: var(--paper-ink-soft); }

/* Toast */
.toast { border-color: var(--paper-ink); }

/* Paper-toned regions — readable on paper bg (revert the prior dark-text override block) */
.code-block { color: var(--paper-ink); }
.code-line .head { color: var(--paper-ink); }
.code-line .expl { color: var(--paper-ink-soft); }
.code-line .num  { color: var(--kid-color); }
.belt-card .belt-name { color: var(--paper-ink); }
.belt-card .belt-stars {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--kid-color);
  margin-top: 4px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.belt-card.is-white .belt-stars { color: var(--paper-ink-soft); font-style: italic; letter-spacing: 0.2em; }
.weektab, .weektab .wn, .daytab, .daytab .dn { color: var(--paper-ink); }
.daytab .ds { color: var(--paper-ink-soft); }
.weektab.active, .weektab.active .wn,
.daytab.active,  .daytab.active .dn { color: var(--kid-on-primary); }
.daytab.active .ds { color: rgba(0,0,0,0.7); }
.weektab .belt-mini { border-color: var(--paper-ink); }
.library-entry, .library-entry .le-name { color: var(--paper-ink); }
.library-entry .le-how { color: var(--paper-ink-soft); }
.library-cat { color: var(--kid-color-dark, var(--paper-ink)); }
.resource-card, .resource-card .rc-name { color: var(--paper-ink); }
.resource-card .rc-desc { color: var(--paper-ink-soft); }

/* ====================================================================
   KID NAME — gradient of primary color (per kid)
   ==================================================================== */
.cover-title .kid-name {
  /* Diagonal single-color gradient using the kid's primary color, with strong
     outline so it pops against the banner. */
  background: linear-gradient(135deg, var(--kid-color) 0%, var(--kid-color-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 1.5px rgba(0,0,0,0.95))
    drop-shadow(1px 2px 0 rgba(0,0,0,0.7))
    drop-shadow(0 0 14px var(--kid-color))
    drop-shadow(0 0 26px var(--kid-glow));
  position: relative;
}

/* ====================================================================
   STANDARDIZED GOLD STAR — both star stats use the same hue.
   ==================================================================== */
.stat-value .star,
.bc-stars,
.ct-stars { color: #FFC72C !important; text-shadow: 0 0 10px rgba(255,210,60,0.55); }

/* ====================================================================
   KID TABS — solid primary-color gradient per kid, always
   ==================================================================== */
.kidtab {
  color: #fff;
  border-color: var(--paper-ink);
  position: relative;
  overflow: hidden;
  /* Non-selected tabs are slightly desaturated/dimmed so the active one pops */
  filter: saturate(0.55) brightness(0.92);
  transition: filter 240ms ease, transform 180ms ease, box-shadow 220ms ease;
}
.kidtab[data-kid="kai"]     { background: linear-gradient(135deg, #ff7a7a 0%, #D72A2A 55%, #7a1414 100%); --tab-color: #ff7a7a; }
.kidtab[data-kid="xander"]  { background: linear-gradient(135deg, #6aa6ff 0%, #1B68E0 55%, #0a2960 100%); --tab-color: #6aa6ff; }
.kidtab[data-kid="ari"]     { background: linear-gradient(135deg, #80e297 0%, #3DBE5C 55%, #14601f 100%); --tab-color: #80e297; }
.kidtab[data-kid="paisley"] { background: linear-gradient(135deg, #e692c0 0%, #C2548E 55%, #4a1f3b 100%); --tab-color: #e692c0; }

/* Hover keeps the gradient — never falls back to tan. Inactive hover lifts saturation. */
.kidtab:hover { filter: saturate(0.9) brightness(1.02); transform: translateY(-2px); background: inherit; }
.kidtab[data-kid="kai"]:hover     { background: linear-gradient(135deg, #ff7a7a 0%, #D72A2A 55%, #7a1414 100%); }
.kidtab[data-kid="xander"]:hover  { background: linear-gradient(135deg, #6aa6ff 0%, #1B68E0 55%, #0a2960 100%); }
.kidtab[data-kid="ari"]:hover     { background: linear-gradient(135deg, #80e297 0%, #3DBE5C 55%, #14601f 100%); }
.kidtab[data-kid="paisley"]:hover { background: linear-gradient(135deg, #e692c0 0%, #C2548E 55%, #4a1f3b 100%); }

.kidtab::before { background: rgba(0,0,0,0.45); }
.kidtab .kt-code { color: rgba(255,255,255,0.78); }
.kidtab .kt-name { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.55); }
.kidtab .kt-sigil { color: rgba(255,255,255,0.92); }
.kidtab .kt-age {
  color: rgba(0,0,0,0.78);
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.3);
}

/* ACTIVE — full saturation, brightness lift, glow ring. Background stays its gradient. */
.kidtab.active {
  filter: saturate(1.1) brightness(1.05);
  box-shadow: 0 8px 0 var(--paper-ink), 0 0 0 4px var(--kid-glow), 0 0 0 6px rgba(255,255,255,0.85);
  transform: translateY(-3px);
}
.kidtab.active:hover { filter: saturate(1.15) brightness(1.08); transform: translateY(-4px); }
.kidtab.active::after { display: none; }
.kidtab[data-kid="kai"].active     { background: linear-gradient(135deg, #ff7a7a 0%, #D72A2A 55%, #7a1414 100%); }
.kidtab[data-kid="xander"].active  { background: linear-gradient(135deg, #6aa6ff 0%, #1B68E0 55%, #0a2960 100%); }
.kidtab[data-kid="ari"].active     { background: linear-gradient(135deg, #80e297 0%, #3DBE5C 55%, #14601f 100%); }
.kidtab[data-kid="paisley"].active { background: linear-gradient(135deg, #e692c0 0%, #C2548E 55%, #4a1f3b 100%); }

.kidtab .kt-belt {
  display: inline-flex;
  align-items: center;
  width: 90px;
  height: 16px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
.kidtab .kt-belt svg { width: 100%; height: 100%; }
.kidtab .kt-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.kidtab[data-kid="kai"].active .kt-name,
.kidtab[data-kid="ari"].active .kt-name { text-shadow: 0 1px 2px rgba(0,0,0,0.55); }
.kidtab[data-kid="xander"].active .kt-name { font-style: italic; transform: skewX(-6deg); display: inline-block; }

/* Drill subtitle (category) color — match each kid's primary, readable */
.theme-kai     .drill-cat { color: #D72A2A; }
.theme-xander  .drill-cat { color: #1B68E0; }
.theme-ari     .drill-cat { color: #3DBE5C; }
.theme-paisley .drill-cat { color: #6D2F5E; }

/* ====================================================================
   DRILL ROW — whole row clickable to expand
   ==================================================================== */
.drill { cursor: pointer; }
.drill-body { cursor: pointer; }
.drill-check, .drill-video { cursor: pointer; }

/* ====================================================================
   KAI — true TNT block visual on the checkbox
   ==================================================================== */
.theme-kai .drill-check {
  /* Base unchecked state matches the rest of the kids — paper background, paper-ink border */
  background: transparent;
}
.theme-kai .drill-check:not(.checked) {
  /* Match the rest of the kids — paper tone background, paper-ink border */
  background: transparent;
  border-color: var(--paper-ink-soft);
}
.theme-kai .drill-check.checked {
  /* SVG-based TNT block art — guaranteed crisp at any size */
  background-color: #D72A2A;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' fill='%23D72A2A'/%3E%3Crect y='9' width='28' height='10' fill='%23ffffff'/%3E%3Crect y='9' width='28' height='1' fill='%23c8c8c8'/%3E%3Crect y='18' width='28' height='1' fill='%23c8c8c8'/%3E%3Ctext x='14' y='17' text-anchor='middle' font-family='Verdana,Helvetica,sans-serif' font-weight='900' font-size='7' fill='%23D72A2A' letter-spacing='0.4'%3ETNT%3C/text%3E%3Crect width='28' height='2' fill='%237a1414' opacity='0.5'/%3E%3Crect y='26' width='28' height='2' fill='%237a1414' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-color: #7a1414;
  box-shadow: 0 0 0 4px rgba(215,42,42,0.45);
  animation: kai-tnt-shake-explode 900ms cubic-bezier(.34,1.5,.42,.96);
  overflow: visible;
}
.theme-kai .drill-check.checked::after {
  /* Disable generic checkmark — the SVG bg has its own "TNT" label */
  content: none;
}
@keyframes kai-tnt-shake-explode {
  0%   { transform: scale(1) rotate(0); border-color: var(--slate-dim); background: var(--slate-1); }
  10%  { transform: scale(1.05) rotate(-4deg); background: var(--slate-1); }
  20%  { transform: scale(1.05) rotate(4deg);  background: var(--slate-1); }
  30%  { transform: scale(1.08) rotate(-3deg); background: var(--slate-1); }
  40%  { transform: scale(1.08) rotate(3deg);  background: var(--slate-1); }
  50%  { transform: scale(1.12) rotate(0); }
  60%  { transform: scale(1.7); background: #FFC72C; border-color: #FF6B1A;
         box-shadow: 0 0 0 18px rgba(255,200,40,0.55), 0 0 80px 36px rgba(255,80,0,0.7); }
  72%  { transform: scale(2.0); background: #FF6B1A;
         box-shadow: 0 0 0 28px rgba(255,80,0,0.35), 0 0 100px 52px rgba(255,40,0,0.55); }
  85%  { transform: scale(0.9); }
  100% { transform: scale(1);
         background-color: #D72A2A;
         background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' fill='%23D72A2A'/%3E%3Crect y='9' width='28' height='10' fill='%23ffffff'/%3E%3Crect y='9' width='28' height='1' fill='%23c8c8c8'/%3E%3Crect y='18' width='28' height='1' fill='%23c8c8c8'/%3E%3Ctext x='14' y='17' text-anchor='middle' font-family='Verdana,Helvetica,sans-serif' font-weight='900' font-size='7' fill='%23D72A2A' letter-spacing='0.4'%3ETNT%3C/text%3E%3C/svg%3E");
         background-size: 100% 100%;
         background-repeat: no-repeat;
         border-color: #7a1414;
         box-shadow: 0 0 0 4px rgba(215,42,42,0.45); }
}
/* Make sure the spark pseudo-element from old rule doesn't interfere */
.theme-kai .drill-check.checked::before { content: none; }

/* ====================================================================
   XANDER — gold Sonic ring on the checkbox
   ==================================================================== */
.theme-xander .drill-check.checked {
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 0 38%, #FFC72C 39% 70%, #c98e00 100%);
  border: 3px solid #FFD23F;
  box-shadow: 0 0 0 4px rgba(255,199,44,0.4), 0 0 22px rgba(255,199,44,0.8);
  animation: x-ring-pickup 800ms cubic-bezier(.34,1.6,.42,.96);
  overflow: visible;
}
.theme-xander .drill-check.checked::after {
  /* Subtle inner sheen — replace check glyph */
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px; height: 3px;
  border: none;
  background: rgba(255,255,255,0.85);
  border-radius: 1.5px;
  transform: rotate(-20deg) translate(-3px, -5px);
  animation: none;
  box-shadow: none;
  filter: blur(0.4px);
}
@keyframes x-ring-pickup {
  0%   { transform: scale(1) rotate(0);
         background: var(--slate-1); border-color: var(--slate-dim);
         box-shadow: 0 0 0 0 rgba(255,199,44,0); }
  25%  { transform: scale(1.45) rotate(220deg);
         background: radial-gradient(circle at center, transparent 0 38%, #fff 39% 70%, #FFC72C 100%);
         border-color: #FFC72C;
         box-shadow: 0 0 0 14px rgba(255,199,44,0.55), 0 0 36px rgba(255,199,44,0.9); }
  60%  { transform: scale(0.8) rotate(540deg);
         box-shadow: 0 0 0 8px rgba(255,199,44,0.4); }
  100% { transform: scale(1) rotate(720deg);
         background: radial-gradient(circle at center, transparent 0 38%, #FFC72C 39% 70%, #c98e00 100%);
         border-color: #FFD23F;
         box-shadow: 0 0 0 4px rgba(255,199,44,0.4), 0 0 22px rgba(255,199,44,0.8); }
}
.theme-xander .drill-check.checked::before {
  content: "✦";
  position: absolute;
  top: -10px; right: -12px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 8px #FFC72C;
  animation: x-ring-sparkle 720ms ease-out;
  pointer-events: none;
}

/* ====================================================================
   PAISLEY — golden winged Snitch on the checkbox (replace the orbit)
   ==================================================================== */
.theme-paisley .drill-check.checked {
  background: radial-gradient(circle at 30% 30%, #f0c87a 0%, #D4A35A 50%, #8b6020 100%);
  border-color: #6D2F5E;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(212,163,90,0.55), 0 0 18px rgba(212,163,90,0.6);
  animation: paisley-snitch-catch 1000ms cubic-bezier(.34,1.4,.5,.98);
  overflow: visible;
}
@keyframes paisley-snitch-catch {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(212,163,90,0); }
  35%  { transform: scale(1.25) rotate(8deg); box-shadow: 0 0 0 12px rgba(212,163,90,0.6), 0 0 30px rgba(212,163,90,0.9); }
  65%  { transform: scale(0.95) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); box-shadow: 0 0 0 4px rgba(212,163,90,0.55), 0 0 18px rgba(212,163,90,0.6); }
}
.theme-paisley .drill-check.checked::after {
  /* Wings flanking the golden ball */
  content: "";
  position: absolute;
  left: -10px; right: -10px;
  top: 50%;
  height: 14px;
  margin-top: -7px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 14'%3E%3Cpath d='M13 7 Q3 2 0 7 Q3 12 13 9 Z' fill='%23ffffff' stroke='%23bbb' stroke-width='0.6'/%3E%3Cpath d='M35 7 Q45 2 48 7 Q45 12 35 9 Z' fill='%23ffffff' stroke='%23bbb' stroke-width='0.6'/%3E%3Cpath d='M13 7 Q7 5 3 8' fill='none' stroke='%23999' stroke-width='0.5'/%3E%3Cpath d='M35 7 Q41 5 45 8' fill='none' stroke='%23999' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  width: auto;
  transform: rotate(0);
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
  animation: paisley-wings-flap 0.6s ease-out 0.4s both;
  box-shadow: none;
}
@keyframes paisley-wings-flap {
  0%   { opacity: 0; transform: scaleY(0.4); }
  60%  { opacity: 1; transform: scaleY(1.1); }
  100% { opacity: 1; transform: scaleY(1); }
}
.theme-paisley .drill-check.checked::before {
  /* Snitch orbit BEFORE settling - keep existing orbit animation */
  content: "✦";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  color: #D4A35A;
  font-size: 16px;
  line-height: 14px;
  text-align: center;
  text-shadow: 0 0 10px #D4A35A, 0 0 14px #fff;
  pointer-events: none;
  animation: paisley-snitch-orbit 900ms cubic-bezier(.4,1.3,.5,1) forwards;
}

/* ====================================================================
   WARRIOR'S CODE — themed corner item hanging on the block
   ==================================================================== */
.code-block { position: relative; }
.code-corner {
  position: absolute;
  top: -22px;
  right: -16px;
  width: 90px;
  height: 100px;
  z-index: 5;
  pointer-events: none;
  text-align: center;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
  transform: rotate(4deg);
}
.code-corner svg {
  width: 100%;
  height: 80px;
  display: block;
}
.code-corner .corner-tag {
  font-family: var(--f-stamp);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--paper-ink-soft);
  margin-top: -4px;
  padding: 2px 4px;
  display: inline-block;
}
.kai-corner    { top: -32px; }
.kai-corner    .corner-tag { color: #D72A2A; }
.xander-corner { top: -28px; transform: rotate(-4deg); }
.xander-corner .corner-tag { color: #1B68E0; }
.ari-corner    { width: 130px; top: -22px; }
.ari-corner    .corner-tag { color: #1F8038; }
.paisley-corner{ width: 130px; top: -10px; transform: rotate(-3deg); }
.paisley-corner .corner-tag { color: #6D2F5E; }

@media (max-width: 640px) {
  .code-corner { display: none; }
}

/* ====================================================================
   EXTRA PER-KID FLARE (mission card / dashboard tint)
   ==================================================================== */

/* Kai — mission card top border pulses red */
.theme-kai .mission::before {
  background: linear-gradient(90deg, #D72A2A 0%, #FFC72C 50%, #D72A2A 100%);
  height: 8px;
  background-size: 200% 100%;
  animation: kai-pulse-band 3s linear infinite;
}
@keyframes kai-pulse-band {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Xander — mission card has speed streaks at top */
.theme-xander .mission::before {
  background:
    repeating-linear-gradient(90deg, #1B68E0 0 40px, #FFC72C 40px 44px, #1B68E0 44px 80px);
  height: 6px;
}

/* Ari — mission card top is pokeball band */
.theme-ari .mission::before {
  background: linear-gradient(180deg, #E63946 0 50%, #fff 50% 100%);
  height: 6px;
  border-bottom: 1px solid #0d0d0d;
}

/* Paisley — mission card top is a gold-rose ribbon with shimmer */
.theme-paisley .mission::before {
  background: linear-gradient(90deg, #B85C8C 0 25%, #D4A35A 40%, #fff 50%, #D4A35A 60%, #B85C8C 75%, #6D2F5E 100%);
  height: 7px;
  background-size: 300% 100%;
  animation: paisley-shimmer 5s linear infinite;
}
@keyframes paisley-shimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}

/* Per-kid star color on the toast */
.theme-kai    .toast.star { background: linear-gradient(135deg, #D72A2A, #FFC72C); color: #fff; }
.theme-xander .toast.star { background: linear-gradient(135deg, #1B68E0, #FFC72C); color: #fff; }
.theme-ari    .toast.star { background: linear-gradient(135deg, #3DBE5C, #E63946); color: #fff; }
.theme-paisley .toast.star{ background: linear-gradient(135deg, #B85C8C, #D4A35A); color: #fff; }

/* Per-kid section title bar accents */
.theme-kai    .section-title::before { background: #D72A2A; box-shadow: 2px 0 0 #5DAA34; }
.theme-xander .section-title::before { background: #1B68E0; box-shadow: 2px 0 0 #FFC72C; }
.theme-ari    .section-title::before { background: #3DBE5C; box-shadow: 2px 0 0 #E63946; }
.theme-paisley .section-title::before{ background: #B85C8C; box-shadow: 2px 0 0 #D4A35A; }
@media (max-width: 900px) {
  .dashboard { grid-template-columns: repeat(3, 1fr); }
  .code-lines { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  .app { padding: 0 16px 60px; }
  .qbar { flex-wrap: wrap; gap: 12px; }
  .qbar-quote { order: 3; flex-basis: 100%; }
  .kidtabs { grid-template-columns: repeat(2, 1fr); }
  .dashboard { grid-template-columns: repeat(2, 1fr); }
  .weektabs { grid-template-columns: repeat(5, 1fr); }
  .belts-grid { grid-template-columns: repeat(5, 1fr); }
  .daytabs { grid-template-columns: repeat(5, 1fr); }
  .cues-grid { grid-template-columns: 1fr; }
  .phase-banner { grid-template-columns: 1fr; }
  .phase-cell { border-right: none; border-bottom: 1px solid var(--slate-border); }
  .drill { grid-template-columns: 28px 1fr; gap: 10px; }
  .drill-reps { grid-column: 2; }
  .drill-video { grid-column: 2; width: auto; justify-self: end; }
}


/* ====================================================================
   TABLET DENSITY OVERRIDES — fit more on Cozyla / large tablet screens
   ==================================================================== */

/* Landscape tablet (sweet spot zoom) */
@media (min-width: 641px) and (max-width: 1280px) {
  body { zoom: 0.88; }
}
@media (min-width: 1281px) and (max-width: 1599px) {
  body { zoom: 0.94; }
}

/* Portrait tablet — same target density as landscape so it doesn't feel huge */
@media (orientation: portrait) and (min-width: 400px) and (max-width: 1024px) {
  body { zoom: 0.82; }
}

/* Show the Warrior's Code corner flare on portrait tablets too;
   only hide on real phones (< 480px). The earlier rule used 640. */
@media (min-width: 480px) {
  .code-corner { display: block !important; }
}

/* Header motif (Minecraft / theme block icons) handling:
   - PHONES (small width AND short height): hide it, no padding needed.
   - Tablet in portrait (narrow CSS width but tall device, like Cozyla 4K
     rotated): keep the motif visible and reserve padding so the subtitle
     text doesn't slide under it. */

/* Phone-only hide: both width AND height are small */
@media (max-width: 760px) and (max-height: 900px) {
  .kid-motif { display: none !important; }
  .cover-title, .cover-subtitle { padding-right: 0 !important; }
}

/* Cozyla / tablet in portrait — narrow viewport but tall device:
   keep motif and pad the text to match the wide-screen padding behavior */
@media (max-width: 760px) and (min-height: 901px) {
  .cover-title { padding-right: 280px !important; }
  .cover-subtitle { padding-right: 280px !important; }
}

/* Disable the Claude Design "tweaks" floating button in production.
   Settings can still be toggled via window.__app or by re-enabling this rule. */
.tweaks-fab,
.tweaks-fab.shown {
  display: none !important;
}