:root { color-scheme: light; --yellow:#f8f530; --ink:#171717; --cream:#f4f2ed; --sky:#bce5ec; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; display:grid; place-items:center; padding:20px 12px; background:var(--cream); color:var(--ink); font-family: ui-rounded, "Avenir Next", system-ui, sans-serif; }
.runner-shell { width:min(100%, 720px); } header { display:flex; justify-content:space-between; align-items:start; gap:14px; margin-bottom:14px; } h1 { font-size:clamp(1.25rem,4vw,2rem); letter-spacing:-.04em; margin:2px 0; } .eyebrow { font-size:.67rem; font-weight:800; letter-spacing:.13em; margin:0; }
.controls { display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:end; } button { min-height:44px; border:2px solid var(--ink); border-radius:9px; background:#fff; color:var(--ink); padding:7px 10px; font:700 .76rem/1 ui-rounded,system-ui,sans-serif; cursor:pointer; } button:focus-visible { outline:3px solid #347c91; outline-offset:2px; } .mode-switch { display:flex; border:2px solid var(--ink); border-radius:9px; overflow:hidden; background:#fff; } .mode-switch button { border:0; border-radius:0; min-width:75px; } .mode-switch .selected { background:var(--yellow); box-shadow:inset 0 -3px 0 var(--ink); } .sound { min-width:74px; }
.game-wrap { position:relative; width:100%; border:3px solid var(--ink); border-radius:15px; overflow:hidden; background:var(--sky); box-shadow:5px 5px 0 var(--ink); } canvas { display:block; width:100%; height:auto; aspect-ratio:160/96; image-rendering:pixelated; image-rendering:crisp-edges; touch-action:manipulation; }
.alert { position:absolute; inset:0; display:flex; align-items:center; gap:clamp(8px,3vw,25px); padding:10px clamp(12px,4vw,36px); background:rgba(244,242,237,.96); animation:arrive .8s ease both; } .alert[hidden] { display:none; } .alert strong { display:block; font-size:clamp(1.15rem,4vw,2.2rem); letter-spacing:-.05em; } .alert p:last-child { margin:.35rem 0 0; font-size:clamp(.75rem,2vw,1rem); } .real-dingsty { width:clamp(72px,20vw,150px); aspect-ratio:1; overflow:hidden; border-radius:50%; border:2px solid var(--ink); background:white; flex:none; } .real-dingsty img { width:300%; height:100%; max-width:none; object-fit:cover; object-position:left center; }
.hint,.quiet-note { margin:12px 0 0; font:700 .75rem/1.3 ui-monospace,SFMono-Regular,monospace; } .scoreline { display:flex; gap:14px; align-items:center; margin-top:8px; font:800 .85rem/1 ui-monospace,SFMono-Regular,monospace; } #demo-alert { margin-left:auto; min-height:32px; padding:5px 8px; font-size:.68rem; } .quiet-note { color:#555; font-weight:500; }
@keyframes arrive { from { opacity:0; } to { opacity:1; } }
@media (max-width:500px) { header { display:block; } .controls { justify-content:start; margin-top:12px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .mode-switch button[data-mode="play"] { display:none; } }

/* Candidate usability and world layer; original baseline is preserved separately. */
body{display:block}.runner-shell{margin:clamp(16px,5vh,48px) auto}.world-label{font-size:.72rem;letter-spacing:.1em;font-weight:800;margin:18px 0 9px;color:#5b5c4c}.game-joke{font-size:1rem;line-height:1.5;min-height:3em;margin:22px 0 8px;max-width:40em;color:#584b35}.quiet-note{line-height:1.6;font-size:.8rem}.hint{line-height:1.6}#demo-alert{min-height:44px;font-size:.75rem}.alert{flex-wrap:wrap}.alert>div:last-child{flex:1;min-width:160px}.alert button{margin-top:12px}.alert .eyebrow{font-size:.65rem}.alert p{line-height:1.5}button:disabled{cursor:default;opacity:.55}@media(max-width:400px){.scoreline{gap:8px;font-size:.75rem}.alert{gap:8px}.real-dingsty{width:65px}.alert>div:last-child{min-width:140px}.alert strong{font-size:1.1rem}.game-joke{font-size:.9rem}}

@media(max-width:500px){.game-wrap:has(.alert:not([hidden])){min-height:320px}}