/* =========================================================
   Agent — Esports / Roster / Player styles (v3)

   Direction: Vitality + 100T prestige.
   - Modern SANS-SERIF everywhere (no serif display).
   - Esports landing: portrait tile grid (Vitality teams pattern).
   - Roster: cinematic 3-col with bigger photos.
   - Player profile: paired video + meta + numbered honors.

   Brand color is one CSS variable (--brand). To swap:
   .ag-e { --brand: #YOURHEX } — done.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Anton&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

.ag-e,
.ag-e *,
.ag-e *::before,
.ag-e *::after { box-sizing: border-box; }

.ag-e {
  /* Tokens */
  --ink-bg: #0a0a0a;
  --ink-bg-2: #131313;
  --ink-bg-3: #1c1c1c;
  --ink: #ffffff;
  --ink-2: #d8d8d8;
  --ink-3: #8c8c8c;
  --ink-4: #5a5a5a;
  --line: #232323;
  --line-2: #2e2e2e;
  --brand: #E10600;
  --brand-hover: #ff2418;

  --display: 'Anton', 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  background: var(--ink-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
}

.shopify-section:has(.ag-e) { background: var(--ink-bg); }

/* Force-override theme h1/h2/h3 font so Anton is actually used inside .ag-e
   (theme ships h1 { font-family: 'Neue Montreal' !important } which would otherwise
    override our display font and break the condensed handle bar layout). */
.ag-e h1,
.ag-e h2,
.ag-e h3,
.ag-e h4 { font-family: var(--display) !important; }
.ag-e p,
.ag-e li,
.ag-e span,
.ag-e a,
.ag-e button { font-family: var(--sans); }

/* =================== PAGE HERO — clean left-aligned title =================== */
.ag-hero {
  position: relative;
  padding: 64px 32px 20px;
  max-width: 1280px;
  margin: 0 auto;
  text-align: left;
}
.ag-hero h1,
.ag-hero h1.ag-teams-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1;
  color: var(--ink);
  margin: 0;
  text-transform: none;
  text-align: left;
}
.ag-hero .ag-lead {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0 auto;
  font-weight: 400;
  text-align: center;
}
.ag-hero .ag-line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 32px 0 0;
}

/* =================== TEAMS / GAMES TILE GRID =================== */
.ag-tiles-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 32px 64px;
}

.ag-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.ag-tile {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--ink-bg-2);
  text-decoration: none;
  color: inherit;
  display: block;
  isolation: isolate;
}
.ag-tile.ag-soon { cursor: default; }

/* Full-bleed cinematic art — full color, like Vitality. */
.ag-tile-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  z-index: 0;
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.ag-tile-art--ph { background: radial-gradient(120% 100% at 50% 0%, #1a1a1a 0%, #0a0a0a 70%); }
.ag-tile-duo { display: none; }
.ag-tile:hover .ag-tile-art { transform: scale(1.05); }
.ag-tile.ag-soon:hover .ag-tile-art { transform: none; }

/* Bottom scrim for label legibility */
.ag-tile-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,0) 45%, rgba(10,10,10,0.55) 78%, rgba(10,10,10,0.92) 100%);
}

/* Label block bottom-left */
.ag-tile-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.ag-tile-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ag-tile-tag--live {
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ag-tile-tag--live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.ag-e h3.ag-tile-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  line-height: 1;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
}

/* Legacy tile bg classes removed. Logo-centered tiles now. */

/* Game logo icon as the visual (Vitality-style) */
.ag-tile-icon-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
  z-index: 0;
  background: radial-gradient(120% 100% at 50% 30%, #1a1a1a 0%, #0a0a0a 75%);
}
.ag-tile-icon {
  max-width: 60%;
  max-height: 44%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Force every logo to a clean WHITE silhouette so it reads on the dark tile bg —
     brightness(0) crushes everything to black, then invert(1) flips it to pure white.
     The brand color comes from the tile bg gradient, not the logo. */
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition: opacity .3s ease, transform .5s ease, filter .3s ease;
  position: relative;
  z-index: 2;
}
.ag-tile:hover .ag-tile-icon { opacity: 1; transform: scale(1.04); }

