/* ============================================================
   Pal Pad — playful vibrant theme (kids' domain, style-guide
   Step 0): cream paper, saturated chunky buttons, rounded
   friendly type (Quicksand), big radius, soft shadows.
   Child-facing controls >= 88x88 px; admin keeps large touches.
   EMOJI allowed for child-facing icons (Q1 ruling) — chrome is
   ASCII/SVG only.
   ============================================================ */

:root {
  --bg: #FFF6E5;
  --panel: #FFFFFF;
  --panel-2: #FFFBF3;
  --line: #F1E3CE;
  --text: #3E2723;
  --muted: #8D6E63;
  --sun: #FFB300;
  --sky: #4FC3F7;
  --grass: #66BB6A;
  --coral: #FF7043;
  --grape: #AB47BC;
  --peach: #FFAB91;
  --mint: #4DB6AC;
  --red: #E53935;
  --gold: #FFC107;
  --ink-on-color: #FFFFFF;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 6px 18px rgba(62, 39, 35, 0.16);
  --shadow-big: 0 12px 30px rgba(62, 39, 35, 0.22);
  --font: 'Quicksand', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  /* Build 6.8 (Commander): disable double-tap zoom app-wide while keeping
     scroll/pan (touch-action: manipulation = pan + pinch-zoom allowed EXCEPT
     double-tap zoom; combined with the viewport maximum-scale=1.0 +
     user-scalable=no and the app.js gesture guards, iOS Safari cannot zoom
     the app — the young son pinch-zooms and gets stuck). */
  touch-action: manipulation;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- screens ---------- */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  flex-direction: column;
  align-items: center;
}
.screen.active { display: flex; }
.screen::-webkit-scrollbar { width: 0; display: none; }
.screen { scrollbar-width: none; }

.screen-inner {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: auto;
  padding-bottom: 20px;
}

h1.screen-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-align: center;
}

/* ---------- buttons (child-facing: huge) ---------- */
button {
  font-family: var(--font);
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Build 6.8: the other interactive elements get the same double-tap-zoom
   kill (a/.link-btn are the only <a>-style controls; inputs/selects/textarea
   also carry it via their own rule below). Scrolling/panning still works. */
a, .link-btn, label, [role='button'] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:active { transform: scale(0.96); }
button:focus-visible { outline: 4px solid var(--sun); outline-offset: 2px; border-radius: var(--radius); }

.big-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 88px;
  min-height: 88px;
  padding: 16px 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink-on-color);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.3px;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.big-btn .ico { font-size: 44px; line-height: 1; }
.big-btn:active { transform: scale(0.95); box-shadow: var(--shadow-big); }

