/* =========================================================================
   ESPN-style theme — design tokens + components
   Loaded after custom.css; safe to remove later by deleting <link> in base.
   ========================================================================= */

/* --- Tokens --------------------------------------------------------------- */
:root,
[data-theme="light"] {
  --espn-bg:           #f5f6f7;
  --espn-surface:      #ffffff;
  --espn-surface-alt:  #fafafa;
  --espn-border:       #e6e8eb;
  --espn-text:         #111418;
  --espn-text-muted:   #5b6470;
  --espn-text-soft:    #8b94a0;
  --espn-accent:       #00882a;
  --espn-accent-soft:  #e6f4ea;
  /* Neutral chip background (#3277 feedback): group icon chip, team-count
     badge, and initials-avatar fallback use this instead of the green tint. */
  --espn-chip-bg:      #f5f5f5;
  --espn-shadow:       0 1px 2px rgba(20,24,28,.06), 0 4px 14px rgba(20,24,28,.04);

  /* helmet tints (light) */
  --helmet-1: #00882a;
  --helmet-2: #1f5fbf;
  --helmet-3: #6f3bbd;
  --helmet-4: #e0a800;
  --helmet-5: #d97706;
  --helmet-6: #c1272d;
  --helmet-7: #0f7e8c;
  --helmet-bg-1: #e6f4ea;
  --helmet-bg-2: #e6efff;
  --helmet-bg-3: #efe6ff;
  --helmet-bg-4: #fff6d6;
  --helmet-bg-5: #ffe7c2;
  --helmet-bg-6: #ffe0e0;
  --helmet-bg-7: #d8f0f3;
}

[data-theme="dark"] {
  --espn-bg:           #0a0e12;
  --espn-surface:      #11161c;
  --espn-surface-alt:  #161c23;
  --espn-border:       #1f2630;
  --espn-text:         #e9eef3;
  --espn-text-muted:   #aab3bf;
  --espn-text-soft:    #6c7682;
  --espn-accent:       #00882a;
  --espn-accent-soft:  rgba(0,136,42,.18);
  /* Dark-mode counterpart of the neutral chip bg (no glaring white tiles). */
  --espn-chip-bg:      rgba(255,255,255,.07);
  --espn-shadow:       0 1px 0 rgba(255,255,255,.02), 0 8px 24px rgba(0,0,0,.4);

  /* helmet tints (dark — single accent green to match mockup) */
  --helmet-1: #00882a;
  --helmet-2: #00882a;
  --helmet-3: #00882a;
  --helmet-4: #00882a;
  --helmet-5: #00882a;
  --helmet-6: #00882a;
  --helmet-7: #00882a;
  --helmet-bg-1: rgba(47,209,107,.10);
  --helmet-bg-2: rgba(47,209,107,.10);
  --helmet-bg-3: rgba(47,209,107,.10);
  --helmet-bg-4: rgba(47,209,107,.10);
  --helmet-bg-5: rgba(47,209,107,.10);
  --helmet-bg-6: rgba(47,209,107,.10);
  --helmet-bg-7: rgba(47,209,107,.10);
}

/* --- Page surface --------------------------------------------------------- */
body.espn-themed {
  background: var(--espn-bg) !important;
  color: var(--espn-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.espn-themed .bg-light { background: var(--espn-bg) !important; }
body.espn-themed .bg-white { background: var(--espn-surface) !important; }

/* --- Header (tournament title bar) --------------------------------------- */
.espn-header {
  background: var(--espn-surface);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 30;          /* sits above page-card / tabs so dropdowns don't get covered */
}
.espn-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.espn-header__brand img { width: auto; height: 24px; object-fit: contain; }
/* Theme-aware logo swap */
.espn-header__logo { display: none; }
[data-theme="light"] .espn-header__logo--light { display: block; }
[data-theme="dark"]  .espn-header__logo--dark  { display: block; }
.espn-header__logo--light,
.espn-header__logo--dark {
  width: auto;
  height: 48px;
  max-width: 200px;
}
.espn-header__title {
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--espn-text);
  font-size: 20px;
  margin: 0;
  padding-left: 16px;
  border-left: 1px solid var(--espn-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- HEADER on mobile ---------- */
@media (max-width: 720px) {
  .espn-header { padding: 12px 14px; gap: 10px; }
  .espn-header__title { font-size: 16px; padding-left: 12px; }
  .espn-header__pill { display: none; }
  /* Tighten the dropdown chip on mobile so it doesn't crowd the brand area.
     Scoped to the HEADER dropdown only — this used to be a global
     .espn-divselect cap that silently shrank the schedule filter pills
     (and any future reuse of the component) to 140px. */
  .espn-header .espn-divselect { padding: 6px 10px; font-size: 12px; max-width: 140px; }
}

/* When the All-Divisions dropdown is present (division pages), hide the
   redundant page title on mobile — the dropdown already shows the current
   division name and is much more useful (tap to switch). */
@media (max-width: 720px) {
  .espn-header:has(.espn-divselect-details) .espn-header__title,
  .espn-header:has(.espn-divselect-details) .espn-header__season { display: none; }
}
.espn-header__season {
  color: var(--espn-accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .5px;
  margin-left: 8px;
}
.espn-header__pill {
  background: var(--espn-accent-soft);
  color: var(--espn-accent);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.espn-header__actions { display: flex; align-items: center; gap: 8px; }
.espn-icon-btn {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--espn-border);
  background: var(--espn-surface);
  color: var(--espn-text);
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.espn-icon-btn .bi {
  font-size: 22px;
  line-height: 1;
  width: 1em;
  height: 1em;
  color: inherit;
}
.espn-icon-btn:hover {
  background: var(--espn-surface-alt);
  border-color: var(--espn-accent);
}
.espn-icon-btn:hover .bi { color: var(--espn-accent); }

/* --- Section heading ------------------------------------------------------ */
.espn-section {
  padding: 22px 18px 8px;
}
.espn-section__title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--espn-text);
  margin: 0;
  line-height: 1.05;
}
.espn-section__sub {
  margin: 6px 0 0;
  color: var(--espn-text-muted);
  font-size: 14px;
}

/* --- Division tile list --------------------------------------------------- */
.espn-tile-list {
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  border-radius: 14px;
  overflow: hidden;
  margin: 8px 18px 18px;
  box-shadow: var(--espn-shadow);
}
.espn-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--espn-border);
  overflow: hidden;
  transition: background .6s ease, box-shadow .6s ease;
}
.espn-tile:last-child { border-bottom: 0; }

/* Green left accent bar — slides in vertically on hover (slow + buttery) */
.espn-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--espn-accent);
  border-radius: 0 3px 3px 0;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .65s cubic-bezier(.2,.8,.25,1);
  z-index: 2;
}
.espn-tile:hover::before,
.espn-tile--all::before { transform: scaleY(1); }

/* Shimmer sweep — slow light streak that crosses the tile on hover */
.espn-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 0%,
    transparent 35%,
    rgba(0,200,60,.12) 50%,
    transparent 65%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform 1.6s ease;
  pointer-events: none;
  z-index: 1;
}
.espn-tile:hover::after { transform: translateX(100%); }

/* Hover background — gradient tinted with green from the left, fading right */
.espn-tile:hover {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(90deg,
    rgba(0,136,42,.10)  0%,
    rgba(0,136,42,.04) 60%,
    rgba(0,136,42,0)   100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,136,42,.35),
    0 0 28px rgba(0,200,60,.10);
}
[data-theme="dark"] .espn-tile:hover {
  background: linear-gradient(90deg,
    rgba(0,136,42,.22)  0%,
    rgba(0,136,42,.08) 55%,
    rgba(0,136,42,0)   100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,136,42,.55),
    0 0 36px rgba(0,200,60,.18);
}

/* Helmet icon — slow scale + glow on tile hover */
.espn-tile__icon { transition: transform .6s ease, box-shadow .6s ease; }
.espn-tile:hover .espn-tile__icon {
  transform: scale(1.06);
  box-shadow: 0 0 14px rgba(0,200,60,.25);
}

/* Chevron — slides right and turns solid green on hover */
.espn-tile__chevron {
  transition: transform .6s cubic-bezier(.2,.8,.25,1),
              background-color .45s ease,
              color .45s ease,
              border-color .45s ease;
}
.espn-tile:hover .espn-tile__chevron {
  transform: translateX(4px);
  background: var(--espn-accent);
  color: #fff;
  border-color: var(--espn-accent);
}

/* Title shifts a hair to the right on hover */
.espn-tile__body { transition: transform .6s ease; }
.espn-tile:hover .espn-tile__body { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .espn-tile,
  .espn-tile::before,
  .espn-tile::after,
  .espn-tile__icon,
  .espn-tile__chevron,
  .espn-tile__body {
    transition: none;
  }
  .espn-tile::after { display: none; }
}

.espn-tile__icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--helmet-bg, var(--espn-accent-soft));
  color: var(--helmet-color, var(--espn-accent));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.espn-tile__icon svg { width: 36px; height: 36px; }
.espn-tile__icon--all {
  background: var(--espn-accent-soft);
  color: var(--espn-accent);
}

/* Helmet: Material Design Icons font glyph (mdi-football-helmet).
   Color is inherited from the parent .espn-tile__icon (var(--helmet-color)). */
.espn-helmet-mdi {
  font-size: 36px;
  line-height: 1;
  color: currentColor;
}

.espn-tile__body { flex: 1; min-width: 0; }
.espn-tile__title {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin: 0 0 3px;
  color: var(--espn-text);
}
.espn-tile__sub {
  font-size: 13px;
  color: var(--espn-text-muted);
  margin: 0;
}

.espn-tile__chevron {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  color: var(--espn-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(20,24,28,.06);
}
.espn-tile__chevron svg { width: 18px; height: 18px; }
[data-theme="dark"] .espn-tile__chevron { background: rgba(255,255,255,.04); }

/* "All Divisions" tile keeps the green left bar permanently (handled by the
   .espn-tile::before rule + opacity:1 selector above). */

/* --- Helper footer line --------------------------------------------------- */
/* Rendered as the final row of the tile-list card. */
.espn-tile-list .espn-helper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--espn-surface-alt);
  border-top: 1px solid var(--espn-border);
  color: var(--espn-text-muted);
  font-size: 14px;
}
.espn-helper__icon {
  color: var(--espn-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.espn-helper__icon svg { width: 18px; height: 18px; }

/* --- Unified hero + tile-list card --------------------------------------- */
.espn-page-card {
  position: relative;
  border: 1px solid var(--espn-border);
  border-radius: 14px;
  margin: 18px;
  /* overflow: clip — same visual containment as `hidden` but does NOT create a
     scroll context, so descendant `position: sticky` still works. */
  overflow: clip;
  box-shadow: var(--espn-shadow);
}
/* Static green base line across the top of the page card */
.espn-page-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,136,42,0)   8%,
    rgba(0,136,42,.45) 35%,
    rgba(0,136,42,.55) 50%,
    rgba(0,136,42,.45) 65%,
    rgba(0,136,42,0)   92%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}
/* Animated bright flash that scrolls along the top */
.espn-page-card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,255,90,0)   30%,
    rgba(0,255,90,.85) 48%,
    #b7ffce            50%,
    rgba(0,255,90,.85) 52%,
    rgba(0,255,90,0)   70%,
    transparent 100%);
  background-size: 35% 100%;
  background-repeat: no-repeat;
  filter: blur(.5px);
  animation: espn-flash 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes espn-flash {
  0%   { background-position: -40% 0; opacity: .9; }
  50%  {                                opacity: 1; }
  100% { background-position: 140% 0;  opacity: .9; }
}

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  .espn-page-card::after { animation: none; background-position: 50% 0; }
}
[data-theme="light"] .espn-page-card { background: var(--espn-surface); }
[data-theme="dark"]  .espn-page-card {
  background:
    /* Soft glow behind the field so the rotated SVG blends, not floats */
    radial-gradient(ellipse 600px 180px at 92% 8%, rgba(0,136,42,.18) 0%, transparent 70%),
    /* Base dark surface */
    linear-gradient(180deg, #0a0e12 0%, #0a0e12 100%);
}

/* Stadium / field background — visible in both themes, rendered in top-right corner.
   Each theme uses its own SVG: dark = night stadium, light = daytime field. */
.espn-stadium-bg {
  display: block;
  position: absolute;
  top: -22px;
  right: -18px;
  width: 38%;
  height: 204px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: 50% 50%;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse at 70% 35%, #000 25%, transparent 70%);
          mask-image: radial-gradient(ellipse at 70% 35%, #000 25%, transparent 70%);
}
[data-theme="light"] .espn-stadium-bg {
  background-image: url(/img/espn-field-light.svg?v=2);
  opacity: 1;
  /* Gentle continuous breathing animation */
  animation: espn-stadium-breathe 6s ease-in-out infinite;
}

/* Slow rhythmic pulse — feels like a live stadium */
@keyframes espn-stadium-breathe {
  0%, 100% { filter: brightness(1)    saturate(1); }
  50%      { filter: brightness(1.08) saturate(1.12); }
}

/* Moving shimmer streak across the light-mode field */
[data-theme="light"] .espn-page-card .espn-stadium-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 38%,
    rgba(255,255,255,.55) 50%,
    transparent 62%,
    transparent 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: espn-field-shimmer 5s linear infinite;
  pointer-events: none;
}
@keyframes espn-field-shimmer {
  0%   { background-position: -110% 0; }
  100% { background-position:  110% 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] .espn-stadium-bg,
  [data-theme="light"] .espn-page-card .espn-stadium-bg::after { animation: none; }
}
[data-theme="dark"] .espn-stadium-bg {
  background-image: url(/img/espn-field.svg?v=4);
  /* Start the field dim; ramp to full brightness AFTER all four lights are on */
  filter: brightness(.22);
  animation: espn-stadium-field-up 1s ease-out 1.7s forwards;
}
@keyframes espn-stadium-field-up {
  from { filter: brightness(.22); }
  to   { filter: brightness(1); }
}

/* The four stadium light overlays — flicker on in sequence */
.espn-stadium-light {
  position: absolute;
  width: 90px; height: 90px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,.95) 0%,
    rgba(180,255,200,.55) 15%,
    rgba(120,255,160,.22) 40%,
    rgba(0,200,90,0)       72%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(2px);
  animation: espn-stadium-light-on .9s cubic-bezier(.3,.0,.2,1) var(--d, 0s) both;
}
[data-theme="light"] .espn-stadium-light { display: none; }
@keyframes espn-stadium-light-on {
  0%   { opacity: 0;   transform: scale(.3); }
  18%  { opacity: .45; transform: scale(.7); }            /* first try */
  26%  { opacity: .08; transform: scale(.55); }           /* flicker out */
  40%  { opacity: .6;  transform: scale(1.05); }          /* lights catch */
  55%  { opacity: .3;  transform: scale(.9); }            /* flicker again */
  75%  { opacity: 1;   transform: scale(1.18); }          /* full bloom */
  90%  { opacity: .85; transform: scale(.95); }           /* settle */
  100% { opacity: 1;   transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] .espn-stadium-bg { animation: none; filter: brightness(1); }
  .espn-stadium-light { animation: none; opacity: 1; transform: scale(1); }
}


/* The sequential-stadium-lights animation defined below handles both
   page-load and theme-switch (display: none → block restarts CSS animations),
   so the old single-blob warmup is no longer needed. */

/* Hero now sits on top of the unified card (transparent surface) */
.espn-section--hero {
  position: relative;
  padding: 24px 24px 22px;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
}
[data-theme="dark"] .espn-section--hero .espn-section__title { color: #fff; }
[data-theme="dark"] .espn-section--hero .espn-section__sub   { color: var(--espn-text-muted); }

/* Tile list inside the unified card — its own bordered sub-card with spacing from the hero */
.espn-page-card .espn-tile-list {
  background: transparent;
  border: 1px solid var(--espn-border);
  border-radius: 12px;
  margin: 0 14px 14px;
  box-shadow: none;
  position: relative;       /* sit above the field background */
  z-index: 1;
  overflow: hidden;
}

/* In dark mode each tile gets a subtle dark scrim so text/helmets stay legible
   over the field background, while still letting the field bleed through. */
[data-theme="dark"] .espn-page-card .espn-tile {
  background: rgba(10,14,18,.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
[data-theme="dark"] .espn-page-card .espn-tile:hover {
  background: rgba(20,30,40,.78);
}

/* Visibility helpers tied to theme */
[data-theme="dark"]  [data-theme-light-only] { display: none !important; }
[data-theme="light"] [data-theme-dark-only]  { display: none !important; }

/* --- Page body card variant (without hero/field) ------------------------- */
.espn-page-card--plain { padding: 0; }
.espn-page-card--plain .espn-page-card::before,
.espn-page-card--plain .espn-page-card::after { display: none; }
.espn-page-body { margin: 18px; }

/* --- Two-column layout: teams (left, 1) + next games / standings (right, 3) */
.espn-twocol {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 3fr;
  gap: 14px;
  padding: 14px;
}
/* Grid items default to min-width:auto and refuse to shrink below their
   content's natural width — on mobile (stacked 1fr) that let the Teams panel
   (search bar + nowrap row meta) overflow the viewport and get cut off on the
   right. Let BOTH columns shrink; the side column already had this. */
.espn-twocol > * { min-width: 0; }
.espn-twocol__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 900px) {
  .espn-twocol { grid-template-columns: 1fr; }
}

/* --- Standings page (ESPN-style: # / TEAM / W / L / T / PCT / PF / PA / STREAK) */
.espn-panel--standings {
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  border-radius: 12px;
  /* overflow: clip — same as `hidden` but doesn't break descendant sticky */
  overflow: clip;
}
[data-theme="dark"] .espn-panel--standings { background: rgba(17,22,28,.85); }

.espn-standings-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--espn-border);
}
.espn-standings-header__title {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
}
.espn-standings-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--espn-border);
  font-size: 12px;
  color: var(--espn-text-muted);
  font-weight: 600;
  line-height: 1.4;
}
.espn-standings-sub .mdi { color: var(--espn-accent); font-size: 14px; }
.espn-standings-header__legend {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--espn-text-muted);
}
.espn-standings-header__legend > span { display: inline-flex; align-items: center; gap: 6px; }

.espn-standings-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--espn-border);
  border-radius: 8px;
  background: var(--espn-surface);
  color: var(--espn-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}
.espn-standings-export .mdi { font-size: 14px; }
.espn-standings-export:hover { background: var(--espn-accent-soft); border-color: var(--espn-accent); }

/* Group title for All-Divisions view */
.espn-standings-divhdr {
  margin: 0;
  padding: 14px 20px 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--espn-accent);
}

/* Table styling — overrides the smaller-preview table styles */
.espn-standings--full {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.espn-standings--full thead th {
  padding: 14px 12px 12px;
  background: transparent;
  border-bottom: 1px solid var(--espn-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--espn-text-muted);
  text-align: center;
  vertical-align: bottom;
}
.espn-standings--full .espn-st__hdr-big {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--espn-text);
}
.espn-standings--full .espn-st__hdr-sub {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--espn-text-muted);
  margin-top: 2px;
}
.espn-standings--full .espn-st__pct-header .espn-st__hdr-big,
.espn-standings--full .espn-st__w-header   .espn-st__hdr-big { color: var(--espn-accent); }

/* Header rank badge — invisible border, muted color, sized like the real badges
   so the "#" sits exactly above the row badges. */
.espn-st__rank-badge--hdr {
  border-color: transparent;
  color: var(--espn-text-muted);
  font-weight: 700;
  background: transparent;
}

.espn-standings--full th.espn-st__rank,
.espn-standings--full td.espn-st__rank   { width: 56px; padding-left: 16px; text-align: left; }
.espn-standings--full th.espn-st__team,
.espn-standings--full td.espn-st__team   { text-align: left; padding-left: 18px; }
.espn-standings--full th.espn-st__streak-header,
.espn-standings--full td.espn-st__streak { width: 70px; padding-right: 18px; }

.espn-standings--full tbody td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid var(--espn-border);
  color: var(--espn-text);
  font-weight: 500;
}
.espn-standings--full tbody tr:last-child td { border-bottom: 0; }
.espn-standings--full tbody tr:nth-child(odd) td { background: var(--espn-surface-alt); }
[data-theme="dark"] .espn-standings--full tbody tr:nth-child(odd) td { background: rgba(255,255,255,.02); }

/* Rank cell — colored dot indicator + bordered number badge */
.espn-st__rank {
  position: relative;
  white-space: nowrap;
}
.espn-st__dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  background: transparent;
}
.espn-st__dot--placeholder { visibility: hidden; }
.espn-st__dot--playoff     { background: var(--espn-accent); box-shadow: 0 0 6px rgba(0,200,90,.4); }
.espn-st__dot--wildcard    { background: #3b8bff; box-shadow: 0 0 6px rgba(59,139,255,.4); }
.espn-st__rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--espn-border);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--espn-text);
  vertical-align: middle;
}
.espn-standings--full tbody tr.is-playoff  .espn-st__rank-badge { border-color: var(--espn-accent); color: var(--espn-accent); }
.espn-standings--full tbody tr.is-wildcard .espn-st__rank-badge { border-color: #3b8bff; color: #3b8bff; }

/* Team cell — avatar + name */
.espn-standings--full .espn-st__team {
  align-items: center;
  gap: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.espn-standings--full .espn-st__team .espn-avatar {
  margin-right: 10px;
  vertical-align: middle;
}
.espn-standings--full .espn-st__team .espn-avatar--sm {
  width: 34px; height: 34px;
  font-size: 13px;
  border-radius: 8px;
}
.espn-standings--full .espn-st__team > span { vertical-align: middle; }
.espn-standings--full thead .espn-st__team { display: table-cell; }

/* #3324 fix — each group's standings renders as its OWN <table>. With the
   default auto layout, every table sized its TEAM column to its own longest
   team name, so the numeric columns (W/L/T/PCT/…) landed at different x
   positions between groups (e.g. a "Charlie FC" pool's columns sat left of a
   "Mountain Wolves" pool's). Fixed layout + a consistent team-column width
   puts every group table's columns in the same place. Long names ellipsize. */
.espn-standings--full {
  table-layout: fixed;
  width: 100%;
  /* Floor the width so all columns keep room on narrow screens; below this the
     wrapper's overflow-x:auto scrolls instead of the columns overlapping
     (regression seen on mobile when fixed layout crammed 8 columns into 100%). */
  min-width: 760px;
}
.espn-standings--full th.espn-st__team,
.espn-standings--full td.espn-st__team {
  width: 34%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PCT column — accent green, slightly heavier */
.espn-standings--full .espn-st__pct {
  color: var(--espn-accent);
  font-weight: 700;
  letter-spacing: .3px;
}

/* Streak column — color by W (green) / L (red) / T (gray) */
.espn-standings--full .espn-st__streak {
  font-weight: 800;
  letter-spacing: .5px;
  text-align: right;
}
.espn-st__streak-w    { color: var(--espn-accent); }
.espn-st__streak-l    { color: #e74c3c; }
.espn-st__streak-t    { color: var(--espn-text-muted); }
.espn-st__streak-none { color: var(--espn-text-soft); font-weight: 600; }

/* --- Point differential column with mini bar visualization -------------- */
.espn-standings--full th.espn-st__diff-header,
.espn-standings--full td.espn-st__diff { width: 110px; padding: 8px 14px; }

.espn-st__diff {
  text-align: center;
  vertical-align: middle;
  position: relative; /* anchor for the absolutely-positioned differential bar */
}
/* #3324 fix — the differential bar is a decoration anchored to the bottom of
   the cell, OUT of the normal flow, so the DIFF value centers on the same
   baseline as the other numeric columns (W/L/T/PF/PA) instead of being pushed
   down below an in-flow bar. */
.espn-st__diff-bar-wrap {
  display: block;
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 4px;
  background: var(--espn-surface-alt);
  border-radius: 999px;
  overflow: hidden;
}
[data-theme="dark"] .espn-st__diff-bar-wrap {
  background: rgba(255, 255, 255, .05);
}
.espn-st__diff-bar {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--espn-accent), #4dd587);
  box-shadow: 0 0 8px rgba(0, 200, 90, .35);
  transition: width .6s cubic-bezier(.34, 1.56, .64, 1);
}
.espn-st__diff--neg .espn-st__diff-bar {
  background: linear-gradient(90deg, #e74c3c, #ff7766);
  box-shadow: 0 0 8px rgba(231, 76, 60, .35);
}
.espn-st__diff--zero .espn-st__diff-bar { background: var(--espn-border); box-shadow: none; }

.espn-st__diff-val {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--espn-text);
  font-variant-numeric: tabular-nums;
}
.espn-st__diff--pos  .espn-st__diff-val { color: var(--espn-accent); }
.espn-st__diff--neg  .espn-st__diff-val { color: #e74c3c; }
.espn-st__diff--zero .espn-st__diff-val { color: var(--espn-text-muted); }

/* --- Stat callouts above the standings table -------------------------- */
.espn-standings-callouts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--espn-border);
}
@media (max-width: 720px) {
  .espn-standings-callouts {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 14px;
  }
}

.espn-standings-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--espn-surface-alt);
  border: 1px solid var(--espn-border);
  border-radius: 12px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
[data-theme="dark"] .espn-standings-callout {
  background: rgba(255, 255, 255, .03);
}
.espn-standings-callout:hover {
  border-color: var(--espn-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 200, 90, .12);
}
.espn-standings-callout.is-empty { opacity: .55; }
.espn-standings-callout.is-empty:hover {
  transform: none;
  border-color: var(--espn-border);
  box-shadow: none;
}

.espn-standings-callout__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--espn-accent);
  background: var(--espn-accent-soft);
  border-radius: 11px;
  box-shadow: 0 0 0 1px rgba(0, 200, 90, .18) inset;
}
.espn-standings-callout--streak  .espn-standings-callout__icon { color: #f0a800; background: rgba(240, 168, 0, .14); box-shadow: 0 0 0 1px rgba(240, 168, 0, .25) inset; }
.espn-standings-callout--defense .espn-standings-callout__icon { color: #3b8bff; background: rgba(59, 139, 255, .14); box-shadow: 0 0 0 1px rgba(59, 139, 255, .25) inset; }

.espn-standings-callout__body { min-width: 0; flex: 1; }
.espn-standings-callout__label {
  margin: 0 0 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--espn-text-muted);
}
.espn-standings-callout__team {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--espn-text);
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.espn-standings-callout__team span {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--espn-accent);
  font-variant-numeric: tabular-nums;
}
.espn-standings-callout--streak  .espn-standings-callout__team span { color: #f0a800; }
.espn-standings-callout--defense .espn-standings-callout__team span { color: #3b8bff; }
.espn-standings-callout__team--muted { color: var(--espn-text-muted); font-weight: 600; }

/* Footer with rule + live indicator + last-updated timestamp */
.espn-standings-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 14px 20px;
  border-top: 1px solid var(--espn-border);
  font-size: 12px;
  color: var(--espn-text-muted);
  font-weight: 600;
}
.espn-standings-footer__rule  { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; }
.espn-standings-footer__rule .mdi { color: var(--espn-accent); font-size: 14px; }
.espn-standings-footer__live  { display: inline-flex; align-items: center; gap: 6px; }
.espn-standings-footer__updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--espn-border);
  line-height: 1.4;
}
.espn-standings-footer__updated time { color: var(--espn-text); font-weight: 700; }
.espn-iconbtn--sm { width: 26px; height: 26px; border-radius: 6px; }
.espn-iconbtn--sm .mdi { font-size: 14px; }

