@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&display=swap";:root{color:#25231f;font-synthesis:none;background:#e9e4da;font-family:DM Mono,monospace}*{box-sizing:border-box}body{background:#e9e4da;min-width:320px;min-height:100vh;margin:0}button{font:inherit;touch-action:none}.player{place-items:center;min-height:100vh;padding:28px 16px;display:grid}.console{aspect-ratio:.72;background:#d4d0c7;border-radius:16px 16px 60px;width:min(430px,100%);max-height:calc(100vh - 56px);padding:25px 30px;position:relative;box-shadow:inset -10px -10px 16px #85817b55,inset 8px 8px 10px #fff8,10px 14px #b8b2a8}.screen-bezel{aspect-ratio:1.23;background:#46444b;border-radius:10px 10px 34px;width:100%;padding:19px 38px;position:relative;box-shadow:inset 0 0 0 3px #5e5b63}canvas{width:100%;height:100%;image-rendering:pixelated;background:#9cab78;display:block}.screen-status{color:#293023;letter-spacing:.08em;background:#9cab78;place-items:center;font-size:8px;display:grid;position:absolute;inset:19px 38px}.screen-status[hidden]{display:none}.power-led{background:#c54037;border-radius:50%;width:7px;height:7px;position:absolute;top:42%;left:15px;box-shadow:0 0 6px #f05448}.console-label{color:#54536b;margin:11px 0 16px 8px;font:italic 600 10px sans-serif}.console-label span{letter-spacing:-.07em;font-size:16px}.controls{justify-content:space-between;align-items:center;padding:0 6px;display:flex}.dpad{filter:drop-shadow(2px 4px 1px #777);grid-template:repeat(3,1fr)/repeat(3,1fr);width:90px;height:90px;display:grid}.dpad button,.dpad i{cursor:pointer;background:#333;border:0}.dpad button:first-child{grid-area:1/2}.dpad button:nth-child(2){grid-area:2/1}.dpad i{grid-area:2/2}.dpad button:nth-child(4){grid-area:2/3}.dpad button:nth-child(5){grid-area:3/2}.menu-buttons{gap:8px;margin-top:48px;display:flex;transform:rotate(-18deg)}.menu-buttons button{color:#57516d;cursor:pointer;background:#777;border:0;border-radius:8px;width:34px;height:8px;padding:17px 0 0;font-size:5px}.action-buttons{gap:12px;display:flex;transform:rotate(-18deg)}.action-buttons button{color:#6d2339;cursor:pointer;background:#9e3150;border:0;border-radius:50%;width:42px;height:42px;font:800 13px sans-serif;box-shadow:2px 4px 1px #7d7b76}.dpad button.pressed,.action-buttons button.pressed,.menu-buttons button.pressed{filter:brightness(.75);transform:translateY(2px)}.sound-button{color:#625e57;letter-spacing:.08em;cursor:pointer;background:0 0;border:1px solid #99948b;padding:7px 9px;font-size:7px;position:absolute;bottom:26px;left:34px}.speaker{color:#89857e;letter-spacing:1px;width:92px;font-size:28px;position:absolute;bottom:20px;right:28px;overflow:hidden;transform:rotate(-25deg)}@media (max-width:480px){.player{padding:12px}.console{max-height:calc(100vh - 24px);padding:19px 20px}.screen-bezel{padding:15px 28px}.screen-status{inset:15px 28px}.controls{margin:0 -10px;transform:scale(.9)}.speaker{display:none}}