.bg-sun   { background: linear-gradient(180deg, #FFC94D, var(--sun)); }
.bg-sky   { background: linear-gradient(180deg, #7ED6F8, var(--sky)); }
.bg-grass { background: linear-gradient(180deg, #85D48A, var(--grass)); }
.bg-coral { background: linear-gradient(180deg, #FF8E6B, var(--coral)); }
.bg-grape { background: linear-gradient(180deg, #C05BD1, var(--grape)); }
.bg-peach { background: linear-gradient(180deg, #FFC4B0, var(--peach)); }
.bg-mint  { background: linear-gradient(180deg, #6EC8BC, var(--mint)); }
.bg-gold  { background: linear-gradient(180deg, #FFD54F, var(--gold)); }
.bg-red   { background: linear-gradient(180deg, #EF5350, var(--red)); }
/* Build 5.3 (Commander): MUTED terracotta for the child To-do request
   buttons — the bright amber (#FFB300) was too glaring on the cream
   theme. A calm earth tone that still reads as an action button. */
.bg-terra { background: linear-gradient(180deg, #E7A97E, #CF8B5E); color: #FFF; }
.bg-white { background: var(--panel); color: var(--text); box-shadow: var(--shadow); border: 3px solid #FFE0B2; }

/* ---------- home ---------- */
/* Build 6.1 (Commander): the head row is NOT centered as a group — the
   pal sits LEFT and the stars-chip is pushed to the far right
   (margin-left:auto on .home-head .stars-chip below). */
.home-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
}
.pal-box { flex: 1; display: flex; justify-content: center; position: relative; }
/* Build 6.1 (Commander): the generic .pal-box centering (flex:1 +
   justify-content:center) still applies to the OTHER pal screens; the
   HOME head overrides it so the pal hugs the LEFT edge of the row and
   the stars-chip is pushed to the far right (margin-left:auto). */
.home-head .pal-box { flex: 0 0 auto; justify-content: flex-start; }
.home-head .stars-chip { margin-left: auto; }
/* Build 5.7: the pal is an inline SVG CHARACTER (body = chosen shape) —
   no <img>, no frame, no clip-path. The idle loop runs continuously on
   the child home; .wave/.bounce are one-shot animations. */
.pal-box .pal-character {
  width: 150px;
  height: 150px;
  filter: drop-shadow(0 8px 14px rgba(62, 39, 35, 0.25));
}
.pal-box .pal-character.pal-big { width: 200px; height: 200px; }
.pal-box .pal-character.pal-idle { animation: palidle 3.2s ease-in-out infinite; }
.pal-box .pal-character.wave { animation: palwave 1.6s ease-in-out; }
.pal-box .pal-character.bounce { animation: palbounce 0.7s ease; }
@keyframes palidle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-6px) rotate(-2deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-3px) rotate(2deg); }
}
@keyframes palwave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(4deg); }
}
@keyframes palbounce {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-18px) scale(1.12); }
  70% { transform: translateY(0) scale(0.96); }
  100% { transform: translateY(0) scale(1); }
}

/* Build 5.7: the home pal's speech bubble — Build 5.8 (Commander): the
   bubble sits BESIDE the pal (right side, at the pal's vertical center,
   tail pointing at the pal), NOT above it — above it clipped at the top
   of the screen. Build 6.1 (Commander): the bubble anchors to the
   .pal-anchor WRAPPER (the positioned inline container that hugs the pal
   character — see .pal-anchor below), NOT the full-width .pal-box: via
   left: calc(100% + 14px); top: 50% + translateY it tracks the pal's own
   width and can never reach the stars-chip. max-width clamps to the
   viewport on phones (100vw term) so the bubble's right edge always
   stays on screen. Auto-hide + pep talk unchanged (see homePalTalk). */
.pal-box .pal-character { position: relative; }
/* Build 6.1 (Commander): the speech bubble's REAL anchor — a positioned
   inline container that hugs the pal SVG inside #home-pal (created in
   renderHome). .speech-bubble's left: calc(100% + 14px) resolves against
   THIS element (the pal's own width), not the flex:1 .pal-box, so the
   bubble sits right beside the pal and tracks it. */
.pal-anchor { position: relative; display: inline-block; }
.speech-bubble {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  max-width: min(240px, calc(100vw - 230px));
  background: #fff;
  border: 3px solid #FFE0B2;
  border-radius: 18px;
  padding: 10px 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  box-shadow: var(--shadow-big);
  text-align: center;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 5;
}
/* Tail: on the LEFT edge, pointing LEFT at the pal. */
.speech-bubble::after {
  content: '';
  position: absolute;
  left: -11px;
  top: 50%;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right-color: #fff;
  border-left: 0;
}
.speech-bubble.show { opacity: 1; transform: translateY(calc(-50% - 4px)); }

.stars-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 3px solid #FFE0B2;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 26px;
  font-weight: 700;
  box-shadow: var(--shadow);
}

.home-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.home-grid .big-btn { min-height: 132px; font-size: 24px; }
.home-grid .big-btn .ico { font-size: 52px; }

.prize-bar {
  width: 100%;
  background: var(--panel);
  border: 3px solid #FFE0B2;
  border-radius: 999px;
  padding: 14px 18px;
  box-shadow: var(--shadow);
}
.prize-bar .bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.prize-bar .track {
  height: 22px;
  border-radius: 999px;
  background: #FFE0B2;
  overflow: hidden;
}
.prize-bar .fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #FF8F00);
  width: 0%;
  transition: width 0.5s ease;
}

/* Kid top controls (Build 5.9): the corner GEAR is gone. TOP-RIGHT is a
   kid-friendly HOME button (🏠) — slightly bigger than the old 40px gear
   (52px) so it reads as a clear 'go home' affordance but never a main
   control; TOP-LEFT is the 'Welcome, <name>! 👦/👧/🧒' greeting, now a
   CLICKABLE BUTTON whose dropdown holds Log out (the gear's old job).
   Consoles keep their topbar gear (Settings · Logout admin / Settings ·
   Child account settings · Logout parent). */
#kid-home-btn {
  position: fixed;
  top: 10px;
  left: auto;
  right: 10px;
  bottom: auto;
  font-size: 26px;
  z-index: 70;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 224, 178, 0.85);
  border: 2px solid rgba(255, 190, 110, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  line-height: 1;
}
#kid-home-btn:hover { background: rgba(255, 214, 160, 0.95); }
#kid-home-btn:active { transform: scale(0.92); }
/* Build 5.7 (Commander): kid-screen greeting, TOP-LEFT, 'Welcome,
   <displayName>! 👦/👧/🧒' — a small muted pill. Build 5.9: it is now a
   BUTTON (the logout affordance): tappable, with a ▾ caret; the pill look
   stays so it never screams 'control' to the kid. */
#kid-greeting {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 72px;
  z-index: 69;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-soft, #8A6D5C);
  background: rgba(255, 240, 220, 0.55);
  border: 1px solid rgba(255, 214, 160, 0.5);
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  line-height: 1.2;
  text-align: left;
}
#kid-greeting:hover { background: rgba(255, 224, 178, 0.8); }
#kid-greeting:active { transform: scale(0.98); }
/* keep the kid screens' titles clear of the top-right home button + top-left greeting */
body.kid-screen .screen-inner { padding-top: 54px; }
#kid-menu {
  position: fixed;
  top: 58px;
  left: 12px;
  right: auto;
  bottom: auto;
  z-index: 71;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  max-width: calc(100vw - 24px);
  padding: 8px;
  gap: 4px;
  background: var(--panel);
  border: 3px solid #FFE0B2;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-big);
}
#kid-menu button {
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 19px;
  font-weight: 700;
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text);
}
#kid-menu button:hover { background: #FFF1DC; }
/* the `hidden` attribute must win over any display rule (topbar + kid
   menus, the home button) — author display:flex otherwise beats the
   UA's [hidden] { display:none } */
[hidden] { display: none !important; }

/* ---------- routine flow ---------- */
.routine-card {
  width: 100%;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  border: 3px solid #FFE0B2;
}

.task-btn {
  width: 100%;
  min-height: 110px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 30px;
  font-weight: 700;
  color: var(--ink-on-color);
  text-align: left;
}
.task-btn .ico { font-size: 52px; }
.task-btn .task-label { flex: 1; }
.task-btn .stars { font-size: 22px; letter-spacing: 2px; }

.task-btn.done {
  background: var(--grass);
  opacity: 0.85;
}
.task-btn.skipped {
  background: linear-gradient(180deg, #BCAAA4, #8D6E63);
  opacity: 0.8;
}
.task-btn.done .ico, .task-btn.skipped .ico { filter: grayscale(0.4); }

/* ---------- Build 5.3: To-do TWO SECTIONS (Tasks above Routines) ----------
   Build 5.6 (Commander): the WHOLE CARD is the button — no separate
   Ask button. Each item is one full-width tappable card (min-height 88px,
   kid-friendly), layout [emoji] [label — full width, normal word-wrap]
   [★ N right-aligned]. The asked state tints the card sky-blue. */
.todo-section { margin-bottom: 18px; }
.todo-heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--muted);
  text-align: left;
  margin: 6px 4px 8px;
  letter-spacing: 0.4px;
}
.todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 88px;
  background: var(--panel);
  border: 3px solid #FFE0B2;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  font-family: var(--font);
  font-weight: 700;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.todo-item:active { transform: scale(0.98); }
.todo-item .ico { font-size: 36px; flex: 0 0 auto; }
.todo-item .todo-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 22px;
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: left;
}
.todo-item .todo-stars {
  flex: 0 0 auto;
  min-width: 64px;
  text-align: right;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.todo-item.asked {
  border-color: var(--sky);
  background: #F0FAFF;
}

.flow-progress {
  font-size: 20px;
  font-weight: 600;
  color: var(--muted);
}

.big-label {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-top: 8px;
}




/* ---------- rewards ---------- */
.reward-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 3px solid #FFE0B2;
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}
.reward-card .r-ico { font-size: 72px; }
.reward-card .r-label { font-size: 30px; font-weight: 700; }
.reward-card .r-cost { font-size: 22px; color: var(--muted); }
.reward-card .r-balance { font-size: 26px; font-weight: 700; color: var(--grape); }

.big-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 30px;
  font-weight: 700;
  background: var(--panel);
  border: 3px solid #FFE0B2;
  border-radius: var(--radius);
  padding: 18px 24px;
  width: 100%;
  box-shadow: var(--shadow);
}

/* ---------- pal screen ---------- */
.pal-big {
  width: 220px;
  height: 220px;
  filter: drop-shadow(0 14px 20px rgba(62, 39, 35, 0.28));
}
.pal-name { font-size: 34px; font-weight: 700; }

/* ---------- admin ---------- */
.admin-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.admin-title { font-size: 28px; font-weight: 700; }
.admin-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}
.admin-tabs button {
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  background: var(--panel);
  color: var(--text);
  border: 3px solid #FFE0B2;
  box-shadow: var(--shadow);
}
.admin-tabs button.active { background: var(--grape); color: #fff; border-color: var(--grape); }

.admin-panel {
  width: 100%;
  display: none;
  flex-direction: column;
  gap: 14px;
}
.admin-panel.active { display: flex; }

.row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 3px solid #FFE0B2;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  box-shadow: var(--shadow);
}
.row .row-main { flex: 1; min-width: 0; }
.row .row-title { font-size: 18px; font-weight: 700; }
.row .row-sub { font-size: 14px; color: var(--muted); }
.row .ico { font-size: 30px; }

/* ---------- Build 5.2/6.2: add-task icon — the 16-tile tap grid was
   REMOVED in Build 6.2 (Commander: no emoji selector in the parent
   account); the single emoji-only input lives with the other inputs —
   see .emoji-input / .emoji-input-error below. ---------- */

/* ---------- Build 5.3: labeled assignment fields (add-task / routine
   editor) — every field has a REAL label above the control, not just a
   placeholder. ASCII chrome; the only emoji is the icon the parent
   enters into the Build 6.2 emoji-only field. ---------- */
.assign-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
  margin-top: 8px;
}
.assign-field { display: flex; flex-direction: column; gap: 4px; }
.assign-label-field { flex: 2 1 220px; }
.assign-stars-field { flex: 0 0 110px; }
.assign-emoji-field { flex: 1 1 100%; }
.assign-add { align-self: flex-end; }
.assign-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.3px;
  text-align: left;
}

