/* ==========================================================================
   FIND THE PIN: PORTLAND - "Night Signal"
   A rain-slick Pacific-Northwest broadcast. Evergreen night, safety-cone
   orange, receipt-paper clues. Built to read on a phone in the rain and
   on camera in a video edit.
   ========================================================================== */

:root {
  --ftp-night: #0a120e;
  --ftp-night-2: #101c16;
  --ftp-night-3: #17281f;
  --ftp-ink: #f2f7ef;
  --ftp-dim: rgba(242, 247, 239, 0.6);
  --ftp-paper: #f4eddc;
  --ftp-paper-2: #eee2c8;
  --ftp-paper-ink: #211a10;
  --ftp-paper-dim: rgba(33, 26, 16, 0.62);
  --ftp-orange: #ff6a3d;
  --ftp-orange-deep: #e0481c;
  --ftp-lime: #d6f450;
  --ftp-teal: #5fd4e8;
  --ftp-gold: #ffc94d;
  --ftp-red: #ff5d5d;
  --ftp-mint: #79e0a8;
  --ftp-line: rgba(214, 244, 80, 0.13);
  --ftp-line-strong: rgba(214, 244, 80, 0.26);
  --ftp-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
  --ftp-radius: 14px;
  --ftp-radius-sm: 9px;
  --ftp-drop-dock-space: 10.9rem;
  --ftp-font-display: 'Bricolage Grotesque', 'Avenir Next Condensed', 'Arial Narrow', sans-serif;
  --ftp-font-body: 'Schibsted Grotesk', 'Helvetica Neue', sans-serif;
  --ftp-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  /* Old token aliases kept for anything still referencing them */
  --ftp-blue: var(--ftp-teal);
  --ftp-coral: var(--ftp-orange);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--ftp-night);
  -webkit-text-size-adjust: 100%;
}

.ftp-page {
  min-height: 100vh;
  margin: 0;
  color: var(--ftp-ink);
  font-family: var(--ftp-font-body);
  line-height: 1.55;
  background:
    radial-gradient(120% 60% at 85% -10%, rgba(255, 106, 61, 0.16), transparent 55%),
    radial-gradient(90% 50% at 12% 8%, rgba(214, 244, 80, 0.08), transparent 60%),
    radial-gradient(100% 55% at 0% 100%, rgba(95, 212, 232, 0.1), transparent 60%),
    radial-gradient(80% 45% at 100% 90%, rgba(121, 224, 168, 0.07), transparent 65%),
    linear-gradient(180deg, #0c1510 0%, var(--ftp-night) 100%);
  overflow-x: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@supports (min-height: 100dvh) {
  .ftp-page {
    min-height: 100dvh;
  }
}

.ftp-page.ftp-dialog-open {
  overflow: hidden;
}

/* A quiet static dot grid; the color comes from the page gradient above. */
.ftp-page::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(242, 247, 239, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 75%);
}

/* --------------------------------------------------------------------------
   Shell header
   -------------------------------------------------------------------------- */

.ftp-shell-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(0.65rem + env(safe-area-inset-top)) 1rem 0.65rem;
  border-bottom: 1px solid var(--ftp-line);
  background: rgba(10, 18, 14, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.ftp-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.ftp-brand img {
  width: 160px;
  max-width: 44vw;
  height: auto;
  filter: brightness(1.45) contrast(0.96);
}

.ftp-header-link,
.ftp-button,
.ftp-link-button {
  appearance: none;
  border: 0;
  border-radius: var(--ftp-radius-sm);
  cursor: pointer;
  font: 700 0.95rem/1.1 var(--ftp-font-body);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.ftp-header-link {
  color: var(--ftp-ink);
  border: 1px solid var(--ftp-line-strong);
  padding: 0.6rem 0.85rem;
}

.ftp-header-link:hover,
.ftp-header-link:focus-visible {
  border-color: var(--ftp-orange);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Layout containers
   -------------------------------------------------------------------------- */

.ftp-app,
.ftp-admin {
  position: relative;
  z-index: 1;
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 1rem;
}

.ftp-app {
  min-height: calc(100vh - 74px);
  padding-bottom: calc(var(--ftp-drop-dock-space) + env(safe-area-inset-bottom));
}

.ftp-view {
  display: grid;
  gap: 1.1rem;
}

.ftp-panel,
.ftp-card,
.ftp-admin-panel {
  border: 1px solid var(--ftp-line);
  border-radius: var(--ftp-radius);
  box-shadow: var(--ftp-shadow);
}

.ftp-panel {
  padding: 1.1rem;
  background: linear-gradient(180deg, rgba(23, 40, 31, 0.55), rgba(16, 28, 22, 0.85));
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.ftp-kicker {
  margin: 0 0 0.55rem;
  color: var(--ftp-lime);
  font: 700 0.72rem/1.2 var(--ftp-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ftp-title {
  margin: 0 0 0.4rem;
  font: 800 2.7rem/1.02 var(--ftp-font-display);
  letter-spacing: 0;
}

.ftp-subtitle {
  margin: 0 0 0.9rem;
  color: var(--ftp-dim);
  font-size: 1.05rem;
  max-width: 56ch;
}

.ftp-meta {
  margin: 0.4rem 0 0;
  color: var(--ftp-dim);
  font: 500 0.8rem/1.45 var(--ftp-font-mono);
}

.ftp-system-message {
  margin: 0.6rem 0 0;
  color: var(--ftp-dim);
  font: 500 0.85rem/1.45 var(--ftp-font-mono);
  min-height: 1.2em;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.ftp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  min-width: 0;
  padding: 0.8rem 1.3rem;
  color: var(--ftp-night);
  background: var(--ftp-orange);
  box-shadow: 0 6px 24px rgba(255, 106, 61, 0.32);
}

.ftp-button:hover:not(:disabled),
.ftp-button:focus-visible:not(:disabled) {
  transform: translateY(-1px);
  background: #ff7e55;
  box-shadow: 0 10px 30px rgba(255, 106, 61, 0.42);
}

.ftp-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.99);
}

.ftp-button:disabled {
  cursor: not-allowed;
  color: rgba(242, 247, 239, 0.42);
  background: rgba(242, 247, 239, 0.1);
  box-shadow: none;
}

.ftp-button--secondary {
  color: var(--ftp-ink);
  border: 1px solid var(--ftp-line-strong);
  background: rgba(214, 244, 80, 0.07);
  box-shadow: none;
}

.ftp-button--secondary:hover:not(:disabled),
.ftp-button--secondary:focus-visible:not(:disabled) {
  background: rgba(214, 244, 80, 0.14);
  border-color: var(--ftp-lime);
  box-shadow: none;
}

.ftp-button--quiet {
  min-height: 40px;
  color: var(--ftp-dim);
  background: transparent;
  box-shadow: none;
  font-weight: 600;
}

.ftp-button--quiet:hover:not(:disabled),
.ftp-button--quiet:focus-visible:not(:disabled) {
  color: var(--ftp-red);
  background: rgba(255, 93, 93, 0.08);
  box-shadow: none;
}

.ftp-start-action {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Live dot / on-air lamp
   -------------------------------------------------------------------------- */

.ftp-live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ftp-red);
  box-shadow: 0 0 0 0 rgba(255, 93, 93, 0.6);
  animation: ftpLamp 1.6s ease-out infinite;
}

@keyframes ftpLamp {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 93, 93, 0.55);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(255, 93, 93, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 93, 93, 0);
  }
}

/* --------------------------------------------------------------------------
   START SCREEN
   -------------------------------------------------------------------------- */

.ftp-start {
  gap: 1.6rem;
  padding-top: 1.2rem;
}

.ftp-hero {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  text-align: center;
  padding: 1.4rem 0.5rem 0.4rem;
}

.ftp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.45rem 0.9rem;
  color: var(--ftp-ink);
  border: 1px solid var(--ftp-line-strong);
  border-radius: 999px;
  background: rgba(10, 18, 14, 0.7);
  font: 600 0.72rem/1.2 var(--ftp-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ftp-hero-title {
  margin: 0;
  display: grid;
  justify-items: center;
  font: 800 6.2rem/0.86 var(--ftp-font-display);
  letter-spacing: 0;
  text-transform: uppercase;
}

.ftp-hero-title .ftp-hero-the {
  display: inline-block;
  margin: 0.18em 0;
  padding: 0.12em 0.6em;
  color: var(--ftp-night);
  background: var(--ftp-lime);
  border-radius: 6px;
  transform: rotate(-2.2deg);
  font-size: 0.22em;
  letter-spacing: 0.32em;
}

.ftp-hero-title::after {
  content: '';
  width: 0.42em;
  height: 0.42em;
  margin-top: 0.12em;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--ftp-orange);
  box-shadow: 0 0 34px rgba(255, 106, 61, 0.65);
  font-size: 6.2rem;
}

.ftp-hero-sub {
  margin: 0;
  max-width: 44ch;
  color: var(--ftp-dim);
  font-size: 1.12rem;
}

.ftp-hero-sub strong {
  color: var(--ftp-ink);
}

.ftp-hero-sub em {
  color: var(--ftp-orange);
  font-style: normal;
  font-weight: 700;
}

.ftp-howto-link {
  padding: 0.4rem 0.9rem;
  border: 1.5px dashed var(--ftp-line-strong);
  border-radius: 999px;
  background: rgba(214, 244, 80, 0.07);
  color: var(--ftp-lime);
  font: 700 0.82rem/1.2 var(--ftp-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.ftp-howto-link:hover {
  border-color: var(--ftp-lime);
  background: rgba(214, 244, 80, 0.14);
}

.ftp-board-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(121, 224, 168, 0.4);
  background: rgba(121, 224, 168, 0.08);
  font: 600 0.82rem/1.3 var(--ftp-font-mono);
}

.ftp-board-pill .ftp-live-dot {
  background: var(--ftp-mint);
  animation-name: ftpLampMint;
}

@keyframes ftpLampMint {
  0% {
    box-shadow: 0 0 0 0 rgba(121, 224, 168, 0.5);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(121, 224, 168, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(121, 224, 168, 0);
  }
}

.ftp-board-pill[data-ok='false'] {
  border-color: rgba(255, 93, 93, 0.45);
  background: rgba(255, 93, 93, 0.1);
}

.ftp-board-pill[data-ok='false'] .ftp-live-dot {
  background: var(--ftp-red);
  animation-name: ftpLamp;
}

.ftp-board-pill[data-state='checking'] {
  border-color: rgba(255, 201, 77, 0.45);
  background: rgba(255, 201, 77, 0.08);
}

.ftp-board-pill[data-state='checking'] .ftp-live-dot {
  background: var(--ftp-gold);
  animation-name: ftpLampGold;
}

@keyframes ftpLampGold {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 201, 77, 0.5);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 201, 77, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 201, 77, 0);
  }
}

/* Mobile app install nudge */

.ftp-install-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  width: min(760px, 100%);
  margin: -0.2rem auto 0;
  padding: 0.78rem 0.85rem;
  border: 1px solid rgba(95, 212, 232, 0.28);
  border-radius: var(--ftp-radius-sm);
  background: linear-gradient(90deg, rgba(95, 212, 232, 0.1), rgba(214, 244, 80, 0.06));
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.28);
}

