* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #071f27; color: #ecf3da; font: 15px system-ui, sans-serif; }
#stage { position: relative; width: 100%; height: 100dvh; min-height: 0; overflow: hidden; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
header { position: absolute; z-index: 2; inset: max(14px, env(safe-area-inset-top)) 18px auto; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
h1 { font-size: 21px; margin: 4px 0; } small { font-size: 10px; letter-spacing: 2px; color: #9bc1ad; }
#clock { font-size: 25px; font-variant-numeric: tabular-nums; }
#message { position: absolute; z-index: 2; top: 77px; left: 5%; width: 90%; text-align: center; margin: 0; font-size: 14px; }
#readout { position: absolute; z-index: 2; top: 120px; width: 100%; text-align: center; color: #a6d8c4; font-size: 12px; }
#pad { position: absolute; z-index: 3; width: min(78vw, 330px); height: 190px; bottom: 120px; left: 50%; transform: translateX(-50%); border: 1px solid #b8d6b538; border-radius: 48%; touch-action: none; user-select: none; background: #092b3038; }
.axis { position: absolute; inset: 10px; text-align: center; color: #c3debd88; font-size: 11px; pointer-events: none; }
#handle { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; border-radius: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; font-size: 30px; color: #3d2516; background: #f2ba68; border: 3px solid #ffe1a3; box-shadow: 0 0 22px #f2ba6833; pointer-events: none; }
footer { position: absolute; z-index: 3; bottom: max(12px, env(safe-area-inset-bottom)); width: 100%; text-align: center; }
#help { font-size: 12px; margin: 0 0 9px; color: #b5cbbd; }
nav { display: flex; gap: 12px; justify-content: center; }
button { min-width: 110px; min-height: 44px; border: 1px solid #769c89; border-radius: 24px; background: #123b40; color: #f2f3dd; font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #ffdf95; outline-offset: 4px; }
#pad[aria-disabled="true"] { opacity: .4; }
#error { position: absolute; z-index: 5; top: 35%; background: #071f27; padding: 24px; }
@media (max-height: 650px) { #pad { height: 130px; bottom: 110px; } #message { top: 65px; } #readout { top: 100px; } }

[hidden] { display: none !important; }
header { text-shadow: 0 2px 10px #001c23; }
#stage { background: radial-gradient(ellipse at top, #29636a, #071f27); }
button { min-width: 44px; padding: 8px 12px; font-size: 13px; }
nav { gap: 5px; flex-wrap: wrap; padding: 0 8px; }
#storage-status { font-size: 10px; margin: 6px 8px 0; min-height: 24px; }
#pad { bottom: 155px; background: radial-gradient(ellipse, #133c4055, #061c2644); box-shadow: inset 0 0 35px #91cdbb12; }
#loading, #error { position: absolute; z-index: 7; inset: 25% 8% auto; padding: 20px; border: 1px solid #90b7a1; border-radius: 24px; text-align: center; background: #0b2c35; }
#loading button, #error button { display: block; margin: 12px auto 0; }
#completion { position: absolute; top: 29%; left: 5%; width: 90%; text-align: center; z-index: 2; pointer-events: none; color: #ffe4a5; }
#completion strong { font-size: 23px; } #reward { font-size: 13px; }
dialog { max-width: calc(100vw - 28px); border: 1px solid #adc6a4; border-radius: 24px; color: #edf4dc; background: #10343b; padding: 20px; }
dialog::backdrop { background: #00141bbd; } dialog h2 { margin-top: 0; }
@media (max-width: 350px) { h1 { font-size: 18px; } nav button { padding: 8px; } #pad { bottom: 145px; } }
@media (max-height: 450px) {
 header { left: 12px; right: 12px; top: 8px; } h1 { font-size: 18px; }
 #message { top: 61px; left: 3%; width: 52%; } #readout { top: 106px; width: 55%; }
 #pad { left: auto; right: 16px; transform: none; width: 36%; height: 150px; bottom: 114px; }
 #completion { top: 39%; width: 54%; } #completion strong { font-size: 19px; }
 footer { bottom: 5px; } #help { margin-bottom: 4px; } #storage-status { min-height: 12px; }
 #loading, #error { inset: 22% 20% auto; }
}

#save-retry { pointer-events: auto; }