:root {
  --bg: #0b0b0d;
  /* Liquid-glass surfaces: big containers get a dark frosted base (see the
     glass block at the end of this file); these light tints are for small
     inner tiles that layer on top of the frosted cards. */
  --surface: rgba(255, 255, 255, 0.055);
  --surface-alt: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.10);
  --text: #f5f6f8;
  --text-muted: #8b96a5;
  --accent: #00d6a4;
  --rating-low: #e34747;
  --rating-mid: #f0b429;
  --rating-good: #44b549;
  --rating-high: #00d6a4;
  --rating-vhigh: #005ea5;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg);
  background-image: url("assets/site-bg.png");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text);
  line-height: 1.4;
  min-height: 100vh;
  overflow-x: clip;            /* guard against stray horizontal scroll (sticky-safe) */
}

/* ── Animated backdrop (injected by atmosphere.js) ───────────────────────────
   Sits just above the static stadium image, below all page content. */
#fmAtmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#fmAtmos > * { position: absolute; inset: 0; }
/* faint, slowly breathing stadium lights */
.fmatmos__lights { inset: -6%; will-change: transform; }
.fmatmos__light { position: absolute; border-radius: 50%; filter: blur(34px); opacity: .45; will-change: opacity, transform; }
.fmatmos__light--a { left: 6%; top: -8%; width: 46vw; height: 34vw;
  background: radial-gradient(circle, rgba(132,162,222,0.14), transparent 68%);
  animation: fmPulse 15s ease-in-out infinite; }
.fmatmos__light--b { right: 0; top: 0; width: 52vw; height: 40vw;
  background: radial-gradient(circle, rgba(255,172,112,0.10), transparent 70%);
  animation: fmPulse 22s ease-in-out infinite 3s; }
.fmatmos__light--c { left: 38%; bottom: -12%; width: 46vw; height: 36vw;
  background: radial-gradient(circle, rgba(150,140,255,0.09), transparent 70%);
  animation: fmPulse 18s ease-in-out infinite 7s; }
@keyframes fmPulse { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: .8; transform: scale(1.07); } }
/* drifting dust motes (drawn on canvas) */
.fmatmos__dust { width: 100%; height: 100%; }
/* edge vignette */
.fmatmos__vignette { background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,0.42) 100%); }
@media (prefers-reduced-motion: reduce) {
  .fmatmos__light { animation: none; }
}

/* Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 24px;
  background: linear-gradient(180deg, rgba(18, 20, 24, 0.86), rgba(11, 11, 13, 0.72));
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--accent) 55%, transparent) 50%,
      transparent) 1;
  box-shadow: 0 10px 34px -22px rgba(0, 0, 0, 0.9);
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.2rem;
}

.navbar__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: #04231c;
  background: linear-gradient(150deg, #7dffd9, var(--accent) 62%, #00b58b);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset,
              0 6px 18px -6px color-mix(in srgb, var(--accent) 75%, transparent);
}
.navbar__title {
  background: linear-gradient(180deg, #ffffff 30%, #c7cdd6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.2px;
}
.navbar__brand--home:hover .navbar__logo {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset,
              0 8px 22px -6px color-mix(in srgb, var(--accent) 90%, transparent);
}

.navbar__links {
  display: flex;
  gap: 24px;
}

.navbar__links a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.navbar__links a:hover {
  color: var(--text);
}

.navbar__links a.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* FanZone wordmark link — silver "Fan", molten "Zone", gold glow base */
.navbar__links a.nav-fz,
.navbar__zones a.nav-fz {
  display: inline-block;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.3px;
  position: relative;
  transform: skewX(-5deg);
  border-bottom-color: transparent;   /* the glow bar replaces the underline */
}
.nav-fz__fan {
  background: linear-gradient(180deg, #ffffff 15%, #cdd2da 62%, #97a0ab 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav-fz__zone {
  background: linear-gradient(180deg, #ffc21a 0%, #ff5a24 32%, #e51f1f 70%, #a81111 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 7px rgba(255, 74, 30, 0.35));
  transition: filter 0.15s ease;
}
.nav-fz:hover .nav-fz__zone,
.nav-fz.active .nav-fz__zone {
  filter: drop-shadow(0 0 11px rgba(255, 96, 30, 0.7));
}
.navbar__links a.nav-fz::after,
.navbar__zones a.nav-fz::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 194, 26, 0.95), rgba(255, 194, 26, 0) 74%);
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.navbar__links a.nav-fz:hover::after,
.navbar__links a.nav-fz.active::after,
.navbar__zones a.nav-fz:hover::after,
.navbar__zones a.nav-fz.active::after { opacity: 1; }

/* ── Zoned navbar: brand | BIG centered zone switcher | account ── */
.navbar--zones {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);   /* sides compress equally -> true centring */
  align-items: center;
  gap: 16px;
}
.navbar--zones .navbar__brand,
.navbar--zones .navbar__account { overflow: hidden; }
.navbar--zones .navbar__brand { justify-self: start; grid-column: 1; }
.navbar--zones .navbar__sections { grid-column: 2; }
.navbar--zones .navbar__account { grid-column: 3; }
.navbar__zones {
  display: flex;
  align-items: center;
  gap: 34px;
  justify-self: center;
  font-size: 1.3rem;              /* the zones ARE the navigation — let them lead */
}
.navbar__zones a {
  text-decoration: none;
  padding-bottom: 5px;
}
.navbar__account { justify-self: end; min-width: 86px; text-align: right; }

/* Centered section nav (Matches/Fixtures/… or Feed/Fan Index) lives in the header now */
.navbar__sections {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: center;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.navbar__sections::-webkit-scrollbar { display: none; }
.navbar__sections a {
  position: relative;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.2px;
  white-space: nowrap;
  padding: 7px 13px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}
.navbar__sections a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}
.navbar__sections a.active { color: var(--text); }
.navbar__sections a.active::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: -6px;
  height: 2px; border-radius: 999px;
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 10%, transparent),
      var(--accent) 50%,
      color-mix(in srgb, var(--accent) 10%, transparent));
  box-shadow: 0 0 12px 0 color-mix(in srgb, var(--accent) 75%, transparent);
}

/* Floating zone-switch button — jump to the other zone, themed toward it */
.zoneswitch {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 24px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: transform 0.18s cubic-bezier(.2, .8, .2, 1), box-shadow 0.18s ease;
}
.zoneswitch span { transition: transform 0.18s ease; }
.zoneswitch:hover { transform: translateY(-2px); }
.zoneswitch:hover span { transform: translateX(4px); }
.zoneswitch--tofan {
  color: #fff;
  background: linear-gradient(135deg, #ffb020, #ff5a24 55%, #e51f1f);
  box-shadow: 0 14px 34px -10px rgba(229, 31, 31, 0.6);
}
.zoneswitch--tofan:hover { box-shadow: 0 18px 40px -10px rgba(255, 90, 36, 0.78); }
.zoneswitch--tostat {
  color: #04231c;
  background: linear-gradient(135deg, #7dffd9, #00d6a4);
  box-shadow: 0 14px 34px -10px rgba(0, 214, 164, 0.55);
}
.zoneswitch--tostat:hover { box-shadow: 0 18px 40px -10px rgba(0, 214, 164, 0.72); }

@media (max-width: 700px) {
  /* Two-row header: brand + account up top, section nav scrolls beneath */
  .navbar--zones {
    grid-template-columns: 1fr auto;
    row-gap: 11px;
  }
  .navbar--zones .navbar__brand { grid-row: 1; grid-column: 1; }
  .navbar--zones .navbar__account { grid-row: 1; grid-column: 2; }
  .navbar__sections {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: flex-start;
    gap: 3px;
    font-size: 0.95rem;
  }
  .navbar__sections a.active::after { bottom: -5px; }
  .zoneswitch { right: 14px; bottom: 14px; padding: 12px 18px; font-size: 0.9rem; }
}

.acct-btn {
  display: inline-block;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  padding: 7px 16px;
  transition: background 0.14s ease;
}
.acct-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.acct-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));
  border: 1px solid var(--border);
  border-radius: 999px;
  /* Left padding is tight because the crest is a circle — the old 15px was
     sized for an 11px dot and leaves the badge floating. */
  padding: 6px 9px 6px 7px;
  box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.6);
  transition: transform 0.18s cubic-bezier(.2, .8, .2, 1), border-color 0.18s ease, box-shadow 0.18s ease;
}
.acct-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 40%, transparent);
}
/* Club crest in the navbar chip. currentColor is set inline to the club colour,
   so the ring and glow identify the club even where the badge itself is dark. */
.acct-chip__crest {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: color-mix(in srgb, currentColor 16%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 55%, transparent),
              0 0 10px -3px currentColor;
}
.acct-chip__crest img { width: 22px; height: 22px; object-fit: contain; display: block; }
.acct-chip__name {
  font-size: 0.95rem; font-weight: 800; letter-spacing: 0.2px;
  max-width: 130px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.acct-chip__iq {
  /* nowrap: a four-figure IQ wraps to two lines otherwise, which drags the
     whole navbar chip ~14px taller. */
  white-space: nowrap;
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.3px;
  color: #04231c;
  background: linear-gradient(150deg, #7dffd9, var(--accent));
  padding: 4px 9px; border-radius: 999px;
  box-shadow: 0 0 12px -3px color-mix(in srgb, var(--accent) 70%, transparent);
}

@media (max-width: 700px) {
  .navbar--zones .navbar__title { display: none; }
  .navbar__zones { font-size: 1.05rem; gap: 20px; }
  .acct-chip__name { max-width: 84px; }
}

/* ── Home / landing ── */
.navbar__brand--home { text-decoration: none; color: inherit; }

.home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
}
.home {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 22px 60px;
  min-height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home__hero { text-align: center; margin-bottom: 40px; }
.home__kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--accent);
  margin-bottom: 16px;
  animation: home-rise 0.6s ease both;
}
.home__title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.02;
  margin-bottom: 16px;
  animation: home-rise 0.6s ease 0.05s both;
}
.home__title span {
  display: block;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  background: linear-gradient(100deg, var(--accent), #7dffd9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home__tag {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: var(--text-muted);
  animation: home-rise 0.6s ease 0.1s both;
}

.home__zones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 720px) { .home__zones { grid-template-columns: 1fr; } }

.zonecard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  padding: 30px 28px 26px;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  transition: transform 0.28s cubic-bezier(.2, .8, .2, 1), border-color 0.28s ease, box-shadow 0.28s ease;
  animation: home-rise 0.6s ease 0.16s both;
}
.zonecard--fan { animation-delay: 0.22s; }
.zonecard:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--zc) 55%, transparent);
  box-shadow: 0 26px 60px -20px color-mix(in srgb, var(--zc) 45%, transparent);
}
.zonecard--stat { --zc: #00d6a4; }
.zonecard--fan { --zc: #ff9d0a; }

.zonecard__aura {
  position: absolute;
  top: -60px; right: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--zc) 34%, transparent), transparent 68%);
  opacity: 0.55;
  transition: opacity 0.28s ease, transform 0.5s ease;
  pointer-events: none;
}
.zonecard:hover .zonecard__aura {
  opacity: 1;
  transform: scale(1.25);
  animation: home-aura 3s ease-in-out infinite;
}

.zonecard__badge {
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--zc);
  background: color-mix(in srgb, var(--zc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--zc) 35%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.zonecard__mark {
  font-style: italic;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 2.9rem);
  letter-spacing: 0.3px;
  transform: skewX(-5deg);
  display: inline-block;
  margin-bottom: 12px;
}
.zonecard__desc {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 16px;
  opacity: 0.9;
}
.zonecard__list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zonecard__list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.zonecard__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--zc);
}
.zonecard__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--zc);
}
.zonecard__arrow { transition: transform 0.24s ease; display: inline-block; }
.zonecard:hover .zonecard__arrow { transform: translateX(6px); }

.home__foot {
  text-align: center;
  margin-top: 34px;
  font-size: 0.82rem;
  color: var(--text-muted);
  animation: home-rise 0.6s ease 0.3s both;
}
.home__foot a { color: var(--accent); text-decoration: none; }
.home__foot a:hover { text-decoration: underline; }

@keyframes home-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes home-aura {
  0%, 100% { transform: scale(1.2); opacity: 0.9; }
  50% { transform: scale(1.4); opacity: 1; }
}

/* ── Account page ── */
.acct-card {
  max-width: 420px;
  margin: 48px auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 28px 24px;
}
.acct-card__kicker { font-size: 0.66rem; font-weight: 800; letter-spacing: 1.4px; color: var(--accent); }
.acct-card__title { font-size: 1.5rem; font-weight: 900; margin: 8px 0 6px; }
.acct-card__sub { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 18px; line-height: 1.5; }
.acct-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  padding: 12px 15px;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  outline: none;
  margin-bottom: 12px;
}
.acct-input:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.acct-input--code { text-align: center; letter-spacing: 8px; font-size: 1.3rem; font-weight: 800; }
.acct-go { width: 100%; padding: 11px 0; font-size: 0.95rem; }
.acct-go:disabled { opacity: 0.45; cursor: default; }
.acct-err { color: #e5484d; font-size: 0.82rem; min-height: 18px; margin-top: 10px; }

/* Signup: tap-a-crest team picker */
.acct-card--wide { max-width: 460px; }
.acct-label { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); margin: 4px 0 10px; }
.acct-teams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
  max-height: 300px;
  overflow-y: auto;
}
.acct-team {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 4px 8px;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.14s, background 0.14s, transform 0.14s;
}
.acct-team:hover { background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); }
.acct-team.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
.acct-team__crest { height: 34px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--text-muted); }
.acct-team__crest img { display: block; }
.acct-team__name { font-size: 0.66rem; font-weight: 700; color: var(--text-muted); text-align: center; line-height: 1.1; }
.acct-team.on .acct-team__name { color: var(--text); }
.acct-team--neutral .acct-team__crest { color: var(--accent); }
.acct-dev { font-size: 0.82rem; color: #ffd23d; background: color-mix(in srgb, #ffd23d 10%, transparent);
  border: 1px solid color-mix(in srgb, #ffd23d 30%, transparent); border-radius: 9px;
  padding: 8px 12px; margin-bottom: 12px; }
.acct-dev b { letter-spacing: 2px; }
.acct-profile { max-width: 640px; margin: 24px auto 0; }
.acct-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.acct-actions .fz-btn { text-decoration: none; }
.acct-setting { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border-radius: 11px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); }
.acct-setting label { font-size: 0.92rem; font-weight: 700; color: var(--text); display: flex; flex-direction: column; gap: 2px; }
.acct-setting label span { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); }
.acct-select { font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--text); cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; }

/* Zone-switch pills on the account page — same palette as the floating
   .zoneswitch buttons elsewhere, but inline (two sit side by side here). */
.acct-zoneswitches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.acct-zonebtn { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto;
  justify-content: center; padding: 13px 20px; border-radius: 999px; font-weight: 800;
  font-size: 0.92rem; letter-spacing: 0.2px; text-decoration: none;
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1), box-shadow 0.18s ease; }
.acct-zonebtn span { transition: transform 0.18s ease; }
.acct-zonebtn:hover { transform: translateY(-2px); }
.acct-zonebtn:hover span { transform: translateX(4px); }
.acct-zonebtn--fan { color: #fff; background: linear-gradient(135deg, #ffb020, #ff5a24 55%, #e51f1f);
  box-shadow: 0 14px 34px -10px rgba(229, 31, 31, 0.6); }
.acct-zonebtn--fan:hover { box-shadow: 0 18px 40px -10px rgba(255, 90, 36, 0.78); }
.acct-zonebtn--stat { color: #04231c; background: linear-gradient(135deg, #7dffd9, #00d6a4);
  box-shadow: 0 14px 34px -10px rgba(0, 214, 164, 0.55); }
.acct-zonebtn--stat:hover { box-shadow: 0 18px 40px -10px rgba(0, 214, 164, 0.72); }

/* Account settings — collapsed behind a toggle so the page opens uncluttered */
.acct-settings-toggle { display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin-top: 22px; padding: 13px 16px; border-radius: 11px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
  font: inherit; font-size: 0.88rem; font-weight: 800; color: var(--text);
  letter-spacing: 0.3px; text-transform: uppercase; }
.acct-settings-toggle__chev { transition: transform 0.18s ease; color: var(--text-muted); }
.acct-settings-toggle[aria-expanded="true"] .acct-settings-toggle__chev { transform: rotate(180deg); }
.acct-settings-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.acct-settings-panel[hidden] { display: none; }

.acct-signout { display: block; margin: 34px auto 8px; padding: 10px 20px; font: inherit;
  font-size: 0.84rem; font-weight: 700; color: var(--text-muted); background: none;
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.acct-signout:hover { color: var(--text); border-color: var(--text-muted); }

/* StatZone wordmark — same family, cool palette */
.navbar__links--zones { gap: 26px; align-items: center; }
.navbar__links a.nav-sz,
.navbar__zones a.nav-sz {
  display: inline-block;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.3px;
  position: relative;
  transform: skewX(-5deg);
  border-bottom-color: transparent;
}
.nav-sz__stat {
  background: linear-gradient(180deg, #ffffff 15%, #cdd2da 62%, #97a0ab 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav-sz__zone {
  /* same molten Zone as FanZone — the zones are siblings, "Stat" carries the difference */
  background: linear-gradient(180deg, #ff6a3d 0%, #e51f1f 55%, #a81111 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 7px rgba(229, 31, 31, 0.35));
  transition: filter 0.15s ease;
}
.nav-sz:hover .nav-sz__zone,
.nav-sz.active .nav-sz__zone { filter: drop-shadow(0 0 11px rgba(229, 31, 31, 0.65)); }
.navbar__links a.nav-sz::after,
.navbar__zones a.nav-sz::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(229, 31, 31, 0.9), rgba(229, 31, 31, 0) 74%);
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.navbar__links a.nav-sz:hover::after,
.navbar__links a.nav-sz.active::after,
.navbar__zones a.nav-sz:hover::after,
.navbar__zones a.nav-sz.active::after { opacity: 1; }

/* Zone sub-navigation bar */
.zonebar {
  display: flex;
  gap: 22px;
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.zonebar::-webkit-scrollbar { display: none; }
.zonebar a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.zonebar a:hover { color: var(--text); }
.zonebar--stat a.active { color: var(--text); border-bottom-color: var(--accent); }
.zonebar--fan a.active { color: var(--text); border-bottom-color: #ff5a24; }

/* Outbound doorway tab (match page -> FanZone debate) */
a.view-tab--link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font: inherit;
  color: #ff8a5c;
}
a.view-tab--link:hover { color: #ffb28f; }

/* Container */
.container {
  max-width: 960px;
  margin: 0 auto;
  /* generous bottom gap so content never hides under the fixed zone-switch button */
  padding: 24px 16px 108px;
}
/* The match page (header, tabs, Live Feed, lineup) runs wider. */
.container--match { max-width: 1200px; }

/* Match header */
.match-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.view[hidden] {
  display: none;
}

/* View tabs */
.view-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.view-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0 0 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.view-tab:hover {
  color: var(--text);
}

.view-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.team__logo {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team__logo svg,
.pitch-team__logo svg {
  display: block;
}

.pitch-team__logo {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team__name {
  font-weight: 600;
}

.team__score {
  font-size: 1.75rem;
  font-weight: 700;
}

.match-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1.2;
  text-align: center;
}

.match-info__status {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.match-info__round {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Ratings */
.ratings__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.ratings__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.player-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.player-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.player-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--surface-alt);
  flex-shrink: 0;
}

.player-card__avatar svg,
.player-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-card__info {
  flex: 2;
  min-width: 0;
}

.player-card__name {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-card__team {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.player-card__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #0e1218;
}

.rating--low {
  background-color: var(--rating-low);
}

.rating--mid {
  background-color: var(--rating-mid);
}

.rating--good {
  background-color: var(--rating-good);
}

.rating--high {
  background-color: var(--rating-high);
}

.rating--vhigh {
  background-color: var(--rating-vhigh);
}

/* Pitch section */
.pitch-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pitch-team {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pitch-team--away {
  flex-direction: row-reverse;
}

.pitch-team__name {
  font-weight: 700;
  font-size: 1rem;
}

.pitch-team__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  background-color: var(--surface-alt);
  border: 1px solid var(--border);
}

.pitch-ovals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pitch-oval {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #0e2b14, #1b2f20);
}

.pitch-oval__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pitch-oval__bg ellipse,
.pitch-oval__bg rect,
.pitch-oval__bg circle,
.pitch-oval__bg path,
.pitch-oval__bg line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 2.5;
}

.pitch-oval__rows {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6% 2% 5%;
}

.pitch-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
}

.pitch-row--FF,
.pitch-row--FB {
  padding: 0 16%;
}

.pitch-row--HF,
.pitch-row--HB {
  padding: 0 6%;
}

.pitch-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.pitch-chip__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.pitch-chip__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.15);
}

.pitch-chip__avatar svg {
  display: block;
  width: 50px;
  height: 50px;
}

.pitch-chip__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.5) translateY(20%);
}

.pitch-chip__name {
  font-size: 0.85rem;
  font-weight: 400;
  color: #fff;
  opacity: 0.7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.pitch-chip__rating {
  position: absolute;
  top: -6px;
  right: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0e1218;
}

/* Interchange uses the original horizontal chip layout */
.interchange .pitch-chip {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 8px;
}

.interchange .pitch-chip__name {
  flex: 1;
  color: var(--text);
  text-shadow: none;
  text-align: left;
}

/* Interchange */
.interchange {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 20px;
}

.interchange__col h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.interchange__col .pitch-chip {
  margin-bottom: 6px;
}

/* Player cards (season list) */
.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 16px 12px;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.pcard:hover {
  border-color: var(--team-secondary, var(--accent));
  transform: translateY(-2px);
}

.pcard--ranked {
  border-color: var(--rank-from);
  box-shadow: 0 0 0 1px var(--rank-from),
              0 4px 24px -4px var(--rank-glow),
              0 0 40px -12px var(--rank-glow);
}

.pcard--ranked:hover {
  box-shadow: 0 0 0 1px var(--rank-to),
              0 6px 32px -4px var(--rank-glow),
              0 0 60px -8px var(--rank-glow);
}

.pcard__rank-wm {
  position: absolute;
  bottom: -10px;
  right: 6px;
  font-size: 7rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(160deg, var(--rank-from), var(--rank-to));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
  letter-spacing: -4px;
}

.pcard__rank-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  pointer-events: none;
  z-index: 2;
}

.pcard__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--team-secondary, var(--accent));
}

.pcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pcard__logo {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.pcard__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #0e1218;
}

