:root { color-scheme: dark; --paper:#f2f1e9; --muted:#8295a7; --cyan:#86ddff; --lime:#d7ff8a; --ink:#090e17; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(ellipse at 50% 0,#172839,transparent 60%),var(--ink); color:var(--paper); font-family:'Helvetica Neue',Helvetica,sans-serif; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; cursor:pointer; }
button:disabled { opacity:.5; cursor:wait; }
button:focus-visible,a:focus-visible,canvas:focus-visible { outline:2px solid var(--lime); outline-offset:4px; }
[hidden] { display:none!important; }
.rotate-prompt { position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:radial-gradient(ellipse at 50% 25%,#203b50,var(--ink) 70%);overflow:auto; }
.rotate-phone { width:95px;height:51px;border:3px solid var(--cyan);border-radius:10px;margin-bottom:34px;box-shadow:0 0 40px #86ddff22;position:relative; }
.rotate-phone::after { content:'';position:absolute;right:5px;top:18px;width:4px;height:10px;background:var(--cyan);border-radius:3px; }
.rotate-prompt h2 { font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(32px,10vw,48px);line-height:1.05;margin:0 0 18px;color:var(--lime); }
.rotate-prompt p:not(.eyebrow) { max-width:310px;color:#b1c1cc;line-height:1.6;margin:8px 0; }
.rotate-prompt .rotate-note { font-size:12px; }
.rotate-prompt a { color:var(--cyan);margin-top:28px;padding:12px; }
.arcade { max-width:1680px; margin:auto; padding:0 30px; }
.topbar { height:88px; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.wordmark { display:flex;align-items:center;gap:9px;color:var(--paper);text-decoration:none;font-family:Impact,'Arial Narrow',sans-serif;font-size:36px;letter-spacing:-2px; }
.wordmark span { font-size:10px;letter-spacing:1px;line-height:1.1; }
.edition,.tools,.eyebrow,footer,.bottom-hud,.hud small,.hud-stats span,.instructions,.prototype-note { font-family:'Courier New',monospace; font-size:10px; font-weight:bold; letter-spacing:1.5px; }
.edition { color:var(--muted);display:flex;align-items:center;gap:12px; }
.live-dot { width:6px;height:6px;background:var(--lime);border-radius:50%;box-shadow:0 0 14px #d7ff8a80; }
.divider { color:#3c5365; }
.tools { display:flex;gap:7px;letter-spacing:.6px; }
.tools button { background:#ffffff04;border:1px solid #ffffff17;padding:10px 12px;border-radius:5px; }
.tools button:hover { background:#ffffff0f; }
kbd { font:inherit; background:#ffffff0c;border:1px solid #ffffff25;padding:3px 6px;border-radius:3px; }
.cabinet { height:min(76vw, calc(100svh - 138px)); min-height:450px; max-height:930px; position:relative; overflow:hidden;border:1px solid #566a8050;border-radius:12px;background:#0d1521;box-shadow:0 30px 100px #0008; }
#game { width:100%;height:100%;display:block;outline-offset:-5px; }
.hud { position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:start;padding:24px 28px 40px;background:linear-gradient(#060c18df,transparent);pointer-events:none; }
.game-title { font-family:Impact,'Arial Narrow',sans-serif;font-size:30px;letter-spacing:.5px;transform:skew(-6deg);line-height:1; }
.game-title em { color:var(--cyan);font-style:normal; }
.game-title small { display:block;color:var(--muted);margin-top:10px;font-size:9px;transform:skew(6deg); }
.hud-stats { display:flex;gap:30px; }
.hud-stats>div { display:flex;flex-direction:column;gap:7px; }
.hud-stats span { font-size:8px;color:#9bafc1; }
.hud-stats strong { font-size:24px;font-variant-numeric:tabular-nums; }
.hud-stats i { font-size:15px;color:var(--muted);font-style:normal; }
#health { color:#ff897f;letter-spacing:4px; }
.bottom-hud { position:absolute;bottom:0;left:0;right:0;z-index:2;padding:24px;display:flex;justify-content:space-between;background:linear-gradient(transparent,#060b16d9);color:#adbecb;font-size:9px;pointer-events:none; }
.bottom-hud b { color:var(--cyan); }
#toast { position:absolute;top:100px;left:50%;transform:translateX(-50%);max-width:85%;padding:10px 18px;border:1px solid #86ddff44;border-radius:30px;background:#0b1c2aee;color:var(--paper);font-size:12px;opacity:0;transition:opacity .2s;z-index:4;text-align:center;pointer-events:none; }
#toast.visible { opacity:1; }
.overlay { position:absolute;inset:0;display:flex;align-items:center;padding:5%;z-index:5;background:linear-gradient(90deg,#06111bf5 0%,#06111beb 30%,#06111b88 57%,#06111b11 100%); }
.overlay-copy { max-width:610px; }
.eyebrow { color:var(--cyan);font-size:11px;margin:0 0 20px; }
h1 { font-family:Impact,'Arial Narrow',sans-serif;font-weight:900;font-size:clamp(60px,7.8vw,118px);line-height:.9;letter-spacing:-1px;margin:0 0 25px; }
h1 em { color:var(--lime);font-style:normal; }
#overlay-description { color:#b1c1cc;font-size:15px;line-height:1.7;max-width:420px; }
.instructions { display:flex;gap:17px;flex-wrap:wrap;margin:26px 0 32px;max-width:440px;font-size:9px;letter-spacing:.4px; }
.instructions span { display:flex;align-items:center;gap:7px; }
.primary { background:var(--lime);color:#17220f;border:0;border-radius:4px;font-weight:800;font-size:13px;letter-spacing:1.4px;padding:19px 28px;box-shadow:0 0 34px #d7ff8a13;transition:background .15s,transform .15s; }
.primary:hover { background:#eaffbc;transform:translateY(-2px); }
.text-button { border:0;background:none;padding:15px 20px;color:var(--muted);font-size:11px;letter-spacing:1px; }
.prototype-note { font-size:8px;color:#6e8799;line-height:1.8;margin-top:24px;letter-spacing:1px; }
footer { min-height:50px;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:9px;color:#6f8497;letter-spacing:1px; }
footer b { color:#c8d5df;margin-right:4px; } footer i { margin:0 12px;color:#405164; } .accent { color:var(--lime); }
.touch-controls { display:none;justify-content:space-between;padding:12px 0;gap:12px; }
.touch-controls button { user-select:none;-webkit-user-select:none;touch-action:none;border:1px solid #ffffff20;background:#172433;border-radius:10px;min-width:49px;min-height:48px;font-size:22px; }
.touch-controls button.held { background:#315567;border-color:var(--cyan); }
.direction-controls,.action-controls { display:flex;align-items:center;gap:7px; }
.direction-controls>div { display:flex;gap:5px;flex-direction:column; }
.action-controls button { min-height:67px;min-width:67px;font-size:12px;font-weight:800; }
.action-controls small { display:block;font-size:8px;color:#718a9c;margin-top:5px; }
.action-controls .jump { background:var(--lime);color:#17220f; }
.action-controls .recharging { opacity:.55;border-color:#ffbc5560; }
.action-controls button[data-boost]:not([data-boost=""]) { position:relative;box-shadow:0 0 20px #36dcff55; }
.action-controls button[data-boost]:not([data-boost=""])::after { content:attr(data-boost);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;color:#86ddff;background:#07111ade;padding:4px 7px;border-radius:8px;font-size:10px;font-weight:bold; }
@media (pointer:coarse) { .touch-controls { display:flex; } .cabinet { height:calc(100svh - 230px); } }
@media (max-width:760px) {
  .arcade { padding:0 12px; } .topbar { height:66px;gap:9px; }.wordmark{font-size:28px;}.wordmark span{font-size:8px;}
  .edition{display:none;}.tools{font-size:8px;flex-wrap:wrap;justify-content:flex-end;gap:4px;}.tools button{padding:7px 6px;}.tools kbd{display:none;}
  .cabinet{height:calc(100svh - 220px);min-height:370px;border-radius:8px;}.hud{padding:16px 14px;}.game-title{font-size:21px;}.game-title small{font-size:7px;max-width:150px;line-height:1.5;}.hud-stats{gap:13px;}.hud-stats strong{font-size:17px;}.hud-stats span{font-size:6px;letter-spacing:.5px;}#health{letter-spacing:1px;font-size:17px;}
  .bottom-hud{padding:15px 12px;font-size:7px;letter-spacing:.5px;gap:10px;}.overlay{padding:28px;background:#06111bd9;}.eyebrow{font-size:9px;}h1{font-size:64px;}#overlay-description{font-size:13px;}.instructions{gap:10px;margin:18px 0;}.prototype-note{font-size:7px;margin-top:16px;}.primary{padding:16px 21px;}
  .touch-controls{display:flex;}footer{font-size:7px;min-height:38px;}footer i{margin:0 5px;}#footer-note{display:none;}
}
@media (max-height:580px) and (orientation:landscape) {
  .topbar{height:44px;}.cabinet{height:calc(100svh - 52px);min-height:260px;}.touch-controls{position:absolute;bottom:18px;left:25px;right:25px;z-index:3;pointer-events:none;}.touch-controls button{pointer-events:auto;opacity:.65;min-height:36px;min-width:42px;}.action-controls button{min-height:48px;}.hud{padding:10px 20px;}.bottom-hud,footer{display:none;}.overlay{padding:24px 5%;}h1{font-size:55px;margin-bottom:12px;}.eyebrow{margin-bottom:10px;}#overlay-description{margin:8px 0;}.instructions{margin:12px 0;}.prototype-note{display:none;}
}
.fullscreen-help { max-width:460px;width:calc(100% - 32px);max-height:90dvh;overflow:auto;background:#102030;color:var(--paper);border:1px solid #86ddff55;border-radius:16px;padding:24px; }
.fullscreen-help::backdrop { background:#000b; }
.fullscreen-help h2 { font-family:Impact,'Arial Narrow',sans-serif;color:var(--lime);margin-top:0; }
.fullscreen-help p { line-height:1.6; }
.fullscreen-help .offline-note { font-size:12px;color:var(--muted); }
body.large-view { overflow:hidden; }
.large-view .arcade { max-width:none;padding:0; }
.large-view .topbar { height:40px;padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));gap:8px; }
.large-view .edition,.large-view footer,.large-view #test-sound,.large-view .wordmark span { display:none; }
.large-view .wordmark { font-size:25px; }
.large-view .tools button { padding:6px 10px;font-size:10px; }
.large-view .cabinet { height:calc(100dvh - 40px);min-height:0;max-height:none;border:0;border-radius:0; }
.large-view .touch-controls { position:fixed;bottom:max(10px,env(safe-area-inset-bottom));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));z-index:3;pointer-events:none;padding:0; }
.large-view .touch-controls button { pointer-events:auto; }
.overlay { overflow-y:auto; }
@media (pointer:coarse) and (orientation:landscape) {
  .arcade { max-width:none;padding:0; }
  .topbar { height:36px;padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left)); }
  .edition,.wordmark span,#test-sound,footer { display:none; }
  .wordmark { font-size:24px; }.tools button { font-size:9px;padding:6px 8px; }
  .cabinet { height:calc(100dvh - 36px);min-height:0;max-height:none;border:0;border-radius:0; }
  .overlay { align-items:flex-start;padding:14px max(20px,env(safe-area-inset-left)); }
  .overlay-copy { max-width:600px;margin:auto 0; }.overlay h1 { font-size:38px;margin-bottom:8px; }
  .overlay .eyebrow { margin-bottom:8px;font-size:9px; }#overlay-description { font-size:12px;line-height:1.4;max-width:550px;margin:6px 0; }
  .instructions { margin:10px 0;font-size:8px; }.primary { padding:12px 18px;font-size:11px; }
  .touch-controls { bottom:max(8px,env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right)); }
  .direction-controls { gap:14px; }
  .direction-controls>div { gap:14px; }
  .action-controls { gap:18px; }
  .touch-controls button { min-width:60px;min-height:60px;border-radius:14px;font-size:28px;opacity:.9;border-color:#ffffff45; }
  .action-controls button { min-width:76px;min-height:76px;font-size:14px; }
  .action-controls small { font-size:10px;margin-top:7px; }
  .hud { padding:10px max(16px,env(safe-area-inset-right)) 20px max(16px,env(safe-area-inset-left)); }.game-title { font-size:19px; }.hud-stats strong { font-size:17px; }.hud-stats { gap:14px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }
/* Reserve thumb zones outside the canvas, rather than covering the player. */
@media (pointer:coarse) and (orientation:landscape) {
  body { --left-controls:228px;--right-controls:190px;--game-toolbar:36px; }
  body.large-view { --game-toolbar:40px; }
  .cabinet,.large-view .cabinet {
    margin-left:calc(var(--left-controls) + env(safe-area-inset-left));
    margin-right:calc(var(--right-controls) + env(safe-area-inset-right));
    height:calc(100dvh - var(--game-toolbar));
  }
  .touch-controls,.large-view .touch-controls {
    position:fixed;top:var(--game-toolbar);bottom:0;
    left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
    padding:0;align-items:center;pointer-events:none;
  }
  .hud { padding:8px;justify-content:flex-end; }
  .game-title { display:none; }
  .hud-stats { gap:12px; }.hud-stats span { font-size:7px; }.hud-stats strong { font-size:16px; }
  .overlay { padding:14px; }.overlay h1 { font-size:32px; }
}
@media (pointer:coarse) and (orientation:landscape) and (max-width:740px) {
  body { --left-controls:154px;--right-controls:100px; }
  .direction-controls { display:grid;grid-template-columns:60px 60px;gap:14px; }
  .direction-controls>div { display:contents; }
  .direction-controls [data-key="up"] { grid-column:1;grid-row:1; }
  .direction-controls [data-key="down"] { grid-column:2;grid-row:1; }
  .direction-controls [data-key="left"] { grid-column:1;grid-row:2; }
  .direction-controls [data-key="right"] { grid-column:2;grid-row:2; }
  .action-controls { flex-direction:column;gap:14px; }
}