/* ============================================================
   Survivor — game UI
   ponytail: dark base, single accent gradient, no per-component
   palettes. Modal/overlay colors borrowed from boxing.
   ============================================================ */

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

html, body {
  /* ponytail: 100dvh for iPhone Safari (the "dynamic viewport
     height" excludes the URL bar + home indicator). Fallback to
     100vh for browsers without dvh support. */
  min-height: 100dvh;
  min-height: 100vh;
  background: #0a0a0c;
  color: #e8e8e8;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang HK', sans-serif;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overflow: hidden;
}

.screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.hidden { display: none !important; }

/* ── Start Page ───────────────────────────────────────────── */
.start-card {
  width: 100%; max-width: 520px;
  padding: 40px 28px;
  text-align: center;
}
.game-tag {
  font-size: 11px; letter-spacing: 0.4em;
  color: #888; text-transform: uppercase;
  margin-bottom: 14px;
}
.game-title {
  font-weight: 100;
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 18px;
  color: #fff;
}
.game-title span {
  background: linear-gradient(135deg, #ff6b6b 0%, #ffd166 50%, #7ee8b3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.game-desc {
  font-size: 0.95rem;
  color: #aaa;
  margin-bottom: 28px;
  line-height: 1.5;
}
.stats-row {
  display: flex; justify-content: center; gap: 32px;
  margin-bottom: 32px;
}
.stat-label {
  font-size: 10px; letter-spacing: 0.2em;
  color: #666; text-transform: uppercase;
  margin-bottom: 6px;
}
.stat-value {
  font-size: 1.6rem;
  color: #ffd166;
  font-weight: 200;
}
.btn-primary {
  display: block;
  margin: 0 auto 32px;
  padding: 14px 56px;
  font-size: 1.1rem; letter-spacing: 0.2em;
  color: #0a0a0c; background: #ffd166;
  border: none; border-radius: 99px;
  cursor: pointer;
  font-weight: 700;
}
.btn-primary:hover { background: #fff3a0; }

/* ponytail: secondary link below the primary START — quiet, no
   background, just a tinted arrow. Mirrors boxing's "Back to Ringside" */
.btn-secondary-link {
  display: inline-block;
  margin-bottom: 28px;
  padding: 8px 16px;
  color: #888;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  border-radius: 99px;
  transition: color 0.15s;
}
.btn-secondary-link:hover { color: #fff; }
.controls {
  font-size: 0.85rem;
  color: #777;
  line-height: 1.8;
}
.ctrl-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.key {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  color: #ccc;
}

/* ── Game Canvas ──────────────────────────────────────────── */
/* ponytail: keep the canvas intrinsic 1280×720 (game world is fixed)
   and let CSS scale it down to fit the viewport. aspect-ratio +
   min(...) mirrors boxing's pattern so layout is stable across
   desktop / iPhone portrait / iPad landscape. The canvas DOM
   attribute (1280×720) stays the source of truth for the world;
   CSS just renders it smaller. */
#game {
  display: block;
  flex-shrink: 0; /* ponytail: don't let parent flex container shrink
     the canvas back into viewport — portrait needs width > 100vw. */
  /* ponytail: fill the viewport edge-to-edge (was 92vw/92dvh — too small
     on iPhone/iPad). Aspect-ratio still 16:9 so the player circle stays
     round. max-height caps to dvh so landscape doesn't run off-screen. */
  width: min(1280px, 100vw, 100dvh * 1.78); /* 1.78 = 1280/720 aspect */
  aspect-ratio: 1280 / 720;
  max-height: 100dvh;
  max-width: 100vw;
  margin: 0 auto;
  image-rendering: pixelated; /* ponytail: keeps canvas crisp on hidpi */
  background: #000;
  touch-action: none; /* ponytail: prevent pinch-zoom + browser scroll on canvas */
}

/* ponytail: portrait iPhone/iPad — fill BOTH viewport dimensions. The
   previous rule `min(98vw, 96dvh*1.78)` always bound to viewport width,
   so the canvas collapsed to 385×216 on iPhone 15 portrait — tiny.

   Drop the `aspect-ratio` lock on portrait so the canvas can be tall
   and narrow (the world is rendered stretched but player/enemy sizes
   become 4× larger and read clearly on a 393×852 phone). On iPad
   (820×1180) this gives a generous play area. Body has `overflow:hidden`
   so top-bar (fixed) overlays the canvas without layout push. */
@media (max-aspect-ratio: 1/1) {
  #game {
    width: 100vw;
    height: 96dvh;
    aspect-ratio: auto; /* ponytail: override the landscape 16:9 lock */
    max-width: 100vw;
    max-height: 96dvh;
    margin: 0;
  }
}

/* ponytail: very small landscape phones (iPhone SE 568h × 320w)
   — width caps tighter so HUD doesn't crowd. */
@media (max-aspect-ratio: 5/4) and (max-height: 500px) {
  #game {
    width: auto;
    height: 92dvh;
  }
}

