:root{
  --bg:#07080d; --panel:#10131b; --edge:#2b2f3a; --edge2:#3a3f4d;
  --yellow:#ffd23e; --red:#ff4b3a; --steel:#8b8f98; --green:#39d353;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  font-family:'Press Start 2P',monospace; color:#cfd3dd; background:
    radial-gradient(1000px 520px at 85% -10%, rgba(255,75,58,.09), transparent 60%),
    radial-gradient(900px 520px at 8% 112%, rgba(255,210,62,.08), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 24px),
    var(--bg);
  min-height:100%; display:flex; flex-direction:column; align-items:center;
  padding:22px 14px 30px; overflow-x:hidden; position:relative;
}
body::before{content:""; position:fixed; inset:-20%; pointer-events:none; z-index:0;
  background:radial-gradient(500px 300px at 20% 30%, rgba(255,210,62,.05), transparent 70%),
             radial-gradient(600px 340px at 80% 70%, rgba(255,75,58,.05), transparent 70%);
  animation:drift 26s ease-in-out infinite alternate;}
@keyframes drift{from{transform:translate(-2%,-1%)}to{transform:translate(2%,2%)}}
.pix{position:fixed; width:6px; height:6px; z-index:0; opacity:.22; pointer-events:none;
  animation:floatUp linear infinite;}
@keyframes floatUp{from{transform:translateY(105vh) rotate(0)}to{transform:translateY(-8vh) rotate(180deg)}}
.pix:nth-child(1){left:6%;  background:var(--yellow); animation-duration:19s}
.pix:nth-child(2){left:16%; background:var(--red); animation-duration:27s; animation-delay:-8s}
.pix:nth-child(3){left:38%; background:#7f868f; animation-duration:23s; animation-delay:-14s}
.pix:nth-child(4){left:64%; background:var(--yellow); animation-duration:31s; animation-delay:-4s}
.pix:nth-child(5){left:82%; background:var(--red); animation-duration:21s; animation-delay:-11s}
.pix:nth-child(6){left:93%; background:#7f868f; animation-duration:25s; animation-delay:-17s}

header{display:flex; align-items:center; gap:18px; z-index:1; margin-bottom:8px}
header canvas{image-rendering:pixelated; filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.ttl{text-align:center}
h1.logo{font-size:clamp(22px,4.6vw,42px); color:var(--yellow); letter-spacing:3px;
  text-shadow:3px 3px 0 #b3261a, 6px 6px 0 rgba(0,0,0,.55);
  animation:pulse 3.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{text-shadow:3px 3px 0 #b3261a,6px 6px 0 rgba(0,0,0,.55)}
  50%{text-shadow:3px 3px 0 #b3261a,6px 6px 0 rgba(0,0,0,.55),0 0 22px rgba(255,210,62,.45)}}
.sub{font-family:'VT323',monospace; font-size:clamp(14px,2vw,20px); color:var(--steel);
  letter-spacing:4px; margin-top:8px}
.coin{font-size:10px; color:var(--red); margin:14px 0 18px; z-index:1;
  animation:blink 1.1s steps(2) infinite;}
@keyframes blink{50%{opacity:0}}

.cabinet{display:flex; gap:18px; align-items:stretch; z-index:1; flex-wrap:wrap; justify-content:center}
.screen-col{display:flex; flex-direction:column; gap:12px}
.scorebar{display:flex; justify-content:space-between; align-items:center; gap:14px;
  background:var(--panel); border:3px solid var(--edge); padding:9px 12px; font-size:9px; color:var(--steel)}
.scorebar b{font-family:'VT323',monospace; font-size:22px; color:var(--yellow); letter-spacing:2px; margin-left:6px}
.pwr{display:flex; align-items:center; gap:6px}
.pwr i{width:8px; height:8px; background:var(--red); border-radius:50%;
  box-shadow:0 0 8px var(--red); animation:blink 2s steps(2) infinite}
.screen-wrap{position:relative; background:#000; border:14px solid #23262e; border-radius:16px;
  box-shadow:0 0 0 4px #12141a, 0 24px 60px rgba(0,0,0,.65), inset 0 0 70px rgba(0,0,0,.9);
  overflow:hidden; line-height:0;}
#game{width:min(74vmin,540px); image-rendering:pixelated; display:block}
.crt{position:absolute; inset:0; pointer-events:none; border-radius:4px;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.24) 0 1px, transparent 1px 3px);
  animation:flick 5s steps(3) infinite;}
@keyframes flick{0%,100%{opacity:.55}50%{opacity:.42}}
.screen-wrap::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:4px;
  box-shadow:inset 0 0 90px rgba(0,0,0,.75);}
.sheen{position:absolute; left:0; right:0; height:30%; top:-40%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.05), transparent);
  animation:sweep 7s linear infinite;}
@keyframes sweep{to{top:130%}}
.btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.btn{font-family:'Press Start 2P',monospace; font-size:10px; color:var(--yellow);
  background:#171a23; border:3px solid var(--edge2); border-bottom-width:6px;
  padding:11px 16px; cursor:pointer; transition:transform .06s, border-color .15s, box-shadow .15s;}
.btn:hover{border-color:var(--yellow); box-shadow:0 0 14px rgba(255,210,62,.25); transform:translateY(-1px)}
.btn:active{transform:translateY(3px); border-bottom-width:3px}
.btn:focus-visible{outline:2px dashed var(--yellow); outline-offset:3px}
.gg-note{min-height:18px; margin-top:6px; font-family:'VT323',monospace; font-size:16px;
  color:var(--yellow); letter-spacing:2px; text-align:center; opacity:.9}

.abilities{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px}
.ab{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--panel); border:3px solid var(--edge); padding:10px 8px; gap:4px;
  cursor:pointer; user-select:none; transition:border-color .15s;
}
.ab:hover{border-color:var(--edge2)}
.ab.ready{border-color:var(--yellow); box-shadow:0 0 10px rgba(255,210,62,.2)}
.ab.on{border-color:var(--green); box-shadow:0 0 12px rgba(57,211,83,.35)}
.ab .icon{font-size:20px; line-height:1; filter:drop-shadow(0 0 4px rgba(0,0,0,.6))}
.ab .name{font-size:8px; color:var(--steel); letter-spacing:1px}
.ab .kbd{font-family:'VT323',monospace; font-size:14px; color:var(--yellow); background:#1a1d27;
  border:2px solid var(--edge2); border-bottom-width:4px; border-radius:4px; padding:0 5px; margin-top:2px}
