/* ============================================================
   skins.css — the structural half of the design switch.

   tokens.css re-colours the site for each data-skin; this file
   decides which SCENE is painted and which centrepiece the lockup
   holds. All three designs live in the markup at once and exactly
   one is shown, which is what makes the toggle in Settings instant
   and reversible.

     data-skin="txc"       Xavier Cup 2026 tiles (the default)
     data-skin="worldcup"  a floodlit pitch
     data-skin="sands"     the original Sands of Time beach

   Nothing here touches the layout of the hero: the stadium uses
   the SAME band offsets as the beach (--horizon, --shore,
   --scene-h from screens/landing.css), so the lockup lands in the
   same place either way and the responsive steps already written
   for the beach hold for the pitch too.
   ============================================================ */

/* ---------- Which scene ---------- */
.cup-scene { display: none; }

:root[data-skin="worldcup"] .hero-scene { display: none; }
:root[data-skin="worldcup"] .cup-scene  { display: block; }

/* ---------- Which centrepiece ---------- */
.lockup__piece--worldcup { display: none; }
:root[data-skin="worldcup"] .lockup__piece--sands    { display: none; }
:root[data-skin="worldcup"] .lockup__piece--worldcup { display: block; }

/* The sand mound only makes sense on sand. */
:root[data-skin="worldcup"] .lockup__sand-mound { display: none; }

/* The rose catches the floodlights instead of the sun. */
:root[data-skin="worldcup"] .lockup__rose { color: #FFFFFF; opacity: 0.20; }

/* The trophy is metal, not glass — a warm rim light, no lantern glow. */
:root[data-skin="worldcup"] .lockup__piece--worldcup {
  filter: drop-shadow(0 14px 22px rgba(6, 30, 18, 0.42));
}
:root[data-skin="worldcup"] .lockup__hourglass-shadow {
  background: radial-gradient(ellipse 50% 55% at 50% 50%,
    rgba(4, 30, 16, 0.42) 0%,
    rgba(4, 30, 16, 0.16) 55%,
    transparent 72%);
}

/* ---------- The ground under the landing screen ---------- */
:root[data-skin="worldcup"] .screen--landing { background: var(--cup-pitch-3); }
:root[data-skin="worldcup"] .landing-theme {
  background: linear-gradient(180deg,
    var(--cup-pitch-3) 0%,
    color-mix(in srgb, var(--cup-pitch-3) 55%, var(--surface-2)) 45%,
    var(--surface-2) 100%);
}

/* The closing beach shot belongs to the other season. */
:root[data-skin="worldcup"] .sea-scene { display: none; }
:root[data-skin="worldcup"] .site-footer { padding-bottom: calc(var(--space-5) + 56px); }
:root[data-skin="worldcup"] .site-footer::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: repeating-linear-gradient(90deg,
    var(--cup-pitch-1) 0 72px,
    var(--cup-pitch-2) 72px 144px);
  border-top: 3px solid var(--cup-line);
}

/* ============================================================
   THE STADIUM
   Bands, top to bottom:

     0          ┌──────────────────┐
                │      SKY         │  floodlight masts rise into it
     --horizon  ├──────────────────┤
                │     STANDS       │  three tiers of crowd
     --shore-26 ├──────────────────┤  hoardings
     --shore    ├──────────────────┤
                │      PITCH       │  mow stripes + markings
     bottom     └──────────────────┘
   ============================================================ */

.cup-scene {
  position: absolute;
  inset: 0;
  height: var(--scene-h);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Sky ---------- */
.cup-scene__sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--shore);
  background: linear-gradient(180deg,
    var(--cup-sky-top) 0%,
    var(--cup-sky-mid) 58%,
    var(--cup-sky-bot) 100%);
}

/* ---------- Floodlights ---------- */
/* The wrapper is deliberately unclipped: the mast is drawn by
   ::before and tapered there, because a clip-path on .floodlight
   itself would also cut off the lamp head and the light it throws. */
.floodlight {
  position: absolute;
  top: calc(var(--horizon) - 158px);
  width: 96px;
  height: 160px;
  z-index: 2;
}
.floodlight::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 13px;
  height: calc(100% - 28px);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--cup-mast) 70%, #000) 0%,
    var(--cup-mast) 45%,
    color-mix(in srgb, var(--cup-mast) 80%, #fff) 100%);
  clip-path: polygon(34% 0, 66% 0, 100% 100%, 0% 100%);
}
.floodlight--left  { left: 11%; margin-left: -48px; }
.floodlight--right { right: 11%; margin-right: -48px; }

