/* Tranq — ranger field-kit HUD over a top-down meadow */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --forest: #14231a;
  --forest-glass: rgba(16, 32, 22, 0.62);
  --khaki: #d9c58a;
  --cream: #f6f1e2;
  --orange: #f07a1f;
  --pig: #f2a3b6;
  --danger: #ff4d4d;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

html, body {
  height: 100%;
}

body {
  font-family: "Barlow", "Segoe UI", sans-serif;
  background: var(--forest);
  overflow: hidden;
  color: var(--cream);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  font-family: inherit;
}

.hidden {
  display: none !important;
}

.game-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: none; /* the in-world sight is the only cursor over the field */
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(6, 14, 8, 0.45) 100%);
}

.flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(255, 40, 40, 0);
}
.flash.go {
  animation: flash-red 0.55s ease-out;
}
@keyframes flash-red {
  0% { background: rgba(255, 40, 40, 0.35); }
  100% { background: rgba(255, 40, 40, 0); }
}

/* ---------------------------------------------------------------- HUD */
.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
  padding: calc(12px + var(--safe-top)) calc(16px + var(--safe-right)) 0 calc(16px + var(--safe-left));
  pointer-events: none;
  z-index: 20;
}

.hud-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  justify-self: start;
}

.hud-back {
  pointer-events: auto;
}

