:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#181a25;color:#f4e7cc}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:radial-gradient(ellipse at top,#49404b,transparent 65%)}main{max-width:1080px;margin:auto;padding:24px}a{color:#f6c86d}h1{font-size:clamp(2.2rem,6vw,4rem);line-height:1;margin:12px 0;letter-spacing:-.06em}h1 em{color:#ffcb6a;font-style:normal}.eyebrow{font-size:.7rem;letter-spacing:.15em;color:#d5b88f}section{border:2px solid #a58255;border-radius:24px;overflow:hidden;background:#272430;box-shadow:0 20px 70px #0005}nav,.hud{padding:12px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}nav div,.actions{display:flex;gap:8px;flex-wrap:wrap}button{font:inherit;background:#594354;color:#ffeac5;border:1px solid #b18d68;border-radius:12px;padding:10px 14px;cursor:pointer;touch-action:none}button:hover,button:focus-visible{outline:2px solid #ffd177;outline-offset:2px}button:disabled{opacity:.4}.board{position:relative;max-width:min(100%,calc((100dvh - 310px)*1.613));margin:auto}canvas{width:100%;display:block;aspect-ratio:50/31;touch-action:none;background:#314f67}#overlay{position:absolute;inset:0;background:#151822e8;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}.panel{max-width:600px;text-align:center;width:100%}.panel h2{margin:5px}.panel p{line-height:1.5}#courses{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.actions{justify-content:center;margin-top:12px}#link{width:100%;margin-top:12px;padding:10px;background:#171925;color:#fbd28c;border:1px solid #99754d}.hud{background:#201e2a;font-size:.85rem;color:#fbd28c}#goal,#story{padding:0 16px;font-size:.9rem}#story{color:#cbbcaf;line-height:1.5}.controls{display:flex;gap:12px;justify-content:center;align-items:center;padding:8px}.dpad{display:grid;grid-template-columns:repeat(3,45px);gap:3px}.dpad button{padding:6px;min-height:38px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}footer{font-size:.8rem;line-height:1.5;padding-top:18px;color:#c6b8ac}@media(max-width:650px){main{padding:10px}.board{max-width:100%}nav button{padding:7px;font-size:.75rem}nav strong{font-size:.85rem}.panel p{font-size:.75rem;margin:8px 0}.panel h2{font-size:1.2rem}#courses button{font-size:.75rem;padding:7px}.controls{gap:7px}.controls>button{font-size:.8rem;padding:9px}.hud{font-size:.7rem}#goal,#story{font-size:.8rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.challenge-choice{display:block;margin:12px 0;font-weight:700}.challenge-choice select{font:inherit;padding:10px;max-width:100%;color:#292334;background:#fff0d4;border:2px solid #b59067;border-radius:8px}.challenge-note{font-size:.9rem;line-height:1.5;max-width:58ch;margin:10px auto}

/* Keep variant controls in the scrollable menu, never beside or above its viewport. */
#overlay{align-items:flex-start}.panel{margin:auto;min-width:0}
@media(max-width:650px){.board:has(#overlay:not([hidden])){min-height:440px}}