:root { color-scheme: dark; --black:#080808; --paper:#f6f1df; --yellow:#ffd400; --red:#ff244f; --cyan:#00eaff; --pixel:"Press Start 2P",monospace; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; color:var(--paper); font-family:var(--pixel); background-color:#111; background-image:linear-gradient(45deg,#171717 25%,transparent 25%),linear-gradient(-45deg,#171717 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#171717 75%),linear-gradient(-45deg,transparent 75%,#171717 75%); background-size:24px 24px; background-position:0 0,0 12px,12px -12px,-12px 0; image-rendering:pixelated; }
main { width:min(94vw,960px); min-height:100svh; margin:auto; padding:clamp(18px,5vh,52px) 0 36px; display:grid; align-content:center; gap:34px; }
.game-shell { position:relative; aspect-ratio:2/1; border:6px solid var(--paper); outline:6px solid var(--black); background:transparent; box-shadow:12px 12px 0 var(--yellow); overflow:hidden; touch-action:manipulation; cursor:pointer; }
canvas { width:100%; height:100%; display:block; background:transparent; image-rendering:pixelated; touch-action:none; }
.links { display:grid; gap:12px; }
.links a { min-height:72px; padding:0 22px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; color:var(--paper); text-decoration:none; border:4px solid var(--paper); background:var(--black); box-shadow:7px 7px 0 var(--yellow); transition:transform 80ms steps(2,end),color 80ms steps(2,end),background 80ms steps(2,end); }
.links span { justify-self:start; color:var(--yellow); font-size:9px; }
.links strong { justify-self:center; font-size:clamp(11px,2.1vw,17px); }
.links i { justify-self:end; font-style:normal; font-size:18px; }
.links a:hover,.links a:focus-visible { color:var(--black); background:var(--yellow); transform:translate(5px,5px); box-shadow:2px 2px 0 var(--paper); outline:none; }
.links a:hover span,.links a:focus-visible span { color:var(--black); }
@media (max-width:600px) { main{width:calc(100vw - 24px);padding-block:18px 26px;gap:25px}.game-shell{border-width:4px;outline-width:4px;box-shadow:7px 7px 0 var(--yellow)}.links a{min-height:62px;border-width:3px;box-shadow:5px 5px 0 var(--yellow);padding-inline:14px;grid-template-columns:1fr auto 1fr}.links span{font-size:7px}.links strong{font-size:clamp(9px,3.3vw,13px)} }
@media (max-width:380px) { main{width:calc(100vw - 16px)}.links a{min-height:56px} }
@media (min-width:1200px) { main{width:min(82vw,1100px)} }
@media (prefers-reduced-motion:reduce) { *{animation-duration:.01ms!important} }