/* Frostword shell styles. Tokens follow design/UI-SPEC.md: light = storybook snow, dark = northern lights. */

:root {
  /* light (storybook snow) */
  --bg-1: #bfe3f7; --bg-2: #eaf6fc;
  --ink: #214a73; --ink-muted: #4e6a82;
  --surface: #fff6dc; --surface-edge: #d8c48c;
  --panel: #214a73; --panel-ink: #f6f1e6; --panel-edge: #183a5c;
  --map-bg: #dbe8ee;
  --snow: #f7fafc; --snow-2: #e4edf4; --speck: #b7cde0;
  --shore: #9cc8e3; --water: #5fb0e0; --water-2: #3f93c8; --ripple: rgba(255,255,255,.6);
  --ice: #eaf7fd; --ice-line: #9fcde6;
  --tree: #4f9a63; --tree-2: #35764a; --trunk: #7d4f33; --tree-snow: #ffffff;
  --rock: #aaa497; --rock-2: #7b7563;
  --outline: #27405a; --outline-soft: rgba(39,64,90,.45); --guide-bg: #dcecf7;
  --deep: #ffffff; --deep-fleck: #cfe0ee;
  --wall: #c9c3b6; --wall-2: #a9a294;
  --shrub: #5fa36e; --slick: #e3f3fb; --slick-sheen: #ffffff; --slick-arrow: #5fa9d6; --water-light: #9fd3f0;
  --peak: #c7d6e2; --wood: #9a6a44; --wood-ink: #f6f1e6;
  --raft: #9a6a44; --raft-line: #5e3f27; --rope: #e8d7b5;
  --next: #ffd36b; --next-ink: #214a73; --next-glow: transparent;
  --accent: #e8705b; --accent-2: #ffb3a7;
  --shadow: rgba(33,74,115,.18); --ground-shadow: rgba(33,74,115,.14);
  --ending-er: #a4201c; --ending-er-bg: #ffe1df;
  --ending-est: #146c3a; --ending-est-bg: #dff5e6;
  --focus: #e8705b;

  --radius: 28px;
  --tap-min: 56px;
  --tap-big: 84px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light dark;
  font-family: ui-rounded, "Nunito", "SF Pro Rounded", -apple-system, "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --dark: 1; }
}
:root[data-theme="dark"] { --dark: 1; }

/* dark (northern lights): applied when the system is dark or a parent override says so */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-1: #071423; --bg-2: #0f2340;
    --ink: #dbeeff; --ink-muted: #8fb6d8;
    --surface: #c7ecff; --surface-edge: #8fcbea;
    --panel: #0f2340; --panel-ink: #dbeeff; --panel-edge: #16304f;
    --map-bg: #0e1f36;
    --snow: #1f3a5c; --snow-2: #1a3250; --speck: #2a4a70;
    --shore: #2a6b95; --water: #3a8fc4; --water-2: #2b73a3; --ripple: rgba(220,245,255,.45);
    --ice: #2b5c7a; --ice-line: #4c88a8;
    --tree: #3f8c73; --tree-2: #2f6e5b; --trunk: #2a4a5a; --tree-snow: #cfeeff;
    --rock: #4a6482; --rock-2: #36506c;
    --outline: #071020; --outline-soft: rgba(0,0,0,.5); --guide-bg: #16304f;
    --deep: #2c4c73; --deep-fleck: #4f7aa6;
    --wall: #56708f; --wall-2: #3e5674;
    --shrub: #3f8c73; --slick: #3d7a9c; --slick-sheen: #bfe9ff; --slick-arrow: #dbeeff; --water-light: #5fb0e0;
    --peak: #1b3350; --wood: #5b3f2c; --wood-ink: #f6f1e6;
    --raft: #8a5f3d; --raft-line: #4a3220; --rope: #e6d6b0;
    --next: #7ff0c8; --next-ink: #0b1626; --next-glow: rgba(127,240,200,.55);
    --accent: #7ff0c8; --accent-2: #ff9aa8;
    --shadow: rgba(0,0,0,.4); --ground-shadow: rgba(0,0,0,.3);
    --ending-er: #ffb3a7; --ending-er-bg: #4a1f1c;
    --ending-est: #9fe0b0; --ending-est-bg: #143a24;
    --focus: #7ff0c8;
  }
}
:root[data-theme="dark"] {
  --bg-1: #071423; --bg-2: #0f2340;
  --ink: #dbeeff; --ink-muted: #8fb6d8;
  --surface: #c7ecff; --surface-edge: #8fcbea;
  --panel: #0f2340; --panel-ink: #dbeeff; --panel-edge: #16304f;
  --map-bg: #0e1f36;
  --snow: #1f3a5c; --snow-2: #1a3250; --speck: #2a4a70;
  --shore: #2a6b95; --water: #3a8fc4; --water-2: #2b73a3; --ripple: rgba(220,245,255,.45);
  --ice: #2b5c7a; --ice-line: #4c88a8;
  --tree: #3f8c73; --tree-2: #2f6e5b; --trunk: #2a4a5a; --tree-snow: #cfeeff;
  --rock: #4a6482; --rock-2: #36506c;
  --outline: #071020; --outline-soft: rgba(0,0,0,.5); --guide-bg: #16304f;
  --wall: #56708f; --wall-2: #3e5674;
  --shrub: #3f8c73; --slick: #3d7a9c; --slick-sheen: #bfe9ff; --slick-arrow: #dbeeff; --water-light: #5fb0e0;
  --peak: #1b3350; --wood: #5b3f2c; --wood-ink: #f6f1e6;
  --raft: #8a5f3d; --raft-line: #4a3220; --rope: #e6d6b0;
  --next: #7ff0c8; --next-ink: #0b1626; --next-glow: rgba(127,240,200,.55);
  --accent: #7ff0c8; --accent-2: #ff9aa8;
  --shadow: rgba(0,0,0,.4); --ground-shadow: rgba(0,0,0,.3);
  --ending-er: #ffb3a7; --ending-er-bg: #4a1f1c;
  --ending-est: #9fe0b0; --ending-est-bg: #143a24;
  --focus: #7ff0c8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-2);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body {
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 60%);
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  user-select: none;
  -webkit-user-select: none;
}

