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

:root{
  --bg: #030d18;
  --ice: #8fe3ff;
  --ice-dim: #4a90a8;
  --accent: #ffd166;
  --danger: #ff5c7a;
  --good: #6dffb0;
  --panel: rgba(10, 28, 46, 0.78);
  --border: rgba(143, 227, 255, 0.35);
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0; width:100%; height:100%;
  background: var(--bg);
  color:#eaf7ff;
  font-family: 'Baloo 2', 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;
}

#snowfield{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background: linear-gradient(180deg, #04101a 0%, #0c2f45 55%, #1c4f66 100%);
}
#snowfield::before{
  /* aurora curtains */
  content:"";
  position:absolute; inset:-15% -10% 45% -10%;
  background:
    radial-gradient(55% 40% at 22% 15%, rgba(109,255,176,0.32), transparent 70%),
    radial-gradient(50% 35% at 68% 8%, rgba(79,209,255,0.28), transparent 70%),
    radial-gradient(45% 30% at 46% 26%, rgba(196,120,255,0.2), transparent 70%);
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: auroraShift 16s ease-in-out infinite alternate;
}
@keyframes auroraShift{
  0%{ transform: translateY(0) scaleX(1); opacity:.75; }
  100%{ transform: translateY(3%) scaleX(1.1); opacity:1; }
}
#snowfield::after{
  /* icy mountain horizon */
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:24%;
  background: linear-gradient(180deg, #cfe7f2, #86aec2 55%, #4c6d80);
  clip-path: polygon(
    0% 100%, 0% 58%, 7% 42%, 15% 62%, 23% 30%, 32% 60%, 41% 20%,
    51% 54%, 59% 34%, 67% 60%, 77% 18%, 86% 52%, 93% 32%, 100% 56%, 100% 100%
  );
  opacity:.92;
}
#snowfield .snowfall{
  position:absolute; inset:0;
  background-repeat: repeat;
  background-size: 340px 340px;
  background-image:
    radial-gradient(2px 2px at 12% 18%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 78% 32%, #fff, transparent),
    radial-gradient(2px 2px at 34% 62%, #eaf6ff, transparent),
    radial-gradient(1.6px 1.6px at 58% 82%, #fff, transparent),
    radial-gradient(2px 2px at 90% 12%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 46% 44%, #eaf6ff, transparent),
    radial-gradient(2px 2px at 18% 88%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 68% 68%, #fff, transparent);
  opacity:.55;
  animation: snowDrift 9s linear infinite;
}
@keyframes snowDrift{ from{ background-position: 0 0; } to{ background-position: 34px 340px; } }

.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(26px, 6vw, 52px);
  color:var(--ice);
  text-shadow: 0 0 10px var(--ice), 0 0 30px rgba(143,227,255,0.6);
  letter-spacing:3px;
  margin: 10px 0 0;
  text-align:center;
}
.title span{
  display:block;
  color:var(--accent);
  text-shadow: 0 0 10px var(--accent), 0 0 26px rgba(255,209,102,0.6);
  font-size:0.62em;
  margin-top:8px;
}
.subtitle{
  color:#a9d8ee; opacity:0.85; letter-spacing:2px; margin:0 0 6px;
  font-size:14px;
}

.primary-btn{
  font-family:'Press Start 2P', monospace;
  background: linear-gradient(180deg, #4fd1ff, #1a7fb0);
  border:none;
  color:#01202e;
  padding: 16px 34px;
  font-size:15px;
  border-radius:10px;
  cursor:pointer;
  box-shadow: 0 0 20px rgba(79,209,255,0.5), inset 0 -3px 0 rgba(0,0,0,0.2);
  letter-spacing:1px;
  margin-top:10px;
  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:#a9d8ee;
  padding:10px 20px;
  border-radius:8px;
  cursor:pointer;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  letter-spacing:1px;
  font-size:13px;
}
.ghost-btn:hover{ border-color:#fff; color:#fff; }

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

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

.section-title{
  font-family:'Press Start 2P', monospace;
  font-size: clamp(18px, 4vw, 28px);
  color:var(--ice);
  text-shadow: 0 0 12px var(--ice);
  letter-spacing:2px;
}

.howto-list{
  max-width:620px; background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:16px 22px; max-height:48vh; overflow-y:auto;
}
.howto-list p{ font-size:14px; line-height:1.7; margin:8px 0; }
kbd{
  background:#0c2438; border:1px solid #2f6b86; border-radius:4px;
  padding:2px 7px; margin:0 2px; font-size:12px; color:#fff;
}
.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:170px; }
.hud-label{ letter-spacing:1px; margin-bottom:6px; color:var(--ice); text-shadow:0 0 8px var(--ice); }
.hud-row{ margin:5px 0; color:#cfeeff; font-size:10px; }
.hud-row span{ color:#fff; }
#lives-display{ color:var(--danger); letter-spacing:2px; }
.hud-center{ text-align:center; flex:1; }
.hud-wave{ color:var(--accent); text-shadow:0 0 8px var(--accent); font-size:13px; }

.charge-wrap{
  margin-top:8px; width:180px; margin-left:auto; margin-right:auto;
}
.charge-bar{
  width:100%; height:12px; border-radius:6px;
  background:rgba(0,0,0,0.4);
  border:1px solid var(--border);
  overflow:hidden;
}
.charge-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, #4fd1ff, #8fe3ff);
  transition: background 0.15s ease;
}
.charge-fill.charged{
  background:linear-gradient(90deg, #ffd166, #ff9a3d);
  box-shadow:0 0 10px rgba(255,209,102,0.7);
}

.hud-weapon{
  margin-top:7px; font-size:10px; letter-spacing:1px;
  color:var(--accent); text-shadow:0 0 8px rgba(255,209,102,0.6);
  min-height:12px;
}

#game-canvas{
  background: #0d2438;
  border: 2px solid var(--border);
  border-radius:10px;
  box-shadow: 0 0 30px rgba(143,227,255,0.15), inset 0 0 60px rgba(0,0,0,0.5);
  width:100%;
  height:auto;
  max-width:860px;
  display:block;
  cursor: crosshair;
  touch-action: none;
}

#wave-banner{
  position:fixed; top:44%; left:50%; transform:translate(-50%,-50%);
  z-index:5; font-family:'Press Start 2P', monospace;
  font-size:clamp(16px,4vw,30px); 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:#eaf7ff;
  font-size:14px;
  cursor:pointer;
  transition: all 0.15s ease;
}
#pause-btn:hover{ border-color:var(--ice); color:#fff; box-shadow:0 0 14px rgba(143,227,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(3,13,24,0.78);
  font-family:'Press Start 2P', monospace;
  gap:6px;
}
#pause-overlay h2{ color:var(--ice); text-shadow:0 0 16px var(--ice); font-size:26px; }
#pause-overlay p{ color:#a9d8ee; font-size:12px; font-family:'Baloo 2', sans-serif; }
.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:120px; }
}