/* ── PPS → Sanctum token bridge ── */
:root {
  --bg-color: #0d0c09;
  --surface-color: var(--bg-card, #111009);
  --surface-hover: rgba(255, 184, 28, 0.04);
  --accent-color: var(--gold, #ffb81c);
  --accent-hover: var(--gold, #ffb81c);
  --accent-glow: var(--gold-dim, rgba(255,184,28,0.12));
  --border-color: var(--bg-border, #1c1a12);
  --cutoff-color: #c0392b;
  --up-color: #3dba6c;
  --text-pri: var(--text-primary, #ccc3aa);
  --text-sec: var(--text-secondary, #a09080);
  --text-mut: var(--text-muted, #706050);
}

/* ── Layout ── */
#wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 60px;
  position: relative;
  box-sizing: border-box;
}
@media (max-width: 480px) { #wrapper { padding: 0 10px 40px; } }

/* ── Ticker ── */
#ticker-wrap {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 24px;
}
.ticker-label {
  background: var(--accent-color);
  color: #000;
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 0 18px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
}
.ticker-track {
  flex: 1;
  overflow: hidden;
  background: var(--surface-color);
  padding: 9px 0;
  white-space: nowrap;
}
.ticker { display: inline-block; animation: marquee 75s linear infinite; }
.ticker span {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--text-sec);
  font-size: 0.72rem;
  letter-spacing: 2px;
  padding: 0 48px;
}
.ticker b {
  color: var(--accent-color);
  font-weight: 600;
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: 0.82rem;
  letter-spacing: 3px;
}
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── Countdown widget ── */
#next-event-widget {
  display: none;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-left: 2px solid var(--accent-color);
  padding: 24px 28px;
  margin-bottom: 24px;
  align-items: center;
  justify-content: space-between;
}
.countdown-label {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-mut);
  font-weight: 400;
  margin-bottom: 6px;
}
.countdown-timer {
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: 2.8rem;
  color: var(--accent-color);
  font-weight: 700;
  line-height: 1;
}

/* ── Year selector ── */
.year-selector-wrap {
  text-align: center;
  margin-bottom: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.year-selector-label {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mut);
  font-weight: 400;
}

/* ─────────────────────────────────────────
   TAB STRIP — view switcher, NOT navigation
   Think: spreadsheet tabs, data view filters
   ───────────────────────────────────────── */
.tab {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  gap: 0;
  margin-top: 0;
  padding-top: 8px;
}
.tab::-webkit-scrollbar { display: none; }
.tab button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  color: var(--text-mut);
  cursor: pointer;
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  transition: color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  margin-bottom: -1px;
  line-height: 1;
}
.tab button:hover { color: var(--text-sec); }
.tab button.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}
/* Admin tab gets danger color when shown */
#adminTabBtn { color: var(--cutoff-color) !important; }

.tabcontent,
.roster-tab-content {
  display: none;
  padding: 24px 0;
  animation: fadeEffect 0.25s;
}

/* ── Table container ── */
.table-container {
  overflow: auto;
  max-height: 75vh;
  width: 100%;
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
}
.table-container::-webkit-scrollbar,
.modal-scroll::-webkit-scrollbar { height: 6px; width: 4px; }
.table-container::-webkit-scrollbar-track,
.modal-scroll::-webkit-scrollbar-track { background: #000; }
.table-container::-webkit-scrollbar-thumb,
.modal-scroll::-webkit-scrollbar-thumb { background: var(--border-color); }
.table-container::-webkit-scrollbar-thumb:hover,
.modal-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; border-spacing: 0; min-width: 650px; }
#SetDetails table { min-width: 1000px; }
th, td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
th {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--surface-color);
  color: var(--text-mut);
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s;
  border-bottom: 1px solid var(--border-color);
  user-select: none;
}
th::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-bottom: 1px solid var(--border-color);
}
th:hover { color: var(--accent-color); }
tbody tr:hover { background-color: var(--surface-hover); transition: background 0.15s; cursor: pointer; }

/* Table cell accents */
.rank, .event-num {
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1;
}
.score {
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-color);
  text-align: center;
  line-height: 1;
}
.points-badge {
  background: transparent;
  color: var(--accent-color);
  padding: 3px 9px;
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  border: 1px solid var(--border-color);
  display: inline-block;
  line-height: 1;
}
.winner-bold { font-weight: 600; color: var(--text-pri); }
.tbd { color: var(--text-mut); font-style: italic; font-weight: normal; }

