/* Rank suffix variant styling - allow per-context tuning */
/* Player comparison modal: small sup offset */
#player-comparison-modal .stat-rank-variant-compare sup.stat-rank-suffix-compare,
#player-comparison-modal .comparison-rank-annotation sup {
  top: 0em !important;
  font-size: 0.5rem !important;
}

/* Game logs modal: footer rank suffixes */
#game-logs-modal .stat-rank-variant-gamelogs-footer sup.stat-rank-suffix-gamelogs-footer,
#game-logs-modal tfoot td.has-rank-annotation span.stat-rank-annotation sup {
  top: 0em !important;
  font-size: 0.5rem !important;
}

/* Game logs modal: opponent rank suffixes (first column) */
#game-logs-modal .stat-rank-variant-gamelogs-opponent sup.stat-rank-suffix-gamelogs-opponent,
#game-logs-modal tbody td:first-child span.stat-rank-annotation sup {
  top: 0em !important;
  font-size: 0.5rem !important;
  display: inline-block !important;
  vertical-align: baseline !important;
  /* ensure suffix aligns with text baseline on mobile */
  line-height: 1 !important;
  transform: none !important;
}

/* Game logs modal: SZN view rank suffixes */
#game-logs-modal .stat-rank-variant-szn sup.stat-rank-suffix-szn {
  top: 0em !important;
  font-size: 0.6rem !important;
}

/* KTC rank in player cards */
/* KTC rank in player cards */
.stat-rank-variant-ktc {
  display: inline-flex;
  align-items: center;
  /* keep suffix vertically aligned with number */
  gap: 0;
  /* parentheses should hug the rank */
}

.player-ktc-wrapper.has-rank-annotation .stat-rank-annotation {
  margin-left: 0;
  /* no space between the KTC value and rank */
}

.player-ktc-wrapper .value,
.player-ppg-wrapper .value {
  margin-left: 0.03rem;
  /* subtle spacing between label and value */
}

.player-ktc-wrapper .stat-rank-number {
  color: inherit;
}

.stat-rank-variant-ktc .stat-rank-number {
  margin: 0;
  /* keep number tight to suffix */
  padding: 0;
  filter: brightness(1.15);
}

.stat-rank-variant-ktc .stat-rank-suffix-ktc {
  font-size: 0.9em !important;
  /* slightly smaller inline suffix */
  line-height: 1;
  margin-left: 0;
  /* no gap between number and suffix */
  padding-left: 0;
}

#rosterGrid.condensed-mode .stat-rank-variant-ktc .stat-rank-number,
#rosterGrid.condensed-mode .stat-rank-variant-ktc .stat-rank-suffix-ktc {
  filter: brightness(1.4);
}

#rosterGrid .player-ktc-wrapper .ktc-rank-display {
  margin-left: 0.03rem;
  font-weight: 800;
  font-size: 0.62rem;
}

#rosterGrid .player-ktc-wrapper .ktc-rank-suffix-display {
  font-size: 0.55rem;
  font-weight: 500;
  margin-left: 0.02rem;
}

#rosterGrid .player-ktc-wrapper .player-ktc {
  font-size: 0.57rem;
}

#rosterGrid.condensed-mode .player-ktc-wrapper .player-ktc {
  font-size: 0.53rem;
}

/* Match previous brightness treatment on KTC rank after the markup swap */
#rosterGrid .player-ktc-wrapper .ktc-rank-display,
#rosterGrid .player-ktc-wrapper .ktc-rank-suffix-display {
  filter: brightness(1.15);
}

#rosterGrid.condensed-mode .player-ktc-wrapper .ktc-rank-display,
#rosterGrid.condensed-mode .player-ktc-wrapper .ktc-rank-suffix-display {
  filter: brightness(1.24);
  font-size: 0.55rem;
}

@media (max-width: 819px) {
  #rosterGrid .player-ktc-wrapper .ktc-rank-display {
    font-size: 0.6rem;
    font-family: 'Google Sans';
  }

  #rosterGrid .player-ktc-wrapper .ktc-rank-suffix-display {
    margin-right: 2px;
    font-size: 0.55rem;
  }

  #rosterGrid .player-ktc-wrapper .player-ktc {
    font-size: 0.56rem;
  }
}

/* ⬇︎ VARIABLES, THEME, & FOUNDATION ⬇︎ */
:root {
  --font-sans: 'Product Sans', 'Google Sans', 'Quicksand', sans-serif;
  /* · · New Color Palette · · */
  --color-bg: #0D0E1B;
  --color-bg-light: #1E1F30;
  --color-panel-bg: rgba(22, 24, 43, 0.1);
  --roster-card-blur: 1px;
  --color-panel-border: rgba(128, 138, 189, 0.2);
  --color-panel-border-glow: rgba(128, 138, 189, 0.4);
  --color-text-primary: #EAEBF0;
  --color-text-secondary: #9096C0;
  --color-text-tertiary: #5F6795;
  --color-text-mid-test1: #BDC1D8;
  /* inbetween primary & secondary */
  --color-text-mid-test2: #787FAB;
  /* midpoint between secondary and tertiary */
  --color-accent-primary: #766DFF;
  --color-accent-primary-glow: rgba(118, 109, 255, 0.5);
  --color-accent-secondary: #42C2FF;
  --color-accent-secondary-glow: rgba(66, 194, 255, 0.5);
  --color-accent-trade-win: #00F5A0;
  --color-accent-trade-lose: #FF47A6;
  /* · · Position Colors · · */
  --pos-qb: #FF3A75ca;
  --pos-rb: #00EBC7ca;
  --pos-wr: #58A7FFca;
  --pos-te: #B469FFca;
  --pos-flx: #ba6597ee;
  --pos-sflx: #FF3A75ca;
  --pos-bn: #64748b;
  --pos-tx: #808ea3;
  /* · · Other vars · · */
  --panel-border-radius: 12px;
  --card-border-radius: 8px;
  --glow-strength: 0.6;
  /* FIXED: give it a value so parsing continues */
  /* · · Orb 3 (shared) — using lengths so gradient center = orb center · · */
  --orb3-left: 330px;
  --orb3-top: 23rem;
  --orb3-size: 19rem;
}

html,
body {
  height: 100%;
  margin: 0;
}

:root {
  --roster-header-height: 0px;
  --roster-header-gap: 12px;
  /* Adjust this value to change the vertical gap beneath the global header on roster pages */
}

body {
  font-family: var(--font-sans);
  background-color: #0b0b12;
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: auto;
  position: relative;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
  outline: 1px solid rgba(255, 255, 255, 0.0);
  /* faint light ring */
  outline-offset: 2px;
  /* optional spacing */
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main#content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* ⬇︎ BACKGROUND ORBS AND NOISE OVERLAY ⬇︎ */
#background-container {
  position: fixed;
  /* EDITED: Changed from absolute to fixed */
  inset: 0;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
}

#background-gradient {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1200px 800px at -10% -20%, #7300FF59, transparent),
    radial-gradient(700px 600px at 110% 10%, #00EBFF40, transparent),
    /* Orb-3’s gradient center is computed from the orb’s box center */
    radial-gradient(300px 300px at calc(var(--orb3-left) + (var(--orb3-size) / 2)) calc(var(--orb3-top) + (var(--orb3-size) / 2)),
      #FFAF0020, transparent);
}

.orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(38px);
}

#orb-1 {
  left: -6rem;
  top: 2.5rem;
  height: 18rem;
  width: 18rem;
  background: linear-gradient(135deg, rgba(115, 0, 255, 0.6), rgba(0, 235, 255, 0.4));
  opacity: 0.35;
}

#orb-2 {
  right: -60px;
  top: 6rem;
  height: 16rem;
  width: 16rem;
  background: linear-gradient(135deg, rgba(0, 235, 255, 0.5), rgba(255, 175, 0, 0.4));
  opacity: 0.30;
}

#orb-3 {
  /* match the same vars used in the gradient center above */
  left: var(--orb3-left);
  top: var(--orb3-top);
  height: var(--orb3-size);
  width: var(--orb3-size);
  /* No translate here; center handled via calc() in the gradient */
  background: linear-gradient(135deg, #FFAF008C, #7300FF80);
  opacity: 0.48;
  border-radius: 9999px;
  filter: blur(38px);
  position: absolute;
}

#noise-overlay {
  position: fixed;
  /* EDITED: Changed from absolute to fixed */
  inset: 0;
  z-index: -9;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3e%3cfilter id='n'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3e%3cfeColorMatrix type='saturate' values='0'/%3e%3cfeComponentTransfer%3e%3cfeFuncA type='table' tableValues='0 0 0 0 0.08'/%3e%3c/feComponentTransfer%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23n)'/%3e%3c/svg%3e");
}

/* ⬇︎ SCROLLBARS ⬇︎ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-text-tertiary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-secondary);
}

/* ⬇︎ GENERAL UI ⬇︎ */
#loading,
#welcome-screen {
  text-align: center;
  padding: 0;
  font-size: 1.2rem;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0.51rem auto;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#welcome-screen {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Branding Panel: Logo + App Name side by side, centered - matches fc-card fc-glass styling */
.welcome-branding-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  /* Match fc-glass card styles */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5em;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), 0 0 0.85em rgba(168, 85, 247, 0.15);
  width: 100%;
  margin: 0.5rem 0 0;
}

.branding-top-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1.25rem;
  width: 100%;
}

@media (max-width: 520px) {
  .branding-top-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1.1rem;
    width: 100%;
    margin-left: -2px !important;
  }
}

/* Subtle glow effect matching cards */
.welcome-branding-panel::before {
  content: "";
  position: absolute;
  top: -1.5em;
  right: -1.5em;
  width: 6em;
  height: 6em;
  border-radius: 50%;
  background-color: #a855f7;
  filter: blur(2.5em);
  opacity: 0.2;
  pointer-events: none;
}

.welcome-branding-panel .welcome-logo {
  --welcome-logo-size: clamp(48px, 14vw, 79px);
  display: block;
  width: var(--welcome-logo-size);
  height: auto;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.welcome-branding-panel h2 {
  margin: 0 !important;
  font-size: clamp(1.4rem, 5vw, 3.1rem);
  font-weight: 200;
  color: var(--color-text-primary);
  text-shadow: 0 0 9px #5300ffaa;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* Info Panel: Instructions + Install */
.welcome-info-panel {
  padding: 1.25rem 1.5rem;
  background: rgb(47 29 104 / 10%);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--panel-border-radius);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.welcome-info-panel>p {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
}

/* Hide branding panel on non-welcome pages */
body:not([data-page="welcome"]) .welcome-branding-panel {
  display: none !important;
}

/* Mobile optimizations */
@media (max-width: 520px) {
  .welcome-branding-panel {
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }

  .welcome-branding-panel .welcome-logo {
    --welcome-logo-size: clamp(40px, 15.4vw, 59px);
    height: 58px;
    margin-top: 0px;
  }

  .welcome-branding-panel h2 {
    font-size: clamp(1.2rem, 29vw, 2.3rem);
  }

  .welcome-info-panel {
    padding: 1rem;
  }

  .welcome-info-panel>p {
    font-size: 0.9rem;
  }
}

/* Loading screen keeps the panel background */
#loading {
  padding: 4rem 0rem;
  background: rgb(47 29 104 / 10%);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--panel-border-radius);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

#welcome-screen h2 {
  font-size: 1.7rem;
  font-weight: 300;
  color: var(--color-text-primary);
  text-shadow: 0 0 9px #5300ff;
  margin-bottom: 0.5rem;
}

#welcome-screen>p {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--color-text-secondary);
}

.custom-tooltip {
  position: absolute;
  padding: 0.4rem 0.8rem;
  border-radius: 10px;
  background: linear-gradient(155deg, rgba(118, 109, 255, 0.32), rgba(66, 194, 255, 0.18));
  color: var(--color-text-primary);
  border: 1px solid rgba(118, 109, 255, 0.45);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-size: 0.72rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  pointer-events: none;
  z-index: 1400;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  white-space: nowrap;
}

.custom-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: inherit;
  border: inherit;
  border-top: none;
  border-left: none;
  border-radius: 2px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  transform-origin: center;
  transform: translateX(-50%) rotate(45deg);
}

.custom-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.custom-tooltip.is-hiding {
  opacity: 0;
  transform: translateY(-6px);
}

#header-container {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.1rem 0rem 0.4rem 0rem;
  border-radius: var(--panel-border-radius);
  /* EDITED: Changed background to be more transparent to see bg */
  background: linear-gradient(180deg, rgba(11, 11, 18, 0.2) 10%, transparent 100%);
}

body[data-page="rosters"] #header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: none;
  will-change: auto;
}

body[data-page="rosters"] #header-container .app-header {
  width: 100%;
  max-width: none;
}

body[data-page="rosters"] main#content {
  padding-top: max(calc(var(--roster-header-height, 0px) - var(--roster-header-gap, 0px)), 0px);
}

/* ⬇︎ UTILITY CLASSES ⬇︎ */
.glass-panel {
  background-color: rgba(13, 14, 35, 0.21);
  background-image: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03));
  -webkit-backdrop-filter: blur(2px) saturate(120%) brightness(120%);
  backdrop-filter: blur(2px) saturate(120%) brightness(120%);
  box-shadow: inset 0 0 0 0px rgba(255, 255, 255, 0.05), inset 0 0 0 3px rgba(200, 200, 200, 0.025), 0 10px 26px rgba(0, 0, 0, var(--outerA, .22));
  /* · · Frame · · */
  border: 1px solid rgba(128, 138, 189, 0.2);
  border-radius: 10px;
  box-shadow: rgba(255, 255, 255, 0.005) 0px 0px 0px 0px inset, rgba(200, 200, 200, 0.0025) 0px 0px 0px 3px inset, rgba(0, 0, 0, 0.22) 0px 0px 0px 0px;
}

/* ⬇︎ NEW REDESIGNED HEADER LAYOUT ⬇︎ */
/* === ROW 1: Logo + Navigation Buttons === */
#primary-header-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem;
  grid-template-columns: none !important;
}

.app-logo {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.nav-logo {
  width: 1.3rem;
  /* match icon size */
  height: 1.25rem;
  object-fit: contain;
  display: block;
  filter: opacity(0.5) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)) brightness(1.5) hue-rotate(42deg);
}

/* Reduce vertical spacing specifically for the Home button logo so it matches other nav buttons */
#homeButton .nav-logo {
  display: inline-block;
  vertical-align: middle;
  margin-top: 0;
  margin-bottom: -1px;
}

#homeButton {
  padding-top: 0.15rem;
  padding-bottom: 0.25rem;
}

.nav-buttons-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  justify-content: space-around;
}

.nav-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.4rem 0.6rem;
  min-height: 2.25rem;
  background: rgba(13, 14, 35, 0.25);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(128, 138, 189, 0.2);
  border-radius: 8px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  flex: 1;
  max-width: 4.5rem;
}

.nav-button i {
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.nav-label {
  font-size: 0.45rem;
  font-weight: 500;
  line-height: 1;
  margin-top: 0.05rem;
  color: inherit;
  white-space: nowrap;
}

.nav-button:hover {
  color: var(--color-text-primary);
  background: rgba(13, 14, 35, 0.35);
  border-color: rgba(128, 138, 189, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.nav-button.active {
  color: var(--color-accent-primary);
  background: rgba(118, 109, 255, 0.1);
  border-color: rgba(118, 109, 255, 0.3);
  box-shadow: 0 4px 12px rgba(118, 109, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* === "More" Dropdown Navigation === */

/*
  IMPORTANT: The "More" toggle must size exactly like the other nav buttons.
  To ensure it inherits all existing per-page overrides (e.g. Stats/Rosters desktop),
  the toggle uses the shared `.nav-button` class in HTML.
*/
.nav-button.nav-more-toggle {
  position: relative;
}

.nav-button.nav-more-toggle[aria-expanded="true"] {
  color: #7360ff;
  background: rgba(66, 194, 255, 0.07);
  border-color: #7360ffa5;
  box-shadow: 0 4px 12px rgba(66, 194, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-more-dropdown {
  /* Positioned via JS relative to the toggle to avoid needing a wrapper div */
  position: fixed;
  top: 0;
  left: 0;
  min-width: 67px;
  width: fit-content;
  background: linear-gradient(145deg, rgba(47, 46, 72, 0.97), rgba(32, 31, 56, 0.97));
  backdrop-filter: blur(16px);
  border: 1px solid #7360ff70;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 35px -5px #5300ff7a;
  padding: 6px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1200;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-more-dropdown:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  transform: translateX(0px);
}

@media (max-width: 640px) {
  body[data-page="rosters"] .nav-more-dropdown:not(.hidden) {
    transform: translateX(5px);
  }
}

.nav-more-dropdown.hidden {
  display: none;
}

.nav-more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.4rem 0.6rem;
  min-height: 2.25rem;
  background: rgba(13, 14, 35, 0.3);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(128, 138, 249, 0.35);
  border-radius: 7px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
  width: 100%;
  max-width: 4.5rem;
  align-self: center;
}

.nav-more-item i {
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.nav-more-item .nav-label {
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
}

.nav-more-caret {
  position: absolute;
  right: 7px;
  top: 12px;
  font-size: 0.5rem;
  line-height: 1;
  opacity: 0.8;
  pointer-events: none;
}

.nav-more-item:hover {
  color: var(--color-text-primary);
  background: rgba(66, 194, 255, 0.06);
  border-color: rgba(66, 194, 255, 0.25);
  box-shadow: 0 4px 12px rgba(66, 194, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}

.nav-more-item.active {
  color: var(--color-accent-primary);
  background: rgba(118, 109, 255, 0.12);
  border-color: rgba(118, 109, 255, 0.35);
  box-shadow: 0 4px 12px rgba(118, 109, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-more-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* === ROW 2: Username, League Select, Compact Toggle === */
#secondary-header-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem !important;
  border-top: 1px solid var(--color-panel-border);
  grid-template-columns: none !important;
}

#secondary-header-row .username-area {
  width: auto;
  flex: 1 1 0;
}

#secondary-header-row .custom-select-wrapper {
  width: auto;
  flex: 1 1 0;
}

.compact-switcher {
  display: flex;
  align-items: center;
  background: rgba(13, 14, 35, 0.25);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(128, 138, 189, 0.2);
  border-radius: 6px;
  padding: 0.1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.compact-switcher button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  padding: 0.25rem 0.4rem !important;
  min-height: 1.8rem;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.7rem !important;
}

.compact-switcher button i {
  font-size: 0.85rem;
  line-height: 1;
}

.switcher-label {
  font-size: 0.4rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: inherit;
}

.compact-switcher button:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.compact-switcher button.active {
  min-width: 39px;
  color: var(--color-accent-secondary);
  background: rgba(66, 194, 255, 0.08);
  border: 1px solid;
  box-shadow: 0 1px 3px rgba(66, 194, 255, 0.2);
}

/* === ROW 3: Start/Sit Button === */
.start-sit-button-slot {
  width: auto;
  height: var(--header-control-height);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  margin: 0px 3px;
}

.start-sit-button-container {
  height: var(--header-control-height);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0 !important;
  min-width: fit-content;
}

.start-sit-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.22rem 0.535rem !important;
  flex: 1 1 0 !important;
  /* take remaining row width */
  width: 100%;
  /* fill its flex cell */
  min-width: 3.5rem;
  /* avoid min-content clamp */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.1)) !important;
  border: 1px solid rgba(128, 138, 189, 0.2) !important;
  border-radius: 8px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.06) !important;
}

.start-sit-button.active {
  color: var(--color-accent-primary);
  background: rgba(118, 109, 255, 0.1) !important;
  border-color: rgba(118, 109, 255, 0.3) !important;
  box-shadow: 0 4px 12px rgba(118, 109, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.start-sit-button .analyzer-icon {
  font-size: 1rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.start-sit-button .analyzer-label {
  font-size: 0.45rem;
  font-weight: 500;
  line-height: 1;
  margin-top: 0.05rem;
  color: inherit;
}

.start-sit-button:hover {
  color: var(--color-text-secondary);
  background: rgba(13, 14, 35, 0.35);
  border-color: rgba(128, 138, 189, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.start-sit-button:focus-visible {
  outline: 2px solid rgba(118, 109, 255, 0.6);
  outline-offset: 2px;
}

/* === Mobile Responsive Adjustments === */
@media (max-width: 520px) {
  .nav-button {
    padding: 0.25rem 0.3rem;
    min-height: 1.9rem;
    max-width: 4rem;
    gap: 0.05rem;
  }

  /* Caret must not inherit the larger nav icon sizing */
  .nav-button.nav-more-toggle>i.nav-more-caret {
    font-size: 0.5rem;
  }

  .nav-more-dropdown {
    padding: 6px 5px;
    gap: 8px;
  }

  .nav-more-item {
    padding: 0.3rem 0.3rem;
    min-height: 2rem;
    max-width: 4rem;
    gap: 0.1rem;
  }

  .nav-more-item i {
    font-size: 0.95rem;
  }

  .nav-button i {
    font-size: 1.05rem;
  }

  .nav-label {
    font-size: 0.7rem;
  }

  .app-logo {
    width: 1.8rem;
    height: 1.8rem;
  }

  .nav-buttons-container {
    gap: 0.4rem;
  }

  #primary-header-row {
    gap: 0.4rem;
    padding: 0.2rem;
  }
}

/* === Desktop Responsive Adjustments === */
@media (min-width: 768px) {
  .nav-button {
    padding: 0.4rem 0.7rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
    gap: 0.15rem;
  }

  .nav-button i {
    font-size: 1.2rem;
  }

  .nav-label {
    font-size: 0.7rem;
  }

  /* Caret must not inherit the larger nav icon sizing */
  .nav-button.nav-more-toggle>i.nav-more-caret {
    font-size: 1rem;
    color: #b7b1f8;
  }

  .nav-more-dropdown {
    padding: 3px;
    gap: 7px;
    min-width: 80px;
  }

  .nav-more-item {
    padding: 0.4rem 0.5rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
  }

  .nav-more-item i {
    font-size: 1.2rem;
  }

  .nav-more-item .nav-label {
    font-size: 0.7rem;
  }

  .app-logo {
    width: 2.4rem;
    height: 2.4rem;
  }

  .nav-buttons-container {
    gap: 0.8rem;
  }

  #primary-header-row {
    gap: 1rem;
    padding: 0.1rem;
  }

  #secondary-header-row .username-area,
  #secondary-header-row .custom-select-wrapper {
    max-width: 180px;
  }
}

@media (min-width: 700px) {
  .nav-buttons-container {
    gap: 1rem;
  }

  .nav-button {
    max-width: 6rem;
  }

  .nav-more-item {
    max-width: 5.7rem;
  }
}

@media (min-width: 869px) {
  body[data-page="rosters"] #header-container {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 0.9rem;
  }

  body[data-page="rosters"] #header-container .app-header {
    --roster-desktop-gap: 0.75rem;
    --roster-desktop-field-width: 200px;
    --roster-desktop-max: min(calc(100vw - 3rem), 1060px);
    display: grid;
    grid-template-columns: var(--roster-desktop-field-width) repeat(5, auto);
    grid-template-rows: auto auto;
    column-gap: var(--roster-desktop-gap);
    row-gap: 0.85rem;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.15rem 1rem;
    margin: 0 auto;
    width: fit-content;
    max-width: var(--roster-desktop-max);
  }

  body[data-page="rosters"] #primary-header-row,
  body[data-page="rosters"] #contextual-controls,
  body[data-page="rosters"] #secondary-header-row,
  body[data-page="rosters"] #filters-row,
  body[data-page="rosters"] .filters-container {
    display: contents !important;
  }

  body[data-page="rosters"] #contextual-controls .header-row {
    border-top: 0;
    padding: 0;
  }

  body[data-page="rosters"] .username-area {
    grid-column: 1;
    grid-row: 1;
    width: var(--roster-desktop-field-width);
    max-width: var(--roster-desktop-field-width);
  }

  body[data-page="rosters"] .nav-buttons-container {
    grid-column: 2 / span 5;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
  }

  body[data-page="rosters"] .nav-buttons-container .nav-button {
    flex: 0 0 auto;
    width: 77px;
  }

  body[data-page="rosters"] .custom-select-wrapper {
    grid-column: 1;
    grid-row: 2;
    width: var(--roster-desktop-field-width);
    max-width: var(--roster-desktop-field-width);
  }

  body[data-page="rosters"] .view-switcher {
    grid-column: 2;
    grid-row: 2;
    justify-self: flex-start;
  }

  body[data-page="rosters"] .start-sit-button-slot {
    grid-column: 3;
    grid-row: 2;
    justify-self: flex-start;
  }

  body[data-page="rosters"] #positional-filters {
    grid-column: 4;
    grid-row: 2;
    justify-content: flex-start;
    margin-left: 3px;
  }

  body[data-page="rosters"] #clearFiltersButton {
    grid-column: 5;
    grid-row: 2;
    margin: 0;
  }

  body[data-page="rosters"] .compare-controls {
    grid-column: 6;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-self: flex-start;
    position: static;
  }

  body[data-page="rosters"] .compare-controls .compare-search-toggle {
    margin: 0;
  }

  body[data-page="rosters"] #header-container {
    position: fixed;
    top: 0;
    top: 7px;
    left: 0;
    right: 0;
    width: 100vw;
  }
}

@media (min-width: 869px) {
  body[data-page="rosters"] #homeButton {
    margin-left: 20px;
  }

  n {
    gap: 0.09rem;
  }

  .compact-switcher button {
    padding: 0.3rem 0.4rem 0.2rem !important;
    min-width: 38px;
  }

  .compact-switcher button i {
    font-size: 0.75rem;
  }

  .switcher-label {
    font-size: 0.55rem;
  }

  .start-sit-button {
    padding: 0.3rem 0.535rem 0.2rem !important;
    width: 75px;
    margin-left: 2px;
    flex: 0 0 60px !important;
    min-width: 62px !important;
  }

  .start-sit-button .analyzer-icon {
    font-size: 0.951rem;
  }

  #primary-header-row .primary-switcher,
  #secondary-header-row .secondary-switcher {
    min-width: 115px;
    margin-block: 0.075rem;
    margin-left: 13px;
  }
}

.app-header {
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  --header-icon-size: 2.25rem;
  --header-control-height: 2.2rem;
  --header-field-max-width: 160px;
  --header-switcher-width: 12.25rem;
}

.header-row {
  display: flex;
  flex-wrap: nowrap;
  /* Prevent wrapping */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding-bottom: 1px;
  /* space for scrollbar */
}

.app-header>.header-row:first-of-type,
#contextual-controls .header-row:first-child {
  display: grid;
  grid-template-columns: var(--header-icon-size) minmax(120px, var(--header-field-max-width)) minmax(var(--header-switcher-width), 1fr);
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

#contextual-controls .header-row {
  border-top: 1px solid var(--color-panel-border);
  padding-top: 0.3rem;
}

#contextual-controls .header-row:first-child {
  gap: 0.5rem;
}

#contextual-controls .header-row:has(#positional-filters) {
  gap: 0.15rem;
  padding-left: 0.15rem;
  padding-right: 0.2rem;
}

#primary-header-row .menu-container,
#secondary-header-row .analyzer-button-container,
.analyzer-button-slot,
.research-button-slot {
  width: max(var(--header-icon-size), 2.6rem);
  height: var(--header-control-height);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-quick-links {
  display: none;
  align-items: center;
  gap: 0.35rem;
}

.header-quick-links .analyzer-button-container,
.header-quick-links .research-button-container {
  width: var(--header-icon-size);
  height: var(--header-control-height);
}

#primary-header-row .menu-container {
  position: relative;
}

#primary-header-row .menu-button,
#secondary-header-row .analyzer-button {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-sizing: border-box;
}

#primary-header-row .menu-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

#secondary-header-row .analyzer-button,
.header-quick-links .analyzer-button,
.header-quick-links .research-button {
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: 0.1rem;
}

#secondary-header-row .analyzer-button .analyzer-icon,
.header-quick-links .analyzer-button .analyzer-icon,
.header-quick-links .research-button .analyzer-icon {
  display: block;
  margin: 0;
  line-height: 1;
  font-size: 1.22rem;
}

#secondary-header-row .analyzer-button .analyzer-label,
.header-quick-links .analyzer-button .analyzer-label,
.header-quick-links .research-button .analyzer-label {
  display: block;
  margin: -2px 0 0 0;
  padding: 0;
  font-size: 0.50rem;
  font-weight: 400;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
}

#secondary-header-row .analyzer-button:hover .analyzer-icon,
#secondary-header-row .analyzer-button:focus-visible .analyzer-icon,
.header-quick-links .analyzer-button:hover .analyzer-icon,
.header-quick-links .analyzer-button:focus-visible .analyzer-icon,
.header-quick-links .research-button:hover .analyzer-icon,
.header-quick-links .research-button:focus-visible .analyzer-icon {
  color: var(--color-text-primary);
}

#primary-header-row .username-area,
#secondary-header-row .custom-select-wrapper {
  justify-self: center;
}

#primary-header-row .primary-switcher,
#secondary-header-row .secondary-switcher {
  justify-self: end;
  min-width: 100px;
  max-width: var(--header-switcher-width);
  height: var(--header-control-height);
  display: flex;
  align-items: stretch;
  margin-block: 0.075rem;
}

#primary-header-row .primary-switcher button,
#secondary-header-row .secondary-switcher button {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#primary-header-row .menu-container,
#primary-header-row .username-area,
#secondary-header-row .analyzer-button-container,
#secondary-header-row .custom-select-wrapper,
.analyzer-button-slot,
.research-button-slot {
  margin-block: 0.075rem;
}

@media (min-width: 869px) {

  #primary-header-row .menu-container,
  #primary-header-row .username-area,
  #secondary-header-row .analyzer-button-container,
  #secondary-header-row .custom-select-wrapper,
  .analyzer-button-slot,
  .research-button-slot {
    min-width: 200px;
  }
}

#contextual-controls {
  display: flex;
  flex-direction: column;
}

#contextual-controls.hidden {
  display: none;
}

@media (min-width: 869px) {
  .header-quick-links {
    display: flex;
  }

  #primary-header-row {
    grid-template-columns: var(--header-icon-size) max-content minmax(120px, var(--header-field-max-width)) minmax(var(--header-switcher-width), 1fr);
  }

  .header-quick-links .analyzer-button,
  .header-quick-links .research-button {
    gap: 0.2rem;
  }

  #header-quick-links #analyzeLeagueButton,
  #header-quick-links #analyzeLeagueButton.glow-on-select,
  #header-quick-links #analyzeLeagueButton.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--color-text-secondary);
  }

  #header-quick-links #analyzeLeagueButton .analyzer-icon {
    margin-top: 0 !important;
    font-size: 1.3rem !important;
  }

  #header-quick-links #analyzeLeagueButton .analyzer-label {
    margin-top: -2px !important;
  }

  #header-quick-links #analyzeLeagueButton:hover .analyzer-icon,
  #header-quick-links #analyzeLeagueButton:focus-visible .analyzer-icon {
    color: var(--color-text-primary);
  }
}

/* · · Ensure hidden truly hides views regardless of ID display rules · · */
#playerListView.hidden,
#rosterView.hidden {
  display: none !important;
}

/* · · Row 1 · · */
.username-area {
  flex-grow: 1;
  min-width: 100px;
  /* prevent it from getting too small */
  padding: 0;
  height: var(--header-control-height);
  display: flex;
  align-items: stretch;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
}

.username-area::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgb(66 45 208 / 10%));
  border: 1px solid var(--color-panel-border);
  -webkit-backdrop-filter: blur(4px) saturate(110%);
  backdrop-filter: blur(4px) saturate(110%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  pointer-events: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.username-area:focus-within::before {
  border-color: var(--color-accent-primary);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 0 var(--glow-strength) var(--color-accent-primary-glow);
}

/* · · #usernameInput block · · */
#usernameInput {
  background: transparent;
  border: none;
  border-radius: 0;
  color: #c4c8eaba;
  padding: 0.23rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 300;
  width: 100%;
  height: 100%;
  line-height: 1.25;
  caret-color: #c4c8ea;
  transition: color 0.2s ease, background-color 0.2s ease;
  position: relative;
  z-index: 1;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

#usernameInput::placeholder {
  color: #5F6795aa !important;
  font-size: inherit;
  line-height: inherit;
}

/* · · Prevent browser autofill from turning the username bar white (Safari/Chrome) · · */
#usernameInput:-webkit-autofill,
#usernameInput:-webkit-autofill:hover,
#usernameInput:-webkit-autofill:focus {
  -webkit-text-fill-color: #c4c8ea !important;
  caret-color: #c4c8ea !important;
  /* Overwrite the default yellow/white fill with a transparent inset */
  -webkit-box-shadow: 0 0 0px 1000px rgba(13, 14, 35, 0) inset !important;
  box-shadow: 0 0 0px 1000px rgba(13, 14, 35, 0) inset !important;
  background-color: transparent !important;
  background-clip: padding-box !important;
  transition: background-color 99999s ease-in-out 0s !important;
}

#usernameInput:focus {
  outline: none;
}

/* · · Row 2 · · */
.custom-select-wrapper {
  position: relative;
  flex-grow: 1;
  min-width: 100px;
  height: var(--header-control-height);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

#leagueSelect {
  appearance: none;
  /* EDITED: Increased transparency */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.1));
  border: 1px solid var(--color-panel-border);
  border-radius: 8px;
  -webkit-backdrop-filter: blur(4px) saturate(110%);
  backdrop-filter: blur(4px) saturate(110%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  padding: 0.32rem 1.25rem 0.32rem 0.5rem;
  font-size: 14px;
  color: #c4c8ea7a;
  font-weight: 300;
  width: 100%;
  height: 100%;
  min-width: 100px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#leagueSelect:focus,
#leagueSelect:focus-visible,
.custom-select-wrapper:focus-within #leagueSelect {
  outline: none !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
  /* preserve glass inset */
  border-color: var(--color-panel-border) !important;
}

.custom-select-wrapper::after {
  content: '▼';
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%) scale(0.6);
  color: var(--color-text-secondary);
  pointer-events: none;
}

/* · · Row 3 · · */
#positional-filters {
  /* This will no longer grow, allowing the parent to center it */
  justify-content: center;
}

/* ⬇︎ HIGH-END GLASS BUTTONS & SEGMENTED CONTROLS V3 ⬇︎ */
.primary-switcher,
.secondary-switcher,
#positional-filters {
  display: flex;
  border: 1px solid var(--color-panel-border);
  border-radius: 8px;
  padding: 0.1rem 0.12rem;
  gap: 0.15rem;
  flex-shrink: 0;
}

.primary-switcher {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.1));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.secondary-switcher {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.1));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

#positional-filters {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.1));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  padding: 0.1rem 0.02rem !important;
}

/* ⬇︎ MAIN BUTTON STYLES ⬇︎ */
.primary-switcher button {
  padding: 0.12rem 0.55rem;
  font-size: 0.85rem;
  font-weight: 400;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  color: var(--color-text-secondary);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.secondary-switcher button,
.filter-btn {
  padding: 0.12rem 0.55rem;
  font-size: 0.85rem;
  font-weight: 400;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--color-text-secondary);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.filter-btn {
  min-width: 43px;
  min-height: 30px;
  padding: 0.15rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 400;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--color-text-secondary);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

/* · · Primary buttons are bolder · · */
.primary-switcher button {
  font-weight: 400;
  font-size: 0.9rem;
}

/* · · Hover States · · */
.primary-switcher button:hover,
.secondary-switcher button:hover,
.filter-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-panel-bg);
}

/* · · Active & Counterpart States (EDITED) · · */
#fetchRostersButton.active {
  color: #D8F2FFEE;
  border-color: var(--color-accent-secondary);
  /* Blue */
  box-shadow: 0 0 8px var(--color-accent-secondary-glow);
}

#fetchOwnershipButton.active {
  color: #c4c8ea;
  border-color: #D90059;
  /* Pink */
  box-shadow: 0 0 8px #D90059;
}

#positionalViewBtn.active {
  color: #D8E2FFEE;
  border-color: var(--color-accent-primary);
  /* Purple */
  box-shadow: 0 0 8px var(--color-accent-primary-glow);
}

#depthChartViewBtn.active {
  color: #c4c8ea;
  border-color: var(--color-accent-trade-win);
  /* Green */
  box-shadow: 0 0 8px rgba(0, 245, 160, 0.5);
}

/* · · Counterpart buttons are dimmed · · */
.primary-switcher button.counterpart-active,
.secondary-switcher button.counterpart-active {
  color: var(--color-text-tertiary);
  background: transparent;
}

.primary-switcher button.counterpart-active:hover,
.secondary-switcher button.counterpart-active:hover {
  color: var(--color-text-secondary);
}

/* · · Filter Buttons · · */
.filter-btn.active[data-position="QB"] {
  color: #FF3A75da;
  box-shadow: inset 0 0 7px #FF3A7527;
}

.filter-btn.active[data-position="RB"] {
  color: #00EBC7da;
  box-shadow: inset 0 0 7px #00EBC727;
}

.filter-btn.active[data-position="WR"] {
  color: #58A7FF;
  box-shadow: inset 0 0 7px #58A7FF35;
}

.filter-btn.active[data-position="TE"] {
  color: #B469FF;
  box-shadow: inset 0 0 7px #B469FF35;
}

.filter-btn.active[data-position="FLX"] {
  color: #8983a0;
  box-shadow: inset 0 0 7px #82808767;
}

.filter-btn.active {
  position: relative;
  background: rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(1px) saturate(180%);
  border: 1px solid rgba(250, 250, 250, 0.09);
  border-radius: 7px;
  box-shadow: 0 1px 5px rgba(31, 38, 105, 0.01), inset 0 3px 10px rgba(255, 255, 255, 0.013);
}

/* AFTER */
.filter-btn.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 7px;
  backdrop-filter: blur(1px);
  box-shadow: inset 5px 6px 0px -4px rgba(255, 255, 255, .05),
    inset 0px 4px 0px -3px rgba(255, 255, 255, .051);
  opacity: 0.4;
  z-index: -1;
  filter: blur(1px) brightness(100%);
  pointer-events: none;
}

/* · · Preview Button • Ctrl Button · · */
.control-button {
  padding: 0.29rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--color-panel-border);
  /* EDITED: Increased transparency */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.1)) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  color: var(--color-text-secondary);
}

#compareButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

.control-button.glow-on-select {
  box-shadow: 0 0 8px #7300ff;
  color: #eeeeee;
  border: 1px solid #4E00DA;
}

/* · · Show All Button · · */
.control-button.active {
  color: #BDC1D8ca;
  border: 1px solid #833fff39;
  box-shadow: inset 0 0 10px #7310ff29, 0 0 3px #7310ff40;
  text-shadow:
    0 0 3px rgba(43, 0, 255, 0.5),
    0 0 5px rgba(73, 0, 255, 0.2);
}

.control-button:disabled {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.1)) !important;
  box-shadow: inset 0 1px 2px rgba(200, 200, 200, 0.08) !important;
  color: var(--color-text-tertiary) !important;
  cursor: not-allowed;
  border-color: var(--color-panel-border) !important;
}

.control-button-subtle {
  background: none;
  border: none;
  color: #5F679572;
  text-decoration: underline;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.control-button-subtle.active {
  color: var(--color-text-secondary);
}

/* Show All Button cont.. */
#compareButton.compare-show-all {
  align-items: center;
  justify-content: center;
}

#compareButton .compare-show-all-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: 0;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

#compareButton .compare-show-all-icon {
  display: block;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1;
}

#compareButton .compare-show-all-label {
  display: block;
  margin: -2px 0 0 0;
  font-size: 0.5rem;
  font-weight: 300;
  line-height: 1;
}

.app-header.preview-active #primary-header-row,
.app-header.preview-active #secondary-header-row {
  display: none !important;
}

@media (min-width: 869px) {
  body[data-page="rosters"] #header-container .app-header.preview-active {
    --roster-desktop-gap: 0.6rem;
    --roster-desktop-field-width: 113px;
    --roster-desktop-max: min(calc(100vw - 3rem), 1060px);
    --roster-preview-gap: clamp(0.4rem, 1.2vw, 0.7rem);
    display: grid;
    grid-template-columns: var(--roster-desktop-field-width) repeat(5, auto);
    grid-template-rows: auto auto;
    column-gap: var(--roster-desktop-gap);
    row-gap: 0.85rem;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.15rem 0.21rem;
    margin: 0 auto;
    width: fit-content;
    max-width: var(--roster-desktop-max);
  }

  body[data-page="rosters"] .app-header.preview-active #primary-header-row {
    display: none !important;
  }

  body[data-page="rosters"] .app-header.preview-active #contextual-controls {
    display: contents !important;
  }

  body[data-page="rosters"] .app-header.preview-active #contextual-controls .header-row {
    display: contents !important;
  }

  body[data-page="rosters"] .app-header.preview-active #secondary-header-row {
    display: contents !important;
  }

  body[data-page="rosters"] .app-header.preview-active #filters-row {
    display: contents !important;
  }

  body[data-page="rosters"] .app-header.preview-active #secondary-header-row .username-area,
  body[data-page="rosters"] .app-header.preview-active #secondary-header-row .custom-select-wrapper {
    display: none !important;
  }

  body[data-page="rosters"] .app-header.preview-active .view-switcher {
    grid-column: 1;
    grid-row: 1;
    justify-self: flex-start;
    margin-left: 0;
  }

  body[data-page="rosters"] .app-header.preview-active .secondary-switcher {
    margin-left: 0;
  }

  body[data-page="rosters"] .app-header.preview-active .start-sit-button-slot {
    grid-column: 2;
    grid-row: 1;
    justify-self: flex-start;
    margin: 0;
  }

  body[data-page="rosters"] .app-header.preview-active .start-sit-button-container {
    flex: 0 0 auto !important;
  }

  body[data-page="rosters"] .app-header.preview-active .filters-container {
    grid-column: 3;
    grid-row: 1;
    display: contents !important;
  }

  body[data-page="rosters"] .app-header.preview-active #positional-filters {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    justify-content: flex-start;
    min-width: 0;
  }

  body[data-page="rosters"] .app-header.preview-active #clearFiltersButton {
    grid-column: 4;
    grid-row: 1;
    margin: 0;
    justify-self: flex-start;
  }

  body[data-page="rosters"] .app-header.preview-active .compare-controls {
    grid-column: 5;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    position: static;
    margin-left: 0;
    justify-self: flex-end;
  }
}

/* Welcome page: enforce uniform control heights and tighter mobile spacing */
body[data-page="welcome"] {
  /* single source of truth for header control sizing on the welcome page */
  --welcome-header-control-height: 36px;
  /* slightly smaller for a tighter header */
}

/* Make menu slot, username area and enter control share a single height */
body[data-page="welcome"] #primary-header-row .menu-container,
body[data-page="welcome"] .username-area,
body[data-page="welcome"] .enter-button,
body[data-page="welcome"] .menu-button,
body[data-page="welcome"] .home-menu-slot {
  height: var(--welcome-header-control-height) !important;
  min-height: var(--welcome-header-control-height) !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Ensure the input fills the shared height and has balanced paddings */
body[data-page="welcome"] #usernameInput {
  padding-top: 0.18rem !important;
  padding-bottom: 0.18rem !important;
  padding-left: 0.6rem !important;
  padding-right: 0.6rem !important;
  font-size: 17px !important;
  line-height: calc(var(--welcome-header-control-height) - 0.36rem);
}

/* Keep the enter button vertically centered and same height */
body[data-page="welcome"] .enter-button {
  height: var(--welcome-header-control-height) !important;
  min-height: var(--welcome-header-control-height) !important;
  align-items: center;
}

/* Reduce vertical gap on small screens so elements sit closer */
@media (max-width: 520px) {
  body[data-page="welcome"] #primary-header-row {
    gap: 0.65rem !important;
  }

  body[data-page="welcome"] .nav-buttons-container {
    gap: 0.25rem !important;
  }
}

/* Small tweak: ensure the hamburger/menu button matches sizing */
body[data-page="welcome"] .menu-button,
body[data-page="welcome"] #homeMenuToggle {
  height: 108% !important;
  width: 44px !important;
  /* fixed square for consistent visual */
  min-width: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Make the enter label a touch-friendly height on mobile while keeping it short */
body[data-page="welcome"] .enter-label {
  line-height: 1;
}

/* ⬇︎ ROSTER VIEW ⬇︎ */
#rosterContainer {
  padding: 1px;
}

#rosterGrid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 2px;
  min-width: min-content;
  padding-bottom: 1rem;
  /* For scrollbar clearance */
  justify-content: center;
}

#rosterGrid.is-preview-mode {
  justify-content: center;
}

#rosterGrid.start-sit-mode {
  gap: 0.04rem;
  justify-content: center;
}

.start-sit-column {
  width: 126px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  --start-sit-accent: var(--color-accent-primary);
  --start-sit-border: rgba(118, 109, 255, 0.55);
  --start-sit-glow: rgba(118, 109, 255, 0.35);
  --start-sit-card-glow: rgba(118, 109, 255, 0.16);
}

.roster-column.start-sit-column {
  gap: 0.03rem;
}

.start-sit-column[data-position="QB"] {
  --start-sit-accent: var(--pos-qb);
  --start-sit-border: #FF3A7599;
  --start-sit-glow: rgba(255, 58, 117, 0.35);
  --start-sit-card-glow: rgba(255, 58, 117, 0.15);
}

.start-sit-column[data-position="RB"] {
  --start-sit-accent: var(--pos-rb);
  --start-sit-border: #00EBC799;
  --start-sit-glow: rgba(0, 235, 199, 0.35);
  --start-sit-card-glow: rgba(0, 235, 199, 0.14);
}

.start-sit-column[data-position="WR"] {
  --start-sit-accent: var(--pos-wr);
  --start-sit-border: #58A7FF99;
  --start-sit-glow: rgba(88, 167, 255, 0.35);
  --start-sit-card-glow: rgba(88, 167, 255, 0.14);
}

.start-sit-column[data-position="TE"] {
  --start-sit-accent: var(--pos-te);
  --start-sit-border: #B469FF99;
  --start-sit-glow: rgba(180, 105, 255, 0.35);
  --start-sit-card-glow: rgba(180, 105, 255, 0.16);
}

.start-sit-column-shell {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  padding: 0.08rem;
}

.start-sit-pos-header {
  width: calc(100% - 0.16rem);
  margin: 2px auto 0rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: center;
  color: var(--start-sit-accent);
  padding: 0.2rem 0;
  border: 1px solid var(--start-sit-border);
  border-radius: 8px;
  box-shadow: inset 0 0 11px var(--start-sit-glow);
}

.start-sit-card {
  padding: 0.16rem 0.08rem 0.12rem;
  gap: 0.12rem;
  border-radius: 8px;
}

.start-sit-empty {
  color: var(--color-text-tertiary);
  font-size: 0.75rem;
  font-style: italic;
  text-align: center;
  padding: 0.4rem 0.2rem;
}

.start-sit-container .trade-header {
  background: linear-gradient(120deg, rgba(118, 109, 255, 0.14), rgba(0, 235, 199, 0.08));
}

/* Start/Sit preview: allow up to 6 players by stacking rows of two.
           Scoped to Start/Sit only so the Trade Preview grid is unaffected. */
.start-sit-container .trade-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: stretch;
}

.start-sit-preview-stack {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.start-sit-preview-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.25rem;
  align-items: stretch;
}

.start-sit-preview-row .trade-divider.start-sit-divider {
  height: auto;
  align-self: stretch;
}

.start-sit-row-separator {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  box-shadow: 0 0 10px rgba(149, 124, 255, 0.10);
  opacity: 0.95;
}

@media (max-width: 520px) {

  .start-sit-container .trade-body,
  .start-sit-preview-stack {
    gap: 0.35rem;
  }

  .start-sit-preview-row {
    gap: 0.18rem;
  }
}

.start-sit-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.16rem 0.1rem;
  width: 100%;
  padding: 2px 2px !important;
  background: rgba(255, 255, 255, 0.01) !important;
}

.start-sit-chip-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.start-sit-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--color-text-primary);
  text-align: center;
  line-height: 1;
}

.start-sit-inline-tag {
  flex-shrink: 0;
  padding: 0.08rem 0.32rem;
  font-size: 0.68rem;
  line-height: 1;
}

.start-sit-name-text {
  white-space: normal;
  text-align: center;
  font-size: 0.83rem;
  white-space: nowrap;
}

.start-sit-metric {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.135rem;
  font-size: 0.74rem;
  text-align: center;
  font-weight: 600;
  line-height: 1;
}

.start-sit-metric-value {
  color: var(--color-text-mid-test1);
}

.start-sit-metric-unit {
  color: #9296a3;
  font-size: 0.65rem;
}

.start-sit-metric-sep {
  color: var(--color-text-tertiary);
  font-size: 0.7rem;
  margin: 0 0.25rem;
}

.start-sit-rank {
  display: inline-block;
  align-items: center;
  gap: 0;
  font-size: 0.75rem;
  color: inherit;
  line-height: 1;
}

/* Small week label for Start/Sit preview (attached to the label) */
.start-sit-week {
  font-size: 0.82rem;
  /* slightly smaller than the H3 */
  color: var(--color-text-secondary);
  margin-left: 0.41rem;
  margin-right: 0.18rem;
}

.start-sit-rank-pos,
.start-sit-rank-number,
.start-sit-rank-dot {
  display: inline-block;
  line-height: 1;
}

.start-sit-rank-dot {
  margin: 0;
  padding: 0;
}

.start-sit-rank-pos {
  font-size: 0.65rem;
  filter: saturate(2);
}

.start-sit-preview-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.42rem !important;
  padding: 0.12rem 0.2rem 0;
}

.start-sit-preview-column>h4 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.start-sit-preview-column .trade-assets {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12rem !important;
  width: 90%;
  min-height: 2.2rem;
  flex: 0 0 auto;
  text-align: center;
  padding: 0.45rem 1rem;
  margin: 0 auto;
  background: #1E1F30da !important;
}

.start-sit-preview-column .trade-total {
  font-weight: 600;
  margin-top: auto;
  margin-bottom: 0px;
  padding-bottom: 1px;
  padding-top: 0.2rem;
  text-align: center;
  line-height: 1;
}

/* Start/Sit: layout for projected points + matchup (no font resizing). */
.start-sit-preview-column .trade-total.start-sit-total {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.45rem;
}

.start-sit-preview-column .trade-total.start-sit-total .start-sit-total-label {
  margin-right: 0;
  white-space: nowrap;
}

.start-sit-preview-column .trade-total.start-sit-total .start-sit-total-value {
  white-space: nowrap;
}

/* The inline row is only the VALUE + matchup (label is separate). */
.start-sit-preview-column .trade-total.start-sit-total .start-sit-proj-inline-row {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0.45rem;
}

/* Start/Sit preview: matchup inline next to projected points (layout only; font sizes unchanged). */
.start-sit-preview-column .trade-total .start-sit-matchup-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  margin-left: 0;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-text-tertiary);
  font-size: 0.8rem;
  /* same as the previous matchup block */
  letter-spacing: 0.01em;
  font-weight: 500;
}

/* Mobile priority: label stays visible; VALUE + matchup are on one non-wrapping line below it. */
@media (max-width: 520px) {
  .start-sit-preview-column .trade-total.start-sit-total {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
  }

  .start-sit-preview-column .trade-total.start-sit-total .start-sit-total-label {
    display: inline-block;
    white-space: nowrap;
  }

  .start-sit-preview-column .trade-total.start-sit-total .start-sit-proj-inline-row {
    white-space: nowrap;
  }
}

.start-sit-total-label {
  color: var(--color-text-secondary);
  margin-right: 0.35rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.start-sit-total-value {
  font-weight: 600;
}

.start-sit-preview-column .start-sit-matchup-meta {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  text-align: center;
  line-height: 1.25;
  margin-top: -0.2rem;
  letter-spacing: 0.01em;
}

.start-sit-matchup-meta .start-sit-matchup-opponent,
.start-sit-matchup-meta .start-sit-matchup-rank {
  font-weight: 500;
}

.start-sit-matchup-meta .start-sit-matchup-sep {
  display: inline-block;
  margin: 0 0.3rem;
  color: var(--color-text-tertiary);
}

.start-sit-column[data-position="QB"] .player-row {
  box-shadow: inset 0 0 15px rgba(255, 58, 117, 0.2);
}

.start-sit-column[data-position="RB"] .player-row {
  box-shadow: inset 0 0 15px rgba(0, 235, 199, 0.16);
}

.start-sit-column[data-position="WR"] .player-row {
  box-shadow: inset 0 0 15px rgba(88, 167, 255, 0.18);
}

.start-sit-column[data-position="TE"] .player-row {
  box-shadow: inset 0 0 15px rgba(180, 105, 255, 0.18);
}

.roster-column {
  width: 122px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border: 1px solid transparent;
  /* new base border */
  border-radius: 8px;
  /* match header */
}

/* ⬇︎ COMPARE SELECTION GLOW ⬇︎ */
.roster-column:has(.team-compare-checkbox.selected) .team-card {
  box-shadow: inset 0 0 4px #6300ff55, inset 0 0 38px #5300ff35;
  /* same highlight as header */
}

.team-header-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.05rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: #d0d1ee;
  text-align: center;
  padding: 0.32rem 0.2rem 0.32rem 0.3rem;
  cursor: pointer;
  /* · · Glass look to match filter groups · · */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.1));
  border: 1px solid var(--color-panel-border);
  border-radius: 8px;
  -webkit-backdrop-filter: blur(4px) saturate(110%);
  backdrop-filter: blur(4px) saturate(110%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  position: sticky;
  z-index: 1;
}

.team-header-item:hover {
  box-shadow: 0 0 5px #7300ff;
}

.team-header-item:has(.team-compare-checkbox.selected) {
  border: 1px solid #6300ffaa;
  box-shadow: inset 0 0 2px #6300ff55, inset 0 0 30px #5300ff35;
}

.team-record-champ {
  color: #c7b792c7;
  margin-left: 0rem;
  font-size: 0.85rem;
  filter: drop-shadow(0px 0px 4px rgba(208, 180, 114, 0.31)) drop-shadow(0px 0px 8px rgba(208, 180, 114, 0.61)) saturate(0.75);
  text-shadow: 0px -2px 1px #0006, 0px 0px 2px #0009;
}

.team-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

@supports (content-visibility: auto) {
  #rosterGrid.roster-cv-enabled .team-card {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--team-card-intrinsic-size, 1200px);
  }
}

.roster-section h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 0.2rem;
  color: var(--color-text-primary);
  text-align: center;
  padding: 0.0rem 0;
  position: relative;
  border: 1px solid var(--color-panel-border);
  border-radius: 5px;
  -webkit-backdrop-filter: saturate(114%) blur(1px);
  backdrop-filter: saturate(114%) blur(1px);
  overflow: hidden;
}

.roster-section h3::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-color: rgba(20, 28, 58, 0.15);
  background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 35%);
}

/* · · Postion Header Borders · · */
.qb-section h3 {
  color: var(--pos-qb);
  border: solid 1px #FF3A7599;
  box-shadow: inset 0 0 20px #FF3A7520;
}

.rb-section h3 {
  color: var(--pos-rb);
  border: solid 1px #00EBC799;
  box-shadow: inset 0 0 20px #00EBC716;
}

.wr-section h3 {
  color: var(--pos-wr);
  border: solid 1px #58A7FF99;
  box-shadow: inset 0 0 20px #58A7FF20;
}

.te-section h3 {
  color: var(--pos-te);
  border: solid 1px #B469FF99;
  box-shadow: inset 0 0 20px #B469FF20;
}

#rosterGrid.condensed-mode .qb-section h3 {
  border-color: #FF3A7569;
}

#rosterGrid.condensed-mode .rb-section h3 {
  border-color: #00EBC769;
}

#rosterGrid.condensed-mode .wr-section h3 {
  border-color: #58A7FF69;
}

#rosterGrid.condensed-mode .te-section h3 {
  border-color: #B469FF69;
}

.starters-section h3 {
  color: #69ffe1b2;
  font-weight: 500;
  border: solid 1px #69ffe152;
  box-shadow: inset 0 0 20px #69ffe120;
}

.bench-section h3 {
  color: #ff7be5c4;
  font-weight: 500;
  border: solid 1px #ff33ea52;
  box-shadow: inset 0 0 20px #f92c8520;
}

/* · · Card Box Shadows by POS · · */
.qb-section .player-row {
  box-shadow: inset 0 0 15px #FF3A7522;
  /* QB border */
}

.rb-section .player-row {
  box-shadow: inset 0 0 15px #00EBC715;
  /* RB border */
}

.wr-section .player-row {
  box-shadow: inset 0 0 15px #58A7FF20;
  /* WR border */
}

.te-section .player-row {
  box-shadow: inset 0 0 15px #B469FF20;
  /* TE border */
}

/* ⬇︎ PLAYER & PICK CARD STYLES ⬇︎ */
.player-row,
.pick-row {
  position: relative;
  background: var(--color-panel-bg);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--card-border-radius);
  padding: 0.1rem 0.1rem 0rem 0.15rem;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 0.03rem;
  transition: all 0.2s ease;
  backdrop-filter: blur(var(--roster-card-blur));
  -webkit-backdrop-filter: blur(var(--roster-card-blur));
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* clip the watermark to card bounds */
}

/* Team logo watermark: large, faded logo positioned behind player card content */
.player-row .roster-card-watermark {
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  width: 62px;
  height: 62px;
  object-fit: contain;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  filter: grayscale(100%);
  transition: opacity 0.2s ease;
}

/* Condensed view: smaller watermark to match compact card size */
.player-row.player-row-condensed .roster-card-watermark {
  width: 36px;
  height: 36px;
  right: -4px;
}

/* Per-team watermark opacity boosts for darker/less-visible logos (roster cards) */
.player-row .roster-card-watermark[alt="CAR"] {
  opacity: 0.09;
  filter: grayscale(100%);
}

/* NYJ watermark: shifted up, brighter to compensate for dark logo */
.player-row .roster-card-watermark[alt="NYJ"] {
  opacity: 0.14;
  filter: grayscale(100%) brightness(1.6);
  top: 37%;
}
.player-row.player-row-condensed .roster-card-watermark[alt="NYJ"] {
  top: 35%;
}

/* Condensed roster view trims padding/gaps without changing type scale */
#rosterGrid.condensed-mode {
  gap: 0px;
}

#rosterGrid.condensed-mode .roster-column {
  width: 104px;
  gap: 0.22rem;
}

#rosterGrid.condensed-mode .team-header-item {
  padding: 0.2rem 0.2rem;
  font-size: 0.6rem;
}

.player-row.player-row-condensed {
  padding: 0.1rem 0.12rem 0rem;
  gap: 0.06rem;
}

.player-row-condensed .player-main-line {
  gap: 0;
  align-items: normal;
  justify-content: space-between;
  min-height: auto;
  width: 100%;
}

.player-row-condensed .player-tag {
  font-size: 0.47rem;
  padding: 1px 2px;
  line-height: 0.47rem;
}

.player-row-condensed .player-pos-rank {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.53rem;
  line-height: 0.9;
  white-space: nowrap;
  flex: 0 1 auto;
  width: 23px;
  margin-right: 1px;
  filter: brightness(1) saturate(2.5);
}

.player-row-condensed .player-meta-line {
  display: none !important;
}

/* 
.player-row-condensed .player-injury-badge {
  display: none !important;
}
*/

.player-row-condensed .player-value-line {
  padding: 0.02rem 0.08rem 0rem;
  gap: 0.18rem;
  margin-top: 0px;
  font-size: 0.5rem;
}

.player-row-condensed .player-value-line .value {
  font-size: 0.52rem;
  filter: brightness(1.2);
}

.player-row-condensed .player-name {
  min-width: 0;
  font-size: 0.6rem;
  margin: 0 0.1rem;
  flex: 1 1 auto;
  filter: brightness(1.15) drop-shadow(0px 0px 0px #6380ff);
}

.player-row-condensed .condensed-team-tag {
  display: inline-flex;
  align-items: center;
  margin: 0;
  flex: 0 1 auto;
  justify-content: flex-end;
}

.player-row-condensed .condensed-team-tag .team-logo.glow {
  width: 14px;
  height: 14px;
}

.player-row-condensed .condensed-team-tag .team-tag {
  font-size: 0.55rem;
  padding: 0.02rem 0.2rem;
  line-height: 1;
}

#rosterGrid.condensed-mode .team-card {
  gap: 0.15rem;
}

#rosterGrid.condensed-mode .roster-section h3 {
  font-size: 0.6rem;
}

#rosterGrid.condensed-mode .pick-row {
  padding: 0.08rem 0.12rem;
  gap: 0.18rem;
}

#rosterGrid.condensed-mode .pick-label {
  font-size: 0.58rem;
}

#rosterGrid.condensed-mode .pick-ktc {
  font-size: 0.52rem;
}

#rosterGrid.condensed-mode .pick-ktc .value {
  font-size: 0.58rem;
}

#rosterGrid.condensed-mode .team-compare-checkbox {
  width: 0.8rem;
  height: 0.8rem;
}

.start-sit-column .player-row,
.start-sit-column .pick-row {
  gap: 0.001rem;
}

@media (min-width: 820px) {

  .player-row,
  .pick-row {
    --roster-card-blur: 0px;
    background: rgba(22, 24, 43, 0.35);
    box-shadow: 0 12px 28px rgba(7, 10, 25, 0.32);
    contain: paint;
  }
}

.is-trade-mode .player-row,
.is-trade-mode .pick-row {
  cursor: pointer;
}

.is-trade-mode .player-row:hover,
.is-trade-mode .pick-row:hover {
  border-color: var(--color-panel-border-glow);
  transform: translateY(-2px);
}

.player-selected {
  border-color: var(--color-accent-primary) !important;
  box-shadow: 0 0 var(--glow-strength) var(--color-accent-primary-glow);
}

.player-main-line {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.25rem;
}

/* TODO: Re-enable the injury badge styles at the start of the next season. */
/*
.player-injury-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  font-weight: 700;
  font-size: 0.63rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
*/

.player-name {
  font-weight: 400;
  font-size: 0.72rem;
  color: #d0d1ee;
  line-height: 1.2;
  white-space: nowrap !important;
}

.player-name-clickable {
  text-decoration: underline;
  text-decoration-color: #9094c152;
}

.player-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 3px;
  border-radius: 4px;
  color: var(--color-bg);
  line-height: 1;
}

.player-meta-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.01rem 0.1rem;
  gap: 0.0rem;
  font-size: 0.65rem;
  color: var(--color-text-secondary);
}

.start-sit-column .player-meta-line {
  padding: 0rem 0.1rem;
}

.team-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1;
}

.player-value-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.55rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: #1d223faa;
  border-radius: 6px;
  padding: 0.07rem 0.07rem 0rem;
  margin-top: -2px;
}

.player-value-line .value {
  font-weight: 300;
  font-size: 0.55rem;
  color: var(--color-text-primary);
  filter: brightness(1.45);
  font-family: 'google sans';
}

/* Lower the rank annotation on player cards' KTC value line */
.player-value-line .has-rank-annotation .stat-rank-annotation {
  transform: translateY(0.0rem);
}

.pick-row {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.pick-label {
  font-weight: 700;
  font-size: 0.75rem;
}

.pick-ktc {
  font-size: 0.7rem;
  color: var(--color-text-secondary);
}

.pick-ktc .value {
  font-weight: 700;
  color: var(--color-text-primary);
}

.team-compare-checkbox {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-text-tertiary);
  box-shadow: 0 0 7px #5300ff, inset 0 0 2px #7300ff;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease-in-out;
  justify-self: start;
}

.team-compare-checkbox.selected {
  border-color: var(--color-accent-primary);
  background-color: var(--color-accent-primary);
  box-shadow: 0 0 var(--glow-strength) var(--color-accent-primary-glow);
}

.team-compare-checkbox.selected::after {
  content: '✔';
  position: absolute;
  color: var(--color-bg);
  font-size: 0.7rem;
  font-weight: 900;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ⬇︎ TRADE PREVIEW ⬇︎ */
#tradeSimulator {
  position: fixed;
  bottom: .95rem;
  left: 0.85rem;
  right: 0.85rem;
  z-index: 20;
  display: none;
  max-width: 600px;
  margin: 0 auto;
}

.trade-container {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}

.trade-container.start-sit-container {
  gap: 0.24rem;
}

.trade-container.start-sit-container .trade-footnote {
  margin-top: 0.01rem;
}

.trade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.25rem;
  margin-bottom: 3px;
}

.trade-header h3 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #b0bcdb;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.trade-header-left {
  flex: 1 1 0;
}

.trade-header-center {
  text-align: center;
}

.trade-header-right {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.95rem;
}

.trade-header-left i {
  font-size: 0.9rem;
  line-height: 0.9rem;
  color: #b0bcdbde;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin: 0.5rem;
  margin-left: 1px;
}

.trade-header-left {
  margin-left: 2px;
}

/* · · ▾⃣ COLLAPSE Trade Container Button · · */
#collapseTradeButton {
  color: #8787Af;
  border-radius: 6px;
  padding: 0px 15px;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 4px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.1));
  box-shadow: 0 0 1px 0px #fff3, inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

#collapseTradeButton i {
  font-size: 14px;
  /* icon size stays fixed */
}

#collapseTradeButton {
  width: auto;
  height: 18px;
  line-height: 13px;
}

#collapseTradeButton:hover {
  background: #5300ff00;
  color: #8D94B1;
  -webkit-backdrop-filter: blur(1px) saturate(120%) brightness(120%);
  backdrop-filter: blur(1px) saturate(120%) brightness(120%);
  box-shadow: 0 0 1px 0px #fff3, inset 0 1px 1px rgba(255, 255, 255, 0.05), inset 0 0 13px #5300ff15, 0 0 4px 0px #5300ff30;
}

/* · · ↻ CLEAR Trade Button · · */
#clearTradeButton,
#closeTradeButton {
  display: flex;
  flex-direction: column;
  /* icon on top, label below */
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  /* no gap between icon & label */
  background: #1E1F3000;
  /* keep your current look */
  color: #bec7ff99;
  font-size: 1rem;
  /* base font size (affects icon if using font-size) */
  font-weight: 300;
  line-height: 1;
  /* prevents extra inline spacing */
  padding: 1px 4px;
  margin-top: 4px;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 6px;
  min-height: 0;
  border: 1px solid transparent;
}

#clearTradeButton i,
#closeTradeButton i {
  display: block;
  margin: 0;
  line-height: 1;
  font-size: 1rem;
  /* tweak to match compare button icon weight */
}

/* Label — pulled up to visually touch the icon */
#clearTradeButton .label,
#closeTradeButton .label {
  display: block;
  margin: -2px 0 0 0;
  /* pull label up; adjust -1 / -3 px if needed */
  padding: 0;
  font-size: 0.55rem;
  /* small label like your compare button */
  font-weight: 500;
  line-height: 1;
  color: inherit;
}

#closeTradeButton {
  margin-left: 0.35rem;
}

#comparePlayersButton:hover,
#clearTradeButton:hover,
#closeTradeButton:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-panel-border-glow);
}

#clearTradeButton:disabled {
  color: #8787Af60 !important;
  cursor: not-allowed;
  pointer-events: none;
}

#clearTradeButton:not(:disabled) {
  color: var(--color-text-secondary);
}

/* · · ⌃ SHOW TRADE CONTAINER BUTTON · · */
#showTradeButton {
  background: #1E1F30da;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  padding: 2px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-panel-border);
  cursor: pointer;
  transition: all 0.2s;
  margin: 0.15rem auto 0;
  display: none;
  width: fit-content;
  text-align: center;
}

#showTradeButton i {
  font-size: 0.9rem;
  line-height: 1;
}

#showTradeButton:hover {
  color: var(--color-text-primary);
  border-color: var(--color-panel-border-glow);
}

/* · · ⌃ Padding [Show Trade Container] · · */
#tradeSimulator.collapsed #showTradeButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-size: 1em;
  box-shadow: inset 0 0 13px var(--color-accent-primary), 0 0 9px var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  padding: 11px 19px;
  background: #1E1F30e9;
  width: fit-content;
  align-self: center;
}

/* Keep the Start/Sit label and elevator icon tightly grouped */
#showTradeButton .show-button-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* small single-space gap */
  line-height: 1;
}

#showTradeButton .show-button-label i.analyzer-icon {
  font-size: 1rem;
  vertical-align: middle;
  margin-bottom: 3.5px;
}

#tradeSimulator.collapsed #showTradeButton .start-sit-week:empty {
  display: none;
  margin: 0;
}

#tradeSimulator.collapsed .trade-container {
  display: none;
}

/* · · Trade Body, Divider, & Column · · */
.trade-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.25rem;
  align-items: stretch;
}

.trade-divider {
  width: 2px;
  height: 80%;
  background-image: linear-gradient(to bottom, transparent, var(--color-accent-secondary), transparent);
  opacity: 0.7;
}

.trade-team-column {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* · · TEAM NAMES in Trade Preview · · */
.trade-team-column h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.1rem;
  text-align: center;
  color: var(--color-text-secondary);
}

.trade-assets {
  min-height: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-content: flex-start;
  flex-grow: 1;
  background: #1E1F30da;
  border-radius: 10px;
  padding: 0.25rem;
}

.trade-assets {
  margin-right: 10px !important;
  margin-left: 10px !important;
}

/* · · Trade-Chip Style [.trade-asset-chip] · · */
.trade-asset-chip {
  position: relative;
  background: rgba(255, 255, 255, 0.005);
  backdrop-filter: blur(3px) saturate(170%);
  border: 0.0625rem solid rgba(250, 250, 250, 0.06);
  border-radius: 6px;
  padding: 1.25rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.05);
}

.trade-asset-chip::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 6px;
  backdrop-filter: blur(3px);
  box-shadow: inset 7.5px 10px 0px -11px rgba(255, 255, 255, .25),
    inset 0px 10px 0px -8px rgba(255, 255, 255, .01);
  opacity: 0.4;
  z-index: -1;
  filter: blur(2px) drop-shadow(10px 4px 6px black) brightness(115%);
  pointer-events: none;
}

.trade-asset-chip {
  font-size: 0.75rem;
  padding: 2px 6px;
  display: flex;
  gap: 4px;
  align-items: center;
  text-align: center;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.trade-asset-chip .ktc {
  font-weight: 700;
  color: var(--color-text-primary);
}

.trade-total {
  margin-top: 0.25rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.25rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.trade-total.winning {
  box-shadow: 0 0 12px var(--color-accent-trade-win);
  color: var(--color-accent-trade-win);
}

.trade-total.losing {
  box-shadow: 0 0 12px var(--color-accent-trade-lose);
  color: var(--color-accent-trade-lose);
}

.trade-total.even {
  color: var(--color-accent-secondary);
}

.trade-total {
  margin-right: 10px !important;
  margin-left: 10px !important;
}

/* · · Trade Preview footnote · · */
.trade-footnote {
  text-align: center;
  font-size: 0.75em;
  color: #A0A6D0;
  font-weight: 300;
  margin-top: 0.15rem;
  padding-bottom: 0.05rem;
}

/* · · Only the Trade Preview popup glass · · */
.trade-container.glass-panel {
  background-color: rgba(13, 14, 35, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(120%) brightness(115%);
  backdrop-filter: blur(18px) saturate(120%) brightness(115%);
  border-color: rgba(128, 138, 189, 0.26);
}

/* ⬇︎ OWNERSHIP (PLAYER LIST) VIEW ⬇︎ */
#playerListView {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

#playerSearch {
  background: var(--color-panel-bg);
  border: 1px solid var(--color-panel-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-text-primary);
  padding: 0.50rem 0.75rem;
  border-radius: var(--panel-border-radius);
  font-size: 1rem;
  width: 100%;
  margin: 0.5rem auto;
  display: block;
  transition: all 0.2s ease;
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
}

#leagueSelect:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 8px var(--color-accent-primary-glow);
}

#playerSearch::placeholder {
  color: var(--color-text-secondary);
  font-weight: 200;
}

.player-list-section {
  border-radius: 6px;
  overflow-y: auto;
  flex: 1;
  padding: 0rem 1rem;
}

.pl-player-row {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.55rem;
  font-size: 0.9rem;
  margin-top: 2px;
}

/* · · ODD = inset · · */
.player-list-section .pl-player-row:nth-child(odd) {
  position: relative;
  background-color: rgba(100, 100, 120, 0.03);
  backdrop-filter: blur(2px) saturate(1.30) brightness(1.46);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.22) 0px 10px 26px 0px;
}

.player-list-section .pl-player-row:nth-child(odd)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.06;
  background-color: rgba(13, 14, 35, 0.03);
  background: repeating-linear-gradient(20deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 4px);
}

/* · · EVEN · · */
.player-list-section .pl-player-row:nth-child(even) {
  position: relative;
  overflow: hidden;
  background-color: rgba(13, 14, 35, 0.03);
  backdrop-filter: blur(2px) saturate(1.25) brightness(1.46);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.59) 0px 10px 60px 0px;
}

.player-list-section .pl-player-row:nth-child(even)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-color: rgba(13, 14, 35, 0.03);
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 5px 5px;
}

.pl-player-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.pl-player-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pl-player-details {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-list-tag {
  min-width: 24px;
  /* EDITED */
  height: 22px;
  line-height: 22px;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  border-radius: 5px;
  color: var(--color-bg);
  flex-shrink: 0;
  margin-right: 0.3rem;
  /* EDITED */
}

/* Ownership page: position tags styled like game logs modal */
body[data-page="ownership"] .pl-list-tag.ownership-pos-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: auto;
  padding: 4px 4px;
  line-height: 1;
  font-size: 0.6rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.005);
  backdrop-filter: blur(1px) saturate(180%);
  border: 1px solid #CCF3;
  border-radius: 0.5rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary);
}

@media (min-width: 820px) {
  /* Ownership desktop position-tag sizing:
     adjusts only ownership list tags on desktop to the requested footprint,
     leaving mobile and non-ownership pages unchanged. */
  body[data-page="ownership"] .pl-list-tag.ownership-pos-tag {
    min-width: 32px;
    padding: 6px 3px;
    font-size: 0.7rem;
  }
}

body[data-page="ownership"] .pl-list-tag.ownership-pos-tag::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 0.5rem;
  backdrop-filter: blur(1px);
  box-shadow: inset 11px 8px 0px -10px rgba(255, 255, 255, .1),
    inset 0px 8px 0px -5px rgba(255, 255, 255, .1);
  opacity: 0.34;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
  pointer-events: none;
}

/* Mobile-specific radius for ownership tags */
@media (max-width: 640px) {
  body[data-page="ownership"] .pl-list-tag.ownership-pos-tag {
    border-radius: 0.4rem;
    min-width: 25px;
    width: 9px !important;
    height: 19px !important;
  }

  body[data-page="ownership"] .pl-list-tag.ownership-pos-tag::after {
    border-radius: 10px;
  }
}

body[data-page="ownership"] .ownership-pos-tag.QB {
  color: #FF3A75c0;
  /* QB color */
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.05), inset 0 0 10px #FF3A7513;
}

body[data-page="ownership"] .ownership-pos-tag.RB {
  color: #00EBC7c0;
  /* RB color */
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.05), inset 0 0 6px #00EBC715;
}

body[data-page="ownership"] .ownership-pos-tag.WR {
  color: #58A7FFca;
  /* WR color */
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.05), inset 0 0 10px #58A7FF25;
}

body[data-page="ownership"] .ownership-pos-tag.TE {
  color: #B469FFca;
  /* TE color */
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.05), inset 0 0 10px #B469FF26;
}

.pl-list-tag-spacer {
  width: 24px;
  /* EDITED */
  height: 1px;
  flex-shrink: 0;
  margin-right: 0.3rem;
  /* EDITED */
}

.pl-right-meta {
  display: grid;
  grid-template-columns: 35px 45px 1fr;
  column-gap: 1rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  font-weight: 600;
  flex-shrink: 0;
  width: 170px;
  /* EDITED */
  text-align: right;
}

.pl-col-count,
.pl-col-pct {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* · · "LEAGUES" text in the ownership page header · · */
.pl-col-lgs {
  text-align: left;
  white-space: normal;
  font-size: 0.65rem;
  /* EDITED */
  font-weight: 500;
  color: #cdd1ee;
}

/* · · ownership page header · · */
.pl-list-header {
  background: #1d1f3577 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 700;
  font-size: 0.7rem;
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 2px 1px 5px 1px;
  padding: 0.5rem 0.1rem !important;
}

.pl-list-header::after {
  background: #1d1f35aa !important;
  border-radius: 4px;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  position: sticky;
  top: 0;
  z-index: 4;
}

/* · · "PLAYERS & INFO" text in the ownership page header · · */
.pl-list-header .pl-player-name {
  font-size: 0.75rem;
  color: #cdd1ee;
}

.pl-list-header .pl-player-info {
  justify-content: center;
  /* center header text vertically */
}

/* · · "#" and "%" Headers text in ownership page · · */
.pl-list-header .pl-right-meta {
  font-size: 0.85rem;
  color: #cdd1ee;
}

.pl-list-header .pl-col-lgs {
  font-size: 0.65rem;
  color: #cdd1ee;
}

.pl-list-header .pl-player-details {
  display: none;
}

.pl-count-high,
.pl-pct-high {
  color: var(--color-accent-trade-win);
}

.pl-count-mid,
.pl-pct-mid {
  color: var(--color-accent-secondary);
}

.pl-count-low,
.pl-pct-low {
  color: var(--color-text-secondary);
}

/* · · Responsive Header Layout · · */
@media (min-width: 820px) {
  .app-header {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  .header-row {
    width: auto;
    flex-grow: 1;
    justify-content: center;
  }

  #primary-header-row {
    flex-grow: 0;
    gap: 0.5rem;
  }

  .nav-buttons-container {
    flex-grow: 0;
  }

  .nav-button {
    width: auto;
    min-width: 60px;
  }

  #secondary-header-row {
    flex-grow: 1;
    justify-content: center;
    gap: 0.75rem;
  }

  #secondary-header-row .username-area,
  #secondary-header-row .custom-select-wrapper {
    max-width: 200px;
  }

  #filters-row {
    flex-grow: 1;
    justify-content: flex-end;
  }
}

/* === Home page (welcome) — scoped header simplification === */
/* Wrapper for branding and header to control layout */
.welcome-header-group {
  display: contents;
  /* Unwrap on mobile so sticky header works relative to body */
}

/* Mobile Sticky Header Fix */
body[data-page="welcome"] #header-container {
  padding: 0.1rem 0rem 0.1rem 0rem;
  position: sticky;
  /* Ensure sticky on mobile */
  top: 0;
  z-index: 1000;
}

body[data-page="welcome"] .app-header.glass-panel {
  -webkit-backdrop-filter: blur(0px) saturate(120%) brightness(120%);
  backdrop-filter: blur(1px) saturate(112%) brightness(110%);
}

body[data-page="welcome"] .app-header {
  display: flex !important;
  flex-direction: column;
  /* Stack title and controls */
  align-items: center;
  justify-content: center;
  /* center header on desktop */
  padding: 0.3rem 0.15rem;
  gap: 0.2rem;
}

/* New Heading Style */
.welcome-header-title {
  font-size: 0.6rem;
  color: var(--color-text-secondary);
  margin: 0;
  padding: 0 0.5rem;
  text-align: center;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* New Footer Style (Mobile Default) */
.welcome-header-footer {
  font-size: 0.55rem;
  color: var(--color-text-secondary);
  opacity: 0.8;
  margin: 0.2rem 0 0 0;
  text-align: center;
  line-height: 1.2;
  font-style: italic;
}

/* New Subtitle Style (Mobile Default) */
.welcome-subtitle-row {
  display: flex;
  justify-content: center;
  padding: 0.2rem 0;
  width: 100%;
  margin-bottom: -5px !important;
  margin-top: -3px !important;
}

.welcome-subtitle-row h3 {
  font-size: 1.1rem;
  color: #ddd7ff;
  /* Dimmer, soft purple-white */
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  text-align: center;
  /* Nice glow effect */
  text-shadow: 0 0 12px #766dff69, 0 0 10px #4e09ff87;
}

/* tighter grid: menu - username - enter */
/* Desktop: center the header group and keep controls tightly grouped */
@media (min-width: 820px) {

  /* Side-by-side layout for desktop */
  .welcome-header-group {
    display: flex;
    /* Restore flex for desktop */
    flex-direction: row;
    align-items: stretch;
    /* Ensure equal height */
    justify-content: space-between;
    /* Spread to fill width */
    gap: 1em;
    /* Match grid gap (1em) for perfect alignment */
    width: 100%;
    max-width: none;
    /* Allow full width to match grid */
    margin: 0 auto;
  }

  /* Adjust Branding Panel on Desktop */
  body[data-page="welcome"] .welcome-branding-panel {
    flex: 1;
    /* Take up equal space */
    width: auto;
    margin: 0;
    padding: 0 1rem;
    /* Reduced padding */
    max-width: none;
    /* Remove max-width restriction */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Scale down branding content */
  body[data-page="welcome"] .welcome-logo img {
    height: 5rem;
    width: 5.6rem;
  }

  body[data-page="welcome"] .welcome-branding-panel h2 {
    font-size: 3.2rem;
  }

  /* Adjust Header Container on Desktop */
  body[data-page="welcome"] #header-container {
    flex: 1;
    /* Take up equal space */
    width: auto;
    position: static;
    /* Unfreeze on desktop */
    padding: 0;
    background: none;
    max-width: none;
    /* Remove max-width restriction */
    display: flex;
    align-items: center;
    /* Center content vertically */
  }

  body[data-page="welcome"] .app-header {
    width: 100%;
    /* Fill the container */
    margin: 0;
    height: 100%;
    /* Match container height */
    padding: 0.3rem 0.5rem;
    /* Reduced vertical padding further */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1.5em;
    /* Match branding panel radius */
    gap: 0.2rem;
    /* Tighter gap */
  }

  /* Scale up header content */
  body[data-page="welcome"] .menu-toggle {
    height: 48px;
    font-size: 1.2rem;
  }

  body[data-page="welcome"] .enter-button {
    height: 44px;
  }

  body[data-page="welcome"] #usernameInput {
    font-size: 1.1rem;
    padding: 0.5rem 0.8rem;
    width: 100%;
  }

  body[data-page="welcome"] .username-area {
    flex-grow: 1;
    max-width: none;
    width: auto;
  }

  body[data-page="welcome"] .welcome-header-title {
    font-size: 0.7rem;
    margin-bottom: 0;
    font-weight: 300;
    /* Lighter weight */
  }

  body[data-page="welcome"] .welcome-header-footer {
    font-size: 0.55rem;
    margin-top: 0;
  }

  /* Subtitle Desktop Adjustment */
  .welcome-subtitle-row {
    padding: 0.1rem 0 0.4rem 0;
    margin-bottom: -9px !important;
    margin-top: 1px !important;
  }

  .welcome-subtitle-row h3 {
    font-size: 2.35rem;
    font-weight: 200;
    /* Original gradient slightly brightened */
    background: linear-gradient(131deg, #caeaff 0%, #ffcbd6 100%);
    -webkit-background-clip: text;
    /* background-clip: text; */
    color: transparent;
    /* Matching glow */
    filter: drop-shadow(0 0 8px rgba(112, 26, 255, 0.4));
  }

  body[data-page="welcome"] #primary-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    /* keep the group centered */
    gap: 1.2rem;
    /* small gap between controls */
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Reduce gaps on desktop for welcome page */
  body[data-page="welcome"] #welcome-screen {
    gap: 0.5rem;
  }

  body[data-page="welcome"] .fc-grid-metrics {
    gap: 0.75rem;
  }

  body[data-page="welcome"] .fc-grid-charts {
    gap: 0.75rem;
  }
}

/* For narrow viewports, keep a compact grid to allow wrapping */
@media (max-width: 819px) {
  body[data-page="welcome"] #primary-header-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* make sure only for home: hide any leftover contextual controls */
body[data-page="welcome"] #contextual-controls {
  display: none !important;
}

/* Username field sizing for home */
body[data-page="welcome"] .username-area {
  min-width: 0;
  max-width: 520px;
  width: 100%;
}

body[data-page="welcome"] #usernameInput {
  font-size: 0.96rem;
  padding: 0.36rem 0.65rem;
}

/* Enter button styling — styled to match the other nav buttons with a circular icon inside */
body[data-page="welcome"] .home-enter-slot {
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-page="welcome"] .enter-button {
  display: inline-flex;
  flex-direction: row;
  /* label left of icon */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* larger gap so label and circle don't butt up against each other */
  padding: 0 9px;
  /* more horizontal breathing room */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgb(66 45 208 / 10%));
  color: var(--color-text-secondary);
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: transform 110ms ease, box-shadow 110ms ease, background 110ms ease;
  align-self: center;
  height: 40px;
  /* uniform control height */
  min-width: 78px;
  /* ensure the control doesn't shrink too small */
  white-space: nowrap;
  /* prevent enter label wrapping */
}

body[data-page="welcome"] .enter-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
  background: rgba(13, 14, 35, 0.32);
}

/* Circular icon inside the button — keep perfectly round */
body[data-page="welcome"] .enter-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(125deg, rgba(118, 109, 255, .14), rgba(118, 109, 255, 0.07));
  font-size: 0.88rem;
  box-shadow: 0 3px 6px rgba(91, 76, 255, 0.08);
}

/* allow the Font Awesome rotation class to apply; keep inline-block for sizing */
body[data-page="welcome"] .enter-circle i {
  display: inline-block;
  line-height: 1;
  text-shadow: 2px 1px 1px #5800ff;
  font-size: 0.85rem !important;
}

body[data-page="welcome"] .enter-label {
  font-size: 0.95rem;
  /* larger label font */
  color: #cfc7ffdb;
  text-transform: none;
  margin: 0;
  line-height: 1;
  font-weight: 400;
  order: 0;
  /* ensure label is left of icon */
}

body[data-page="welcome"] .enter-circle {
  order: 1;
}

/* Home menu dropdown */
body[data-page="welcome"] .home-menu-slot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  margin-right: 4px;
}

body[data-page="welcome"] .menu-toggle {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgb(66 45 208 / 10%));
  border: 1px solid rgba(128, 138, 189, 0.22);
  color: var(--color-text-secondary);
  padding: 0 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 44px;
  /* match control height */
}

body[data-page="welcome"] .menu-toggle:hover {
  color: var(--color-text-primary);
  border-color: rgba(128, 138, 189, 0.24);
}

body[data-page="welcome"] .home-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 144px;
  /* Increased slightly */
  width: max-content;
  /* Ensure it expands to fit text */
  background: rgb(47 46 72 / 94%);
  border: 1px solid rgba(128, 138, 189, 0.14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  padding: 4px 3px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 1200;
  max-height: 60vh;
  overflow: auto;
}

body[data-page="welcome"] .home-menu.hidden {
  display: none !important;
}

body[data-page="welcome"] .home-menu-item {
  background: #85a2cf1f;
  color: var(--color-text-secondary);
  border: none;
  text-align: left;
  padding: 4px 12px;
  /* Increased padding for better touch targets */
  display: flex;
  gap: 9px;
  /* Increased gap */
  align-items: center;
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
  /* Prevent text wrapping */
  font-size: 0.95rem;
  /* Ensure readable font size */
  width: 100%;
}

body[data-page="welcome"] .home-menu-item:hover {
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text-primary);
}

body[data-page="welcome"] .home-menu-item i {
  width: 16px;
  text-align: center;
  color: #99a3e5;
}

/* Fix for tiny hamburger icon */
body[data-page="welcome"] .menu-toggle i {
  font-size: 1.45rem;
}

/* Desktop ownership row tuning (desktop only) */
@media (min-width: 820px) {
  body[data-page="ownership"] .player-list-section .pl-player-row {
    padding: 0.22rem 0.9rem;
    gap: 1.2rem;
    align-items: center;
  }

  body[data-page="ownership"] .player-list-section .pl-player-row .pl-player-name {
    font-size: 0.96rem;
    gap: 1.25rem;
    line-height: 1.16;
  }

  body[data-page="ownership"] .player-list-section .pl-player-row .team-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 6px;
    min-height: 18px;
    max-width: 32px;
  }

  body[data-page="ownership"] .player-list-section .pl-player-row .pl-player-details {
    font-size: 0.83rem;
    letter-spacing: 0.012em;
    margin-top: 2px;
    word-spacing: 0.26rem;
    /* open space around the dot separator */
  }

  body[data-page="ownership"] .player-list-section .pl-player-row .pl-player-details .pl-details-sep {
    margin: 0 0.45rem;
    /* extra space around • on desktop only */
  }

  body[data-page="ownership"] .player-list-section .pl-player-info {
    flex: 0 1 52%;
  }

  body[data-page="ownership"] .player-list-section .pl-right-meta {
    width: 235px;
    column-gap: 1.4rem;
    font-size: 0.86rem;
    grid-template-columns: 34px 52px 1fr;
    text-align: left;
  }

  body[data-page="ownership"] .player-list-section .pl-player-row .pl-col-count,
  body[data-page="ownership"] .player-list-section .pl-player-row .pl-col-pct {
    font-weight: 700;
    text-align: center;
  }

  body[data-page="ownership"] .player-list-section .pl-player-row .pl-col-lgs {
    font-size: 0.72rem;
    line-height: 1.18;
  }

  body[data-page="ownership"] .pl-list-header .pl-right-meta {
    width: 235px;
    grid-template-columns: 34px 52px 1fr;
    column-gap: 1.4rem;
  }

  body[data-page="ownership"] .pl-list-header .pl-player-info {
    flex: 0 1 52%;
  }
}

/* Mobile tweaks: keep button compact and inline */
@media (max-width: 520px) {
  body[data-page="welcome"] #primary-header-row {
    grid-template-columns: auto 1fr auto;
    gap: 0.4rem;
    padding-left: 8px;
    padding-right: 8px;
  }

  body[data-page="welcome"] .enter-button {
    min-width: 104px;
    height: 38px;
    padding: 0.2rem 0.85rem;
    gap: 0.6rem;
  }

  body[data-page="welcome"] .enter-label {
    font-size: 0.95rem;
  }

  body[data-page="welcome"] .enter-circle {
    width: 25px !important;
    height: 24px;
    font-size: 0.92rem;
  }

  body[data-page="welcome"] #usernameInput {
    font-size: 0.94rem;
    padding: 0.34rem 0.5rem;
  }
}

@media (max-width: 540px) {

  /* ⬇︎ 📱 OWNERSHIP PAGE: MOBILE CORRECTIONS (v4 — rows vs header separated) 📱 ⬇︎ */
  /* Container padding so content breathes */
  #playerListView {
    padding: 0 6px;
  }

  /* 📱 BODY ROWS ONLY 📱 */
  .player-list-section .pl-player-row {
    padding: 4px 4px !important;
    gap: 5px !important;
    font-size: 0.72rem !important;
    /* FIX --- This was set to flex-start, causing the misalignment. Changed to center */
    align-items: center !important;
  }

  .player-list-section .pl-player-row .pl-player-name {
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    gap: 6px !important;
  }

  /* 📱 Inline bits inside the name line (e.g., Age) 📱 */
  .player-list-section .pl-player-row .pl-player-name span,
  .player-list-section .pl-player-row .pl-player-name .player-age {
    font-size: 0.7rem !important;
  }

  /* 📱 Team badge in rows 📱 */
  .player-list-section .pl-player-row .team-tag {
    font-size: 0.6rem !important;
    padding: 1px 4px !important;
  }

  /* 📱 Secondary details line (Age, RY) 📱 */
  .player-list-section .pl-player-row .pl-player-details {
    font-size: 0.60rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  .player-list-section .pl-player-row .pl-player-details .pl-details-sep {
    margin: 0 0.25rem;
    /* extra space around • on mobile */
  }

  /* 📱 Right meta columns (count | % | leagues) for rows 📱 */
  .player-list-section .pl-player-row .pl-right-meta {
    width: 160px !important;
    grid-template-columns: 22px 34px 1fr !important;
    column-gap: 6px !important;
    font-size: 0.68rem !important;
  }

  .player-list-section .pl-player-row .pl-col-count,
  .player-list-section .pl-player-row .pl-col-pct {
    text-align: center !important;
  }

  .player-list-section .pl-player-row .pl-col-lgs {
    font-size: 0.58rem !important;
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
  }

  /* 📱 Position tag chip in rows 📱 */
  .player-list-section .pl-player-row .pl-list-tag {
    min-width: 22px !important;
    height: 18px !important;
    line-height: 18px !important;
    font-size: 0.68rem !important;
    margin-right: 4px !important;
  }

  body[data-page="ownership"] .player-list-section .pl-player-row .pl-list-tag.ownership-pos-tag {
    min-width: 29px !important;
    height: auto !important;
    padding: 4px 6px !important;
    line-height: 0.9rem !important;
    font-size: 0.68rem !important;
    border-radius: 6px !important;
    max-width: 29px;
  }

  .player-list-section .pl-player-row .pl-list-tag-spacer {
    width: 26px !important;
    margin-right: 6px !important;
  }

  /* 📱 Guard “Age:” and similar tiny bits inside rows 📱 */
  .player-list-section .pl-player-row .player-meta-line,
  .player-list-section .pl-player-row .player-meta-line .player-age,
  .player-list-section .pl-player-row .player-meta-line span {
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
  }

  /* 📱 HEADER ONLY 📱 */
  .player-list-section .pl-list-header {
    font-size: 0.68rem !important;
    letter-spacing: .6px !important;
  }

  .player-list-section .pl-list-header .pl-player-name {
    font-size: 0.68rem !important;
  }

  .player-list-section .pl-list-header .pl-right-meta {
    width: 160px !important;
    grid-template-columns: 22px 34px 1fr !important;
    column-gap: 6px !important;
    font-size: 0.68rem !important;
  }

  .player-list-section .pl-list-header .pl-col-lgs {
    font-size: 0.68rem !important;
  }

  .player-list-section .pl-list-header .pl-player-info {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 0px !important;
  }
}

/* ⬇︎ ROSTER PLAYER CARD KEY 1 (READY) ⬇︎ */
#rosterPlayerCardKey.legend-card {
  width: min(340px, 92%);
  max-width: 340px;
  margin: 0.9rem auto 0.4rem auto;
  /* small gap above footnote */
  padding: 0.8rem 0.85rem;
  border-radius: var(--card-border-radius, 12px);
  box-sizing: border-box;
  flex: 0 0 auto;
  /* prevent flex parents from stretching */
  align-self: center;
}

@media (min-width: 1440px) {
  #rosterPlayerCardKey.legend-card {
    width: 320px;
    max-width: 320px;
  }
}

/* · · Top row alignment · · */
#rosterPlayerCardKey .legend-main {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

#rosterPlayerCardKey .legend-name {
  font-weight: 700;
  color: var(--color-text-primary);
}

/* · · Position tag pill · · */
#rosterPlayerCardKey .player-tag.legend-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.14rem 0.55rem;
  background: linear-gradient(to bottom, rgba(13, 14, 35, 0.15), rgba(8, 8, 25, 0.32));
  border-radius: 8px;
  -webkit-backdrop-filter: blur(4px) saturate(110%) brightness(120%);
  backdrop-filter: blur(4px) saturate(110%) brightness(120%);
  box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.13), rgba(0, 0, 0, 0.26) 0px 7px 26px 1px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: .25px;
  line-height: 1.05;
}

/* · · Meta row: keep things aligned; push the last separator so team sits right · · */
#rosterPlayerCardKey .legend-meta {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--color-text-secondary);
}

#rosterPlayerCardKey .legend-pos-rank {
  color: var(--pos-qb, #FF3A75cc);
}

/* typical pos-rank tint */
#rosterPlayerCardKey .legend-age {
  color: var(--color-accent-primary, #58E6D9);
}

#rosterPlayerCardKey .legend-meta .separator:last-of-type {
  margin-left: auto;
  margin-right: 0.5rem;
}

#rosterPlayerCardKey .legend-team {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.12rem 0.55rem;
  background: linear-gradient(to bottom, rgba(13, 14, 35, 0.15), rgba(8, 8, 25, 0.32));
  border-radius: 8px;
  -webkit-backdrop-filter: blur(4px) saturate(110%) brightness(120%);
  backdrop-filter: blur(4px) saturate(110%) brightness(120%);
  box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.26) 0px 10px 26px 1px;
  color: var(--color-text-primary);
  font-weight: 800;
  letter-spacing: .25px;
}

/* · · Bottom row: align to edges, no chips on values · · */
#rosterPlayerCardKey .legend-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--color-panel-border);
  padding-top: 0.35rem;
}

#rosterPlayerCardKey .kv-left,
#rosterPlayerCardKey .kv-right {
  color: var(--color-text-secondary);
  font-weight: 700;
  letter-spacing: .2px;
}

#rosterPlayerCardKey .legend-ktc {
  color: #00EBC7;
  font-weight: 800;
}

#rosterPlayerCardKey .legend-adp {
  color: #58A7FF;
  font-weight: 800;
}

#rosterPlayerCardKey .legend-ppg {
  color: #58A7FF;
  font-weight: 800;
}

/* · · External footnote below the card · · */
#rosterCardFootnote.legend-footnote {
  margin: 0.25rem auto 0;
  text-align: center;
  font-size: 0.74rem;
  color: var(--color-text-tertiary);
  max-width: 340px;
}

@media (min-width: 1440px) {
  #rosterCardFootnote.legend-footnote {
    max-width: 320px;
  }
}

/* · · Legend vertical spacing + centering tweaks · · */
#rosterPlayerCardKey.legend-card {
  /* spread out vertically by a lot */
  padding: 1.25rem 0.95rem;
}

#rosterPlayerCardKey .legend-main {
  margin-bottom: 0.9rem;
  /* spacing between name row and meta row */
}

#rosterPlayerCardKey .legend-meta {
  margin-bottom: 0.9rem;
  /* spacing between meta row and bottom row */
}

/* · · KTC/ADP row vertically centered with its background · · */
#rosterPlayerCardKey .legend-bottom {
  align-items: center !important;
  /* center the text vertically */
  min-height: 2.4rem;
  /* give the row a stable height */
}

#rosterPlayerCardKey .kv-left,
#rosterPlayerCardKey .kv-right {
  gap: 0.45rem;
  /* comfortable label/value spacing */
}

#rosterPlayerCardKey .kv-left .value,
#rosterPlayerCardKey .kv-right .value {
  line-height: 1.15;
  /* improve vertical alignment appearance */
}

/* · · Legend bottom-row background: smaller vertical height without changing text spacing · · */
#rosterPlayerCardKey .legend-bottom {
  position: relative;
  background: transparent !important;
  /* ensure no inherited row bg */
}

#rosterPlayerCardKey .legend-bottom::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  height: var(--legend-bottom-bg-height, 1.25rem);
  /* <-- adjust this to change the bg height */
  z-index: 0;
  pointer-events: none;
}

#rosterPlayerCardKey .legend-bottom>* {
  position: relative;
  z-index: 1;
  /* keep text above the bg overlay */
}

/* ⬇︎ BOTTOM BAR REWORK: FULL-WIDTH INNER CONTAINER, NO PSEUDO, NO EXTRA LINE ABOVE ⬇︎ */
#rosterPlayerCardKey .legend-bottom {
  position: relative;
  border-top: none !important;
  /* remove the line above */
  padding-top: 0 !important;
  margin-top: 0.2rem;
  /* small spacing from meta row (text spacing unchanged) */
}

#rosterPlayerCardKey .legend-bottom::before {
  content: none !important;
  /* kill previous overlay if present */
}

#rosterPlayerCardKey .legend-bottom-bg {
  display: flex;
  align-items: center;
  /* vertically middle-align KTC/ADP with the bar */
  justify-content: space-between;
  width: 110%;
  padding: 0.55rem 0.75rem;
  /* controls bar height; adjust first value for taller/shorter */
  background: linear-gradient(to bottom, rgba(13, 14, 35, 0.15), rgba(8, 8, 25, 0.32));
  border-radius: 8px;
  -webkit-backdrop-filter: blur(4px) saturate(110%) brightness(120%);
  backdrop-filter: blur(4px) saturate(110%) brightness(120%);
  box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.22) 0px 10px 26px 0px;
  color: var(--color-text-primary);
  font-weight: 800;
  letter-spacing: .25px;
  box-sizing: border-box;
}

#rosterPlayerCardKey .legend-bottom-bg .kv-left,
#rosterPlayerCardKey .legend-bottom-bg .kv-right {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#rosterPlayerCardKey .legend-bottom-bg .value {
  line-height: 1.15;
}

/* · · CUSTOM RULE: Prevent Wrapping on Ownership Page · · */
#playerListView .pl-player-info,
#playerListView .pl-player-details {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* · · STARFIELD · · */
html {
  height: 100%;
  overflow-y: auto !important;
}

/* · · FIXED: Removed transparent background from body to fix Safari UI bar color · · */
body {
  min-height: 100%;
}

#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Sphere on TOP-LEFT (on top layer) */
    radial-gradient(660px 660px at 20% -20%,
      rgba(52, 11, 113, 0.05) 1%, rgba(150, 0, 120, 0.05) 42%, rgba(115, 48, 250, 0.10) 62%, rgba(187, 0, 148, 0.05) 82%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(460px 460px at 90% 10%,
      rgba(52, 11, 113, 0.35) 1%, rgba(20, 48, 50, 0.25) 32%, rgba(50, 0, 20, 0.10) 62%, rgba(87, 0, 48, 0.10) 82%, rgba(255, 255, 255, 0) 100%),
    /* Base starfield backdrop (below) */
    radial-gradient(ellipse at 50% 100%, #1B2735 0%, #090A0F 100%);
  background-repeat: no-repeat;
}

/* · · Layers · · */
#stars,
#stars1,
#stars2,
#stars3 {
  position: absolute;
  left: 0;
  top: 0;
}

/* Reduce GPU/memory pressure while pinch-zoomed on mobile WebKit (prevents "A problem repeatedly occurred"). */
html.user-zoomed #stars,
html.user-zoomed #stars1,
html.user-zoomed #stars2,
html.user-zoomed #stars3,
html.user-zoomed #noise-overlay {
  display: none !important;
}

html.user-zoomed * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#stars1 {
  width: 1px;
  height: 1px;
  background: transparent;
  border-radius: 20px;
  box-shadow: 144px 251px #FF4089, 971px 1662px #F08CD1, 103px 690px #008CD1, 1261px 1837px #008CD1, 1584px 771px #FF00FF, 339px 1867px #008CD1, 217px 1383px #6300FF, 1727px 1329px #7300FF, 95px 1889px #008CD1, 1556px 1907px #9900FF, 355px 880px #FF4089, 1397px 1739px #ee22ff, 602px 983px #FFF, 893px 422px #FFF, 265px 520px #FFF, 1162px 1181px #55FFAA, 1064px 1352px #FFF, 748px 661px #FFF, 417px 57px #FFF, 1187px 1835px #3700B3, 319px 379px #ee22ff, 20px 1234px #FFF, 76px 1004px #FFF, 1842px 493px #FF5090, 21px 248px #00DFFF, 1363px 591px #FFF, 192px 1384px #00ABFF, 848px 986px #FFF, 567px 157px #FFF, 311px 1593px #FF4089, 1317px 759px #900FFF, 1153px 427px #0A0068, 1072px 1286px #42008D, 1992px 1969px #474D70, 346px 1975px #42008D, 987px 899px #52587C, 635px 1392px #002A48, 1524px 114px #5E00A0, 1801px 955px #7A00B2, 450px 1617px #26007B, 131px 1492px #B6C1DD, 482px 1207px #000A16, 1516px 465px #42008D, 1142px 377px #42008D, 282px 684px #6200EE, 49px 668px #5E00A0, 446px 1015px #52587C, 596px 682px #52587C, 841px 1301px #7300FF, 158px 1338px #c900ff, 1541px 1048px #c900ff, 702px 1524px #7588B6, 309px 845px #474D70, 1327px 371px #6200EE, 1778px 698px #002A48, 1213px 1622px #42008D, 1476px 1509px #42008D, 1358px 1788px #52587C, 506px 1018px #52587C, 1207px 1298px #0A0068, 1813px 446px #0A0068, 501px 1733px #7A00B2, 442px 302px #7A00B2, 964px 250px #000A16, 1366px 873px #000A16, 560px 383px #474D70, 1034px 1098px #474D70, 1090px 308px #26007B, 1695px 32px #26007B, 609px 1923px #7588B6, 427px 317px #7588B6, 278px 1533px #B6C1DD, 461px 175px #B6C1DD, 1705px 1238px #42008D, 1861px 1646px #42008D, 724px 1709px #002A48, 775px 1px #002A48, 764px 153px #5E00A0, 340px 1732px #5E00A0;
  animation: animStar 75s linear infinite;
}

/* · · Small stars · · */
#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  border-radius: 20px;
  box-shadow: 299px 72px #FFF, 1615px 196px #FFF, 1631px 75px #FFF, 543px 561px #FFF, 934px 1068px #FFF, 439px 695px #FFF, 1912px 1705px #FFF, 1855px 329px #FFF, 897px 240px #FFF, 643px 526px #FFF, 1855px 1783px #FFF, 1779px 790px #FFF, 1451px 508px #FFF, 1423px 791px #FFF, 1714px 900px #FFF, 735px 1223px #FFF, 594px 421px #FFF, 1472px 1778px #FFF, 195px 1193px #FFF, 1701px 235px #FFF, 1552px 1316px #FFF, 122px 1805px #FFF, 464px 102px #FFF, 1364px 332px #FFF, 1594px 333px #FFF, 1342px 1798px #FFF, 1160px 214px #FFF, 509px 1148px #FFF, 45px 1788px #FFF, 48px 1617px #FFF, 1850px 1230px #FFF, 767px 207px #FFF, 421px 1194px #FFF, 1770px 1211px #FFF, 118px 1285px #FFF, 920px 1169px #FFF, 1308px 230px #FFF, 1929px 628px #FFF, 1057px 0px #FFF, 852px 1002px #FFF, 625px 321px #FFF, 1627px 1062px #FFF, 750px 867px #FFF, 1057px 868px #FFF, 917px 1540px #FFF, 653px 807px #FFF, 290px 1236px #FFF, 975px 856px #FFF, 60px 678px #7300FF, 224px 1775px #7300FF, 1834px 121px #7300FF, 1937px 532px #FFF, 1133px 1494px #002A48, 1208px 1981px #c900ff, 1663px 1285px #6200EE, 1572px 130px #7A00B2, 1492px 1402px #5E00A0, 80px 1725px #7300FF, 900px 1332px #7300FF, 1692px 1501px #7300FF, 1281px 1315px #002A48, 1147px 848px #26007B, 153px 1437px #6200EE, 1272px 614px #26007B, 1335px 790px #26007B, 1166px 281px #26007B, 1938px 134px #5E00A0, 171px 137px #6200EE, 523px 654px #42008D, 1598px 48px #26007B, 364px 775px #c900ff, 1525px 1736px #26007B, 729px 1920px #c900ff, 484px 173px #c900ff, 694px 693px #c900ff, 1401px 1225px #52587C, 1513px 1441px #B6C1DD, 143px 545px #7300FF, 1426px 1508px #474D70, 991px 425px #7300FF, 743px 1489px #7300FF, 988px 192px #7300FF, 1629px 536px #0A0068, 507px 999px #7300FF, 1676px 469px #7300FF, 1757px 1506px #7300FF, 415px 377px #7300FF, 395px 1594px #26007B, 1653px 582px #26007B, 1280px 1631px #6200EE, 1006px 349px #c900ff, 93px 109px #26007B, 612px 1226px #474D70, 409px 1647px #26007B, 1429px 1404px #c900ff, 1848px 110px #FFF, 323px 1055px #42008D, 1364px 443px #26007B, 1082px 1250px #26007B, 1399px 681px #FFF, 1386px 1408px #FFF, 620px 1340px #FFF, 1383px 555px #FFF, 1615px 270px #FFF, 497px 544px #FFF, 569px 1157px #FFF, 1066px 527px #FFF, 1477px 565px #FFF, 924px 1214px #FFF, 827px 665px #FFF, 1186px 1861px #FFF, 1726px 1434px #FFF, 882px 1307px #FFF, 783px 1070px #FFF, 816px 1043px #FFF, 586px 270px #FFF, 1317px 1322px #FFF, 1909px 514px #FFF, 173px 1056px #FFF, 725px 343px #FFF, 804px 1329px #FFF, 1457px 1612px #FFF, 381px 1534px #FFF, 1095px 1658px #FFF, 1298px 535px #52587C, 787px 524px #FFF, 1771px 1873px #FFF, 236px 210px #FFF, 1949px 1307px #FFF, 1269px 903px #FFF, 1644px 797px #FFF, 942px 1682px #FFF, 965px 628px #FFF, 384px 1903px #FFF, 808px 1498px #FFF, 1561px 1967px #FFF, 883px 1083px #FFF, 1560px 280px #FFF, 677px 733px #FFF, 1525px 714px #FFF, 601px 1524px #FFF, 1711px 1385px #FFF, 1396px 816px #FFF, 1374px 1606px #FFF, 197px 362px #FFF, 1792px 98px #42008D, 1880px 701px #FFF, 540px 1030px #FFF, 1529px 167px #FFF, 187px 1985px #FFF, 901px 1990px #FFF, 1961px 238px #FFF, 49px 1103px #FFF, 1829px 589px #FFF, 1049px 1445px #FFF, 1638px 16px #FFF, 1529px 1758px #26007B, 1065px 417px #7300FF, 1661px 735px #7A00B2, 482px 690px #7300FF, 1077px 64px #7300FF, 159px 1273px #7300FF, 1459px 214px #7300FF, 1029px 680px #7300FF, 1835px 1302px #FFF, 685px 280px #FFF, 1114px 951px #FFF, 1731px 662px #FFF, 715px 76px #FFF, 32px 210px #FFF, 1178px 1716px #FFF, 418px 699px #FFF, 996px 1327px #FFF, 1873px 1557px #FFF, 712px 1281px #FFF, 214px 273px #26007B, 410px 1799px #B6C1DD, 825px 191px #FFF, 478px 106px #FFF, 766px 708px #FFF, 1090px 1533px #FFF, 1684px 1928px #FFF, 30px 612px #FFF, 1658px 1330px #FFF, 1150px 46px #FFF, 21px 39px #FFF, 1836px 376px #FFF, 1066px 977px #FFF, 1408px 358px #FFF, 1924px 1814px #474D70, 1678px 55px #FFF, 260px 816px #FFF, 1185px 453px #FFF, 1962px 588px #FFF, 1378px 304px #FFF, 1524px 583px #FFF, 814px 495px #FFF, 189px 1568px #FFF, 329px 57px #FFF, 79px 1616px #FFF, 1317px 485px #FFF, 1025px 1921px #B6C1DD, 1734px 152px #FFF, 899px 788px #FFF, 1951px 1111px #FFF, 1953px 761px #FFF, 173px 810px #FFF, 1618px 649px #FFF, 876px 1776px #FFF, 1893px 901px #FFF, 1716px 820px #FFF, 631px 213px #FFF, 454px 1728px #42008D, 1099px 488px #FFF, 1885px 973px #FFF, 1405px 511px #FFF, 1288px 1304px #FFF, 1304px 822px #FFF, 722px 486px #FFF, 560px 1603px #FFF, 974px 155px #FFF, 308px 1093px #FFF, 1913px 1px #FFF, 323px 684px #FFF, 6px 537px #FFF, 1191px 994px #FFF, 1455px 1796px #FFF, 88px 1557px #FFF, 1013px 450px #FFF, 31px 524px #FFF, 1513px 1981px #FFF, 1160px 1910px #FFF, 1300px 760px #FFF, 500px 427px #FFF, 1056px 137px #FFF, 1031px 1372px #FFF, 629px 1371px #FFF, 1336px 1625px #FFF, 407px 336px #FFF, 381px 851px #FFF, 61px 1766px #FFF, 1675px 1606px #FFF, 506px 1557px #FFF, 1191px 693px #FFF, 1363px 1717px #FFF, 1569px 847px #FFF, 1559px 226px #FFF, 1016px 1222px #FFF, 1946px 697px #FFF, 666px 1472px #FFF, 963px 1518px #FFF, 470px 111px #FFF, 784px 415px #FFF, 1563px 984px #FFF, 1094px 728px #FFF, 968px 658px #FFF, 1484px 841px #7588B6, 60px 1456px #6200EE, 256px 1056px #FFF, 362px 655px #26007B, 1562px 1663px #000A16, 271px 1323px #26007B, 64px 767px #c900ff, 411px 301px #26007B, 913px 1942px #26007B, 193px 599px #FFF, 1549px 1485px #FFF, 801px 1665px #FFF, 567px 315px #FFF, 1496px 900px #FFF, 1426px 126px #FFF, 1887px 1931px #FFF, 176px 970px #FFF, 1371px 1568px #FFF, 1571px 1228px #FFF, 840px 1457px #FFF, 230px 925px #FFF, 1379px 1357px #26007B, 509px 1863px #FFF, 468px 997px #FFF, 511px 1656px #FFF, 1211px 1074px #FFF, 715px 1352px #FFF, 690px 937px #FFF, 686px 1034px #FFF, 244px 542px #FFF, 1894px 209px #FFF, 1317px 1850px #FFF, 486px 1987px #FFF, 1017px 1590px #FFF, 1020px 542px #FFF, 491px 1785px #FFF, 1885px 1381px #FFF, 1228px 850px #FFF, 1816px 1128px #FFF, 1189px 640px #FFF, 590px 549px #FFF, 682px 843px #FFF, 1894px 222px #FFF, 734px 1592px #FFF, 1303px 1184px #FFF, 816px 729px #FFF, 333px 1589px #FFF, 236px 1576px #FFF, 126px 1604px #FFF, 612px 1006px #FFF, 279px 1116px #FFF, 617px 1678px #FFF, 313px 134px #FFF, 1823px 1771px #FFF, 539px 1482px #FFF, 1855px 590px #FFF, 478px 1275px #FFF, 440px 36px #FFF, 995px 551px #FFF, 399px 1858px #FFF, 1208px 1739px #FFF, 397px 1055px #FFF, 498px 1350px #FFF, 1159px 1080px #FFF, 1173px 868px #7588B6, 1911px 1598px #7300FF, 1954px 471px #7300FF, 1892px 1176px #7300FF, 1756px 1921px #000A16, 1918px 457px #42008D, 411px 146px #7300FF, 1667px 1160px #7300FF, 1132px 1983px #7300FF, 1058px 455px #7300FF, 1572px 391px #42008D, 373px 578px #7300FF, 1150px 731px #7300FF, 1531px 599px #7300FF, 627px 412px #FFF, 781px 270px #FFF, 557px 366px #FFF, 1443px 1464px #FFF, 906px 1010px #FFF, 168px 1044px #FFF, 1692px 463px #FFF, 1758px 359px #FFF, 1611px 817px #FFF, 1024px 1308px #FFF, 913px 1515px #FFF, 1328px 1523px #FFF, 81px 100px #FFF, 1218px 613px #FFF, 1960px 56px #FFF, 1324px 532px #FFF, 1717px 1980px #FFF, 1909px 1887px #FFF, 553px 1280px #FFF, 592px 1156px #FFF, 117px 1894px #FFF, 1239px 1340px #FFF, 101px 169px #FFF, 552px 429px #FFF, 757px 1638px #5E00A0, 1028px 97px #FFF, 1684px 203px #FFF, 1567px 537px #FFF, 5px 1857px #FFF, 408px 171px #FFF, 981px 1855px #FFF, 1540px 1407px #52587C, 1589px 145px #FFF, 1954px 901px #FFF, 1518px 1833px #FFF, 1048px 233px #000A16, 1603px 1040px #FFF, 145px 958px #FFF, 1372px 1054px #FFF, 1008px 1773px #FFF, 788px 1857px #FFF, 89px 18px #FFF, 959px 1016px #FFF, 186px 1917px #FFF, 421px 399px #FFF, 1777px 1113px #FFF, 821px 1124px #FFF, 1598px 977px #FFF, 1723px 1770px #FFF, 1810px 1048px #FFF, 1255px 682px #FFF, 954px 1934px #FFF, 634px 185px #FFF, 1472px 1025px #7588B6, 1708px 888px #FFF, 1877px 1955px #FFF, 1943px 356px #FFF, 209px 899px #FFF, 1566px 1711px #FFF, 461px 1861px #FFF, 117px 918px #FFF, 1600px 261px #FFF, 1729px 700px #FFF, 112px 322px #FFF, 29px 1150px #FFF, 1492px 492px #26007B, 284px 248px #FFF, 41px 1449px #FFF, 298px 1176px #FFF, 1497px 1211px #FFF, 559px 1192px #FFF, 1248px 1427px #FFF, 530px 582px #FFF, 324px 1190px #FFF, 1929px 1148px #FFF, 1982px 1177px #FFF, 1501px 16px #FFF, 1153px 145px #FFF, 1861px 1304px #FFF, 1959px 1823px #FFF, 1049px 1825px #FFF, 1216px 1855px #FFF, 122px 408px #FFF, 1230px 416px #FFF, 1867px 461px #FFF, 1048px 180px #FFF, 1640px 415px #FFF, 486px 37px #FFF, 432px 260px #FFF, 194px 740px #FFF, 755px 1288px #FFF, 1977px 1592px #FFF, 487px 858px #7588B6, 1107px 481px #FFF, 173px 439px #FFF, 1467px 1698px #FFF, 174px 697px #FFF, 920px 1150px #FFF, 1390px 408px #FFF, 122px 1649px #FFF, 1583px 1594px #FFF, 622px 1445px #FFF, 1691px 361px #FFF, 366px 1346px #FFF, 801px 416px #FFF, 1877px 75px #FFF, 201px 1789px #FFF, 1980px 1455px #5E00A0, 866px 817px #FFF, 1447px 771px #FFF, 420px 1972px #FFF, 1416px 58px #FFF, 959px 43px #FFF, 758px 1409px #FFF, 1774px 558px #FFF, 951px 979px #FFF, 846px 1639px #FFF, 625px 174px #FFF, 1830px 893px #FFF, 641px 1869px #FFF, 1020px 299px #FFF, 148px 710px #FFF, 1763px 901px #FFF, 955px 1164px #FFF, 1846px 411px #FFF, 1150px 1469px #FFF, 652px 58px #FFF, 1062px 1852px #FFF, 795px 1952px #002A48, 1400px 192px #FFF, 114px 1200px #FFF, 1140px 1548px #FFF, 1830px 1429px #FFF, 681px 753px #FFF, 1301px 991px #26007B, 1760px 1663px #B6C1DD, 1547px 1529px #26007B, 241px 154px #26007B, 1633px 260px #FFF, 1669px 339px #c900ff, 1348px 897px #52587C, 744px 822px #26007B, 358px 567px #6200EE, 494px 1521px #26007B, 344px 460px #c900ff, 1827px 758px #FFF, 593px 1102px #FFF, 123px 760px #FFF, 261px 780px #FFF, 1147px 99px #FFF, 174px 416px #FFF, 1090px 1909px #FFF, 1255px 755px #FFF, 1370px 245px #FFF, 1501px 1582px #FFF, 1095px 1816px #FFF, 679px 1126px #42008D, 928px 527px #FFF, 1439px 992px #FFF, 1424px 878px #FFF, 1887px 548px #7A00B2, 158px 257px #FFF, 1582px 1650px #FFF, 266px 835px #FFF, 1796px 923px #FFF, 852px 1894px #FFF, 210px 1453px #FFF, 359px 1460px #FFF, 1774px 1696px #FFF, 1355px 1906px #FFF, 1425px 542px #FFF, 217px 884px #FFF, 352px 1409px #FFF, 509px 364px #FFF, 1734px 1548px #FFF, 1643px 1524px #FFF, 494px 785px #FFF, 1500px 411px #FFF, 1101px 675px #FFF, 1959px 108px #FFF, 1429px 332px #FFF, 96px 1165px #FFF, 1597px 716px #FFF, 986px 1434px #FFF, 475px 1379px #FFF, 1675px 1039px #FFF, 17px 1734px #FFF, 1707px 1694px #FFF, 1204px 48px #FFF, 745px 599px #FFF, 886px 922px #FFF, 638px 476px #FFF, 234px 1181px #FFF, 1841px 702px #FFF, 590px 109px #FFF, 390px 964px #FFF, 830px 1698px #FFF, 1315px 1928px #FFF, 1903px 1947px #FFF, 1572px 1803px #FFF, 115px 1788px #FFF, 76px 1517px #FFF, 1311px 1489px #FFF, 1443px 1078px #FFF, 91px 414px #FFF, 225px 628px #FFF, 1562px 1857px #FFF, 162px 551px #FFF, 626px 1889px #FFF, 338px 197px #FFF, 1211px 275px #42008D, 634px 405px #FFF, 797px 87px #FFF, 1279px 512px #FFF, 1229px 358px #FFF, 1901px 1659px #FFF, 123px 1030px #FFF, 639px 1629px #FFF, 200px 1699px #FFF, 1323px 1297px #FFF, 1551px 811px #FFF, 601px 1530px #FFF, 1153px 791px #FFF, 1155px 233px #FFF, 1822px 230px #FFF, 1916px 797px #FFF, 1426px 450px #FFF, 1933px 1789px #FFF, 1916px 842px #FFF, 1131px 1785px #FFF, 285px 966px #FFF, 613px 217px #7A00B2, 1886px 1495px #FFF, 818px 1768px #FFF, 613px 1196px #FFF, 890px 76px #FFF, 1570px 440px #FFF, 143px 1336px #FFF, 1463px 192px #FFF, 1658px 1901px #FFF, 222px 432px #FFF, 273px 289px #FFF, 838px 1103px #FFF, 1278px 270px #FFF, 1698px 419px #FFF, 1182px 1625px #FFF, 233px 488px #FFF, 1082px 1024px #474D70, 1094px 256px #26007B, 1066px 1498px #0A0068, 866px 560px #26007B, 1635px 1853px #26007B, 956px 1770px #FFF, 1415px 1199px #26007B, 1648px 782px #c900ff, 1916px 1098px #FFF, 1409px 1965px #FFF, 95px 570px #FFF, 1153px 547px #FFF, 438px 1133px #FFF, 273px 933px #FFF, 237px 1825px #000A16, 1156px 1643px #FFF, 1473px 1551px #FFF, 1020px 1511px #FFF, 138px 671px #FFF, 1784px 1961px #FFF, 1925px 1512px #FFF, 707px 1073px #FFF, 545px 1643px #FFF, 1623px 1812px #FFF, 1890px 1069px #FFF, 1706px 1060px #FFF, 446px 804px #FFF, 1796px 1509px #FFF, 1687px 1046px #FFF, 1758px 595px #FFF, 773px 1612px #FFF, 798px 822px #FFF, 201px 873px #FFF, 749px 1029px #002A48, 790px 608px #FFF, 71px 1334px #FFF, 1657px 1555px #FFF, 738px 1966px #FFF, 1384px 1462px #FFF, 1745px 1332px #FFF, 977px 307px #FFF, 644px 665px #FFF, 1054px 1157px #FFF, 1978px 1539px #FFF, 1722px 1815px #FFF, 563px 1571px #FFF, 1012px 617px #FFF, 1941px 285px #FFF, 943px 453px #FFF, 477px 478px #FFF, 1408px 1642px #FFF, 1186px 938px #FFF, 1964px 1321px #FFF, 148px 1531px #FFF, 1774px 1580px #FFF, 685px 1664px #FFF, 839px 1858px #FFF, 200px 1888px #FFF, 1051px 1850px #FFF, 1401px 934px #FFF, 924px 1589px #FFF, 318px 1277px #FFF, 569px 738px #FFF, 1998px 1900px #FFF, 1631px 1662px #FFF, 13px 847px #FFF, 1288px 1067px #FFF, 1484px 679px #FFF, 763px 426px #FFF, 1366px 1546px #FFF, 1474px 1911px #FFF, 1587px 932px #FFF, 826px 933px #FFF, 460px 1675px #FFF, 891px 1930px #FFF, 1114px 1117px #FFF, 293px 367px #FFF, 664px 305px #FFF, 1759px 1465px #FFF, 192px 1596px #FFF, 288px 461px #FFF, 1799px 817px #FFF, 1164px 157px #FFF, 1511px 175px #FFF, 472px 1990px #FFF, 1751px 1169px #FFF, 1760px 1265px #FFF, 1283px 7px #FFF, 1840px 1833px #FFF, 1943px 193px #FFF, 852px 389px #FFF, 937px 89px #FFF, 879px 1116px #FFF, 1132px 591px #FFF, 1214px 1222px #FFF, 1256px 1405px #FFF, 1549px 901px #FFF, 317px 1546px #FFF, 110px 1408px #FFF, 288px 643px #0A0068, 252px 1318px #FFF, 96px 268px #FFF, 1280px 1834px #FFF, 1343px 137px #FFF, 1305px 443px #FFF, 1370px 1268px #FFF, 1449px 1990px #FFF, 1151px 180px #FFF, 845px 283px #FFF, 1937px 965px #FFF, 1389px 1152px #FFF, 1097px 594px #FFF, 48px 1896px #FFF, 577px 1714px #FFF, 1271px 843px #FFF, 867px 1564px #FFF, 1792px 1371px #FFF, 1221px 920px #FFF, 1269px 1744px #0A0068;
  animation: animStar 250s linear infinite;
}

/* · · Medium stars · · */
#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  border-radius: 10px;
  box-shadow: 1305px 1234px #FFF, 1563px 1055px #FFF, 1198px 802px #FFF, 569px 1374px #FFF, 342px 581px #FFF, 588px 1961px #FFF, 712px 398px #FFF, 550px 685px #FFF, 518px 905px #FFF, 1726px 264px #FFF, 1228px 1665px #FFF, 86px 857px #FFF, 270px 1796px #26007B, 1807px 338px #6200EE, 213px 1876px #6200EE, 145px 131px #26007B, 323px 895px #c900ff, 1663px 878px #26007B, 358px 1835px #FFF, 1022px 408px #FFF, 166px 1657px #FFF, 1298px 1568px #FFF, 1022px 883px #FFF, 1632px 665px #FFF, 1441px 1262px #FFF, 406px 47px #FFF, 1341px 1412px #FFF, 1440px 715px #FFF, 1483px 1869px #FFF, 1607px 1946px #FFF, 1202px 525px #FFF, 1726px 581px #FFF, 1097px 1720px #FFF, 528px 517px #FFF, 722px 632px #FFF, 359px 1475px #FFF, 390px 1471px #FFF, 1790px 1999px #FFF, 401px 835px #FFF, 1370px 962px #FFF, 119px 1690px #FFF, 1027px 935px #FFF, 479px 1468px #FFF, 1476px 1020px #FFF, 1830px 1667px #FFF, 999px 739px #FFF, 289px 20px #FFF, 1627px 483px #1ACDD1, 1427px 1850px #FFF, 1021px 759px #FFF, 490px 1259px #FFF, 1567px 510px #FFF, 282px 1928px #FFF, 1966px 875px #FFF, 1355px 720px #FFF, 793px 1897px #FFF, 1039px 836px #FFF, 1377px 457px #FFF, 1042px 997px #FFF, 1160px 1417px #FFF, 987px 1148px #FFF, 771px 1799px #FFF, 1829px 1696px #FFF, 507px 1923px #FFF, 258px 981px #FFF, 1922px 633px #FFF, 118px 1070px #FFF, 774px 331px #FFF, 435px 1943px #FFF, 1069px 1173px #FFF, 671px 1294px #FFF, 412px 650px #FFF, 777px 556px #FFF, 1549px 1585px #FFF, 595px 703px #FFF, 787px 1913px #FFF, 1090px 1061px #FFF, 1394px 51px #FFF, 1211px 1898px #FFF, 888px 1791px #FFF, 852px 1611px #FFF, 369px 1720px #7300FF, 1641px 566px #7300FF, 140px 50px #7300FF, 601px 612px #7300FF, 567px 161px #7300FF, 1857px 894px #7300FF, 1502px 872px #ee22ff, 1778px 176px #7300FF, 394px 243px #7300FF, 1596px 1446px #ee22ff, 684px 428px #7300FF, 46px 336px #1ACDD1, 56px 1294px #7300FF, 915px 315px #7300FF, 1735px 512px #1ACDD1, 1403px 1685px #FFF, 450px 441px #FFF, 677px 1514px #FFF, 959px 361px #FFF, 1425px 909px #FFF, 382px 517px #FFF, 1318px 1230px #FFF, 1825px 1601px #FFF, 1605px 382px #FFF, 209px 278px #FFF, 1134px 1712px #FFF, 338px 1026px #FFF, 50px 151px #FFF, 870px 1399px #FFF, 1546px 1136px #FFF, 1242px 981px #FFF, 705px 1447px #FFF, 793px 353px #FFF, 1681px 1052px #FFF, 674px 1243px #FFF, 338px 792px #FFF, 736px 865px #FFF, 1263px 1884px #ee22ff, 1274px 1439px #FFF, 41px 1645px #FFF, 1848px 777px #FFF, 993px 1688px #FFF, 386px 1312px #FFF, 1366px 1450px #FFF, 827px 956px #FFF, 852px 773px #FFF, 1580px 1493px #FFF, 941px 726px #FFF, 261px 379px #FFF, 189px 175px #FFF, 43px 1956px #FFF, 473px 1833px #FFF, 1770px 746px #FFF, 1772px 1014px #FFF, 1269px 1115px #FFF, 619px 774px #FFF, 437px 1415px #FFF, 1640px 270px #FFF, 89px 1825px #FFF, 803px 307px #FFF, 76px 1649px #FFF, 624px 1597px #FFF, 302px 1489px #26007B, 1568px 1458px #26007B, 848px 1184px #c900ff, 562px 1944px #6200EE, 1547px 2px #c900ff, 1844px 1345px #6200EE, 928px 1831px #26007B, 1880px 1889px #26007B, 729px 216px #26007B, 1233px 19px #FFF, 1305px 1965px #FFF, 864px 1471px #FFF, 38px 470px #FFF, 1251px 248px #FFF, 470px 1168px #FFF, 1294px 714px #FFF, 520px 836px #FFF, 20px 934px #FFF, 10px 1481px #FFF, 726px 583px #FFF, 471px 929px #FFF, 971px 1790px #7300FF, 1567px 345px #7300FF, 951px 1298px #7300FF, 639px 456px #7300FF, 567px 1825px #7300FF, 659px 1092px #FFF, 1815px 32px #FFF, 1217px 1741px #FFF, 1284px 1375px #FFF, 223px 1720px #FFF, 1533px 671px #FFF, 300px 1760px #FFF, 672px 971px #FFF, 1301px 1710px #FFF, 1025px 475px #FFF, 86px 823px #FFF, 590px 26px #FFF, 165px 1228px #FFF, 1449px 9px #FFF, 1408px 1026px #FFF, 1335px 202px #FFF, 1242px 715px #FFF, 1075px 1761px #FFF, 1838px 570px #FFF, 273px 180px #FFF, 942px 1373px #FFF, 1473px 309px #FFF, 47px 806px #FFF, 1177px 1678px #FFF, 744px 1366px #FFF, 1785px 496px #FFF, 1652px 526px #FFF, 50px 1399px #FFF, 1106px 1018px #FFF, 1867px 649px #FFF, 219px 1234px #FFF, 1621px 1227px #0A0068, 1787px 671px #42008D, 1595px 1971px #474D70, 1162px 756px #42008D, 956px 393px #52587C, 1839px 494px #002A48, 59px 595px #5E00A0, 310px 1717px #7A00B2, 1140px 316px #26007B, 1656px 1108px #B6C1DD, 1425px 1173px #000A16, 756px 1253px #42008D, 876px 350px #42008D, 736px 206px #6200EE, 477px 600px #5E00A0, 881px 591px #52587C, 1393px 783px #52587C, 840px 44px #7300FF, 152px 92px #26007B, 1581px 1190px #c900ff, 338px 1909px #7588B6, 630px 1714px #474D70, 1605px 1573px #26007B, 1242px 828px #002A48;
  animation: animStar 300s linear infinite;
}

#stars2::after {
  content: "";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  border-radius: 10px;
  box-shadow: 46px 774px #FFF, 872px 683px #FFF, 1139px 742px #FFF, 1996px 1057px #FFF, 846px 212px #FFF, 733px 1412px #FFF, 915px 963px #FFF, 10px 71px #FFF, 946px 931px #FFF, 1355px 1093px #FFF, 1311px 102px #FFF, 673px 1938px #FFF, 1559px 1206px #FFF, 544px 794px #FFF, 1369px 1474px #FFF, 1043px 1159px #FFF, 536px 1252px #26007B, 216px 348px #6200EE, 148px 1927px #26007B, 918px 133px #c900ff, 886px 703px #26007B, 1836px 1335px #26007B, 1826px 1087px #7300FF, 963px 1545px #7300FF, 343px 1776px #7300FF, 303px 1859px #7300FF, 1286px 369px #7300FF, 742px 1467px #7300FF, 447px 1225px #7300FF, 1495px 78px #7300FF, 461px 1427px #7300FF, 1656px 199px #7300FF, 558px 848px #7300FF, 219px 1154px #7300FF, 526px 1356px #7300FF, 370px 467px #7300FF, 1997px 333px #7300FF, 1254px 532px #FFF, 993px 1079px #FFF, 1695px 1272px #FFF, 794px 1199px #FFF, 1215px 512px #FFF, 1935px 749px #FFF, 93px 1987px #FFF, 1116px 897px #FFF, 455px 579px #FFF, 1762px 1808px #FFF, 1452px 1927px #FFF, 672px 120px #ee22ff, 138px 182px #FFF, 1296px 653px #ee22ff, 1924px 1434px #FFF, 586px 1787px #FFF, 1991px 642px #FFF, 172px 1136px #FFF, 700px 798px #ee22ff, 1609px 1350px #FFF, 923px 347px #FFF, 1226px 1207px #FFF, 1470px 620px #ee22ff, 299px 560px #ee22ff, 117px 283px #ee22ff, 938px 611px #FFF, 389px 1228px #FFF, 1012px 1548px #FFF, 1010px 1974px #FFF, 1115px 1904px #FFF, 453px 1070px #FFF, 1412px 1861px #FFF, 1395px 114px #FFF, 1183px 1228px #FFF, 432px 1315px #FFF, 1307px 125px #FFF, 472px 1533px #FFF, 567px 984px #FFF, 1965px 1050px #FFF, 168px 47px #FFF, 652px 1805px #FFF, 1329px 247px #FFF, 1929px 1271px #FFF, 438px 1513px #FFF, 259px 1425px #FFF, 940px 1264px #FFF, 1495px 301px #FFF, 1776px 304px #FFF, 1377px 1900px #FFF, 1371px 715px #FFF, 370px 1520px #FFF, 773px 952px #FFF, 253px 210px #FFF, 705px 1565px #FFF, 974px 1971px #FFF, 1483px 319px #FFF, 1611px 1389px #FFF, 1842px 278px #FFF, 307px 1656px #FFF, 323px 123px #FFF, 1921px 397px #FFF, 1287px 1678px #FFF, 1064px 1413px #FFF, 794px 458px #FFF, 972px 505px #FFF, 1041px 1702px #FFF, 1953px 1699px #FFF, 783px 93px #FFF, 685px 4px #FFF, 936px 1730px #FFF, 1622px 1728px #FFF, 1510px 1640px #FFF, 171px 69px #FFF, 1255px 1507px #FFF, 1210px 1142px #FFF, 1076px 1580px #FFF, 761px 1690px #FFF, 1127px 1884px #FFF, 1992px 1853px #FFF, 1076px 336px #FFF, 1451px 1565px #FFF, 1230px 141px #FFF, 475px 1601px #FFF, 1953px 812px #FFF, 936px 861px #FFF, 880px 1481px #FFF, 711px 1999px #FFF, 362px 963px #FFF, 381px 902px #FFF, 426px 765px #FFF, 163px 681px #FFF, 148px 437px #FFF, 1049px 1051px #FFF, 1981px 20px #ee22ff, 1611px 846px #7300FF, 1265px 165px #7300FF, 77px 518px #7300FF, 1004px 1659px #7300FF, 423px 1366px #7300FF, 1251px 57px #7300FF, 1751px 373px #7300FF, 977px 1416px #7300FF, 275px 404px #7300FF, 564px 673px #7300FF, 656px 1949px #7300FF, 1656px 1401px #7300FF, 257px 1314px #26007B, 1775px 1772px #26007B, 857px 172px #6200EE, 1182px 1547px #c900ff, 507px 101px #FFF, 932px 12px #FFF, 1962px 1741px #FFF, 1727px 1871px #FFF, 357px 290px #FFF, 1762px 1540px #FFF, 859px 854px #FFF, 1086px 1453px #FFF, 96px 1106px #FFF, 666px 1759px #FFF, 1052px 136px #FFF, 1781px 58px #FFF, 1639px 1821px #FFF, 295px 1444px #FFF, 680px 912px #FFF, 1626px 1854px #FFF, 1096px 812px #FFF, 516px 401px #FFF, 220px 1477px #FFF, 1127px 1373px #FFF, 1337px 1681px #FFF, 1246px 1010px #FFF, 1148px 1808px #FFF, 354px 1214px #FFF, 746px 929px #FFF, 1231px 1123px #FFF, 811px 1247px #FFF, 51px 393px #FFF, 1818px 1561px #FFF, 528px 1991px #FFF, 1732px 1683px #FFF, 164px 1525px #FFF, 452px 536px #FFF, 1673px 1948px #FFF, 1118px 1339px #FFF, 443px 667px #FFF, 672px 23px #FFF, 1770px 1385px #FFF, 1553px 62px #FFF, 118px 1227px #FFF, 766px 1140px #FFF, 1904px 1164px #FFF, 1980px 1384px #FFF, 1355px 1975px #FFF, 806px 1825px #FFF, 297px 1989px #FFF, 1826px 1162px #FFF, 1442px 83px #FFF, 33px 1040px #FFF, 1441px 1681px #FFF, 683px 1007px #FFF, 496px 223px #FFF, 1119px 1315px #FFF;
  animation: animStar 300s linear infinite;
}

/* · · Big stars · · */
#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  border-radius: 15px;
  box-shadow: 1259px 1978px #FF0070, 243px 1939px #FFF, 980px 697px #FFF, 545px 1464px #FFF, 33px 690px #FFF, 1330px 20px #FFF, 1399px 1791px #FFF, 602px 1285px #FFF, 69px 985px #FFF, 45px 1794px #FFF, 352px 43px #FF0070, 1351px 308px #7300FF, 644px 610px #7300FF, 1932px 1338px #7300FF, 142px 611px #ee22ff, 1955px 1484px #ee22ff, 1130px 1162px #7300FF, 1536px 715px #7300FF, 787px 1167px #7300FF, 866px 475px #26007B, 564px 36px #6200EE, 520px 1074px #26007B, 304px 765px #26007B, 1750px 877px #FFF, 808px 1542px #FFF, 1044px 9px #FFF, 720px 1858px #FFF, 695px 560px #FFF, 818px 889px #FFF, 1296px 320px #FFF, 582px 821px #FFF, 1081px 775px #FFF, 1892px 38px #FF0070, 1259px 1572px #FFF, 1223px 1305px #FFF, 311px 1300px #FFF, 536px 1093px #FFF, 1403px 603px #FFF, 1174px 1047px #FFF, 1074px 1948px #FFF, 907px 475px #FFF, 34px 305px #FFF, 1507px 1185px #FFF, 1163px 57px #FFF, 11px 1165px #FFF, 1850px 1426px #FFF, 388px 629px #FFF, 539px 899px #FFF, 1511px 963px #FFF, 1165px 545px #FFF, 140px 493px #FFF, 1482px 1083px #FFF, 448px 510px #FFF, 309px 610px #FFF, 818px 530px #FFF, 99px 1093px #FFF, 676px 366px #FFF, 732px 1115px #FFF, 1182px 1360px #FFF, 1631px 1125px #FFF, 222px 1990px #FFF, 23px 968px #ee22ff, 996px 1249px #FFF, 1976px 499px #7300FF, 738px 214px #7300FF, 1502px 769px #1ACDD1, 142px 1964px #ee22ff, 46px 1339px #7300FF, 765px 788px #FFF, 1450px 1110px #FFF, 1329px 1126px #26007B, 930px 208px #26007B, 1356px 85px #ee22ff, 768px 1784px #FFF, 1693px 975px #FFF, 669px 1651px #FFF, 83px 1391px #ee22ff, 84px 349px #FFF, 303px 1382px #FFF, 333px 503px #FFF, 809px 225px #FFF, 1710px 1588px #FFF, 868px 1735px #FFF, 1449px 381px #FFF, 221px 717px #FFF, 1754px 1088px #FFF, 847px 1221px #FFF, 211px 52px #FFF, 1790px 1261px #FFF, 1629px 459px #FFF, 370px 1140px #FFF, 57px 1262px #FFF, 1159px 317px #FFF, 150px 880px #FFF, 824px 1400px #FFF, 792px 108px #FFF, 1948px 172px #FFF, 1904px 64px #FFF, 1486px 1139px #FFF, 1898px 1532px #FFF, 696px 740px #42008D, 123px 828px #42008D, 234px 1035px #52587C, 405px 1325px #52587C, 1963px 293px #0A0068, 1646px 1754px #0A0068, 1671px 975px #7A00B2, 1127px 1618px #7A00B2, 857px 1987px #000A16, 1210px 187px #000A16, 506px 286px #474D70, 1941px 1998px #474D70, 1967px 994px #26007B, 372px 1049px #26007B, 1359px 1017px #7588B6, 121px 1152px #7588B6, 1690px 1125px #B6C1DD, 908px 1444px #B6C1DD, 1234px 1728px #42008D, 727px 1773px #42008D, 409px 1751px #002A48, 1457px 671px #002A48, 658px 1685px #5E00A0, 321px 1668px #5E00A0;
  animation: animStar 350s linear infinite;
}

#stars3::after {
  content: "";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  border-radius: 20px;
  box-shadow: 1012px 1155px #FFF, 771px 1534px #7300FF, 1491px 1361px #7300FF, 553px 81px #7300FF, 1860px 823px #7300FF, 807px 766px #ee22ff, 885px 1332px #FFF, 899px 820px #FFF, 1126px 673px #FFF, 990px 832px #FFF, 228px 1651px #FFF, 1148px 265px #FFF, 1506px 1312px #FFF, 916px 1753px #ee22ff, 1129px 1240px #1ACDD1, 1979px 1240px #FFF, 1899px 1413px #FFF, 566px 1772px #FFF, 1649px 1453px #FFF, 1084px 196px #ee22ff, 927px 1891px #FFF, 944px 414px #FFF, 257px 634px #FFF, 1122px 1065px #FFF, 1659px 1227px #FFF, 545px 1893px #26007B, 1916px 261px #26007B, 1871px 272px #6200EE, 1180px 608px #26007B, 580px 853px #26007B, 1789px 1848px #26007B, 465px 1789px #26007B, 1558px 767px #FFF, 392px 1373px #FFF, 1428px 1312px #FFF, 507px 1791px #FFF, 1614px 628px #FFF, 214px 1582px #FFF, 1909px 1237px #FFF, 78px 221px #FFF, 948px 103px #FFF, 1074px 904px #FFF, 67px 443px #FFF, 205px 1809px #FFF, 1740px 150px #FFF, 1882px 1715px #FFF, 1737px 259px #FFF, 1497px 1759px #FFF, 1678px 944px #FFF, 1961px 707px #FFF, 658px 1568px #FFF, 649px 1205px #FFF, 1537px 1285px #FFF, 923px 645px #FFF, 838px 1594px #7300FF, 1366px 985px #7300FF, 1696px 1170px #7300FF, 1317px 1179px #7300FF, 1399px 857px #7300FF, 1918px 930px #ee22ff, 697px 951px #7300FF, 319px 236px #7300FF, 157px 475px #FFF, 1859px 1047px #ee22ff, 1730px 543px #FFF, 553px 252px #FFF, 627px 67px #FFF, 1208px 1437px #FFF, 736px 1838px #FFF, 612px 1810px #ee22ff, 1913px 1049px #ee22ff, 1837px 200px #ee22ff, 1996px 409px #ee22ff, 630px 496px #ee22ff, 1653px 1726px #FFF, 1273px 1010px #FFF, 1198px 419px #FFF, 1596px 1758px #FFF, 405px 765px #1ACDD1, 1184px 1495px #FFF, 1760px 429px #6200EE, 1981px 1674px #26007B, 1693px 783px #FFF, 1258px 168px #FFF, 1765px 31px #FFF, 1229px 431px #FFF, 1047px 1359px #FFF, 1783px 995px #FFF, 845px 114px #FFF, 1351px 677px #FFF, 59px 1913px #FFF, 1433px 1345px #FFF, 1864px 1815px #FFF, 49px 1578px #FFF, 301px 1046px #FFF, 1815px 655px #FFF, 335px 334px #FFF, 1038px 701px #FFF, 212px 98px #FFF, 1866px 1126px #FFF;
  animation: animStar 350s linear infinite;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(-2000px);
  }
}

/* · · Hide/remove old background layers so the new one is visible · · */
#background-container,
#background-gradient,
.orb,
#orb-1,
#orb-2,
#orb-3 {
  display: none !important;
}

#usernameInput {
  font-size: 16px !important;
}

/* · · Ownership: centering + width sanity (mobile-safe) · · */
body:not([data-page="rosters"]) {
  overflow-x: hidden !important;
}

body[data-page="rosters"] {
  overflow-x: auto !important;
}

main#content {
  align-items: stretch !important;
}

#playerListView {
  width: 100% !important;
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  box-sizing: border-box !important;
}

#playerSearch {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* · · vertical centering for row pieces · · */
#playerListView .player-list-section .pl-player-row {
  align-items: center !important;
}

#playerListView .player-list-section .pl-player-row>.pl-list-tag,
#playerListView .player-list-section .pl-player-row>.pl-player-info,
#playerListView .player-list-section .pl-player-row>.pl-right-meta {
  align-self: center !important;
}

#playerListView .player-list-section .pl-list-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.1 !important;
}

/* · · keep right meta columns centered · · */
#playerListView .player-list-section .pl-right-meta {
  align-items: center !important;
}

#playerListView .player-list-section .pl-col-count,
#playerListView .player-list-section .pl-col-pct {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  height: 100%;
}

#playerListView .player-list-section .pl-col-lgs {
  line-height: 1.15 !important;
}

/* ⬇︎ INSTALL PANEL & LEGEND PANEL ⬇︎ */
.panel {
  margin: 0.45rem auto;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--color-panel-border);
  border-radius: 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.10));
  -webkit-backdrop-filter: blur(4px) saturate(110%);
  backdrop-filter: blur(4px) saturate(110%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  max-width: 720px;
}

.panel-title {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-align: center;
}

.install-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 0.4rem;
}

.install-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

@media (min-width: 720px) {
  .install-columns {
    grid-template-columns: 1fr 1fr;
  }
}

.install-card h4 {
  margin: 0 0 0.25rem 0;
  font-size: 0.9rem;
  color: var(--color-text-primary);
}

.install-card ol {
  margin: 0 0 0.25rem 1.1rem;
}

.install-card .hint {
  margin: 0.15rem 0 0 0;
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
}

/* · · Hotfix: Legend container and visibility · · */
#legend-section {
  display: block;
  width: 100%;
  max-width: var(--welcome-width, 720px);
  margin-left: auto;
  margin-right: auto;
}

.hidden {
  display: none;
}

/* · · Force-hide utility with higher precedence · · */
.hidden {
  display: none !important;
}

#legend-section.hidden {
  display: none !important;
}

/* · · CSS-only legend gating · · */
#legend-section {
  display: none !important;
}

/* default hidden */
#welcome-screen:not(.hidden)~#legend-section {
  display: block !important;
  /* show only when Welcome visible */
}

/* · · LEGEND CARD — INDIVIDUAL CONTROLS (no vars) · · */
#legend-section .panel-title {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  color: #EAEBF0 !important;
}

#rosterPlayerCardKey.legend-card {
  padding: 0.70rem .8rem !important;
  background-color: rgba(13, 14, 35, 0.21);
  background-image: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03));
  -webkit-backdrop-filter: blur(0px) saturate(120%) brightness(120%);
  backdrop-filter: blur(0px) saturate(120%) brightness(120%);
  box-shadow: inset 0 0 0 0px rgba(255, 255, 255, 0.05), inset 0 0 0 4px rgba(200, 200, 200, 0.025), 0 10px 26px rgba(0, 0, 0, var(--outerA, .22));
  /* · · Frame · · */
  border: 1px solid rgba(128, 138, 189, 0.2);
  border-radius: 10px;
  box-shadow: rgba(255, 255, 255, 0.05) 0px 0px 0px 0px inset, rgba(200, 200, 200, 0.025) 0px 0px 0px 4px inset, rgba(0, 0, 0, 0.22) 0px 10px 26px 0px;
}

/* · · Top row · · */
#rosterPlayerCardKey .player-tag.legend-pos {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  color: #9170ff !important;
  padding: 0.4rem 0.55rem !important;
  /* ← edit these to resize the POS chip */
  border-radius: 6px !important;
  line-height: 1.05 !important;
  letter-spacing: .45px !important;
}

#rosterPlayerCardKey .legend-name {
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  letter-spacing: .1px !important;
  color: #c6b3ff !important;
  margin-left: 0.5rem
}

/* · · Row gaps · · */
#rosterPlayerCardKey .legend-main {
  display: flex !important;
  /* keep layout */
  align-items: center !important;
  gap: 0.75rem !important;
  /* POS ↔ Name gap (edit) */
  margin-bottom: 0.9rem !important;
  /* gap to meta row (edit) */
}

/* · · Meta row · · */
#rosterPlayerCardKey .legend-meta {
  display: flex !important;
  align-items: center !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #9096C0 !important;
  margin-bottom: 0.9rem !important;
  /* gap to bottom row (edit) */
  line-height: 1.2 !important;
}

#rosterPlayerCardKey .legend-pos-rank {
  color: #6661fff5 !important;
  font-weight: 400 !important;
  text-align: center !important;
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
}

#rosterPlayerCardKey .legend-age {
  color: #6661fff5 !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

/* · · If your separators are elements with .separator, control them here: · · */
#rosterPlayerCardKey .legend-meta .separator {
  color: #9096C0 !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

#rosterPlayerCardKey .legend-age {
  font-size: .95rem !important;
  font-weight: 500 !important;
}

/* · · Team chip (resize independent of POS chip) · · */
#rosterPlayerCardKey .legend-team {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: #6661fff5 !important;
  padding: 0.4rem 0.55rem !important;
  /* ← edit these to resize the TEAM chip */
  border-radius: 8px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

/* · · Bottom row container (controls bar height via first padding value) · · */
#rosterPlayerCardKey .legend-bottom-bg {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 0.85rem 0.85rem !important;
  /* ← edit: vertical horizontal */
  box-sizing: border-box !important;
}

/* · · Bottom row labels and values · · */
#rosterPlayerCardKey .kv-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  /* label ↔ value gap (edit) */
  color: #9096C0 !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
}

#rosterPlayerCardKey .kv-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  color: #9096C0 !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  font-size: 1rem !important;
  /* explicit since base didn’t define it */
}

#rosterPlayerCardKey .kv-left .value,
#rosterPlayerCardKey .kv-right .value {
  font-size: 1rem !important;
  /* numeric size (edit) */
  font-weight: 400 !important;
  line-height: 1.15 !important;
}

#rosterPlayerCardKey .legend-ktc {
  color: #00EBC7 !important;
}

#rosterPlayerCardKey .legend-adp {
  color: #58A7FF !important;
}

#rosterPlayerCardKey .legend-ppg {
  color: #58A7FF !important;
}

/* · · Footnote · · */
#rosterCardFootnote.legend-footnote {
  font-size: 0.74rem !important;
  color: #5F6795 !important;
}

/* · · Welcome-only logo + padding (surgical) · · */
#welcome-screen {
  padding-top: 0.3rem !important;
  padding-bottom: 0.25rem !important;
}

/* Branding panel h2 styling - no negative margins needed */
.welcome-branding-panel h2 {
  margin: 0 !important;
  margin-right: 71px !important;
  margin-left: 4px !important;
}

#welcome-screen .welcome-logo {
  position: relative;
  z-index: 0;
}

#welcome-screen .welcome-logo img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  -webkit-mask-image: radial-gradient(circle at 52% 51%, rgba(0, 0, 0, 0.81) 40%, rgba(0, 0, 0, 0) 99%);
  mask-image: radial-gradient(circle at 52% 51%, rgba(0, 0, 0, 0.81) 40%, rgba(0, 0, 0, 0) 99%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  filter: drop-shadow(3px 2px 2px #5900ffed) drop-shadow(0px 0px 16px #7300ff58);
}

#welcome-screen .welcome-logo::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  pointer-events: none;
  z-index: 0;
}

/* · · Welcome logo gradient glow (safe, no size changes) · · */
#welcome-screen .welcome-logo {
  position: relative;
}

#welcome-screen .welcome-logo img {
  position: relative;
  z-index: 1;
}

#welcome-screen .welcome-logo::before {
  content: "";
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 165%;
  height: 90%;
  background: radial-gradient(circle at 50% 50%, #5300FF36 0%, #5500ff12 30%, #5500ff04 100%, transparent 100%);
  filter: blur(10px);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

/* · · Keep footnote centered space without making the container larger · · */
/* · · Equalize space above/below the footnote so it sits between the install panel and card bottom · · */
.install-footnote {
  margin: 0.25rem 0 0.25rem 0 !important;
  /* equal margins, small total */
}

/* · · Center the footnote between the collapsed install panel and the bottom of the card · · */
.install-footnote {
  text-align: center;
  font-size: 0.74rem;
  color: var(--color-text-tertiary, #5F6795);
  margin-top: 0.42rem;
  margin-bottom: 0.42rem;
  line-height: 1.1;
}

/* ⬇︎ MENU BUTTON AND DROPDOWN ⬇︎ */
.menu-container {
  position: relative;
  display: inline-block;
}

.menu-button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-button svg {
  fill: var(--color-text-secondary);
}

.menu-button:hover svg {
  fill: var(--color-text-primary);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: rgba(11, 15, 28, 0.94);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--card-border-radius);
  padding: 0.4rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  z-index: 20;
  min-width: 210px;
  box-shadow: 0 12px 32px rgba(5, 7, 15, 0.5);
  backdrop-filter: blur(8px) saturate(130%);
}

.dropdown-menu a {
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 0.35rem 0.55rem;
  border-radius: var(--card-border-radius);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  white-space: nowrap;
}

.dropdown-menu a i {
  color: inherit;
  font-size: 1.05rem;
  min-width: 1.1rem;
  text-align: center;
}

.dropdown-menu a:hover {
  background-color: var(--color-panel-bg);
  color: var(--color-text-primary);
}

.dropdown-menu.hidden {
  display: none;
}

#filters-row {
  justify-content: space-around;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.filters-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 2px;
}

.research-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(var(--header-icon-size), 2.6rem);
  height: var(--header-control-height);
  flex-shrink: 0;
}

.research-button {
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0;
  margin-top: 5px;
  text-shadow: 0 0 2px #6900ffdd;
}

.research-button .analyzer-icon {
  font-size: 1.1rem;
}

.research-button .analyzer-label {
  font-size: 0.5rem;
  font-weight: 400;
  color: inherit;
  white-space: nowrap;
}

#clearFiltersButton {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -0.1rem;
  /* small space on the left */
  margin-right: 0.27rem;
  /* larger space on the right */
  text-decoration: none;
}

#clearFiltersButton .clear-filters-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.filter-btn[data-position="STAR"] i {
  font-size: 0.75rem;
}

.filter-btn.active[data-position="STAR"] {
  color: var(--color-accent-primary);
  box-shadow: inset 0 0 7px var(--color-accent-primary-glow);
}

#clearFiltersButton i {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1;
}

.compare-controls .compare-search-toggle i {
  font-size: 1.1rem;
}

.compare-controls {
  position: relative;
}

.compare-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--color-panel-border);
  background: rgba(22, 24, 43, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(1px);
  color: var(--color-text-secondary);
  line-height: 1;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.compare-search-toggle:hover,
.compare-search-toggle:focus-visible {
  color: var(--color-text-primary);
  border-color: var(--color-panel-border-glow);
  background: rgba(22, 24, 43, 0.45);
}

.compare-search-toggle:focus-visible {
  outline: 2px solid rgba(118, 109, 255, 0.25);
  outline-offset: 2px;
}

.compare-search-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  z-index: 50;
  width: 210px;
  padding: 0px 0px 0px;
  border: 1px solid var(--color-panel-border);
  background: rgba(25, 27, 40, 0.95);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(40px);
  transition: opacity .15s ease, transform .15s ease;
  opacity: 0;
  transform: translateY(-4px);
}

.compare-search-popover:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
}

.compare-search-close {
  position: absolute;
  top: -10px;
  right: -13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}

.compare-search-close i {
  font-size: 1.05rem;
  pointer-events: none;
}

.compare-search-close:hover,
.compare-search-close:focus-visible {
  color: var(--color-text-primary);
  transform: scale(1.05);
}

.compare-search-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
}

.compare-search-hidden {
  display: none !important;
}

#compareSearchInput {
  width: 100%;
  margin-top: 0px;
  padding: 5px 12px;
  font-size: 1rem;
  color: var(--color-text-primary);
  background: rgba(18, 22, 40, 0.85);
  border: 1px solid rgb(169 178 227 / 9%);
  border-radius: 10px;
  outline: none;
  box-shadow: 0 0 8px 2px #10102044;
}

#compareSearchInput::placeholder {
  color: #9096C0;
}

@media (max-width: 640px) {
  .filters-container {
    position: relative;
  }

  .compare-controls {
    position: static;
  }

  .compare-search-popover {
    top: 83%;
    left: 50%;
    right: auto;
    margin-top: 0;
    width: min(92vw, 320px);
    transform: translate(-50%, -56%);
  }

  .compare-search-popover:not(.hidden) {
    transform: translate(-50%, -50%);
  }
}

#clearFiltersButton .clear-filters-label {
  display: block;
  margin-top: 2px;
  font-size: 0.5rem;
  font-weight: 500;
  line-height: 1;
}

.team-header-item .team-name {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  justify-self: center;
}

.team-header-item .team-record {
  font-size: 0.58rem;
  color: #9ea5d8;
  white-space: nowrap;
  justify-self: start;
}

#analyzeLeagueButton {
  padding: 0rem 0.6rem;
  font-size: 1.1rem;
  font-weight: 500;
  border: 1px solid #cfafcf8a;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.2)) !important;
  box-shadow: 0 0 9px #eeddff65;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  color: #d1b1d1aa;
}

/* · · Anlz.Lg button · · */
body[data-page="rosters"] #secondary-header-row #analyzeLeagueButton {
  padding: 0;
  border: none;
  background: transparent !important;
  box-shadow: none;
}

#analyzeLeagueButton {
  color: #9096C0;
  margin-top: 2px;
}

#analyzeLeagueButton i {
  filter:
    drop-shadow(0px 0px 2px #cfafcf69);
}

body[data-page="rosters"] #secondary-header-row #analyzeLeagueButton.glow-on-select,
body[data-page="rosters"] #secondary-header-row #analyzeLeagueButton.active {
  box-shadow: none;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
}

/* · · League Analyzer Button · · */
#analyzeLeagueButton .analyzer-label {
  margin-top: 1px !important;
}

#analyzeLeagueButton .analyzer-icon {
  font-size: 1.3rem !important;
  margin-top: 5px !important;
}

/* · · Global page footnote (bottom of page) · · */
.page-footnote {
  text-align: center;
  font-size: 0.74rem;
  color: var(--color-text-tertiary, #5F6795);
  line-height: 1.2;
  padding: 0.5rem 0 0.75rem 0;
  margin-top: 0.75rem;
  padding-bottom: 2rem;
}

/* · · Desktop-only brightness/contrast boost · · */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  -webkit-backdrop-filter: brightness(115%) contrast(104%) saturate(105%);
  backdrop-filter: brightness(115%) contrast(104%) saturate(105%);
}

/* · · Mobile override · · */
@media (hover: none) and (pointer: coarse) {
  body::before {
    -webkit-backdrop-filter: brightness(130%) contrast(106%) saturate(108%);
    backdrop-filter: brightness(130%) contrast(106%) saturate(108%);
  }
}

#legend-section {
  background: var(--color-panel-bg);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--panel-border-radius);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

/* ⬇︎ GM LOG MODAL ⬇︎ */
#game-logs-modal,
#player-comparison-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease-in-out;
}

#game-logs-modal.hidden {
  display: none;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 50%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.modal-content {
  position: relative;
  z-index: 101;
  padding: 0.65rem 0.85rem 0.25rem 0.85rem;
  border-radius: var(--panel-border-radius);
  max-width: 90%;
  width: 686px;
  max-height: 90vh;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

#game-logs-modal:not(.hidden) .modal-content,
#player-comparison-modal:not(.hidden) .modal-content {
  transform: scale(1);
  opacity: 1;
  height: 638px;
}

/* Ensure additional modals using the shared `.modal-content` baseline
   are actually visible when opened (their own size rules remain page-specific). */
#watchlist-modal:not(.hidden) .modal-content,
#ownershipPlayerModal:not(.hidden) .modal-content,
#ownership-player-modal:not(.hidden) .modal-content {
  transform: scale(1);
  opacity: 1;
}

.modal-close-btn {
  position: absolute;
  top: 0rem;
  right: 0.45rem;
  background: none;
  border: none;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.2s ease;
}

.modal-close-btn:hover {
  color: var(--color-text-primary);
}

.modal-header-left-container {
  position: absolute;
  top: 0.70rem;
  left: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* · · Team Logo Chips · · */
.modal-team-logo-chip {
  padding: 0px 6px;
  background: rgba(255, 255, 255, 0.005);
  backdrop-filter: blur(0px) saturate(180%);
  border: 1px solid rgba(250, 250, 250, 0.12);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-team-logo-chip[data-team="ARI"] {
  box-shadow: inset 0 0 10px rgba(151, 35, 63, 0.18);
}

.modal-team-logo-chip[data-team="ATL"] {
  box-shadow: inset 0 0 10px rgba(167, 25, 48, 0.16);
}

.modal-team-logo-chip[data-team="BAL"] {
  box-shadow: inset 0 0 10px rgba(158, 43, 246, 0.2);
}

.modal-team-logo-chip[data-team="BUF"] {
  box-shadow: inset 0 0 10px rgba(198, 12, 48, 0.14);
}

.modal-team-logo-chip[data-team="CAR"] {
  box-shadow: inset 0 0 10px rgba(0, 133, 202, 0.22);
}

.modal-team-logo-chip[data-team="CHI"] {
  box-shadow: inset 0 0 10px rgba(120, 90, 240, 0.15);
}

.modal-team-logo-chip[data-team="CIN"] {
  box-shadow: inset 0 0 10px rgba(251, 79, 20, 0.13);
}

.modal-team-logo-chip[data-team="CLE"] {
  box-shadow: inset 0 0 10px rgba(49, 29, 0, 0.22);
}

.modal-team-logo-chip[data-team="DAL"] {
  box-shadow: inset 0 0 10px rgba(134, 147, 151, 0.17);
}

.modal-team-logo-chip[data-team="DEN"] {
  box-shadow: inset 0 0 10px rgba(251, 79, 20, 0.12);
}

.modal-team-logo-chip[data-team="DET"] {
  box-shadow: inset 0 0 10px rgba(0, 183, 235, 0.12);
}

.modal-team-logo-chip[data-team="GB"] {
  box-shadow: inset 0 0 10px rgba(30, 205, 120, 0.12);
}

.modal-team-logo-chip[data-team="HOU"] {
  box-shadow: inset 0 0 10px rgba(167, 25, 48, 0.15);
}

.modal-team-logo-chip[data-team="IND"] {
  box-shadow: inset 0 0 10px rgba(0, 44, 95, 0.22);
}

.modal-team-logo-chip[data-team="JAX"] {
  box-shadow: inset 0 0 10px rgba(0, 103, 120, 0.18);
}

.modal-team-logo-chip[data-team="KC"] {
  box-shadow: inset 0 0 10px rgba(227, 24, 55, 0.13);
}

.modal-team-logo-chip[data-team="LAC"] {
  box-shadow: inset 0 0 10px rgba(0, 128, 198, 0.14);
}

.modal-team-logo-chip[data-team="LAR"] {
  box-shadow: inset 0 0 10px rgba(0, 91, 200, 0.19);
}

.modal-team-logo-chip[data-team="LV"] {
  box-shadow: inset 0 0 10px rgba(165, 172, 175, 0.14);
}

.modal-team-logo-chip[data-team="MIA"] {
  box-shadow: inset 0 0 10px rgba(0, 142, 151, 0.17);
}

.modal-team-logo-chip[data-team="MIN"] {
  box-shadow: inset 0 0 10px rgba(115, 0, 255, 0.19);
}

.modal-team-logo-chip[data-team="NE"] {
  box-shadow: inset 0 0 10px rgba(255, 56, 95, 0.14);
}

.modal-team-logo-chip[data-team="NO"] {
  box-shadow: inset 0 0 10px rgba(160, 148, 101, 0.19);
}

.modal-team-logo-chip[data-team="NYG"] {
  box-shadow: inset 0 0 10px rgba(55, 56, 200, 0.16);
}

.modal-team-logo-chip[data-team="NYJ"] {
  box-shadow: inset 0 0 10px rgba(64, 160, 120, 0.16);
}

.modal-team-logo-chip[data-team="PHI"] {
  box-shadow: inset 0 0 10px rgba(43, 140, 78, 0.13);
}

.modal-team-logo-chip[data-team="PIT"] {
  box-shadow: inset 0 0 10px rgba(255, 182, 18, 0.1);
}

.modal-team-logo-chip[data-team="SEA"] {
  box-shadow: inset 0 0 10px rgba(47, 200, 20, 0.11);
}

.modal-team-logo-chip[data-team="SF"] {
  box-shadow: inset 0 0 10px rgba(179, 153, 93, 0.14);
}

.modal-team-logo-chip[data-team="TB"] {
  box-shadow: inset 0 0 10px rgba(247, 122, 97, 0.14);
}

.modal-team-logo-chip[data-team="TEN"] {
  box-shadow: inset 0 0 10px rgba(75, 146, 219, 0.22);
}

.modal-team-logo-chip[data-team="WAS"] {
  box-shadow: inset 0 0 10px rgba(180, 36, 36, 0.16);
}

.modal-team-logo-chip span {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  padding: 0 4px;
}

.modal-team-logo-chip::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 1rem;
  backdrop-filter: blur(1px);
  box-shadow: inset 13px 8px 0px -10px rgba(255, 255, 255, .15),
    inset 0px 8px 0px -5px rgba(255, 255, 255, .1);
  opacity: 0.4;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
  pointer-events: none;
}

/* · · Pos Tags · · */
.modal-pos-tag {
  position: relative;
  line-height: 0.9rem;
  font-size: 0.9rem;
  padding: 4.4px 8.5px;
  background: rgba(255, 255, 255, 0.005);
  backdrop-filter: blur(1px) saturate(180%);
  border: 1px solid rgba(250, 250, 250, 0.12);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.05);
}

.modal-pos-tag::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 4px;
  backdrop-filter: blur(1px);
  box-shadow: inset 11px 8px 0px -10px rgba(255, 255, 255, .1),
    inset 0px 8px 0px -5px rgba(255, 255, 255, .1);
  opacity: 0.34;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
  pointer-events: none;
}

.modal-pos-tag.QB {
  color: #FF3A75c0;
  /* QB color */
  box-shadow: inset 0 0 10px #FF3A7513;
  /* QB border */
}

.modal-pos-tag.RB {
  color: #00EBC7c0;
  /* RB color */
  box-shadow: inset 0 0 6px #00EBC715;
  /* RB border */
}

.modal-pos-tag.WR {
  color: #58A7FFca;
  /* WR color */
  box-shadow: inset 0 0 10px #58A7FF25;
  /* WR border */
}

.modal-pos-tag.TE {
  color: #B469FFca;
  /* TE color */
  box-shadow: inset 0 0 10px #B469FF26;
  /* TE border */
}

/* · · Modal Header · · */
#modal-header h3 {
  font-size: 1.15rem;
  font-weight: 200;
  color: var(--color-text-primary);
  margin-bottom: 0.2rem;
  text-align: center;
  margin-left: 15px;
}

#modal-header h3 {
  display: inline-block;
  max-width: 15ch;
  /* ~16 characters wide */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* shows … at the end */
}

#modal-body {
  color: #8086b0;
  overflow-x: auto;
  overflow-y: auto;
  border-radius: 8px;
  max-height: 70vh;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

#modal-body:hover {
  scrollbar-width: thin;
}

#modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#modal-body:hover::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* When SZN view is active, the SZN container owns vertical scrolling (not the modal body).
   This prevents the SZN scroll position from affecting overlay tabs (Radar/Consistency/Key). */
#game-logs-modal #modal-body:has(.game-logs-szn-view:not(.hidden)) {
  overflow-y: hidden;
}

/* · · Table Styling · · */
.modal-body {
  position: relative;
  background: #282d438c;
  border: 1px solid rgba(250, 250, 250, 0);
  border-radius: 9px;
  box-shadow: 0 8px 32px rgba(31, 38, 105, 0.15), inset 0 6px 20px rgba(255, 255, 255, 0.013);
  height: 416px;
}

.modal-body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 9px;
  backdrop-filter: blur(1px);
  box-shadow: inset 10px 12px 0px -8px rgba(255, 255, 255, .05),
    inset 0px 8px 0px -6px rgba(255, 255, 255, .051);
  opacity: 0.1;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 10px black) brightness(100%);
  pointer-events: none;
}

#modal-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
  margin-bottom: 2px;
}

#game-logs-modal .game-logs-table-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  border: 1px solid #aaf2;
  border-radius: 10px;
}

/* === Game Logs Modal: SZN (single-player season stats) view === */
#game-logs-modal .game-logs-szn-view {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.2rem 0.35rem 0.6rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
  width: 555px;
  justify-self: center;
  border: 1px solid #aaf4;
  border-radius: 10px;
  box-shadow: 0 0 64px #0003, -52px 0 28px 21px #0001;
}

#game-logs-modal .game-logs-szn-view::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent;
}

#game-logs-modal .game-logs-szn-view::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

#game-logs-modal .game-logs-szn-view::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

#game-logs-modal .game-logs-szn-view::-webkit-scrollbar-track,
#game-logs-modal .game-logs-szn-view::-webkit-scrollbar-corner {
  background: transparent;
}

#game-logs-modal .gamelogs-szn-list {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

#game-logs-modal .gamelogs-szn-title {
  margin: 0.1rem 0 0.45rem;
  padding: 0.32rem 0.55rem;
  border-radius: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(10, 12, 28, 0.22));
  border: 1px solid rgba(128, 138, 189, 0.16);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 24px rgba(0, 0, 0, 0.18);
}

#game-logs-modal .gamelogs-szn-title-icon {
  font-size: 0.95em;
  opacity: 0.9;
}

#game-logs-modal .gamelogs-szn-title-text {
  display: inline-block;
}

#game-logs-modal .gamelogs-szn-title-games {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  font-weight: 600;
  opacity: 0.95;
}

#game-logs-modal .gamelogs-szn-title-games-label {
  opacity: 0.75;
}

#game-logs-modal .gamelogs-szn-title-games-value {
  color: var(--color-text-primary);
  font-weight: 700;
  letter-spacing: 0.02em;
}

#game-logs-modal .gamelogs-szn-section-header {
  position: relative;
  margin: 0.32rem 0 0.08rem;
  padding: 0.18rem 0.45rem;
  border-radius: 8px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.56rem;
  font-weight: 800;
  color: var(--color-text-secondary);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(10, 12, 28, 0.18));
  border: 1px solid rgba(128, 138, 189, 0.14);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 24px rgba(0, 0, 0, 0.18);
}

#game-logs-modal .gamelogs-szn-section-header::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.01);
  box-shadow: inset 10px 12px 0px -8px rgba(255, 255, 255, .03),
    inset 0px 8px 0px -6px rgba(255, 255, 255, .031);
  opacity: 0.55;
}

#game-logs-modal .gamelogs-szn-section-header:first-child {
  margin-top: 0;
}

#game-logs-modal .gamelogs-szn-section-header--passing {
  color: #FFB2D8;
  border-color: rgba(255, 178, 216, 0.18);
}

#game-logs-modal .gamelogs-szn-section-header--rushing {
  color: #75e0b7;
  border-color: rgba(117, 224, 183, 0.18);
}

#game-logs-modal .gamelogs-szn-section-header--receiving {
  color: #63b0de;
  border-color: rgba(99, 176, 222, 0.18);
}

#game-logs-modal .gamelogs-szn-section-header--all {
  color: #b7adfe;
  border-color: rgba(183, 173, 254, 0.18);
}

#game-logs-modal .gamelogs-szn-row {
  display: grid;
  --szn-value-col: 64px;
  grid-template-columns: 64px minmax(0, 1fr) var(--szn-value-col);
  align-items: center;
  gap: 0.2rem;
  padding: 0.18rem 0.2rem;
  border-radius: 8px;
  background: linear-gradient(180deg, rgb(210 206 250 / 10%), rgba(15, 35, 55, 0.02), rgb(173 170 232 / 4%));
  border: 1px solid rgba(128, 138, 189, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 4px 12px rgba(0, 0, 0, 0.2);
}

#game-logs-modal .gamelogs-szn-label {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: left;
}

#game-logs-modal .gamelogs-szn-row--passing .gamelogs-szn-label {
  color: #FFB2D8;
}

#game-logs-modal .gamelogs-szn-row--rushing .gamelogs-szn-label {
  color: #75e0b7;
}

#game-logs-modal .gamelogs-szn-row--receiving .gamelogs-szn-label {
  color: #63b0de;
}

#game-logs-modal .gamelogs-szn-row--all .gamelogs-szn-label {
  color: #b7adfe;
}

#game-logs-modal .gamelogs-szn-bar {
  width: 106%;
  height: 10px;
  border-radius: 4px;
  position: relative;
  overflow: visible;
  background: rgba(10, 12, 28, 0.3);
  border: 1px solid rgba(250, 250, 250, 0.07);
  display: flex;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  margin-left: -10px;
  margin-right: -12px;
}

#game-logs-modal .gamelogs-szn-bar-fill {
  /* Game Logs SZN neon fill: JS sets rank color on border + inset glow, while fill stays brightened. */
  height: 100%;
  border-radius: 3px;
  border: 1px solid transparent;
  box-sizing: border-box;
  background: linear-gradient(90deg, rgba(154, 153, 242, 0.10), rgba(154, 153, 242, 0.65));
  transition: width 0.18s ease;
  filter: brightness(1) saturate(0.9) drop-shadow(0px 0px 4px #0009);
}

#game-logs-modal .gamelogs-szn-bar-rank {
  position: absolute;
  top: 50%;
  left: var(--szn-rank-pos, 0%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: baseline;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-text-secondary);
  font-weight: 600;
  width: 30px;
  opacity: 1;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
  padding: 3px 0px;
  border: 1px solid #fff2;
  border-radius: 6px;
  background: #6673;
  margin-left: 10px;
  justify-content: center;
  box-shadow: inset 13px 4px 6px -4px #445;
}

#game-logs-modal .gamelogs-szn-bar-rank sup {
  font-size: 0.6em;
  line-height: 1;
  margin-left: 0.04em;
  vertical-align: baseline;
  opacity: 0.95;
  font-variant-numeric: ordinal;
}

#game-logs-modal .gamelogs-szn-value {
  text-align: right;
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--color-text-primary);
}

#game-logs-modal .gamelogs-szn-value-main {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.02em;
}

#game-logs-modal .gamelogs-szn-value-percent {
  font-size: 0.88em;
  opacity: 0.9;
}

#game-logs-modal .gamelogs-szn-value .stat-rank-annotation {
  display: none !important;
}

#game-logs-modal .gamelogs-szn-value.has-rank-annotation {
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-left: 13px;
}

#game-logs-modal .gamelogs-szn-value .stat-rank-annotation {
  display: inline-flex;
  align-items: baseline;
  font-size: 0.9em;
  line-height: 1;
  margin-left: 0;
  transform: none;
  letter-spacing: 0.02em;
  color: inherit;
  font-weight: 500;
  opacity: 0.95;
}

#game-logs-modal .gamelogs-szn-value .stat-rank-annotation sup {
  font-size: 0.6em;
  line-height: 1;
  margin-left: 0.04em;
  vertical-align: baseline;
  opacity: 0.95;
  font-variant-numeric: ordinal;
}

@media (max-width: 620px) {
  #game-logs-modal .game-logs-szn-view {
    padding: 0rem 0.25rem 0.25rem;
    width: 100%;
    border: 1px solid #aaf1;
    background: #1919211a;
  }

  #game-logs-modal .gamelogs-szn-title {
    margin: 0rem 0 0.15rem;
    padding: 0.12rem 0.04rem;
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 0;
    background: none;
    box-shadow: none;
    border: none;
    text-transform: uppercase;
  }

  #game-logs-modal .gamelogs-szn-title-games {
    right: 0.05rem;
    font-size: 0.82rem;
    padding: 2px 4px;
    border: 1px solid #cdf1;
    border-radius: 8px;
  }

  #game-logs-modal .gamelogs-szn-section-header {
    margin: 0.28rem 0 0.07rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.8rem;
    letter-spacing: 0;
    Font-weight: 400;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(10, 12, 28, 0));
  }

  #game-logs-modal .gamelogs-szn-row {
    --szn-value-col: 56px;
    grid-template-columns: 52px minmax(0, 1fr) var(--szn-value-col);
    gap: 0rem;
    padding: 0.15rem 0.15rem;
  }

  #game-logs-modal .gamelogs-szn-label {
    font-size: 0.66rem;
    letter-spacing: 0.02em;
    margin-right: -30px !important;
  }

  #game-logs-modal .gamelogs-szn-bar {
    height: 12px;
    margin-left: -9px;
    margin-right: -8px !important;
  }

  #game-logs-modal .gamelogs-szn-value {
    font-size: 0.74rem;
    margin-right: 1px;
    letter-spacing: -0.015rem;
  }
}

#game-logs-modal .game-logs-hscroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Hide horizontal scrollbar on mobile to prevent covering rank annotations */
@media (max-width: 640px) {
  #game-logs-modal .game-logs-hscroll::-webkit-scrollbar {
    height: 6px;
  }

  #game-logs-modal .game-logs-hscroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
  }
}

#game-logs-modal .game-logs-hscroll-content {
  display: inline-block;
  vertical-align: top;
}

#game-logs-modal .game-logs-table-header,
#game-logs-modal .game-logs-table-footer {
  overflow: visible;
  margin: 0;
  padding: 0;
}

#game-logs-modal .game-logs-table-body {
  max-height: 322px;
  overflow-y: auto;
  overflow-x: hidden;
  /* horizontal handled by parent hscroll */
  /* Narrow, subtle scrollbars (match stats page) */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
}

#game-logs-modal .game-logs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
  table-layout: fixed;
  will-change: transform;
  transform: translateZ(0);
}

/* Reduce any gap above the horizontal scrollbar and ensure footer isn't clipped */
#game-logs-modal .game-logs-hscroll {
  padding-bottom: 0;
}

#game-logs-modal .game-logs-table-footer {
  padding-bottom: 4px;
  margin-bottom: 0;
}

#game-logs-modal .game-logs-table thead,
#game-logs-modal .game-logs-table tfoot {
  display: table;
  width: 100%;
  table-layout: fixed;
}

#game-logs-modal .game-logs-table-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent;
}

#game-logs-modal .game-logs-table-body::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

#game-logs-modal .game-logs-table-body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

#game-logs-modal .game-logs-table-body::-webkit-scrollbar-track {
  background: transparent;
}

#game-logs-modal .game-logs-table-body::-webkit-scrollbar-corner {
  background: transparent;
}

#modal-body th,
#modal-body td {
  padding: 0.2rem 0.25rem;
  text-align: center;
  /* border-bottom is removed from here to be more specific */
}

#game-logs-modal thead th.gamelog-header-passing,
#game-logs-modal tfoot th.gamelog-header-passing {
  color: #FFB2D8;
}

#game-logs-modal thead th.gamelog-header-rushing,
#game-logs-modal tfoot th.gamelog-header-rushing {
  color: #75e0b7;
}

#game-logs-modal thead th.gamelog-header-receiving,
#game-logs-modal tfoot th.gamelog-header-receiving {
  color: #63b0de;
}

#game-logs-modal thead th.gamelog-header-all,
#game-logs-modal tfoot th.gamelog-header-all {
  color: #b7adfe;
}

#modal-body thead th {
  border-bottom: 1px solid var(--color-panel-border);
}

#modal-body th {
  font-weight: 600;
  font-size: 0.64rem;
  color: #bbc0e8;
  white-space: nowrap;
}

#modal-body tfoot tr {
  border-top: 1px solid rgb(128 138 189 / 18%);
  white-space: nowrap;
  font-size: 0.7rem;
}

#modal-body tfoot th {
  color: var(--color-accent-primary);
  white-space: nowrap;
  padding: 0.1rem 0rem 0.035rem 0.02rem;
}

#game-logs-modal .game-logs-table-footer tfoot tr:first-child th {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  vertical-align: middle;
}

#modal-body .no-logs {
  text-align: center;
  padding: 2rem;
  font-style: italic;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#modal-header {
  text-align: center;
}

#modal-player-name {
  text-align: center;
  margin-bottom: 0.12rem;
}

#modal-player-vitals {
  display: flex;
  justify-content: center;
}

.player-vitals {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.9rem;
  white-space: nowrap;
}

.player-vitals__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.player-vitals__label {
  font-size: 0.45rem;
  letter-spacing: 0.07em;
  color: #7b81a5;
  text-transform: uppercase;
  line-height: 1;
}

.player-vitals__value {
  font-size: 0.75rem;
  font-weight: 400;
  color: #BDC1D8df;
  line-height: 1;
}

.player-vitals--modal {
  margin: 0.2rem 0 0.58rem;
  border: 1px solid #ffffff10;
  padding: 4px 7px;
  border-radius: 8px;
}

.player-vitals--modal {
  position: relative;
  background: rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(1px) saturate(180%);
  border: 1px solid rgba(250, 250, 250, 0.1);
  box-shadow: 0 8px 32px rgba(31, 38, 105, 0.1), inset 6px 7px 13px -5px rgba(255, 255, 255, 0.035);
}

.player-vitals--modal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 8px;
  backdrop-filter: blur(1px);
  box-shadow: inset 10px 12px 0px -8px rgba(255, 255, 255, .03),
    inset 0px 8px 0px -6px rgba(255, 255, 255, .031);
  opacity: 0.4;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(100%);
  pointer-events: none;
}

.player-vitals--compare {
  margin: 0.15rem auto 0.25rem;
  border-radius: 8px;
  border: 1px solid #fff2;
  padding: 4px 4px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
  white-space: nowrap;
  margin-bottom: 2px;
}

.player-vitals--compare {
  position: relative;
  background: rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(1px) saturate(180%);
  border: 1px solid rgba(250, 250, 250, 0.1);
  box-shadow: 0 8px 32px rgba(31, 38, 105, 0.1), inset 0 6px 20px rgba(255, 255, 255, 0.013);
}

.player-vitals--compare::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 8px;
  backdrop-filter: blur(1px);
  box-shadow: inset 10px 12px 0px -8px rgba(255, 255, 255, .07),
    inset 0px 8px 0px -6px rgba(255, 255, 255, .031);
  opacity: 0.4;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(100%);
  pointer-events: none;
}

.player-vitals--compare .player-vitals__label {
  font-size: 0.35rem;
  letter-spacing: 0.16em;
}

.player-vitals--compare .player-vitals__item {
  flex: 0 1 auto;
}

.player-vitals--compare .player-vitals__value {
  font-size: 0.63rem;
}

#modal-summary-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

#modal-summary-chips {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: nowrap;
}

/* · · Game Logs Modal Header Tabs · · */
#game-logs-modal #modal-summary-row {
  margin-bottom: 0.35rem;
}

#game-logs-modal .gamelogs-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin: 0 auto 0.55rem;
}

#game-logs-modal .gamelogs-season-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#game-logs-modal .gamelogs-season-tab {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.62rem;
  border-radius: 10px;
  border: 1px solid rgba(250, 250, 250, 0.1);
  background: rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(1px) saturate(180%);
  -webkit-backdrop-filter: blur(1px) saturate(180%);
  box-shadow: 0 8px 32px rgba(31, 38, 105, 0.1), inset 0 6px 20px rgba(255, 255, 255, 0.013);
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

#game-logs-modal .gamelogs-season-tab::after,
#game-logs-modal .gamelogs-view-switcher::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(1px);
  box-shadow: inset 10px 12px 0px -8px rgba(255, 255, 255, .03),
    inset 0px 8px 0px -6px rgba(255, 255, 255, .031);
  opacity: 0.4;
  z-index: -1;
  filter: blur(1px) drop-shadow(6px 4px 6px rgba(0, 0, 0, 0.75)) brightness(100%);
  pointer-events: none;
}

#game-logs-modal .gamelogs-season-tab:focus-visible,
#game-logs-modal .gamelogs-view-option:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.24);
  outline-offset: 2px;
}

#game-logs-modal .gamelogs-season-tab.is-active {
  color: #888da7;
  background: rgba(118, 109, 255, 0.08);
  border-color: rgba(118, 109, 255, 0.32);
  box-shadow: 0 0 14px rgba(118, 109, 255, 0.22),
    0 8px 32px rgba(31, 38, 105, 0.10),
    inset 0 6px 20px rgba(255, 255, 255, 0.013);
  filter: brightness(1.46);
}

#game-logs-modal .gamelogs-view-switcher {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0.05rem;
  border-radius: 13px;
  border: 1px solid rgba(250, 250, 250, 0.1);
  background: rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(1px) saturate(180%);
  -webkit-backdrop-filter: blur(1px) saturate(180%);
  box-shadow: 0 8px 32px rgba(31, 38, 105, 0.1), inset 0 6px 20px rgba(255, 255, 255, 0.013);
}

@media (max-width: 640px) {
  #game-logs-modal .gamelogs-view-switcher {
    padding: 0.05rem 0.07rem;
    border-radius: 7px;
    gap: 0.12rem;
  }
}

#game-logs-modal .gamelogs-view-option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.22rem 0.62rem;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

#game-logs-modal .gamelogs-view-option.is-active {
  color: #9b9da6;
  background: rgba(118, 109, 255, 0.10);
  border-color: rgba(118, 109, 255, 0.30);
  box-shadow: 0 0 12px rgba(118, 109, 255, 0.18), inset 0 0 12px rgba(118, 109, 255, 0.08);
  filter: brightness(1.16) saturate(1.2);
}

@media (hover: hover) and (pointer: fine) {

  #game-logs-modal .gamelogs-season-tab:hover,
  #game-logs-modal .gamelogs-view-option:hover {
    color: var(--color-text-primary);
    border-color: rgba(250, 250, 250, 0.18);
    background: rgba(255, 255, 255, 0.04);
  }
}

@media (max-width: 640px) {
  #game-logs-modal .gamelogs-nav-row {
    gap: 2.15rem;
    margin-bottom: 0.45rem;
    margin-right: 0;
    padding: 0 0.15rem;
  }

  #game-logs-modal .gamelogs-season-tabs {
    gap: 0.5rem;
  }

  #game-logs-modal .gamelogs-season-tab {
    padding: 0.3rem 0.52rem;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
  }

  #game-logs-modal .gamelogs-view-option {
    padding: 0.2rem 0.52rem;
    font-size: 0.75rem;
    letter-spacing: 0;
    width: 5.3rem;
    border-radius: 6px;
  }

  #game-logs-modal .gamelogs-view-option i {
    font-size: 14px;
  }
}

/* · · Summary Chips · · */
.summary-chip {
  position: relative;
  background: rgb(0 0 0 / 0%);
  backdrop-filter: blur(1px) saturate(180%);
  border: 1px solid rgba(250, 250, 250, 0.1);
  border-radius: 13px;
  padding: 1.25rem;
  box-shadow: 0 8px 32px rgba(31, 38, 105, 0.1), inset 0 6px 20px rgba(255, 255, 255, 0.013);
}

/* AFTER */
.summary-chip::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 13px;
  backdrop-filter: blur(1px);
  box-shadow: inset 10px 12px 0px -8px rgba(255, 255, 255, .05),
    inset 0px 8px 0px -6px rgba(255, 255, 255, .051);
  opacity: 0.4;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(100%);
  pointer-events: none;
}

.summary-chip {
  padding: 0.27rem 0.6rem;
  text-align: center;
  min-width: auto;
  white-space: nowrap;
}

.summary-chip h4 {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 0.1rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-panel-border);
  padding-bottom: 0.1rem;
}

.chip-values {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  font-weight: 400;
}

.chip-separator {
  color: var(--color-text-tertiary);
  font-size: 0.8rem;
  font-weight: 400;
}

/* · · GameLogs Summary Chips · · */
#game-logs-modal .gamelogs-summary-chip {
  flex: 1;
  padding: 0.25rem 0.7rem;
  text-align: center;
  white-space: nowrap;
  min-width: auto;
  position: relative;
  background: rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(1px) saturate(180%);
  border: 1px solid rgba(250, 250, 250, 0.1);
  border-radius: 13px;
  box-shadow: 0 8px 32px rgba(31, 38, 105, 0.1), inset 0 6px 20px rgba(255, 255, 255, 0.013);
}

#game-logs-modal .gamelogs-summary-chip::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 13px;
  backdrop-filter: blur(1px);
  box-shadow: inset 10px 12px 0px -8px rgba(255, 255, 255, .03),
    inset 0px 8px 0px -6px rgba(255, 255, 255, .031);
  opacity: 0.4;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(100%);
  pointer-events: none;
}

#game-logs-modal .gamelogs-summary-chip h4 {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 0.1rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-panel-border);
  padding-bottom: 0.1rem;
  gap: 0.5rem;
}

#game-logs-modal .gamelogs-summary-chip .chip-header-value {
  font-size: 0.8rem;
}

#game-logs-modal .gamelogs-summary-chip .chip-values {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.00rem;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  font-weight: 400;
}

#game-logs-modal .gamelogs-summary-chip .chip-separator {
  margin: 0 0.25rem;
}

.chip-pos-rank-label {
  font-size: 0.85em;
  font-weight: 400;
  margin-top: 0.05rem;
}

.pos-rank-container {
  display: inline-flex;
  align-items: center;
}

.pos-color-QB {
  color: var(--color-text-secondary);
}

.pos-color-RB {
  color: var(--color-text-secondary);
}

.pos-color-WR {
  color: var(--color-text-secondary);
}

.pos-color-TE {
  color: var(--color-text-secondary);
}

.week-column-header {
  font-weight: 700;
  text-align: center;
}

#modal-body thead .week-column-header,
#modal-body tbody .week-cell,
#modal-body tfoot .week-column-header {
  color: #8f93ab;
  padding-right: 1px;
  padding-left: 1px;
}

#modal-body tbody .week-cell {
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  padding: 0rem 0.2rem;
  /* tighter rows */
}

/* Game log week tag container */
#game-logs-modal .gamelog-week-tag {
  --week-tag-w: 57px;
  --week-tag-h: 26px;
  /* reduced to keep compact with smaller inter-line gap */
  position: relative;
  display: inline-grid;
  align-items: center;
  justify-items: center;
  width: var(--week-tag-w);
  min-width: var(--week-tag-w);
  height: 1.2rem;
  min-height: 1.5rem;
  line-height: 1;
  /* normalize to avoid extra vertical space */
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
  -webkit-backdrop-filter: blur(1px) saturate(180%);
  backdrop-filter: blur(1px) saturate(180%);
  border: 1px solid rgba(250, 250, 250, 0.1);
  box-shadow: 0 8px 32px rgba(31, 38, 105, 0.10), inset 0 6px 20px rgba(255, 255, 255, 0.013);
}

#game-logs-modal .gamelog-week-tag::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(1px);
  box-shadow: inset 10px 12px 0px -8px rgba(255, 255, 255, .05),
    inset 0px 8px 0px -6px rgba(255, 255, 255, .051);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}

#game-logs-modal .unplayed-week-row .gamelog-week-tag {
  opacity: 0.52;
}

#game-logs-modal .live-week-row .gamelog-week-tag {
  opacity: 1;
}

/* Top line: WK-# */
#game-logs-modal .gamelog-week-tag-number {
  font-size: 0.6rem;
  /* touch smaller but larger than opponent */
  font-weight: 700;
  color: #8f93ab;
  margin: 0;
}

/* Bottom line: opponent • rank */
#game-logs-modal .gamelog-week-tag-opponent {
  font-size: 0.5rem;
  /* smaller than WK line */
  font-weight: 600;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.05rem;
  margin: 0;
  /* no extra vertical space */
}

#game-logs-modal .gamelog-week-tag-opponent-text {
  display: inline-block;
}

#game-logs-modal .gamelog-week-tag-separator {
  color: #8f93ab;
  opacity: 0.6;
  margin: 0px 1px;
}

#game-logs-modal .gamelog-week-tag-rank {
  display: inline-flex;
  align-items: baseline;
  /* bottom-align number and suffix */
  font-size: 0.5rem;
}

#game-logs-modal .gamelog-week-tag-rank-number {
  font-size: 0.95em;
  /* explicit for clarity */
  font-weight: 400;
}

#game-logs-modal .gamelog-week-tag-rank-suffix {
  font-size: 0.9em;
  /* relative to number (0.9 of 0.5rem = 0.45rem) */
  font-weight: 400;
}

.week-cell .week-number,
.week-opponent-label {
  display: inline-block;
  vertical-align: middle;
}

.week-opponent-separator {
  display: inline-block;
  margin: 0 0.15rem;
  color: inherit;
  opacity: 0.7;
}

.week-opponent-label {
  /* Keep the label at the cell's base font size so annotations scale the same as other stat annotations across the table. Previous fixed sizing caused the annotation to appear mismatched. */
  font-size: .5rem;
  line-height: 1;
  margin-top: 0;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  /* vertically center annotation and label */
  gap: 0.01rem;
}

/* Make the opponent rank annotation inline, centered, and wrapped in parentheses without affecting other stat-rank annotations elsewhere. Keep sizing identical to the general .has-rank-annotation rule. */
.week-opponent-label .stat-rank-annotation {
  /* Restore the original compact sizing and importance that was used for week label annotations. Keep transform cleared so it sits vertically centered next to the opponent label. This selector intentionally targets only the opponent instance. */
  display: inline-block;
  font-size: 0.5rem !important;
  line-height: 1;
  margin-left: 0.12em !important;
  transform: translateY(-0.15em) !important;
  /* ensure no upward offset */
  font-weight: 400 !important;
}

/* · · Table Footer · · */
.modal-table-footer-label {
  line-height: 1.1;
  padding-top: 0.3rem;
  padding-bottom: 0rem;
  vertical-align: middle;
}

.modal-table-footer-label .season-label {
  margin-top: 4px;
  font-size: 1.15em;
  /* tweak */
  color: var(--color-text-secondary);
}

.modal-table-footer-label .gp-label {
  font-size: 0.95em;
  color: var(--color-text-tertiary);
  display: block;
  margin-top: 1.2px;
}

/* · · Unplayed and Bye Week Row Styles · · */
#modal-body tbody tr.unplayed-week-row {
  opacity: 0.82;
}

#modal-body tbody tr.unplayed-week-row td {
  color: #a3a9cf;
}

#modal-body tbody tr.bye-week-row {
  opacity: 0.82;
}

#modal-body tbody tr.bye-week-row td {
  color: #a3a9cf;
}

/* Footer stat: stack rank annotation directly below value with minimal spacing */
#game-logs-modal tfoot td.has-rank-annotation {
  vertical-align: bottom;
  padding-bottom: 0rem;
  padding-top: 0.2rem;
}

#game-logs-modal tfoot td.has-rank-annotation .stat-value {
  display: block;
  line-height: 1.08;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

#game-logs-modal td.proj-cell {
  color: rgba(175, 181, 211, 0.68);
  font-style: italic;
  font-size: 0.85em;
}

#game-logs-modal tfoot td.has-rank-annotation .stat-rank-annotation {
  display: block;
  line-height: 1;
  margin-top: 0.02rem;
  white-space: nowrap;
  font-size: 0.65rem;
  font-weight: 400;
  text-align: center;
}

#game-logs-modal tfoot td.has-rank-annotation .stat-rank-annotation--bulleted {
  text-align: center;
}

#game-logs-modal tfoot td.has-rank-annotation .stat-rank-annotation .stat-rank-bullet {
  display: inline-block;
  font-size: 0.75em;
  opacity: 0.7;
  margin: 0 0.05rem;
}

/* Divider between completed and upcoming weeks */
#game-logs-modal tbody tr.week-divider-row td {
  padding: 0.15rem 0rem 0rem 0rem;
}

#game-logs-modal tbody tr.week-divider-row td::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(160, 170, 210, 0.04), rgba(160, 170, 210, 0.1), rgba(160, 170, 210, 0.05), rgba(160, 170, 210, 0.1), rgba(160, 170, 210, 0.07));
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.24rem;
  margin-top: 0.4rem;
  margin-bottom: 0.15rem;
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: var(--color-text-tertiary);
}

#player-comparison-modal .modal-footer {
  margin-top: 0.25rem;
  margin-bottom: 0.05rem;
}

.modal-info-btn {
  font-size: 0.75rem;
  line-height: 0.8rem;
  cursor: pointer;
  transition: color 0.2s ease, filter 0.2s ease, transform 0.1s ease;
}

/* Desktop-only hover (prevents color sticking on mobile) */
@media (hover: hover) and (pointer: fine) {
  .modal-info-btn:hover {
    color: var(--color-text-primary);
  }
}

.modal-info-btn.active {
  color: var(--color-text-primary);
  filter: drop-shadow(0 0 8px rgba(154, 153, 242, 0.6)) drop-shadow(0 0 12px rgba(154, 153, 242, 0.4)) brightness(1.15);
}

.modal-info-btn.active .key-chip {
  border-color: rgba(154, 153, 242, 0.3);
  background: rgba(154, 153, 242, 0.08);
  box-shadow: 0 0 16px rgba(154, 153, 242, 0.4),
    0 8px 32px rgba(31, 38, 135, 0.2),
    inset 0 4px 20px rgba(255, 255, 255, 0.08);
}

/* · · Key-Button · · */
.key-chip {
  position: relative;
  background: rgba(255, 255, 255, 0.005);
  backdrop-filter: blur(3px) saturate(170%);
  border: 1px solid rgba(250, 250, 250, 0.06);
  border-radius: 4px;
  padding: 5px 4px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.05);
}

.key-chip::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 4px;
  backdrop-filter: blur(3px);
  box-shadow: inset 7.5px 10px 0px -11px rgba(255, 255, 255, .25),
    inset 0px 10px 0px -8px rgba(255, 255, 255, .01);
  opacity: 0.4;
  z-index: -1;
  filter: blur(2px) drop-shadow(10px 4px 6px black) brightness(115%);
  pointer-events: none;
}

/* · · Key Panel · · */
.stats-key-panel {
  background: var(--color-panel-bg);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--card-border-radius);
  padding: 0.2rem 0.5rem;
  margin-top: 1rem;
  overflow-y: auto;
}

#game-logs-modal .stats-key-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 1rem;
  overflow-y: auto;
  border-radius: 9px;
  background: rgb(21 22 37 / 95%);
  border: 1px solid #4423c60a;
  box-shadow: 0 2px 8px rgba(250, 250, 254, 0.92),
    inset 0px 0px 155px rgba(216, 215, 255, 0.1);
  z-index: 5;
}

/* Radar Chart Container - Same overlay behavior */
#game-logs-modal #radar-chart-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.41rem;
  overflow-y: auto;
  border-radius: 9px;
  background: #7770;
  box-shadow: 0 8px 32px rgba(31, 38, 105, 0), inset 0 4px 58px rgba(255, 255, 255, 0.05);
  z-index: 5;
  border: 1px solid #77a4;
}

/* News Container - Same overlay behavior */
#game-logs-modal #news-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 1rem;
  overflow-y: auto;
  border-radius: 9px;
  background: rgba(13, 14, 27, 0.95);
  border: 1px solid #444;
  box-shadow: 0 8px 32px rgba(31, 38, 105, 0.2), inset 0 6px 18px rgba(255, 255, 255, 0.04);
  z-index: 5;
}

/* Consistency Container - Same overlay behavior */
#game-logs-modal #consistency-container {
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.2rem;
  border-radius: 9px;
  background: rgba(4, 6, 14, 0);
  border: 1px solid rgba(115, 158, 255, 0.2);
  box-shadow: 0 8px 32px rgba(31, 38, 105, 0.2), inset 0 6px 18px rgba(255, 255, 255, 0.04);
  z-index: 5;
  overflow: hidden;
}

/* Hide game logs table when consistency or radar panel is visible */
#game-logs-modal #consistency-container:not(.hidden)~.game-logs-table-container,
#game-logs-modal #modal-body:has(#consistency-container:not(.hidden)) .game-logs-table-container,
#game-logs-modal #radar-chart-container:not(.hidden)~.game-logs-table-container,
#game-logs-modal #modal-body:has(#radar-chart-container:not(.hidden)) .game-logs-table-container,
#game-logs-modal #modal-body:has(#consistency-container:not(.hidden)) .game-logs-szn-view,
#game-logs-modal #modal-body:has(#radar-chart-container:not(.hidden)) .game-logs-szn-view {
  opacity: 0;
  pointer-events: none;
}

.stats-key-panel:not(.radar-panel) h4 {
  font-size: 0.95rem;
  font-weight: 200;
  color: var(--color-text-primary);
  margin-bottom: 0.3rem;
  margin-top: 0rem;
  text-align: center;
  border: 1px solid var(--color-panel-border);
  border: 0.0625rem solid rgba(250, 250, 250, 0.06);
  border-radius: 5px;
  background: #4f40701f;
}

.radar-panel h4 {
  font-size: 0.95rem;
  font-weight: 200;
  color: var(--color-text-primary);
  margin-bottom: 0.3rem;
  margin-top: 0rem;
  text-align: center;
  border: 1px solid var(--color-panel-border);
  border: 1px solid rgba(250, 250, 250, 0.05);
  border-radius: 5px;
  background: #fff0;
}

.stats-key-panel ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0rem 1.25rem;
  justify-content: center;
}

@media (max-width: 540px) {
  .stats-key-panel ul {
    grid-template-columns: 1fr;
    gap: 0.05rem;
    padding: 0 0.5rem;
  }

  .stats-key-panel li {
    display: flex;
    padding: 0.12rem 0rem !important;
  }

  .stats-key-panel strong {
    width: auto;
    margin-right: 1em;
  }
}

.stats-key-panel li {
  font-size: 0.7rem;
  color: var(--color-text-teriary);
  padding: 0 0.25rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.stats-key-panel li:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.stats-key-panel strong {
  color: var(--color-text-secondary);
  font-weight: 700;
  margin-right: 0.5em;
  display: inline-block;
  width: 74px;
  text-align-last: center;
}

/* ⬇︎ CONSISTENCY PANEL STYLES ⬇︎ */
.consistency-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.01rem;
}

/* Eyebrow Header */
.consistency-eyebrow-header {
  text-align: center;
  margin-bottom: 0rem;
}

/* HUD Section */
.consistency-hud {
  display: grid;
  grid-template-columns: minmax(0, 1.0fr) minmax(0, 2fr) minmax(0, 1.0fr);
  gap: 0.7rem;
  align-items: stretch;
  padding: 0rem 0rem 0rem;
  border-radius: 16px;
}

.hud-segment--right {
  order: 3;
}

.hud-segment--center {
  order: 2;
}

.hud-segment {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.hud-segment--left,
.hud-segment--right {
  align-items: center;
}

.hud-segment--center {
  align-items: center;
}

/* Progress Circles */
.progress-circle {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(rgba(55, 65, 155, 0.22), #3335);
  border: 1px solid rgba(151, 194, 255, 0.42);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(255, 255, 255, 0.02);
}

.progress-ring {
  position: absolute;
  top: -8px;
  left: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  transform: rotate(-90deg);
}

.progress-ring-track {
  fill: none;
  stroke: rgba(90, 112, 164, 0.15);
  stroke-width: 7;
}

.progress-ring-fill {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: calc(289 * (1 - var(--progress, 0)));
}

.progress-ring-fill--ceiling {
  transform-origin: 60px 60px;
}

.progress-circle-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.02rem;
}

.progress-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #7cf5ff;
  text-shadow: 0 0 16px rgba(124, 245, 255, 0.52);
}

.progress-circle--ceiling .progress-value .ceiling-rank-suffix {
  font-size: 0.7em;
  font-weight: 500;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
}

.progress-label {
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9096c0;
  line-height: 1.1;
}

.progress-caption {
  font-size: 0.46rem;
  color: #6b7096;
}

/* Center HUD Stats */
.hud-player {
  margin-bottom: 0.05rem;
}

.hud-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b7096;
  text-shadow: 0 0 12px #60F9;
}

.hud-player-name {
  font-weight: 600;
}

.hud-context {
  margin-top: 0.2rem;
  font-size: 0.62rem;
  color: #9096c0;
  text-align: center;
}

.hud-metrics {
  display: flex;
  gap: 3.75rem;
  justify-content: center;
}

.metric-block {
  display: flex;
  flex-direction: column;
}

.metric-label {
  font-size: 0.54rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #9aa2dc;
}

.metric-primary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.metric-primary--single {
  gap: 0;
}

.metric-value {
  font-size: 1rem;
  font-weight: 500;
  color: #9f8bff;
  align-self: center;
}

.metric-value--rank {
  letter-spacing: 0.08em;
}

.metric-sub {
  font-size: 0.48rem;
  color: #7cf5ff;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
}

.metric-sub-label {
  color: #9096c0;
  font-weight: 500;
}

.metric-sub-value {
  font-weight: 600;
}

.consistency-hud .hud-insights {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
}

.hud-context-divider {
  margin: 0 0.32rem;
  color: rgba(239, 246, 255, 0.45);
  font-weight: 600;
}

.consistency-hud .hud-insight.summary-chip {
  position: relative;
  flex: 1 1 60px;
  min-width: 0;
  padding: 0.1rem 0.25rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.051);
  box-shadow: 0 8px 20px rgba(3, 4, 12, 0.3), inset 0 19px 0 rgba(255, 255, 255, 0.012);
  display: flex;
  flex-direction: column;
}

.consistency-hud .hud-insight.summary-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.05);
  opacity: 0.5;
  pointer-events: none;
}

.hud-insight-label {
  font-size: 0.58rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(194, 208, 255, 0.78);
}

.hud-insight-value {
  font-size: 0.8rem;
  font-weight: 500;
  color: #a0a6b5;
  text-shadow: 0 0 6px rgba(124, 181, 255, 0.2);
}

.hud-insight-value .hud-insight-suffix {
  color: rgba(160, 166, 181, 0.72);
  font-weight: 400;
  text-shadow: none;
}

@media (min-width: 641px) {
  .hud-insight-value .hud-insight-suffix {
    font-size: 0.75rem;
  }
}

.hud-insight-value .csty-made {
  font-weight: 700;
}

.hud-insight-value .csty-total {
  color: rgba(160, 166, 181, 0.72);
  font-weight: 400;
  text-shadow: none;
}

/* Chart Shell */
.consistency-chart-shell {
  margin-top: 0.45rem;
  padding: 0px;
  border-radius: 10px;
  border: 0px solid rgba(115, 158, 255, 0.35);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08), inset 0 1px 60px rgba(255, 255, 255, 0.018);
  overflow: hidden;
  background: #1128;
}

.weekly-chart-box {
  position: relative;
  width: 100%;
  height: 287px;
  overflow: hidden;
  border-radius: 8px;
}

.weekly-zone-summary {
  position: absolute;
  top: 0.25rem;
  left: 0.4rem;
  right: 0.4rem;
  display: flex;
  justify-content: space-around;
  gap: 0.4rem;
  z-index: 7;
  pointer-events: none;
}

.zone-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  font-size: 0.44rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 9, 20, 0.76);
  box-shadow: 0 6px 18px rgba(4, 8, 18, 0.35);
  backdrop-filter: blur(14px);
  pointer-events: none;
}

.zone-chip-label {
  color: rgba(239, 246, 255, 0.78);
  font-weight: 600;
  font-size: 0.52rem;
}

.zone-chip-threshold {
  color: rgba(239, 246, 255, 0.55);
  font-weight: 500;
  font-size: 0.52rem;
  letter-spacing: 0.02em;
}

.zone-chip-value {
  font-weight: 700;
  color: #f8faff;
  font-size: 0.62rem;
}

.zone-chip--low {
  border-color: rgb(194 108 252 / 29%);
  background: rgb(194 108 252 / 6%);
  color: #e7d2ff;
}

.zone-chip--solid {
  border-color: rgb(0 197 255 / 20%);
  background: rgb(0 197 255 / 8%);
  color: #d1f6ff;
}

.zone-chip--high {
  border-color: rgb(0 255 193 / 18%);
  background: rgb(0 255 231 / 7%);
  color: #d6fff6;
}

.consistency-empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-size: 0.85rem;
  color: rgba(239, 246, 255, 0.78);
  background: rgba(4, 10, 21, 0.72);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  z-index: 6;
}

.weekly-chart-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(transparent calc(100% - 326px), rgba(255, 255, 255, 0.03) calc(100% - -12px));
  background-size: 99% 28px;
  border-radius: 1px;
}

.weekly-chart-line-layer {
  position: absolute;
  inset: 2.9rem 0.05rem 1.75rem 0.05rem;
  z-index: 4;
  border-radius: 14px;
}

.weekly-chart-x-axis {
  position: absolute;
  bottom: 1px;
  left: 0rem;
  right: 1px;
  display: block;
  font-size: .7rem;
  color: rgba(239, 246, 255, 0.82);
  background: rgb(181 198 259 / 4%);
  border-top: 1px solid rgba(239, 246, 255, 0.06);
  border-radius: 0 0 6px 6px;
  backdrop-filter: blur(10px);
  padding: 0.25rem 0.35rem 0.25rem;
  letter-spacing: 0.04em;
  z-index: 5;
  min-height: 1.6rem;
  overflow: visible;
}

.weekly-chart-x-axis>span {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}

.weekly-chart-x-axis>span.axis-week-missed {
  color: rgba(239, 246, 255, 0.38);
  opacity: 0.55;
  text-shadow: none;
}

.weekly-chart-line-layer .weekly-skip-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(175, 181, 211, 0.68);
  /* match PROJ column tint */
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  background: rgba(18, 24, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  padding: 2px 4px;
  line-height: 1.05;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

@media (max-width: 540px) {
  .weekly-chart-line-layer .weekly-skip-label {
    font-size: 0.42rem;
    padding: 1px 2px;
    background: rgba(18, 24, 40, 0.7);
    color: rgba(200, 208, 230, 0.8);
    line-height: 1;
  }

  .weekly-zone-summary {
    gap: 0.25rem;
  }

  .zone-chip {
    gap: 0.12rem;
    padding: 0.14rem 0.32rem;
    font-size: 0.38rem;
  }

  .zone-chip-label {
    font-size: 0.45rem;
    line-height: 0.45rem;
  }

  .zone-chip-threshold {
    font-size: 0.46rem;
    line-height: 0.46rem;
  }

  .zone-chip-value {
    font-size: 0.58rem;
    line-height: 0.6rem;
    margin-left: 3px;
  }
}

.weekly-zone {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  border-radius: 2px;
}

.weekly-zone-label {
  position: absolute;
  top: 4px;
  right: 0.4rem;
  font-size: 0.36rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 0.08rem 0.28rem 0.11rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(1, 4, 11, 0.78);
  color: rgba(239, 246, 255, 0.62);
  backdrop-filter: blur(12px);
}

.weekly-zone--bad {
  background: linear-gradient(180deg, rgb(233 96 255 / 3%), rgba(5, 7, 15, 0));
  border-radius: 4px 4px 4px 4px;
}

.weekly-zone--good {
  background: linear-gradient(180deg, rgb(0 157 255 / 4%), rgba(55, 75, 105, .01));
  border-radius: 4px;
}

.weekly-zone--great {
  background: linear-gradient(180deg, rgb(0 244 248 / 4%), rgba(155, 175, 185, .01));
  border-radius: 7px;
}

.weekly-area-path {
  mix-blend-mode: normal;
}

.weekly-point {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 3px solid #ffffff;
  transform: translate(-50%, -50%);
  background: transparent;
  box-shadow: 0 10px 22px rgba(6, 10, 24, 0.45);
  cursor: pointer;
  z-index: 5;
  transition: transform 0.2s ease;
}

.weekly-point::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--point-color, #00c5ff);
  box-shadow: 0 6px 16px rgba(5, 9, 22, 0.35);
}

.weekly-point[data-zone="low"] {
  --point-color: #c26cfc;
}

.weekly-point[data-zone="solid"] {
  --point-color: #00c5ff;
}

.weekly-point[data-zone="high"] {
  --point-color: #00ffc1;
}

.weekly-point-label {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translate(-50%, -100%);
  border-radius: 0.55rem;
  padding: 0.18rem 0.14rem;
  text-align: center;
  min-width: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  pointer-events: none;
  line-height: 1.05;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  box-shadow: 0 8px 24px rgba(4, 10, 25, 0.35);
  background: rgba(5, 9, 20, 0.78);
}

.weekly-point-label--low {
  background: rgba(194, 108, 252, 0.16);
  border-color: rgba(194, 108, 252, 0.45);
  box-shadow: 0 10px 20px rgba(194, 108, 252, 0.18);
}

.weekly-point-label--solid {
  background: rgba(0, 197, 255, 0.12);
  border-color: rgba(0, 197, 255, 0.4);
  box-shadow: 0 10px 20px rgba(0, 197, 255, 0.18);
}

.weekly-point-label--high {
  background: rgba(0, 255, 193, 0.12);
  border-color: rgba(0, 255, 193, 0.35);
  box-shadow: 0 10px 20px rgba(0, 255, 193, 0.2);
}

.weekly-point-label--capped::after {
  content: '✧';
  position: absolute;
  top: -2px;
  right: 23px;
  font-size: 0.6rem;
  font-weight: 800;
  color: #09ffb8;
  opacity: 0.9;
  pointer-events: none;
}

.weekly-point-label__value {
  font-size: 0.68rem;
  font-weight: 700;
  color: #f8faff;
  display: inline-flex;
  white-space: nowrap;
  order: 1;
}

.weekly-point-label__suffix {
  font-size: 0.44rem;
  font-weight: 600;
  color: #f8faff;
  order: 0;
  text-transform: none;
}

.weekly-curve-layer {
  pointer-events: none;
}



@media (max-width: 640px) {
  #consistency-container {
    padding: 0.6rem;
  }

  .consistency-hud {
    gap: 0.2rem;
    padding: 0.045rem 0.5rem 0.048rem;
    border-radius: 13px;
  }

  .progress-circle {
    width: 70px;
    height: 70px;
    padding: 4px;
  }

  .progress-ring-track,
  .progress-ring-fill {
    stroke-width: 7;
  }

  .progress-value {
    font-size: 0.82rem;
  }

  .progress-label {
    font-size: 0.4rem;
    letter-spacing: 0.08em;
  }

  .progress-caption {
    font-size: 0.3rem;
  }

  .hud-eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.07em;
  }

  .hud-context {
    margin-top: 0.18rem;
    font-size: 0.54rem;
  }

  .hud-context-divider {
    margin: 0 0.18rem;
  }

  .hud-metrics {
    gap: 1.5rem;
    margin: 0.02rem 0 0.14rem;
  }

  .metric-label {
    font-size: 0.4rem;
    letter-spacing: 0.11em;
  }

  .metric-value {
    font-size: 0.7rem;
  }

  .metric-sub {
    font-size: 0.48rem;
  }

  .consistency-hud .hud-insights {
    margin-top: -0.05rem;
    gap: 0.3rem;
  }

  .consistency-hud .hud-insight.summary-chip {
    flex: 1 1 calc(30% - 0.24rem);
    padding: 0.085rem 0.02rem;
  }

  .hud-insight-label {
    font-size: 0.40rem;
  }

  .hud-insight-value {
    font-size: 0.55rem;
    margin-top: -2px;
  }

  .consistency-chart-shell {
    margin-top: 0.23rem;
    border-radius: 8px;
  }

  .weekly-chart-box {
    height: 253px;
    overflow-y: hidden;
  }

  .weekly-chart-line-layer {
    inset: 1.9rem 0.02rem 1rem 0.02rem;
  }

  .weekly-chart-x-axis {
    background: #3462;
    border-radius: 0 0 4px 4px;
    left: -0.1rem;
    right: -0.1rem;
    font-size: 0.52rem;
    padding: 0.08rem 0.18rem 0.12rem;
    min-height: 1.3rem;
    font-weight: 800;
  }

  /* Mobile-only: make the "WK" prefix slightly smaller than the week number */
  .weekly-chart-x-axis .axis-week-prefix {
    font-size: 0.7em;
    letter-spacing: 0em;
    opacity: 11;
    font-weight: 400;
  }

  .weekly-zone-summary {
    top: 0.14rem;
    gap: 1.68rem;
  }

  .zone-chip {
    padding: 0.1rem 0.4rem;
    font-size: 1.42rem;
    letter-spacing: 0.025em;
  }

  .weekly-zone {
    left: 0;
  }

  .weekly-zone-label {
    font-size: 0.28rem;
    padding: 0.05rem 0.2rem 0.08rem;
    letter-spacing: 0.07em;
  }

  .weekly-point {
    width: 7px;
    height: 7px;
    border-width: 2px;
  }

  .weekly-point::after {
    inset: 2px;
  }

  .weekly-point-label {
    top: -4px;
    min-width: 20px;
    padding: 0.07rem 0.07rem;
    border-radius: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    gap: 0rem;
    flex-direction: column;
  }

  .weekly-point-label--capped::after {
    top: -2px;
    right: 18px;
    font-size: 0.45rem;
    color: #00ffc0;
    text-shadow: 0 0 5px rgb(0 188 143);
    opacity: 0.9;
  }

  .weekly-point-label__week {
    display: none;
  }

  .weekly-point-label__suffix {
    order: 0;
    font-size: 0.34rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
  }

  .weekly-point-label__value {
    order: 1;
    font-size: 0.5rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 0;
  }

}

/* ⬇︎ PLAYER-COMP MODAL ⬇︎ */
#player-comparison-modal .modal-content {
  width: 95%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
}

/* ? */
#player-comparison-modal .modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ? */
.player-comparison-container {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-height: 0;
}

.player-names-row {
  display: flex;
  width: 100%;
}

/* · · Plyr Name Header · · */
.player-name-header-container {
  flex: 1;
  text-align: center;
}

.player-name-header {
  font-size: 0.9rem;
  font-weight: 400;
  color: #aAaBC0;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0rem;
  margin-top: 1px;
}

.player-name-header-link {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: #def6;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.player-name-header-link:hover,
.player-name-header-link:focus-visible {
  color: var(--color-accent-primary);
  text-decoration: underline;
  outline: none;
}

.player-header-tags {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.1rem;
}

.player-header-tags .modal-pos-tag {
  font-size: 0.75rem;
  padding: 2px 6px;
  line-height: 0.85rem;
}

.player-header-tags .modal-team-logo-chip {
  padding: 0px 5px;
}

.player-header-tags .modal-team-logo-chip span {
  font-size: 0.7rem;
}

.player-header-tags .modal-team-logo-chip img.team-logo {
  width: 17px;
  height: 17px;
}

#close-comparison-key {
  cursor: pointer;
  float: right;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}

#close-comparison-key:hover {
  color: var(--color-text-primary);
}

.comparison-summary-chips-row {
  display: flex;
  justify-content: space-around;
  gap: 0.75rem;
  flex-wrap: nowrap;
  padding: 0.35rem 0;
  border-top: 1px solid var(--color-panel-border);
  border-bottom: 1px solid var(--color-panel-border);
}

/* · · Table Header · · */
.player-header h4 {
  font-size: 0.8rem;
  font-weight: 500;
  margin: 0;
  color: var(--color-text-secondary);
}

.player-header h4 {
  display: inline-block;
  max-width: 14ch;
  /* ~16 characters wide */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* shows … at the end */
}

.player-pos-team {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.summary-chips-container {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 225px;
}

/* · · Player Comp Table · · */
.player-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
  table-layout: fixed;
}

/* Keep the generic has-rank-annotation rule for tables and other places */
.has-rank-annotation {
  white-space: nowrap;
}

/* Restore compact inline annotation for general UI (player cards, tables) */
.has-rank-annotation .stat-rank-annotation {
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  margin-left: 0.1em;
  transform: translateY(-0.25em);
  color: #eefd;
  font-weight: 300;
}

/* For the comparison list, show the stat rank below the stat value and slightly larger */
.comparison-list .has-rank-annotation {
  white-space: normal;
  /* allow the annotation to wrap below */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0rem;
  /* very tight spacing so rank sits just under the stat */
}

.comparison-list .has-rank-annotation .stat-rank-annotation {
  display: block;
  font-size: 0.82em;
  /* slightly smaller than stat but still visible */
  line-height: 1;
  margin-left: 0;
  margin-top: 0;
  /* no extra spacing */
  transform: none;
  letter-spacing: 0.02em;
  color: inherit;
  opacity: 0.95;
}

/* Smaller, tighter superscript for rank ordinals in the comparison modal */
.comparison-list .stat-rank-annotation sup {
  font-size: 0.6em;
  line-height: 1;
  margin-left: 0.08em;
  vertical-align: baseline;
  opacity: 0.95;
  font-variant-numeric: ordinal;
}

.player-comparison-table th,
.player-comparison-table td {
  padding: 0.25rem;
  text-align: center;
  border: 1px solid rgba(128, 138, 189, 0.02);
  white-space: nowrap;
  color: #a1a6be;
}

.player-comparison-table thead th {
  font-weight: 700;
  padding: 0.5rem 0.25rem;
  text-shadow: 1px 1px 1px #6300ff97;
}

.player-comparison-table thead .stat-header {
  width: 16%;
  color: #9096C0;
}

.player-comparison-table thead .player-header {
  width: 35%;
}

.player-comparison-table td.stat-label-cell {
  font-weight: 600;
  color: #b9bfe7;
}

.player-comparison-table--two-player thead .stat-header,
.player-comparison-table--two-player td.stat-label-cell {
  width: 15%;
  color: var(--color-text-secondary);
  text-shadow: 2px 2px 1px #5900ff99;
  font-weight: 500;
}

.player-comparison-table--two-player thead .player-header,
.player-comparison-table--two-player td.player-stat-cell {
  width: 40%;
}

.player-comparison-table tbody tr:nth-child(odd) {
  background-color: rgba(215, 205, 255, 0.007);
}

.player-comparison-table .best-stat {
  color: #7ae0d09a;
  font-weight: 700;
}

/* · · Summary Chips · · */
#player-comparison-modal .summary-chip {
  padding: 0.05rem 0.85rem;
  /* Further reduced padding */
  text-align: center;
  min-width: auto;
  position: relative;
  background: rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(1px) saturate(180%);
  border: 1px solid rgba(250, 250, 250, 0.1);
  border-radius: 13px;
  box-shadow: 0 8px 32px rgba(31, 38, 105, 0.1), inset 0 6px 20px rgba(255, 255, 255, 0.013);
  width: 100%;
}

#player-comparison-modal .summary-chips-container:first-child {
  margin-left: 16px;
}

#player-comparison-modal .summary-chips-container:last-child {
  margin-right: 16px;
}

#player-comparison-modal .summary-chip h4 {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 0.05rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-panel-border);
  padding-bottom: 0.08rem;
  gap: 0.5rem;
}

#player-comparison-modal .summary-chip .chip-separator {
  margin: 0 0.25rem;
  /* adjust as needed */
}

.chip-header-value {
  font-size: 0.8rem;
}

#player-comparison-modal .chip-values {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  font-weight: 400;
}

/* · · Table Container · · */
.comparison-table-container {
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--color-panel-border);
  border-radius: 10px;
}

/* · · Page Header & Link · · */
#comparison-modal-header h3 {
  text-align: center;
  vertical-align: middle;
  margin-bottom: 2px;
  margin-top: -6px;
  font-weight: 400;
  color: var(--color-text-primary);
  text-shadow:
    0 0 4px rgba(43, 0, 255, 0.7),
    0 0 7px rgba(73, 0, 255, 0.4);
}

#comparison-modal-header h3 i {
  color: var(--color-text-secondary);
  text-shadow:
    0 0 3px rgba(43, 0, 255, 0.7),
    0 0 6px rgba(73, 0, 255, 0.6),
    0 0 12px rgba(103, 0, 255, 0.5);
}

#player-comparison-modal .modal-close-btn {
  margin-bottom: 3px;
  margin-top: -6px;
}

.game-log-link {
  cursor: pointer;
  font-size: 0.8rem;
  color: #9096C0fb;
  text-decoration: underline;
  text-decoration-color: #9096D0af;
}

.game-log-link:hover {
  color: #a3c7f9;
}

/* · · Key · · */
#comparison-stats-key-container {
  position: absolute;
  bottom: 45px;
  left: 1rem;
  right: 1rem;
  max-height: calc(100% - 150px);
  overflow-y: auto;
  background: rgba(13, 14, 27, 0.95);
  padding: 1rem;
  border: 1px solid #444;
  z-index: 102;
  border-radius: var(--card-border-radius);
}

#comparison-stats-key-container h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 0.5rem 0;
  text-align: center;
}

#comparison-stats-key-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 2rem;
}

#comparison-stats-key-container li {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
}

#comparison-stats-key-container strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* · · Key text color update · · */
#player-comparison-modal .modal-footer .key-chip {
  color: #7076A0;
}

#player-comparison-modal .modal-footer .key-chip:hover {
  color: var(--color-text-primary);
}

/* · · Compare button in trade preview · · */
#comparePlayersButton.enabled {
  opacity: 1.0;
}

#comparePlayersButton.enabled i {
  text-shadow:
    0 0 4px rgba(43, 0, 255, 0.7),
    0 0 7px rgba(73, 0, 255, 0.55),
    0 0 12px rgba(103, 0, 255, 0.4);
}

#comparePlayersButton.enabled .label {
  text-shadow:
    0 0 4px rgba(43, 0, 255, 0.6),
    0 0 7px rgba(73, 0, 255, 0.3);
}

#comparePlayersButton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  /* no gap between icon & label */
  color: #8787AF;
  font-size: 1rem;
  /* icon size */
  line-height: 1;
  /* kill extra inline spacing */
  padding: 1px 8px;
  min-height: 0;
  opacity: 0.4;
  transition: opacity 0.1s ease-in-out;
  margin-right: 0px;
  margin-top: 3px;
  text-decoration: none;
  /* remove underline on button */
}

/* Icon — block to remove baseline gap (covers FA <i> or SVG) */
#comparePlayersButton i {
  display: block;
  margin: 0;
  line-height: 1;
}

/* Label — pulled up to touch icon */
#comparePlayersButton .label {
  display: block;
  font-size: 0.55rem;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  padding: 0;
  margin-top: -2px;
  /* tweak to -1px/-3px if needed */
  text-decoration: none;
}

#comparePlayersButton:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-panel-border-glow);
}

.player-name-header-container {
  flex: 1;
  text-align: center;
}

@media (max-width: 768px) {
  #player-comparison-modal .modal-content {
    padding: 0.5rem;
    width: 98%;
    max-height: 90vh;
  }

  #player-comparison-modal .player-comparison-table {
    font-size: 0.7rem;
  }

  .player-comparison-table thead .stat-header {
    width: 22%;
  }

  .player-comparison-table thead .player-header {
    width: 35%;
  }

  .player-comparison-table--two-player thead .stat-header,
  .player-comparison-table--two-player td.stat-label-cell {
    width: 26%;
  }

  .player-comparison-table--two-player thead .player-header,
  .player-comparison-table--two-player td.player-stat-cell {
    width: 37%;
  }

  #player-comparison-modal .player-comparison-table th,
  #player-comparison-modal .player-comparison-table td {
    padding: 0.05rem;
  }

  #player-comparison-modal .comparison-summary-chips-row {
    gap: 0.8rem;
    padding: 0.25rem 0;
  }

  #player-comparison-modal .summary-chips-container {
    flex-grow: 1;
    flex-basis: 150px;
    /* Allow 2 chips per row on most phones */
  }

  #comparison-stats-key-container ul {
    columns: 1;
  }
}

/* Compact comparison list (replaces table view) */
#player-comparison-modal .comparison-list-container {
  padding: 0.2rem 0.35rem 0.8rem;
  overflow-y: auto;
}

#player-comparison-modal .comparison-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

#player-comparison-modal .comparison-row {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  gap: 0.4rem;
  padding: 0rem 0.4rem 0.3rem;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(15, 35, 55, 0.02), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(128, 138, 189, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 4px 12px rgba(0, 0, 0, 0.2);
}

#player-comparison-modal .comparison-left,
#player-comparison-modal .comparison-right {
  font-weight: 500;
  font-size: 0.8rem;
  /* larger stat value */
  text-align: center;
  color: var(--color-text-secondary);
}

#player-comparison-modal .comparison-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.005rem;
}

#player-comparison-modal .comparison-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

#player-comparison-modal .comparison-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(10, 12, 28, 0.3);
  display: flex;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

#player-comparison-modal .comparison-bar-left {
  background: linear-gradient(to right, #47befe, rgb(82 194 255 / 55%));
}

#player-comparison-modal .comparison-bar-right {
  background: linear-gradient(to left, #36ffddf2, rgb(0 231 192 / 59%));
}

#player-comparison-modal .comparison-bar-left.worse-stat-bar {
  opacity: 0.7;
  background: linear-gradient(to right, #02cfff61, rgb(1 200 247 / 70%));
}

#player-comparison-modal .comparison-bar-right.worse-stat-bar {
  opacity: 0.7;
  background: linear-gradient(to left, #03ffbd57, rgb(58 255 249 / 46%));
}

#player-comparison-modal .best-stat {
  color: var(--color-accent-trade-win) !important;
  text-shadow: 0 0 5px rgba(0, 245, 160, 0.5);
}

#player-comparison-modal .comparison-row .comparison-left.best-stat {
  color: var(--color-accent-secondary) !important;
  text-shadow: 0 0 5px rgba(66, 194, 255, 0.5);
}

@media (max-width: 520px) {
  #player-comparison-modal .comparison-row {
    grid-template-columns: 50px 1fr 50px;
    padding: 0rem 0.33rem 0.23rem 0.33rem;
    gap: 0.3rem;
  }

  /* slightly larger mobile font so stacked rank remains readable */
  #player-comparison-modal .comparison-left,
  #player-comparison-modal .comparison-right {
    font-size: 0.7rem;
  }

  #player-comparison-modal .comparison-label {
    font-size: 0.7rem;
  }

  #player-comparison-modal .comparison-bar {
    height: 7px;
  }
}

/* · · Team Logo Glow · · */
/* === Team Logo (inline tag) === */
img.team-logo {
  width: 19px;
  height: 19px;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  /* SVGs scale cleanly — no border-radius or image-rendering needed */
}

/* === TEAM LOGO GLOW (per-team via CSS variables) ======================
   - --team-glow : rgba color (includes alpha)
   - --glow-r3   : radius controlling how far the glow extends
   ====================================================================== */
img.team-logo.glow {
  width: 24px;
  height: 22px;
  object-fit: fill;
  vertical-align: middle;
  /* Reduced glow defaults for cleaner SVG rendering */
  --team-glow: rgba(0, 0, 0, 0.55);
  --glow-r3: 2.0px;
  filter: drop-shadow(0 0 var(--glow-r3) var(--team-glow));
}

/* NYJ logo: 1.5x larger + minimal glow for better visibility */
img.team-logo.glow[alt="NYJ"] {
  width: 31px;
  height: 22px;
}
.player-header-tags .modal-team-logo-chip img.team-logo.glow[alt="NYJ"] {
  width: 28px;
  height: 28px;
}

/* Per-team glow overrides (color + tweaked radius; single layer) */
img.team-logo.glow[alt="ARI"] {
  --team-glow: rgba(151, 35, 63, 0.60) !important;
  --glow-r3: 2.0px;
}

img.team-logo.glow[alt="ATL"] {
  --team-glow: rgba(255, 56, 95, 0.55) !important;
  --glow-r3: 2.0px;
}

img.team-logo.glow[alt="BAL"] {
  --team-glow: rgba(158, 43, 246, 0.60) !important;
  --glow-r3: 2.0px;
}

img.team-logo.glow[alt="BUF"] {
  --team-glow: rgba(198, 12, 48, 0.55) !important;
  --glow-r3: 2.0px;
}

img.team-logo.glow[alt="CAR"] {
  --team-glow: rgba(0, 133, 202, 0.60) !important;
  --glow-r3: 2.0px;
}

img.team-logo.glow[alt="CHI"] {
  --team-glow: rgba(120, 90, 240, 0.55) !important;
  --glow-r3: 2.0px;
}

img.team-logo.glow[alt="CIN"] {
  --team-glow: rgba(251, 79, 20, 0.60) !important;
  --glow-r3: 2.0px;
}

img.team-logo.glow[alt="CLE"] {
  --team-glow: rgba(225, 135, 0, 0.45) !important;
  --glow-r3: 1.6px;
}

img.team-logo.glow[alt="DAL"] {
  --team-glow: rgba(134, 147, 151, 0.50) !important;
  --glow-r3: 1.6px;
}

img.team-logo.glow[alt="DEN"] {
  --team-glow: rgba(251, 79, 20, 0.55) !important;
  --glow-r3: 2.0px;
}

img.team-logo.glow[alt="DET"] {
  --team-glow: rgba(0, 183, 235, 0.50) !important;
  --glow-r3: 1.8px;
}

img.team-logo.glow[alt="GB"] {
  --team-glow: rgba(0, 235, 150, 0.42) !important;
  --glow-r3: 1.6px;
}

img.team-logo.glow[alt="HOU"] {
  --team-glow: rgba(167, 25, 48, 0.60) !important;
  --glow-r3: 2.0px;
}

img.team-logo.glow[alt="IND"] {
  --team-glow: rgba(0, 183, 235, 0.55) !important;
  --glow-r3: 1.6px;
}

img.team-logo.glow[alt="JAX"] {
  --team-glow: rgba(0, 103, 120, 0.60) !important;
  --glow-r3: 2.0px;
}

img.team-logo.glow[alt="KC"] {
  --team-glow: rgba(255, 0, 64, 0.50) !important;
  --glow-r3: 1.8px;
}

img.team-logo.glow[alt="LAC"] {
  --team-glow: rgba(0, 191, 255, 0.45) !important;
  --glow-r3: 2.0px;
}

img.team-logo.glow[alt="LAR"] {
  --team-glow: rgba(0, 91, 200, 0.55) !important;
  --glow-r3: 1.8px;
}

img.team-logo.glow[alt="LV"] {
  --team-glow: rgba(165, 172, 175, 0.50) !important;
  --glow-r3: 1.8px;
}

img.team-logo.glow[alt="MIA"] {
  --team-glow: rgba(0, 142, 151, 0.55) !important;
  --glow-r3: 1.8px;
}

img.team-logo.glow[alt="MIN"] {
  --team-glow: rgba(115, 0, 255, 0.60) !important;
  --glow-r3: 2.0px;
}

img.team-logo.glow[alt="NE"] {
  --team-glow: rgba(255, 56, 95, 0.55) !important;
  --glow-r3: 2.0px;
}

img.team-logo.glow[alt="NO"] {
  --team-glow: rgba(160, 148, 101, 0.50) !important;
  --glow-r3: 1.8px;
}

img.team-logo.glow[alt="NYG"] {
  --team-glow: rgba(55, 56, 200, 0.60) !important;
  --glow-r3: 2.0px;
}

/* NYJ: minimal glow so the dark logo stays crisp */
img.team-logo.glow[alt="NYJ"] {
  --team-glow: rgba(17, 87, 64, 0.30) !important;
  --glow-r3: 1.2px;
}

img.team-logo.glow[alt="PHI"] {
  --team-glow: rgba(43, 140, 78, 0.60) !important;
  --glow-r3: 1.8px;
}

img.team-logo.glow[alt="PIT"] {
  --team-glow: rgba(255, 182, 18, 0.38) !important;
  --glow-r3: 1.6px;
}

img.team-logo.glow[alt="SEA"] {
  --team-glow: rgba(105, 190, 40, 0.50) !important;
  --glow-r3: 1.6px;
}

img.team-logo.glow[alt="SF"] {
  --team-glow: rgba(179, 153, 93, 0.45) !important;
  --glow-r3: 1.8px;
}

img.team-logo.glow[alt="TB"] {
  --team-glow: rgba(247, 122, 97, 0.45) !important;
  --glow-r3: 1.6px;
}

img.team-logo.glow[alt="TEN"] {
  --team-glow: rgba(75, 146, 219, 0.60) !important;
  --glow-r3: 2.0px;
}

img.team-logo.glow[alt="WAS"] {
  --team-glow: rgba(180, 36, 36, 0.60) !important;
  --glow-r3: 2.0px;
}

/* · · Team Tags in Game Log · · */
/* =====================================================================
   CHIP-ONLY PER-TEAM GLOW OVERRIDES
   Scope: affects logos only inside .player-tag.modal-team-logo-chip
   Values mirror the base per-team overrides above.
   ====================================================================== */
.player-tag.modal-team-logo-chip img.team-logo.glow[alt="ARI"] {
  --team-glow: rgba(151, 35, 63, 0.60) !important;
  --glow-r3: 2.0px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="ATL"] {
  --team-glow: rgba(255, 56, 95, 0.55) !important;
  --glow-r3: 2.0px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="BAL"] {
  --team-glow: rgba(158, 43, 246, 0.60) !important;
  --glow-r3: 2.0px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="BUF"] {
  --team-glow: rgba(198, 12, 48, 0.55) !important;
  --glow-r3: 2.0px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="CAR"] {
  --team-glow: rgba(0, 133, 202, 0.60) !important;
  --glow-r3: 2.0px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="CHI"] {
  --team-glow: rgba(120, 90, 240, 0.55) !important;
  --glow-r3: 2.0px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="CIN"] {
  --team-glow: rgba(251, 79, 20, 0.60) !important;
  --glow-r3: 2.0px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="CLE"] {
  --team-glow: rgba(225, 135, 0, 0.45) !important;
  --glow-r3: 1.6px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="DAL"] {
  --team-glow: rgba(134, 147, 151, 0.50) !important;
  --glow-r3: 1.6px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="DEN"] {
  --team-glow: rgba(251, 79, 20, 0.55) !important;
  --glow-r3: 2.0px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="DET"] {
  --team-glow: rgba(0, 183, 235, 0.50) !important;
  --glow-r3: 1.8px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="GB"] {
  --team-glow: rgba(0, 235, 150, 0.42) !important;
  --glow-r3: 1.6px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="HOU"] {
  --team-glow: rgba(167, 25, 48, 0.60) !important;
  --glow-r3: 2.0px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="IND"] {
  --team-glow: rgba(0, 183, 235, 0.55) !important;
  --glow-r3: 1.6px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="JAX"] {
  --team-glow: rgba(0, 103, 120, 0.60) !important;
  --glow-r3: 2.0px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="KC"] {
  --team-glow: rgba(255, 0, 64, 0.50) !important;
  --glow-r3: 1.8px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="LAC"] {
  --team-glow: rgba(0, 191, 255, 0.45) !important;
  --glow-r3: 2.0px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="LAR"] {
  --team-glow: rgba(0, 91, 200, 0.55) !important;
  --glow-r3: 1.8px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="LV"] {
  --team-glow: rgba(165, 172, 175, 0.50) !important;
  --glow-r3: 1.8px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="MIA"] {
  --team-glow: rgba(0, 142, 151, 0.55) !important;
  --glow-r3: 1.8px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="MIN"] {
  --team-glow: rgba(115, 0, 255, 0.60) !important;
  --glow-r3: 2.0px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="NE"] {
  --team-glow: rgba(255, 56, 95, 0.55) !important;
  --glow-r3: 2.0px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="NO"] {
  --team-glow: rgba(160, 148, 101, 0.50) !important;
  --glow-r3: 1.8px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="NYG"] {
  --team-glow: rgba(55, 56, 200, 0.60) !important;
  --glow-r3: 2.0px;
}

/* NYJ chip: minimal glow to match base override */
.player-tag.modal-team-logo-chip img.team-logo.glow[alt="NYJ"] {
  --team-glow: rgba(17, 87, 64, 0.30) !important;
  --glow-r3: 1.2px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="PHI"] {
  --team-glow: rgba(43, 140, 78, 0.60) !important;
  --glow-r3: 1.8px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="PIT"] {
  --team-glow: rgba(255, 182, 18, 0.38) !important;
  --glow-r3: 1.6px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="SEA"] {
  --team-glow: rgba(105, 190, 40, 0.50) !important;
  --glow-r3: 1.6px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="SF"] {
  --team-glow: rgba(179, 153, 93, 0.45) !important;
  --glow-r3: 1.8px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="TB"] {
  --team-glow: rgba(247, 122, 97, 0.45) !important;
  --glow-r3: 1.6px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="TEN"] {
  --team-glow: rgba(75, 146, 219, 0.60) !important;
  --glow-r3: 2.0px;
}

.player-tag.modal-team-logo-chip img.team-logo.glow[alt="WAS"] {
  --team-glow: rgba(180, 36, 36, 0.60) !important;
  --glow-r3: 2.0px;
}

/* · · Modal Layout Fit · · */
#player-comparison-modal {
  position: fixed;
  inset: 0;
  z-index: 15;
  /* below #tradeSimulator (20), above header (10) */
  display: block;
  /* don't center via flex */
  pointer-events: none;
  /* allow clicks only on content panel */
  background: transparent;
  /* no backdrop for this modal */
}

#player-comparison-modal .modal-overlay {
  display: none;
  /* hide dim overlay for this modal */
}

#player-comparison-modal .modal-content {
  position: fixed;
  /* we’ll set top/height via JS in openComparisonModal() */
  left: 0.85rem;
  right: 0.85rem;
  margin: 0 auto;
  max-width: 600px;
  width: auto;
  max-height: none;
  /* height is managed by JS */
  overflow: auto;
  /* scroll inside if needed */
  transform: none;
  /* no scale animation */
  opacity: 1;
  pointer-events: auto;
  /* clickable */
  padding-bottom: 0.05rem;
}

/* · · Overlay · · */
#comparison-modal-background-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 9;
  /* Below header (10) but above main content */
}

/* · · ✦ Modal BG, Blur, and Styling · · */
#player-comparison-modal .modal-content {
  /* keep your existing layout props */
  border-radius: 9px;
  border: 1px solid rgba(250, 250, 250, 0.05);
  background-color: rgba(13, 14, 35, 0.18);
  -webkit-backdrop-filter: blur(6px) saturate(110%) brightness(110%);
  backdrop-filter: blur(6px) saturate(110%) brightness(110%);
  box-shadow: 0 8px 32px rgba(31, 38, 85, 0.15), inset 0 6px 20px rgba(255, 255, 255, 0.013), inset 0 0 4px #fff1;
  /* create a local stacking context so the ::after sits correctly */
  isolation: isolate;
}

/* Highlight sheen layer (same as your .modal-body::after) */
#player-comparison-modal .modal-content::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background-color: rgba(13, 14, 35, 0.18);
  -webkit-backdrop-filter: blur(6px) saturate(110%) brightness(110%);
  backdrop-filter: blur(6px) saturate(110%) brightness(110%);
  box-shadow: inset 10px 12px 0px -8px rgba(255, 255, 255, .05), inset 0px 8px 0px -6px rgba(255, 255, 255, .051);
  opacity: 0.1;
  filter: blur(6px) drop-shadow(10px 4px 10px black) brightness(110%);
  pointer-events: none;
}

/* === Radar Chart Styles === */
.radar-chart-content {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 320px;
  position: relative;
}

#player-radar-canvas {
  max-width: 100%;
  max-height: 365px;
  width: 100% !important;
  height: 370px !important;
  padding: 8px 4px 0px 4px;
  background: #1230;
}

.no-data-message {
  color: #97a6d2;
  font-size: 14px;
  text-align: center;
  font-family: 'Product Sans', sans-serif;
}

/* === Game Logs Loading Animation === */
#game-logs-modal .modal-content {
  position: relative;
}

.game-logs-loading-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: inherit;
  background: rgba(13, 14, 27, 0.96);
  border: 1px solid rgba(128, 138, 189, 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 100;
  padding: 2rem;
}

/* Keep the close button usable above the loading overlay */
#game-logs-modal .modal-close-btn {
  z-index: 110;
}

.game-logs-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  width: 100%;
  padding-top: 0rem;
}

.game-logs-loading-spinner {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-logs-loading-spinner::before,
.game-logs-loading-spinner::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

/* Outer ring */
.game-logs-loading-spinner::before {
  width: 140px;
  height: 140px;
  border: 4px solid rgba(154, 153, 242, 0.12);
  border-top-color: rgba(154, 153, 242, 0.85);
  border-right-color: rgba(154, 153, 242, 0.65);
  animation: game-logs-spin 1.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  box-shadow: 0 0 20px rgba(154, 153, 242, 0.3);
}

/* Inner glow */
.game-logs-loading-spinner::after {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(154, 153, 242, 0.35), transparent 70%);
  animation: game-logs-pulse 1.8s ease-in-out infinite alternate;
}

@keyframes game-logs-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes game-logs-pulse {
  0% {
    opacity: 0.5;
    transform: scale(0.88);
  }

  100% {
    opacity: 0.95;
    transform: scale(1.08);
  }
}

.game-logs-loading-message {
  font-size: 1rem;
  line-height: 1.65;
  color: #BDC1D8;
  text-align: center;
  max-width: 420px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.game-logs-loading-message strong {
  color: var(--color-text-primary);
  font-size: 1.15rem;
  font-weight: 600;
  display: block;
  margin-bottom: 0.25rem;
}

.game-logs-loading-footer {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(189, 193, 216, 0.75);
  text-align: center;
  max-width: 500px;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(154, 153, 242, 0.15);
}

.game-logs-loading-footer em {
  font-style: italic;
}

/* Hide modal body background during loading */
#game-logs-modal .modal-body.loading {
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  height: 0;
  min-height: 0;
  padding: 0;
}

#game-logs-modal .modal-body.loading::after {
  display: none;
}

/* Hide footer buttons completely during loading */
#game-logs-modal.loading .modal-footer {
  display: none;
}

/* === End Game Logs Loading Animation === */

@media (max-width: 640px) {

  #game-logs-modal:not(.hidden) .modal-content,
  #player-comparison-modal:not(.hidden) .modal-content {
    height: 573px;
  }

  .modal-body {
    height: 352px;
    max-height: 65vh;
  }

  #game-logs-modal .game-logs-table-body {
    max-height: 262px;
  }

  .radar-chart-content {
    padding: 0;
    min-height: 310px;
  }

  #player-radar-canvas {
    max-width: 100%;
    max-height: 360px;
    height: 294px !important;
    padding: 0px 4px 0px 4px;
  }

  #game-logs-modal #modal-body #radar-chart-container {
    padding: 0.21rem;
  }
}


/* ========================= SYOP PAGE LAYOUT & VISUALS ========================= */
body[data-page="research"] {
  background-color: #0a0f1e;
}

body[data-page="research"] .research-header-shell {
  padding: 0.24rem 0.4rem;
  gap: 0.18rem;
}

body[data-page="research"] .research-nav-hidden-inputs {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip-path: inset(50%);
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  white-space: nowrap;
}

body[data-page="research"] .app-header {
  margin-bottom: 1.05rem;
}

@media (min-width: 869px) {
  body[data-page="research"] {
    --research-desktop-content-max: 1100px;
    --research-desktop-panel-width: min(calc(100vw - 3.5rem), var(--research-desktop-content-max));
    --research-desktop-shell-width: min(calc(100vw - 3rem), var(--research-desktop-content-max));
    --research-desktop-nav-button-width: clamp(4.2rem, 4.5vw, 4.85rem);
  }

  body[data-page="research"] #header-container {
    display: flex;
    justify-content: center;
    padding: 0rem 0 0.25rem;
  }

  body[data-page="research"] #header-container .app-header {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: fit-content;
    padding: 0.65rem 1.35rem;
    margin-bottom: 0.5rem;
  }

  body[data-page="research"] #header-container .app-header .header-row {
    width: auto;
    display: flex;
    justify-content: center;
    gap: clamp(0.55rem, 1.4vw, 0.85rem);
    padding: 0;
  }

  body[data-page="research"] #header-container .app-header>.header-row:first-of-type {
    grid-template-columns: none;
  }

  body[data-page="research"] #header-container .nav-buttons-container {
    flex: none;
    width: max-content;
    justify-content: center;
    gap: clamp(0.55rem, 1.4vw, 0.85rem);
  }

  body[data-page="research"] #header-container .nav-button {
    flex: 1 1 0;
    width: 6.5rem;
    max-width: none;
    min-height: 2.7rem;
    max-height: 2.7rem;
    height: 2.7rem;
  }

  body[data-page="research"] .syop-main {
    width: min(100%, var(--research-desktop-content-max));
    margin-left: auto;
    margin-right: auto;
  }

  body[data-page="research"] .syop-tabs,
  body[data-page="research"] .syop-tab-panels,
  body[data-page="research"] .syop-tab-panel,
  body[data-page="research"] .syop-section,
  body[data-page="research"] .syop-hero,
  body[data-page="research"] .syop-panels-grid {
    width: 100%;
    max-width: var(--research-desktop-content-max);
    margin-left: auto;
    margin-right: auto;
  }

  body[data-page="research"] .syop-tab {
    font-size: 1.1rem;
  }

  body[data-page="research"] .syop-draft-hero h2 {
    align-self: center;
    font-size: clamp(1.15rem, 1.5rem + 0.95vw, 2.42rem);
  }

  body[data-page="research"] .syop-draft-hero .syop-hero-intro .syop-pill {
    align-self: center;
  }

  body[data-page="research"] .syop-draft-hero p {
    align-self: center;
    font-size: 0.9rem;
    text-align: center;
  }
}

.syop-main {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-bottom: 1.5rem;
}

.syop-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  padding: 0.5rem 0.9rem 0.18rem;
  background: radial-gradient(circle at 20% 18%, rgba(96, 165, 250, 0.18), transparent 58%), radial-gradient(circle at 82% 56%, rgba(192, 132, 252, 0.2), transparent 68%), rgb(18 21 38 / 0%);
  border: 1px solid rgba(132, 146, 255, 0.16);
  border-radius: 20px;
  box-shadow: 0 14px 28px rgba(7, 10, 20, 0.5);
  filter: saturate(1.1);
}

.syop-hero-intro {
  flex: 1 1 260px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.syop-hero-summary {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: stretch;
}

.syop-hero h1 {
  font-size: clamp(1.45rem, 1.18rem + 0.85vw, 1.9rem);
  margin: 0.0rem 0 0.0rem;
  letter-spacing: -0.02em;
  font-weight: 200;
}

.syop-hero p {
  max-width: 42ch;
  color: rgba(233, 236, 249, 0.84);
  font-size: 1rem;
}

.syop-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.68rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 18, 32, 0.6);
  letter-spacing: 0.18em;
  font-size: 0.63rem;
  text-transform: uppercase;
  color: rgba(182, 185, 214, 0.85);
  align-self: center;
}

.syop-key-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.syop-hero-card {
  display: flex;
  flex-direction: column;
  gap: 0.26rem;
  padding: 0.62rem 0.8rem;
  border-radius: 12px;
  background: rgba(16, 20, 34, 0.32);
  border: 1px solid rgba(132, 146, 255, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 14px 28px rgba(5, 8, 22, 0.28);
}

.syop-hero-card .label {
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(182, 185, 214, 0.8);
}

.syop-hero-card .value {
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.28;
  color: rgba(232, 235, 255, 0.94);
}

.syop-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0;
  width: 100%;
}

.syop-hero-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.16rem 0.55rem;
  min-height: 11px;
  border-radius: 999px;
  background: rgba(16, 20, 34, 0.32);
  border: 1px solid rgba(132, 146, 255, 0.22);
  color: rgba(226, 232, 240, 0.9);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  width: 100%;
  max-width: 520px;
}

.syop-hero-meta-item .meta-label {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.61rem;
  color: rgba(182, 185, 214, 0.8);
  font-weight: 500;
}

.syop-hero-meta-item .meta-value {
  font-weight: 300;
  font-size: 0.72rem;
  line-height: 1.24;
}

.syop-tabs {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.18rem;
  border-radius: 12px;
  background: rgb(12 15 28 / 10%);
  border: 1px solid rgba(132, 146, 255, 0.16);
  box-shadow: 0 10px 18px rgba(5, 8, 16, 0.36);
}

.syop-tab {
  flex: 1 1 200px;
  border: none;
  border-radius: 10px;
  padding: 0.42rem 0.6rem;
  background: transparent;
  color: rgba(182, 185, 214, 0.85);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.syop-tab:hover,
.syop-tab:focus {
  color: #f5f7ff;
}

.syop-tab:focus-visible {
  outline: 2px solid rgba(70, 231, 255, 0.6);
  outline-offset: 2px;
}

.syop-tab.active {
  background: linear-gradient(120deg, rgba(70, 231, 255, 0.25), rgba(255, 65, 225, 0.22));
  color: #f5f7ff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.syop-tab-panels {
  width: 100%;
}

.syop-tab-panel {
  display: none;
  width: 100%;
}

.syop-tab-panel.active {
  display: flex;
}

.syop-tab-panel[hidden] {
  display: none !important;
}

.syop-section {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.syop-section-heading h2 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  margin: 0;
}

.syop-section-heading p {
  margin: 0.35rem 0 0;
  color: rgba(182, 185, 214, 0.85);
  max-width: 60ch;
}

.syop-panels-grid {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-flow: row;
}

.syop-panel {
  position: relative;
  padding: 0.6rem 0.85rem;
  border-radius: 16px;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

.syop-panel.glass-panel {
  border-radius: 16px;
  --outerA: 0.32;
}

.syop-panel header h2 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f4f5fb;
  display: inline-flex;
  flex-wrap: wrap;
}

.syop-panel header h3 {
  font-size: 1rem;
  margin: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f4f5fb;
}

.syop-panel header h2 {
  font-size: 0.81rem;
  margin: -1px 0px 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5F6795;
  border: 1px solid #5F6795;
  padding: 3px 9px;
  border-radius: 8px;
}

.syop-panel header p {
  margin: 0.1rem 0 0.2rem;
  color: rgba(182, 185, 214, 0.78);
  font-size: 1.06rem;
  text-align: center;
}

/* Specific margin for Overall Hit Probability panel in NFL Draft tab */
#draft-overall-panel header p {
  margin: 0.4rem 0 -1.1rem;
}

.syop-panel-subhead {
  margin: 0.5rem 0 -1rem;
  color: rgba(182, 185, 214, 0.78);
  font-size: 0.86rem;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  align-items: center;
  justify-content: center;
}

.syop-panel-subhead .syop-line-legend {
  margin: 0;
  gap: 0.75rem;
}

.syop-panel-subhead .legend-item {
  font-size: 0.8rem;
  color: rgba(226, 231, 255, 0.92);
}

.syop-draft-hero {
  margin-bottom: 0.65rem;
  gap: 0.9rem 1.45rem;
  padding: 0.9rem 1.2rem 1.05rem;
  background: radial-gradient(circle at 24% 18%, rgba(96, 165, 250, 0.22), transparent 62%),
    radial-gradient(circle at 86% 58%, rgba(192, 132, 252, 0.24), transparent 70%),
    rgba(18, 21, 38, 0.78);
  border: 1px solid rgba(132, 146, 255, 0.18);
  box-shadow: 0 18px 34px rgba(7, 10, 20, 0.55);
}

.syop-draft-hero .syop-hero-intro {
  flex: 1 1 280px;
  align-items: flex-start;
  text-align: left;
  gap: 0.1rem;
}

.syop-draft-hero .syop-hero-intro .syop-pill {
  align-self: flex-start;
}

.syop-draft-hero .syop-hero-summary {
  flex: 1 1 320px;
  display: flex;
  align-items: stretch;
}

.syop-draft-hero .syop-hero-summary .syop-hero-meta {
  width: 100%;
}

.syop-draft-hero h2 {
  margin: 0.18rem 0 0.12rem;
  font-size: clamp(1.15rem, 1.1rem + 0.85vw, 1.92rem);
  letter-spacing: -0.015em;
  color: rgba(245, 247, 255, 0.96);
  font-weight: 300 !important;
}

.syop-draft-hero p {
  margin: 0;
  color: rgba(186, 194, 230, 0.88);
  font-size: 0.8rem;
  max-width: 46ch;
}

.syop-draft-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  align-items: center;
  justify-content: flex-start;
}

.syop-draft-meta .syop-hero-meta-item {
  background: rgba(18, 22, 38, 0.52);
  border: 1px solid rgba(132, 146, 255, 0.18);
  border-radius: 26px;
  padding: 0.45rem 0.8rem;
  backdrop-filter: blur(8px);
}

.syop-draft-meta .syop-hero-meta-item .meta-label {
  color: rgba(190, 198, 236, 0.82);
}

.syop-draft-meta .syop-hero-meta-item .meta-value {
  color: rgba(235, 238, 255, 0.92);
}

#syop-sunburst-panel,
#syop-gauges,
.syop-panel-wide {
  grid-column: 1 / -1;
}

#syop-bar-panel {
  justify-self: center;
  max-width: 720px;
  width: 100%;
}

@media (min-width: 1280px) {
  #syop-bar-panel {
    max-width: 660px;
  }
}

.syop-panel-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.syop-gauges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0rem 0.05rem 0rem;
  background: transparent;
  border-radius: 16px;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

@media (min-width: 869px) {
  .syop-gauges {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.2vw, 1.75rem);
    row-gap: 0.75rem;
    max-width: none;
    margin-inline: 0;
    margin-top: -14px;
  }

  .syop-panels-grid>.syop-key-legend {
    grid-column: 1 / -1;
    align-self: stretch;
  }
}

.syop-gauges.glass-panel {
  border-radius: 16px;
  --outerA: 0.32;
}

.syop-gauge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0em;
  padding: 0.1rem 0.35rem 0.6rem;
}

.syop-gauge-svg {
  width: 100%;
  height: auto;
  max-width: 260px;
}

.syop-gauge-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.64rem;
  margin-top: -18px;
}

.syop-gauge-label .gauge-value {
  font-size: 1.08rem;
  font-weight: 700;
}

.syop-gauge-label .gauge-title {
  font-size: 0.58rem;
  letter-spacing: 0.32em;
}

.syop-heatmap-row.syop-heatmap-header .position-header {
  color: rgba(244, 246, 255, 0.82);
}

.syop-heatmap-row.syop-heatmap-header .position-header::after {
  content: '';
  display: block;
  margin-top: 0.35rem;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), var(--header-accent));
}

.syop-heatmap-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.55rem;
  border-radius: 12px;
  background: rgba(12, 15, 28, 0.72);
  border: 1px solid rgba(132, 146, 255, 0.12);
  min-height: 46px;
}

.syop-heatmap-cell.bucket-cell {
  justify-content: center;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(182, 185, 214, 0.85);
  background: rgba(10, 13, 24, 0.82);
}

.syop-heatmap-cell.value-cell {
  color: #f5f7ff;
  font-weight: 600;
  font-size: 0.84rem;
  border: 1px solid rgba(132, 146, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.syop-heatmap-bar {
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  border-radius: 8px;
  opacity: 0.9;
}

.syop-heatmap-value {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 6px rgba(11, 14, 22, 0.6);
}

.syop-chart {
  width: 100%;
  min-height: 240px;
  position: relative;
}

.syop-chart svg {
  width: 100%;
  height: auto;
}

.syop-chart svg text,
.syop-sunburst-svg text {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.syop-sunburst-svg {
  width: 100%;
  height: auto;
  max-width: 540px;
  margin: 0 auto;
}

.syop-empty-state {
  margin: 2rem auto;
  text-align: center;
  color: rgba(233, 236, 249, 0.8);
}

.syop-highlight-list,
.syop-qa-list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.syop-highlight-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: baseline;
  color: rgba(233, 236, 249, 0.82);
  font-size: 0.95rem;
}

.syop-highlight-list .highlight-label {
  font-weight: 600;
}

.syop-qa-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.85rem;
  border-radius: 14px;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.syop-qa-list .qa-name {
  font-weight: 600;
}

.syop-qa-list .qa-status {
  font-weight: 700;
  letter-spacing: 0.12em;
}

.syop-qa-list .qa-pass {
  background: rgba(16, 94, 72, 0.35);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: rgba(212, 255, 230, 0.92);
}

.syop-qa-list .qa-fail {
  background: rgba(127, 29, 29, 0.35);
  border: 1px solid rgba(239, 68, 68, 0.32);
  color: rgba(255, 228, 230, 0.9);
}

.syop-footnote {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: rgba(182, 185, 214, 0.72);
  text-align: center;
}

.syop-key-legend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding: 0.75rem 0.9rem;
  background: radial-gradient(circle at 18% 18%, rgba(96, 165, 250, 0.18), transparent 60%),
    radial-gradient(circle at 82% 62%, rgba(192, 132, 252, 0.22), transparent 70%),
    rgba(13, 16, 32, 0.46);
  border: 1px solid rgba(138, 152, 255, 0.28);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 22px 36px rgba(6, 9, 24, 0.52);
  backdrop-filter: blur(0px) saturate(120%);
}

.syop-key-legend .syop-key-grid {
  gap: 0.5rem;
}

.syop-key-legend .syop-hero-card {
  background: rgba(16, 20, 36, 0.42);
  border-color: rgba(148, 162, 255, 0.32);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 22px rgba(6, 9, 24, 0.42);
  backdrop-filter: blur(0px) saturate(120%);
  align-items: center;
  text-align: center;
}

.syop-key-legend .syop-hero-card .label {
  color: rgba(188, 194, 236, 0.84);
}

.syop-key-legend .syop-hero-card .value {
  color: rgba(232, 235, 255, 0.95);
}

.syop-key-legend .syop-hero-card .value-mobile {
  display: none;
}

.syop-line-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: rgba(233, 236, 249, 0.85);
}

.legend-swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
}

.draft-round-chip-container {
  margin-top: 0.01rem;
}

.draft-round-chip-grid {
  display: grid;
  grid-template-columns: repeat(var(--round-count), minmax(0, 1fr));
  gap: 3rem;
}

.draft-round-chip-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  min-width: 0;
}

.draft-round-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(17, 20, 35, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 16px rgba(6, 9, 24, 0.32);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.draft-round-chip-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  flex: 0 0 auto;
}

.draft-round-chip-value {
  color: var(--chip-accent, rgba(232, 235, 255, 0.88));
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.draft-round-chip-col .draft-round-chip:not(:last-child) {
  margin-bottom: 0.15rem;
}

.draft-round-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(87px, 1fr));
  gap: 0.1rem;
  margin-top: 0.35rem;
}

.draft-tile {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.5rem 0.5rem 0.3rem;
  border-radius: 16px;
  background: rgba(17, 20, 35, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem
}

.draft-tile-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 27px;
  min-height: 27px;
  padding: 0 0.25rem;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.8rem;
  background: rgba(9, 11, 24, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.draft-tile-value {
  font-weight: 600;
  color: #e9ecf9;
}

.syop-chart-footnote {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: rgba(182, 185, 214, 0.78);
}

.draft-pill {
  align-self: center;
  padding: 0.55rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(70, 231, 255, 0.24), rgba(255, 65, 225, 0.24));
  border: 1px solid rgba(255, 255, 255, 0.12);
  letter-spacing: 0.22em;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: rgba(233, 236, 249, 0.92);
  text-align: center;
  white-space: nowrap;
  margin-top: 0.7rem;

}

@media (min-width: 768px) {
  .syop-hero-intro {
    align-items: flex-start;
  }

  .syop-pill {
    align-self: flex-start;
  }

  .syop-hero-meta {
    align-items: flex-start;
  }

  .syop-hero-meta-item {
    align-items: center;
    text-align: center;
  }
}

/* Responsive refinements */
@media (min-width: 869px) {
  .syop-panel-wide {
    grid-column: 1 / -1;
  }

  .syop-lower-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .syop-draft-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .syop-hero h1 {
    font-size: clamp(2.95rem, 1.18rem + 0.85vw, 1.9rem);
    margin: 0.0rem 0 0.0rem;
    letter-spacing: -0.02em;
    font-weight: 200;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .syop-hero {
    padding: 0.6rem 0.75rem 0.66rem;
    gap: 0.08rem;
  }

  .syop-hero-intro {
    align-items: center;
  }

  .syop-hero h1 {
    text-align: center;
  }

  .syop-pill {
    align-self: center;
  }

  .syop-hero-summary {
    align-items: center;
  }

  .syop-hero-card {
    padding: 0.56rem 0.72rem;
  }

  .syop-hero-card .value {
    font-size: 0.86rem;
  }

  .syop-hero-meta {
    gap: 0.28rem;
    align-items: center;
  }

  .syop-hero-meta-item {
    min-height: 42px;
  }

  .syop-tabs {
    padding: 0.14rem;
    margin-top: -15px;
  }

  .syop-tab {
    flex: 1 1 150px;
    padding: 0.36rem 0.48rem;
    font-size: 0.8rem;
  }

  .syop-panel,
  .syop-gauges {
    padding: 0.85rem;
  }

  .syop-gauges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .syop-heatmap {
    padding: 0.48rem;
    gap: 0.28rem;
  }

  .syop-heatmap-row {
    grid-template-columns: minmax(42px, 0.75fr) repeat(4, minmax(0, 1fr));
  }

  .syop-heatmap-cell {
    min-height: 42px;
    padding: 0.45rem 0.5rem;
  }

  .syop-heatmap-cell.value-cell {
    font-size: 0.8rem;
  }

  .syop-key-legend {
    padding: 0.65rem 0.75rem;
  }
}

@media (max-width: 540px) {
  .syop-hero {
    padding: 0.24rem 0.65rem 0.3rem;
  }

  .syop-hero h1 {
    font-size: clamp(1.3rem, 3.6vw, 1.18rem);
    white-space: nowrap;
    text-align: center;
    letter-spacing: -0.018em;
    padding: 1px;
  }

  .syop-hero-summary {
    gap: 0.45rem;
  }

  .syop-hero-card {
    padding: 0.52rem 0.68rem;
  }

  .syop-hero-card .label {
    font-size: 0.56rem;
    letter-spacing: 0.15em;
  }

  .syop-hero-card .value {
    font-size: 0.78rem;
  }

  .syop-hero-meta {
    gap: 0.04rem;
  }

  .syop-hero-meta-item {
    padding: 0.25rem 0.52rem;
    font-size: 0.7rem;
    min-height: 24px;
  }

  .syop-hero-meta-item .meta-label {
    font-size: 0.54rem;
  }

  .syop-tab {
    flex: 1 1 130px;
    padding: 0.32rem 0.44rem;
    font-size: 0.76rem;
    filter: saturate(1.4) opacity(0.9);
  }

  .syop-panel,
  .syop-gauges {
    padding: 0.52rem 0.52rem 0rem;
  }

  .syop-gauges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.15rem;
  }

  .syop-section-heading p {
    font-size: 0.86rem;
  }

  .syop-heatmap {
    padding: 0.42rem;
  }

  .syop-heatmap-row {
    grid-template-columns: minmax(38px, 0.7fr) repeat(4, minmax(0, 1fr));
  }

  .syop-heatmap-cell {
    min-height: 40px;
    padding: 0.42rem 0.46rem;
  }

  .syop-heatmap-cell.bucket-cell {
    font-size: 0.7rem;
  }

  .syop-heatmap-cell.value-cell {
    font-size: 0.76rem;
  }

  .syop-key-legend {
    padding: 0.58rem 0.65rem;
  }

  .syop-key-legend .syop-key-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    align-items: stretch;
  }

  .syop-key-legend .syop-hero-card {
    padding: 0.2rem 0.2rem;
    min-width: 140px;
    flex: 0 1 calc(50% - 0.3rem);
    align-items: center;
    text-align: center;
  }

  .syop-key-legend .syop-hero-card .value-desktop {
    display: none;
  }

  .syop-key-legend .syop-hero-card .value-mobile {
    display: block;
    font-size: 0.78rem;
    line-height: 1.28;
    color: rgba(232, 235, 255, 0.95);
  }

  /* Mobile-only adjustments for Positional Hit Rate Trends by Round chart */
  #draft-positional-panel .syop-panel-subhead {
    margin: 0.22rem 0 -2rem;
    justify-content: center;
  }

  #draft-positional-panel header h3 {
    margin: 1rem 0rem 0rem;
  }

  /* Mobile-only adjustments for draft round chips */
  .draft-round-chip-container {
    margin-top: 0rem;
  }

  .draft-round-chip {
    padding: 0.18rem 0.45rem;
    background: rgb(31 34 48 / 72%);
    max-width: 2.8rem;
    min-width: 2.8rem;
  }
}

@media (max-width: 380px) {
  .syop-gauges {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .syop-gauge-label .gauge-value {
    font-size: 1rem;
  }

  .syop-gauge-label .gauge-title {
    letter-spacing: 0.28em;
  }

  .syop-heatmap-row {
    grid-template-columns: minmax(34px, 0.65fr) repeat(4, minmax(0, 1fr));
  }

  .syop-heatmap-cell {
    padding: 0.38rem 0.42rem;
    min-height: 38px;
  }

  .syop-heatmap-cell.value-cell {
    font-size: 0.72rem;
  }
}

.syop-bar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.syop-filter-label {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(182, 185, 214, 0.78);
}

.syop-position-legend {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.65rem;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

.syop-position-legend::-webkit-scrollbar {
  height: 4px;
}

.syop-position-legend::-webkit-scrollbar-thumb {
  background: rgba(120, 130, 190, 0.45);
  border-radius: 999px;
}

.syop-legend-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 0.55rem 0.75rem;
  border-radius: 16px;
  border: 1px solid rgba(132, 146, 255, 0.22);
  background: linear-gradient(135deg, rgba(16, 19, 36, 0.78), rgba(10, 13, 24, 0.6));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 10px 24px rgba(10, 16, 38, 0.38);
  cursor: pointer;
  color: rgba(235, 238, 255, 0.92);
  backdrop-filter: blur(12px);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  text-align: center;
}

.syop-legend-chip .chip-label {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 246, 255, 0.92);
}

.syop-legend-chip:hover,
.syop-legend-chip:focus-visible {
  border-color: rgba(132, 146, 255, 0.45);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 26px rgba(12, 18, 44, 0.45);
  outline: none;
}

.syop-legend-chip.active {
  border-color: rgba(255, 255, 255, 0.42);
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), rgba(20, 25, 44, 0.82));
  box-shadow: 0 18px 32px rgba(14, 22, 48, 0.58);
}

.syop-legend-chip.active .chip-label {
  color: var(--chip-accent, #7c83ff);
}

.syop-view-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 255, 0.28);
  background: rgba(20, 24, 42, 0.72);
  color: rgba(232, 236, 255, 0.94);
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.syop-view-toggle:hover,
.syop-view-toggle:focus-visible {
  border-color: rgba(132, 146, 255, 0.6);
  background: rgba(24, 30, 54, 0.9);
  outline: none;
}

.syop-bar-wrapper {
  position: relative;
}

/* · · background of SYOP BAR CHARTS · · */
.syop-violin-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem 0.85rem 1rem;
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% 12%, rgba(118, 132, 255, 0.1), transparent 55%),
    radial-gradient(circle at 78% 88%, rgba(66, 194, 255, 0.1), transparent 62%),
    linear-gradient(135deg, rgba(12, 17, 34, 0.32), rgba(9, 12, 26, 0.18));
  border: 1px solid rgba(148, 163, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 24px 42px rgba(6, 10, 26, 0.35);
  backdrop-filter: blur(0px) saturate(110%);
  -webkit-backdrop-filter: blur(0px) saturate(110%);
  overflow: hidden;
  width: min(100%, 580px);
  margin: 0 auto;
}

.syop-violin-panel::before,
.syop-violin-panel::after {
  content: '';
  position: absolute;
  inset: -20% -26%;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: screen;
  filter: blur(1px);
}

.syop-violin-panel::before {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), transparent 58%);
}

.syop-violin-panel::after {
  background: radial-gradient(circle at 70% 70%, rgba(82, 196, 255, 0.12), transparent 62%);
  opacity: 0.1;
}

.syop-violin-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

.syop-violin-title-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.syop-violin-title {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 247, 255, 0.96);
}

.syop-violin-meta {
  display: flex;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: rgba(177, 185, 225, 0.82);
  letter-spacing: 0.04em;
}

.syop-violin-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.12rem;
  padding: 0.55rem 0.75rem;
  border-radius: 14px;
  background: rgba(26, 30, 53, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05), 0 12px 20px rgba(12, 16, 34, 0.45);
  color: rgba(235, 238, 255, 0.92);
  backdrop-filter: blur(5px);
}

.syop-violin-chip .chip-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(190, 198, 236, 0.86);
}

.syop-violin-chip .chip-value {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--chip-accent, #7c83ff);
}

.syop-bar-plot {
  width: 100%;
  min-height: 220px;
  position: relative;
}

.syop-bar-svg {
  width: 100%;
  height: auto;
  display: block;
}

.syop-bar-area {
  fill: rgba(8, 12, 24, 0.08);
  stroke: rgba(148, 162, 255, 0.1);
  stroke-width: 1px;
}

.syop-bar-grid {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
}

.syop-bar-axis {
  stroke: rgba(140, 154, 255, 0.26);
  stroke-width: 1.4;
}

.syop-bar-tick-label {
  font-size: 0.7rem;
  fill: rgba(186, 194, 230, 0.86);
  letter-spacing: 0.05em;
  text-anchor: end;
}

.syop-bar-axis-title {
  font-size: 0.62rem;
  fill: rgba(176, 186, 226, 0.82);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-anchor: middle;
}

.syop-bar-axis-title-y {
  text-anchor: middle;
}

.syop-bar-axis-title-x {
  text-anchor: middle;
  font-size: 0.72rem;
  font-weight: 700 !important;
}

.syop-bar-x-label {
  font-size: 0.74rem;
  fill: rgba(186, 194, 230, 0.88);
  letter-spacing: 0.06em;
  text-anchor: middle;
}

.syop-bar-rect {
  fill: var(--bar-fill, rgba(124, 131, 255, 0.28));
  stroke: var(--bar-stroke, rgba(124, 131, 255, 0.6));
  stroke-width: 1.6;
  cursor: pointer;
  opacity: 0.88;
  transition: transform 0.18s ease, stroke-width 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
  filter: drop-shadow(0 12px 18px rgba(5, 9, 24, 0.32));
}

.syop-bar-rect:hover,
.syop-bar-rect:focus-visible,
.syop-bar-rect.active {
  transform: translateY(-4px);
  stroke-width: 2.2;
  outline: none;
  opacity: 1;
}

.syop-bar-tooltip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 12px));
  background: rgba(14, 18, 34, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 0.55rem 0.75rem;
  min-width: 160px;
  max-width: 220px;
  box-shadow: 0 18px 28px rgba(10, 14, 32, 0.58), 0 0 0 1px var(--tooltip-accent, rgba(124, 131, 255, 0.5));
  backdrop-filter: blur(14px);
  transition: opacity 0.15s ease;
  color: rgba(238, 240, 255, 0.95);
}

.syop-bar-tooltip::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 7px 0 7px;
  border-style: solid;
  border-color: rgba(14, 18, 34, 0.92) transparent transparent transparent;
}

.syop-bar-tooltip.visible {
  opacity: 1;
}

.syop-bar-tooltip .tooltip-name {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(248, 250, 255, 0.96);
}

.syop-bar-tooltip .tooltip-meta {
  font-size: 0.75rem;
  color: rgba(177, 185, 214, 0.86);
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
}

.syop-violin-empty {
  padding: 1.2rem;
  text-align: center;
  color: rgba(182, 190, 228, 0.84);
  letter-spacing: 0.04em;
}

.syop-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid rgba(132, 146, 255, 0.24);
  background: linear-gradient(150deg, rgba(16, 20, 36, 0.52), rgba(8, 11, 22, 0.34));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 20px 34px rgba(10, 14, 32, 0.5);
  backdrop-filter: blur(1px);
}

.syop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  color: rgba(232, 236, 255, 0.92);
}

.syop-table caption {
  caption-side: top;
  text-align: center;
  padding: 0.9rem 1.1rem 0.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(190, 198, 236, 0.9);
}

.syop-table th,
.syop-table td {
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid rgba(148, 163, 255, 0.16);
  text-align: center;
}

.syop-table th {
  font-weight: 600;
  color: rgba(214, 220, 255, 0.9);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  text-align: center;
}

.syop-table tbody tr:last-child th,
.syop-table tbody tr:last-child td {
  border-bottom: none;
}

.syop-table tbody tr:hover {
  background: rgba(20, 24, 44, 0.55);
}

@media (max-width: 920px) {
  .syop-violin-panel {
    padding: 0.8rem 0.85rem 0.95rem;
  }
}

@media (max-width: 480px) {
  .syop-bar-controls {
    gap: 0.7rem;
    margin-top: 0.4rem;
  }

  .syop-view-toggle {
    margin-left: 0;
  }
}

@media (max-width: 360px) {
  .syop-legend-chip {
    min-width: 0;
  }
}

/* === DevTools screenshot CSS overrides (v3) === */
/* Toggle button pill */
.compare-search-toggle {
  background: rgba(22, 24, 43, 0.15);
  /* stronger fill */
}

/* Popover container */
.compare-search-popover {
  right: 6px;
  top: 58%;
  padding: 0px 0px 0px;
  /* trim bottom */
}

/* Search input */
#compareSearchInput {
  margin-top: 0px;
  /* tighter spacing */
  background: rgb(67 71 87 / 63%);
}

/* === League Analyzer Refresh === */
body[data-page="analyzer"] {
  --analyzer-rank-glyph-font: 12px "Product Sans", "Google Sans", sans-serif;
}

body[data-page="analyzer"] .analyzer-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 3rem;
}

body[data-page="analyzer"] .analyzer-hero {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.75rem;
  border-radius: var(--panel-border-radius);
  background: rgba(13, 15, 35, 0.35);
  border: 1px solid rgba(128, 138, 189, 0.25);
}

body[data-page="analyzer"] .analyzer-hero-intro {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body[data-page="analyzer"] .analyzer-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-secondary);
  background: rgba(118, 109, 255, 0.12);
  border: 1px solid rgba(118, 109, 255, 0.4);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
}

body[data-page="analyzer"] .analyzer-hero h1 {
  font-size: clamp(1.65rem, 2.8vw, 2.4rem);
  line-height: 1.2;
  margin: 0;
}

body[data-page="analyzer"] .analyzer-hero p {
  color: var(--color-text-secondary);
  max-width: 620px;
  font-size: 0.95rem;
  line-height: 1.6;
}

body[data-page="analyzer"] .analyzer-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.25rem 1.5rem;
  font-size: 1.05rem;
  color: var(--color-text-secondary);
}

body[data-page="analyzer"] .loading-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

body[data-page="analyzer"] .loading-indicator::before {
  content: '';
  height: 0.9rem;
  width: 0.9rem;
  border-radius: 999px;
  border: 2px solid rgba(118, 109, 255, 0.35);
  border-top-color: rgba(118, 109, 255, 0.9);
  animation: analyzer-spin 1.1s linear infinite;
}

@keyframes analyzer-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

body[data-page="analyzer"] .analyzer-summary-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}

body[data-page="analyzer"] .analyzer-chip {
  position: relative;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(128, 138, 189, 0.22);
  background: linear-gradient(135deg, rgba(22, 25, 48, 0.62), rgba(11, 12, 26, 0.62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(5, 7, 15, 0.32);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 96px;
}

body[data-page="analyzer"] .analyzer-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 55%);
}

body[data-page="analyzer"] .analyzer-chip .chip-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-secondary);
}

body[data-page="analyzer"] .analyzer-chip .chip-value {
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

body[data-page="analyzer"] .analyzer-chip .chip-meta {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  line-height: 1.35;
  margin-top: auto;
}

body[data-page="analyzer"] .analyzer-chip--top-scorer .chip-value {
  font-size: 0.96rem;
  line-height: 1.2;
  white-space: nowrap;
}

body[data-page="analyzer"] .analyzer-chip--top-scorer .chip-meta {
  font-size: 0.72rem;
}

@media (max-width: 640px) {
  body[data-page="analyzer"] .analyzer-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body[data-page="analyzer"] .analyzer-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

body[data-page="analyzer"] .analyzer-panels-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 869px) {
  body[data-page="analyzer"] .analyzer-panels-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body[data-page="analyzer"] .analyzer-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: var(--panel-border-radius);
  background: rgba(13, 15, 35, 0.42);
  border: 1px solid rgba(128, 138, 189, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 42px rgba(4, 6, 15, 0.45);
}

body[data-page="analyzer"] .analyzer-panel-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

body[data-page="analyzer"] .analyzer-panel-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

body[data-page="analyzer"] .analyzer-panel-header p {
  margin: 0.2rem 0 0;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

body[data-page="analyzer"] .analyzer-panel-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

body[data-page="analyzer"] .analyzer-chart {
  position: relative;
  width: 100%;
  height: 400px;
}

body[data-page="analyzer"] .analyzer-chart--radar {
  min-height: 380px;
  padding: 0;
}

body[data-page="analyzer"] .analyzer-radar-section {
  padding-top: 1.25rem;
  gap: 1rem;
}

@media (max-width: 640px) {
  body[data-page="analyzer"] .analyzer-radar-section {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

body[data-page="analyzer"] .analyzer-radar-section .analyzer-panel-body--stacked {
  gap: 1rem;
}

body[data-page="analyzer"] .analyzer-panel-body--stacked {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 869px) {
  body[data-page="analyzer"] .analyzer-panel-body--stacked {
    flex-direction: row;
    align-items: stretch;
  }

  body[data-page="analyzer"] .analyzer-panel-body--stacked>* {
    flex: 1 1 0%;
  }

  body[data-page="analyzer"] .analyzer-chart--radar {
    height: auto;
  }
}

body[data-page="analyzer"] .analyzer-toggle {
  display: inline-flex;
  background: rgba(19, 21, 38, 0.75);
  border: 1px solid rgba(118, 109, 255, 0.25);
  border-radius: 999px;
  padding: 0.25rem;
  gap: 0.35rem;
}

body[data-page="analyzer"] .analyzer-toggle .toggle-option {
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  transition: all 0.2s ease;
}

body[data-page="analyzer"] .analyzer-toggle .toggle-option.active {
  background: linear-gradient(135deg, rgba(118, 109, 255, 0.8), rgba(118, 109, 255, 0.45));
  color: #fff;
  box-shadow: 0 6px 16px rgba(118, 109, 255, 0.35);
}

body[data-page="analyzer"] .analyzer-toggle .toggle-option:focus-visible {
  outline: 2px solid rgba(118, 109, 255, 0.65);
}

body[data-page="analyzer"] .analyzer-standings {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: rgba(15, 17, 38, 0.55);
  border: 1px solid rgba(118, 109, 255, 0.18);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
}

body[data-page="analyzer"] .analyzer-standings-header h3 {
  margin: 0;
  font-size: 1.05rem;
}

body[data-page="analyzer"] .analyzer-standings-header p {
  margin: 0.3rem 0 0;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}

body[data-page="analyzer"] .analyzer-standings-table-wrapper {
  overflow-x: auto;
}

body[data-page="analyzer"] .analyzer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

body[data-page="analyzer"] .analyzer-table thead tr {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
  font-size: 0.7rem;
}

body[data-page="analyzer"] .analyzer-table th,
body[data-page="analyzer"] .analyzer-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(128, 138, 189, 0.18);
  text-align: left;
  white-space: nowrap;
}

body[data-page="analyzer"] .analyzer-table tbody tr:last-child th,
body[data-page="analyzer"] .analyzer-table tbody tr:last-child td {
  border-bottom: none;
}

body[data-page="analyzer"] .analyzer-filter-group {
  display: inline-flex;
  gap: 0.4rem;
  background: rgba(18, 20, 40, 0.75);
  border: 1px solid rgba(118, 109, 255, 0.25);
  border-radius: 999px;
  padding: 0.2rem 0.3rem;
}

body[data-page="analyzer"] .analyzer-filter-group .filter-chip {
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: all 0.2s ease;
}

body[data-page="analyzer"] .analyzer-filter-group .filter-chip.active {
  background: linear-gradient(135deg, rgba(118, 109, 255, 0.85), rgba(118, 109, 255, 0.45));
  color: #fff;
  box-shadow: 0 6px 16px rgba(118, 109, 255, 0.3);
}

body[data-page="analyzer"] .analyzer-leaderboard {
  overflow-x: auto;
}

body[data-page="analyzer"] .analyzer-leaderboard .empty-row {
  text-align: center;
  padding: 1.5rem 0;
  color: var(--color-text-secondary);
}

body[data-page="analyzer"] .analyzer-leaderboard table th:first-child,
body[data-page="analyzer"] .analyzer-leaderboard table td:first-child {
  text-align: center;
}

body[data-page="analyzer"] .analyzer-leaderboard table th:nth-child(5),
body[data-page="analyzer"] .analyzer-leaderboard table td:nth-child(5),
body[data-page="analyzer"] .analyzer-leaderboard table th:nth-child(6),
body[data-page="analyzer"] .analyzer-leaderboard table td:nth-child(6) {
  text-align: center;
}

body[data-page="analyzer"] .analyzer-leaderboard .owner-cell {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

body[data-page="analyzer"] .analyzer-leaderboard table td:nth-child(2) {
  white-space: nowrap;
}

body[data-page="analyzer"] .app-header {
  --header-field-max-width: 140px;
}

@media (max-width: 640px) {
  body[data-page="analyzer"] .analyzer-chip {
    min-height: 110px;
  }

  body[data-page="analyzer"] .analyzer-table {
    font-size: 0.74rem;
  }

  body[data-page="analyzer"] .analyzer-table th,
  body[data-page="analyzer"] .analyzer-table td {
    padding: 0.35rem 0.45rem;
  }

  body[data-page="analyzer"] .analyzer-panel {
    padding: 1.25rem 0.5rem;
  }

  body[data-page="analyzer"] .analyzer-chart {
    height: 320px;
  }

  body[data-page="analyzer"] .analyzer-filter-group {
    gap: 0.3rem;
    padding: 0.18rem 0.28rem;
  }

  body[data-page="analyzer"] .analyzer-filter-group .filter-chip {
    font-size: 0.64rem;
    padding: 0.28rem 0.5rem;
  }
}

/* === Dynasty Hub Text Scramble (scoped) === */
#dh-scramble {
  display: inline-block;
}

#dh-scramble .dh-dud {
  opacity: 0.55;
  filter: saturate(70%);
}

/* ========================================= */
/* === Ownership + Analyzer desktop header layout === */
@media (min-width: 820px) {

  body[data-page="ownership"] #header-container,
  body[data-page="analyzer"] #header-container {
    display: flex;
    justify-content: center;
  }

  body[data-page="analyzer"] #header-container .app-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
    width: min(100%, 880px);
    margin: 0 auto;
    padding: 1.1rem 1.35rem;
    --header-control-height: 3.4rem;
    border-radius: 24px;
  }

  body[data-page="ownership"] #header-container .app-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
    width: min(100%, 880px);
    margin: 0 auto;
    padding: 0.9rem 1.15rem 0.8rem;
    --header-control-height: 3.4rem;
    border-radius: 24px;
  }

  
  body[data-page="ownership"] #primary-header-row,
  body[data-page="analyzer"] #primary-header-row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 0;
    margin: 0;
  }

  body[data-page="ownership"] #primary-header-row .nav-buttons-container,
  body[data-page="analyzer"] #primary-header-row .nav-buttons-container {
    width: 100%;
    flex: 0 0 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.95rem;
    flex-wrap: nowrap;
    margin: 0 auto;
  }

  body[data-page="ownership"] .nav-button,
  body[data-page="analyzer"] .nav-button {
    flex: 1 1 0;
    min-width: 120px;
    max-width: 164px;
    min-height: 3.4rem;
    padding: 0.95rem 0.8rem 0.82rem;
    border-radius: 20px;
    gap: 0.32rem;
  }

  body[data-page="ownership"] .nav-button i,
  body[data-page="analyzer"] .nav-button i {
    font-size: 1.5rem;
  }

  body[data-page="ownership"] .nav-label,
  body[data-page="analyzer"] .nav-label {
    font-size: 0.75rem;
    letter-spacing: 0.035em;
  }

  body[data-page="ownership"] #primary-header-row .nav-logo,
  body[data-page="analyzer"] #primary-header-row .nav-logo {
    width: 1.5rem;
    height: 1.44rem;
  }

  body[data-page="ownership"] #secondary-header-row,
  body[data-page="analyzer"] #secondary-header-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(123, 110, 255, 0.32);
    box-shadow: inset 0 1px 0 rgba(173, 156, 255, 0.12);
    align-items: stretch;
  }

 body[data-page="ownership"] #secondary-header-row {
  padding: 0.8rem 0.3rem 0rem !important;
 }

  body[data-page="ownership"] #secondary-header-row .username-area,
  body[data-page="ownership"] #secondary-header-row .custom-select-wrapper,
  body[data-page="analyzer"] #secondary-header-row .username-area,
  body[data-page="analyzer"] #secondary-header-row .custom-select-wrapper {
    max-width: none;
    height: var(--header-control-height);
  }

  body[data-page="ownership"] .username-area,
  body[data-page="analyzer"] .username-area {
    border-radius: 18px;
  }

  body[data-page="ownership"] #usernameInput,
  body[data-page="analyzer"] #usernameInput {
    font-size: 1.05rem;
    padding: 0.6rem 1rem;
    font-weight: 400;
  }

  body[data-page="ownership"] #leagueSelect,
  body[data-page="analyzer"] #leagueSelect {
    font-size: 1.05rem;
    padding: 0.6rem 1.8rem 0.6rem 1rem;
    color: #d5d9ff;
    border-radius: 18px;
  }

  body[data-page="ownership"] .custom-select-wrapper::after,
  body[data-page="analyzer"] .custom-select-wrapper::after {
    right: 1.05rem;
    font-size: 0.9rem;
    transform: translateY(-50%) scale(0.95);
  }
}

/* === Loading Overlay (global) === */
/* Replaces the legacy orbit-ring loader with the Stats-style ring spinner + logo stack. */
#loading.hidden {
  display: none;
}

#loading {
  /* Loader sizing: much wider on desktop, while still fitting mobile. */
  max-width: 1200px;
}

#loading .loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  text-align: center;
  color: var(--color-text-primary, #EAEBF0);
  /* Default (desktop): wider content area so the panel doesn't look cramped. */
  width: min(899px, 77vw);
}

#loading .loading-spinner {
  width: 236px;
  height: 236px;
  position: relative;
  top: 49px;
  border: 12px solid #f0f4ff05;
  border-top-color: rgb(182 196 254 / 62%);
  border-radius: 50%;
  animation: dh-loading-spin 1.05s ease-in-out infinite;
  box-shadow: 0 0 27px #aaf, inset 0 0 50px #AAF6, inset 0 0 18px #aaf;
}

#loading .loading-body {
  position: relative;
  top: -169px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.65rem;
}

#loading .loading-logo {
  width: min(188px, 70vw);
  height: auto;
  display: block;
  filter: opacity(0.9) drop-shadow(0 10px 22px #fff1);
}

#loading .loading-message {
  display: inline-block;
  font-size: 1.12rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.05em;
  line-height: 1.25;
  margin-top: 38px;
}

@keyframes dh-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 868px) {
  #loading .loading-overlay {
    /* Mobile: match the Stats loader sizing while guaranteeing the 250px spinner fits. */
    width: clamp(350px, 92vw, 520px);
  }
}

/* Scramble dud character color */
#dh-scramble .dh-dud {
  color: #7666b5 !important;
  opacity: 0.75;
}

/* === end loader block === */
/* --- HOME-PAGE ONLY HEADER RULES --- */
body[data-page="welcome"] #filters-row,
body[data-page="welcome"] #secondary-header-row .view-switcher,
body[data-page="ownership"] #filters-row,
body[data-page="ownership"] #secondary-header-row .view-switcher,
body[data-page="analyzer"] #filters-row,
body[data-page="analyzer"] #secondary-header-row .view-switcher,
body[data-page="research"] #filters-row,
body[data-page="research"] #secondary-header-row .view-switcher {
  display: none !important;
}

body[data-page="welcome"] #secondary-header-row,
body[data-page="ownership"] #secondary-header-row,
body[data-page="analyzer"] #secondary-header-row,
body[data-page="research"] #secondary-header-row {
  justify-content: center;
  /* Center the remaining items */
  gap: 0.75rem;
  /* Add some space between them */
}

/* === Ownership page revamp: view switcher, list/table, and player-detail modal === */
/* All selectors are scoped to ownership so no styles leak to other pages. */
body[data-page="ownership"] #secondary-header-row {
  align-items: stretch;
  justify-content: center;
}

/* Ownership row-2 keeps username input + segmented mode switcher only. */
body[data-page="ownership"] #secondary-header-row .username-area {
  flex: 1 1 44%;
  min-width: min(230px, 48vw);
  max-width: 460px;
}

/* Ownership no longer renders a league dropdown in row-2; explicitly hide any shared wrapper artifacts. */
body[data-page="ownership"] #secondary-header-row .custom-select-wrapper {
  display: none !important;
}

body[data-page="ownership"] #ownershipModeSwitcher {
  flex: 1 1 56%;
  min-width: min(240px, 48vw);
  max-width: 520px;
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  padding: 0.2rem;
  border-radius: 14px;
  border: 1px solid rgba(128, 138, 189, 0.25);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(10, 12, 28, 0.2));
  backdrop-filter: blur(8px) saturate(125%);
  -webkit-backdrop-filter: blur(8px) saturate(125%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 28px rgba(0, 0, 0, 0.23);
}

@media (min-width: 820px) {
  /* Ownership desktop header controls:
     targets the real mode button class and the ownership-specific username bar
     so desktop sizing applies without leaking to other pages. */
  body[data-page="ownership"] #ownershipModeSwitcher {
    height: 46px;
    padding: 0.1rem;
  }

  body[data-page="ownership"] #ownershipModeSwitcher .ownership-mode-btn {
    height: 42px;
    border-radius: 12px;
  }

  body[data-page="ownership"] #secondary-header-row .username-area.ownership-username-bar {
    height: 46px;
  }
}
body[data-page="ownership"] .ownership-mode-btn {
  flex: 1 1 0;
  min-height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.36rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #8f97c8;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.18s ease;
}

body[data-page="ownership"] .ownership-mode-btn i {
  font-size: 0.8rem;
}

body[data-page="ownership"] .ownership-mode-btn.is-active {
  color: #d7dbff;
  border-color: rgba(118, 109, 255, 0.44);
  background: rgba(118, 109, 255, 0.14);
  box-shadow: 0 0 15px rgba(118, 109, 255, 0.24), inset 0 0 14px rgba(118, 109, 255, 0.14);
}

body[data-page="ownership"] .ownership-mode-btn:focus-visible {
  outline: 2px solid rgba(193, 198, 255, 0.44);
  outline-offset: 2px;
}

body[data-page="ownership"] #playerListView {
  width: min(100%, 1180px) !important;
  max-width: min(100%, 1180px) !important;
  padding-left: 0.2rem !important;
  padding-right: 0.2rem !important;
}

body[data-page="ownership"] .ownership-shell {
  width: 100%;
  max-width: 1000px;
  border-radius: 16px;
  border: 1px solid rgba(128, 138, 189, 0.21);
  background: linear-gradient(180deg, rgba(22, 25, 47, 0.6), rgba(12, 14, 28, 0.43));
  backdrop-filter: blur(7px) saturate(120%);
  -webkit-backdrop-filter: blur(7px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 36px rgba(0, 0, 0, 0.26);
  padding: 0.7rem 0.65rem;
  font-family: var(--font-sans);
  align-self: center;
}

body[data-page="ownership"] .ownership-toolbar,
body[data-page="ownership"] .ownership-value-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.58rem;
  margin-bottom: 0.32rem;
}

body[data-page="ownership"] .ownership-search-wrap {
  position: relative;
  flex: 1 1 auto;
}

body[data-page="ownership"] .ownership-search-input {
  width: 100%;
  min-height: 2.68rem;
  border-radius: 10px;
  border: 1px solid rgba(128, 138, 189, 0.3);
  background: rgb(47 49 64 / 45%);
  color: #d8ddff99;
  font-size: 16px;
  font-weight: 300;
  padding: 0.45rem 3.6rem 0.45rem 0.72rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

body[data-page="ownership"] .ownership-search-input::placeholder {
  color: #9099cf;
}

body[data-page="ownership"] .ownership-search-input:focus {
  outline: none;
  border-color: rgba(118, 109, 255, 0.45);
  box-shadow: 0 0 0 2px rgba(118, 109, 255, 0.18);
}

body[data-page="ownership"] .ownership-search-icon {
  position: absolute;
  right: 0.66rem;
  top: 50%;
  transform: translateY(-50%);
  color: #8e95c3;
  font-size: 0.76rem;
}

body[data-page="ownership"] .ownership-search-clear {
  position: absolute;
  right: 1.84rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #aab2de;
  font-size: 0.84rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}

body[data-page="ownership"] .ownership-search-clear.is-visible {
  opacity: 0.82;
  pointer-events: auto;
}

body[data-page="ownership"] .ownership-search-clear:hover,
body[data-page="ownership"] .ownership-search-clear:focus-visible {
  color: #f1f4ff;
}

body[data-page="ownership"] .ownership-list {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

body[data-page="ownership"] .ownership-list-header,
body[data-page="ownership"] .ownership-list-row {
  display: grid;
  grid-template-columns: 38px minmax(180px, 1fr) 52px 60px minmax(82px, 1fr);
  align-items: center;
  gap: 0.52rem;
}

body[data-page="ownership"] .ownership-list-header {
  border-radius: 10px;
  border: 1px solid rgba(128, 138, 189, 0.23);
  background: rgba(31, 35, 63, 0.72);
  padding: 0.42rem 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.61rem;
  font-weight: 700;
  color: #aeb5e4;
}

body[data-page="ownership"] .ownership-list-row {
  border-radius: 12px;
  border: 1px solid rgba(128, 138, 189, 0.17);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.16));
  padding: 0rem 0.5rem 0.2rem;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.19);
}

body[data-page="ownership"] .ownership-list-player-wrap {
  min-width: 0;
  margin-left: 10px;
  text-wrap-mode: nowrap;
}

body[data-page="ownership"] .ownership-list-player-wrap .team-tag {
  margin-left: 0.4rem;
  font-size: 0.62rem;
  padding: 1px 7px;
}

body[data-page="ownership"] .ownership-player-trigger {
  border: none;
  background: transparent;
  color: #dce1ff;
  font-size: 0.87rem;
  font-weight: 700;
  padding: 0;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: #ccf5;
}

body[data-page="ownership"] .ownership-player-trigger:hover,
body[data-page="ownership"] .ownership-player-trigger:focus-visible {
  color: #ffffff;
  border-bottom-color: rgba(219, 224, 255, 0.85);
}

body[data-page="ownership"] .ownership-player-meta {
  margin-top: 0.15rem;
  color: #9ca4d4;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="ownership"] .ownership-list-metric {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.86rem;
}

body[data-page="ownership"] .ownership-list-leagues {
  text-align: left;
  font-size: 0.66rem;
  line-height: 1.25;
  color: #bac2ee;
}

body[data-page="ownership"] .ownership-empty-state {
  margin: 0.45rem 0.1rem 0.1rem;
  text-align: center;
  color: #9099c8;
  font-size: 0.82rem;
  padding: 0.6rem;
  border: 1px dashed rgba(128, 138, 189, 0.35);
  border-radius: 10px;
}

/* Ownership value view: connected position filter bar
   - Targets the value table filter controls only
   - Makes buttons connected, equal-width, and full panel width
   - Keeps behavior isolated to Ownership page via data-page scoping */
body[data-page="ownership"] .ownership-value-toolbar {
  flex-direction: column;
  align-items: stretch;
  gap: 4rem;
}

body[data-page="ownership"] .ownership-value-position-filter {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
  border: 1px solid rgb(162 172 223 / 32%);
  border-radius: 10px;
  overflow: hidden;
  background: rgb(13 16 32 / 0%);
  padding: 1px;
  gap: 2px;
  margin-bottom: 10px;
}

body[data-page="ownership"] .ownership-value-filter-btn {
  border: 0;
  border-right: 1px solid rgba(128, 138, 189, 0.22);
  background: rgba(19, 22, 43, 0.82);
  color: #95a0d2;
  min-width: 0;
  width: 100%;
  min-height: 2.02rem;
  border-radius: 0;
  font-size: 0.66rem;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

body[data-page="ownership"] .ownership-value-filter-btn:last-child {
  border-right: 0;
}

body[data-page="ownership"] .ownership-value-filter-btn.is-active {
  color: #d8ddff;
  background: rgba(118, 109, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(118, 109, 255, 0.56), inset 0 0 12px rgba(118, 109, 255, 0.22);
}

body[data-page="ownership"] .ownership-value-filter-btn:focus-visible {
  outline: none;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(212, 218, 255, 0.72);
}

body[data-page="ownership"] .ownership-value-table-wrap {
  /* Ownership value table viewport behavior:
     desktop keeps the existing cap while mobile receives runtime-fit height from app.js
     so only this container scrolls in the Player Value tab. */
  border-radius: 12px;
  border: 1px solid rgba(128, 138, 189, 0.23);
  background: rgba(12, 15, 30, 0.5);
  overflow: auto;
  max-height: min(71vh, 760px);
}

body[data-page="ownership"] .ownership-value-table {
  /* Ownership Player Value width model (single source of truth):
     edit the --ov-col-* vars below to tune columns without causing sticky/frozen drift. */
  --ov-col-1-rk: 33px;
  --ov-col-2-player: 84px;
  --ov-col-3-pos: 51px;
  --ov-col-4-tm: 46px;
  --ov-col-5-age: 50px;
  --ov-col-6-1qb-ktc: 75px;
  --ov-col-7-1qb-prk: 75px;
  --ov-col-8-sflx-ktc: 75px;
  --ov-col-9-sflx-prk: 77px;
  --ov-col-10-fpts: 71px;
  --ov-col-11-ppg: 71px;
  --ov-table-min-width:
    calc(
      var(--ov-col-1-rk) +
      var(--ov-col-2-player) +
      var(--ov-col-3-pos) +
      var(--ov-col-4-tm) +
      var(--ov-col-5-age) +
      var(--ov-col-6-1qb-ktc) +
      var(--ov-col-7-1qb-prk) +
      var(--ov-col-8-sflx-ktc) +
      var(--ov-col-9-sflx-prk) +
      var(--ov-col-10-fpts) +
      var(--ov-col-11-ppg)
    );
  width: max(100%, var(--ov-table-min-width));
  min-width: var(--ov-table-min-width);
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--font-sans);
}

body[data-page="ownership"] .ownership-value-table th:nth-child(1),
body[data-page="ownership"] .ownership-value-table td:nth-child(1) {
  width: var(--ov-col-1-rk);
  min-width: var(--ov-col-1-rk);
  max-width: var(--ov-col-1-rk);
}

body[data-page="ownership"] .ownership-value-table th:nth-child(2),
body[data-page="ownership"] .ownership-value-table td:nth-child(2) {
  width: var(--ov-col-2-player);
  min-width: var(--ov-col-2-player);
  max-width: var(--ov-col-2-player);
}

body[data-page="ownership"] .ownership-value-table th:nth-child(3),
body[data-page="ownership"] .ownership-value-table td:nth-child(3) {
  width: var(--ov-col-3-pos);
  min-width: var(--ov-col-3-pos);
  max-width: var(--ov-col-3-pos);
}

body[data-page="ownership"] .ownership-value-table th:nth-child(4),
body[data-page="ownership"] .ownership-value-table td:nth-child(4) {
  width: var(--ov-col-4-tm);
  min-width: var(--ov-col-4-tm);
  max-width: var(--ov-col-4-tm);
}

body[data-page="ownership"] .ownership-value-table th:nth-child(5),
body[data-page="ownership"] .ownership-value-table td:nth-child(5) {
  width: var(--ov-col-5-age);
  min-width: var(--ov-col-5-age);
  max-width: var(--ov-col-5-age);
}

body[data-page="ownership"] .ownership-value-table th:nth-child(6),
body[data-page="ownership"] .ownership-value-table td:nth-child(6) {
  width: var(--ov-col-6-1qb-ktc);
  min-width: var(--ov-col-6-1qb-ktc);
  max-width: var(--ov-col-6-1qb-ktc);
}

body[data-page="ownership"] .ownership-value-table th:nth-child(7),
body[data-page="ownership"] .ownership-value-table td:nth-child(7) {
  width: var(--ov-col-7-1qb-prk);
  min-width: var(--ov-col-7-1qb-prk);
  max-width: var(--ov-col-7-1qb-prk);
}

body[data-page="ownership"] .ownership-value-table th:nth-child(8),
body[data-page="ownership"] .ownership-value-table td:nth-child(8) {
  width: var(--ov-col-8-sflx-ktc);
  min-width: var(--ov-col-8-sflx-ktc);
  max-width: var(--ov-col-8-sflx-ktc);
}

body[data-page="ownership"] .ownership-value-table th:nth-child(9),
body[data-page="ownership"] .ownership-value-table td:nth-child(9) {
  width: var(--ov-col-9-sflx-prk);
  min-width: var(--ov-col-9-sflx-prk);
  max-width: var(--ov-col-9-sflx-prk);
}

body[data-page="ownership"] .ownership-value-table th:nth-child(10),
body[data-page="ownership"] .ownership-value-table td:nth-child(10) {
  width: var(--ov-col-10-fpts);
  min-width: var(--ov-col-10-fpts);
  max-width: var(--ov-col-10-fpts);
}

body[data-page="ownership"] .ownership-value-table th:nth-child(11),
body[data-page="ownership"] .ownership-value-table td:nth-child(11) {
  width: var(--ov-col-11-ppg);
  min-width: var(--ov-col-11-ppg);
  max-width: var(--ov-col-11-ppg);
}

/* --- Desktop Column Widths (≥869px) ---
   Edit these to change desktop column sizing without affecting mobile. */
@media (min-width: 869px) {
  body[data-page="ownership"] .ownership-value-table {
    --ov-col-1-rk: 43px;
    --ov-col-2-player: 72px;
    --ov-col-3-pos: 50px;
    --ov-col-4-tm: 50px;
    --ov-col-5-age: 52px;
    --ov-col-6-1qb-ktc: 67px;
    --ov-col-7-1qb-prk: 80px;
    --ov-col-8-sflx-ktc: 72px;
    --ov-col-9-sflx-prk: 80px;
    --ov-col-10-fpts: 70px;
    --ov-col-11-ppg: 70px;
  }

  /* Desktop: Search bar + Position filter buttons side-by-side */
  body[data-page="ownership"] .ownership-value-toolbar {
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    margin: 0rem 2rem 0.62rem;
  }

  body[data-page="ownership"] .ownership-search-wrap--value {
    max-width: 678px;
    min-width: 398px;
  }

  body[data-page="ownership"] .ownership-value-position-filter {
    justify-content: center;
    width: auto;
    gap: 3px;
    padding: 3px;
  }
}

/* Ownership player-value frozen columns:
   - targets the ownership value table only
   - freezes first three columns (RK, Player, POS) during horizontal scroll
   - preserves existing table sizing by waiting for JS-measured offsets */
body[data-page="ownership"] .ownership-value-table {
  --ownership-value-sticky-left-2: var(--ov-col-1-rk);
  --ownership-value-sticky-left-3: calc(var(--ov-col-1-rk) + var(--ov-col-2-player));
}

body[data-page="ownership"] .ownership-value-table.ownership-value-table--freeze-ready thead th:nth-child(-n+3),
body[data-page="ownership"] .ownership-value-table.ownership-value-table--freeze-ready tbody td:nth-child(-n+3) {
  position: sticky;
}

body[data-page="ownership"] .ownership-value-table.ownership-value-table--freeze-ready thead th:nth-child(1),
body[data-page="ownership"] .ownership-value-table.ownership-value-table--freeze-ready tbody td:nth-child(1) {
  left: 0;
}

body[data-page="ownership"] .ownership-value-table.ownership-value-table--freeze-ready thead th:nth-child(2),
body[data-page="ownership"] .ownership-value-table.ownership-value-table--freeze-ready tbody td:nth-child(2) {
  left: var(--ownership-value-sticky-left-2);
}

body[data-page="ownership"] .ownership-value-table.ownership-value-table--freeze-ready thead th:nth-child(3),
body[data-page="ownership"] .ownership-value-table.ownership-value-table--freeze-ready tbody td:nth-child(3) {
  left: var(--ownership-value-sticky-left-3);
}

body[data-page="ownership"] .ownership-value-table.ownership-value-table--freeze-ready thead th:nth-child(-n+3) {
  z-index: 3;
}

body[data-page="ownership"] .ownership-value-table.ownership-value-table--freeze-ready tbody td:nth-child(-n+3) {
  z-index: 1;
  background: #111422;
}

body[data-page="ownership"] .ownership-value-table.ownership-value-table--freeze-ready tbody tr:nth-child(even) td:nth-child(-n+3) {
  background: #161827;
}

body[data-page="ownership"] .ownership-value-table.ownership-value-table--freeze-ready thead th:nth-child(1) {
  z-index: 6;
}

body[data-page="ownership"] .ownership-value-table.ownership-value-table--freeze-ready thead th:nth-child(2) {
  z-index: 5;
}

body[data-page="ownership"] .ownership-value-table.ownership-value-table--freeze-ready thead th:nth-child(3) {
  z-index: 4;
}

body[data-page="ownership"] .ownership-value-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(34, 39, 69, 0.94);
  color: #b8c0ef;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.43rem 0.3rem;
  border-bottom: 1px solid rgba(128, 138, 189, 0.22);
  font-family: var(--font-sans);
  user-select: none;
  /* Keep sort-label + icon on one line (no icon wrap under header text). */
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

body[data-page="ownership"] .ownership-value-table thead th.is-sortable {
  cursor: pointer;
}

/* Ownership value table sort icon parity with Stats page */
body[data-page="ownership"] .ownership-value-table thead th.stats-sort-asc::after,
body[data-page="ownership"] .ownership-value-table thead th.stats-sort-desc::after {
  display: inline-block;
  margin-left: 0.2rem;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.55rem;
  opacity: 0.6;
  vertical-align: middle;
  white-space: nowrap;
}

body[data-page="ownership"] .ownership-value-table thead th.stats-sort-asc::after {
  content: "\f885";
}

body[data-page="ownership"] .ownership-value-table thead th.stats-sort-desc::after {
  content: "\f160";
}

body[data-page="ownership"] .ownership-value-table td {
  text-align: center;
  font-size: 0.75rem;
  color: #cbd2f7;
  padding: 0.42rem 0.28rem;
  border-bottom: 1px solid rgba(128, 138, 189, 0.2);
  white-space: nowrap;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

body[data-page="ownership"] .ownership-value-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.018);
}

body[data-page="ownership"] .ownership-value-table .ownership-value-player-cell {
  text-align: left;
  padding-left: 0.34rem;
  max-width: 132px;
  overflow: hidden;
}

body[data-page="ownership"] .ownership-value-table .ownership-player-trigger--value {
  width: 100%;
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 300;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 819px) {
body[data-page="ownership"] .ownership-value-table .ownership-player-trigger--value {
  width: 100%;
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }
}
body[data-page="ownership"] .ownership-value-team-cell {
  text-align: center;
}

body[data-page="ownership"] .ownership-value-team-cell img.team-logo {
  width: 20px;
  height: 20px;
}

body[data-page="ownership"] .ownership-value-rk {
  color: #95a1d6;
  font-weight: 700;
}

body[data-page="ownership"] .ownership-value-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 1.2rem;
  min-height: 1.2rem;
  max-height: 1.2rem;
  border-radius: 6px;
  padding: 0.05rem 0.24rem;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(128, 138, 189, 0.24);
  background: rgba(13, 17, 35, 0.88);
}

body[data-page="ownership"] #ownership-player-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-page="ownership"] #ownership-player-modal.hidden {
  display: none;
}

body[data-page="ownership"] .ownership-modal-content {
  width: min(94vw, 760px);
  max-height: 88vh;
  border-radius: 14px;
  padding: 0.72rem 0.76rem 0.62rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body[data-page="ownership"] #ownership-modal-header {
  position: relative;
  text-align: center;
}

body[data-page="ownership"] #ownership-modal-left {
  position: absolute;
  left: 0.4rem;
  top: 0.1rem;
}

body[data-page="ownership"] #ownership-modal-player-name {
  margin: 0 1.9rem 0.18rem;
}

body[data-page="ownership"] #ownership-modal-player-vitals {
  display: flex;
  justify-content: center;
}

body[data-page="ownership"] #ownership-modal-summary-row {
  display: flex;
  justify-content: center;
  margin: 0.04rem 0 0.44rem;
}

body[data-page="ownership"] #ownership-modal-summary-chips {
  display: flex;
  gap: 0.58rem;
  width: 100%;
  justify-content: center;
  align-items: stretch;
}

body[data-page="ownership"] .ownership-summary-chip {
  min-width: 0;
  flex: 1;
}

/* Ownership modal top summary chips mirror Stats game-log chip styling.
   This only affects the Ownership player-detail modal header region. */
body[data-page="ownership"] #ownership-player-modal .gamelogs-summary-chip {
  flex: 1;
  padding: 0.25rem 0.7rem;
  text-align: center;
  white-space: nowrap;
  min-width: auto;
  position: relative;
  background: rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(1px) saturate(180%);
  border: 1px solid rgba(250, 250, 250, 0.1);
  border-radius: 13px;
  box-shadow: 0 8px 32px rgba(31, 38, 105, 0.1), inset 0 6px 20px rgba(255, 255, 255, 0.013);
}

body[data-page="ownership"] #ownership-player-modal .gamelogs-summary-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 13px;
  backdrop-filter: blur(1px);
  box-shadow: inset 10px 12px 0px -8px rgba(255, 255, 255, .03), inset 0px 8px 0px -6px rgba(255, 255, 255, .031);
  opacity: 0.4;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(100%);
  pointer-events: none;
}

body[data-page="ownership"] #ownership-player-modal .gamelogs-summary-chip h4 {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 0.1rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-panel-border);
  padding-bottom: 0.1rem;
  gap: 0.5rem;
}

body[data-page="ownership"] #ownership-player-modal .gamelogs-summary-chip .chip-header-value {
  font-size: 0.8rem;
}

body[data-page="ownership"] #ownership-player-modal .gamelogs-summary-chip .chip-values {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  font-weight: 400;
}

body[data-page="ownership"] #ownership-player-modal .gamelogs-summary-chip .chip-separator {
  margin: 0 0.25rem;
}

body[data-page="ownership"] #ownership-player-modal .gamelogs-summary-chip .chip-unit {
  color: var(--color-text-secondary);
}

body[data-page="ownership"] .ownership-modal-body {
  overflow: auto;
  max-height: 100%;
  border: 1px solid rgba(128, 138, 189, 0.22);
  border-radius: 12px;
  background: rgba(8, 12, 24, 0.46);
  padding: 0.45rem;
}

body[data-page="ownership"] .ownership-modal-section-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.38rem;
  text-align: center;
  font-size: 0.8rem;
  color: #d9deff;
  font-weight: 700;
  letter-spacing: 0.02em;
}

body[data-page="ownership"] .ownership-modal-section-subtitle {
  font-size: 0.64rem;
  color: #98a1cf;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-page="ownership"] .ownership-modal-league-list {
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
}

body[data-page="ownership"] .ownership-modal-league-item {
  border-radius: 10px;
  border: 1px solid rgba(128, 138, 189, 0.2);
  background: rgba(20, 24, 47, 0.57);
  padding: 0.4rem 0.48rem;
}

body[data-page="ownership"] .ownership-modal-league-item.is-missing {
  border-style: dashed;
  opacity: 0.82;
}

body[data-page="ownership"] .ownership-modal-league-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
}

body[data-page="ownership"] .ownership-modal-league-abbr {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  min-width: 2.2rem;
}

body[data-page="ownership"] .ownership-modal-league-name {
  color: #cad1fa;
  font-size: 0.72rem;
  font-weight: 600;
}

body[data-page="ownership"] .ownership-modal-owner-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.28rem;
  color: #afbbe9;
  font-size: 0.71rem;
}

body[data-page="ownership"] .ownership-modal-owner-label {
  color: #97a4d7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6rem;
  font-weight: 700;
}

body[data-page="ownership"] .ownership-modal-owner-value {
  color: #d9deff;
  font-weight: 700;
}

body[data-page="ownership"] .ownership-modal-owner-team {
  border-radius: 7px;
  border: 1px solid rgba(128, 138, 189, 0.28);
  background: rgba(114, 125, 182, 0.16);
  color: #d1d8ff;
  font-size: 0.62rem;
  padding: 0.07rem 0.33rem;
}

body[data-page="ownership"] .ownership-modal-warning {
  margin: 0.5rem 0.1rem 0.1rem;
  padding: 0.35rem 0.5rem;
  border-radius: 9px;
  border: 1px dashed rgba(255, 166, 94, 0.42);
  color: #f8bd8e;
  background: rgba(255, 166, 94, 0.07);
  font-size: 0.65rem;
}

@media (max-width: 940px) {
  body[data-page="ownership"] #secondary-header-row {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="ownership"] #secondary-header-row .username-area,
  body[data-page="ownership"] #ownershipModeSwitcher {
    flex: 1 1 auto;
    min-width: 100%;
    max-width: 100%;
  }
    

  body[data-page="ownership"] .ownership-list-header,
  body[data-page="ownership"] .ownership-list-row {
    grid-template-columns: 34px minmax(130px, 1fr) 36px 44px minmax(70px, 1fr);
    gap: 0.36rem;
  }

  body[data-page="ownership"] .ownership-list-header {
    font-size: 0.56rem;
    letter-spacing: 0.04em;
  }

  body[data-page="ownership"] .ownership-player-trigger {
    font-size: 0.76rem;
  }

  body[data-page="ownership"] .ownership-player-meta,
  body[data-page="ownership"] .ownership-list-leagues {
    font-size: 0.58rem;
  }

  body[data-page="ownership"] .ownership-list-metric {
    font-size: 0.73rem;
  }

  body[data-page="ownership"] .ownership-value-toolbar {
    gap: 0.44rem;
  }

  body[data-page="ownership"] .ownership-value-position-filter {
    width: 100%;
  }

  body[data-page="ownership"] .ownership-modal-content {
    width: min(96vw, 760px);
  }

  body[data-page="ownership"] #ownership-modal-summary-chips {
    gap: 0.28rem;
  }
}
@media (max-width: 640px) {
  body[data-page="ownership"] .ownership-shell {
    padding: 0.54rem 0.45rem;
    border-radius: 12px;
  }

  body[data-page="ownership"] .ownership-search-input {
    min-height: 2.02rem;
    font-size: 16px;
    max-height: 2.32rem;
  }

  body[data-page="ownership"] .ownership-value-filter-btn {
    min-height: 2.02rem;
    font-size: 0.81rem;
    letter-spacing: 0.05em;
    border: 1px solid #fff3;
    border-radius: 7px;
  }

  body[data-page="ownership"] .ownership-value-table .ownership-value-player-cell {
    max-width: 112px;
  }

  body[data-page="ownership"] .ownership-value-table thead th,
  body[data-page="ownership"] .ownership-value-table td {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }

  body[data-page="ownership"] .ownership-list-header,
  body[data-page="ownership"] .ownership-list-row {
    grid-template-columns: 26px minmax(134px, 1fr) 9px 56px minmax(52px, 1fr);
    gap: 0.18rem;
    padding-left: 0.28rem;
    padding-right: 0.3rem;
  }

  body[data-page="ownership"] .ownership-list-header {
    font-size: 0.5rem;
  }

  body[data-page="ownership"] .ownership-player-trigger {
    font-size: 0.72rem;
  }

  body[data-page="ownership"] .ownership-list-player-wrap .team-tag {
    margin-left: 0.25rem;
    font-size: 0.56rem;
    padding: 1px 5px;
  }

  body[data-page="ownership"] .ownership-player-meta {
    font-size: 0.53rem;
  }

  body[data-page="ownership"] .ownership-list-metric {
    font-size: 0.64rem;
  }

  body[data-page="ownership"] .ownership-list-leagues {
    font-size: 0.52rem;
    line-height: 1.1;
  }

  body[data-page="ownership"] .ownership-modal-content {
    max-height: 90vh;
    padding: 0.62rem 0.5rem 0.5rem;
  }

  body[data-page="ownership"] #ownership-modal-left {
    position: static;
    justify-content: center;
    margin-bottom: 0.2rem;
  }

  body[data-page="ownership"] #ownership-modal-player-name {
    margin: 0 1.2rem 0.18rem;
    font-size: 1rem;
  }

  body[data-page="ownership"] #ownership-modal-summary-chips {
    flex-direction: column;
  }

  body[data-page="ownership"] .ownership-modal-owner-row {
    align-items: flex-start;
  }

  body[data-page="ownership"] .ownership-modal-owner-team {
    margin-left: 0;
  }
}

/* Make the inputs take up more space on mobile */
@media (max-width: 520px) {

  body[data-page="welcome"] #secondary-header-row .username-area,
  body[data-page="welcome"] #secondary-header-row .custom-select-wrapper {
    flex: 1;
    /* Allow them to grow equally */
    max-width: 50%;
    /* Each takes up half the space */
  }
}

/* ⬇︎ BOTTOM MENU PANEL (LEAGUE NAV + WATCHLIST) ⬇︎ */
/* Fixed bottom panel wrapping league navigation and watchlist button.
   Shows on both mobile and desktop for the Rosters page. */
#bottom-menu-panel {
  display: none;
  position: fixed;
  bottom: 8px;
  left: 20px;
  right: 2px;
  z-index: 100;
  padding: 0.9rem 1rem;
  pointer-events: none;
}

/* Show on rosters page (both mobile and desktop) */
body[data-page="rosters"] #bottom-menu-panel {
  display: block;
}

/* Hidden state for compare / start-sit / trade modes */
#bottom-menu-panel.hidden {
  display: none !important;
}

/* Inner flex row: league nav + watchlist button side by side */
.bottom-menu-panel-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  max-width: 386px;
  margin: 0 auto;
}

/* Dimmed state when scrolling */
#bottom-menu-panel.scrolling .bottom-menu-panel-inner {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

#bottom-menu-panel .bottom-menu-panel-inner {
  transition: opacity 0.3s ease;
}

/* League nav: now a static child inside the bottom panel (no longer fixed) */
#mobile-league-nav {
  flex: 1 1 auto;
  min-width: 0;
  pointer-events: auto;
}

/* Desktop: hide league nav portion (since desktop uses the header dropdown) */
@media (min-width: 820px) {
  #mobile-league-nav {
    display: none;
  }
}

.mobile-league-nav-panel {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 3.1rem;
  width: 100%;
  max-width: 312px;
  overflow: hidden;
  border-radius: 0.7rem;
  pointer-events: auto;
  transition: opacity 0.3s ease, transform 0.3s ease;
  background: rgb(119 109 144 / 35%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.3), inset 0 0 25px #6000ff25;
}

/* ---- Watchlist Panel Button ---- */
/* Compact pill button matching the league nav glass aesthetic */
.watchlist-panel-btn {
  position: relative;
  flex: 0 0 auto;
  height: 3.1rem;
  width: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.7rem;
  cursor: pointer;
  pointer-events: auto;
  font-size: 1.45rem;
  padding-left: 5px;
  color: rgba(255, 255, 255, 0.88);
  background: rgb(119 109 144 / 35%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.3), inset 0 0 25px #6000ff25;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.watchlist-panel-btn:active {
  transform: scale(0.93);
  background: rgba(118, 109, 255, 0.25);
}

.watchlist-panel-btn:hover {
  background: rgba(118, 109, 255, 0.18);
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.3), inset 0 0 30px #7c6cff30;
}

/* Watchlist count badge: small accent circle on top-right corner */
.watchlist-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: var(--color-accent-primary, #766DFF);
  box-shadow: 0 1px 5px rgba(118, 109, 255, 0.5);
  pointer-events: none;
}

.watchlist-badge.hidden {
  display: none;
}

.league-nav-arrow {
  flex: 0 0 3rem;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.league-nav-arrow:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.05);
}

.league-nav-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.league-nav-divider {
  width: 1px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.17);
}

.league-nav-selector {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.league-nav-selector:active {
  background: rgba(255, 255, 255, 0.05);
}

.league-nav-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  width: 100%;
  min-width: 0;
}

.league-nav-name-wrapper {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  max-width: 100%;
}

.league-nav-name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(198 204 224 / 95%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  letter-spacing: 0.01em;
}

.league-nav-dropdown-icon {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.league-nav-subtitle {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
}

/* League Selection Popup */
#league-selection-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1.43rem;
  padding-bottom: 3rem;
  /* Space above the nav panel */
  pointer-events: auto;
}

#league-selection-popup.hidden {
  display: none;
}

.league-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
}

.league-popup-content {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 57vh;
  border-radius: 1rem;
  background: rgb(92 89 117 / 25%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  animation: slideUpFadeIn 0.3s ease-out;
  pointer-events: auto;
  z-index: 1001;
}

@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.league-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.43rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.league-popup-header h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}

.league-popup-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.league-popup-close:hover {
  color: rgba(255, 255, 255, 0.95);
}

.league-popup-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 0.5rem;
}

.league-popup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.league-popup-item:hover,
.league-popup-item:active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.league-popup-item.active {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.4);
}

.league-popup-item-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 300;
  color: rgb(201 208 237 / 90%);
}

.league-popup-item-check {
  color: var(--color-accent-primary);
  font-size: 1.125rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.league-popup-item.active .league-popup-item-check {
  opacity: 1;
}

@media (max-width: 768px) {

  .start-sit-total-label,
  .start-sit-total-value {
    display: block;
  }

  .start-sit-total-value {
    margin-top: 0.25rem;
  }
}

/* ⬇︎ MOBILE-ONLY ROSTERS PAGE HEADER LAYOUT ⬇︎ */
@media (max-width: 819px) {

  /* Hide username and league select on rosters page mobile */
  body[data-page="rosters"] .username-area,
  body[data-page="rosters"] .custom-select-wrapper {
    display: none !important;
  }

  /* Hide clear filters button on mobile */
  body[data-page="rosters"] #clearFiltersButton {
    display: none !important;
  }

  /* Reorganize header to 2 rows */
  body[data-page="rosters"] #header-container .app-header {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0.15rem 0.45rem;
    gap: 0.35rem;
  }

  /* First row: Navigation buttons */
  body[data-page="rosters"] #primary-header-row {
    display: flex;
    width: 100%;
  }

  body[data-page="rosters"] .nav-buttons-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 0.25rem;
  }

  /* Second row: View switcher + Start/Sit + Filters + Compare */
  body[data-page="rosters"] #contextual-controls {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  body[data-page="rosters"] #secondary-header-row {
    display: none !important;
  }

  body[data-page="rosters"] #filters-row {
    display: flex;
    align-items: stretch;
    /* Changed from center to stretch for uniform height */
    justify-content: flex-start;
    gap: 0.25rem;
    width: 100%;
    padding: 0;
    border-top: none;
    flex-wrap: nowrap;
  }

  /* Start/Sit button - MOVED TO FIRST POSITION */
  body[data-page="rosters"] .start-sit-button-slot {
    order: 1;
    flex: 0 0 auto !important;
    display: flex;
    align-items: stretch;
  }

  body[data-page="rosters"] .start-sit-button {
    padding: 0.25rem 0.38rem !important;
    gap: 0.1rem !important;
    min-width: 3.3rem !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-bottom: -2px;
  }

  body[data-page="rosters"] .start-sit-button .analyzer-icon {
    font-size: 0.95rem !important;
    line-height: 1 !important;
  }

  body[data-page="rosters"] .start-sit-button .analyzer-label {
    font-size: 0.6rem !important;
    margin-top: 0.04rem !important;
    line-height: 1.05 !important;
    font-weight: 700;
    font-family: 'Google Sans';
  }

  /* Prevent alignment shifts on Start/Sit button - NO transform or outline */
  body[data-page="rosters"] .start-sit-button:hover,
  body[data-page="rosters"] .start-sit-button:active,
  body[data-page="rosters"] .start-sit-button:focus,
  body[data-page="rosters"] .start-sit-button:focus-visible {
    transform: none !important;
    outline: none !important;
  }

  body[data-page="rosters"] .start-sit-button.active:hover,
  body[data-page="rosters"] .start-sit-button.active:active,
  body[data-page="rosters"] .start-sit-button.active:focus {
    transform: none !important;
  }

  /* View switcher - MOVED TO SECOND POSITION */
  body[data-page="rosters"] .view-switcher {
    order: 2;
    flex: 0 0 auto;
    padding: 0.08rem 0.08rem;
    gap: 0;
    margin-right: -2px;
  }

  body[data-page="rosters"] .view-switcher button {
    padding: 0.3rem 0.4rem !important;
    min-height: 1.5rem;
    font-size: 0.6rem !important;
    gap: 0.04rem;
  }

  body[data-page="rosters"] .view-switcher button i {
    font-size: 0.72rem;
    line-height: 1;
  }

  body[data-page="rosters"] .view-switcher .switcher-label {
    font-size: 0.36rem;
    line-height: 1;
  }

  /* View dropdown - MOBILE ONLY - replaces switcher */
  body[data-page="rosters"] .view-switcher-dropdown {
    order: 2;
    flex: 0 0 auto !important;
    position: relative;
    display: flex;
    align-items: stretch;
  }

  body[data-page="rosters"] .view-dropdown-toggle {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.1rem !important;
    padding: 0.32rem 0.35rem !important;
    min-height: auto !important;
    height: auto !important;
    min-width: 3.45rem;
    background: rgba(13, 14, 35, 0.05);
    border: 1px solid rgba(128, 138, 189, 0.2);
    border-radius: 8px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
      inset 0 1px 2px rgba(255, 255, 255, 0.06);
    position: relative;
  }

  /* Light glow when View: POS is active (default) */
  body[data-page="rosters"] .view-dropdown-toggle:has(.fa-users) {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
      inset 0 1px 2px rgba(255, 255, 255, 0.06),
      0 0 8px rgba(66, 194, 255, 0.25),
      inset 0 0 18px 9px rgba(66, 194, 255, 0.065);
    border-color: rgba(66, 194, 255, 0.3);
  }

  /* Condensed icon glow */
  body[data-page="rosters"] .view-dropdown-toggle:has(.fa-compress) {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
      inset 0 1px 2px rgba(255, 255, 255, 0.06),
      0 0 8px rgba(255, 158, 89, 0.25),
      inset 0 0 18px 9px rgba(255, 158, 89, 0.065);
    border-color: rgba(255, 158, 89, 0.32);
  }

  /* Different colored glow when View: Lineup is active */
  body[data-page="rosters"] .view-dropdown-toggle:has(.fa-list-ol) {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
      inset 0 1px 2px rgba(255, 255, 255, 0.06),
      0 0 8px rgba(118, 109, 255, 0.25),
      inset 0 0 18px 9px rgba(118, 109, 255, 0.065);
    border-color: rgba(118, 109, 255, 0.3);
  }

  body[data-page="rosters"] .view-dropdown-toggle i:first-child {
    font-size: 0.9rem !important;
    line-height: 1 !important;
  }

  body[data-page="rosters"] .view-dropdown-toggle .switcher-label {
    font-size: 0.57rem !important;
    line-height: 1.05 !important;
    font-weight: 700;
    font-family: 'Google Sans';
  }

  /* Prevent alignment shifts on View dropdown - NO transform or outline */
  body[data-page="rosters"] .view-dropdown-toggle:hover,
  body[data-page="rosters"] .view-dropdown-toggle:active,
  body[data-page="rosters"] .view-dropdown-toggle:focus,
  body[data-page="rosters"] .view-dropdown-toggle:focus-visible {
    transform: none !important;
    outline: none !important;
  }

  body[data-page="rosters"] .view-dropdown-arrow {
    position: absolute;
    top: 10px;
    right: 3px;
    font-size: 0.6rem !important;
    opacity: 0.7;
    text-shadow: 0 0 3px #5300ffaa, 0 0 5px #5300ff;
  }

  body[data-page="rosters"] .view-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    min-width: 100%;
    background: rgba(18, 22, 40, 0.95);
    border: 1px solid rgba(169, 178, 227, 0.2);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    z-index: 200;
    overflow: hidden;
  }

  body[data-page="rosters"] .view-dropdown-menu.hidden {
    display: none;
  }

  body[data-page="rosters"] .view-dropdown-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.65rem;
    white-space: nowrap;
    border-radius: 4px;
  }

  body[data-page="rosters"] .view-dropdown-option i {
    font-size: 0.8rem;
  }

  body[data-page="rosters"] .view-dropdown-option.active {
    color: #afb3d4;
    background: rgba(128, 138, 189, 0.08);
    border-color: rgba(128, 138, 189, 0.2);
    box-shadow: 0 0 3px rgba(128, 138, 189, 0.15);
  }

  /* Hide old switcher on mobile */
  body[data-page="rosters"] .view-switcher {
    display: none;
  }

  /* Filters - positioned after view switcher */
  body[data-page="rosters"] .filters-container {
    order: 3;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 0.32rem;
    overflow: visible;
  }

  body[data-page="rosters"] #positional-filters {
    display: flex;
    gap: 0rem;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  body[data-page="rosters"] .filter-btn {
    padding: 0.32rem 0.35rem !important;
    font-size: 0.8rem !important;
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-weight: 500;
    font-family: 'Product Sans';
  }

  body[data-page="rosters"] .filter-btn:not(.active):hover {
    /* Disable hover effect on inactive buttons only to prevent tap persistence */
    color: var(--color-text-secondary) !important;
    background: transparent !important;
  }

  body[data-page="rosters"] .filter-btn i {
    font-size: 0.72rem;
  }

  /* Compare controls - REDUCED: smaller padding, smaller icon */
  body[data-page="rosters"] .compare-controls {
    order: 4;
    flex: 0 0 auto;
  }

  body[data-page="rosters"] .compare-search-toggle {
    padding: 0.32rem 0.4rem;
    font-size: 0.75rem;
  }

  /* Search popover mobile positioning - span full width leaving only start/sit visible */
  body[data-page="rosters"] .compare-search-popover {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: calc(0rem);
    width: auto;
    max-width: none;
    z-index: 100;
  }

  body[data-page="rosters"] .compare-search-popover:not(.hidden) {
    transform: translateY(0);
  }

  body[data-page="rosters"] .compare-controls {
    position: static;
  }

  body[data-page="rosters"] .filters-row {
    position: relative;
  }

  /* Make start/sit and view-switcher expand on wider mobile screens */
  @media (min-width: 500px) and (max-width: 819px) {
    body[data-page="rosters"] .start-sit-button-slot {
      flex: 0 1 auto;
    }

    body[data-page="rosters"] .start-sit-button {
      min-width: 4.5rem;
    }


    body[data-page="rosters"] .view-switcher {
      flex: 0 1 auto;
    }
  }
}

/* Desktop rosters - extend search popover to cover filters */
@media (min-width: 820px) {
  body[data-page="rosters"] .compare-search-popover {
    right: 0;
    left: auto;
    width: 400px;
  }

  /* Desktop: Hide dropdown, show old switcher */
  body[data-page="rosters"] .view-switcher-dropdown {
    display: none;
  }

  body[data-page="rosters"] .view-switcher {
    display: flex !important;
    min-width: 85px;
    margin-left: 19px;
  }
}

/* ============================================================================
   WATCHLIST TOGGLE (inside Game Logs modal header)
   Small button positioned to the left of the modal close button.
   Toggles add/remove player from the watchlist.
   ============================================================================ */
#watchlist-modal-toggle {
  position: absolute;
  top: 0.6rem;
  right: 2.9rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 0.45rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  /* Untoggled / dimmed glass look */
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.35);
}

#watchlist-modal-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
}

/* Toggled / active state (player IS watchlisted) */
#watchlist-modal-toggle.is-watchlisted {
  background: rgba(118, 109, 255, 0.22);
  color: #a5b4fc;
  box-shadow: 0 0 8px rgba(118, 109, 255, 0.25);
}

#watchlist-modal-toggle.is-watchlisted:hover {
  background: rgba(118, 109, 255, 0.32);
  color: #c4b5fd;
}

/* Watchlist toggle pulse animation for visual feedback on tap */
@keyframes wlTogglePulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
#watchlist-modal-toggle.wl-toggle-pulse {
  animation: wlTogglePulse 0.35s ease;
}

/* ============================================================================
   WATCHLIST MODAL
   ============================================================================ */
#watchlist-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

#watchlist-modal.hidden {
  display: none;
}

#watchlist-modal > .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.watchlist-modal-content {
  position: relative;
  z-index: 101;
  width: 94%;
  max-width: 580px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--panel-border-radius, 12px);
  overflow: hidden;
  padding: 0.65rem 0.25rem 0.25rem 0.25rem;
  background: linear-gradient(165deg, rgba(72, 80, 118, 0.64), rgba(42, 47, 72, 0.5));
}

/* Watchlist modal header: title + position filter chips + count */
#watchlist-modal-header {
  padding: 0.45rem 1rem 0.65rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.watchlist-modal-title {
  font-family: var(--font-display, 'Quicksand', sans-serif);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--color-text-primary, #EAEBF0);
  margin-bottom: 0.55rem;
  letter-spacing: 0.02em;
}

.watchlist-modal-title i {
  color: var(--color-accent-primary, #766DFF);
  margin-right: 0.35rem;
  font-size: 0.95rem;
}

/* Controls row: position filters centered, count overlaid so it doesn't shift filters */
.watchlist-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.watchlist-position-filters {
  display: flex;
  gap: 0.3rem;
}

.watchlist-filter-btn {
  font-family: var(--font-display, 'Quicksand', sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 8px 7px -4px #cdf1, 0px 2px 5px #0002;
}

.watchlist-filter-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.watchlist-filter-btn.is-active {
  background: rgba(118, 109, 255, 0.18);
  border-color: rgba(118, 109, 255, 0.45);
  color: #c4b5fd;
  box-shadow: 0 0 6px rgba(118, 109, 255, 0.15);
}

/* Position-specific active tints */
.watchlist-filter-btn.is-active[data-watchlist-pos="QB"] { background: rgba(255, 178, 216, 0.13); border-color: rgba(255, 178, 216, 0.4); color: #FFB2D8; }
.watchlist-filter-btn.is-active[data-watchlist-pos="RB"] { background: rgba(187, 247, 224, 0.1); border-color: rgba(187, 247, 224, 0.4); color: #bbf7e0; }
.watchlist-filter-btn.is-active[data-watchlist-pos="WR"] { background: rgba(160, 194, 247, 0.12); border-color: rgba(160, 194, 247, 0.4); color: #A0C2F7; }
.watchlist-filter-btn.is-active[data-watchlist-pos="TE"] { background: rgba(255, 199, 138, 0.12); border-color: rgba(255, 199, 138, 0.4); color: #FFC78A; }

/* Count badge: absolutely positioned so it doesn't push the centered filters off-center */
.watchlist-count {
  position: absolute;
  right: 0;
  font-family: var(--font-display, 'Quicksand', sans-serif);
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.02em;
}

/* Scrollable card body */
.watchlist-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 0.45rem;
}

/* ---- Watchlist card grid: 2 columns ---- */
.watchlist-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

/* Always 2 columns even on narrow screens — cards shrink rather than stack */
@media (max-width: 400px) {
  .watchlist-card-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Individual watchlist card ----
   Reuses the player-row visual identity but adapted for the modal grid. */
.watchlist-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgb(146 152 198 / 4%);
  border: 1px solid rgb(213 218 241 / 19%);
  border-radius: 10px;
  padding: 0.3rem 0.4rem 0.3rem;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-shadow: inset 2px 53px 30px -7px #a0c0f015, inset 8px 10px 10px -14px #def4, 1px 2px 8px #0002;
  overflow: hidden; /* clip the watermark to card bounds */
}

/* Team logo watermark: large, faded logo centered behind card content */
.watchlist-card .wl-card-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  object-fit: contain;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  filter: grayscale(100%);
  transition: opacity 0.2s ease;
}

/* Slightly brighten the watermark on card hover */
.watchlist-card:hover .wl-card-watermark {
  opacity: 0.11;
}

/* Per-team watermark opacity boosts for darker/less-visible logos (watchlist cards) */
.watchlist-card .wl-card-watermark[alt="CHI"],
.watchlist-card .wl-card-watermark[alt="CAR"],
.watchlist-card .wl-card-watermark[alt="NYG"] {
  opacity: 0.09;
  filter: grayscale(100%);
}

/* NYJ watchlist watermark: shifted up, brighter for dark logo */
.watchlist-card .wl-card-watermark[alt="NYJ"] {
  opacity: 0.14;
  filter: grayscale(100%) brightness(1.6);
  top: 42%;
}

.watchlist-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

/* Remove button: top-right corner of card */
/* Remove button: circle-xmark icon, top-right corner */
.watchlist-card-remove {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.78rem;
  cursor: pointer;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}

.watchlist-card-remove:hover {
  color: #f9a8c9;
}

/* Card content rows: mimic .player-row structure */
.watchlist-card .wl-main-line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0rem;
  padding-right: 1.2rem; /* space for remove button */
}

/* Position tag: matches the rosters page .player-tag styling (TAG_COLORS via CSS vars, dark text) */
.watchlist-card .wl-pos-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 2px 0px;
  border-radius: 5px;
  color: var(--color-bg, #0f0f1a);
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.9;
  width: 18px;
}

/* Position colors match rosters TAG_COLORS (CSS variables) */
.watchlist-card .wl-pos-tag.QB { background-color: var(--pos-qb); }
.watchlist-card .wl-pos-tag.RB { background-color: var(--pos-rb); }
.watchlist-card .wl-pos-tag.WR { background-color: var(--pos-wr); }
.watchlist-card .wl-pos-tag.TE { background-color: var(--pos-te); }
.watchlist-card .wl-pos-tag:not(.QB):not(.RB):not(.WR):not(.TE) {
  background-color: var(--pos-bn, rgba(148, 163, 184, 0.9));
}

/* Player name: reduced font size (0.72rem) to prevent horizontal scroll on narrow screens */
.watchlist-card .wl-player-name {
  font-family: 'Product Sans';
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-primary, #EAEBF0);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  transition: color 0.15s ease;
  margin-left: 2px;
}

.watchlist-card .wl-player-name:hover {
  color: var(--color-accent-secondary, #42C2FF);
}

.watchlist-card .wl-meta-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--color-text-secondary, #9096C0);
  margin-bottom: 0.05rem;
}

.watchlist-card .wl-meta-line .separator {
  opacity: 0.35;
}

.watchlist-card .wl-meta-line .team-logo {
  width: 19px;
  height: 19px;
  vertical-align: middle;
}

.watchlist-card .wl-fa-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 0.28rem;
  border-radius: 0.22rem;
  background: rgba(100, 116, 139, 0.35);
  color: rgba(226, 232, 240, 0.95);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Team section in meta line: group logo + abbreviation flush-right */
.watchlist-card .wl-meta-team {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.watchlist-card .wl-team-abbr {
  font-weight: 600;
  color: rgba(234, 235, 240, 0.72);
}

/* Pos rank: no auto-margin since it's now on the left side of the meta line */
.watchlist-card .wl-pos-rank {
  color: rgba(144, 150, 192, 0.88);
  font-weight: 500;
  font-size: 0.7rem;
}

.watchlist-card .wl-value-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.56rem;
  color: var(--color-text-tertiary, #5F6795);
  padding-top: 0rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 0.2rem;
}

.watchlist-card .wl-value-line .wl-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  color: rgba(234, 235, 240, 0.8);
}

.watchlist-card .wl-value-line .wl-stat strong {
  color: rgba(234, 235, 240, 0.92);
  font-size: 0.75rem;
  font-weight: 500;
}

.watchlist-card .wl-value-line .wl-stat small {
  color: rgba(144, 150, 192, 0.72);
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.watchlist-card .wl-value-line .value {
  color: var(--color-text-secondary, #9096C0);
  font-weight: 600;
}

/* KTC rank+suffix wrapper: keeps rank number and ordinal suffix flush together */
.watchlist-card .wl-ktc-rank-group {
  display: inline;
  white-space: nowrap;
}

/* KTC rank display: ordinal rank + parenthesised value (mimics rosters page default layout) */
.watchlist-card .wl-ktc-rank {
  font-size: 0.75rem;
  font-weight: 500;
}

/* Suffix sits flush against the rank number with no gap */
.watchlist-card .wl-ktc-rank-suffix {
  font-size: 0.6rem;
  font-weight: 400;
}

.watchlist-card .wl-ktc-val-parens {
  font-size: 0.65rem;
  font-weight: 500;
}

/* Age in meta line: color set inline by getAgeColorForRoster */
.watchlist-card .wl-age {
  font-weight: 500;
  font-size: 0.7rem;
}

/* Age group wrapper: keeps age + suffix together in the center of the meta line */
.watchlist-card .wl-age-group {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

/* Action buttons row beneath each card */
.watchlist-card-actions {
  display: flex;
  gap: 0.35rem;
}

.watchlist-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.25rem 0.2rem;
  border: 1px solid #aeaeb838;
  border-radius: 0.35rem;
  background: rgb(59 61 94 / 0%);
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-display, 'Quicksand', sans-serif);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0rem;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 1px 11px 11px -3px #aaf2;
}

.watchlist-action-btn i {
  font-size: 0.6rem;
}

.watchlist-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
}

/* Filter action accent (crosshairs icon) */
.watchlist-action-btn--filter:hover {
  background: rgba(66, 194, 255, 0.1);
  border-color: rgba(66, 194, 255, 0.35);
  color: #42C2FF;
}

/* Ownership action accent */
.watchlist-action-btn--ownership:hover {
  background: rgba(118, 109, 255, 0.1);
  border-color: rgba(118, 109, 255, 0.35);
  color: #a5b4fc;
}

/* Ownership action: loading spinner when lazy-loading context */
.watchlist-action-btn--ownership.is-loading {
  pointer-events: none;
  opacity: 0.6;
}

.watchlist-action-btn--ownership.is-loading i {
  animation: watchlistSpin 0.8s linear infinite;
}

@keyframes watchlistSpin {
  to { transform: rotate(360deg); }
}

/* Empty state when watchlist has no players */
.watchlist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  gap: 0.75rem;
}

.watchlist-empty i {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.12);
}

.watchlist-empty p {
  font-family: var(--font-display, 'Quicksand', sans-serif);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.3);
  line-height: 1.5;
}

.watchlist-empty .watchlist-empty-hint {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.2);
}

/* ============================================================================
   WATCHLIST FILTER/LOCATE HIGHLIGHT
   Pulsing glow applied to a player-row when located from the watchlist.
   ============================================================================ */
/* Highlight pulse: faster flicker (0.6s/cycle × 7 = ~4.2s total) for snappier visual feedback */
@keyframes watchlistHighlightPulse {
  0% { box-shadow: 0 0 0 0 rgba(118, 109, 255, 0.45); }
  50% { box-shadow: 0 0 6px -1px #00edcb; }
  100% { box-shadow: 0 0 0 0 rgba(118, 109, 255, 0); }
}

.watchlist-highlight {
  animation: watchlistHighlightPulse 0.6s ease-out 7;
  border-radius: var(--card-border-radius, 8px);
}

/* ============================================================================
   OWNERSHIP MODAL ON ROSTERS PAGE (watchlist flow)
   Mirrors the ownership page (.ownership.css) modal styling so both modals
   look identical regardless of which page the user is on.
   ============================================================================ */
body[data-page="rosters"] #ownershipPlayerModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-page="rosters"] #ownershipPlayerModal.hidden {
  display: none;
}

body[data-page="rosters"] #ownershipPlayerModal > .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Modal content: match ownership page gradient + border + box-shadow */
body[data-page="rosters"] #ownershipPlayerModal .ownership-modal-content {
  position: relative;
  z-index: 1101;
  opacity: 1;
  transform: none;
  width: min(94vw, 500px);
  max-height: 90vh;
  display: block;
  border-radius: 16px;
  border: 1px solid var(--ownership-glass-border, rgba(183, 194, 246, 0.18));
  background: linear-gradient(165deg, rgb(77 86 120 / 82%), rgb(63 67 88 / 29%));
  box-shadow: 0 28px 65px rgba(4, 8, 24, 0.62), inset 0 0 24px rgba(120, 100, 255, 0.07);
  overflow: hidden;
  padding: 0.75rem 0.85rem 0.78rem;
}

body[data-page="rosters"] #ownershipPlayerModal .ownership-modal-header {
  text-align: center;
  padding-top: 0.12rem;
  position: relative;
}

body[data-page="rosters"] #ownershipPlayerModal .modal-header-left-container {
  position: absolute;
  top: 0.70rem;
  left: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

body[data-page="rosters"] #ownershipPlayerModal #ownershipModalPlayerName {
  margin: 0 0 0.14rem;
  font-size: 1.07rem;
  font-weight: 200;
  letter-spacing: 0.02em;
  color: #eef3ff;
}

body[data-page="rosters"] #ownershipPlayerModal #ownershipModalPlayerVitals {
  display: flex;
  justify-content: center;
}

body[data-page="rosters"] #ownershipPlayerModal #ownershipModalSummaryRow {
  display: flex;
  justify-content: center;
  margin-bottom: 0.45rem;
}

body[data-page="rosters"] #ownershipPlayerModal #ownershipModalSummaryChips {
  display: flex;
  gap: 0.78rem;
  width: 100%;
}

body[data-page="rosters"] #ownershipPlayerModal .gamelogs-summary-chip {
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0.7rem;
  text-align: center;
  white-space: nowrap;
  position: relative;
  background: rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(1px) saturate(170%);
  border: 1px solid rgba(250, 250, 250, 0.1);
  border-radius: 11px;
  box-shadow: 0 8px 32px rgba(31, 38, 105, 0.1), inset 0 6px 20px rgba(255, 255, 255, 0.013), inset 9px 13px 12px -7px #abc2;
}

body[data-page="rosters"] #ownershipPlayerModal .gamelogs-summary-chip h4 {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 0.1rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-panel-border);
  padding-bottom: 0.1rem;
}

body[data-page="rosters"] #ownershipPlayerModal .gamelogs-summary-chip .chip-header-value {
  font-size: 0.8rem;
}

body[data-page="rosters"] #ownershipPlayerModal .gamelogs-summary-chip .chip-values {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  font-weight: 400;
}

body[data-page="rosters"] #ownershipPlayerModal .gamelogs-summary-chip .chip-separator {
  margin: 0 0.25rem;
}

body[data-page="rosters"] #ownershipPlayerModal .ownership-modal-body {
  border-top: 1px solid rgba(183, 194, 246, 0.22);
  padding-top: 0.55rem;
  max-height: calc(90vh - 220px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="rosters"] #ownershipPlayerModal .ownership-modal-close {
  position: absolute;
  top: 0.02rem;
  right: 0.5rem;
  font-size: 2rem;
  color: rgba(232, 238, 255, 0.84);
  z-index: 3;
  pointer-events: auto;
}

body[data-page="rosters"] #ownershipPlayerModal .ownership-modal-league-list {
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
}

body[data-page="rosters"] #ownershipPlayerModal .ownership-league-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.52rem 0.62rem;
  border-radius: 12px;
  border: 1px solid rgba(186, 197, 248, 0.2);
  background: linear-gradient(145deg, rgb(61 76 139 / 58%), #687b972e);
  box-shadow: inset 0px 11px 13px -8px #cdf3;
}

body[data-page="rosters"] #ownershipPlayerModal .ownership-league-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

body[data-page="rosters"] #ownershipPlayerModal .ownership-league-abbr {
  font-size: 0.73rem;
  font-weight: 720;
  letter-spacing: 0.05em;
}

body[data-page="rosters"] #ownershipPlayerModal .ownership-league-name {
  color: #d2dbfb;
  font-size: 0.74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 48vw;
}

body[data-page="rosters"] #ownershipPlayerModal .ownership-league-owner {
  font-size: 0.76rem;
  font-weight: 670;
  color: #eef2ff;
  text-align: right;
}

body[data-page="rosters"] #ownershipPlayerModal .ownership-league-row.owner-you {
  border-color: rgba(101, 236, 191, 0.36);
  background: linear-gradient(145deg, rgb(61 76 139 / 58%), #6100ffbf);
}

body[data-page="rosters"] #ownershipPlayerModal .ownership-league-row.owner-other {
  border-color: rgba(147, 161, 239, 0.32);
}

body[data-page="rosters"] #ownershipPlayerModal .ownership-league-row.owner-none {
  border-color: rgba(189, 197, 238, 0.2);
  background: rgba(20, 24, 42, 0.52);
  opacity: 0.92;
}

body[data-page="rosters"] #ownershipPlayerModal .ownership-modal-empty {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  padding: 0.7rem 0;
}

body[data-page="rosters"] #ownershipPlayerModal .ownership-modal-warning {
  margin-top: 0.75rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
}

/* Responsive: narrow screens reduce spacing/padding in ownership modal on rosters */
@media (max-width: 680px) {
  body[data-page="rosters"] #ownershipPlayerModal .ownership-modal-content {
    width: min(96vw, 640px);
    padding: 0.68rem 0.62rem 0.68rem;
  }

  body[data-page="rosters"] #ownershipPlayerModal #ownershipModalSummaryChips {
    gap: 0.4rem;
  }

  body[data-page="rosters"] #ownershipPlayerModal .gamelogs-summary-chip {
    padding: 0.23rem 0.5rem;
  }

  body[data-page="rosters"] #ownershipPlayerModal .ownership-league-name {
    max-width: 39vw;
  }

  body[data-page="rosters"] #ownershipPlayerModal .ownership-league-owner {
    font-size: 0.71rem;
  }
}