:root {
  --bg: #0a0a0c;
  --grid-bg: #16161a;
  --grid-line: rgba(255, 255, 255, 0.06);
  --cell-bg: #1f1f25;
  --text: #e8e8e8;
  --muted: #888;
  --accent: #7ee8b3;
  --accent-2: #c39bff;
  --warn: #ff9b6e;
  --home-fg: #e8e8e8;
}

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

/* ponytail: height is min so the page can grow past viewport on short
   iPhone screens; overflow-x:hidden only (vertical must scroll). */
html, body {
  min-height: 100dvh;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang HK', sans-serif;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* ponytail: Home pill is now mounted by shared/nav.mjs inside the
   shared .top-bar-left cluster. The legacy .btn-home { position:fixed }
   rule was deleted — without it, block-sprint's Home sat at top:16
   left:16 (this rule) while the rest of the bar sat at top:env+12
   left:12 (shared), giving a visible offset between the pills.
   shared/nav.css provides the canonical pill shape (background, blur,
   border, color); per-game theming layers on top. */
.btn-home {
  /* empty placeholder for game-specific Home overrides — keep this
     selector so any future "make Home amber" rules have something to
     attach to without re-introducing the position override. */
}
.btn-home:active { transform: scale(0.96); }

/* ponytail: Sprint + Marathon buttons in the start overlay. They
   share a single row when there's room (centered, 16px gap) and
   wrap to a column on narrow phones (iPhone SE = 375px wide,
   "40-LINE SPRINT" alone is ~210px; 16px gap + "MARATHON" ~110px
   still fits on 375px). justify-content centers the pair so a
   one-button row (Marathon translated to "馬拉松" in zh-HK)
   doesn't drift off to the left. */
.start-modes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ponytail: hide Pause + Main Menu pills on the start / end-of-run
   pages — they're noise there (Pause makes no sense before a run,
   and "Main Menu" is already the mode picker). game.mjs toggles
   body.menu on startRun / returnToStartPage. */
body.menu .top-bar-right { display: none; }

/* ponytail: Pause + Main Menu pill bar (top-right), mirrors Home on
   the left. Same flex-gap pattern as the boxing commit so it never
   overlaps the Home pill regardless of label width / locale. */
.top-bar-right {
  position: fixed;
  top: max(env(safe-area-inset-top, 0px), 16px);
  right: max(env(safe-area-inset-right, 0px), 16px);
  z-index: 50;
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-pill {
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(22, 22, 26, 0.7);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: #aaa;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-pill:active { transform: scale(0.96); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; }
.btn-pause[aria-pressed="true"] {
  color: #f0d264;
  border-color: rgba(240, 210, 100, 0.5);
  background: rgba(240, 210, 100, 0.08);
}

/* ponytail: stage flows inside body flex-column; min-height:100dvh so
   it fills the screen when there's room, but grows past on short viewports.
   Buttons sit as a sibling under the canvas — no fixed positioning, no overlap. */
.stage {
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: max(env(safe-area-inset-top, 0px), 56px) 16px max(env(safe-area-inset-bottom, 0px), 24px);
}

#board {
  display: block;
  background: var(--grid-bg);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  touch-action: none;
}

/* ponytail: NEXT panel sits right of the board. Preview canvas is
   80px wide × 240px tall — fits 3 stacked 4×4 mini piece boxes.
   Wrapped in a flex row so the board + preview center nicely on iPhone. */
.play-area {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
}
.preview-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
}
#preview {
  display: block;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  touch-action: none;
}

/* ponytail: HUD pill used to share `top` with Home + Pause/Menu (all three
   at `max(safe-top, 16px)`), so on iPhone the centered score pill sat
   directly behind the Home pill — a fixed-bar overlap. Drop it just below
   the pill row: safe-top or 16px base + 48px clears the ~33px pill row
   with breathing room on either side of the Dynamic Island. */
.hud {
  position: fixed;
  top: calc(max(env(safe-area-inset-top, 0px), 16px) + 48px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 28px;
  padding: 10px 22px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 40;
}
.hud-row { display: flex; gap: 10px; align-items: baseline; }
.hud-label { color: var(--muted); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; }
.hud-value { color: var(--accent); font-weight: 600; min-width: 3.5ch; text-align: right; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 80;
  padding: 32px;
  text-align: center;
}
.overlay.hidden { display: none; }
/* ponytail: level-up overlay keeps the canvas visible behind it (no
   backdrop) so the player keeps playing while the flash runs. z-90
   sits above the play area but below the .ctrl-row. Text is set on
   the div itself via JS, so text-* styles apply directly. */
.overlay-levelup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  pointer-events: none;
  z-index: 90;
  font-family: inherit;
  font-size: clamp(48px, 12vw, 96px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0 24px var(--accent, #00f2fe), 0 0 64px rgba(0, 242, 254, 0.6);
}
.overlay-levelup.hidden { display: none; }
.overlay-levelup.flash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(0, 242, 254, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.overlay-levelup.flash {
  animation: levelUpFlash 800ms ease-out forwards;
}
@keyframes levelUpFlash {
  0%   { opacity: 0;   transform: scale(0.7); }
  20%  { opacity: 1;   transform: scale(1.0); }
  70%  { opacity: 1;   transform: scale(1.04); }
  100% { opacity: 0;   transform: scale(1.08); }
}
.overlay-title {
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 200;
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.overlay-sub {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.6;
  max-width: 320px;
}
.primary {
  padding: 14px 36px;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg);
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}
.primary:active { transform: scale(0.96); }

.secondary {
  padding: 12px 28px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: transparent;
  color: #aaa;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.secondary:active { transform: scale(0.96); background: rgba(255,255,255,0.06); color: #fff; }

/* ponytail: 4 buttons in a single horizontal row (1x4) below the canvas.
   Order: ◀ ▼ ⟳ ▶ — matches the user's request. */
.controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: calc(100vw - 32px);
  max-width: 360px;
}
.ctrl {
  height: 56px;
  font-size: 24px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.ctrl-soft {
  background: rgba(255,155,110,0.18);
  border-color: rgba(255,155,110,0.3);
  color: var(--warn);
}
.ctrl:active { transform: scale(0.94); background: rgba(255,255,255,0.16); }
.ctrl-soft:active { background: rgba(255,155,110,0.32); }

/* ponytail: paused = dim the playfield (controls are inert via JS). */
body.paused .controls { opacity: 0.4; pointer-events: none; }
body.paused #board { filter: brightness(0.5); }