/* ===== First Touch =====
   Newbie on-ramp. Lives alongside Shootout in #game-root.
   Pairs with /game/shootout/shootout.css (reuses .sh- primitives + vars). */

/* ===== Chooser secondary CTA — outlined override of .sh-play-btn =====
   Inherits primary's dimensions (padding, radius, min-height, gap, main/sub layout)
   so the two buttons have matching shape; only color treatment differs. */
.ft-play-secondary {
  background: transparent;
  color: var(--sh-warn);
  border: 2px solid var(--sh-warn);
  box-shadow: none;
}
.ft-play-secondary:hover {
  background: rgba(245, 200, 66, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.ft-play-secondary .sh-play-btn-sub {
  color: rgba(255, 255, 255, 0.78);
}

/* Compact variant: tighter padding + slightly smaller type so the chooser
   fits comfortably on a 700px mobile viewport alongside Play Shootout, the
   3 rule lines, the streak panel, and the rest of the start-screen stack. */
.ft-play-compact {
  padding: 10px 18px;
  min-height: 52px;
}
.ft-play-compact .sh-play-btn-main {
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.ft-play-compact .sh-play-btn-sub {
  font-size: 0.72rem;
  margin-top: 1px;
}

/* ===== In-match card screen (small spacing tweaks, reuses sh-claim-card) ===== */
.ft-counter { top: 18px; }
.ft-screen-card { padding-top: 56px; }

/* ===== Result screen ===== */
.ft-screen-result {
  padding-top: 36px;
  padding-bottom: 24px;
  gap: 10px;
}
.ft-sticker {
  display: inline-block;
  background: rgba(245, 200, 66, 0.22);
  border: 1px solid rgba(245, 200, 66, 0.6);
  color: var(--sh-warn);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.ft-result-hero {
  font-size: clamp(56px, 18vw, 80px);
  line-height: 1;
  margin: 0 auto -2px;
}
.ft-verdict { color: var(--sh-warn); margin: 0; }
.ft-verdict-close { color: #fff; opacity: 0.92; margin: 0; }
.ft-blurb {
  font-size: 1rem;
  line-height: 1.45;
  max-width: 30ch;
  margin: 0 auto;
  opacity: 0.92;
}
.ft-score {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2rem);
  letter-spacing: 0.04em;
  margin: 4px 0 6px;
  opacity: 0.95;
}

/* Recap (loss path only) */
.ft-recap {
  list-style: none;
  padding: 14px 16px;
  margin: 4px 0 8px;
  background: rgba(0, 0, 0, 0.32);
  border-radius: 12px;
  width: 100%;
  max-width: 360px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ft-recap-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  line-height: 1.5;
}
.ft-recap-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ft-recap-statement {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
}
.ft-recap-explain {
  font-size: 0.86rem;
  opacity: 0.82;
  color: #fff;
}

/* Action stack */
.ft-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  margin-top: 8px;
}
.ft-cta-primary {
  /* Reuses .sh-rematch base; nothing extra needed. */
}
.ft-cta-secondary {
  /* Reuses .sh-share base; nothing extra needed. */
}

.ft-footnote {
  margin-top: 12px;
  font-size: 0.78rem;
  opacity: 0.7;
  max-width: 36ch;
  line-height: 1.4;
}