/* ---------- Build 5.3/5.7: pal shape picker ----------
   Build 5.7 (Commander): the pal has NO background frame anymore — the
   character BODY is the shape (inline SVG). The old .pal-shape-frame +
   clip-path silhouette wrapper is GONE. The shape picker buttons preview
   the character glyphs (currentColor). */
.pal-shape-opt {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--panel);
  border: 4px solid #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pal-shape-opt.selected {
  border-color: #3E2723;
  color: #3E2723;
  transform: scale(1.06);
}

/* ---------- Build 5.2: parent console task rows (no overlap: label/status
   on their own line, controls in a wrapped row BELOW) ---------- */
.task-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--panel);
  border: 3px solid #FFE0B2;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  box-shadow: var(--shadow);
}
.task-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.task-row-main .row-title {
  font-size: 18px;
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.task-row-ctrls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ---------- Build 5.4: Tracker rows (parent console) ---------- */
.tr-row {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tr-row .row-main { flex: 1 1 160px; min-width: 0; }
.tr-check {
  width: 26px;
  height: 26px;
  accent-color: var(--grass);
  flex: 0 0 auto;
  cursor: pointer;
}
.tr-date {
  font-weight: 700;
  color: var(--grape);
}
.tr-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 10px 0 18px;
  padding: 10px 14px;
  background: var(--panel);
  border: 3px solid #FFE0B2;
  border-radius: var(--radius-sm);
}
.tr-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.tr-select-all input { width: 22px; height: 22px; accent-color: var(--grass); cursor: pointer; }
.tr-sum { font-size: 14px; }

/* ---------- Build 6.9: Tracker double-layer collapse (month → date →
   items). Months expanded + dates collapsed by default (Commander). ASCII
   chrome (▾/▸), light cream theme — no emoji in the parent UI. A month
   header toggles ALL its dates; a date header toggles its items. The ★
   totals on each header = earned stars (completed routine/task entries
   only) — redeemed-goal costs never count. ---------- */
.tl-month {
  width: 100%;
  background: var(--panel);
  border: 3px solid #FFE0B2;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  overflow: hidden;
}
.tl-month-head, .tl-date-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  font-family: var(--font);
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}
.tl-month-head { background: #FFF3E0; font-size: 18px; }
.tl-date-head { font-size: 15px; }
.tl-month-head:hover, .tl-date-head:hover { background: #FFF1DC; }
.tl-caret {
  flex: 0 0 auto;
  width: 18px;
  font-size: 14px;
  color: var(--muted);
}
.tl-total {
  margin-left: auto;
  font-size: 14px;
  color: var(--grape);
  white-space: nowrap;
  font-weight: 700;
}
.tl-dates {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px 12px;
}
.tl-month.collapsed .tl-dates, .tl-month.collapsed .tl-dates[hidden] { display: none; }
.tl-date {
  width: 100%;
  background: var(--panel-2);
  border: 2px solid #F1E3CE;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tl-date-head { background: var(--panel-2); }
.tl-items {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 10px 10px;
}
.tl-items[hidden] { display: none; }
.tl-item { padding: 8px 10px; }
.tl-item .row-title { font-size: 15px; }
.tl-item .row-sub { font-size: 13px; }
.tl-redeemed { border-style: dashed; background: #FFFDF7; }

.field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.field label { font-size: 16px; font-weight: 700; }

input[type='text'], input[type='number'], input[type='time'], input[type='email'], input[type='password'], select, textarea {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  background: #FFFDF7;
  border: 3px solid #FFE0B2;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
  min-height: 48px;
  /* Build 6.8: no double-tap zoom on form fields either (iOS Safari
     auto-zooms on focus only when font-size < 16px — all fields here are
     18px+, so no auto-zoom, and touch-action kills the double-tap zoom). */
  touch-action: manipulation;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(79, 195, 247, 0.3);
}
textarea { min-height: 90px; resize: vertical; }

/* ---------- Build 6.2 (Commander): emoji-only icon input — accepts ONE
   emoji grapheme; non-emoji input is REJECTED with an inline error (the
   value keeps its last valid state). Replaces the Build 5.2 tap grid. ---------- */
.emoji-input {
  width: 160px;
  min-height: 52px;
  padding: 8px 12px;
  text-align: center;
  font-size: 26px;
  line-height: 1;
}
.emoji-input-error {
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  text-align: left;
  letter-spacing: 0.2px;
}

.ctrl-btn {
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  box-shadow: var(--shadow);
}
.ctrl-btn.small { min-height: 42px; padding: 6px 14px; font-size: 14px; }
.ctrl-btn.ghost { background: var(--panel); color: var(--text); border: 3px solid #FFE0B2; }
.ctrl-btn.danger { background: var(--red); }
.ctrl-btn.ok { background: var(--grass); }
.ctrl-btn.warn { background: var(--sun); color: var(--text); }

/* ---------- modal system (no alert/confirm/prompt) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(62, 39, 35, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-box {
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--panel);
  border-radius: var(--radius);
  border: 4px solid #FFE0B2;
  box-shadow: var(--shadow-big);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-title { font-size: 26px; font-weight: 700; text-align: center; }
.modal-msg { font-size: 18px; text-align: center; line-height: 1.45; }
.modal-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.modal-actions .ctrl-btn { min-height: 56px; font-size: 18px; padding: 12px 22px; }
.modal-overlay.shake .modal-box { animation: modalshake 0.4s; }
@keyframes modalshake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-12px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-8px); }
  80% { transform: translateX(6px); }
}

/* PIN pad */
.pin-display {
  text-align: center;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 14px;
  min-height: 52px;
  color: var(--grape);
}
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}
.pin-key {
  min-height: 72px;
  border-radius: var(--radius-sm);
  font-size: 30px;
  font-weight: 700;
  background: var(--panel);
  border: 3px solid #FFE0B2;
  color: var(--text);
  box-shadow: var(--shadow);
}

/* ---------- toasts ---------- */
#toast-root {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--text);
  color: var(--bg);
  font-size: 18px;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 999px;
  box-shadow: var(--shadow-big);
  animation: toastin 0.25s ease;
  max-width: 90vw;
  text-align: center;
}
@keyframes toastin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- celebration (Build 6.3: FIREWORKS) ----------
   The old confetti / flying-star overlay is GONE — celebrate() now draws
   a real fireworks explosion on #fx-canvas (radial burst physics: gravity,
   drag, glow, trails, fade-out). The star-landing POPUP sits above the
   canvas so bursts appear to radiate from behind/around it. Brief +
   localized — no full-screen strobing. */
#fx-root { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.fx-canvas { position: absolute; inset: 0; display: block; }

/* Star-landing popup: themed cream panel, centered, BIG kid text. The
   overlay is NON-blocking (pointer-events: none — taps pass through to
   the home screen); the YAY! button is the primary dismissal
   (pointer-events: auto). Generous ~8s auto-dismiss fallback in app.js. */
.star-popup {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: starpopin 0.28s ease-out;
}
.star-popup-box {
  background: var(--panel);
  border: 4px solid #FFD54F;
  border-radius: 28px;
  box-shadow: var(--shadow-big);
  padding: 26px 34px 22px;
  text-align: center;
  max-width: min(88vw, 440px);
}
.star-popup-msg {
  font-size: 30px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}
.star-popup-yay {
  pointer-events: auto;
  margin-top: 18px;
  min-width: 170px;
  min-height: 88px;
  font-size: 36px;
  font-weight: 900;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, #FFD54F, #FFB300);
  color: #3E2723;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.08s ease;
}
.star-popup-yay:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }
@keyframes starpopin {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- responsive (tablet portrait 720x1280 class + phone) ---------- */
@media (max-width: 520px) {
  .screen { padding: 14px; }
  h1.screen-title { font-size: 28px; }
  .home-grid .big-btn { min-height: 118px; }
  .home-grid .big-btn .ico { font-size: 44px; }
  .pal-box .pal-character { width: 120px; height: 120px; }
  .pal-box .pal-character.pal-big { width: 160px; height: 160px; }
  /* Build 6.3: star-landing popup text scales down on phones */
  .star-popup-msg { font-size: 24px; }
  .star-popup-yay { min-width: 150px; min-height: 76px; font-size: 30px; }
}

@media (max-height: 620px) {
  .home-grid .big-btn { min-height: 100px; }
  .home-grid .big-btn .ico { font-size: 38px; }
  .pal-box .pal-character { width: 100px; height: 100px; }
}

/* ============================================================
   Account layer (PIVOT + UAC): topbar/gear menu, password
   checklist (live), kid login picker, child switcher.
   ============================================================ */

/* ---------- account topbar (Welcome, <displayName> + gear) ---------- */
.topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel);
  border: 3px solid #FFE0B2;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  box-shadow: var(--shadow);
}
.topbar-welcome { font-size: 18px; font-weight: 700; }
.topbar-welcome b { color: var(--grape); }
.gear-wrap { position: relative; }
.gear-btn {
  min-width: 46px;
  min-height: 46px;
  border-radius: 50%;
  border: 3px solid #FFE0B2;
  background: var(--bg);
  font-size: 22px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.gear-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 90;
  background: var(--panel);
  border: 3px solid #FFE0B2;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-big);
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 6px;
  gap: 4px;
}
.gear-menu button {
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
}
.gear-menu button:hover { background: #FFF1DC; }

/* ---------- password checklist (UAC §5: 28px green filled / hollow ring) ---------- */
.pw-check {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 4px 0 10px;
}
.pw-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pw-dot {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  background: transparent;
  border: 2px solid #D1D5DB; /* hollow gray ring — unmet */
}
.pw-text { font-size: 15px; font-weight: 700; color: #8D6E63; } /* gray — unmet */
.pw-item.pw-ok .pw-dot {
  background: #1B9C5E;       /* filled green — met */
  border-color: #1B9C5E;
}
.pw-item.pw-ok .pw-text { color: #1B9C5E; }

/* ---------- kid login picker (big avatar/name buttons) ---------- */
.kid-picker {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.kid-card {
  min-width: 150px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--panel);
  border: 4px solid #FFE0B2;
  border-radius: 26px;
  box-shadow: var(--shadow);
  cursor: pointer;
  font-family: var(--font);
  padding: 14px;
}
.kid-card.active { border-color: var(--grape); }
.kid-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.18);
}
.kid-avatar img { width: 74px; height: 74px; }
.kid-name { font-size: 24px; font-weight: 800; color: var(--text); }
.kid-user { font-size: 13px; color: var(--muted); }

/* kid password entry — big, friendly */
.kid-pass-box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.kid-pass-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -8px 16px rgba(0,0,0,0.18);
}
.kid-pass-avatar img { width: 92px; height: 92px; }
.kid-pass-input {
  width: 100%;
  max-width: 300px;
  min-height: 72px;
  font-size: 34px;
  text-align: center;
  letter-spacing: 0.35em;
  border-radius: var(--radius-sm);
  border: 3px solid #FFE0B2;
  background: var(--bg);
  font-family: var(--font);
  color: var(--text);
  padding: 10px;
}