/* Cutoff row marker */
.cutoff-marker td {
  border-bottom: 2px dashed var(--cutoff-color) !important;
  padding-bottom: 38px;
  position: relative;
}
.cutoff-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -9px;
  background: var(--cutoff-color);
  color: #fff;
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 2px;
  padding: 2px 12px;
  text-transform: uppercase;
  z-index: 10;
}

/* ── Match log legend ── */
.match-log-legend {
  background: transparent;
  border: 1px solid var(--border-color);
  border-left: 2px solid var(--border-color);
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-sec);
}
.legend-item { display: flex; align-items: center; gap: 8px; }
.dot { height: 7px; width: 7px; border-radius: 50%; flex-shrink: 0; }

/* ── Match cards ── */
.match-card {
  background: var(--surface-color);
  margin-bottom: 6px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 140px 1fr 80px 80px;
  align-items: center;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  gap: 10px;
}
.match-card:hover {
  border-color: var(--accent-color);
  background: var(--surface-hover);
}
.p-pill {
  background: transparent;
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-sec);
  width: 140px;
  text-align: center;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vs {
  color: var(--text-mut);
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  letter-spacing: 2px;
  font-weight: 400;
  margin: 0 6px;
}
@media (max-width: 768px) {
  .match-card { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .match-card > div:nth-child(1) { text-align: center !important; }
  .match-card > div:nth-child(2) { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; }
  .match-card .p-pill { width: 38vw; max-width: 130px; font-size: 0.75rem; padding: 5px 4px; }
  .match-card .vs { margin: 0; }
  .match-card > div:nth-child(3) { text-align: center !important; font-size: 1.5rem !important; letter-spacing: 2px; }
  .match-card > div:nth-child(4) { text-align: center !important; }
}

/* ── Bracket ── */
.bracket-scroll-container { overflow-x: auto; padding-bottom: 16px; width: 100%; }
.bracket-scroll-container::-webkit-scrollbar { height: 4px; }
.bracket-scroll-container::-webkit-scrollbar-track { background: #000; }
.bracket-scroll-container::-webkit-scrollbar-thumb { background: var(--border-color); }
.bracket-scroll-container::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }

.bracket-flex { display: flex; gap: 16px; min-width: 1000px; justify-content: space-between; }
.bracket-column { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.bracket-column-header {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-weight: 400;
  font-size: 0.65rem;
  letter-spacing: 3px;
  color: var(--text-mut);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
  margin-bottom: 4px;
  text-align: center;
}
.match-slot {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  padding: 12px;
  position: relative;
}
.match-slot.winner-slot { border-left: 2px solid var(--accent-color); }
.bracket-side-tag {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
  color: var(--text-mut);
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 3px;
  display: block;
}
.bracket-p-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.bracket-p-name {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-sec);
}
.bracket-p-score {
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent-color);
  line-height: 1;
}
.bracket-loser { opacity: 0.3; text-decoration: line-through; }

/* ── H2H selector box ── */
.pps-selector-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  margin-bottom: 0;
}
.pps-vs-label {
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-mut);
  letter-spacing: 4px;
  line-height: 1;
}

/* ── H2H result box ── */
#h2h-result-box {
  margin-top: 0;
  background: var(--surface-color);
  padding: 24px;
  border: 1px solid var(--border-color);
  border-top: none;
  display: none;
}
.h2h-score-bar { display: flex; height: 6px; overflow: hidden; margin: 16px 0; background: var(--border-color); }
.h2h-history-item {
  display: grid;
  grid-template-columns: 1fr 100px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  align-items: center;
}
.h2h-history-item div:first-child { color: var(--text-sec); font-size: 0.9rem; }
.h2h-history-item div:nth-child(2) {
  color: var(--accent-color);
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-weight: 400;
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}
.h2h-history-item div:last-child { font-weight: 600; text-align: right; font-size: 0.95rem; }
/* H2H names display */
.h2h-names-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 0;
}

/* ── FAQ ── */
.faq-item {
  margin-bottom: 24px;
  border-left: 2px solid var(--accent-color);
  padding-left: 18px;
}
.faq-item h4 {
  color: var(--text-pri);
  margin-bottom: 6px;
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 2px;
}
.faq-item p, .faq-item ul { color: var(--text-sec); font-size: 0.95rem; line-height: 1.7; }

/* ── Select inputs ── */
select {
  padding: 9px 36px 9px 14px;
  background: var(--surface-color);
  color: var(--text-pri);
  border: 1px solid var(--border-color);
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23706050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  width: 100%;
  max-width: 400px;
  transition: border-color 0.15s;
}
select:focus { border-color: var(--accent-color); outline: none; }
select option { background: #111009; color: var(--text-pri); }

/* ── Text inputs ── */
.pps-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  background: #000;
  color: var(--text-pri);
  border: 1px solid var(--border-color);
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.7rem;
  letter-spacing: 1px;
  outline: none;
  transition: border-color 0.15s;
  appearance: none;
}
.pps-input:focus { border-color: var(--accent-color); }
.pps-input::placeholder { color: var(--text-mut); }

