:root{--bg: #000;--fg: #fcfcfc;--muted: #8a8a8a;--accent: #f8b800;--pad: #2a2a2a;--pad-active: #4a4a4a;--scale: 3;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:ui-monospace,Cascadia Mono,Menlo,Consolas,monospace;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}#app{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}#stage{position:relative;display:flex;align-items:center;justify-content:center}#frame{position:relative;overflow:hidden;width:calc(256px * var(--scale) * var(--aspect, 1));height:calc(240px * var(--scale));background:#000}#frame.crop-overscan{height:calc(224px * var(--scale))}#screen{position:absolute;left:0;top:0;width:calc(256px * var(--scale) * var(--aspect, 1));height:calc(240px * var(--scale));image-rendering:pixelated;image-rendering:crisp-edges}#frame.crop-overscan #screen{top:calc(-8px * var(--scale))}#crt{position:absolute;inset:0;pointer-events:none;display:none;background:repeating-linear-gradient(to bottom,#0000 0 calc(var(--scale) * .5px),#00000047 calc(var(--scale) * .5px) calc(var(--scale) * 1px)),radial-gradient(ellipse at center,#0000 60%,#00000059);mix-blend-mode:multiply}#frame.crt #crt{display:block}#frame.crt #screen{filter:saturate(1.08) contrast(1.05) brightness(1.06)}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000000d1;cursor:pointer;outline:none;text-align:center;padding:16px}#overlay.hidden{display:none}#overlay h1{margin:0 0 .5em;font-size:clamp(28px,6vw,48px);letter-spacing:.12em;color:var(--accent)}#overlay .cta{font-size:clamp(14px,3vw,20px);animation:blink 1.2s steps(2,start) infinite}#overlay .hint{color:var(--muted);font-size:12px;margin-top:1.5em}@keyframes blink{to{visibility:hidden}}#toolbar{position:fixed;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));display:flex;gap:6px;opacity:.35;transition:opacity .2s}#toolbar:hover,#toolbar:focus-within{opacity:1}#toolbar button{background:#111;color:var(--fg);border:1px solid #333;border-radius:6px;width:34px;height:34px;font-size:16px;cursor:pointer}dialog#settings{background:#0c0c0c;color:var(--fg);border:2px solid var(--fg);border-radius:4px;min-width:min(320px,calc(100vw - 32px))}dialog#settings::backdrop{background:#0009}dialog#settings form{display:flex;flex-direction:column;gap:10px}dialog#settings h2{margin:0 0 4px;font-size:18px}dialog#settings .small{color:var(--muted);font-size:12px}dialog#settings button{align-self:flex-end;background:#222;color:var(--fg);border:1px solid #555;padding:6px 14px;cursor:pointer}#touch{display:none;width:100%;max-width:560px;padding:12px 16px max(16px,env(safe-area-inset-bottom));justify-content:space-between;align-items:center;gap:8px}body.touch #touch{display:flex}.dpad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px)}.pad{background:var(--pad)}.pad.up{grid-area:1 / 2;border-radius:8px 8px 0 0}.pad.left{grid-area:2 / 1;border-radius:8px 0 0 8px}.pad.center{grid-area:2 / 2}.pad.right{grid-area:2 / 3;border-radius:0 8px 8px 0}.pad.down{grid-area:3 / 2;border-radius:0 0 8px 8px}.pad.ul{grid-area:1 / 1;background:transparent}.pad.ur{grid-area:1 / 3;background:transparent}.pad.dl{grid-area:3 / 1;background:transparent}.pad.dr{grid-area:3 / 3;background:transparent}.meta{display:flex;flex-direction:column;gap:10px}.pill{background:var(--pad);border-radius:12px;padding:6px 10px;font-size:11px;text-align:center;color:var(--muted)}.ab{display:flex;gap:14px;align-items:flex-end}.round{width:62px;height:62px;border-radius:50%;background:#8a1010;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px}.round.a{margin-bottom:26px}dialog#settings h3{margin:8px 0 0;font-size:14px}dialog#settings .controls{font-size:12px;border-collapse:collapse}dialog#settings .controls td{padding:2px 10px 2px 0}dialog#settings .controls td:first-child{color:var(--muted)}dialog#settings .row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}dialog#settings code{font-size:11px}
