/* ============================================
   BOOSTED — APP PROTOTYPE
   Built from Figma "Mock ups" (home: node 201:4224)
   ============================================ */

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

:root {
  /* Dark theme (the default); the light theme below overrides the same tokens */
  color-scheme: dark;
  --bg: #0b0b0b;
  --surface: #1d1d1d;            /* cards */
  --surface-hover: #242424;
  --surface-active: #2a2a2a;
  --surface-2: #282828;          /* fills inside cards: setting values, pills, map, lines */
  --surface-2-hover: #333;
  --surface-header: #282828;     /* competition group headers */
  --header: #141414;             /* match, team and player headers: a touch lighter than the page */
  --header-a96: rgba(20, 20, 20, 0.9605);
  --header-a95: rgba(20, 20, 20, 0.95);
  --tile-base: #161616;          /* what news fallback tiles mix their team colour with */
  --chip: #404040;
  --pill: #313131;
  --text: #ffffff;
  --text-2: #d9d9d9;
  --muted: #999999;              /* 4.5:1 or more on every surface and tinted chip (was #7f7f7f) */
  --hairline: #6b6b6b;
  --tint: 255, 255, 255;         /* overlays: rgba(var(--tint), a) */
  --avatar-bg: #2a2a2a;
  --line: #8d8d8d;               /* bracket connectors */
  --line-soft: #5e5e5e;
  --seg-idle: #454545;
  --dot-idle: rgba(217, 217, 217, 0.63);
  --accent: #02c765;
  --accent-text: #02c765;
  --lose-text: #ff5a64;
  --win-fill: #007a46;           /* form badges carry white text: 5.3:1 (was #009b59, 3.6:1) */
  --loss-fill: #d02534;
  --place-gold: #ffcb3d;
  --place-silver: #dbe2ec;
  --place-bronze: #eb9a5c;
  --place-top: #2fdc85;
  --volt: #ceff00;               /* brand fill (the Following button) */
  --volt-ink: #ceff00;           /* volt as text or icon: the wordmark, the selected tab */
  --logo-tile-light: #d9d9d9;    /* tile behind a dark logo */
  --lens: rgba(237, 237, 237, 0.37);
  --lens-pressed: rgba(237, 237, 237, 0.45);
  --toast-bg: rgba(40, 40, 40, 0.95);
  --viewer-bg: rgba(30, 30, 30, 0.6);
  --viewer-circle: #444;
  --frame-bg: #fbfbf7;           /* desktop backdrop around the phone: the portfolio's warm white */
  --ps-cross: #7cb2e8;
  --ps-circle: #ff6b6b;
  --ps-triangle: #3fd9b8;
  --ps-square: #f08fd6;
  --xbox-a: #5dc21e;
  --xbox-b: #f0483c;
  --xbox-x: #3a85ff;
  --xbox-y: #f5c400;

  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-brand: 'Jersey 10', 'Inter', sans-serif;

  --screen-w: 402px;
  --screen-h: 874px;
  --status-h: 67px; /* iPhone status bar inside the desktop frame */
  --chrome-b: 0px; /* browser bar floating over the bottom of the screen (phones only) */

  /* Liquid glass, one finish everywhere (iOS context-menu look): dark, heavily frosted fill,
     a soft light rim (see the ::after ring below) and a drop shadow */
  --glass-fill: rgba(30, 30, 30, 0.82);
  --glass-frost: blur(30px) saturate(1.4);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3);
  --glass-rim: 232, 255, 140;    /* soft volt */
}

/* Light theme: chosen from the menu (or following the phone), set on <html> by app.js */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f5;
  --surface: #ffffff;
  --surface-hover: #f7f7f9;
  --surface-active: #ececf0;
  --surface-2: #ececf0;
  --surface-2-hover: #e2e2e7;
  --surface-header: #ececf0;
  --header: #f9f9fb;
  --header-a96: rgba(249, 249, 251, 0.96);
  --header-a95: rgba(249, 249, 251, 0.95);
  --tile-base: #ffffff;
  --chip: #dcdce2;
  --pill: #ececf0;
  --text: #111114;
  --text-2: #3c3c43;
  --muted: #66666d;
  --hairline: #c7c7cc;
  --tint: 0, 0, 0;
  --avatar-bg: #e3e3e8;
  --line: #8e8e93;
  --line-soft: #c7c7cc;
  --seg-idle: #d1d1d6;
  --dot-idle: rgba(0, 0, 0, 0.28);
  --accent-text: #006b3c;
  --lose-text: #a8121f;
  --place-gold: #8a6400;
  --place-silver: #4a5260;
  --place-bronze: #9c4d14;
  --place-top: #00703f;
  --volt-ink: #5a7a00;
  --logo-tile-light: rgba(0, 0, 0, 0.06);
  --lens: rgba(0, 0, 0, 0.07);
  --lens-pressed: rgba(0, 0, 0, 0.11);
  --toast-bg: rgba(255, 255, 255, 0.97);
  --viewer-bg: rgba(242, 242, 245, 0.6);
  --viewer-circle: #d9d9de;
  --ps-cross: #2f6fb5;
  --ps-circle: #d23c3c;
  --ps-triangle: #0e8a72;
  --ps-square: #b0418f;
  --xbox-a: #3b8a0e;
  --xbox-b: #c8281e;
  --xbox-x: #1f5fcc;
  --xbox-y: #8a6c00;
  --glass-fill: rgba(255, 255, 255, 0.78);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.08);
  --glass-rim: 150, 190, 0;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--frame-bg);
  font-family: var(--font-ui);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

img { display: block; }

[hidden] { display: none !important; }

/* ---------- Device frame ---------- */

.device {
  padding: 12px;
  border-radius: 60px;
  background: #000;
  box-shadow: 0 0 0 1px #333, 0 30px 80px rgba(0, 0, 0, 0.22);
}

/* Desktop: the phone scales down (--fit, set in index.html) so it always fits the window height */
@media (min-width: 501px) {
  html, body { height: 100%; overflow: hidden; }
  body { min-height: 0; }
  .device { position: absolute; left: 50%; top: 50%; translate: -50% -50%; scale: var(--fit, 1); }
}

.screen {
  position: relative;
  width: var(--screen-w);
  height: var(--screen-h);
  border-radius: 48px;
  overflow: hidden;
  background: var(--bg);
}

/* Full-bleed on phones: the frame disappears and the app fills the viewport */
@media (max-width: 500px) {
  body { display: block; place-items: normal; background: var(--bg); }
  .device { padding: 0; border-radius: 0; box-shadow: none; }
  html, body { height: 100%; overflow: hidden; }
  /* The app runs down behind Safari's floating search bar (the large viewport); the nav and
     the end of each scroll list are lifted by the bar's height (large minus small viewport) */
  .screen { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; border-radius: 0; }
  /* the phone's own status bar replaces the simulated one */
  :root {
    --status-h: max(16px, env(safe-area-inset-top, 0px));
    --chrome-b: calc(100lvh - 100svh);
  }
}

/* ---------- Home ---------- */

.home {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0 0 calc(120px + var(--chrome-b));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.home::-webkit-scrollbar { display: none; }

/* Logo row + date row, pinned while the list scrolls. 170px tall as in Figma (67 + 44 + 24 + 17 + 18);
   the 18px bottom padding overlaps the list (negative margin) so the resting layout is unchanged.
   Clear at rest; once the list scrolls under it, it fills with the page's own dark, fading to 95%. */
.home__top {
  position: sticky;
  top: 0;
  z-index: 3;
  width: 100%;
  margin-bottom: -18px;
  padding: var(--status-h) 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.home__top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 95%, transparent));
  opacity: 0;
  transition: opacity 0.2s;
}

.home__top.is-pinned::before { opacity: 1; }

.home > * { flex-shrink: 0; }

