:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#13131b;color:#f8edcf}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#443125 0,transparent 60%)}main{max-width:1080px;margin:auto;padding:24px}header{margin-bottom:18px}header>a,footer a{color:#ffd079}h1{font-size:clamp(2rem,5vw,3.5rem);margin:0;font-weight:900;letter-spacing:-2px}h1 em{color:#ffc556;font-style:normal}.eyebrow{font-size:.7rem;letter-spacing:.14em;color:#d0ad77}.console{border:2px solid #66513b;border-radius:22px;background:#1b1a23;overflow:hidden;box-shadow:0 18px 70px #0007}.toolbar,.hud{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;flex-wrap:wrap}.toolbar div{display:flex;gap:5px;flex-wrap:wrap}button{background:#39333a;border:1px solid #7b6651;border-radius:10px;color:#fff1d4;padding:10px 13px;font:inherit;font-weight:650;cursor:pointer;touch-action:none}button:hover,button:focus-visible{border-color:#ffcd66;outline:2px solid #ffc556;outline-offset:2px}button:disabled{opacity:.45;cursor:default}.gold,#levels button:hover{background:#ecc16b;color:#221a17}.board{position:relative;max-width:min(100%,calc((100dvh - 280px)*1.6667));margin:auto}canvas{width:100%;display:block;aspect-ratio:5/3;background:#3c3240;touch-action:none}.overlay{position:absolute;inset:0;background:#12121bd9;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}.overlay[hidden]{display:none}.panel{max-width:570px;width:100%;text-align:center}.panel h2{margin:0;font-size:clamp(1.3rem,3vw,2rem)}.panel p{line-height:1.45}#levels{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}#levels button{font-size:.88rem}#actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}input[readonly]{max-width:100%;width:100%;padding:8px;background:#181820;border:1px solid #8a7657;color:#ffe1a1}.hud{font-size:.9rem;color:#f9d69b;background:#24212b}.touch{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px}.dpad{display:grid;grid-template-columns:repeat(3,48px);gap:3px}.dpad button{min-height:42px;padding:6px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.hint{padding:0 14px;font-size:.8rem;color:#c7bca9}footer{font-size:.8rem;color:#baa992;padding:15px}button[aria-pressed=true]{background:#825e39}button[hidden],input[hidden]{display:none}@media(max-width:650px){main{padding:10px}header p:not(.eyebrow){font-size:.85rem}.board{max-width:100%}.toolbar strong{font-size:.85rem}.toolbar button{font-size:.72rem;padding:7px}.touch{gap:5px}.touch>button{font-size:.74rem;padding:10px 8px;min-height:55px}.panel p{font-size:.72rem;margin:6px 0}#levels button{padding:7px;font-size:.73rem}.overlay{padding:8px}#actions button{padding:7px;font-size:.75rem}.hud{font-size:.72rem}.hint{font-size:.7rem}#message{font-size:.7rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Hidden controls must win over layout selectors such as #levels. */
[hidden]{display:none!important}

.objective{margin:0;padding:10px 14px;color:#ffe0a0;background:#30272a;font-weight:650;font-size:.9rem;min-height:42px}.touch{flex-wrap:wrap}.touch>button{flex:1;min-width:76px}@media(max-width:650px){.objective{font-size:.76rem}.touch .dpad{flex-shrink:0}}