/* ---------- parent child switcher (1:many) ---------- */
.child-switch {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.child-switch .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 3px solid #FFE0B2;
  background: var(--panel);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.child-switch .chip.active { background: var(--grape); color: #fff; border-color: var(--grape); }
/* Build 5.7 (Commander): the SELECTED child-switcher chip follows the
   child's gender — boy = blue, girl = pink, unset = warm neutral — clearly
   distinct from the purple menu/tab highlight. */
.child-switch .chip.active.gender-boy { background: #1E88E5; border-color: #1E88E5; }
.child-switch .chip.active.gender-girl { background: #EC407A; border-color: #EC407A; }
.child-switch .chip.active.gender-neutral { background: #8D6E63; border-color: #8D6E63; }
.chip-dot {
  width: 16px;
  height: 16px;
  min-width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Build 5.7 (Commander): avatar dots render the pal CHARACTER glyph (the
   body IS the shape) in the child's pal color — no clip-path shapes. */
.pal-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-kid-dot.pal-dot { box-shadow: none; }

@media (max-width: 520px) {
  .kid-card { min-width: 130px; min-height: 150px; }
  .kid-avatar { width: 72px; height: 72px; }
  .kid-avatar img { width: 60px; height: 60px; }
}

/* ================= Build 4.0: standard login, launcher, admin read-only kids ================= */

/* login page (one form for all roles) */
.login-wrap { gap: 14px; }
.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-big);
  border: 3px solid #FFE0B2;
}
.login-card input {
  font-size: 20px;
  min-height: 56px;
  padding: 10px 16px;
}
.login-hint { font-size: 14px; text-align: center; line-height: 1.5; }
.screen.shake { animation: screenshake 0.4s; }
@keyframes screenshake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* launcher (child landing screen) */
.launcher-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--muted);
  text-transform: uppercase;
}

/* admin User Management Panel: read-only children under each parent */
.admin-kids {
  width: 100%;
  margin: 0 0 12px 46px;
  padding: 10px 14px;
  background: #FFF3E0;
  border: 2px dashed #FFE0B2;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-kids-label { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.admin-kid {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}
.admin-kid-dot {
  width: 12px;
  height: 12px;
  min-width: 12px;
  border-radius: 50%;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.18);
}
.admin-kid-name { font-weight: 700; }
.admin-kid-sub { color: var(--muted); font-size: 13px; }

/* parent console: volume slider label (ASCII chrome) */
.vol-label { font-size: 14px; font-weight: 800; color: var(--muted); min-width: 30px; text-align: center; }

/* ================= Build 4.2: child picker (parent console landing) ================= */
.picker-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  margin: 10px auto;
}
.picker-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-height: 92px;
  padding: 14px 18px;
  text-align: left;
  flex-direction: row;
}
.picker-card .chip-dot {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  box-shadow: inset 0 -3px 5px rgba(0,0,0,0.2);
}
.picker-card .picker-name {
  font-size: 22px;
  font-weight: 800;
  flex: 1;
}
.picker-card .picker-sub {
  font-size: 14px;
  color: var(--muted);
}

