:root{color-scheme:dark;--pink:#ff16cd;--green:#b5ff38;--safe-top:0px;--safe-bottom:0px;font-family:'Courier New',monospace;font-weight:bold;background:#080912;color:#fff}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 20%,#252042 0,#080912 65%);display:grid;place-items:center;padding:max(14px,var(--safe-top)) 16px max(14px,var(--safe-bottom))}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0}button:focus-visible,a:focus-visible{outline:3px solid var(--green);outline-offset:4px}.cabinet{width:min(960px,100%)}.masthead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;font-size:11px;letter-spacing:2px;color:#9a95b2}.masthead a{color:#fff;font-size:26px;text-decoration:none;letter-spacing:-2px}.masthead a span{color:var(--pink)}.masthead button{background:transparent;font-size:11px;color:#aaa4bf;padding:10px}.screen{position:relative;border:4px solid #000;box-shadow:0 0 0 1px #453855,0 12px 0 #030309,0 28px 60px #0008;background:#00baf2;overflow:hidden}.hud{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#030307;padding:14px 22px;height:78px;position:relative;z-index:2}.hud small{display:block;font-size:10px;letter-spacing:2px;color:#a9a5bc;margin-bottom:4px}.hud strong{font-size:26px;letter-spacing:3px;text-shadow:2px 2px #007d9a}.hud .stage{text-align:center}.hud .stage strong{font-size:20px;color:#e4fc75}.hud #hearts{color:#ff3356;text-shadow:3px 3px #7e0825}.hud button{background:#171421;padding:8px;font-size:20px;border:1px solid #453855}canvas{display:block;width:100%;height:auto;image-rendering:pixelated;aspect-ratio:16/9}.scanlines{position:absolute;inset:78px 0 0;background:repeating-linear-gradient(0deg,#0000 0 3px,#0001 3px 4px);pointer-events:none;z-index:3}.overlay{position:absolute;inset:78px 0 0;z-index:4;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(#051428ed,#09081bdd);text-align:center;padding:16px}.overlay[hidden]{display:none}.eyebrow{font-size:9px;color:var(--green);letter-spacing:3px}h1{font-size:clamp(30px,6vw,62px);line-height:.9;letter-spacing:-3px;margin:14px 0 8px;text-shadow:4px 4px #000,6px 6px #007692}h1 span{color:var(--pink);text-shadow:4px 4px #000,6px 6px #770076}.subtitle{color:var(--green);font-size:11px;letter-spacing:3px;margin:8px 0}#intro{font-size:12px;line-height:1.5;color:#c1c4d5;margin:8px 0}.heroes{display:flex;gap:6px;margin:10px 0 0;flex-wrap:wrap;justify-content:center}.heroes button{background:#18182b;border:2px solid #48445b;padding:9px 12px;font-size:10px}.heroes button[aria-pressed=true]{border-color:var(--green);color:var(--green);background:#25322c}.perk{font-size:10px;color:#b8b4cb;min-height:24px;margin:10px 0;max-width:410px}.pixel-button{background:var(--pink);color:#fff;border:4px solid #ff7ce8;box-shadow:0 0 0 4px #710057,0 7px 0 4px #42003f;padding:10px 32px;font-size:28px;letter-spacing:2px;text-shadow:3px 3px #670051}.pixel-button span{color:#680052;text-shadow:none}.record{font-size:9px;color:#a59eb6;letter-spacing:2px;margin:20px 0 0}.controls{display:flex;justify-content:space-between;gap:20px;margin-top:28px;touch-action:none;user-select:none}.dpad,.actions{display:flex;gap:12px}.controls button{height:66px;min-width:72px;background:#201c32;border:2px solid #51445f;border-bottom:6px solid #100d1b;box-shadow:0 4px #000;font-size:24px}.controls button.held{transform:translateY(3px);border-bottom-width:3px}.controls small{display:block;font-size:9px;letter-spacing:1px;margin-top:4px}.controls #special{font-size:16px;color:var(--pink);min-width:120px}.controls .jump{color:var(--green);min-width:90px}footer{display:flex;justify-content:space-between;gap:8px;font-size:9px;letter-spacing:1px;color:#8a819d;margin-top:24px}footer b{color:var(--pink)}#notice{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);padding:8px 16px;font-size:12px;z-index:5;color:var(--green);background:#080912dd;border:2px solid #b5ff3866;white-space:nowrap;opacity:0;transition:opacity .15s}#notice.visible{opacity:1}@media(max-width:600px){body{padding-left:8px;padding-right:8px}.masthead{margin-bottom:12px;font-size:8px;letter-spacing:1px}.hud{height:58px;padding:10px 12px;gap:6px}.hud strong{font-size:20px}.hud small{font-size:8px}.hud .stage strong{font-size:15px}.hud .stage small{letter-spacing:0}.overlay{inset:58px 0 0;padding:16px 8px;justify-content:center}.scanlines{inset:58px 0 0}canvas{aspect-ratio:4/5;height:auto}.eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:48px;margin-top:18px}#intro{font-size:11px}.heroes{gap:5px;max-width:310px}.heroes button{padding:10px 8px;font-size:9px}.perk{max-width:300px;font-size:10px;line-height:1.5;min-height:32px}.pixel-button{font-size:25px;padding:12px 38px}.controls{gap:8px;margin-top:24px}.dpad,.actions{gap:8px}.controls button{min-width:54px;height:68px}.controls #special{min-width:98px;font-size:14px}.controls .jump{min-width:72px}footer{font-size:8px;letter-spacing:0}footer span:last-child{max-width:150px;text-align:right}}@media(max-height:600px) and (min-width:601px){body{padding:6px}.cabinet{width:min(720px,100%)}.masthead{margin-bottom:6px}.hud{height:46px;padding:5px 16px}.hud strong{font-size:20px}.overlay,.scanlines{inset:46px 0 0}.overlay{padding:6px}.eyebrow,#intro,.subtitle{display:none}h1{font-size:34px;margin:4px 0}.heroes{margin-top:6px}.perk{margin:7px 0;min-height:14px}.pixel-button{font-size:22px;padding:6px 30px}.record{margin:13px 0 0}.controls{margin-top:15px}.controls button{height:46px}footer{margin-top:12px}}

[hidden]{display:none!important}

/* The reference is a square arcade screen: 10% HUD, 70% scene, 20% action. */
.cabinet{width:min(720px,100%)}
.screen{container-type:inline-size}
.hud{height:10cqw;min-height:42px;padding:1.6cqw 3cqw}
.hud strong{font-size:4cqw}.hud small{font-size:1.5cqw}.hud .stage strong{font-size:3cqw}.hud .stage small{font-size:1.3cqw;letter-spacing:0}
canvas{aspect-ratio:10/7;height:auto}
.ability-deck{height:20cqw;display:flex;justify-content:center;align-items:center;background:#030307;position:relative;z-index:4;touch-action:none;user-select:none}
.ability-deck .pixel-button{width:64%;height:15cqw;padding:0;font-size:8cqw;border-width:1cqw;box-shadow:0 0 0 .7cqw #710057,0 1cqw 0 .7cqw #42003f;clip-path:polygon(4% 0,96% 0,96% 4%,100% 4%,100% 96%,96% 96%,96% 100%,4% 100%,4% 96%,0 96%,0 4%,4% 4%);text-shadow:.6cqw .6cqw #4b0048}
.ability-deck .pixel-button span{color:white;text-shadow:.6cqw .6cqw #4b0048}.ability-deck small{display:block;font-size:1.8cqw;letter-spacing:2px;color:#650051;text-shadow:none;margin-top:1cqw}
.ability-deck .held{filter:brightness(.8);transform:translateY(3px)}
.scanlines{inset:10cqw 0 20cqw}
.overlay{inset:10cqw 0 0;padding:2cqw;justify-content:center}
.controls{margin-top:24px}.controls .jump{min-width:100px}.dpad{gap:14px}.controls button{min-width:76px}
@media(max-width:600px){h1{font-size:32px;margin:8px 0}.eyebrow{font-size:7px}.subtitle{font-size:8px;letter-spacing:2px;margin:5px 0}#intro{font-size:9px;margin:4px 0}.heroes{margin:5px 0 0;gap:4px;max-width:100%}.heroes button{font-size:8px;padding:6px}.perk{font-size:8px;line-height:1.3;min-height:18px;margin:6px 0;max-width:300px}.overlay .pixel-button{font-size:22px;padding:8px 30px}.record{font-size:7px;margin-top:14px;letter-spacing:1px}.controls button{height:58px}.controls .jump{min-width:90px}.controls{margin-top:24px}.masthead{margin-bottom:14px}.cabinet{width:100%}}
@media(max-height:600px) and (min-width:601px){.cabinet{width:min(430px,100%)}.controls{margin-top:14px}.controls button{height:42px}footer{margin-top:12px}.overlay .pixel-button{font-size:22px}}

#notice{bottom:auto;top:calc(10cqw + 12px);font-size:clamp(8px,1.8cqw,12px);max-width:95%;white-space:normal;text-align:center;pointer-events:none}
:root{font-family:Menlo,Consolas,monospace}.hud strong{font-family:Menlo,Consolas,monospace}
.ability-deck .pixel-button{width:74%;height:19cqw;border:0;box-shadow:none;clip-path:none;background-image:url('./reference.jpg');background-repeat:no-repeat;background-size:170% auto;background-position:50% 100%;text-shadow:none;background-color:#030307}
.ability-deck .pixel-button span{font-size:0}.ability-deck small{position:absolute;bottom:1.5cqw;left:0;width:100%;font-size:1.5cqw;color:#ffeaff;letter-spacing:2px;text-shadow:1px 1px #000}

.ability-deck .pixel-button{position:relative;width:64%;height:19cqw;background-image:none;background-color:transparent}.button-art{display:block;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}.ability-deck small{bottom:-.5cqw;font-size:1.3cqw}.hud #hearts{display:flex;gap:.4cqw}.heart-icon{width:4.6cqw;height:4.6cqw;image-rendering:pixelated}

canvas{aspect-ratio:25/17}.ability-deck{height:22cqw}.ability-deck .pixel-button{width:72%;height:21.5cqw}.scanlines{bottom:22cqw}