@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@500;700;900&display=swap');

:root{
  --bg: #05040e;
  --p1: #38f2ff;
  --p2: #ff2fd0;
  --accent: #ffe14d;
  --danger: #ff3b5c;
  --good: #3bffa0;
  --panel: rgba(15, 12, 40, 0.75);
  --border: rgba(120, 200, 255, 0.35);
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0; width:100%; height:100%;
  background: var(--bg);
  color:#eafcff;
  font-family: 'Orbitron', sans-serif;
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
}

#app{
  position:relative;
  width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
}

#starfield{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 80% 40%, #fff, transparent),
    radial-gradient(2px 2px at 30% 70%, #8ff, transparent),
    radial-gradient(1px 1px at 60% 85%, #fff, transparent),
    radial-gradient(1px 1px at 90% 15%, #fff, transparent),
    radial-gradient(2px 2px at 45% 45%, #f8f, transparent),
    radial-gradient(1px 1px at 15% 90%, #fff, transparent),
    radial-gradient(1px 1px at 70% 65%, #fff, transparent);
  background-repeat: repeat;
  background-size: 400px 400px;
  animation: drift 60s linear infinite;
  opacity:0.7;
}
@keyframes drift{ from{ background-position: 0 0; } to{ background-position: -400px 800px; } }

.screen{
  position:relative; z-index:1;
  width:min(900px, 96vw);
  max-height: 94vh;
  display:flex; flex-direction:column; align-items:center;
  padding: 24px 20px;
  gap:14px;
}
.hidden{ display:none !important; }

.title{
  font-family:'Press Start 2P', monospace;
  font-size: clamp(28px, 6vw, 56px);
  color:var(--p1);
  text-shadow: 0 0 10px var(--p1), 0 0 30px var(--p1);
  letter-spacing:4px;
  margin: 10px 0 0;
  text-align:center;
}
.title span{
  display:block;
  color:var(--p2);
  text-shadow: 0 0 10px var(--p2), 0 0 30px var(--p2);
  font-size:0.7em;
  margin-top:6px;
}
.subtitle{
  color:#8fd6ff; opacity:0.8; letter-spacing:3px; margin:0 0 10px;
  font-size:13px; text-transform:uppercase;
}

.menu-block{ width:100%; max-width:520px; text-align:center; }
.menu-block h2{
  font-size:13px; letter-spacing:3px; color:#9fb4d6; margin:0 0 8px;
  font-family:'Press Start 2P', monospace; font-size:11px;
}
.btn-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.opt-btn{
  font-family:'Orbitron', sans-serif; font-weight:700;
  background: var(--panel);
  border: 2px solid var(--border);
  color:#cfe9ff;
  padding: 10px 16px;
  border-radius:8px;
  cursor:pointer;
  letter-spacing:1px;
  font-size:13px;
  transition: all 0.15s ease;
}
.opt-btn:hover{ border-color:var(--p1); color:#fff; }
.opt-btn.selected{
  background: linear-gradient(180deg, rgba(56,242,255,0.25), rgba(56,242,255,0.05));
  border-color: var(--p1);
  color:#fff;
  box-shadow: 0 0 14px rgba(56,242,255,0.5);
}

.primary-btn{
  font-family:'Press Start 2P', monospace;
  background: linear-gradient(180deg, #ff4fd8, #a41fc9);
  border:none;
  color:#fff;
  padding: 16px 34px;
  font-size:16px;
  border-radius:10px;
  cursor:pointer;
  box-shadow: 0 0 20px rgba(255,79,216,0.6), inset 0 -3px 0 rgba(0,0,0,0.25);
  letter-spacing:2px;
  margin-top:8px;
  transition: transform 0.1s ease;
}
.primary-btn:hover{ transform: scale(1.05); }
.primary-btn:active{ transform: scale(0.97); }

.ghost-btn{
  background:transparent;
  border:2px solid var(--border);
  color:#9fd6ff;
  padding:10px 20px;
  border-radius:8px;
  cursor:pointer;
  font-family:'Orbitron', sans-serif;
  letter-spacing:2px;
  font-size:12px;
}
.ghost-btn:hover{ border-color:#fff; color:#fff; }

.arcade-link{
  text-decoration:none;
  margin-top:6px;
}

.highscore{
  margin-top:10px; color:var(--accent); font-size:13px; letter-spacing:2px;
  text-shadow:0 0 8px rgba(255,225,77,0.6);
}

.section-title{
  font-family:'Press Start 2P', monospace;
  font-size: clamp(20px, 4vw, 32px);
  color:var(--p2);
  text-shadow: 0 0 12px var(--p2);
  letter-spacing:2px;
}
.glitch{ animation: glitch 0.25s infinite alternate; }
@keyframes glitch{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(1px,-1px); text-shadow:2px 0 var(--p1), -2px 0 var(--danger); }
  100%{ transform:translate(-1px,1px); }
}

.howto-grid{ display:flex; gap:40px; margin:6px 0; flex-wrap:wrap; justify-content:center; }
.howto-col{
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:14px 22px; min-width:180px; text-align:center;
}
.howto-col h3{ margin:0 0 10px; color:var(--accent); font-size:14px; letter-spacing:2px; }
.howto-col p{ margin:6px 0; font-size:13px; }
kbd{
  background:#1a1f3a; border:1px solid #3d4a7a; border-radius:4px;
  padding:2px 7px; margin:0 2px; font-size:12px; color:#fff;
}
.howto-list{
  max-width:640px; background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:16px 22px; max-height:38vh; overflow-y:auto;
}
.howto-list p{ font-size:13px; line-height:1.7; margin:6px 0; }
.back-btn{ margin-top:4px; }

/* ---- GAME SCREEN ---- */
#game-screen{ width:min(920px, 98vw); padding:10px; gap:8px; }

#hud{
  width:100%; max-width:900px;
  display:flex; justify-content:space-between; align-items:flex-start;
  font-family:'Press Start 2P', monospace;
  font-size:11px;
  padding:0 6px;
}
.hud-group{ min-width:150px; }
.hud-group-right{ text-align:right; }
.hud-label{ letter-spacing:2px; margin-bottom:6px; }
.p1-color{ color:var(--p1); text-shadow:0 0 8px var(--p1); }
.p2-color{ color:var(--p2); text-shadow:0 0 8px var(--p2); }
.hud-row{ margin:4px 0; color:#cfe9ff; font-size:10px; }
.hud-row span{ color:#fff; }
.hud-center{ text-align:center; }
.hud-wave{ color:var(--accent); text-shadow:0 0 8px var(--accent); font-size:13px; }
.hud-multiplier{ color:var(--good); margin-top:6px; font-size:11px; min-height:14px; }
#lives-p1, #lives-p2{ color:var(--p1); }

#game-canvas{
  background: radial-gradient(ellipse at 50% 0%, #10123a 0%, #05040e 70%);
  border: 2px solid var(--border);
  border-radius:10px;
  box-shadow: 0 0 30px rgba(56,242,255,0.15), inset 0 0 60px rgba(0,0,0,0.6);
  width:100%;
  height:auto;
  max-width:840px;
  display:block;
}

#wave-banner{
  position:fixed; top:44%; left:50%; transform:translate(-50%,-50%);
  z-index:5; font-family:'Press Start 2P', monospace;
  font-size:clamp(18px,4vw,34px); color:var(--accent);
  text-shadow:0 0 20px var(--accent);
  text-align:center; pointer-events:none;
  animation: bannerPop 1.6s ease forwards;
}
@keyframes bannerPop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.6); }
  15%{ opacity:1; transform:translate(-50%,-50%) scale(1.05); }
  25%{ transform:translate(-50%,-50%) scale(1); }
  80%{ opacity:1; }
  100%{ opacity:0; }
}

#pause-btn{
  position:fixed; top:16px; right:16px; z-index:7;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel);
  border:2px solid var(--border);
  border-radius:10px;
  color:#eafcff;
  font-size:14px;
  cursor:pointer;
  transition: all 0.15s ease;
}
#pause-btn:hover{ border-color:var(--p1); color:#fff; box-shadow:0 0 14px rgba(56,242,255,0.4); }

#pause-overlay{
  position:fixed; inset:0; z-index:8;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(5,4,14,0.75);
  font-family:'Press Start 2P', monospace;
  gap:6px;
}
#pause-overlay h2{ color:var(--p1); text-shadow:0 0 16px var(--p1); font-size:28px; }
#pause-overlay p{ color:#9fd6ff; font-size:12px; }
.pause-actions{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin-top:18px;
}

#final-stats{
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:18px 30px; text-align:center; font-size:14px; line-height:2;
  min-width:280px;
}
#final-stats .winner{ color:var(--good); font-size:16px; text-shadow:0 0 10px var(--good); }

@media (max-width: 640px){
  #hud{ font-size:9px; }
  .hud-group{ min-width:110px; }
}