body.play { overflow: auto; }

.stage {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  min-height: 100%;
}

.screen { position: relative; flex: 1; min-width: 0; }
#game { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--line); background: #000; image-rendering: pixelated; }

.hud { position: static; width: 340px; flex-shrink: 0; max-height: none; }
.score-line { margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.caption { font-size: 15px; min-height: 2.8em; }

.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin-bottom: 8px; font-size: 13px; }
.bar-row span:nth-child(2) { color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.fill { height: 100%; width: 0; background: var(--accent); transition: width 0.1s; }
.fill.in { background: #6ab7ff; }

.controls { margin-top: 12px; }
.button {
  flex: 1;
  text-align: center;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.06);
}

.over {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  background: rgba(5, 5, 10, 0.75);
  border-radius: 10px;
  font-size: 18px;
}
.over strong { font-size: 40px; color: var(--accent); }

@media (max-width: 900px) {
  .stage { flex-direction: column; }
  .hud { width: 100%; }
}
.eye-toggle { margin-top: 8px; font-size: 13px; color: var(--muted); }