.floodlight__head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 30px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(90deg,
      var(--cup-gold-lt) 0 10px,
      transparent 10px 15px),
    var(--cup-mast);
  border: 2px solid color-mix(in srgb, var(--cup-mast) 60%, #000);
  box-shadow: 0 0 22px 4px var(--cup-glow);
}
/* The light itself — a soft cone, not a hard beam */
.floodlight__glow {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 300px;
  background: linear-gradient(180deg, var(--cup-glow) 0%, transparent 78%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0% 100%);
  opacity: 0.55;
  animation: floodFlicker 9s ease-in-out infinite;
}

/* ---------- Stands ---------- */
.cup-scene__stands {
  position: absolute;
  left: 0; right: 0;
  top: var(--horizon);
  height: calc(var(--shore) - var(--horizon));
  z-index: 3;
}
.stand-tier {
  position: absolute;
  left: 0; right: 0;
  /* Crowd: two offset dot grids so it never reads as one pattern */
  background-image:
    radial-gradient(1.6px 1.6px at 6px 5px, var(--cup-crowd) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 16px 12px, var(--cup-crowd) 50%, transparent 51%);
  background-size: 22px 17px, 22px 17px;
}
.stand-tier--back {
  top: 0; height: 46%;
  background-color: var(--cup-stand-back);
}
.stand-tier--mid {
  top: 38%; height: 34%;
  background-color: var(--cup-stand-mid);
  border-top: 3px solid color-mix(in srgb, var(--cup-stand-back) 60%, #000);
}
.stand-tier--front {
  top: 66%; height: 34%;
  background-color: var(--cup-stand-front);
  border-top: 3px solid color-mix(in srgb, var(--cup-stand-mid) 60%, #000);
}

/* ---------- Hoardings ---------- */
.cup-scene__hoarding {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--shore) - 26px);
  height: 26px;
  z-index: 4;
  background:
    repeating-linear-gradient(90deg,
      var(--cup-hoarding) 0 150px,
      color-mix(in srgb, var(--cup-hoarding) 78%, #fff) 150px 300px);
  border-top: 2px solid color-mix(in srgb, var(--cup-hoarding) 60%, #000);
  border-bottom: 3px solid var(--cup-line);
}

/* ---------- Pitch ---------- */
.cup-scene__pitch {
  position: absolute;
  left: 0; right: 0;
  top: var(--shore);
  bottom: 0;
  z-index: 3;
  background: repeating-linear-gradient(90deg,
    var(--cup-pitch-1) 0 96px,
    var(--cup-pitch-2) 96px 192px);
}
/* Depth: the far end of the grass sits in the stands' shadow */
.cup-scene__pitch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0.04) 18%,
    transparent 46%,
    color-mix(in srgb, var(--cup-pitch-3) 85%, transparent) 100%);
}
.pitch-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

/* ---------- Bunting, where the palms hang on the beach ---------- */
.pennant-string {
  position: absolute;
  top: -8px;
  z-index: 6;
  width: 380px;
  max-width: none;
  transform-origin: 0 0;
  animation: palmSway 11s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(6, 30, 18, 0.28));
}
.pennant-string--left  { left: -30px; }
.pennant-string--right { right: -30px; transform: scaleX(-1); transform-origin: 100% 0; }

/* ---------- Balls on the grass ---------- */
.cup-accent {
  position: absolute;
  z-index: 5;
  max-width: none;
  filter: drop-shadow(0 6px 8px rgba(6, 30, 18, 0.35));
}
.cup-accent--ball  { top: calc(var(--shore) + 96px); left: 6%;  width: 66px; }
.cup-accent--ball2 { top: calc(var(--shore) + 46px); right: 8%; width: 44px; opacity: 0.9; }

/* ---------- Responsive: mirrors the beach's own steps ---------- */
@media (max-width: 1100px) {
  .pennant-string { width: 300px; }
  .floodlight { top: calc(var(--horizon) - 132px); height: 134px; }
  .floodlight__head { width: 76px; }
  .cup-accent--ball { width: 54px; }
}
@media (max-width: 900px) {
  .floodlight--left  { left: 8%; }
  .floodlight--right { right: 8%; }
}
@media (max-width: 820px) {
  .pennant-string { width: 230px; }
  .floodlight--left  { left: 6%; }
  .floodlight--right { right: 6%; }
  .floodlight { top: calc(var(--horizon) - 108px); height: 110px; width: 62px; margin: 0; }
  .floodlight--left  { left: 5%; }
  .floodlight--right { right: 5%; }
  .floodlight::before { width: 9px; height: calc(100% - 20px); }
  .floodlight__head { width: 58px; height: 20px; }
  .floodlight__glow { width: 220px; height: 220px; }
  .cup-scene__hoarding { height: 18px; top: calc(var(--shore) - 18px); }
  .cup-accent--ball  { width: 44px; top: calc(var(--shore) + 70px); }
  .cup-accent--ball2 { width: 32px; }
}
@media (max-width: 480px) {
  .pennant-string { width: 180px; }
  .cup-accent--ball2 { display: none; }
  .cup-accent--ball { width: 36px; left: 4%; top: calc(var(--shore) + 54px); }
  .cup-scene__pitch { background-size: auto; }
}

