*{margin:0;padding:0;box-sizing:border-box}:root{--gb-w: min(100vw, 58vh, 440px);--shell: #2aa79e;--shell-dark: #16746d;--shell-deep: #0d4743;--btn-face: #2d2d36;--btn-edge: #131318;--label: #c2c9d4}html,body{height:100%;background:#17171b;overflow:hidden;font-family:Courier New,monospace;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}body{display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#gameboy{position:relative;display:flex;flex-direction:column;width:var(--gb-w);height:min(100dvh,calc(var(--gb-w) * 1.66));container-type:size;background:var(--shell);border:4px solid var(--shell-dark);border-radius:12px 12px 40px;box-shadow:0 8px 0 var(--shell-deep);padding:2cqmin 3.5cqmin calc(3cqmin + env(safe-area-inset-bottom));touch-action:none}#bezel{background:#20242a;border:3px solid #101318;border-radius:8px 8px 24px;padding:1cqmin 2cqmin 2cqmin}#bezel-top{color:#8f97a3;font-size:max(8px,2.2cqmin);letter-spacing:1px;text-align:center;padding:.5cqmin 0 1cqmin}#bezel-top .tm{color:#ccd3dd;font-weight:700}.bezel-dot{display:inline-block;width:6px;height:6px;background:#e04040;vertical-align:middle;margin-right:2px}#screen-area{display:flex;align-items:center;justify-content:center;padding:2px 0 4px}canvas#screen{image-rendering:pixelated;image-rendering:crisp-edges;background:#e8e8d0}#controls{flex:1;display:flex;align-items:center;justify-content:space-between;padding:2cqmin 1cqmin 0;min-height:0}#dpad,#dpad *,#ab,.round-btn,#meta,.pill-btn{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#dpad{position:relative;width:28cqmin;height:28cqmin;flex:none}.dpad-shadow,.dpad-face{position:absolute;inset:0;clip-path:polygon(34% 0,66% 0,66% 34%,100% 34%,100% 66%,66% 66%,66% 100%,34% 100%,34% 66%,0 66%,0 34%,34% 34%)}.dpad-shadow{background:var(--btn-edge);transform:translateY(4px)}.dpad-face{background:var(--btn-face);transform-origin:50% 50%;transition:transform 70ms linear}.dpad-center{position:absolute;left:calc(50% - 2.5cqmin);top:calc(50% - 2.5cqmin);width:5cqmin;height:5cqmin;background:#1b1b22}#dpad.press-up .dpad-face{transform:perspective(300px) rotateX(10deg) translateY(1px)}#dpad.press-down .dpad-face{transform:perspective(300px) rotateX(-10deg) translateY(2px)}#dpad.press-left .dpad-face{transform:perspective(300px) rotateY(-10deg) translateY(1px)}#dpad.press-right .dpad-face{transform:perspective(300px) rotateY(10deg) translateY(1px)}#ab{display:flex;gap:4cqmin;align-items:center;transform:rotate(-14deg);flex:none}.round-btn{width:14cqmin;height:14cqmin;border:3px solid var(--btn-edge);border-radius:50%;background:var(--btn-face);color:var(--label);font-family:inherit;font-size:max(11px,3.6cqmin);font-weight:700;box-shadow:0 4px 0 var(--btn-edge);touch-action:none}#btn-b{margin-top:6cqmin}.round-btn.pressed{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-edge)}#meta{display:flex;justify-content:center;gap:7cqmin;padding:2cqmin 0 1cqmin}.pill-btn{width:16cqmin;height:4.6cqmin;min-height:13px;border:2px solid var(--btn-edge);border-radius:3cqmin;background:var(--btn-face);color:var(--label);font-family:inherit;font-size:max(7px,2cqmin);letter-spacing:1px;transform:rotate(-14deg);box-shadow:0 3px 0 var(--btn-edge);touch-action:none}.pill-btn.pressed{transform:rotate(-14deg) translateY(2px);box-shadow:0 1px 0 var(--btn-edge)}#speaker{position:absolute;right:5cqmin;bottom:4cqmin;display:grid;grid-template-columns:repeat(3,1.6cqmin);gap:1.4cqmin;transform:rotate(-14deg);pointer-events:none}#speaker span{width:1.6cqmin;height:6cqmin;border-radius:1cqmin;background:var(--shell-deep)}#kbd-hint{position:absolute;left:0;right:0;top:calc(100% + 16px);text-align:center;color:#55555e;font-size:10px;letter-spacing:1px}@media(hover:none),(pointer:coarse){#kbd-hint{display:none}}@media(hover:hover)and (pointer:fine){:root{--gb-w: min(92vw, 46vh, 400px)}}@media(hover:none)and (orientation:landscape),(pointer:coarse)and (orientation:landscape){#gameboy{display:grid;grid-template-columns:minmax(0,58%) 1fr;grid-template-rows:1fr auto;grid-template-areas:"bezel controls" "bezel meta";column-gap:12px;width:min(100vw,190dvh,780px);height:min(100dvh,440px);border-radius:12px 40px 12px 12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}#bezel{grid-area:bezel;display:flex;flex-direction:column;border-radius:8px 8px 8px 24px}#screen-area{flex:1}#controls{grid-area:controls;min-height:0;padding:6px 4px 0}#meta{grid-area:meta;padding:4px 0 10px}#speaker{display:none}}