:root{--paper:#f4f1e9;--ink:#353c31;--muted:#74766a;--line:#d7d6cb;--accent:#617153;background:var(--paper)}
header{max-width:580px;padding:20px 24px}.game-shell{max-width:580px;margin:0 auto;display:grid;grid-template-areas:"score" "scene" "guide" "status" "actions" "error";grid-template-columns:minmax(0,1fr);gap:9px;padding:0 24px 18px}
.scoreboard{grid-area:score;display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:0 6px}.height{display:flex;align-items:baseline;gap:10px}#height{font-size:46px;line-height:1;font-weight:450;letter-spacing:-3px;font-variant-numeric:tabular-nums}.score-label{font-size:12px;letter-spacing:.04em;color:var(--muted)}.best{display:flex;align-items:baseline;gap:8px;font-size:18px;font-variant-numeric:tabular-nums}.best #best{letter-spacing:-.6px}
.scene{grid-area:scene;display:block;width:100%;height:clamp(190px,calc(100dvh - 273px),470px);padding:0;border:0;border-radius:3px;position:relative;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;cursor:pointer}.scene:hover:not(:disabled){background:transparent}.scene svg{width:100%;height:100%;display:block}.scene:focus-visible{outline-offset:1px}.ground{stroke:#d4d0c4;stroke-width:1}.stone{fill:url(#stone-shade);stroke:#f4f1e9;stroke-width:.75}.foundation{fill:url(#base-shade);stroke:none}.stone-edge{fill:none;stroke:#9b9b8d;stroke-width:.75;opacity:.65}.moving-body{fill:#748260;stroke:var(--paper);stroke-width:1}.moving-edge{stroke:#b2bea0;stroke-width:1;fill:none}.alignment{fill:#8d987c;opacity:.2}.board-prompt{position:absolute;top:27%;left:0;width:100%;font-size:14px;letter-spacing:.015em;color:var(--ink);pointer-events:none}.board-prompt::before{content:"";display:block;width:22px;height:1px;background:var(--line);margin:0 auto 16px}body[data-state="running"] .board-prompt{display:none}body[data-state="paused"] #moving{opacity:.45}body[data-state="ended"] #moving,body[data-state="ended"] .alignment{display:none}
#guidance{grid-area:guide;margin:0;text-align:center;color:var(--muted);font-size:13px;line-height:1.45}#status{grid-area:status;margin:0;min-height:22px;text-align:center;font-size:13px;line-height:22px;color:var(--ink);font-variant-numeric:tabular-nums}.actions{grid-area:actions;display:flex;justify-content:center;gap:8px}.actions button{min-width:82px;font-size:13px;border-color:transparent}.actions button:hover:not(:disabled){background:#e8e6dd}#error{grid-area:error;margin:0;text-align:center;color:#8a4935;font-size:13px;line-height:1.4}.offcut{fill:#77796b;stroke:var(--paper);stroke-width:.75;animation:fall-away .65s ease-in forwards;transform-box:fill-box;transform-origin:center}.perfect-stone{animation:stone-light .55s ease-out}@keyframes fall-away{0%{opacity:.9;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(120px) rotate(18deg)}}@keyframes stone-light{0%{fill:#a3ae8c}100%{fill:#646859}}
@media(max-width:380px){header{padding:16px 20px}.game-shell{padding-left:16px;padding-right:16px}#guidance{font-size:12px}#height{font-size:42px}.scene{height:clamp(180px,calc(100dvh - 253px),470px)}}
@media(max-height:500px) and (min-width:560px){header{max-width:780px;padding:8px 22px}.game-shell{max-width:780px;grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);grid-template-areas:"score scene" "guide scene" "status scene" "actions scene" "error scene";grid-template-rows:70px auto 24px 48px auto;gap:8px 20px;padding:0 22px 8px;align-content:center}.scoreboard{align-self:end;padding:0 8px}.scene{height:calc(100dvh - 70px);min-height:220px}#guidance{align-self:end;max-width:210px;justify-self:center}.actions{align-self:start}.board-prompt{top:19%}}
@media(prefers-reduced-motion:reduce){.offcut{display:none}.perfect-stone{animation:none}}
@media(forced-colors:active){.stone,.moving-body{fill:CanvasText;stroke:Canvas}.foundation{fill:GrayText}.stone-edge,.moving-edge,.ground{stroke:CanvasText}.alignment{fill:Highlight}}

.noscript{text-align:center;padding:20px;color:var(--ink);font-size:14px}

.game-help{grid-area:help}.game-shell{grid-template-areas:"score" "scene" "guide" "status" "actions" "help" "error"}@media(max-height:500px) and (min-width:560px){.game-shell{grid-template-areas:"score scene" "guide scene" "status scene" "actions scene" "help scene" "error scene";grid-template-rows:70px auto 24px 48px auto auto}.game-help{margin-top:0}}

.scene{height:clamp(190px,calc(100dvh - 325px),470px)}@media(max-width:380px){.scene{height:clamp(180px,calc(100dvh - 305px),470px)}}@media(max-height:500px) and (min-width:560px){.scene{height:calc(100dvh - 70px);min-height:220px}}
/* Make the idle action recognizable without adding copy or a nested control. */
body[data-state="ready"] .board-prompt{left:50%;width:auto;max-width:calc(100% - 32px);transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 24px;border:1px solid var(--ink);border-radius:24px;background:var(--ink);color:var(--paper);font-weight:600;white-space:nowrap}
body[data-state="ready"] .board-prompt::before{display:none}
@media(forced-colors:active){body[data-state="ready"] .board-prompt{background:ButtonFace;color:ButtonText;border-color:ButtonText}}