/* Bounce — Level 1 : flat, geometric, high contrast. No external fonts or assets. */

:root {
  --ink: #dbe6f2;
  --dim: #7c8ba0;
  --line: #24384f;
  --panel: #101a28;
  --void: #06090f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--void);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  overflow: hidden;
}

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 512px;
}

#frame {
  position: relative;
  width: 512px;
  height: 512px;
  border: 1px solid var(--line);
  background: #0b1220;
}

#game {
  display: block;
  width: 512px;
  height: 512px;
  image-rendering: pixelated;
}

/* ---------- HUD: fixed bar below the 128x128 world viewport ---------- */
#hud {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 512px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-top: none;
  background: var(--panel);
  font-size: 13px;
  letter-spacing: 0.08em;
}

#lives { display: flex; gap: 5px; align-items: center; min-width: 96px; }

.life {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff2d2d;
  border: 1px solid #7d1010;
}

#hoops { color: var(--dim); }

#score {
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ---------- screens ---------- */
#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 15, 0.86);
  text-align: center;
}

#overlay.hidden { display: none; }

.screen { width: 100%; padding: 0 24px; }

.screen h1 {
  margin: 0 0 26px;
  font-size: 54px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.screen .name { color: #ff2d2d; text-shadow: 0 3px 0 #7d1010; }
.screen .done { color: #4ade80; font-size: 34px; letter-spacing: 0.14em; }
.screen .over { color: #ff2d2d; font-size: 34px; letter-spacing: 0.14em; }

.screen p { margin: 8px 0; font-size: 14px; }

.screen .press { color: var(--ink); }
.screen .hint { color: var(--dim); font-size: 12px; }
.screen .final {
  color: #ffcb3d;
  font-size: 20px;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

/* ---------- integer down-scales only, so the world stays crisp ---------- *
 * Must come last: they override the fixed 512px sizes above. */
@media (max-width: 560px), (max-height: 640px) {
  #stage { width: 384px; }
  #frame, #game { width: 384px; height: 384px; }
  #hud { width: 384px; }
  .screen h1 { font-size: 40px; }
}
@media (max-width: 420px), (max-height: 470px) {
  #stage { width: 256px; }
  #frame, #game { width: 256px; height: 256px; }
  #hud { width: 256px; height: 30px; font-size: 11px; gap: 8px; }
  #lives { min-width: 60px; }
  .life { width: 9px; height: 9px; }
  .screen { padding: 0 10px; }
  .screen h1 { font-size: 26px; margin-bottom: 16px; }
  .screen .done, .screen .over { font-size: 22px; }
  .screen .final { font-size: 16px; }
  .screen .press { font-size: 12px; }
  .screen .hint { font-size: 10px; }
}