/* =================== PER-GAME COLOR TINTS =================== */
/* Each game has a subtle tinted radial gradient bg matching its brand. */
.ag-tile-fortnite .ag-tile-icon-bg {
  background:
    radial-gradient(140% 100% at 50% 30%, rgba(28, 162, 232, 0.30) 0%, rgba(110, 24, 187, 0.22) 35%, #0a0a0a 80%),
    #0a0a0a;
}
.ag-tile-apex .ag-tile-icon-bg {
  background:
    radial-gradient(140% 100% at 50% 30%, rgba(216, 26, 26, 0.32) 0%, rgba(40, 12, 12, 0.4) 40%, #0a0a0a 85%),
    #0a0a0a;
}
.ag-tile-cs .ag-tile-icon-bg {
  background:
    radial-gradient(140% 100% at 50% 30%, rgba(225, 117, 24, 0.28) 0%, rgba(45, 30, 12, 0.4) 40%, #0a0a0a 85%),
    #0a0a0a;
}
.ag-tile-cod .ag-tile-icon-bg {
  background:
    radial-gradient(140% 100% at 50% 30%, rgba(115, 130, 50, 0.28) 0%, rgba(40, 35, 18, 0.4) 40%, #0a0a0a 85%),
    #0a0a0a;
}
.ag-tile-eafc .ag-tile-icon-bg {
  background:
    radial-gradient(140% 100% at 50% 30%, rgba(40, 200, 130, 0.25) 0%, rgba(15, 60, 40, 0.4) 40%, #0a0a0a 85%),
    #0a0a0a;
}
.ag-tile-nba2k .ag-tile-icon-bg,
.ag-tile-nba2k .ag-tile-soon-bg {
  background:
    radial-gradient(140% 100% at 50% 30%, rgba(200, 16, 46, 0.28) 0%, rgba(23, 64, 139, 0.25) 50%, #0a0a0a 90%),
    #0a0a0a;
}

/* Status pill */
.ag-tile-status {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink);
  padding: 5px 8px;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ag-tile-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 2px rgba(216, 14, 3, 0.20);
}
.ag-tile.ag-soon .ag-tile-status { color: var(--ink-3); }
.ag-tile.ag-soon .ag-tile-status::before {
  background: var(--ink-4);
  box-shadow: none;
}

/* Tile bottom overlay: BIG game name (Vitality-style) + roster size meta */
.ag-tile-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 22px 22px 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.ag-tile-overlay h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.ag-tile-overlay .ag-tile-meta {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
  white-space: nowrap;
  padding-bottom: 6px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

/* Game logo watermark — small white silhouette, top-right corner of the tile.
   Subtle so the cinematic art stays the hero; logo is just a brand-read mark. */
.ag-tile-logo {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: auto;
  height: 28px;
  max-width: 38%;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,0.6));
  opacity: 0.85;
  transition: opacity .3s ease, transform .5s ease;
  pointer-events: none;
}
.ag-tile:hover .ag-tile-logo { opacity: 1; transform: scale(1.04); }
.ag-tile.ag-soon .ag-tile-overlay h3 { color: var(--ink-2); }

/* =================== ROSTER VIEW — zoomed out =================== */
.ag-roster {
  display: none;
  padding: 32px 32px 72px;
  max-width: 1280px;
  margin: 0 auto;
}
.ag-roster.show { display: block; }

.ag-roster-back {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--ink-3);
  padding: 0 0 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 32px;
  transition: color .2s, border-color .2s;
}
.ag-roster-back:hover { color: var(--ink); border-bottom-color: var(--brand); }

/* Legacy roster head (no longer rendered, kept defensive) */
.ag-roster-head { display: none; }

/* 100T-style pill tab bar for the roster game-filter (rounded, segmented, layered) */
/* Game-filter tabs hidden: only one active roster, no need to list other games. */
.ag-game-tabs {
  display: none;
}
.ag-e .ag-game-tabs button {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--ink-3);
  padding: 0;
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 11px;
  letter-spacing: 2.2px !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s ease;
}
.ag-e .ag-game-tabs button:hover { color: var(--ink); background: none !important; }
.ag-e .ag-game-tabs button.active { color: var(--brand); background: none !important; }

/* Status meta: live red dot on active game, subtle "IN DEV" tag otherwise */
.ag-game-tabs .ag-gt-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.ag-game-tabs .ag-gt-active::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.ag-game-tabs .ag-gt-soon {
  font-size: 9px;
  letter-spacing: 1.4px;
  color: var(--ink-4);
  text-transform: uppercase;
  font-weight: 600;
}

/* Empty state when an in-dev game tab is selected */
.ag-roster-empty {
  display: none;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: center;
  padding: 96px 24px;
  margin: 0;
  border: 1px dashed var(--line);
  font-weight: 600;
}

.ag-sort {
  display: flex;
  gap: 24px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--line);
}
.ag-sort button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  padding: 0 0 12px;
  margin: 0;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.ag-sort button:hover { color: var(--ink); }
.ag-sort button.active {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

.ag-rgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 0 40px;
}
.ag-rc {
  position: relative;
  display: block;
  background: #161616;
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .35s ease, transform .35s ease;
  aspect-ratio: 3 / 4;
}
.ag-rc:hover {
  border-color: var(--brand);
  box-shadow: 0 12px 32px -12px rgba(216, 14, 3, 0.35), 0 0 0 1px rgba(216, 14, 3, 0.30);
  transform: translateY(-2px);
}
.ag-rc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
  transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .4s ease;
  filter: contrast(1.04) saturate(1.02);
  z-index: 0;
}
.ag-rc:hover .ag-rc-img { transform: scale(1.05); filter: contrast(1.10) saturate(1.10); }
.ag-rc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10, 10, 10, 0.92) 100%);
  pointer-events: none;
  z-index: 1;
}
.ag-rc-overlay {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
}
.ag-rc-num {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  color: var(--brand);
  margin: 0 0 4px;
  font-weight: 500;
}
.ag-rc-name {
  font-family: var(--display);
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 2px;
  line-height: 1.05;
}
.ag-rc-game {
  font-family: var(--sans);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin: 0;
  font-weight: 600;
}

