@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0c0018;overflow:hidden;
  font-family:'Press Start 2P',monospace;-webkit-user-select:none;user-select:none;touch-action:none}
#wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 32%,#0a0a3a,#02030c 72%)}
#screen{position:relative;display:flex;line-height:0}
/* subtle CRT scanlines + vignette */
#screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,0.14) 0px,rgba(0,0,0,0.14) 1px,
    rgba(0,0,0,0) 2px,rgba(0,0,0,0) 3px);
  border-radius:6px;
  box-shadow:inset 0 0 42px rgba(0,0,0,0.45);mix-blend-mode:multiply}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;
  background:#000;border-radius:6px;
  box-shadow:0 0 0 3px #06b6ff,0 0 0 5px #ff2fd0,0 0 46px #06b6ffaa,0 0 90px #ff2fd066;
  max-width:100vw;max-height:86vh}
#controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;
  pointer-events:none;padding:10px 16px;box-sizing:border-box;z-index:4}
.grp{display:flex;gap:12px;pointer-events:auto}
.btn{width:60px;height:60px;border-radius:14px;background:#08102ecc;
  border:3px solid #06b6ffaa;color:#3affe0;font-size:22px;display:flex;align-items:center;
  justify-content:center;font-weight:bold;touch-action:none;
  box-shadow:0 3px 0 #00000088,0 0 12px #06b6ff55;font-family:sans-serif}
.btn:active{background:#ff2fd0;color:#fff;transform:translateY(2px);box-shadow:0 1px 0 #00000088}
#ftr{position:fixed;top:6px;right:10px;z-index:5}
#ftr a{color:#ffffff66;font-size:8px;text-decoration:none;font-family:'Press Start 2P',monospace}
#ftr a:hover{color:#ffe600}
@media(hover:hover) and (pointer:fine){#controls{display:none}}