:root{color-scheme:dark;--ink:#ededed;--muted:#999;--line:#292929}
*{box-sizing:border-box}
body{margin:0;background:#000;color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;min-height:100vh}
main{width:min(100%,500px);margin:auto;padding:40px 32px 48px}
header{display:flex;align-items:center;gap:18px;margin-bottom:30px}
h1{margin:0;font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.7px}
.logo{display:block;flex:none;line-height:0;text-decoration:none}.logo img{display:block;width:48px;height:48px}.logo:hover{opacity:.8}
.instructions-section{margin-top:36px;width:calc(100% - 46px)}
.game-area{display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:14px;align-items:start}
.sound-toggle{width:32px;height:32px;padding:0;margin-top:12px;border:0;background:none;color:#aaa}
.sound-toggle svg{display:block;width:32px;height:32px}
.sound-toggle:hover{color:#fff}
.sound-toggle[aria-pressed=true]{color:#ededed}
.sound-toggle[aria-pressed=true] .mute-slash{display:none}
.sound-toggle[aria-pressed=false] .sound-waves{display:none}
.description,.note{font-size:12px;line-height:1.85;color:var(--muted)}
.description{margin:0 0 20px}.note{margin:20px 0 0}
.instructions{margin:0;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px;line-height:1.7}
.instructions div{display:grid;grid-template-columns:125px 1fr;gap:12px;margin:10px 0}
dt{color:var(--ink)}dd{margin:0;color:var(--muted)}
.rom-download{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.download-link{display:inline-flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid #777;box-shadow:3px 3px 0 #292929;color:var(--ink);text-decoration:none;font-size:12px;line-height:1.5}
.download-link svg{width:16px;height:16px;flex:none}
.download-link:hover{border-color:var(--ink);background:#151515}
.download-link:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.download-detail{margin:14px 0 0;color:var(--muted);font-size:10px;line-height:1.8}
.console{position:relative;padding:24px 23px 70px;border-radius:22px 22px 76px 22px;background:linear-gradient(125deg,#dcd5e7,#c8c1d5);border:1px solid #b5aebf;box-shadow:inset 2px 2px 0 #efeaf3,inset -3px -4px 0 #b8afc7,16px 24px 40px #0006,0 3px 6px #0004;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#303a36;color-scheme:light}
.screen-bezel{background:#323c3b;border-radius:12px 12px 35px 12px;padding:15px 19px 14px;box-shadow:inset 0 2px 4px #131b1c80;border:1px solid #293231}
.bezel-top{display:flex;align-items:center;gap:8px;font-size:7px;letter-spacing:1.7px;color:#a4b2ad;margin-bottom:11px}.power-light{width:5px;height:5px;background:#a8d287;border-radius:50%;box-shadow:0 0 4px #a8d28780}
canvas{display:block;width:100%;height:auto;aspect-ratio:160/144;image-rendering:pixelated;background:#e6ecd4;box-shadow:0 0 0 3px #1a2928;outline:none;touch-action:none}
canvas:focus-visible{box-shadow:0 0 0 3px #93bf9e}
.bezel-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:13px;color:#c9d4c8;font-size:8px;letter-spacing:2px}.bezel-bottom b{color:#a0c79e}.bezel-bottom span:last-child{font-size:6px;color:#8e9d99}
.brand{font-size:22px;font-weight:750;letter-spacing:-1px;margin:18px 0;color:#57516e}.brand span{display:block;font-size:7px;font-weight:600;letter-spacing:1.4px;margin-top:3px;color:#77718a}
.main-controls{display:flex;justify-content:space-between;align-items:center;gap:18px}
.dpad{position:relative;display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,36px);width:108px;height:108px;filter:drop-shadow(1px 3px 2px #443b5244)}
.dpad-body{position:absolute;inset:0;background:#34373b;clip-path:polygon(33.3% 0,66.7% 0,66.7% 33.3%,100% 33.3%,100% 66.7%,66.7% 66.7%,66.7% 100%,33.3% 100%,33.3% 66.7%,0 66.7%,0 33.3%,33.3% 33.3%)}
button{font:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.dpad button{position:relative;background:#34373b;color:#737a7b;border:0;font-size:11px;border-radius:3px;box-shadow:inset 0 2px 0 #525458,inset 0 -2px 0 #24272d}
.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}.dpad-center{grid-area:2/2;z-index:1;margin:10px;border-radius:50%;box-shadow:inset 1px 2px 2px #1d2029,0 1px 0 #51525a}
.action-buttons{display:flex;gap:14px;transform:rotate(-23deg);padding:9px 8px;background:#bbb2cc;border-radius:50px;box-shadow:inset 1px 1px 3px #afa4c7}
.action{position:relative}.action button{width:46px;height:46px;border-radius:50%;border:1px solid #804260;background:linear-gradient(145deg,#ad5b7c,#974567);box-shadow:inset 1px 2px 0 #ca7996,0 3px 0 #743a56,0 4px 4px #6c4a6044;color:#eac2d1;font-size:17px;font-weight:700;transform:rotate(23deg)}
.action>span{position:absolute;left:50%;bottom:-24px;color:#665978;font-size:12px;font-weight:750;transform:rotate(23deg)}
.dpad button.held{background:#272d31;color:#a4b5ad;box-shadow:inset 1px 2px 3px #171c23}.action button.held{background:#833956;box-shadow:inset 1px 2px 3px #61273f,0 1px 0 #743a56;translate:0 2px}
.lower-controls{display:flex;justify-content:center;gap:20px;margin-top:28px}.lower-controls button{border:0;background:none;font-size:7px;font-weight:750;color:#716580;letter-spacing:1px;display:flex;align-items:center;flex-direction:column;gap:7px;transform:rotate(-15deg)}
.lower-controls button span{display:block;width:34px;height:10px;border-radius:8px;background:#8a8294;box-shadow:inset 1px 1px 1px #aea5bc,0 2px 0 #6e657b}.lower-controls button.held span,.lower-controls button[aria-pressed=true] span{background:#5c776c;box-shadow:inset 1px 1px 2px #3d5149}
.speaker{position:absolute;bottom:22px;right:27px;display:flex;gap:7px;transform:rotate(-28deg)}.speaker i{height:31px;width:4px;border-radius:4px;background:#aba2bd;box-shadow:inset 1px 1px 1px #867b9c,1px 0 0 #e0d9ea}
button:focus-visible{outline:2px solid #477967;outline-offset:4px}.logo:focus-visible{outline:2px solid #ededed;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}
@media(max-width:480px){main{width:min(100%,436px);padding:26px 16px 36px}header{gap:14px;margin-bottom:24px}h1{font-size:18px}.logo img{width:40px;height:40px}.console{padding:20px 16px 67px}.instructions div{grid-template-columns:115px 1fr;gap:8px}.dpad{grid-template-columns:repeat(3,32px);grid-template-rows:repeat(3,32px);width:96px;height:96px}.action-buttons{gap:10px}.action button{width:42px;height:42px}.main-controls{gap:12px}}
@media(max-width:360px){.dpad{grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px);width:90px;height:90px}.action-buttons{gap:8px}.action button{width:40px;height:40px}.main-controls{gap:8px}}