/* =================== PLAYER DETAIL — zoomed out =================== */
.ag-detail { display: none; max-width: 1280px; margin: 0 auto; padding: 32px 32px 72px; }
.ag-detail.show { display: block; }

.ag-detail-back {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--ink-3);
  padding: 0 0 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 24px;
  transition: color .2s, border-color .2s;
}
.ag-detail-back:hover { color: var(--ink); border-bottom-color: var(--brand); }

/* Breadcrumb (Vitality pattern) */
.ag-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
}
.ag-breadcrumb a,
.ag-breadcrumb button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--ink-3);
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color .2s;
}
.ag-breadcrumb a:hover,
.ag-breadcrumb button:hover { color: var(--ink); }
.ag-breadcrumb .ag-bc-sep {
  color: var(--ink-4);
  font-family: var(--mono);
  font-size: 10px;
}
.ag-breadcrumb .ag-bc-current { color: var(--brand); }

.ag-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  margin: 0 0 64px;
  align-items: stretch;
}
.ag-detail-hero > * { min-width: 0; }
.ag-vid {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border: 1px solid var(--line);
}
.ag-vid #vidWrap { position: absolute; inset: 0; width: 100%; height: 100%; }
.ag-vid iframe,
.ag-vid video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  position: absolute;
  inset: 0;
  background: #000;
  object-fit: contain;
}
.ag-vid .ag-vph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.ag-detail-meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 0;
  gap: 0;
  min-width: 0;
}
/* Player photo — Vitality-style transparent cutout (studio black bg blends into page) */
.ag-detail-photo {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 3 / 4;
  background: transparent;
  overflow: visible;
  margin: 0 auto 16px;
  position: relative;
}
.ag-detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
  /* Lighten blend mode: any pixel darker than the page background gets replaced
     by the page background — i.e. the studio black bg becomes invisible while
     the player figure stays fully visible. Gives a true Vitality cutout look. */
  mix-blend-mode: lighten;
  filter: contrast(1.12) saturate(1.06) brightness(1.04);
  /* Soft radial mask: fades the photo edges into the page background so even
     subtle gradient edges in the studio bg disappear cleanly. */
  -webkit-mask-image: radial-gradient(ellipse 78% 95% at 50% 38%, #000 55%, rgba(0,0,0,0.6) 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 78% 95% at 50% 38%, #000 55%, rgba(0,0,0,0.6) 78%, transparent 100%);
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.ag-detail-photo:hover img { transform: scale(1.02); }
.ag-pnumber {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--brand);
  margin: 0 0 18px;
  font-weight: 500;
  text-align: center;
}
/* Real name (smaller display heading, sits above the big handle bar) */
.ag-realname {
  font-family: var(--display);
  font-size: clamp(14px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink-2);
  margin: 0 0 16px;
  text-transform: none;
}

