/* Spaceship by SWC styles */
:root{
  --bg1: #0b0f1a;
  --bg2: #101936;
  --bg3: #0f1330;
  --accent1:#5cf1ff;
  --accent2:#9d7bff;
  --accent3:#ff66c4;
  --good:#78ffa1;
  --warn:#ffd26a;
  --danger:#ff6b6b;
  --panel: rgba(16, 25, 54, 0.55);
  --glass: rgba(16, 25, 54, 0.35);
  --glow: 0 0 25px rgba(156,124,255,0.35), 0 0 60px rgba(92,241,255,0.25);
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  color:#e9f3ff;
  background: radial-gradient(80rem 40rem at 10% 10%, #0c1537 0%, transparent 70%),
              radial-gradient(80rem 60rem at 90% 10%, #1c0f30 0%, transparent 70%),
              radial-gradient(80rem 60rem at 50% 100%, #0b1f2a 0%, transparent 70%),
              linear-gradient(180deg, var(--bg3), var(--bg1));
  overflow:hidden;
}

#app{position:relative; display:grid; place-items:center}

#game{
  width: min(100vw, 100vh * 9 / 16);
  height: min(100vh, 100vw * 16 / 9);
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 20px;
  box-shadow: var(--glow);
  background: transparent;
}

/* HUD */
.hud{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  pointer-events:none;
}

.hud .badge{
  background: var(--glass);
  backdrop-filter: blur(8px);
  border:1px solid rgba(156,124,255,0.25);
  border-radius: 16px;
  padding:8px 12px;
  font-weight:600;
  box-shadow: var(--glow);
  pointer-events:auto;
}
.hud-left, .hud-right{display:flex; gap:8px; align-items:center}

/* Screens */
.screen{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background: radial-gradient(60rem 40rem at 50% 10%, rgba(92,241,255,0.05), transparent 70%);
}

.screen.hidden{display:none}

.screen h1, .screen h2{
  margin:0 0 8px 0;
  text-align:center;
  text-shadow: 0 0 16px rgba(92,241,255,0.5), 0 0 40px rgba(157,123,255,0.3);
}
.screen h1{font-size: clamp(28px, 5vw, 56px); font-weight:800; background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3)); -webkit-background-clip:text; background-clip:text; color:transparent}
.screen h2{font-size: clamp(22px, 3.5vw, 40px); font-weight:800;}

.subtitle{opacity:0.9; margin:0 0 18px 0; font-weight:400}
.controls{display:flex; gap:12px; margin:16px 0}
.hint{opacity:0.75; max-width:720px; text-align:center; padding:0 16px}

.btn{
  border:none;
  padding:12px 20px;
  border-radius:16px;
  font-weight:700;
  letter-spacing:0.3px;
  cursor:pointer;
  transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:active{transform:translateY(1px)}
.btn.glow{
  background: linear-gradient(135deg, rgba(92,241,255,0.25), rgba(157,123,255,0.25));
  border:1px solid rgba(92,241,255,0.45);
  box-shadow: var(--glow);
  color:#e9f3ff;
}
.btn.ghost{
  background: var(--panel);
  border:1px solid rgba(157,123,255,0.25);
  color:#e9f3ff;
}

/* Touch controls */
.touchpad{
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
}
.pad{
  width:64px; height:64px;
  border-radius:16px;
  border:1px solid rgba(92,241,255,0.45);
  background: rgba(16,25,54,0.55);
  color:#e9f3ff;
  font-size:24px;
  font-weight:800;
  box-shadow: var(--glow);
}
@media(min-width:900px){
  .touchpad{display:none}
}

/* Lists */
.list{
  background: var(--panel);
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(157,123,255,0.25);
  box-shadow: var(--glow);
}
.list li{margin:6px 0}