@media (max-width: 700px) {
  .espn-standings--full { font-size: 12px; }
  .espn-standings--full thead th { padding: 10px 6px; }
  .espn-standings--full tbody td { padding: 10px 6px; }
  .espn-st__rank-badge { width: 24px; height: 24px; font-size: 11px; }
  .espn-standings-header { padding: 12px 14px; gap: 8px; }
  .espn-standings-header__legend { font-size: 10px; gap: 10px; }
}

/* --- Schedule page: header toolbar + day groups + game cards ----------- */
.espn-panel--schedule {
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  border-radius: 12px;
  /* overflow: clip — same visual containment as `hidden` but does NOT create a
     scroll context, so the sticky day-header inside still works. */
  overflow: clip;
}
[data-theme="dark"] .espn-panel--schedule { background: rgba(17,22,28,.85); }

/* Schedule header — Title + tabs + date toolbar in a single row */
.espn-schedule-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--espn-border);
}
.espn-schedule-header .espn-panel__title {
  margin-right: 0;
  padding-right: 14px;
  border-right: 1px solid var(--espn-border);
  line-height: 1.4;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.espn-schedule-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 1px solid var(--espn-border);
  border-radius: 10px;
  overflow: hidden;
}
.espn-schedule-tabs button {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--espn-border);
  background: transparent;
  color: var(--espn-text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color .25s ease, color .25s ease;
}
.espn-schedule-tabs button:last-child { border-right: 0; }
.espn-schedule-tabs button:hover { color: var(--espn-text); }
.espn-schedule-tabs button.is-active {
  color: var(--espn-accent);
  background: var(--espn-accent-soft);
}

.espn-schedule-toolbar {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.espn-iconbtn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--espn-border);
  background: var(--espn-surface);
  color: var(--espn-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.espn-iconbtn:hover { background: var(--espn-accent-soft); border-color: var(--espn-accent); color: var(--espn-accent); }
.espn-iconbtn[disabled] {
  opacity: .35;
  cursor: not-allowed;
  background: var(--espn-surface);
  border-color: var(--espn-border);
  color: var(--espn-text-muted);
}
.espn-iconbtn[disabled]:hover { background: var(--espn-surface); border-color: var(--espn-border); color: var(--espn-text-muted); }
.espn-schedule-datepill {
  display: inline-flex; align-items: center; gap: 8px;
  /* margin-bottom: 0 overrides Bootstrap's default `label { margin-bottom: .5rem }`.
     Since switching the pill from <span> to <label> for accessibility, the
     inherited margin was pushing the pill 8px up relative to the surrounding
     iconbtns and export button in the toolbar's flex row. */
  margin-bottom: 0;
  padding: 8px 14px;
  border: 1px solid var(--espn-border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .8px;
  color: var(--espn-text);
  white-space: nowrap;
}
.espn-schedule-datepill .mdi { color: var(--espn-accent); }

.espn-schedule-export {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--espn-border);
  border-radius: 8px;
  background: var(--espn-surface);
  color: var(--espn-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .2s ease;
}
.espn-schedule-export:hover {
  background: var(--espn-accent-soft);
  border-color: var(--espn-accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 200, 90, .22);
}

/* DESKTOP layout — single row: [title] [tabs] ... [toolbar] [export]
   Reorder the new "export outside toolbar" markup to match the original look. */
.espn-schedule-header .espn-panel__title    { order: 0; }
.espn-schedule-header .espn-schedule-tabs   { order: 1; }
.espn-schedule-header .espn-schedule-toolbar { order: 2; margin-left: auto; }
.espn-schedule-header .espn-schedule-export { order: 3; }

/* MOBILE layout — stack into three rows:
   [title ... export] / [tabs] / [toolbar] */
@media (max-width: 720px) {
  .espn-schedule-header .espn-panel__title    { order: 0; }
  .espn-schedule-header .espn-schedule-export { order: 1; margin-left: auto; }
  .espn-schedule-header .espn-schedule-tabs    { order: 2; flex-basis: 100%; }
  .espn-schedule-header .espn-schedule-toolbar { order: 3; flex-basis: 100%; margin-left: 0; justify-content: flex-start; }
  /* Tabs fill their full row as equal segments — kills the dead white area
     that used to sit inside the pill after the FILTERS button (#3277 mobile). */
  .espn-schedule-header .espn-schedule-tabs { display: flex; }
  .espn-schedule-header .espn-schedule-tabs button {
    flex: 1 1 0;
    justify-content: center;
    padding: 8px 6px;
  }
  /* Filters panel (#3277 mobile): STATUS takes a full row; TEAM stretches its
     row all the way to the Clear button; the styled pills fill their groups. */
  .espn-schedule-filters { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .espn-schedule-filters__group { flex: 1 1 100%; min-width: 0; }
  .espn-schedule-filters__group:has([data-filter-dd="team"]) { flex: 1 1 0; }
  .espn-filterselect .espn-divselect { width: 100%; }
  .espn-schedule-filters__clear { flex: 0 0 auto; }
}

/* Collapsible filters panel under the header */
.espn-schedule-filters {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--espn-border);
  background: var(--espn-surface-alt);
}
[data-theme="dark"] .espn-schedule-filters { background: rgba(255,255,255,.02); }
.espn-schedule-filters[hidden] { display: none; }
.espn-schedule-filters__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}
.espn-schedule-filters__group label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--espn-text-muted);
}
.espn-schedule-filters__group select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--espn-surface);
  color: var(--espn-text);
  border: 1px solid var(--espn-border);
  border-radius: 8px;
  padding: 8px 28px 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300882a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.espn-schedule-filters__clear {
  appearance: none;
  border: 1px solid var(--espn-border);
  background: var(--espn-surface);
  color: var(--espn-text-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.espn-schedule-filters__clear:hover { color: var(--espn-accent); border-color: var(--espn-accent); }
/* Styled Status/Team dropdowns (#3277): reuse the Groups dropdown component
   inside the filters panel — full-width pill, menu opens left-aligned and at
   least as wide as the pill. The native selects stay hidden as value stores. */
.espn-filterselect { width: 100%; }
.espn-filterselect .espn-divselect {
  display: flex;
  width: 100%;
  /* The header divisions dropdown caps .espn-divselect at max-width:140px on
     mobile — the filter pills must NOT inherit that cap (full-width pills). */
  max-width: none;
  justify-content: space-between;
  align-items: center;
}
.espn-filterselect .espn-divselect__menu {
  left: 0;
  right: auto;
  min-width: 100%;
  max-height: 60vh;
}
.espn-filterselect .espn-divselect__item { white-space: nowrap; }

/* Day-grouped list */
.espn-schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.espn-schedule-daygroup {
  padding: 14px 14px 6px;
  border-bottom: 1px solid var(--espn-border);
}
.espn-schedule-daygroup:last-child { border-bottom: 0; }
.espn-schedule-day {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -18px 12px;          /* extend bg edge-to-edge under the sticky band */
  padding: 12px 18px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--espn-accent);
  background: var(--espn-surface);
  border-bottom: 1px solid var(--espn-border);
  /* Soft shadow that hints "I'm above the cards below" */
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
[data-theme="dark"] .espn-schedule-day {
  background: rgba(17, 22, 28, .92);
  border-bottom-color: rgba(255, 255, 255, .06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

/* Schedule card — pill row at top, then horizontal:
   [home team]  [home score]  |  [time + address]  |  [away score]  [away team]
   Vertical borders frame the center block. */
.espn-schedule-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 36px 20px 18px;          /* top padding leaves room for the floating pill */
  margin-bottom: 10px;
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  border-radius: 10px;
  border-left: 4px solid transparent;
  min-height: 96px;
  transition: border-color .25s ease, background-color .25s ease;
}
[data-theme="dark"] .espn-schedule-card { background: rgba(255,255,255,.02); }
.espn-schedule-card.is-final    { border-left-color: var(--espn-accent); }
.espn-schedule-card.is-upcoming { border-left-color: rgba(148,160,173,.55); }
.espn-schedule-card.is-live {
  border-left-color: #f3b05a;
  border-left-width: 5px;
  box-shadow: 0 0 0 1px rgba(243, 176, 90, .18);
}

/* Winner-aware accent: when the AWAY team won, move the green accent
   stripe + glow to the right side of the card so it visually points at
   the winner instead of always sitting on the left. The left side
   reverts to the regular 1px card outline so the box stays closed. */
.espn-schedule-card.is-final[data-winner="away"] {
  border-left: 1px solid var(--espn-border);
  border-right: 4px solid var(--espn-accent);
}
/* A tied / no-winner final shows no accent stripe — just the regular
   1px outline on both sides. */
.espn-schedule-card.is-final:not([data-winner]) {
  border-left: 1px solid var(--espn-border);
}

/* Subtle status-tinted glow that flanks the winning side of each card,
   gently breathing. Left by default; flipped to the right when the away
   team won; hidden entirely for ties. Light enough to feel atmospheric. */
.espn-schedule-card::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 35%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: linear-gradient(90deg,
    var(--_glow, rgba(148,160,173,.10)) 0%,
    transparent 100%);
  filter: blur(8px);
  animation: espn-card-breathe 5s ease-in-out infinite;
  will-change: opacity;
}
.espn-schedule-card.is-final[data-winner="away"]::after {
  left: auto;
  right: 0;
  background: linear-gradient(270deg,
    var(--_glow, rgba(148,160,173,.10)) 0%,
    transparent 100%);
}
.espn-schedule-card.is-final:not([data-winner])::after { display: none; }
.espn-schedule-card.is-final    { --_glow: rgba(0,200,90,.18); }
.espn-schedule-card.is-live     { --_glow: rgba(243,176,90,.32); }
.espn-schedule-card.is-upcoming { --_glow: rgba(148,160,173,.10); }
.espn-schedule-card.is-final::after    { animation-duration: 4.5s; }
.espn-schedule-card.is-live::after     { animation-duration: 1.8s; }   /* faster for "active" feel */
.espn-schedule-card.is-upcoming::after { animation-duration: 6s; }

.espn-schedule-card > * { position: relative; z-index: 1; }

@keyframes espn-card-breathe {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}
[data-theme="light"] .espn-schedule-card::after { opacity: .5; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) {
  .espn-schedule-card::after { animation: none; opacity: .6; }
}

/* Status pill — absolute, sits in the top-left corner above all card content */
.espn-schedule-card__pill {
  position: absolute;
  top: 12px; left: 14px;
  font-size: 9px;
  letter-spacing: 1.4px;
  padding: 3px 8px;
}

/* Team blocks — flex children that grow */
.espn-schedule-card__team {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.espn-schedule-card__team--away {
  justify-content: flex-end;
  text-align: right;
}
.espn-schedule-card__teamtext { min-width: 0; }
.espn-schedule-card__name {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--espn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.espn-schedule-card__record {
  margin: 0;
  font-size: 11px;
  color: var(--espn-text-muted);
  font-weight: 700;
}

/* Score — fixed width box on each side of the center */
.espn-schedule-card__score {
  flex: 0 0 56px;
  font-size: 28px;
  font-weight: 700;
  color: var(--espn-text-muted);
  text-align: center;
  line-height: 1;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.espn-schedule-card__score.is-winner { color: var(--espn-text); }
.espn-winner-arrow { color: var(--espn-accent); font-size: 14px; }

/* Center column — fixed-width, vertical borders, time on top + address below */
.espn-schedule-card__center {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 16px;
  border-left:  1px solid var(--espn-border);
  border-right: 1px solid var(--espn-border);
  text-align: center;
  min-height: 64px;
  align-self: stretch;
}
.espn-schedule-card__time {
  font-size: 18px;
  font-weight: 700;
  color: var(--espn-text);
  letter-spacing: .2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.espn-schedule-card__time small {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--espn-accent);
  margin-left: 4px;
}
.espn-schedule-card__loc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  text-align: center;
  line-height: 1.35;
  max-width: 100%;
}
.espn-schedule-card__loc-venue {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--espn-text);
  letter-spacing: .2px;
}
.espn-schedule-card__loc-venue .mdi {
  color: var(--espn-accent);
  font-size: 14px;
  flex-shrink: 0;
}
.espn-schedule-card__loc-venue strong {
  font-weight: 700;
  color: inherit;
}
.espn-schedule-card__loc-addr {
  font-size: 11px;
  font-weight: 400;
  color: var(--espn-text-muted);
  line-height: 1.35;
  max-width: 240px;
}
.espn-schedule-card__loc:hover .espn-schedule-card__loc-venue strong {
  color: var(--espn-accent);
}

/* =========================================================================
   MOBILE schedule cards (≤720px) — restructure into a 3-row grid:
     Row 1: [ home team             | home score ]
     Row 2: [ center (time + place, full-width)  ]
     Row 3: [ away team             | away score ]
   ========================================================================= */
@media (max-width: 720px) {
  .espn-schedule-card {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 12px;
    padding: 56px 14px 16px !important;        /* room for pill + notes chip on top */
    min-height: auto !important;
    align-items: center;
  }
  /* Drop the division tag onto its own row below the pill so it doesn't overlap */
  .espn-schedule-card:has(.espn-schedule-card__divtag) {
    padding-top: 76px !important;
  }
  .espn-schedule-card__divtag {
    top: 38px !important;
    left: 12px !important;
    max-width: calc(100% - 24px);
  }

  /* Home team — top row, left */
  .espn-schedule-card__team--home {
    grid-row: 1;
    grid-column: 1;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* Home score — top row, right */
  .espn-schedule-card__team--home + .espn-schedule-card__score {
    grid-row: 1;
    grid-column: 2;
    flex: 0 0 auto !important;
    font-size: 22px !important;
    min-width: 28px;
  }

  /* Center info (time + location + optional OT) spans both columns */
  .espn-schedule-card__center {
    grid-row: 2;
    grid-column: 1 / -1;
    flex: 1 1 auto !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 1px solid var(--espn-border);
    border-bottom: 1px solid var(--espn-border);
    padding: 10px 6px !important;
    min-height: 0 !important;
    align-self: stretch;
  }

  /* Away team — bottom row, left; flip so avatar appears on the LEFT like home */
  .espn-schedule-card__team--away {
    grid-row: 3;
    grid-column: 1;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    text-align: left !important;
  }

  /* Away score — bottom row, right */
  .espn-schedule-card__center + .espn-schedule-card__score {
    grid-row: 3;
    grid-column: 2;
    flex: 0 0 auto !important;
    font-size: 22px !important;
    min-width: 28px;
  }

  /* Pills sit in the top padding strip, smaller and tighter so they don't crowd */
  .espn-schedule-card__pill {
    top: 12px !important;
    left: 12px !important;
    font-size: 9px;
    padding: 3px 8px;
    line-height: 1;
  }
  .espn-schedule-card__notes {
    top: 10px;
    right: 10px;
    max-width: 120px;
    padding: 3px 9px 3px 7px;
    font-size: 10px;
  }
  .espn-schedule-card__notes .mdi { font-size: 12px; }

  /* Truncate long team names */
  .espn-schedule-card__teamtext { flex: 1 1 0; min-width: 0; }
  .espn-schedule-card__name { font-size: 13px; }
}

@media (max-width: 420px) {
  .espn-schedule-card { padding: 54px 12px 14px !important; }
  .espn-schedule-card__team--home + .espn-schedule-card__score,
  .espn-schedule-card__center + .espn-schedule-card__score { font-size: 20px !important; }
  .espn-schedule-card__time { font-size: 16px; }
  .espn-schedule-card__loc-venue { font-size: 11px; }
  .espn-schedule-card__loc-addr { font-size: 10.5px; max-width: 100%; }
  .espn-schedule-card__notes { max-width: 100px; }
  text-decoration: underline;
  text-decoration-color: rgba(0,136,42,.4);
  text-underline-offset: 2px;
}

/* Mobile breakpoint — only collapses to vertical when truly narrow */
@media (max-width: 700px) {
  .espn-schedule-card {
    flex-wrap: wrap;
    padding: 14px 16px;
  }
  .espn-schedule-card__pill { position: static; order: -1; flex: 0 0 100%; align-self: flex-start; }
  .espn-schedule-card__team       { flex: 1 1 50%; }
  .espn-schedule-card__center {
    flex: 0 0 100%;
    border-left: 0; border-right: 0;
    border-top: 1px solid var(--espn-border);
    border-bottom: 1px solid var(--espn-border);
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 0;
    margin: 4px 0;
  }
  .espn-schedule-card__team--away { flex-direction: row-reverse; justify-content: flex-start; text-align: left; }
  .espn-schedule-card__score { font-size: 22px; flex: 0 0 40px; }
}

/* Status legend at the bottom */
.espn-schedule-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 14px 18px;
  border-top: 1px solid var(--espn-border);
  font-size: 12px;
  color: var(--espn-text-muted);
  font-weight: 700;
}
.espn-schedule-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.espn-schedule-legend__tz { margin-left: auto; }
.espn-status-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.espn-status-dot--final     { background: var(--espn-accent); box-shadow: 0 0 6px rgba(0,200,90,.5); }
.espn-status-dot--live      { background: #f3b05a; box-shadow: 0 0 6px rgba(243,176,90,.5); }
.espn-status-dot--upcoming  { background: #94a0ad; }

/* --- Next Games panel: field grass with parallax sunlight -------------- */
.espn-panel--games {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Field base — subtle mowing stripes + green tonal gradient.
   Two slow-drifting blurred green highlights pass diagonally for parallax. */
.espn-field-grass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background:
    /* Mowing stripes (the broadcast camera "lawn pattern") */
    repeating-linear-gradient(0deg,
      rgba(0,200,90,0)    0,
      rgba(0,200,90,0)    24px,
      rgba(0,200,90,.05) 24px,
      rgba(0,200,90,.05) 48px),
    /* Field tonal base (top → bottom) */
    linear-gradient(180deg,
      rgba(0,136,42,.03) 0%,
      rgba(0,136,42,.12) 100%);
  opacity: .9;
}
[data-theme="light"] .espn-field-grass { opacity: .5; }

/* Diagonal moving sunlight highlight — primary layer */
.espn-field-grass__sun {
  position: absolute;
  width: 60%;
  aspect-ratio: 1.2 / 1;
  top: -30%;
  left: -30%;
  background: radial-gradient(ellipse at center,
    rgba(0,200,90,.35)  0%,
    rgba(0,200,90,.12) 35%,
    rgba(0,200,90,0)   70%);
  filter: blur(35px);
  border-radius: 50%;
  animation: espn-grass-sun 28s linear infinite;
  will-change: transform;
}
/* Slower second sunlight for parallax depth — opposite direction */
.espn-field-grass__sun--alt {
  width: 50%;
  top: -10%;
  left: 60%;
  background: radial-gradient(ellipse at center,
    rgba(0,255,120,.20) 0%,
    rgba(0,200,90,.06)  35%,
    rgba(0,200,90,0)    70%);
  animation: espn-grass-sun-alt 42s linear infinite;
  filter: blur(45px);
}

@keyframes espn-grass-sun {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(220%, 220%); }
}
@keyframes espn-grass-sun-alt {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-220%, 220%); }
}

.espn-panel--games > *:not(.espn-field-grass) {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .espn-field-grass__sun,
  .espn-field-grass__sun--alt { animation: none; }
}

/* --- Generic panel inside the body card --------------------------------- */
.espn-panel {
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  border-radius: 12px;
  /* overflow: clip — visual containment without creating a scroll context
     (so descendant `position: sticky` still works as expected). */
  overflow: clip;
}
[data-theme="dark"] .espn-panel { background: rgba(17,22,28,.75); }
.espn-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--espn-border);
}
.espn-panel__title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--espn-text);
}
.espn-panel__link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--espn-accent);
  text-decoration: none;
  border: 1px solid var(--espn-border);
  padding: 6px 10px;
  border-radius: 8px;
  transition: background-color .25s ease, border-color .25s ease;
}
.espn-panel__link:hover { background: var(--espn-accent-soft); border-color: var(--espn-accent); }
.espn-panel__empty {
  padding: 20px;
  text-align: center;
  color: var(--espn-text-muted);
  font-size: 13px;
}

/* --- Team rows (left panel) — each row is its own bordered card --------- */
.espn-team-list {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.espn-team-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  /* Subtle green glow fading from the left border, then transparent */
  background:
    linear-gradient(90deg,
      rgba(0,136,42,.08)  0%,
      rgba(0,136,42,.03) 22%,
      transparent        45%) ,
    var(--espn-surface);
  border: 1px solid var(--espn-border);
  border-radius: 10px;
  border-left: 3px solid var(--espn-accent);   /* green left bar accent */
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
  cursor: default;
}
[data-theme="dark"] .espn-team-row {
  background:
    linear-gradient(90deg,
      rgba(0,136,42,.14)  0%,
      rgba(0,136,42,.05) 22%,
      transparent        45%) ,
    rgba(255,255,255,.02);
}

.espn-team-row:hover {
  background:
    linear-gradient(90deg,
      rgba(0,136,42,.16)  0%,
      rgba(0,136,42,.06) 30%,
      transparent        60%) ,
    var(--espn-surface);
  border-color: var(--espn-accent);
  box-shadow: 0 0 0 1px var(--espn-accent) inset, 0 4px 14px rgba(0,136,42,.10);
}
[data-theme="dark"] .espn-team-row:hover {
  background:
    linear-gradient(90deg,
      rgba(0,136,42,.22)  0%,
      rgba(0,136,42,.10) 30%,
      transparent        60%) ,
    rgba(0,136,42,.03);
}

.espn-team-row__body { flex: 1; min-width: 0; }
.espn-team-row__name {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--espn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.espn-team-row__sub {
  margin: 0;
  font-size: 12px;
  color: var(--espn-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Favorite-team star button — sits between body and chevron */
.espn-team-row__fav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--espn-text-muted);
  cursor: pointer;
  transition: background .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.espn-team-row__fav:hover {
  background: var(--espn-surface-alt);
  transform: scale(1.12);
}
.espn-team-row__fav:active { transform: scale(.95); }
.espn-team-row__fav .icon { display: inline-flex; align-items: center; justify-content: center; }
.espn-team-row__fav .mdi {
  font-size: 20px;
  line-height: 1;
  transition: color .25s ease, filter .25s ease;
}
/* Color the star based on whichever class JS toggled on */
.espn-team-row__fav .mdi-star-outline,
.espn-team-row__fav .text-primary { color: var(--espn-text-muted) !important; }
.espn-team-row__fav .mdi-star,
.espn-team-row__fav .text-mint-green {
  color: #e84a4b !important;
  filter: drop-shadow(0 0 6px rgba(232, 74, 75, .45));
}

/* Plain chevron — no circle / border */
.espn-team-row__chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  color: var(--espn-text-muted);
  transition: transform .25s ease, color .25s ease;
}
.espn-team-row__chevron svg { width: 18px; height: 18px; }
.espn-team-row:hover .espn-team-row__chevron {
  color: var(--espn-accent);
  transform: translateX(2px);
}

/* --- Team avatar (logo image OR initials fallback) ---------------------- */
.espn-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  user-select: none;
}
.espn-avatar--sm { width: 26px; height: 26px; font-size: 11px; border-radius: 7px; }
.espn-avatar--md { width: 44px; height: 44px; font-size: 14px; border-radius: 10px; }
.espn-avatar--lg { width: 60px; height: 60px; font-size: 18px; border-radius: 12px; }

/* Logo-image variant — uses the helmet palette as a fallback canvas */
.espn-avatar--img {
  background: var(--helmet-bg, var(--espn-accent-soft));
  color: var(--helmet-color, var(--espn-accent));
}
.espn-avatar--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Initials variant — uses the team's helmet palette tints (same as image variant) */
.espn-avatar--initials {
  /* #3277 feedback: neutral #f5f5f5 fallback tile (was soft green); teams with
     an assigned helmet palette keep their own colors via --helmet-bg. */
  background: var(--helmet-bg, var(--espn-chip-bg));
  color: var(--helmet-color, var(--espn-accent));
}
.espn-avatar--initials > span {
  display: inline-block;
  line-height: 1;
}

/* TBD variant — muted slot with a soft "?" character */
.espn-avatar--tbd {
  background: var(--espn-surface-alt);
  color: var(--espn-text-soft);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0;
}
[data-theme="dark"] .espn-avatar--tbd { background: rgba(255,255,255,.04); }
.espn-avatar--sm.espn-avatar--tbd { font-size: 13px; }
.espn-avatar--md.espn-avatar--tbd { font-size: 18px; }
.espn-avatar--lg.espn-avatar--tbd { font-size: 24px; }

/* When the logo image fails to load, the inline onerror replaces the <img>
   with a <span>; CSS class is also flipped to initials in that handler. */