/* ── Overlay / Modals ─────────────────────────────────────── */
.overlay, .modal-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.75);
  z-index: 50;
}
.overlay-card, .modal-card {
  background: #16161a;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: 36px 32px;
  min-width: 280px;
  text-align: center;
}
.overlay-card h2, .modal-title {
  font-weight: 200;
  letter-spacing: 0.2em;
  font-size: 1.4rem;
  margin-bottom: 24px;
  color: #fff;
}
.overlay-card button, .modal-actions button {
  display: block;
  margin: 8px auto;
  padding: 10px 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 99px;
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  min-width: 180px;
}
.overlay-card button:hover, .modal-actions button:hover {
  background: rgba(255,255,255,0.12);
}

/* ── Level-up modal ───────────────────────────────────────── */
#upgradeModal .modal-title {
  background: linear-gradient(135deg, #ffd166, #c39bff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 18px;
  font-weight: 700;
  font-size: 1.2rem;
}
.upgrade-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 360px;
}
.upgrade-btn {
  text-align: left;
  padding: 14px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.1s, background 0.1s;
}
.upgrade-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateX(2px);
  border-color: #ffd166;
}
.up-title {
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  color: #ffd166;
}
.up-desc {
  font-size: 0.85rem;
  color: #aaa;
}

/* ── Boot banner / version ────────────────────────────────── */
.boot-banner {
  position: fixed;
  top: 12px; left: 50%; transform: translateX(-50%);
  background: #b00020;
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  z-index: 9999;
}
.build-version {
  position: fixed;
  bottom: 8px; right: 12px;
  font-size: 10px;
  color: rgba(255,255,255,0.25);
  font-family: ui-monospace, monospace;
  z-index: 999;
  pointer-events: none;
}

/* ── In-game top bar — mounted by shared/nav.mjs via mountTopBar()
     ponytail: NO custom styles here. shared/nav.css owns .btn-home,
     .btn-pill, .top-bar-left, .top-bar-right. We only override
     pause-pressed tint via attribute selector. ─────────────── */

/* ── Pause overlay ───────────────────────────────────────────── */
.overlay-link {
  display: block;
  margin: 8px auto;
  padding: 10px 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 99px;
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  min-width: 180px;
}
.overlay-link:hover { background: rgba(255,255,255,0.12); }

/* ponytail: dim the game UI behind the pause overlay.
   body.paused → vignette overlay + slightly faded top bar. */
body.paused #damageVignette { background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%); }

/* ── Kill streak HUD ─────────────────────────────────────────── */
/* ponytail: streak HUD is now drawn inside the canvas by render.mjs
   (drawStreakHud) so it scales with portrait layout. The DOM
   element is kept as an empty a11y vessel — visually hidden. */
#streakHud {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ── Damage vignette (low-HP red pulse + always-on faint) ────── */
#damageVignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 25;
  /* ponytail: zero base cost — just a faint permanent edge tint.
     Body class adds the red pulse on low HP. */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 70%, rgba(0,0,0,0.18) 100%);
  transition: background 0.3s ease;
}
body.hp-low #damageVignette {
  background: radial-gradient(ellipse at center, rgba(255,0,0,0) 50%, rgba(255,0,0,0.4) 100%);
  animation: hpPulse 1.4s ease-in-out infinite;
}
@keyframes hpPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ── Mobile d-pad ─────────────────────────────────────────────── */
/* ponytail: 4-direction grid anchored bottom-left of the viewport
   so it sits over the canvas without overlapping the top-bar or
   weapon strip. Touch-action:none prevents the browser from
   hijacking taps for scroll/zoom. Buttons use 8-bit arrow glyphs
   (no font dependency). Visible only on coarse pointers (touch) —   */
.dpad {
  position: fixed;
  left: 12px;
  bottom: max(12px, env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 30;
  display: grid;
  grid-template-columns: 56px 56px 56px;
  grid-template-rows: 56px 56px 56px;
  gap: 4px;
  pointer-events: auto;
  /* ponytail: dim the d-pad on hover/active so it reads as a
     passive control layer, not a flash-element. */
  opacity: 0.85;
}
.dpad.hidden { display: none !important; }
.dpad-btn {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 20, 24, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffd166;
  font-size: 24px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* ponytail: scale-up on press for tactile feedback; matches
     the shared nav.css .top-bar-*:active pattern. */
  transition: transform 0.05s ease, background 0.1s ease;
}
.dpad-btn:active,
.dpad-btn.active {
  background: rgba(255, 209, 102, 0.3);
  border-color: rgba(255, 209, 102, 0.6);
  transform: scale(0.92);
  color: #fff;
}
.dpad-up    { grid-column: 2; grid-row: 1; }
.dpad-left  { grid-column: 1; grid-row: 2; }
.dpad-down  { grid-column: 2; grid-row: 3; }
.dpad-right { grid-column: 3; grid-row: 2; }

/* ponytail: hide d-pad on desktop (no touch). Coarse pointer
   media query catches iPad + iPhone in landscape too. */
@media (hover: hover) and (pointer: fine) {
  .dpad { display: none !important; }
}

/* ponytail: d-pad toggle button on start page — matches the
   .key chip style for consistency but clickable. */
.ctrl-toggle {
  display: inline-block;
  margin: 12px auto 0;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffd166;
  font: 600 13px/1 -apple-system, sans-serif;
  letter-spacing: 0.06em;
  border-radius: 99px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.ctrl-toggle:active,
.ctrl-toggle[aria-pressed="true"] {
  background: rgba(255, 209, 102, 0.2);
  border-color: rgba(255, 209, 102, 0.5);
  color: #fff;
}