:root{color-scheme:dark;--ink:#f8f7e8;--navy:#101b38;--pink:#ff5a72;--gold:#ffcf4b;--sky:#73dbf2}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0a1027}body{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;color:var(--ink);background:radial-gradient(ellipse at 50% 0%,#21365a 0,#0a1027 67%)}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:4px solid var(--gold);outline-offset:3px}.page{max-width:520px;margin:0 auto;padding:12px 12px 24px}.masthead{display:flex;align-items:center;gap:10px;padding:3px 0 11px}.logo-mark{width:38px;height:38px;flex:none;display:grid;place-items:center;background:var(--gold);color:#17203e;font-size:25px;box-shadow:4px 4px 0 #e27e3d}.eyebrow{color:#86c5e8;font-size:10px;letter-spacing:2px}.masthead h1{font-size:clamp(17px,4.6vw,25px);letter-spacing:1px;line-height:1.1;margin:3px 0 0;text-shadow:3px 3px #38519b}.icon-button{margin-left:auto;flex:none;background:#26365b;border:2px solid #6176a3;color:#fff;padding:9px 8px;font-size:11px;font-weight:900}.machine{border:4px solid #6f86c8;background:#142044;box-shadow:0 6px 0 #050a19,0 14px 30px #0008;padding:8px}.hud{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#090f25;border:2px solid #364c80;border-bottom:0;padding:8px 11px}.hud-item{display:flex;flex-direction:column;gap:2px;min-width:28%}.hud-item span{font-size:10px;letter-spacing:2px;color:#b4c0e1}.hud-item strong{font-size:21px;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}.hud-center{text-align:center}.hud-right{text-align:right}.screen-wrap{position:relative;overflow:hidden;background:#75d8ef;aspect-ratio:420/700;border:2px solid #364c80;isolation:isolate}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:16px 18px 84px;background:#09132ba8;z-index:3}.overlay[hidden]{display:none}.overlay-panel{width:min(100%,350px);background:#14244d;border:4px solid #fff4b1;box-shadow:7px 7px 0 #040a19;padding:23px 17px;text-align:center}.big-star{color:var(--gold);font-size:23px;letter-spacing:9px}.overlay h2{font-size:clamp(22px,5.5vw,30px);line-height:1.1;text-shadow:3px 3px #a82f55;margin:13px 0}.overlay p{line-height:1.55;font-size:13px;margin:0 0 20px;color:#d7e6ff}.primary-button{width:100%;border:3px solid #fff8dc;background:var(--pink);box-shadow:0 5px 0 #8e2644;color:#fff;font-size:19px;font-weight:900;padding:13px 10px;letter-spacing:.5px}.primary-button:active{transform:translateY(4px);box-shadow:0 1px 0 #8e2644}.mini-instructions{margin-top:17px;color:#adcafa;font-size:10px;line-height:1.7;letter-spacing:.6px}.touch-controls{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;align-items:end;gap:8px;z-index:2;padding:14px 13px 16px;background:linear-gradient(transparent,#0c15367a 25%,#0c1536af)}.control{border:3px solid #fff7d3;color:#fff;box-shadow:0 5px 0 #080b27;font-size:25px;font-weight:900;min-height:63px;user-select:none;-webkit-user-select:none}.control:active,.control.pressed{transform:translateY(4px);box-shadow:0 1px 0 #080b27;filter:brightness(1.2)}.direction{background:#364f9c;width:25%;max-width:89px}.jump{background:#e33b5a;width:42%;max-width:155px;font-size:21px}.jump span{color:#fff4aa}.pause-button{position:absolute;right:12px;top:12px;background:#122749c9;color:#fff;border:2px solid white;font-size:19px;font-weight:900;width:43px;height:40px;z-index:2}.pause-button[hidden]{display:none}.game-message{position:absolute;top:23%;left:0;right:0;text-align:center;z-index:1;font-weight:900;font-size:24px;text-shadow:3px 3px 0 #18284b;pointer-events:none;color:#fffab7}.machine-foot{display:flex;justify-content:space-between;padding:8px 1px 0;color:#809bcf;font-size:10px;font-weight:700;letter-spacing:1.5px}.below{text-align:center;line-height:1.5;color:#bdd0f4;font-size:12px;margin:16px 12px}@media(min-width:700px) and (min-height:800px){.page{max-width:480px}}@media(max-height:800px){.page{max-width:390px}.masthead{padding-bottom:8px}.screen-wrap{max-height:calc(100dvh - 171px);aspect-ratio:auto;height:calc((100vw - 42px)*700/420);min-height:340px}.screen-wrap canvas{height:100%;width:100%}}@media(max-width:360px){.page{padding:7px}.machine{padding:5px}.logo-mark{width:30px;height:30px}.eyebrow{font-size:8px}.overlay-panel{padding:13px}.overlay p{font-size:12px}.control{min-height:54px}.touch-controls{padding:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}