/* --- Panel date label (Next Games header) ------------------------------- */
.espn-panel__date {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  color: var(--espn-text-muted);
  border: 1px solid var(--espn-border);
  border-radius: 8px;
  padding: 6px 10px;
}
.espn-panel__date .mdi { color: var(--espn-accent); font-size: 14px; }

/* --- Status pills (Final / Upcoming / In Progress) ----------------------
   Compact rounded label with a small colored dot inline before the text.
   Inline-flex + gap keeps the dot perfectly aligned regardless of font size. */
.espn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--espn-border);
  background: var(--espn-surface);
  color: var(--espn-text-muted);
  line-height: 1;
  position: relative;
}
.espn-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

/* Status-specific colors — both the dot (currentColor) and the pill text+bg */
.espn-pill--final    {
  color: var(--espn-accent);
  border-color: var(--espn-accent);
  background: var(--espn-accent-soft);
}
.espn-pill--upcoming { color: #8b94a0; }
.espn-pill--live     {
  color: #c97800;
  border-color: #f3b05a;
  background: rgba(243,176,90,.12);
}

/* Live game pulse — the dot on the "In Progress" pill pulses with an amber
   shockwave radiating outward. */
.espn-pill--live::before {
  background: #f3b05a !important;
  box-shadow: 0 0 0 0 rgba(243, 176, 90, .8);
  animation: espn-pill-live-pulse 1.4s ease-out infinite;
}
@keyframes espn-pill-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(243, 176, 90, .85); }
  70%  { box-shadow: 0 0 0 8px rgba(243, 176, 90,  0); }
  100% { box-shadow: 0 0 0 0 rgba(243, 176, 90,  0); }
}

/* --- Game card (Next Games rows) ---------------------------------------- */
.espn-game-list { list-style: none; margin: 0; padding: 0; }
.espn-game-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--espn-border);
  overflow: hidden;
  isolation: isolate;
}
/* Children sizing — home grows, center fixed, away grows, scores fixed at end */
.espn-game-card .espn-game-card__team--home { flex: 1 1 0; min-width: 0; }
.espn-game-card .espn-game-card__center     { flex: 0 0 auto; }
.espn-game-card .espn-game-card__team--away { flex: 1 1 0; min-width: 0; justify-content: flex-end; text-align: right; }
.espn-game-card .espn-game-card__scores     { flex: 0 0 auto; min-width: 60px; }
.espn-game-card .espn-game-card__loc        { flex: 0 0 100%; order: 99; }
.espn-game-card:last-child { border-bottom: 0; }

/* Idle subtle accent — a thin green line on the left edge (no hover effect) */
.espn-game-card::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,200,90,.55) 50%,
    transparent 100%);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

.espn-game-card > * { position: relative; z-index: 1; }

/* Subtle breathing glow on the FINAL pill's dot for "live data" feel */
.espn-pill--final::before {
  box-shadow: 0 0 0 0 rgba(0,200,90,.5);
  animation: espn-pill-breathe 2.4s ease-in-out infinite;
}
@keyframes espn-pill-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,200,90,.0); }
  50%      { box-shadow: 0 0 0 4px rgba(0,200,90,.18); }
}

/* IMPORTANT: schedule-card pill must be ABSOLUTELY positioned at the top-left.
   Re-declared here AFTER `.espn-pill { position: relative; }` so this wins. */
.espn-schedule-card .espn-schedule-card__pill {
  position: absolute;
  top: 12px; left: 14px;
  font-size: 9px;
  letter-spacing: 1.4px;
  padding: 3px 8px;
}

@media (prefers-reduced-motion: reduce) {
  .espn-game-card,
  .espn-game-card::before,
  .espn-pill--final::before { animation: none !important; transition: none !important; }
}

.espn-game-card__team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.espn-game-card__team--away { justify-content: flex-end; text-align: right; }
.espn-game-card__helmet {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--espn-accent-soft);
  color: var(--espn-accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.espn-game-card__helmet .mdi { font-size: 26px; }
.espn-game-card__teamname { min-width: 0; }
.espn-game-card__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--espn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.espn-game-card__record { margin: 2px 0 0; font-size: 12px; color: var(--espn-text-muted); }
.espn-game-card__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 110px;
  padding: 0 8px;
}
.espn-game-card__time {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--espn-text);
  border: 1px solid var(--espn-border);
  border-radius: 6px;
  padding: 4px 10px;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}

/* Scores at the far-right of the card — stacked vertically (home top / away below) */
.espn-game-card__scores {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.espn-game-card__score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: var(--espn-text-muted);
  line-height: 1;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
}
.espn-game-card__score.is-winner { color: var(--espn-text); }
.espn-winner-arrow { color: var(--espn-accent); font-size: 13px; }
/* =========================================================================
   MOBILE game card (Next Games on phone) — 4-row grid:
     Row 1: [ home team             | home score ]
     Row 2: [ time + status pill, centered, full width ]
     Row 3: [ away team             | away score ]
     Row 4: [ location, full width ]
   ========================================================================= */
@media (max-width: 720px) {
  .espn-game-card {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto auto;
    column-gap: 12px;
    row-gap: 10px !important;
    padding: 14px !important;
    flex-wrap: nowrap;
  }

  .espn-game-card .espn-game-card__team--home {
    grid-row: 1;
    grid-column: 1;
    flex: 0 1 auto !important;
    justify-content: flex-start;
    text-align: left;
  }

  /* Center (time + status pill) spans full width, row 2 */
  .espn-game-card .espn-game-card__center {
    grid-row: 2;
    grid-column: 1 / -1;
    flex: 1 1 auto !important;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--espn-border);
    border-bottom: 1px solid var(--espn-border);
    min-width: 0;
  }
  .espn-game-card__time { font-size: 16px; padding: 3px 10px; }

  .espn-game-card .espn-game-card__team--away {
    grid-row: 3;
    grid-column: 1;
    flex: 0 1 auto !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    text-align: left !important;
  }

  /* Split the stacked-scores wrapper so each score lives in its own grid cell */
  .espn-game-card .espn-game-card__scores {
    display: contents;
    min-width: 0 !important;
  }
  .espn-game-card .espn-game-card__scores .espn-game-card__score:nth-of-type(1) {
    grid-row: 1;
    grid-column: 2;
    font-size: 22px;
    justify-self: end;
  }
  .espn-game-card .espn-game-card__scores .espn-game-card__score:nth-of-type(2) {
    grid-row: 3;
    grid-column: 2;
    font-size: 22px;
    justify-self: end;
  }

  /* Location — full-width bottom row */
  .espn-game-card .espn-game-card__loc {
    grid-row: 4;
    grid-column: 1 / -1;
    order: 0 !important;
    flex: none !important;
    margin-top: 0;
    font-size: 11.5px;
  }

  /* Truncate long team names */
  .espn-game-card__title { font-size: 12px; }
}

/* Keep this last so it doesn't override the mobile rules above */
.espn-game-card__loc {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--espn-text-muted);
  margin-top: 4px;
  text-decoration: none;
  transition: color .2s ease;
}
.espn-game-card__loc .mdi { color: var(--espn-accent); font-size: 16px; }
.espn-game-card__loc:hover {
  color: var(--espn-accent);
  text-decoration: underline;
  text-decoration-color: rgba(0,136,42,.4);
  text-underline-offset: 2px;
}
/* "Open in new tab" indicator — hidden by default, fades in on hover */
.espn-game-card__loc-ext {
  font-size: 14px !important;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s ease, transform .25s ease;
  margin-left: auto;
  color: var(--espn-accent);
}
.espn-game-card__loc:hover .espn-game-card__loc-ext {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 700px) {
  .espn-game-card { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  .espn-game-card__team--away { justify-content: flex-start; text-align: left; }
  .espn-game-card__center { flex-direction: row; min-width: 0; }
}

/* --- Standings preview table -------------------------------------------- */
.espn-standings-wrap { padding: 4px 4px 8px; overflow-x: auto; }
.espn-standings {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.espn-standings thead th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--espn-text-muted);
  text-align: center;
  padding: 10px 8px;
  border-bottom: 1px solid var(--espn-border);
  background: var(--espn-surface-alt);
}
[data-theme="dark"] .espn-standings thead th { background: rgba(255,255,255,.02); }
.espn-standings tbody td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid var(--espn-border);
  color: var(--espn-text);
}
.espn-standings tbody tr:last-child td { border-bottom: 0; }
.espn-standings__rank { width: 36px; }
.espn-standings__rank, .espn-standings__team { text-align: left; }
.espn-standings__rankbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: transparent;
  border: 1px solid var(--espn-border);
  color: var(--espn-text);
  border-radius: 5px;
  font-weight: 900;
  font-size: 11px;
}
.espn-standings tbody tr.is-playoff  .espn-standings__rankbadge { border-color: var(--espn-accent); color: var(--espn-accent); }
.espn-standings tbody tr.is-wildcard .espn-standings__rankbadge { border-color: #3b8bff;            color: #3b8bff; }

/* W column — header + values both in accent green to match PCT */
.espn-standings__w-header,
.espn-standings__w { color: var(--espn-accent); font-weight: 800; }
.espn-standings__team {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
  white-space: nowrap;
}
.espn-standings__helmet {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--espn-accent-soft);
  color: var(--espn-accent);
}
.espn-standings__helmet .mdi { font-size: 14px; }
.espn-standings__pct { color: var(--espn-accent); font-weight: 800; }

/* =========================================================================
   Horizontal scroll hint — for tables wider than their container on mobile.
   Shows a soft right-edge fade + bouncing arrow chip. Auto-hides after the
   user scrolls. JS adds `is-scrollable` when overflow is present and
   `is-scrolled` once the user has scrolled past a small threshold.
   ========================================================================= */
.espn-scroll-hint {
  position: relative;
}
.espn-scroll-hint::before,
.espn-scroll-hint::after {
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 2;
}
.espn-scroll-hint.is-scrollable::before,
.espn-scroll-hint.is-scrollable::after { opacity: 1; }
.espn-scroll-hint.is-scrolled::before,
.espn-scroll-hint.is-scrolled::after   { opacity: 0; }

/* Fade gradient on the right edge */
.espn-scroll-hint::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(90deg, transparent 0%, var(--espn-surface) 75%);
}
[data-theme="dark"] .espn-scroll-hint::before {
  background: linear-gradient(90deg, transparent 0%, rgba(17, 22, 28, .98) 75%);
}

/* Bouncing right-arrow chip */
.espn-scroll-hint::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  color: var(--espn-accent);
  background: var(--espn-accent-soft);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(0, 200, 90, .35) inset,
    0 4px 14px rgba(0, 200, 90, .22);
  animation: espn-scroll-hint-bounce 1.4s ease-in-out infinite;
}
@keyframes espn-scroll-hint-bounce {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .espn-scroll-hint::after { animation: none !important; }
}

/* =========================================================================
   "Stadium opening ceremony" page-load sequence
   ========================================================================= */

/* --- Easing tokens ------------------------------------------------------ */
/* Smooth ease-out               : (.2,.8,.25,1)
   Springy elastic with overshoot: (.34,1.56,.64,1)  — bounces past 100% then settles
   Crisp drop                    : (.5,0,.2,1) */

@keyframes espn-fade-down {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes espn-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes espn-slide-in-left {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Elastic pop with overshoot — feels alive */
@keyframes espn-bounce-in {
  0%   { opacity: 0; transform: scale(.78) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Spotlight sweep — bright green vertical band moves across the card */
@keyframes espn-spotlight-sweep {
  0%   { transform: translateX(-110%) skewX(-18deg); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
}
/* Active-tab energize pulse at load */
@keyframes espn-tab-energize {
  0%   { box-shadow:
           inset 4px 0 0 0 var(--espn-accent),
           inset 0 -2px 0 0 var(--espn-accent),
           inset 0 0 28px rgba(0,136,42,.10),
           0 0 14px rgba(0,200,60,.10); }
  35%  { box-shadow:
           inset 4px 0 0 0 var(--espn-accent),
           inset 0 -2px 0 0 var(--espn-accent),
           inset 0 0 60px rgba(0,200,60,.50),
           0 0 40px rgba(0,200,60,.55); }
  100% { box-shadow:
           inset 4px 0 0 0 var(--espn-accent),
           inset 0 -2px 0 0 var(--espn-accent),
           inset 0 0 28px rgba(0,136,42,.10),
           0 0 14px rgba(0,200,60,.10); }
}
/* Title char reveal: flips up + scales in */
@keyframes espn-char-reveal {
  from { opacity: 0; transform: translateY(14px) rotateX(-60deg); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0)   rotateX(0deg);   filter: blur(0); }
}

/* --- Header / hero card ------------------------------------------------- */
.espn-header { animation: espn-fade-down .55s cubic-bezier(.2,.8,.25,1) both; }
.espn-page-card {
  animation: espn-bounce-in .7s cubic-bezier(.34,1.56,.64,1) .05s both;
}

/* Spotlight sweep across the page card on load (one shot) */
.espn-page-card .espn-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,255,90,0)   42%,
    rgba(180,255,200,.55) 50%,
    rgba(0,255,90,0)   58%,
    transparent 100%);
  animation: espn-spotlight-sweep 1.6s cubic-bezier(.4,0,.2,1) .15s both;
  mix-blend-mode: screen;
}

/* --- Tab strip ---------------------------------------------------------- */
.espn-tabs { animation: espn-fade-up .55s cubic-bezier(.2,.8,.25,1) .25s both; }
.espn-tabs__item.is-active {
  animation: espn-tab-energize 1.4s cubic-bezier(.4,0,.2,1) .9s both;
}

/* --- Title text — letter-by-letter reveal (chars wrapped by JS) -------- */
.espn-section__title .espn-char,
.espn-header__title  .espn-char {
  display: inline-block;
  opacity: 0;
  animation: espn-char-reveal .6s cubic-bezier(.34,1.56,.64,1) both;
  transform-origin: 50% 80%;
}
.espn-section__title .espn-char { animation-delay: calc(var(--i, 0) * 35ms + .35s); }
.espn-header__title  .espn-char { animation-delay: calc(var(--i, 0) * 25ms + .15s); }

/* --- Team rows — bouncy cascade ---------------------------------------- */
.espn-team-row { animation: espn-bounce-in .6s cubic-bezier(.34,1.56,.64,1) both; opacity: 0; }
.espn-team-row:nth-child(1)  { animation-delay: .35s; }
.espn-team-row:nth-child(2)  { animation-delay: .42s; }
.espn-team-row:nth-child(3)  { animation-delay: .49s; }
.espn-team-row:nth-child(4)  { animation-delay: .56s; }
.espn-team-row:nth-child(5)  { animation-delay: .63s; }
.espn-team-row:nth-child(6)  { animation-delay: .70s; }
.espn-team-row:nth-child(7)  { animation-delay: .77s; }
.espn-team-row:nth-child(8)  { animation-delay: .84s; }
.espn-team-row:nth-child(9)  { animation-delay: .91s; }
.espn-team-row:nth-child(10) { animation-delay: .98s; }
.espn-team-row:nth-child(n+11) { animation-delay: 1.05s; }

/* --- Right column panels & contents ------------------------------------ */
.espn-twocol__side .espn-panel:nth-child(1) {
  animation: espn-fade-up .55s cubic-bezier(.2,.8,.25,1) .50s both;
}
.espn-twocol__side .espn-panel:nth-child(2) {
  animation: espn-fade-up .55s cubic-bezier(.2,.8,.25,1) .65s both;
}
.espn-game-card { animation: espn-bounce-in .55s cubic-bezier(.34,1.56,.64,1) both; opacity: 0; }
.espn-game-card:nth-child(1) { animation-delay: .70s; }
.espn-game-card:nth-child(2) { animation-delay: .80s; }

.espn-standings tbody tr { animation: espn-slide-in-left .45s cubic-bezier(.2,.8,.25,1) both; opacity: 0; }
.espn-standings tbody tr:nth-child(1) { animation-delay: .80s; }
.espn-standings tbody tr:nth-child(2) { animation-delay: .85s; }
.espn-standings tbody tr:nth-child(3) { animation-delay: .90s; }
.espn-standings tbody tr:nth-child(4) { animation-delay: .95s; }
.espn-standings tbody tr:nth-child(5) { animation-delay: 1.00s; }
.espn-standings tbody tr:nth-child(6) { animation-delay: 1.05s; }
.espn-standings tbody tr:nth-child(7) { animation-delay: 1.10s; }
.espn-standings tbody tr:nth-child(8) { animation-delay: 1.15s; }

/* --- Schedule page entrance animations (mirror of teams-page cascade) -- */
.espn-panel--schedule {
  animation: espn-bounce-in .7s cubic-bezier(.34,1.56,.64,1) .25s both;
}
.espn-schedule-daygroup {
  animation: espn-fade-up .55s cubic-bezier(.2,.8,.25,1) both;
  opacity: 0;
}
.espn-schedule-daygroup:nth-child(1) { animation-delay: .40s; }
.espn-schedule-daygroup:nth-child(2) { animation-delay: .55s; }
.espn-schedule-daygroup:nth-child(3) { animation-delay: .70s; }
.espn-schedule-daygroup:nth-child(n+4) { animation-delay: .85s; }

.espn-schedule-card { animation: espn-bounce-in .55s cubic-bezier(.34,1.56,.64,1) both; opacity: 0; }
.espn-schedule-card:nth-child(1) { animation-delay: .55s; }
.espn-schedule-card:nth-child(2) { animation-delay: .62s; }
.espn-schedule-card:nth-child(3) { animation-delay: .69s; }
.espn-schedule-card:nth-child(4) { animation-delay: .76s; }
.espn-schedule-card:nth-child(5) { animation-delay: .83s; }
.espn-schedule-card:nth-child(6) { animation-delay: .90s; }
.espn-schedule-card:nth-child(7) { animation-delay: .97s; }
.espn-schedule-card:nth-child(8) { animation-delay: 1.04s; }
.espn-schedule-card:nth-child(n+9) { animation-delay: 1.10s; }

.espn-schedule-legend {
  animation: espn-fade-up .55s cubic-bezier(.2,.8,.25,1) 1.00s both;
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .espn-header,
  .espn-page-card,
  .espn-spotlight,
  .espn-tabs,
  .espn-tabs__item.is-active,
  .espn-team-row,
  .espn-twocol__side .espn-panel,
  .espn-game-card,
  .espn-standings tbody tr,
  .espn-panel--schedule,
  .espn-schedule-daygroup,
  .espn-schedule-card,
  .espn-schedule-legend,
  .espn-section__title .espn-char,
  .espn-header__title  .espn-char {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .espn-spotlight { display: none; }
}

/* --- "All Divisions" dropdown (uses <details>/<summary>) ----------------- */
.espn-divselect-details {
  position: relative;
  z-index: 40;
}
.espn-divselect-details[open] { z-index: 60; }
.espn-divselect-details > summary {
  list-style: none;
  cursor: pointer;
}
.espn-divselect-details > summary::-webkit-details-marker { display: none; }

.espn-divselect {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--espn-border);
  border-radius: 10px;
  background: var(--espn-surface);
  color: var(--espn-text);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
  text-decoration: none;
  user-select: none;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.espn-divselect:hover {
  background: var(--espn-surface-alt);
  border-color: var(--espn-accent);
  color: var(--espn-accent);
  text-decoration: none;
}
.espn-divselect__chev { transition: transform .25s ease; }
.espn-divselect-details[open] .espn-divselect__chev { transform: rotate(180deg); }
.espn-divselect-details[open] .espn-divselect {
  border-color: var(--espn-accent);
  color: var(--espn-accent);
}

/* #3342 — "Manage" dropdown in the roster header. The summary keeps the green
   primary-button look; just strip the native disclosure marker, spin the
   chevron when open, and grey out the not-yet-wired "Manage Score" item. */
.espn-roster-manage__btn { list-style: none; cursor: pointer; }
.espn-roster-manage__btn::-webkit-details-marker { display: none; }
.espn-roster-manage__chev { font-size: 16px; line-height: 1; transition: transform .2s ease; }
.espn-roster-manage[open] .espn-roster-manage__chev { transform: rotate(180deg); }
.espn-divselect__item--disabled { opacity: .5; pointer-events: none; cursor: default; }
/* Mobile: the Manage button sits on the left, so left-align the menu (the
   shared menu defaults to right:0, which pushed it off-screen on phones). */
@media (max-width: 767px) {
  .espn-roster-manage__menu { left: 0; right: auto; }
}

.espn-divselect__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 6px;
  z-index: 100;
  animation: espn-divselect-pop .18s cubic-bezier(.2,.8,.25,1);
}
@keyframes espn-divselect-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.espn-divselect__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--espn-text);
  font-size: 13px;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}
.espn-divselect__item .mdi { color: var(--espn-accent); font-size: 18px; line-height: 1; }
.espn-divselect__item:hover {
  background: var(--espn-accent-soft);
  color: var(--espn-accent);
  text-decoration: none;
}
.espn-divselect__item.is-active {
  background: var(--espn-accent-soft);
  color: var(--espn-accent);
}
.espn-divselect__item .mdi-check { color: var(--espn-accent); font-size: 16px; }

/* --- Tab strip (Teams / Schedule / Standings / Bracket) ------------------
   The whole strip is a rounded bordered card; tabs are divided by vertical
   separators and the active tab is highlighted as a glowing green box. */
.espn-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  border-radius: 12px;
  margin: 14px 18px 0;
  overflow: hidden;
  box-shadow: var(--espn-shadow);
}
.espn-tabs__item {
  flex: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  color: var(--espn-text-muted);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border-right: 1px solid var(--espn-border);
  transition: color .35s ease, background .5s ease, box-shadow .5s ease;
}
.espn-tabs__item:last-child { border-right: 0; }
.espn-tabs__item .mdi { font-size: 18px; line-height: 1; transition: transform .35s cubic-bezier(.2,.8,.25,1); }

/* Hover (inactive tabs only) — mimics the active look at lower intensity, animated */
.espn-tabs__item:not(.is-active):hover {
  color: var(--espn-accent);
  text-decoration: none;
  background: linear-gradient(180deg,
    rgba(0,136,42,.10) 0%,
    rgba(0,136,42,.01) 100%);
  box-shadow:
    inset 4px 0 0 0 var(--espn-accent),
    inset 0 -2px 0 0 var(--espn-accent),
    inset 0 0 22px rgba(0,136,42,.08),
    0 0 12px rgba(0,200,60,.08);
}
[data-theme="dark"] .espn-tabs__item:not(.is-active):hover {
  color: #2fd16b;
  background: linear-gradient(180deg,
    rgba(47,209,107,.14) 0%,
    rgba(47,209,107,.01) 100%);
  box-shadow:
    inset 4px 0 0 0 #2fd16b,
    inset 0 -2px 0 0 #2fd16b,
    inset 0 0 26px rgba(47,209,107,.10),
    0 0 14px rgba(47,209,107,.16);
}
.espn-tabs__item:not(.is-active):hover .mdi {
  transform: translateY(-1px) scale(1.08);
}

/* Active tab — strong left bar + green-tinted gradient + soft bottom underline */
.espn-tabs__item.is-active {
  color: var(--espn-accent);
  background: linear-gradient(180deg,
    rgba(0,136,42,.16) 0%,
    rgba(0,136,42,.02) 100%);
  box-shadow:
    inset 4px 0 0 0 var(--espn-accent),       /* thick left bar */
    inset 0 -2px 0 0 var(--espn-accent),      /* thin bottom underline */
    inset 0 0 28px rgba(0,136,42,.10),        /* soft inner haze */
    0 0 14px rgba(0,200,60,.10);              /* outer bloom */
}
[data-theme="dark"] .espn-tabs__item.is-active {
  color: #2fd16b;
  background: linear-gradient(180deg,
    rgba(47,209,107,.22) 0%,
    rgba(47,209,107,.02) 100%);
  box-shadow:
    inset 4px 0 0 0 #2fd16b,
    inset 0 -2px 0 0 #2fd16b,
    inset 0 0 32px rgba(47,209,107,.14),
    0 0 18px rgba(47,209,107,.20);
}
.espn-tabs__item.is-active .mdi { color: inherit; }

/* ---------- TABLET (≤720px) — tighter tabs, smaller text ------------- */
@media (max-width: 720px) {
  .espn-tabs { margin: 12px 14px 0; border-radius: 10px; }
  .espn-tabs__item {
    padding: 12px 4px;
    font-size: 10px;
    letter-spacing: .6px;
    gap: 5px;
  }
  .espn-tabs__item .mdi { font-size: 17px; }
}