/* drifting flakes: visible in both modes, very quiet */
.snowfield {
  position: fixed; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, var(--speck) 50%, transparent 51%),
    radial-gradient(3px 3px at 70% 20%, var(--speck) 50%, transparent 51%),
    radial-gradient(2px 2px at 40% 70%, var(--speck) 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 60%, var(--speck) 50%, transparent 51%),
    radial-gradient(3px 3px at 10% 85%, var(--speck) 50%, transparent 51%),
    radial-gradient(2px 2px at 55% 45%, var(--speck) 50%, transparent 51%);
  background-size: 400px 400px;
  animation: drift 40s linear infinite;
  opacity: .55;
}
@keyframes drift { from { background-position: 0 0; } to { background-position: 60px 400px; } }
@media (prefers-reduced-motion: reduce) { .snowfield { animation: none; } }

[hidden] { display: none !important; } /* author display rules must not un-hide a hidden group */
.app { width: min(100%, 720px); text-align: center; position: relative; }
.app:has(.play), .app:has(.journey), .app:has(.test) { width: 100%; }

.screen { display: grid; gap: 24px; justify-items: center; }

.title {
  font-size: clamp(40px, 9vw, 72px);
  font-weight: 800;
  letter-spacing: .01em;
  margin: 0;
  color: var(--ink);
}
.subtitle { margin: 0; font-size: clamp(18px, 3.5vw, 24px); color: var(--ink-muted); }
.notice { font-size: 15px; color: var(--ink-muted); margin: 0; font-variant-numeric: tabular-nums; }