.home-nav {
  width: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-nav__logo {
  font-family: var(--font-brand);
  color: var(--volt-ink);
  /* a soft volt bloom: a tight glow close to the letters and a wider, fainter one */
  text-shadow: 0 0 6px rgba(206, 255, 0, 0.35), 0 0 18px rgba(206, 255, 0, 0.18);
  font-weight: 400;
  font-size: 36px;
  line-height: normal;
}

.home-nav__trailing {
  display: flex;
  align-items: center;
  gap: 12px;
}

.glass-pill,
.glass-circle {
  --glass-light: 0.5;
  position: relative;
  height: 44px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-frost);
  backdrop-filter: var(--glass-frost);
  box-shadow: var(--glass-shadow-sm);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass-pill {
  gap: 12px;
  padding: 4px 4px 4px 10px;
}

.glass-circle { width: 44px; }

.live-chip {
  --glass-light: 0.6;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0.2px solid var(--hairline);
  border-radius: 15px;
  font-weight: 800;
  font-size: 14px;
  transition: background 0.25s, border-color 0.25s;
}

/* The glass rim (see the shared ring below) shows only while Live is on */
.live-chip::after {
  opacity: 0;
  transition: opacity 0.25s;
}

/* On: the chip takes a soft green infill, and the glowing dot's light reflects in its glass:
   the rim is lit from the bottom-left and fades toward the top-right, with a soft reflection
   beside the dot (16px in). It settles in with a liquid wobble. */
.live-chip[aria-pressed="true"] {
  border-color: transparent;
  background:
    radial-gradient(circle at 16px 50%, rgba(116, 227, 116, 0.18), transparent 55%),
    rgba(60, 200, 60, 0.12); /* a soft green infill across the whole chip */
  box-shadow: 0 0 10px rgba(116, 227, 116, 0.12);
  animation: live-glass 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.live-chip[aria-pressed="true"]::after {
  opacity: 1;
  /* lit from the bottom-left, fading toward the top-right */
  background: radial-gradient(ellipse at 12% 100%,
    rgba(116, 227, 116, 0.95) 0%,
    rgba(116, 227, 116, 0.55) 35%,
    rgba(116, 227, 116, 0.14) 75%,
    rgba(116, 227, 116, 0.05) 100%);
}

@keyframes live-glass {
  0% { scale: 1; }
  35% { scale: 1.14 1.08; }
  65% { scale: 0.96 1.02; }
  100% { scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .live-chip[aria-pressed="true"],
  .live-chip[aria-pressed="true"] .live-chip__dot { animation: none; }
}

/* Grey like the Figma dot when off; when on, the same glowing green as the
   live "Watch on" dot on match screens (.watch__dot.is-live) */
.live-chip__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.live-chip[aria-pressed="true"] .live-chip__dot {
  background: #74e374;
  box-shadow: 0 0 6px 2px rgba(116, 227, 116, 0.55);
  animation: live-glow 1.8s ease-in-out infinite;
}

/* The dot breathes its glow rather than fading out */
@keyframes live-glow {
  50% { box-shadow: 0 0 10px 3px rgba(116, 227, 116, 0.8); }
}

@keyframes pulse {
  50% { opacity: 0.35; }
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 100px;
  display: grid;
  place-items: center;
}

/* ---------- Date nav ---------- */

.date-nav {
  position: relative; /* offsetParent for centering the active day */
  width: 100%;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* half the screen minus half an item, so the first/last day can center */
  padding: 0 calc(50% - 42px);
}

.date-nav::-webkit-scrollbar { display: none; }

.date-nav__day {
  flex: 0 0 84px;
  scroll-snap-align: center;
  font-weight: 900;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.2s;
}

.date-nav__day.is-active { color: var(--text); }

/* ---------- Competition groups ---------- */

.groups {
  position: relative;
  z-index: 0; /* leaving matches fade out beneath the list (animateGroups) */
  width: 378px;
  max-width: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.group {
  border-radius: 12px;
  overflow: hidden;
}

.group__header {
  width: 100%;
  height: 46px;
  padding: 14px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-header);
  text-align: left;
}

.group__title {
  flex: 1;
  font-weight: 900;
  font-size: 13px;
}

/* Divides followed groups from the rest; hides or shows every other competition */
.others-toggle {
  align-self: center;
  padding: 8px 16px;
  border: 0.2px solid var(--hairline);
  border-radius: 100px;
  background: rgba(var(--tint), 0.04);
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
}

.others-toggle:hover {
  color: var(--text);
  background: rgba(var(--tint), 0.08);
}

.others-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.group__chevron {
  transform: rotate(90deg);
  transition: transform 0.25s;
}

.group.is-open .group__chevron { transform: rotate(-90deg); }

/* A section's game count shows only while it's collapsed; open, the games speak for themselves */
.group.is-open .badge { display: none; }

.badge {
  padding: 2px 6px;
  border-radius: 15px;
  background: var(--chip);
  font-weight: 800;
  font-size: 11px;
}

.group__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.group.is-open .group__body { grid-template-rows: 1fr; }

.group__body > div { overflow: hidden; }

.group__empty {
  padding: 18px 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* Competition icons — crops copied from the Figma layers */

.comp-icon {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  overflow: hidden;
}

.comp-icon--rlcs img {
  position: absolute;
  width: 610.3%;
  height: 344.44%;
  left: -255.15%;
  top: -122.22%;
  max-width: none;
}

.comp-icon--rlcs { transform: scaleX(-1); }

.comp-icon--collegiate .shield {
  position: absolute;
  inset: 19.43% 16.67% 8.33% 19.44%;
  width: auto;
  height: auto;
}

.comp-icon--collegiate .crest {
  position: absolute;
  left: 4.12%;
  top: 11.11%;
  width: 91.76%;
  height: 88.89%;
  transform: scaleX(-1);
}

.comp-icon--fifae {
  display: grid;
  place-items: center;
}

.comp-icon--fifae img {
  width: 13px;
  height: 8px;
  object-fit: cover;
}

/* At 24px (Following rows) the logo is drawn at 20 × 13, its own pixel size */
.comp-icon--24.comp-icon--fifae img {
  width: 20px;
  height: 13px;
}

/* ---------- Match row ---------- */

.match {
  width: 100%;
  height: 77px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background: var(--surface);
  transition: background 0.15s;
}

.match:hover { background: var(--surface-hover); }
.match:active { background: var(--surface-active); }

.match__line {
  display: grid;
  grid-template-columns: 1fr 29px 1fr;
  align-items: center;
  gap: 10px;
}

.team {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  min-width: 0;
}

.team--home { justify-content: flex-end; }

.team__logo {
  flex: none;
  height: 24px;
  object-fit: contain;
}

.match__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.match__score {
  font-weight: 800;
  font-size: 14px;
}

.match__label {
  font-weight: 500;
  font-size: 10px;
  color: var(--muted);
}

.match__time {
  font-weight: 800;
  font-size: 12px;
  line-height: normal;
  color: var(--muted);
}

.series {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.series__dot {
  width: 6px;
  height: 6px;
  border-radius: 16px;
  background: rgba(var(--tint), 0.2);
}

.series__dot--current {
  background: rgba(var(--tint), 0.9);
  box-shadow: 0 0 4px 1px rgb(var(--tint));
  animation: pulse 1.4s ease-in-out infinite;
}

/* ---------- Tab bar ---------- */

.tabbar {
  position: absolute;
  left: 24px;
  right: 24px;
  justify-content: center;
  bottom: max(17px, env(safe-area-inset-bottom, 0px), calc(var(--chrome-b) + 8px));
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Back to today: a volt pill centred above the tab bar, rising in when the date row is more
   than two days from today (syncTodayBtn in app.js). Hidden under match and team pages. */
.today-btn {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--volt);
  color: #000;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px) scale(0.9);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}

.today-btn.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.screen.has-page .today-btn { opacity: 0; pointer-events: none; }

.today-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .today-btn { transition: opacity 0.2s ease; transform: translate(-50%, 0); }
}

/* Glass: every glass surface shares the --glass-* finish. CSS can't refract, so the light
   becomes a 1px rim (brightest at the top-left, catching again at the bottom-right). */
.tabbar__pills,
.tabbar__search {
  --glass-light: 0.5;
  position: relative;
  border-radius: 9999px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-frost);
  backdrop-filter: var(--glass-frost);
  box-shadow: var(--glass-shadow);
}

/* The glass rim: a 1px volt-tinted gradient ring, its strength set by --glass-light */
.glass-pill::after,
.glass-circle::after,
.tabbar__pills::after,
.tabbar__search::after,
.bracket__chip::after,
.settings__value--control::after,
.settings__button::after,
.more-menu::after,
.live-chip::after,
.follow-row__remove::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  /* A soft volt cast (white blended with the brand's #ceff00) */
  background: linear-gradient(135deg,
    rgba(var(--glass-rim), calc(0.75 * var(--glass-light))) 0%,
    rgba(var(--glass-rim), calc(0.12 * var(--glass-light))) 35%,
    rgba(var(--glass-rim), 0) 60%,
    rgba(var(--glass-rim), calc(0.4 * var(--glass-light))) 100%);
  /* Cut the middle out of the gradient, leaving only the padding ring */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.tabbar__pills {
  flex: none; /* hugs its tabs, centred in the bar */
  display: flex;
  padding: 4px;
}

.tab {
  flex: none;
  width: 70px; /* equal tabs, close together */
  min-width: 0;
  padding: 8px;
  border-radius: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 600;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 0.06px;
  white-space: nowrap;
  transition: background 0.2s;
}

.tab:last-child { margin-right: 0; }

.tab__icon {
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Each tab's icon, set here rather than through a custom property in the markup: Safari on
   iPhone dropped the url() when it came in through var(). The SVGs (from assets/) are inlined:
   Chromium won't mask with a separate file when the page is opened from file:// */
.tab[data-view="matches"] .tab__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0001 25.0832C12.4684 25.0832 11.0285 24.7919 9.68019 24.2094C8.33172 23.6268 7.15863 22.8367 6.16094 21.839C5.16324 20.8413 4.37312 19.6682 3.79056 18.3197C3.20801 16.9715 2.91673 15.5315 2.91673 13.9999C2.91673 12.4682 3.20801 11.0283 3.79056 9.68C4.37312 8.33153 5.16324 7.15844 6.16094 6.16075C7.15863 5.16305 8.33172 4.37293 9.68019 3.79037C11.0285 3.20782 12.4684 2.91654 14.0001 2.91654C15.5317 2.91654 16.9717 3.20782 18.3199 3.79037C19.6684 4.37293 20.8415 5.16305 21.8392 6.16075C22.8369 7.15844 23.627 8.33153 24.2096 9.68C24.7921 11.0283 25.0834 12.4682 25.0834 13.9999C25.0834 15.5315 24.7921 16.9715 24.2096 18.3197C23.627 19.6682 22.8369 20.8413 21.8392 21.839C20.8415 22.8367 19.6684 23.6268 18.3199 24.2094C16.9717 24.7919 15.5317 25.0832 14.0001 25.0832ZM19.6316 11.4198L21.4309 10.8274L21.9424 9.05058C21.3202 8.07972 20.5528 7.24954 19.6403 6.56004C18.728 5.87054 17.7169 5.36051 16.607 5.02996L14.8751 6.25058V8.08575L19.6316 11.4198ZM8.36856 11.4198L13.1251 8.08575V6.25058L11.3931 5.02996C10.2833 5.36051 9.27584 5.87054 8.3709 6.56004C7.46595 7.24954 6.70237 8.07972 6.08015 9.05058L6.59173 10.8274L8.36856 11.4198ZM6.98665 20.1564L8.57506 20.0172L9.58481 18.285L7.87069 13.1205L6.01277 12.4698L4.66673 13.4568C4.66673 14.7732 4.83804 15.9645 5.18065 17.0309C5.52306 18.0974 6.12506 19.1392 6.98665 20.1564ZM15.51 23.211C16.0111 23.1295 16.5174 23.0072 17.029 22.8441L17.9352 20.8922L17.0424 19.4068H10.9577L10.0874 20.8922L10.9936 22.8441C11.4828 23.0072 11.9798 23.1295 12.4846 23.211C12.9893 23.2925 13.4945 23.3332 14.0001 23.3332C14.5056 23.3332 15.0089 23.2925 15.51 23.211ZM11.2628 17.6571H16.7598L18.4378 12.7209L14.0001 9.61146L9.59823 12.7209L11.2628 17.6571ZM21.0135 20.1564C21.8751 19.1392 22.4771 18.0974 22.8195 17.0309C23.1621 15.9645 23.3334 14.7732 23.3334 13.4568L22.0095 12.5281L20.1294 13.098L18.4153 18.285L19.4251 20.0172L21.0135 20.1564Z' fill='%2302C765'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0001 25.0832C12.4684 25.0832 11.0285 24.7919 9.68019 24.2094C8.33172 23.6268 7.15863 22.8367 6.16094 21.839C5.16324 20.8413 4.37312 19.6682 3.79056 18.3197C3.20801 16.9715 2.91673 15.5315 2.91673 13.9999C2.91673 12.4682 3.20801 11.0283 3.79056 9.68C4.37312 8.33153 5.16324 7.15844 6.16094 6.16075C7.15863 5.16305 8.33172 4.37293 9.68019 3.79037C11.0285 3.20782 12.4684 2.91654 14.0001 2.91654C15.5317 2.91654 16.9717 3.20782 18.3199 3.79037C19.6684 4.37293 20.8415 5.16305 21.8392 6.16075C22.8369 7.15844 23.627 8.33153 24.2096 9.68C24.7921 11.0283 25.0834 12.4682 25.0834 13.9999C25.0834 15.5315 24.7921 16.9715 24.2096 18.3197C23.627 19.6682 22.8369 20.8413 21.8392 21.839C20.8415 22.8367 19.6684 23.6268 18.3199 24.2094C16.9717 24.7919 15.5317 25.0832 14.0001 25.0832ZM19.6316 11.4198L21.4309 10.8274L21.9424 9.05058C21.3202 8.07972 20.5528 7.24954 19.6403 6.56004C18.728 5.87054 17.7169 5.36051 16.607 5.02996L14.8751 6.25058V8.08575L19.6316 11.4198ZM8.36856 11.4198L13.1251 8.08575V6.25058L11.3931 5.02996C10.2833 5.36051 9.27584 5.87054 8.3709 6.56004C7.46595 7.24954 6.70237 8.07972 6.08015 9.05058L6.59173 10.8274L8.36856 11.4198ZM6.98665 20.1564L8.57506 20.0172L9.58481 18.285L7.87069 13.1205L6.01277 12.4698L4.66673 13.4568C4.66673 14.7732 4.83804 15.9645 5.18065 17.0309C5.52306 18.0974 6.12506 19.1392 6.98665 20.1564ZM15.51 23.211C16.0111 23.1295 16.5174 23.0072 17.029 22.8441L17.9352 20.8922L17.0424 19.4068H10.9577L10.0874 20.8922L10.9936 22.8441C11.4828 23.0072 11.9798 23.1295 12.4846 23.211C12.9893 23.2925 13.4945 23.3332 14.0001 23.3332C14.5056 23.3332 15.0089 23.2925 15.51 23.211ZM11.2628 17.6571H16.7598L18.4378 12.7209L14.0001 9.61146L9.59823 12.7209L11.2628 17.6571ZM21.0135 20.1564C21.8751 19.1392 22.4771 18.0974 22.8195 17.0309C23.1621 15.9645 23.3334 14.7732 23.3334 13.4568L22.0095 12.5281L20.1294 13.098L18.4153 18.285L19.4251 20.0172L21.0135 20.1564Z' fill='%2302C765'/%3E%3C/svg%3E"); }
.tab[data-view="news"] .tab__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.19231 23.9168C5.60295 23.9168 5.1041 23.7126 4.69577 23.3043C4.28744 22.896 4.08327 22.3971 4.08327 21.8078V6.1925C4.08327 5.60314 4.28744 5.10429 4.69577 4.69596C5.1041 4.28763 5.60295 4.08346 6.19231 4.08346H21.8076C22.3969 4.08346 22.8958 4.28763 23.3041 4.69596C23.7124 5.10429 23.9166 5.60314 23.9166 6.1925V21.8078C23.9166 22.3971 23.7124 22.896 23.3041 23.3043C22.8958 23.7126 22.3969 23.9168 21.8076 23.9168H6.19231ZM9.33327 19.5418H15.1666C15.4145 19.5418 15.6223 19.4579 15.7899 19.2901C15.9577 19.1223 16.0416 18.9144 16.0416 18.6665C16.0416 18.4184 15.9577 18.2106 15.7899 18.0432C15.6223 17.8756 15.4145 17.7918 15.1666 17.7918H9.33327C9.08535 17.7918 8.87759 17.8757 8.70998 18.0435C8.54217 18.2113 8.45827 18.4192 8.45827 18.6671C8.45827 18.9152 8.54217 19.123 8.70998 19.2904C8.87759 19.458 9.08535 19.5418 9.33327 19.5418ZM9.33327 14.8751H18.6666C18.9145 14.8751 19.1223 14.7912 19.2899 14.6234C19.4577 14.4556 19.5416 14.2478 19.5416 13.9998C19.5416 13.7517 19.4577 13.544 19.2899 13.3765C19.1223 13.2089 18.9145 13.1251 18.6666 13.1251H9.33327C9.08535 13.1251 8.87759 13.209 8.70998 13.3768C8.54217 13.5446 8.45827 13.7525 8.45827 14.0004C8.45827 14.2485 8.54217 14.4563 8.70998 14.6237C8.87759 14.7913 9.08535 14.8751 9.33327 14.8751ZM9.33327 10.2085H18.6666C18.9145 10.2085 19.1223 10.1246 19.2899 9.95675C19.4577 9.78895 19.5416 9.58109 19.5416 9.33317C19.5416 9.08506 19.4577 8.87729 19.2899 8.70988C19.1223 8.54227 18.9145 8.45846 18.6666 8.45846H9.33327C9.08535 8.45846 8.87759 8.54236 8.70998 8.71017C8.54217 8.87797 8.45827 9.08584 8.45827 9.33375C8.45827 9.58186 8.54217 9.78963 8.70998 9.95704C8.87759 10.1247 9.08535 10.2085 9.33327 10.2085Z' fill='white'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.19231 23.9168C5.60295 23.9168 5.1041 23.7126 4.69577 23.3043C4.28744 22.896 4.08327 22.3971 4.08327 21.8078V6.1925C4.08327 5.60314 4.28744 5.10429 4.69577 4.69596C5.1041 4.28763 5.60295 4.08346 6.19231 4.08346H21.8076C22.3969 4.08346 22.8958 4.28763 23.3041 4.69596C23.7124 5.10429 23.9166 5.60314 23.9166 6.1925V21.8078C23.9166 22.3971 23.7124 22.896 23.3041 23.3043C22.8958 23.7126 22.3969 23.9168 21.8076 23.9168H6.19231ZM9.33327 19.5418H15.1666C15.4145 19.5418 15.6223 19.4579 15.7899 19.2901C15.9577 19.1223 16.0416 18.9144 16.0416 18.6665C16.0416 18.4184 15.9577 18.2106 15.7899 18.0432C15.6223 17.8756 15.4145 17.7918 15.1666 17.7918H9.33327C9.08535 17.7918 8.87759 17.8757 8.70998 18.0435C8.54217 18.2113 8.45827 18.4192 8.45827 18.6671C8.45827 18.9152 8.54217 19.123 8.70998 19.2904C8.87759 19.458 9.08535 19.5418 9.33327 19.5418ZM9.33327 14.8751H18.6666C18.9145 14.8751 19.1223 14.7912 19.2899 14.6234C19.4577 14.4556 19.5416 14.2478 19.5416 13.9998C19.5416 13.7517 19.4577 13.544 19.2899 13.3765C19.1223 13.2089 18.9145 13.1251 18.6666 13.1251H9.33327C9.08535 13.1251 8.87759 13.209 8.70998 13.3768C8.54217 13.5446 8.45827 13.7525 8.45827 14.0004C8.45827 14.2485 8.54217 14.4563 8.70998 14.6237C8.87759 14.7913 9.08535 14.8751 9.33327 14.8751ZM9.33327 10.2085H18.6666C18.9145 10.2085 19.1223 10.1246 19.2899 9.95675C19.4577 9.78895 19.5416 9.58109 19.5416 9.33317C19.5416 9.08506 19.4577 8.87729 19.2899 8.70988C19.1223 8.54227 18.9145 8.45846 18.6666 8.45846H9.33327C9.08535 8.45846 8.87759 8.54236 8.70998 8.71017C8.54217 8.87797 8.45827 9.08584 8.45827 9.33375C8.45827 9.58186 8.54217 9.78963 8.70998 9.95704C8.87759 10.1247 9.08535 10.2085 9.33327 10.2085Z' fill='white'/%3E%3C/svg%3E"); }
.tab[data-view="events"] .tab__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.54829 12.6675V8.16679H6.1925C6.0877 8.16679 6.00165 8.20043 5.93438 8.26771C5.8671 8.33499 5.83346 8.42103 5.83346 8.52584V9.33346C5.83346 10.1472 6.08847 10.8618 6.5985 11.4772C7.10853 12.0926 7.75846 12.4894 8.54829 12.6675ZM19.452 12.6675C20.2418 12.4894 20.8917 12.0926 21.4018 11.4772C21.9118 10.8618 22.1668 10.1472 22.1668 9.33346V8.52584C22.1668 8.42103 22.1332 8.33499 22.0659 8.26771C21.9986 8.20043 21.9126 8.16679 21.8078 8.16679H19.452V12.6675ZM13.1251 22.1668V18.1686C12.1125 18.022 11.2206 17.626 10.4497 16.9807C9.6787 16.3353 9.15554 15.5243 8.88021 14.5476C7.53407 14.3876 6.39813 13.8162 5.47238 12.8335C4.54643 11.8507 4.08346 10.6841 4.08346 9.33346V8.52584C4.08346 7.94406 4.28947 7.44706 4.7015 7.03484C5.11372 6.62281 5.61072 6.41679 6.1925 6.41679H8.54829V6.1925C8.54829 5.61072 8.75431 5.11372 9.16634 4.7015C9.57836 4.28947 10.0754 4.08346 10.6573 4.08346H17.3429C17.9249 4.08346 18.4219 4.28947 18.8339 4.7015C19.2459 5.11372 19.452 5.61072 19.452 6.1925V6.41679H21.8078C22.3895 6.41679 22.8865 6.62281 23.2988 7.03484C23.7108 7.44706 23.9168 7.94406 23.9168 8.52584V9.33346C23.9168 10.6841 23.4538 11.8507 22.5279 12.8335C21.6021 13.8162 20.4662 14.3876 19.12 14.5476C18.8447 15.5243 18.3216 16.3353 17.5506 16.9807C16.7796 17.626 15.8878 18.022 14.8751 18.1686V22.1668H18.1508C18.3991 22.1668 18.607 22.2506 18.7744 22.4182C18.942 22.5856 19.0258 22.7935 19.0258 23.0418C19.0258 23.2901 18.942 23.498 18.7744 23.6654C18.607 23.833 18.3991 23.9168 18.1508 23.9168H9.84942C9.60111 23.9168 9.39325 23.833 9.22584 23.6654C9.05822 23.498 8.97442 23.2901 8.97442 23.0418C8.97442 22.7935 9.05822 22.5856 9.22584 22.4182C9.39325 22.2506 9.60111 22.1668 9.84942 22.1668H13.1251Z' fill='white'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.54829 12.6675V8.16679H6.1925C6.0877 8.16679 6.00165 8.20043 5.93438 8.26771C5.8671 8.33499 5.83346 8.42103 5.83346 8.52584V9.33346C5.83346 10.1472 6.08847 10.8618 6.5985 11.4772C7.10853 12.0926 7.75846 12.4894 8.54829 12.6675ZM19.452 12.6675C20.2418 12.4894 20.8917 12.0926 21.4018 11.4772C21.9118 10.8618 22.1668 10.1472 22.1668 9.33346V8.52584C22.1668 8.42103 22.1332 8.33499 22.0659 8.26771C21.9986 8.20043 21.9126 8.16679 21.8078 8.16679H19.452V12.6675ZM13.1251 22.1668V18.1686C12.1125 18.022 11.2206 17.626 10.4497 16.9807C9.6787 16.3353 9.15554 15.5243 8.88021 14.5476C7.53407 14.3876 6.39813 13.8162 5.47238 12.8335C4.54643 11.8507 4.08346 10.6841 4.08346 9.33346V8.52584C4.08346 7.94406 4.28947 7.44706 4.7015 7.03484C5.11372 6.62281 5.61072 6.41679 6.1925 6.41679H8.54829V6.1925C8.54829 5.61072 8.75431 5.11372 9.16634 4.7015C9.57836 4.28947 10.0754 4.08346 10.6573 4.08346H17.3429C17.9249 4.08346 18.4219 4.28947 18.8339 4.7015C19.2459 5.11372 19.452 5.61072 19.452 6.1925V6.41679H21.8078C22.3895 6.41679 22.8865 6.62281 23.2988 7.03484C23.7108 7.44706 23.9168 7.94406 23.9168 8.52584V9.33346C23.9168 10.6841 23.4538 11.8507 22.5279 12.8335C21.6021 13.8162 20.4662 14.3876 19.12 14.5476C18.8447 15.5243 18.3216 16.3353 17.5506 16.9807C16.7796 17.626 15.8878 18.022 14.8751 18.1686V22.1668H18.1508C18.3991 22.1668 18.607 22.2506 18.7744 22.4182C18.942 22.5856 19.0258 22.7935 19.0258 23.0418C19.0258 23.2901 18.942 23.498 18.7744 23.6654C18.607 23.833 18.3991 23.9168 18.1508 23.9168H9.84942C9.60111 23.9168 9.39325 23.833 9.22584 23.6654C9.05822 23.498 8.97442 23.2901 8.97442 23.0418C8.97442 22.7935 9.05822 22.5856 9.22584 22.4182C9.39325 22.2506 9.60111 22.1668 9.84942 22.1668H13.1251Z' fill='white'/%3E%3C/svg%3E"); }
.tab[data-view="following"] .tab__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.811 21.7057L9.3862 24.977C9.18401 25.0951 8.98147 25.1447 8.77857 25.1259C8.57568 25.1071 8.39208 25.0387 8.22777 24.9209C8.06322 24.8028 7.93621 24.6486 7.84673 24.4583C7.75749 24.268 7.74319 24.0574 7.80385 23.8266L9.24397 17.667L4.45473 13.5213C4.27578 13.3658 4.16178 13.1857 4.11275 12.9809C4.06348 12.7762 4.07637 12.5772 4.15144 12.3841C4.22651 12.1912 4.3347 12.0335 4.476 11.9111C4.6173 11.7886 4.81044 11.7085 5.05539 11.6709L11.3757 11.1187L13.8296 5.30206C13.9189 5.08569 14.0542 4.92567 14.2358 4.82202C14.4173 4.71837 14.609 4.66654 14.811 4.66654C15.0129 4.66654 15.2047 4.71837 15.3862 4.82202C15.5677 4.92567 15.7031 5.08569 15.7923 5.30206L18.2462 11.1187L24.5665 11.6709C24.8115 11.7085 25.0046 11.7886 25.1459 11.9111C25.2872 12.0335 25.3954 12.1912 25.4705 12.3841C25.5455 12.5772 25.5584 12.7762 25.5092 12.9809C25.4601 13.1857 25.3461 13.3658 25.1672 13.5213L20.378 17.667L21.8181 23.8266C21.8787 24.0574 21.8644 24.268 21.7752 24.4583C21.6857 24.6486 21.5587 24.8028 21.3942 24.9209C21.2298 25.0387 21.0462 25.1071 20.8433 25.1259C20.6405 25.1447 20.4379 25.0951 20.2357 24.977L14.811 21.7057Z' fill='white'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.811 21.7057L9.3862 24.977C9.18401 25.0951 8.98147 25.1447 8.77857 25.1259C8.57568 25.1071 8.39208 25.0387 8.22777 24.9209C8.06322 24.8028 7.93621 24.6486 7.84673 24.4583C7.75749 24.268 7.74319 24.0574 7.80385 23.8266L9.24397 17.667L4.45473 13.5213C4.27578 13.3658 4.16178 13.1857 4.11275 12.9809C4.06348 12.7762 4.07637 12.5772 4.15144 12.3841C4.22651 12.1912 4.3347 12.0335 4.476 11.9111C4.6173 11.7886 4.81044 11.7085 5.05539 11.6709L11.3757 11.1187L13.8296 5.30206C13.9189 5.08569 14.0542 4.92567 14.2358 4.82202C14.4173 4.71837 14.609 4.66654 14.811 4.66654C15.0129 4.66654 15.2047 4.71837 15.3862 4.82202C15.5677 4.92567 15.7031 5.08569 15.7923 5.30206L18.2462 11.1187L24.5665 11.6709C24.8115 11.7085 25.0046 11.7886 25.1459 11.9111C25.2872 12.0335 25.3954 12.1912 25.4705 12.3841C25.5455 12.5772 25.5584 12.7762 25.5092 12.9809C25.4601 13.1857 25.3461 13.3658 25.1672 13.5213L20.378 17.667L21.8181 23.8266C21.8787 24.0574 21.8644 24.268 21.7752 24.4583C21.6857 24.6486 21.5587 24.8028 21.3942 24.9209C21.2298 25.0387 21.0462 25.1071 20.8433 25.1259C20.6405 25.1447 20.4379 25.0951 20.2357 24.977L14.811 21.7057Z' fill='white'/%3E%3C/svg%3E"); }

.tab.is-active {
  color: var(--volt-ink);
  /* the wordmark's volt bloom; a filter, as the icon is a mask that can't carry a shadow */
  filter: drop-shadow(0 0 3px rgba(206, 255, 0, 0.35)) drop-shadow(0 0 9px rgba(206, 255, 0, 0.18));
  font-weight: 700;
}

.tab {
  position: relative;
  z-index: 1;
}

/* The selected tab's highlight: one glass lens that slides between tabs (see moveTabLens in
   app.js), stretching on the way and settling with a wobble. It swells while pressed. */
.tabbar__lens {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 100px;
  background: var(--lens); /* Figma's selected tab fill */
  pointer-events: none;
  transform-origin: center;
  transition: scale 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.2s;
}

/* Pressing a tab swells the lens like a drop of liquid under a fingertip */
.tabbar__pills.is-pressed .tabbar__lens {
  scale: 1.1 1.14;
  background: var(--lens-pressed);
}

.tab__icon { transition: scale 0.2s; }

.tab:active .tab__icon { scale: 0.88; }

.tabbar__search {
  flex: none;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
}

/* ---------- News ---------- */

.news {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: calc(120px + var(--chrome-b));
}

.news::-webkit-scrollbar { display: none; }

/* Sticky header fades from black to clear over the feed, as in Figma */
.news__header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--status-h) 0 18px;
  margin-bottom: -18px; /* the header's tail overlaps the feed, as on Home */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news__header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Home's header fill: clear at rest; once the feed scrolls under it, the page's own dark
     fading to 95% */
  background: linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 95%, transparent));
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.news__header.is-pinned::before { opacity: 1; }

.news__toolbar {
  min-height: 44px; /* a toolbar's height even when it has no buttons (Competitions) */
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.news__title {
  font-weight: 900;
  font-size: 24px;
  line-height: 13px;
  letter-spacing: 0.06px;
}

.news__feed {
  padding-top: 38px;
  display: flex;
  flex-direction: column;
  gap: 52px;
}

.news__section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.news__heading {
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  line-height: 13px;
  letter-spacing: 0.06px;
}

.comp-icon--24 {
  width: 24px;
  height: 24px;
}

.article {
  padding: 0 12px;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.article__image {
  flex: none;
  width: 126px;
  height: 81px;
  border-radius: 12px;
  object-fit: cover;
}

.article__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-weight: 800;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.06px;
}

/* Thumbnails built from team logos, player photos or the RLCS badge */
.article__tile {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface);
}

.article__logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.article__player {
  position: absolute;
  bottom: -60%;
  left: 50%;
  height: 160%;
  max-width: none;
  transform: translateX(-50%);
}

.article__comp {
  width: 44px;
  height: 44px;
}

.article--lead .article__logo,
.article--lead .article__comp {
  width: 96px;
  height: 96px;
}

/* The article's own image, laid over the built thumbnail */
.article__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article--lead { flex-direction: column; }

.article--lead .article__image {
  width: 100%;
  height: auto;
  aspect-ratio: 968 / 544;
}

.article--lead .article__title {
  display: block;
  font-size: 16px;
}

.article__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.article__meta img {
  margin-right: 2px;
  border-radius: 17px;
}

/* ---------- Team page (Figma 769:2384) ---------- */

/* Slides in over the tab it was opened from, like the match screen */
.team-page {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: calc(120px + var(--chrome-b)); /* clears the tab bar */
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.team-page::-webkit-scrollbar { display: none; }


.team-toolbar {
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.team-toolbar__end {
  width: auto;
  padding: 4px 8px 4px 4px;
  gap: 12px;
}

.team-follow {
  padding: 5px 11px; /* 1px less than before to make room for the 1px stroke */
  border: 1px solid var(--text);
  border-radius: 15px;
  font-weight: 800;
  font-size: 14px;
  transition: background 0.2s, color 0.2s;
}

.team-follow.is-on {
  border-color: var(--volt);
  background: var(--volt);
  color: #000;
}

.team-head {
  height: 73px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 17px;
}

.team-head__logo {
  flex: none;
  width: 49px;
  height: 42px;
  display: grid;
  place-items: center;
}

.team-head__logo img {
  max-width: 43px;
  max-height: 42px;
}

.team-head > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-head__name {
  font-weight: 900;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.06px;
}

.team-head__region {
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
}

/* Six tabs: the row scrolls sideways */
.team-tabs {
  overflow-x: auto;
  scrollbar-width: none;
}

.team-tabs::-webkit-scrollbar { display: none; }

.team-tabs .detail-tabs__tab { flex: none; }

.team-page__body {
  width: 378px;
  max-width: calc(100% - 24px);
  margin: 0 auto;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-page__news { padding-top: 24px; }

/* Team and player page header (Figma 789:4739): toolbar, hero row and tabs 24px apart, split
   so the toolbar (status + 44 + 24) and the tab row stick while the hero row scrolls away */
.page-bar {
  position: sticky;
  top: 0;
  z-index: 4; /* above the tab row, so the "more" menu can drop over it */
  padding: var(--status-h) 0 24px;
  background: var(--header);
}

.page-bar .team-toolbar { position: relative; }

.page-bar .toolbar__more { right: 16px; }

.page-hero {
  box-sizing: content-box;
  padding-bottom: 24px;
  background: var(--header);
}

/* The photo or logo fades as the row scrolls under the toolbar (the text flies up instead) */
.page-hero .player-head__photo,
.page-hero .team-head__logo { opacity: calc(1 - var(--collapse, 0) * 1.25); }

.team-page .page-tabs {
  position: sticky;
  top: calc(var(--status-h) + 68px);
  z-index: 3;
  padding-bottom: 18px;
  background: var(--header);
}

/* Every tab can scroll far enough to collapse the header */
.team-page > .team-page__body:last-child,
.team-page > .team-page__news:last-child { min-height: calc(100% - var(--status-h) - 104px); }

.page-bar__title {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}

.page-bar__name {
  font-weight: 700;
  font-size: 15px;
  line-height: 18px;
}

.page-bar__sub {
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  color: var(--text-2);
}

.team-card {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.team-card--match { gap: 14px; }

.team-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.team-card__head--split { justify-content: space-between; }

.team-card--matches { gap: 18px; }

.team-match__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.team-match__when {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 10px;
  color: var(--muted);
}

.team-match {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.team-match__side {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

.team-match__side span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-match__side--away { justify-content: flex-start; }

.team-match__logo {
  flex: none;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.team-match__time,
.team-match__score {
  width: 34px;
  font-weight: 800;
  font-size: 12px;
  text-align: center;
  color: var(--muted);
}

.team-match__score {
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-size: 14px;
}

.team-match__score {
  align-items: center;
  gap: 4px;
}

.team-match__score small {
  font-size: 10px;
  color: var(--muted);
}

.team-players {
  display: flex;
  justify-content: space-between;
}

[data-team-goto] { cursor: pointer; }

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

.team-player__name {
  height: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 12px;
}

.team-players--start { justify-content: flex-start; }

/* Roster tab (Figma 772:3423): Players and Coach cards side by side; Players takes the room
   left after the Coach card, which is as wide as one person */
.team-roster {
  display: flex;
  gap: 12px;
}

.team-roster > .team-card:first-child { flex: 1; min-width: 0; }

.team-roster__coach { flex: none; }

/* Former players: a plain row below the cards, as in Figma */
.team-former {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.team-former__title {
  font-weight: 700;
  font-size: 13px;
}

.team-players--former {
  justify-content: flex-start;
  gap: 44px;
}

/* A former player's current team */
.team-player__badge {
  width: 16px;
  height: 16px;
  border-radius: 12px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
}

.team-player__badge img {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

.team-form {
  display: flex;
  gap: 12px;
}

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

.team-form__score {
  width: 36px;
  color: #fff;
  padding: 2px 4px;
  border-radius: 2px;
  font-weight: 800;
  font-size: 12px;
  text-align: center;
}

.team-form__score--win { background: var(--win-fill); }
.team-form__score--loss { background: var(--loss-fill); }

.team-form__logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.team-earnings {
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

/* A year's total on the Achievements tab */
.team-earnings--year { color: var(--text); }

.team-earnings b {
  margin-right: 6px;
  font-weight: 700;
}

.team-results {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-results li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Player Overview: teams the player has left, newest first */
.former-teams {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.former-teams li > * {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 13px;
}

/* Teams past the first 5 expand downward under "Show more" */
.former-teams__more {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -24px; /* cancels the card's 24px gap while closed */
  transition: grid-template-rows 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), margin-top 0.3s;
}

.former-teams__more.is-open {
  grid-template-rows: 1fr;
  margin-top: -12px; /* rows sit 12px apart, like the list above */
}

.former-teams__more > div { overflow: hidden; }

.former-teams__toggle {
  align-self: center;
  margin: -16px 0 -8px;
  padding: 4px 12px;
}

/* chevron-right.svg turned to point down; up once the list is open */
.former-teams__toggle img {
  transform: rotate(90deg);
  transition: transform 0.25s;
}

.former-teams__toggle[aria-expanded="true"] img { transform: rotate(-90deg); }

.former-teams__toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .former-teams__more { transition: none; }
}

.former-teams__badge {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: rgba(var(--tint), 0.06);
  display: grid;
  place-items: center;
}

.former-teams__badge img {
  max-width: 20px;
  max-height: 20px;
  object-fit: contain;
}

.former-teams__badge--light { background: var(--logo-tile-light); }

.former-teams__badge--initial {
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
}

.former-teams__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.former-teams__years {
  flex: none;
  margin-left: auto;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Placing chips: a soft tint with bright text in the tier's colour */
.team-results__place {
  flex: none;
  width: 72px;
  padding: 3px 4px;
  white-space: nowrap;
  border-radius: 6px;
  font-weight: 800;
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.team-results__place--gold { background: rgba(255, 196, 0, 0.16); color: var(--place-gold); }
.team-results__place--silver { background: rgba(205, 215, 230, 0.14); color: var(--place-silver); }
.team-results__place--bronze { background: rgba(214, 132, 60, 0.18); color: var(--place-bronze); }
.team-results__place--top { background: rgba(2, 199, 101, 0.14); color: var(--place-top); }
.team-results__place--rest { background: rgba(var(--tint), 0.06); color: var(--muted); }

.team-results__prize {
  flex: none;
  margin-left: auto;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.team-card--total {
  gap: 4px;
  align-items: flex-start;
}

.team-total__label {
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
}

.team-total__value {
  font-weight: 900;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}

.team-total__sub {
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
}

.team-results__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 12px;
}

/* ---------- Player page (Figma 777:3667) ---------- */

.player-head__photo {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--avatar-bg);
}

/* Cut-out photos cropped to head and shoulders, as on the Teams tab */
.player-head__photo.avatar__crop {
  position: relative;
  overflow: hidden;
}

.player-head__photo.avatar__crop img {
  position: absolute;
  top: 2px;
  left: 50%;
  height: 106px;
  max-width: none;
  transform: translateX(-50%);
}

.player-head__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.player-head__team {
  padding: 4px 8px;
  border-radius: 11px;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
}

.player-head__team img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.player-info { gap: 14px; }

.player-info__row {
  display: flex;
  justify-content: space-between;
}

.player-info__cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.player-info__value {
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.player-info__flag {
  width: 16px;
  height: 16px;
  border-radius: 11px;
  object-fit: cover;
}

/* The blast.tv rating chip, coloured by tier as on the Teams tab avatars */
.player-info__rating {
  height: 18px;
  padding: 0 8px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 12px;
  color: #000;
}

.player-info__label {
  font-weight: 600;
  font-size: 10px;
  color: var(--muted);
}

.team-players--mates {
  justify-content: flex-start;
  gap: 33px;
}

.player-settings {
  display: flex;
  gap: 24px;
}

.player-settings__pill {
  flex: 1 1 0;
  padding: 4px 8px;
  border-radius: 11px;
  background: var(--surface-2);
  font-weight: 700;
  font-size: 13px;
  transition: background 0.15s;
}

.player-settings__pill:hover { background: var(--surface-2-hover); }

/* Player Settings tab: rows of a small label over a value pill */
.settings { gap: 24px; }

.settings + .settings { margin-top: 0; }

.settings__row {
  margin-top: -12px; /* rows sit 12px apart; the card's 24px gap is for the title */
  display: flex;
  gap: 8px;
}

.settings__row:first-of-type { margin-top: 0; }

.settings__item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.settings__label {
  max-width: 64px;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  color: var(--muted);
}

.settings__value {
  width: 100%;
  padding: 4px 4px;
  border-radius: 11px;
  background: var(--surface-2);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings__button {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

/* Control buttons (Figma Frames 138-140) in the shared glass finish */
.settings__value--control,
.settings__button {
  --glass-light: 0.5;
  position: relative;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-frost);
  backdrop-filter: var(--glass-frost);
  box-shadow: var(--glass-shadow-sm);
}

.settings__button--xbox {
  font-weight: 900;
  font-size: 12px;
}

.settings__empty {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.settings__updated {
  margin: 0;
  font-weight: 500;
  font-size: 10px;
  text-align: center;
  color: var(--muted);
}

/* ---------- Following (Figma 762:1429) ---------- */

.following__tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.glass-circle--text {
  width: auto;
  padding: 0 16px;
  font-weight: 800;
  font-size: 14px;
}

.following__body { padding: 45px 12px 0; }

.follow-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* One followed team or player, filled with the team colour (set inline) */
.follow-row {
  height: 70px;
  padding: 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.follow-row__who {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 20px;
  white-space: nowrap;
}

.follow-row__logo {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}

.follow-row__logo img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.follow-row__logo .follow-row__flag {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.follow-row__team {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}

.follow-row__team img {
  max-width: 24px;
  max-height: 24px;
}

.follow-row .avatar { flex: none; }

/* Team rows open the team page: an invisible link covers the row */
.follow-row--link { position: relative; }

.follow-row__link {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* The 49px photo sits 10.5px from the top and bottom of the 70px row; match that on the
   left (the avatar box already insets the photo by 5px) */
/* Player cards (followed and recommended): the photo sits 10.5px from the edge, as from the top */
.follow-row--player,
.follow-row--person { padding-left: 5.5px; }

/* Followed players: white cards with a subtle gradient (white at the top-left to a pearl grey),
   dark text in both themes, like the team rows' bold fills */
.follow-row--player {
  background: linear-gradient(135deg, #ffffff, #f4f4f6 55%, #e4e4e9);
  color: #121314;
}

.follow-row--player .follow-row__age { color: #5c5c62; }
.follow-row--player .avatar__crop,
.follow-row--player .avatar__photo { background: #dcdce1; }

/* Team logos on the white card get a fine dark edge so light ones (Vitality's yellow) hold up;
   white logos turn black */
.follow-row--player .follow-row__team img { filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.55)); }
.follow-row--player .follow-row__team img.logo--white { filter: brightness(0); }

.follow-row__name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 700;
  font-size: 16px;
}

/* ---------- Following: edit mode ---------- */

.follow-empty {
  font-size: 13px;
  color: var(--muted);
}

/* The − only shows while editing */
.follow-row__remove { display: none; }

.is-editing .follow-suggest { display: none; }

/* Followed cards stop opening their page and jiggle a little, each slightly out of step */
.is-editing .follow-row {
  position: relative;
  animation: follow-jiggle 0.14s ease-in-out infinite alternate;
}

.is-editing .follow-row:nth-child(2n) { animation-delay: -0.07s; animation-duration: 0.16s; }
.is-editing .follow-row:nth-child(3n) { animation-delay: -0.04s; animation-duration: 0.13s; }

.is-editing .follow-row__link { pointer-events: none; }

.is-editing .follow-row__remove {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 3;
  --glass-light: 0.5;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* liquid glass, like the app's other glass buttons */
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-frost);
  backdrop-filter: var(--glass-frost);
  box-shadow: var(--glass-shadow-sm);
  display: grid;
  place-items: center;
}

/* The minus is drawn rather than typed, so it sits dead centre in the bubble */
.follow-row__remove::before {
  content: "";
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--text);
}

@keyframes follow-jiggle {
  from { rotate: -0.8deg; }
  to { rotate: 0.8deg; }
}

@media (prefers-reduced-motion: reduce) {
  .is-editing .follow-row { animation: none; }
}

/* Recommended: plain cards under the followed list, each with a reason and a Follow button */
.follow-suggest {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.follow-suggest__title {
  font-weight: 800;
  font-size: 16px;
}

.follow-row--suggest { background: var(--surface); }

.follow-row--suggest .follow-row__who { min-width: 0; }

.follow-row__logo--suggest {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}

.follow-row__logo--suggest img {
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}

.follow-row__why {
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Followed teams use the Recommended layout on their own colour: the subtitle takes the row's
   text colour, slightly dimmed, instead of grey */
.follow-row--team .follow-row__why {
  color: inherit;
  opacity: 0.8;
}

/* Sits above the card's link, so it follows instead of opening the page */
.follow-row__follow {
  position: relative;
  z-index: 1;
  flex: none;
}

.follow-row__age {
  font-weight: 500;
  font-size: 14px;
  color: var(--muted);
}

.follow-row img.is-white { filter: brightness(0) invert(1); }
.follow-row img.is-black { filter: brightness(0); }

/* ---------- Match detail ---------- */

.home,
.news {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Match, team and player pages stack (app.js keeps the order): the top page is open, any
   under it ease left and wait, and so does the tab view underneath them all */
.has-page .home,
.has-page .news,
.detail.is-behind,
.team-page.is-behind {
  transform: translateX(-30%);
}

.detail.is-open,
.team-page.is-open { transform: none; }

.pages-instant .detail,
.pages-instant .team-page,
.pages-instant .home,
.pages-instant .news { transition: none; }

/* The main nav stays put on every screen, above the match detail sliding in */
.tabbar { z-index: 6; }

.detail {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow-x: hidden; /* clips tab panels while they slide */
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: calc(120px + var(--chrome-b)); /* clears the tab bar */
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.detail::-webkit-scrollbar { display: none; }


/* Collapsing header: the bar (toolbar) and tab row stick; the hero between them
   scrolls under the bar. --collapse runs 0 → 1 as the hero scrolls away. */
.detail__bar {
  position: sticky;
  top: 0;
  z-index: 4; /* above the tab row, so the "more" menu can drop over it */
  padding: var(--status-h) 0 24px;
  background: var(--header);
}

.detail__tabs {
  position: sticky;
  top: calc(var(--status-h) + 68px); /* bar height: status + 44 + 24 */
  z-index: 3;
  padding-bottom: 18px;
  background: var(--header);
}

.toolbar {
  position: relative;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toolbar__end {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.glass-pill--tools { padding: 4px; }

/* Collapsing headers are scroll-linked (app.js collapseHeader): the tool pill shrinks into
   this button and the score or name flies up into the toolbar. These are the resting
   (expanded) states; the script takes over from the first pixel of scroll. */
.toolbar__more {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
}

.toolbar__more img { transform: rotate(-90deg); }

/* Mid-collapse the shrinking tool pill is this button's glass; only the icon shows */
.toolbar__more.is-merging {
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.toolbar__more.is-merging::after { display: none; }

.mini-score {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2; /* flies over the shrinking tool pill */
  pointer-events: none; /* its 101px logo slots overlap the Back and More buttons */
  opacity: 0;
  transform: translate(-50%, -50%);
}

.mini-score .logo,
.mini-score__center,
.page-bar__name,
.page-bar__sub { transform-origin: center; }

.mini-score__team {
  width: 101px;
  display: flex;
}

.mini-score__team--home { justify-content: flex-end; }

.mini-score__center {
  height: 27px;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 20px;
  white-space: nowrap;
}

.mini-score__dash { color: var(--muted); }

/* Collapsed header fill (Figma 739:1347): #161616 at the top fading to 95% at the bottom
   of the 171px header. Split across the bar (0–135px) and the tab row (135–171px). */
.is-collapsed .detail__bar {
  background: linear-gradient(var(--header), var(--header-a96));
}

.is-collapsed .detail__tabs {
  background: linear-gradient(var(--header-a96), var(--header-a95));
}

/* "More" menu from a collapsed header (Figma 789:4914 rows, iOS context-menu finish):
   opens out of the "..." button's corner as a dark, heavily frosted panel with a soft rim */
.more-menu {
  --glass-light: 0.5;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  padding: 10px 32px 10px 26px;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-frost);
  backdrop-filter: var(--glass-frost);
  box-shadow: var(--glass-shadow);
  transform-origin: top right;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.6);
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.2s;
}

.more-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.page-bar .more-menu { right: 16px; }

.more-menu__item {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 500;
  font-size: 17px;
  white-space: nowrap;
  text-align: left;
}

.more-menu__icon {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

.more-menu__label__on,
.more-menu__item.is-on .more-menu__label__off { display: none; }
.more-menu__item.is-on .more-menu__label__on { display: inline; }

.more-menu__item.is-on .icon-btn__off { display: none; }
.more-menu__item.is-on .icon-btn__on { display: block; }

/* Follow / alerts: outlined while off, filled once on */
.icon-btn__on,
.icon-btn.is-on .icon-btn__off { display: none; }
.icon-btn.is-on .icon-btn__on { display: block; }

.detail__hero {
  padding-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  background: var(--header);
}

/* Only the hero's contents fade and shrink while collapsing; its background stays solid */
.detail__hero > * {
  opacity: calc(1 - var(--collapse, 0) * 1.25);
  transform: scale(calc(1 - var(--collapse, 0) * 0.08));
}

.logo {
  flex: none;
  object-fit: contain;
}

.hero {
  height: 73px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
}

.hero__team {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}

.hero__center {
  min-width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  white-space: nowrap;
}

.hero__score {
  font-size: 40px;
  line-height: normal;
}

.hero__meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
}

.hero__day { color: var(--text); }

.series-bar {
  padding: 0 46px;
  display: flex;
  gap: 10px;
}

.series-bar__seg {
  flex: 1;
  height: 6px;
  border-radius: 16px;
  background: rgba(var(--tint), 0.2);
}

.series-bar--upcoming .series-bar__seg { background: var(--seg-idle); }

.series-bar__seg--current {
  background: rgba(var(--tint), 0.9);
  box-shadow: 0 0 4px 1px rgb(var(--tint));
  animation: pulse 1.4s ease-in-out infinite;
}

.detail-tabs {
  padding: 0 16px;
  display: flex;
  gap: 18px;
}

.detail-tabs__tab {
  font-weight: 900;
  font-size: 15px;
  color: var(--muted);
  transition: color 0.2s;
}

.detail-tabs__tab.is-active { color: var(--text); }

.detail__body {
  /* tall enough that every tab can scroll the header into its collapsed state */
  min-height: calc(100% - var(--status-h) - 104px);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.detail__body--teams { padding-top: 0; }

/* Bracket tab (Figma 202:5617): round chips, then upper and lower brackets in one
   horizontally scrolling canvas. Cards are placed by detail.js (200 × 92, 14px apart). */
.bracket {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The round chips stick just below the pinned header (bar + tabs end at 171px), floating
   on their own rather than joining the header; each chip has a frosted backing so it stays
   readable over the bracket scrolling underneath */
.bracket__chips {
  position: sticky;
  top: calc(var(--status-h) + 116px);
  z-index: 2;
  padding: 0 12px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.bracket__chips::-webkit-scrollbar { display: none; }

.bracket__chip {
  --glass-light: 0.5;
  position: relative;
  flex: none;
  padding: 6px 12px;
  border-radius: 15px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-frost);
  backdrop-filter: var(--glass-frost);
  box-shadow: var(--glass-shadow-sm);
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
  transition: background 0.2s;
}

.bracket__chip.is-active { background: linear-gradient(rgba(var(--tint), 0.2), rgba(var(--tint), 0.2)), var(--glass-fill); }

/* The grand final in volt, like its match card; selected, the glass takes a faint volt fill */
.bracket__chip--final { color: var(--volt-ink); }

.bracket__chip--final.is-active { background: linear-gradient(rgba(206, 255, 0, 0.18), rgba(206, 255, 0, 0.18)), var(--glass-fill); }

.bracket__scroll {
  overflow-x: auto;
  scrollbar-width: none;
}

.bracket__scroll::-webkit-scrollbar { display: none; }

/* Both brackets on one board; titles stay in flow so they can stick to the left edge
   while the bracket scrolls sideways. Their 14px height is mirrored in detail.js. */
.bracket__board {
  position: relative;
  flex: none;
}

.bracket__title {
  position: sticky;
  left: 12px;
  z-index: 1;
  width: fit-content;
  height: 14px;
  margin-left: 12px;
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
}

.bracket__lines {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.bracket__lines path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

/* A loser dropping into the lower bracket */
.bracket__lines .bracket__drop {
  stroke: var(--line-soft);
  stroke-dasharray: 3 3;
}

/* One match card */
.bm {
  position: absolute;
  width: 200px;
  height: 92px;
  padding: 8px 12px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface);
  transition: background 0.15s;
}

.bm:hover { background: var(--surface-hover); }

/* The match this screen is about */
.bm.is-current { box-shadow: inset 0 0 0 1px rgba(var(--tint), 0.35); }

.bm__team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bm__name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 12px;
}

.bm__name span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bm__score {
  flex: none;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.bm__team.is-loser .bm__name,
.bm__team.is-loser .bm__score { color: var(--muted); }

/* Knocked out of the event */
.bm__team.is-out .bm__name span { text-decoration: line-through; }

.bm__mid {
  min-height: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.bm__line {
  flex: 1;
  height: 1px;
  background: var(--surface-2);
}

.bm__when {
  font-weight: 500;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* The grand final, in the volt gradient (matches the case study's bracket) */
.bm.bm--final { background: linear-gradient(104deg, #a8d400 9%, #e2ff5c 93%); color: #000; }
.bm.bm--final:hover { background: linear-gradient(104deg, #b4e000 9%, #eaff7a 93%); }
.bm.bm--final.is-current { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.bm--final .bm__team.is-loser .bm__name,
.bm--final .bm__team.is-loser .bm__score { color: rgba(0, 0, 0, 0.5); }
.bm--final .bm__when { color: #4d6100; }
.bm--final .bm__round { font-size: 11px; font-weight: 700; white-space: nowrap; }
/* No room for the divider between the label and the date: drop it so the date clears the edge */
.bm--final .bm__mid { justify-content: space-between; gap: 8px; }
.bm--final .bm__line { display: none; }
.bm--final img.logo[src*="tbd"] { filter: brightness(0); opacity: 0.4; }
.bm--final img.logo--white { filter: brightness(0); }

.detail__placeholder {
  padding: 48px 16px;
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
  text-align: center;
}

/* Games carousel */

.games {
  width: 100%;
  padding: 0 12px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding: 0 12px;
  scrollbar-width: none;
}

.games::-webkit-scrollbar { display: none; }

.game {
  flex: 0 0 197px;
  height: 74px;
  padding: 12px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background: var(--surface);
  scroll-snap-align: start;
}

.game__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
}

/* Long map names end in "…" rather than running off the card */
.game__top > span:first-child { flex: none; }

.game__map {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
}

.game__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.game__logo {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

.game__logo.is-dim { opacity: 0.5; }

.game__center {
  width: 47px;
  display: flex;
  justify-content: center;
}

/* "OT" sits just above the game sheet's score, so the score stays level with the logos */
.gsheet__ot {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.game__score {
  font-weight: 800;
  font-size: 14px;
}

/* Each game is a button that opens its card in the game sheet */
.game { transition: background 0.15s; }
.game:hover { background: var(--surface-2); }
.game:active { background: var(--surface-2-hover); }
.game:focus-visible { outline: 2px solid var(--volt-ink); outline-offset: -2px; }

/* Cards */

.card {
  width: 378px;
  max-width: calc(100% - 24px);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.card__head {
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card__head--flush { padding: 0; }

.card__title {
  flex: 1;
  font-weight: 900;
  font-size: 14px;
  line-height: normal;
}

.card__aside,
.card__sub {
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.card--vote {
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vote {
  height: 32px;
  padding: 0 12px;
  display: flex;
  gap: 12px;
}

/* No side padding, so each option's width is exactly its share of the row */
.vote__option {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 0;
  border: 0.2px solid var(--team);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  transition: flex-grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s, box-shadow 0.2s;
}

.vote__option:disabled {
  cursor: default;
  color: inherit;
}

.vote__option > span { animation: fade-in 0.3s ease; }

@keyframes fade-in {
  from { opacity: 0; }
}

.vote__option .is-leading { font-weight: 800; }

.vote__option.is-picked {
  background: color-mix(in srgb, var(--team) 18%, transparent);
  box-shadow: inset 0 0 0 1px var(--team);
}

.card--venue {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.venue__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.venue__place {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.venue__place > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.venue__map {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--surface-2);
  transition: background 0.15s;
}

.venue__map:hover { background: var(--surface-2-hover); }

/* Hairline between the arena and its facts */
.venue__facts {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.venue__facts div {
  display: flex;
  gap: 6px;
}

.venue__facts dt { font-weight: 700; }

.venue__facts dd {
  margin: 0;
  font-weight: 500;
}

/* Stakes: what winning and losing the match leads to */
.card--stakes {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stakes__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.stakes__label {
  flex: none;
  width: 44px;
  padding: 3px 0;
  border-radius: 6px;
  font-weight: 800;
  font-size: 11px;
  text-align: center;
}

.stakes__label--win { background: rgba(2, 199, 101, 0.18); color: var(--accent-text); }
.stakes__label--lose { background: rgba(208, 37, 52, 0.2); color: var(--lose-text); }

.stakes__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stakes__title {
  font-weight: 700;
  font-size: 13px;
}

.stakes__text .card__sub { white-space: normal; }

.stakes__group {
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

/* Live odds: series-winner prices in team colours, laid out like the poll */
.card--odds {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* The sportsbook's app icon, at the card head's right */
.odds__book {
  margin-left: auto;
  border-radius: 5px;
}

.odds__picks {
  display: flex;
  gap: 12px;
}

.odds__pick {
  flex: 1 1 0;
  padding: 6px 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  /* A faint team-colour fill (no outline) sets the odds apart from the poll above */
  background: color-mix(in srgb, var(--team) 15%, transparent);
  transition: background 0.15s;
}

.odds__pick b {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.card--odds:hover .odds__pick { background: color-mix(in srgb, var(--team) 25%, transparent); }

/* H2H: the all-time series record, then a bar split by win percentage in team colours */
.card--h2h {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.h2h__record {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.h2h__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.h2h__logo {
  height: 32px;
  display: grid;
  place-items: center;
}

.h2h__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 12px;
}

.h2h__score {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
}

.h2h__score i {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
}

.h2h__wins { font-weight: 500; color: var(--muted); }
.h2h__wins.is-leading { color: var(--text); }

.h2h__bar {
  height: 8px;
  display: flex;
  gap: 4px;
}

.h2h__bar span {
  flex-basis: 0;
  border-radius: 4px;
  background: var(--team);
}

/* Every meeting, in the rows of a team's Results card */
.card--h2h-matches {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* On the light card a white team colour (Gentle Mates) would vanish: give each side a hairline */
[data-theme="light"] .h2h__bar span { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); }

.h2h__pcts {
  margin-top: -8px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.h2h__pcts span:nth-child(2) {
  font-weight: 500;
  color: var(--muted);
}

.card--schedule {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule__row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.pill {
  padding: 2px 8px;
  border-radius: 24px;
  background: var(--pill);
  font-weight: 500;
  font-size: 13px;
}

.card--watch {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.watch__dot {
  width: 8px;
  height: 8px;
  border-radius: 16px;
  background: var(--dot-idle);
}

.watch__dot.is-live {
  background: rgba(16, 244, 0, 0.76);
  box-shadow: 0 0 4px 1px #13c107;
  animation: pulse 1.4s ease-in-out infinite;
}

.watch {
  display: flex;
  gap: 12px;
}

.watch__btn {
  flex: 1;
  color: #fff; /* on brand red and purple in both themes */
  min-width: 0;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
  font-size: 13px;
}

.watch__btn--youtube { background: #d10000; }
.watch__btn--twitch  { background: #9201e0; }
.watch__btn--tiktok  { background: #e1e1e1; color: #000; }

.is-ended .watch__btn { background: #ebebeb; } /* brand-coloured text on it: 4.7:1 and up */
.is-ended .watch__btn--youtube { color: #d10808; }
.is-ended .watch__btn--twitch  { color: #9201e0; }

.highlights {
  width: 378px;
  color: #fff; /* over the darkened thumbnail in both themes */
  max-width: calc(100% - 24px);
  height: 181px;
  padding: 14px 12px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Figma darkens the thumbnail with a soft conic overlay; approximated with linear stops */
  background:
    linear-gradient(100deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.55) 100%),
    var(--thumb, url(assets/highlights-thumb.jpg)) center / cover;
}

.highlights__url {
  font-weight: 700;
  font-size: 12px;
  color: #e1e1e1;
}

.highlights__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.highlights__time {
  padding: 1px 6px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.2);
  font-weight: 700;
  font-size: 13px;
}

/* Insights (Figma 756:986): each team's logo beside its facts, edged in the team colour */
.card--insights {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.insights__team {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.insights__logo {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}

.insights__list {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.insights__fact {
  padding: 4px 12px;
  border-left: 3px solid var(--team);
  border-radius: 4px;
  font-weight: 500;
  font-size: 13px;
}

.card--form {
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card--form .card__title { padding: 0 12px; }

.form {
  padding: 0 12px;
  display: flex;
  justify-content: space-between;
}

.form__col {
  width: 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.form__logo {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

.form__score {
  width: 36px;
  color: #fff;
  padding: 2px 4px;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  gap: 2px;
  font-weight: 800;
  font-size: 12px;
}

.form__score i { font-style: normal; }
.form__score--win  { background: var(--win-fill); }
.form__score--loss { background: var(--loss-fill); }

/* The Figma dividers are horizontal 1px line SVGs drawn with preserveAspectRatio="none",
   so stretching them into a 1px-wide box turns them vertical */
.form__divider,
.coaches__divider {
  flex: none;
  width: 1px;
  align-self: stretch;
  background: url(assets/form-divider.svg) center / 100% 100% no-repeat;
}

.coaches__divider { background-image: url(assets/coach-divider.svg); }

/* Teams tab */

.teams {
  width: 378px;
  max-width: calc(100% - 24px);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lineup__head {
  display: flex;
  justify-content: space-between;
}

.lineup__team {
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.lineup__logo {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

.pitch {
  padding: 14px 0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--surface);
}

.lineup__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px;
}

/* 243×45 pitch markings, rotated upright inside an 11px-wide slot */
.pitch__lines {
  flex: none;
  margin: 0 -116px;
  transform: rotate(90deg);
}

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

.avatar {
  position: relative;
  width: 59px;
  height: 49px;
}

.avatar__photo {
  position: absolute;
  left: 5px;
  top: 0;
}

/* Scraped photos are full-body cutouts: scale up and crop to head and shoulders */
.avatar__crop {
  width: 49px;
  height: 49px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--avatar-bg);
}

.avatar__crop img {
  position: absolute;
  top: 2px;
  left: 50%;
  height: 104px;
  max-width: none;
  transform: translateX(-50%);
}

.avatar__flag {
  position: absolute;
  left: 38px;
  top: 33px;
  width: 16px;
  height: 16px;
  border-radius: 11px;
  object-fit: cover;
}

/* Anchored on its left edge; grows to the right with the text */
.avatar__rating {
  position: absolute;
  top: -3px;
  left: 36px;
  min-width: 25px;
  padding: 0 5px;
  white-space: nowrap;
  height: 16px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 10px;
  color: #000;
}

.person__name {
  height: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
}

.person__badge {
  width: 16px;
  height: 16px;
  padding: 1px 2px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
}

.person__badge img { object-fit: contain; }

.teams__title {
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 13px;
}

.teams__title--former { margin-bottom: 24px; }

.coaches {
  padding: 14px 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 68px;
  background: var(--surface);
}

.coaches .person { width: 66px; }

.person--empty {
  font-weight: 500;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

.former {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

/* ---------- Toast (marks screens not built yet) ---------- */

.toast {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: calc(110px + var(--chrome-b));
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 100px;
  background: var(--toast-bg);
  border: 0.2px solid var(--hairline);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Profile photo viewer ---------- */

/* A tapped profile photo, enlarged over the page behind a frosted backdrop */
.photo-viewer {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: var(--viewer-bg);
  -webkit-backdrop-filter: var(--glass-frost);
  backdrop-filter: var(--glass-frost);
  cursor: zoom-out;
}

.photo-viewer__circle {
  position: relative;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--viewer-circle);
}

.photo-viewer__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cut-out photos keep the same head-and-shoulders crop as the small avatar, so the
   picture grows without jumping (the avatar shows its image at 2.12x the circle) */
.photo-viewer__circle.is-cutout img {
  position: absolute;
  top: 4%;
  left: 50%;
  width: auto;
  height: 212%;
  max-width: none;
  object-fit: initial;
  transform: translateX(-50%);
}

[data-photo-zoom] { cursor: zoom-in; }

/* ---------- Light theme: images ---------- */

/* UI icons are white SVGs drawn for the dark theme; in light they render black. Brand marks on
   their own coloured buttons (YouTube, Twitch), the already-coloured icons and team logos stay. */
[data-theme="light"] img[src^="assets/"][src$=".svg"]:not([src^="assets/blast/"]):not([src*="youtube-icon"]):not([src*="twitch-icon"]):not([src*="location-on"]):not([src*="sports-soccer"]):not([src*="divider"]):not([src*="tbd"]):not([src*="chevron-right"]) {
  filter: brightness(0);
}

/* Dark divider strokes and the TBD placeholder flip to their light equivalents */
[data-theme="light"] img[src*="divider"],
[data-theme="light"] img[src*="tbd.svg"] { filter: invert(1); }

/* White team logos (classified on load by app.js) turn black on light surfaces, except on the
   Following tab's coloured rows, which keep their own logo treatment */
[data-theme="light"] img.logo--white { filter: brightness(0); }
[data-theme="light"] .follow-row img.logo--white { filter: none; }
[data-theme="light"] .follow-row img.is-white { filter: brightness(0) invert(1); }
[data-theme="light"] .follow-row img.is-black { filter: brightness(0); }

/* ---------- Appearance menu (Home's menu button) ---------- */

.home-menu { position: relative; }

.more-menu__heading {
  padding: 8px 0 2px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A check marks the chosen appearance */
.more-menu__check {
  flex: none;
  width: 24px;
  font-weight: 800;
  color: var(--volt-ink);
  visibility: hidden;
}

.more-menu__item[aria-checked="true"] .more-menu__check { visibility: visible; }

/* ---------- Events (Figma 805:5328) ---------- */

/* Below the header: Following, then All Competitions, 36px apart */
.events__body {
  position: relative;
  z-index: 0; /* an unfollowed card fades out beneath the list (animateEvents) */
  padding: 36px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

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

.events__title {
  font-weight: 900;
  font-size: 14px;
}

.events__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.events__empty {
  font-size: 13px;
  color: var(--muted);
}

/* One competition: badge, name, and in All Competitions a Follow button */
.event-row {
  min-height: 56px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 12px;
}

.event-row[data-todo] { cursor: pointer; }

.event-row__name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 14px;
}

.event-row .team-follow { flex: none; }

/* A followed competition's button is a grey chip with volt text */
.event-row .team-follow.is-on {
  border-color: var(--chip);
  background: var(--chip);
  color: var(--volt-ink);
}

/* Light theme: a deeper olive so the text holds 4.5:1 on the light grey chip */
[data-theme="light"] .event-row .team-follow.is-on { color: #465f00; }

/* Every competition badge sits centred in a 32px slot, wide enough for the wordmarks; the
   cropped 24px badges keep their size */
.event-row__badge {
  flex: none;
  width: 32px;
  display: grid;
  place-items: center;
}

.comp-icon--wordmark {
  width: 32px;
  display: grid;
  place-items: center;
}

.comp-icon--wordmark img {
  width: 32px;
  max-width: none;
  height: auto;
}

/* Full-colour crests stand 20px tall at most, to sit with the cropped 24px badges */
.comp-icon--crest {
  width: 32px;
  height: 24px;
  display: grid;
  place-items: center;
}

.comp-icon--crest img {
  max-width: 24px;
  max-height: 20px;
  width: auto;
  height: auto;
}

/* ---------- Calendar sheet ---------- */

/* Rises from the bottom over a dimmed screen; the months scroll under a frosted header */
.cal {
  position: absolute;
  inset: 0;
  z-index: 30;
}

.cal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.35s;
}

.cal__sheet {
  position: absolute;
  top: max(12px, calc(var(--status-h) - 40px));
  left: 8px;
  right: 8px;
  bottom: 8px;
  overflow: hidden;
  border-radius: 40px;
  background: var(--surface);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
  transform: translateY(105%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cal.is-open .cal__backdrop { opacity: 1; }
.cal.is-open .cal__sheet { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cal__backdrop, .cal__sheet { transition: none; }
}

.cal__head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding-top: 16px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--hairline);
}

.cal__bar {
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cal__close { color: var(--text); }

.cal__today {
  height: 44px;
  padding: 0 20px;
  border-radius: 100px;
  background: var(--volt);
  color: #000;
  font-weight: 800;
  font-size: 16px;
}

.cal__weekdays,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 8px;
}

.cal__weekdays {
  padding-block: 18px 12px;
  font-weight: 800;
  font-size: 12px;
  text-align: center;
}

.cal__months {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 106px 0 32px; /* the header's height: 16 + 44 + 18 + 15 + 12, plus its hairline */
}

.cal__months::-webkit-scrollbar { display: none; }

.cal__month { padding-bottom: 24px; }

.cal__title {
  padding: 8px 24px 16px;
  font-weight: 900;
  font-size: 24px;
}

.cal__grid { row-gap: 6px; }

/* A day: its number in a 40px circle; a dot under it when it has matches */
.cal__day {
  position: relative;
  justify-self: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: 500;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s;
}

.cal__day:not(:disabled):hover { background: var(--surface-2); }

/* Days outside September can't be picked */
.cal__day:disabled {
  color: var(--muted);
  opacity: 0.45;
  cursor: default;
}

.cal__day.has-matches::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--muted);
}

.cal__day.is-today {
  color: var(--volt-ink);
  font-weight: 800;
}

.cal__day.is-selected {
  background: var(--text);
  color: var(--surface);
  font-weight: 800;
}

.cal__day.is-selected.has-matches::after { background: var(--surface); }

.cal__day:focus-visible,
.cal__today:focus-visible {
  outline: 2px solid var(--volt-ink);
  outline-offset: 2px;
}

/* ---------- Player sheet (FotMob-style quick look from a match's Teams tab) ---------- */

button.person { padding: 0; }
button.person:focus-visible { outline: 2px solid var(--volt-ink); outline-offset: 4px; border-radius: 12px; }

.psheet {
  position: absolute;
  inset: 0;
  z-index: 30;
}

.psheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.35s;
}

.psheet__sheet {
  position: absolute;
  top: max(12px, calc(var(--status-h) - 40px));
  left: 0;
  right: 0;
  bottom: 8px;
  overflow: hidden;
  transform: translateY(105%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  touch-action: pan-y; /* the browser scrolls; sideways swipes and pull-down are in app.js */
}

/* Cards in a row; the current one sits in the middle with 12px of each neighbour showing */
.psheet__track {
  height: 100%;
  display: flex;
  gap: 8px; /* PSHEET_GAP in app.js */
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.psheet__card {
  position: relative;
  flex: none;
  width: calc(100% - 40px);
  height: 100%;
  overflow: hidden;
  border-radius: 40px;
  background: var(--surface);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
  /* Neighbours shrink towards the middle card, so their edge still shows */
  transform: scale(0.94);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.psheet__card.is-before { transform-origin: right center; }

.psheet__card.is-current { transform: none; }

.psheet.is-open .psheet__backdrop { opacity: 1; }
.psheet.is-open .psheet__sheet { transform: none; }
.psheet__sheet.is-dragging,
.psheet__sheet.is-dragging .psheet__track { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .psheet__backdrop, .psheet__sheet, .psheet__track, .psheet__card { transition: none; }
}

.psheet__scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: none; /* no bounce, so pulling down at the top never shows what's behind */
  scrollbar-width: none;
  padding-bottom: 110px; /* room under the floating buttons */
}

.psheet__scroll::-webkit-scrollbar { display: none; }

/* Header washed in the player's team colour, fading into the sheet */
.psheet__head {
  position: relative;
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--team) 55%, var(--surface)) 0%, var(--surface) 100%);
  border-bottom: 0.5px solid var(--hairline);
  cursor: grab;
}

.psheet__grabber {
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: rgba(var(--tint), 0.35);
  margin-bottom: 18px;
}

.psheet__avatar {
  position: relative;
  display: block;
  width: 76px;
  height: 76px;
}

.psheet__photo {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--avatar-bg);
}

.psheet__photo.avatar__crop {
  position: relative;
  overflow: hidden;
}

.psheet__photo.avatar__crop img {
  position: absolute;
  top: 3px;
  left: 50%;
  height: 162px;
  max-width: none;
  transform: translateX(-50%);
}

/* Anchored on its left edge; grows to the right with the text */
.psheet__rating {
  position: absolute;
  top: -6px;
  left: 52px;
  white-space: nowrap;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: #000;
}

.psheet__team-logo {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--surface);
}

.psheet__team-logo img { width: 18px; height: 18px; object-fit: contain; }

.psheet__name {
  margin-top: 12px;
  font-weight: 800;
  font-size: 20px;
}

.psheet__info {
  align-self: stretch;
  margin-top: 18px;
  display: flex;
}

.psheet__cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* labels stay level when a name takes two lines */
  padding: 0 4px;
  gap: 4px;
  text-align: center;
}

.psheet__value {
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 15px;
}

/* A long real name wraps onto a second line (and clips after that) */
.psheet__clip {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
  text-align: center;
}

/* The name gets the widest column so most fit on one or two lines */
.psheet__cell:first-child { flex-grow: 1.5; }

.psheet__flag {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
}

.psheet__label {
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
}

.psheet__body { padding: 8px 20px 0; }

.psheet__section { padding-top: 18px; }

.psheet__title {
  margin-bottom: 6px;
  font-weight: 800;
  font-size: 18px;
}

.psheet__title-note {
  margin-left: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
}

.psheet__row {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 500;
  font-size: 15px;
}

.psheet__row b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.psheet__game > span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.psheet__result {
  min-width: 38px;
  padding: 3px 6px;
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.psheet__result--w { background: var(--win-fill); }
.psheet__result--l { background: var(--loss-fill); }

.psheet__note {
  padding-top: 14px;
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
}

/* Game sheet: the player sheet's card with a game in it (gameCardHTML). The header is washed in
   the winner's colour; the score sits between the two teams like the match header */
.gsheet__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 800;
  font-size: 20px;
}

.gsheet__title span {
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
}

.gsheet__line {
  align-self: stretch;
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.gsheet__team {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s;
}

.gsheet__team.is-dim { opacity: 0.55; }

.gsheet__logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

.gsheet__team-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
}

.gsheet__score {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 40px;
  font-variant-numeric: tabular-nums;
}

.gsheet__score b { font-weight: 500; color: var(--muted); }
.gsheet__score b.is-win { color: var(--text); }
.gsheet__score i { font-style: normal; color: var(--muted); }

.gsheet__center { position: relative; }

/* Length and Series share the row evenly (the player sheet widens its first cell for names) */
.gsheet__card .psheet__cell:first-child { flex-grow: 1; }

.gsheet__ot {
  margin-bottom: 2px;
  font-size: 12px;
}

.gsheet__live {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
}

/* Team stats: home | label | away, the higher side in its team colour */
.gsheet__stat {
  min-height: 40px;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  font-weight: 500;
  font-size: 15px;
  text-align: center;
}

.gsheet__stat span { color: var(--muted); font-size: 14px; }

.gsheet__stat b {
  justify-self: start;
  min-width: 34px;
  padding: 3px 8px;
  border-radius: 8px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.gsheet__stat b:last-child { justify-self: end; }

.gsheet__stat b.is-lead {
  font-weight: 800;
  background: color-mix(in srgb, var(--team) 22%, transparent);
}

.gsheet__player > span:first-child,
.gsheet__mvp > span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.gsheet__mini-logo {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
}

.gsheet__pts {
  display: inline-block;
  min-width: 44px;
  margin-left: 12px;
  text-align: right;
  color: var(--muted);
}

/* Floating buttons over a fade, like FotMob's close / Profile / Compare */
.psheet__actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 36px 16px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, transparent, var(--surface) 55%);
  pointer-events: none;
}

.psheet__actions > * { pointer-events: auto; }

.psheet__close {
  width: 54px;
  height: 54px;
  margin-right: auto;
  color: var(--text);
}

/* The player page's notifications / follow pill, sized to match the close button */
.psheet__tools {
  height: 54px;
  padding: 4px 10px 4px 8px;
}

.psheet__avatar:focus-visible { outline: 2px solid var(--volt-ink); outline-offset: 4px; border-radius: 50%; }

.psheet__actions :focus-visible { outline: 2px solid var(--volt-ink); outline-offset: 2px; }
/* The sheet focuses ✕ whenever it opens or changes player; no ring for that */
.psheet__actions .psheet__close:focus,
.psheet__actions .psheet__close:focus-visible { outline: none; }