/* ---------- PHONE (≤520px) — icon-only with small caption below ------ */
@media (max-width: 520px) {
  .espn-tabs { margin: 10px 12px 0; }
  .espn-tabs__item {
    flex-direction: column;
    padding: 10px 4px;
    gap: 4px;
    font-size: 9px;
    letter-spacing: .5px;
  }
  .espn-tabs__item .mdi { font-size: 20px; }
  .espn-tabs__label {
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* Strong left bar made into a TOP indicator instead, so it works in the
     stacked icon-above-text layout */
  .espn-tabs__item.is-active {
    box-shadow:
      inset 0 3px 0 0 var(--espn-accent),
      inset 0 -2px 0 0 var(--espn-accent),
      inset 0 0 22px rgba(0,136,42,.10),
      0 0 12px rgba(0,200,60,.08);
  }
  [data-theme="dark"] .espn-tabs__item.is-active {
    box-shadow:
      inset 0 3px 0 0 #2fd16b,
      inset 0 -2px 0 0 #2fd16b,
      inset 0 0 26px rgba(47,209,107,.14),
      0 0 14px rgba(47,209,107,.18);
  }
}

/* ---------- TINY PHONE (≤360px) — labels disappear, just icons ------- */
@media (max-width: 360px) {
  .espn-tabs__label { display: none; }
  .espn-tabs__item { padding: 14px 4px; gap: 0; }
  .espn-tabs__item .mdi { font-size: 22px; }
}

/* --- Bottom navigation: closed by default, button-controlled toggle ---- */
/* Reserve enough space at the bottom only for the peek handle */
body.espn-themed { padding-bottom: 30px; }

.espn-bottom-bar {
  /* Default: bar slid fully off-screen, only the floating handle remains
     visible above the viewport bottom. The handle is positioned with
     `bottom: 100%` so it sits ABOVE the bar regardless of slide position. */
  transform: translateY(100%);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
  /* No background on the outer container — only the pill inside is opaque
     so the area around the pill stays transparent. Bootstrap's `.p-3` utility
     was dropped from the HTML so this padding no longer needs !important to
     override the framework default. */
  padding: 8px 12px;
}
/* Open state — bar fully visible, content gets pushed up via padding */
body.espn-bottom-bar-open .espn-bottom-bar {
  transform: translateY(0);
}
body.espn-bottom-bar-open { padding-bottom: 96px; }

/* Peek handle — animated glass capsule:
   - Pill floats with gentle vertical bob (2.6s)
   - Accent light sweeps L→R inside (4s)
   - Expanding pulse ring on the outside (2.4s)
   - Box-shadow breath layered underneath
   - Hover: rises higher with faster animation
   - Active: spring press */
.espn-bottom-bar__handle {
  position: absolute;
  /* `bottom: 100%` parks the handle's bottom edge exactly on the bar's top
     edge — handle fully above the pill, no overlap, no visible gap. */
  bottom: 100%;
  margin-bottom: 0;
  left: 50%;
  width: 72px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  border-radius: 999px;
  -webkit-backdrop-filter: saturate(140%) blur(10px);
          backdrop-filter: saturate(140%) blur(10px);
  box-shadow:
    0  8px 22px rgba(0, 200, 90, .14),
    0  0  0  1px rgba(0, 200, 90, .18) inset,
    0  1px 0 rgba(255, 255, 255, .35) inset;
  color: var(--espn-accent);
  cursor: pointer;
  z-index: 2;
  padding: 0;
  overflow: hidden;
  transform: translate(-50%, 0);
  animation:
    espn-handle-popin .8s cubic-bezier(.34, 1.56, .64, 1) .2s both,
    espn-handle-float 2.6s ease-in-out 1s infinite;
  transition: border-color .3s ease, box-shadow .3s ease;
}
[data-theme="dark"] .espn-bottom-bar__handle {
  background: rgba(22, 28, 35, .82);
  border-color: rgba(255, 255, 255, .08);
  box-shadow:
    0 10px 28px rgba(0, 200, 90, .28),
    0  0  0  1px rgba(0, 200, 90, .25) inset,
    0  1px 0 rgba(255, 255, 255, .07) inset;
}

@keyframes espn-handle-float {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -3px); }
}

/* Accent light sweeping left → right inside the pill (4s) */
.espn-bottom-bar__handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  background: linear-gradient(90deg,
    rgba(0, 200, 90, 0)   0%,
    rgba(0, 200, 90, .25) 35%,
    rgba(0, 255, 120, .65) 50%,
    rgba(0, 200, 90, .25) 65%,
    rgba(0, 200, 90, 0) 100%);
  filter: blur(2px);
  pointer-events: none;
  transform: translateX(-220%);
  animation: espn-handle-sweep 4s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes espn-handle-sweep {
  0%, 10%  { transform: translateX(-220%); }
  90%, 100% { transform: translateX(220%); }
}

/* Expanding pulse ring outside the pill (2.4s) */
.espn-bottom-bar__handle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--espn-accent);
  pointer-events: none;
  animation: espn-handle-pulse 2.4s cubic-bezier(.2, .8, .25, 1) infinite;
}
@keyframes espn-handle-pulse {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.45); }
}

/* Hover — lifts higher, animations speed up, brighter border */
.espn-bottom-bar__handle:hover {
  border-color: var(--espn-accent);
  animation:
    espn-handle-popin .8s cubic-bezier(.34, 1.56, .64, 1) .2s both,
    espn-handle-float 1.5s ease-in-out infinite;
  box-shadow:
    0 14px 30px rgba(0, 200, 90, .35),
    0  0  0  1px rgba(0, 200, 90, .35) inset,
    0  1px 0 rgba(255, 255, 255, .45) inset;
}
.espn-bottom-bar__handle:hover::before { animation-duration: 2s; }
.espn-bottom-bar__handle:hover::after  { animation-duration: 1.4s; }

.espn-bottom-bar__handle:active {
  transform: translate(-50%, 2px) scale(.96);
  transition: transform .12s ease;
}

/* No grip-line decoration anymore — capsule itself is the indicator */
.espn-bottom-bar__handle-bar { display: none; }
.espn-bottom-bar__icon {
  color: var(--espn-accent);
  display: inline-flex;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .35s ease;
}
.espn-bottom-bar__icon svg { width: 14px; height: 14px; stroke-width: 3 !important; }

/* Stack the two chevron SVGs in the same spot for cross-fade-rotate morph */
.espn-bottom-bar__icon--down {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-180deg);
  opacity: 0;
}
.espn-bottom-bar__icon--up {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 1;
}

/* Open state: chevrons swap with rotation */
body.espn-bottom-bar-open .espn-bottom-bar__icon--up   { transform: translate(-50%, -50%) rotate(180deg); opacity: 0; }
body.espn-bottom-bar-open .espn-bottom-bar__icon--down { transform: translate(-50%, -50%) rotate(0deg);   opacity: 1; }
/* Pause idle float when bar is open */
body.espn-bottom-bar-open .espn-bottom-bar__handle    { animation-iteration-count: 1; }
body.espn-bottom-bar-open .espn-bottom-bar__handle::before { animation-duration: 4s; opacity: .55; }

@keyframes espn-handle-popin {
  0%   { transform: translate(-50%, 50px) scale(.3); opacity: 0; }
  60%  { transform: translate(-50%, -6px) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, 0)    scale(1);    opacity: 1; }
}
@keyframes espn-handle-float {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -4px); }
}
@keyframes espn-handle-hover-float {
  0%, 100% { transform: translate(-50%, -3px) scale(1.04); }
  50%      { transform: translate(-50%, -7px) scale(1.04); }
}
@keyframes espn-handle-halo {
  0%, 100% { transform: scale(.85); opacity: .55; }
  50%      { transform: scale(1.15); opacity: 1; }
}
@keyframes espn-handle-shimmer {
  0%, 20%   { background-position: -120% 0; opacity: 0; }
  50%       { opacity: 1; }
  80%, 100% { background-position:  220% 0; opacity: 0; }
}
@keyframes espn-handle-grip {
  0%   { background-position: 0%   0; }
  100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .espn-bottom-bar__handle,
  .espn-bottom-bar__handle::before,
  .espn-bottom-bar__handle::after,
  .espn-bottom-bar__handle-bar,
  .espn-bottom-bar__icon { animation: none !important; }
}

/* --- Bottom navigation — compact segmented pill with sliding indicator
   (same animation language as the All Leagues / My Leagues toggle on /tournament) */
body.espn-themed .bottom-nav-main {
  position: relative;
  background: linear-gradient(180deg, var(--espn-surface-alt) 0%, var(--espn-surface) 100%) !important;
  border: 1px solid var(--espn-border);
  border-radius: 16px !important;
  padding: 5px !important;
  gap: 0 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 6px 20px rgba(0,0,0,.08);
  isolation: isolate;
  overflow: hidden;
}
[data-theme="dark"] body.espn-themed .bottom-nav-main {
  /* Opaque dark fill — content scrolling underneath the bar is fully hidden
     by the pill itself. Was nearly transparent (3%/1% white tint) before,
     causing the row text behind it to bleed through visually. */
  background: linear-gradient(180deg, #1a2027 0%, #11161c 100%) !important;
  border-color: rgba(255,255,255,.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 6px 24px rgba(0,0,0,.55);
}

/* Sliding shimmering indicator — position set by JS via CSS vars */
body.espn-themed .bottom-nav-main::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: var(--tab-x, 5px);
  width: var(--tab-w, 0);
  background:
    linear-gradient(135deg,
      var(--espn-accent)  0%,
      #00aa3d            25%,
      #4dd587            50%,
      #00aa3d            75%,
      var(--espn-accent) 100%);
  background-size: 250% 100%;
  border-radius: 11px;
  box-shadow:
    0 6px 22px rgba(0, 200, 90, .42),
    0 0 0 1px rgba(255, 255, 255, .18) inset,
    0 1px 0 rgba(255, 255, 255, .35) inset;
  transition:
    left  .55s cubic-bezier(.34, 1.56, .64, 1),
    width .55s cubic-bezier(.34, 1.56, .64, 1);
  animation: espn-tabs-shimmer 4s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
  opacity: var(--tab-ready, 0);
}

/* Each tab — compact, centered, sits above the sliding indicator */
body.espn-themed .footer-bottom-nav {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px !important;
  color: var(--espn-text-muted) !important;
  text-decoration: none;
  border-radius: 11px;
  transition: color .3s ease, transform .15s ease;
}
body.espn-themed .footer-bottom-nav span:not(.mdi) {
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: none;
}
body.espn-themed .footer-bottom-nav .mdi {
  font-size: 18px !important;
  line-height: 1;
  color: inherit;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

/* Remove old underline-pill */
body.espn-themed .footer-bottom-nav.active::after,
body.espn-themed .footer-bottom-nav.active::before {
  display: none !important;
}

/* Hover (inactive tabs only) — subtle wake-up, no pill bg */
body.espn-themed .footer-bottom-nav:not(.active):hover {
  color: var(--espn-text) !important;
  transform: translateY(-1px);
}
body.espn-themed .footer-bottom-nav:not(.active):hover .mdi {
  transform: scale(1.15) rotate(-4deg);
}
body.espn-themed .footer-bottom-nav:active { transform: scale(.97); }

/* Active — white text/icon over the sliding green pill */
body.espn-themed .footer-bottom-nav.active {
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .15);
}
body.espn-themed .footer-bottom-nav.active .mdi {
  color: #fff !important;
  animation: espn-tabs-icon-pop .65s cubic-bezier(.34, 1.56, .64, 1);
}

@media (prefers-reduced-motion: reduce) {
  body.espn-themed .bottom-nav-main::before { animation: none !important; transition: none !important; }
  body.espn-themed .footer-bottom-nav,
  body.espn-themed .footer-bottom-nav .mdi { transition: none !important; animation: none !important; }
}

/* --- Theme toggle (with animated icon swap) ------------------------------ */
.espn-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--espn-border);
  background: var(--espn-surface);
  color: var(--espn-text);
  cursor: pointer;
  overflow: hidden;
  transition: background-color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease;
  animation: espn-toggle-breath 3.6s ease-in-out infinite;
}
.espn-theme-toggle:hover {
  transform: scale(1.08);
  border-color: var(--espn-accent);
  animation-duration: 1.6s;
}
.espn-theme-toggle:active { transform: scale(.92); }

/* Breathing accent halo — works alongside overflow:visible without clipping */
@keyframes espn-toggle-breath {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(0, 200, 90, .22),
      0 0 10px 1px rgba(0, 200, 90, .14);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(0, 200, 90, .18),
      0 0 22px 5px rgba(0, 200, 90, .42);
  }
}


/* --- Split-flap (Solari board) flip --------------------------------------
   The icon sits on a 3D card that rotates around its X axis on theme change.
   A thin horizontal hinge-line bisects the button for the scoreboard look. */
.espn-theme-toggle { perspective: 600px; }

.espn-theme-toggle__card {
  position: relative;
  width: 18px; height: 18px;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.65, -0.05, .35, 1.35);
  z-index: 1;
}
[data-theme="light"] .espn-theme-toggle__card { transform: rotateX(0deg); }
[data-theme="dark"]  .espn-theme-toggle__card { transform: rotateX(180deg); }

/* Hover tease — slight peek of the opposite face */
.espn-theme-toggle:hover .espn-theme-toggle__card { transform: rotateX(18deg); }
[data-theme="dark"] .espn-theme-toggle:hover .espn-theme-toggle__card { transform: rotateX(162deg); }

.espn-theme-toggle__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.espn-theme-toggle__face--dark { transform: rotateX(180deg); }
.espn-theme-toggle__face svg { display: block; }

/* Horizontal hinge line across the middle */
.espn-theme-toggle__split {
  position: absolute;
  left: 5px; right: 5px;
  top: 50%;
  height: 1px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(90deg,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,.18) 18%,
    rgba(0,0,0,.22) 50%,
    rgba(0,0,0,.18) 82%,
    rgba(0,0,0,0)  100%);
}
[data-theme="dark"] .espn-theme-toggle__split {
  background: linear-gradient(90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,.12) 18%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.12) 82%,
    rgba(255,255,255,0)  100%);
}

/* --- Alt-theme preview ---------------------------------------------------
   Every 6 seconds a rising wave of the opposite-theme color sweeps from the
   bottom of the button to the top, briefly revealing the alternate icon at
   the peak before continuing off the top. Pure CSS — no JS. */
.espn-theme-toggle__preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;                 /* sits above the card + split */
  transform: translateY(100%); /* hidden below the button */
  animation: espn-toggle-preview-rise 6s cubic-bezier(.65, .05, .35, 1) infinite;
  animation-delay: 2s;        /* let the page settle before first tease */
  /* Light theme is current → preview the DARK surface */
  background: #11161c;
  color: #e9eef3;
}
[data-theme="dark"] .espn-theme-toggle__preview {
  /* Dark theme is current → preview the LIGHT surface */
  background: #ffffff;
  color: #111418;
}

@keyframes espn-toggle-preview-rise {
  0%   { transform: translateY(100%); }   /* below button */
  18%  { transform: translateY(0%);   }   /* fully covering */
  50%  { transform: translateY(0%);   }   /* hold */
  68%  { transform: translateY(-100%); }  /* exited above */
  100% { transform: translateY(-100%); }  /* gap until restart */
}

/* Pick the right alt-icon per current theme */
.espn-theme-toggle__preview-svg { display: block; }
[data-theme="light"] .espn-theme-toggle__preview-svg--sun  { display: none; }
[data-theme="dark"]  .espn-theme-toggle__preview-svg--moon { display: none; }

/* Icon flip-in inside the preview — only flat while preview is parked */
.espn-theme-toggle__preview-icon {
  width: 18px; height: 18px;
  transform-style: preserve-3d;
  animation: espn-toggle-preview-icon-flip 6s cubic-bezier(.65, .05, .35, 1) infinite;
  animation-delay: 2s;
}
@keyframes espn-toggle-preview-icon-flip {
  0%, 17%  { transform: rotateX(-180deg); opacity: 0; }
  24%      { transform: rotateX(0deg);   opacity: 1; }
  48%      { transform: rotateX(0deg);   opacity: 1; }
  56%      { transform: rotateX(180deg); opacity: 0; }
  100%     { transform: rotateX(180deg); opacity: 0; }
}

/* Pause the tease while the user is interacting */
.espn-theme-toggle:hover .espn-theme-toggle__preview,
.espn-theme-toggle:hover .espn-theme-toggle__preview-icon,
.espn-theme-toggle:focus-visible .espn-theme-toggle__preview,
.espn-theme-toggle:focus-visible .espn-theme-toggle__preview-icon {
  animation-play-state: paused;
}

/* --- ESPN-style diagonal slant wipe -----------------------------------
   When the theme changes, the new theme reveals via a diagonal polygon
   clip-path (slanted 30°), while a bright accent-green parallelogram bar
   sweeps across the viewport at the same angle — like a SportsCenter
   broadcast wipe. */

/* View Transitions API: clip-path polygon for diagonal reveal */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 1;
  animation: espn-slant-old .7s ease-out both;
}
::view-transition-new(root) {
  z-index: 2;
  clip-path: polygon(0 0, -30vw 0, 0 100vh, 0 100vh);
  animation: espn-slant-new .7s cubic-bezier(.83, 0, .17, 1) both;
  will-change: clip-path;
}
@keyframes espn-slant-new {
  from { clip-path: polygon(0 0, -30vw 0,   0    100vh, 0 100vh); }
  to   { clip-path: polygon(0 0, 100vw 0, 130vw 100vh, 0 100vh); }
}
@keyframes espn-slant-old {
  0%, 65% { opacity: 1; }
  100%    { opacity: .9; }
}

/* The bright slant bar overlay — translates across the viewport */
.espn-slant {
  position: fixed;
  top: -10vh;
  left: 0;
  width: 180px;
  height: 120vh;
  pointer-events: none;
  z-index: 9999;
  transform: translateX(-260px) skewX(-30deg);
  background:
    linear-gradient(90deg,
      rgba(0, 200, 90, 0)    0%,
      rgba(0, 200, 90, .25) 18%,
      rgba(0, 220, 100, .55) 38%,
      rgba(0, 255, 120, .85) 60%,
      rgba(220, 255, 230, 1) 78%,     /* bright "lightning" line */
      rgba(0, 255, 120, .85) 82%,
      rgba(0, 220, 100, .35) 94%,
      rgba(0, 200, 90, 0)  100%);
  mix-blend-mode: screen;
  will-change: transform;
}
.espn-slant.is-sweeping {
  animation: espn-slant-sweep .7s cubic-bezier(.83, 0, .17, 1) forwards;
}
@keyframes espn-slant-sweep {
  0%   { transform: translateX(-260px) skewX(-30deg); }
  100% { transform: translateX(calc(100vw + 260px)) skewX(-30deg); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  .espn-slant.is-sweeping { animation-duration: .25s; }
}

/* Toggle-button click ripple */
.espn-theme-toggle { isolation: isolate; }
.espn-theme-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(0,200,90,.55) 0%, rgba(0,200,90,0) 70%);
  opacity: 0;
  transform: scale(.5);
}
.espn-theme-toggle:active::after {
  animation: espn-toggle-ripple .55s cubic-bezier(.2,.8,.25,1);
}
@keyframes espn-toggle-ripple {
  0%   { opacity: .9; transform: scale(.55); }
  60%  { opacity: .35; transform: scale(2.2); }
  100% { opacity: 0;  transform: scale(3); }
}

/* Smooth global color transition for browsers without View Transitions API */
body.is-theme-transitioning,
body.is-theme-transitioning * {
  transition-property: background-color, background, color, border-color, box-shadow, fill, stroke !important;
  transition-duration: .6s !important;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
}


@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  body.is-theme-transitioning,
  body.is-theme-transitioning * { transition: none !important; }
  .espn-theme-toggle:hover { transform: none; }
  .espn-theme-toggle::after { display: none; }
  .espn-theme-toggle { animation: none !important; }
  .espn-theme-toggle__card { transition: none !important; }
  .espn-theme-toggle__preview,
  .espn-theme-toggle__preview-icon { animation: none !important; }
  .espn-theme-toggle__preview { display: none; }
}

/* =========================================================================
   Off-canvas sidebar (hc-offcanvas-nav) — premium animated upgrade
   ========================================================================= */

/* Backdrop behind the open sidebar — heavier with blur */
.hc-offcanvas-nav::after,
.hc-offcanvas-nav .nav-wrapper::after {
  background: rgba(0, 0, 0, .55) !important;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
[data-theme="dark"] .hc-offcanvas-nav::after,
[data-theme="dark"] .hc-offcanvas-nav .nav-wrapper::after {
  background: rgba(0, 0, 0, .75) !important;
}

/* Panel surface */
.hc-offcanvas-nav .nav-container,
.hc-offcanvas-nav .nav-wrapper,
.hc-offcanvas-nav ul {
  background: var(--espn-surface) !important;
  color: var(--espn-text);
}
[data-theme="dark"] .hc-offcanvas-nav .nav-container,
[data-theme="dark"] .hc-offcanvas-nav .nav-wrapper,
[data-theme="dark"] .hc-offcanvas-nav ul {
  background: var(--espn-bg) !important;
}

/* Sidebar host gets a strong drop-shadow when open */
.hc-offcanvas-nav.nav-open.nav-position-left .nav-wrapper {
  box-shadow: 8px 0 40px rgba(0, 0, 0, .35) !important;
}

/* Drifting accent aurora behind the menu items */
.hc-offcanvas-nav .nav-wrapper-0 > .nav-content {
  position: relative;
  overflow: hidden;
}
.hc-offcanvas-nav .nav-wrapper-0 > .nav-content::before {
  content: "";
  position: absolute;
  top: 22%;
  left: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(0, 200, 90, .22) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: espn-sidebar-aurora 14s ease-in-out infinite;
}
.hc-offcanvas-nav .nav-wrapper-0 > .nav-content::after {
  content: "";
  position: absolute;
  bottom: 18%;
  right: -80px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(0, 220, 110, .15) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
  animation: espn-sidebar-aurora 18s ease-in-out 3s infinite reverse;
}
@keyframes espn-sidebar-aurora {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(60px, 40px) scale(1.15); }
}

/* All menu lists sit above the aurora */
.hc-offcanvas-nav .second-nav,
.hc-offcanvas-nav .bottom-nav { position: relative; z-index: 1; }

/* ---------- Brand/profile strip (top) ---------- */
.hc-offcanvas-nav .osahan-user-profile,
.hc-offcanvas-nav li.osahan-user-profile.bg-dark {
  position: relative;
  background:
    linear-gradient(135deg, rgba(0, 200, 90, .22) 0%, rgba(0, 200, 90, .04) 50%, transparent 100%),
    var(--espn-surface-alt) !important;
  border-bottom: 1px solid var(--espn-border);
  padding: 26px 20px 24px !important;
  overflow: hidden;
}
[data-theme="dark"] .hc-offcanvas-nav .osahan-user-profile,
[data-theme="dark"] .hc-offcanvas-nav li.osahan-user-profile.bg-dark {
  background:
    linear-gradient(135deg, rgba(0, 200, 90, .28) 0%, rgba(0, 200, 90, .06) 50%, transparent 100%),
    var(--espn-surface) !important;
}
/* Decorative dot pattern in the brand strip */
.hc-offcanvas-nav .osahan-user-profile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 200, 90, .18) 1px, transparent 1.5px);
  background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(135deg, black 0%, transparent 70%);
          mask-image: linear-gradient(135deg, black 0%, transparent 70%);
  opacity: .55;
  pointer-events: none;
}
/* Bottom accent underline */
.hc-offcanvas-nav .osahan-user-profile::after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: 0;
  width: 52px;
  height: 3px;
  background: linear-gradient(90deg, var(--espn-accent), #4dd587, transparent);
  border-radius: 3px 3px 0 0;
}
.hc-offcanvas-nav .osahan-user-profile h5 {
  color: var(--espn-text) !important;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .4px;
}
.hc-offcanvas-nav .osahan-user-profile img {
  width: 50px !important;
  height: 50px !important;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--espn-border), 0 6px 16px rgba(0, 200, 90, .22);
  background: var(--espn-surface);
  padding: 4px;
}

/* ---------- Menu items — staggered cascade-in ---------- */
.hc-offcanvas-nav.nav-open .second-nav > li {
  animation: espn-sidebar-item-in .5s cubic-bezier(.16, 1, .3, 1) both;
}
.hc-offcanvas-nav.nav-open .second-nav > li:nth-of-type(1) { animation-delay: .08s; }
.hc-offcanvas-nav.nav-open .second-nav > li:nth-of-type(2) { animation-delay: .15s; }
.hc-offcanvas-nav.nav-open .second-nav > li:nth-of-type(3) { animation-delay: .22s; }
.hc-offcanvas-nav.nav-open .second-nav > li:nth-of-type(4) { animation-delay: .29s; }
.hc-offcanvas-nav.nav-open .second-nav > li:nth-of-type(5) { animation-delay: .36s; }
.hc-offcanvas-nav.nav-open .second-nav > li:nth-of-type(n+6) { animation-delay: .43s; }

@keyframes espn-sidebar-item-in {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Menu item base */
.hc-offcanvas-nav li:not(.custom-content) a {
  display: flex !important;
  align-items: center !important;
  color: var(--espn-text) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--espn-border) !important;
  padding: 16px 18px !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  position: relative;
  overflow: hidden;
  transition:
    background-color .3s ease,
    color .3s ease,
    padding-left .3s ease;
}

/* Icon — boxed tile that fills with accent on hover */
.hc-offcanvas-nav li:not(.custom-content) a .mdi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 14px;
  background: var(--espn-accent-soft);
  color: var(--espn-accent);
  border-radius: 11px;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 200, 90, .18) inset;
  transition:
    background .3s ease,
    color .3s ease,
    transform .35s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .3s ease;
}

/* Left ribbon + chevron removed — quieter hover */
.hc-offcanvas-nav li:not(.custom-content) a::before,
.hc-offcanvas-nav li:not(.custom-content) a::after { content: none; }

/* Hover — quiet: just tint the bg and bring the text to accent */
.hc-offcanvas-nav:not(.touch-device) li:not(.custom-content) a:hover {
  color: var(--espn-accent) !important;
  background: var(--espn-surface-alt) !important;
}

