@import url('./fonts.css');

:root {
  --paper: #f2eedf; --ink: #272c25; --muted: #697060; --line: #d8d8c8; --accent: #cf5137;
  --font: 'DM Sans', sans-serif;
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  --safe-left: max(20px, env(safe-area-inset-left));
  --safe-right: max(20px, env(safe-area-inset-right));
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { background: #ebd8aa; color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.app, main { width: 100%; height: 100%; }
.stage { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; color: #28392e; background: #ebd8aa; }
.scenery { position: absolute; inset: -3%; background: #ebd8aa url('./assets/wildwood.webp') center / cover; z-index: -2; }
.stage[data-theme=amberwood] { color: #2c291f; background: #edbd78; }
.stage[data-theme=inkwild] { color: #252c25; background: #626961; }
#game { position: absolute; width: 100%; height: 100%; inset: 0; touch-action: none; outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.icon-button { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 26px; }
.icon-button:hover { background: #fff6; }
.menu-button { position: absolute; z-index: 6; top: var(--safe-top); right: var(--safe-right); display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--menu-border, #28392e30); border-radius: 50%; background: var(--menu-fill, #f2eedf35); color: var(--menu-ink, #28392e); }
.menu-button svg { width: 20px; height: 20px; stroke-width: 2; flex-shrink: 0; }
.hud { position: absolute; top: calc(var(--safe-top) + 5px); left: 0; right: 0; pointer-events: none; z-index: 3; }
.score-wrap { display: none; text-align: center; color: inherit; text-shadow: 0 1px 12px #fff8; }
.stage[data-state=playing] .score-wrap { display: block; }
#score { font: 600 44px / 1 'Outfit', sans-serif; display: block; }
.score-label { font-size: 9px; letter-spacing: 2px; }
.screen { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; flex-direction: column; text-align: center; pointer-events: none; }
.screen button { pointer-events: auto; }
.intro { padding: max(90px, 18dvh) 20px 0; }
.eyebrow { font-size: 10px; letter-spacing: 2.2px; font-weight: 600; margin: 0 0 10px; }
h1 { font: 900 clamp(78px, 12vw, 110px) / 1 'Outfit', sans-serif; letter-spacing: -.065em; margin: 0; }
.title-dot { color: var(--accent); }
.start-actions { position: absolute; bottom: max(80px, 13dvh); }
.primary-button { background: #272c25; color: #fff7e6; border: 1px solid #272c25; border-radius: 40px; min-width: 185px; min-height: 54px; padding: 15px 25px; display: inline-flex; justify-content: center; align-items: center; gap: 30px; font-size: 15px; font-weight: 600; box-shadow: 0 4px 0 #121b1712; }
.primary-button:hover { background: #404b38; }
.primary-button:active { transform: translateY(1px); }
.primary-button svg { width: 22px; }
.start-actions p { font-size: 12px; margin: 12px 0 0; }
.stage[data-theme=amberwood] .start-actions p { color: #fff2d5; text-shadow: 0 1px 4px #0008; }
.stage-bottom { position: absolute; bottom: var(--safe-bottom); left: var(--safe-left); right: var(--safe-right); display: flex; justify-content: space-between; align-items: center; gap: 16px; z-index: 3; pointer-events: none; color: #fff8e9; text-shadow: 0 1px 5px #192a19; font-size: 10px; letter-spacing: .5px; }
#best-label { letter-spacing: 1.5px; flex-shrink: 0; }
#best-label b { font-weight: 500; margin-left: 7px; }
#stage-hint { text-align: right; }
#stage-hint:empty, .stage[data-state=dead] .stage-bottom { display: none; }
.stage[data-state=playing] #stage-hint { background: #242b25bb; border-radius: 15px; padding: 6px 12px; text-shadow: none; letter-spacing: .1px; font-size: 11px; }

/* Results and menus stay inside the viewport; only their contents may scroll. */
.end-screen { padding: 80px 20px max(35px, env(safe-area-inset-bottom)); pointer-events: auto; overflow-y: auto; overscroll-behavior: contain; z-index: 4; background: #f3e9ccde; backdrop-filter: blur(7px); }
.end-screen > :first-child { margin-top: auto; }
.end-screen > :last-child { margin-bottom: auto; }
.end-screen > * { flex-shrink: 0; }
.end-screen h2, dialog h2 { font: 700 52px / 1 'Outfit', sans-serif; letter-spacing: -2px; margin: 8px 0 16px; }
.end-screen > p:not(.eyebrow) { font-size: 14px; margin: 0; }
.results { display: flex; gap: 46px; margin: 23px 0 28px; }
.results > div { display: flex; flex-direction: column; gap: 4px; }
.results strong { font: 500 46px / 1.1 'Outfit', sans-serif; }
.results span { font-size: 9px; letter-spacing: 1.2px; }
.back-button { border: 0; background: none; padding: 12px; min-height: 44px; font-size: 12px; margin: 4px 0; }
.back-button:hover { text-decoration: underline; }
.stage[data-theme=inkwild] .end-screen { color: #f2eedf; background: #26322ce8; }
.stage[data-theme=inkwild] .end-screen .primary-button { background: #f2eedf; color: #272c25; border-color: #f2eedf; }
.unlock-note { max-width: 285px; min-height: 36px; padding: 7px 12px; margin: 0 0 17px; border: 0; border-radius: 8px; background: #ffffff28; font-size: 12px; line-height: 1.5; }
.share-status { font-size: 10px; line-height: 1.5; max-width: 280px; margin: 9px auto 0; }
.share-status:empty { display: none; }
dialog { border: 1px solid var(--line); border-radius: 20px; max-width: 480px; width: calc(100% - var(--safe-left) - var(--safe-right)); max-height: calc(100vh - var(--safe-top) - var(--safe-bottom)); max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom)); margin: auto; background: var(--paper); color: var(--ink); padding: 36px 26px; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 30px 100px #0c1d2940; }
dialog::backdrop { background: #1d281f77; backdrop-filter: blur(5px); }
dialog .close { position: absolute; right: 12px; top: 12px; border: 0; }
dialog h2 { font-size: 36px; margin: 10px 0 20px; }
.menu-dialog { padding: 0; overflow: hidden; }
.menu-dialog[open] { display: flex; flex-direction: column; }
.menu-heading { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; padding: 26px 24px 16px; gap: 12px; }
.menu-heading .eyebrow { font-size: 9px; margin: 0; }
.menu-heading h2 { margin: 8px 0 0; }
.menu-heading .icon-button { border: 0; }
.menu-content { padding: 0 24px 12px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.instructions, .journal { padding-top: 18px; }
dialog ol { padding-left: 23px; margin: 12px 0 20px; }
dialog li { padding-left: 6px; margin-bottom: 18px; }
dialog li::marker { color: var(--accent); font-weight: 600; }
dialog li strong, dialog li span { display: block; font-size: 13px; }
dialog li span { font-size: 12px; line-height: 1.6; color: #626859; margin-top: 5px; }
.help-tip { font-size: 12px; line-height: 1.6; border-top: 1px solid var(--line); padding-top: 17px; }
dialog .primary-button { width: 100%; margin-top: 12px; }
.audio-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 12px 24px; border-top: 1px solid var(--line); flex-shrink: 0; }
.game-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 4px 0; border-top: 1px solid var(--line); }
.game-links a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: 4px; font-size: 12px; }
.sound-setting { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.sound-button { min-width: 52px; min-height: 48px; border: 0; border-radius: 10px; background: #e4e5d7; font-size: 12px; }
.sound-button[aria-pressed=true] { background: #5f7457; color: #fff7e6; }

.journal-progress { margin: 0 0 24px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.journal-group { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.journal-group legend { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; padding: 0; color: #6d7565; }
.companion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.companion { display: flex; flex-direction: column; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: transparent; padding: 22px 5px 14px; gap: 6px; }
.companion.selected, .world-card.selected { border-color: #69745b; background: #e7e8d9; }
.companion:not(:disabled):hover, .world-card:not(:disabled):hover { background: #e7e8d980; }
.companion strong { font: 500 17px 'Outfit', sans-serif; }
.companion > [data-unlock-copy] { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.4; }
.companion-preview { display: block; width: 80px; max-width: 100%; height: auto; margin: -8px 0 2px; pointer-events: none; }
[data-unlock]:disabled { opacity: .5; filter: grayscale(.8); }
.world-grid { display: grid; gap: 8px; }
.world-card { position: relative; display: flex; align-items: center; text-align: left; padding: 7px 12px 7px 7px; gap: 13px; border: 1px solid var(--line); border-radius: 10px; background: transparent; }
.world-thumb { width: 54px; height: 49px; flex-shrink: 0; border-radius: 5px; background-size: cover; background-position: center; }
.wild-thumb { background-image: url('./assets/wildwood.webp'); }
.amber-thumb { background-image: url('./assets/amberwood.webp'); }
.ink-thumb { background-image: url('./assets/inkwild.webp'); }
.world-card-copy { display: flex; flex-direction: column; gap: 4px; }
.world-card-copy strong { font: 500 15px 'Outfit', sans-serif; }
.world-card-copy > span { font-size: 10px; color: var(--muted); }
.world-check { margin-left: auto; font-size: 11px; opacity: 0; }
.selected .world-check { opacity: 1; }
.trail-options { display: flex; gap: 8px; }
.trail-options > button { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 6px; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-height: 75px; }
.trail-options > button[aria-pressed=true] { background: #e7e8d9; border-color: #69745b; }
.trail-options strong { font: 500 15px 'Outfit', sans-serif; }
.trail-options span { font-size: 10px; color: var(--muted); line-height: 1.4; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 600px) {
  h1 { font-size: clamp(72px, 22vw, 96px); }
  .stage-bottom { font-size: 9px; }
  .scenery { background-position: 48% center; }
}
@media (max-height: 600px) {
  .intro { padding-top: 70px; }
  h1 { font-size: 72px; }
  .eyebrow { font-size: 9px; }
  .start-actions { bottom: max(48px, calc(env(safe-area-inset-bottom) + 25px)); }
  .start-actions p { font-size: 10px; margin-top: 7px; }
  .end-screen { padding-top: 70px; }
  .end-screen h2 { font-size: 38px; }
  .results { margin: 15px 0 18px; }
  .results strong { font-size: 34px; }
  .menu-heading { padding-top: 18px; }
}
@media (max-height: 450px) and (min-aspect-ratio: 6/5) {
  .intro { right: 50%; padding: 46px 12px 0; }
  h1 { font-size: 62px; }
  .intro .eyebrow { margin-bottom: 5px; }
  .start-actions { bottom: max(38px, calc(env(safe-area-inset-bottom) + 18px)); }
  .start-actions .primary-button { min-height: 46px; padding: 10px 25px; }
  .stage-bottom { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Large touch targets and explicit tabs replace small disclosures. */
.menu-tabs { display: flex; gap: 6px; margin: 0 24px; padding: 4px; border-radius: 14px; background: #e3e5d5; flex-shrink: 0; }
.menu-tabs button { flex: 1; min-height: 48px; border: 0; border-radius: 10px; background: none; font-size: 12px; font-weight: 600; }
.menu-tabs button[aria-selected=true] { background: #faf7ec; box-shadow: 0 1px 4px #28392e12; }
.share-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; min-width: 185px; padding: 12px 22px; border: 1px solid #65715a77; border-radius: 28px; background: #f2eedf55; font-size: 14px; font-weight: 500; }
.end-screen > .share-button { margin-top: 12px; }
.share-button:disabled { opacity: .45; }
.share-button svg { width: 20px; height: 20px; flex-shrink: 0; }
.stage[data-theme=inkwild] .share-button { background: #f2eedf12; border-color: #f2eedf66; }
.end-screen .share-status { font-size: 11px; margin: 10px 0 0; max-width: 280px; }
.share-dialog { padding: 0; overflow: hidden; }
.share-dialog[open] { display: flex; flex-direction: column; }
.share-dialog .menu-heading { padding: 16px 20px; }
.share-dialog h2 { font-size: 30px; margin: 0; }
.share-content { padding: 0 20px 20px; overflow-y: auto; min-height: 0; }
#share-preview { display: block; width: auto; max-width: 100%; max-height: 38dvh; margin: 0 auto; border-radius: 10px; }
.share-hint { font-size: 12px; line-height: 1.5; text-align: center; }
#share-message { width: 100%; resize: none; border: 1px solid var(--line); border-radius: 10px; padding: 12px; color: var(--ink); background: #faf7ec; font: 16px / 1.45 var(--font); }
.fallback-actions { display: flex; gap: 8px; margin-top: 12px; }
.fallback-actions .share-button { flex: 1; min-width: 0; font-size: 12px; padding: 10px; }
@media (pointer: coarse) { button, summary, a { -webkit-user-select: none; user-select: none; } }

/* Dialogs live in the top layer, so they inherit the current forest from body. */
body[data-theme=wildwood] { --paper:#eef0dc; --ink:#304935; --muted:#67745d; --line:#cbd2b8; --accent:#b95635; --menu-ink:#304935; --menu-fill:#f2efde38; --menu-border:#3f513438; --panel-glow:#ffffff65; --surface:#e0e5ce; --selected:#d7dfc4; --selected-border:#6d815c; --tab-active:#faf8eb; --toggle:#5f7457; }
body[data-theme=amberwood] { --paper:#f6dfb3; --ink:#422c2d; --muted:#835d4b; --line:#d8b689; --accent:#a5482f; --menu-ink:#422c2d; --menu-fill:#4b293022; --menu-border:#54313344; --panel-glow:#fff1d99c; --surface:#edd0a0; --selected:#ebc795; --selected-border:#af7048; --tab-active:#fff0d2; --toggle:#965039; }
body[data-theme=inkwild] { --paper:#28342f; --ink:#efeedc; --muted:#b8c3aa; --line:#4c5e50; --accent:#d7ba86; --menu-ink:#28372d; --menu-fill:#e3e7cf2a; --menu-border:#33493c40; --panel-glow:#8eaa7622; --surface:#35473b; --selected:#435a43; --selected-border:#a7b78c; --tab-active:#566b50; --toggle:#647e54; }
.menu-dialog, .share-dialog { background-color:var(--paper); background-image:linear-gradient(140deg,var(--panel-glow),transparent 55%); }
.menu-tabs, .sound-button { background:var(--surface); }
.menu-tabs button[aria-selected=true] { background:var(--tab-active); }
.sound-button[aria-pressed=true] { background:var(--toggle); }
.companion.selected, .world-card.selected, .trail-options>button[aria-pressed=true] { background:var(--selected); border-color:var(--selected-border); }
.companion:not(:disabled):hover, .world-card:not(:disabled):hover { background:var(--surface); }
dialog li span, .journal-group legend, .world-card-copy>span, .trail-options span, .companion>[data-unlock-copy] { color:var(--muted); }
#share-message { color:var(--ink); background:var(--tab-active); }
body[data-theme=inkwild] .companion-preview { border-radius:14px; background:#c4c9b480; }
.stage[data-theme=inkwild][data-state=dead] .menu-button { color:#efeedc; border-color:#efeedc44; background:#efeedc10; }

.game-links #preview-ad { border: 0; background: none; padding: 0; min-height: 44px; font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.test-ad-dialog { padding: 22px; width: calc(100% - 28px); max-width: 410px; color: #283c2d; background: #f3eedf; text-align: center; }
.test-ad-dialog::backdrop { background: #14271ff0; }
.test-ad-label { font-size: 10px; letter-spacing: 2px; font-weight: 600; margin-bottom: 18px; }
.test-ad-art { height: min(23dvh, 160px); border-radius: 12px; background: url('./assets/wildwood.webp') center 66% / cover; }
.test-ad-copy h2 { font-size: clamp(25px, 7vw, 34px); letter-spacing: -1px; line-height: 1.08; margin: 18px 0 12px; }
.test-ad-copy p { font-size: 13px; line-height: 1.5; margin: 8px 0; }
.test-ad-copy .test-ad-reason { color: #59674f; font-size: 11px; }
.test-ad-dialog .primary-button { min-height: 50px; }
.test-ad-dialog .primary-button:disabled { opacity: .5; cursor: default; }
@media (max-height: 450px) { .test-ad-art { display: none; } .test-ad-dialog { padding: 16px 22px; } .test-ad-label { margin-bottom: 10px; } }