@font-face{font-family:Britti;src:url('assets/brand/britti-medium.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Geist;src:url('assets/brand/geist-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--purple:#5e4cff;--mint:#64e3b5;--shell:#d2cfc6;--shell-dark:#bfbcb2;--ink:#343437;--console-width:min(420px,calc((100svh - 170px)*.64));--u:calc(var(--console-width)/420)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{min-width:300px;background:#07060f}
body{margin:0;min-height:100svh;color:#f8fafb;font-family:Geist,Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:linear-gradient(#07060f35,#07060f65),url('assets/brand/space-bg.webp') center/cover fixed;display:flex;flex-direction:column}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--mint);outline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.masthead{height:68px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:0 32px;border-bottom:1px solid #ffffff19;background:#0b0b0df5;position:relative;z-index:3}
.brand{display:flex;align-items:center}.brand img{display:block;width:126px;height:auto}
.after-hours{font:9px ui-monospace,monospace;letter-spacing:2.1px;color:#bcb7ce;display:flex;align-items:center;gap:9px;margin-right:auto}
.after-hours span{width:5px;height:5px;border-radius:50%;background:#8375ff}
.download{font-family:Britti,Geist,sans-serif;font-size:13px;background:var(--purple);border:1px solid #8b7fff;border-radius:5px;padding:9px 14px;transition:background .15s}
.download:hover{background:#7565ff}.download span{margin-left:9px}
.arcade{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px 22px 9px;isolation:isolate;overflow:hidden}
.console-scene{position:relative;flex:none;width:var(--console-width)}
.handheld{position:relative;z-index:1;width:100%;padding:calc(var(--u)*30) calc(var(--u)*24) calc(var(--u)*22);border-radius:calc(var(--u)*20) calc(var(--u)*20) calc(var(--u)*66) calc(var(--u)*20);background:linear-gradient(110deg,#e3e0d8 0%,var(--shell) 38%,#c8c5bc 100%);border:1px solid #f0ede4;box-shadow:inset 3px 2px 3px #ffffff75,inset -4px -6px 5px #9b988f,3px 10px 0 #8f8d86,5px 15px 0 #66666a,0 22px 35px #000a,0 0 90px #5e4cff15;color:var(--ink)}
.handheld:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.06;border-radius:inherit;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h100v100H0z'/%3E%3C/svg%3E")}
.shell-seam{position:absolute;left:0;right:0;top:calc(var(--u)*16);height:2px;background:#a9a69f;box-shadow:0 1px 0 #eeebe4}
.power-switch{position:absolute;left:calc(var(--u)*27);top:calc(var(--u)*4);font:600 calc(var(--u)*6)/1 ui-monospace,monospace;letter-spacing:calc(var(--u)*.7);color:#7d7b77}
.power-switch span{margin:0 calc(var(--u)*5)}
.bezel{position:relative;padding:calc(var(--u)*28) calc(var(--u)*23) calc(var(--u)*24) calc(var(--u)*43);background:linear-gradient(125deg,#414145,#343437 55%,#2e2e32);border-radius:calc(var(--u)*12) calc(var(--u)*12) calc(var(--u)*41) calc(var(--u)*12);border:1px solid #29292c;box-shadow:0 2px 1px #faf8ed,inset 1px 1px 2px #5b5b60}
.bezel-heading{position:absolute;left:calc(var(--u)*16);right:calc(var(--u)*16);top:calc(var(--u)*11);display:flex;align-items:center;gap:calc(var(--u)*9);font:500 calc(var(--u)*6.5)/1 ui-monospace,monospace;letter-spacing:calc(var(--u)*1);color:#d2cbe9;white-space:nowrap}
.bezel-heading i{height:3px;flex:1;border-top:1px solid #b8adff;border-bottom:1px solid #6e65ae}
.battery{position:absolute;left:calc(var(--u)*8);top:42%;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*8)}
.battery span{width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;background:var(--mint);box-shadow:0 0 5px #64e3b56b,inset 0 0 2px #176146}
.battery small{font:500 calc(var(--u)*5)/1 ui-monospace,monospace;color:#b6b6bd;letter-spacing:calc(var(--u)*.4)}
.screen-recess{padding:calc(var(--u)*5);background:#0b0b0d;border-radius:2px;box-shadow:0 1px 0 #707076,inset 2px 3px 4px #000}
#game{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:10/9;background:#000 url('assets/title.png') center/contain no-repeat;outline:none;touch-action:none;image-rendering:pixelated}
#game:focus-visible{outline:1px solid #ada2ff;outline-offset:2px}
#screen{display:none;width:100%;height:100%;image-rendering:pixelated}
#game.running #screen{display:block}#game.running #play{display:none}
#play{position:absolute;max-width:90%;padding:11px 17px;color:#fff;background:#5e4cff;border:1px solid #b2a8ff;border-radius:5px;font-family:Britti,Geist,sans-serif;font-size:clamp(11px,calc(var(--u)*14),16px);font-weight:500;box-shadow:0 4px 15px #0009}
#play:hover{background:#7565ff}#play:disabled{opacity:.75;cursor:wait}
.bezel-caption{position:absolute;left:calc(var(--u)*43);right:calc(var(--u)*23);bottom:calc(var(--u)*9);text-align:center;color:#919198;font:500 calc(var(--u)*4.8)/1 ui-monospace,monospace;letter-spacing:calc(var(--u)*.8)}
.device-brand{display:flex;align-items:center;gap:calc(var(--u)*8);padding-top:calc(var(--u)*12);line-height:1}
.device-brand img{filter:brightness(0);opacity:.78;width:calc(var(--u)*100);height:auto}
.device-brand>span{font:bold italic calc(var(--u)*19)/1 Britti,Geist,sans-serif;letter-spacing:-.7px;color:#5948bf}
.device-brand small{margin-left:auto;color:#817c8f;font:600 calc(var(--u)*5.8)/1 ui-monospace,monospace;letter-spacing:calc(var(--u)*1.1)}
.hardware-controls{position:relative;height:calc(var(--u)*171);margin-top:calc(var(--u)*6);touch-action:none;user-select:none;-webkit-user-select:none}
.hardware-controls button{touch-action:none;-webkit-touch-callout:none;border:0;padding:0;outline-offset:4px;display:block}
.dpad{position:absolute;left:calc(var(--u)*3);top:calc(var(--u)*20);display:grid;grid-template-columns:repeat(3,calc(var(--u)*32));grid-template-rows:repeat(3,calc(var(--u)*32));filter:drop-shadow(1px 4px 1px #8d8b84)}
.dpad:before{content:'';position:absolute;width:calc(var(--u)*113);height:calc(var(--u)*113);left:calc(var(--u)*-8.5);top:calc(var(--u)*-8.5);border-radius:50%;background:#bdbab2;box-shadow:inset 2px 3px 3px #a5a298,1px 2px 0 #edeae1;z-index:-1}
.dpad button,.dpad-center{background:#343437;box-shadow:inset 1px 1px 0 #535357;position:relative;display:grid;place-items:center;color:#1d1d20}
.dpad button span{font-size:calc(var(--u)*10);text-shadow:0 1px 0 #525256}
.dpad [data-button=up]{grid-area:1/2;border-radius:4px 4px 0 0}
.dpad [data-button=left]{grid-area:2/1;border-radius:4px 0 0 4px}
.dpad [data-button=right]{grid-area:2/3;border-radius:0 4px 4px 0}
.dpad [data-button=down]{grid-area:3/2;border-radius:0 0 4px 4px}
.dpad-center{grid-area:2/2;box-shadow:none}
.dpad-center:after{content:'';width:calc(var(--u)*19);height:calc(var(--u)*19);border-radius:50%;box-shadow:inset 1px 2px 3px #222225,0 1px 0 #56565b;background:#303033}
.action-buttons{position:absolute;right:calc(var(--u)*-1);top:calc(var(--u)*23);display:flex;gap:calc(var(--u)*14);padding:calc(var(--u)*9);border-radius:calc(var(--u)*40);background:#c1beb6;box-shadow:inset 1px 2px 2px #aaa79e,1px 2px 0 #eae7de;transform:rotate(-27deg)}
.action-buttons>div{position:relative}
.action-buttons button{width:calc(var(--u)*43);height:calc(var(--u)*43);border-radius:50%;background:linear-gradient(140deg,#49494e,#27272a);box-shadow:inset 1px 2px 1px #68686e,1px 4px 0 #202023,2px 5px 2px #8d8a83}
.action-buttons span{position:absolute;top:calc(var(--u)*53);left:0;right:0;text-align:center;color:#6552b6;font:700 calc(var(--u)*11)/1 Geist,sans-serif}
.system-buttons{position:absolute;left:calc(var(--u)*115);bottom:calc(var(--u)*7);display:flex;gap:calc(var(--u)*13);transform:rotate(-23deg)}
.system-buttons>div{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*9)}
.system-buttons button{width:calc(var(--u)*40);height:calc(var(--u)*11);border-radius:20px;background:#6e6e73;box-shadow:inset 0 2px 1px #8f8f96,0 3px 0 #444449,0 4px 1px #aaa79f}
.system-buttons span{color:#6552a1;font:700 calc(var(--u)*6.5)/1 Geist,sans-serif;letter-spacing:calc(var(--u)*.5)}
.hardware-controls button.pressed{background:#202023;box-shadow:inset 1px 2px 4px #0006;transform:translateY(1px)}
.speaker{position:absolute;right:calc(var(--u)*5);bottom:calc(var(--u)*5);display:flex;gap:calc(var(--u)*6);transform:rotate(-28deg)}
.speaker i{display:block;width:calc(var(--u)*4);height:calc(var(--u)*36);border-radius:9px;background:#a5a299;box-shadow:inset 1px 1px 1px #8d8a82,1px 1px 0 #ece9df}
.serial{position:absolute;bottom:calc(var(--u)*11);left:calc(var(--u)*28);font:500 calc(var(--u)*4.5)/1 ui-monospace,monospace;letter-spacing:calc(var(--u)*.8);color:#9c9991}
.shell-screw{position:absolute;left:calc(var(--u)*13);bottom:calc(var(--u)*13);width:calc(var(--u)*6);height:calc(var(--u)*6);border-radius:50%;background:#aaa79f;box-shadow:inset 1px 1px 1px #84817b,0 1px 0 #f0ede5}
.shell-screw:after{content:'';position:absolute;left:15%;top:43%;width:70%;height:1px;background:#77756f;transform:rotate(-25deg)}
.cartridge{position:absolute;top:14%;left:83%;z-index:-1;width:calc(var(--u)*168);height:calc(var(--u)*215);padding:calc(var(--u)*15) calc(var(--u)*13);border:1px solid #ad9cff;border-radius:calc(var(--u)*12) calc(var(--u)*12) calc(var(--u)*8) calc(var(--u)*8);background:linear-gradient(130deg,#8b70ff,#5e4cff 70%);box-shadow:inset 3px 3px 3px #b59aff,3px 5px 0 #38249c,8px 15px 35px #0009;transform:rotate(13deg)}
.cartridge:before,.cartridge:after{content:'';position:absolute;top:calc(var(--u)*35);width:calc(var(--u)*8);height:calc(var(--u)*43);background:repeating-linear-gradient(#6a55db 0 3px,#a08aff 3px 5px)}
.cartridge:before{left:calc(var(--u)*-7)}.cartridge:after{right:calc(var(--u)*-7)}
.cartridge-logo{display:block;width:calc(var(--u)*103);height:auto;margin:0 auto calc(var(--u)*13);opacity:.7}
.cartridge-label{overflow:hidden;border:calc(var(--u)*3) solid #403575;border-radius:calc(var(--u)*4);background:#24232b}
.cartridge-label img{display:block;width:100%;height:auto}
.cartridge-label span{display:block;text-align:center;color:#ddd6ff;font:500 calc(var(--u)*6)/1 ui-monospace,monospace;letter-spacing:calc(var(--u)*.7);padding:calc(var(--u)*7) 0}
.cartridge-arrow{display:block;text-align:center;padding-top:calc(var(--u)*7);color:#4a3ad2;font-size:calc(var(--u)*14)}
.play-help{margin-top:27px;text-align:center;color:#ddd9ec;font-size:10px;letter-spacing:.1px}
.play-help p{margin:0}.play-help p>span{color:#8e86a4;margin:0 7px}
kbd{font:inherit;color:#faf9ff;font-weight:500}.touch-hint{display:block;color:#b4adc8;font-size:9px;margin-top:5px}
.utility-space{min-height:28px;padding-top:8px}
.console-tools{display:flex;gap:10px;align-items:center;color:#7e768f;font-size:9px}
.console-tools button{border:0;background:none;color:#b4adc8;padding:2px 1px;font-size:10px}.console-tools button:hover{color:white}
#performance{font:9px ui-monospace,monospace;color:var(--mint);margin-left:5px}
footer{flex:none;display:flex;justify-content:space-between;gap:20px;padding:10px 32px 16px;color:#9c94ae;font-size:9px}footer a:hover{color:white}footer a span{margin-left:4px}
.load-error{color:#ffbcb7;font-size:13px}
#game:fullscreen{height:100dvh;width:100vw;background:#000}#game:fullscreen #screen{width:auto;height:100%;max-width:100%;object-fit:contain}
@media(min-height:900px){:root{--console-width:min(460px,calc((100svh - 190px)*.72))}.arcade{padding-top:38px;padding-bottom:25px}.play-help{margin-top:32px}}
@media(max-width:680px){:root{--console-width:min(380px,calc(100vw - 42px),calc((100svh - 190px)*.76))}.masthead{height:60px;padding:0 18px;gap:14px}.brand img{width:108px}.after-hours{font-size:7px;letter-spacing:1.2px}.after-hours span{display:none}.download{font-size:10px;padding:7px 9px}.download span{margin-left:4px}.arcade{padding:22px 16px 5px;overflow:visible}.cartridge{display:none}.play-help{margin-top:25px;font-size:9px}.play-help p>span{margin:0 5px}.touch-hint{font-size:9px}.console-tools{gap:9px}footer{padding:8px 18px 14px;font-size:8px;gap:10px}#performance{font-size:8px}}
@media(max-width:360px){.after-hours{display:none}.download{margin-left:auto}}
@media(max-height:650px) and (min-width:681px){:root{--console-width:300px}.arcade{padding-top:20px;justify-content:flex-start}.play-help{margin-top:24px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(pointer:coarse),(max-width:680px){.hardware-controls button{position:relative}.hardware-controls button:after{content:'';position:absolute;left:50%;top:50%;width:max(44px,100%);height:max(44px,100%);transform:translate(-50%,-50%)}}
/* Thumb-sized controls on phones and touchscreens; desktop keeps its bezel scale. */
@media(pointer:coarse),(max-width:680px){
  .hardware-controls{height:234px;margin-top:10px}
  .dpad{left:0;top:24px;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px)}
  .dpad:before{width:148px;height:148px;left:-8px;top:-8px}
  .dpad button span{font-size:14px;color:#a4a4af;text-shadow:0 1px 1px #000}
  .dpad-center:after{width:25px;height:25px}
  .action-buttons{right:-2px;top:35px;gap:14px;padding:10px}
  .action-buttons button{width:56px;height:56px}
  .action-buttons span{top:68px;font-size:14px}
  .system-buttons{left:calc(50% - 62px);bottom:15px;gap:16px;transform:rotate(-15deg)}
  .system-buttons button{width:56px;height:24px;border-radius:14px}
  .system-buttons>div{gap:11px}
  .system-buttons span{font-size:9px;letter-spacing:.5px}
  .speaker{right:0;bottom:14px;gap:5px}
  .speaker i{height:33px;width:4px}
  .hardware-controls button:after{width:max(44px,100%);height:max(44px,100%)}
  .console-tools{gap:6px}
  .console-tools button{font-size:12px;min-height:44px;min-width:64px;padding:8px}
}
@media(max-width:680px){
  :root{--console-width:min(400px,calc(100vw - 24px))}
  .arcade{padding-top:16px}
  .handheld{padding-left:20px;padding-right:20px}
  .play-help{margin-top:23px}
}
@media(max-width:360px){
  .action-buttons{top:42px;gap:10px;padding:7px;transform:rotate(-12deg)}
  .action-buttons button{width:48px;height:48px}
  .action-buttons span{top:60px}
  .dpad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px)}
  .dpad:before{width:136px;height:136px}
  .speaker{gap:4px}.speaker i{height:26px;width:3px}
}