/* ---------- Bottom nav (Home / Logout) ---------- */
.hc-offcanvas-nav ul.bottom-nav {
  background: var(--espn-surface-alt) !important;
  border-top: 1px solid var(--espn-border);
  padding: 14px 12px !important;
  gap: 8px;
}
[data-theme="dark"] .hc-offcanvas-nav ul.bottom-nav {
  background: var(--espn-surface) !important;
}
.hc-offcanvas-nav ul.bottom-nav li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px;
  padding: 12px 8px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px;
  color: var(--espn-accent) !important;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-align: center !important;
  text-decoration: none !important;
  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.hc-offcanvas-nav ul.bottom-nav li a:hover {
  background: var(--espn-accent-soft) !important;
  border-color: var(--espn-accent) !important;
  transform: translateY(-3px);
}
[data-theme="dark"] .hc-offcanvas-nav ul.bottom-nav li a:hover {
  background: rgba(0, 200, 90, .18) !important;
}
/* Override the menu-item icon tile styling for the bottom row */
.hc-offcanvas-nav ul.bottom-nav li a .mdi {
  background: transparent !important;
  color: var(--espn-accent) !important;
  width: auto !important;
  height: auto !important;
  font-size: 22px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.hc-offcanvas-nav ul.bottom-nav li a:hover .mdi {
  transform: scale(1.15) translateY(-1px);
}

/* Close button (X) — keep usable in both themes */
.hc-offcanvas-nav li.nav-close span::before,
.hc-offcanvas-nav li.nav-close span::after {
  border-color: var(--espn-text);
}
.hc-offcanvas-nav li.nav-close a,
.hc-offcanvas-nav li.nav-back a {
  background: var(--espn-surface-alt) !important;
  border-top: 1px solid var(--espn-border) !important;
  border-bottom: 1px solid var(--espn-border) !important;
}

@media (prefers-reduced-motion: reduce) {
  .hc-offcanvas-nav .nav-wrapper-0 > .nav-content::before,
  .hc-offcanvas-nav .nav-wrapper-0 > .nav-content::after,
  .hc-offcanvas-nav.nav-open .second-nav > li,
  .hc-offcanvas-nav li:not(.custom-content) a .mdi { animation: none !important; transition: none !important; }
}

/* =========================================================================
   Bracket page — panel + jQuery Bracket library theming
   ========================================================================= */
.espn-panel--bracket { overflow: visible; }

.espn-bracket-wrap {
  padding: 24px 20px 28px;
  overflow-x: auto;
  overflow-y: hidden;
  background:
    radial-gradient(ellipse at top center, rgba(0, 200, 90, .05) 0%, transparent 60%),
    var(--espn-surface);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
[data-theme="dark"] .espn-bracket-wrap {
  background:
    radial-gradient(ellipse at top center, rgba(0, 200, 90, .08) 0%, transparent 60%),
    var(--espn-surface);
}

/* Round chip in the panel header */
.espn-bracket__roundtag {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--espn-accent);
  background: var(--espn-accent-soft);
  border-radius: 999px;
  vertical-align: middle;
}

/* Empty state */
.espn-bracket-empty {
  padding: 48px 24px 56px;
  text-align: center;
}
.espn-bracket-empty .mdi {
  display: block;
  font-size: 56px;
  color: var(--espn-accent);
  opacity: .45;
  margin-bottom: 14px;
}
.espn-bracket-empty__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--espn-text);
}
.espn-bracket-empty__sub {
  margin: 0;
  font-size: 13px;
  color: var(--espn-text-muted);
}

/* PD no-data cell */
.espn-standings__nodata {
  text-align: center;
  color: var(--espn-text-muted);
  font-style: italic;
}

/* --- jQuery Bracket library overrides ---------------------------------- */
div.jQBracket {
  font-family: inherit !important;
  font-size: 13px;
  color: var(--espn-text);
}
div.jQBracket .round { padding-top: 4px; }

div.jQBracket .team {
  background: var(--espn-surface-alt) !important;
  color: var(--espn-text) !important;
  border-radius: 7px;
  margin-bottom: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
[data-theme="dark"] div.jQBracket .team {
  background: rgba(255, 255, 255, .04) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
div.jQBracket .team:first-child {
  border-bottom: 1px solid var(--espn-border) !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
div.jQBracket .team:last-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-bottom: 0;
}
div.jQBracket .team:hover {
  transform: translateX(2px);
  box-shadow: 0 3px 10px rgba(0, 200, 90, .12);
}
div.jQBracket .team div.label {
  padding: 9px 10px !important;
  font-weight: 600;
  height: auto !important;
}
div.jQBracket .team div.score {
  background: rgba(0, 0, 0, .04) !important;
  padding: 9px 10px !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--espn-text) !important;
  min-width: 40px;
  text-align: center;
}
[data-theme="dark"] div.jQBracket .team div.score {
  background: rgba(255, 255, 255, .05) !important;
}

/* Winner — accent green */
div.jQBracket .team.win {
  background: var(--espn-accent-soft) !important;
  color: var(--espn-accent) !important;
}
div.jQBracket .team.win div.label { color: var(--espn-accent); font-weight: 700; }
div.jQBracket .team.win div.score {
  color: var(--espn-accent) !important;
  background: rgba(0, 200, 90, .14) !important;
}

/* Loser — muted */
div.jQBracket .team.lose {
  background: var(--espn-surface-alt) !important;
  color: var(--espn-text-muted) !important;
  opacity: .85;
}
[data-theme="dark"] div.jQBracket .team.lose {
  background: rgba(255, 255, 255, .025) !important;
}
div.jQBracket .team.lose div.label { color: var(--espn-text-muted) !important; }
div.jQBracket .team.lose div.score { color: #e74c3c !important; }

/* Tie */
div.jQBracket .team.tie div.score { color: #f0a800 !important; }

/* BYE / TBD */
div.jQBracket .team.np,
div.jQBracket .team.na {
  background: var(--espn-bg) !important;
  color: var(--espn-text-soft) !important;
  font-style: italic;
}
div.jQBracket .team.np div.label,
div.jQBracket .team.na div.label { color: var(--espn-text-soft) !important; }

/* Highlighted pair on hover */
div.jQBracket .team.highlightWinner {
  background: var(--espn-accent) !important;
  color: #fff !important;
}
div.jQBracket .team.highlightWinner div.label,
div.jQBracket .team.highlightWinner div.score { color: #fff !important; }
div.jQBracket .team.highlightLoser {
  background: var(--espn-border) !important;
  color: var(--espn-text) !important;
}

/* =========================================================================
   Leagues / Tournament home page (/tournament)
   ========================================================================= */

/* Toolbar: search input + filter tabs */
.espn-leagues-toolbar {
  display: flex;
  gap: 12px;
  padding: 14px 18px 6px;
  align-items: center;
  flex-wrap: wrap;
}
.espn-leagues-search {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
}
.espn-leagues-search > .mdi {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--espn-text-muted);
  font-size: 18px;
  pointer-events: none;
}
.espn-leagues-search input {
  width: 100%;
  height: 40px;
  padding: 0 38px 0 38px;
  background: var(--espn-surface-alt);
  border: 1px solid var(--espn-border);
  border-radius: 10px;
  color: var(--espn-text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.espn-leagues-search input::placeholder { color: var(--espn-text-muted); }
.espn-leagues-search input:focus {
  border-color: var(--espn-accent);
  background: var(--espn-surface);
  box-shadow: 0 0 0 3px rgba(0, 200, 90, .15);
}
.espn-leagues-search__clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--espn-text-muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.espn-leagues-search__clear:hover {
  background: var(--espn-surface);
  color: var(--espn-text);
}

/* All Leagues / My Leagues — segmented pill with a sliding shimmering indicator */
.espn-leagues-tabs {
  position: relative;
  display: inline-flex;
  gap: 0;
  padding: 5px;
  background: linear-gradient(180deg, var(--espn-surface-alt) 0%, var(--espn-surface) 100%);
  border: 1px solid var(--espn-border);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 6px 20px rgba(0,0,0,.06);
  flex-shrink: 0;
  isolation: isolate;
  overflow: hidden;
}
[data-theme="dark"] .espn-leagues-tabs {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 6px 24px rgba(0,0,0,.4);
}

/* Disables the slide transition — used by JS for the initial paint so the
   indicator snaps to its final position once fonts are loaded. */
.espn-leagues-tabs.no-transition::before { transition: none !important; }

/* Sliding pill indicator — driven by --tab-x / --tab-w CSS vars set in JS */
.espn-leagues-tabs::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: var(--tab-x, 5px);
  width: var(--tab-w, 0);
  background:
    linear-gradient(135deg,
      var(--espn-accent)  0%,
      #00aa3d            25%,
      #4dd587            50%,
      #00aa3d            75%,
      var(--espn-accent) 100%);
  background-size: 250% 100%;
  border-radius: 9px;
  box-shadow:
    0 6px 22px rgba(0, 200, 90, .42),
    0 0 0 1px rgba(255, 255, 255, .18) inset,
    0 1px 0 rgba(255, 255, 255, .35) inset;
  transition:
    left  .55s cubic-bezier(.34, 1.56, .64, 1),
    width .55s cubic-bezier(.34, 1.56, .64, 1);
  animation: espn-tabs-shimmer 4s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
  opacity: var(--tab-ready, 0);   /* hidden until JS measures */
}
@keyframes espn-tabs-shimmer {
  0%, 100% { background-position: 0%   50%; }
  50%      { background-position: 100% 50%; }
}

/* The tab buttons */
.espn-leagues-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: transparent;
  border: 0;
  color: var(--espn-text-muted);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: color .3s ease, transform .15s ease;
  white-space: nowrap;
}
.espn-leagues-tab:hover { color: var(--espn-text); }
.espn-leagues-tab:hover .mdi { transform: scale(1.18) rotate(-6deg); }
.espn-leagues-tab:active { transform: scale(.96); }
.espn-leagues-tab .mdi {
  font-size: 17px;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

/* Active state — text flips to white over the sliding indicator */
.espn-leagues-tab.is-active {
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .15);
}
.espn-leagues-tab.is-active .mdi {
  color: #fff;
  animation: espn-tabs-icon-pop .65s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes espn-tabs-icon-pop {
  0%   { transform: scale(.55) rotate(-22deg); }
  55%  { transform: scale(1.22) rotate(10deg); }
  100% { transform: scale(1)    rotate(0deg);  }
}

/* Subtle continuous twinkle on the active star (My Leagues) */
.espn-leagues-tab.is-active .mdi-star {
  animation:
    espn-tabs-icon-pop .65s cubic-bezier(.34, 1.56, .64, 1),
    espn-tabs-twinkle 2.4s ease-in-out 1s infinite;
}
@keyframes espn-tabs-twinkle {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%      { filter: drop-shadow(0 0 7px rgba(255,255,255,.95)); }
}

@media (prefers-reduced-motion: reduce) {
  .espn-leagues-tabs::before { animation: none !important; transition: none !important; }
  .espn-leagues-tab .mdi { animation: none !important; transition: none !important; }
}

/* League row — reuses .espn-team-row, with the link wrapping logo + body + chevron */
.espn-league-row { padding-right: 10px; }
.espn-league-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.espn-league-link:hover { color: inherit; }
.espn-league-logo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--espn-surface-alt);
  box-shadow: 0 0 0 1px var(--espn-border);
}

/* Fallback when the league image fails to load — trophy icon in accent green */
.espn-league-logo--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--espn-accent-soft);
  box-shadow: 0 0 0 1px rgba(0, 200, 90, .25);
}
.espn-league-logo--fallback .mdi {
  font-size: 26px;
  color: var(--espn-accent);
  line-height: 1;
}

/* =========================================================================
   My Schedule page extras (favorite team highlight, overtime chip, notes,
   friendly empty state with steps).
   ========================================================================= */

/* Favorite team's name + star inside a schedule card */
.espn-schedule-card__team.is-my-team .espn-schedule-card__name { color: var(--espn-accent); }
.espn-myteam-star {
  margin: 0 4px;
  color: #e84a4b;
  font-size: 14px;
  filter: drop-shadow(0 0 4px rgba(232, 74, 75, .4));
  vertical-align: middle;
}

/* Overtime chip inside the center column */
.espn-schedule-card__ot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #f0a800;
  background: rgba(240, 168, 0, .12);
  border-radius: 999px;
}
.espn-schedule-card__ot .mdi { font-size: 13px; }

/* Division/pool tag chip — its own row just below the status pill */
.espn-schedule-card:has(.espn-schedule-card__divtag) { padding-top: 60px; }
.espn-schedule-card__divtag {
  position: absolute;
  top: 36px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--espn-text-muted);
  background: var(--espn-surface-alt);
  border: 1px solid var(--espn-border);
  border-radius: 999px;
  max-width: calc(100% - 28px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index: 2;
}
.espn-schedule-card__divtag .mdi { color: var(--espn-accent); font-size: 12px; flex-shrink: 0; }

/* Filter bar for the all-schedule page */
.espn-schedule-filterbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 12px;
  padding: 14px 18px 18px;
  align-items: end;
}
@media (max-width: 720px) {
  .espn-schedule-filterbar {
    grid-template-columns: 1fr 1fr;
    padding: 12px 14px 14px;
    gap: 10px;
  }
  .espn-schedule-filterbar__actions { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .espn-schedule-filterbar { grid-template-columns: 1fr; }
}

.espn-schedule-filterbar__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.espn-schedule-filterbar__field label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--espn-text-muted);
}

.espn-schedule-filterbar__select {
  position: relative;
  display: flex;
  align-items: center;
}
.espn-schedule-filterbar__select > .mdi:first-child {
  position: absolute;
  left: 12px;
  font-size: 16px;
  color: var(--espn-accent);
  pointer-events: none;
}
.espn-schedule-filterbar__chev {
  position: absolute;
  right: 12px;
  font-size: 18px;
  color: var(--espn-text-muted);
  pointer-events: none;
}
.espn-schedule-filterbar__select select,
.espn-schedule-filterbar__select input {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 38px;
  background: var(--espn-surface-alt);
  border: 1px solid var(--espn-border);
  border-radius: 10px;
  color: var(--espn-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.espn-schedule-filterbar__select select:focus,
.espn-schedule-filterbar__select input:focus {
  border-color: var(--espn-accent);
  background: var(--espn-surface);
  box-shadow: 0 0 0 3px rgba(0, 200, 90, .15);
}

.espn-schedule-filterbar__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.espn-schedule-filterbar__apply,
.espn-schedule-filterbar__reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 42px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: 10px;
  border: 1px solid var(--espn-border);
  cursor: pointer;
  text-decoration: none;
  transition: background .25s ease, transform .15s ease, box-shadow .25s ease, border-color .25s ease;
}
.espn-schedule-filterbar__apply {
  background: var(--espn-accent);
  border-color: var(--espn-accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 200, 90, .25);
}
.espn-schedule-filterbar__apply:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 200, 90, .35);
}
.espn-schedule-filterbar__reset {
  background: var(--espn-surface);
  color: var(--espn-text-muted);
}
.espn-schedule-filterbar__reset:hover {
  background: var(--espn-surface-alt);
  border-color: var(--espn-accent);
  color: var(--espn-accent);
}
.espn-schedule-filterbar__apply .mdi,
.espn-schedule-filterbar__reset .mdi { font-size: 16px; }

/* Field instructions — small chip pinned to the top-right of the card */
.espn-schedule-card__notes {
  position: absolute;
  top: 10px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 220px;
  padding: 4px 12px 4px 10px;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  color: var(--espn-accent);
  background: var(--espn-accent-soft);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 200, 90, .18) inset;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  z-index: 2;
}
.espn-schedule-card__notes .mdi {
  flex-shrink: 0;
  color: var(--espn-accent);
  font-size: 14px;
}

/* Empty state — "no favorite team yet" or "no schedule yet" */
.espn-myschedule-empty {
  padding: 48px 24px 56px;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.espn-myschedule-empty > .mdi {
  display: block;
  font-size: 56px;
  color: var(--espn-accent);
  opacity: .5;
  margin-bottom: 14px;
}
.espn-myschedule-empty__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--espn-text);
}
.espn-myschedule-empty__sub {
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--espn-text-muted);
}

.espn-myschedule-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  text-align: left;
  display: inline-block;
}
.espn-myschedule-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--espn-text);
}
.espn-myschedule-steps__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  font-size: 11px;
  font-weight: 800;
  color: var(--espn-accent);
  background: var(--espn-accent-soft);
  border-radius: 50%;
}
.espn-myschedule-steps li strong { color: var(--espn-accent); font-weight: 700; }
.espn-myschedule-steps li .mdi { color: var(--espn-accent); font-size: 16px; vertical-align: middle; }

.espn-myschedule-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--espn-accent);
  color: #fff !important;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(0, 200, 90, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.espn-myschedule-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 200, 90, .38);
}
.espn-myschedule-cta .mdi { font-size: 18px; }

/* =========================================================================
   Slow ambient flash beam — a diagonal accent-green streak that drifts
   left-to-right across the panel background.
   Add the .espn-panel--flash modifier to any panel that should get it.
   ========================================================================= */
.espn-panel--flash {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.espn-panel--flash::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 115deg gradient -> stripe is tilted ~25° from vertical (clearly diagonal) */
  background: linear-gradient(115deg,
    transparent             0%,
    transparent            42%,
    rgba(0, 200, 90, .05) 47%,
    rgba(0, 200, 90, .22) 50%,
    rgba(0, 200, 90, .05) 53%,
    transparent            58%,
    transparent           100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 130% 0;
  filter: blur(1px);
  pointer-events: none;
  z-index: 0;
  animation: espn-panel-flash 7s linear infinite;
}
.espn-panel--flash > * { position: relative; z-index: 1; }

@keyframes espn-panel-flash {
  0%   { background-position: 130% 0; }   /* stripe off the left */
  100% { background-position: -30% 0; }   /* stripe off the right */
}

@media (prefers-reduced-motion: reduce) {
  .espn-panel--flash::before { animation: none !important; opacity: 0; }
}

/* =========================================================================
   Local page — venue / field list
   ========================================================================= */
.espn-venue-list {
  list-style: none;
  margin: 0;
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.espn-venue-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  background:
    linear-gradient(90deg, rgba(0,136,42,.08) 0%, rgba(0,136,42,.03) 22%, transparent 45%),
    var(--espn-surface);
  border: 1px solid var(--espn-border);
  border-left: 3px solid var(--espn-accent);
  border-radius: 10px;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
[data-theme="dark"] .espn-venue-row {
  background:
    linear-gradient(90deg, rgba(0,136,42,.14) 0%, rgba(0,136,42,.05) 22%, transparent 45%),
    rgba(255,255,255,.02);
}
.espn-venue-row:hover {
  border-color: var(--espn-accent);
  box-shadow: 0 0 0 1px var(--espn-accent) inset, 0 6px 18px rgba(0,136,42,.12);
}

.espn-venue-row__num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--espn-accent-soft);
  color: var(--espn-accent);
  font-weight: 900;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px rgba(0, 200, 90, .22) inset;
}

.espn-venue-row__body { flex: 1; min-width: 0; }
.espn-venue-row__name {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 800;
  color: var(--espn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.espn-venue-row__addr {
  margin: 0;
  font-size: 13px;
  color: var(--espn-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
}
.espn-venue-row__addr .mdi { color: var(--espn-accent); font-size: 16px; flex-shrink: 0; }

.espn-venue-row__map {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--espn-accent);
  color: #fff !important;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
  box-shadow: 0 6px 16px rgba(0, 200, 90, .28);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.espn-venue-row__map:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 200, 90, .42);
  background: #00aa3d;
}
.espn-venue-row__map .mdi { font-size: 16px; }

/* Empty state */
.espn-venue-empty {
  padding: 48px 24px 56px;
  text-align: center;
}
.espn-venue-empty > .mdi {
  display: block;
  font-size: 56px;
  color: var(--espn-accent);
  opacity: .45;
  margin-bottom: 14px;
}
.espn-venue-empty__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--espn-text);
}
.espn-venue-empty__sub {
  margin: 0;
  font-size: 13px;
  color: var(--espn-text-muted);
}

@media (max-width: 600px) {
  .espn-venue-row__map-label { display: none; }   /* compact: icon-only button on mobile */
  .espn-venue-row__map { padding: 8px 10px; }
}

/* =========================================================================
   Login page — full-screen split with animated aurora, floating lights, and
   a polished form card. Bypasses normal page padding (body.app_login).
   ========================================================================= */
body.app_login.espn-themed { padding-bottom: 0 !important; }
body.app_login { overflow: hidden; }

.espn-login {
  position: fixed;
  inset: 0;
  display: flex;
  background: var(--espn-bg);
  color: var(--espn-text);
  overflow: hidden;
  z-index: 1;
}

/* --- Animated background layer ---------------------------------------- */
.espn-login__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Aurora blobs */
.espn-login__aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  mix-blend-mode: screen;
  will-change: transform;
}
.espn-login__aurora--1 {
  width: 620px; height: 620px;
  top: -200px; left: -120px;
  background: radial-gradient(circle, rgba(0, 220, 110, .50) 0%, transparent 70%);
  animation: espn-login-aurora-a 22s ease-in-out infinite;
  /* Parallax — moves OPPOSITE to the cursor for depth feel; the `translate`
     property is independent of `transform` so the existing animation still runs. */
  translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -22px);
  transition: translate .25s cubic-bezier(.2, .8, .25, 1);
}
.espn-login__aurora--2 {
  width: 520px; height: 520px;
  bottom: -160px; right: -120px;
  background: radial-gradient(circle, rgba(0, 150, 80, .45) 0%, transparent 70%);
  animation: espn-login-aurora-b 27s ease-in-out infinite;
  translate: calc(var(--mx, 0) * 18px) calc(var(--my, 0) * 18px);
  transition: translate .25s cubic-bezier(.2, .8, .25, 1);
}
.espn-login__aurora--3 {
  width: 420px; height: 420px;
  top: 35%; left: 38%;
  background: radial-gradient(circle, rgba(140, 255, 170, .25) 0%, transparent 70%);
  animation: espn-login-aurora-c 30s ease-in-out 4s infinite;
  translate: calc(var(--mx, 0) * 30px) calc(var(--my, 0) * 30px);
  transition: translate .25s cubic-bezier(.2, .8, .25, 1);
}
@keyframes espn-login-aurora-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(80px, -50px) scale(1.1); }
  66%      { transform: translate(-50px, 60px) scale(.95); }
}
@keyframes espn-login-aurora-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-80px, -40px) scale(1.15); }
  75%      { transform: translate(50px, 70px) scale(.9); }
}
@keyframes espn-login-aurora-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-120px, 80px) scale(1.2); }
}

/* Subtle gridlines fading to center */
.espn-login__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
}
[data-theme="light"] .espn-login__grid {
  background-image:
    linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
}

/* Floating accent-green orbs */
.espn-login__light {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--espn-accent);
  box-shadow:
    0 0 10px var(--espn-accent),
    0 0 22px rgba(0, 200, 90, .6);
}
.espn-login__light {
  /* Add parallax via `translate` (separate from the float `transform`) */
  translate: calc(var(--mx, 0) * 35px) calc(var(--my, 0) * 35px);
  transition: translate .3s cubic-bezier(.2, .8, .25, 1);
}
.espn-login__light--1 { top: 18%; left: 28%; animation: espn-login-float 6s ease-in-out infinite; }
.espn-login__light--2 { top: 60%; left: 12%; animation: espn-login-float 8s ease-in-out 1s infinite; }
.espn-login__light--3 { top: 78%; right: 38%; animation: espn-login-float 7s ease-in-out 2s infinite; }
.espn-login__light--4 { top: 25%; right: 18%; animation: espn-login-float 9s ease-in-out 3s infinite; }

/* Constellation lines connecting the orbs — slow dash animation */
.espn-login__constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .55;
  /* Slight reverse parallax for depth */
  translate: calc(var(--mx, 0) * 12px) calc(var(--my, 0) * 12px);
  transition: translate .3s cubic-bezier(.2, .8, .25, 1);
}
.espn-login__constellation line {
  stroke: var(--espn-accent);
  stroke-width: .25;
  stroke-dasharray: 1 1.5;
  vector-effect: non-scaling-stroke;
  animation: espn-login-constellation-dash 14s linear infinite;
}
@keyframes espn-login-constellation-dash {
  to { stroke-dashoffset: -40; }
}
@keyframes espn-login-float {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(-22px); opacity: 1; }
}

/* --- Split layout ---------------------------------------------------- */
.espn-login__split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px;
  gap: 40px;
  align-items: stretch;
}

/* --- LEFT: brand panel ----------------------------------------------- */
.espn-login__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
}
.espn-login__logo {
  max-width: 180px;
  margin-bottom: 40px;
  filter: drop-shadow(0 4px 24px rgba(0, 200, 90, .35));
}
.espn-login__logo--light { display: none; }
[data-theme="light"] .espn-login__logo--light { display: block; }
[data-theme="light"] .espn-login__logo--dark  { display: none; }

.espn-login__hero {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin: 0 0 24px;
}
.espn-login__hero-line {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  animation: espn-login-rise .8s cubic-bezier(.16, 1, .3, 1) forwards;
}
.espn-login__hero-line:nth-child(1) { animation-delay: .10s; }
.espn-login__hero-line:nth-child(2) { animation-delay: .28s; }
.espn-login__hero-line:nth-child(3) { animation-delay: .46s; }
.espn-login__hero-line--accent {
  background: linear-gradient(135deg,
    var(--espn-accent) 0%,
    #4dd587            30%,
    #b8ffce            48%,                  /* bright highlight that travels */
    #ffffff            50%,
    #b8ffce            52%,
    #4dd587            70%,
    #00aa3d           100%);
  background-size: 240% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  /* Replay the entrance rise THEN shimmer continuously */
  animation:
    espn-login-rise .8s .28s cubic-bezier(.16, 1, .3, 1) forwards,
    espn-login-hero-shimmer 5s ease-in-out 1.8s infinite;
}
@keyframes espn-login-hero-shimmer {
  0%, 100% { background-position: 100% 50%; }
  50%      { background-position:   0% 50%; }
}
@keyframes espn-login-rise {
  to { opacity: 1; transform: translateY(0); }
}

.espn-login__tagline {
  font-size: 16px;
  color: var(--espn-text-muted);
  margin: 0 0 28px;
  max-width: 460px;
  line-height: 1.5;
  opacity: 0;
  animation: espn-login-rise .8s .65s cubic-bezier(.16, 1, .3, 1) forwards;
}

.espn-login__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.espn-login__features li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--espn-text);
  font-weight: 600;
  font-size: 14px;
  opacity: 0;
  transform: translateX(-20px);
  animation: espn-login-slide-in .65s cubic-bezier(.16, 1, .3, 1) forwards;
}
.espn-login__features li:nth-child(1) { animation-delay: .85s; }
.espn-login__features li:nth-child(2) { animation-delay: 1.00s; }
.espn-login__features li:nth-child(3) { animation-delay: 1.15s; }
.espn-login__features li .mdi {
  color: var(--espn-accent);
  font-size: 18px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--espn-accent-soft);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0, 200, 90, .25) inset;
}
@keyframes espn-login-slide-in {
  to { opacity: 1; transform: translateX(0); }
}

/* --- RIGHT: form panel ----------------------------------------------- */
.espn-login__form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.espn-login__card {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 44px 38px 36px;
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  border-radius: 22px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .35),
    0 0 0 1px rgba(255, 255, 255, .03) inset;
  isolation: isolate;
  opacity: 0;
  transform: scale(.96);
  animation: espn-login-card-in .65s .15s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes espn-login-card-in {
  to { opacity: 1; transform: scale(1); }
}