.route {
  pointer-events: auto; /* the maps are buttons: tap one to fly there */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 6px 7px;
  border-radius: 12px;
  background: var(--forest-glass);
  border: 1px solid rgba(217, 197, 138, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s, transform 0.4s;
}
.hud.live .route, .hud.live .pig-tracker { opacity: 1; transform: none; }
.route-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.route-arrow {
  display: none;
  width: 44px;
  height: 18px;
  padding: 2px 10px;
  border: 0;
  border-radius: 7px;
  background: rgba(217, 197, 138, 0.13);
  color: var(--khaki);
  cursor: pointer;
  touch-action: manipulation;
}
.route-arrow svg { display: block; width: 100%; height: 100%; }
.route-arrow path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.route-arrow:active { background: rgba(217, 197, 138, 0.3); }
.route-arrow:focus-visible { outline: 2px solid var(--cream); outline-offset: 1px; }
.route-arrow:disabled { opacity: 0.25; cursor: default; }
.route-tile {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 9px;
  overflow: hidden;
  background: #234637;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  border: 1px solid rgba(236, 224, 176, 0.45);
  opacity: 1;
  filter: none;
  transform: none;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.route-tile svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.route-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 2px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.route-tile:hover, .route-tile:focus-visible { border-color: rgba(246, 241, 226, 0.72); }
.route-tile:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.route-tile:active { transform: scale(0.96); }
.route-tile.active {
  opacity: 1;
  filter: none;
  transform: none;
  border-color: #fff3b5;
  box-shadow: 0 0 10px rgba(255, 205, 66, 0.6);
}
.route-tile.active::after {
  /* The dark inner edge keeps the gold frame distinct on warm landscapes. */
  box-shadow: inset 0 0 0 3px #ffd447, inset 0 0 0 4px #233c2c;
}
/* Locked areas: a padlock in the corner over a lightly dimmed map. */
.route-lock {
  position: absolute;
  z-index: 1;
  display: none;
  pointer-events: none;
  right: 2px;
  bottom: 2px;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 5px;
  color: var(--khaki);
  background: rgba(16, 28, 20, 0.85);
  border: 1px solid rgba(217, 197, 138, 0.5);
}
.route-lock svg { width: 12px; height: 12px; }
.route-tile.locked { cursor: not-allowed; border-color: rgba(236, 224, 176, 0.3); }
.route-tile.locked > svg { filter: grayscale(0.35) brightness(0.8); }
.route-tile.locked .route-lock { display: grid; }
.route-tile.locked:hover { border-color: rgba(236, 224, 176, 0.3); }
.route-tile.locked:active { transform: none; }


.pig-tracker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 6px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s, transform 0.4s;
  border-radius: 999px;
  background: var(--forest-glass);
  border: 1px solid rgba(217, 197, 138, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pig-tracker:empty { display: none; }
/* right column: tracker below the top sound/ammo row, hugging the edge */
.hud-right {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding-top: 52px;
}
.hud.live .ammo-wrap { opacity: 1; transform: none; }
.pig-icon {
  width: 26px;
  height: 26px;
  color: inherit;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  transition: color 0.4s, transform 0.4s, opacity 0.4s;
}
.pig-icon svg { width: 100%; height: 100%; display: block; }
.pig-icon.down {
  color: #6f7f6a;
  opacity: 0.55;
  transform: rotate(90deg) scale(0.85);
}

/* Score: the banked total, updated when an area is secured. */
.score-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  padding: 5px 14px 6px;
  border-radius: 14px;
  background: var(--forest-glass);
  border: 1px solid rgba(217, 197, 138, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s, transform 0.4s;
}
.hud.live .score-wrap { opacity: 1; transform: none; pointer-events: auto; }
button.score-wrap { font: inherit; color: inherit; cursor: pointer; }
button.score-wrap:hover { border-color: rgba(217, 197, 138, 0.8); }
button.score-wrap:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.score-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--khaki);
  line-height: 1;
}
.score-areas {
  margin-top: 3px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd447;
  line-height: 1;
}
.score-total {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  min-height: 22px;
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.score-wrap.bank .score-total { animation: score-bank 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes score-bank {
  0% { transform: scale(1.4); color: #b8ff5c; }
  100% { transform: scale(1); }
}

/* Dart magazine and score, side by side left of the sound button. */
.hud-center { justify-self: center; }
.hud-stats {
  position: absolute;
  top: calc(12px + var(--safe-top));
  right: calc(68px + var(--safe-right));
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.ammo-wrap {
  position: relative;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s, transform 0.4s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 14px 5px;
  border-radius: 14px;
  background: var(--forest-glass);
  border: 1px solid rgba(217, 197, 138, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  max-width: min(92vw, 520px);
}
.ammo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
}
.dart-icon {
  width: 38px;
  height: 38px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  transform-origin: 50% 50%;
}
.dart-icon svg { width: 100%; height: 100%; display: block; }
.ammo-count {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* a fixed two-digit column, right-aligned: the units digit and the dart
     icon stay put as the count drops from 14 to 9 */
  min-width: 2ch;
  text-align: right;
  color: var(--cream);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.ammo.low .dart-icon { filter: drop-shadow(0 0 6px rgba(255, 77, 77, 0.9)); }
.ammo.low .ammo-count { color: #ffb0b0; }
/* count changes: kick down in red, pop up in green */
.ammo.down .ammo-count { animation: ammo-down 0.55s ease-out; }
.ammo.down .dart-icon { animation: dart-kick 0.45s ease-out; }
.ammo.up .ammo-count { animation: ammo-up 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
.ammo.up .dart-icon { animation: dart-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes ammo-down {
  0% { transform: scale(1.45) translateY(2px); color: var(--danger); }
  60% { transform: scale(0.95); color: var(--danger); }
  100% { transform: scale(1); }
}
@keyframes dart-kick {
  0% { transform: translate(4px, -5px) rotate(-8deg); filter: brightness(1.6); }
  50% { transform: translate(-2px, 2px) rotate(10deg); }
  100% { transform: none; }
}
@keyframes ammo-up {
  0% { transform: scale(0.6); color: #b8ff5c; }
  60% { transform: scale(1.35); color: #b8ff5c; }
  100% { transform: scale(1); }
}
@keyframes dart-pop {
  0% { transform: scale(0.6); filter: brightness(2) drop-shadow(0 0 6px #b8ff5c); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.ammo.shake { animation: ammo-shake 0.35s ease-out; }
@keyframes ammo-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.ammo-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--khaki);
}
.ammo-delta {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 6px;
  transform: translate(-50%, 0);
  padding: 4px 12px;
  border-radius: 999px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #1b1208;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  animation: ammo-delta 1.7s ease-out forwards;
  pointer-events: none;
}
.ammo-delta.minus { background: var(--danger); color: #fff; }
.ammo-delta.plus { background: #b8ff5c; }
@keyframes ammo-delta {
  0% { opacity: 0; transform: translate(-50%, -8px) scale(0.8); }
  12% { opacity: 1; transform: translate(-50%, 4px) scale(1.15); }
  25% { transform: translate(-50%, 2px) scale(1); }
  75% { opacity: 1; transform: translate(-50%, 2px); }
  100% { opacity: 0; transform: translate(-50%, 16px); }
}
.ammo.low .dart-icon { background: linear-gradient(to bottom, #ff4d4d 0 32%, #ffd7d7 32% 100%); }

/* Level banner */
.level-banner {
  position: absolute;
  width: min(90vw, 760px);
  left: 50%;
  top: 28%;
  transform: translate(-50%, -50%) scale(0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  opacity: 0;
  z-index: 25;
  text-align: center;
}
.level-banner.shown { animation: banner 2.6s ease-out forwards; }
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1.02); }
}
.banner-title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.banner-sub {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 3vw, 1.4rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--khaki);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Dart briefing: a still of the pest above its caption. */
.brief-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}
.brief-row:empty, .brief-row[hidden] { display: none; }
.brief {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.brief img {
  width: 132px;
  height: 99px;
  object-fit: cover;
  border-radius: 12px;
  border: 3px solid var(--brief-color);
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.2s;
}
.brief.ready img { opacity: 1; }
.brief-dart { --brief-color: var(--orange); }
.brief figcaption {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.brief figcaption b {
  font-weight: 800;
  color: var(--brief-color);
}
@media (max-height: 520px) {
  .brief img { width: 104px; height: 78px; }
}

/* Floating world labels */
.labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 22;
  overflow: hidden;
}
.label {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 3px 10px rgba(0, 0, 0, 0.5);
  will-change: transform, opacity;
}
.label-good { color: #ffe066; }
.label-blind { color: #b8ff5c; font-size: 1.7rem; }
.label-bad { color: #ff7a7a; font-size: 1.15rem; }

/* Decorative joystick, touch devices only. Purely visual: pointer events
   pass through it, since the whole field steers the sight. */
.stick {
  display: none;
  position: absolute;
  left: calc(18px + var(--safe-left));
  bottom: calc(18px + var(--safe-bottom));
  width: 116px;
  height: 116px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.4s, transform 0.4s;
}
.stick.live { opacity: 1; transform: none; }
.stick-ring {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.3);
}
.stick-ring::before, .stick-ring::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.22);
}
.stick-ring::before { left: 50%; top: 4px; bottom: 4px; width: 1px; }
.stick-ring::after { top: 50%; left: 4px; right: 4px; height: 1px; }
.stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.35) 65%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  animation: stick-idle 3.2s ease-in-out infinite;
}
@keyframes stick-idle {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(5px, -4px); }
  65% { transform: translate(-4px, 3px); }
}
@media (pointer: coarse) {
  .stick { display: block; }
}

/* Fire button: touch devices only */
.fire-btn {
  display: none;
  position: absolute;
  right: calc(18px + var(--safe-right));
  bottom: calc(18px + var(--safe-bottom));
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 3px solid rgba(255, 240, 220, 0.85);
  background: radial-gradient(circle at 35% 30%, #ffb15c, var(--orange) 55%, #b85a12);
  color: #1b1208;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), inset 0 -6px 0 rgba(0, 0, 0, 0.18);
  z-index: 30;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.4s, transform 0.4s;
}
.fire-btn.live { opacity: 1; transform: none; }
.fire-btn:active, .fire-btn.pressed { transform: scale(0.92); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
.fire-icon {
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
  transition: transform 0.08s;
}
.fire-btn:active .fire-icon, .fire-btn.pressed .fire-icon { transform: translate(3px, -3px); }
/* Darts left, as a badge on the fire button's top-left rim. */
.fire-count {
  position: absolute;
  left: -6px;
  top: -6px;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border-radius: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
  background: var(--forest);
  border: 2px solid rgba(217, 197, 138, 0.8);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.fire-count.low { background: #8e1f1f; border-color: #ffb0b0; }
.fire-count.down { animation: ammo-down 0.55s ease-out; }
.fire-count.up { animation: ammo-up 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
.fire-btn .ammo-delta { top: auto; bottom: 100%; margin: 0 0 10px; }
@media (pointer: coarse) {
  .fire-btn { display: flex; }
  .ammo-wrap { display: none; }
}

/* Sound button */
.sound-btn {
  position: absolute;
  right: calc(16px + var(--safe-right));
  top: calc(12px + var(--safe-top));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(217, 197, 138, 0.45);
  background: var(--forest-glass);
  color: var(--cream);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 30;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sound-btn svg { width: 22px; height: 22px; }
.sound-btn .icon-sound-off { display: none; }
.sound-btn.is-muted .icon-sound-on { display: none; }
.sound-btn.is-muted .icon-sound-off { display: block; }

/* ------------------------------------------------------------ overlays */
.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  background: radial-gradient(ellipse at center, rgba(8, 20, 12, 0.45), rgba(8, 20, 12, 0.78));
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
  overflow-y: auto;
}
.overlay.shown {
  opacity: 1;
  pointer-events: auto;
}
.card {
  width: min(92vw, 460px);
  padding: 28px 28px 26px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(30, 48, 34, 0.96), rgba(16, 30, 22, 0.96));
  border: 1px solid rgba(217, 197, 138, 0.5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
  transform: translateY(12px);
  transition: transform 0.35s;
}
.overlay.shown .card { transform: none; }
.eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--khaki);
}
.title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 6px 0 4px;
  color: var(--cream);
  text-shadow: 0 2px 0 #4a3418, 0 6px 22px rgba(0, 0, 0, 0.5);
}
.title-sm {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 6vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 6px 0 4px;
}
.lede {
  color: var(--orange);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  letter-spacing: 0.03em;
  margin-bottom: 24px;
}
.sub {
  color: rgba(246, 241, 226, 0.8);
  margin-bottom: 14px;
}
.how {
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}
.how li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.93rem;
  line-height: 1.35;
  color: rgba(246, 241, 226, 0.92);
}
.how-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(217, 197, 138, 0.3);
  position: relative;
  overflow: hidden;
}
.how-pig::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 14px;
  width: 24px;
  height: 16px;
  border-radius: 50%;
  background: var(--pig);
  box-shadow: inset -4px -3px 0 rgba(0, 0, 0, 0.15);
}
.how-pig::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 19px;
  width: 8px;
  height: 7px;
  border-radius: 50%;
  background: #d9788f;
}
.how-trace {
  background: radial-gradient(circle at 30% 40%, #3b6a24, #244d17 70%);
}
.how-trace::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 22px;
  width: 34px;
  height: 4px;
  border-radius: 4px;
  background: #e9f7a8;
  transform: rotate(-20deg);
  box-shadow: 0 0 6px rgba(233, 247, 168, 0.8);
}
.how-trace::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  width: 30px;
  height: 3px;
  border-radius: 4px;
  background: rgba(233, 247, 168, 0.55);
  transform: rotate(35deg);
}
.how-deer::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 18px;
  width: 28px;
  height: 12px;
  border-radius: 50%;
  background: #b07a45;
  box-shadow: inset -4px -3px 0 rgba(0, 0, 0, 0.15);
}
.how-deer::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 8px;
  width: 6px;
  height: 12px;
  border-left: 2px solid #d8c8a8;
  border-right: 2px solid #d8c8a8;
  border-radius: 3px 3px 0 0;
}
.how-heli {
  background: radial-gradient(circle at 50% 50%, #2d4a35, #1b2e22 75%);
}
.how-heli::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 20px;
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: #1b1d1f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
  transform: rotate(-18deg);
  animation: heli-sway 1.8s ease-in-out infinite alternate;
}
.how-heli::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 14px;
  width: 8px;
  height: 14px;
  border-radius: 3px;
  background: var(--orange);
}
@keyframes heli-sway {
  from { transform: rotate(-18deg); }
  to { transform: rotate(12deg); }
}

.how-darts {
  background: radial-gradient(circle at 50% 50%, #2d4a35, #1b2e22 75%);
}
.how-darts::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  width: 7px;
  height: 24px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(to bottom, #ff6a4d 0 32%, #e2e8ee 32% 100%);
  box-shadow: 10px 0 0 #e2e8ee, 20px 0 0 #e2e8ee;
  transform: rotate(14deg);
}

.controls-hint {
  font-size: 0.8rem;
  color: var(--khaki);
  margin-bottom: 16px;
}
.hint-touch { display: none; }
.controller-hint {
  margin: 20px 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--khaki);
  white-space: pre-line;
}
@media (pointer: coarse) {
  .hint-desktop { display: none; }
  .hint-touch { display: inline; }
}

.btn-primary {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1b1208;
  background: linear-gradient(to bottom, #ffa04a, var(--orange));
  border: none;
  border-radius: 12px;
  padding: 12px 34px;
  cursor: pointer;
  box-shadow: 0 6px 0 #a34f0f, 0 10px 22px rgba(0, 0, 0, 0.4);
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #a34f0f, 0 4px 10px rgba(0, 0, 0, 0.4); }
.btn-primary:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 14px 0 18px;
}
.stats div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}
.stats dt {
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--khaki);
}
.stats dd {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.stats .total { background: rgba(240, 122, 31, 0.18); border: 1px solid rgba(240, 122, 31, 0.5); }
.stats .total dd { font-size: 1.6rem; color: #ffd0a6; }
.record {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b8ff5c;
  margin: 0 0 16px;
}
#over-overlay .sub { margin-bottom: 12px; }
.over-score {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: #ffd0a6;
  margin: 0 0 18px;
}
.over-score:empty { display: none; }
/* Hidden while the darts fill; pops in once they are full. */
.reload-btn {
  margin-top: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.96);
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1), visibility 0s 0.3s;
}
.reload-overlay.ready .reload-btn {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.reload-msg:empty { display: none; }
.reload-score {
  margin-top: 12px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: #ffe066;
}
.reload-score:empty { display: none; }

/* Reload break between areas: darts fill with tranquilizer over ~5 s. */
.reload-card {
  width: min(92vw, 380px);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.reload-main { display: flex; flex-direction: column; align-items: center; }
.reload-darts {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 12px 0 14px;
}
.reload-dart {
  width: 34px;
  height: 105px;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}
.reload-liquid {
  fill: #7be495;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(var(--fill, 0));
}
.reload-shine { fill: rgba(255, 255, 255, 0.35); }
.reload-dart.full .reload-liquid { fill: #a4f5a0; transition: fill 0.3s; }
.reload-msg {
  margin-top: 10px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: rgba(246, 241, 226, 0.88);
}
.ad-slot {
  position: relative;
  width: 300px;
  max-width: 100%;
  height: 250px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px dashed rgba(217, 197, 138, 0.3);
  overflow: hidden;
}
.ad-slot-label {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(217, 197, 138, 0.55);
}
.pause-card { padding: 22px 30px; }
.pause-card .sub { margin-bottom: 0; }
.score-card .stats { margin: 4px 0 14px; }
.score-card .stats dd.minus { color: #ff8a6a; }
.score-card .score-note { font-size: 0.88rem; margin-bottom: 18px; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 640px) {
  .banner-title { font-size: clamp(1.3rem, 6vw, 1.8rem); }
  .hud { gap: 8px; padding-left: calc(10px + var(--safe-left)); padding-right: calc(10px + var(--safe-right)); }
  .hud-left { gap: 8px; flex-wrap: wrap; max-width: 40vw; }
  .hud-back { height: 30px; font-size: 13px; padding-right: 11px; }
  .pig-icon { width: 22px; height: 22px; }
  .route-tile { width: 44px; height: 44px; border-radius: 8px; }
  .route { gap: 4px; padding: 5px 5px 6px; }
  .route-arrow { display: block; }
  .route-scroll {
    max-height: 140px; /* exactly three 44px tiles plus two 4px gaps */
    gap: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(217, 197, 138, 0.65) transparent;
    touch-action: pan-y;
  }
  .route-scroll::-webkit-scrollbar { width: 3px; }
  .route-scroll::-webkit-scrollbar-thumb { background: rgba(217, 197, 138, 0.65); border-radius: 999px; }
  .route-scroll .route-tile { flex: 0 0 44px; scroll-snap-align: start; }
  .card { padding: 22px 18px 20px; }
  .how li { font-size: 0.86rem; }
  .label { font-size: 1.1rem; }
  .label-blind { font-size: 1.35rem; }
  .dart-icon { width: 32px; height: 32px; }
  .score-wrap { min-width: 58px; padding: 4px 9px 5px; }
  .score-total { font-size: 1.05rem; }
  .ammo-count { font-size: 1.6rem; }
}
@media (max-height: 520px) {
  /* Keep every destination above the lower touch controls in landscape. */
  .hud-left { flex-direction: row; flex-wrap: nowrap; gap: 6px; max-width: none; }
  .hud-back { height: 28px; font-size: 12px; padding-right: 10px; }
  .route { gap: 4px; }
  .route-scroll {
    display: flex;
    max-height: 140px;
    overflow-y: auto;
  }
  .banner-title { font-size: clamp(1.2rem, 6vh, 1.7rem); }
  .banner-sub { font-size: 0.9rem; letter-spacing: 0.1em; }
  .how { gap: 6px; }
  .how-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .title { font-size: 2.2rem; }
  .card { padding: 16px 20px; }
}
@media (max-height: 520px) {
  /* Landscape phones: darts beside the ad, not above it. */
  .reload-card { width: auto; max-width: 92vw; flex-direction: row; gap: 20px; padding: 14px 18px; }
  .reload-darts { margin: 8px 0 10px; }
  .reload-dart { width: 28px; height: 86px; }
  .ad-slot { height: min(250px, calc(100vh - 60px)); }
}
@media (pointer: coarse) {
  .route-tile { transform: none; }
  .route-arrow { display: block; }
  .route-scroll {
    max-height: 140px;
    gap: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(217, 197, 138, 0.65) transparent;
    touch-action: pan-y;
  }
  .route-scroll .route-tile { flex: 0 0 44px; scroll-snap-align: start; }
}