@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Space+Mono:wght@400;700&display=swap');
:root{--lime:#d5ff58;--pink:#ff70ba;--ink:#101017;--muted:#92919e}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:#f6f3e9;font-family:'Space Mono',monospace;font-size:12px}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit;color:inherit;background:none;border:1px solid #42414b;padding:10px 15px}button:hover{border-color:var(--lime);color:var(--lime)}button:focus-visible,a:focus-visible{outline:3px solid var(--pink);outline-offset:4px}header{height:86px;border-bottom:1px solid #2b2a33;display:flex;justify-content:space-between;align-items:center;padding:0 5%}.brand{display:flex;align-items:center;gap:13px;color:#fff;text-decoration:none;font-weight:700;letter-spacing:2px;font-size:19px}.brand-icon{background:var(--lime);color:var(--ink);padding:5px 8px;font-weight:900;box-shadow:4px 4px 0 #607236}.edition{font-size:9px;letter-spacing:1px;color:var(--muted);border-left:1px solid #42414b;padding-left:16px}.header-right{display:flex;align-items:center;gap:26px}.online{font-size:10px;color:var(--lime)}main{max-width:1280px;padding:40px 45px 0;margin:auto}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted)}.eyebrow span{color:var(--pink);padding:0 10px}.heading{display:flex;justify-content:space-between;align-items:center;margin:12px 0 28px}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:58px;line-height:1;margin:0 0 14px;letter-spacing:.5px}h1 em{font-style:normal;color:var(--lime)}.heading p{color:#b7b5c2;margin:0;font-size:12px}.badge{border:1px solid var(--pink);color:var(--pink);padding:12px;transform:rotate(7deg);font-size:10px;text-align:center;line-height:1.8}.cabinet{border:1px solid #45434e;background:#1a1923;padding:9px;box-shadow:0 12px 50px #0005}.cabinet-top,.cabinet-bottom{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;font-size:9px;letter-spacing:1px;color:#a9a5b6}.cabinet-top i{display:inline-block;width:6px;height:6px;background:var(--lime);margin-right:8px}.screen{position:relative;background:#19152f;overflow:hidden;aspect-ratio:2/1}canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.screen:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 3px,#0002 3px 4px);pointer-events:none;z-index:4;opacity:.5}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(90deg,#11102266,#11102211,#11102266);z-index:3}#overlay:empty{display:none}.menu{padding:20px;max-width:100%;text-shadow:3px 3px #161025}.menu .tiny{color:var(--lime);letter-spacing:4px;font-size:10px}.logo{font-family:'Barlow Condensed',Impact,sans-serif;font-size:86px;font-weight:900;line-height:.9;color:#ffdf7e;text-shadow:4px 4px #bc4672,7px 7px #271b41;letter-spacing:4px;margin:18px 0 10px}.subtitle{font-weight:bold;font-size:18px;letter-spacing:6px;color:#fff}.menu p{font-size:11px;color:#e6d8f7}.menu-actions{display:flex;gap:12px;justify-content:center;margin:26px 0 15px}.primary{background:var(--lime);color:#17151c!important;border-color:var(--lime);box-shadow:4px 4px #647c3b;font-weight:bold;text-shadow:none;padding:14px 25px}.secondary{background:#272136;color:#fff;border-color:#83709b;text-shadow:none;padding:14px 22px}.blink{color:#dfc9ea;font-size:9px;letter-spacing:2px}.cabinet-bottom b{color:var(--lime)}.cabinet-bottom button{border:0;font-size:10px;padding:4px 9px}.below{display:grid;grid-template-columns:1.8fr 1fr;margin:30px 0 35px;gap:40px}.section-label{font-size:9px;letter-spacing:2px;color:var(--muted)}.control-row{display:flex;align-items:center;gap:20px;margin:17px 0;font-size:10px}.control-row strong{font-size:10px;min-width:120px}.control-row b{color:var(--lime);margin-right:10px}.control-row b.pink{color:var(--pink)}kbd{border:1px solid #484550;border-bottom:3px solid #484550;padding:3px 6px;color:#dedbe5;font-family:inherit;font-size:10px}small{color:var(--muted);font-size:9px}aside{border-left:1px solid #3c3946;padding-left:35px}aside p{font-family:'Barlow Condensed',sans-serif;font-size:24px;line-height:1.3;margin:14px 0}aside strong{color:var(--lime)}aside>span:last-child{font-size:9px;color:var(--muted)}footer{border-top:1px solid #32303b;padding:22px 0;display:flex;justify-content:space-between;font-size:8px;color:var(--muted);align-items:center}footer button{border:0;font-size:9px}.characters{display:flex;gap:15px;margin:18px 0}.character{background:#171322e8;border:1px solid #7a658b;padding:15px;min-width:210px}.character h3{color:var(--lime);font-size:15px}.character p{line-height:1.8;margin:5px}.character canvas{height:75px;width:120px;margin:auto}.menu h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:38px;margin:8px}.back{border:0;font-size:10px;margin-top:10px}#hud{position:absolute;inset:14px 18px auto;display:flex;justify-content:space-between;pointer-events:none;z-index:2;font-size:10px;text-shadow:2px 2px #111}.player-hud{width:180px}.player-hud .name{color:var(--lime);font-weight:bold}.health{height:10px;background:#261b39;border:2px solid #e7d8fd;margin:6px 0}.health i{display:block;height:100%;background:var(--lime)}.hearts{color:var(--pink)}.stage-hud{text-align:center;color:#fff}.stage-hud small{display:block;color:var(--lime);margin:6px}.special{font-size:8px;color:#c8e6ff}#touch{display:none;justify-content:space-between;gap:15px;padding:16px 0;touch-action:none}#touch button{background:#292335;min-width:48px;min-height:48px;user-select:none}.pad{display:flex;gap:5px}@media(pointer:coarse){#touch{display:flex}}@media(max-width:700px){header{height:65px;padding:0 20px}.edition,.online,.badge{display:none}.brand{font-size:14px}.header-right button{font-size:9px;padding:7px}main{padding:25px 12px 0}.eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:37px}.heading p{font-size:10px}.heading{margin-bottom:20px}.cabinet{padding:4px}.cabinet-top{font-size:6px;padding:8px 4px}.cabinet-bottom{font-size:6px;padding:8px 3px}.logo{font-size:50px;margin:10px 0}.subtitle{font-size:10px;letter-spacing:3px}.menu{padding:6px}.menu .tiny,.blink{font-size:6px}.menu p{font-size:8px}.menu-actions{margin:12px 0 8px;gap:8px}.primary,.secondary{padding:9px 12px;font-size:9px}.below{grid-template-columns:1fr;gap:25px;margin-top:22px}.control-row{gap:10px;font-size:8px}.control-row strong{min-width:100px}aside{padding-left:18px}footer>span:nth-child(2){display:none}.character{min-width:0;padding:8px}.character h3{font-size:10px}.character p{font-size:7px}.characters{margin:6px;gap:8px}.character canvas{height:45px;width:72px}.menu h2{font-size:22px}.back{font-size:8px;margin:0;padding:5px}#hud{inset:7px;font-size:7px}.player-hud{width:105px}.health{height:7px;margin:3px 0}.stage-hud small,.special{font-size:6px}.screen{min-height:220px}#touch{gap:4px}#touch button{font-size:9px;padding:8px;min-width:38px}}
@media(max-width:700px){.screen{width:100%;aspect-ratio:auto;height:220px;min-height:0}.menu .tiny{letter-spacing:2px}.menu .logo{font-size:46px}}

/* Readable arcade HUD, including two simultaneous players on small screens. */
#hud{inset:16px 18px auto;gap:14px;font-size:13px;align-items:flex-start}
.player-hud{width:28%;max-width:290px;min-width:0;padding:10px 12px;background:#141328e8;border:2px solid #756b8e;box-shadow:3px 3px #121220}
.player-hud .name{display:block;font-size:13px;line-height:1.4}
.health{height:21px;border:3px solid #e7d8fd;margin:7px 0 4px;box-shadow:0 2px #111}
.health i{background:repeating-linear-gradient(90deg,#d5ff58 0 16px,#add13d 16px 18px)}
.hearts{display:inline-block;font-size:27px;line-height:1.2;letter-spacing:4px}
.special{display:block;font-size:10px;line-height:1.5;margin-top:3px}
.stage-hud{padding:8px 10px;background:#141328d9;max-width:32%;font-size:12px;line-height:1.5;border-bottom:2px solid #d5ff58}
.stage-hud small{font-size:10px;margin:3px 0}
@media(max-width:700px){
 #hud{inset:6px;gap:5px;font-size:9px}
 .player-hud{width:36%;padding:4px 5px;border-width:1px}
 .player-hud .name{font-size:8px;min-height:22px}
 .health{height:15px;border-width:2px;margin:3px 0}
 .hearts{font-size:20px;letter-spacing:2px}
 .special{font-size:7px;line-height:1.25}
 .stage-hud{max-width:27%;font-size:8px;padding:4px 3px}
 .stage-hud small{font-size:7px}
}