:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#111214;color:#eeeee8}*{box-sizing:border-box}body{margin:0;min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}main{max-width:1040px;margin:auto;padding:20px 24px}header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}h1{font-size:16px;letter-spacing:.09em;margin:0}header span,footer{font-size:12px;color:#9a9d96;letter-spacing:.08em}#screen{position:relative;background:#000;aspect-ratio:4/3;max-height:calc(100dvh - 175px);margin:auto;overflow:hidden;border:1px solid #353735}canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;outline:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#10120fec;z-index:2}.overlay[hidden]{display:none}#start-screen{background:radial-gradient(ellipse at 50% 40%,#303827,#11130f 75%)}.start-card{text-align:center;padding:24px}.eyebrow{font-size:13px;letter-spacing:.19em;color:#babdae}h2{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(38px,7vw,82px);line-height:1;letter-spacing:.025em;margin:22px 0 30px;transform:rotate(-3deg)}h2 em{font-style:normal;color:#e8ec72}button{font:600 14px Arial,sans-serif;color:#eeeee8;border:1px solid #484b42;background:#232620;border-radius:5px;padding:13px 16px;cursor:pointer;min-height:44px}button:hover{background:#363b2e}button:focus-visible,a:focus-visible{outline:3px solid #e8ec72;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.primary{background:#e8ec72;color:#15170f;min-width:180px;font-size:18px;padding:16px 26px;border:0}.primary:hover{background:#f8ffa0}#ready{font-size:14px;color:#b1b5a6;line-height:1.5}nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}#fullscreen{margin-left:auto}button[aria-pressed=true]{background:#e8ec72;color:#15170f}footer{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-size:12px}#status{letter-spacing:0}#instructions{color:#c7cabe;line-height:1.6;font-size:16px;max-width:760px}a{color:#e8ec72}.loading-card{width:min(85%,380px);text-align:center;line-height:1.5}.loading-card h2{font:700 23px Arial;transform:none}.track{height:5px;background:#33382d;margin:20px 0;border-radius:4px;overflow:hidden}#download-modal-progress-fill{height:100%;background:#e8ec72;width:0}.loading-card p{font-size:14px;color:#b1b5a6}#player:fullscreen{background:#111214;width:100%;max-width:none;padding:12px;display:flex;flex-direction:column;justify-content:center}#player:fullscreen #screen{width:min(100%,calc((100dvh - 90px)*4/3));max-height:calc(100dvh - 90px)}#player:fullscreen header,#player:fullscreen footer{display:none}#player:fullscreen nav{justify-content:center}#player:fullscreen #fullscreen{margin-left:0}@media(max-width:600px){main{padding:14px 10px}header{display:block;margin-bottom:12px}header span{display:block;font-size:12px;margin-top:6px}nav{gap:6px}nav button{flex:1;padding:11px 8px}#fullscreen{margin-left:0}footer span:last-child{display:none}#screen{max-height:none}.eyebrow{font-size:12px}.start-card{padding:16px}h2{margin:14px 0 20px}#ready{font-size:13px}}@media(orientation:landscape) and (max-height:550px){main{padding:6px 12px}header,footer{display:none}#screen{height:calc(100dvh - 65px);width:auto;max-height:none;aspect-ratio:4/3}nav{justify-content:center;margin-top:6px}nav button{flex:0 1 auto}#fullscreen{margin-left:0}#instructions{position:absolute;inset:12px;z-index:5;background:#111214;overflow:auto;padding:20px;bottom:65px}}

#download-modal[style*="block"]{display:grid!important}
/* Match CSS and backing-store aspect ratios so touch coordinates remain exact. */
#screen{aspect-ratio:var(--ratio,1.333333);width:min(100%,calc((100dvh - 175px)*var(--ratio,1.333333)))}
canvas{object-fit:fill}
@media(max-width:600px) and (orientation:portrait){#screen{width:100%}}
@media(orientation:landscape) and (max-height:550px){#screen{width:calc((100dvh - 65px)*var(--ratio,1.333333));max-width:100%}}
#player:fullscreen{height:100dvh;padding:8px}
#player:fullscreen nav{margin-top:8px}
#player:fullscreen #screen{width:min(100%,calc((100dvh - 76px)*var(--ratio,1.333333)));height:auto;max-height:calc(100dvh - 76px)}
#instructions{max-width:none;font-size:12px;line-height:1.4;white-space:nowrap;overflow-x:auto}
#instructions p{margin:8px 0}