/*
  Sport layer for the "best X apps" comparison pages.
  ------------------------------------------------------------------
  pl.css stays the design system — green hero, gold accents, Poppins/
  Inter, white cards. This file only dresses a page in its sport so a fan
  recognises it at a glance, the way /ufc-pick-em/ turns the same system
  into an arena:

    body.sport-gridiron   NFL and college — yard lines, hash marks and end
                          zones on the turf-green hero, a stadium scoreboard
    body.sport-college    adds letterman stripes and a Saturday pennant
    body.sport-pitch      soccer — mowing stripes, halfway line, centre
                          circle and boxes

  Used by:
    /best-nfl-pick-em-apps/                (gridiron)
    /best-college-football-pick-em-apps/   (gridiron + college)
    /es/mejores-apps-pronosticos-futbol/   (pitch)
    /pt/melhores-apps-palpites-futebol/    (pitch)

  Generic field motifs only: no league, team or competitor marks, colours
  or trade dress. The scoreboard shows a real BeTeam scoring example, so
  the decoration also explains the product.
*/

/* --------------------------------------------------------------
   Field markings behind the hero and the closing band
   -------------------------------------------------------------- */
.sport-field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.hero .wrap, .cta-band .wrap { z-index: 1; }

/* Turf: darker, deeper green than the default hero so the white chalk reads. */
.sport-gridiron .hero, .sport-gridiron .cta-band,
.sport-pitch .hero, .sport-pitch .cta-band {
  background: linear-gradient(170deg, #2f7d2c 0%, #24642a 55%, #17421a 100%);
}
.sport-gridiron .hero::after, .sport-pitch .hero::after { opacity: 0.55; }

/* A thin band under the hero, like the sideline. */
.sport-strip { height: 10px; }
.sport-gridiron .sport-strip {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 2px, transparent 2px 22px) center / 100% 6px no-repeat,
    #14391a;
}
.sport-college .sport-strip {
  height: 12px;
  background: linear-gradient(180deg, var(--gold) 0 33%, #fff 33% 66%, var(--gold) 66% 100%);
  border-bottom: 3px solid #14391a;
}
.sport-pitch .sport-strip {
  background: linear-gradient(180deg, #17421a 0 35%, rgba(255, 255, 255, 0.9) 35% 65%, #17421a 65% 100%);
}

/* Chip: the live dot becomes a football (gridiron) or keeps pulsing (pitch). */
.sport-gridiron .chip .dot {
  width: 15px; height: 9px; border-radius: 50%;
  background: #a0522d;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.0);
  position: relative;
}
.sport-gridiron .chip .dot::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 1.5px;
  background: #fff; border-radius: 1px;
}
.sport-pitch .chip .dot { animation: sport-pulse 1.8s ease-in-out infinite; }
@keyframes sport-pulse { 50% { opacity: 0.35; } }

/* --------------------------------------------------------------
   Hero layout: copy on the left, scoreboard on the right
   -------------------------------------------------------------- */
.sport-hero { display: grid; gap: 28px; align-items: center; }
@media (min-width: 940px) {
  .sport-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 48px; }
}

/* --------------------------------------------------------------
   Scoreboard — a stadium board showing one real scoring example
   -------------------------------------------------------------- */
