:root{--c0: #0b1a10;--c1: #1a3a26;--c2: #4d8a52;--c3: #b8d97a;--bezel: #2a2628;--bezel-edge: #15110f;--bezel-light: #3a3436;--screen-frame: #0e0c0b;--led-on: #b53b2a;--led-off: #3a1410;--btn: #6b1f2a;--btn-edge: #2a0a10;--btn-grey: #2f2a2c;--btn-grey-edge: #15110f;--label: #d8c9b0}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%;background:#0a0908;color:var(--label);font-family:"Press Start 2P",ui-monospace,Menlo,Consolas,monospace;-webkit-font-smoothing:none;font-smooth:never;overflow-x:hidden;overflow-y:auto;user-select:none;-webkit-user-select:none;touch-action:manipulation}#app{position:relative;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:8px 0}.handheld{--w: 540px;--bezel-texture: none;--dpad-size: 96px;--dpad-btn: 32px;--ab-btn: 44px;--ab-gap: 14px;--controls-pad-top: 22px;--screen-w: 480px;--screen-h: 432px;--bezel-pad-x: 22px;--bezel-pad-bottom: 28px;width:var(--w);padding:22px var(--bezel-pad-x) var(--bezel-pad-bottom);border-radius:18px 18px 60px;background-color:var(--bezel);background-image:linear-gradient(180deg,#ffffff0f,#0000 18%,#0000 80%,#0000002e),var(--bezel-texture);background-repeat:no-repeat,repeat;background-size:100% 100%,64px 64px;image-rendering:pixelated;image-rendering:crisp-edges;box-shadow:inset 0 1px #ffffff0f,inset 0 -2px #0006,0 18px 40px #0000008c;position:relative}.brand{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1px;color:var(--label);opacity:.8;padding:0 6px 10px}.brand .dot{width:6px;height:6px;border-radius:50%;background:var(--led-off);box-shadow:inset 0 0 2px #0009}.brand .dot.on{background:var(--led-on);box-shadow:0 0 6px var(--led-on),inset 0 0 2px #0006}.screen-frame{background:var(--screen-frame);padding:12px;border-radius:6px 6px 20px;box-shadow:inset 0 2px #0009,inset 0 -1px #ffffff0a}.screen-label{font-size:6px;letter-spacing:2px;color:var(--label);opacity:.55;text-align:center;padding-bottom:8px}#screen{display:block;width:var(--screen-w);height:var(--screen-h);image-rendering:pixelated;image-rendering:crisp-edges;background:var(--c3);margin:0 auto;box-shadow:inset 0 0 0 1px #ffffff0a,0 0 0 2px #000}.controls{display:grid;grid-template-columns:auto 1fr auto;gap:12px;padding:var(--controls-pad-top) 6px 6px;align-items:center}.serial{text-align:center;font-size:7px;letter-spacing:1px;color:var(--label);opacity:.65;white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none}.dpad{position:relative;width:var(--dpad-size);height:var(--dpad-size);justify-self:start}.dpad button{position:absolute;width:var(--dpad-btn);height:var(--dpad-btn);background:linear-gradient(180deg,#3a3436,#1c1819);border:none;border-radius:4px;box-shadow:inset 0 1px #ffffff14,inset 0 -2px #00000080,0 1px 0 var(--bezel-edge);color:var(--label);font-family:inherit;font-size:10px;cursor:pointer;padding:0;touch-action:none}.dpad button:active,.dpad button.pressed{box-shadow:inset 0 2px 4px #0009,inset 0 -1px #ffffff0a;transform:translateY(1px)}.dpad .up{top:0;left:var(--dpad-btn);border-radius:4px 4px 0 0}.dpad .down{top:calc(var(--dpad-btn) * 2);left:var(--dpad-btn);border-radius:0 0 4px 4px}.dpad .left{top:var(--dpad-btn);left:0;border-radius:4px 0 0 4px}.dpad .right{top:var(--dpad-btn);left:calc(var(--dpad-btn) * 2);border-radius:0 4px 4px 0}.dpad .center{position:absolute;top:var(--dpad-btn);left:var(--dpad-btn);width:var(--dpad-btn);height:var(--dpad-btn);background:#1c1819;pointer-events:none}.ab{display:flex;gap:var(--ab-gap);justify-self:end;transform:rotate(-18deg);padding-right:6px}.ab button{width:var(--ab-btn);height:var(--ab-btn);border-radius:50%;border:none;background:radial-gradient(circle at 35% 30%,#a83040 0%,var(--btn) 55%,var(--btn-edge) 100%);color:var(--label);font-family:inherit;font-size:calc(var(--ab-btn) * .32);cursor:pointer;touch-action:none;box-shadow:inset 0 2px #ffffff1f,inset 0 -3px #00000073,0 2px 0 var(--bezel-edge)}.ab button:active,.ab button.pressed{box-shadow:inset 0 3px 6px #0000008c,inset 0 -1px #ffffff0d;transform:translateY(1px)}.startsel{grid-column:1 / -1;display:flex;justify-content:center;gap:18px;padding-top:6px}.startsel button{background:linear-gradient(180deg,#4a4346,var(--btn-grey));border:none;border-radius:10px;width:56px;height:12px;transform:rotate(-18deg);cursor:pointer;touch-action:none;box-shadow:inset 0 1px #ffffff14,inset 0 -2px #00000073,0 1px 0 var(--btn-grey-edge)}.startsel button:active,.startsel button.pressed{transform:rotate(-18deg) translateY(1px)}.startsel .lbl{font-size:6px;letter-spacing:1px;color:var(--label);opacity:.7;display:flex;flex-direction:column;align-items:center;gap:20px}@media (max-width: 700px){.handheld{--w: min(380px, calc(100vw - 16px) );--dpad-size: 76px;--dpad-btn: 24px;--ab-btn: 36px;--ab-gap: 12px;--controls-pad-top: 18px;--screen-w: 320px;--screen-h: 288px;--bezel-pad-x: 14px;--bezel-pad-bottom: 22px}.serial{font-size:6px;letter-spacing:0}}@media (max-width: 360px){.handheld{--dpad-size: 60px;--dpad-btn: 20px;--ab-btn: 30px;--ab-gap: 10px;--controls-pad-top: 14px;--screen-w: 240px;--screen-h: 216px;--bezel-pad-x: 10px;--bezel-pad-bottom: 18px}.serial{display:none}}@media (max-width: 280px){.handheld{--dpad-size: 48px;--dpad-btn: 16px;--ab-btn: 26px;--ab-gap: 8px;--screen-w: 160px;--screen-h: 144px}}