* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: #101224; color: #f5e4bd; font-family: system-ui, sans-serif; }
main { height: 100dvh; max-width: 1000px; margin: auto; display: grid; grid-template-rows: 60px minmax(0, 1fr) 82px; gap: 6px; padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom)); }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
h1 { font: 23px/1 Georgia, serif; margin: 0; } #clock { font-size: 25px; font-variant-numeric: tabular-nums; }
#stage { position: relative; min-height: 0; overflow: hidden; border-radius: 22px; background: radial-gradient(ellipse at 50% 35%, #30304d, #17182d); }
canvas { display: block; width: 100%; height: 100%; }
#message { position: absolute; z-index: 2; top: 10px; left: 12px; right: 12px; margin: 0; text-align: center; font-size: 12px; pointer-events: none; }
#rail { position: absolute; height: 48px; transform-origin: 0 50%; touch-action: none; cursor: grab; border-radius: 25px; background: linear-gradient(transparent 20px, #b78c4a99 20px, #b78c4a99 28px, transparent 28px); }
#weight { position: absolute; top: 0; width: 48px; height: 48px; margin-left: -24px; border: 3px solid #ffe0a0; border-radius: 50%; background: #c98929; box-shadow: inset -6px -5px 0 #75451b; pointer-events: none; }
footer p { font-size: 10px; line-height: 1.5; flex: 1; } button { min-height: 48px; min-width: 52px; border: 1px solid #a99b7c; border-radius: 12px; background: #30334e; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #ffce63; outline-offset: 2px; } [hidden] { display: none !important; }
#error { position: absolute; inset: 0; z-index: 5; margin: 0; padding: 30px; display: grid; place-items: center; background: #181a30; text-align: center; }
@media (orientation: landscape) and (max-height: 500px) { main { grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: 1fr 1fr; } #stage { grid-column: 2; grid-row: 1 / 3; } header, footer { flex-wrap: wrap; } footer p { flex-basis: 100%; } }

body[data-production] main { grid-template-rows: 70px minmax(0, 1fr) 150px; }
body[data-production] header { justify-content: initial; }
body[data-production] header a { display: grid; place-items: center; min-width: 44px; height: 44px; border: 1px solid #a99b7c; border-radius: 50%; color: inherit; text-decoration: none; font-size: 24px; }
body[data-production] header small { display: block; font-size: 7px; letter-spacing: .7px; margin-bottom: 6px; color: #b4c4ce; }
body[data-production] #clock { margin-left: auto; color: #e7be7d; }
body[data-production] #stage { border: 1px solid #676a85; box-shadow: inset 0 0 45px #0e112b; }
body[data-production] #message { font-size: 11px; line-height: 1.4; text-shadow: 0 1px 4px #101224; }
body[data-production] footer { display: block; } body[data-production] footer p { text-align: center; margin: 0 0 6px; line-height: 1.5; }
body[data-production] footer p span { color: #bac8d2; font-size: 9px; }
body[data-production] nav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
body[data-production] nav button { grid-column: span 2; } body[data-production] nav button:nth-last-child(-n+2) { grid-column: span 3; }
body[data-production] button { min-width: 44px; min-height: 44px; font: 600 12px system-ui; }
body[data-production] button[aria-pressed="true"] { background: #5c503b; border-color: #dfbd7e; }
#loading, #veil, body[data-production] #error { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12px; gap: 8px; text-align: center; background: #1d2439f2; font-size: 13px; }
#loading button, #veil button, #error button { padding: 0 16px; } body[data-production] #error { z-index: 5; } #loading { z-index: 6; }
.moon-mark { font: 40px Georgia, serif; color: #e4c895; }
#completion { position: absolute; bottom: 10px; left: 8px; right: 8px; text-align: center; pointer-events: none; }
#completion strong { display: block; font: 23px Georgia, serif; color: #efd4a3; } #completion span { font-size: 11px; }
dialog { max-width: min(350px, calc(100vw - 24px)); padding: 18px; border: 1px solid #b3a283; border-radius: 20px; background: #252d45; color: #f5e4bd; text-align: center; }
dialog::backdrop { background: #101224c9; } dialog h2 { font: 25px Georgia, serif; } dialog p { font-size: 13px; } dialog div { display: flex; gap: 8px; } dialog button { flex: 1; padding: 8px; }
@media (max-width: 340px) { body[data-production] h1 { font-size: 22px; } body[data-production] header small { font-size: 6px; letter-spacing: .2px; } }
@media (orientation: landscape) and (max-height: 500px) { body[data-production] main { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: 80px minmax(0, 1fr); } body[data-production] header { flex-wrap: nowrap; } body[data-production] footer { align-self: center; } }