:root{--ink:#111411;--lcd:#9baa78;--lcd-dark:#24301d;--page:#292a28;--instructions:#b9bbb7}
*{box-sizing:border-box}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
html,body{margin:0;min-height:100%;background:var(--page);color:var(--ink);font-family:"Arial Narrow",Arial,sans-serif;touch-action:manipulation}
body{display:grid;place-items:center}
.page{width:100%;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,22px);padding:clamp(10px,2vw,30px)}
.console{position:relative;width:min(1536px,96vw);aspect-ratio:3/2;user-select:none;filter:drop-shadow(0 18px 28px rgba(0,0,0,.38))}
.console::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:url("assets/console-overlay-transparent-screen-no-buttons.png") center/100% 100% no-repeat}
.screen-wrap{position:absolute;z-index:1;left:25.45%;top:25.2%;width:49.35%;height:54.1%;overflow:hidden;background:var(--lcd);border-radius:2%}
canvas{display:block;width:100%;height:100%}
.achievement-card{position:absolute;z-index:4;left:30%;top:5%;width:40%;height:auto;pointer-events:none}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(155,170,120,.75);color:var(--lcd-dark);text-align:center;letter-spacing:.1em}
.overlay strong{font-size:clamp(16px,3vw,36px)}
.overlay span{font-size:clamp(10px,1.5vw,16px)}
.overlay.hidden{display:none}
button{border:0;padding:0;cursor:pointer;color:transparent;font:inherit;background-color:transparent;-webkit-tap-highlight-color:transparent}
.round{position:absolute;z-index:3;width:12.5%;aspect-ratio:1;background:url("assets/red-button-states-3x192.png") 0 0/300% 100% no-repeat}
.round:hover{background-position:50% 0}
.round:active,.round.active{background-position:100% 0}
.left-upper{left:6.8%;top:49.6%}
.left-lower{left:6.8%;top:68.2%}
.right-upper{right:6.8%;top:49.6%}
.right-lower{right:6.8%;top:68.2%}
.cream-button{position:absolute;z-index:3;right:12.55%;width:8.34%;aspect-ratio:16/9;background:url("assets/cream-button-states-3x128x72.png") 0 0/300% 100% no-repeat}
.cream-button:hover{background-position:50% 0}
.cream-button:active{background-position:100% 0}
.cream-button:disabled{cursor:wait;filter:grayscale(.5);opacity:.7}
.start-button{top:21.45%}
.pause-button{top:28.65%}
.sound-button{top:36%}
.instructions{margin:0;color:var(--instructions);text-align:center;font-size:clamp(11px,1.25vw,17px);font-weight:700;letter-spacing:.055em}
@media(max-width:700px){.page{padding:8px 4px;gap:8px}.console{width:100vw}.instructions{max-width:94vw;line-height:1.35}}
@media(orientation:landscape) and (max-height:720px){.page{padding:5px;gap:5px}.console{width:min(138vh,96vw)}.instructions{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}