/* Shake the card AFTER its entrance when an error alert is present */
.espn-login__card:has(.espn-login__alert) {
  animation:
    espn-login-card-in .55s .1s cubic-bezier(.16, 1, .3, 1) forwards,
    espn-login-card-shake .55s .7s cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes espn-login-card-shake {
  10%, 90% { transform: translate(-2px, 0) scale(1); }
  20%, 80% { transform: translate(4px, 0)  scale(1); }
  30%, 50%, 70% { transform: translate(-7px, 0) scale(1); }
  40%, 60% { transform: translate(7px, 0)  scale(1); }
  100%     { transform: translate(0, 0)    scale(1); }
}

/* =========================================================================
   Full-screen loader — used during login/logout / any "please wait" action
   Spawned via window.espnShowLoader('Signing in') / espnHideLoader()
   ========================================================================= */
.espn-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 16, .65);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
  animation: espn-loader-fade .35s cubic-bezier(.16, 1, .3, 1);
}
@keyframes espn-loader-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.espn-loader__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: espn-loader-panel-in .55s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes espn-loader-panel-in {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}

/* NSID logo (no card / no border) with a periodic shine sweep */
.espn-loader__brand {
  position: relative;
  display: inline-block;
  overflow: hidden;          /* clips the shine bar to the logo's bounding box */
  animation: espn-loader-breathe 2.6s ease-in-out infinite;
}
.espn-loader__logo {
  display: block;
  max-width: 260px;
  height: auto;
  filter: drop-shadow(0 0 22px rgba(0, 200, 90, .35));
}
/* Diagonal shine bar that sweeps across every ~2.8s with a pause between sweeps */
.espn-loader__shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent              0%,
    transparent             32%,
    rgba(0, 200, 90, .15)  44%,
    rgba(180, 255, 200, .80) 50%,
    rgba(255, 255, 255, .95) 51%,
    rgba(180, 255, 200, .80) 52%,
    rgba(0, 200, 90, .15)  58%,
    transparent             70%,
    transparent            100%);
  filter: blur(1px);
  mix-blend-mode: screen;
  transform: translateX(-110%);
  animation: espn-loader-shine 2.8s ease-in-out infinite;
}
@keyframes espn-loader-shine {
  0%, 25%  { transform: translateX(-110%); }
  75%, 100% { transform: translateX(220%);  }
}
@keyframes espn-loader-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Status label with subtle blinking dots after the text */
.espn-loader__label {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 24px 0 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.espn-loader__label::after {
  content: "...";
  display: inline-block;
  animation: espn-loader-label-dots 1.2s steps(4, end) infinite;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  letter-spacing: 0;       /* override parent's 2px letter-spacing on the dots */
  width: 0;
}
@keyframes espn-loader-label-dots {
  to { width: 1.6em; }
}

@media (prefers-reduced-motion: reduce) {
  .espn-loader__brand,
  .espn-loader__shine,
  .espn-loader__label::after { animation: none !important; }
}

/* =========================================================================
   Top progress bar — sits at the very top of every page, simulates
   navigation progress. Driven by espnProgressStart() / espnProgressDone()
   on link clicks + form submits.
   ========================================================================= */
.espn-progressbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.espn-progressbar.is-active { opacity: 1; }
.espn-progressbar__bar {
  position: relative;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    var(--espn-accent) 0%,
    #4dd587  35%,
    #b8ffce  50%,
    #4dd587  65%,
    var(--espn-accent) 100%);
  background-size: 200% 100%;
  box-shadow:
    0 0 12px rgba(0, 200, 90, .85),
    0 0  6px var(--espn-accent);
  transition: width .35s cubic-bezier(.65, 0, .35, 1);
  animation: espn-progressbar-shimmer 1.8s linear infinite;
  border-bottom-right-radius: 3px;
}
/* Trailing "comet" glow at the leading edge of the bar */
.espn-progressbar__bar::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 60px;
  height: 6px;
  margin-top: -3px;
  background: radial-gradient(ellipse at right, rgba(0, 255, 120, .9) 0%, transparent 70%);
  filter: blur(2px);
}
@keyframes espn-progressbar-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .espn-progressbar__bar { animation: none; }
}
/* Accent line at the top of the card */
.espn-login__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--espn-accent), transparent);
  border-radius: 0 0 3px 3px;
}

.espn-login__card-header { margin-bottom: 28px; text-align: center; }
.espn-login__title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.5px;
  color: var(--espn-text);
}
.espn-login__subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--espn-text-muted);
}

/* Error alert */
.espn-login__alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  margin-bottom: 18px;
  background: rgba(231, 76, 60, .12);
  border: 1px solid rgba(231, 76, 60, .32);
  color: #e74c3c;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}
.espn-login__alert .mdi { font-size: 18px; }

/* Form */
.espn-login__form { display: flex; flex-direction: column; gap: 16px; }

/* Floating-label input */
.espn-login__field { position: relative; }
.espn-login__field input {
  width: 100%;
  height: 58px;
  padding: 20px 14px 6px 46px;
  background: var(--espn-surface-alt);
  border: 1px solid var(--espn-border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--espn-text);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
  outline: none;
}
.espn-login__field input::placeholder { color: transparent; }
.espn-login__field input:focus {
  border-color: var(--espn-accent);
  background: var(--espn-surface);
  box-shadow: 0 0 0 4px rgba(0, 200, 90, .15);
}
.espn-login__field-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--espn-text-muted);
  transition: color .25s ease;
  pointer-events: none;
}
.espn-login__field:focus-within .espn-login__field-icon { color: var(--espn-accent); }

.espn-login__field label {
  position: absolute;
  top: 18px;
  left: 46px;
  font-size: 14px;
  font-weight: 600;
  color: var(--espn-text-muted);
  pointer-events: none;
  transition: top .25s ease, left .25s ease, font-size .25s ease, color .25s ease;
}
.espn-login__field input:focus ~ label,
.espn-login__field input:not(:placeholder-shown) ~ label {
  top: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--espn-accent);
}

/* Password toggle (eye icon) */
.espn-login__pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--espn-text-muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.espn-login__pw-toggle:hover {
  background: var(--espn-surface);
  color: var(--espn-accent);
}
.espn-login__pw-toggle .mdi { font-size: 18px; }

/* Submit — shimmering accent pill */
.espn-login__submit {
  position: relative;
  margin-top: 6px;
  width: 100%;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg,
    var(--espn-accent)  0%,
    #00aa3d            25%,
    #4dd587            50%,
    #00aa3d            75%,
    var(--espn-accent) 100%);
  background-size: 250% 100%;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
  box-shadow:
    0 14px 32px rgba(0, 200, 90, .35),
    0 0 0 1px rgba(255, 255, 255, .18) inset,
    0 1px 0 rgba(255, 255, 255, .30) inset;
  animation: espn-tabs-shimmer 4s ease-in-out infinite;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
  overflow: hidden;
}
.espn-login__submit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 40px rgba(0, 200, 90, .42),
    0 0 0 1px rgba(255, 255, 255, .22) inset,
    0 1px 0 rgba(255, 255, 255, .35) inset;
}
.espn-login__submit:hover .espn-login__submit-arrow { transform: translateX(4px); }
.espn-login__submit:active { transform: translateY(0); }
.espn-login__submit-arrow {
  font-size: 20px;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

/* Footer links */
.espn-login__links {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  gap: 12px;
  flex-wrap: wrap;
}
.espn-login__links a {
  position: relative;
  color: var(--espn-accent);
  text-decoration: none;
  font-weight: 700;
  padding-bottom: 2px;
  transition: color .2s ease;
}
/* Animated gradient underline that slides in left-to-right on hover */
.espn-login__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--espn-accent), #4dd587, var(--espn-accent));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.espn-login__links a:hover {
  color: #00aa3d;
  text-decoration: none;
}
.espn-login__links a:hover::after { transform: scaleX(1); }
.espn-login__links > p {
  margin: 0;
  color: var(--espn-text-muted);
}

/* Floating theme toggle in the corner */
.espn-login__theme {
  position: fixed !important;
  top: 22px;
  right: 22px;
  z-index: 10;
}

@media (prefers-reduced-motion: reduce) {
  .espn-login__aurora,
  .espn-login__light,
  .espn-login__hero-line,
  .espn-login__tagline,
  .espn-login__features li,
  .espn-login__card,
  .espn-login__submit { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- TABLET (≤960px) — stacked, brand-on-top, allow scroll ---- */
@media (max-width: 960px) {
  body.app_login { overflow: auto; }
  .espn-login {
    position: relative;
    inset: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .espn-login__bg { position: fixed; }
  .espn-login__split {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
    padding: 28px 16px 18px;
    gap: 14px;
    align-items: start;
  }
  .espn-login__brand {
    display: flex;
    padding: 0;
    text-align: center;
    align-items: center;
  }
  .espn-login__logo {
    max-width: 180px;
    margin: 0 auto 14px;
  }
  .espn-login__hero {
    font-size: clamp(24px, 6vw, 36px);
    margin: 0 auto 10px;
    line-height: 1.1;
    max-width: 480px;
  }
  .espn-login__tagline {
    margin: 0 auto 12px;
    font-size: 13px;
    max-width: 420px;
  }
  .espn-login__features {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 auto;
  }
  .espn-login__features li {
    padding: 5px 10px 5px 7px;
    background: var(--espn-surface);
    border: 1px solid var(--espn-border);
    border-radius: 999px;
    font-size: 11px;
    gap: 5px;
  }
  .espn-login__features li .mdi {
    width: 20px; height: 20px;
    font-size: 13px;
    border-radius: 6px;
  }
  .espn-login__form-wrap { padding: 0; }
  .espn-login__card {
    max-width: 460px;
    padding: 28px 22px 22px;
    margin: 0 auto;
    border-radius: 18px;
  }
  .espn-login__card-header { margin-bottom: 18px; }
  .espn-login__title { font-size: 22px; }
  .espn-login__subtitle { font-size: 13px; }
  .espn-login__form { gap: 14px; }
}

/* ---------- PHONE (≤600px) — full brand stack above the form -------- */
@media (max-width: 600px) {
  /* On phone the split becomes a flex column that always fills the viewport.
     This gives the brand block real vertical room so its middle text can
     float between the logo (pinned top) and the sign-in card (pinned
     bottom). */
  .espn-login__split {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    padding: 18px 14px 14px;
    gap: 0;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: stretch;          /* override the ≤900px rule so the form card spans full width */
  }
  .espn-login__form-wrap {
    width: 100%;
    align-self: stretch;
  }
  .espn-login__card {
    max-width: 100%;                /* let the card actually use that full width */
  }
  /* Brand fills the available space above the form card and centers its
     own contents. The logo sits at the top; the hero block uses
     `margin-top: auto` so it floats to the vertical center; the features
     list uses `margin-bottom: auto` so it pushes back up — net result:
     hero + tagline + features are vertically centered in the leftover gap. */
  .espn-login__brand {
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: center;
    align-items: center;
    flex: 1 1 auto;
    min-height: 0;
  }
  .espn-login__form-wrap { flex: 0 0 auto; }
  .espn-login__logo {
    max-width: 240px;
    margin: 6px auto 0;        /* pinned near the top */
  }
  .espn-login__hero {
    font-size: clamp(24px, 7.5vw, 32px);
    font-weight: 800;
    margin: auto auto 14px;    /* `auto` top pushes the block to vertical center */
    line-height: 1.15;
    max-width: 100%;
  }
  .espn-login__tagline {
    margin: 0 auto 18px;
    font-size: 14px;
    font-weight: 600;
    max-width: 100%;
  }
  .espn-login__features {
    display: flex;
    flex-direction: column;
    align-items: stretch;       /* every pill spans the same width */
    gap: 10px;
    width: 100%;
    max-width: 320px;           /* keeps the pill row from getting too wide on tablets */
    margin: 0 auto auto;        /* `auto` bottom balances the hero's `auto` top → group centers */
    padding-bottom: 12px;
  }
  .espn-login__features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--espn-surface);
    border: 1px solid var(--espn-border);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--espn-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  }
  .espn-login__features li .mdi {
    width: 22px; height: 22px;
    font-size: 16px;
    color: var(--espn-accent);
    border-radius: 6px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .espn-login__card { padding: 22px 18px 16px; border-radius: 16px; }
  .espn-login__card-header { margin-bottom: 14px; }
  .espn-login__title { font-size: 20px; }
  .espn-login__subtitle { font-size: 12.5px; }

  .espn-login__form { gap: 10px; }
  .espn-login__field input { height: 48px; font-size: 14px; padding-top: 18px; }
  .espn-login__field label { top: 15px; }
  .espn-login__submit { height: 48px; font-size: 14px; margin-top: 2px; }

  .espn-login__links {
    margin-top: 12px;
    gap: 4px;
    flex-direction: column;
    align-items: flex-start;
    font-size: 12px;
  }
  .espn-login__links > p { font-size: 12px; }

  .espn-login__theme { top: 12px; right: 12px; }
}

/* Optional chip showing team count under the name */
.espn-league-row__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--espn-accent);
  background: var(--espn-accent-soft);
  border-radius: 999px;
  vertical-align: middle;
}
.espn-league-row__chip .mdi { font-size: 13px; }

/* Favorite star button */
.espn-league-fav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--espn-text-muted);
  cursor: pointer;
  margin-left: 4px;
  transition: background .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.espn-league-fav:hover { background: var(--espn-surface-alt); transform: scale(1.12); }
.espn-league-fav:active { transform: scale(.95); }
.espn-league-fav .icon { display: inline-flex; align-items: center; justify-content: center; }
.espn-league-fav .mdi { font-size: 22px; line-height: 1; transition: color .25s ease, filter .25s ease; }

/* Color the star based on which icon class is active (toggled by JS) */
.espn-league-fav .mdi-star-outline,
.espn-league-fav .text-primary { color: var(--espn-text-muted) !important; }
.espn-league-fav .mdi-star,
.espn-league-fav .text-mint-green {
  color: #e84a4b !important;
  filter: drop-shadow(0 0 6px rgba(232, 74, 75, .45));
}

/* Empty state for "no favorites yet" */
.espn-leagues-empty {
  padding: 36px 24px 44px;
  text-align: center;
}
.espn-leagues-empty > .mdi {
  display: block;
  font-size: 52px;
  color: var(--espn-accent);
  opacity: .45;
  margin-bottom: 14px;
}
.espn-leagues-empty__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--espn-text);
}
.espn-leagues-empty__sub {
  margin: 0;
  font-size: 13px;
  color: var(--espn-text-muted);
}
.espn-leagues-empty__sub .mdi { color: var(--espn-accent); font-size: 16px; vertical-align: middle; }

@media (max-width: 600px) {
  .espn-leagues-toolbar { padding: 12px 12px 4px; }
  .espn-leagues-tabs { width: 100%; }
  .espn-leagues-tab { flex: 1; justify-content: center; }
}



/* Logo link in the page header */
.espn-header__logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}
.espn-header__logo-link:hover,
.espn-header__logo-link:focus {
  transform: scale(1.04);
  filter: drop-shadow(0 0 6px rgba(0, 136, 42, .35));
  text-decoration: none;
  outline: none;
}
.espn-header__logo-link:active { transform: scale(.98); }


/* ============================================================
   BRACKET — Match Detail / Edit Match modal (ESPN-styled)
   Overrides the legacy Bootstrap modal so it follows the theme.
   ============================================================ */

.espn-match-modal .modal-dialog {
  max-width: 480px;
  margin: 8vh auto;
}
.espn-match-modal__card {
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.2);
  color: var(--espn-text);
  overflow: hidden;
}
.espn-match-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--espn-border);
  background: var(--espn-surface);
}
.espn-match-modal__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--espn-text);
  letter-spacing: .01em;
}
.espn-match-modal__title .mdi {
  font-size: 20px;
  color: var(--espn-accent);
}
.espn-match-modal__close {
  border: 0;
  background: transparent;
  color: var(--espn-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.espn-match-modal__close:hover {
  background: var(--espn-surface-alt);
  color: var(--espn-text);
}
.espn-match-modal__close .mdi { font-size: 20px; }

.espn-match-modal__body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.espn-match-modal__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--espn-surface-alt);
  border: 1px solid var(--espn-border);
}
.espn-match-modal__label {
  flex: 0 0 130px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--espn-text-muted);
}
.espn-match-modal__label .mdi {
  font-size: 16px;
  color: var(--espn-accent);
}
.espn-match-modal__value {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--espn-text);
  word-break: break-word;
}

.espn-match-modal__scores {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 14px;
  padding: 14px 12px;
  margin-top: 2px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--espn-surface-alt) 0%, var(--espn-surface) 100%);
  border: 1px solid var(--espn-border);
}
.espn-match-modal__scorebox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.espn-match-modal__scorelabel {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--espn-text-muted);
  margin: 0;
}
.espn-match-modal__scorevalue {
  font-size: 28px;
  font-weight: 800;
  color: var(--espn-text);
  letter-spacing: -.02em;
  line-height: 1;
}
.espn-match-modal__vs {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--espn-accent);
  align-self: center;
  padding-bottom: 6px;
}
.espn-match-modal__input {
  width: 100%;
  max-width: 110px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--espn-border);
  background: var(--espn-surface);
  color: var(--espn-text);
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.espn-match-modal__input:focus {
  outline: none;
  border-color: var(--espn-accent);
  box-shadow: 0 0 0 3px rgba(0, 136, 42, .15);
}
.espn-match-modal__input::-webkit-outer-spin-button,
.espn-match-modal__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.espn-match-modal__input[type="number"] { -moz-appearance: textfield; }

.espn-match-modal__msg {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.espn-match-modal__msg[hidden] { display: none; }
.espn-match-modal__msg.is-ok    { background: rgba(0, 136, 42, .12); color: var(--espn-accent); }
.espn-match-modal__msg.is-error { background: rgba(232, 74, 75, .12); color: #e84a4b; }

.espn-match-modal__footer {
  display: flex;
  gap: 8px;
  padding: 12px 18px 16px;
  justify-content: flex-end;
  background: var(--espn-surface);
  border-top: 1px solid var(--espn-border);
}
.espn-match-modal__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--espn-border);
  background: var(--espn-surface-alt);
  color: var(--espn-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.espn-match-modal__btn:hover { background: var(--espn-surface); }
.espn-match-modal__btn:active { transform: scale(.98); }
.espn-match-modal__btn--primary {
  background: var(--espn-accent);
  border-color: var(--espn-accent);
  color: #fff;
}
.espn-match-modal__btn--primary:hover { background: #006f23; border-color: #006f23; }
.espn-match-modal__btn--primary .mdi { font-size: 16px; }
.espn-match-modal__btn--ghost { border-color: transparent; background: transparent; color: var(--espn-text-muted); }
.espn-match-modal__btn--ghost:hover { color: var(--espn-text); background: var(--espn-surface-alt); }

/* Backdrop tint when this modal is shown (Bootstrap injects a separate .modal-backdrop element) */
.modal-backdrop.show { opacity: .65; }

@media (max-width: 480px) {
  .espn-match-modal .modal-dialog { margin: 16px; max-width: calc(100% - 32px); }
  .espn-match-modal__row { flex-direction: column; gap: 4px; }
  .espn-match-modal__label { flex: none; }
  .espn-match-modal__scorevalue { font-size: 22px; }
}


/* ============================================================
   Utility classes + rules that replaced inline styles/blocks
   (per code-review cleanup: home.html.twig:91, _division_shell.html.twig:4,
   division.html.twig:20, division_teams.html.twig:12, division_bracket.html.twig)
   ============================================================ */

/* Generic "hide" utility — used by JS toggles instead of inline display:none */
.is-hidden { display: none; }

/* The ESPN page card body needs position:relative for the spotlight + stadium
   backgrounds to anchor correctly. (Previously was a per-page inline <style>.) */
.espn-page-body { position: relative; }

/* Bracket Match Detail / Edit modals — sit above any other floating UI */
.espn-match-modal { z-index: 1054; }

/* Legacy header bar is suppressed on every ESPN-style route. The route
   whitelist in header.html.twig already prevents the bar from rendering;
   this rule is a CSS safety-net for any in-flight transitional pages. */
body.app_home                       .home > .bg-white.shadow-sm.mb1,
body.my_schedule                    .home > .bg-white.shadow-sm.mb1,
body.scheduler_tournament_division  .home > .bg-white.shadow-sm.mb1,
body.scheduler_tournament_teams     .home > .bg-white.shadow-sm.mb1,
body.scheduler_tournament_local     .home > .bg-white.shadow-sm.mb1,
body.scheduler_all_schedule         .home > .bg-white.shadow-sm.mb1,
body.scheduler_division_schedule    .home > .bg-white.shadow-sm.mb1,
body.scheduler_division_standings   .home > .bg-white.shadow-sm.mb1,
body.scheduler_division_bracket     .home > .bg-white.shadow-sm.mb1 {
    display: none;
}


/* Date picker — the native <input type="date"> overlays the pill, visually
   invisible (opacity 0) but covering its full hit area, so a click on the
   pill lands directly on the input and the browser opens its native picker.
   Off-screen positioning + pointer-events:none was rejected by Chrome's
   showPicker() with NotAllowedError. */
.espn-schedule-datepill {
  position: relative;
  cursor: pointer;
  transition: background .15s ease;
}
.espn-schedule-datepill:hover { background: var(--espn-surface-alt); }
.espn-schedule-datepill:focus-within {
  outline: 2px solid var(--espn-accent);
  outline-offset: 2px;
}
.espn-schedule-datepill__hidden-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  /* Some browsers render a tiny calendar glyph for date inputs even at opacity 0;
     this collapses it so the pill's calendar icon stays the visual anchor. */
  color: transparent;
  background: transparent;
}
.espn-schedule-datepill__hidden-input::-webkit-calendar-picker-indicator {
  /* Stretch the picker-indicator to cover the WHOLE input so a click anywhere
     on the pill area opens the calendar — not just clicks on the small icon
     that Chrome normally renders on the right side of a date input. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  background: transparent;
  cursor: pointer;
}

/* "No games on this date" notice — shown when the date picker lands on a
   day with no scheduled games. Sits between the schedule header and the
   day list, dismissible, and the JS auto-scrolls to the nearest day. */
.espn-schedule-nodate {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 14px 0;
  padding: 12px 14px;
  border: 1px solid rgba(243, 176, 90, .35);
  border-left: 3px solid #f3b05a;
  border-radius: 8px;
  background: rgba(243, 176, 90, .08);
  color: var(--espn-text);
}
[data-theme="dark"] .espn-schedule-nodate { background: rgba(243, 176, 90, .12); }
.espn-schedule-nodate > .mdi {
  font-size: 22px;
  color: #f3b05a;
  flex-shrink: 0;
  line-height: 1.2;
}
.espn-schedule-nodate__body { flex: 1; min-width: 0; }
.espn-schedule-nodate__title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .4px;
}
.espn-schedule-nodate__sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--espn-text-muted);
  line-height: 1.4;
}
.espn-schedule-nodate__sub strong { color: var(--espn-text); }
.espn-schedule-nodate__close {
  background: transparent;
  border: 0;
  padding: 4px;
  border-radius: 6px;
  color: var(--espn-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.espn-schedule-nodate__close:hover {
  background: var(--espn-surface-alt);
  color: var(--espn-text);
}
.espn-schedule-nodate__close .mdi { font-size: 18px; }


/* Login: hide the scrollbar visually (page still scrolls). The brand panel
   above the form intentionally pushes content past the viewport on phones,
   but we don't want a visible track since the page already has a strong
   gradient/aurora background. */
body.app_login {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;     /* IE 10+ / old Edge */
}
body.app_login::-webkit-scrollbar { display: none; }  /* Chrome / Safari / new Edge */


/* ============================================================
   TEAM SEARCH + TEAM PROFILE + LOGO UPLOAD FEATURE (#3267)
   Cherry-picked block — all selectors are unique to this feature:
   espn-back-pill, espn-team-header, espn-profile-*, espn-divsearch-*,
   espn-team-match-card, espn-logo-modal-*, espn-league-logo-wrap.
   ============================================================ */


/* ============================================================
   TEAM PROFILE PAGE
   Back pill, team header, profile tabs, match-card outcome styles
   ============================================================ */

/* Back-to-division pill */
.espn-back-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 8px 10px;
  margin: 8px 18px 14px;
  border-radius: 999px;
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  color: var(--espn-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease, border-color .2s ease, color .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.espn-back-pill:hover {
  background: var(--espn-surface-alt);
  border-color: var(--espn-accent);
  color: var(--espn-accent);
  transform: translateX(-2px);
}
.espn-back-pill .mdi { font-size: 20px; line-height: 1; }

/* Team header card */
.espn-team-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  margin: 0 18px 18px;
  background: linear-gradient(135deg, var(--espn-surface) 0%, var(--espn-surface-alt) 100%);
  border: 1px solid var(--espn-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  position: relative;
  overflow: visible;
}
.espn-team-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--espn-accent) 0%, transparent 80%);
  border-radius: 14px 14px 0 0;
  opacity: .8;
}
.espn-team-header__avatar { display: flex; align-items: center; }
.espn-team-header__avatar .espn-avatar {
  width: 84px; height: 84px;
  border-radius: 14px;
  font-size: 28px;
}
.espn-team-header__body { min-width: 0; }
.espn-team-header__name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 8px;
}
.espn-team-header__name {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: var(--espn-text);
  letter-spacing: -.01em;
  line-height: 1.15;
}
.espn-team-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
/* #3277 feedback: the division chip is an <a> linking to the division page —
   keep the chip look, add a hover affordance. */
.espn-team-header__chip--link { text-decoration: none; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.espn-team-header__chip--link:hover { border-color: var(--espn-accent); color: var(--espn-accent); }
.espn-team-header__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--espn-text-muted);
}
.espn-team-header__chip strong { color: var(--espn-text); font-weight: 700; }
.espn-team-header__chip .mdi { font-size: 14px; color: var(--espn-accent); }
.espn-team-header__record {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
}
.espn-team-header__record-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--espn-text);
  letter-spacing: -.02em;
  line-height: 1;
}
.espn-team-header__record-label {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--espn-text-muted);
}

