:root {
  color-scheme: light dark;
  --background: #fff7f9;
  --surface: #fffcfd;
  --text: #35283f;
  --text-muted: #68576f;
  --accent: #a92e59;
  --on-accent: #fffcfd;
  --control-border: #92778c;
  --focus: #794092;
  --success: #286447;
  --warning: #805500;
  --danger: #a62640;
  --scene-sky: #dceef8;
  --scene-mint: #dceee1;
  --scene-butter: #f9e6ab;
  --radius-control: 12px;
  --radius-button: 20px;
  --radius-panel: 28px;
  --shadow-panel: 0 8px 22px rgb(73 43 69 / 8%);
  font-family: ui-rounded, "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #211d29;
    --surface: #302938;
    --text: #fff4f8;
    --text-muted: #d1bed5;
    --accent: #f5a6c4;
    --on-accent: #35283f;
    --control-border: #ad91a9;
    --focus: #d7b5f5;
    --success: #a9dfc2;
    --warning: #f6d681;
    --danger: #ffb2c1;
    --scene-sky: #354354;
    --scene-mint: #334c42;
    --scene-butter: #675737;
    --shadow-panel: 0 8px 24px rgb(0 0 0 / 25%);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--background); scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
body { min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--background); color: var(--text); font-size: 16px; line-height: 1.5; }
button, input { color: inherit; font: inherit; }
button { touch-action: manipulation; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3 { margin-top: 0; }
h1, h2, h3 { line-height: 1.2; }
p { line-height: 1.5; }
.app-shell { min-height: 100dvh; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 50; inset-block-start: max(8px, env(safe-area-inset-top, 0px)); inset-inline-start: max(8px, env(safe-area-inset-left, 0px)); padding: 10px 16px; transform: translateY(calc(-100% - max(8px, env(safe-area-inset-top, 0px)) - 12px)); border: 2px solid var(--control-border); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font-size: 16px; font-weight: 800; box-shadow: var(--shadow-panel); }
.skip-link:focus-visible { transform: translateY(0); outline: 3px solid var(--focus); outline-offset: 3px; }
.icon { width: 24px; height: 24px; flex: 0 0 auto; color: currentColor; }
.screen-frame { min-height: 100dvh; }
.top-bar { width: min(100%, 1088px); min-height: 64px; margin: 0 auto; padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand-wordmark { color: var(--text); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.brand-wordmark.small { font-size: 18px; }
.parent-entry { min-width: 88px; min-height: 48px; padding: 8px 12px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; border: 2px solid var(--control-border); border-radius: var(--radius-button); background: var(--surface); color: var(--text); font-size: 16px; font-weight: 700; }
.parent-entry .icon { width: 20px; height: 20px; }
.page-content { width: min(100%, 1088px); margin: 0 auto; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(112px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
#main-content:focus { outline: none; }
#main-content:focus-visible h1 { outline: 3px solid var(--focus); outline-offset: 5px; border-radius: 4px; }
.page-content > *, .home-layout > * { min-width: 0; }
.page-title { margin-bottom: 16px; font-size: clamp(28px, 7vw, 36px); font-weight: 800; letter-spacing: -.025em; overflow-wrap: anywhere; }
.page-title:focus:not(:focus-visible) { outline: none; }
.page-title:focus-visible, .game-session-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; border-radius: 4px; }
.supporting-copy { color: var(--text-muted); margin-bottom: 0; }
.button { min-height: 56px; padding: 12px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid transparent; border-radius: var(--radius-button); font-size: 18px; font-weight: 800; line-height: 1.2; text-align: center; transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease; }
.button:active { transform: scale(.98); }
.button-primary { background: var(--accent); color: var(--on-accent); }
.button-secondary { border-color: var(--control-border); background: var(--surface); color: var(--text); }
.button-danger { border-color: var(--danger); background: var(--surface); color: var(--danger); }
.button-stack { display: grid; gap: 12px; width: 100%; max-width: 420px; }
.full-button { width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.home-layout { display: grid; gap: 16px; }
.world-scene { position: relative; width: 100%; min-width: 0; height: clamp(220px, 64vw, 300px); overflow: hidden; isolation: isolate; border: 2px solid var(--control-border); border-radius: var(--radius-panel); background: var(--scene-sky); box-shadow: var(--shadow-panel); }
.meadow-background { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.world-label { position: absolute; top: 14px; left: 14px; max-width: calc(100% - 28px); margin: 0; padding: 8px 14px; border: 1px solid var(--control-border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 18px; font-weight: 800; }
.scene-characters { position: absolute; right: 8%; bottom: 4%; height: 67%; display: flex; align-items: end; gap: 0; }
.hero-avatar { width: auto; height: 100%; filter: drop-shadow(0 5px 4px rgb(53 40 63 / 15%)); }
.hero-companion { width: auto; height: 70%; margin: 0 0 2% -10px; filter: drop-shadow(0 4px 3px rgb(53 40 63 / 12%)); }
.progress-panel, .quest-preview, .next-area, .quest-card, .approval-panel, .future-page { border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-panel); }
.progress-panel { padding: 18px 20px; }
.stat-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.level-pill { margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--scene-butter); color: var(--text); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.coin-count { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.coin-count .icon { color: var(--warning); }
.coin-count .supporting-copy { font-size: 16px; font-weight: 600; }
.progress-label { display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 16px; font-weight: 700; }
.xp-progress, .area-progress { display: block; width: 100%; height: 16px; overflow: hidden; border: 2px solid var(--control-border); border-radius: 99px; background: var(--surface); accent-color: var(--accent); }
.xp-progress::-webkit-progress-bar, .area-progress::-webkit-progress-bar { border-radius: 99px; background: var(--surface); }
.xp-progress::-webkit-progress-value { border-radius: 99px; background: var(--accent); }
.area-progress::-webkit-progress-value { border-radius: 99px; background: var(--success); }
.xp-progress::-moz-progress-bar { border-radius: 99px; background: var(--accent); }
.area-progress::-moz-progress-bar { border-radius: 99px; background: var(--success); }
.progress-panel > .supporting-copy { margin-top: 6px; font-size: 14px; }
.quest-preview { padding: 20px; border: 2px solid var(--control-border); }
.section-heading { margin: 0 0 10px; font-size: 21px; font-weight: 800; }
.quest-preview-title { margin-bottom: 14px; font-size: 20px; font-weight: 700; }
.next-area { padding: 20px; background: var(--scene-mint); }
.next-area .eyebrow { margin-bottom: 4px; color: var(--text-muted); font-size: 14px; font-weight: 800; }
.next-area h2 { margin-bottom: 6px; font-size: 23px; }
.next-area p:not(.eyebrow) { margin-bottom: 12px; }
.quest-preview .button { min-height: 64px; }

.quest-list { display: grid; gap: 16px; }
.quest-card { min-height: 140px; padding: 16px; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; border: 2px solid var(--control-border); }
.quest-picture { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: var(--scene-butter); color: var(--text); }
.quest-symbol { width: 36px; height: 36px; }
.quest-details { min-width: 0; }
.quest-details h2 { margin-bottom: 4px; font-size: 23px; overflow-wrap: anywhere; }
.reward-line { margin: 0; color: var(--text-muted); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.quest-status { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-weight: 800; }
.status-pending { color: var(--warning); }
.status-success { color: var(--success); }
.quest-status .icon { width: 20px; height: 20px; }
.quest-action { grid-column: 1 / -1; width: 100%; }
.friendly-note { margin: 4px 0; color: var(--text-muted); font-size: 18px; }
.inline-error { margin: 0; padding: 12px 14px; border: 1px solid var(--danger); border-radius: var(--radius-control); color: var(--danger); font-weight: 700; }
.future-page { max-width: 620px; min-height: 260px; padding: 32px 22px; display: grid; justify-items: center; align-content: center; gap: 12px; text-align: center; background: var(--scene-sky); }
.future-page h2 { margin: 0; font-size: 26px; }
.future-page p { max-width: 34ch; margin: 0; color: var(--text-muted); font-size: 18px; }
.future-icon { width: 52px; height: 52px; color: var(--accent); }

.bottom-nav { position: fixed; z-index: 10; right: 0; bottom: 0; left: 0; min-height: calc(72px + env(safe-area-inset-bottom, 0px)); padding: 4px max(4px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; border-top: 1px solid var(--control-border); background: var(--surface); }
.nav-item { min-width: 0; min-height: 64px; padding: 4px 1px; display: grid; place-items: center; align-content: center; gap: 2px; border: 0; border-radius: 12px; background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 700; line-height: 1.1; }
.nav-item .icon { width: 24px; height: 24px; }
.nav-item span { max-width: 100%; overflow-wrap: anywhere; }
.nav-item[aria-current="page"] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--text); box-shadow: inset 0 -3px 0 var(--accent); }

.setup-page { width: min(100%, 720px); min-height: 100dvh; margin: 0 auto; padding: calc(24px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) calc(36px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); }
.setup-page .brand-wordmark { margin-bottom: 22px; }
.setup-page .page-title { margin-bottom: 6px; }
.intro-copy { margin-bottom: 20px; color: var(--text-muted); font-size: 18px; }
.setup-form { display: grid; gap: 10px; }
.field-label { display: block; margin: 8px 0 2px; font-size: 17px; font-weight: 800; }
.setup-form input[type="text"], .setup-form input[type="password"], .pin-form input { width: 100%; min-height: 52px; padding: 10px 13px; border: 2px solid var(--control-border); border-radius: var(--radius-control); background: var(--surface); font-size: 18px; }
.choice-group { min-width: 0; margin: 8px 0 2px; padding: 0; border: 0; }
.choice-group legend { margin-bottom: 8px; font-size: 17px; font-weight: 800; }
.choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice-card { position: relative; min-height: 78px; padding: 8px 10px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--control-border); border-radius: 20px; background: var(--surface); font-size: 17px; font-weight: 800; cursor: pointer; }
.choice-card:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice-card input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.choice-art { width: 38px; height: 50px; flex: 0 0 auto; }
.field-help { margin: 0; color: var(--text-muted); font-size: 15px; }
.field-error { min-height: 24px; margin: 0; color: var(--danger); font-weight: 700; }
.sample-quest-note { margin: 6px 0 4px; padding: 14px; display: flex; align-items: center; gap: 12px; border-radius: 18px; background: var(--scene-butter); color: var(--text); }
.sample-quest-note .icon { width: 28px; height: 28px; }
.sample-quest-note p { margin: 0; font-weight: 700; }
.storage-note { margin: 18px 0 0; color: var(--text-muted); font-size: 14px; }

.message-page { width: min(100%, 612px); min-height: 100dvh; margin: auto; padding: calc(48px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(36px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.message-icon { width: 64px; height: 64px; margin-bottom: 18px; display: grid; place-items: center; border-radius: 24px; background: var(--scene-butter); }
.message-icon .icon { width: 36px; height: 36px; }
.message-page h1 { margin-bottom: 8px; font-size: 32px; }
.message-page > p { max-width: 52ch; color: var(--text-muted); font-size: 18px; }
.message-page .button-stack { margin-top: 10px; }

.parent-top { min-height: 72px; }
.parent-content { width: min(100%, 760px); padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
.approval-panel { margin-top: 20px; padding: 20px; border: 1px solid var(--control-border); }
.approval-panel > .section-heading { margin-bottom: 16px; }
.approval-row { padding: 16px 0 0; border-top: 1px solid var(--control-border); }
.approval-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.approval-heading h3 { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.approval-heading p { margin: 0; font-weight: 800; }
.approval-row .supporting-copy { margin: 8px 0 16px; }
.approval-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.approval-actions .button { min-height: 48px; font-size: 17px; }
.empty-message { margin: 0; padding: 16px; border-radius: 16px; background: var(--scene-mint); color: var(--text); font-weight: 700; }
.parent-note { max-width: 62ch; margin-top: 20px; color: var(--text-muted); font-size: 14px; }
.feedback-banner { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--scene-mint); color: var(--text); font-weight: 700; }
.feedback-error { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); }
.feedback-info { background: var(--scene-sky); }

.pin-dialog { width: min(calc(100vw - max(12px, env(safe-area-inset-left, 0px)) - max(12px, env(safe-area-inset-right, 0px))), 420px); padding: 0; border: 1px solid var(--control-border); border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: 0 24px 70px rgb(20 10 30 / 25%); }
.pin-dialog::backdrop { background: rgb(28 20 33 / 55%); }
.pin-form { padding: 22px; }
.pin-form h2 { margin-bottom: 6px; font-size: 26px; }
.pin-form > p:not(.field-error) { color: var(--text-muted); }
.pin-form .field-label { margin-top: 16px; }
.dialog-actions { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dialog-actions .button { min-height: 48px; padding: 10px 12px; font-size: 16px; }

@media (min-width: 768px) {
  .top-bar { min-height: 72px; padding-inline: max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px)); }
  .page-content { padding: 18px max(24px, env(safe-area-inset-right, 0px)) calc(112px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); }
  .home-layout { grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); align-items: start; gap: 20px; }
  .world-scene { grid-row: span 2; height: auto; min-height: 340px; aspect-ratio: 1.2 / 1; }
  .progress-panel { grid-column: 2; }
  .quest-preview { grid-column: 2; }
  .next-area { grid-column: 2; }
  .setup-page { padding: calc(32px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); }
  .choice-card { justify-content: flex-start; padding-inline: 16px; }
  .parent-content { max-width: 760px; }
  .message-page { padding-block: calc(48px + env(safe-area-inset-top, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 1024px) {
  .home-layout { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }
  .world-scene { min-height: 400px; }
  .page-content { width: min(100%, 1088px); }
}

@media (max-width: 360px) {
  .top-bar { padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); }
  .page-content { padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); }
  .bottom-nav { padding-inline: max(2px, env(safe-area-inset-left, 0px)) max(2px, env(safe-area-inset-right, 0px)); gap: 0; }
  .nav-item { font-size: 14px; }
  .world-scene { height: 230px; min-height: 0; aspect-ratio: auto; }
  .scene-characters { right: 5%; }
  .quest-card { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .quest-picture { width: 54px; height: 54px; }
  .setup-page { padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)); }
  .choice-card { gap: 4px; padding-inline: 6px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* M2 parent quest management */
.parent-content { max-width: 960px; }
.parent-section-control { width: min(100%, 420px); margin: 0 0 22px; }
.parent-section-control .field-label { margin-top: 0; }
.field-control {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
}
.field-control:disabled { opacity: .65; }
.field-textarea { min-height: 96px; resize: vertical; }
.parent-section-content { display: grid; gap: 18px; }
.parent-dashboard { display: grid; gap: 18px; }
.dashboard-counts { display: grid; gap: 12px; }
.dashboard-count-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--control-border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}
.dashboard-count-label { margin: 0; color: var(--text-muted); font-weight: 700; }
.dashboard-count-value { margin: 2px 0 14px; font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dashboard-count-card .button { width: 100%; min-height: 48px; font-size: 16px; }
.section-title-row { display: grid; gap: 12px; align-items: center; }
.section-title-row .supporting-copy { margin: 0; }
.section-title-row .button { width: 100%; min-height: 48px; }
.task-form {
  width: min(100%, 680px);
  margin: 0 0 24px;
  padding: 18px;
  display: grid;
  gap: 12px;
  border: 1px solid var(--control-border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}
.task-form > .section-heading { margin-bottom: 2px; }
.task-form .field-label { margin: 0 0 5px; font-size: 16px; }
.task-field { min-width: 0; }
.task-form fieldset { min-width: 0; }
.weekday-fieldset, .reward-fields {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--control-border);
  border-radius: 14px;
}
.weekday-fieldset legend, .reward-fields legend { padding-inline: 6px; font-weight: 800; }
.weekday-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.weekday-option, .checkbox-field {
  min-width: 0;
  min-height: 48px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--control-border);
  border-radius: 12px;
  background: var(--surface);
  font-weight: 700;
  cursor: pointer;
}
.weekday-option input, .checkbox-field input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.weekday-option:has(input:checked), .checkbox-field:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.task-form .field-help { margin: 6px 0 0; }
.reward-grid { display: grid; gap: 12px; }
.task-form > .checkbox-field { border: 0; padding-inline: 0; }
.task-form-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.task-form-actions .button { min-height: 48px; }
.task-error-summary { min-height: 0; }
.start-tomorrow-note, .neutral-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--scene-mint) 76%, var(--surface));
  color: var(--text);
  font-weight: 700;
}
.date-warning {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--warning);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--warning) 13%, var(--surface));
  color: var(--text);
  font-weight: 700;
}
.child-date-warning { font-size: 16px; }
.task-list { display: grid; gap: 12px; }
.task-list > .section-heading { margin: 8px 0 0; }
.archived-heading { margin-top: 20px !important; }
.task-row {
  min-width: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 10px 12px;
  border: 1px solid var(--control-border);
  border-radius: 18px;
  background: var(--surface);
}
.task-row-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--scene-butter);
  color: var(--text);
}
.task-row-icon .icon { width: 28px; height: 28px; }
.task-row-details { min-width: 0; }
.task-row-details h3 { margin: 0 0 4px; font-size: 19px; overflow-wrap: anywhere; }
.task-row-details .supporting-copy, .task-row-meta { margin: 2px 0 0; overflow-wrap: anywhere; }
.task-row-meta { font-size: 14px; font-weight: 700; }
.task-row-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.task-row-actions .button { min-width: 0; min-height: 48px; padding: 8px 6px; font-size: 15px; }
.approval-list, .history-list { display: grid; gap: 12px; }
.approval-row-card { margin: 0; padding: 16px; }
.approval-row-card .approval-heading { align-items: flex-start; }
.approval-row-card .approval-heading h2 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.approval-row-card .approval-heading p { flex: 0 0 auto; }
.approval-row-card .supporting-copy { margin: 8px 0 12px; }
.approval-row-card .quest-description { margin: 10px 0 14px; }
.approval-row-card .approval-actions { grid-template-columns: 1fr; }
.approval-actions .button { min-height: 48px; }
.history-row {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--control-border);
  border-radius: 18px;
  background: var(--surface);
}
.history-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.history-heading h2 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.history-status { margin: 0; padding: 3px 9px; border: 1px solid var(--control-border); border-radius: 999px; font-weight: 800; }
.history-row .supporting-copy { margin: 8px 0; }
.history-row .neutral-note { margin-top: 8px; }
.parent-note { max-width: 65ch; }
.quest-description { margin-top: 8px; color: var(--text-muted); }
.quest-description summary { min-height: 44px; width: fit-content; padding: 9px 4px; color: var(--text); font-weight: 800; cursor: pointer; }
.quest-description p { margin: 2px 0 0; color: var(--text-muted); overflow-wrap: anywhere; }
.empty-quest-state {
  min-height: 220px;
  padding: 24px 18px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  border: 2px solid var(--control-border);
  border-radius: var(--radius-panel);
  background: var(--scene-sky);
  text-align: center;
}
.empty-quest-state h2 { margin: 0; font-size: 25px; }
.empty-quest-state .button { min-height: 64px; width: min(100%, 320px); }
.quest-action { min-height: 64px; }
.quest-group { display: grid; gap: 10px; }
.quest-groups { display: grid; gap: 18px; }
.quest-card h3 { margin-bottom: 4px; font-size: 21px; overflow-wrap: anywhere; }
.quest-card .quest-details { min-width: 0; }
.quest-list { min-width: 0; }
.quest-status { overflow-wrap: anywhere; }
.feedback-banner { overflow-wrap: anywhere; }