.sb {
  margin: 0; max-width: 380px; width: 100%; justify-self: center;
  background: linear-gradient(180deg, #121c16 0%, #0a100c 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px; padding: 16px 18px 18px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #fff; position: relative;
}
.sb-pennant + .sb-top { margin-top: 14px; }
.sb-top {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
}
.sb-final {
  color: #0a100c; background: var(--gold); border-radius: 6px;
  padding: 3px 8px; letter-spacing: 0.12em;
}
.sb-cols {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0 14px;
  margin-top: 14px; align-items: center;
}
.sb-cols .h {
  font-family: var(--display); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
  text-align: center; min-width: 54px;
}
.sb-lbl { font-size: 13px; color: rgba(255, 255, 255, 0.78); padding: 8px 0; }
.sb-n {
  font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1;
  font-variant-numeric: tabular-nums; text-align: center; min-width: 54px;
  padding: 6px 0; border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffd166; text-shadow: 0 0 14px rgba(255, 196, 61, 0.45);
}
.sb-n.is-final { color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, 0.3); }
.sb-cols .sb-lbl + .sb-n { margin-top: 0; }
.sb-row-gap { grid-column: 1 / -1; height: 8px; }
.sb-pts {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(45, 122, 42, 0.32); border: 1px solid rgba(124, 196, 110, 0.35);
}
.sb-pts b {
  font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--gold);
  line-height: 1; flex: none;
  /* Transform only, no fill: if the animation never runs, the score still shows. */
  animation: sport-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.sb-pts span { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.9); }
@keyframes sport-pop { from { transform: scale(0.4); } to { transform: scale(1); } }
.sb-scale {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none;
}
.sb-scale li {
  font-size: 12px; color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 4px 10px;
}
.sb-scale b { color: #fff; font-family: var(--display); margin-inline-start: 3px; }

/* College: a Saturday pennant on top of the board. */
.sb-pennant {
  position: absolute; top: -22px; inset-inline-start: 14px; width: 156px; height: 40px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

/* --------------------------------------------------------------
   Sections and tables
   -------------------------------------------------------------- */
.sport-gridiron .eyebrow::before,
.sport-pitch .eyebrow::before {
  content: ""; display: inline-block; vertical-align: -1px; margin-inline-end: 8px;
  width: 15px; height: 10px; background: center / contain no-repeat;
}
.sport-gridiron .eyebrow::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cellipse cx='15' cy='10' rx='14' ry='9' fill='%232d7a2a'/%3E%3Cpath d='M9 10h12M12 8v4M15 8v4M18 8v4' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sport-pitch .eyebrow::before {
  width: 12px; height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fff' stroke='%232d7a2a' stroke-width='2'/%3E%3Cpath d='M12 7.5l4.3 3.1-1.6 5h-5.4l-1.6-5z' fill='%232d7a2a'/%3E%3C/svg%3E");
}

/* Mint sections: faint yard lines / mowing stripes. */
.sport-gridiron .sec-mint {
  background:
    repeating-linear-gradient(90deg, rgba(45, 122, 42, 0.07) 0 2px, transparent 2px 96px),
    linear-gradient(180deg, var(--bg) 0%, var(--mint) 100%);
}
.sport-pitch .sec-mint {
  background:
    repeating-linear-gradient(90deg, rgba(45, 122, 42, 0.045) 0 120px, transparent 120px 240px),
    linear-gradient(180deg, var(--bg) 0%, var(--mint) 100%);
}

/* Table header as a stadium board; BeTeam's row marked like possession. */
.sport-gridiron thead th, .sport-pitch thead th {
  background: #12201a; color: #fff;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.sport-gridiron thead th:first-child, .sport-pitch thead th:first-child { color: var(--gold); }
tr.is-us-row th, tr.is-us-row td { background: rgba(255, 224, 138, 0.22); color: var(--ink); }
tr.is-us-row th { box-shadow: inset 4px 0 0 var(--amber); }
html[dir="rtl"] tr.is-us-row th { box-shadow: inset -4px 0 0 var(--amber); }
/* "+3" must not flip to "3+" inside a right-to-left line. */
.sb-pts b { direction: ltr; unicode-bidi: isolate; }
/* Arabic has no letter case and wide tracking breaks its joins. */
html[dir="rtl"] .sport-gridiron thead th, html[dir="rtl"] .sport-pitch thead th,
html[dir="rtl"] .sb-top, html[dir="rtl"] .sb-cols .h { letter-spacing: 0; }

/* --------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sb-pts b, .sport-pitch .chip .dot { animation: none; }
}