/* ============================================================
   XAVIER CUP 2026 — data-skin="txc" (the default)

   No painted scene. The landing opens on a grid of tiles instead
   (.bento-hero, components/bento-hero.css): a navy headline tile,
   a lime season tile, the live strip and the eight teams. Both
   older scenes stay in the markup for the other two designs.

   Type: Archivo set expanded (125%) for display, Figtree for
   reading. font-stretch is inherited, so body text is pinned to
   100% and only the display roles below are widened.
   ============================================================ */

/* ---------- Which scene ---------- */
.bento-hero { display: none; }
:root[data-skin="txc"] .bento-hero   { display: block; }
:root[data-skin="txc"] .hero-scene,
:root[data-skin="txc"] .cup-scene,
:root[data-skin="txc"] .hero-content,
:root[data-skin="txc"] .sea-scene,
:root[data-skin="txc"] .ground-wash  { display: none; }

/* ---------- Ground ---------- */
:root[data-skin="txc"] .screen--landing {
  background: var(--ground);
  overflow: visible;
}
:root[data-skin="txc"] .landing-theme {
  background: none;
  padding-block: var(--space-6) var(--space-7);
}
:root[data-skin="txc"] .landing-theme .theme-block {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: none;
}

/* ---------- Type ---------- */
:root[data-skin="txc"] body { font-stretch: 100%; }

:root[data-skin="txc"] h1,
:root[data-skin="txc"] .brand__name,
:root[data-skin="txc"] .browse-title,
:root[data-skin="txc"] .about-head__title,
:root[data-skin="txc"] .cup-hero__title,
:root[data-skin="txc"] .cup-section__title,
:root[data-skin="txc"] .news-title,
:root[data-skin="txc"] .settings__title,
:root[data-skin="txc"] .theme-block__title,
:root[data-skin="txc"] .landing-featured__title,
:root[data-skin="txc"] .browse-featured__title,
:root[data-skin="txc"] .about-team__title,
:root[data-skin="txc"] .detail__title,
:root[data-skin="txc"] .versus__score,
:root[data-skin="txc"] .score__value,
:root[data-skin="txc"] .date-tile__day {
  font-family: var(--font-serif);
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.01em;
}
:root[data-skin="txc"] .brand__name { font-size: 15px; }
:root[data-skin="txc"] .browse-title { letter-spacing: -0.02em; }

/* The italic serif moments of the older designs read as another
   brand here, so the Cup tagline and the anchor line go upright. */
:root[data-skin="txc"] .cup-hero__tagline,
:root[data-skin="txc"] .hero-anchor,
:root[data-skin="txc"] .site-footer__tagline { font-style: normal; }

/* Card titles stay at normal width: org names run long. */
:root[data-skin="txc"] .card__title { font-weight: 700; letter-spacing: -0.005em; }

/* ---------- Nav ---------- */
:root[data-skin="txc"] .nav-links__item { border-radius: var(--radius-pill); }
:root[data-skin="txc"] .nav-links__item[aria-current="page"],
:root[data-skin="txc"] .nav-sheet__item[aria-current="page"] {
  background: var(--tx-primary);
  color: var(--tx-on-primary-hi);
  font-weight: 600;
}

/* ---------- Components that hard-code white text on --ocean ----------
   After dark, --ocean is lime, so white on it would vanish. */
:root[data-skin="txc"] .btn--primary,
:root[data-skin="txc"] .hero-search__submit {
  background: var(--tx-primary);
  color: var(--tx-on-primary);
}
:root[data-skin="txc"] .btn--primary:hover,
:root[data-skin="txc"] .hero-search__submit:hover { background: var(--ocean-deep); }

