@layer screens {
  /* ---------- page screens (home, continent, settings) ---------- */
  .page {
    max-width: var(--page-max); margin: 0 auto;
    padding: max(var(--s2), env(safe-area-inset-top)) max(var(--s4), env(safe-area-inset-right)) calc(var(--s7) + env(safe-area-inset-bottom)) max(var(--s4), env(safe-area-inset-left));
    animation: page-in 260ms var(--ease);
  }
  .page--wide { max-width: 1200px; }
  @keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
  .topbar--home { margin-bottom: var(--s4); }

  /* hero card */
  .hero-card {
    position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s4);
    min-height: 260px; padding: var(--s5); border-radius: var(--r-xl); overflow: hidden; isolation: isolate;
    text-decoration: none; color: var(--ink);
    background: linear-gradient(160deg, var(--ocean), var(--ocean-deep));
    box-shadow: var(--shadow-2);
    transition: transform var(--t-med) var(--ease), box-shadow var(--t-med);
  }
  .hero-card:hover { box-shadow: var(--shadow-3); }
  .hero-card:active { transform: scale(0.99); }
  .hero-card__map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
  .hm-grat { fill: none; stroke: var(--graticule); stroke-width: 1; }
  .hm-land { fill: var(--land); stroke: var(--coast); stroke-width: 0.8; }
  .hm-rivers { fill: none; stroke: var(--water-line); stroke-width: 1.4; opacity: 0.7; }
  .hero-card::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, color-mix(in srgb, var(--surface) 96%, transparent) 0%, color-mix(in srgb, var(--surface) 82%, transparent) 38%, transparent 72%);
  }
  .hero-card__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -0.025em; margin: 2px 0 4px; }
  .hero-card__meta { color: var(--ink-2); font-size: var(--fs-sm); }
  .hero-card__cta { margin-top: var(--s4); }
  .hero-card__ring .ring { background: var(--surface); border-radius: 50%; box-shadow: var(--shadow-2); }

  /* continent grid */
  .cont-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--s3); }
  .cont-card {
    display: grid; gap: 2px; height: 100%; padding: var(--s4); border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--line); text-decoration: none; box-shadow: var(--shadow-1);
    transition: border-color var(--t-fast), transform var(--t-fast) var(--ease);
  }
  a.cont-card:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); }
  a.cont-card:active { transform: scale(0.99); }
  .cont-card.is-current { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
  .cont-card.is-soon { background: transparent; box-shadow: none; border-style: dashed; color: var(--ink-2); }
  .cont-card__when { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
  .cont-card.is-current .cont-card__when { color: var(--accent); }
  .cont-card__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); letter-spacing: -0.01em; }
  .cont-card__meta { font-size: var(--fs-sm); color: var(--ink-2); }
  .cont-card__bar { display: block; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); margin-top: var(--s2); overflow: hidden; }
  .cont-card__bar > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
  .foot { margin-top: var(--s7); font-size: var(--fs-xs); color: var(--ink-3); text-align: center; }

  /* continent screen */
  .summary-card { display: flex; align-items: center; gap: var(--s5); padding: var(--s5); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-2); margin-top: var(--s2); }
  .summary-card__headline { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--s2); }
  .legend-list { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-sm); color: var(--ink-2); }
  .legend { display: inline-flex; align-items: center; gap: 6px; }
  .legend strong { color: var(--ink); font-variant-numeric: tabular-nums; }
  .legend__dot { width: 10px; height: 10px; border-radius: 50%; }
  .legend--known .legend__dot { background: var(--known); }
  .legend--learning .legend__dot { background: var(--learning); }
  .legend--new .legend__dot { background: var(--new); }

  .action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: var(--s4) 0; }
  @media (max-width: 420px) { .action-grid { grid-template-columns: 1fr; } }
  .action {
    display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line); text-decoration: none; box-shadow: var(--shadow-1);
    transition: transform var(--t-fast) var(--ease), border-color var(--t-fast);
  }
  .action:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); }
  .action:active { transform: scale(0.985); }
  .action__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--surface-2); flex: none; }
  .action__text { display: grid; gap: 1px; }
  .action__text span { font-size: var(--fs-xs); color: var(--ink-2); }
  .action--accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
  .action--accent .action__ico { background: color-mix(in srgb, var(--accent-ink) 16%, transparent); }
  .action--accent .action__text span { color: var(--accent-ink); opacity: 1; }

  .unit-list { display: grid; gap: var(--s2); }
  .unit {
    display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4); text-align: left;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1);
    transition: transform var(--t-fast) var(--ease), border-color var(--t-fast);
  }
  .unit:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); }
  .unit:active { transform: scale(0.99); }
  .unit__text { flex: 1; min-width: 0; display: grid; }
  .unit__meta { font-size: var(--fs-xs); color: var(--ink-2); }

  /* unit sheet */
  .mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .mode-card {
    display: grid; gap: 4px; align-content: start; padding: var(--s4); border-radius: var(--r-lg); text-decoration: none;
    background: var(--surface-2); border: 1px solid var(--line); transition: transform var(--t-fast) var(--ease), border-color var(--t-fast);
  }
  .mode-card:hover { border-color: var(--accent); }
  .mode-card:active { transform: scale(0.98); }
  .mode-card strong { font-size: var(--fs-md); margin-top: var(--s2); }
  .mode-card > span:last-child { font-size: var(--fs-xs); color: var(--ink-2); }
  .mode-card__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--accent); color: var(--accent-ink); }
  .unit-sheet__sub { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin: var(--s5) 0 var(--s2); }
  .obj-list { display: grid; }
  .obj { display: flex; align-items: center; gap: var(--s3); padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
  .obj:last-child { border-bottom: 0; }
  .obj__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--new); flex: none; }
  .obj--learning .obj__dot { background: var(--learning); }
  .obj--known .obj__dot { background: var(--known); }
  .obj > span:nth-child(2) { flex: 1; font-weight: 550; }
  .obj__hidden { color: var(--ink-3); letter-spacing: 0.2em; }
  .obj__state { font-size: var(--fs-xs); color: var(--ink-3); }

  /* ---------- play ---------- */
  .play { position: fixed; inset: 0; display: block; overflow: hidden; background: var(--ocean); }
  .play__map { position: absolute; inset: 0; }
  .play__top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    display: flex; align-items: center; gap: var(--s3);
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
    pointer-events: none;
  }
  .play__top > * { pointer-events: auto; }
  .pbar { flex: 1; height: 8px; border-radius: 99px; background: var(--glass); box-shadow: var(--shadow-1); overflow: hidden; max-width: 520px; margin: 0 auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .pbar__fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width 400ms var(--ease); }
  .play__count { min-width: 44px; padding: 6px 10px; border-radius: var(--r-pill); background: var(--glass); box-shadow: var(--shadow-1); text-align: center; font-weight: 700; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .play__count:empty { visibility: hidden; }
  .play .mapview__controls { bottom: calc(var(--panel-h, 190px) + max(12px, env(safe-area-inset-bottom)) + 12px); }

  .panel {
    position: absolute; z-index: 4; left: 50%; bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--kb, 0px)); transform: translateX(-50%);
    width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 90px); overflow: auto;
    padding: var(--s4) var(--s5) var(--s5); border-radius: var(--r-xl);
    background: var(--glass); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: var(--shadow-3); border: 1px solid color-mix(in srgb, var(--surface) 60%, transparent);
    animation: panel-in 300ms var(--ease);
  }
  @keyframes panel-in { from { transform: translate(-50%, 24px); opacity: 0; } }
  .prompt { display: grid; gap: 2px; justify-items: start; }
  .prompt__kind { font-size: var(--fs-xs); font-weight: 750; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
  .prompt__name { font-family: var(--font-display); font-size: clamp(1.7rem, 1.3rem + 2vw, 2.3rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
  .prompt__hint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); margin-top: 4px; }
  .prompt--name .prompt__hint { margin-top: 0; }

  .answer-form { display: flex; gap: var(--s2); margin-top: var(--s3); }
  .answer {
    flex: 1; min-width: 0; min-height: 50px; padding: 0 var(--s4); border-radius: var(--r-md);
    border: 1.5px solid var(--line); background: var(--surface); font-size: 1.15rem; font-weight: 550;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
  }
  .answer:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
  .answer-form .btn { min-height: 50px; }
  .letters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
  .letter { min-width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); font-weight: 650; font-size: 1.05rem; }
  .letter:active { transform: scale(0.94); background: var(--accent-soft); }
  .panel__row { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap; }
  .choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s3); }
  .choice { min-height: 52px; padding: var(--s2) var(--s3); border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); font-weight: 650; text-align: center; }
  .choice:hover { border-color: var(--accent); }

  .feedback { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); animation: fb-in 260ms var(--ease); }
  @keyframes fb-in { from { transform: scale(0.97); opacity: 0; } }
  .feedback__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; color: var(--surface); }
  .feedback--ok .feedback__ico { background: var(--ok); }
  .feedback--near .feedback__ico { background: var(--near); }
  .feedback--bad .feedback__ico { background: var(--bad); }
  .feedback__title { font-weight: 750; font-size: var(--fs-lg); }
  .feedback--ok .feedback__title { color: var(--ok); }
  .feedback--near .feedback__title { color: var(--near); }
  .feedback--bad .feedback__title { color: var(--bad); }
  .feedback__sub { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 2px; }

  .panel--summary { max-height: calc(100dvh - 100px); }
  .summary__head { display: flex; align-items: center; gap: var(--s4); }
  .summary__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.015em; }
  .summary__head .ring__label { font-size: 0.82rem; }
  .res-list { display: grid; margin: var(--s4) 0; max-height: 34dvh; overflow: auto; }
  .res { display: flex; align-items: center; gap: var(--s2); padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
  .res:last-child { border-bottom: 0; }
  .res__ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--surface); flex: none; }
  .res--ok .res__ico { background: var(--ok); }
  .res--near .res__ico { background: var(--near); }
  .res--bad .res__ico { background: var(--bad); }
  .res__kind { color: var(--ink-3); font-size: var(--fs-xs); min-width: 64px; }
  .res__name { font-weight: 650; flex: 1; }
  .res__typed { color: var(--near); font-size: var(--fs-xs); text-decoration: line-through; }
  .summary__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .summary__actions .btn { flex: 1 1 auto; }

  /* ---------- test ---------- */
  .test { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 55fr) minmax(0, 45fr); background: var(--bg); }
  .test__top {
    display: flex; align-items: center; gap: var(--s2);
    padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--line); background: var(--surface);
  }
  .test__title { flex: 1; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .test__sub { color: var(--ink-2); font-weight: 500; }
  .test__clock { font-weight: 750; font-variant-numeric: tabular-nums; padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface-2); }
  .test__clock:empty { display: none; }
  .test__clock.is-low { background: var(--bad-soft); color: var(--bad); }
  .test__map { position: relative; min-height: 0; }
  .test__body { min-height: 0; overflow: auto; display: flex; flex-direction: column; background: var(--surface); border-top: 1px solid var(--line); }
  .test-setup, .test-results { padding: var(--s5); max-width: 560px; width: 100%; margin: 0 auto; }
  .test-setup__text { display: flex; gap: var(--s3); color: var(--ink-2); }
  .test-setup__text .icon { flex: none; color: var(--accent); }
  .test-setup .btn--block { margin-top: var(--s5); }
  .test__key { flex: 1; padding: var(--s3) var(--s4) var(--s2); }
  .test__keytitle { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin: var(--s1) 0 var(--s2); }
  .key { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
  .key__row { display: grid; grid-template-columns: 36px 84px 1fr; align-items: center; gap: var(--s2); padding: 4px; border-radius: var(--r-md); transition: background-color var(--t-fast); }
  .key__row.is-active { background: var(--accent-soft); }
  .key__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); font-weight: 750; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
  .key__row.is-active .key__num { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .key__kind { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; }
  .key__input { min-width: 0; min-height: 42px; padding: 0 var(--s3); border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--bg); font-weight: 550; }
  .key__input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
  .test__foot {
    position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line);
  }
  .test__count { font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .test-results__head { display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s5); }
  .test-results__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -0.02em; }
  .test-results__grade { color: var(--ink-2); }
  .review { display: grid; margin-bottom: var(--s5); }
  .review__row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: var(--s3); padding: 8px 4px; border-bottom: 1px solid var(--line); border-radius: var(--r-sm); }
  .review__row.is-active { background: var(--accent-soft); }
  .review__text { display: grid; }
  .review__kind { font-size: var(--fs-xs); color: var(--ink-3); }
  .review__typed { font-size: var(--fs-xs); color: var(--ink-2); }
  .review__ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--surface); }
  .review--ok .review__ico { background: var(--ok); }
  .review--near .review__ico { background: var(--near); }
  .review--bad .review__ico { background: var(--bad); }
  .review--ok .key__num { border-color: var(--ok); color: var(--ok); }
  .review--near .key__num { border-color: var(--near); color: var(--near); }
  .review--bad .key__num { border-color: var(--bad); color: var(--bad); }

  @media (min-width: 900px) {
    .test { grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: auto minmax(0, 1fr); }
    .test__top { grid-column: 1 / -1; }
    .test__body { border-top: 0; border-left: 1px solid var(--line); }
    .key { grid-template-columns: 1fr; }
  }

  /* ---------- settings ---------- */
  .settings { display: grid; gap: var(--s4); margin-top: var(--s4); }
  .setting { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
  .setting__label { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 650; }
  .setting__label small { display: block; font-weight: 400; color: var(--ink-2); font-size: var(--fs-xs); }
  .setting--switch { cursor: pointer; flex-wrap: nowrap; }
  .settings .btn--danger-ghost { justify-self: start; }

  /* ---------- dev ---------- */
  .dev__map { height: 70vh; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); }
  .dev__info { margin: var(--s2) 0; font-size: var(--fs-sm); font-family: ui-monospace, monospace; }
  .dev__list { columns: 2 320px; font-size: var(--fs-xs); margin-top: var(--s4); }
}