.pcard__name {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  /* Wrap to two lines instead of truncating — full names like
     "Nasiah Wanganeen-Milera" read in full; min-height keeps cards aligned. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}

.pcard__meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.pcard__chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
}

.pcard__bar {
  flex: 1;
  min-width: 4px;
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
}

/* Players list */
/* Three-column layout: filter rails flank the content and reserve their own
   space (no more fixed rails overlapping the header on mid-width screens). */
.players-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 190px;
  gap: 24px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 16px 108px;
  align-items: start;
}
.players-main { min-width: 0; }

.players-sidebar {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 5;
}

@media (max-width: 940px) {
  /* Stack: filter rails become horizontal scroll strips above the grid.
     Selectors scoped under .players-layout so they win over the base
     .sidebar-chips rule regardless of source order. */
  .players-layout { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
  .players-layout .players-sidebar--left { order: 1; }
  .players-layout .players-sidebar--right { order: 2; }
  .players-layout .players-main { order: 3; }
  .players-layout .players-sidebar { position: static; top: auto; }
  .players-layout .sidebar-section { padding: 10px 12px; }
  .players-layout .sidebar-section__title { margin-bottom: 7px; }
  .players-layout .sidebar-chips,
  .players-layout .sidebar-team-list {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    max-height: none; gap: 6px; scrollbar-width: none; padding-bottom: 2px;
  }
  .players-layout .sidebar-chips::-webkit-scrollbar,
  .players-layout .sidebar-team-list::-webkit-scrollbar { display: none; }
  .players-layout .sidebar-chip { white-space: nowrap; flex: none; }
}

.sidebar-section {
  background: rgba(14, 18, 24, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px;
}

.sidebar-section__title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.sidebar-chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.sidebar-team-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 148px;
  overflow-y: auto;
}

.sidebar-chip {
  display: flex;
  align-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 0.83rem;
  font-weight: 500;
  padding: 6px 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s ease;
}

.sidebar-chip:hover {
  background: var(--surface);
  color: var(--text);
}

.sidebar-chip.active {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

.players-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.players-title {
  font-size: 1.4rem;
  font-weight: 700;
}

.players-title__season {
  color: var(--text-muted);
  font-weight: 400;
}

.players-search {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  padding: 8px 14px;
  width: 240px;
  outline: none;
  transition: border-color 0.15s ease;
}

.players-search:focus {
  border-color: var(--accent);
}

.players-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.players-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.players-filter {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.players-filter:hover {
  border-color: var(--accent);
  color: var(--text);
}

.players-filter.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0e1218;
}

.pcard__stat-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--team-secondary, #00d6a4);
  border-radius: 8px;
  padding: 4px 10px;
  min-width: 52px;
  line-height: 1.2;
}

.pcard__stat-val {
  font-size: 1rem;
  font-weight: 700;
  color: #0e1218;
}

.pcard__stat-lbl {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(0,0,0,0.55);
  text-transform: uppercase;
  white-space: nowrap;
}

.players-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
/* On phones three podium cards get too narrow to show full names — stack them. */
@media (max-width: 560px) {
  .players-podium { grid-template-columns: 1fr; }
}

.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* Player season page */
.player-page__header {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.player-page__identity {
  flex: 1;
}

.player-page__name {
  font-size: 1.6rem;
  font-weight: 700;
}

.player-page__team {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 4px;
}

.player-page__season-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.player-page__season-rating-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.player-page__stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.player-stat-cell {
  flex: 1;
  min-width: 80px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}

.player-stat-cell__value {
  font-size: 1.5rem;
  font-weight: 700;
}

.player-stat-cell__label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
}

.player-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.season-card-canvas {
  width: 100%;
  max-width: 800px;
  border-radius: 20px;
  display: block;
}

.season-card-download {
  background: var(--accent);
  color: #0e1218;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.season-card-download:hover {
  opacity: 0.85;
}

/* Fixtures */
.fixtures__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.fixtures__title {
  font-size: 1.1rem;
  align-items:center;
  font-weight: 500;
}

.fixtures__rounds {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.round-pill {
  flex-shrink: 0;
  min-width: 30px;
  height: 30px;
  padding: 0 4px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.round-pill:hover {
  color: var(--text);
}

.round-pill.active {
  background-color: var(--accent);
  color: #0e1218;
}

.fixtures__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ══ Fixture content cards ═══════════════════════════════════════════════ */
.fx-card {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
  padding: 22px 20px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
}
.fx-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 255, 255, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.fx-card--live { border-color: rgba(255, 90, 90, 0.42); }

/* soft team-coloured lighting behind each side (~10%, winner stronger) */
.fx-card__lume {
  position: absolute; top: 50%; width: 48%; height: 150%; transform: translateY(-50%);
  border-radius: 50%; filter: blur(42px); opacity: 0.1; z-index: -1; pointer-events: none;
}
.fx-card__lume--home { left: -8%; background: radial-gradient(circle, var(--home-glow), transparent 70%); }
.fx-card__lume--away { right: -8%; background: radial-gradient(circle, var(--away-glow), transparent 70%); }
.fx-card--win-home .fx-card__lume--home,
.fx-card--win-away .fx-card__lume--away { opacity: 0.19; }

.fx-card__main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }

/* team side */
.fx-team { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fx-team--away { justify-content: flex-end; text-align: right; }
.fx-team__logo, .fx-team svg {
  width: 60px; height: 60px; object-fit: contain; flex: none;
  transition: transform 0.18s ease-out;
}
.fx-card:hover .fx-team__logo, .fx-card:hover .fx-team svg { transform: scale(1.03); }
.fx-team__id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fx-team--away .fx-team__id { align-items: flex-end; }
.fx-team__name {
  font-weight: 600; font-size: 1rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.fx-team--win .fx-team__name { font-weight: 800; color: #fff; }
.fx-team--loss .fx-team__name { font-weight: 600; color: rgba(255, 255, 255, 0.5); }
.fx-team__pills { display: flex; align-items: center; gap: 6px; }
.fx-badge--win {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.09em; padding: 2px 6px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.16); color: #fff; border: 1px solid rgba(255, 255, 255, 0.26);
}
.fx-streak {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.fx-streak--w { background: rgba(74, 222, 128, 0.16); color: #6fe3a0; }
.fx-streak--l { background: rgba(255, 90, 70, 0.15); color: #ff8a75; }

/* score */
.fx-score { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 96px; }
.fx-score__nums { display: flex; align-items: baseline; gap: 8px; font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.fx-score__val { font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.fx-score__val--win { font-weight: 800; color: #fff; font-size: 2rem; }
.fx-score__val--loss { font-weight: 500; color: rgba(255, 255, 255, 0.4); }
.fx-score__sep { font-weight: 300; color: rgba(255, 255, 255, 0.35); font-size: 1.3rem; }
.fx-score--vs .fx-score__vs { font-size: 1.15rem; font-weight: 600; color: rgba(255, 255, 255, 0.5); }

/* live */
.fx-live { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fx-live__badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.07em; color: #ff5a5a; }
.fx-live__dot { width: 7px; height: 7px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; animation: fxPulse 1.4s ease-in-out infinite; }
.fx-live__time { font-size: 0.72rem; font-weight: 700; color: rgba(255, 255, 255, 0.8); font-variant-numeric: tabular-nums; }
@keyframes fxPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }

/* metadata / attendance */
.fx-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); }
.fx-meta__venue { color: rgba(255, 255, 255, 0.72); }
.fx-meta__dot { opacity: 0.4; }
.fx-att { display: inline-flex; align-items: center; gap: 4px; }

/* context tags */
.fx-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.fx-tag {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
}
.fx-tag--upset {
  color: #ffd27a; background: rgba(255, 176, 60, 0.14); border-color: rgba(255, 176, 60, 0.4);
}
.fx-tag--streak {
  color: #7ee2a8; background: rgba(74, 222, 128, 0.13); border-color: rgba(74, 222, 128, 0.38);
}
.fx-tag--heavy {
  color: #c3b0ff; background: rgba(140, 110, 255, 0.14); border-color: rgba(140, 110, 255, 0.42);
}

/* biggest story + fanzone/keystat (one secondary item) */
.fx-story, .fx-fan { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; max-width: 100%; }
.fx-story { font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.92);
  animation: fxStoryPulse 2.2s ease-in-out infinite; }
/* pre-game marquee headline on a scheduled card */
.fx-story--pre { color: #ffd27a; animation: none; }
.fx-story--pre .fx-story__text { font-weight: 700; }
/* day-of-week "sign" between fixture groups */
.fx-day { display: flex; align-items: center; gap: 12px; margin: 4px 2px 2px; }
.fx-day::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }
.fx-day__sign { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); }
@keyframes fxStoryPulse {
  0%, 100% { opacity: 0.78; text-shadow: none; }
  50% { opacity: 1; text-shadow: 0 0 10px rgba(255, 255, 255, 0.22); }
}
@media (prefers-reduced-motion: reduce) { .fx-story { animation: none; opacity: 1; } }
.fx-story__icon, .fx-fan__icon { flex: none; }
.fx-story__text, .fx-fan__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-fan { font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); }
.fx-fan b { color: #fff; font-weight: 800; }

/* hover-revealed view affordance */
.fx-card__view {
  display: block; text-align: center; margin-top: 0; max-height: 0; overflow: hidden; opacity: 0;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; color: var(--accent);
  transition: opacity 0.18s ease-out, max-height 0.18s ease-out, margin-top 0.18s ease-out;
}
.fx-card:hover .fx-card__view { opacity: 1; max-height: 26px; margin-top: 12px; }

/* background depth layers */
.fx-depth { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.fx-depth__vignette { position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 26%, transparent 42%, rgba(0, 0, 0, 0.58) 100%),
             linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.35) 100%); }
.fx-depth__bloom { position: absolute; left: 50%; top: -8%; width: 68vw; height: 42vh; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(150, 175, 220, 0.13), transparent 70%); filter: blur(34px);
  transition: transform 0.3s ease-out; }
.fx-depth__grain { position: absolute; inset: 0; opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

@media (max-width: 880px) {
  .fx-team__logo, .fx-team svg { width: 52px; height: 52px; }
}
@media (max-width: 560px) {
  .fx-card { padding: 18px 14px; }
  .fx-card__main { gap: 8px; }
  .fx-team { gap: 8px; }
  .fx-team__logo, .fx-team svg { width: 40px; height: 40px; }
  .fx-team__name { font-size: 0.82rem; }
  .fx-score { min-width: 56px; }
  .fx-score__nums { font-size: 1.3rem; gap: 5px; }
  .fx-score__val--win { font-size: 1.5rem; }
  .fx-score__sep { font-size: 1.1rem; }
  /* drop lower-priority content before shrinking further; keep score + story */
  .fx-tags, .fx-fan, .fx-streak { display: none; }
  .fx-story { font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-card, .fx-team__logo, .fx-team svg, .fx-card__view, .fx-depth__bloom { transition: none; }
  .fx-card:hover { transform: none; }
  .fx-card:hover .fx-team__logo, .fx-card:hover .fx-team svg { transform: none; }
  .fx-live__dot { animation: none; }
}

.fixture-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "home score away"
    "meta meta meta";
  align-items: center;
  gap: 4px 12px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.fixture-row:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.fixture-row__team {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 0;
}

.fixture-row__team--away {
  grid-area: away;
  justify-content: flex-end;
  text-align: right;
}

.fixture-row__team:not(.fixture-row__team--away) {
  grid-area: home;
}

.fixture-row__team svg,
.fixture-row__team img {
  display: block;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.fixture-row__score {
  grid-area: score;
  font-size: 1.5rem;
  min-width: 90px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.fixture-row__score-val {
  font-weight: 400;
  opacity: 0.9;
}

.fixture-row__score-val--win {
  font-weight: 600;
  opacity: 1;
}

.fixture-row__score-val--loss {
  font-weight: 400;
  opacity: 0.35;
}

.fixture-row__score-sep {
  font-weight: 300;
  opacity: 0.4;
  font-size: 1.2rem;
}

/* Player stats view */
.player-stats-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.player-stats-section__heading {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.player-stats-section .ratings__grid {
  grid-template-columns: 1fr;
}

/* Team stats view */
.team-stats__teams {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 16px;
}

.team-stats__group-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 24px 0 12px;
  text-align: center;
}

.team-stats__group-title:first-child {
  margin-top: 0;
}

.team-stat-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 16px;
}

.team-stat-row__value {
  font-weight: 700;
  font-size: 0.95rem;
}

.team-stat-row__value--home {
  grid-column: 1;
  grid-row: 2;
  text-align: left;
}

.team-stat-row__value--away {
  grid-column: 3;
  grid-row: 2;
  text-align: right;
}

.team-stat-row__label {
  grid-column: 1 / -1;
  grid-row: 1;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.team-stat-row__bar {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  height: 38px;
  border-radius: 11px;
  background-color: var(--surface-alt);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.team-stat-row__bar-center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: var(--border);
  transform: translateX(-50%);
  z-index: 1;
}

.team-stat-row__bar-fill {
  position: absolute;
  top: 0;
  height: 100%;
  min-width: 3px;
  transition: width 0.5s ease;
}

.team-stat-row__bar-fill--labeled {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.team-stat-row__bar-label {
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.team-stat-row__bar-fill--home {
  right: 50%;
  border-radius: 11px 0 0 11px;
  box-shadow: 0 0 8px -2px var(--glow, transparent);
}

.team-stat-row__bar-fill--away {
  left: 50%;
  border-radius: 0 11px 11px 0;
  box-shadow: 0 0 8px -2px var(--glow, transparent);
}

.fixture-row__meta {
  grid-area: meta;
  color: var(--text-muted);
  font-size: .8rem;
  text-align: center;
  white-space: nowrap;
  margin-top: 4px;
}

/* ── Ladder ── */
.ladder-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.ladder-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.ladder-th {
  position: sticky;               /* header stays put while the ladder scrolls */
  top: 0;
  z-index: 10;
  padding: 11px 14px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid var(--border);
  background: #16171b;
}

.ladder-th:first-child { border-top-left-radius: 14px; }
.ladder-th:last-child { border-top-right-radius: 14px; }
.ladder-th--pos { width: 44px; }
.ladder-th--team { text-align: left; width: 210px; }
.ladder-th--pts { color: var(--text); }
.ladder-th--form { text-align: left; width: 190px; }

.ladder-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.14s ease, box-shadow 0.14s ease;
}

.ladder-row:last-child { border-bottom: none; }
.ladder-row:last-child .ladder-td:first-child { border-bottom-left-radius: 14px; }
.ladder-row:last-child .ladder-td:last-child { border-bottom-right-radius: 14px; }

.ladder-row:hover {
  background: color-mix(in srgb, var(--team-primary, #888) 8%, transparent);
  box-shadow: inset 3px 0 0 var(--team-primary, transparent);
}

/* AFL zones: line under 4th (double chance) and 8th (finals) */
.ladder-row--top4-cutoff { border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.ladder-row--finals-cutoff { border-bottom: 2px solid var(--accent); }
/* 7-10 play the wildcard round — a softer line than the finals cut, so the
   hierarchy reads: solid = through, dashed = still alive, nothing = out. */
.ladder-row--wildcard-cutoff { border-bottom: 2px dashed color-mix(in srgb, var(--rating-mid) 70%, transparent); }

@keyframes ladder-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
.ladder-row--enter { animation: ladder-enter 0.34s ease both; }

.ladder-td {
  padding: 11px 14px;
  text-align: center;
  vertical-align: middle;
}

.ladder-td--num {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.ladder-td--pts {
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.ladder-td--team { text-align: left; }
.ladder-td--pos { width: 44px; }
.ladder-td--form { text-align: left; }

.ladder-pct { font-weight: 600; }
.ladder-pct--good { color: #22c55e; }
.ladder-pct--bad { color: #e5484d; }

.ladder-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
}

.ladder-pos--top4 {
  background: var(--accent);
  color: #0e1218;
}

.ladder-pos--finals8 {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.ladder-pos--wildcard {
  color: var(--rating-mid);
  background: color-mix(in srgb, var(--rating-mid) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rating-mid) 42%, transparent);
}

.ladder-pos--spoon {
  color: #e5484d;
  background: color-mix(in srgb, #e5484d 14%, transparent);
}

.ladder-team {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ladder-team__logo {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ladder-team__name {
  font-weight: 600;
  font-size: 0.92rem;
}

.ladder-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: fz-livedot 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes fz-livedot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}

/* Form guide: last 5, newest on the right */
.ladder-form {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ladder-form__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 800;
  cursor: default;
}
.ladder-form__dot--w { background: color-mix(in srgb, #22c55e 22%, transparent); color: #22c55e; }
.ladder-form__dot--l { background: color-mix(in srgb, #e5484d 20%, transparent); color: #e5484d; }
.ladder-form__dot--d { background: rgba(255, 255, 255, 0.1); color: var(--text-muted); }
.ladder-form__dot:last-of-type { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.ladder-form__streak {
  margin-left: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ladder-form__streak--w { color: #22c55e; }
.ladder-form__streak--l { color: #e5484d; }
.ladder-form__streak--d { color: var(--text-muted); }
.ladder-form__none { color: var(--text-muted); }

/* Legend under the table */
.ladder-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 12px 4px 0;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.ladder-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ladder-legend__dot { width: 9px; height: 9px; border-radius: 3px; }
.ladder-legend__dot--top4 { background: var(--accent); }
.ladder-legend__dot--finals { background: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent); }
.ladder-legend__dot--wildcard { background: color-mix(in srgb, var(--rating-mid) 60%, transparent); }
.ladder-legend__dot--spoon { background: color-mix(in srgb, #e5484d 60%, transparent); }
.ladder-legend__form { margin-left: auto; }

/* Narrow screens: drop D / PF / PA, tighten the rest */
@media (max-width: 760px) {
  .ladder-th:nth-child(6), .ladder-td:nth-child(6),
  .ladder-th:nth-child(7), .ladder-td:nth-child(7),
  .ladder-th:nth-child(8), .ladder-td:nth-child(8) { display: none; }
  .ladder-th, .ladder-td { padding: 9px 8px; }
  .ladder-team__logo { width: 26px; height: 26px; }
  .ladder-team__logo img { width: 26px; height: 26px; }
  .ladder-team__name { font-size: 0.84rem; }
  .ladder-form__dot { width: 16px; height: 16px; font-size: 0.56rem; border-radius: 5px; }
  .ladder-form__streak { display: none; }
  .ladder-legend__form { display: none; }
}

/* ── Advanced stats ── */
.adv-stats {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

.adv-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.adv-stat-card__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.adv-stat-card__val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.adv-stat-card__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.adv-stats__heading {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

/* ── Awards pitch container ── */
.awards-pitch-container {
  max-width: 458px;
  margin: 0 auto 32px;
}

.awards-pitch-oval {
  width: 100%;
}

.awards-pitch-container .interchange {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: flex-start;
  gap: 4px;
  margin-top: 28px;
  padding: 40px 12px 12px;
  position: relative;
}

.awards-pitch-container .interchange h3 {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 0;
}

.awards-pitch-container .interchange .pitch-chip {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
}

.awards-pitch-container .interchange .pitch-chip__name {
  text-align: center;
  color: var(--text);
}

/* ── Awards ── */
.awards-header {
  padding: 32px 0 20px;
}

.awards-tabs {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.awards-tab {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.awards-tab.active {
  border-color: var(--accent);
  color: var(--accent);
}

.awards-subtitle {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 20px;
}

.awards-panel.hidden { display: none; }

/* Branded award panels — full-bleed background */
#panel-aa,
#panel-totw {
  position: relative;
  /* break out of .container to span the full viewport width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #0d0d0d;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border-top: 1px solid rgba(200, 164, 90, 0.35);
  border-bottom: 1px solid rgba(200, 164, 90, 0.35);
  padding: 48px 24px 56px;
  overflow: hidden;
}

#panel-aa   { background-image: url("assets/all-australian-bg.png"); }

/* Team of the Week — light silver/gold/green, the inverse of All-Australian */
#panel-totw {
  background-color: #c1c6c2;
  border-top-color: rgba(0, 168, 132, 0.4);
  border-bottom-color: rgba(0, 168, 132, 0.4);
}

#panel-totw .totw-subtitle {
  position: relative;
  z-index: 2;
  margin: 14px 0 4px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #2c3239;
}

/* ── Brownlow predictor — round-by-round vote grid ── */
.brownlow-board {
  margin: 8px 0 0;
}

.brownlow-loading {
  text-align: center;
  color: var(--text-muted);
  padding: 32px 0;
}

.bl-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.bl-table {
  border-collapse: collapse;
  font-size: 0.85rem;
  width: 100%;
  white-space: nowrap;
}

.bl-table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 10px 6px;
  border-bottom: 1px solid var(--border);
  background: #16171b;   /* solid — translucent stickies ghost when scrolling */
  position: sticky;
  top: 0;
  z-index: 3;
}

.bl-round-h--future { opacity: 0.35; }

/* corner cells sit above both sticky axes */
.bl-table thead .bl-rank-h,
.bl-table thead .bl-player-h,
.bl-table thead .bl-total-h { z-index: 5; }

.bl-round-h { width: 30px; text-align: center; }
.bl-rank-h  { width: 34px; text-align: center; }
.bl-total-h { text-align: center; }

/* sticky left columns */
.bl-rank-h, .bl-rank,
.bl-player-h, .bl-player {
  position: sticky;
  background: #131418;   /* solid, see above */
  z-index: 2;
}
.bl-rank-h, .bl-rank { left: 0; }
.bl-player-h, .bl-player { left: 34px; }
.bl-player-h { text-align: left; padding-left: 10px; min-width: 170px; }

/* divider between the player column and the round grid */
.bl-player-h, .bl-player {
  padding-right: 18px;
  box-shadow: inset -2px 0 0 0 #3a4655;
}
/* small gap so the first round column doesn't butt against the divider */
.bl-round-h:first-of-type,
.bl-row .bl-cell:first-of-type { padding-left: 14px; }
.bl-total-h, .bl-total {
  position: sticky;
  right: 0;
  background: #131418;
  z-index: 2;
  box-shadow: inset 2px 0 0 0 #3a4655;
}

.bl-row td {
  border-bottom: 1px solid var(--border);
  padding: 5px 4px;
  text-align: center;
}

.bl-row:nth-child(even) .bl-cell { background: rgba(255, 255, 255, 0.015); }
.bl-row:hover td { background: var(--surface-alt); }
.bl-row:hover .bl-rank, .bl-row:hover .bl-player, .bl-row:hover .bl-total { background: #1c1e24; }

col.bl-col--hover { background: rgba(255, 255, 255, 0.05); }

.bl-rank {
  color: var(--text-muted);
  font-weight: 700;
}
.bl-rank__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
}
/* podium */
.bl-row--1 .bl-rank__chip { background: #ffd23d; color: #1a1405; box-shadow: 0 0 12px rgba(255, 210, 61, 0.35); }
.bl-row--2 .bl-rank__chip { background: #cfd4d8; color: #14161a; }
.bl-row--3 .bl-rank__chip { background: #cd9b63; color: #201409; }

.bl-player {
  text-align: left;
  padding-left: 10px;
  font-weight: 600;
}
.bl-player span {
  display: inline-flex;
  align-items: center;
}
.bl-player img {
  vertical-align: middle;
  margin-right: 8px;
}

.bl-total {
  font-weight: 800;
  color: #ffd23d;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.bl-total__gap {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-left: 2px;
}

/* round cells — Brownlow gold intensity ramp */
.bl-cell { width: 30px; }
.bl-cell--future { background: transparent; }
.bl-cell--bye,
.bl-cell--dnp {
  color: var(--text-muted);
  opacity: 0.35;
  font-size: 0.72rem;
}
.bl-nil {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  vertical-align: middle;
}
.bl-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  font-style: normal;
}
.bl-chip--3 {
  background: #ffd23d;
  color: #1a1405;
  box-shadow: 0 0 9px rgba(255, 210, 61, 0.28);
}
.bl-chip--2 {
  background: color-mix(in srgb, #ffd23d 24%, transparent);
  color: #ffd23d;
}
.bl-chip--1 {
  background: color-mix(in srgb, #ffd23d 8%, transparent);
  color: color-mix(in srgb, #ffd23d 65%, var(--text-muted));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffd23d 24%, transparent);
}

/* Podium hero — the medal race at a glance */
.bl-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 20px;
  flex-wrap: wrap;
}
.bl-pod {
  position: relative;
  width: 188px;
  border-radius: 16px;
  padding: 16px 14px 13px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--border);
}
.bl-pod--1 {
  width: 220px;
  padding: 22px 16px 16px;
  border-color: color-mix(in srgb, #ffd23d 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, #ffd23d 11%, transparent), rgba(255, 255, 255, 0.015));
  box-shadow: 0 18px 50px rgba(255, 210, 61, 0.1);
}
.bl-pod--2 { border-color: rgba(207, 212, 216, 0.3); }
.bl-pod--3 { border-color: rgba(205, 155, 99, 0.35); }
.bl-pod__rank {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-weight: 800;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-muted);
}
.bl-pod--1 .bl-pod__rank { background: #ffd23d; color: #1a1405; }
.bl-pod--2 .bl-pod__rank { background: #cfd4d8; color: #14161a; }
.bl-pod--3 .bl-pod__rank { background: #cd9b63; color: #201409; }
.bl-pod__img {
  width: 88px;
  height: 88px;
  margin: 0 auto 9px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border);
}
.bl-pod--1 .bl-pod__img {
  width: 108px;
  height: 108px;
  border: 2px solid #ffd23d;
  box-shadow: 0 0 24px rgba(255, 210, 61, 0.25);
}
.bl-pod__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bl-pod__name { font-weight: 800; font-size: 0.95rem; }
.bl-pod--1 .bl-pod__name { font-size: 1.05rem; }
.bl-pod__club {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin: 3px 0 7px;
}
.bl-pod__votes {
  font-size: 1.55rem;
  font-weight: 900;
  color: #ffd23d;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bl-pod--1 .bl-pod__votes { font-size: 1.9rem; }
.bl-pod__votes span {
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* legend under the table */
.bl-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 10px 4px 0;
  font-size: 0.74rem;
  color: var(--text-muted);
}
.bl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bl-legend .bl-chip { width: 18px; height: 18px; font-size: 0.62rem; border-radius: 5px; box-shadow: none; }
.bl-legend__muted { opacity: 0.8; }

/* Big round watermark baked into the panel background */
.totw-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.8;
  pointer-events: none;
  user-select: none;
  opacity: 0.10;
}

.totw-watermark__rd {
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: 0.5rem;
  text-indent: 0.5rem;
  color: #1c2229;
}

.totw-watermark__num {
  font-size: 22rem;
  font-weight: 900;
  color: #1c2229;
}

/* keep interactive/content layers above the watermark */
#panel-totw .totw-controls,
#panel-totw .awards-pitch-container {
  position: relative;
  z-index: 2;
}
#panel-totw { background-image: url("assets/totw-bg.svg"); }

#panel-aa .awards-subtitle {
  position: relative;
  color: rgba(200, 164, 90, 0.85);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  text-align: center;
}

/* On the branded panels, drop the oval's solid green so the artwork shows through */
#panel-aa .pitch-oval,
#panel-totw .pitch-oval {
  background: transparent;
}

#panel-aa .pitch-oval__bg ellipse,
#panel-aa .pitch-oval__bg rect,
#panel-aa .pitch-oval__bg circle,
#panel-aa .pitch-oval__bg path,
#panel-aa .pitch-oval__bg line {
  stroke: rgba(200, 164, 90, 0.25);
}

/* TOTW: darker field markings + dark text on the light backdrop */
#panel-totw .pitch-oval__bg ellipse,
#panel-totw .pitch-oval__bg rect,
#panel-totw .pitch-oval__bg circle,
#panel-totw .pitch-oval__bg path,
#panel-totw .pitch-oval__bg line {
  stroke: rgba(60, 70, 78, 0.28);
}

#panel-totw .pitch-chip__name,
#panel-totw .interchange .pitch-chip__name {
  color: #1c2229;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  opacity: 1;
}

#panel-totw .totw-label {
  position: relative;
  color: #00a884;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  text-align: center;
}

#panel-totw .totw-round-btn {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(60, 70, 78, 0.2);
  color: #3c464e;
}

#panel-totw .totw-round-btn.active {
  border-color: #00a884;
  color: #00a884;
  background: #ffffff;
}

#panel-totw .interchange h3 {
  color: #5a6066;
}

/* Team of the Week controls */
.totw-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.totw-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.totw-round-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.totw-round-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.totw-round-btn.active {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Player performance comments ── */
.pitch-chip--clickable { cursor: pointer; }
.pitch-chip--clickable:hover .pitch-chip__avatar {
  box-shadow: 0 0 0 2px var(--accent);
}

.pitch-chip__comments {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e34747;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  animation: notif-pop 0.2s ease;
}
@keyframes notif-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* Modal */
.cmodal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}
.cmodal-overlay.open { display: flex; }

.cmodal {
  --rk: #00d6a4;                       /* rating colour, set per-player in JS */
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  background: rgba(14, 16, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.6),
    0 0 60px color-mix(in srgb, var(--rk) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: cmodal-rise 0.34s cubic-bezier(0.2, 0.85, 0.2, 1);
}
/* Hero glows behind the card, tinted by the player's rating colour:
   one from the top-left, a matching one from the bottom-right. */
.cmodal::before,
.cmodal::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 180px;
  pointer-events: none;
  z-index: 0;
}
.cmodal::before {
  top: 0;
  background:
    radial-gradient(120% 100% at 18% 0%,
      color-mix(in srgb, var(--rk) 38%, transparent) 0%, transparent 70%);
}
.cmodal::after {
  bottom: 0;
  background:
    radial-gradient(120% 100% at 85% 100%,
      color-mix(in srgb, var(--rk) 34%, transparent) 0%, transparent 70%);
}
@keyframes cmodal-rise {
  from { transform: translateY(28px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@media (min-width: 640px) {
  .cmodal-overlay { align-items: center; }
  .cmodal { border-radius: 18px; }
}

.cmodal__close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.cmodal__close:hover { color: var(--text); }

.cmodal__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 56px 18px 22px;   /* extra right padding clears the close X */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cmodal__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid color-mix(in srgb, var(--rk) 70%, white 10%);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--rk) 18%, transparent),
    0 0 20px color-mix(in srgb, var(--rk) 45%, transparent);
}
.cmodal__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cmodal__avatar svg { width: 64px; height: 64px; }
.cmodal__headinfo { flex: 1; min-width: 0; }
.cmodal__player {
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.cmodal__meta { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; }
.cmodal__rating {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 800; color: #0e1218;
  box-shadow:
    0 0 22px color-mix(in srgb, var(--rk) 60%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.cmodal__rating.rating--vhigh, .cmodal__rating.rating--low { color: #fff; }

.cmodal__stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cmodal__stat {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 10px 4px;
  text-align: center;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  animation: cmodal-stat-in 0.3s ease forwards;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}
.cmodal__stat:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.18);
}
@keyframes cmodal-stat-in {
  to { opacity: 1; transform: translateY(0); }
}
.cmodal__stat-val {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cmodal__stat-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-top: 3px;
}
/* Standout stat (e.g. goals) — glows in the rating colour. */
.cmodal__stat--hot {
  background: color-mix(in srgb, var(--rk) 20%, transparent);
  border-color: color-mix(in srgb, var(--rk) 55%, transparent);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--rk) 22%, transparent);
}
.cmodal__stat--hot .cmodal__stat-val { color: var(--rk); }
.cmodal__stat--hot::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--rk);
  box-shadow: 0 0 8px var(--rk);
}
@media (max-width: 520px) {
  .cmodal__stats { grid-template-columns: repeat(4, 1fr); }
}

.cmodal__list {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
  min-height: 80px;
}
.cmodal__empty { color: var(--text-muted); text-align: center; padding: 24px 0; }

.cmodal__comment { padding: 10px 0; border-bottom: 1px solid var(--border); }
.cmodal__comment:last-child { border-bottom: none; }
.cmodal__comment-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; }
.cmodal__comment-nick { font-weight: 700; font-size: 0.85rem; }
.cmodal__comment-time { font-size: 0.72rem; color: var(--text-muted); }
.cmodal__comment-body { font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }

.cmodal__form { position: relative; z-index: 1; border-top: 1px solid var(--border); padding: 12px 20px 16px; }
.cmodal__nick {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 10px;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.cmodal__row { display: flex; gap: 8px; align-items: flex-end; }
.cmodal__body {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
}
.cmodal__nick:focus, .cmodal__body:focus { outline: none; border-color: var(--accent); }
.cmodal__submit {
  flex-shrink: 0;
  background: var(--accent);
  color: #0e1218;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-weight: 700;
  cursor: pointer;
}
.cmodal__submit:disabled { opacity: 0.5; cursor: default; }

.player-card--clickable { cursor: pointer; }
.player-card__rating { position: relative; }
.player-card__comments {
  position: absolute;
  top: -7px;
  left: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e34747;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  animation: notif-pop 0.2s ease;
}

/* ── Live score indicator ── */
.match-info__status--live { color: #ff4d4d; }
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #ff4d4d;
  vertical-align: middle;
  animation: live-pulse 1.2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

.fixture-row__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #ff4d4d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Play-by-play timeline ── */
.pbp-section { max-width: 800px; margin: 0 auto; }
.pbp-empty { color: var(--text-muted); text-align: center; padding: 32px 0; }
.pbp-quarter {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin: 18px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.pbp-card {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.pbp-card--goal { border-left-color: var(--accent); }
.pbp-card--behind { border-left-color: var(--text-muted); }
.pbp-card__main {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
}

/* Drama badge banner */
.pbp-card__badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  color: #fff;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--acc, #6b7280) 95%, #000),
    color-mix(in srgb, var(--acc, #6b7280) 52%, #141418));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.pbp-card__badge-icon { display: inline-flex; color: #fff; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
.pbp-card__badge-icon svg { display: block; }
.pbp-card__badge-label { text-transform: uppercase; letter-spacing: 0.9px; font-weight: 800; font-size: 0.75rem; }
.pbp-card__badge-sub { margin-left: auto; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.3px; color: rgba(255, 255, 255, 0.9); }
.pbp-card__badge--catching { background: transparent; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95); }

/* Whole-EVENT fire background for CATCHING FIRE: the flames sit behind the
   entire item (header + expanded detail); inner pieces go transparent so one
   continuous image shows, with a dark scrim keeping all the text readable. */
.pbp-item.pbp-item--drama-catching {
  background: linear-gradient(rgba(12, 5, 2, 0.6), rgba(12, 5, 2, 0.66)),
              #160a04 url("assets/catching-fire.png") center / cover no-repeat;
  border: 1px solid rgba(251, 146, 60, 0.45);
  border-left: 3px solid #fb923c;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.pbp-item--drama-catching .pbp-card,
.pbp-item--drama-catching .pbp-detail {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  margin-bottom: 0;
}
.pbp-item--drama-catching .pbp-card__main,
.pbp-item--drama-catching .pbp-card__name,
.pbp-item--drama-catching .pbp-card__score { text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9); }
.pbp-item--drama-catching .pbp-card__cta { background: rgba(0, 0, 0, 0.3); border-top-color: rgba(255, 255, 255, 0.12); }

/* Whole-EVENT snow/ice background for AVALANCHE OF GOALS. */
.pbp-item.pbp-item--drama-avalanche {
  background: linear-gradient(rgba(4, 8, 18, 0.58), rgba(4, 8, 18, 0.64)),
              #060c18 url("assets/avalanche.png") center / cover no-repeat;
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-left: 3px solid #38bdf8;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.pbp-item--drama-avalanche .pbp-card,
.pbp-item--drama-avalanche .pbp-detail {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  margin-bottom: 0;
}
.pbp-item--drama-avalanche .pbp-card__badge { background: transparent; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95); }
.pbp-item--drama-avalanche .pbp-card__main,
.pbp-item--drama-avalanche .pbp-card__name,
.pbp-item--drama-avalanche .pbp-card__score { text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9); }
.pbp-item--drama-avalanche .pbp-card__cta { background: rgba(0, 0, 0, 0.3); border-top-color: rgba(255, 255, 255, 0.12); }

/* Whole-EVENT purple background for IN THE ZONE (player 2nd goal in a qtr). */
.pbp-item.pbp-item--drama-fire {
  background: linear-gradient(rgba(14, 6, 22, 0.55), rgba(14, 6, 22, 0.62)),
              #0e0616 url("assets/in-the-zone.png") center / cover no-repeat;
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-left: 3px solid #a855f7;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.pbp-item--drama-fire .pbp-card,
.pbp-item--drama-fire .pbp-detail {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  margin-bottom: 0;
}
.pbp-item--drama-fire .pbp-card__badge { background: transparent; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95); }
.pbp-item--drama-fire .pbp-card__main,
.pbp-item--drama-fire .pbp-card__name,
.pbp-item--drama-fire .pbp-card__score { text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9); }
.pbp-item--drama-fire .pbp-card__cta { background: rgba(0, 0, 0, 0.3); border-top-color: rgba(255, 255, 255, 0.12); }
/* Accent per moment is set inline (--acc) by the JS; a faint moving glint adds
   life without the old bright sweep. */
.pbp-card__badge::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-18deg);
  animation: pbp-badge-shine 3.4s ease-in-out infinite;
}
@keyframes pbp-badge-shine { 0% { left: -45%; } 55%, 100% { left: 125%; } }

/* Comment CTA footer */
.pbp-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
}
.pbp-card__cta-go { font-weight: 800; opacity: 0.6; }
.pbp-card__cta--active { color: var(--accent); background: rgba(0, 214, 164, 0.07); }
.pbp-card__cta--active .pbp-card__cta-go { opacity: 1; }
.pbp-item--open .pbp-card__cta { display: none; }

.pbp-card__rail {
  flex-shrink: 0;
  width: 64px;
  text-align: center;
}
.pbp-goals { display: block; margin: 0 auto; }
.pbp-post { stroke: rgba(255,255,255,0.65); stroke-width: 2.5; stroke-linecap: round; }
.pbp-post--point { stroke: rgba(255,255,255,0.32); stroke-width: 2; }
.pbp-ground { stroke: rgba(255,255,255,0.18); stroke-width: 2; }
.pbp-ball { stroke: rgba(0,0,0,0.35); stroke-width: 1; }
.pbp-ball--goal { fill: var(--accent); }
.pbp-ball--behind { fill: var(--rating-mid); }
.pbp-ball--rushed { fill: var(--text-muted); }
.pbp-card__clock {
  margin-top: 3px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.pbp-card__avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pbp-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pbp-card__avatar svg { width: 46px; height: 46px; }

.pbp-card__body { flex: 1; min-width: 0; }
.pbp-card__name { font-weight: 700; font-size: 0.95rem; }
.pbp-card__num { color: var(--text-muted); font-weight: 600; margin-left: 6px; font-size: 0.85rem; }
/* Unmistakable goal/behind result chip */
.pbp-card__result {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  vertical-align: 2px;
}
.pbp-card__result--goal { background: var(--accent); color: #06210a; }
.pbp-card__result--behind { background: #c2410c; color: #fff; }
.pbp-card__result--rushed { background: #6b7280; color: #fff; }
.pbp-card__team {
  display: flex;
  align-items: center;
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.pbp-card__score {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.pbp-card__score b { font-size: 1rem; }
.pbp-card__score-sep { color: var(--text-muted); }

/* Goal-probability box — flashes green (goal) / red (behind/miss) on appear. */
.pbp-card__prob {
  flex-shrink: 0;
  min-width: 56px;
  text-align: center;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
}
.pbp-card__prob-val {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pbp-card__prob-pct { font-size: 0.7rem; font-weight: 700; opacity: 0.7; margin-left: 1px; }
.pbp-card__prob-label {
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-top: 3px;
}
.pbp-card__prob--made {
  border-color: rgba(68, 181, 73, 0.55);
  animation: pbp-flash-green 1.2s ease both;
}
.pbp-card__prob--missed {
  border-color: rgba(227, 71, 71, 0.55);
  animation: pbp-flash-red 1.2s ease both;
}
@keyframes pbp-flash-green {
  0%   { background: rgba(255, 255, 255, 0.04); box-shadow: none; }
  18%, 46% { background: rgba(68, 181, 73, 0.9); box-shadow: 0 0 20px rgba(68, 181, 73, 0.75); color: #06210a; }
  100% { background: rgba(68, 181, 73, 0.12); box-shadow: none; }
}
@keyframes pbp-flash-red {
  0%   { background: rgba(255, 255, 255, 0.04); box-shadow: none; }
  18%, 46% { background: rgba(227, 71, 71, 0.9); box-shadow: 0 0 20px rgba(227, 71, 71, 0.7); color: #2a0606; }
  100% { background: rgba(227, 71, 71, 0.12); box-shadow: none; }
}

/* ── Play-by-play: expandable detail (probability + comments) ── */
.pbp-card--clickable { cursor: pointer; }
.pbp-item.pbp-item--open .pbp-card { border-radius: 10px 10px 0 0; margin-bottom: 0; }
.pbp-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 14px 16px 16px;
  margin-bottom: 8px;
}

/* Rich expanded shot breakdown */
.pbp-detail__top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}
.pbp-detail__map { width: 100%; max-width: 420px; margin: 0 auto; }
.pbp-detail__info { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.pbp-detail__stats { display: flex; gap: 10px; flex-wrap: wrap; }
.pbp-dstat {
  flex: 1;
  min-width: 76px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.pbp-dstat__val { font-size: 1.35rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.pbp-dstat__label {
  font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted); margin-top: 4px;
}
.pbp-dstat__sub { font-size: 0.6rem; color: var(--text-muted); margin-top: 3px; opacity: 0.8; }
.pbp-detail__shot {
  font-size: 0.92rem; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
.pbp-detail__shot-icon { font-size: 0.7rem; }
.pbp-detail__shot.is-goal .pbp-detail__shot-icon { color: var(--rating-good); }
.pbp-detail__shot.is-miss .pbp-detail__shot-icon { color: var(--rating-low); }

/* Forward-50 map */
.pbp-f50 { display: block; }
.pbp-f50__turf { fill: rgba(30, 70, 40, 0.45); stroke: rgba(255,255,255,0.08); }
.pbp-f50__arc { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; }
.pbp-f50__square { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.2; }
.pbp-f50__goalline { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.5; }
.pbp-f50__post { stroke: rgba(255, 255, 255, 0.75); stroke-width: 2.4; }
.pbp-f50__post--behind { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.8; }
@media (max-width: 560px) {
  .pbp-detail__top { flex-direction: column; }
  .pbp-detail__map { max-width: 100%; flex-basis: auto; }
}

.pbp-prob { margin-bottom: 16px; }
.pbp-prob__label { font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; }
.pbp-prob__hint { color: var(--text-muted); font-weight: 500; }
.pbp-prob__bar {
  position: relative;
  height: 10px;
  background: var(--surface-alt);
  border-radius: 5px;
  overflow: hidden;
}
.pbp-prob__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rating-mid), var(--accent));
  border-radius: 5px;
}
.pbp-prob__val { margin-top: 4px; font-size: 0.95rem; font-weight: 800; color: var(--accent); }

.pbp-comments__title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.pbp-comments__list { margin-bottom: 10px; }
.pbp-comments__empty { color: var(--text-muted); font-size: 0.85rem; padding: 6px 0; }
.pbp-comment { padding: 7px 0; border-bottom: 1px solid var(--border); }
.pbp-comment:last-child { border-bottom: none; }
.pbp-comment__head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.pbp-comment__nick { font-weight: 700; font-size: 0.82rem; }
.pbp-comment__time { font-size: 0.7rem; color: var(--text-muted); }
.pbp-comment__body { font-size: 0.88rem; word-break: break-word; }

.pbp-comments__nick {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 10px;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.pbp-comments__row { display: flex; gap: 8px; }
.pbp-comments__body {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 0.88rem;
}
.pbp-comments__nick:focus, .pbp-comments__body:focus { outline: none; border-color: var(--accent); }
.pbp-comments__form button {
  flex-shrink: 0;
  background: var(--accent);
  color: #0e1218;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  font-weight: 700;
  cursor: pointer;
}
.pbp-comments__form button:disabled { opacity: 0.5; cursor: default; }

/* ── Comment upvotes ── */
.comment-row { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.comment-row__content { order: 1; width: 100%; min-width: 0; }
.cvote {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.cvote:hover { color: var(--text); border-color: var(--text-muted); }
.cvote--on {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0, 214, 164, 0.12);
}
.cvote__arrow { font-size: 0.66rem; }
.cvote__count { font-size: 0.78rem; font-weight: 700; }
.cvote:disabled { opacity: 0.5; cursor: default; }

/* ── Liquid glass surfaces ─────────────────────────────────────────────
   Frosted, translucent panels that blur the page background through them.
   Applied to the major card/panel containers; small inner tiles use the
   light --surface tint and layer on top for a stacked-glass effect. */
.navbar,
.match-header,
.player-card,
.pcard,
.players-search,
.players-filter,
.player-page__header,
.fixture-row,
.ladder-wrap,
.adv-stat-card,
.awards-tab,
.pbp-card,
.pbp-detail {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35),
              0 0 24px rgba(255, 255, 255, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.25),
              inset 0 0 40px rgba(255, 255, 255, 0.05);
}

/* Brighter glass + stronger glow on hover for the interactive cards. */
.fixture-row:hover,
.player-card:hover,
.pcard:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35),
              0 0 32px rgba(255, 255, 255, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.35),
              inset 0 0 50px rgba(255, 255, 255, 0.07);
}

/* ── FanZone ──────────────────────────────────────────────────────────── */
.fz { max-width: 1040px; }
.fz__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
.fz__title {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.5px;
  transform: skewX(-5deg);
  position: relative;
  padding-right: 8px;                 /* italic overhang room */
  background: linear-gradient(180deg, #ffffff 15%, #cdd2da 62%, #97a0ab 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fz__title span {
  background: linear-gradient(180deg, #ffc21a 0%, #ff5a24 32%, #e51f1f 70%, #a81111 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 74, 30, 0.4));
}
.fz__title::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 10%;
  bottom: 1px;
  height: 3px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 194, 26, 0.9), rgba(255, 194, 26, 0) 74%);
}
.fz__sub { color: var(--text-muted); font-size: 0.9rem; margin-top: 2px; }
/* minmax(0,1fr) lets the main column shrink below its content's min-content so a
   wide card (e.g. the race graph) reflows inside instead of blowing the grid wide. */
.fz__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.fz__main { min-width: 0; }
@media (max-width: 860px) {
  .fz__layout { grid-template-columns: minmax(0, 1fr); }
  .fz__side { order: 2; }                       /* ladder below the feed, not above */
}
/* Phone polish */
@media (max-width: 560px) {
  .container.fz { padding-left: 12px; padding-right: 12px; }
  .fz__head { margin-bottom: 16px; }
  .fz__title { font-size: 1.6rem; }
  .fz__sub { font-size: 0.82rem; }
  .fz-post { padding: 12px 13px; gap: 10px; }
  .fz-post__text { font-size: 0.95rem; }
  .fz-post__img { max-height: 340px; }
  .fz-composer { padding: 11px; }
  .fz-modeswitch { position: sticky; top: 0; z-index: 20; }
  .fz-toggle__label { font-size: 0.8rem; }
  .fz-chip__iq { display: none; }               /* keep the chip compact */
  .fz-lightbox__x { top: 12px; right: 12px; }
}

.fz-btn { border: none; border-radius: 9px; padding: 9px 16px; font-weight: 700; font-size: 0.85rem;
  cursor: pointer; background: rgba(255,255,255,0.08); color: var(--text); transition: filter .15s, transform .1s; }
.fz-btn:hover { filter: brightness(1.12); }
.fz-btn:active { transform: scale(0.97); }
.fz-btn--accent { background: var(--accent); color: #06210a; }

.fz-chip { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 6px 12px 6px 8px; }
.fz-chip__dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,0.1); }
.fz-chip__name { font-weight: 700; font-size: 0.88rem; }
.fz-chip__iq { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.5px; color: var(--accent);
  background: rgba(0,214,164,0.12); padding: 2px 7px; border-radius: 6px; }

/* Composer */
.fz-composer { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 13px; margin-bottom: 16px; }
.fz-composer textarea { width: 100%; background: transparent; border: none; resize: none; color: var(--text);
  font-size: 1rem; font-family: inherit; outline: none; }
.fz-composer textarea::placeholder { color: var(--text-muted); }
.fz-composer__bar { display: flex; align-items: center; justify-content: space-between; margin-top: 8px;
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.fz-composer__right { display: flex; align-items: center; gap: 12px; }
.fz-composer__left { display: flex; align-items: center; gap: 14px; }
.fz-composer__count { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fz-composer__media { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px;
  background: none; border: none; border-radius: 8px; color: var(--text-muted); cursor: pointer;
  transition: color .12s, background .12s, transform .1s; }
.fz-composer__media:hover { color: var(--club, var(--accent)); background: rgba(255,255,255,0.06); }
.fz-composer__media:active { transform: scale(0.9); }
/* Composer image preview */
.fz-composer__preview { margin: 10px 0 2px; }
.fz-composer__thumb { position: relative; display: inline-block; max-width: 220px; }
.fz-composer__thumb img { display: block; max-width: 220px; max-height: 180px; width: auto; height: auto;
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
.fz-composer__rm { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--surface, #141416); background: #111; color: #fff; font-size: 15px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.fz-composer__rm:hover { background: var(--rating-low, #e5484d); }
.fz-composer__imgerr { font-size: 0.8rem; color: var(--rating-low, #e5484d); padding: 4px 2px; }

/* Post image / meme */
.fz-post__img { margin-top: 10px; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08); cursor: zoom-in; max-width: 100%;
  max-height: 460px; position: relative; }
.fz-post__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fz-post__img::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0);
  transition: background .15s; pointer-events: none; }
.fz-post__img:hover::after { background: rgba(0,0,0,0.08); }

/* Lightbox */
.fz-lightbox { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(6,6,8,0.88); backdrop-filter: blur(6px); opacity: 0; visibility: hidden;
  transition: opacity .18s; cursor: zoom-out; }
.fz-lightbox.show { opacity: 1; visibility: visible; }
.fz-lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 10px; box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  transform: scale(0.96); transition: transform .18s; }
.fz-lightbox.show img { transform: scale(1); }
.fz-lightbox__x { position: absolute; top: 20px; right: 24px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.fz-lightbox__x:hover { background: rgba(255,255,255,0.2); }

/* Profile take thumbnail */
.fz-prof-take__thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--border); }

/* Report + delete controls (share styling) */
.fz-post__report, .fz-post__del { margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-muted); opacity: 0.45; cursor: pointer;
  padding: 3px 5px; border-radius: 6px; transition: opacity .12s, color .12s, background .12s, transform .1s; }
.fz-post__report:hover, .fz-post__del:hover { opacity: 1; color: var(--rating-low, #e5484d); background: rgba(255,255,255,0.06); }
.fz-post__report.armed, .fz-post__del.armed { opacity: 1; color: var(--rating-low, #e5484d);
  background: rgba(229,72,77,0.14); transform: scale(1.08); }
.fz-post__report.done { opacity: 0.9; color: var(--accent); }

/* Notification bell */
.fz__head-right { display: flex; align-items: center; gap: 12px; }
.fz-bell { position: relative; }
.fz-bell__btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,0.05);
  border: 1px solid var(--border); color: var(--text); cursor: pointer; transition: background .12s; }
.fz-bell__btn:hover { background: rgba(255,255,255,0.09); }
.fz-bell__dot { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--rating-low, #e5484d); color: #fff; font-size: 0.66rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg, #0e0e10); }
.fz-bell__panel { position: absolute; top: 48px; right: 0; width: 320px; max-height: 420px; overflow-y: auto;
  background: #16181d; border: 1px solid var(--border); border-radius: 14px; z-index: 1200;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55); padding: 6px; }
.fz-bell__title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted); padding: 10px 12px 6px; }
.fz-bell__item { padding: 11px 12px; border-radius: 10px; display: flex; flex-direction: column; gap: 3px; }
.fz-bell__item.unread { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.fz-bell__item + .fz-bell__item { margin-top: 2px; }
.fz-bell__body { font-size: 0.9rem; line-height: 1.35; }
.fz-bell__time { font-size: 0.72rem; color: var(--text-muted); }
.fz-bell__empty { padding: 22px 14px; text-align: center; color: var(--text-muted); font-size: 0.88rem; }
/* Mobile: pin the panel to the viewport so it can't clip off-screen. Placed
   after the desktop rule above so it wins the cascade at narrow widths. */
@media (max-width: 560px) {
  .fz-bell__panel { position: fixed; top: 66px; left: 12px; right: 12px; width: auto; }
}

.fz-modlink { align-self: center; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 7px;
  padding: 5px 9px; text-decoration: none; }
.fz-modlink:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Admin moderation dashboard */
.adm__head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 20px; }
.adm__title { font-size: 1.5rem; font-weight: 800; }
/* Bot controls, below the moderation queue. */
.adm__bots { margin: 34px 0 8px; padding-top: 20px; border-top: 1px solid var(--border); }
.adm__subtitle { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; }
.adm__botstat { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 12px; }
.adm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px;
  margin-bottom: 14px; }
.adm-card--hidden { border-color: rgba(229,72,77,0.4); background: rgba(229,72,77,0.05); }
.adm-card__meta { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 0.9rem; }
.adm-card__who { font-weight: 700; }
.adm-muted { color: var(--text-muted); font-size: 0.82rem; }
.adm-badge { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; }
.adm-badge--rep { background: rgba(245,158,11,0.16); color: #f59e0b; }
.adm-badge--hidden { background: rgba(229,72,77,0.18); color: #e5484d; }
.adm-card__body { font-size: 1rem; line-height: 1.5; margin-bottom: 10px; word-break: break-word; }
.adm-card__img { max-width: 260px; max-height: 220px; border-radius: 10px; border: 1px solid var(--border);
  display: block; margin-bottom: 10px; }
.adm-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.adm-approve { border: 1px solid rgba(34,197,94,0.4); color: #22c55e; background: rgba(34,197,94,0.08); }
.adm-approve:hover { background: rgba(34,197,94,0.16); }
.adm-ban { border: 1px solid rgba(229,72,77,0.4); color: #e5484d; background: none; }
.adm-ban:hover { background: rgba(229,72,77,0.12); }

/* Profile sign-out */
.fz-prof__actions { margin: 18px 0 6px; }
.fz-btn--ghost { background: none; border: 1px solid var(--border); color: var(--text-muted); }
.fz-btn--ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.04); }
.fz-post--removing { opacity: 0; transform: translateX(16px); transition: opacity .26s, transform .26s; }

/* Replies / threads */
.fz-post__foot { margin-top: 10px; }
.fz-reply-toggle { display: inline-flex; align-items: center; gap: 7px; background: none; border: none;
  color: var(--text-muted); cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 4px 8px; border-radius: 7px; transition: color .12s, background .12s; }
.fz-reply-toggle:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.fz-reply-toggle.open { color: var(--accent); }
.fz-thread { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.07); }

.fz-rcomposer { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.fz-rinput { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 9px 12px; color: var(--text); font: inherit; font-size: 0.92rem;
  resize: none; outline: none; min-height: 38px; }
.fz-rinput:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.fz-rcomposer__bar { display: flex; align-items: center; justify-content: space-between; }
.fz-rc-anon { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; }
.fz-rc-signin { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: var(--text-muted); font-size: 0.88rem; margin-bottom: 12px; }
.fz-replies { display: flex; flex-direction: column; gap: 8px; }
.fz-replies__empty { color: var(--text-muted); font-size: 0.85rem; padding: 4px 2px 8px; }

/* Nested reply tree */
.fz-rnode { display: flex; flex-direction: column; gap: 6px; }
.fz-rnode__bar { padding-left: 2px; }
.fz-rnode__reply { display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  color: var(--text-muted); cursor: pointer; font: inherit; font-size: 0.76rem; font-weight: 600;
  padding: 2px 6px; border-radius: 6px; transition: color .12s, background .12s; }
.fz-rnode__reply:hover { color: var(--accent); background: rgba(255,255,255,0.05); }
.fz-rnode__reply svg { width: 13px; height: 13px; }
.fz-rnode__composer:empty { display: none; }
.fz-rnode__composer .fz-rcomposer { margin: 2px 0 4px; }
/* children indent + thread line; nesting compounds naturally via the DOM */
.fz-subthread { display: flex; flex-direction: column; gap: 8px; margin-left: 15px; padding-left: 11px;
  border-left: 2px solid rgba(255,255,255,0.09); }
.fz-subthread:empty { display: none; }

/* Compact reply card */
.fz-post--reply { padding: 10px 12px; gap: 10px; background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06); }
.fz-post--reply .fz-vote { min-width: 34px; padding: 3px; }
.fz-post--reply .fz-post__text { font-size: 0.92rem; }
.fz-post--reply .fz-post__crest { width: 16px; height: 16px; }

/* Toast */
.fz-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 3200;
  background: #16181d; color: #fff; border: 1px solid rgba(255,255,255,0.1); border-radius: 999px;
  padding: 11px 20px; font-size: 0.88rem; font-weight: 600; box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s; pointer-events: none; }
.fz-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.fz-signin-prompt { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.14); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 16px; color: var(--text-muted); }

/* Tag chips — shared base for the composer picker + feed filter */
.fz-ctags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fz-ctag { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.04);
  border: 1px solid transparent; color: var(--text-muted); font: inherit; font-size: 0.76rem; font-weight: 600;
  padding: 4px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: color .13s, background .13s, border-color .13s; }
.fz-ctag__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tag, var(--text-muted)); flex-shrink: 0; }
.fz-ctag:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.fz-ctag.on { color: var(--tag, var(--text)); border-color: color-mix(in srgb, var(--tag, #fff) 45%, transparent);
  background: color-mix(in srgb, var(--tag, #fff) 12%, transparent); }

/* Tag filter bar (scrolls horizontally on mobile) */
.fz-tagbar { display: flex; gap: 6px; overflow-x: auto; margin: -4px 0 14px; padding-bottom: 4px;
  scrollbar-width: none; }
.fz-tagbar::-webkit-scrollbar { display: none; }
.fz-ftag { flex-shrink: 0; }

/* Tag chip on a post card */
.fz-tagchip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--tag);
  background: color-mix(in srgb, var(--tag) 13%, transparent); padding: 2px 8px; border-radius: 6px;
  white-space: nowrap; }
.fz-tagchip__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--tag); }

/* Club rooms */
.fz__rooms { position: relative; }
.fz-room--club { display: inline-flex; align-items: center; gap: 6px; }
.fz-room--club img { border-radius: 50%; }
.fz-room--club.active { background: color-mix(in srgb, var(--club) 20%, #17181c); color: var(--text);
  border-color: color-mix(in srgb, var(--club) 60%, transparent); }
.fz-room__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.fz-room--picker { color: var(--text-muted); border-style: dashed; }
.fz-clubmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 600;
  display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 2px;
  background: #17181c; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 8px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.55); max-height: 320px; overflow-y: auto; }
.fz-clubmenu__item { display: flex; align-items: center; gap: 9px; background: none; border: none;
  color: var(--text); font: inherit; font-size: 0.86rem; font-weight: 600; padding: 8px 10px;
  border-radius: 8px; cursor: pointer; text-align: left; }
.fz-clubmenu__item:hover { background: rgba(255,255,255,0.07); }

/* Take Futures — composer panel */
.fz-future-panel { margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, #ffb020 6%, transparent);
  border: 1px solid color-mix(in srgb, #ffb020 26%, transparent); }
.fz-future-panel__row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 9px; flex-wrap: wrap; }
.fz-future-panel__label { font-size: 0.76rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px; }
.fz-future-panel__label b { color: #ffb020; font-variant-numeric: tabular-nums; }
.fz-future-panel__picks { display: flex; gap: 6px; flex-wrap: wrap; }
.fz-future-panel__picks button { background: rgba(255,255,255,0.05); border: 1px solid transparent;
  color: var(--text-muted); font: inherit; font-size: 0.76rem; font-weight: 600; padding: 4px 11px;
  border-radius: 999px; cursor: pointer; }
.fz-future-panel__picks button.on { color: #ffb020; border-color: color-mix(in srgb, #ffb020 45%, transparent);
  background: color-mix(in srgb, #ffb020 12%, transparent); }
.fz-future-panel input[type="range"] { flex: 1; min-width: 140px; accent-color: #ffb020; }
.fz-future-panel__hint { font-size: 0.74rem; color: var(--text-muted); }
.fz-composer__media.on { color: #ffb020; background: color-mix(in srgb, #ffb020 14%, transparent); }

/* Take Futures — card block */
.fz-fut { margin-top: 10px; padding: 11px 13px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.fz-fut--pending, .fz-fut--judging { border-color: color-mix(in srgb, #ffb020 30%, transparent); }
.fz-fut--correct { border-color: color-mix(in srgb, #22c55e 40%, transparent);
  background: color-mix(in srgb, #22c55e 6%, transparent); }
.fz-fut--wrong { border-color: color-mix(in srgb, #e5484d 40%, transparent);
  background: color-mix(in srgb, #e5484d 6%, transparent); }
.fz-fut__head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; }
.fz-fut__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.7px; color: #ffb020; }
.fz-fut__tag svg { width: 14px; height: 14px; }
.fz-fut__conf { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
.fz-fut__status { margin-left: auto; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.5px;
  padding: 3px 9px; border-radius: 6px; }
.fz-fut__status--pending { color: #ffb020; background: color-mix(in srgb, #ffb020 14%, transparent); }
.fz-fut__status--judging { color: #ffb020; background: color-mix(in srgb, #ffb020 18%, transparent);
  animation: fz-judge 1.6s ease-in-out infinite; }
@keyframes fz-judge { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
.fz-fut__status--correct { color: #22c55e; background: color-mix(in srgb, #22c55e 16%, transparent); }
.fz-fut__status--wrong { color: #e5484d; background: color-mix(in srgb, #e5484d 16%, transparent); }
.fz-fut__status--disputed { color: var(--text-muted); background: rgba(255,255,255,0.08); }
.fz-fut__bar { height: 6px; border-radius: 999px; background: rgba(229,72,77,0.25); overflow: hidden;
  margin-bottom: 8px; }
.fz-fut__fill { height: 100%; border-radius: 999px; background: #22c55e; transition: width .35s ease; }
.fz-fut__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fz-fut__sub { font-size: 0.78rem; color: var(--text-muted); }
.fz-fut__btns { display: flex; gap: 7px; }
.fz-fut__btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text); font: inherit; font-size: 0.78rem; font-weight: 700; padding: 5px 13px;
  border-radius: 999px; cursor: pointer; transition: all .13s; }
.fz-fut__btn:hover { background: rgba(255,255,255,0.1); }
.fz-fut__btn.on { color: #ffb020; border-color: #ffb020; background: color-mix(in srgb, #ffb020 14%, transparent); }
.fz-fut__btn.ok.on { color: #22c55e; border-color: #22c55e; background: color-mix(in srgb, #22c55e 14%, transparent); }
.fz-fut__btn.bad.on { color: #e5484d; border-color: #e5484d; background: color-mix(in srgb, #e5484d 14%, transparent); }

/* Receipts — foot button */
.fz-post__foot { display: flex; align-items: center; gap: 4px; }
.fz-receipt { display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  color: var(--text-muted); cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 4px 8px; border-radius: 7px; transition: color .12s, background .12s; }
.fz-receipt:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.fz-receipt.on { color: #ffd23d; }
.fz-receipt svg { width: 14px; height: 14px; }

/* Receipts — aged strip on the card */
.fz-rec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
  padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07); }
.fz-rec__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase; color: #ffd23d; }
.fz-rec__tag svg { width: 13px; height: 13px; }
.fz-rec__tally { font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.fz-rec__tally.good { color: #22c55e; }
.fz-rec__tally.poor { color: #e5484d; }
.fz-rec__sub { font-size: 0.76rem; color: var(--text-muted); }
.fz-rec__btns { display: flex; gap: 7px; margin-left: auto; }
.fz-rec__btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text); font: inherit; font-size: 0.74rem; font-weight: 700; padding: 4px 11px;
  border-radius: 999px; cursor: pointer; transition: all .13s; }
.fz-rec__btn:hover { background: rgba(255,255,255,0.1); }
.fz-rec__btn.well.on { color: #22c55e; border-color: #22c55e; background: color-mix(in srgb, #22c55e 14%, transparent); }
.fz-rec__btn.bad.on { color: #e5484d; border-color: #e5484d; background: color-mix(in srgb, #e5484d 14%, transparent); }

/* Receipt vault (profile) */
.fz-rcv { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 15px; border-left: 3px solid var(--club, var(--border)); }
.fz-rcv__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.fz-rcv__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--club, var(--text-muted)); }
.fz-rcv__who { font-weight: 700; font-size: 0.86rem; }
.fz-rcv__club, .fz-rcv__time { font-size: 0.76rem; color: var(--text-muted); }
.fz-rcv__chip { margin-left: auto; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.5px;
  padding: 3px 9px; border-radius: 6px; color: var(--text-muted); background: rgba(255,255,255,0.07); }
.fz-rcv__chip.good { color: #22c55e; background: color-mix(in srgb, #22c55e 15%, transparent); }
.fz-rcv__chip.poor { color: #e5484d; background: color-mix(in srgb, #e5484d 15%, transparent); }
.fz-rcv__body { font-size: 0.94rem; line-height: 1.45; word-break: break-word; }

/* Umpire Watch — composer panel */
.fz-ump-panel { margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, #ffd23d 6%, transparent);
  border: 1px solid color-mix(in srgb, #ffd23d 26%, transparent); }
.fz-ump-panel__calls { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.fz-ump-panel__call { background: rgba(255,255,255,0.05); border: 1px solid transparent;
  color: var(--text-muted); font: inherit; font-size: 0.76rem; font-weight: 600; padding: 4px 11px;
  border-radius: 999px; cursor: pointer; }
.fz-ump-panel__call.on { color: #ffd23d; border-color: color-mix(in srgb, #ffd23d 45%, transparent);
  background: color-mix(in srgb, #ffd23d 12%, transparent); }
.fz-ump-panel__row { display: flex; gap: 8px; flex-wrap: wrap; }
.fz-ump-select { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  color: var(--text); font: inherit; font-size: 0.82rem; padding: 6px 10px; border-radius: 9px;
  outline: none; }
.fz-ump-select:focus { border-color: color-mix(in srgb, #ffd23d 55%, transparent); }

/* Umpire Watch — card block */
.fz-ump { margin-top: 10px; padding: 11px 13px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid color-mix(in srgb, #ffd23d 28%, transparent); }
.fz-ump__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.fz-ump__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.7px; color: #ffd23d; }
.fz-ump__tag svg { width: 14px; height: 14px; }
.fz-ump__call { font-size: 0.74rem; font-weight: 800; color: var(--text);
  background: color-mix(in srgb, #ffd23d 14%, transparent); padding: 3px 9px; border-radius: 6px; }
.fz-ump__meta { font-size: 0.74rem; color: var(--text-muted); }
.fz-ump__bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; gap: 1px;
  background: rgba(255,255,255,0.06); margin-bottom: 9px; }
.fz-ump__bar span { height: 100%; }
.fz-ump__btns { display: flex; gap: 7px; flex-wrap: wrap; }
.fz-ump__btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text); font: inherit; font-size: 0.76rem; font-weight: 700; padding: 4px 12px;
  border-radius: 999px; cursor: pointer; transition: all .13s; }
.fz-ump__btn b { font-variant-numeric: tabular-nums; }
.fz-ump__btn:hover { background: rgba(255,255,255,0.1); }
.fz-ump__btn.on { color: var(--v); border-color: var(--v);
  background: color-mix(in srgb, var(--v) 14%, transparent); }

/* Umpire Heat board */
.fz-heat { margin: 0 0 14px; padding: 13px 16px; border-radius: 14px;
  background: rgba(255,255,255,0.03); border: 1px solid color-mix(in srgb, #ffd23d 24%, transparent); }
.fz-heat__title { display: inline-flex; align-items: center; gap: 7px; font-size: 0.7rem;
  font-weight: 800; letter-spacing: 0.8px; color: #ffd23d; margin-bottom: 10px; }
.fz-heat__title svg { width: 14px; height: 14px; }
.fz-heat__row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.fz-heat__match { flex: 0 0 190px; font-size: 0.82rem; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.fz-heat__track { flex: 1; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.06);
  overflow: hidden; }
.fz-heat__fill { height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ffd23d, #ff5c33); transition: width .4s ease; }
.fz-heat__n { font-size: 0.8rem; font-weight: 800; color: #ff5c33; min-width: 20px; text-align: right;
  font-variant-numeric: tabular-nums; }
.fz-heat__none { font-size: 0.82rem; color: var(--text-muted); }
.fz-heat__types { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.07); }
.fz-heat__type { font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  background: rgba(255,255,255,0.05); padding: 3px 10px; border-radius: 999px; }
.fz-heat__type b { color: #ff5c33; }

/* Club Pulse card */
.fz-roomcard { margin: 0 0 14px; }
.fz-pulse { position: relative; overflow: hidden; padding: 18px 20px; border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--mood) 16%, #141118),
    color-mix(in srgb, var(--club) 10%, #101014));
  border: 1px solid color-mix(in srgb, var(--mood) 40%, transparent); }
.fz-pulse__aura { position: absolute; top: -70px; right: -50px; width: 240px; height: 240px;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--mood) 32%, transparent), transparent 70%);
  animation: fz-aura 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes fz-aura { 0%,100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.22); opacity: 1; } }
.fz-pulse__head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.fz-pulse__club { font-weight: 800; font-size: 0.95rem; }
.fz-pulse__kicker { margin-left: auto; font-size: 0.64rem; font-weight: 800; letter-spacing: 1px;
  color: color-mix(in srgb, var(--mood) 85%, #fff); }
.fz-pulse__mood { font-size: 1.9rem; font-weight: 900; letter-spacing: -0.5px; line-height: 1.1;
  color: color-mix(in srgb, var(--mood) 80%, #fff); margin-bottom: 6px; }
.fz-pulse__blurb { font-size: 0.86rem; color: var(--text-muted); }
.fz-pulse__meta { opacity: 0.8; }

/* Rivalry Heat meter */
.fz-riv { padding: 15px 18px; border-radius: 16px; background: rgba(255,255,255,0.03);
  border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent); }
.fz-riv--nuclear { animation: fz-nuke 1.4s ease-in-out infinite; }
@keyframes fz-nuke { 0%,100% { box-shadow: 0 0 0 rgba(229,72,77,0); } 50% { box-shadow: 0 0 26px rgba(229,72,77,0.35); } }
.fz-riv__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fz-riv__kicker { font-size: 0.64rem; font-weight: 800; letter-spacing: 1px; color: var(--text-muted); }
.fz-riv__teams { font-weight: 800; font-size: 0.95rem; }
.fz-riv__tier { margin-left: auto; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.6px;
  color: var(--tier); background: color-mix(in srgb, var(--tier) 15%, transparent);
  padding: 3px 11px; border-radius: 7px; }
.fz-riv__gauge { display: flex; gap: 4px; margin-bottom: 10px; }
.fz-riv__gauge span { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.07); }
.fz-riv__gauge span.on { background: var(--tier); }
.fz-riv__stats { display: flex; gap: 8px; flex-wrap: wrap; }
.fz-riv__stats span { font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
  background: rgba(255,255,255,0.05); padding: 3px 10px; border-radius: 999px; }

/* Fan Court */
.fz-courtbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  color: var(--text-muted); cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 4px 8px; border-radius: 7px; transition: color .12s, background .12s; }
.fz-courtbtn:hover { color: #b07cff; background: rgba(255,255,255,0.05); }
.fz-courtchip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--v);
  background: color-mix(in srgb, var(--v) 14%, transparent); padding: 2px 8px; border-radius: 6px;
  white-space: nowrap; }
.fz-courtchip svg { width: 11px; height: 11px; }

.fz-court { position: fixed; inset: 0; z-index: 3100; display: flex; align-items: center;
  justify-content: center; padding: 20px; }
.fz-court__backdrop { position: absolute; inset: 0; background: rgba(6,6,8,0.8);
  backdrop-filter: blur(5px); }
.fz-court__panel { position: relative; width: min(480px, 94vw); background: #17181d;
  border: 1px solid color-mix(in srgb, #b07cff 35%, transparent); border-radius: 18px;
  padding: 22px 24px; box-shadow: 0 30px 90px rgba(0,0,0,0.6); }
.fz-court__x { position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1; }
.fz-court__x:hover { color: var(--text); }
.fz-court__kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 0.68rem;
  font-weight: 800; letter-spacing: 1px; color: #b07cff; margin-bottom: 12px; }
.fz-court__kicker svg { width: 14px; height: 14px; }
.fz-court__quote { font-size: 1.05rem; font-weight: 600; line-height: 1.45; margin-bottom: 8px; }
.fz-court__sub { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 16px; }
.fz-court__verdicts { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.fz-court__v { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); color: var(--text);
  font: inherit; font-size: 0.9rem; font-weight: 700; padding: 10px 15px; border-radius: 11px;
  cursor: pointer; transition: all .13s; }
.fz-court__v b { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fz-court__v:hover:not(:disabled) { border-color: color-mix(in srgb, var(--v) 55%, transparent);
  background: color-mix(in srgb, var(--v) 8%, transparent); }
.fz-court__v.on { color: var(--v); border-color: var(--v);
  background: color-mix(in srgb, var(--v) 13%, transparent); }
.fz-court__v.on b { color: var(--v); }
.fz-court__v.won { color: var(--v); border-color: var(--v);
  background: color-mix(in srgb, var(--v) 16%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--v) 25%, transparent); }
.fz-court__v:disabled { cursor: default; opacity: 0.75; }
.fz-court__tally { font-size: 0.76rem; color: var(--text-muted); text-align: center; }

/* First To Call It badge + admin bolt */
.fz-ftc { display: inline-flex; align-items: center; gap: 5px; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.5px; color: #ffd23d;
  background: linear-gradient(100deg, color-mix(in srgb, #ffd23d 22%, transparent),
    color-mix(in srgb, #ff9d0a 14%, transparent));
  border: 1px solid color-mix(in srgb, #ffd23d 40%, transparent);
  padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.fz-ftc svg { width: 10px; height: 10px; }
.fz-ftcbtn { display: inline-flex; align-items: center; justify-content: center; background: none;
  border: none; color: var(--text-muted); opacity: 0.45; cursor: pointer; padding: 3px 5px;
  border-radius: 6px; transition: all .12s; }
.fz-ftcbtn:hover { opacity: 1; color: #ffd23d; background: rgba(255,255,255,0.06); }
.fz-ftcbtn.on { opacity: 1; color: #ffd23d; }

/* Reputation chip on posts */
/* Automated-account marker. Deliberately quiet in the feed, but it gets a real
   tap target (the ::after box) so it's usable on a phone, and it always links
   to about-bots.html. */
.fz-bot { color: var(--text-muted); font-weight: 800; text-decoration: none;
  margin-left: 1px; position: relative; }
.fz-bot::after { content: ""; position: absolute; inset: -10px -8px; }
.fz-bot:hover, .fz-bot:focus-visible { color: var(--accent); }

.fz-iqchip { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.3px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 2px 7px;
  border-radius: 6px; white-space: nowrap; }

/* ── Game Debate Hub ── */
.debate-section { max-width: 720px; margin: 0 auto; }
.debate-loading { text-align: center; color: var(--text-muted); padding: 36px 0; }
.debate-head { margin: 4px 0 18px; }
.debate-head__kicker { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 1.2px;
  color: var(--accent); margin-bottom: 4px; }
.debate-head__sub { color: var(--text-muted); font-size: 0.9rem; }
.debate-polls { display: flex; flex-direction: column; gap: 16px; }

.dpoll { background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 20px; }
.dpoll__q { font-size: 1.15rem; font-weight: 800; line-height: 1.3; margin-bottom: 4px; }
.dpoll__meta { font-size: 0.74rem; color: var(--text-muted); margin-bottom: 12px;
  font-variant-numeric: tabular-nums; }
.dpoll__first { font-size: 0.82rem; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.dpoll__hint { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 10px; }

/* ── Brownlow best-on-ground vote ── */
.bog__head { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.4px; text-transform: uppercase; color: #ffc21a; margin-bottom: 12px; }
.bog__head .bog__medal svg { width: 16px; height: 16px; display: block; }
.bog-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bog-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center;
  gap: 7px; padding: 16px 8px 12px; border-radius: 16px; cursor: pointer; font: inherit; color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--club, #333) 16%, rgba(255,255,255,.03)), rgba(255,255,255,.02));
  border: 1px solid var(--border); transition: transform .16s cubic-bezier(.2,.8,.2,1), border-color .16s, box-shadow .16s; }
.bog-card:hover { transform: translateY(-3px); border-color: var(--club, var(--accent));
  box-shadow: 0 14px 30px -16px var(--club, #000), 0 0 0 1px var(--club, transparent) inset; }
.bog-card:active { transform: translateY(-1px) scale(.99); }
.bog-card__badge { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 900; color: #241100;
  background: linear-gradient(150deg, #ffe58a, #ffb020); box-shadow: 0 2px 8px -2px rgba(255,176,32,.7); }
.bog-card__photo { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; display: flex;
  align-items: center; justify-content: center; background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--club, #666) 70%, transparent); }
.bog-face { object-fit: cover; width: 100%; height: 100%; }
.bog-face--crest { object-fit: contain; width: 70%; height: 70%; }
.bog-face--none { width: 100%; height: 100%; background: linear-gradient(160deg, #2a2a30, #17171b); }
.bog-card__name { font-weight: 800; font-size: 0.86rem; line-height: 1.15; text-align: center; }
.bog-card__sub { font-size: 0.7rem; color: var(--text-muted); }
.bog-card__sub b { color: #ffc21a; }

.bog-reslist { display: flex; flex-direction: column; gap: 8px; }
.bog-res { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.bog-res.mine { border-color: color-mix(in srgb, var(--club, var(--accent)) 55%, transparent); }
.bog-res.leader { background: linear-gradient(90deg, color-mix(in srgb, #ffb020 14%, transparent), transparent);
  border-color: color-mix(in srgb, #ffb020 45%, transparent); }
.bog-res__photo { position: relative; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--club, #666) 65%, transparent); }
.bog-res.leader .bog-res__photo { box-shadow: 0 0 0 2px #ffb020; overflow: visible; }
.bog-res.leader .bog-res__photo .bog-face { border-radius: 50%; }
.bog-res__medal { position: absolute; bottom: -4px; right: -4px; color: #ffc21a; background: #17171b;
  border-radius: 50%; display: flex; }
.bog-res__medal svg { width: 15px; height: 15px; }
.bog-res__body { flex: 1; min-width: 0; }
.bog-res__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bog-res__name { font-weight: 700; font-size: 0.9rem; }
.bog-res__pct { font-weight: 900; font-variant-numeric: tabular-nums; }
.bog-res.leader .bog-res__pct { color: #ffc21a; }
.bog-res__bar { display: block; height: 7px; border-radius: 999px; background: rgba(255,255,255,.06); margin-top: 5px; overflow: hidden; }
.bog-res__fill { display: block; height: 100%; border-radius: 999px; background: var(--club, var(--accent)); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.bog-res.leader .bog-res__fill { background: linear-gradient(90deg, #ffe58a, #ffb020); }
@media (max-width: 420px) { .bog-card__photo { width: 54px; height: 54px; } .bog-card__name { font-size: 0.78rem; } }

.dpoll__opts { display: flex; flex-direction: column; gap: 8px; }
.dpoll__opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: var(--text);
  font: inherit; font-size: 0.95rem; font-weight: 700; padding: 12px 16px; border-radius: 12px;
  cursor: pointer; transition: all .13s; }
.dpoll__opt:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent); }
.dpoll__opt--rank.on { border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dpoll__rankn { display: inline-flex; align-items: center; justify-content: center; width: 24px;
  height: 24px; border-radius: 7px; background: rgba(255,255,255,0.07); font-size: 0.8rem;
  font-weight: 800; color: var(--accent); flex-shrink: 0; }
.dpoll__lodge { margin-top: 10px; }
.dpoll__lodge:disabled { opacity: 0.4; cursor: default; }

.dpoll__results { display: flex; flex-direction: column; gap: 10px; }
.dpoll__row.mine .dpoll__row-label { color: var(--accent); }
.dpoll__row-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.dpoll__row-label { font-size: 0.9rem; font-weight: 700; }
.dpoll__row-pct { font-size: 0.9rem; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.dpoll__bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.dpoll__fill { height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent));
  transition: width .4s ease; }
.dpoll__row-clubs { font-size: 0.7rem; color: var(--text-muted); margin-top: 3px; }

.dpoll__sliderwrap { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.dpoll__slider { flex: 1; accent-color: var(--accent); }
.dpoll__slideval { font-size: 1.3rem; font-weight: 900; color: var(--accent); min-width: 44px;
  text-align: right; font-variant-numeric: tabular-nums; }
.dpoll__avg { font-size: 2rem; font-weight: 900; color: var(--accent); margin-bottom: 10px; }
.dpoll__avg span { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-left: 6px; }
.dpoll__buckets { display: flex; gap: 10px; align-items: flex-end; height: 74px; margin-bottom: 8px; }
.dpoll__bucket { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 5px; height: 100%; }
.dpoll__bucket-fill { width: 100%; border-radius: 6px 6px 2px 2px;
  background: color-mix(in srgb, var(--accent) 45%, transparent); }
.dpoll__bucket span { font-size: 0.62rem; color: var(--text-muted); }
.dpoll__clubavgs { display: flex; gap: 8px; flex-wrap: wrap; }
.dpoll__clubavg { font-size: 0.72rem; color: var(--text-muted);
  background: rgba(255,255,255,0.05); padding: 3px 10px; border-radius: 999px; }
.dpoll__clubavg b { color: var(--accent); }

.dpoll__consensus { margin-top: 12px; padding: 10px 13px; border-radius: 10px; font-size: 0.85rem;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.dpoll__args { margin-top: 12px; }
.dpoll__args-title { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.8px;
  color: var(--text-muted); margin-bottom: 7px; }
.dpoll__arg { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 0.84rem;
  padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.dpoll__arg-user { font-weight: 800; }
.dpoll__arg-club { font-size: 0.7rem; color: var(--text-muted); }
.dpoll__arg-iq { font-size: 0.62rem; font-weight: 800; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 1px 6px; border-radius: 5px; }
.dpoll__arg-text { flex-basis: 100%; color: var(--text); }

.dpoll__viral { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.07); }
.dpoll__iq { font-size: 0.8rem; font-weight: 900; color: #ffd23d; }
.dpoll__explainwrap { display: flex; gap: 8px; flex-basis: 100%; margin-top: 4px; }
.dpoll__explain { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px; padding: 8px 12px; color: var(--text); font: inherit; font-size: 0.85rem;
  outline: none; }

/* share card modal */
.sharecard { position: fixed; inset: 0; z-index: 3300; display: flex; align-items: center;
  justify-content: center; padding: 20px; }
.sharecard__backdrop { position: absolute; inset: 0; background: rgba(6,6,8,0.85);
  backdrop-filter: blur(5px); }
.sharecard__panel { position: relative; display: flex; flex-direction: column; gap: 12px;
  max-height: 92vh; }
.sharecard__canvas { max-width: min(440px, 88vw); max-height: 74vh; border-radius: 14px;
  border: 1px solid var(--border); }
.sharecard__btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ── Weekly Fan Index ── */
.fi-hero { margin: 10px 0 24px; }
.fi-hero__kicker { font-size: 0.68rem; font-weight: 800; letter-spacing: 1.4px; color: var(--accent); }
.fi-hero__title { font-size: 2.1rem; font-weight: 900; letter-spacing: -0.5px; margin: 4px 0 4px; }
.fi-hero__title span { color: var(--accent); }
.fi-hero__sub { color: var(--text-muted); font-size: 0.95rem; }
.fi-hero__sub b { color: var(--text); }
.fi-hero__stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.fi-stat { display: flex; flex-direction: column; gap: 1px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 8px 16px; min-width: 84px; }
.fi-stat__n { font-size: 1.35rem; font-weight: 900; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.fi-stat__l { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); }
.fi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
@media (max-width: 760px) { .fi-grid { grid-template-columns: 1fr; } }
.fi-card { background: linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: 16px;
  padding: 15px 18px 16px; transition: border-color .16s, transform .16s; }
.fi-card:hover { border-color: color-mix(in srgb, var(--accent) 28%, transparent); transform: translateY(-2px); }
.fi-card--wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .fi-card--wide { grid-column: auto; } }
.fi-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; }
.fi-card__icon { display: inline-flex; color: var(--accent); }
.fi-card__icon svg { width: 16px; height: 16px; }
.fi-card__title { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--text-muted); }
.fi-empty { color: var(--text-muted); font-size: 0.86rem; padding: 6px 0 2px; line-height: 1.5; }
.fi-empty__link, .fi-cta { color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.fi-cta { display: inline-block; margin-top: 12px; font-size: 0.82rem; }
.fi-cta:hover, .fi-empty__link:hover { text-decoration: underline; }
.fi-note { font-size: 0.72rem; color: var(--text-muted); margin-top: 8px; }
.fi-rank { display: inline-flex; align-items: center; justify-content: center; width: 18px; }

/* The crowd's round (TipZone) */
.fi-crowd { display: flex; flex-direction: column; gap: 12px; }
.fi-crowd__row { display: flex; align-items: center; gap: 12px; }
.fi-crowd__crest { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.fi-crowd__main { flex: 1; min-width: 0; font-size: 0.92rem; line-height: 1.25; }
.fi-crowd__main b { color: var(--text); }
.fi-crowd__main span { display: block; font-size: 0.72rem; color: var(--text-muted); }
.fi-crowd__pct { font-size: 1.7rem; font-weight: 900; color: var(--club, var(--accent)); font-variant-numeric: tabular-nums;
  filter: brightness(1.5); }
.fi-crowd__split { display: flex; align-items: center; gap: 8px; padding-top: 11px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.fi-crowd__tag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #ffb020;
  background: rgba(255,176,32,.12); padding: 3px 9px; border-radius: 999px; }
.fi-crowd__game { font-size: 0.84rem; font-weight: 700; color: var(--text); }

.fi-upset { margin-top: 12px; font-size: 0.82rem; color: var(--text-muted); line-height: 1.4;
  background: rgba(255,90,36,.08); border: 1px solid color-mix(in srgb, #ff5a24 22%, transparent); border-radius: 10px; padding: 9px 12px; }
.fi-upset b { color: var(--text); }
.fi-iq__user em { color: var(--text-muted); font-style: normal; font-weight: 600; font-size: 0.74rem; margin-left: 6px; }

.fi-conf { display: flex; flex-direction: column; gap: 6px; }
.fi-conf__row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--mood) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--mood) 22%, transparent); }
.fi-conf__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--club); flex-shrink: 0; }
.fi-conf__club { font-weight: 700; font-size: 0.88rem; }
.fi-conf__mood { margin-left: auto; font-size: 0.74rem; font-weight: 800;
  color: color-mix(in srgb, var(--mood) 85%, #fff); }
.fi-conf__gap { text-align: center; color: var(--text-muted); line-height: 0.6; letter-spacing: 3px; }

.fi-321rank { display: inline-flex; align-items: center; justify-content: center; width: 18px; flex: none; font-size: 0.8rem; }
.fi-321fill { height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ffd23d, #ff9d0a); transition: width .4s ease; }
.fi-321n { font-size: 0.8rem; font-weight: 800; color: #ffd23d; min-width: 22px; text-align: right;
  font-variant-numeric: tabular-nums; }

.fi-divided { border-left: 3px solid var(--club); padding-left: 14px; }
.fi-divided__club { font-weight: 800; font-size: 1.05rem; }
.fi-divided__stat { font-size: 1.9rem; font-weight: 900; color: var(--accent); }
.fi-divided__stat span { font-size: 0.76rem; font-weight: 600; color: var(--text-muted); margin-left: 6px; }

.fi-take { border-left: 3px solid var(--club); padding: 8px 0 8px 14px; margin-bottom: 8px; }
.fi-take__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.fi-take__who { font-weight: 800; font-size: 0.86rem; }
.fi-take__club { font-size: 0.72rem; color: var(--text-muted); }
.fi-take__score { margin-left: auto; font-size: 0.78rem; font-weight: 800; color: var(--accent); }
.fi-take__body { font-size: 0.94rem; line-height: 1.45; }

.fi-iq { display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.05); }
.fi-iq:first-of-type { border-top: none; }
.fi-iq__pos { width: 20px; font-weight: 800; color: var(--text-muted); font-size: 0.82rem; }
.fi-iq__dot { width: 8px; height: 8px; border-radius: 50%; }
.fi-iq__user { font-weight: 700; font-size: 0.88rem; }
.fi-iq__n { margin-left: auto; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Feed sort switch */
.fz-sortbar { display: flex; gap: 6px; margin: 2px 0 14px; }
.fz-sort { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.04);
  border: 1px solid transparent; color: var(--text-muted); font: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: color .14s, background .14s, border-color .14s; }
.fz-sort span { font-size: 0.92em; line-height: 1; }
.fz-sort:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.fz-sort.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* Toggle */
.fz-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.fz-toggle input { display: none; }
.fz-toggle__track { width: 36px; height: 20px; border-radius: 999px; background: rgba(255,255,255,0.14);
  position: relative; transition: background .15s; }
.fz-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s; }
.fz-toggle input:checked + .fz-toggle__track { background: var(--accent); }
.fz-toggle input:checked + .fz-toggle__track .fz-toggle__thumb { transform: translateX(16px); }
.fz-toggle__label { font-size: 0.78rem; color: var(--text-muted); }

/* Rooms */
.fz__rooms { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; }
.fz-room { flex-shrink: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  color: var(--text-muted); border-radius: 999px; padding: 6px 14px; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; }
.fz-room.active { background: var(--text); color: #0b0b0d; border-color: var(--text); }

/* Posts */
.fz__feed { display: flex; flex-direction: column; gap: 10px; }
.fz-post { position: relative; display: flex; gap: 13px; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--club, #6b7280);
  border-radius: 12px; padding: 13px 15px;
  transition: border-color .15s, transform .22s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.fz-post:hover { border-color: color-mix(in srgb, var(--club, #888) 45%, var(--border)); transform: translateY(-1px); }
.fz-post--top { border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: radial-gradient(120% 130% at 0% 0%, rgba(0,214,164,0.06), transparent 60%), var(--surface); padding-top: 26px; }
.fz-post__ribbon { position: absolute; top: 0; left: 0; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.8px;
  text-transform: uppercase; color: #06210a; background: var(--accent); padding: 2px 10px; border-radius: 12px 0 10px 0; }

/* Vote control — rounded pill */
.fz-vote { display: flex; flex-direction: column; align-items: center; gap: 1px; flex-shrink: 0;
  min-width: 40px; box-sizing: border-box;
  background: rgba(255,255,255,0.04); border-radius: 10px; padding: 5px 4px; height: fit-content; }
.fz-vote__btn { background: none; border: none; color: var(--text-muted); cursor: pointer; display: inline-flex;
  line-height: 0; padding: 3px; border-radius: 6px; transition: color .12s, background .12s, transform .1s; }
.fz-vote__btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.fz-vote__btn:active { transform: scale(0.85); }
.fz-up.on { color: var(--accent); }
.fz-down.on { color: var(--rating-low); }
.fz-vote__score { font-size: 0.88rem; font-weight: 800; font-variant-numeric: tabular-nums; padding: 1px 0;
  max-width: 100%; text-align: center; line-height: 1.05; }
.fz-vote__score--big { font-size: 0.74rem; letter-spacing: -0.2px; }

.fz-post__body { flex: 1; min-width: 0; }
.fz-post__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fz-post__crest { object-fit: contain; flex-shrink: 0; }
.fz-post__crest--dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,0.08); }
.fz-post__name { font-weight: 700; font-size: 0.88rem; }
.fz-post__club { font-size: 0.72rem; color: var(--text-muted); }
.fz-post__hot { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.6px; color: #fff;
  background: linear-gradient(90deg, #dc2626, #f97316); padding: 2px 7px; border-radius: 5px; }
.fz-post__time { font-size: 0.72rem; color: var(--text-muted); margin-left: auto; }
.fz-post__text { font-size: 0.98rem; line-height: 1.5; word-break: break-word; }
.fz-empty { color: var(--text-muted); text-align: center; padding: 36px 0; }

/* Composer with the poster's crest */
.fz-composer__top { display: flex; gap: 12px; align-items: flex-start; }
.fz-composer__crest { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--club, #888) 40%, transparent); }
.fz-composer__crest img { object-fit: contain; }
.fz-composer__dot { width: 18px; height: 18px; border-radius: 50%; }
.fz-composer__top textarea { margin-top: 7px; }

/* Sidebar cards */
.fz-card, .fz__card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 15px; margin-bottom: 14px; }
.fz__card-title { font-size: 0.7rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 4px; }
.fz__card-note { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.4; }
.fz-me { text-align: center; background: radial-gradient(120% 130% at 50% 0%, rgba(0,214,164,0.14), transparent 70%); }
.fz-me__tier { font-size: 0.66rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.fz-me__iq { font-size: 2.2rem; font-weight: 800; line-height: 1; margin: 4px 0; }
.fz-me__iq span { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.fz-me__club { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted); margin-top: 6px; }

.fz-ladder { display: flex; flex-direction: column; gap: 2px; }
.fz-lad-row { display: flex; align-items: center; gap: 9px; padding: 6px 6px; border-radius: 7px; font-size: 0.82rem; }
.fz-lad-row.mine { background: rgba(0,214,164,0.09); }
.fz-lad-pos { width: 18px; text-align: center; color: var(--text-muted); font-weight: 700; font-size: 0.75rem; }
.fz-lad-dot { width: 9px; height: 9px; border-radius: 50%; }
.fz-lad-club { flex: 1; font-weight: 600; }
.fz-lad-pts { font-weight: 800; font-variant-numeric: tabular-nums; }
.fz-card-empty { color: var(--text-muted); font-size: 0.8rem; padding: 8px 0; }

/* Auth modal */
.fz-auth { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.fz-auth[hidden] { display: none; }
.fz-auth__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); }
.fz-auth__panel { position: relative; width: 92%; max-width: 380px; background: #14161c;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 26px 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6); }
.fz-auth__x { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--text-muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer; }
.fz-auth__kicker { font-size: 0.62rem; font-weight: 800; letter-spacing: 2.5px; color: var(--accent); }
.fz-auth__title { font-size: 1.3rem; font-weight: 800; margin: 4px 0 4px; }
.fz-auth__sub { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 18px; }
.fz-auth__input { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 12px 14px; color: var(--text); font-size: 1rem; font-family: inherit;
  outline: none; margin-bottom: 11px; }
.fz-auth__input:focus { border-color: var(--accent); }
.fz-auth__code { text-align: center; letter-spacing: 8px; font-size: 1.4rem; font-weight: 800; }
.fz-auth__go { width: 100%; padding: 13px; font-size: 0.95rem; }
.fz-auth__dev { font-size: 0.78rem; color: var(--rating-mid); background: rgba(240,180,41,0.1);
  border: 1px dashed rgba(240,180,41,0.3); border-radius: 9px; padding: 9px 12px; margin-bottom: 12px; text-align: center; }
.fz-auth__err { color: var(--rating-low); font-size: 0.8rem; margin-top: 9px; min-height: 1em; }

/* ── FanZone: mode switch + tipping ───────────────────────────────────── */
.fz-modeswitch { display: inline-flex; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px; padding: 3px; margin-bottom: 16px; }
.fz-mode { background: none; border: none; color: var(--text-muted); font-weight: 700; font-size: 0.85rem;
  padding: 7px 20px; border-radius: 999px; cursor: pointer; }
.fz-mode.active { background: var(--accent); color: #06210a; }

.fz-tip-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.fz-tip-head__title { font-size: 1.25rem; font-weight: 800; }
.fz-tip-record { display: flex; gap: 16px; }
.fz-tip-record span { display: flex; flex-direction: column; font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted); }
.fz-tip-record b { font-size: 1.05rem; color: var(--text); letter-spacing: 0; }
.fz-tip-note { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 16px; line-height: 1.4; }
.fz-tip-list { display: flex; flex-direction: column; gap: 10px; }

.fz-tip { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 13px 15px; }
.fz-tip__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.fz-tip__team { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 10px 12px; cursor: pointer;
  color: var(--text); font-weight: 700; font-size: 0.88rem; transition: border-color .12s, background .12s; }
.fz-tip__team:last-child { flex-direction: row; }
.fz-tip__team:hover { border-color: rgba(255,255,255,0.2); }
.fz-tip__team.on { background: rgba(0,214,164,0.12); border-color: var(--accent); }
.fz-tip__team img { object-fit: contain; }
.fz-tip__v { color: var(--text-muted); font-size: 0.78rem; font-weight: 700; }
.fz-tip__margins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 9px; }
.fz-tip__m { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
  padding: 7px 0; cursor: pointer; color: var(--text-muted); font-weight: 700; font-size: 0.78rem; }
.fz-tip__m.on { background: var(--accent); color: #06210a; border-color: var(--accent); }
.fz-tip__status { font-size: 0.76rem; color: var(--text-muted); margin-top: 9px; min-height: 1em; }
.fz-tip__status.saved { color: var(--accent); font-weight: 600; }

/* ── Live "Call It" bar ───────────────────────────────────────────────── */
#liveCall { margin-bottom: 12px; }
#liveCall[hidden] { display: none; }
.lc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--accent) 10%, #0c0d11);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 12px; padding: 12px 15px; }
.lc__q { font-weight: 800; font-size: 0.95rem; letter-spacing: -0.2px; }
.lc__btns { display: flex; gap: 8px; }
.lc__btn { border: none; border-radius: 8px; padding: 8px 18px; font-weight: 800; cursor: pointer;
  font-size: 0.82rem; letter-spacing: 0.6px; transition: filter .12s, transform .1s; }
.lc__btn:hover { filter: brightness(1.1); }
.lc__btn:active { transform: scale(0.96); }
.lc__goal { background: var(--accent); color: #06210a; }
.lc__behind { background: rgba(255,255,255,0.1); color: var(--text); }
.lc__locked { font-weight: 700; font-size: 0.92rem; }
.lc__wait { color: var(--text-muted); font-size: 0.8rem; }
.lc__streak { margin-left: auto; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.5px; color: var(--rating-mid); }
.lc__signin { margin-left: auto; color: var(--accent); font-weight: 700; text-decoration: none; }
.lc__flash { font-weight: 800; font-size: 0.82rem; letter-spacing: 0.3px; }
.lc__flash.good { color: var(--accent); }
.lc__flash.bad { color: var(--rating-low); }

/* ── FanZone: profile ─────────────────────────────────────────────────── */
.fz-chip { cursor: pointer; }
.fz-prof-hero { display: flex; align-items: center; gap: 15px; padding: 18px;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--club, #888) 35%, transparent);
  background: radial-gradient(130% 160% at 12% 0%, color-mix(in srgb, var(--club,#888) 26%, transparent), transparent 70%), var(--surface); }
.fz-prof-hero__crest { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fz-prof-hero__id { flex: 1; min-width: 0; }
.fz-prof-hero__tier { font-size: 0.64rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.fz-prof-hero__name { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; line-height: 1.05; }
.fz-prof-hero__club { font-size: 0.82rem; color: var(--text-muted); margin-top: 1px; }
.fz-prof-hero__iq { text-align: center; flex-shrink: 0; }
.fz-prof-hero__iq div { font-size: 2rem; font-weight: 800; line-height: 1; }
.fz-prof-hero__iq span { font-size: 0.55rem; font-weight: 700; letter-spacing: 1.5px; color: var(--text-muted); }
.fz-prof__bar { height: 7px; background: rgba(255,255,255,0.08); border-radius: 4px; margin: 16px 0 6px; overflow: hidden; }
.fz-prof__fill { height: 100%; background: var(--accent); border-radius: 4px; }
.fz-prof__next { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 18px; }
.fz-prof__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
@media (max-width: 560px) {
  .fz-prof__grid { grid-template-columns: repeat(2, 1fr); }
}
.fz-pstat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 11px; padding: 13px 10px; text-align: center; }
.fz-pstat__v { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.fz-pstat__l { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; }
.fz-prof__section { font-size: 0.7rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin: 22px 0 10px; }
.fz-prof__takes { display: flex; flex-direction: column; gap: 8px; }
.fz-prof-take { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; }
.fz-prof-take__score { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 26px; text-align: center; color: var(--accent); }
.fz-prof-take__body { flex: 1; font-size: 0.92rem; }
.fz-prof-take__anon { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); background: rgba(255,255,255,0.06); padding: 2px 7px; border-radius: 5px; }

/* Streak escalation — the banner pulses brighter the longer the run runs. */
.pbp-card__badge--i2 { animation: pbp-badge-pulse 1.5s ease-in-out infinite; }
.pbp-card__badge--i3 { animation: pbp-badge-pulse 0.85s ease-in-out infinite; }
@keyframes pbp-badge-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 26px rgba(255, 255, 255, 0.22); }
}

/* Pulsing live indicator on the Live Feed tab — flex-centred with the text */
.view-tab:has(.live-dot) { display: inline-flex; align-items: center; gap: 6px; }
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.65); opacity: 1; }
  70%  { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); opacity: 1; }
}

/* ── FanZone: skeletons + motion ──────────────────────────────────────── */
.fz-skel { display: flex; gap: 13px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 15px; margin-bottom: 10px; }
.fz-skel__vote { width: 30px; height: 52px; border-radius: 10px; flex-shrink: 0; background: rgba(255,255,255,0.05); }
.fz-skel__body { flex: 1; padding-top: 3px; }
.fz-skel__line { height: 11px; border-radius: 6px; margin-bottom: 11px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 37%, rgba(255,255,255,0.04) 63%);
  background-size: 400px 100%; animation: fz-shimmer 1.3s linear infinite; }
.fz-skel__line--meta { width: 42%; }
.fz-skel__line--short { width: 68%; margin-bottom: 0; }
@keyframes fz-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }

/* Post enter / pending / vote-score pop */
.fz-enter { opacity: 0; transform: translateY(-10px) scale(0.99); }
.fz-post--pending { opacity: 0.6; }
.fz-vote__score.pop { animation: fz-vpop .28s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes fz-vpop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ══ TipZone — crowd prediction market ═══════════════════════════════════════ */
.tz { max-width: 760px; }
.tz-loading, .tz-empty, .tz-error { color: var(--text-muted); text-align: center; padding: 40px 16px; }
.tz-error .tz-retry, .tz-empty a { color: var(--accent); }
.tz-retry { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 12px; cursor: pointer; }

/* Header */
.tz__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 22px; }
.tz__kicker { font-size: 0.66rem; font-weight: 800; letter-spacing: 2.5px; color: #ffb020; }
.tz__title { font-size: clamp(2rem, 6vw, 2.9rem); font-weight: 900; font-style: italic; transform: skewX(-5deg); margin: 4px 0 2px; letter-spacing: 0.3px; }
.tz__title span { background: linear-gradient(180deg, #ffc21a 0%, #ff5a24 55%, #e51f1f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tz__sub { color: var(--text-muted); font-size: 0.95rem; }

.tz-wallet { display: flex; align-items: center; gap: 14px; background: linear-gradient(160deg, rgba(255,176,32,.10), rgba(229,31,31,.06)); border: 1px solid color-mix(in srgb, #ffb020 26%, transparent); border-radius: 16px; padding: 10px 16px; }
.tz-wallet__iq { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.tz-wallet__num { font-size: 1.7rem; font-weight: 900; color: #ffc21a; }
.tz-wallet__lbl { font-size: 0.55rem; font-weight: 800; letter-spacing: 1.5px; color: var(--text-muted); margin-top: 3px; }
.tz-wallet__rec { display: flex; flex-direction: column; gap: 2px; font-size: 0.76rem; color: var(--text-muted); }
.tz-wallet__rec b { color: var(--text); }
.tz-signin { background: linear-gradient(135deg, #ffb020, #ff5a24 60%, #e51f1f); color: #241100; font-weight: 800; text-decoration: none; padding: 11px 20px; border-radius: 999px; font-size: 0.95rem; }

/* Stake bar */
.tz-stakebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tz-stakebar__label { font-size: 0.72rem; font-weight: 800; letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; }
.tz-stakes { display: inline-flex; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.tz-stake { min-width: 42px; border: none; background: transparent; color: var(--text-muted); font-weight: 800; font-size: 0.9rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.tz-stake.on { background: linear-gradient(135deg, #ffc21a, #ff7a2e); color: #241100; }
.tz-stakebar__hint { font-size: 0.72rem; color: var(--text-muted); flex: 1 1 160px; }

/* Round tabs */
.tz-rounds { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; scrollbar-width: none; }
.tz-rounds::-webkit-scrollbar { display: none; }
.tz-round { white-space: nowrap; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-weight: 700; font-size: 0.85rem; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: border-color .15s, color .15s; }
.tz-round.on { color: var(--text); border-color: color-mix(in srgb, #ffb020 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, #ffb020 30%, transparent) inset; }

/* Cards */
.tz-cards { display: flex; flex-direction: column; gap: 16px; }
.tz-card { background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: 20px; padding: 16px 16px 16px; }
.tz-card--tipped { border-color: color-mix(in srgb, #ffb020 40%, transparent); }
.tz-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.tz-card__meta { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--text-muted); min-width: 0; }
.tz-card__venue { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-card__date { display: inline-flex; align-items: center; gap: 6px; }
.tz-card__score { color: var(--text); font-weight: 800; margin-left: 6px; }
.tz-card__meta svg { color: var(--text-muted); flex: none; }
.tz-card__chip { display: inline-flex; align-items: center; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.4px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.tz-card__chip--open { color: #16d97f; background: rgba(22,217,127,.12); }
.tz-card__chip--live { color: #ff6a3d; background: rgba(255,90,36,.14); }
.tz-card__chip--done { color: var(--text-muted); background: rgba(255,255,255,.06); }
.tz-card__chip--pending { color: #ffc21a; background: rgba(255,194,26,.12); gap: 5px; }
/* Locked (line-pending) games are faded right back — clearly not yet in play. */
.tz-card--pending { opacity: .5; }
.tz-ring__pct--pending { color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.tz-ring__pct--pending svg { width: 24px; height: 24px; }
.tz-foot--locked { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--text-muted); font-weight: 700; }
.tz-foot--locked svg { flex: none; }

/* Two selectable team panels */
.tz-card__panels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tz-panel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 10px 12px;
  transition: transform .16s, border-color .16s, background .16s, box-shadow .16s;
}
.tz-panel--pick { cursor: pointer; }
.tz-panel--pick:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--text) 22%, transparent); background: rgba(255,255,255,.05); }
.tz-panel--loading { opacity: .55; pointer-events: none; }
/* A pick lights up in the chosen club's colours — a primary→secondary gradient
   border over a two-tone wash, with a glow in the brighter of the two. */
.tz-panel.picked {
  border: 2px solid transparent;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--cp, #ff7a2e) 26%, #101014), color-mix(in srgb, var(--cs, #ffb020) 18%, #101014)) padding-box,
    linear-gradient(140deg, var(--cp, #ff7a2e), var(--cs, #ffb020)) border-box;
  box-shadow: 0 12px 34px -14px color-mix(in srgb, var(--cg, #ff7a2e) 80%, transparent);
}
.tz-panel.winner { border-color: color-mix(in srgb, #16d97f 55%, transparent); background: linear-gradient(180deg, rgba(22,217,127,.12), transparent); }
.tz-panel__check {
  position: absolute; top: 0; right: 0; width: 34px; height: 34px;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 4px 6px 0 0; font-size: 0.72rem; font-weight: 900; color: var(--ci, #fff);
  background: linear-gradient(135deg, transparent 50%, var(--cs, #ff7a2e) 50%);
  border-top-right-radius: 15px;
}
.tz-panel__crest { height: 40px; display: flex; align-items: center; }
.tz-panel__crest img { object-fit: contain; }
.tz-panel__name { font-weight: 800; font-size: 0.82rem; letter-spacing: 0.3px; text-transform: uppercase; line-height: 1.1; }

/* Circular % ring */
.tz-ring { position: relative; width: 92px; height: 92px; margin: 2px 0; }
.tz-ring svg { width: 100%; height: 100%; }
.tz-ring__track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 8; }
.tz-ring__arc { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); }
.tz-ring--fav .tz-ring__arc { stroke: #16d97f; }
.tz-ring--dog .tz-ring__arc { stroke: #ff4d3d; }
.tz-ring--neutral .tz-ring__arc { stroke: var(--text-muted); }
.tz-ring__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; color: var(--text); }
.tz-ring__pct span { font-size: 0.8rem; font-weight: 800; margin-left: 1px; color: var(--text-muted); }

.tz-panel__iq { font-size: 1.25rem; font-weight: 900; line-height: 1; }
.tz-panel__iq span { font-size: 0.7rem; font-weight: 800; }
.tz-panel--fav .tz-panel__iq { color: #16d97f; }
.tz-panel--dog .tz-panel__iq { color: #ff8a3d; }
.tz-panel--neutral .tz-panel__iq { color: var(--text); }

.tz-panel__hint { font-size: 0.68rem; font-weight: 700; color: var(--text-muted); min-height: 14px; }
.tz-panel__hint--pick { color: var(--cg, #ff8a3d); }
.tz-panel__hint--win { color: #16d97f; }
.tz-move { font-size: 0.68rem; font-weight: 800; }
.tz-move span { font-weight: 600; color: var(--text-muted); }
.tz-move--up { color: #16d97f; }
.tz-move--down { color: #ff4d3d; }
.tz-move--flat { color: var(--text-muted); }

/* Card foot */
.tz-foot { margin-top: 12px; font-size: 0.8rem; border-radius: 10px; padding: 9px 12px; line-height: 1.4; }
.tz-foot b { color: var(--text); }
.tz-foot--tip { background: rgba(255,194,26,.08); display: flex; flex-direction: column; gap: 3px; }
.tz-foot--tip b { color: #ffc21a; }
.tz-foot__change, .tz-foot__locked { font-size: 0.72rem; color: var(--text-muted); }
.tz-foot--won { background: rgba(0,214,164,.10); color: #7dffd9; }
.tz-foot--won b { color: #7dffd9; }
.tz-foot--lost { background: rgba(255,255,255,.04); color: var(--text-muted); }
.tz-foot--draw { background: rgba(255,255,255,.04); color: var(--text-muted); }
.tz-foot--muted { color: var(--text-muted); }
.tz-foot--muted a { color: var(--accent); }

/* My Picks + leaderboard blocks */
.tz-block { margin-top: 30px; }
.tz-block__title { font-size: 0.78rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.tz-picks { display: flex; flex-direction: column; gap: 8px; }
.tz-pickrow { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.tz-pickrow__crest { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.tz-pickrow__main { flex: 1; min-width: 0; }
.tz-pickrow__match { font-weight: 700; font-size: 0.88rem; }
.tz-pickrow__match span { color: var(--text-muted); font-weight: 600; font-size: 0.76rem; margin-left: 4px; }
.tz-pickrow__sub { font-size: 0.76rem; color: var(--text-muted); }
.tz-pickrow__sub b { color: var(--text); }
.tz-pickrow__out { font-weight: 800; font-size: 0.82rem; white-space: nowrap; }
.tz-pickrow__out--won { color: #7dffd9; }
.tz-pickrow__out--lost { color: var(--text-muted); }
.tz-pickrow__out--active { color: #ffc21a; }
.tz-pickrow__out--draw { color: var(--text-muted); }

.tz-lead { display: flex; flex-direction: column; gap: 4px; }
.tz-lead__row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.tz-lead__rank { font-weight: 900; color: #ffc21a; width: 18px; }
.tz-lead__name { flex: 1; font-weight: 700; font-size: 0.9rem; }
.tz-lead__name em { color: var(--text-muted); font-style: normal; font-weight: 600; font-size: 0.76rem; margin-left: 6px; }
.tz-lead__iq { font-weight: 800; color: #7dffd9; font-size: 0.85rem; }
.tz-upset { margin-top: 10px; background: linear-gradient(160deg, rgba(255,90,36,.10), rgba(229,31,31,.05)); border: 1px solid color-mix(in srgb, #ff5a24 24%, transparent); border-radius: 12px; padding: 11px 14px; }
.tz-upset__lbl { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 1px; color: #ff6a3d; text-transform: uppercase; margin-bottom: 4px; }
.tz-upset__body { font-size: 0.85rem; color: var(--text-muted); }
.tz-upset__body b { color: var(--text); }

/* Toast */
.tz-toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); z-index: 80; background: #1a1a1e; border: 1px solid var(--border); color: var(--text); font-weight: 700; font-size: 0.85rem; padding: 11px 18px; border-radius: 999px; box-shadow: 0 14px 34px -12px rgba(0,0,0,.7); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 88vw; text-align: center; }
.tz-toast.show { opacity: 1; transform: translate(-50%, 0); }
.tz-toast--good { border-color: color-mix(in srgb, #ffb020 55%, transparent); }

@media (max-width: 560px) {
  .tz__head { align-items: flex-start; }
  .tz-side__name { font-size: 0.8rem; }
  .tz-side__pct { font-size: 1.15rem; }
  .tz-pick { font-size: 0.76rem; padding: 7px 10px; }
}

/* ══ Quick Takes — three one-tap polls atop the FanZone feed ═══════════════════ */
.qt { margin: 0 0 18px; }
.qt__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.qt__title { font-size: 1.15rem; font-weight: 900; letter-spacing: -0.2px; }
.qt__sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 1px; }
.qt__progress { font-size: 0.8rem; font-weight: 800; color: var(--text-muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.qt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
@media (max-width: 720px) { .qt-cards { grid-template-columns: 1fr; } }

.qt-card { position: relative; overflow: hidden; background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--border); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; }
.qt-card--voted { border-color: color-mix(in srgb, var(--cat, var(--accent)) 35%, transparent); }
/* Brownlow poll cards wear the Chas Brownlow medal artwork as their background. */
.qt-card--brownlow {
  background-image:
    linear-gradient(95deg, rgba(6,5,2,.95) 0%, rgba(6,5,2,.78) 42%, rgba(10,7,2,.4) 100%),
    url("/assets/brownlowPopUp.jpg");
  background-size: cover, cover;
  background-position: center, right center;
  background-repeat: no-repeat, no-repeat;
  border-color: color-mix(in srgb, #ffc21a 45%, transparent);
  box-shadow: inset 0 0 40px rgba(0,0,0,.45);
}
.qt-card--brownlow .qt-opt { background: rgba(4,3,1,.5); }
.qt-card--brownlow .qt-res__bar { background: rgba(4,3,1,.4); }
.qt-card--brownlow .qt-foot__count { color: rgba(255,255,255,.7); }
.qt-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--cat, var(--accent)); opacity: .85; }
.qt-card--skel { height: 190px; background: linear-gradient(100deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03));
  background-size: 200% 100%; animation: qt-shimmer 1.2s infinite; }
@keyframes qt-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.qt-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.qt-card__cat { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--cat, var(--accent)); }
.qt-card__num { font-size: 0.62rem; font-weight: 700; color: var(--text-muted); }
.qt-card__q { font-size: 1rem; font-weight: 800; line-height: 1.25; }
.qt-card__sub { font-size: 0.76rem; color: var(--text-muted); margin-top: 3px; }

.qt-opts { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.qt-opts--two { }
/* Many-option polls (e.g. flag favourite: 9 teams + "The rest") — shrink to fit. */
.qt-opts--compact { gap: 5px; }
.qt-opts--compact .qt-opt { padding: 7px 11px; border-radius: 9px; font-size: 0.85rem; gap: 8px; }
.qt-opts--compact .qt-opt__face { width: 22px; height: 22px; }
.qt-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font: inherit;
  font-size: 0.9rem; font-weight: 700; color: var(--text); background: rgba(255,255,255,.04);
  border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; cursor: pointer;
  transition: transform .12s, border-color .14s, background .14s; }
.qt-opt:hover { border-color: color-mix(in srgb, var(--team, var(--accent)) 60%, transparent); background: rgba(255,255,255,.07); }
.qt-opt:active, .qt-opt.chosen { transform: scale(.98); }
.qt-opt--team { border-left: 4px solid var(--team); }
.qt-opt.chosen { border-color: var(--team, var(--accent)); background: color-mix(in srgb, var(--team, var(--accent)) 16%, transparent); }
.qt-opt:disabled { cursor: default; }
.qt-err { margin-top: 10px; font-size: 0.82rem; font-weight: 700; color: #ff7a6b;
  background: rgba(255,90,60,.1); border: 1px solid rgba(255,90,60,.3);
  border-radius: 9px; padding: 8px 11px; }
.qtm .qt-err { font-size: 1rem; margin-top: 14px; padding: 11px 14px; }
.qt-opt__face { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none; background: rgba(255,255,255,.06); }
.qt-opt__face img { width: 100%; height: 100%; object-fit: cover; }
.qt-opt__face--crest { background: transparent; }
.qt-opt__face--crest img { object-fit: contain; padding: 2px; }
.qt-opt__label { flex: 1; }

.qt-results { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
/* Yes/No tug-of-war verdict bar */
.ynv { margin-top: 4px; }
.ynv__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ynv__tag { font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
.ynv__call { font-size: 1.05rem; font-weight: 900; color: var(--yn); }
.ynv--no .ynv__call { color: #ff6a4d; }
.ynv__bar { display: flex; gap: 3px; height: 30px; border-radius: 15px; overflow: hidden; }
.ynv__seg { height: 100%; flex: 0 1 0; min-width: 3px; box-sizing: border-box;
  transition: flex-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.ynv__seg--yes { background: var(--yn); box-shadow: 0 0 18px -4px var(--yn); border-radius: 15px 5px 5px 15px; }
.ynv__seg--no { background: #ff6a4d; border-radius: 5px 15px 15px 5px; }
.ynv__legend { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 6px 12px; margin-top: 11px; }
.ynv__side { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 800; white-space: nowrap; }
.ynv__side--yes { color: var(--yn); }
.ynv__side--no { color: #ff8a75; }
.ynv__side b { font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.ynv__side em { font-style: normal; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px; color: #0c0d0f; }
.ynv__side--yes em { background: var(--yn); }
.ynv__side--no em { background: #ff8a75; }
.ynv__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ynv__side--yes .ynv__dot { background: var(--yn); }
.ynv__side--no .ynv__dot { background: #ff6a4d; }
.ynv .qt-foot { margin-top: 12px; }
.qt-res { display: flex; align-items: center; gap: 10px; }
.qt-res__face { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none;
  background: rgba(255,255,255,.06); box-shadow: 0 0 0 2px color-mix(in srgb, var(--team, var(--accent)) 55%, transparent); }
.qt-res__face img { width: 100%; height: 100%; object-fit: cover; }
.qt-res__face--crest { background: transparent; box-shadow: none; }
.qt-res__face--crest img { object-fit: contain; padding: 2px; }
.qt-res__body { flex: 1; min-width: 0; }
.qt-res__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.qt-res__label { font-size: 0.86rem; font-weight: 700; }
.qt-res__label b { color: var(--team, var(--accent)); }
.qt-res.mine .qt-res__label { color: var(--text); }
.qt-res__pct { font-size: 0.86rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.qt-res.mine .qt-res__pct { color: var(--team, var(--accent)); }
.qt-res__bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.qt-res__fill { height: 100%; width: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--team, var(--accent)) 45%, transparent);
  transition: width .55s cubic-bezier(.2,.8,.2,1); }
.qt-res.mine .qt-res__fill { background: var(--team, var(--accent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--team, var(--accent)) 55%, transparent); }

.qt-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 0.75rem; }
.qt-foot__count { color: var(--text-muted); }
/* Wordmark — these cards are screenshotted and posted, so every one has to
   carry something that leads back to the site. */
.qt-foot__brand { color: var(--text-muted); opacity: 0.75; font-weight: 800;
  letter-spacing: 0.6px; font-size: 0.7rem; }

/* ── Head-to-head result: two clubs, a ring each, in club colour ────────── */
.qt-h2h { margin-top: 14px; }
.qt-h2h__sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qt-h2h__side { display: flex; flex-direction: column; align-items: center; gap: 7px;
  min-width: 0; padding: 14px 10px 16px; border-radius: 14px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border); }
/* The side the crowd is on gets lifted; the other stays quiet. */
.qt-h2h__side.is-lead { background: color-mix(in srgb, var(--team) 9%, transparent);
  border-color: color-mix(in srgb, var(--team) 38%, transparent); }
.qt-h2h__side.is-mine { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--team) 55%, transparent); }
.qt-h2h__crest { width: 44px; height: 44px; display: grid; place-items: center; }
.qt-h2h__crest img { width: 100%; height: 100%; object-fit: contain; }
.qt-h2h__name { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  text-align: center; color: var(--text-muted); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-h2h__side.is-lead .qt-h2h__name { color: var(--text); }
.qt-h2h__early { font-size: 1.6rem; font-weight: 900; color: var(--text-muted); }

/* Ring — club-coloured, share in the middle. */
.qt-ring { position: relative; width: 104px; height: 104px; }
.qt-ring svg { width: 100%; height: 100%; }
.qt-ring__track { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 8; }
.qt-ring__arc { fill: none; stroke: var(--team, var(--accent)); stroke-width: 8; stroke-linecap: round;
  transition: stroke-dashoffset 0.75s cubic-bezier(.2,.8,.2,1); }
.qt-h2h__side.is-lead .qt-ring__arc {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--team) 65%, transparent)); }
.qt-ring__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }
.qt-ring__pct span { font-size: 0.85rem; font-weight: 800; margin-left: 1px; color: var(--text-muted); }

/* Confidence-over-time line graph (club-confidence / panic / real-deal cards). */
.qt-conf { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.qt-conf__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.qt-conf__cap { font-size: 0.68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
.qt-conf__now { font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--team, var(--accent)); }
.qt-conf__now small { font-size: 0.62rem; font-weight: 700; color: var(--text-muted); margin-left: 1px; }
.qt-conf__svg { display: block; width: 100%; height: 120px; overflow: visible; }
/* On a voted card the graph is the hero — big and prominent. */
.qt-card--voted .qt-conf { margin-top: 8px; padding-top: 8px; }
.qt-card--voted .qt-conf__cap { font-size: 0.72rem; }
.qt-card--voted .qt-conf__now { font-size: 1.5rem; }
.qt-card--voted .qt-conf__svg { height: 200px; }
/* Detailed graph sizes by its own aspect ratio (bigger viewBox when voted). */
.qt-conf__svg--detailed { height: auto !important; }
/* Multi-line race graph (premiership favourite over time). */
.fmrace { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.fmrace__legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; }
.fmrace__leg { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 600; color: var(--text-muted); }
.fmrace__leg b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.fmrace__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.fmrace__end { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fmrace__svg { height: auto !important; }
/* Interactive hover (poll page only) */
.fmrace__cross { stroke: rgba(255,255,255,.4); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.fmrace__hoverdot { pointer-events: none; }
.fmrace__tip { position: absolute; pointer-events: none; z-index: 6; min-width: 168px;
  background: rgba(12,12,16,.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 11px; padding: 9px 11px;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,.85); transition: opacity .1s; }
.fmrace__tip-r { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 6px; }
.fmrace__tip-row { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 600; padding: 2px 0; }
.fmrace__tip-name { flex: 1; }
.fmrace__tip-odds { color: var(--text-muted); opacity: .45; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.fmrace__tip-row b { font-weight: 900; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.fmrace__tip-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* Full-width race rows (premiership) so tall race cards don't stretch the grid. */
.ph-races { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.ph-races .qt-card { width: 100%; }
.ph-races .qt-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
/* Draw-on animation: line strokes via JS; area fades and the marker pops in sync. */
.fmcg__area { animation: fmcg-fade 1.15s ease both; }
.fmcg__dot { animation: fmcg-dot .45s ease both .95s; }
.fmcg__halo { animation: fmcg-halo .45s ease both .95s; }
@keyframes fmcg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fmcg-dot { from { opacity: 0; } to { opacity: 1; } }
@keyframes fmcg-halo { from { opacity: 0; } to { opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
  .fmcg__area, .fmcg__dot, .fmcg__halo { animation: none; }
}

/* ── Confidence Crisis page ─────────────────────────────────────────────── */
.cc { max-width: 960px; padding-bottom: 80px; }
.cc-loading, .cc-empty { text-align: center; color: var(--text-muted); padding: 48px 16px; }
.cc-hero { text-align: center; padding: 28px 0 22px; }
.cc-hero__kicker { font-size: 0.72rem; letter-spacing: .18em; font-weight: 800; color: #ff5c5c; }
.cc-hero__title { font-size: clamp(2rem, 6vw, 3rem); font-weight: 900; margin: 6px 0 8px;
  background: linear-gradient(120deg, #ff6b6b, #ffd23d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cc-hero__tag { color: var(--text-muted); max-width: 40ch; margin: 0 auto; }

/* Confidence band colours (shared by scores + labels). */
.cc-band--crisis { color: #ff4d4d; }
.cc-band--poor   { color: #ff8a3d; }
.cc-band--shaky  { color: #ffce3d; }
.cc-band--ok     { color: #4fd1a0; }
.cc-band--belief { color: #35e08a; }

.cc-team { border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 16px 16px 18px;
  margin-bottom: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--team) 8%, transparent), rgba(255,255,255,.015)); }
.cc-team__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cc-team__rank { font-size: 1.1rem; font-weight: 900; color: var(--text-muted); width: 26px; text-align: center;
  font-variant-numeric: tabular-nums; }
.cc-team__logo { width: 46px; height: 46px; object-fit: contain; flex: none; }
.cc-team__id { flex: 1; min-width: 0; }
.cc-team__name { font-size: 1.25rem; font-weight: 900; margin: 0; }
.cc-team__band { font-size: 0.78rem; font-weight: 800; }
.cc-team__score { text-align: right; }
.cc-team__num { display: block; font-size: 1.8rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.cc-team__scorelbl { font-size: 0.66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }

.cc-team__polls { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.cc-poll { border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 16px 17px; background: rgba(0,0,0,.24); }
.cc-poll__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cc-poll__cat { font-size: 0.66rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--text-muted); }
.cc-poll__q { font-size: 1.02rem; font-weight: 800; margin-top: 3px; }
.cc-poll__sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.cc-poll__now { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; flex: none; line-height: 1; }
.cc-poll__now small { font-size: 0.62rem; font-weight: 700; color: var(--text-muted); }
.cc-graph { margin: 14px 0 10px; }
.cc-graph__svg { display: block; width: 100%; height: auto; }
.cc-g__grid { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.cc-g__grid--mid { stroke: rgba(255,255,255,.16); stroke-dasharray: 4 4; }
.cc-g__ylab { fill: rgba(255,255,255,.4); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-g__xlab { fill: rgba(255,255,255,.42); font-size: 13px; font-weight: 600; }
.cc-g__zone--crisis { fill: #ff4d4d; opacity: .05; }
.cc-g__zone--belief { fill: #35e08a; opacity: .05; }
.cc-g__break { stroke: rgba(255,255,255,.34); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cc-g__ylab--cap { fill: rgba(255,255,255,.28); }
.cc-poll__foot { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }

/* ── Dedicated poll page ────────────────────────────────────────────────── */
.polld { max-width: 820px; padding-bottom: 90px; }
.polld-loading { text-align: center; color: var(--text-muted); padding: 48px 16px; }
.polld-back { display: inline-block; margin: 8px 0 16px; color: var(--text-muted); font-weight: 700; font-size: 0.86rem; text-decoration: none; }
.polld-back:hover { color: var(--text); }
.polld-card { margin-bottom: 22px; }
.polld-q { font-size: 1.5rem; font-weight: 900; line-height: 1.2; margin: 2px 0; }
.polld-sect { margin-bottom: 24px; }
.polld-h { font-size: 1.1rem; font-weight: 900; margin: 0 0 12px; }
.polld-h span { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); margin-left: 6px; }
.polld-muted { color: var(--text-muted); font-size: 0.9rem; }

/* stats detail ↔ poll connection */
.pstat-th--vote, .pstat-td--vote { min-width: 54px; }
.polld-votepct { font-weight: 800; font-variant-numeric: tabular-nums; }
.pstat-table tr.polld-lead td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pstat-table tr.polld-mine td { box-shadow: inset 2px 0 0 var(--accent); }
.polld-tag { display: inline-block; margin-left: 7px; font-size: 0.66rem; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); vertical-align: middle; white-space: nowrap; }
.polld-tag--you { background: rgba(255,255,255,.1); color: var(--text); }

/* head-to-head (2-team polls) */
.polld-h2h { border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; background: rgba(255,255,255,.02); }
.polld-h2h__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
.polld-h2h__team { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 1.02rem; }
.polld-h2h__team img { width: 26px; height: 26px; object-fit: contain; }
.polld-h2h__team--r { text-align: right; }
.polld-h2h__pct { font-size: 0.82rem; font-weight: 800; color: color-mix(in srgb, var(--team) 82%, white); }
.polld-h2h__vs { font-size: 0.78rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }
.polld-h2h__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 5px 0; }
.polld-h2h__v { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: left; }
.polld-h2h__v--r { text-align: right; }
.polld-h2h__v.win { font-weight: 900; }
.polld-h2h__lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 800; white-space: nowrap; }

/* team form cards */
.polld-team--lead { box-shadow: 0 0 0 1px color-mix(in srgb, var(--team) 45%, transparent); }
.polld-team__vote { margin-left: 8px; font-size: 0.82rem; font-weight: 800; color: color-mix(in srgb, var(--team) 82%, white); }
.polld-signin { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 10px; }
.polld-signin a { color: var(--accent); font-weight: 700; text-decoration: none; }
.polld-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.polld-team { border: 1px solid rgba(255,255,255,.08); border-left: 3px solid var(--team, var(--accent));
  border-radius: 14px; padding: 14px; background: rgba(255,255,255,.02); }
.polld-team__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.polld-team__logo { width: 40px; height: 40px; object-fit: contain; flex: none; }
.polld-team__name { font-size: 1.05rem; font-weight: 900; }
.polld-team__pos { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.polld-form { margin-left: auto; display: flex; gap: 3px; }
.polld-pip { width: 18px; height: 18px; border-radius: 4px; font-size: 0.66rem; font-weight: 800; color: #0e1218;
  display: flex; align-items: center; justify-content: center; }
.polld-pip--w { background: #35e08a; } .polld-pip--l { background: #ff5c5c; } .polld-pip--d { background: #cfd3dc; }
.polld-stats { display: flex; gap: 8px; margin-bottom: 12px; }
.polld-stat { flex: 1; background: rgba(255,255,255,.04); border-radius: 10px; padding: 8px 10px; }
.polld-stat span { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 800; }
.polld-stat b { font-size: 1.1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.polld-team__recent { display: flex; flex-direction: column; gap: 4px; }
.polld-res { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; }
.polld-res__r { width: 18px; height: 18px; border-radius: 4px; font-weight: 800; font-size: 0.66rem; color: #0e1218; display: flex; align-items: center; justify-content: center; flex: none; }
.polld-res--w .polld-res__r { background: #35e08a; } .polld-res--l .polld-res__r { background: #ff5c5c; } .polld-res--d .polld-res__r { background: #cfd3dc; }
.polld-res__d { flex: 1; color: var(--text); }
.polld-res__s { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* comments */
.polld-compose { display: flex; gap: 8px; margin-bottom: 14px; align-items: flex-start; }
.polld-cmt-input { flex: 1; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); font: inherit; font-size: 0.94rem; padding: 11px 13px; resize: vertical; min-height: 46px; }
.polld-cmt-send { border: none; background: var(--accent); color: #0e1218; font: inherit; font-weight: 800; padding: 11px 20px; border-radius: 12px; cursor: pointer; }
.polld-cmts { display: flex; flex-direction: column; gap: 10px; }
.polld-cmt { border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 11px 13px; background: rgba(0,0,0,.2); }
.polld-cmt__top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.polld-cmt__top b { font-weight: 800; }
.polld-cmt__time { font-size: 0.72rem; color: var(--text-muted); }
.polld-cmt__body { font-size: 0.94rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.polld-cmt__up { margin-top: 6px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text-muted);
  font: inherit; font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.polld-cmt__up:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 560px) { .polld-compose { flex-direction: column; } .polld-cmt-send { width: 100%; } }

/* ── Match Player Stats table ───────────────────────────────────────────── */
.statstable-section { margin-top: 8px; }
.pstat-controls { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pstat-ctl { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.pstat-ctl select { -webkit-appearance: none; appearance: none; border: 1px solid var(--border);
  background: rgba(255,255,255,.04); color: var(--text); font: inherit; font-weight: 700; font-size: 0.9rem;
  text-transform: none; letter-spacing: 0; padding: 8px 28px 8px 12px; border-radius: 10px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.pstat-ctl select option { background: #17171b; }
.pstat-toggle { display: inline-flex; background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.pstat-toggle button { border: none; background: transparent; color: var(--text-muted); font: inherit; font-weight: 700;
  font-size: 0.86rem; padding: 6px 16px; border-radius: 8px; cursor: pointer; }
.pstat-toggle button.on { background: var(--accent); color: #0e1218; }
.pstat-basis { align-self: center; font-size: 0.76rem; font-weight: 700; color: var(--text-muted); }

.pstat-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
.pstat-empty { padding: 40px 16px; text-align: center; color: var(--text-muted); }
.pstat-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pstat-table thead th { position: sticky; top: 0; z-index: 3; }
.pstat-th { background: #14161c; color: var(--text-muted); font-size: 0.76rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; padding: 12px 10px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--border); }
.pstat-th--num { width: 58px; }
.pstat-th--name { text-align: left; min-width: 190px; }
.pstat-th--stat { cursor: pointer; user-select: none; }
.pstat-th--stat:hover { color: var(--text); }
.pstat-th.sorted { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, #14161c); }
.pstat-caret { margin-left: 3px; font-size: 0.7rem; }
/* sticky first two columns so Player stays visible while scrolling stats */
.pstat-th--num, .pstat-th--name, .pstat-td--num, .pstat-td--name { position: sticky; background: var(--bg, #0e1015); z-index: 2; }
.pstat-th--num { left: 0; z-index: 4; }
.pstat-th--name { left: 58px; z-index: 4; }
.pstat-td--num { left: 0; }
.pstat-td--name { left: 58px; }

.pstat-td { padding: 9px 10px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 0.92rem; color: var(--text); }
.pstat-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.pstat-td.sorted { font-weight: 800; background: rgba(255,255,255,.03); }
.pstat-td--num { text-align: center; }
/* FootyMate rating badge, tinted by tier */
.pstat-rating { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 24px;
  padding: 0 7px; border-radius: 7px; font-size: 0.86rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--tier, var(--text)); background: color-mix(in srgb, var(--tier, #888) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier, #888) 40%, transparent); }
.pstat-rating--elite { --tier: #35e08a; }
.pstat-rating--good  { --tier: #4dc3ff; }
.pstat-rating--ok    { --tier: #cfd3dc; }
.pstat-rating--low   { --tier: #8b96a5; }
.pstat-rating--na    { --tier: #8b96a5; opacity: .6; }
.pstat-td--name { text-align: left; }
.pstat-td--name { display: flex; align-items: center; }
.pstat-name { white-space: nowrap; }

/* ── Pre-game preview (Ones to Watch + Ins & Outs) ─────────────────────────── */
.player-stats-section.pg-mode { display: block; }   /* full-width preview, not the 2-col grid */
.pregame { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pregame__loading, .pregame__empty { color: var(--text-muted); padding: 18px 0; grid-column: 1 / -1; }
.pregame__col { min-width: 0; }
.pregame__team { font-size: 1.05rem; font-weight: 800; color: var(--team, var(--text));
  padding-bottom: 8px; border-bottom: 2px solid color-mix(in srgb, var(--team, #888) 45%, transparent); }
.pregame__sub { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted); margin: 16px 0 8px; }
.pregame__watch { display: flex; flex-direction: column; gap: 8px; }
.pgw { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); }
.pgw__face { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; background: rgba(255,255,255,.06); }
.pgw__face--blank { background: rgba(255, 255, 255, 0.08); }
.pgw__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pgw__name { font-size: 0.92rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgw__name b { font-weight: 800; }
.pgw__stats { display: flex; gap: 12px; font-size: 0.74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pgw__stat b { color: var(--text); font-weight: 800; }
.pgw__rating { flex: none; }
/* ins & outs */
.pgio__soon { font-size: 0.85rem; color: var(--text-muted); padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--border); }
.pgio__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pgio__side { display: flex; flex-direction: column; gap: 5px; }
.pgio__lbl { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.pgio__lbl--in { color: #7ee2a8; }
.pgio__lbl--out { color: #ff8a75; }
.pgio__p { font-size: 0.86rem; font-weight: 600; }
.pgio__p--in { color: #7ee2a8; }
.pgio__p--out { color: #ff8a75; }
.pgio__none { color: var(--text-muted); }
@media (max-width: 640px) { .pregame { grid-template-columns: 1fr; } }
/* pre-game "Team talk" discussion header in the Live Feed tab */
.pbp-pregame__head { margin-bottom: 14px; }
.pbp-pregame__head h3 { font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.pbp-pregame__head p { font-size: 0.9rem; color: var(--text-muted); }
.tstat-scope { margin-bottom: 14px; }

/* pre-game marquee headline */
.pg-headline { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.15;
  color: #fff; margin-bottom: 14px; }
@media (max-width: 560px) { .pg-headline { font-size: 1.12rem; } }
/* hype strip */
.pg-hype { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.pg-hype__chip { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; color: #ffd27a;
  background: rgba(255, 176, 60, 0.14); border: 1px solid rgba(255, 176, 60, 0.4); }
.pg-hype__fav { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); margin-left: auto; }
/* tale of the tape */
.pg-tape { border: 1px solid var(--border); border-radius: 14px; padding: 6px 16px 12px;
  background: rgba(255, 255, 255, 0.03); margin-bottom: 20px; }
.pg-tape__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 12px 0 10px; border-bottom: 1px solid var(--border); }
.pg-tape__head span { font-weight: 800; font-size: 1rem; color: var(--team, var(--text)); }
.pg-tape__head span:last-child { text-align: right; }
.pg-tape__vs { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted) !important; }
.pg-tape__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 8px 0; }
.pg-tape__row + .pg-tape__row { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.pg-tape__v { font-size: 0.98rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pg-tape__v--r { text-align: right; }
.pg-tape__v.win { color: var(--text); font-weight: 900; }
.pg-tape__lbl { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap; }
.pg-tape__row--form { padding-top: 10px; }
.pg-form { display: inline-flex; gap: 4px; }
.pg-tape__row--form .pg-form:last-of-type { justify-content: flex-end; }
.pg-pip { width: 9px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.pg-pip--w { background: #4ade80; }
.pg-pip--l { background: #ff6a5a; }
.pg-pip--d { background: #cfd3dc; }
/* recent meetings */
.pregame__sub--wide { grid-column: 1 / -1; }
.pg-h2h { display: flex; flex-direction: column; gap: 6px; }
.pg-h2h__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 9px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); }
.pg-h2h__t { font-size: 0.88rem; font-weight: 600; color: var(--text-muted); }
.pg-h2h__t--r { text-align: right; }
.pg-h2h__t.win { color: var(--team, var(--text)); font-weight: 800; }
.pg-h2h__score { font-size: 0.92rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.pstat-face { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; margin-right: 10px; background: rgba(255,255,255,.06); flex: none; }
.pstat-face--blank { display: inline-block; }
.pstat-td--name b { font-weight: 800; margin-left: 3px; }

/* ── Polls hub ───────────────────────────────────────────────────────────── */
.ph { max-width: 1140px; padding-bottom: 90px; }
.ph-loading, .ph-empty { text-align: center; color: var(--text-muted); padding: 48px 16px; }
.ph-empty__ico { font-size: 2.2rem; margin-bottom: 8px; }
.ph-hero { text-align: center; padding: 26px 0 18px; }
.ph-hero__kicker { font-size: 0.72rem; letter-spacing: .18em; font-weight: 800; color: var(--accent); }
.ph-hero__title { font-size: clamp(2rem, 6vw, 3rem); font-weight: 900; margin: 6px 0 8px; }
.ph-hero__tag { color: var(--text-muted); max-width: 46ch; margin: 0 auto; }

/* Two-column layout: liquid-glass filter rail on the left, poll grid on the right. */
.ph-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; align-items: start; }
.ph-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 14px; }
.ph-content { min-width: 0; }

/* Liquid-glass vertical menu (matches the StatZone position filter). */
.ph-menu { background: linear-gradient(180deg, rgba(30,32,40,.62), rgba(16,17,22,.5));
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 16px 14px;
  box-shadow: 0 24px 60px -26px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08); }
.ph-menu--scroll .ph-opts { max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.ph-menu--scroll .ph-opts::-webkit-scrollbar { width: 5px; }
.ph-menu--scroll .ph-opts::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; }
.ph-menu__title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-muted); padding: 0 8px; margin-bottom: 12px; }
.ph-opts { display: flex; flex-direction: column; gap: 3px; }
.ph-opt { display: flex; align-items: center; width: 100%; text-align: left; border: 1px solid transparent;
  background: none; color: var(--text-muted); font: inherit; font-size: 0.92rem; font-weight: 600;
  padding: 9px 12px; border-radius: 11px; cursor: pointer; transition: color .12s, background .12s, border-color .12s; }
.ph-opt:hover { color: var(--text); background: rgba(255,255,255,.05); }
.ph-opt.on { color: var(--text); font-weight: 700; border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }

.ph-active { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; min-height: 4px; }
.ph-active__lbl { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 800; }
.ph-chip { font-size: 0.8rem; font-weight: 800; padding: 4px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--team, var(--accent)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--team, var(--accent)) 45%, transparent);
  color: color-mix(in srgb, var(--team, var(--accent)) 82%, white); }
.ph-reset { border: none; background: rgba(255,255,255,.07); color: var(--text-muted); font: inherit;
  font-weight: 700; font-size: 0.78rem; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.ph-reset:hover { color: var(--text); background: rgba(255,255,255,.12); }

/* Uniform cards — equal-height rows so every poll card is the same size. */
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px;
  align-items: stretch; grid-auto-rows: 1fr; }
.ph-card { height: 100%; cursor: pointer; }
.ph-card:hover, .fz-toppolls .qt-card:hover { border-color: color-mix(in srgb, var(--cat, var(--accent)) 45%, var(--border)); }
.fz-toppolls .qt-card, .ph-races .qt-card { cursor: pointer; }
.ph-card--closed { opacity: .82; }
.ph-card--closed .qt-card__num { color: var(--text-muted); }

.ph-clubprompt { padding: 22px; margin-bottom: 16px; text-align: center; }
.ph-clubprompt h3 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 900; }
.ph-clubprompt p { color: var(--text-muted); margin: 0 auto 14px; max-width: 44ch; }
.ph-cta, .ph-clubprompt .ph-cta { border: none; background: var(--accent); color: #0e1218; font: inherit;
  font-weight: 800; padding: 11px 20px; border-radius: 12px; cursor: pointer; }
@media (max-width: 760px) {
  .ph-layout { grid-template-columns: 1fr; }
  .ph-rail { position: static; flex-direction: column; gap: 10px; }
  .ph-menu { padding: 12px; }
  .ph-menu__title { margin-bottom: 8px; }
  .ph-opts, .ph-menu--scroll .ph-opts { flex-direction: row; overflow-x: auto; max-height: none; gap: 6px;
    scrollbar-width: none; }
  .ph-opts::-webkit-scrollbar { display: none; }
  .ph-opt { white-space: nowrap; flex: 0 0 auto; }
}

/* Feed section headings + Top Polls block */
.fz-secttl { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 2px 12px; }
.fz-secttl h2 { font-size: 1.1rem; font-weight: 900; margin: 0; }
.fz-secttl span { font-size: 0.82rem; color: var(--text-muted); }
.fz-secttl__link { margin-left: auto; font-size: 0.82rem; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.fz-secttl__link:hover { text-decoration: underline; }
.fz-toppolls { margin-bottom: 22px; }
.fz-toppolls .qt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
  align-items: stretch; grid-auto-rows: 1fr; }
.fz-toppolls .qt-card { height: 100%; }
.fz-pollslink { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 10px 16px;
  border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text); font-weight: 700; font-size: 0.88rem; text-decoration: none; }
.fz-pollslink:hover { background: rgba(255,255,255,.09); }

/* Interactive arc drag slider (confidence meter) */
.fmarc { margin-top: 8px; }
.fmarc__svg { display: block; width: 100%; max-width: 320px; margin: 0 auto; height: auto; touch-action: none; }
.fmarc__track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 15; stroke-linecap: round; }
.fmarc__prog { fill: none; stroke: var(--team, var(--accent)); stroke-width: 15; stroke-linecap: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--team, var(--accent)) 55%, transparent)); }
.fmarc__handle { fill: var(--team, var(--accent)); stroke: #0b0b0d; stroke-width: 3;
  cursor: grab; filter: drop-shadow(0 2px 5px rgba(0,0,0,.6)); }
.fmarc--drag .fmarc__handle { cursor: grabbing; }
.fmarc__handle--static { stroke-width: 2; }
.fmarc__you { fill: #fff; stroke: var(--team, var(--accent)); stroke-width: 2.5; }
.fmarc__val { fill: var(--team, var(--accent)); font-size: 40px; font-weight: 900; font-variant-numeric: tabular-nums; }
.fmarc__cap { fill: rgba(255,255,255,.5); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fmarc__confirm { display: block; width: 100%; margin-top: 4px; border: none; border-radius: 12px; padding: 13px;
  font: inherit; font-weight: 800; font-size: 0.95rem; cursor: pointer; color: #0e1218;
  background: var(--team, var(--accent)); box-shadow: 0 4px 16px -6px var(--team, var(--accent)); }
.fmarc__confirm:hover { filter: brightness(1.05); }
.fmarc__confirm:active { transform: scale(.99); }
/* Voted state — slider gone; a tiny one-line note, then the graph dominates. */
.fmarc-voted { margin: 2px 0 4px; }
.fmarc-voted__line { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; }
.fmarc-voted__line b { color: var(--team, var(--accent)); font-weight: 800; font-variant-numeric: tabular-nums; }
.qt-foot__discuss { color: var(--accent); font-weight: 700; text-decoration: none; }
.qt-foot__discuss:hover { text-decoration: underline; }

.qt-iq { position: absolute; top: 10px; right: 10px; font-size: 0.72rem; font-weight: 800; color: #04231c;
  background: linear-gradient(135deg, #7dffd9, var(--accent)); padding: 3px 9px; border-radius: 999px;
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 70%, transparent); }
.qt-iq.show { opacity: 1; transform: translateY(0); }

.qt-complete { text-align: center; font-weight: 800; font-size: 0.9rem; color: #7dffd9;
  background: rgba(0,214,164,.1); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 12px; padding: 11px; margin-bottom: 12px; }
.qt-complete--pop { animation: qt-pop .4s cubic-bezier(.3,1.4,.5,1); }
@keyframes qt-pop { 0% { transform: scale(.92); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.qt-cards--done { opacity: .85; }

.qt-signin { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.qt-signin span { font-size: 0.9rem; color: var(--text-muted); }
.qt-error { color: var(--text-muted); font-size: 0.86rem; padding: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; }
.qt-retry { margin-left: 8px; background: none; border: 1px solid var(--border); color: var(--accent);
  border-radius: 8px; padding: 4px 10px; cursor: pointer; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .qt-res__fill { transition: none; }
  .qt-card--skel { animation: none; }
  .qt-complete--pop { animation: none; }
}

/* ══ Quick Takes — unskippable home-page pop-up ═══════════════════════════════ */
.qtm-lock { overflow: hidden; }
.qtm-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(6,6,8,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s ease; }
.qtm-overlay.show { opacity: 1; }
/* "Liquid glass" panel — translucent, blurs and saturates what's behind it. The
   poll card inside stays solid so it remains the focal element. */
.qtm { width: 100%; max-width: 470px; max-height: 92vh; overflow-y: auto; scrollbar-width: none;
  background: linear-gradient(170deg, rgba(60,60,72,.42), rgba(22,22,28,.34));
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px; padding: 22px 20px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateY(14px) scale(.98); transition: transform .3s cubic-bezier(.2,.9,.3,1.1); }
.qtm-overlay.show .qtm { transform: translateY(0) scale(1); }
.qtm::-webkit-scrollbar { display: none; }
.qtm__head { text-align: center; margin-bottom: 16px; }
.qtm__kicker { font-size: 0.64rem; font-weight: 800; letter-spacing: 2px; color: var(--accent); }
.qtm__title { font-size: 1.4rem; font-weight: 900; letter-spacing: -0.3px; margin: 5px 0 3px; }
.qtm__sub { font-size: 0.86rem; color: var(--text-muted); }
.qtm__dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.qtm__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.15); transition: background .2s; }
.qtm__dot.on { background: var(--accent); }
.qtm__dot.cur { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); transform: scale(1.15); }
.qtm-cards { display: flex; flex-direction: column; gap: 12px; }
.qtm__go { width: 100%; margin-top: 16px; border: none; border-radius: 12px; padding: 14px; cursor: pointer;
  font: inherit; font-size: 0.95rem; font-weight: 800; color: #04231c;
  background: linear-gradient(135deg, #7dffd9, var(--accent)); transition: opacity .18s, transform .12s; }
.qtm__go:hover { transform: translateY(-1px); }
.qtm__go.locked { background: rgba(255,255,255,.06); color: var(--text-muted); cursor: not-allowed; border: 1px solid var(--border); }
.qtm__go.locked:hover { transform: none; }

/* Pop-up scaled up ~50% (modal only — the inline FanZone cards keep their size). */
.qtm { max-width: 705px; padding: 33px 30px; border-radius: 28px; }
.qtm__title { font-size: 2.1rem; }
.qtm__sub { font-size: 1.28rem; }
.qtm__kicker { font-size: 0.96rem; }
.qtm__dots { gap: 10px; margin-top: 16px; }
.qtm__dot { width: 12px; height: 12px; }
.qtm .qt-card { padding: 21px; border-radius: 20px; }
.qtm .qt-card__top { margin-bottom: 13px; }
.qtm .qt-card__cat { font-size: 0.9rem; }
.qtm .qt-card__num { font-size: 0.92rem; }
.qtm .qt-card__q { font-size: 1.5rem; }
.qtm .qt-card__sub { font-size: 1.14rem; }
.qtm .qt-opts { gap: 12px; }
.qtm .qt-opt { font-size: 1.32rem; padding: 16px 20px; gap: 14px; border-radius: 16px; }
.qtm .qt-opt__face { width: 45px; height: 45px; }
.qtm .qt-res { gap: 15px; }
.qtm .qt-res__face { width: 50px; height: 50px; }
.qtm .qt-res__label, .qtm .qt-res__pct { font-size: 1.28rem; }
.qtm .qt-res__bar { height: 12px; }
.qtm .qt-results { gap: 15px; margin-top: 18px; }
.qtm .qt-foot { font-size: 1.05rem; margin-top: 16px; }
.qtm .qt-conf__svg { height: 100px; }
.qtm .qt-conf__now { font-size: 1.5rem; }
.qtm__go { padding: 21px; font-size: 1.2rem; border-radius: 16px; margin-top: 22px; }
@media (prefers-reduced-motion: reduce) {
  .qtm-overlay, .qtm { transition: none; }
}

/* ── FanZone onboarding guide ─────────────────────────────────────────────── */
.fzg-overlay { position: fixed; inset: 0; z-index: 2500; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(6,6,8,.62); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  opacity: 0; transition: opacity .22s ease; overflow-y: auto; }
.fzg-overlay.show { opacity: 1; }
.fzg { position: relative; width: 100%; max-width: 560px; margin: auto;
  background: linear-gradient(180deg, rgba(24,26,31,.98), rgba(15,16,20,.98));
  border: 1px solid var(--border); border-radius: 22px; padding: 26px 26px 20px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.75);
  transform: translateY(12px) scale(.985); transition: transform .22s ease; }
.fzg-overlay.show .fzg { transform: translateY(0) scale(1); }
.fzg-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--border); background: rgba(255,255,255,.05);
  color: var(--text-muted); font-size: 0.9rem; cursor: pointer; line-height: 1;
  transition: background .14s, color .14s; }
.fzg-x:hover { background: rgba(255,255,255,.12); color: var(--text); }

.fzg-head { text-align: center; margin-bottom: 20px; padding: 0 12px; }
.fzg-kicker { font-size: 0.66rem; font-weight: 800; letter-spacing: 2px; color: var(--text-muted); }
.fzg-title { font-size: 2rem; font-weight: 900; font-style: italic; letter-spacing: -.5px; margin: 2px 0 6px; }
.fzg-title span { background: linear-gradient(120deg, #ff7a1a, #e51f1f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fzg-sub { font-size: 0.92rem; color: var(--text-muted); line-height: 1.45; max-width: 420px; margin: 0 auto; }

.fzg-steps { display: flex; flex-direction: column; gap: 14px; }
.fzg-step { display: grid; grid-template-columns: 168px 1fr; gap: 16px; align-items: center;
  background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 15px; padding: 14px; }
.fzg-step__art { display: flex; align-items: center; justify-content: center; }
.fzg-step__txt { position: relative; }
.fzg-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent); color: #04231c; font-size: 0.75rem; font-weight: 900; margin-bottom: 6px; }
.fzg-step__txt h3 { font-size: 1.02rem; font-weight: 800; margin: 0 0 3px; }
.fzg-step__txt p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; margin: 0; }
.fzg-step__txt b { color: var(--text); font-weight: 800; }

/* Mini illustrations */
.fzg-take { display: flex; gap: 8px; width: 100%; background: rgba(255,255,255,.05);
  border: 1px solid var(--border); border-radius: 11px; padding: 8px; }
.fzg-take__vote { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 0.6rem; color: var(--text-muted); }
.fzg-take__vote b { font-size: 0.72rem; color: var(--text); }
.fzg-arw { line-height: 1; }
.fzg-arw--up { color: var(--accent); }
.fzg-take__who { display: flex; align-items: center; gap: 5px; font-size: 0.62rem; font-weight: 700; color: var(--text-muted); margin-bottom: 3px; }
.fzg-ava { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #7dffd9, var(--accent)); flex: none; }
.fzg-chip { font-size: 0.54rem; font-weight: 800; padding: 1px 5px; border-radius: 999px; background: rgba(10,31,68,.9); color: #cdd9f0; }
.fzg-take__txt { font-size: 0.68rem; font-weight: 600; line-height: 1.3; color: var(--text); }

.fzg-votes { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fzg-votebtn { display: flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: 800; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; background: rgba(255,255,255,.03); }
.fzg-votebtn--up { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.fzg-score { font-size: 1.1rem; font-weight: 900; color: var(--accent); }

.fzg-poll { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.fzg-poll__q { font-size: 0.62rem; font-weight: 800; line-height: 1.25; margin-bottom: 2px; }
.fzg-opt { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 8px; display: flex; align-items: center; background: rgba(255,255,255,.03); }
.fzg-opt--mine { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.fzg-opt__fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.08); z-index: 0; }
.fzg-opt--mine .fzg-opt__fill { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.fzg-opt__lbl { position: relative; z-index: 1; font-size: 0.62rem; font-weight: 800; flex: 1; }
.fzg-opt__pct { position: relative; z-index: 1; font-size: 0.62rem; font-weight: 800; color: var(--text-muted); }
.fzg-poll__foot { font-size: 0.54rem; color: var(--text-muted); font-weight: 700; margin-top: 1px; }

.fzg-reward { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.fzg-iq { font-size: 0.68rem; font-weight: 900; color: #04231c; background: linear-gradient(150deg, #7dffd9, var(--accent));
  padding: 4px 12px; border-radius: 999px; box-shadow: 0 0 14px -3px color-mix(in srgb, var(--accent) 70%, transparent); }
.fzg-ladder { width: 100%; display: flex; flex-direction: column; gap: 3px; }
.fzg-ladder__row { display: flex; align-items: center; gap: 6px; font-size: 0.6rem; font-weight: 700; color: var(--text-muted); }
.fzg-ladder__row b { margin-left: auto; color: var(--text); }
.fzg-ladder__row i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.fzg-foot { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--border); }
.fzg-btn { border: none; border-radius: 11px; padding: 11px 18px; font-size: 0.9rem; font-weight: 800; cursor: pointer; transition: transform .15s, background .15s, border-color .15s; }
.fzg-btn--ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.fzg-btn--ghost:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 40%, transparent); }
.fzg-btn--go { background: linear-gradient(135deg, #ff7a1a, #e51f1f); color: #fff; box-shadow: 0 10px 26px -10px rgba(229,31,31,.6); }
.fzg-btn--go:hover { transform: translateY(-1px); }

@media (max-width: 560px) {
  .fzg { padding: 22px 16px 16px; }
  .fzg-step { grid-template-columns: 1fr; gap: 12px; }
  .fzg-step__art { order: 2; }
  .fzg-foot { flex-direction: column-reverse; }
  .fzg-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fzg-overlay, .fzg { transition: none; }
}

/* ── Keyboard accessibility: a consistent focus ring on all interactive
   controls (only for keyboard nav, not mouse clicks). ─────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Friendly failure state for data loaders (instead of a blank page). */
.load-error { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.load-error p { margin: 0 0 14px; font-weight: 600; }
/* Inline vote-rejection notice on the dedicated poll page. */
.polld-err { margin-top: 12px; font-size: 0.85rem; font-weight: 700; color: #ff7a6b;
  background: rgba(255,90,60,.1); border: 1px solid rgba(255,90,60,.3);
  border-radius: 9px; padding: 9px 12px; }

/* Site footer (legal + support links) — base styling is inlined per-page;
   these add the interactions inline styles can't express. */
.site-foot__links a { transition: color .15s ease; }
.site-foot__links a:hover { color: var(--accent) !important; }
/* Destructive action button (delete account). */
.fz-btn--danger { color: #ff6b6b; border-color: color-mix(in srgb, #ff6b6b 45%, transparent); }
.fz-btn--danger:hover { background: color-mix(in srgb, #ff6b6b 14%, transparent); }

/* Google Sign-In button containers (the button itself is rendered by Google). */
.acct-google { display: flex; justify-content: center; margin: 8px 0 4px; min-height: 44px; }
.fz-auth__google { display: flex; justify-content: center; margin: 6px 0 4px; min-height: 44px; }
.acct-google-msg { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 10px; }