:root[data-skin="txc"] .chip[aria-pressed="true"] {
  background: var(--tx-primary);
  border-color: var(--tx-primary);
  color: var(--tx-on-primary);
  box-shadow: none;
}
:root[data-skin="txc"] .chip__check { color: var(--tx-on-primary); }
:root[data-skin="txc"] .chip[aria-pressed="true"] .chip__count {
  background: color-mix(in srgb, var(--tx-on-primary) 20%, transparent);
  color: var(--tx-on-primary);
}
:root[data-skin="txc"] .seg__btn[aria-pressed="true"] {
  background: var(--tx-primary);
  color: var(--tx-on-primary);
}

/* ---------- Status: red means live, and only live ---------- */
:root[data-skin="txc"] .status-pill--ongoing {
  background: var(--tx-live);
  border-color: var(--tx-live);
  color: var(--tx-on-live);
}
:root[data-skin="txc"] .status-pill--ongoing .status-pill__dot { background: var(--tx-on-live); }
:root[data-skin="txc"] .status-pill--upcoming {
  background: var(--ocean-soft);
  border-color: transparent;
  color: var(--ink);
}

/* ---------- Org cards ----------
   The cluster colour stays on the emblem and the tag dots. The
   accent rail down the left edge goes, so a grid of 75 reads as
   calm white tiles. */
:root[data-skin="txc"] .card::before { display: none; }
:root[data-skin="txc"] .card:hover { border-color: var(--border-strong); }

/* ---------- Xavier Cup banner: a navy tile, not a pitch ---------- */
:root[data-skin="txc"] .cup-hero {
  background: none;
  padding-block: var(--space-5) 0;
}
:root[data-skin="txc"] .cup-hero__scene { display: none; }
:root[data-skin="txc"] .cup-hero__wrap { display: block; }
:root[data-skin="txc"] .cup-hero__tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: clamp(20px, 3vw, 34px);
  border-radius: var(--radius-xl);
  color: var(--tx-tile-ink);
  background:
    radial-gradient(circle at 86% 14%, var(--tx-glow), transparent 44%),
    var(--tx-tile);
}
:root[data-skin="txc"] .cup-hero__title { text-shadow: none; letter-spacing: -0.02em; }
:root[data-skin="txc"] .cup-hero__kicker {
  background: none;
  border: 0;
  padding: 0;
  color: var(--tx-accent);
  letter-spacing: 0.16em;
}
:root[data-skin="txc"] .cup-hero__lede { color: var(--tx-tile-muted); }
:root[data-skin="txc"] .cup-hero__trophy { width: 132px; }

/* ---------- Map ---------- */
:root[data-skin="txc"] .cup-map-panel,
:root[data-skin="txc"] .venue-panel { border-radius: var(--radius-xl); }

/* ---------- News ---------- */
:root[data-skin="txc"] .news-post__tag {
  background: var(--tx-accent);
  color: var(--tx-on-accent);
}
/* Facebook blue is hard to read on the night navy; the design's own
   link colour (navy by day, lime after dark) reads in both. */
:root[data-skin="txc"] .news-post__link { color: var(--ocean); }
:root[data-skin="txc"] .news-post__link:hover { color: var(--ocean-deep); text-decoration: underline; }

/* ---------- Footer: a navy band, like the tiles ----------
   Re-pointing the tokens locally re-dresses every child rule in
   footer.css without touching it. */
:root[data-skin="txc"] .site-footer {
  --ink: var(--tx-tile-ink);
  --ink-2: var(--tx-tile-muted);
  --muted: var(--tx-tile-muted);
  --surface: var(--tx-tile-wash);
  --border-strong: var(--tx-tile-line);
  background: var(--tx-tile);
  color: var(--tx-tile-ink);
  margin-top: var(--space-6);
}
:root[data-skin="txc"] .site-footer__name {
  font-family: var(--font-serif);
  font-stretch: 125%;
  font-weight: 800;
}
:root[data-skin="txc"] .gdg-credit__season { color: var(--tx-accent); font-style: normal; }

@media (max-width: 820px) {
  :root[data-skin="txc"] .cup-hero__tile { gap: var(--space-4); }
  :root[data-skin="txc"] .cup-hero__trophy { width: 104px; align-self: flex-end; }
}
@media (max-width: 560px) {
  :root[data-skin="txc"] .cup-hero__tile { flex-direction: column; align-items: flex-start; position: relative; }
  :root[data-skin="txc"] .cup-hero__trophy { position: absolute; right: 16px; top: 16px; width: 64px; opacity: 0.9; }
  :root[data-skin="txc"] .cup-hero__text { padding-right: 56px; }
}