*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{background:radial-gradient(ellipse at 50% 0%,#2b2d42,#16172a 70%);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,SF Mono,Menlo,monospace;user-select:none;-webkit-user-select:none;touch-action:manipulation}#shell{padding:12px}#bezel{background:linear-gradient(160deg,#f7d51d,#eebc0c 55%,#d9a40a);border-radius:18px 18px 56px;padding:22px 22px 16px;box-shadow:0 18px 50px #0000008c,inset 0 2px #ffffff73,inset 0 -4px 10px #0000002e;width:min(94vw,560px)}#screen-frame{background:#3b3a45;border-radius:10px 10px 36px;padding:26px 34px;position:relative;box-shadow:inset 0 3px 10px #0009}#power-led{position:absolute;left:12px;top:46%;width:8px;height:8px;border-radius:50%;background:#ff3b30;box-shadow:0 0 8px #ff3b30}canvas#screen{display:block;width:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:#fff;aspect-ratio:160 / 144}#brand{margin:12px 4px 2px;color:#14213d;font-weight:800;letter-spacing:1px;font-size:15px;font-style:italic}#brand span{font-size:11px;opacity:.55;font-style:normal}#controls{display:flex;justify-content:space-between;align-items:center;margin-top:14px}#dpad{display:grid;grid-template-columns:44px 44px 44px;grid-template-rows:44px 44px 44px;grid-template-areas:". up ." "left c right" ". down ."}#dpad button,#d-center{background:#2d2d34;border:none}#d-up{grid-area:up;border-radius:8px 8px 0 0}#d-down{grid-area:down;border-radius:0 0 8px 8px}#d-left{grid-area:left;border-radius:8px 0 0 8px}#d-right{grid-area:right;border-radius:0 8px 8px 0}#d-center{grid-area:c}#dpad button:active{background:#1b1b20}#ab{display:flex;gap:18px;transform:rotate(-18deg)}button.round{width:56px;height:56px;border-radius:50%;background:#a4243b;color:#fff;font-weight:800;font-size:17px;border:none;box-shadow:0 4px #701728,inset 0 2px 2px #ffffff4d}button.round:active{transform:translateY(3px);box-shadow:0 1px #701728}#startselect{display:flex;gap:22px;justify-content:center;margin-top:14px}button.pill{width:74px;height:18px;border-radius:10px;border:none;background:#8e8e98;color:#2b2b31;font-size:9px;font-weight:700;box-shadow:0 2px #5d5d66;transform:rotate(-18deg)}button.pill:active{transform:rotate(-18deg) translateY(2px)}#help{text-align:center;color:#14213da6;font-size:10px;margin-top:14px}@media(max-width:520px){#screen-frame{padding:14px 16px}}