@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000}
body{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 20%,#0a1a08 0%,#000 80%);
  font-family:'Press Start 2P',monospace;
}
#wrapper{
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:500px;gap:0;padding:2px 4px;
}
#hud{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;padding:5px 8px;
  font-size:clamp(5px,1.6vw,9px);
  color:#3f3;background:#050a03;
  border:2px solid #1a3a10;border-bottom:none;
  letter-spacing:1px;
}
.hb{display:flex;flex-direction:column;align-items:center;gap:2px}
.hl{color:#2a4a20;font-size:.75em}
.hv{color:#3f3;text-shadow:0 0 6px #0f0}
#canvas-wrap{
  position:relative;width:100%;
  border:2px solid #1a4a10;
  box-shadow:0 0 50px rgba(0,255,0,.15),inset 0 0 20px rgba(0,0,0,.5);
  background:#000;overflow:hidden;
}
canvas{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
#scanlines{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,rgba(0,0,0,.18) 3px,rgba(0,0,0,.18) 4px);
}
#crt{
  position:absolute;inset:0;pointer-events:none;z-index:6;
  background:radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(0,0,0,.4) 100%);
}
#overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:rgba(0,5,0,.9);gap:12px;padding:20px;text-align:center;z-index:10;
}
#overlay.hidden{display:none}
#ov-title{font-size:clamp(20px,6vw,40px);color:#0f0;letter-spacing:4px;
  text-shadow:0 0 20px #0f0,0 0 40px #0a0,0 0 60px #050;
  animation:gblink 2s ease-in-out infinite alternate}
@keyframes gblink{from{text-shadow:0 0 10px #0f0}to{text-shadow:0 0 40px #0f0,0 0 80px #0f0}}
#ov-sub{font-size:clamp(8px,2.5vw,14px);color:#ff0;text-shadow:0 0 10px #aa0}
#ov-info{font-size:clamp(5px,1.5vw,8px);color:#6a6;line-height:2.4;max-width:280px}
.btn{
  font-family:'Press Start 2P',monospace;font-size:clamp(7px,2.2vw,11px);
  color:#000;background:#0f0;border:none;padding:10px 22px;cursor:pointer;
  box-shadow:0 5px 0 #060,0 0 25px #0f04;transition:transform .08s,box-shadow .08s;
  letter-spacing:1px;margin-top:4px;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #060}
.btn:hover{background:#4f4}
#dpad{
  display:none;grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);gap:5px;
  width:162px;height:108px;margin-top:6px;
}
.dp{
  font-size:20px;background:rgba(0,200,0,.12);
  border:2px solid rgba(0,200,0,.3);color:#0d0;
  border-radius:6px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
  transition:background .1s;
}
.dp:active{background:rgba(0,200,0,.4)}
.dp-blank{background:transparent;border-color:transparent;pointer-events:none}
@media(pointer:coarse){#dpad{display:grid}}
@media(max-width:360px){#dpad{width:140px;height:94px}}

#msg-banner{
  position:absolute;left:0;right:0;top:40%;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:8;opacity:0;
  transition:opacity .2s;
}
#msg-banner.show{opacity:1}
#msg-text{
  font-size:clamp(10px,3vw,18px);color:#ff0;
  text-shadow:0 0 20px #ff0,0 0 40px #a80;
  background:rgba(0,0,0,.7);padding:8px 16px;
  border:2px solid #ff0;letter-spacing:2px;
}