@media (max-width: 640px) {
  .espn-team-header {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "avatar body"
      "aside  aside";
    padding: 14px 14px;
    margin: 0 12px 14px;
  }
  .espn-team-header__avatar { grid-area: avatar; }
  .espn-team-header__body { grid-area: body; }
  /* Fix (post button-row redesign): the aside — record + Manage/Print buttons —
     is the actual grid child, so place it in its own full-width second row.
     Previously only its grandchild .__record was given a grid-area, so the aside
     auto-placed into the narrow "auto" column 1 and squeezed the team name /
     verification status / head-coach beside the avatar. */
  .espn-team-header__aside {
    grid-area: aside;
    align-items: stretch;
  }
  .espn-team-header__record {
    flex-direction: row;
    gap: 10px;
    align-self: stretch;
    padding: 8px 14px;
  }
  .espn-team-header__record-num { font-size: 20px; }
  .espn-team-header__record-label { margin-top: 0; }
  .espn-team-header__name { font-size: 21px; }
  .espn-team-header__avatar .espn-avatar { width: 64px; height: 64px; font-size: 22px; }
}

/* Profile tabs (Schedule / Results / Standings) */
.espn-profile-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 18px 6px;
  border-bottom: 1px solid var(--espn-border);
  overflow-x: auto;
}
.espn-profile-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--espn-text-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  position: relative;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.espn-profile-tab .mdi { font-size: 16px; }
.espn-profile-tab:hover { color: var(--espn-text); background: var(--espn-surface-alt); }
.espn-profile-tab.is-active {
  color: var(--espn-accent);
  background: var(--espn-surface-alt);
}
.espn-profile-tab.is-active::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: -1px;
  height: 3px;
  background: var(--espn-accent);
  border-radius: 3px 3px 0 0;
}
.espn-profile-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  color: var(--espn-text-muted);
  font-size: 11px;
  font-weight: 700;
}
.espn-profile-tab.is-active .espn-profile-tab__count {
  background: var(--espn-accent);
  border-color: var(--espn-accent);
  color: #fff;
}
.espn-profile-panel { padding: 14px 18px 22px; }
.espn-profile-panel[hidden] { display: none; }

/* Mobile: the tabs row used to scroll horizontally, which hid the last
   option (Roster) off-screen with no visible scroll cue. Stack them
   vertically as full-width rows so every option is visible at a glance. */
@media (max-width: 720px) {
  .espn-profile-tabs {
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    overflow-x: visible;
  }
  .espn-profile-tab {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
  }
  /* Subtle green tint on the active row — mobile only. */
  .espn-profile-tab.is-active { background: var(--espn-accent-soft); }
  /* The active marker becomes a left accent bar (the bottom bar reads wrong
     once the tabs are stacked vertically). */
  .espn-profile-tab.is-active::after {
    left: 0;
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 3px;
    height: auto;
    border-radius: 0 3px 3px 0;
  }
}

/* Team match card outcome overlay */
.espn-team-match-card { position: relative; }
.espn-team-match-card__outcome {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--espn-accent);
  box-shadow: 0 2px 6px rgba(0, 136, 42, .35);
}
.espn-team-match-card.has-outcome-l .espn-team-match-card__outcome {
  background: #e84a4b;
  box-shadow: 0 2px 6px rgba(232, 74, 75, .35);
}
.espn-schedule-card__team.is-current-team .espn-schedule-card__name {
  color: var(--espn-accent);
  font-weight: 800;
}

/* Highlighted standings row for the current team */
.espn-standings tr.is-current-team {
  background: rgba(0, 136, 42, .08);
  font-weight: 700;
}
.espn-standings tr.is-current-team td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--espn-accent);
}
.espn-standings tr.is-current-team td { position: relative; }
.espn-standings .is-positive { color: var(--espn-accent); font-weight: 700; }
.espn-standings .is-negative { color: #e84a4b; font-weight: 700; }

.espn-st__teamlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
/* #3277 feedback: standings team names render BLACK (theme text color), not
   green — explicit + DIRECT-child span only, so the avatar's initials letter
   (a nested span inside the same link) is not swept to black. */
.espn-standings .espn-st__teamlink,
.espn-standings .espn-st__teamlink > span { color: var(--espn-text); }
.espn-st__teamlink:hover { color: var(--espn-accent); }
.espn-standings .espn-st__teamlink:hover,
.espn-standings .espn-st__teamlink:hover > span { color: var(--espn-accent); }
/* #3277 feedback: initials tile letter = NSID green on the grey chip,
   pinned at high specificity so no name-color rule can override it. */
.espn-standings .espn-st__teamlink .espn-avatar--initials,
.espn-standings .espn-st__teamlink .espn-avatar--initials > span { color: var(--espn-accent); }
.espn-st__teamlink .espn-avatar { width: 24px; height: 24px; font-size: 11px; }

/* Inline clickable team name (e.g. team-profile match cards) — inherits the
   name color, underlines on hover (#3280). */
.espn-team-link { color: inherit; text-decoration: none; transition: color .15s ease; }
.espn-team-link:hover { color: var(--espn-accent); text-decoration: underline; }


/* ============================================================
   TEAM SEARCH (live results dropdown) + clickable team rows
   ============================================================ */

.espn-teams-toolbar { padding: 12px 18px 8px; }
.espn-teams-search { position: relative; max-width: 100%; }

.espn-team-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 360px;
  overflow-y: auto;
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  padding: 6px;
  animation: espnSearchDrop .18s ease-out;
}
@keyframes espnSearchDrop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.espn-team-search-results__empty {
  padding: 18px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--espn-text-muted);
}
.espn-team-search-results__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--espn-text);
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.espn-team-search-results__item:hover,
.espn-team-search-results__item:focus {
  background: var(--espn-surface-alt);
  transform: translateX(2px);
  color: var(--espn-text);
  text-decoration: none;
}
.espn-team-search-results__item .espn-avatar { width: 36px; height: 36px; font-size: 13px; flex-shrink: 0; }
.espn-team-search-results__body { flex: 1; min-width: 0; }
.espn-team-search-results__name {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--espn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.espn-team-search-results__sub {
  margin: 0;
  font-size: 12px;
  color: var(--espn-text-muted);
}
.espn-team-search-results__chev {
  font-size: 20px;
  color: var(--espn-text-muted);
  flex-shrink: 0;
}

/* Stretched-link pattern for clickable team rows */
.espn-team-row--clickable { position: relative; cursor: pointer; }
.espn-team-row__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-decoration: none;
  font-size: 0;
}
.espn-team-row--clickable .espn-team-row__fav,
.espn-team-row--clickable .espn-team-row__chevron {
  position: relative;
  z-index: 2;
}
.espn-team-row--clickable:hover { background: var(--espn-surface-alt); }
.espn-team-row--clickable:hover .espn-team-row__name { color: var(--espn-accent); }
.espn-team-row--clickable:hover .espn-team-row__chevron { transform: translateX(3px); color: var(--espn-accent); }
.espn-team-row__chevron { transition: transform .2s ease, color .2s ease; }

/* Clickable standings preview rows */
.espn-standings-row--clickable { cursor: pointer; }
.espn-standings-row--clickable:hover { background: var(--espn-surface-alt); }

@media (max-width: 600px) {
  .espn-teams-toolbar { padding: 10px 12px 6px; }
  .espn-team-search-results { max-height: 50vh; }
}


/* ============================================================
   Clickable team blocks inside schedule + game cards
   (stretched-link pattern; rest of the card remains interactive)
   ============================================================ */

.espn-schedule-card__team--clickable,
.espn-game-card__team--clickable {
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s ease;
}
.espn-schedule-card__team--clickable:hover,
.espn-game-card__team--clickable:hover {
  background: var(--espn-surface-alt);
}
.espn-schedule-card__teamlink,
.espn-game-card__teamlink {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-decoration: none;
  font-size: 0;
  border-radius: inherit;
}
.espn-schedule-card__team--clickable:hover .espn-schedule-card__name,
.espn-game-card__team--clickable:hover .espn-game-card__title {
  color: var(--espn-accent);
}
.espn-schedule-card__team--clickable:focus-within,
.espn-game-card__team--clickable:focus-within {
  outline: 2px solid var(--espn-accent);
  outline-offset: 2px;
}


/* ============================================================
   DIVISIONS PAGE — two-column layout (search panel + divisions)
   ============================================================ */

.espn-divisions-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  padding: 28px 18px 18px;
  align-items: start;
}

@media (max-width: 900px) {
  .espn-divisions-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 12px 12px;
  }
}

.espn-divisions-grid__search {
  position: sticky;
  top: 18px;
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  max-height: calc(100vh - 80px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px) {
  .espn-divisions-grid__search { position: static; max-height: none; }
}

.espn-divsearch {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--espn-surface-alt);
  border: 1px solid var(--espn-border);
  border-radius: 999px;
  padding: 4px 14px 4px 38px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.espn-divsearch:focus-within {
  border-color: var(--espn-accent);
  box-shadow: 0 0 0 3px rgba(0, 136, 42, .15);
}
.espn-divsearch__icon {
  position: absolute;
  left: 12px;
  font-size: 20px;
  color: var(--espn-text-muted);
  pointer-events: none;
}
.espn-divsearch input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--espn-text);
  outline: none;
}
.espn-divsearch input::placeholder { color: var(--espn-text-muted); }
.espn-divsearch__clear {
  border: 0;
  background: transparent;
  color: var(--espn-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.espn-divsearch__clear:hover {
  background: var(--espn-border);
  color: var(--espn-text);
}
.espn-divsearch__clear .mdi { font-size: 18px; line-height: 1; }

.espn-divsearch-results {
  margin-top: 12px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.espn-divsearch-results__label {
  margin: 4px 6px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--espn-text-muted);
}
.espn-divsearch-results__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.espn-divsearch-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--espn-text);
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.espn-divsearch-result:hover,
.espn-divsearch-result:focus {
  background: var(--espn-surface-alt);
  transform: translateX(2px);
  color: var(--espn-text);
  text-decoration: none;
}
.espn-divsearch-result .espn-avatar { width: 36px; height: 36px; font-size: 13px; flex-shrink: 0; }
.espn-divsearch-result__body { flex: 1; min-width: 0; }
.espn-divsearch-result__name {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--espn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.espn-divsearch-result__sub {
  margin: 0;
  font-size: 11px;
  color: var(--espn-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}
.espn-divsearch-result__chev {
  font-size: 22px;
  color: var(--espn-text-muted);
  flex-shrink: 0;
}
.espn-divsearch-results__empty {
  padding: 32px 14px;
  text-align: center;
  color: var(--espn-text-muted);
}
.espn-divsearch-results__empty .mdi {
  display: block;
  font-size: 38px;
  margin-bottom: 10px;
  color: var(--espn-text-muted);
  opacity: .5;
}
.espn-divsearch-results__empty p {
  margin: 0;
  font-size: 13px;
}

.espn-helper--full {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 18px 18px;
  padding: 10px 14px;
  background: var(--espn-surface-alt);
  border: 1px solid var(--espn-border);
  border-radius: 10px;
  color: var(--espn-text-muted);
  font-size: 12px;
}
.espn-helper--full .espn-helper__icon svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .espn-helper--full { margin: 4px 12px 12px; font-size: 11.5px; }
}


/* Hover polish on divsearch results (match teams-page row style) */
.espn-divsearch-result {
  position: relative;
  overflow: hidden;
}
.espn-divsearch-result::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--espn-accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .2s ease;
}
.espn-divsearch-result:hover::before,
.espn-divsearch-result:focus::before { transform: scaleY(1); }
.espn-divsearch-result:hover .espn-divsearch-result__name,
.espn-divsearch-result:focus .espn-divsearch-result__name { color: var(--espn-accent); }
.espn-divsearch-result__chev { transition: transform .2s ease, color .2s ease; }
.espn-divsearch-result:hover .espn-divsearch-result__chev,
.espn-divsearch-result:focus .espn-divsearch-result__chev {
  transform: translateX(3px);
  color: var(--espn-accent);
}

/* Searching progress bar — indeterminate sweep */
.espn-divsearch-loader {
  position: relative;
  height: 3px;
  margin: 8px 4px 4px;
  border-radius: 3px;
  background: var(--espn-border);
  overflow: hidden;
}
.espn-divsearch-loader[hidden] { display: none; }
.espn-divsearch-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--espn-accent), transparent);
  animation: espnDivsearchSweep 1.1s linear infinite;
}
@keyframes espnDivsearchSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Subtle pulse while results are stale (input changed, request in flight) */
.espn-divsearch-results.is-loading { opacity: .55; transition: opacity .2s ease; }


/* Inline hero variant — used when the hero is moved into the right column on the divisions page */
.espn-section--hero-inline {
  padding: 0 4px 12px;
  margin: 0;
  background: transparent;
  text-align: left;
}
.espn-section--hero-inline .espn-section__title {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--espn-text);
}
.espn-section--hero-inline .espn-section__sub {
  margin: 0;
  font-size: 13px;
  color: var(--espn-text-muted);
}
@media (max-width: 600px) {
  .espn-section--hero-inline .espn-section__title { font-size: 22px; }
}


/* Bracket — make team-name labels feel clickable */
.espn-bracket-teamlink {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  padding: 0 2px;
  border-radius: 4px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.espn-bracket-teamlink:hover,
.espn-bracket-teamlink:focus {
  color: var(--espn-accent);
  background: rgba(0, 136, 42, .12);
  text-decoration: none;
}


/* "View all results" footer link in divisions search panel */
.espn-divsearch-results__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 4px 4px;
  padding: 12px 14px;
  border-top: 1px solid var(--espn-border);
  border-radius: 0 0 8px 8px;
  color: var(--espn-accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, padding-left .15s ease;
}
.espn-divsearch-results__more:hover,
.espn-divsearch-results__more:focus {
  background: rgba(0, 136, 42, .08);
  padding-left: 16px;
  color: var(--espn-accent);
  text-decoration: none;
}
.espn-divsearch-results__more strong { font-weight: 800; }
.espn-divsearch-results__more .mdi { font-size: 20px; }


/* Team Profile — "View full schedule" footer link */
.espn-profile-fullschedule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--espn-border);
  color: var(--espn-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: background .15s ease, transform .15s ease;
}
.espn-profile-fullschedule:hover,
.espn-profile-fullschedule:focus {
  background: rgba(0, 136, 42, .08);
  color: var(--espn-accent);
  text-decoration: none;
}
.espn-profile-fullschedule:hover .mdi-chevron-right {
  transform: translateX(3px);
}
.espn-profile-fullschedule .mdi { font-size: 18px; line-height: 1; transition: transform .15s ease; }


/* ============================================================
   TEAM LOGO — uploadable affordance on the avatar
   ============================================================ */

.espn-avatar--uploadable {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.espn-avatar--uploadable:hover { transform: scale(1.04); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.espn-avatar--uploadable:focus { outline: 2px solid var(--espn-accent); outline-offset: 2px; }

/* Lift the avatar above the row stretched-link so clicks reach the upload UI */
.espn-team-row--clickable .espn-avatar--uploadable,
.espn-team-header__avatar .espn-avatar--uploadable { z-index: 3; }

/* Hover overlay — a centered camera with a dark veil. Stays inside the avatar
   bounds (parent has overflow:hidden), so nothing spills out of the circle/square.
   Selector specificity (0,2,0) intentionally beats `.espn-avatar--initials > span`
   so the camera span doesn't inherit display: inline-block from that rule. */
.espn-avatar > .espn-avatar__camera {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(8, 12, 16, .55);
  color: #fff;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
  border-radius: inherit;
  line-height: 1;
}
.espn-avatar > .espn-avatar__camera .mdi { font-size: 18px; line-height: 1; }
.espn-avatar--sm > .espn-avatar__camera .mdi { font-size: 14px; }
.espn-avatar--lg > .espn-avatar__camera .mdi { font-size: 28px; }
.espn-avatar--uploadable:hover > .espn-avatar__camera,
.espn-avatar--uploadable:focus > .espn-avatar__camera { opacity: 1; }
/* Faint accent ring on initial-letter placeholders so users notice they can upload */
.espn-avatar--initials.espn-avatar--uploadable {
  box-shadow: inset 0 0 0 1px rgba(0, 136, 42, .35);
}

/* ============================================================
   UPLOAD MODAL
   ============================================================ */

.espn-logo-modal[hidden] { display: none; }
.espn-logo-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: espnLogoFadeIn .15s ease-out;
}
@keyframes espnLogoFadeIn { from { opacity: 0; } to { opacity: 1; } }
body.espn-logo-modal-open { overflow: hidden; }

.espn-logo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 16, .65);
  backdrop-filter: blur(2px);
}
.espn-logo-modal__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--espn-surface);
  border: 1px solid var(--espn-border);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.2);
  overflow: hidden;
  animation: espnLogoSlideIn .18s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes espnLogoSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.espn-logo-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--espn-border);
}
.espn-logo-modal__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--espn-text);
}
.espn-logo-modal__title .mdi { font-size: 20px; color: var(--espn-accent); }
.espn-logo-modal__close {
  border: 0;
  background: transparent;
  color: var(--espn-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
}
.espn-logo-modal__close:hover { background: var(--espn-surface-alt); color: var(--espn-text); }
.espn-logo-modal__close .mdi { font-size: 20px; }
.espn-logo-modal__body { padding: 16px 18px 8px; }
.espn-logo-modal__team {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--espn-text-muted);
}
.espn-logo-modal__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 200px;
  padding: 18px;
  border: 2px dashed var(--espn-border);
  border-radius: 12px;
  background: var(--espn-surface-alt);
  text-align: center;
  color: var(--espn-text-muted);
  transition: border-color .15s ease, background .15s ease;
}
.espn-logo-modal__preview.is-dropping {
  border-color: var(--espn-accent);
  background: rgba(0, 136, 42, .08);
}
.espn-logo-modal__preview .mdi { font-size: 44px; opacity: .55; }
.espn-logo-modal__preview p { margin: 0; font-size: 13px; }
.espn-logo-modal__preview img {
  max-width: 100%;
  max-height: 180px;
  border-radius: 10px;
  object-fit: contain;
}
.espn-logo-modal__filebtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--espn-border);
  background: var(--espn-surface-alt);
  font-size: 13px;
  font-weight: 700;
  color: var(--espn-text);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.espn-logo-modal__filebtn:hover {
  background: var(--espn-surface);
  border-color: var(--espn-accent);
  color: var(--espn-accent);
}
.espn-logo-modal__hint {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--espn-text-muted);
}
.espn-logo-modal__progress {
  margin-top: 12px;
  height: 4px;
  border-radius: 4px;
  background: var(--espn-border);
  overflow: hidden;
}
.espn-logo-modal__bar {
  height: 100%;
  width: 0%;
  background: var(--espn-accent);
  transition: width .2s linear;
}
.espn-logo-modal__msg {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.espn-logo-modal__msg.is-ok    { background: rgba(0, 136, 42, .12); color: var(--espn-accent); }
.espn-logo-modal__msg.is-error { background: rgba(232, 74, 75, .12); color: #e84a4b; }
.espn-logo-modal__footer {
  display: flex;
  gap: 8px;
  padding: 12px 18px 16px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.espn-logo-modal__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--espn-border);
  background: var(--espn-surface-alt);
  color: var(--espn-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, opacity .15s ease;
}
.espn-logo-modal__btn:hover { background: var(--espn-surface); }
.espn-logo-modal__btn:active { transform: scale(.98); }
.espn-logo-modal__btn:disabled { opacity: .5; cursor: not-allowed; }
.espn-logo-modal__btn--primary {
  background: var(--espn-accent);
  border-color: var(--espn-accent);
  color: #fff;
}
.espn-logo-modal__btn--primary:hover { background: #006f23; border-color: #006f23; }
.espn-logo-modal__btn--ghost { border-color: transparent; background: transparent; color: var(--espn-text-muted); }
.espn-logo-modal__btn--ghost:hover { color: var(--espn-text); background: var(--espn-surface-alt); }
.espn-logo-modal__btn--danger { margin-right: auto; color: #e84a4b; }
.espn-logo-modal__btn--danger:hover { background: rgba(232, 74, 75, .1); }
.espn-logo-modal__btn--danger .mdi { font-size: 16px; }


/* League logo upload affordance — same hover-overlay pattern as team avatars.
   The wrap takes the exact same dimensions and corner radius as the original
   .espn-league-logo so the row layout doesn't shift. */
.espn-league-logo-wrap {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}
.espn-league-logo-wrap > .espn-league-logo,
.espn-league-logo-wrap > .espn-league-logo--fallback {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  box-shadow: none;
}
.espn-league-logo-wrap > .espn-league-logo--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--espn-accent-soft);
}
.espn-league-logo-wrap > .espn-league-logo--fallback .mdi {
  font-size: 26px;
  color: var(--espn-accent);
  line-height: 1;
}
.espn-league-logo-wrap--uploadable {
  cursor: pointer;
  z-index: 3;
  transition: transform .15s ease, box-shadow .15s ease;
}
.espn-league-logo-wrap--uploadable:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.espn-league-logo-wrap--uploadable:focus {
  outline: 2px solid var(--espn-accent);
  outline-offset: 2px;
}
.espn-league-logo-wrap > .espn-league-logo__camera {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 16, .55);
  color: #fff;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
  border-radius: inherit;
  line-height: 1;
}
.espn-league-logo-wrap > .espn-league-logo__camera .mdi { font-size: 22px; line-height: 1; }
.espn-league-logo-wrap--uploadable:hover .espn-league-logo__camera,
.espn-league-logo-wrap--uploadable:focus .espn-league-logo__camera {
  opacity: 1;
}


/* Modal "Cancel" button styling — replaces an inline style block on the iOS-install
   modal Cancel button. Themed neutral grey to differentiate from accent buttons. */
.btn-cancel-grey {
  background-color: #6c757d;
  border: 1px solid #6c757d;
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-cancel-grey:hover {
  background-color: #5a6268;
  border-color: #5a6268;
  color: #ffffff;
}

/* ----------------------------------------------------------------------------
   Mobile breathing room fixes (≤768px)
   - Team list/row: extra horizontal padding on the list AND the row so the
     chevron (and the focus ring on it) is well away from the screen edge.
     The :hover state nudges the chevron +3px right, so we need at least that
     much extra room or the icon gets clipped against the panel's right border.
   - Game list (Next Games panel): give the list a small horizontal inset so
     the card edges don't touch the panel border and risk overflow-clip cutting
     scores off at the rounded corner.
   - .espn-panel keeps overflow:clip for layout containment, but we add an
     extra side padding to give every inner row visual breathing room.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Panels on mobile: a small inner padding so child rows don't kiss the
     panel's rounded corners (where overflow:clip would otherwise crop them). */
  .espn-twocol__side .espn-panel,
  .espn-twocol .espn-panel {
    padding-inline: 4px;
  }
  /* Team list: more aggressive list-side padding + a wider right edge on the row */
  .espn-team-list {
    padding: 10px 6px;
  }
  .espn-team-row {
    padding: 10px 18px 10px 12px;
    gap: 10px;
  }
  /* Smaller chevron on mobile to recover space — and nudge it in slightly */
  .espn-team-row__chevron {
    width: 14px;
    height: 14px;
    margin-left: 2px;
    margin-right: 2px;
  }
  .espn-team-row__chevron svg {
    width: 14px;
    height: 14px;
  }
  /* Star button: shrink slightly to leave more room for the team name */
  .espn-team-row__fav {
    width: 30px;
    height: 30px;
  }
  .espn-team-row__fav .mdi {
    font-size: 18px;
  }
  /* Game list (Next Games) — already has its own grid; just push cards in
     from the panel edge a few pixels. */
  .espn-game-list {
    padding: 0 4px 4px;
  }
}

/* Visually hidden — content stays announced by screen readers but doesn't
   occupy layout space. Used for the date-picker hint span (aria-describedby
   target) on .espn-schedule-datepill. From the #3225 polish round (a11y
   support for the date-pill <label>'s aria-describedby hint). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ====================================================================
   #3277 Pools-as-Groups — Teams page TEAMS/GROUPS toggle + pool sections.
   Self-contained (does NOT reuse .espn-leagues-tabs, whose sliding
   indicator needs page-specific measuring JS). Active segment = solid
   NSID green with white text.
   ==================================================================== */
.espn-teams-viewtabs {
  display: flex;
  width: fit-content;
  /* #3324 feedback: breathing room between the pill and the panel header's
     border above (14px), and a tighter gap to the search bar below (0 here —
     the toolbar's own 12px top padding provides the remaining space). */
  margin: 14px auto 0;   /* auto side margins center the pill in the panel */
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--espn-surface-alt);
  border: 1px solid var(--espn-border);
  border-radius: 12px;
}
.espn-teams-viewtab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;   /* reserve space so the active tab's green border doesn't shift layout */
  border-radius: 9px;
  color: var(--espn-text-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
/* inline-flex + line-height:1 so the icon sits perfectly level with the
   label (the mdi glyph's tall line-box was pushing it slightly high). */
.espn-teams-viewtab .mdi {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.espn-teams-viewtab:hover { color: var(--espn-text); }
.espn-teams-viewtab.is-active {
  background: transparent;
  color: var(--espn-accent);
  border-color: var(--espn-accent);
}

/* #3324 — "Show all teams" checkbox in the Teams panel header (top-right,
   GROUPS view only). Expands every group at once instead of the accordion.
   The header is already flex + space-between, so the label sits opposite
   the TEAMS title naturally. */
.espn-groups-showall {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--espn-text-muted, #6c757d);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.espn-groups-showall input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--espn-accent, #00882a);
}

/* #3324 — Event Setup "Force Black Theme": the page is locked to dark, so the
   user-facing theme toggle is hidden (espn-ui.js also ignores clicks). */
html[data-theme-locked="1"] [data-espn-theme-toggle] { display: none !important; }

/* #3324 (Req 1.2) — "Load more days" footer on day-windowed schedule lists.
   Primary = bold gradient pill with a shimmer sweep + two-line label;
   secondary = quiet "Show all days" text link. */
.espn-schedule-loadmore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 16px 26px;
}
.espn-schedule-loadmore__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 280px;
  padding: 13px 30px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #00a838 0%, #00882a 55%, #016b22 100%);
  box-shadow: 0 8px 22px rgba(0, 136, 42, .32), inset 0 1px 0 rgba(255, 255, 255, .22);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, filter .2s ease;
}
.espn-schedule-loadmore__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 136, 42, .42), inset 0 1px 0 rgba(255, 255, 255, .28);
  filter: brightness(1.04);
  text-decoration: none;
}
.espn-schedule-loadmore__btn:active { transform: translateY(0); }
/* Force white content regardless of the global a:hover accent rule. */
.espn-schedule-loadmore__btn,
.espn-schedule-loadmore__btn:hover,
.espn-schedule-loadmore__btn span { color: #fff; }

/* Diagonal shimmer that sweeps across on hover. */
.espn-schedule-loadmore__btn-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.38) 48%, transparent 66%);
  transform: translateX(-120%);
  pointer-events: none;
}
.espn-schedule-loadmore__btn:hover .espn-schedule-loadmore__btn-glow {
  animation: espnLoadmoreShine .9s ease;
}
@keyframes espnLoadmoreShine {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}

