/* Frame Judge — app-local layout only.
   Every color/radius/type value below MUST reference a var(--color-*) /
   var(--radius-*) / var(--text-*) / var(--spacing-*) role token from lh-ui.css.
   No raw hex — see ANTI-SLOP.md. */

#fj-nav-score {
  white-space: nowrap;
}

.fj-progress-row {
  justify-content: space-between;
}

/* ── The matchup card ────────────────────────────────────────────────────
   overscroll-behavior-x + touch-action guard a Chromebook trackpad two-finger
   horizontal swipe from being interpreted as browser back/forward navigation
   while the user is dragging a photo choice (pre-mortem adjustment). */
.fj-matchup {
  position: relative;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  user-select: none;
  -webkit-user-select: none;
}

.fj-photo {
  position: relative;
  aspect-ratio: 16 / 9; /* v2 content is generated 16:9; a 4:3 cover-crop tightened every frame */
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}

.fj-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* the whole tile is the drag/tap target, not the <img> */
}

/* Designed hover + focus states (Tier 0 App-UI floor: intentional, not default). */
.fj-photo:hover {
  border-color: var(--color-border-strong);
}
.fj-photo:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

/* Applied by JS while a drag is in progress, to the side the drag is heading
   toward / away from. transform/opacity only — motion budget compliant. */
.fj-photo.is-leading {
  border-color: var(--color-accent);
}
.fj-photo.is-trailing {
  opacity: 0.7;
}

/* Correct / incorrect flash after a commit (JS toggles briefly before the
   feedback screen swaps in; skipped entirely under reduced-motion). */
.fj-photo.is-correct {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface-2));
}
.fj-photo.is-incorrect {
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface-2));
}

.fj-controls {
  justify-content: center;
}

#fj-feedback-badge {
  width: fit-content;
}

/* ── Responsive ──────────────────────────────────────────────────────────
   lh-grid--2 already collapses to a single column at 720px (lh-ui.css), so
   the two photos stack full-width on a 375px phone instead of squeezing
   side by side. This just tunes spacing/height at each tested breakpoint. */
@media (max-width: 719px) {
  .fj-photo { aspect-ratio: 16 / 9; }
  .fj-controls { flex-direction: column; align-items: stretch; }
  .fj-controls .lh-btn { width: 100%; }
}

@media (min-width: 1024px) {
  .fj-photo { aspect-ratio: 16 / 9; }
}

@media (min-width: 1440px) {
  .fj-matchup { gap: var(--spacing-xl); }
}