/* ============================================================================
 * FantasyStakes — UI/UX Rev 4.2 · League and Action layouts
 * Sprint 7 Package 2
 * ========================================================================== */

/* ── League ────────────────────────────────────────────────────────────────
 * Two zones share the space left under the strip. Neither can grow at the
 * other's expense: both sit at `flex:1 1 0` (components.css `.fs-zones`).
 * The Bets zone scrolls and snaps; the Pools zone never scrolls. */

.fs-zone--bets,
.fs-zone--pools {
  min-height: 0;
}

/* Vertical carousel — one complete matchup card at a time.
 * `y mandatory` makes every scroll settle on a card boundary, so a card is
 * never presented half-shown. */
.fs-carousel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.fs-carousel::-webkit-scrollbar { display: none; }

.fs-carousel__item {
  height: 100%;
  padding-bottom: var(--fs-space-2);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Pools — all four visible together, no scrolling inside the zone. */
.fs-pools {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--fs-space-2);
}

.fs-pool {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  /* A grid item defaults to min-height:auto and so refuses to shrink below its
   * own content — which on a short phone made the 2x2 grid scroll, breaking the
   * POR's "all four visible together". The card compresses and clips instead. */
  min-height: 0;
  overflow: hidden;
  padding: var(--fs-space-3) var(--fs-space-4);
  background: var(--card);
  border: var(--fs-border);
  border-radius: var(--fs-radius-tile);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.fs-pool:active { background: #1a1610; }
.fs-pool:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }

/* The badge carries the subject type, with ROLLOVER as a modifier on it. A
 * rolling Pool is not a different kind of Pool, so it takes a marked badge and
 * a gold pot — never a gold card. */
.fs-pool__badge {
  align-self: flex-start;
  padding: 1px var(--fs-space-2);
  border-radius: 3px;
  font-size: 7px;
  font-weight: var(--fs-weight-heavy);
  letter-spacing: .1em;
  white-space: nowrap;
}

.fs-pool__badge.is-team { background: var(--greenbg); color: var(--green2); }
.fs-pool__badge.is-matchup { background: #12202a; color: #8fc3e8; }
.fs-pool__badge.is-rollover { box-shadow: inset 0 0 0 1px var(--gold); }

.fs-pool__name {
  /* Clamped to two lines: a long catalog name must not push the rule and the
   * pot out of a card that cannot grow. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
  font-size: 9.5px;
  font-weight: var(--fs-weight-strong);
  line-height: 1.25;
  color: var(--bone);
}

.fs-pool__rule {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  font-size: 8px;
  line-height: 1.35;
  color: var(--g1);
}

.fs-pool__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fs-space-2);
  padding-top: 3px;
  border-top: var(--fs-border-hair);
  font-size: 8px;
}

.fs-pool__entry { color: var(--g2); white-space: nowrap; }

.fs-pool__pot {
  font-family: var(--fs-font-money);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fs-weight-strong);
  color: var(--bone);
}

.fs-pool__pot.is-carried { color: var(--gold); }

.fs-pool__carried {
  font-size: 7px;
  letter-spacing: .06em;
  color: var(--gold);
}

/* ── Action ────────────────────────────────────────────────────────────────
 * Four single-row horizontal rails. The column scrolls; each rail does not
 * wrap, so a lifecycle stays one row and its cards can afford to be taller. */

.fs-rails {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--fs-gutter) var(--fs-space-4);
}

.fs-railsec + .fs-railsec { margin-top: var(--fs-space-2); }

.fs-railsec .fs-heading { margin-top: var(--fs-space-4); }

.fs-railsec .fs-rail > .fs-rail__item {
  width: 216px;
  min-height: 132px;
}

/* ── Short phones ──────────────────────────────────────────────────────────
 * On a 667px-tall device League's two zones are each roughly 40px shorter than
 * on a 844px one, and both cards ran out of room: the matchup card clipped its
 * own foot, and the Pool card's flexible rows were squashed below a line box,
 * which slices text through the middle of the glyphs.
 *
 * The answer is to DROP the least load-bearing content rather than compress
 * everything until nothing is legible. A card loses its line of analysis and a
 * Pool loses its rule text — both are one tap away in the detail sheet — and
 * what remains keeps a whole line box each. */

@media (max-height: 720px) {
  /* The teaser is the card's most expendable line. */
  .fs-carousel .fs-wcard__copy { display: none; }

  .fs-carousel .fs-market { min-height: 34px; padding: 2px 0; }

  .fs-pool { padding: var(--fs-space-2) var(--fs-space-3); }

  /* One whole line each, and no shrinking below it. */
  .fs-pool__name {
    -webkit-line-clamp: 1;
    flex: 0 0 auto;
  }

  /* `flex: 0 0 auto` matters as much as the clamp: a clamped box that is still
   * allowed to stretch renders a second line and lets the card's overflow slice
   * it, which is the artefact this whole block exists to remove. */
  .fs-pool__rule {
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* The foot stays pinned to the bottom now that nothing above it stretches. */
  .fs-pool__foot { margin-top: auto; }

  /* The badge already says ROLLOVER; the second line is redundant here. */
  .fs-pool__carried { display: none; }
}