.espn-schedule-loadmore__btn-inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.espn-schedule-loadmore__btn-icon {
  font-size: 22px;
  line-height: 1;
  transition: transform .25s ease;
}
.espn-schedule-loadmore__btn:hover .espn-schedule-loadmore__btn-icon {
  transform: translateY(3px);
}
.espn-schedule-loadmore__btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}
.espn-schedule-loadmore__btn-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
}
.espn-schedule-loadmore__btn-sub {
  font-size: 11px;
  font-weight: 600;
  opacity: .85;
}
.espn-schedule-loadmore__all {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--espn-text-muted, #6c757d);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.espn-schedule-loadmore__all:hover {
  color: var(--espn-accent, #00882a);
  border-bottom-color: var(--espn-accent, #00882a);
  text-decoration: none;
}
/* Loading state: icon swaps for a spinner while the next days fetch. */
.espn-schedule-loadmore a.is-loading { pointer-events: none; }
.espn-schedule-loadmore__btn.is-loading .espn-schedule-loadmore__btn-icon::before {
  display: none; /* hide the mdi glyph */
}
.espn-schedule-loadmore__btn.is-loading .espn-schedule-loadmore__btn-icon {
  position: relative;
  width: 22px;
  height: 22px;
  transform: none;
}
.espn-schedule-loadmore__btn.is-loading .espn-schedule-loadmore__btn-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, .5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: espnLoadmoreSpin .65s linear infinite;
}
@keyframes espnLoadmoreSpin { to { transform: rotate(360deg); } }

/* #3324 (Req 1.2) — full-screen blur overlay shown while more days fetch.
   Frosted backdrop over the whole viewport + a centered branded loader
   (pulsing green orbit ring around a calendar glyph). */
.espn-schedule-loadveil {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(8, 20, 12, .28);
  -webkit-backdrop-filter: blur(7px) saturate(115%);
  backdrop-filter: blur(7px) saturate(115%);
  opacity: 0;
  animation: espnVeilIn .28s ease forwards;
}
.espn-schedule-loadveil.is-closing { animation: espnVeilOut .25s ease forwards; }
@keyframes espnVeilIn  { to { opacity: 1; } }
@keyframes espnVeilOut { to { opacity: 0; } }

.espn-schedule-loadveil__orbit {
  position: relative;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
}
/* Two counter-rotating arcs. */
.espn-schedule-loadveil__orbit::before,
.espn-schedule-loadveil__orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
}
.espn-schedule-loadveil__orbit::before {
  inset: 0;
  border-top-color: #00a838;
  border-right-color: #00a838;
  animation: espnLoadmoreSpin .9s linear infinite;
}
.espn-schedule-loadveil__orbit::after {
  inset: 12px;
  border-bottom-color: rgba(255, 255, 255, .9);
  border-left-color: rgba(255, 255, 255, .9);
  animation: espnLoadmoreSpin 1.3s linear infinite reverse;
}
.espn-schedule-loadveil__icon {
  font-size: 26px;
  color: #fff;
  animation: espnVeilPulse 1.1s ease-in-out infinite;
}
@keyframes espnVeilPulse {
  0%, 100% { transform: scale(1);   opacity: .9; }
  50%      { transform: scale(1.16); opacity: 1; }
}
.espn-schedule-loadveil__label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.espn-schedule-loadveil__label::after {
  content: "";
  animation: espnVeilDots 1.2s steps(4, end) infinite;
}
@keyframes espnVeilDots {
  0% { content: ""; } 25% { content: "."; }
  50% { content: ".."; } 75% { content: "..."; }
}
@media (prefers-reduced-motion: reduce) {
  .espn-schedule-loadveil,
  .espn-schedule-loadveil.is-closing { animation: none; opacity: 1; }
  .espn-schedule-loadveil__orbit::before,
  .espn-schedule-loadveil__orbit::after,
  .espn-schedule-loadveil__icon { animation-duration: 2.4s; }
}
/* Newly appended day groups slide-fade in, staggered per group. */
.espn-daygroup-enter {
  animation: espnDaygroupIn .42s ease both;
  animation-delay: calc(var(--enter-i, 0) * 80ms);
}
@keyframes espnDaygroupIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .espn-daygroup-enter { animation: none; }
}

/* #3324 — collapsible division sections on the ALL DIVISIONS Groups view.
   Card design: solid green header bar (white label + chevron) with the
   division's groups nested inside a softly tinted body — clear hierarchy
   over the white group cards. All sections start expanded. */
.espn-division-section {
  margin: 0 0 12px;
  border: 1px solid var(--espn-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  background: var(--espn-surface, #fff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}
.espn-division-section__head {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  /* Mirrors the team-row treatment (green accent edge + soft fade), rotated:
     green TOP border with a top-to-bottom fade instead of a solid block. */
  background: linear-gradient(180deg, var(--espn-accent-soft, rgba(0, 136, 42, .14)) 0%, rgba(0, 136, 42, .03) 70%, transparent 100%);
  border: 0;
  border-top: 3px solid var(--espn-accent, #00882a);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background-color .15s ease;
}
.espn-division-section__head:hover {
  background-color: var(--espn-accent-soft, rgba(0, 136, 42, .10));
}
.espn-division-section__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--espn-accent, #00882a);
}
.espn-division-section__icon {
  font-size: 16px;
  line-height: 1;
  color: var(--espn-accent, #00882a);
  opacity: .9;
}
.espn-division-section__count {
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(0, 136, 42, .12);
  color: var(--espn-accent, #00882a);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.espn-division-section__chevron {
  margin-left: auto;
  font-size: 18px;
  color: var(--espn-accent, #00882a);
  transition: transform .18s ease;
}
.espn-division-section__body {
  padding: 10px 10px 1px;
  background: var(--espn-surface-alt, #f8f9fa);
}
.espn-division-section.is-collapsed .espn-division-section__chevron {
  transform: rotate(-90deg);
}
.espn-division-section.is-collapsed .espn-division-section__body {
  display: none;
}

/* #3324 — non-clickable division label inside the shared group dropdown
   (ALL DIVISIONS surfaces) so duplicate group names stay unambiguous. */
.espn-divselect__divlabel {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--espn-text-muted, #6c757d);
  border-top: 1px solid var(--espn-border, #e5e7eb);
  pointer-events: none;
}
.espn-divselect__menu .espn-divselect__divlabel:first-of-type { border-top: 0; }
/* Indent the group options that sit under a division label so the hierarchy
   reads at a glance ("All Groups" sits before any label and stays flush). */
.espn-divselect__menu .espn-divselect__divlabel ~ .espn-divselect__item {
  padding-left: 26px;
}

/* Pool section in the GROUPS view — consistent green-outlined header for every
   pool (per #3277 feedback: green border, transparent background, green text),
   distinguished by its label, not by per-pool colour. */
.espn-pool-group { margin-bottom: 10px; }
/* Each pool is a clean card row (#3277): surface card + green left-accent +
   soft-green icon chip + count badge; the open group lifts via border/shadow. */
.espn-pool-group__head {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  background: var(--espn-surface);
  color: var(--espn-text);
  border: 1px solid var(--espn-border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.espn-pool-group__head:hover {
  border-color: var(--espn-accent);
  background: var(--espn-surface-alt);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
/* Open group reads as ONE contained panel: a tinted header on top with the
   team cards nested in a bordered box below — so the group is clearly the
   parent of the team rows it contains (not another sibling card). */
.espn-pool-group:not(.is-collapsed) {
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  border-radius: 10px;
}
.espn-pool-group:not(.is-collapsed) .espn-pool-group__head {
  border-color: var(--espn-accent);
  background: var(--espn-accent-soft);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.espn-pool-group:not(.is-collapsed) .espn-pool-group__body {
  border: 1px solid var(--espn-accent);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: var(--espn-surface);
}
/* On the tinted open header, give the icon chip + count badge a surface
   background so they stay distinct against the soft-green. */
.espn-pool-group:not(.is-collapsed) .espn-pool-group__head .mdi-account-group-outline,
.espn-pool-group:not(.is-collapsed) .espn-pool-group__count {
  background: var(--espn-surface);
}
/* Leading group icon as a soft-green rounded chip. */
.espn-pool-group__head .mdi-account-group-outline {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--espn-chip-bg);   /* #3277 feedback: neutral #f5f5f5, not green tint */
  color: var(--espn-accent);
  font-size: 18px;
  line-height: 1;
}
.espn-pool-group__name { color: var(--espn-text); }
/* Team count as a small pill badge. */
.espn-pool-group__count {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--espn-accent);
  background: var(--espn-chip-bg);   /* #3277 feedback: neutral #f5f5f5, not green tint */
  padding: 2px 9px;
  border-radius: 999px;
}
/* Chevron pushed right, muted, rotates when collapsed. */
.espn-pool-group__chevron {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--espn-text-muted);
  font-size: 18px;
  transition: transform .2s ease;
}
.espn-pool-group.is-collapsed .espn-pool-group__chevron { transform: rotate(-90deg); }
.espn-pool-group.is-collapsed .espn-pool-group__body { display: none; }
/* Standings panel: keep the group dropdown + "View full standings" together at
   the right of the header. */
/* Standings title + group dropdown sit together on the LEFT of the panel header. */
.espn-panel__header-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* The standings panel uses .espn-panel--flash (overflow:hidden + isolation, and
   `> * { z-index:1 }`), which would (a) clip the group dropdown menu and (b) let
   the standings table paint OVER it. Let the menu escape and lift the header
   above the table body so the open menu is fully visible. */
.espn-panel.espn-panel--groupselect { overflow: visible; }
.espn-panel--groupselect .espn-panel__header,
.espn-panel--groupselect .espn-standings-header { z-index: 5; }
/* Keep the "All Groups" pill on one line (it was wrapping to two on mobile). */
.espn-standings-groupselect .espn-divselect { white-space: nowrap; }
/* Mobile: title + group dropdown + "View full standings" can't share one row —
   let the header WRAP instead of the dropdown pill painting over the link.
   The link drops to its own line, right-aligned, on a single line. */
@media (max-width: 600px) {
  .espn-panel--groupselect .espn-panel__header { flex-wrap: wrap; }
  .espn-panel--groupselect .espn-panel__header .espn-panel__link {
    margin-left: auto;
    white-space: nowrap;
  }
}
/* The .espn-page-card wrapper is overflow:clip, which clips the open dropdown
   when the panel/table is short (few rows). While the menu is open, unclip ONLY
   the vertical axis (the menu drops downward) — horizontal stays clipped so the
   wide standings/teams tables can't overhang the page and create a horizontal
   scrollbar + dead right-side space (seen on mobile AND desktop). `clip`, unlike
   `hidden`, is allowed to pair with `visible` per-axis. */
.espn-page-card:has(.espn-standings-groupselect[open]) {
  overflow-x: clip;
  overflow-y: visible;
}
/* Dropdown is on the left (beside the title); open its menu left-aligned and tall
   enough that a typical group count fits without an awkward mid-row scroll cut. */
.espn-standings-groupselect .espn-divselect__menu { left: 0; right: auto; max-height: 70vh; }
/* On narrow screens keep the menu within the viewport but don't let it shrink so
   far that the labels wrap; keep each option on one line. */
@media (max-width: 600px) {
  .espn-standings-groupselect .espn-divselect__menu {
    max-width: calc(100vw - 24px);
    max-height: 60vh;
  }
  .espn-standings-groupselect .espn-divselect__item { white-space: nowrap; }
}
/* The group dropdown reuses .espn-divselect; its items are <button>s here, so
   reset the native button chrome. Kept at low specificity (single element+class)
   so the green hover/selected backgrounds from `.espn-divselect__item:hover` and
   `.is-active` still win — making the group items match the divisions dropdown
   exactly (same green text + selected background). */
button.espn-divselect__item {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

/* ====================================================================
   "Time TBD" chip — used everywhere a game time is rendered when the
   match has is_time_tbd = 1. Per feedback #3278: subtle gray, clock icon,
   NOT warning red — TBD is a normal scheduling state, not an error.
   Single source of styling, rendered by _game_time.html.twig partial.

   Sizing strategy: inherit from the parent slot so the chip blends with
   whatever font-size the surrounding time text uses. Schedule cards have
   a larger time slot → chip is larger; team-profile inline cards have a
   small slot → chip is small. No template branching needed.
   ==================================================================== */
/* Selectors tied / higher specificity: `.espn-schedule-card__time small`
   (0,1,1) paints `<small>` elements inside time slots green for the AM/PM
   suffix — when TBD chip is rendered as <small> in inline cards, that rule
   wins over a bare `.espn-time-tbd`. Listing `small.espn-time-tbd` and
   `.espn-schedule-card__time .espn-time-tbd` explicitly ties / beats it,
   and source order (this block is later in the file) decides the rest. */
small.espn-time-tbd,
.espn-schedule-card__time .espn-time-tbd,
.espn-time-tbd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--espn-text-muted);
  /* Slightly smaller + lighter than the parent time slot so TBD doesn't
     bold-bomb next to "10:00 AM" — visually closer to the trailing "AM"
     style rather than the loud "10:00" digits. */
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  margin-left: 0;  /* override the +4px the AM/PM small rule adds */
}
small.espn-time-tbd .mdi,
.espn-schedule-card__time .espn-time-tbd .mdi,
.espn-time-tbd .mdi { font-size: 0.95em; opacity: .85; }

/* Edit-match modal — the new "Mark time as TBD" row. Stacks the label
   above the hint copy and uses NSID-green for the checkbox tint. */
.espn-match-modal__row--tbd {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.espn-match-modal__tbd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  margin: 0;
}
.espn-match-modal__tbd-toggle input[type="checkbox"] {
  accent-color: var(--espn-accent);
  width: 16px;
  height: 16px;
}
.espn-match-modal__tbd-label .mdi { color: var(--espn-text-muted); }
.espn-match-modal__hint {
  margin: 0 0 0 24px;
  font-size: 12px;
  color: var(--espn-text-muted);
  line-height: 1.4;
}

/* ========================================================================
   Team Page Roster (#3280) — read-only NSID mirror
   ======================================================================== */

.espn-roster-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  /* #3343 — right padding 22px (vs 4px left) so the "Manage" button's right
     edge lines up with the "Print Schedule" button in the team header above
     (team header = 18px margin + 22px padding; this panel is full-width with
     18px inner padding, so 18 + 22 here matches 18 + 22 there). Left stays 4px
     to keep the ROSTER title position unchanged. */
  padding: 18px 22px 14px 4px;
  flex-wrap: wrap;
}
.espn-roster-header__h {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--espn-text);
}
.espn-roster-header__count {
  color: var(--espn-text-muted);
  font-weight: 600;
  margin-left: 6px;
}
.espn-roster-header__sub {
  margin: 4px 0 0;
  color: var(--espn-text-muted);
  font-size: 13px;
}
.espn-roster-header__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* Generic button (used by Manage/Create CTAs).
   The `!important` on color overrides `custom.css` line 162 which forces
   every `a` tag to green — without it, an `a.espn-btn--primary` renders
   as green-on-green (invisible). */
.espn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--espn-border);
  background: var(--espn-surface);
  color: var(--espn-text) !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  line-height: 1.2;
  white-space: nowrap;
}
.espn-btn:not(:disabled):hover { transform: translateY(-1px); }
.espn-btn--primary {
  background: var(--espn-accent);
  border-color: var(--espn-accent);
  color: #fff !important;
}
.espn-btn--primary:hover {
  filter: brightness(1.05);
  color: #fff !important;
}
.espn-btn .mdi { font-size: 18px; line-height: 1; }

/* Empty states */
.espn-roster-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--espn-surface-alt);
  border: 1px dashed var(--espn-border);
  border-radius: 12px;
  margin: 8px 0 16px;
}
.espn-roster-empty__icon {
  font-size: 48px;
  color: var(--espn-text-soft);
  display: block;
  margin-bottom: 4px;
}
.espn-roster-empty__title {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--espn-text);
}
.espn-roster-empty__msg {
  margin: 0 0 16px;
  color: var(--espn-text-muted);
  font-size: 14px;
  line-height: 1.5;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.espn-roster-empty__sub {
  margin: 12px 0 0;
  color: var(--espn-text-soft);
  font-size: 12px;
  font-style: italic;
}
.espn-roster-empty__error {
  margin: 14px auto 0;
  padding: 10px 14px;
  max-width: 480px;
  background: rgba(214, 50, 45, .08);
  color: #b3221d;
  border: 1px solid rgba(214, 50, 45, .35);
  border-radius: 8px;
  font-size: 13px;
}

/* Loading spinner inside espn-btn (used during Create Roster) */
.espn-btn { position: relative; }
.espn-btn.is-loading .espn-btn__label { visibility: hidden; }
.espn-btn__spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: espnBtnSpin .7s linear infinite;
  position: absolute;
  left: 50%; top: 50%;
  margin-left: -7px; margin-top: -7px;
}
@keyframes espnBtnSpin { to { transform: rotate(360deg); } }

/* ----- Generic modal shell (used by Create Roster confirm) ----- */
.espn-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 14, 18, .55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1080;
  padding: 16px;
  animation: espnModalFadeIn .15s ease-out;
}
@keyframes espnModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
body.espn-modal-open { overflow: hidden; }

.espn-modal {
  background: var(--espn-surface);
  color: var(--espn-text);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0, .35);
  max-width: 100%;
  width: 440px;
  overflow: hidden;
  animation: espnModalSlideIn .2s ease-out;
}
.espn-modal--narrow { width: 420px; }
@keyframes espnModalSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.espn-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--espn-border);
}
.espn-modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--espn-text);
}
.espn-modal__close {
  background: transparent;
  border: 0;
  color: var(--espn-text-soft);
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: background .15s, color .15s;
}
.espn-modal__close:hover { background: var(--espn-surface-alt); color: var(--espn-text); }
.espn-modal__body { padding: 18px; }
.espn-modal__copy { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--espn-text); }
.espn-modal__list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--espn-text-muted);
  font-size: 13px;
}
.espn-modal__list li + li { margin-top: 4px; }
.espn-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--espn-border);
  background: var(--espn-surface-alt);
}
.espn-btn--ghost { background: var(--espn-surface); color: var(--espn-text) !important; }
.espn-btn--ghost:hover { background: var(--espn-surface-alt); border-color: var(--espn-text-soft); }

/* Table */
.espn-roster-table-wrap {
  border: 1px solid var(--espn-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--espn-surface);
}
.espn-roster-table {
  width: 100%;
  border-collapse: collapse;
}
.espn-roster-table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--espn-text-soft);
  text-align: left;
  padding: 12px 14px;
  background: var(--espn-surface-alt);
  border-bottom: 1px solid var(--espn-border);
}
.espn-roster-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--espn-border);
  color: var(--espn-text);
  vertical-align: middle;
}
.espn-roster-table tbody tr:last-child td { border-bottom: 0; }
.espn-roster-table tbody tr.is-paged-out { display: none; }

.espn-roster-col-num    { width: 60px; font-weight: 700; }
.espn-roster-col-photo  { width: 60px; }
.espn-roster-col-status { width: 150px; }

/* Avatar (placeholder + photo variants) */
.espn-roster-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--espn-surface-alt);
  color: var(--espn-text-soft);
  font-size: 22px;
  overflow: hidden;
}
.espn-roster-avatar--photo { padding: 0; }
.espn-roster-avatar--photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.espn-roster-avatar--photo .espn-roster-avatar__fallback { display: none; }

/* Player name */
.espn-roster-name {
  font-weight: 600;
  color: var(--espn-text);
}

/* Verified / Not Verified status badges */
.espn-roster-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Fixed min-width so "Verified" and "Not Verified" render at the same size. */
  min-width: 112px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.espn-roster-badge .mdi { font-size: 14px; line-height: 1; }

.espn-roster-badge--verified {
  background: var(--espn-accent-soft);
  color: var(--espn-accent);
  border: 1px solid var(--espn-accent);
}
.espn-roster-badge--unverified {
  background: rgba(232, 74, 75, 0.12); /* light red, mirrors the green verified soft bg */
  color: #e84a4b;                       /* NSID red */
  border: 1px solid #e84a4b;
}

/* Team-level verification badge in the team header — button-sized (matches the
   "Manage Roster" button) and uses the same colors as the player status badges. */
.espn-team-header__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.espn-team-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 12px;       /* compact pill that sits inline next to the team name */
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.espn-team-status .mdi { font-size: 15px; line-height: 1; }
.espn-team-status--verified {
  background: var(--espn-accent-soft);
  color: var(--espn-accent);
  border-color: var(--espn-accent);
}
.espn-team-status--unverified {
  background: rgba(232, 74, 75, 0.12);
  color: #e84a4b;
  border-color: #e84a4b;
}

/* Pager (same look as the previous build) */
.espn-roster-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--espn-border);
  background: var(--espn-surface-alt);
  flex-wrap: wrap;
}
.espn-roster-pager__range {
  color: var(--espn-text-muted);
  font-size: 12px;
  letter-spacing: .04em;
}
.espn-roster-pager__controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.espn-roster-pager__btn,
.espn-roster-pager__num {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--espn-border);
  background: var(--espn-surface);
  color: var(--espn-text);
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.espn-roster-pager__btn:not(:disabled):hover,
.espn-roster-pager__num:not(.is-active):hover {
  background: var(--espn-surface-alt);
  border-color: var(--espn-text-soft);
}
.espn-roster-pager__btn:disabled { opacity: .4; cursor: not-allowed; }
.espn-roster-pager__btn .mdi { font-size: 16px; line-height: 1; }
.espn-roster-pager__num.is-active {
  background: var(--espn-accent);
  border-color: var(--espn-accent);
  color: #fff;
  cursor: default;
}
.espn-roster-pager__ellipsis {
  padding: 0 4px;
  color: var(--espn-text-soft);
  font-weight: 600;
}

/* Mobile — compact single-row card */
@media (max-width: 640px) {
  .espn-roster-table thead { display: none; }
  .espn-roster-table,
  .espn-roster-table tbody { display: block; width: 100%; }
  .espn-roster-table tbody tr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--espn-border);
    width: 100%;
  }
  .espn-roster-table tbody tr:last-child { border-bottom: 0; }
  .espn-roster-table tbody td {
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    width: auto;
  }
  /* Order: jersey, photo, name (flex), status */
  .espn-roster-col-num {
    order: 1;
    flex: 0 0 auto;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 16px;
    background: var(--espn-surface-alt);
    border: 1px solid var(--espn-border);
    font-size: 13px;
    color: var(--espn-text);
  }
  .espn-roster-col-num:empty {
    background: transparent;
    border-color: transparent;
    min-width: 0;
    padding: 0;
  }
  .espn-roster-col-photo  { order: 2; flex: 0 0 auto; }
  .espn-roster-col-name   {
    order: 3;
    flex: 1 1 auto;
    min-width: 0;
  }
  .espn-roster-col-name .espn-roster-name {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .espn-roster-col-status { order: 4; flex: 0 0 auto; margin-left: auto; }
  .espn-roster-avatar     { width: 32px; height: 32px; font-size: 18px; }
}

/* ============================================================================
   #3331 — Print Schedule (Team Page). A brand-green button on the team header,
   plus a print-only schedule block scoped to this team. On screen the block is
   hidden; @media print hides all page chrome and shows ONLY the block.
   ========================================================================= */
.espn-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: #00882A;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, transform .1s ease;
}
.espn-print-btn:hover { background: #007022; }
.espn-print-btn:active { transform: translateY(1px); }
.espn-print-btn .mdi { font-size: 16px; line-height: 1; }

/* Manage + Print Schedule side-by-side row */
.espn-team-header__btn-row { display: flex; }
.espn-team-header__btn-row--dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.espn-team-header__btn-row--dual .espn-roster-manage { width: 100%; }
.espn-team-header__btn-row--dual .espn-print-btn { width: 100%; justify-content: center; }

/* Print block — hidden during normal (screen) viewing. */
.team-print-schedule { display: none; }
.team-print-schedule__head { margin-bottom: 14px; }
.team-print-schedule__title { font-size: 22px; font-weight: 800; margin: 0 0 2px; }
.team-print-schedule__sub { font-size: 14px; font-weight: 600; margin: 0; }
.team-print-schedule__meta { font-size: 12px; color: #555; margin: 2px 0 0; }
.team-print-schedule__empty { font-size: 14px; }
.team-print-schedule__table { width: 100%; border-collapse: collapse; font-size: 12px; }
.team-print-schedule__table th,
.team-print-schedule__table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid #ddd; vertical-align: top; }
.team-print-schedule__table thead th { border-bottom: 2px solid #333; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.team-print-schedule__foot { margin-top: 14px; font-size: 10px; color: #888; }

@media print {
  /* Hide everything, then reveal only the team-scoped print block. */
  body * { visibility: hidden !important; }
  .team-print-schedule,
  .team-print-schedule * { visibility: visible !important; }
  .team-print-schedule {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0 8px;
    color: #000;
    background: #fff;
  }
  /* Strip the TBD clock glyph etc. from the time cell — keep just the text. */
  .team-print-schedule .mdi { display: none !important; }
  .team-print-schedule__table { page-break-inside: auto; }
  .team-print-schedule__table tr { page-break-inside: avoid; }
  @page { margin: 14mm; }
}