/* ================= Build 4.2: Settings screen sections ================= */
.settings-box { max-width: 460px; }
.settings-section {
  border-top: 2px solid #FFE0B2;
  margin-top: 14px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.settings-head {
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}

/* Build 4.2: discreet admin recovery link on the login page */
.link-btn {
  background: none;
  border: none;
  padding: 6px 4px;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  color: var(--muted);
}
.link-btn:hover { color: var(--text); }

/* ================= Build 5.6: MOBILE WIDTH AUDIT (Commander: 'A lot of
   the interface exceeds a normal phone browser width') =================
   Every screen must fit a ~360px phone without horizontal scroll:
   flex children get min-width:0 so they can shrink, non-wrapping rows
   wrap, and narrow viewports tighten padding/gaps. Tap targets stay
   >= 88px where it matters (child cards, big buttons) while controls
   are allowed to wrap/shrink. */
.topbar { min-width: 0; }
.topbar-welcome { min-width: 0; overflow-wrap: anywhere; }
.admin-panel { min-width: 0; }
#parent-panels { width: 100%; min-width: 0; }
.screen-inner { min-width: 0; }
.stars-chip { min-width: 0; overflow-wrap: anywhere; }
.task-row { min-width: 0; }
.task-row-ctrls { min-width: 0; }
.task-row-ctrls .stars-sel { flex: 0 0 auto; }
.tr-row .row-main { flex: 1 1 140px; min-width: 0; }
.tr-toolbar { min-width: 0; }
.picker-grid { min-width: 0; }
.home-grid { min-width: 0; }
.assign-form { min-width: 0; }
.assign-stars-field { flex: 0 0 auto; }
.assign-label-field { min-width: 0; }
.gear-menu { max-width: calc(100vw - 20px); }
.row { min-width: 0; flex-wrap: wrap; }

@media (max-width: 400px) {
  .screen { padding: 12px; }
  .todo-item { gap: 8px; padding: 10px 10px; }
  .todo-item .ico { font-size: 30px; }
  .todo-item .todo-stars { font-size: 17px; min-width: 52px; }
  .todo-heading { font-size: 18px; }
  .admin-tabs { gap: 6px; }
  .admin-tabs button { padding: 8px 12px; font-size: 15px; min-height: 42px; }
  .ctrl-btn { padding: 8px 14px; }
  .ctrl-btn.small { padding: 5px 10px; }
  .task-row { padding: 10px 10px; }
  .row { padding: 10px 10px; }
  .tr-row .row-main { flex-basis: 120px; }
  .topbar { padding: 8px 10px; }
  .topbar-welcome { font-size: 16px; }
  .gear-btn { min-width: 40px; min-height: 40px; }
  .home-grid .big-btn { min-height: 118px; }
  .picker-card { min-height: 84px; padding: 12px 14px; }
  .stars-chip { font-size: 22px; padding: 8px 14px; }
}


/* ============================================================
   Build 6.8 (Commander): LANDSCAPE-OPTIMIZED CHILD INTERFACE.
   iPads in landscape are ~1024x768 and up; phones in landscape are
   SHORTER than 600px — the min-height guard keeps phones (landscape
   AND portrait), and desktop/parent-admin consoles untouched
   (parent/admin never carry body.kid-screen). EVERY rule here is
   scoped to body.kid-screen so only child screens change:
   launcher, To-do, Goals/Rewards,
   text >= 16px, touch targets >= 44x44px, the in-screen bottom
   🏠 Home button (big-btn bg-white data-back) is never touched, and
   the light cream theme is unchanged.
   ============================================================ */
@media (orientation: landscape) and (min-height: 600px) {
  /* ---------- global vertical rhythm compaction (all kid screens) ---------- */
  body.kid-screen .screen { padding: 10px 16px; }
  body.kid-screen .screen-inner { padding-top: 42px; gap: 10px; }
  body.kid-screen h1.screen-title { font-size: 26px; }
  body.kid-screen .big-label { font-size: 20px; margin-top: 2px; }
  body.kid-screen .flow-progress { font-size: 17px; }

  /* ---------- launcher ---------- */
  body.kid-screen .home-head { gap: 10px; }
  body.kid-screen .home-head .pal-box .pal-character { width: 110px; height: 110px; }
  body.kid-screen .stars-chip { font-size: 20px; padding: 6px 12px; }
  body.kid-screen .prize-bar { padding: 10px 14px; }
  body.kid-screen .prize-bar .bar-label { font-size: 16px; margin-bottom: 4px; }
  body.kid-screen .prize-bar .track { height: 16px; }
  body.kid-screen .launcher-title { font-size: 16px; margin-top: 0; }
  body.kid-screen .home-grid { gap: 10px; }
  body.kid-screen .home-grid .big-btn { min-height: 104px; font-size: 20px; padding: 12px 14px; }
  body.kid-screen .home-grid .big-btn .ico { font-size: 40px; }

  /* ---------- To-do: 2-COLUMN grids — each section (Tasks on top,
     Routines below) keeps its OWN grid; section headers span BOTH
     columns so a typical task list fits a landscape iPad without
     scrolling ---------- */
  body.kid-screen .todo-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
  }
  body.kid-screen .todo-section .todo-heading { grid-column: 1 / -1; margin: 2px 2px 0; }
  body.kid-screen .todo-item { margin-bottom: 0; width: 100%; min-height: 88px; padding: 10px 12px; gap: 10px; }
  body.kid-screen .todo-item .ico { font-size: 30px; }
  body.kid-screen .todo-item .todo-label { font-size: 18px; }
  body.kid-screen .todo-item .todo-stars { font-size: 16px; min-width: 44px; }

  /* ---------- routine flow (one-tap screen) ---------- */
  body.kid-screen .task-btn { min-height: 96px; font-size: 24px; padding: 12px 18px; }
  body.kid-screen .task-btn .ico { font-size: 40px; }
  body.kid-screen .task-btn .stars { font-size: 18px; }


  /* ---------- Goals / Rewards: the goal cards flow into a 2-COLUMN
     grid (headers/stats/explainer/Home span both columns) ---------- */
  body.kid-screen #screen-rewards .screen-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-items: stretch;
  }
  body.kid-screen #screen-rewards .screen-inner > h1,
  body.kid-screen #screen-rewards .screen-inner > .big-stat,
  body.kid-screen #screen-rewards .screen-inner > .big-label,
  body.kid-screen #screen-rewards .screen-inner > .r-cost,
  body.kid-screen #screen-rewards .screen-inner > [data-back] { grid-column: 1 / -1; }
  body.kid-screen .reward-card { padding: 14px 12px; gap: 6px; }
  body.kid-screen .reward-card .r-ico { font-size: 48px; }
  body.kid-screen .reward-card .r-label { font-size: 22px; }
  body.kid-screen .reward-card .r-cost { font-size: 17px; }
  body.kid-screen .big-stat { font-size: 22px; padding: 10px 16px; }

  /* ---------- Pal ---------- */
  body.kid-screen .pal-box .pal-character.pal-big { width: 140px; height: 140px; }
  body.kid-screen .pal-name { font-size: 24px; }
  body.kid-screen #screen-pal .field { gap: 4px; }

}

/* ---------- Charity Edition wave 1: staff confirm popups (Yes/No) ---------- */
.confirm-yesno {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
  width: 100%;
}
.confirm-yesno .ctrl-btn {
  flex: 1;
  min-height: 60px;
  font-size: 19px;
}
.confirm-yesno .ctrl-btn.ok { background: linear-gradient(180deg, #FFD54F, #FFB300); }