.ftp-install-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 8px;
  background: rgba(10, 18, 14, 0.58);
  border: 1px solid rgba(95, 212, 232, 0.32);
}

.ftp-install-icon::before {
  content: '';
  width: 1rem;
  height: 1rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--ftp-teal);
  box-shadow: 0 0 18px rgba(95, 212, 232, 0.5);
}

.ftp-install-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.ftp-install-copy strong {
  font: 800 1rem/1.15 var(--ftp-font-display);
}

.ftp-install-copy span {
  color: var(--ftp-dim);
  font: 600 0.78rem/1.35 var(--ftp-font-mono);
  overflow-wrap: anywhere;
}

.ftp-install-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.ftp-install-actions .ftp-button {
  min-height: 42px;
  padding: 0.65rem 0.85rem;
  white-space: nowrap;
}

.ftp-install-dismiss {
  appearance: none;
  min-height: 42px;
  padding: 0.55rem 0.72rem;
  color: var(--ftp-dim);
  border: 1px solid transparent;
  border-radius: var(--ftp-radius-sm);
  background: transparent;
  cursor: pointer;
  font: 700 0.78rem/1 var(--ftp-font-body);
}

.ftp-install-dismiss:hover,
.ftp-install-dismiss:focus-visible {
  color: var(--ftp-ink);
  border-color: var(--ftp-line-strong);
  background: rgba(242, 247, 239, 0.06);
}

/* How to play - three big steps */

.ftp-howto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ftp-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 1.1rem;
  border: 1px solid var(--ftp-line);
  border-radius: var(--ftp-radius);
  background: linear-gradient(180deg, rgba(23, 40, 31, 0.5), rgba(16, 28, 22, 0.8));
}

[data-fresh='true'] .ftp-step {
  opacity: 0;
  animation: ftpRise 540ms cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
  animation-delay: calc(160ms + var(--step-index, 0) * 120ms);
}

.ftp-step-num {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  color: var(--ftp-night);
  background: var(--ftp-orange);
  font: 800 1.15rem/1 var(--ftp-font-display);
  box-shadow: 0 4px 18px rgba(255, 106, 61, 0.4);
}

.ftp-step strong {
  display: block;
  font: 700 1.12rem/1.25 var(--ftp-font-display);
  letter-spacing: 0;
}

.ftp-step p {
  margin: 0.3rem 0 0;
  color: var(--ftp-dim);
  font-size: 0.92rem;
}

@keyframes ftpRise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Difficulty picker */

.ftp-mode-pick {
  display: grid;
  gap: 0.8rem;
  padding: 1.2rem;
  border: 1px solid var(--ftp-line);
  border-radius: var(--ftp-radius);
  background: linear-gradient(180deg, rgba(23, 40, 31, 0.55), rgba(16, 28, 22, 0.85));
  box-shadow: var(--ftp-shadow);
}

.ftp-difficulty-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.ftp-mode-button {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: 1rem;
  text-align: left;
  color: var(--ftp-ink);
  border: 1.5px solid var(--ftp-line);
  border-radius: var(--ftp-radius-sm);
  background: rgba(10, 18, 14, 0.55);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
  font-family: var(--ftp-font-body);
}

.ftp-mode-button:hover {
  transform: translateY(-2px);
  border-color: var(--ftp-line-strong);
}

.ftp-mode-button[aria-pressed='true'] {
  border-color: var(--ftp-orange);
  background: rgba(255, 106, 61, 0.1);
  box-shadow: 0 8px 28px rgba(255, 106, 61, 0.22);
}

.ftp-mode-button strong {
  font: 700 1.18rem/1.15 var(--ftp-font-display);
}

.ftp-mode-button small {
  color: var(--ftp-gold);
  font: 700 0.68rem/1.2 var(--ftp-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ftp-mode-button > span:last-child {
  color: var(--ftp-dim);
  font-size: 0.86rem;
  line-height: 1.4;
}

.ftp-mode-heat {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: inline-flex;
  gap: 3px;
}

.ftp-mode-heat i {
  width: 5px;
  height: 14px;
  border-radius: 2px;
  background: rgba(242, 247, 239, 0.14);
}

.ftp-mode-button:nth-child(1) .ftp-mode-heat i:nth-child(1),
.ftp-mode-button:nth-child(2) .ftp-mode-heat i:nth-child(-n + 2),
.ftp-mode-button:nth-child(3) .ftp-mode-heat i {
  background: var(--ftp-orange);
}

/* The big start button */

.ftp-go-button {
  min-height: 64px;
  width: 100%;
  font: 800 1.35rem/1 var(--ftp-font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--ftp-radius);
}

.ftp-safety-strip {
  margin: 0.2rem 0 0;
  color: var(--ftp-dim);
  font: 500 0.78rem/1.5 var(--ftp-font-mono);
  text-align: center;
}

/* --------------------------------------------------------------------------
   PREFLIGHT
   -------------------------------------------------------------------------- */

.ftp-preflight-panel {
  max-width: 640px;
  margin: 1.5rem auto 0;
  width: 100%;
}

.ftp-check-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.ftp-check-row {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  min-height: 52px;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--ftp-line);
  border-radius: var(--ftp-radius-sm);
  background: rgba(10, 18, 14, 0.5);
  transition: border-color 200ms ease, background 200ms ease;
}

.ftp-check-row strong {
  font: 700 0.95rem/1.25 var(--ftp-font-display);
  min-width: 0;
  overflow-wrap: anywhere;
}

.ftp-check-row span:last-child {
  color: var(--ftp-dim);
  font: 500 0.78rem/1.4 var(--ftp-font-mono);
  overflow-wrap: anywhere;
}

.ftp-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(242, 247, 239, 0.25);
}

.ftp-check-row[data-state='active'] {
  border-color: var(--ftp-gold);
  background: rgba(255, 201, 77, 0.06);
}

.ftp-check-row[data-state='active'] .ftp-dot {
  background: var(--ftp-gold);
  animation: ftpPulse 1s ease-in-out infinite;
}

.ftp-check-row[data-state='pass'] {
  border-color: rgba(121, 224, 168, 0.4);
}

.ftp-check-row[data-state='pass'] .ftp-dot {
  background: var(--ftp-mint);
  box-shadow: 0 0 12px rgba(121, 224, 168, 0.6);
}

.ftp-check-row[data-state='fail'] {
  border-color: rgba(255, 93, 93, 0.5);
  background: rgba(255, 93, 93, 0.07);
}

.ftp-check-row[data-state='fail'] .ftp-dot {
  background: var(--ftp-red);
}

