/* Hallmark · shape: app screen · scope: app · genre: playful · theme: Hum (1/3) · posture: full-palette · signature: a living isometric island with a path revealed by play · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4 · weakest: hierarchy; controls kept beside the island instead of over the path */
/* Hallmark · finish-review: in-thread · 3 findings resolved: canvas sizing, path occlusion, control height · signature retained. */
/* Hallmark · answered F13 · Manrope replaces Chillax for complete local Cyrillic coverage. */
:root {
  --color-paper: #f5f3e9; --color-paper-2: #eeede0; --color-paper-3: #e5e6d8;
  --color-ink: #2d4439; --color-muted: #637165; --color-rule: #d9ddce;
  --color-accent: #e5c56a; --color-accent-deep: #c5a753; --color-accent-ink: #303c2c;
  --color-focus: #34664f; --color-card: #fcfaf2; --color-veil: #243b3570;
  --color-clear: transparent; --color-shadow: #4b594018;
  --land: #9baf81; --land-light: #b8c799; --land-dark: #7f996e; --soil: #929879; --soil-dark: #747e66; --soil-line: #aab193;
  --path: #e6e2c8; --path-light: #efebd5; --path-side: #b4b69a; --path-dark: #d4d2b9;
  --forest: #3d6552; --forest-light: #6b8d61; --forest-dark: #325748; --leaf: #85a776; --trunk: #6d7660;
  --wall: #c6c8b0; --wall-light: #dedeca; --wall-dark: #a7b099; --arch: #ede7cb; --arch-side: #c1bfa4;
  --light: #fff4bf; --light-soft: #f7e7a059; --water: #a0c0b4; --water-light: #c9d9c6; --ripple: #dfebd6;
  --traveler: #d48255; --traveler-dark: #ad694b; --face: #ffe5bc; --friend: #628f89; --friend-dark: #4e7674;
  --cloud: #fdfbf2; --cloud-shadow: #dfe5d5; --flower: #f5e9bd; --flower-coral: #dca387; --night-shadow: #425c4320;
  --font-body: 'Manrope', ui-rounded, system-ui, sans-serif; --font-display: var(--font-body);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --radius: 16px; --ease: cubic-bezier(.22,1,.36,1);
}
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('/public/fonts/manrope-regular.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('/public/fonts/manrope-semibold.ttf') format('truetype'); }
* { box-sizing: border-box; }
html { overflow-x: clip; background: var(--color-paper); scrollbar-color: var(--color-rule) var(--color-paper); }
body { margin: 0; overflow-x: clip; color: var(--color-ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
::selection { background: var(--color-accent); color: var(--color-ink); }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: var(--color-clear); }
button, canvas { touch-action: manipulation; }
button { white-space: nowrap; }
button:focus-visible, canvas:focus-visible, a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
button:disabled { opacity: .6; cursor: not-allowed; filter: saturate(.4); }
button:active:not(:disabled) { transform: translateY(2px); }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
[hidden] { display: none !important; }
.shell { max-width: 1600px; margin: 0 auto; padding: 0 var(--space-16); min-height: 100svh; display: flex; flex-direction: column; }
.topbar { min-height: 112px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.wordmark { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border: 0; background: var(--color-clear); font-size: 27px; font-weight: 600; letter-spacing: -.06em; }
.wordmark svg { width: 36px; height: 36px; stroke-width: 1.7; }
.top-actions { display: flex; align-items: center; gap: var(--space-4); }
.text-button { background: var(--color-clear); border: 0; border-radius: 6px; padding: var(--space-2) 0; font-size: 14px; min-height: 44px; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.text-button:hover { text-decoration: underline; }
.icon-button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-rule); border-radius: 50%; background: var(--color-clear); padding: 0; }
.icon-button:hover { background: var(--color-paper-3); }
.icon-button svg { width: 19px; height: 19px; }
.stage { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); align-items: center; min-height: 570px; }
.story { position: relative; z-index: 1; padding: 0 0 var(--space-12); }
h1,h2 { font-family: var(--font-display); font-weight: 500; min-width: 0; overflow-wrap: break-word; text-wrap: balance; }
h1 { font-size: clamp(54px, 5.5vw, 82px); line-height: 1.13; letter-spacing: -.065em; margin: 0 0 var(--space-6); }
.description { font-size: 17px; line-height: 1.85; color: var(--color-muted); max-width: 35ch; margin: 0 0 var(--space-10); text-wrap: pretty; }
.primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-5); min-height: 52px; border: 0; border-radius: var(--radius); padding: var(--space-4) var(--space-6); background: var(--color-accent); color: var(--color-accent-ink); font-size: 14px; line-height: 1.4; font-weight: 600; box-shadow: 0 3px 0 var(--color-accent-deep); transition: transform .18s var(--ease); }
.primary:hover:not(:disabled) { transform: translateY(-2px); }
.primary:active:not(:disabled) { transform: translateY(2px); }
.primary svg { width: 20px; height: 20px; }
.small-note { font-size: 12px; color: var(--color-muted); margin: var(--space-6) 0 0; }
.restart { display: block; margin-top: var(--space-4); }
.world { position: relative; align-self: stretch; height: auto; min-height: 570px; margin-left: calc(-1 * var(--space-10)); }
#world { display: block; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; cursor: default; border-radius: var(--radius); }
.scene-caption { display: flex; align-items: center; justify-content: center; gap: var(--space-3); position: absolute; bottom: 56px; right: 9%; font-size: 12px; color: var(--color-muted); }
.caption-line { width: 26px; height: 1px; background: var(--color-muted); }
.bottom-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: 112px; border-top: 1px solid var(--color-rule); }
.journey { display: flex; align-items: center; gap: var(--space-10); }
.journey-caption { color: var(--color-muted); font-size: 12px; max-width: 100px; line-height: 1.7; }
.journey ol { display: flex; align-items: center; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.journey li { display: flex; gap: var(--space-2); align-items: center; color: var(--color-muted); font-size: 12px; }
.chapter-dot { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border: 1px solid var(--color-rule); border-radius: 50%; font-size: 11px; }
.journey .current { color: var(--color-ink); }
.journey .current .chapter-dot { border-color: var(--color-ink); }
.journey .done .chapter-dot { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.footer-note { max-width: 220px; margin: 0; color: var(--color-muted); font-size: 12px; text-align: right; }
.chapter-label { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); font-size: 13px; color: var(--color-muted); }
#chapter-number { display: inline-block; font-variant-numeric: tabular-nums; font-size: 16px; border-bottom: 1px solid var(--color-muted); padding-bottom: var(--space-1); }
[data-screen="play"] h1, [data-screen="complete"] h1, [data-screen="ending"] h1 { font-size: clamp(42px, 4.2vw, 62px); }
[data-screen="play"] .story { padding-top: var(--space-6); }
body:has([data-screen="play"]) #world { cursor: pointer; }
.minor-actions { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-5); }
.minor-actions .icon-button { border: 0; }
.hint-text { color: var(--color-muted); font-size: 13px; max-width: 33ch; min-height: 4.8em; margin: var(--space-3) 0 0; text-wrap: pretty; }
kbd { display: inline-flex; justify-content: center; align-items: center; width: 22px; height: 22px; border: 1px solid var(--color-accent-deep); border-radius: 5px; font: inherit; font-size: 11px; }
.world-toolbar { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: var(--space-4); color: var(--color-muted); font-size: 12px; }
.reflection { margin: 0 0 var(--space-8); max-width: 32ch; color: var(--color-muted); font-size: 16px; line-height: 1.85; }
.keepsakes { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-8); font-size: 14px; color: var(--color-muted); }
.keepsakes span::before { content: '✓'; margin-right: var(--space-3); color: var(--color-focus); }
#stay { margin-left: var(--space-5); }
.resting { position: absolute; bottom: 55px; width: 100%; display: flex; gap: var(--space-3); align-items: center; justify-content: center; font-size: 14px; }
.rest-ring { width: 22px; height: 22px; border: 2px solid var(--color-rule); border-top-color: var(--color-focus); border-radius: 50%; animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.movement { display: none; position: absolute; right: 0; bottom: 0; text-align: center; }
.movement > div { display: flex; gap: var(--space-1); }
.movement button { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 44px; height: 44px; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 12px; }
.movement button:hover { background: var(--color-paper-3); }
dialog { color: var(--color-ink); background: var(--color-card); border: 0; border-radius: 24px; padding: var(--space-12); width: min(90%, 540px); box-shadow: 0 24px 70px var(--color-shadow); }
dialog::backdrop { background: var(--color-veil); }
dialog h2 { font-size: 32px; letter-spacing: -.04em; margin: 0 0 var(--space-6); }
dialog p { color: var(--color-muted); font-size: 15px; margin: 0 0 var(--space-6); }
.close-dialog { position: absolute; top: 16px; right: 16px; }
.noscript { position: fixed; bottom: 0; width: 100%; background: var(--color-accent); padding: var(--space-4); text-align: center; }
@media (min-width: 1600px) { .stage { min-height: 690px; } }
@media (max-width: 1150px) {
  .shell { padding: 0 var(--space-8); }
  .stage { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
  .world { margin-left: calc(-1 * var(--space-8)); }
  .journey { gap: var(--space-6); }
  .journey ol { gap: var(--space-4); }
  .footer-note { max-width: 160px; }
  .scene-caption { right: 5%; }
}
@media (max-width: 760px) {
  .shell { padding: 0 var(--space-6); }
  .topbar { min-height: 88px; }
  .wordmark { font-size: 24px; gap: var(--space-2); }
  .wordmark svg { width: 30px; height: 30px; }
  .top-actions { gap: var(--space-2); }
  .top-actions .text-button { margin-right: var(--space-2); font-size: 12px; }
  .top-actions .icon-button { width: 40px; height: 40px; }
  .stage { display: flex; flex-direction: column; min-height: 0; align-items: stretch; }
  .story { padding: var(--space-8) 0 0; }
  h1 { font-size: 54px; margin-bottom: var(--space-5); }
  .description { font-size: 15px; line-height: 1.8; margin-bottom: var(--space-6); max-width: 36ch; }
  .primary { min-height: 52px; padding: var(--space-3) var(--space-5); }
  .small-note { margin-top: var(--space-4); }
  .world { height: 360px; min-height: 360px; margin: 0 calc(-1 * var(--space-6)); }
  #world { min-height: 0; height: 100%; }
  .scene-caption { bottom: 18px; right: 24px; font-size: 11px; }
  .bottom-bar { min-height: 110px; padding: var(--space-5) 0; }
  .journey { display: block; width: 100%; }
  .journey-caption { display: block; max-width: none; margin-bottom: var(--space-3); font-size: 11px; }
  .journey ol { justify-content: space-between; gap: var(--space-2); }
  .journey li { font-size: 10px; gap: var(--space-1); }
  .chapter-dot { width: 22px; height: 22px; }
  .footer-note { display: none; }
  [data-screen="play"] .stage { flex: 1; }
  [data-screen="play"] .story { padding: var(--space-3) 0 0; }
  [data-screen="play"] h1, [data-screen="complete"] h1, [data-screen="ending"] h1 { font-size: 39px; margin-bottom: var(--space-4); }
  .chapter-label { margin-bottom: var(--space-4); font-size: 12px; }
  [data-screen="play"] .description { margin-bottom: var(--space-4); }
  #play-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); }
  .minor-actions { margin: 0; gap: var(--space-2); }
  #hint { font-size: 12px; }
  #reset { width: 34px; }
  .hint-text { flex-basis: 100%; max-width: none; min-height: 3.2em; margin-bottom: 0; }
  .world-toolbar { top: 0; right: 24px; }
  .world-toolbar > span { font-size: 11px; }
  [data-screen="play"] .world { height: 380px; min-height: 380px; }
  .movement { display: block; right: 24px; bottom: 10px; }
  [data-screen="play"] .bottom-bar { min-height: 80px; }
  [data-screen="play"] .journey-caption { display: none; }
  .reflection { max-width: 38ch; font-size: 15px; }
  .resting { bottom: 105px; }
  dialog { padding: var(--space-8); }
  dialog h2 { font-size: 28px; }
}
@media (max-width: 370px) {
  .shell { padding: 0 var(--space-5); }
  .top-actions { gap: var(--space-1); }
  .top-actions .text-button { margin: 0; }
  .top-actions .icon-button { width: 36px; }
  .wordmark { font-size: 21px; }
  h1 { font-size: 47px; }
  .world { margin: 0 calc(-1 * var(--space-5)); height: 320px; min-height: 320px; }
  [data-screen="play"] h1 { font-size: 34px; }
  .primary { gap: var(--space-3); }
  #play-actions { gap: var(--space-2) var(--space-4); }
  .journey li { font-size: 9px; }
  .chapter-dot { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
[data-screen="quiet"] .stage { display: block; }
[data-screen="quiet"] .world { height: max(570px, 70svh); margin-left: 0; }
.game-author { display: flex; flex-direction: column; text-decoration: none; margin-left: var(--space-8); margin-right: auto; color: var(--color-ink); padding-left: var(--space-6); border-left: 1px solid var(--color-rule); }
.game-author span { font-size: 13px; }
.game-author small { font-size: 11px; color: var(--color-muted); }
.game-skip { display: inline-flex; min-height: 44px; align-items: center; margin-left: var(--space-5); color: var(--color-muted); font-size: 13px; text-underline-offset: 5px; }
.site-entry { text-decoration: none; }
.ending-secondary { display: flex; gap: var(--space-6); margin-top: var(--space-4); }
.ending-secondary #stay { margin-left: 0; }
@media(max-width:1150px) { .game-skip { display: flex; margin: var(--space-3) 0 0; } }
@media(max-width:760px) {
  .topbar { flex-wrap: wrap; padding: var(--space-4) 0; gap: var(--space-2) 0; }
  .game-author { order: 3; flex-basis: 100%; margin: 0; padding: var(--space-2) 0 0; border: 0; flex-direction: row; gap: var(--space-3); align-items: baseline; }
  .game-author span { font-size: 12px; }
  .game-skip { display: inline-flex; margin: var(--space-2) 0 0; }
}

/* Keep the island and its controls together, with a compact phone play screen. */
#story-title:focus { outline: none; }
.game-controls { min-width: 0; }
[data-screen="play"] .stage { grid-template-areas: "story world" "controls world"; grid-template-rows: 1fr 1fr; }
[data-screen="play"] .story { grid-area: story; align-self: end; padding-bottom: var(--space-5); }
[data-screen="play"] .world { grid-area: world; }
[data-screen="play"] .game-controls { grid-area: controls; align-self: start; padding-bottom: var(--space-12); }
#world { touch-action: pan-y pinch-zoom; }

@media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) {
  .shell { padding-left: max(var(--space-4),env(safe-area-inset-left)); padding-right: max(var(--space-4),env(safe-area-inset-right)); }
  .topbar { min-height: 0; padding: max(var(--space-2),env(safe-area-inset-top)) 0 var(--space-2); gap: 0; flex-wrap: wrap; flex-shrink: 0; }
  .wordmark { font-size: 24px; min-height: 44px; }
  .wordmark svg { width: 30px; height: 30px; }
  .top-actions { gap: var(--space-1); }
  .top-actions .text-button { min-width: 44px; margin: 0; font-size: 12px; }
  .top-actions .icon-button { width: 44px; height: 44px; }
  .game-author { min-height: 36px; padding: 0; align-items: center; }
  .shell:not([data-screen="home"]) .topbar { flex-wrap: nowrap; }
  .shell:not([data-screen="home"]) .wordmark { width: 44px; flex-shrink: 0; }
  .shell:not([data-screen="home"]) .wordmark span { display: none; }
  .shell:not([data-screen="home"]) .game-author { flex: 1; order: 0; min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; }
  .shell:not([data-screen="home"]) .game-author span { font-size: 11px; }
  .shell:not([data-screen="home"]) .game-author small { display: none; }
  .shell:not([data-screen="home"]) .top-actions { gap: 0; }
  .stage { display: flex; flex-direction: column; min-height: 0; }
  .story { padding: var(--space-5) 0 0; }
  h1 { font-size: clamp(40px,11.5vw,52px); margin-bottom: var(--space-4); }
  .description { font-size: 15px; line-height: 1.65; margin-bottom: var(--space-4); }
  .desktop-break { display: none; }
  .world { height: clamp(210px,33svh,300px); min-height: 0; margin: 0 calc(-1 * var(--space-4)); }
  .scene-caption { display: none; }
  [data-screen="home"] .story { display: contents; }
  [data-screen="home"] h1 { order: 0; margin-top: var(--space-5); }
  [data-screen="home"] .description { order: 1; margin-bottom: 0; }
  [data-screen="home"] .world { order: 2; }
  #home-actions { order: 3; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); padding-bottom: var(--space-5); }
  #home-actions .primary { width: 100%; padding-inline: var(--space-3); gap: var(--space-2); font-size: 13px; }
  .game-skip { margin: 0; font-size: 12px; }
  #home-note { grid-column: 1/-1; margin: 0; }
  #new-game { margin: 0; justify-self: start; }
  .bottom-bar { min-height: 58px; padding: var(--space-3) 0 max(var(--space-3),env(safe-area-inset-bottom)); flex-shrink: 0; }
  .journey-caption { display: none; }
  .journey ol { gap: var(--space-2); }
  .journey li { min-width: 0; font-size: 11px; line-height: 1.35; }
  .chapter-dot { width: 22px; height: 22px; flex-shrink: 0; }
  .footer-note { display: none; }
  .shell[data-screen="play"] { height: 100svh; height: 100dvh; min-height: 540px; }
  [data-screen="play"] .stage { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: "story" "world" "controls"; grid-template-rows: auto minmax(180px,1fr) auto; flex: 1; min-height: 0; }
  [data-screen="play"] .story { align-self: auto; display: flex; flex-direction: column; padding: var(--space-2) 0 0; }
  [data-screen="play"] h1 { font-size: clamp(28px,7.5vw,34px); line-height: 1.12; margin: 0 0 var(--space-2); }
  .chapter-label { order: -1; margin: 0 0 var(--space-2); gap: var(--space-2); font-size: 11px; }
  #chapter-number { font-size: 12px; padding: 0; border: 0; }
  #chapter-number::after { content: ' / 03'; }
  [data-screen="play"] .description { margin: 0; max-width: none; font-size: 13px; line-height: 1.5; }
  [data-screen="play"] .world { height: auto; min-height: 0; align-self: stretch; }
  .world-toolbar { top: var(--space-1); left: var(--space-4); right: var(--space-4); justify-content: space-between; gap: var(--space-2); }
  .world-toolbar > span { font-size: 11px; }
  [data-screen="play"] .game-controls { align-self: stretch; display: grid; grid-template-columns: minmax(0,1fr) 104px; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0 max(var(--space-3),env(safe-area-inset-bottom)); }
  #play-actions { display: contents; }
  #action { grid-column: 1; grid-row: 1; min-width: 0; width: 100%; min-height: 48px; gap: var(--space-2); padding: var(--space-3); font-size: 13px; }
  #action kbd { display: none; }
  #action-label { min-width: 0; white-space: normal; }
  .minor-actions { grid-column: 1; grid-row: 2; display: flex; gap: var(--space-1); margin: 0; justify-content: space-between; }
  #hint { font-size: 12px; min-height: 44px; text-align: left; }
  #reset { width: 44px; height: 44px; }
  .hint-text { grid-column: 1/-1; grid-row: 3; min-height: 0; max-width: none; margin: var(--space-1) 0 0; font-size: 12px; line-height: 1.5; }
  .hint-text:empty { display: none; }
  .movement { position: static; grid-column: 2; grid-row: 1/3; display: grid; grid-template-columns: repeat(2,48px); grid-template-rows: repeat(2,48px); gap: var(--space-2); align-self: center; }
  .movement > div { display: contents; }
  .movement button { width: 48px; height: 48px; touch-action: manipulation; }
  .movement button svg { transform: rotate(45deg); }
  .movement [data-move="up"] { grid-area: 1/2; }
  .movement [data-move="left"] { grid-area: 1/1; }
  .movement [data-move="down"] { grid-area: 2/1; }
  .movement [data-move="right"] { grid-area: 2/2; }
  [data-screen="play"] .bottom-bar { display: none; }
  .resting { bottom: var(--space-2); font-size: 12px; }
  [data-screen="complete"] h1,[data-screen="ending"] h1 { font-size: clamp(32px,9vw,42px); }
  [data-screen="complete"] .story,[data-screen="ending"] .story { padding-bottom: var(--space-2); }
  .reflection { margin-bottom: var(--space-5); }
  .keepsakes { margin-bottom: var(--space-5); }
  [data-screen="quiet"] .world { height: 70svh; }
  dialog { width: calc(100% - 32px); max-height: calc(100dvh - 32px); padding: var(--space-6); overflow-y: auto; }
  dialog h2 { padding-right: var(--space-8); font-size: 26px; }
  dialog p { font-size: 14px; }
}

@media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
  .shell[data-screen="play"] { min-height: 350px; }
  [data-screen="play"] .stage { grid-template-columns: minmax(240px,.9fr) minmax(0,1.4fr); grid-template-areas: "story world" "controls world"; grid-template-rows: auto 1fr; column-gap: var(--space-4); }
  [data-screen="play"] .story { padding-top: 0; }
  [data-screen="play"] h1 { font-size: 24px; }
  [data-screen="play"] .description { font-size: 12px; }
  [data-screen="play"] .game-controls { align-self: end; }
  [data-screen="play"] .world { margin: 0; }
  [data-screen="play"] .world-toolbar { left: 0; right: 0; }
  [data-screen="play"] .hint-text { font-size: 11px; line-height: 1.4; }
}