/* Curveball - the palette is the original's: black stage, green tunnel, cyan readouts. */
:root {
  --green: #00ff66;
  --green-dim: #008033;
  --cyan: #00ffff;
  --ring: #77fffc;
  --blue: #4b6bff;
  --red: #ff3b30;
  --ink: #e8ffe8;
  --panel: rgba(2, 14, 6, 0.94);
  --font: "Bank Gothic", "Eurostile", "Haettenschweiler", "Arial Narrow", "DIN Alternate",
          "Avenir Next Condensed", "Roboto Condensed", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #000; color: var(--ink);
  font-family: var(--font); letter-spacing: 0.06em;
  overflow: hidden;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#app { display: flex; flex-direction: column; height: 100%; }
#stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 46%, #04150a 0%, #000 72%);
}
#gl { display: block; touch-action: none; cursor: none; }
#stage.showcursor #gl { cursor: crosshair; }

/* ---------- HUD: positioned as percentages of the 350x250 stage ---------- */
#hud { position: absolute; left: 0; top: 0; pointer-events: none; }
#hud > div { position: absolute; }
#scoreBox { left: 5%; top: 6.5%; }
#levelBox { right: 5%; top: 6.5%; }
#bonusBox { right: 10%; bottom: 12%; }
#scoreBox, #levelBox, #bonusBox {
  color: var(--cyan); font-size: clamp(11px, 2.1vh, 20px);
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.45);
}
.lbl { opacity: 0.7; }
.pips { display: flex; gap: 0.5vh; }
#enemyLives { left: 19%; top: 17%; }
#playerLives { right: 19%; top: 17%; flex-direction: row-reverse; }
.pip {
  width: clamp(5px, 1.1vh, 11px); height: clamp(5px, 1.1vh, 11px); border-radius: 50%;
}
.enemy .pip { background: radial-gradient(circle at 32% 30%, #fff 0%, var(--red) 72%); }
.player .pip { background: radial-gradient(circle at 32% 30%, #fff 0%, var(--blue) 72%); }
.pip.spent { background: #1c1c1c; box-shadow: inset 0 0 0 1px #333; }
#banner {
  left: 0; right: 0; bottom: 15%; text-align: center;
  font-size: clamp(13px, 2.6vh, 26px); color: #fff;
  text-shadow: 0 0 12px rgba(0, 255, 102, 0.8);
}
#levelCard {
  left: 0; right: 0; top: 40%; text-align: center;
  font-size: clamp(26px, 8vh, 74px); color: #fff; letter-spacing: 0.12em;
  text-shadow: 0 0 24px rgba(0, 255, 102, 0.55);
}
#servePrompt {
  left: 0; right: 0; top: 62%; text-align: center;
  font-size: clamp(11px, 2vh, 19px); color: var(--green);
  opacity: 0.85; animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) {
  #servePrompt { animation: none; opacity: 0.85; }
}

/* ---------- overlay panels ---------- */
#overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(2px);
}
#overlay[hidden] { display: none !important; }
.panel {
  width: min(92%, 560px); max-height: 88%;
  background: var(--panel); border: 1px solid rgba(0, 255, 102, 0.35);
  box-shadow: 0 0 44px rgba(0, 255, 102, 0.12);
  padding: clamp(14px, 3vh, 30px); text-align: center;
  display: flex; flex-direction: column; gap: 0.9em;
}
.panel[hidden] { display: none !important; }
.wordmark {
  font-size: clamp(30px, 8vh, 62px); color: #fff; letter-spacing: 0.1em; line-height: 1;
  text-shadow: 0 0 26px rgba(0, 255, 102, 0.6);
}
.tagline { margin: 0; color: var(--green); font-size: clamp(11px, 1.9vh, 17px); }
.panel h2 { margin: 0; font-size: clamp(18px, 3.4vh, 30px); font-weight: 600; color: #fff; }
.panel h2.big { font-size: clamp(26px, 6vh, 48px); }
.panel h3 { margin: 0.6em 0 0.2em; font-size: clamp(13px, 2.2vh, 19px); color: var(--green); }
.panel p, .panel li { font-size: clamp(11px, 1.85vh, 16px); line-height: 1.55; margin: 0.35em 0; }
.panel ul { text-align: left; margin: 0.2em 0; padding-left: 1.2em; }
.scroll { overflow-y: auto; text-align: left; padding-right: 6px; }
.note {
  border-left: 2px solid var(--green-dim); padding-left: 0.8em;
  color: #9fdcae; font-style: italic;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; }
.hint { color: #8fc79f; font-size: clamp(10px, 1.7vh, 15px); }
.btnrow { display: flex; gap: 0.7em; justify-content: center; flex-wrap: wrap; }
button {
  font-family: inherit; letter-spacing: inherit; cursor: pointer;
  background: #0b1f10; color: var(--ink);
  border: 1px solid rgba(0, 255, 102, 0.4); border-radius: 2px;
  padding: 0.55em 1.3em; font-size: clamp(11px, 1.9vh, 16px);
  transition: background 0.12s, border-color 0.12s;
}
button:hover, button:focus-visible { background: #123a1e; border-color: var(--green); outline: none; }
button.primary { background: var(--green); color: #04170a; border-color: var(--green); font-weight: 700; }
button.primary:hover, button.primary:focus-visible { background: #6dffab; }
button.quiet { opacity: 0.6; }
button.back { opacity: 0.8; }
.btnrow[hidden] { display: none !important; }
input[type="text"] {
  font-family: inherit; letter-spacing: inherit; font-size: clamp(12px, 2vh, 17px);
  background: #04120a; color: var(--ink); border: 1px solid rgba(0, 255, 102, 0.4);
  padding: 0.45em 0.7em; border-radius: 2px; width: 10em; text-align: center;
}
#nameEntry { display: flex; flex-direction: column; align-items: center; gap: 0.5em; }
#nameEntry[hidden] { display: none !important; }
table { width: 100%; border-collapse: collapse; font-size: clamp(11px, 1.85vh, 16px); }
th { color: var(--green); font-weight: 500; text-align: left; padding: 0.25em 0.4em; opacity: 0.8; }
td { padding: 0.25em 0.4em; border-top: 1px solid rgba(0, 255, 102, 0.14); }
td:nth-child(2), th:nth-child(2) { text-align: center; width: 4em; }
td:nth-child(3), th:nth-child(3) { text-align: right; width: 7em; color: var(--cyan); }
tbody:empty::after { content: ""; }
.empty td { color: #5d7d66; font-style: italic; }

/* ---------- corner controls and footer ---------- */
#settings { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px; }
#settings button { padding: 0.3em 0.7em; font-size: 11px; opacity: 0.55; }
#settings button:hover { opacity: 1; }
#settings button[aria-pressed="false"] { opacity: 0.28; text-decoration: line-through; }
#glError {
  position: absolute; inset: auto 0 45% 0; text-align: center; color: var(--red);
  font-size: 15px; padding: 0 1em;
}
#glError[hidden] { display: none !important; }
footer {
  flex: 0 0 auto; padding: 6px 10px; font-size: 11px; line-height: 1.5;
  color: #6f8f78; background: #000; display: flex; gap: 1em;
  justify-content: space-between; align-items: center; flex-wrap: wrap;
}
footer a { color: #8fc79f; }
@media (max-height: 460px) { footer { display: none; } }