:root {
  --bg:#0a0a12; --neon-c:#5be9ff; --neon-m:#ff2fb0; --neon-g:#39ff88; --neon-y:#ffd23f;
}
* { box-sizing:border-box; }
body {
  margin:0; background:
    radial-gradient(circle at 20% 10%, rgba(255,47,176,.12), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(91,233,255,.12), transparent 40%),
    #06060d;
  color:#c9d6e2; font-family:'VT323', monospace; overflow-x:hidden;
}
.scanlines {
  position:fixed; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 1px, transparent 2px, transparent 3px);
  mix-blend-mode:multiply;
}
.screen { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.center-col { max-width:640px; width:100%; text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center; }

.title {
  font-family:'Press Start 2P', monospace; font-size:clamp(22px,6vw,46px);
  color:#fff; margin:0; letter-spacing:2px;
  text-shadow:0 0 8px var(--neon-m), 0 0 20px var(--neon-m), 0 0 40px var(--neon-m);
  animation:flick 3s infinite;
}
.subtitle {
  font-family:'Press Start 2P', monospace; font-size:clamp(12px,3vw,20px);
  color:var(--neon-c); margin:0; letter-spacing:3px;
  text-shadow:0 0 8px var(--neon-c), 0 0 18px var(--neon-c);
}
@keyframes flick { 0%,92%,100%{opacity:1} 93%{opacity:.6} 94%{opacity:1} 96%{opacity:.4} 97%{opacity:1} }
.glitch { animation:flick 4s infinite; }
.tagline { font-size:20px; color:#8fa9c9; max-width:520px; line-height:1.2; }
.menu-btns { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

.neon-btn {
  font-family:'Press Start 2P', monospace; background:transparent;
  border:2px solid var(--neon-c); color:var(--neon-c); padding:12px 20px;
  cursor:pointer; letter-spacing:1px; font-size:12px; transition:.15s;
  text-shadow:0 0 6px var(--neon-c); box-shadow:0 0 10px rgba(91,233,255,.3) inset, 0 0 8px rgba(91,233,255,.4);
}
.neon-btn:hover:not(.disabled) { background:var(--neon-c); color:#06060d; text-shadow:none; box-shadow:0 0 24px var(--neon-c); }
.neon-btn.big { padding:16px 28px; font-size:14px; }
.neon-btn.sm { padding:8px 12px; font-size:10px; }
.neon-btn.alt { border-color:var(--neon-m); color:var(--neon-m); text-shadow:0 0 6px var(--neon-m); box-shadow:0 0 8px rgba(255,47,176,.4); }
.neon-btn.alt:hover { background:var(--neon-m); color:#06060d; box-shadow:0 0 24px var(--neon-m); }
.neon-btn.disabled { opacity:.35; cursor:not-allowed; }

.info-card { border:1px solid rgba(91,233,255,.3); padding:14px; background:rgba(91,233,255,.04); text-align:left; max-width:520px; }
.info-title { font-family:'Press Start 2P'; font-size:11px; color:var(--neon-y); margin-bottom:8px; }
.info-card p { font-size:18px; line-height:1.15; margin:0; color:#a9c0d6; }
.hs { font-size:20px; color:var(--neon-y); }
.remix { color:#5be9ff; font-size:16px; text-decoration:none; border-bottom:1px dotted #5be9ff; }
.big-score { font-family:'Press Start 2P'; font-size:16px; color:var(--neon-y); text-shadow:0 0 10px var(--neon-y); }

/* Board */
.board { width:100%; max-width:420px; border:1px solid rgba(255,47,176,.4); padding:10px; background:rgba(255,47,176,.05); }
.board-title { font-family:'Press Start 2P'; font-size:10px; color:var(--neon-m); margin-bottom:8px; text-align:center; }
.board-row { display:flex; justify-content:space-between; font-size:18px; padding:3px 6px; border-bottom:1px dotted rgba(255,255,255,.08); }
.board-rank { color:var(--neon-y); width:40px; text-align:left; }
.board-name { flex:1; text-align:left; color:#c9d6e2; }
.board-score { color:var(--neon-g); }

/* ===== GAME ===== */
.game-root { max-width:820px; margin:0 auto; padding:10px 12px 40px; min-height:100vh; display:flex; flex-direction:column; gap:10px; }
.game-root.shaking { animation:shake .4s; }
@keyframes shake { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-6px,3px)} 40%{transform:translate(5px,-4px)} 60%{transform:translate(-4px,2px)} 80%{transform:translate(3px,-2px)} }

.hud { display:flex; flex-direction:column; gap:8px; border:1px solid rgba(91,233,255,.25); padding:10px; background:rgba(6,8,18,.7); }
.bar-track { height:14px; background:#111826; border:1px solid rgba(255,255,255,.15); overflow:hidden; }
.bar-track.big { height:22px; }
.bar-fill { height:100%; transition:width .35s ease; }
.hud-mini { display:flex; gap:8px; flex-wrap:wrap; }
.chip { flex:1; min-width:70px; border:1px solid rgba(255,255,255,.12); padding:4px 6px; display:flex; flex-direction:column; align-items:center; background:rgba(255,255,255,.03); }
.chip-lbl { font-family:'Press Start 2P'; font-size:7px; color:#6c86a3; }
.chip-val { font-size:22px; color:#fff; line-height:1; }
.combo-pulse { color:var(--neon-y); text-shadow:0 0 8px var(--neon-y); }

.buff-banner { text-align:center; font-size:18px; color:var(--neon-g); border:1px dashed var(--neon-g); padding:4px; animation:flick 2s infinite; }

.boss-panel { border:2px solid var(--neon-m); padding:10px; background:rgba(255,47,176,.06); box-shadow:0 0 18px rgba(255,47,176,.3) inset; }
.boss-name { font-family:'Press Start 2P'; font-size:12px; color:#ff5e3a; display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; text-shadow:0 0 8px #ff5e3a; }
.phase-tag { font-size:8px; padding:3px 6px; border:1px solid currentColor; }
.phase-1 { color:#5be9ff; } .phase-2 { color:#ffd23f; } .phase-3 { color:#ff3b6b; animation:flick 1s infinite; }
.boss-hp { text-align:center; font-size:20px; color:var(--neon-y); margin-top:4px; }

.enemy-row { display:flex; gap:8px; flex-wrap:wrap; }
.enemy-card { flex:1; min-width:120px; border:1px solid rgba(91,233,255,.3); padding:6px 8px; background:rgba(91,233,255,.04); transition:.3s; }
.enemy-card.dead { opacity:.25; filter:grayscale(1); text-decoration:line-through; }
.enemy-name { font-size:16px; color:#cfe3f5; display:flex; justify-content:space-between; align-items:center; }
.armor-tag { font-size:12px; }
.enemy-hp-track { height:6px; background:#111826; margin-top:4px; }
.enemy-hp-fill { height:100%; background:linear-gradient(90deg,#ff3b6b,#ffd23f); transition:width .3s; }

.log-wrap { position:relative; flex:1; }
.log { border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.5); padding:10px; height:230px; overflow-y:auto; font-size:19px; line-height:1.18; }
.log-line { margin-bottom:3px; }
.log-line.stage, .log-line.clear, .log-line.boss, .log-line.combo { font-family:'Press Start 2P'; font-size:11px; margin:6px 0; line-height:1.4; }
.floater { position:absolute; top:8px; font-family:'Press Start 2P'; font-size:14px; z-index:5; pointer-events:none; animation:floatUp .9s ease-out forwards; text-shadow:0 0 8px currentColor; }
@keyframes floatUp { 0%{opacity:1; transform:translateY(0)} 100%{opacity:0; transform:translateY(-40px)} }

.actions { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.act-btn { font-family:'VT323'; font-size:20px; padding:10px 4px; cursor:pointer; border:2px solid; background:rgba(0,0,0,.4); transition:.12s; }
.act-btn:hover:not(:disabled) { transform:translateY(-2px); }
.act-btn:disabled { opacity:.3; cursor:not-allowed; }
.act-btn.atk { border-color:#ff5e3a; color:#ff8b6a; box-shadow:0 0 8px rgba(255,94,58,.3) inset; }
.act-btn.atk:hover { background:rgba(255,94,58,.2); }
.act-btn.def { border-color:#5be9ff; color:#8fefff; box-shadow:0 0 8px rgba(91,233,255,.3) inset; }
.act-btn.def:hover { background:rgba(91,233,255,.2); }
.act-btn.item { border-color:#39ff88; color:#7dffb4; }
.act-btn.item:hover { background:rgba(57,255,136,.2); }
.act-btn.spec { border-color:#c77dff; color:#d9aaff; box-shadow:0 0 10px rgba(199,125,255,.4) inset; }
.act-btn.spec:hover { background:rgba(199,125,255,.2); }

.specials { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.spec-item { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 10px; border:1px solid #c77dff; background:rgba(199,125,255,.08); color:#e5d0ff; cursor:pointer; font-family:'VT323'; }
.spec-item:hover:not(.dim) { background:rgba(199,125,255,.22); }
.spec-item.dim { opacity:.4; cursor:not-allowed; }
.spec-name { font-size:17px; color:#fff; }
.spec-cost { font-size:15px; color:var(--neon-y); }
.spec-desc { font-size:14px; color:#a98fc9; }

.cmdline { display:flex; align-items:center; gap:8px; border:1px solid rgba(91,233,255,.3); padding:6px 10px; background:rgba(0,0,0,.5); }
.cmdline .prompt { color:var(--neon-g); font-size:22px; }
.cmdline input { flex:1; background:transparent; border:none; outline:none; color:#cfe3f5; font-family:'VT323'; font-size:20px; }
.cmdline input::placeholder { color:#4a5f75; }

.overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:40; padding:16px; }
.overlay-box { border:2px solid var(--neon-g); background:#0a0e18; padding:24px; text-align:center; max-width:520px; width:100%; box-shadow:0 0 30px rgba(57,255,136,.3); }
.overlay-box.shop { border-color:var(--neon-y); box-shadow:0 0 30px rgba(255,210,63,.3); max-height:88vh; overflow-y:auto; }
.overlay-title { font-family:'Press Start 2P'; font-size:16px; margin-bottom:12px; }
.overlay-box p { font-size:20px; color:#a9c0d6; margin:0 0 16px; }
.shop-quip { font-style:italic; color:#8fa9c9 !important; }
.shop-score { font-size:20px; color:var(--neon-y); margin-bottom:12px; }
.shop-item { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid rgba(255,255,255,.12); padding:8px 10px; margin-bottom:8px; text-align:left; }
.shop-item-name { font-size:18px; color:#fff; }
.shop-item-desc { font-size:15px; color:#7a90a6; }

.footer-remix { display:block; text-align:center; margin-top:6px; }

@media (max-width:520px) {
  .actions { grid-template-columns:repeat(2,1fr); }
  .log { height:190px; font-size:17px; }
  .chip-val { font-size:18px; }
}