:root { color-scheme:dark; color:#f4f1ea; background:#181b1e; font-family:Arial,Helvetica,sans-serif; --view-height:100vh; --game-width-limit:1040px; --header-height:48px; --page-bottom:12px; --screen-space:12px; --side-space:24px; }
@supports(height:100svh) { :root { --view-height:100svh; } }
* { box-sizing:border-box; }
body { margin:0; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
[hidden] { display:none !important; }
.page { width:min(calc(100% - var(--side-space)),var(--game-width-limit),calc((var(--view-height) - var(--header-height) - var(--page-bottom) - var(--screen-space) - var(--offline-space,0px) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.5)); margin:0 auto; padding-bottom:var(--page-bottom); container-type:inline-size; }
.masthead { min-height:var(--header-height); display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:9px; letter-spacing:.08em; }
.masthead p { margin:0; font-size:14px; font-weight:700; }
.app-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.app-icon { display:block; width:min(32px,var(--header-height)); height:min(32px,var(--header-height)); object-fit:contain; flex-shrink:0; }
.audio-toggle { color:inherit; background:transparent; border:1px solid #737b82; border-radius:6px; width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:10px; cursor:pointer; }
.audio-toggle svg { width:24px; height:24px; pointer-events:none; }
.audio-toggle .sound-off,.audio-toggle[aria-pressed="true"] .sound-waves { display:none; }
.audio-toggle[aria-pressed="true"] .sound-off { display:inline; }
.audio-toggle[aria-pressed="true"] { background:#343b42; }
.audio-toggle:focus-visible { outline-color:#afd8ff; }
.art-viewport { overflow:auto; width:100%; overscroll-behavior-x:contain; }
.stage { width:100%; position:relative; aspect-ratio:3/2; container-type:inline-size; background:#c8b38a; }
.full-art { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; user-select:none; pointer-events:none; }
#scene-art { transition:opacity 180ms linear; }
.hold-art { opacity:0; transition:none; }
.hold-art.visible { opacity:1; }
#puzzle-layer { position:absolute; inset:0; }
.key-sprite { position:absolute; display:block; pointer-events:none; transform:translateY(0); transition:transform 160ms ease; }
.key-patch { position:absolute; display:block; pointer-events:none; }
.key-sprite.raised { transform:translateY(var(--key-lift)); filter:drop-shadow(0 3px 2px #30200f60); }
.key-hit { position:absolute; appearance:none; -webkit-appearance:none; border:0; background:transparent; padding:0; cursor:pointer; border-radius:3px; }
button { font:inherit; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:focus-visible, .art-viewport:focus-visible { outline:3px solid #165eb7; outline-offset:3px; }
.text-box { position:absolute; display:flex; align-items:center; justify-content:center; text-align:center; padding:0; margin:0; color:#282014; font-family:var(--game-font); font-weight:400; overflow-wrap:normal; }
.question { z-index:3; font-size:var(--question-size); font-weight:var(--question-weight); line-height:var(--question-leading); cursor:default; }
#question-line { max-width:100%; }
.solution-word,.solution-word:hover,.solution-word:active { display:inline; appearance:none; -webkit-appearance:none; padding:0; margin:0; border:0; border-radius:0; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; line-height:inherit; text-decoration:none; box-shadow:none; cursor:inherit; }
.bottom { font-size:var(--bottom-size); font-weight:var(--bottom-weight); line-height:var(--bottom-leading); padding:0 1cqw; }
.bottom span { width:100%; min-width:0; }
.speech { font-size:var(--speech-size); font-weight:var(--speech-weight); line-height:var(--speech-leading); }
.speech span { width:100%; }
.key-label { font-size:var(--label-size); font-weight:var(--label-weight); line-height:var(--label-leading); }
.forward-arrow { position:absolute; z-index:4; display:flex; align-items:center; justify-content:center; transform:translate(-50%,-50%); appearance:none; -webkit-appearance:none; border:0; border-radius:3px; background:transparent; color:#60492c; padding:0; font-size:max(22px,4cqw); line-height:1; cursor:pointer; }
.forward-arrow:disabled { opacity:.35; cursor:default; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
@media(max-width:600px) {
  :root { --side-space:16px; }
}
@media(max-height:500px) {
  :root { --header-height:48px; --page-bottom:12px; --screen-space:16px; }
}
@media(max-height:350px) {
  :root { --header-height:48px; --page-bottom:8px; --screen-space:8px; }
}
@container(max-width:600px) {
  .masthead p { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }

.offline-status { margin:8px 0 0; color:#c4c9cc; font-size:13px; line-height:1.4; text-align:center; }

:root.installed-app { --offline-space:30px; }