@layer screens {
  /* ---------- print view (screen preview + paper) ---------- */
  .print-page { max-width: 900px; margin: 0 auto; padding: max(var(--s2), env(safe-area-inset-top)) var(--s4) var(--s7); }
  .print-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) 0; position: sticky; top: 0; background: var(--bg); z-index: 2; }
  .print-toolbar__title { flex: 1; font-family: var(--font-display); font-size: var(--fs-lg); min-width: 10ch; }
  .print-toolbar__check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
  .print-hint { margin: var(--s1) 0 var(--s3); }
  .print-sheet { background: #fff; color: #111; padding: 14mm 12mm; border-radius: var(--r-md); box-shadow: var(--shadow-2); font-family: var(--font-ui); }
  .print-head h1 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 6px; }
  .print-fields { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 0.95rem; margin-bottom: 10px; }
  .print-map { margin: 0; }
  .smap { width: 100%; height: auto; display: block; }
  .smap__sea { fill: #eef3f6; }
  .smap__grat { fill: none; stroke: #c9d6de; stroke-width: 0.6; }
  .smap__land, .print-map .smap__land { fill: #fff; stroke: #1b1b1b; stroke-width: 0.7; stroke-linejoin: round; }
  .smap__borders { fill: none; stroke: #9aa3aa; stroke-width: 0.5; stroke-dasharray: 3 2; }
  .smap__inset { fill: #eef3f6; stroke: #1b1b1b; stroke-width: 1; }
  .smap__lakes { fill: #cfe2f0; stroke: #1f5f9c; stroke-width: 0.7; }
  .smap__rivers { fill: none; stroke: #1f5f9c; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
  .smap__mark circle { fill: #fff; stroke: #111; stroke-width: 1.6; }
  .smap__mark text { font-family: var(--font-ui); font-weight: 750; fill: #111; }
  .smap__frame { fill: none; stroke: #1b1b1b; stroke-width: 1.2; }
  .print-key { list-style: none; padding: 0; margin: 12px 0 0; columns: 2 260px; column-gap: 28px; }
  .print-key li { display: grid; grid-template-columns: 2.2em 6.5em 1fr; align-items: end; gap: 6px; break-inside: avoid; padding: 7px 0 3px; font-size: 0.95rem; }
  .print-key__n { font-weight: 750; font-variant-numeric: tabular-nums; }
  .print-key__kind { color: #555; }
  .print-key__line { border-bottom: 1px solid #444; height: 1.1em; }
  .print-answers { margin-top: 18px; padding-top: 12px; border-top: 2px dashed #bbb; }
  .print-answers h2 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 6px; }
  .print-answers ol { list-style: none; padding: 0; columns: 2 260px; column-gap: 28px; }
  .print-answers li { padding: 3px 0; break-inside: avoid; }

  @media print {
    @page { size: A4 portrait; margin: 10mm; }
    html, body { background: #fff !important; }
    .print-toolbar, .print-hint, .toast { display: none !important; }
    .print-page { padding: 0; max-width: none; }
    .print-sheet { box-shadow: none; border-radius: 0; padding: 0; }
    .print-answers { break-before: page; border-top: 0; margin-top: 0; padding-top: 0; }
    .page { animation: none; }
  }
}
@layer screens {
  .print-answers .print-key__n { display: inline-block; min-width: 2em; }
}