/* Massive colored handle bar — Vitality-style visual signature */
.ag-handle-bar {
  display: block;
  width: 100%;
  background: var(--brand);
  padding: 18px 28px;
  margin: 0 0 28px;
  overflow: hidden;
}
.ag-handle-bar .ag-pname {
  font-family: var(--display) !important;
  font-size: clamp(22px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #ffffff !important;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: visible;
  word-break: keep-all;
}
.ag-prole {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 24px;
  font-weight: 600;
}

.ag-socials { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; justify-content: center; }
.ag-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color .2s, background-color .2s, color .2s, transform .2s;
  color: var(--ink-2);
  text-decoration: none;
}
.ag-socials a:hover {
  border-color: var(--brand);
  background: rgba(216, 14, 3, 0.10);
  color: var(--ink);
  transform: translateY(-1px);
}
.ag-socials svg { width: 15px; height: 15px; fill: currentColor; }

.ag-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 0 80px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ag-stat { border-right: 1px solid var(--line); padding: 28px 28px; }
.ag-stat:last-child { border-right: 0; }
.ag-stat .ag-sl {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 700;
}
.ag-stat .ag-sv {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  line-height: 1.1;
}

.ag-hon {
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
}
.ag-hon h3 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
  font-weight: 700;
}
.ag-hon ul { list-style: none; padding: 0; margin: 0; counter-reset: hon; }
.ag-hon li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 18px 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  margin: 0;
  line-height: 1.4;
  font-weight: 400;
}
.ag-hon li:last-child { border-bottom: 0; }
.ag-hon li::before {
  content: counter(hon, decimal-leading-zero);
  counter-increment: hon;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--brand);
  letter-spacing: 1px;
  font-weight: 500;
  padding-top: 4px;
}

/* Long-form bio section */
.ag-bio {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
  margin: 64px 0 0;
  padding: 56px 0 0;
  border-top: 1px solid var(--line);
}
.ag-bio h3 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
  font-weight: 700;
}
.ag-bio .ag-bio-body {
  max-width: 60ch;
}
.ag-bio p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 20px;
  font-weight: 400;
}
.ag-bio p:last-child { margin-bottom: 0; }

