@font-face{font-family:Sekuya;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sekuya/v1/fdN_9suEu39Dg3wU0yBerF8.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Sekuya;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sekuya/v1/fdN_9suEu39Dg3wU3SBe.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{place-items:center;min-height:100%;margin:0;padding:0;font-family:monospace;display:grid}#wrapper{--scale:2;justify-items:center;gap:1rem;padding-block:1rem;display:grid}#console{width:calc(300px * var(--scale));padding:calc(1.5rem * var(--scale)) calc(.25rem * var(--scale));border:calc(.5rem * var(--scale)) solid #9d9f9a;border-radius:calc(.75rem * var(--scale));border-bottom-right-radius:calc(3.25rem * var(--scale));background:#bcb9b6;grid-template-columns:repeat(12,1fr);display:grid}.screen{padding-block:calc(1.5rem * var(--scale));border-radius:calc(.75rem * var(--scale));border-bottom-right-radius:calc(2.75rem * var(--scale));background:#4e505c;grid-column:2/-2;place-items:center;display:grid}#brand-and-name{font-family:sans-serif;font-size:calc(2rem / 3 * var(--scale));color:#1a2677;padding-block:calc(.2rem * var(--scale));grid-column:2/-2;font-weight:700;& .brand{font-weight:900}& .name{text-transform:uppercase;letter-spacing:-.05em;font-size:1.8em;font-style:italic}& .tm{margin-left:-.5em;font-size:.75em}}#buttons{--border:calc(.1rem * var(--scale)) solid #000;margin-block:calc(1rem * var(--scale)) calc(3.25rem * var(--scale));grid-column:2/-2;justify-content:space-between;align-items:center;display:flex}#dpad{--size:calc(4rem / 3 * var(--scale));grid-template-columns:repeat(3, var(--size));grid-template-rows:repeat(3, var(--size));grid-template-areas:"a U b""L C R""c D d";display:grid}.dpad-button{--bg:#515352;background:var(--bg);aspect-ratio:1;border:var(--border);cursor:pointer;width:100%;&:hover{--bg:#6b6d6c}&.pressed{--bg:#4f7863}}#dpad-up{border-bottom:0;grid-area:U}#dpad-left{border-right:0;grid-area:L}#dpad-center{z-index:1;border:0;grid-area:C;&:hover{--bg:#515352}}#dpad-right{border-left:0;grid-area:R}#dpad-down{border-top:0;grid-area:D}.start-select{--bg:#97928c;width:calc(2rem * var(--scale));aspect-ratio:4;border:var(--border);background:var(--bg);cursor:pointer;border-radius:10ex;&:hover{--bg:#b4b0ab}&.pressed{--bg:#658e8e}}#a-b-buttons{--size:calc(1.75rem * var(--scale));grid-template-columns:repeat(2, var(--size));grid-template-rows:repeat(3, calc(var(--size) / 2));gap:0 calc(1rem / 3 * var(--scale));display:grid}.a-b-button{--bg:#8b4065;background:var(--bg);aspect-ratio:1;border:var(--border);border-radius:50%;width:100%;&:hover{--bg:#aa6e8a}&.pressed{--bg:#9b1551}}#a-button{grid-column:2/3}#b-button{grid-column:1/2}#game-wrapper{width:calc(162px * var(--scale));padding:calc(1px * var(--scale));background:#000;border-radius:12px;display:grid;position:relative;&>*{grid-area:1/1}}canvas{aspect-ratio:10/9;width:100%;height:100%;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated;font-smooth:never;-webkit-font-smoothing:none;display:block}#text{background-color:#0000;display:none}.pipeline-preview{text-align:center;margin-inline:.5rem;line-height:2rem;display:inline-block;& canvas{border:4px solid #888;border-radius:4px;line-height:1;display:block}& span{margin-bottom:.5rem;font-size:1.25rem;display:inline-block}}.debug-info{color:#fff;background:#0006;padding:.5em;font-family:monospace;font-size:.675rem;display:none;position:absolute;top:0;left:0;&.visible{display:block}}