.btn {
  appearance: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border-radius: var(--radius);
  min-height: var(--tap-min);
  padding: 0 32px;
  font-size: 22px;
  box-shadow: 0 10px 30px var(--shadow), inset 0 -4px 0 var(--surface-edge);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
:root[data-theme="dark"] .btn { color: #0b1626; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn { color: #0b1626; } }
:root[data-theme="dark"] .btn-ghost, :root[data-theme="dark"] .panel .btn-sign { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-ghost { color: var(--ink); } }
.btn:active { transform: translateY(3px) scale(.99); box-shadow: 0 4px 14px var(--shadow), inset 0 -2px 0 var(--surface-edge); }
.btn:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }

.btn-start { min-height: var(--tap-big); min-width: 260px; font-size: 32px; }
:root .btn-ghost { background: var(--guide-bg); color: var(--ink); box-shadow: inset 0 -3px 0 var(--outline-soft); border: 2px solid var(--outline-soft); font-size: 18px; }

.profiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; width: 100%; }
.profile-card {
  display: grid; gap: 4px; justify-items: center;
  padding: 24px 20px 26px; min-height: 200px;
  border-radius: var(--radius); font-size: 28px;
}
.profile-card .meta { font-size: 15px; font-weight: 600; color: #4e6a82; } /* the card is a light surface in both modes */
.portrait { display: block; width: 96px; height: 96px; }
.portrait svg { width: 100%; height: 100%; }
.portrait-lg { width: 140px; height: 140px; }
.character .char-shadow { fill: var(--ground-shadow); }
.character .scarf { fill: var(--accent-2); }
.character.autumn .scarf, .character.lenny .scarf { fill: var(--scarf, var(--accent-2)); }
/* dark cartoon outlines so characters never vanish into the snow */
.character :not([stroke]):not(.char-shadow) { stroke: var(--outline); stroke-width: 1.6; stroke-linejoin: round; paint-order: stroke fill; }
.character .char-shadow { stroke: none; }

.noscript { color: var(--ink); font-size: 18px; }

/* ---------- the parent corner ---------- */
.parent { gap: 18px; width: min(100%, 720px); text-align: left; justify-items: stretch; }
.parent .title { text-align: center; }
.parent-gate { display: grid; gap: 12px; justify-items: center; text-align: center; }
.gate-label { font-size: 20px; font-weight: 700; color: var(--ink); }
.gate-row { display: flex; gap: 10px; align-items: center; }
.field { font: inherit; font-size: 18px; color: #214a73; background: var(--surface); border: 2px solid var(--outline-soft); border-radius: 12px; padding: 10px 12px; min-height: 48px; }
.field:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gate-field { width: 120px; text-align: center; font-size: 24px; font-weight: 800; }
.parent-body { display: grid; gap: 16px; }
.tabs { display: flex; gap: 8px; }
.tab { font-size: 18px; padding: 0 22px; min-height: 48px; opacity: .75; }
.tab.on { opacity: 1; box-shadow: 0 0 0 3px var(--next) inset, 0 10px 30px var(--shadow); }
.card { background: var(--guide-bg); border-radius: 20px; padding: 16px; display: grid; gap: 10px; box-shadow: 0 0 0 2px var(--outline-soft); }
.card h3 { margin: 0; font-size: 20px; color: var(--ink); }
.help { margin: 0; font-size: 15px; color: var(--ink); font-weight: 500; }
.help b { font-weight: 800; }
.box { width: 100%; resize: vertical; line-height: 1.4; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row .field { flex: 1 1 200px; }
.file-btn { cursor: pointer; display: inline-flex; align-items: center; }
.btn.small { min-height: 40px; padding: 0 14px; font-size: 16px; }
.preview-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 12px; overflow: hidden; color: #214a73; }
.preview-table th, .preview-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--outline-soft); font-size: 16px; }
.preview-table th { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #4e6a82; }
.preview-table tr.warn td { background: var(--ending-er-bg); }
.preview-table .problem { font-size: 14px; color: #a4201c; }
.edit-list, .weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.edit-list li, .weeks li { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.edit-word { flex: 1; }
.weeks li { padding: 8px 10px; background: var(--surface); border-radius: 12px; color: #214a73; font-weight: 700; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .help, :root:not([data-theme="light"]) .card h3 { color: var(--ink); } }

/* The welcome screen is the audio-unlocking player choice. */
.welcome { width:min(100%,680px); margin:auto; }
.welcome h2 { font-size:22px; margin:12px 0 0; font-weight:600; }
.welcome .profiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
.welcome .profile-card { min-height:190px; }
.parent-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.parent-heading .title { font-size:32px; }
.parent .btn { min-height:48px; }
.parent .btn-start { min-width:0; font-size:22px; }
.parent details summary, .map-help summary { cursor:pointer; min-height:48px; align-content:center; font-weight:650; }
.parent details[open] summary { margin-bottom:10px; }
.parent .edit-field { flex:1; min-width:0; display:grid; gap:4px; }
.parent .edit-word { width:100%; min-width:0; }
.field-error { color:#a4201c; font-size:14px; display:block; }
.field-error:empty { display:none; }
.parent [aria-invalid=true] { border-color:#a4201c; }
.import-options { display:grid; gap:4px; justify-items:stretch; }
.import-options > button { justify-self:start; }
.word-preview { display:flex; flex-wrap:wrap; gap:8px 20px; margin:8px 0 0; padding:0; list-style:none; }
.parent .weeks li { flex-wrap:wrap; }
@media(prefers-color-scheme:dark) { :root:not([data-theme=light]) .field-error { color:#ffb3a7; } }
:root[data-theme=dark] .field-error { color:#ffb3a7; }
@media(max-width:600px) {
  .welcome { gap:20px; }
  .welcome .profiles { gap:14px; }
  .welcome .profile-card { min-height:180px; padding:18px 10px; font-size:26px; }
  .welcome .portrait { width:84px; height:84px; }
  .parent .btn { padding-inline:16px; }
}
@media(orientation:landscape) and (max-height:600px) {
  .welcome { grid-template-columns:1fr 1.25fr; gap:14px 28px; }
  .welcome header { grid-column:1; }
  .welcome .title { font-size:42px; }
  .welcome .profiles { grid-column:2; grid-row:1 / 3; }
  .welcome .parents-link { grid-column:1; }
  .welcome .profile-card { min-height:160px; padding:12px; }
}