/* SEO crawlable hidden block */
.ag-seo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =================== RESPONSIVE =================== */
@media (max-width: 1100px) {
  .ag-hero { padding: 72px 32px 48px; }
  .ag-tiles-wrap { padding: 24px 32px 96px; }
  .ag-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ag-detail-hero { grid-template-columns: 1fr; gap: 32px; }
  .ag-roster { padding: 40px 32px 96px; }
  .ag-detail { padding: 32px 32px 96px; }
  .ag-stats { grid-template-columns: repeat(2, 1fr); }
  .ag-stat:nth-child(2n) { border-right: 0; }
  .ag-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .ag-hon { grid-template-columns: 1fr; gap: 20px; }
  .ag-bio { grid-template-columns: 1fr; gap: 20px; padding-top: 40px; margin-top: 48px; }
}

@media (max-width: 720px) {
  .ag-hero { padding: 56px 20px 32px; }
  .ag-hero h1 { font-size: clamp(28px, 8vw, 48px); }
  .ag-hero .ag-line { margin-top: 36px; }

  .ag-tiles-wrap { padding: 16px 20px 80px; }
  .ag-tiles { grid-template-columns: 1fr; gap: 12px; }
  .ag-tile { aspect-ratio: 4 / 3; }
  .ag-tile-overlay { padding: 24px 20px 20px; }

  .ag-roster { padding: 32px 20px 72px; }
  .ag-roster-head { padding-bottom: 20px; margin-bottom: 28px; }
  .ag-roster-head h2 { font-size: clamp(36px, 9vw, 56px); }
  .ag-rgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ag-rc-overlay { left: 16px; right: 16px; bottom: 16px; }
  .ag-rc-name { font-size: 16px; }

  .ag-detail { padding: 24px 20px 80px; }
  .ag-breadcrumb { font-size: 10px; gap: 8px; }
  .ag-realname { font-size: clamp(20px, 6vw, 30px); }
  .ag-handle-bar { padding: 14px 18px; margin-bottom: 24px; }
  .ag-handle-bar .ag-pname { font-size: clamp(28px, 8vw, 44px); }
  .ag-stats { grid-template-columns: 1fr; }
  .ag-stat { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 0; }
  .ag-stat:last-child { border-bottom: 0; }
  .ag-hon li { grid-template-columns: 40px 1fr; gap: 16px; font-size: 14px; padding: 14px 0; }
  .ag-bio p { font-size: 15px; }
}


/* =========================================================================
   ROSTER PAGE ONLY.
   The player detail page above this line is the original and stays untouched.
   Everything here styles the landing view: lead, roster grid, what is next.
   ========================================================================= */
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/assets/fonts/PPNeueMontreal-Book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/assets/fonts/PPNeueMontreal-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/assets/fonts/PPNeueMontreal-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ----- Lead ----- */
.ag-e .ag-lead { max-width: 1280px; margin: 0 auto; padding: 88px 32px 0; text-align: left; }
.ag-e .ag-lead-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 20px; text-align: left;
}
.ag-e h1.ag-lead-title {
  font-family: 'Big Shoulders Display', 'PP Neue Montreal', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(72px, 14vw, 210px);
  line-height: 0.82;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  text-align: left;
}
.ag-e .ag-lead-years {
  font-family: var(--mono); font-size: 13px; letter-spacing: 1.6px;
  color: var(--brand); margin: 18px 0 0; text-align: left;
}
.ag-e .ag-facts { display: none; }
.ag-e .ag-lead-note {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink-3);
  margin: 30px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); text-align: left;
}
.ag-e .ag-lead-note span { color: var(--ink-4); padding: 0 12px; }