/* ── PPS Card (generic content surface) ── */
.pps-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  padding: 28px;
}
.pps-card + .pps-card { border-top: none; }
.pps-card-title {
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-pri);
  margin: 0 0 4px;
}
.pps-card-sub {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-mut);
  margin-bottom: 20px;
  font-weight: 400;
}
.pps-card-title.gold { color: var(--accent-color); }
.pps-card-title.danger { color: var(--cutoff-color); }
.pps-card-label {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-mut);
  font-weight: 400;
  margin-bottom: 12px;
}
.pps-big-val {
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1;
}

/* ── Dashboard grid ── */
.pps-dash-grid {
  display: flex;
  gap: 1px;
  background: var(--border-color);
  margin-bottom: 1px;
}
.pps-dash-grid > .pps-card {
  flex: 1;
  min-width: 260px;
}
@media (max-width: 680px) {
  .pps-dash-grid { flex-direction: column; }
}
.pps-dash-results {
  display: none;
  gap: 1px;
  background: var(--border-color);
  margin-bottom: 24px;
}
.pps-dash-results > .pps-card { flex: 1; min-width: 260px; }
@media (max-width: 680px) {
  .pps-dash-results { flex-direction: column; }
}
.pps-player-select-row {
  padding: 20px 28px;
  border: 1px solid var(--border-color);
  border-top: none;
  text-align: center;
}
.pps-player-select-row p {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-sec);
  max-width: 540px;
  margin: 0 auto 16px;
  line-height: 1.8;
  font-weight: 400;
}

/* ── Highlight cards ── */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-top: 24px;
  border: 1px solid var(--border-color);
  border-right: none;
  border-bottom: none;
}
.highlight-card {
  background: var(--surface-color);
  padding: 24px 18px;
  text-align: center;
  transition: background 0.15s;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.highlight-card:hover { background: var(--surface-hover); }
.highlight-title {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.6rem;
  color: var(--text-mut);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 400;
  margin-bottom: 10px;
}
.highlight-val {
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 6px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.highlight-player {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--text-sec);
  text-transform: uppercase;
}
.highlight-card.wide {
  background: rgba(255, 184, 28, 0.03);
  grid-column: 1 / -1;
  min-height: 80px;
  border-left: 2px solid var(--accent-color);
}
.highlight-card.wide .highlight-val {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
}

/* ── Sponsor banner / "Your Brand Here" ── */
.pps-sponsor-banner {
  margin-top: 48px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-left: 2px solid var(--accent-color);
  padding: 20px 24px;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  display: block;
}
.pps-sponsor-banner:hover { background: var(--surface-hover); }
.pps-sponsor-banner-title {
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--accent-color);
  margin-bottom: 4px;
}
.pps-sponsor-banner-sub {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-mut);
  font-weight: 400;
}

/* ── Partner / sponsor cards ── */
.pps-partners-header {
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-pri);
  margin: 0;
}
.pps-partners-cta {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-left: 2px solid var(--accent-color);
  padding: 32px 28px;
  text-align: center;
  margin-bottom: 1px;
}
.pps-partners-cta p {
  color: var(--text-sec);
  max-width: 680px;
  margin: 0 auto 24px;
  font-size: 0.95rem;
  line-height: 1.7;
}
.pps-partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--border-color);
}
.pps-partner-card {
  background: var(--surface-color);
  padding: 24px;
  text-align: center;
}
.pps-partner-card-mockup {
  background: #000;
  border: 1px dashed var(--border-color);
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.pps-partner-card-mockup span {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mut);
  font-weight: 400;
}
.pps-partner-card h4 {
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-pri);
  margin: 0 0 6px;
}
.pps-partner-card p {
  font-size: 0.85rem;
  color: var(--text-sec);
  margin: 0;
  line-height: 1.6;
}