@media (min-width: 600px) {
  .dashboard-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-form-actions { grid-template-columns: 1fr 1fr; }
  .approval-row-card .approval-actions { grid-template-columns: 1fr 1fr; }
  .section-title-row { grid-template-columns: minmax(0, 1fr) auto; }
  .section-title-row .button { width: auto; }
}

@media (min-width: 768px) {
  .parent-content { padding-inline: max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px)); }
  .parent-section-control { width: 280px; }
  .task-form { padding: 22px; }
  .task-row { grid-template-columns: 48px minmax(0, 1fr) minmax(235px, 280px); align-items: center; }
  .task-row-actions { grid-column: auto; }
  .task-row-actions .button { padding-inline: 8px; }
}

/* M3 progression */
.next-unlock-condition { font-weight: 700; }
.next-area .progress-label { display: block; margin: 10px 0 7px; font-size: 15px; font-variant-numeric: tabular-nums; }
.progression-actions { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.progression-actions .button { min-width: 0; min-height: 64px; padding: 10px 12px; font-size: 17px; }

.progression-dialog {
  width: min(calc(100vw - max(12px, env(safe-area-inset-left, 0px)) - max(12px, env(safe-area-inset-right, 0px))), 780px);
  max-width: none;
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top, 0px)) - max(24px, env(safe-area-inset-bottom, 0px)));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--control-border);
  border-radius: 24px;
  background: var(--background);
  color: var(--text);
  box-shadow: 0 24px 70px rgb(20 10 30 / 25%);
}
.progression-dialog[open] { display: flex; flex-direction: column; }
.progression-dialog::backdrop { background: rgb(28 20 33 / 62%); }
.progression-dialog-header { padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--control-border); background: var(--surface); }
.progression-dialog-header h2 { margin: 0 0 3px; font-size: 26px; }
.progression-dialog-header .supporting-copy { font-size: 15px; }
.progression-dialog-header .button { flex: 0 0 auto; min-width: 64px; min-height: 64px; padding: 8px 12px; font-size: 16px; }
.progression-dialog-body { min-height: 0; padding: 14px; overflow-y: auto; overscroll-behavior: contain; }
.world-area-grid, .badge-grid { display: grid; gap: 12px; }
.world-area-card, .badge-card { min-width: 0; overflow: hidden; border: 1px solid var(--control-border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-panel); }
.area-preview-art { width: 100%; height: auto; aspect-ratio: 2.35 / 1; object-fit: cover; background: var(--scene-sky); }
.world-area-details { min-width: 0; padding: 14px; }
.world-area-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.world-area-title h3 { min-width: 0; margin: 0 0 6px; font-size: 20px; overflow-wrap: anywhere; }
.area-status { flex: 0 0 auto; padding: 3px 8px; border: 1px solid var(--control-border); border-radius: 999px; color: var(--text); font-size: 13px; font-weight: 800; }
.world-area-details > p { margin: 0 0 10px; color: var(--text-muted); }
.world-area-details .area-condition { color: var(--text); font-weight: 800; }
.world-area-details .button { width: 100%; min-height: 64px; font-size: 17px; }
.badge-card { min-height: 124px; padding: 12px; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 12px; }
.badge-mark { width: 64px; height: 64px; }
.badge-details { min-width: 0; }
.badge-details h3 { margin: 0 0 4px; font-size: 18px; overflow-wrap: anywhere; }
.badge-details > p { margin: 0 0 6px; color: var(--text-muted); font-size: 15px; }
.badge-status { width: fit-content; margin-top: 8px !important; padding: 3px 9px; border: 1px solid var(--success); border-radius: 999px; color: var(--success) !important; font-weight: 800; }
.badge-locked .badge-mark { opacity: .72; }
.badge-details .progress-label { margin: 6px 0 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.badge-progress { height: 12px; }

.parent-progress > .supporting-copy { margin: 0; }
.progress-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.progress-metric { min-width: 0; padding: 12px; border: 1px solid var(--control-border); border-radius: 14px; background: var(--surface); }
.progress-metric-label { margin: 0; color: var(--text-muted); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.progress-metric-value { margin: 3px 0 0; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.celebration-preferences { min-width: 0; margin: 8px 0 0; padding: 14px; border: 1px solid var(--control-border); border-radius: 18px; background: var(--surface); }
.celebration-preferences legend { padding: 0 6px; font-size: 18px; font-weight: 800; }
.preference-row { min-width: 0; min-height: 64px; padding: 10px 0; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.preference-row + .preference-row { border-top: 1px solid var(--control-border); }
.preference-row input { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--accent); }
.preference-copy { min-width: 0; display: grid; gap: 2px; }
.preference-label { font-weight: 800; }
.preference-copy .field-help { font-size: 14px; }

.celebration-card { position: relative; max-width: 660px; margin: 0 0 16px; padding: 14px 106px 70px 16px; border: 2px solid var(--control-border); border-radius: 20px; background: var(--scene-butter); color: var(--text); box-shadow: var(--shadow-panel); }
.celebration-arrival { animation: celebration-arrive 560ms ease-out both; }
.celebration-confetti { position: absolute; z-index: 0; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.celebration-confetti > span { position: absolute; top: -12px; width: 7px; height: 12px; border-radius: 2px; animation: celebration-confetti-fall 560ms ease-out both; }
.celebration-confetti > span:nth-child(1) { left: 6%; background: var(--accent); }
.celebration-confetti > span:nth-child(2) { left: 18%; width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation-delay: 18ms; }
.celebration-confetti > span:nth-child(3) { left: 31%; background: var(--warning); animation-delay: 36ms; }
.celebration-confetti > span:nth-child(4) { left: 44%; width: 8px; height: 8px; border-radius: 50%; background: var(--focus); animation-delay: 54ms; }
.celebration-confetti > span:nth-child(5) { left: 57%; background: var(--accent); animation-delay: 72ms; }
.celebration-confetti > span:nth-child(6) { left: 70%; width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation-delay: 90ms; }
.celebration-confetti > span:nth-child(7) { left: 83%; background: var(--warning); animation-delay: 108ms; }
.celebration-confetti > span:nth-child(8) { left: 94%; width: 8px; height: 8px; border-radius: 50%; background: var(--focus); animation-delay: 126ms; }
.celebration-sparkle { position: absolute; z-index: 1; width: 18px; height: 18px; pointer-events: none; }
.celebration-sparkle-one { top: 8px; right: 82px; }
.celebration-sparkle-two { right: 82px; bottom: 8px; width: 14px; height: 14px; }
.celebration-sparkle-arrival { animation: celebration-sparkle-pop 720ms ease-out both; }
.celebration-sparkle-two.celebration-sparkle-arrival { animation-delay: 80ms; }
.celebration-copy { position: relative; z-index: 2; }
.celebration-copy h2 { margin: 0 0 4px; font-size: 22px; overflow-wrap: anywhere; }
.celebration-copy p { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.celebration-coin-cue { width: fit-content; margin-top: 8px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--control-border); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 900; font-variant-numeric: tabular-nums; }
.celebration-coin-cue .icon { width: 20px; height: 20px; color: var(--warning); }
.celebration-coin-arrival { animation: celebration-coin-pop 620ms ease-out 80ms both; transform-origin: center; }
.celebration-characters { position: absolute; z-index: 1; left: 16px; bottom: 8px; height: 54px; display: flex; align-items: end; pointer-events: none; }
.celebration-avatar { width: auto; height: 52px; transform-origin: 50% 100%; }
.celebration-companion { width: auto; height: 38px; margin-left: -8px; transform-origin: 50% 100%; }
.celebration-character-reaction { animation: celebration-character-bounce 660ms ease-out both; transform-origin: 50% 100%; }
.celebration-dismiss { position: absolute; z-index: 2; top: 8px; right: 8px; min-width: 64px; min-height: 64px; padding: 7px; border: 1px solid var(--control-border); border-radius: 14px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 800; }
@keyframes celebration-arrive { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes celebration-sparkle-pop { 0% { opacity: 0; transform: scale(.35) rotate(-22deg); } 26% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: 0; transform: scale(.72) rotate(18deg); } }
@keyframes celebration-confetti-fall { 0% { opacity: 0; transform: translateY(-8px) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(92px) rotate(160deg); } }
@keyframes celebration-coin-pop { 0% { opacity: 0; transform: scale(.7) rotate(-10deg); } 45% { opacity: 1; transform: scale(1.12) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes celebration-character-bounce { 0% { transform: translateY(5px) rotate(0); } 42% { transform: translateY(-6px) rotate(-3deg); } 72% { transform: translateY(2px) rotate(2deg); } 100% { transform: translateY(0) rotate(0); } }

@media (min-width: 600px) {
  .progress-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .progression-dialog-header { padding: 20px 22px; }
  .progression-dialog-body { padding: 18px 22px 22px; }
  .world-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .celebration-arrival, .celebration-sparkle-arrival, .celebration-coin-arrival,
  .celebration-character-reaction { animation: none; }
  .celebration-confetti { display: none; }
}

/* M4 shop, tickets, and saved dress-up */
.child-shop, .dress-up-page { display: grid; gap: 16px; }
.shop-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.shop-category { min-width: 0; min-height: 64px; padding: 8px 6px; border: 2px solid var(--control-border); border-radius: 18px; background: var(--surface); color: var(--text); font-size: 16px; font-weight: 800; line-height: 1.15; }
.shop-category[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.shop-grid, .ticket-list, .reward-catalog-list { display: grid; gap: 12px; }
.shop-item, .ticket-row, .reward-catalog-row { min-width: 0; padding: 12px; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 10px 12px; border: 1px solid var(--control-border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-panel); }
.shop-item-art, .ticket-art, .catalog-reward-art, .locked-equipment-art { width: 72px; height: 72px; padding: 6px; border-radius: 18px; background: var(--scene-butter); }
.shop-item-details, .ticket-details, .reward-catalog-details, .locked-equipment-details { min-width: 0; }
.shop-item-details h3, .ticket-details h3, .reward-catalog-details h3, .locked-equipment-details h3 { margin: 0 0 4px; font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
.shop-item-details .supporting-copy, .ticket-details .supporting-copy, .reward-catalog-details .supporting-copy, .locked-equipment-details .supporting-copy { margin: 0 0 6px; font-size: 15px; overflow-wrap: anywhere; }
.shop-price { margin: 6px 0 0; display: flex; align-items: center; gap: 6px; font-weight: 800; font-variant-numeric: tabular-nums; }
.shop-price .icon { width: 20px; height: 20px; color: var(--warning); }
.shop-status, .ticket-status { width: fit-content; margin: 6px 0 0; padding: 3px 9px; border: 1px solid var(--control-border); border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 800; line-height: 1.3; }
.shop-item-action { grid-column: 1 / -1; min-height: 64px; width: 100%; }
.shop-empty { grid-column: 1 / -1; }
.ticket-section, .parent-tickets, .reward-catalog, .locked-equipment, .sticker-collection { display: grid; gap: 12px; }
.ticket-section > .section-heading, .parent-tickets > .section-heading, .reward-catalog > .section-heading, .locked-equipment > .section-heading, .sticker-collection > .section-heading { margin: 0; }
.ticket-row { grid-template-columns: 56px minmax(0, 1fr); }
.ticket-art { width: 56px; height: 56px; padding: 4px; border-radius: 14px; }
.ticket-actions { grid-column: 1 / -1; display: grid; gap: 8px; }
.ticket-actions .button { min-height: 64px; padding: 9px 12px; font-size: 16px; }
.ticket-subheading { margin: 8px 0 -4px; font-size: 18px; }
.sticker-owned-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sticker-owned-item { min-height: 100px; padding: 10px; display: grid; justify-items: center; align-content: center; gap: 6px; border: 1px solid var(--success); border-radius: 16px; background: color-mix(in srgb, var(--success) 9%, var(--surface)); font-weight: 800; text-align: center; }
.sticker-owned-art { width: 56px; height: 56px; }
.dress-stage { min-height: 244px; padding: 12px 18px 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; overflow: hidden; border: 2px solid var(--control-border); border-radius: var(--radius-panel); background: linear-gradient(140deg, var(--scene-sky), var(--scene-mint)); }
.dress-avatar { width: auto; height: 190px; flex: 0 0 auto; filter: drop-shadow(0 5px 4px rgb(53 40 63 / 14%)); }
.dress-companion { width: auto; height: 124px; margin: 0 0 2% -8px; flex: 0 0 auto; filter: drop-shadow(0 4px 3px rgb(53 40 63 / 12%)); }
.dress-stage-label { flex: 0 0 100%; margin: 0; color: var(--text); font-size: 14px; font-weight: 800; text-align: center; }
.dress-up-page > .shop-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.equipment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.equipment-choice { position: relative; min-width: 0; min-height: 116px; padding: 10px 6px; display: grid; justify-items: center; align-content: center; gap: 5px; border: 2px solid var(--control-border); border-radius: 18px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.equipment-choice:disabled { cursor: default; opacity: 1; }
.equipment-selected { border-color: var(--success); box-shadow: inset 0 0 0 1px var(--success); }
.equipment-art, .equipment-default-icon { width: 58px; height: 58px; }
.equipment-default-icon { display: grid; place-items: center; color: var(--text-muted); font-size: 28px; font-weight: 800; }
.equipment-default-icon .icon { width: 34px; height: 34px; }
.equipment-choice-label { max-width: 100%; font-size: 15px; font-weight: 800; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.equipment-selected-label { min-height: 19px; color: var(--success); font-size: 13px; font-weight: 800; }
.locked-equipment-row { min-width: 0; padding: 10px; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid var(--control-border); border-radius: 16px; background: var(--surface); }
.locked-equipment-art { width: 56px; height: 56px; padding: 4px; border-radius: 14px; }
.locked-equipment-details h3 { font-size: 17px; }
.locked-equipment-row .button { grid-column: 1 / -1; min-height: 64px; width: 100%; font-size: 16px; }
.purchase-dialog { width: min(calc(100vw - max(12px, env(safe-area-inset-left, 0px)) - max(12px, env(safe-area-inset-right, 0px))), 440px); max-width: none; max-height: calc(100dvh - max(24px, env(safe-area-inset-top, 0px)) - max(24px, env(safe-area-inset-bottom, 0px))); margin: auto; padding: 0; overflow-y: auto; border: 1px solid var(--control-border); border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: 0 24px 70px rgb(20 10 30 / 25%); }
.purchase-dialog::backdrop { background: rgb(28 20 33 / 58%); }
.shop-dialog-content { padding: 20px; }
.shop-dialog-content h2 { margin: 0 0 12px; font-size: 25px; line-height: 1.2; overflow-wrap: anywhere; }
.purchase-art, .ticket-confirm-art { width: 88px; height: 88px; margin: 0 auto 10px; padding: 5px; border-radius: 22px; background: var(--scene-butter); }
.purchase-description { margin: 0 0 14px; color: var(--text-muted); text-align: center; }
.purchase-totals { margin: 0; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--scene-sky) 75%, var(--surface)); }
.purchase-totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.purchase-totals > div + div { border-top: 1px solid var(--control-border); }
.purchase-totals dt { font-weight: 700; }
.purchase-totals dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.shop-dialog .dialog-actions { margin-top: 16px; }
.shop-dialog .dialog-actions .button { min-height: 64px; padding-inline: 10px; font-size: 17px; }
.reward-form { max-width: 680px; }
.reward-catalog-row { grid-template-columns: 56px minmax(0, 1fr); }
.catalog-reward-art { width: 56px; height: 56px; padding: 4px; border-radius: 14px; }
.reward-catalog-details h3 { font-size: 18px; }
.reward-catalog-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.reward-catalog-actions .button { min-height: 48px; padding: 8px; font-size: 15px; }
.ticket-row .ticket-actions { grid-template-columns: 1fr; }

@media (min-width: 600px) {
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticket-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-catalog-row { grid-template-columns: 56px minmax(0, 1fr) minmax(180px, 220px); align-items: center; }
  .reward-catalog-actions { grid-column: auto; }
  .dashboard-counts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

@media (max-width: 360px) {
  .shop-category { padding-inline: 3px; font-size: 14px; }
  .shop-item, .reward-catalog-row { padding: 10px; gap: 8px 10px; }
  .shop-item-art { width: 64px; height: 64px; }
  .shop-item-details h3 { font-size: 17px; }
  .shop-item-details .supporting-copy { font-size: 14px; }
  .dress-stage { min-height: 205px; padding-inline: 8px; }
  .dress-avatar { height: 148px; }
  .dress-companion { height: 106px; margin-left: -8px; }
  .dress-stage-label { font-size: 13px; }
  .equipment-choice { padding-inline: 3px; }
  .equipment-choice-label { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-item-action, .equipment-choice { transition: none; }
}

/* Keep child shop copy readable on phones; parent catalog stays compact. */
.child-shop .shop-category, .dress-up-page .shop-category { font-size: 18px; }
.child-shop .shop-item-details h3, .child-shop .ticket-details h3 { font-size: 20px; }
.child-shop .shop-item-details .supporting-copy, .child-shop .ticket-details .supporting-copy { font-size: 18px; }
.child-shop .shop-price { font-size: 20px; }
.child-shop .shop-status, .child-shop .ticket-status { font-size: 18px; }
.child-shop .shop-item-action { font-size: 20px; }
.child-shop .sticker-owned-item { font-size: 18px; }
.dress-up-page .equipment-choice-label { font-size: 18px; }
.dress-up-page .locked-equipment-row .button { font-size: 20px; }

/* Small, picture-led games. Boards fit a 320px phone without hiding any choices. */
.games-page, .game-session, .parent-games { display: grid; gap: 14px; }
.games-page > .game-reward-hint { padding: 12px 14px; border-radius: 16px; background: var(--scene-butter); color: var(--text); font-size: 18px; font-weight: 700; }
.game-choice-list { display: grid; gap: 12px; }
.game-choice, .game-session, .parent-game-card { min-width: 0; padding: 14px; border: 2px solid var(--control-border); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-panel); }
.game-choice { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: start; gap: 8px 12px; }
.game-choice > .game-picture { grid-row: 1; width: 68px; min-height: 68px; align-self: center; }
.game-choice-copy { min-width: 0; }
.game-choice-copy h2 { margin: 0 0 4px; font-size: 21px; overflow-wrap: anywhere; }
.game-choice-copy .supporting-copy { margin: 0 0 5px; font-size: 18px; line-height: 1.35; }
.game-choice-level, .game-badge-summary, .game-progress-summary, .game-progress-badges { margin: 5px 0 0; color: var(--text-muted); font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.game-choice-level, .game-badge-summary { font-size: 18px; }
.game-choice-action { grid-column: 1 / -1; width: 100%; min-height: 64px; font-size: 20px; }
.game-disabled-note { grid-column: 1 / -1; margin: 0; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--scene-butter) 65%, var(--surface)); font-size: 18px; font-weight: 700; }
.game-picture { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 3px; }
.game-picture-card { width: 22px; height: 30px; display: grid; place-items: center; border: 2px solid var(--control-border); border-radius: 6px; background: var(--surface); }
.game-picture-back { background: var(--scene-sky); color: var(--text); font-size: 16px; font-weight: 900; }
.game-picture-front { background: var(--scene-butter); }
.game-picture-front .game-symbol { width: 17px; height: 17px; }
.game-picture-shape, .pattern-shape { min-width: 0; display: grid; place-items: center; }
.game-picture-shape .game-symbol { width: 22px; height: 22px; }
.game-picture-question, .pattern-question { display: grid; place-items: center; border: 2px dashed var(--control-border); border-radius: 10px; color: var(--text-muted); font-weight: 900; }
.game-picture-question { width: 22px; height: 26px; font-size: 17px; }
.game-picture-number { width: 18px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: var(--scene-sky); font-size: 16px; font-weight: 900; }
.game-symbol { width: 40px; height: 40px; flex: 0 0 auto; }
.game-session { gap: 12px; }
.game-session-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.game-session-title { margin: 0; font-size: clamp(23px, 6vw, 30px); overflow-wrap: anywhere; }
.game-session-title:focus:not(:focus-visible) { outline: none; }
.game-exit { min-width: 74px; min-height: 64px; padding-inline: 12px; font-size: 20px; }
.game-intro, .game-round, .game-save-failure, .game-result { min-width: 0; display: grid; justify-items: center; gap: 12px; text-align: center; }
.game-intro-picture { width: min(100%, 280px); min-height: 120px; padding: 12px; gap: 8px; border-radius: 22px; background: linear-gradient(145deg, var(--scene-sky), var(--scene-mint)); }
.game-intro-picture .game-picture-card { width: 56px; height: 76px; border-radius: 12px; }
.game-intro-picture .game-picture-front .game-symbol { width: 44px; height: 44px; }
.game-intro-picture .game-picture-back { font-size: 30px; }
.game-intro-picture .game-picture-shape .game-symbol { width: 48px; height: 48px; }
.game-intro-picture .game-picture-question { width: 48px; height: 52px; font-size: 30px; }
.game-intro-picture .game-picture-number { width: 42px; height: 54px; font-size: 30px; }
.game-instruction { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; }
.game-level-label { margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--scene-butter); font-size: 18px; font-weight: 800; }
.game-reward-hint { margin: 0; color: var(--text-muted); font-size: 18px; }
.game-play-button, .game-large-action { width: min(100%, 420px); min-height: 64px; font-size: 20px; }
.game-variant-choices { width: min(100%, 420px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.game-variant { min-width: 0; min-height: 64px; padding: 8px; font-size: 20px; }
.game-variant[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.game-variant .game-symbol { width: 28px; height: 28px; }
.game-variant-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--scene-sky); font-size: 19px; font-weight: 900; }
.game-metrics { margin: 0; color: var(--text-muted); font-size: 18px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.memory-board { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(56px, 1fr)); gap: 8px; }
.memory-board[data-card-count="4"] { grid-template-columns: repeat(2, minmax(56px, 1fr)); max-width: 184px; }
.memory-board[data-card-count="6"] { grid-template-columns: repeat(3, minmax(56px, 1fr)); max-width: 252px; }
.memory-board[data-card-count="8"], .memory-board[data-card-count="12"] { grid-template-columns: repeat(4, minmax(56px, 1fr)); }
.memory-card { min-width: 56px; min-height: 56px; aspect-ratio: 1; padding: 4px; display: grid; place-items: center; border: 2px solid var(--control-border); border-radius: 14px; background: var(--scene-sky); color: var(--text); }
.memory-card .game-symbol { width: min(100%, 44px); height: auto; aspect-ratio: 1; }
.memory-card-revealed, .memory-card-matched { background: var(--scene-butter); }
.memory-card-matched { border-color: var(--success); }
.memory-card-question { font-size: clamp(24px, 8vw, 34px); font-weight: 900; }
.game-round-feedback { margin: 0; color: var(--success); font-size: 18px; font-weight: 800; }
.pattern-sequence { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pattern-shape { min-height: 54px; padding: 5px; border: 1px solid var(--control-border); border-radius: 14px; background: color-mix(in srgb, var(--scene-sky) 70%, var(--surface)); }
.pattern-shape .game-symbol { width: clamp(30px, 9vw, 42px); height: auto; aspect-ratio: 1; }
.pattern-question { min-height: 54px; font-size: 25px; }
.pattern-choices { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pattern-answer { min-width: 0; min-height: 64px; padding: 6px 8px; display: grid; grid-template-columns: minmax(32px, 42px) minmax(0, 1fr); justify-items: center; gap: 5px; font-size: 20px; overflow-wrap: anywhere; }
.pattern-answer .game-symbol { width: 36px; height: 36px; }
.game-target { width: fit-content; max-width: 100%; min-height: 72px; margin: 0; padding: 8px 14px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 18px; background: var(--scene-butter); font-size: 18px; font-weight: 800; }
.game-target-number { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--surface); font-size: 30px; font-weight: 900; }
.game-target-symbol { width: 48px; height: 48px; }
.order-board { width: min(100%, 340px); margin-inline: auto; display: grid; gap: 8px; }
.order-board-2 { grid-template-columns: repeat(2, minmax(56px, 1fr)); max-width: 180px; }
.order-board-3 { grid-template-columns: repeat(3, minmax(56px, 1fr)); max-width: 270px; }
.order-board-4 { grid-template-columns: repeat(4, minmax(56px, 1fr)); max-width: 340px; }
.order-cell { min-width: 56px; min-height: 56px; aspect-ratio: 1; padding: 4px; display: grid; justify-items: center; align-content: center; gap: 2px; border: 2px solid var(--control-border); border-radius: 14px; background: var(--surface); font-size: 20px; font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.order-cell .game-symbol { width: min(100%, 38px); height: auto; aspect-ratio: 1; }
.order-cell-found { border-color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--surface)); }
.game-saving-note { margin: 0; padding: 12px; border-radius: 14px; background: var(--scene-sky); font-size: 16px; font-weight: 700; text-align: center; }
.game-session .game-saving-note { font-size: 18px; }
.game-save-failure { padding: 14px; border: 1px solid var(--danger); border-radius: 18px; background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.game-save-failure .inline-error { border: 0; padding: 0; font-size: 18px; text-align: center; }
.game-save-failure .supporting-copy { font-size: 18px; }
.game-result { padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--success) 11%, var(--surface)); }
.game-reward-result { margin: 0; font-size: 22px; font-weight: 900; }
.game-best-result { margin: 0; font-size: 18px; font-weight: 800; }
.game-result-actions { width: min(100%, 420px); display: grid; gap: 8px; }
.parent-game-card { display: grid; gap: 10px; }
.parent-game-card h2 { margin: 0; font-size: 20px; }
.parent-game-card .game-progress-summary, .parent-game-card .game-progress-badges { margin: 0; font-size: 16px; }
.game-best-list { margin: 0; padding-left: 22px; display: grid; gap: 4px; color: var(--text-muted); font-size: 16px; line-height: 1.35; }
.parent-game-controls { display: grid; gap: 12px; }
.parent-game-toggle { min-height: 56px; }
.parent-game-difficulty .field-label { margin-top: 0; }
.parent-game-difficulty .field-control { width: 100%; min-height: 52px; font-size: 17px; }

@media (min-width: 600px) {
  .game-choice-list, .parent-games { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .game-session { padding: 20px; }
  .game-choice { padding: 16px; }
  .game-choice-action, .parent-games > .supporting-copy { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
  .page-content.game-content-active { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
}

@media (max-width: 360px) {
  .game-choice, .game-session, .parent-game-card { padding: 11px; }
  .game-choice { grid-template-columns: 60px minmax(0, 1fr); gap: 8px; }
  .game-choice > .game-picture { width: 60px; min-height: 60px; }
  .game-choice-copy h2 { font-size: 19px; }
  .game-choice-copy .supporting-copy { font-size: 18px; }
  .memory-board { gap: 6px; }
  .order-board { gap: 6px; }
  .pattern-sequence { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .memory-card, .order-cell, .pattern-answer, .game-choice-action, .game-play-button { transition: none; }
}

/* M6 parent settings and backup */
.parent-settings, .parent-backup { display: grid; gap: 16px; }
.parent-settings > .supporting-copy, .parent-backup > .supporting-copy { margin: 0; }
.settings-card {
  min-width: 0;
  padding: 16px;
  display: grid;
  gap: 10px;
  border: 1px solid var(--control-border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}
.settings-card h2 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.settings-card .supporting-copy { overflow-wrap: anywhere; }
.settings-card .button, .parent-backup > .button { width: 100%; min-height: 48px; font-size: 16px; }
.backup-file-controls {
  min-width: 0;
  padding: 14px;
  display: grid;
  gap: 10px;
  border: 1px solid var(--control-border);
  border-radius: 16px;
  background: var(--surface);
}
.backup-file-controls h2 { margin: 0; font-size: 19px; }
.backup-file-controls .button { width: 100%; min-height: 48px; font-size: 16px; }
.backup-file-controls .field-help { overflow-wrap: anywhere; }
.backup-error { margin: 0; }
.backup-private-note, .backup-replace-warning {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--warning);
  border-radius: 14px;
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
  color: var(--text);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.backup-dialog {
  width: min(calc(100vw - max(12px, env(safe-area-inset-left, 0px)) - max(12px, env(safe-area-inset-right, 0px))), 760px);
  max-width: none;
  max-height: calc(100dvh - max(20px, env(safe-area-inset-top, 0px)) - max(20px, env(safe-area-inset-bottom, 0px)));
  margin: auto;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--control-border);
  border-radius: 22px;
  background: var(--background);
  color: var(--text);
  box-shadow: 0 24px 70px rgb(20 10 30 / 25%);
}
.backup-dialog::backdrop { background: rgb(28 20 33 / 60%); }
.backup-dialog-content { padding: 16px; display: grid; gap: 14px; }
.backup-dialog-content > h2 { margin: 0; font-size: 25px; line-height: 1.2; }
.backup-dialog-content > .feedback-banner, .backup-dialog-content > .inline-error { margin: 0; }
.backup-summary-grid { min-width: 0; display: grid; gap: 12px; }
.backup-summary-card { min-width: 0; padding: 13px; border: 1px solid var(--control-border); border-radius: 16px; background: var(--surface); }
.backup-summary-card h3 { margin: 0 0 8px; font-size: 17px; overflow-wrap: anywhere; }
.backup-summary-card .supporting-copy { font-size: 15px; }
.backup-summary-name { margin: 0 0 10px; font-weight: 800; overflow-wrap: anywhere; }
.backup-summary-values { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px; line-height: 1.35; }
.backup-summary-values dt { min-width: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.backup-summary-values dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.backup-dialog-actions { display: grid; gap: 8px; }
.backup-dialog-actions .button { min-width: 0; min-height: 48px; padding-inline: 10px; font-size: 15px; }
.backup-confirm-row { min-height: 52px; padding: 8px 0; display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.backup-confirm-row input { width: 24px; height: 24px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); }
.pin-recovery-action { width: 100%; min-height: 48px; margin-top: 10px; font-size: 15px; }
.pin-field { display: grid; gap: 4px; }
.pin-field .field-label { margin: 8px 0 0; }

@media (min-width: 520px) {
  .backup-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .backup-dialog-content { padding: 20px; }
}

@media (min-width: 600px) {
  .backup-dialog-actions { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}