/* ----- Roster grid ----- */
.ag-e .ag-roster { padding: 40px 32px 96px; }
.ag-e .ag-rgrid { grid-template-columns: repeat(4, 1fr); gap: 32px 24px; margin: 0; }
.ag-e .ag-rc {
  background: none; border: 0; overflow: visible; aspect-ratio: auto; transition: none;
}
.ag-e .ag-rc:hover { border: 0; box-shadow: none; transform: none; }
.ag-e .ag-rc::after { content: none; }
.ag-e .ag-rc-frame {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; background: #101010;
}
.ag-e .ag-rc-frame::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  pointer-events: none; z-index: 2;
}
.ag-e .ag-rc-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 12%; filter: none;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.ag-e .ag-rc:hover .ag-rc-img { transform: scale(1.04); }
.ag-e .ag-rc-num {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px;
  color: var(--ink); mix-blend-mode: difference;
}
.ag-e .ag-rc-body { display: block; padding: 16px 0 0; text-align: left; }
.ag-e .ag-rc-name {
  display: block;
  font-family: 'PP Neue Montreal', 'Neue Montreal', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1; letter-spacing: -0.03em; text-transform: uppercase;
  color: var(--ink); margin: 0; transition: color .2s ease;
}
.ag-e .ag-rc:hover .ag-rc-name { color: var(--brand); }
.ag-e .ag-rc-real {
  display: block; font-family: var(--sans); font-size: 13px; font-weight: 400;
  color: var(--ink-2); margin: 6px 0 0;
}
.ag-e .ag-rc-meta {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-4); margin: 10px 0 0;
}

/* ----- What is next ----- */
.ag-e .ag-next {
  position: relative; width: calc(100% - 64px); max-width: 1216px;
  margin: 0 auto 96px; min-height: 400px;
  display: flex; align-items: center; overflow: hidden; text-align: left;
}
.ag-e .ag-next-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 46%; filter: none;
}
.ag-e .ag-next-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.55) 48%, rgba(8,8,8,0.15) 100%);
}
.ag-e .ag-next-body { position: relative; z-index: 2; padding: 56px 44px; text-align: left; }
.ag-e .ag-next-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--brand); margin: 0 0 14px; text-align: left;
}
.ag-e h2.ag-next-title {
  font-family: 'Big Shoulders Display', 'PP Neue Montreal', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(44px, 7.5vw, 112px);
  line-height: 0.86; letter-spacing: 0.005em; text-transform: uppercase;
  color: var(--ink); margin: 0; text-align: left;
}
.ag-e .ag-next-copy {
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--ink-2); margin: 16px 0 0; text-align: left;
}

/* Portrait on the player page opens full size */
.ag-e .ag-detail-photo { cursor: zoom-in; }
.ag-lightbox {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(6, 6, 6, 0.94);
  align-items: center; justify-content: center; padding: 48px; cursor: zoom-out;
}
.ag-lightbox.show { display: flex; }
.ag-lightbox .ag-lb-img {
  max-width: min(1100px, 92vw); max-height: 88vh;
  width: auto; height: auto; object-fit: contain; display: block;
}
.ag-lightbox .ag-lb-close {
  position: absolute; top: 22px; right: 26px;
  background: none; border: 0; color: #dbdad2;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; padding: 8px 10px;
}
.ag-lightbox .ag-lb-close:hover { color: var(--brand); }

/* The honors placeholder is not an honor, so it gets no number */
.ag-e .ag-hon li.ag-hon-none::before { content: none; }
.ag-e .ag-hon li.ag-hon-none { display: block; border-bottom: 0; color: var(--ink-4); }

