/* Bounce — Level 1 : layout & presentation */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: #07080d;
  color: #e8ecf4;
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#wrap {
  display: flex;
  flex-direction: column;
  width: min(80vmin, 640px);
}

/* ---- world viewport (128x128 logical px, scaled up crisply) ---- */
#stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #0c0e17;
  border: 1px solid #262b3a;
  border-bottom: none;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---- overlays (title / game over / level complete) ---- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  background: rgba(7, 8, 13, 0.82);
}

.hidden { display: none; }

.title-name {
  font-size: clamp(30px, 9vmin, 60px);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #ff3b30;
  text-indent: 0.22em; /* balance the letter-spacing */
}

.title-sub {
  font-size: clamp(12px, 3vmin, 20px);
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  color: #9aa3b8;
}

.title-press {
  font-size: clamp(11px, 2.6vmin, 16px);
  color: #e8ecf4;
  margin-top: 10px;
}

.title-hint {
  font-size: clamp(10px, 2.2vmin, 14px);
  color: #6a7288;
}

.blink { animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

.over-text {
  font-size: clamp(24px, 7vmin, 48px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: #ff3b30;
}

.win-text {
  font-size: clamp(20px, 6vmin, 40px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: #46e07c;
}

.win-score {
  font-size: clamp(16px, 4.5vmin, 30px);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: #e8ecf4;
}

/* ---- HUD bar (fixed below the viewport) ---- */
#hud {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 12px;
  background: #12141d;
  border: 1px solid #262b3a;
  font-size: clamp(11px, 2.2vmin, 15px);
  user-select: none;
}

.hud-cell { display: flex; align-items: center; gap: 5px; }

#score {
  margin-left: auto;
  letter-spacing: 0.18em;
  color: #e8ecf4;
  font-variant-numeric: tabular-nums;
}

/* one small ball icon per remaining life */
.dot {
  width: 0.72em;
  height: 0.72em;
  border-radius: 50%;
  background: #ff3b30;
  display: inline-block;
}

/* small hoop ring icon */
.ring {
  width: 0.66em;
  height: 0.66em;
  border-radius: 50%;
  border: 2px solid #3fd8e8;
  display: inline-block;
}