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

:root{
  --bg: #04121f;
  --sky: #bfe8ff;
  --sky-dim: #4a90c8;
  --accent: #ffd166;
  --danger: #ff5c7a;
  --good: #6dffb0;
  --panel: rgba(10, 28, 46, 0.78);
  --border: rgba(143, 213, 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;
}

#skyfield{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background: linear-gradient(180deg, #04121f 0%, #123a5c 45%, #2f6f9e 100%);
}
#skyfield::before{
  /* drifting cloud puffs */
  content:"";
  position:absolute; inset:-10% -10% 40% -10%;
  background:
    radial-gradient(18% 12% at 20% 20%, rgba(255,255,255,0.35), transparent 70%),
    radial-gradient(14% 10% at 55% 12%, rgba(255,255,255,0.3), transparent 70%),
    radial-gradient(16% 11% at 82% 26%, rgba(255,255,255,0.28), transparent 70%),
    radial-gradient(12% 9% at 35% 34%, rgba(255,255,255,0.22), transparent 70%);
  filter: blur(4px);
  animation: cloudDrift 18s ease-in-out infinite alternate;
}
@keyframes cloudDrift{
  0%{ transform: translateX(0); opacity:.8; }
  100%{ transform: translateX(3%); opacity:1; }
}
#skyfield::after{
  /* rolling farmland horizon */
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:22%;
  background: linear-gradient(180deg, #9ed17f, #5c8f45 60%, #3d6b30);
  clip-path: polygon(
    0% 100%, 0% 62%, 10% 46%, 20% 60%, 32% 40%, 44% 58%, 55% 36%,
    66% 56%, 76% 42%, 87% 58%, 100% 44%, 100% 100%
  );
  opacity:.92;
}

.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(--sky);
  text-shadow: 0 0 10px var(--sky), 0 0 30px rgba(143,213,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(--sky);
  text-shadow: 0 0 12px var(--sky);
  letter-spacing:2px;
}

.howto-list{
  max-width:640px; 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(--sky); text-shadow:0 0 8px var(--sky); }
.hud-row{ margin:5px 0; color:#cfeeff; font-size:10px; }
.hud-row span{ color:#fff; }
#lives-display{ color:var(--danger); letter-spacing:2px; font-size:13px; }
.hud-center{ text-align:center; flex:1; }
.hud-band{ color:var(--accent); text-shadow:0 0 8px var(--accent); font-size:12px; letter-spacing:1px; }
.hud-powerup{
  margin-top:7px; font-size:10px; letter-spacing:1px; min-height:12px;
  color:var(--good); text-shadow:0 0 8px rgba(109,255,176,0.6);
}

#landing-gauge{ margin-top:10px; }
.gauge-label{ font-size:9px; color:var(--sky); letter-spacing:1px; margin-bottom:4px; }
.gauge-track{
  position:relative; width:220px; height:10px; margin:0 auto;
  background:rgba(0,0,0,0.35); border:1px solid var(--border); border-radius:6px;
}
.gauge-target{
  position:absolute; left:50%; top:-3px; transform:translateX(-50%);
  width:4px; height:16px; background:var(--good); box-shadow:0 0 8px var(--good);
}
.gauge-marker{
  position:absolute; top:-4px; transform:translateX(-50%);
  width:6px; height:18px; background:var(--danger); box-shadow:0 0 8px var(--danger);
  border-radius:2px;
}

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

#band-banner{
  position:fixed; top:44%; left:50%; transform:translate(-50%,-50%);
  z-index:5; font-family:'Press Start 2P', monospace;
  font-size:clamp(14px,3.4vw,24px); 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(--sky); color:#fff; box-shadow:0 0 14px rgba(143,213,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(4,18,31,0.78);
  font-family:'Press Start 2P', monospace;
  gap:6px;
}
#pause-overlay h2{ color:var(--sky); text-shadow:0 0 16px var(--sky); 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, #win-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, #win-final-stats .winner{ color:var(--good); font-size:16px; text-shadow:0 0 10px var(--good); }
#win-final-stats .landing-quality{
  color:var(--accent); font-family:'Press Start 2P', monospace; font-size:14px;
  text-shadow:0 0 10px var(--accent); margin-bottom:6px;
}

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