/* ── Admin panel ── */
.pps-admin-panel {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-top: 2px solid var(--cutoff-color);
  padding: 32px;
  max-width: 600px;
  margin: 0 auto;
}
.pps-admin-section {
  border-top: 1px solid var(--border-color);
  padding-top: 28px;
  margin-top: 28px;
}
.pps-admin-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.pps-admin-title {
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cutoff-color);
  margin: 0 0 6px;
}
.pps-admin-sub {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-mut);
  font-weight: 400;
  margin-bottom: 20px;
}
.pps-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 20px;
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 10px;
  text-align: center;
}
.pps-btn:hover { opacity: 0.85; }
.pps-btn-primary { background: var(--accent-color); color: #000; }
.pps-btn-danger  { background: var(--cutoff-color); color: #fff; }
.pps-btn-success { background: var(--up-color); color: #fff; }
.pps-btn-ghost   { background: transparent; border: 1px solid var(--cutoff-color); color: var(--cutoff-color); }
.pps-status-msg {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-sec);
  margin-top: 10px;
  min-height: 20px;
}

/* ── Modals ── */
#profile-modal,
#password-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.92);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
#password-modal { z-index: 1001; }
.modal-content {
  background: var(--surface-color);
  padding: 36px;
  width: 90%;
  max-width: 520px;
  border: 1px solid var(--border-color);
  border-top: 2px solid var(--accent-color);
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
}
.close-modal {
  position: absolute;
  top: 14px; right: 18px;
  cursor: pointer;
  color: var(--text-mut);
  font-size: 1.2rem;
  line-height: 1;
  transition: color 0.15s;
}
.close-modal:hover { color: var(--text-pri); }

/* Password modal interior */
.pps-modal-title {
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.pps-modal-sub {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-sec);
  margin-bottom: 20px;
  font-weight: 400;
}

@media (max-width: 768px) {
  .modal-content { padding: 28px 16px 20px; width: 95%; }
  #modal-body { max-height: 75vh; overflow-y: auto; overflow-x: hidden; padding-right: 5px; }
  .close-modal { top: 10px; right: 14px; }
  .profile-placement-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .profile-placement-left { flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; }
  .profile-placement-right { align-self: flex-end; margin-top: -24px; }
  .character-placement-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .character-placement-left { flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; width: 100%; }
  .character-placement-right { align-self: flex-end !important; margin-top: 5px !important; }
  .profile-event-name { font-size: 0.95rem !important; white-space: normal !important; line-height: 1.2; max-width: 85%; }
  .profile-view-log { font-size: 0.7rem !important; }
  .profile-char-usage { flex-direction: column !important; text-align: center; gap: 15px !important; }
  .profile-char-usage > div:nth-child(2) { width: 100%; }
  .profile-nemesis { flex-direction: column !important; text-align: center; }
  .profile-nemesis > div { text-align: center !important; }
  .match-detail-players { flex-direction: column !important; gap: 5px !important; }
}

/* ── VOD section ── */
.pps-vod-section {
  display: none;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-left: 2px solid #cc0000;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.pps-vod-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.pps-vod-title {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-sec);
  font-weight: 400;
}
.pps-vod-badge {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  background: #cc0000;
  color: #fff;
  padding: 3px 8px;
  font-weight: 400;
  text-transform: uppercase;
}
.pps-vod-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: #000;
}
.pps-vod-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* ── League: set details ── */
.set-details {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--surface-color);
  padding: 11px 13px;
  min-width: 160px;
  border: 1px solid var(--border-color);
  transition: border-color 0.15s;
}
.set-details:hover { border-color: var(--accent-color); }
.player-row { display: flex; flex-direction: column; font-size: 0.9rem; line-height: 1.2; color: var(--text-sec); }
.char-text {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  color: var(--text-mut);
  font-size: 0.6rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 2px;
}
.set-score-divider {
  text-align: center;
  color: var(--accent-color);
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 3px 0;
  margin: 3px 0;
  line-height: 1;
}
.team-name-cell span {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-sec);
}

/* League: roster section */
.section-divider { width: 100%; border-bottom: 1px solid var(--border-color); margin: 48px 0 28px; }
.roster-header {
  font-family: var(--font-display, 'Big Shoulders Display'), sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-pri);
  text-transform: uppercase;
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 10px;
}
.social-link {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  background: var(--accent-color);
  text-decoration: none;
  padding: 5px 12px;
  transition: opacity 0.15s;
  display: inline-block;
}
.social-link:hover { opacity: 0.85; }

/* ── Admin trigger (hidden footer) ── */
#admin-trigger { text-align: center; margin-top: 60px; padding-bottom: 20px; cursor: pointer; user-select: none; }
#admin-trigger span { color: transparent; font-size: 10px; transition: color 0.3s; }
#admin-trigger:hover span { color: var(--border-color); }

/* ── Legacy: prize payout / section dividers ── */
.pps-section-label {
  font-family: var(--font-ui, 'Oswald'), sans-serif;
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-mut);
  font-weight: 400;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  margin: 40px 0 20px;
}

/* ── Utilities ── */
@keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } }
@keyframes avatarPop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}