:root{--bg: #0b0714;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:#c9c3d9;font-family:"Press Start 2P",ui-monospace,monospace;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh}#stage{position:relative;line-height:0}#game{position:relative;z-index:1;display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;outline:none}#gl{position:absolute;left:0;top:0;display:none;image-rendering:auto;pointer-events:none}body.gl #gl{display:block}body.gl #game{background:transparent;image-rendering:auto}body.gl.crt #gl{filter:saturate(1.05);border-radius:calc(var(--px, 3px) * 2)}body.gl.crt #game{filter:none}body.gl.crt #crt{opacity:.35}#crt{position:absolute;inset:0;z-index:2;pointer-events:none;display:none}body.crt #crt{display:block;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) calc(var(--px, 3px) * .5),rgba(0,0,0,.28) calc(var(--px, 3px) * .5),rgba(0,0,0,.28) var(--px, 3px)),radial-gradient(ellipse at center,#0000 55%,#00000073);mix-blend-mode:multiply}body.crt #game{filter:saturate(1.15) contrast(1.05);border-radius:calc(var(--px, 3px) * 2)}#hint{font-size:8px;letter-spacing:1px;opacity:.55;margin:12px 0 0;text-align:center;padding:0 16px}@media(pointer:coarse){#hint{display:none}}#rotate{display:none}@media(orientation:portrait)and (pointer:coarse){#rotate{display:flex;position:fixed;inset:0;z-index:10;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--bg);color:#f7931a;text-align:center;padding:24px;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}#rotate p{margin:0;font-size:16px;line-height:1.6;letter-spacing:1px}#rotate p.sub{font-size:10px;color:#c9c3d9;opacity:.8}#rotate .phone{width:44px;height:76px;border:4px solid #c9c3d9;border-radius:8px;position:relative;animation:br-rotate 2.4s ease-in-out infinite}#rotate .phone span{position:absolute;left:50%;bottom:5px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#c9c3d9}@keyframes br-rotate{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}to{transform:rotate(0)}}@media(prefers-reduced-motion:reduce){#rotate .phone{animation:none;transform:rotate(-90deg)}}}:root{--btc: #f7931a;--ink: #e9e4f5;--mute: #8e88a3;--edge: #2a2140;--card: #120c22;--warn: #ff5b6e}#gear{position:fixed;z-index:6;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:36px;height:36px;padding:0;border:2px solid var(--edge);background:#120c22cc;color:var(--mute);font:18px/1 ui-monospace,monospace;cursor:pointer;touch-action:manipulation;opacity:.55}#gear:hover,#gear:focus-visible{opacity:1;color:var(--btc);border-color:var(--btc);outline:none}@media(pointer:coarse){#gear{width:44px;height:44px;font-size:22px;opacity:.85}}body.options-open #gear,#options[hidden]{display:none}#options{position:fixed;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#06030ed1;line-height:1.4;touch-action:pan-y;-webkit-user-select:none;user-select:none}#options .opt-panel{width:min(880px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;background:radial-gradient(ellipse at 50% -20%,#3a1458,#3a145800 60%),var(--card);border:3px solid var(--edge);box-shadow:0 0 0 3px #000,8px 8px #000;padding:18px 20px 14px;color:var(--ink)}#options .opt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}#options h2{margin:0;font-size:18px;letter-spacing:2px;transform:skew(-8deg);background:linear-gradient(#fff2b0 0%,var(--btc) 45%,#ffd166 50%,#b8440f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(2px 2px 0 #1a0a02)}#options h3{font-size:8px;color:var(--mute);letter-spacing:1px;margin:0 0 8px;font-weight:400}#options .opt-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}@media(max-width:640px)and (min-height:480px){#options .opt-cols{grid-template-columns:1fr}}#options button,#options input{font:inherit;color:inherit}#options .opt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:32px;margin:0 0 5px;padding:6px 10px;border:2px solid var(--edge);background:#0d0819;font-size:9px;text-align:left;cursor:pointer;transition:border-color .1s ease,transform .1s ease}#options .opt-row:hover,#options .opt-row:focus-visible,#options .opt-row:focus-within,#options .opt-btn:focus-visible{border-color:var(--btc);outline:none;transform:translate(2px)}#options .opt-row:focus-visible .opt-label,#options .opt-row:focus-within .opt-label{color:var(--btc)}#options .opt-label{color:var(--ink);white-space:nowrap}#options .opt-val{color:var(--btc);white-space:nowrap}#options [role=switch][aria-checked=false] .opt-val{color:var(--mute)}#options .opt-range input{flex:1;min-width:60px;accent-color:var(--btc);height:18px;cursor:pointer}#options .opt-range .opt-val{min-width:4ch;text-align:right}#options .opt-key.capturing{border-color:#7cf6ff;background:#0b1a26}#options .opt-key.capturing .opt-val{color:#7cf6ff;animation:opt-blink .8s steps(2) infinite}#options .opt-key.conflict{border-color:var(--warn)}#options .opt-key.conflict .opt-val{color:var(--warn)}#options .opt-btn{justify-content:center;border:2px solid var(--edge);background:#0d0819;padding:8px 12px;font-size:9px;cursor:pointer}#options .opt-btn.done{color:#7fe3ad}#options .opt-btn.warn{color:#0b0714;background:var(--warn);border-color:var(--warn)}#options .opt-danger{margin-top:10px}#options .opt-danger>.opt-btn{color:var(--warn)}#options .opt-confirm{border:2px solid var(--warn);padding:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}#options .opt-confirm[hidden]{display:none}#options .opt-confirm p{margin:0 0 4px;width:100%;font-size:8px;line-height:1.6;color:var(--ink)}#options .opt-confirm .opt-btn{flex:1}#options .opt-note{font-size:7px;color:var(--mute);margin:6px 0 0}#options .opt-note.warn{color:var(--warn)}#options .opt-close{border:2px solid var(--edge);background:transparent;color:var(--mute);padding:6px 8px;font-size:8px;cursor:pointer}#options .opt-close:hover,#options .opt-close:focus-visible{color:var(--btc);border-color:var(--btc);outline:none}#options .opt-foot{font-size:7px;color:var(--mute);text-align:center;margin:10px 0 0}@media(pointer:coarse){#options .opt-foot{display:none}#options .opt-row{min-height:36px}}@media(max-height:460px){#options .opt-panel{padding:10px 14px 8px}#options .opt-head{margin-bottom:6px}#options h2{font-size:13px}#options h3{margin-bottom:5px}#options .opt-row{min-height:28px;padding:4px 8px;margin-bottom:3px;font-size:8px}#options .opt-danger{margin-top:5px}#options .opt-btn{padding:5px 10px;font-size:8px}}@keyframes opt-blink{50%{opacity:.35}}@media(prefers-reduced-motion:reduce){#options .opt-key.capturing .opt-val{animation:none}#options .opt-row{transition:none}}body.reduced-motion #options .opt-key.capturing .opt-val{animation:none}body.reduced-motion #options .opt-row,body.reduced-motion #options .opt-row:focus-visible{transition:none;transform:none}#options [hidden]{display:none!important}
