@font-face{font-family:Atkinson Hyperlegible Mono;font-style:normal;font-display:swap;font-weight:400;src:url(./atkinson-hyperlegible-mono-latin-400-normal-CmMGer93.woff2) format("woff2"),url(./atkinson-hyperlegible-mono-latin-400-normal-Cmjm2dBj.woff) format("woff")}@font-face{font-family:Atkinson Hyperlegible Mono;font-style:normal;font-display:swap;font-weight:700;src:url(./atkinson-hyperlegible-mono-latin-700-normal-BhOtGXDr.woff2) format("woff2"),url(./atkinson-hyperlegible-mono-latin-700-normal-BQ8cw3oD.woff) format("woff")}@font-face{font-family:Pixelify Sans;font-style:normal;font-display:swap;font-weight:700;src:url(./pixelify-sans-latin-700-normal-D3Xxx3QE.woff2) format("woff2"),url(./pixelify-sans-latin-700-normal-BctWAS0u.woff) format("woff")}@font-face{font-family:Tiny5;font-style:normal;font-display:swap;font-weight:400;src:url(./tiny5-latin-400-normal-BsIaeAHC.woff2) format("woff2"),url(./tiny5-latin-400-normal-DyAV0xrX.woff) format("woff")}@layer reset,shell;@layer reset{*{box-sizing:border-box}html,body{margin:0;min-height:100%}button,canvas{font:inherit}}@layer shell{:root{color:#f1d2a1;background:#11131f;font-family:Atkinson Hyperlegible Mono,monospace;font-synthesis:none;--game-width: 960px}body{min-width:320px;min-height:100dvh;display:grid;place-items:center;overflow:auto;padding:18px;background-color:#151724;background-image:linear-gradient(90deg,rgb(118 146 172 / 5%) 1px,transparent 1px),linear-gradient(rgb(118 146 172 / 4%) 1px,transparent 1px),radial-gradient(circle at 48% 30%,#303852 0,#1d2031 42%,#11131f 78%);background-size:8px 8px,8px 8px,100% 100%}.game-stage{width:min-content;max-width:100%;position:relative;padding:10px 12px 9px;border:1px solid #6e6478;background:#272a3c;box-shadow:0 0 0 3px #151724,0 0 0 4px #c69d54,0 24px 80px #0000008c}.case-label,.hardware-notes{width:var(--game-width);max-width:calc(100vw - 62px);display:flex;align-items:center;justify-content:space-between;letter-spacing:.14em;color:#8c7b8e;font-size:7px;font-weight:700;line-height:1;text-transform:uppercase}.case-label{padding:0 2px 8px}.hardware-notes{justify-content:flex-end;gap:10px;padding:8px 3px 0}.hardware-notes>:first-child{margin-right:auto}.screen-bezel{line-height:0;border:4px solid #0e101a;outline:1px solid #45506c;background:#0e101a}canvas{display:block;width:min(960px,calc(100vw - 62px));height:auto;aspect-ratio:16 / 9;image-rendering:pixelated;touch-action:none;cursor:default;outline:none}canvas:focus-visible{box-shadow:0 0 0 2px #82d6be}.status-light{width:5px;height:5px;border-radius:50%;background:#82d6be;box-shadow:0 0 7px #82d6be}.touch-controls{display:none;width:100%;min-height:260px;flex:1;position:relative;grid-template:auto minmax(180px,1fr) auto / minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px;padding:clamp(18px,3.5dvh,38px) 10px clamp(20px,4dvh,44px);touch-action:none;user-select:none;-webkit-user-select:none}.touch-controls button{appearance:none;border:1px solid #6e6478;color:#f1d2a1;background:#171827;box-shadow:inset 0 -4px #0e101a,inset 0 1px #45506c,0 3px #0e101a,0 0 0 2px #22243a;font-family:Atkinson Hyperlegible Mono,monospace;font-size:10px;font-weight:700;letter-spacing:.08em;touch-action:none;-webkit-tap-highlight-color:transparent}.touch-controls button:focus-visible{outline:2px solid #82d6be;outline-offset:4px}.touch-controls button:active,.touch-controls button.is-pressed{color:#171827;background:#c69d54;box-shadow:inset 0 3px #8f3f4f,0 1px #0e101a,0 0 0 2px #22243a;transform:translateY(3px)}.touch-model{grid-column:1 / -1;width:min(100%,420px);justify-self:center;display:flex;align-items:center;gap:10px;color:#8c7b8e;font-family:Tiny5,monospace;font-size:9px;letter-spacing:.14em;line-height:1}.touch-model:before,.touch-model:after{content:"";height:2px;flex:1;background:#45506c;box-shadow:0 2px #171827}.touch-model span:last-child{color:#82d6be}.d-pad{--pad-cell: clamp(44px, 11vw, 96px);grid-column:1;grid-row:2;justify-self:center;width:calc(var(--pad-cell) * 3);height:calc(var(--pad-cell) * 3);position:relative;display:grid;grid-template:repeat(3,var(--pad-cell)) / repeat(3,var(--pad-cell));filter:drop-shadow(0 6px 0 #0e101a)}.d-pad:before{content:"";position:absolute;inset:var(--pad-cell);z-index:0;background:#171827;box-shadow:inset 0 1px #45506c}.d-pad button{width:var(--pad-cell);height:var(--pad-cell);position:relative;z-index:1;border-radius:5px;font-family:Tiny5,monospace;font-size:clamp(13px,4vw,20px)}.d-pad .north{grid-area:1 / 2;border-radius:10px 10px 2px 2px}.d-pad .west{grid-area:2 / 1;border-radius:10px 2px 2px 10px}.d-pad .east{grid-area:2 / 3;border-radius:2px 10px 10px 2px}.d-pad .south{grid-area:3 / 2;border-radius:2px 2px 10px 10px}.action-pad{--face-button: clamp(56px, 16vw, 120px);grid-column:2;grid-row:2;justify-self:center;width:calc(var(--face-button) * 2.35);height:calc(var(--face-button) * 2.15);position:relative;transform:rotate(-5deg)}.action-pad button{position:absolute}.action-pad .run,.action-pad .interact{width:var(--face-button);height:var(--face-button);border-radius:50%}.action-pad .run{left:0;top:42%;border-color:#82d6be;color:#82d6be}.action-pad .interact{right:0;top:13%;border-color:#c69d54;color:#171827;background:#e1aa24;box-shadow:inset 0 -5px #8f6d25,inset 0 1px #ffe2a9,0 4px #0e101a,0 0 0 3px #22243a}.action-pad .run span,.action-pad .interact span{display:block;font-family:Pixelify Sans,sans-serif;font-size:calc(var(--face-button) * .38);line-height:.75}.action-pad .run small,.action-pad .interact small{display:block;margin-top:6px;font-family:Tiny5,monospace;font-size:9px;letter-spacing:.12em}.action-pad .interact:active,.action-pad .interact.is-pressed{background:#f1d2a1;box-shadow:inset 0 4px #8f6d25,0 1px #0e101a,0 0 0 3px #22243a}.action-pad .phone,.action-pad .menu{min-width:calc(var(--face-button) * 1.02);height:44px;padding-inline:12px;border-radius:22px;font-family:Tiny5,monospace;font-size:11px}.action-pad .phone{left:7%;top:0}.action-pad .menu{right:9%;bottom:0}.touch-speaker{grid-column:1 / -1;justify-self:center;display:flex;gap:8px;transform:rotate(-8deg)}.touch-controls .touch-speaker span{display:block;width:5px;height:24px;border-radius:3px;background:#171827;box-shadow:inset 1px 0 #45506c}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(pointer:coarse),(max-width:720px){body{min-height:100dvh;display:grid;place-items:center;overflow-x:hidden;overscroll-behavior:none;padding:0;background-color:#11131f}body,.game-stage,.touch-controls,.touch-controls *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.touch-controls button,.touch-controls button *{-webkit-user-drag:none}.game-stage{width:100%;min-width:0;max-width:none;min-height:min(100dvh,calc(var(--game-width) + 300px));margin-inline:auto;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));border:2px solid #6e6478;border-radius:10px 10px 38px;background-color:#272a3c;background-image:linear-gradient(112deg,rgb(255 255 255 / 3%) 0 1px,transparent 1px 9px),linear-gradient(#303348,#272a3c 42%,#242638);box-shadow:inset 0 0 0 3px #171827,inset 0 -8px #22243a,0 0 0 1px #c69d54}.case-label,.hardware-notes{width:100%;max-width:none;flex:none}.screen-bezel{width:calc(var(--game-width) + 8px);min-width:0;max-width:100%;align-self:center;flex:none}.screen-bezel canvas{max-width:100%}.touch-controls{display:grid}}@media(max-width:359px){.game-stage{width:100%;border-inline:0;border-radius:0 0 28px;padding-inline:8px}.case-label,.hardware-notes{padding-inline:2px}.touch-controls{gap:6px;padding-inline:4px}}@media(orientation:landscape)and (max-height:560px){html.touch-landscape .game-stage{width:100%;max-width:none;min-height:100dvh;height:100dvh;display:grid;grid-template:auto minmax(0,1fr) auto / minmax(100px,1fr) auto minmax(100px,1fr);align-items:center;column-gap:4px;padding:max(7px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border-radius:0}html.touch-landscape .case-label{grid-area:1 / 2;align-self:end}html.touch-landscape .screen-bezel{grid-area:2 / 2;align-self:center}html.touch-landscape .hardware-notes{grid-area:3 / 2;align-self:start}html.touch-landscape .touch-controls{display:contents}html.touch-landscape .touch-model,html.touch-landscape .touch-speaker{display:none}html.touch-landscape .d-pad{--pad-cell: clamp(38px, 6.2vw, 52px);grid-area:2 / 1}html.touch-landscape .action-pad{--face-button: clamp(52px, 8vw, 68px);grid-area:2 / 3}}@media(prefers-reduced-motion:reduce){.status-light{box-shadow:none}}}
