:root {
  --bg: #0e1116;
  --panel: #171c26;
  --panel-2: #1f2633;
  --line: #2a3242;
  --text: #e6e9ef;
  --muted: #93a0b5;
  --accent: #9b59b6;
  --accent-2: #5865f2;
  --green: #57f287;
  --amber: #faa61a;
  --red: #ed4245;
}

* {
  box-sizing: border-box;
}

/* Smooth scrolling throughout the app, with momentum scrolling on touch
   devices for the overflow containers (tables, bracket, etc.). */
html {
  scroll-behavior: smooth;
}

body,
.table-wrap,
.bracket-scroll {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Horizontal-only scrollers: contain sideways over-scroll (so reaching the
   end doesn't trigger browser back-navigation) while letting vertical wheel
   scrolling chain through to the page. */
.table-wrap,
.bracket-scroll {
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .table-wrap,
  .bracket-scroll {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(
    1200px 600px at 80% -10%,
    #1b2230 0%,
    var(--bg) 60%
  );
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(14, 17, 22, 0.85);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo {
  font-size: 34px;
}

h1 {
  font-size: 20px;
  margin: 0;
}

.sub {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.updated {
  color: var(--muted);
  font-size: 12px;
}

.btn {
  background: var(--accent-2);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn:hover {
  opacity: 0.88;
}

main {
  padding: 24px 28px 48px;
  max-width: 1280px;
  margin: 0 auto;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.kpi {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}

.kpi .value {
  font-size: 26px;
  font-weight: 700;
}

.kpi .label {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.banner {
  background: rgba(250, 166, 26, 0.1);
  border: 1px solid rgba(250, 166, 26, 0.35);
  color: #ffd28a;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 20px;
  display: none;
}

.banner.show {
  display: block;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.card-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Team Standings: keep every chart / table card the same height. */
#tn-sub-teams .card-grid .card canvas {
  height: 300px !important;
  max-height: 300px;
}

#tn-third-table {
  height: 300px;
  overflow-y: auto;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  min-width: 0;
}

.card.wide {
  grid-column: 1 / -1;
}

.card h2 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.hint {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

canvas {
  width: 100% !important;
  max-height: 320px;
}

.spotlight .name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.spotlight .stat {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}

.spotlight table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.spotlight th,
.spotlight td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}

.spotlight th {
  color: var(--muted);
  font-weight: 500;
}

.table-wrap {
  overflow-x: auto;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th,
.data-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.data-table th {
  color: var(--muted);
  font-weight: 500;
  position: sticky;
  top: 0;
  background: var(--panel);
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.data-table th.sortable:hover {
  color: var(--text);
}

.data-table th.sortable::after {
  content: "⇅";
  display: inline-block;
  width: 1em;
  margin-left: 6px;
  font-size: 10px;
  text-align: center;
  opacity: 0.35;
}

.data-table th.sort-asc::after {
  content: "↑";
  opacity: 1;
  color: var(--accent);
}

.data-table th.sort-desc::after {
  content: "↓";
  opacity: 1;
  color: var(--accent);
}

.data-table tbody tr:hover {
  background: var(--panel-2);
}

.data-table tr.top-rank td {
  background: rgba(155, 89, 182, 0.06);
}

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--panel-2);
}

.diff-good {
  color: var(--green);
}

.diff-bad {
  color: var(--amber);
}

.foot {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 24px;
  border-top: 1px solid var(--line);
}

.empty {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 30px;
}

/* ---- Tabs ---- */
.tabs {
  display: flex;
  gap: 6px;
  padding: 0 28px;
  max-width: 1280px;
  margin: 18px auto 0;
  border-bottom: 1px solid var(--line);
}

.tab {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 14px;
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab:hover {
  color: var(--text);
}

.tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.subtabs {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 22px;
  padding: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.subtab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 16px;
  cursor: pointer;
  border-radius: 9px;
  text-align: center;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}

.subtab .subtab-icon {
  font-size: 17px;
  line-height: 1;
}

.subtab:hover {
  border-color: var(--accent);
  background: rgba(155, 89, 182, 0.12);
}

.subtab:active {
  transform: translateY(1px);
}

.subtab.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(155, 89, 182, 0.4);
}

.subtab-panel {
  display: none;
}

.subtab-panel.active {
  display: block;
}

@media (max-width: 560px) {
  .subtab .subtab-text {
    font-size: 13px;
  }
}

/* ---- Tournaments ---- */
#tournament-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
}

.tournament-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
}

.tournament-picker label {
  color: var(--muted);
  font-size: 13px;
}

#tn-select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  min-width: 220px;
  cursor: pointer;
}

.tournament-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tournament-head h2 {
  margin: 0 0 4px;
}

.pill-active {
  background: rgba(87, 242, 135, 0.15);
  color: var(--green);
}

.pill-done {
  background: rgba(147, 160, 181, 0.15);
  color: var(--muted);
}

/* ---- Tournament leaders podium ---- */
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  padding: 16px 8px 8px;
  min-height: 230px;
}

.podium-spot {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 33%;
  max-width: 180px;
}

.podium-medal {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

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

.podium-points {
  color: var(--muted);
  font-size: 12px;
  margin: 2px 0 8px;
}

.podium-bar {
  width: 100%;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  color: #0e1116;
  font-weight: 700;
  border: 1px solid var(--line);
  border-bottom: none;
}

.podium-rank {
  font-size: 13px;
}

.podium-spot.place-1 .podium-bar {
  height: 140px;
  background: linear-gradient(180deg, #ffd24a, #e0a915);
}

.podium-spot.place-2 .podium-bar {
  height: 105px;
  background: linear-gradient(180deg, #d6dde8, #aab4c4);
}

.podium-spot.place-3 .podium-bar {
  height: 78px;
  background: linear-gradient(180deg, #e0a063, #b9763a);
}

.leader-banner {
  background: rgba(155, 89, 182, 0.14);
  border: 1px solid rgba(155, 89, 182, 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}

table.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.standings-table th,
.standings-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.standings-table th {
  color: var(--muted);
  font-weight: 500;
}

.standings-table tr.top-rank td {
  background: rgba(155, 89, 182, 0.06);
}

/* ---- Player Standings: search + pagination controls ---- */
.ps-table-wrap {
  width: 100%;
}

.ps-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ps-search {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
}

.ps-search:focus {
  outline: none;
  border-color: var(--accent);
}

.ps-pagesize {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.ps-pagesize select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
}

.ps-count {
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
}

.ps-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

.ps-page-btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ps-page-btn:hover:not(:disabled) {
  border-color: var(--accent);
}

.ps-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ps-page-info {
  font-size: 13px;
  color: var(--muted);
  min-width: 90px;
  text-align: center;
}

/* ---- Match explorer ---- */
.match-explorer-controls {
  margin-bottom: 14px;
}

.match-search {
  width: 100%;
  max-width: 360px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
}

.match-search::placeholder {
  color: var(--muted);
}

.match-search:focus {
  outline: none;
  border-color: var(--accent);
}

.match-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.match-col {
  min-width: 0;
}

.match-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
}

.match-col-head.open {
  border-bottom-color: rgba(87, 242, 135, 0.5);
}

.match-col-head.upcoming {
  border-bottom-color: rgba(250, 166, 26, 0.5);
}

.match-col-head.resolved {
  border-bottom-color: rgba(155, 89, 182, 0.5);
}

/* Grouped League Table (World Cup): one mini-table per group. */
.group-table {
  margin-bottom: 22px;
}

.group-table-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(88, 101, 242, 0.6);
}

.col-count {
  margin-left: auto;
  background: var(--panel-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 11px;
  font-weight: 600;
}

/* World Cup standings: Groups / Knockout toggle. */
.kt-toggle {
  display: flex;
  gap: 6px;
  margin: 0 0 16px;
  padding: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.kt-tab {
  flex: 1 1 0;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.kt-tab:hover {
  border-color: var(--accent);
  background: rgba(155, 89, 182, 0.12);
}

.kt-tab.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(155, 89, 182, 0.4);
}

.kt-view {
  display: none;
}

.kt-view.active {
  display: block;
}

/* ---- Knockout bracket (World Cup fixtures diagram) ---- */
/* When the standings card holds the World Cup bracket, drop the wrapper's
   horizontal overflow clipping so the full-bleed bracket can escape to the
   viewport edges. (Normal league tables keep .table-wrap's scroll.) */
.table-wrap.kt-standings {
  overflow: visible;
}

.bracket-scroll {
  /* Full-bleed: break out of the centered 1280px main column so the bracket
     uses the entire viewport width. This margin technique stays correctly
     centered no matter how deeply the element is nested (unlike left: 50%). */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 16px 28px;
  overflow-x: auto;
  /* Themed band behind the bracket so the page background no longer shows
     through the full-bleed area. */
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.bracket {
  display: flex;
  width: 100%;
  /* Keep columns wide enough for team names to be readable. On viewports
     narrower than this the .bracket-scroll wrapper scrolls horizontally; on
     wider viewports the bracket grows to fill the full (full-bleed) width. */
  min-width: 1000px;
  align-items: stretch;
  /* Establish a query container so bracket type can scale with available
     width via cqw units. */
  container-type: inline-size;
  container-name: bracket;
}

.bracket-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}

.bracket-col-title {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 0 12px;
}

.bracket-round {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0 6px;
}

/* Each match fills one slot; halving each round keeps centres aligned. */
.bracket-round .bx-match {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
}

.bx-box {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 5px 6px;
  margin: 5px 0;
  color: var(--text);
  text-align: left;
  font: inherit;
}

.bx-box.clickable {
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.bx-box.clickable:hover {
  border-color: var(--accent);
  background: rgba(155, 89, 182, 0.12);
}

/* Confirmed matchup (a created match, or both sides drawn from final
   standings): highlighted in the theme's positive green. */
.bx-box--confirmed {
  border-color: rgba(87, 242, 135, 0.55);
  background: rgba(87, 242, 135, 0.07);
}
.bx-box--confirmed:hover {
  border-color: var(--green);
  background: rgba(87, 242, 135, 0.14);
}

/* Pending matchup (placeholder or projected from current standings): muted,
   dashed outline so it reads as not-yet-final. */
.bx-box--pending {
  border-style: dashed;
  border-color: var(--line);
  background: var(--panel-2);
}

/* Projection modal (pending bracket card) layout. */
.proj-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.proj-side {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
.proj-team {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.proj-from {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.proj-vs {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}
.proj-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.proj-confirmed {
  color: var(--green);
  background: rgba(87, 242, 135, 0.12);
}
.proj-projected {
  color: var(--amber);
  background: rgba(250, 166, 26, 0.12);
}
.proj-tbd {
  color: var(--muted);
  background: rgba(147, 160, 181, 0.12);
}
.proj-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.bx-num {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Round-of-32 "how were these teams chosen?" affordance. */
.bx-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  cursor: help;
  vertical-align: text-bottom;
  user-select: none;
  font-family: Georgia, "Times New Roman", serif;
  transition: background 0.15s ease;
}
.bx-info:hover,
.bx-info:focus-visible {
  background: var(--accent);
}
.bx-info:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.5);
}

.bx-tip {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--panel, #1a1d24);
  color: var(--text, #fff);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  white-space: pre-line;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}
.bx-tip.visible {
  opacity: 1;
  transform: translateY(0);
}

.bx-date {
  font-size: 9px;
  font-weight: 600;
  color: var(--accent-2, var(--muted));
  margin-bottom: 5px;
  white-space: normal;
  line-height: 1.15;
}

.bx-team {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.bx-team + .bx-team {
  border-top: 1px solid var(--line);
}

.bx-name {
  flex: 1 1 auto;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-round scaling: outermost rounds (most columns) get the smallest type so
   the whole two-sided tree fits the panel; type grows toward the centre. */
.depth-4 .bx-name {
  font-size: clamp(9px, 1.5cqw, 14px);
  white-space: normal;
  line-height: 1.1;
}
.depth-4 .bx-num {
  font-size: clamp(7px, 1.1cqw, 11px);
  margin-bottom: 2px;
}
.depth-4 .bx-date {
  font-size: clamp(7px, 1.1cqw, 11px);
  margin-bottom: 2px;
}
.depth-4 .bx-team {
  gap: 4px;
  padding: 2px 0;
}
.depth-4 .bx-score {
  font-size: clamp(9px, 1.5cqw, 14px);
  min-width: 10px;
}

.depth-3 .bx-name {
  font-size: clamp(10.5px, 1.7cqw, 16px);
  white-space: normal;
  line-height: 1.12;
}
.depth-3 .bx-num {
  font-size: clamp(8px, 1.25cqw, 12px);
}
.depth-3 .bx-date {
  font-size: clamp(8px, 1.25cqw, 12px);
  margin-bottom: 3px;
}
.depth-3 .bx-score {
  font-size: clamp(10.5px, 1.7cqw, 16px);
  min-width: 12px;
}

.depth-2 .bx-name {
  font-size: clamp(12px, 1.9cqw, 18px);
}
.depth-2 .bx-num {
  font-size: clamp(9px, 1.4cqw, 13px);
}

.depth-1 .bx-name {
  font-size: clamp(13px, 2cqw, 20px);
}

.depth-0 .bx-name {
  font-size: clamp(14px, 2.2cqw, 22px);
}

.bx-team.placeholder .bx-name {
  color: var(--muted);
  font-style: italic;
}

.bx-team.winner .bx-name {
  font-weight: 700;
  color: var(--accent);
}

.bx-team.projected .bx-name {
  color: var(--text);
  font-style: italic;
  text-decoration: underline dotted var(--muted);
  text-underline-offset: 3px;
}

.bx-score {
  flex: 0 0 auto;
  min-width: 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.bx-pens {
  margin-left: 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--amber);
}

/* Two-sided bracket: the left half points its elbows right and the right half
   mirrors them pointing left, both converging on the centre Final. */
.bx-box {
  position: relative;
}

/* Vertical joiner linking each pair of matches to the next round. Skipped on
   the inner column, whose single match feeds the Final with a straight line. */
.side-left:not(.side-inner) .bx-match::after,
.side-right:not(.side-inner) .bx-match::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 50%;
  background: var(--line);
}

.side-left:not(.side-inner) .bx-match::after {
  left: calc(100% + 6px);
}

.side-right:not(.side-inner) .bx-match::after {
  right: calc(100% + 6px);
}

.side-left:not(.side-inner) .bx-match:nth-child(odd)::after,
.side-right:not(.side-inner) .bx-match:nth-child(odd)::after {
  top: 50%;
}

.side-left:not(.side-inner) .bx-match:nth-child(even)::after,
.side-right:not(.side-inner) .bx-match:nth-child(even)::after {
  bottom: 50%;
}

/* Outgoing horizontal stub toward the centre. */
.side-left .bx-box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 6px;
  height: 2px;
  background: var(--line);
}

.side-right .bx-box::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 6px;
  height: 2px;
  background: var(--line);
}

/* Incoming horizontal stub from the previous round (not on the outer R32). */
.side-left:not(.side-outer) .bx-box::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 6px;
  height: 2px;
  background: var(--line);
}

.side-right:not(.side-outer) .bx-box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 6px;
  height: 2px;
  background: var(--line);
}

/* The Final receives a straight line in from each side. */
.bracket-final {
  justify-content: center;
}

.bracket-final .bracket-round {
  justify-content: center;
}

.bracket-final .bx-box::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 6px;
  height: 2px;
  background: var(--line);
}

.bracket-final .bx-box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 6px;
  height: 2px;
  background: var(--line);
}

.bracket-third {
  margin-top: 22px;
  max-width: 320px;
}

.bracket-note {
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.match-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 460px;
  overflow-y: auto;
  padding-right: 4px;
}

.match-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.match-item:hover {
  border-color: var(--accent);
  background: rgba(155, 89, 182, 0.1);
}

.match-item .mi-id {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.match-item .mi-dbid {
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  opacity: 0.6;
}

.match-item .mi-teams {
  font-size: 14px;
  font-weight: 600;
}

.match-item .mi-teams em {
  color: var(--muted);
  font-style: normal;
  font-weight: 400;
  margin: 0 4px;
}

.mi-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}

.mi-result {
  font-weight: 600;
  color: var(--text);
}

.mi-picks {
  margin-left: auto;
}

.mi-state {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: var(--panel);
  border: 1px solid var(--line);
}

.mi-state.state-open {
  color: var(--green);
  border-color: rgba(87, 242, 135, 0.4);
}

.mi-state.state-pending {
  color: var(--amber);
  border-color: rgba(250, 166, 26, 0.4);
}

.mi-state.state-resolved {
  color: var(--accent);
  border-color: rgba(155, 89, 182, 0.4);
}

.empty.small {
  padding: 14px;
  font-size: 12px;
}

/* ---- Match detail (used inside the modal) ---- */
.md-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.md-title {
  font-size: 20px;
  font-weight: 700;
}

.md-title .md-v {
  color: var(--muted);
  font-weight: 400;
  margin: 0 6px;
}

.md-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.md-result strong {
  color: var(--text);
}

.md-result.muted {
  font-style: italic;
}

.md-times {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}

.md-chart {
  margin-bottom: 14px;
}

.md-chart h3,
.md-section {
  font-size: 13px;
  font-weight: 600;
  margin: 4px 0 10px;
}

.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.tag-good {
  background: rgba(87, 242, 135, 0.15);
  color: var(--green);
}

.tag-mid {
  background: rgba(88, 101, 242, 0.15);
  color: var(--accent-2);
}

.tag-bad {
  background: rgba(237, 66, 69, 0.15);
  color: var(--red);
}

/* ---- Match detail modal ---- */
body.modal-open {
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 8, 12, 0.72);
  backdrop-filter: blur(3px);
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  width: min(720px, 100%);
  max-height: 86vh;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.modal-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.modal-body {
  padding: 22px;
  overflow-y: auto;
  max-height: 86vh;
  scrollbar-gutter: stable;
}

.modal-body canvas {
  max-height: 240px;
}

/* ---- Custom thin themed scrollbar (whole UI) ---- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent), #b06fce);
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

@media (max-width: 820px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .match-columns {
    grid-template-columns: 1fr;
  }

  .match-list {
    max-height: 300px;
  }
}

/* ---- Header trivia ticker ---- */
.trivia {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 22px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgba(88, 101, 242, 0.12),
    rgba(155, 89, 182, 0.08)
  );
  max-width: 640px;
}

.trivia-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
  white-space: nowrap;
}

.trivia-text {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.trivia-text.show {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .trivia-text {
    transition: none;
    transform: none;
  }
}

/* ---- Ghost button (header) ---- */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
}

/* ---- Knockout / tie-breaker markers ---- */
.mi-ko {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--amber);
  background: rgba(250, 166, 26, 0.14);
  border: 1px solid rgba(250, 166, 26, 0.4);
}

.mi-tb {
  color: var(--amber);
  font-weight: 600;
}

.md-ko {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--amber);
  background: rgba(250, 166, 26, 0.14);
  border: 1px solid rgba(250, 166, 26, 0.4);
}

.md-tb {
  color: var(--amber);
}

.md-tb.muted {
  color: var(--muted);
  font-style: italic;
}

.tb-half {
  color: var(--amber);
  font-weight: 600;
}

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

/* ---- Scoring explainer modal ---- */
.scoring-table {
  width: 100%;
  margin: 0 0 6px;
}

.scoring-table td.pts {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  color: var(--green);
}

.scoring-table td.pts.muted {
  color: var(--muted);
  font-weight: 600;
}

.scoring-note {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 6px 0 16px;
}

.scoring-note strong {
  color: var(--text);
}

.scoring-examples {
  margin: 6px 0 4px;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

.scoring-examples strong {
  color: var(--text);
}

@media (max-width: 980px) {
  .trivia {
    display: none;
  }
}

/* ============================ Player Analysis ============================ */
.lineup-host {
  margin: 16px 0 4px;
}
.lineup-title {
  margin-bottom: 8px;
}

/* Team header strips above/below the pitch. */
.team-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 13px;
}
.team-strip--top {
  border-radius: 10px 10px 0 0;
  border-bottom: none;
}
.team-strip--bottom {
  border-radius: 0 0 10px 10px;
  border-top: none;
}
.ts-flag {
  font-size: 16px;
}
.ts-name {
  flex: 1;
}
.ts-form {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  background: rgba(87, 242, 135, 0.12);
  border-radius: 999px;
  padding: 2px 9px;
}

/* The pitch. Aspect ratio matches the 100×150 viewBox. */
.pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 150;
  background: repeating-linear-gradient(
    0deg,
    #467051 0,
    #467051 9.5%,
    #3f6549 9.5%,
    #3f6549 19%
  );
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.pitch-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pitch-lines rect,
.pitch-lines circle,
.pitch-lines line,
.pitch-lines path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 0.5;
}
.pitch-lines .spot {
  fill: rgba(255, 255, 255, 0.6);
  stroke: none;
}
.pitch-players {
  position: absolute;
  inset: 0;
}

/* Player marker. */
.pl-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.pl-marker:hover .pl-avatar,
.pl-marker:focus-visible .pl-avatar {
  transform: scale(1.12);
}
.pl-marker:hover .pl-name,
.pl-marker:focus-visible .pl-name {
  color: var(--accent);
}
.pl-marker:focus-visible {
  outline: none;
}
.pl-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  transition: transform 0.12s ease;
}
.pl-disc,
.pl-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent-2);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.pl-rating {
  position: absolute;
  bottom: -7px;
  right: -9px;
  min-width: 24px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  border-radius: 4px;
  color: #0e1116;
  padding: 0 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.rt-great {
  background: #2ecc71;
  color: #fff;
}
.rt-good {
  background: var(--green);
}
.rt-mid {
  background: #c9e265;
}
.rt-low {
  background: var(--amber);
}
.rt-vlow {
  background: var(--red);
  color: #fff;
}
.rt-none {
  background: var(--muted);
  color: #0e1116;
}
.pl-cap {
  position: absolute;
  top: -7px;
  left: -9px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.pl-events {
  position: absolute;
  top: -10px;
  right: -12px;
  font-size: 14px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.pl-events .ev {
  display: inline-flex;
  align-items: center;
}
.pl-events .ev-min {
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  margin: 0 1px 0 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.pl-suboff {
  position: absolute;
  bottom: -8px;
  left: -12px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--red);
  border-radius: 4px;
  padding: 0 3px;
  line-height: 1.45;
}
.pl-name {
  margin-top: 9px;
  max-width: 84px;
  text-align: center;
  font-size: 10px;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
  background: rgba(8, 11, 16, 0.55);
  border-radius: 4px;
  padding: 1px 4px;
}
.pl-num {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
}

/* Man of the Match. */
.motm-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 2px 12px;
  padding: 9px 14px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgba(250, 166, 26, 0.22),
    rgba(250, 166, 26, 0.06)
  );
  border: 1px solid rgba(250, 166, 26, 0.5);
  box-shadow: 0 1px 8px rgba(250, 166, 26, 0.12);
  flex-wrap: wrap;
}
.motm-star {
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.motm-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber);
}
.motm-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-2);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  flex: none;
}
.motm-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.motm-num {
  color: var(--muted);
  font-weight: 700;
}
.motm-team {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.motm-contrib {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.motm-rating {
  margin-left: auto;
  min-width: 30px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  border-radius: 5px;
  color: #0e1116;
  padding: 1px 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.pl-motm {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  pointer-events: none;
}
.pl-marker--motm .pl-disc,
.pl-marker--motm .pl-photo {
  border-color: var(--amber);
  box-shadow:
    0 0 0 2px rgba(250, 166, 26, 0.55),
    0 1px 6px rgba(0, 0, 0, 0.45);
}

/* Player Standings spotlights & table. */
.ps-spot {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-2);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  flex: none;
}
.ps-spot-main {
  min-width: 0;
}
.ps-team {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.ps-num {
  color: var(--muted);
  font-weight: 700;
}
.ps-pos {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}
.ps-rating {
  display: inline-block;
  min-width: 34px;
  text-align: center;
  font-weight: 800;
  border-radius: 4px;
  color: #0e1116;
  padding: 0 5px;
}

/* Legend. */
.lineup-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 2px 0;
  font-size: 11px;
  color: var(--muted);
  align-items: center;
}
.lineup-legend i.lg {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: -1px;
}
.lineup-legend .lg-cap b {
  color: var(--accent);
}

/* Bench. */
.bench-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bench-col {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.bench-team {
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.bench-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.bench-row:hover {
  color: var(--accent);
}
.bench-row:first-of-type {
  border-top: none;
}
.bench-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bench-meta .pl-rating {
  position: static;
  box-shadow: none;
}
.bench-on {
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
}

@media (max-width: 560px) {
  .pl-marker {
    width: 52px;
  }
  .pl-avatar,
  .pl-disc,
  .pl-photo {
    width: 28px;
    height: 28px;
  }
  .pl-name {
    max-width: 56px;
    font-size: 9px;
  }
  .bench-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Match modal tabs ---- */
.md-tabs {
  display: flex;
  gap: 6px;
  margin: 14px 0 16px;
  border-bottom: 1px solid var(--line);
}
.md-tabs[hidden] {
  display: none;
}
.md-tab {
  appearance: none;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.md-tab:hover {
  color: var(--text);
}
.md-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.md-pane[hidden] {
  display: none;
}
.lineup-hint {
  margin: 8px 2px 0;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* ---- Team stats comparison ---- */
.tstat-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.tstat-head span:first-child {
  text-align: left;
}
.tstat-head span:last-child {
  text-align: right;
}
.tstat-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tstat-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.tstat-row:first-child {
  border-top: none;
}
.tstat-label {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.tstat-val {
  font-size: 13px;
  font-weight: 700;
}
.tstat-home {
  text-align: left;
}
.tstat-away {
  text-align: right;
}
.tstat-pill {
  display: inline-block;
  min-width: 34px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

/* ---- Player detail modal ---- */
.modal-overlay--top {
  z-index: 60;
}
.modal--narrow {
  width: min(440px, 100%);
}
.ps-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.ps-disc,
.ps-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent-2);
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  flex: none;
}
.ps-name {
  font-size: 18px;
  font-weight: 800;
}
.ps-team {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.ps-score {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 13px;
}
.ps-score strong {
  font-size: 16px;
}
.ps-score .ps-ft {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}
.ps-stats {
  display: flex;
  flex-direction: column;
}
.ps-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 2px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.ps-row:first-child {
  border-top: none;
}
.ps-label {
  color: var(--text);
  display: flex;
  flex-direction: column;
}
.ps-label small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}
.ps-value {
  font-weight: 700;
}
.ps-mins {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
}
.ps-rating-row .pl-rating {
  position: static;
  box-shadow: none;
  font-size: 13px;
  min-width: 32px;
  padding: 2px 6px;
}
.ps-sub.off {
  color: var(--red);
  font-weight: 700;
}
.ps-sub.on {
  color: var(--green);
  font-weight: 700;
}