.ab .cd-ring{position:absolute; inset:4px; pointer-events:none}
.ab .cd-ring svg{width:100%; height:100%; overflow:visible}
.ab .cd-ring circle{fill:none; stroke:var(--red); stroke-width:3;
  transform:rotate(-90deg); transform-origin:center; opacity:.85}
.ab.ready .cd-ring circle,.ab.on .cd-ring circle{opacity:0}

.side{width:186px; display:flex; flex-direction:column; gap:12px}
.side section{background:var(--panel); border:3px solid var(--edge); padding:12px}
.side h2{font-size:8px; color:var(--steel); letter-spacing:2px; margin-bottom:10px;
  border-bottom:2px solid var(--edge); padding-bottom:7px}
#eicons{display:grid; grid-template-columns:repeat(5,1fr); gap:5px}
#eicons canvas{width:100%; image-rendering:pixelated; transition:opacity .3s, transform .3s}
#eicons canvas.off{opacity:.1; transform:scale(.5)}
.lives-row,.stage-row{display:flex; align-items:center; gap:10px}
.lives-row b,.stage-row b{font-family:'VT323',monospace; font-size:26px; color:var(--yellow)}
#plife{image-rendering:pixelated}
.flag{width:16px; height:12px; background:var(--red); clip-path:polygon(0 0,100% 50%,0 100%);
  position:relative;}
.flag::before{content:""; position:absolute; left:-3px; top:-2px; width:2px; height:20px; background:var(--steel)}
.legend p{font-size:8px; line-height:2.1; color:#aab0bd}
kbd{font-family:'VT323',monospace; font-size:15px; color:var(--yellow); background:#1a1d27;
  border:2px solid var(--edge2); border-bottom-width:4px; border-radius:5px; padding:1px 6px}

#touch{display:none; width:min(540px,94vw); justify-content:space-between; align-items:center;
  margin-top:20px; z-index:1;}
.dpad{display:grid; grid-template:repeat(3,56px)/repeat(3,56px); gap:6px}
.dpad button{font-size:16px}
.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .down{grid-area:3/2}.dpad .right{grid-area:2/3}
#touch button{font-family:'Press Start 2P',monospace; color:#fff; background:#171a23;
  border:3px solid var(--edge2); border-bottom-width:6px; touch-action:none; user-select:none; cursor:pointer}
#touch button:active{transform:translateY(3px); border-bottom-width:3px; background:#22273a}
#tFire{width:96px; height:96px; border-radius:50%; font-size:12px; color:var(--red);
  border-color:#7a2a22; box-shadow:0 0 18px rgba(255,75,58,.2)}
@media (pointer:coarse){#touch{display:flex}}
footer{margin-top:26px; font-family:'VT323',monospace; font-size:17px; color:#565b66;
  letter-spacing:2px; z-index:1; text-align:center}
@media (max-width:820px){
  .cabinet{flex-direction:column; align-items:center}
  .side{width:min(74vmin,540px); flex-direction:row; flex-wrap:wrap}
  .side section{flex:1 1 150px}
}