/* Step-by-step recovery card when location is blocked */
.ftp-perm-help {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 1rem 1.1rem;
  color: var(--ftp-paper-ink);
  border-left: 4px solid var(--ftp-gold);
  border-radius: var(--ftp-radius-sm);
  background: var(--ftp-paper);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.ftp-perm-help strong {
  font: 700 1.02rem/1.3 var(--ftp-font-display);
}

.ftp-perm-help ol {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-left: 1.2rem;
}

.ftp-perm-help li {
  font-size: 0.92rem;
  line-height: 1.45;
}

.ftp-perm-debug {
  margin: 0;
  font: 500 0.78rem/1.4 var(--ftp-font-mono);
  color: var(--ftp-paper-ink);
  opacity: 0.7;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   LIVE - broadcast bar
   -------------------------------------------------------------------------- */

.ftp-broadcast {
  position: sticky;
  top: calc(58px + env(safe-area-inset-top));
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ftp-line-strong);
  border-radius: var(--ftp-radius);
  background: rgba(10, 18, 14, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--ftp-shadow);
}

.ftp-onair {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(255, 93, 93, 0.5);
  border-radius: 999px;
  background: rgba(255, 93, 93, 0.1);
  font: 700 0.72rem/1 var(--ftp-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ftp-onair[data-state='paused_for_safety'] {
  border-color: rgba(255, 201, 77, 0.55);
  background: rgba(255, 201, 77, 0.1);
}

.ftp-onair[data-state='paused_for_safety'] .ftp-live-dot {
  background: var(--ftp-gold);
  animation: none;
}

.ftp-onair[data-state='hotspot_active'] {
  border-color: rgba(95, 212, 232, 0.55);
  background: rgba(95, 212, 232, 0.1);
}

.ftp-onair[data-state='hotspot_active'] .ftp-live-dot {
  background: var(--ftp-teal);
}

.ftp-clock {
  display: grid;
  justify-items: center;
  gap: 0;
}

.ftp-clock-label {
  color: var(--ftp-dim);
  font: 600 0.62rem/1 var(--ftp-font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ftp-clock-value {
  font: 700 2.85rem/1 var(--ftp-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--ftp-ink);
  text-shadow: 0 0 28px rgba(214, 244, 80, 0.18);
}

.ftp-clock[data-urgent='true'] .ftp-clock-value {
  color: var(--ftp-red);
  text-shadow: 0 0 30px rgba(255, 93, 93, 0.4);
  animation: ftpUrgent 1s steps(2, jump-none) infinite;
}

@keyframes ftpUrgent {
  50% {
    opacity: 0.82;
  }
}

.ftp-clock-penalty {
  color: var(--ftp-gold);
  font: 600 0.68rem/1.2 var(--ftp-font-mono);
}

.ftp-gps-chip {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.45rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--ftp-line);
  border-radius: var(--ftp-radius-sm);
  background: rgba(10, 18, 14, 0.6);
  font: 600 0.78rem/1.15 var(--ftp-font-mono);
  white-space: nowrap;
}

.ftp-gps-chip strong {
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.ftp-gps-chip > span:last-child {
  grid-column: 1 / -1;
  color: var(--ftp-dim);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ftp-gps-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.ftp-gps-bars i {
  width: 3.5px;
  border-radius: 2px;
  background: rgba(242, 247, 239, 0.18);
}

.ftp-gps-bars i:nth-child(1) { height: 5px; }
.ftp-gps-bars i:nth-child(2) { height: 8px; }
.ftp-gps-bars i:nth-child(3) { height: 11px; }
.ftp-gps-bars i:nth-child(4) { height: 14px; }

.ftp-gps-chip[data-health='excellent'] .ftp-gps-bars i { background: var(--ftp-mint); }
.ftp-gps-chip[data-health='good'] .ftp-gps-bars i:nth-child(-n + 3) { background: var(--ftp-mint); }
.ftp-gps-chip[data-health='usable'] .ftp-gps-bars i:nth-child(-n + 2) { background: var(--ftp-lime); }
.ftp-gps-chip[data-health='weak'] .ftp-gps-bars i:nth-child(1) { background: var(--ftp-gold); }
.ftp-gps-chip[data-health='weak'] { border-color: rgba(255, 201, 77, 0.45); }
.ftp-gps-chip[data-health='blocked'] { border-color: rgba(255, 93, 93, 0.5); }

.ftp-gps-chip em,
.ftp-gps-chip b {
  font-style: normal;
}

.ftp-gps-chip em {
  color: var(--ftp-ink);
}

/* HUD sub-row: clue progress + points, folded into the broadcast header */

.ftp-hud-sub {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ftp-hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--ftp-line);
  border-radius: 999px;
  background: rgba(10, 18, 14, 0.6);
  color: var(--ftp-dim);
  font: 700 0.68rem/1.2 var(--ftp-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ftp-hud-chip strong {
  color: var(--ftp-lime);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   LIVE - layout: one calm column, clues first
   -------------------------------------------------------------------------- */

.ftp-live-flow {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

/* Layout for the expired-run recap panels */
.ftp-live-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: 1.1rem;
  align-items: start;
}

/* Field note: the game's one coaching line */

.ftp-field-note {
  display: grid;
  padding: 0.9rem 1rem;
  border-left: 4px solid var(--ftp-lime);
  border-radius: var(--ftp-radius-sm);
  background: rgba(214, 244, 80, 0.06);
}

.ftp-field-note .ftp-kicker {
  margin-bottom: 0.2rem;
}

.ftp-field-note strong {
  font: 700 1.05rem/1.25 var(--ftp-font-display);
}

.ftp-field-note p {
  margin: 0.2rem 0 0;
  color: var(--ftp-dim);
  font-size: 0.92rem;
}

.ftp-field-note[data-tone='safety'] { border-left-color: var(--ftp-mint); background: rgba(121, 224, 168, 0.07); }
.ftp-field-note[data-tone='gps'] { border-left-color: var(--ftp-teal); background: rgba(95, 212, 232, 0.07); }
.ftp-field-note[data-tone='urgent'] { border-left-color: var(--ftp-red); background: rgba(255, 93, 93, 0.08); }

/* --------------------------------------------------------------------------
   CLUE RECEIPTS - the centerpiece
   -------------------------------------------------------------------------- */

.ftp-clue-stack {
  display: grid;
  gap: 1rem;
}

.ftp-receipt {
  position: relative;
  margin: 0;
  padding: 0.95rem 1.15rem 1.2rem;
  color: var(--ftp-paper-ink);
  background:
    linear-gradient(180deg, rgba(33, 26, 16, 0.045) 0%, transparent 14%),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(33, 26, 16, 0.025) 26px 27px),
    var(--ftp-paper);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  transform: rotate(-0.4deg);
}

.ftp-clue-stack .ftp-receipt:nth-child(even) {
  transform: rotate(0.5deg);
}

/* Torn bottom edge */
.ftp-receipt::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 10px;
  background:
    linear-gradient(-45deg, transparent 7px, var(--ftp-paper) 0) 0 0 / 14px 100% repeat-x,
    linear-gradient(45deg, transparent 7px, var(--ftp-paper) 0) 7px 0 / 14px 100% repeat-x;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25));
}

.ftp-receipt[data-fresh='true'] {
  animation: ftpPrint 640ms cubic-bezier(0.18, 0.95, 0.32, 1.18) backwards;
}

@keyframes ftpPrint {
  from {
    opacity: 0;
    transform: translateY(-22px) rotate(-1.6deg) scale(0.98);
  }
}

.ftp-receipt header {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.7rem;
  border-bottom: 1.5px dashed rgba(33, 26, 16, 0.3);
  color: var(--ftp-paper-dim);
  font: 700 0.66rem/1.3 var(--ftp-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ftp-receipt-text {
  margin: 0;
  font: 500 1.12rem/1.55 var(--ftp-font-mono);
}

.ftp-receipt footer {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.75rem;
  color: var(--ftp-paper-dim);
  font: 500 0.72rem/1.3 var(--ftp-font-mono);
}

.ftp-receipt-static {
  color: var(--ftp-orange-deep);
  font-weight: 700;
}

.ftp-receipt[data-scrambled='true'] {
  background:
    repeating-linear-gradient(0deg, rgba(33, 26, 16, 0.05) 0 2px, transparent 2px 4px),
    var(--ftp-paper-2);
}

.ftp-receipt[data-scrambled='true'] .ftp-receipt-text {
  animation: ftpStatic 240ms steps(2, jump-none) infinite;
  text-shadow: 1px 0 rgba(255, 106, 61, 0.5), -1px 0 rgba(95, 212, 232, 0.5);
}

@keyframes ftpStatic {
  50% {
    transform: translateX(0.5px) skewX(-0.6deg);
    opacity: 0.86;
  }
}

.ftp-receipt--pending {
  display: grid;
  place-items: center;
  min-height: 100px;
  color: var(--ftp-paper-dim);
  font: 500 0.95rem/1.4 var(--ftp-font-mono);
  text-align: center;
}

.ftp-next-clue {
  margin: 0;
  color: var(--ftp-dim);
  font: 500 0.82rem/1.4 var(--ftp-font-mono);
  text-align: center;
}

.ftp-next-clue strong {
  color: var(--ftp-lime);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   LIVE - tools, stats, feed
   -------------------------------------------------------------------------- */

.ftp-lifeline-grid {
  display: grid;
  gap: 0.6rem;
}

.ftp-lifeline {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 3.4rem 0.8rem 0.95rem;
  text-align: left;
  color: var(--ftp-ink);
  border: 1.5px dashed var(--ftp-line-strong);
  border-radius: var(--ftp-radius-sm);
  background: rgba(10, 18, 14, 0.5);
  cursor: pointer;
  font-family: var(--ftp-font-body);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.ftp-lifeline:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--ftp-gold);
  background: rgba(255, 201, 77, 0.06);
}

.ftp-lifeline:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ftp-lifeline strong {
  font: 700 0.98rem/1.2 var(--ftp-font-display);
}

.ftp-lifeline span {
  color: var(--ftp-dim);
  font-size: 0.8rem;
  line-height: 1.4;
}

.ftp-lifeline em {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  color: var(--ftp-gold);
  font: 700 0.68rem/1.2 var(--ftp-font-mono);
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ftp-lifeline[data-used='true'] {
  opacity: 0.5;
}

.ftp-lifeline[data-used='true'] strong {
  text-decoration: line-through;
}

.ftp-lifeline[data-used='true'] em {
  color: var(--ftp-red);
  transform: rotate(-6deg);
  border: 1.5px solid var(--ftp-red);
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
}

.ftp-scan-block {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.ftp-scan-button {
  width: 100%;
  color: var(--ftp-night);
  background: linear-gradient(100deg, var(--ftp-teal) 0%, var(--ftp-lime) 55%, var(--ftp-orange) 100%);
  box-shadow: 0 6px 22px rgba(95, 212, 232, 0.25);
  font: 800 1rem/1 var(--ftp-font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ftp-scan-button:hover:not(:disabled) {
  box-shadow: 0 10px 28px rgba(214, 244, 80, 0.3);
}

.ftp-scan-button:disabled {
  background: rgba(242, 247, 239, 0.1);
}

.ftp-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0.8rem 0;
}

.ftp-stat {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--ftp-line);
  border-radius: var(--ftp-radius-sm);
  background: rgba(10, 18, 14, 0.45);
}

.ftp-stat span {
  color: var(--ftp-dim);
  font: 600 0.62rem/1.2 var(--ftp-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ftp-stat strong {
  font: 700 1.05rem/1.2 var(--ftp-font-display);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ftp-feed {
  display: grid;
  gap: 0.55rem;
}

.ftp-event-card {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ftp-line);
  border-left-width: 3px;
  border-radius: var(--ftp-radius-sm);
  background: rgba(10, 18, 14, 0.45);
}

.ftp-event-card[data-fresh='true'] {
  animation: ftpRise 420ms ease-out backwards;
}

.ftp-event-card h3 {
  margin: 0;
  font: 700 0.92rem/1.3 var(--ftp-font-display);
}

.ftp-event-card p {
  margin: 0.25rem 0 0;
  color: var(--ftp-dim);
  font-size: 0.85rem;
}

.ftp-event-card[data-type='sabotage'] { border-left-color: var(--ftp-red); }
.ftp-event-card[data-type='signal'],
.ftp-event-card[data-type='signal_offer'] { border-left-color: var(--ftp-teal); }
.ftp-event-card[data-type='clue'] { border-left-color: var(--ftp-lime); }
.ftp-event-card[data-type='lifeline'] { border-left-color: var(--ftp-gold); }
.ftp-event-card[data-type='mercy'],
.ftp-event-card[data-type='safety'],
.ftp-event-card[data-type='safety_boundary'] { border-left-color: var(--ftp-mint); }
.ftp-event-card[data-type='twist'],
.ftp-event-card[data-type='last_chance'] { border-left-color: var(--ftp-orange); }

/* Status card: field note up top, collapsible game log below */

.ftp-status-card {
  display: grid;
  gap: 0.7rem;
  padding: 0.7rem;
}

.ftp-status-card .ftp-field-note {
  border-radius: var(--ftp-radius-sm);
}

.ftp-game-log {
  display: grid;
  gap: 0.6rem;
}

.ftp-log-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--ftp-line);
  border-radius: var(--ftp-radius-sm);
  background: rgba(10, 18, 14, 0.45);
  color: var(--ftp-ink);
  font-family: var(--ftp-font-body);
  text-align: left;
  cursor: pointer;
}

.ftp-log-toggle .ftp-kicker {
  margin: 0;
}

.ftp-log-toggle em {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ftp-dim);
  font-size: 0.8rem;
  font-style: normal;
}

.ftp-log-caret {
  margin-left: auto;
  color: var(--ftp-lime);
}

.ftp-game-log .ftp-button--quiet {
  width: 100%;
}

.ftp-effect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.6rem;
}

.ftp-effect-card {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid rgba(255, 106, 61, 0.5);
  border-radius: var(--ftp-radius-sm);
  background: rgba(255, 106, 61, 0.09);
}

.ftp-effect-card[data-fresh='true'] {
  animation: ftpRise 420ms ease-out backwards;
}

.ftp-effect-card strong {
  font: 700 0.92rem/1.25 var(--ftp-font-display);
}

.ftp-effect-card span {
  color: var(--ftp-dim);
  font-size: 0.8rem;
}

.ftp-effect-card em {
  color: var(--ftp-orange);
  font: 700 0.85rem/1.2 var(--ftp-font-mono);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.ftp-tracking-guard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(255, 201, 77, 0.4);
  border-radius: var(--ftp-radius-sm);
  background: rgba(255, 201, 77, 0.07);
}

.ftp-tracking-guard strong {
  font: 700 0.95rem/1.3 var(--ftp-font-display);
}

.ftp-tracking-guard p {
  margin: 0.2rem 0 0;
  color: var(--ftp-dim);
  font-size: 0.84rem;
}

.ftp-tracking-guard[data-state='permission-denied'],
.ftp-tracking-guard[data-state='offline'],
.ftp-tracking-guard[data-state='degraded'] {
  border-color: rgba(255, 93, 93, 0.45);
  background: rgba(255, 93, 93, 0.07);
}

/* --------------------------------------------------------------------------
   DROP DOCK
   -------------------------------------------------------------------------- */

.ftp-drop-zone {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: grid;
  gap: 0.35rem;
  padding:
    0.8rem
    max(1rem, env(safe-area-inset-right))
    calc(0.9rem + env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  border-top: 1px solid var(--ftp-line-strong);
  background: rgba(10, 18, 14, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.ftp-drop-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  width: min(720px, 100%);
  margin: 0 auto;
}

.ftp-drop-button {
  min-height: 60px;
  font: 800 1.28rem/1 var(--ftp-font-display);
  letter-spacing: 0;
  text-transform: uppercase;
  border-radius: var(--ftp-radius);
  white-space: normal;
}

.ftp-drop-button:not(:disabled) {
  animation: ftpReady 2.4s ease-in-out infinite;
}

@keyframes ftpReady {
  0%, 100% {
    box-shadow: 0 6px 24px rgba(255, 106, 61, 0.32);
  }
  50% {
    box-shadow: 0 6px 36px rgba(255, 106, 61, 0.55);
  }
}

.ftp-drop-pin-ico {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--ftp-night);
  flex: none;
}

.ftp-safety-button {
  min-width: 96px;
  min-height: 60px;
  white-space: normal;
}

.ftp-drop-reason {
  width: min(720px, 100%);
  min-height: 2.2em;
  margin: 0 auto;
  color: var(--ftp-gold);
  font: 500 0.78rem/1.4 var(--ftp-font-mono);
  text-align: center;
  overflow-wrap: anywhere;
}

.ftp-drop-reason[data-ok='true'] {
  color: rgba(121, 224, 168, 0.85);
}

/* --------------------------------------------------------------------------
   HOT/COLD SCAN OVERLAY
   -------------------------------------------------------------------------- */

.ftp-signal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(6, 10, 8, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ftp-signal-box {
  width: min(460px, 100%);
  display: grid;
  gap: 0.7rem;
  padding: 1.4rem;
  text-align: center;
  border-radius: var(--ftp-radius);
  border: 1.5px solid var(--ftp-line-strong);
  background: var(--ftp-night-2);
  box-shadow: var(--ftp-shadow);
}

.ftp-signal-box p {
  margin: 0;
  color: var(--ftp-dim);
  font-size: 0.9rem;
}

.ftp-signal-box .ftp-field-flash {
  color: var(--ftp-paper);
  font: 800 1.35rem/1.18 var(--ftp-font-display);
  text-transform: uppercase;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.ftp-signal-word {
  margin: 0;
  font: 800 3.45rem/0.95 var(--ftp-font-display);
  letter-spacing: 0;
  text-transform: uppercase;
}

/* Slam the scan onto the screen, then settle. Gated so it plays once per scan. */
.ftp-signal-overlay[data-fresh='true'] .ftp-signal-box {
  animation: ftpSignalSlam 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ftp-signal-overlay[data-fresh='true'] .ftp-signal-word {
  animation: ftpSignalShake 0.5s ease-out both;
}
@keyframes ftpSignalSlam {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes ftpSignalShake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-1.5deg); }
  40% { transform: translateX(6px) rotate(1.5deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

.ftp-signal-box[data-state='warmer'] {
  border-color: rgba(255, 106, 61, 0.65);
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(255, 106, 61, 0.35), transparent 65%),
    var(--ftp-night-2);
}

.ftp-signal-box[data-state='warmer'] .ftp-signal-word {
  color: var(--ftp-orange);
  text-shadow: 0 0 38px rgba(255, 106, 61, 0.55);
  animation: ftpWarm 900ms ease-in-out infinite;
}

@keyframes ftpWarm {
  50% {
    transform: scale(1.035);
  }
}

.ftp-signal-box[data-state='colder'] {
  border-color: rgba(95, 212, 232, 0.6);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(95, 212, 232, 0.28), transparent 65%),
    var(--ftp-night-2);
}

.ftp-signal-box[data-state='colder'] .ftp-signal-word {
  color: var(--ftp-teal);
  text-shadow: 0 0 38px rgba(95, 212, 232, 0.5);
}

.ftp-signal-box[data-state='noise'] .ftp-signal-word {
  color: var(--ftp-dim);
  animation: ftpStatic 200ms steps(2, jump-none) infinite;
}

.ftp-signal-warning {
  padding: 0.5rem 0.7rem;
  color: var(--ftp-night);
  border-radius: var(--ftp-radius-sm);
  background: var(--ftp-gold);
  font: 700 0.78rem/1.3 var(--ftp-font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ftp-signal-meter {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ftp-teal), rgba(242, 247, 239, 0.25) 50%, var(--ftp-orange));
}

.ftp-signal-needle {
  position: absolute;
  top: -5px;
  width: 4px;
  height: 24px;
  border-radius: 2px;
  background: var(--ftp-ink);
  box-shadow: 0 0 10px rgba(242, 247, 239, 0.8);
  transition: left 600ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

/* --------------------------------------------------------------------------
   REVEAL / TRUTH MOMENT
   -------------------------------------------------------------------------- */

.ftp-truth-banner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 2rem 1rem 1.6rem;
  text-align: center;
  border: 1.5px solid rgba(255, 106, 61, 0.45);
  border-radius: var(--ftp-radius);
  background:
    radial-gradient(110% 100% at 50% 0%, rgba(255, 106, 61, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(23, 40, 31, 0.6), rgba(16, 28, 22, 0.9));
  box-shadow: var(--ftp-shadow);
}

[data-fresh='true'].ftp-reveal .ftp-truth-banner,
[data-fresh='true'].ftp-replay .ftp-truth-banner {
  animation: ftpTruth 700ms cubic-bezier(0.2, 0.9, 0.3, 1.15) backwards;
}

@keyframes ftpTruth {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

.ftp-truth-distance {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.ftp-truth-distance strong {
  font: 700 5.8rem/0.95 var(--ftp-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--ftp-orange);
  text-shadow: 0 0 44px rgba(255, 106, 61, 0.4);
}

.ftp-truth-distance span {
  color: var(--ftp-dim);
  font: 600 0.85rem/1.2 var(--ftp-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ftp-truth-name {
  margin: 0;
  font: 800 2.15rem/1.05 var(--ftp-font-display);
  letter-spacing: 0;
}

.ftp-truth-verdict {
  margin: 0.2rem 0 0;
  max-width: 46ch;
  color: var(--ftp-dim);
  font-size: 1rem;
}

.ftp-truth-banner--recap {
  border-color: rgba(255, 201, 77, 0.45);
  background:
    radial-gradient(110% 100% at 50% 0%, rgba(255, 201, 77, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(23, 40, 31, 0.6), rgba(16, 28, 22, 0.9));
}

.ftp-truth-banner--recap .ftp-truth-distance strong {
  color: var(--ftp-gold);
  text-shadow: 0 0 44px rgba(255, 201, 77, 0.38);
}

.ftp-reveal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1.1rem;
  align-items: start;
}

/* Sprint card */

.ftp-sprint-card {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
  border: 1.5px solid rgba(255, 106, 61, 0.5);
  border-radius: var(--ftp-radius-sm);
  background: rgba(255, 106, 61, 0.07);
}

.ftp-sprint-card h2 {
  margin: 0;
  font: 800 1.4rem/1.1 var(--ftp-font-display);
}

.ftp-sprint-card p {
  margin: 0.25rem 0 0;
  color: var(--ftp-dim);
  font-size: 0.92rem;
}

.ftp-sprint-readout {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.ftp-sprint-readout strong {
  font: 700 2.75rem/1 var(--ftp-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ftp-orange);
}

.ftp-sprint-readout span {
  color: var(--ftp-dim);
  font: 600 0.74rem/1.3 var(--ftp-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ftp-sprint-meter {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(242, 247, 239, 0.12);
}

.ftp-sprint-meter span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ftp-teal), var(--ftp-lime), var(--ftp-orange));
  transition: width 700ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.ftp-sprint-card[data-state='inside'] {
  border-color: var(--ftp-lime);
  background: rgba(214, 244, 80, 0.1);
  animation: ftpInside 1.1s ease-in-out infinite;
}

@keyframes ftpInside {
  50% {
    background-color: rgba(214, 244, 80, 0.16);
  }
}

.ftp-sprint-card[data-state='inside'] .ftp-sprint-readout strong {
  color: var(--ftp-lime);
}

.ftp-sprint-card[data-state='complete'] {
  border-color: var(--ftp-mint);
  background: rgba(121, 224, 168, 0.1);
}

.ftp-sprint-card[data-state='complete'] .ftp-sprint-readout strong {
  color: var(--ftp-mint);
}

.ftp-sprint-card[data-state='closed'] {
  border-color: var(--ftp-line-strong);
  background: rgba(10, 18, 14, 0.4);
  opacity: 0.85;
}

/* Map */

.ftp-map-card {
  display: grid;
  gap: 0.6rem;
  padding: 0.9rem;
  border: 1px solid var(--ftp-line);
  border-radius: var(--ftp-radius);
  background: rgba(10, 18, 14, 0.6);
  box-shadow: var(--ftp-shadow);
}

.ftp-map-card svg {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.ftp-map-empty {
  margin: 0;
  padding: 2rem 1rem;
  color: var(--ftp-dim);
  text-align: center;
  font: 500 0.9rem/1.5 var(--ftp-font-mono);
}

.ftp-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font: 600 0.74rem/1.3 var(--ftp-font-mono);
  color: var(--ftp-dim);
}

.ftp-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ftp-map-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.ftp-map-legend i[data-pin='start'] { background: var(--ftp-mint); }
.ftp-map-legend i[data-pin='guess'] { background: var(--ftp-gold); }
.ftp-map-legend i[data-pin='target'] { background: var(--ftp-red); }

/* Achievements */

.ftp-achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  margin: 0.8rem 0 0;
}

.ftp-achievement {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  border: 1.5px dashed rgba(255, 201, 77, 0.55);
  border-radius: var(--ftp-radius-sm);
  background: rgba(255, 201, 77, 0.07);
  transform: rotate(-0.6deg);
}

.ftp-achievement:nth-child(even) {
  transform: rotate(0.7deg);
}

.ftp-achievement[data-fresh='true'] {
  animation: ftpStamp 480ms cubic-bezier(0.2, 1.2, 0.4, 1) backwards;
}

@keyframes ftpStamp {
  from {
    opacity: 0;
    transform: scale(1.4) rotate(-4deg);
  }
}

.ftp-achievement strong {
  color: var(--ftp-gold);
  font: 700 0.95rem/1.25 var(--ftp-font-display);
}

.ftp-achievement span {
  color: var(--ftp-dim);
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   SCORE TALLY
   -------------------------------------------------------------------------- */

.ftp-score-stack {
  display: grid;
  gap: 0.1rem;
}

.ftp-score-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.2rem;
  border-bottom: 1.5px dashed var(--ftp-line);
}

.ftp-score-stack[data-animate='true'] .ftp-score-row {
  opacity: 0;
  animation: ftpTally 380ms ease-out forwards;
  animation-delay: calc(var(--score-index, 0) * 130ms);
}

@keyframes ftpTally {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ftp-score-row strong {
  font: 700 0.95rem/1.3 var(--ftp-font-display);
}

.ftp-score-row em {
  display: block;
  color: var(--ftp-dim);
  font-size: 0.76rem;
  font-style: normal;
}

.ftp-score-row b {
  font: 700 1.1rem/1.2 var(--ftp-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ftp-score-row[data-tone='positive'] b { color: var(--ftp-mint); }
.ftp-score-row[data-tone='penalty'] b { color: var(--ftp-red); }

.ftp-score-row[data-tone='final'] {
  margin-top: 0.4rem;
  padding: 0.8rem 0.6rem;
  border: 1.5px solid rgba(255, 201, 77, 0.5);
  border-radius: var(--ftp-radius-sm);
  background: rgba(255, 201, 77, 0.08);
}

.ftp-score-row[data-tone='final'] b {
  color: var(--ftp-gold);
  font-size: 1.7rem;
}

/* --------------------------------------------------------------------------
   REPLAY / EPISODE RECAP
   -------------------------------------------------------------------------- */

.ftp-replay-stage {
  display: grid;
  gap: 0.9rem;
}

.ftp-replay-focus {
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--ftp-orange);
  border-radius: var(--ftp-radius-sm);
  background: rgba(255, 106, 61, 0.07);
}

.ftp-replay-focus h2 {
  margin: 0.25rem 0 0;
  font: 800 1.4rem/1.15 var(--ftp-font-display);
}

.ftp-replay-focus p:last-child {
  margin: 0.35rem 0 0;
  color: var(--ftp-dim);
}

.ftp-replay-focus[data-type='clue'] { border-left-color: var(--ftp-lime); background: rgba(214, 244, 80, 0.06); }
.ftp-replay-focus[data-type='achievement'] { border-left-color: var(--ftp-gold); background: rgba(255, 201, 77, 0.07); }
.ftp-replay-focus[data-type='sabotage'] { border-left-color: var(--ftp-red); background: rgba(255, 93, 93, 0.07); }

.ftp-replay-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
}

.ftp-timeline-track {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
}

.ftp-timeline-track button {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
  max-width: 200px;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  color: var(--ftp-dim);
  border: 1px solid var(--ftp-line);
  border-radius: 999px;
  background: rgba(10, 18, 14, 0.5);
  cursor: pointer;
  font: 600 0.78rem/1.2 var(--ftp-font-body);
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.ftp-timeline-track button span {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgba(242, 247, 239, 0.1);
  font: 700 0.7rem/1 var(--ftp-font-mono);
}

.ftp-timeline-track button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ftp-timeline-track button[data-current='true'] {
  color: var(--ftp-night);
  border-color: var(--ftp-orange);
  background: var(--ftp-orange);
}

.ftp-timeline-track button[data-current='true'] span {
  color: var(--ftp-ink);
  background: rgba(10, 18, 14, 0.35);
}

.ftp-share-card {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  color: var(--ftp-paper-ink);
  border-radius: var(--ftp-radius-sm);
  background: var(--ftp-paper);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  transform: rotate(-0.35deg);
}

.ftp-share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
@media (max-width: 480px) {
  .ftp-share-actions { grid-template-columns: 1fr; }
}

.ftp-share-card > p:first-child {
  margin: 0;
  font: 500 1rem/1.5 var(--ftp-font-mono);
}

.ftp-share-card .ftp-meta {
  color: var(--ftp-paper-dim);
}

.ftp-share-card .ftp-button--secondary {
  color: var(--ftp-paper-ink);
  border-color: rgba(33, 26, 16, 0.35);
  background: rgba(33, 26, 16, 0.06);
}

.ftp-share-card .ftp-button--secondary:hover:not(:disabled) {
  border-color: var(--ftp-orange-deep);
  background: rgba(255, 106, 61, 0.12);
}

/* --------------------------------------------------------------------------
   DIALOG, TOAST, MISC
   -------------------------------------------------------------------------- */

.ftp-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding:
    calc(1.2rem + env(safe-area-inset-top))
    max(1.2rem, env(safe-area-inset-right))
    calc(1.2rem + env(safe-area-inset-bottom))
    max(1.2rem, env(safe-area-inset-left));
  background: rgba(6, 10, 8, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.ftp-dialog {
  width: min(440px, 100%);
  max-height: calc(100vh - 2.4rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 2.4rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: 0.6rem;
  padding: 1.4rem;
  color: var(--ftp-paper-ink);
  border-radius: var(--ftp-radius);
  background: var(--ftp-paper);
  box-shadow: var(--ftp-shadow);
  animation: ftpTruth 240ms ease-out backwards;
}

.ftp-dialog h2 {
  margin: 0;
  font: 800 1.5rem/1.1 var(--ftp-font-display);
}

.ftp-dialog p {
  margin: 0;
  color: var(--ftp-paper-dim);
  overflow-wrap: anywhere;
}

.ftp-dialog-copy {
  width: 100%;
  min-height: 8rem;
  padding: 0.75rem 0.85rem;
  color: var(--ftp-paper-ink);
  border: 1px solid rgba(33, 26, 16, 0.22);
  border-radius: var(--ftp-radius-sm);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 2px rgba(33, 26, 16, 0.08);
  font: 600 0.86rem/1.45 var(--ftp-font-mono);
  resize: vertical;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
  -webkit-user-select: text;
  touch-action: pan-y;
}

.ftp-dialog-copy:focus-visible {
  outline: 3px solid rgba(255, 106, 61, 0.35);
  outline-offset: 2px;
  border-color: rgba(255, 106, 61, 0.6);
}

.ftp-dialog-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.ftp-dialog .ftp-button--secondary {
  color: var(--ftp-paper-ink);
  border-color: rgba(33, 26, 16, 0.3);
  background: transparent;
}

.ftp-toast {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 60;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(92vw, 480px);
  padding: 0.7rem 1.05rem;
  color: var(--ftp-paper-ink);
  border-left: 4px solid var(--ftp-orange);
  border-radius: var(--ftp-radius-sm);
  background: var(--ftp-paper);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  font: 600 0.9rem/1.35 var(--ftp-font-body);
  animation: ftpToast 300ms cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
}

.ftp-page[data-ftp-dock='true'] .ftp-toast {
  bottom: calc(var(--ftp-drop-dock-space) + 0.75rem + env(safe-area-inset-bottom));
}

@keyframes ftpToast {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
}

.ftp-toast[data-tone='success'] { border-left-color: var(--ftp-mint); }
.ftp-toast[data-tone='warning'] { border-left-color: var(--ftp-gold); }
.ftp-toast[data-tone='danger'] { border-left-color: var(--ftp-red); }
.ftp-toast[data-tone='signal'] { border-left-color: var(--ftp-teal); }
.ftp-toast[data-tone='reveal'] { border-left-color: var(--ftp-orange); }

.ftp-expired-panel .ftp-title {
  color: var(--ftp-ink);
}

/* --------------------------------------------------------------------------
   ADMIN (operator console - paper clipboard look)
   -------------------------------------------------------------------------- */

.ftp-admin {
  display: grid;
  gap: 1rem;
}

.ftp-admin-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 1rem;
}

.ftp-admin-nav {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.ftp-admin-nav button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  color: var(--ftp-ink);
  border: 1px solid var(--ftp-line-strong);
  background: rgba(214, 244, 80, 0.06);
  box-shadow: none;
}

.ftp-admin-nav button[aria-pressed='true'] {
  color: var(--ftp-night);
  background: var(--ftp-gold);
  border-color: var(--ftp-gold);
}

.ftp-admin-panel {
  padding: 1.1rem;
  color: var(--ftp-paper-ink);
  background: var(--ftp-paper);
}

.ftp-admin-panel .ftp-kicker {
  color: var(--ftp-orange-deep);
}

.ftp-admin-panel .ftp-meta,
.ftp-admin-panel .ftp-subtitle,
.ftp-admin-panel .ftp-system-message {
  color: var(--ftp-paper-dim);
}

.ftp-admin h1,
.ftp-admin h2,
.ftp-admin h3 {
  font-family: var(--ftp-font-display);
}

.ftp-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.ftp-admin-field {
  display: grid;
  gap: 0.35rem;
}

.ftp-admin-field label {
  color: var(--ftp-paper-dim);
  font: 700 0.74rem/1.3 var(--ftp-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ftp-admin-field input,
.ftp-admin-field textarea,
.ftp-admin-field select {
  width: 100%;
  min-height: 42px;
  padding: 0.7rem;
  color: var(--ftp-paper-ink);
  border: 1px solid rgba(33, 26, 16, 0.25);
  border-radius: 6px;
  background: #fffdf6;
  font: 500 0.95rem/1.35 var(--ftp-font-body);
}

.ftp-admin-field input:focus-visible,
.ftp-admin-field textarea:focus-visible,
.ftp-admin-field select:focus-visible {
  outline: 2px solid var(--ftp-orange);
  outline-offset: 1px;
}

.ftp-admin-field textarea {
  min-height: 92px;
  resize: vertical;
}

.ftp-admin-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.ftp-admin-checks--wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ftp-admin-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.6rem;
  border: 1px solid rgba(33, 26, 16, 0.16);
  border-radius: var(--ftp-radius-sm);
  background: rgba(33, 26, 16, 0.04);
}

.ftp-admin-row {
  color: var(--ftp-paper-ink);
  border-color: rgba(33, 26, 16, 0.16);
  background: rgba(33, 26, 16, 0.04);
}

.ftp-admin-row h3 {
  margin: 0;
}

.ftp-admin-row p {
  margin: 0.35rem 0 0;
}

.ftp-launch-gate {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.9rem;
  color: var(--ftp-paper-ink);
  border: 1.5px solid rgba(224, 72, 28, 0.45);
  border-radius: var(--ftp-radius-sm);
  background: rgba(224, 72, 28, 0.1);
}

.ftp-launch-gate[data-state='ready'] {
  border-color: rgba(36, 134, 84, 0.5);
  background: rgba(121, 224, 168, 0.16);
}

.ftp-launch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.ftp-launch-head h2,
.ftp-launch-head p {
  margin: 0;
}

.ftp-launch-head span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.35rem 0.6rem;
  color: #5a2119;
  border: 1px solid rgba(224, 72, 28, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  font: 800 0.74rem/1.2 var(--ftp-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ftp-launch-gate[data-state='ready'] .ftp-launch-head span {
  color: #11402a;
  border-color: rgba(36, 134, 84, 0.45);
}

.ftp-launch-evidence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.ftp-launch-evidence article {
  min-height: 78px;
  padding: 0.65rem;
  border: 1px solid rgba(33, 26, 16, 0.14);
  border-radius: var(--ftp-radius-sm);
  background: rgba(255, 255, 255, 0.5);
}

.ftp-launch-evidence strong,
.ftp-launch-evidence span {
  display: block;
}

.ftp-launch-evidence strong {
  color: #5a2119;
  font-size: 1.25rem;
  font-family: var(--ftp-font-display);
}

.ftp-launch-evidence article[data-state='pass'] strong {
  color: #11402a;
}

.ftp-launch-evidence span {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.ftp-launch-blockers {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-left: 1.2rem;
}

.ftp-launch-blockers li {
  overflow-wrap: anywhere;
}

.ftp-playtest-form {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}

.ftp-ready-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  padding: 0.2rem 0.45rem;
  color: #11402a;
  border: 1px solid rgba(36, 134, 84, 0.5);
  border-radius: 999px;
  background: rgba(121, 224, 168, 0.3);
  font: 800 0.66rem/1.2 var(--ftp-font-mono);
  text-transform: uppercase;
}

.ftp-ready-pill[data-state='blocked'] {
  color: #5a2119;
  border-color: rgba(224, 72, 28, 0.5);
  background: rgba(224, 72, 28, 0.18);
}

.ftp-readiness-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.ftp-readiness-strip span {
  padding: 0.28rem 0.45rem;
  color: #11402a;
  border: 1px solid rgba(36, 134, 84, 0.42);
  border-radius: 999px;
  background: rgba(121, 224, 168, 0.22);
  font: 700 0.72rem/1.3 var(--ftp-font-mono);
}

.ftp-readiness-strip span[data-state='fail'] {
  color: #5a2119;
  border-color: rgba(224, 72, 28, 0.42);
  background: rgba(224, 72, 28, 0.14);
}

.ftp-admin-safety {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.85rem;
  border: 1.5px solid rgba(224, 72, 28, 0.45);
  border-radius: var(--ftp-radius-sm);
  background: rgba(224, 72, 28, 0.1);
}

.ftp-admin-safety[data-state='ready'] {
  border-color: rgba(36, 134, 84, 0.48);
  background: rgba(121, 224, 168, 0.14);
}

.ftp-admin-safety h3,
.ftp-admin-safety p {
  margin: 0;
}

.ftp-admin-checklist {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.ftp-admin-checklist .ftp-check-row {
  grid-template-columns: 1rem minmax(0, 0.45fr) minmax(0, 1fr);
  color: var(--ftp-paper-ink);
  border-color: rgba(33, 26, 16, 0.16);
  background: rgba(33, 26, 16, 0.05);
}

.ftp-admin-checklist .ftp-check-row strong {
  font-family: var(--ftp-font-body);
}

.ftp-admin-checklist .ftp-check-row span:last-child {
  color: var(--ftp-paper-dim);
  overflow-wrap: anywhere;
}

.ftp-replay-list {
  display: grid;
  gap: 0.55rem;
}

.ftp-audit-diff {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.ftp-audit-diff div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.32fr) minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  padding: 0.48rem;
  border: 1px solid rgba(33, 26, 16, 0.12);
  border-radius: var(--ftp-radius-sm);
  background: rgba(33, 26, 16, 0.04);
}

.ftp-audit-diff strong,
.ftp-audit-diff span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ftp-audit-diff strong {
  font-size: 0.82rem;
}

.ftp-audit-diff span {
  color: var(--ftp-paper-dim);
  font-size: 0.84rem;
}

/* Admin panels use the shared stat/event cards on paper: flip them dark-on-light */
.ftp-admin-panel .ftp-stat,
.ftp-admin-panel .ftp-event-card {
  color: var(--ftp-paper-ink);
  border-color: rgba(33, 26, 16, 0.16);
  background: rgba(33, 26, 16, 0.045);
}

.ftp-admin-panel .ftp-stat span,
.ftp-admin-panel .ftp-event-card p {
  color: var(--ftp-paper-dim);
}

/* Two-column intro layout (used by the admin login screen) */
.ftp-start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1rem;
  align-items: start;
}

.ftp-hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Shared keyframes & a11y
   -------------------------------------------------------------------------- */

@keyframes ftpPulse {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.84);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

:focus-visible {
  outline: 2px solid var(--ftp-lime);
  outline-offset: 2px;
}

/* Immersion: once the show starts, the site chrome gets out of the way */
.ftp-immersed .ftp-game-header {
  display: none;
}

.ftp-immersed .ftp-broadcast {
  top: calc(0.45rem + env(safe-area-inset-top));
}

@media (prefers-contrast: more) {
  :root {
    --ftp-dim: rgba(242, 247, 239, 0.85);
    --ftp-paper-dim: rgba(33, 26, 16, 0.82);
    --ftp-line: rgba(214, 244, 80, 0.34);
    --ftp-line-strong: rgba(214, 244, 80, 0.55);
  }
}

/* Motion: the OS preference applies unless the player explicitly chooses
   "Full motion" in settings. An explicit "reduced"/"calm" choice is handled
   by the body[data-ftp-motion] rules below and works on any device. */
@media (prefers-reduced-motion: reduce) {
  body:not([data-ftp-motion='full']) *,
  body:not([data-ftp-motion='full']) *::before,
  body:not([data-ftp-motion='full']) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

body[data-ftp-motion='reduced'] *,
body[data-ftp-motion='reduced'] *::before,
body[data-ftp-motion='reduced'] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

/* Calm: keep gentle fades and transitions, drop bursts. */
body[data-ftp-motion='calm'] .ftp-confetti {
  display: none !important;
}

body[data-ftp-motion='calm'] .ftp-clock[data-urgent='true'] .ftp-clock-value,
body[data-ftp-motion='calm'] .ftp-drop-button:not(:disabled),
body[data-ftp-motion='calm'] .ftp-live-dot {
  animation: none !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .ftp-app {
    padding-top: 1.6rem;
  }
}

@media (max-width: 860px) {
  .ftp-live-shell,
  .ftp-reveal-grid,
  .ftp-admin-shell,
  .ftp-howto,
  .ftp-difficulty-grid,
  .ftp-start-grid {
    grid-template-columns: 1fr;
  }

  .ftp-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ftp-achievement-grid,
  .ftp-launch-evidence,
  .ftp-admin-grid,
  .ftp-admin-checks {
    grid-template-columns: 1fr 1fr;
  }

  .ftp-broadcast {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
  }

  .ftp-broadcast .ftp-clock {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-items: start;
  }

  .ftp-clock-value {
    font-size: 3.05rem;
  }

  .ftp-install-strip {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ftp-install-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .ftp-install-actions .ftp-button {
    flex: 1 1 auto;
  }
}

@media (max-width: 480px) {
  :root {
    --ftp-drop-dock-space: 10.35rem;
  }

  .ftp-shell-header {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .ftp-app,
  .ftp-admin {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .ftp-brand img {
    width: 138px;
  }

  .ftp-broadcast {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 0.62rem 0.68rem;
  }

  .ftp-onair,
  .ftp-gps-chip {
    width: 100%;
  }

  .ftp-onair {
    justify-content: center;
    letter-spacing: 0.1em;
  }

  .ftp-gps-chip {
    grid-template-columns: auto minmax(0, 1fr);
    white-space: normal;
  }

  .ftp-gps-chip > span:last-child {
    letter-spacing: 0.07em;
  }

  .ftp-clock-value {
    font-size: 2.65rem;
  }

  .ftp-install-strip {
    gap: 0.65rem;
    padding: 0.72rem;
  }

  .ftp-install-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }

  .ftp-check-row {
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: 0.2rem 0.55rem;
    align-items: start;
    min-height: 0;
  }

  .ftp-check-row .ftp-dot {
    margin-top: 0.3rem;
  }

  .ftp-check-row span:last-child {
    grid-column: 2;
  }

  .ftp-drop-zone {
    padding:
      0.65rem
      max(0.75rem, env(safe-area-inset-right))
      calc(0.7rem + env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left));
  }

  .ftp-drop-inner {
    grid-template-columns: minmax(0, 1fr) minmax(5.4rem, 0.32fr);
    gap: 0.5rem;
  }

  .ftp-drop-button {
    min-height: 56px;
    font-size: 1.08rem;
  }

  .ftp-drop-reason {
    font-size: 0.72rem;
  }

  .ftp-status-grid,
  .ftp-achievement-grid,
  .ftp-launch-evidence,
  .ftp-admin-grid,
  .ftp-admin-checks {
    grid-template-columns: 1fr;
  }

  .ftp-replay-controls,
  .ftp-dialog-actions {
    grid-template-columns: 1fr;
  }

  .ftp-safety-button {
    min-width: 0;
    min-height: 56px;
    padding-inline: 0.65rem;
  }

  .ftp-audit-diff div {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ACCESSIBILITY, SETTINGS, MODES & DELIGHT  (added in the fun pass)
   ========================================================================== */

/* ----- Text size scaling (root font-size is set in JS so rem type scales) ----- */
body[data-ftp-text='lg'] .ftp-clock-value,
body[data-ftp-text='xl'] .ftp-clock-value { letter-spacing: -0.01em; }

/* ----- High contrast ----- */
body[data-ftp-contrast='high'] {
  --ftp-dim: rgba(242, 247, 239, 0.86);
  --ftp-paper-dim: rgba(33, 26, 16, 0.84);
  --ftp-line: rgba(214, 244, 80, 0.34);
  --ftp-line-strong: rgba(214, 244, 80, 0.55);
}
body[data-ftp-contrast='high'] .ftp-panel,
body[data-ftp-contrast='high'] .ftp-mode-button,
body[data-ftp-contrast='high'] .ftp-style-button,
body[data-ftp-contrast='high'] .ftp-receipt,
body[data-ftp-contrast='high'] .ftp-setting-row,
body[data-ftp-contrast='high'] .ftp-board-pill {
  border-color: var(--ftp-line-strong);
}
body[data-ftp-contrast='high'] .ftp-button,
body[data-ftp-contrast='high'] .ftp-style-button[aria-pressed='true'],
body[data-ftp-contrast='high'] .ftp-mode-button[aria-pressed='true'] {
  outline: 2px solid rgba(242, 247, 239, 0.55);
  outline-offset: 1px;
}
body[data-ftp-contrast='high'] :focus-visible {
  outline: 3px solid var(--ftp-lime) !important;
  outline-offset: 2px;
}

/* ----- Colorblind-friendly palette (shift the warm/cool pairs apart) ----- */
body[data-ftp-palette='colorblind'] {
  --ftp-orange: #f08a24;
  --ftp-orange-deep: #c96a00;
  --ftp-teal: #3aa0ff;
  --ftp-mint: #4cc3ff;
  --ftp-red: #ff8c1a;
  --ftp-gold: #ffd24d;
  --ftp-lime: #ffe65c;
}
/* Add a shape cue to warmer/colder so it never depends on hue alone. */
body[data-ftp-palette='colorblind'] .ftp-signal-box[data-state='warmer'] .ftp-signal-word::after { content: ' ▲'; }
body[data-ftp-palette='colorblind'] .ftp-signal-box[data-state='colder'] .ftp-signal-word::after { content: ' ▼'; }

/* ----- Big tap targets ----- */
body[data-ftp-targets='true'] .ftp-button,
body[data-ftp-targets='true'] .ftp-lifeline,
body[data-ftp-targets='true'] .ftp-mode-button,
body[data-ftp-targets='true'] .ftp-style-button,
body[data-ftp-targets='true'] .ftp-setting-row,
body[data-ftp-targets='true'] .ftp-header-link {
  min-height: 60px;
}
body[data-ftp-targets='true'] .ftp-scan-button,
body[data-ftp-targets='true'] .ftp-drop-button {
  min-height: 64px;
}

/* ----- Settings toggle button (gear) ----- */
.ftp-start-topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: -0.4rem;
}
.ftp-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--ftp-line-strong);
  background: rgba(16, 28, 22, 0.7);
  color: var(--ftp-ink);
  font: 600 0.82rem/1 var(--ftp-font-body);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.ftp-settings-toggle:hover { background: rgba(23, 40, 31, 0.92); border-color: var(--ftp-lime); }
.ftp-settings-toggle:active { transform: scale(0.95); }
.ftp-settings-float {
  position: fixed;
  top: calc(0.5rem + env(safe-area-inset-top));
  right: calc(0.6rem + env(safe-area-inset-right));
  z-index: 35;
}
.ftp-tools-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.ftp-tools-head .ftp-kicker { margin: 0; }
.ftp-settings-float .ftp-settings-toggle {
  background: rgba(10, 18, 14, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ftp-settings-toggle--compact {
  padding: 0.5rem;
  width: 42px;
  height: 42px;
  justify-content: center;
}
.ftp-gear {
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  position: relative;
  box-shadow: 0 0 0 2px transparent;
}
.ftp-gear::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.55;
}
.ftp-settings-toggle:hover .ftp-gear { animation: ftpSpin 2.4s linear infinite; }

@keyframes ftpSpin { to { transform: rotate(360deg); } }

/* ----- Settings overlay sheet ----- */
.ftp-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  background: rgba(4, 8, 6, 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (min-width: 720px) {
  .ftp-settings-overlay { align-items: center; }
}
.ftp-settings-sheet {
  width: min(540px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, var(--ftp-night-3), var(--ftp-night-2));
  border: 1px solid var(--ftp-line-strong);
  border-radius: 20px;
  box-shadow: var(--ftp-shadow);
  padding: 1.1rem 1.1rem 1.3rem;
}
.ftp-settings-sheet[data-fresh='true'] { animation: ftpSheetUp 0.34s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes ftpSheetUp {
  from { transform: translateY(26px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.ftp-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.ftp-settings-head h2 {
  margin: 0.1rem 0 0;
  font-family: var(--ftp-font-display);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.ftp-settings-close {
  flex: none;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--ftp-line-strong);
  background: var(--ftp-orange);
  color: #1a0c05;
  font: 800 0.9rem/1 var(--ftp-font-body);
  cursor: pointer;
}
.ftp-settings-close:active { transform: scale(0.96); }
.ftp-settings-note {
  margin: 0 0 0.85rem;
  color: var(--ftp-dim);
  font-size: 0.85rem;
}
.ftp-settings-list { display: grid; gap: 0.55rem; }
.ftp-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-radius: var(--ftp-radius-sm);
  border: 1px solid var(--ftp-line);
  background: rgba(10, 18, 14, 0.55);
  color: var(--ftp-ink);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.ftp-setting-row:hover { border-color: var(--ftp-line-strong); background: rgba(16, 28, 22, 0.8); }
.ftp-setting-row:active { transform: scale(0.99); }
.ftp-setting-copy { display: grid; gap: 0.12rem; min-width: 0; }
.ftp-setting-copy strong { font-size: 0.98rem; }
.ftp-setting-copy em { font-style: normal; color: var(--ftp-dim); font-size: 0.8rem; }
.ftp-setting-value {
  flex: none;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(214, 244, 80, 0.14);
  border: 1px solid var(--ftp-line-strong);
  color: var(--ftp-lime);
  font: 700 0.8rem/1 var(--ftp-font-mono);
  white-space: nowrap;
}
.ftp-switch {
  flex: none;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: rgba(242, 247, 239, 0.16);
  border: 1px solid var(--ftp-line-strong);
  position: relative;
  transition: background 0.2s ease;
}
.ftp-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ftp-ink);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ftp-switch[data-on='true'] { background: var(--ftp-mint); }
.ftp-switch[data-on='true'] i { transform: translateX(20px); background: #08130d; }

/* ----- Play-style (mode) grid + surprise chip ----- */
.ftp-pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.ftp-pick-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.ftp-surprise-chip[data-daily='true'] {
  border-style: solid;
  background: rgba(95, 212, 232, 0.16);
  color: var(--ftp-teal);
}
.ftp-daily-note {
  margin: 0.4rem 0 0;
  color: var(--ftp-teal);
  font-size: 0.82rem;
  font-weight: 600;
}
.ftp-surprise-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px dashed var(--ftp-line-strong);
  background: transparent;
  color: var(--ftp-lime);
  font: 700 0.8rem/1 var(--ftp-font-body);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.18s ease;
}
.ftp-surprise-chip:hover { background: rgba(214, 244, 80, 0.12); }
.ftp-surprise-chip:active { transform: scale(0.94) rotate(-3deg); }
.ftp-surprise-chip[aria-pressed='true'] { border-style: solid; background: rgba(214, 244, 80, 0.16); }
.ftp-pressure-kicker { margin-top: 1rem; }

.ftp-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.55rem;
}
.ftp-style-button {
  display: grid;
  gap: 0.2rem;
  align-content: start;
  text-align: left;
  padding: 0.8rem 0.85rem;
  border-radius: var(--ftp-radius-sm);
  border: 1px solid var(--ftp-line);
  background: rgba(10, 18, 14, 0.5);
  color: var(--ftp-ink);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease;
}
.ftp-style-button:hover { transform: translateY(-2px); border-color: var(--ftp-line-strong); }
.ftp-style-button:active { transform: translateY(0) scale(0.98); }
.ftp-style-button[aria-pressed='true'] {
  border-color: var(--ftp-orange);
  background: rgba(255, 106, 61, 0.12);
  box-shadow: 0 0 0 1px var(--ftp-orange) inset;
}
.ftp-style-button[data-mood='calm'][aria-pressed='true'] { border-color: var(--ftp-teal); background: rgba(95, 212, 232, 0.12); box-shadow: 0 0 0 1px var(--ftp-teal) inset; }
.ftp-style-button[data-mood='mint'][aria-pressed='true'] { border-color: var(--ftp-mint); background: rgba(121, 224, 168, 0.12); box-shadow: 0 0 0 1px var(--ftp-mint) inset; }
.ftp-style-button strong { font-size: 1rem; }
.ftp-style-button small { color: var(--ftp-lime); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.02em; }
.ftp-style-button[data-mood='calm'] small { color: var(--ftp-teal); }
.ftp-style-button[data-mood='mint'] small { color: var(--ftp-mint); }
.ftp-style-button > span { color: var(--ftp-dim); font-size: 0.82rem; line-height: 1.4; }

/* ----- Confetti ----- */
.ftp-confetti {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
}
.ftp-confetti i {
  position: absolute;
  top: -8vh;
  border-radius: 2px;
  background: var(--ftp-c, var(--ftp-orange));
  opacity: 0.95;
  line-height: 1;
  animation-name: ftpConfettiFall;
  animation-timing-function: cubic-bezier(0.3, 0.2, 0.4, 1);
  animation-fill-mode: forwards;
}
.ftp-confetti i[data-shape='circle'] { border-radius: 50%; }
.ftp-confetti i[data-shape='tri'] { background: transparent; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); background-color: var(--ftp-c, var(--ftp-orange)); }
.ftp-confetti i[data-shape='star'] { background-color: var(--ftp-c, var(--ftp-gold)); clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.ftp-confetti i[data-shape='streamer'] { border-radius: 6px; opacity: 0.9; }
.ftp-confetti[data-style='emoji'] i { background: transparent !important; }
@keyframes ftpConfettiFall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--ftp-drift, 0), 112vh, 0) rotate(var(--ftp-rot, 360deg)); opacity: 0.9; }
}

/* ----- Per-run accent color ----- */
:root { --ftp-spark: #d6f450; }

/* ----- Cinematic map: self-drawing route, pulsing target reticle ----- */
[data-fresh='true'] .ftp-map-route {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ftpDrawRoute 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}
[data-fresh='true'] .ftp-map-route--glow { animation-duration: 1.7s; }
@keyframes ftpDrawRoute { to { stroke-dashoffset: 0; } }

.ftp-reticle {
  transform-box: view-box;
  animation: ftpReticle 2.6s ease-out infinite;
}
.ftp-reticle--2 { animation-delay: 1.3s; }
@keyframes ftpReticle {
  0% { transform: scale(0.45); opacity: 0.85; }
  100% { transform: scale(2.1); opacity: 0; }
}

[data-fresh='true'] .ftp-map-guess {
  transform-box: view-box;
  animation: ftpGuessPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both;
}
@keyframes ftpGuessPop {
  0% { transform: scale(0); }
  70% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

body[data-ftp-motion='reduced'] .ftp-reticle,
body[data-ftp-motion='calm'] .ftp-reticle { animation: none; opacity: 0.5; }

/* ----- Button juice: universal press + tactile ripple ----- */
.ftp-drop-button:not(:disabled):active { transform: scale(0.97); }
.ftp-go-button:not(:disabled):active { transform: scale(0.98); }
.ftp-button:not(:disabled):active { transform: translateY(0) scale(0.97); }
.ftp-button { position: relative; overflow: hidden; }
.ftp-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  pointer-events: none;
  animation: ftpRipple 0.6s ease-out forwards;
}
.ftp-go-button .ftp-ripple,
.ftp-drop-button .ftp-ripple { background: rgba(26, 12, 5, 0.32); }
@keyframes ftpRipple {
  to { transform: scale(1); opacity: 0; }
}
body[data-ftp-motion='reduced'] .ftp-ripple { display: none; }

/* ----- OpenStreetMap attribution on auto-generated reveals ----- */
.ftp-osm-credit { font-size: 0.66rem; opacity: 0.7; margin-top: 0.15rem; }

/* ----- "You found it" reveal state ----- */
.ftp-truth-banner[data-found='true'] {
  border-color: var(--ftp-mint);
  box-shadow: 0 0 0 1px var(--ftp-mint) inset, 0 22px 60px rgba(0, 0, 0, 0.5);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(121, 224, 168, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(23, 40, 31, 0.7), rgba(16, 28, 22, 0.92));
}
.ftp-truth-banner[data-found='true'] .ftp-truth-verdict {
  color: var(--ftp-mint);
  font-weight: 800;
}
.ftp-truth-banner[data-found='true']::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--ftp-mint);
  opacity: 0;
  animation: ftpFoundRing 1.1s ease-out 2;
}
@keyframes ftpFoundRing {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}

/* ----- Records, badge chip, badge gallery, result strip ----- */
.ftp-start-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}
.ftp-record-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--ftp-line-strong);
  background: rgba(16, 28, 22, 0.7);
  color: var(--ftp-gold);
  font: 800 0.85rem/1 var(--ftp-font-mono);
  cursor: pointer;
  transition: transform 0.16s ease, background 0.18s ease, border-color 0.18s ease;
}
.ftp-record-chip:hover { background: rgba(23, 40, 31, 0.92); border-color: var(--ftp-gold); }
.ftp-record-chip:active { transform: scale(0.95); }

.ftp-record-line {
  margin: 0;
  color: var(--ftp-dim);
  font: 600 0.78rem/1.4 var(--ftp-font-mono);
  letter-spacing: 0.06em;
  text-align: center;
}

.ftp-record-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.1rem 0 0.4rem;
}
.ftp-record-stat {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0.4rem;
  text-align: center;
  border-radius: var(--ftp-radius-sm);
  border: 1px solid var(--ftp-line);
  background: rgba(10, 18, 14, 0.5);
}
.ftp-record-stat strong { font: 800 1.25rem/1 var(--ftp-font-display); color: var(--ftp-ink); }
.ftp-record-stat span { font-size: 0.66rem; color: var(--ftp-dim); text-transform: uppercase; letter-spacing: 0.06em; }

/* ----- How-to-play onboarding cards ----- */
.ftp-howto-sheet {
  display: grid;
  gap: 0.9rem;
}

.ftp-howto-card {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  min-height: 13rem;
  padding: 1.4rem 1.2rem;
  border: 1px solid var(--ftp-line-strong);
  border-radius: var(--ftp-radius);
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--ftp-spark) 12%, transparent), transparent 65%),
    rgba(16, 28, 22, 0.75);
  text-align: center;
}

.ftp-howto-card[data-step='1'] { background: radial-gradient(120% 100% at 50% 0%, rgba(95, 212, 232, 0.14), transparent 65%), rgba(16, 28, 22, 0.75); }
.ftp-howto-card[data-step='2'] { background: radial-gradient(120% 100% at 50% 0%, rgba(255, 106, 61, 0.15), transparent 65%), rgba(16, 28, 22, 0.75); }
.ftp-howto-card[data-step='3'] { background: radial-gradient(120% 100% at 50% 0%, rgba(121, 224, 168, 0.15), transparent 65%), rgba(16, 28, 22, 0.75); }

.ftp-howto-card[data-fresh='true'],
[data-fresh='true'] .ftp-howto-card {
  animation: ftpRise 420ms ease-out backwards;
}

.ftp-howto-icon {
  font-size: 2.6rem;
  line-height: 1;
}

.ftp-howto-card h3 {
  margin: 0;
  font: 800 1.35rem/1.2 var(--ftp-font-display);
}

.ftp-howto-card p {
  margin: 0;
  max-width: 34ch;
  color: var(--ftp-dim);
  font-size: 0.98rem;
}

.ftp-howto-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
}

.ftp-howto-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(242, 247, 239, 0.2);
  transition: background 0.16s ease, transform 0.16s ease;
}

.ftp-howto-dots i[data-on='true'] {
  background: var(--ftp-lime);
  transform: scale(1.25);
}

.ftp-howto-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
}

.ftp-howto-count {
  color: var(--ftp-dim);
  font: 600 0.72rem/1.2 var(--ftp-font-mono);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.ftp-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.ftp-badge-card {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem;
  border-radius: var(--ftp-radius-sm);
  border: 1px solid var(--ftp-line);
  background: rgba(10, 18, 14, 0.55);
  text-align: center;
}
.ftp-badge-card[data-earned='true'] {
  border-color: var(--ftp-gold);
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 201, 77, 0.16), transparent 70%), rgba(16, 28, 22, 0.7);
}
.ftp-badge-card[data-earned='false'] { opacity: 0.58; filter: grayscale(0.6); }
.ftp-badge-ico { font-size: 1.6rem; }
.ftp-badge-card strong { font-size: 0.92rem; }
.ftp-badge-card span { font-size: 0.74rem; color: var(--ftp-dim); }
.ftp-badge-card em { font-size: 0.68rem; color: var(--ftp-gold); font-style: normal; font-weight: 700; }

.ftp-result-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.ftp-result-strip span {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(214, 244, 80, 0.16);
  border: 1px solid var(--ftp-line-strong);
  color: var(--ftp-lime);
  font: 800 0.78rem/1 var(--ftp-font-body);
}
.ftp-result-strip[data-fresh='true'] span {
  animation: ftpResultPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ftp-result-strip[data-fresh='true'] span:nth-child(2) { animation-delay: 0.1s; }
.ftp-result-strip[data-fresh='true'] span:nth-child(3) { animation-delay: 0.2s; }
@keyframes ftpResultPop {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 560px) {
  .ftp-style-grid { grid-template-columns: 1fr; }
}