@media (max-width: 1100px) { .ag-e .ag-rgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .ag-e .ag-lead { padding: 56px 20px 0; }
  .ag-e .ag-lead-note { font-size: 10px; letter-spacing: 1px; margin-top: 24px; }
  .ag-e .ag-lead-note span { padding: 0 7px; }
  .ag-e .ag-roster { padding: 28px 20px 64px; }
  .ag-e .ag-rgrid { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
  .ag-e .ag-next { width: calc(100% - 40px); margin-bottom: 64px; min-height: 300px; }
  .ag-e .ag-next-body { padding: 32px 20px; }
  .ag-lightbox { padding: 20px; }
}

/* The theme stylesheet is linked again inside the body, so it lands after this
   file and wins on equal specificity. These two need to be forced. */
.ag-lightbox { display: none !important; }
.ag-lightbox.show { display: flex !important; }

.ag-e .ag-detail-photo { position: relative; }
.ag-e .ag-photo-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(10, 10, 10, 0.72);
  padding: 6px 10px;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.ag-e .ag-detail-photo:hover .ag-photo-hint { opacity: 1; }

/* =========================================================================
   PLAYER PAGE, the layout from earlier in the build.
   Portrait left, identity and stats right, then the announcement film in a
   row of its own at full width. Honors and bio below.
   ========================================================================= */
.ag-e .ag-detail-top {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin: 0 0 64px;
}
.ag-e .ag-detail-photo {
  position: relative;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 4 / 5;
  background: #101010;
  overflow: hidden;
  margin: 0;
  cursor: zoom-in;
}
.ag-e .ag-detail-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 12%;
  filter: none;
}
.ag-e .ag-detail-id { padding: 0; text-align: left; }
.ag-e .ag-detail-id .ag-pnumber {
  display: block; text-align: left; color: var(--brand); margin: 0 0 14px;
}
.ag-e h2.ag-realname {
  font-family: var(--sans) !important;
  font-size: 14px; font-weight: 500 !important;
  letter-spacing: 0; text-transform: none;
  color: var(--ink-2); text-align: left; margin: 0 0 6px;
}
.ag-e .ag-handle-bar { background: none; padding: 0; margin: 0; text-align: left; }
.ag-e .ag-handle-bar h1.ag-pname {
  font-family: 'PP Neue Montreal', 'Neue Montreal', system-ui, sans-serif !important;
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 700 !important;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: left;
  margin: 0;
}
.ag-e .ag-detail-id .ag-socials { justify-content: flex-start; margin: 26px 0 0; }

/* Three up, because the real name already sits above the handle */
.ag-e .ag-detail-id .ag-stats {
  margin: 34px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ag-e .ag-detail-id .ag-stat {
  padding: 20px 20px 20px 0;
  border-right: 1px solid var(--line);
  text-align: left;
}
.ag-e .ag-detail-id .ag-stat:last-child { border-right: 0; }
.ag-e .ag-detail-id .ag-stat:not(:first-child) { padding-left: 20px; }
.ag-e .ag-detail-id .ag-sl {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; text-align: left;
}
.ag-e .ag-detail-id .ag-sv {
  font-family: 'PP Neue Montreal', system-ui, sans-serif;
  font-size: 20px; font-weight: 700; color: var(--ink); margin: 0; text-align: left;
}

/* The announcement gets its own row and the full width */
.ag-e .ag-film { margin: 0 0 64px; }
.ag-e .ag-film-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--brand); margin: 0 0 16px; text-align: left;
}
.ag-e .ag-film .ag-vid {
  width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; margin: 0;
}

/* Honors and bio read left, same as everything else on the page */
.ag-e .ag-hon h3,
.ag-e .ag-hon li,
.ag-e .ag-bio h3,
.ag-e .ag-bio-body,
.ag-e .ag-bio-body p { text-align: left; }
.ag-e .ag-bio-body { padding-left: 80px; }
.ag-e .ag-hon li.ag-hon-none { padding-left: 80px; }

/* Portrait hover hint */
.ag-e .ag-photo-hint {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink);
  background: rgba(10, 10, 10, 0.72); padding: 6px 10px;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.ag-e .ag-detail-photo:hover .ag-photo-hint { opacity: 1; }

@media (max-width: 860px) {
  .ag-e .ag-detail-top { grid-template-columns: 1fr; gap: 28px; margin-bottom: 44px; }
  .ag-e .ag-detail-id .ag-stats { grid-template-columns: repeat(3, 1fr); }
  .ag-e .ag-film { margin-bottom: 44px; }
  .ag-e .ag-bio-body { padding-left: 0; }
  .ag-e .ag-hon li.ag-hon-none { padding-left: 0; }
}