/* TOKENS DASHBOARD */
:root,
[data-theme="light"] {
  --matchday-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(240, 253, 250, 0.9));
  --matchday-card-bg: rgba(255, 255, 255, 0.88);
  --matchday-card-bg-strong: rgba(255, 255, 255, 0.96);
  --matchday-card-bg-hover: rgba(240, 253, 250, 0.96);
  --matchday-text: #0f172a;
  --matchday-muted: #475569;
  --matchday-border: rgba(15, 23, 42, 0.14);
  --matchday-border-strong: rgba(13, 148, 136, 0.34);
  --matchday-accent: #0f766e;
  --matchday-accent-contrast: #042f2e;
  --matchday-accent-soft: rgba(13, 148, 136, 0.12);
  --matchday-green-soft: rgba(34, 197, 94, 0.12);
  --matchday-blue-soft: rgba(37, 99, 235, 0.1);
  --matchday-warning-bg: rgba(251, 146, 60, 0.12);
  --matchday-warning-border: rgba(234, 88, 12, 0.34);
  --matchday-warning-text: #9a3412;
  --matchday-highlight-text: #0f766e;
  --matchday-button-bg: linear-gradient(135deg, rgba(20, 184, 166, 0.98), rgba(34, 197, 94, 0.9));
  --matchday-button-text: #022c22;
  --matchday-button-shadow: 0 14px 28px rgba(20, 184, 166, 0.18);
  --matchday-backdrop: rgba(15, 23, 42, 0.52);
  --prediction-home-bg: linear-gradient(90deg, #16a34a, #4ade80);
  --prediction-draw-bg: linear-gradient(90deg, #0284c7, #38bdf8);
  --prediction-away-bg: linear-gradient(90deg, #d97706, #facc15);
  --matchday-share-image-bg-start: #f8fafc;
  --matchday-share-image-bg-mid: #ecfeff;
  --matchday-share-image-bg-end: #dcfce7;
  --matchday-share-image-orb-green: rgba(34, 197, 94, 0.16);
  --matchday-share-image-orb-blue: rgba(56, 189, 248, 0.14);
  --matchday-share-image-section-bg: rgba(255, 255, 255, 0.82);
  --matchday-share-image-section-border: rgba(15, 23, 42, 0.14);
  --matchday-share-image-top-text: #0f172a;
  --matchday-share-image-title-text: #0f766e;
  --matchday-share-image-accent-text: #047857;
  --matchday-share-image-muted-text: #475569;
  --matchday-share-image-podium-text: #92400e;
  --matchday-shadow: 0 18px 46px rgba(15, 23, 42, 0.12);
  --matchday-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.66);
  --race-modal-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 250, 0.96));
  --race-modal-card-bg: rgba(255, 255, 255, 0.86);
  --race-modal-card-bg-strong: rgba(248, 250, 252, 0.94);
  --race-modal-text: #0f172a;
  --race-modal-muted: #475569;
  --race-modal-border: rgba(15, 23, 42, 0.14);
  --race-modal-overlay: rgba(15, 23, 42, 0.52);
  --race-modal-table-border: rgba(15, 23, 42, 0.1);
  --race-modal-accent: #0f766e;
  --race-modal-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
  --race-modal-close-bg: rgba(255, 255, 255, 0.82);
  --race-modal-gain-bg: rgba(22, 163, 74, 0.12);
  --race-modal-gain-text: #166534;
  --race-modal-shared-bg: rgba(100, 116, 139, 0.12);
  --race-modal-shared-text: #475569;
  --race-modal-none-bg: rgba(220, 38, 38, 0.1);
  --race-modal-none-text: #991b1b;
}

/* BASE DASHBOARD */

.dashboard-panel {
  display: block;
  width: min(100%, 1100px);
  max-width: 100%;
  margin: 1rem auto;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.86);
  border-radius: 10px;
  text-align: center;
}

.dashboard-panel p,
.dashboard-panel h3 {
  display: block;
  line-height: 1.25;
}

.timeline-match-panel {
  display: none;
  width: 100%;
}

.timeline-match-panel.is-active {
  display: block;
}

.responsive-table-wrap,
.table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.responsive-table-wrap table,
.table-scroll table {
  width: 100%;
  max-width: none;
}

/* RANKING */
.dashboard-ranking-table {
  min-width: 860px;
}

.movement-up {
  color: #047857;
  font-weight: bold;
}

.movement-down {
  color: #b91c1c;
  font-weight: bold;
}

.movement-same {
  color: #374151;
  font-weight: bold;
}


.match-selector-label {
  display: inline-block;
  font-weight: bold;
}

.match-selector {
  max-width: min(100%, 760px);
  margin: 0.5rem auto 1rem;
  padding: 0.45rem;
}

.matchday-lookup-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.matchday-lookup-section .match-selector {
  margin: 0.5rem 0 1rem;
}

.match-meta {
  margin: 0.25rem auto 1rem;
  font-weight: bold;
}



/* DARK MODE */
.dark-mode,
[data-theme="dark"] {
  --matchday-bg: linear-gradient(145deg, rgba(4, 12, 24, 0.96), rgba(15, 23, 42, 0.95));
  --matchday-card-bg: rgba(15, 23, 42, 0.76);
  --matchday-card-bg-strong: rgba(15, 23, 42, 0.82);
  --matchday-card-bg-hover: rgba(15, 23, 42, 0.92);
  --matchday-text: #f8fafc;
  --matchday-muted: #cbd5e1;
  --matchday-border: rgba(148, 163, 184, 0.2);
  --matchday-border-strong: rgba(45, 212, 191, 0.42);
  --matchday-accent: #99f6e4;
  --matchday-accent-contrast: #022c22;
  --matchday-accent-soft: rgba(20, 184, 166, 0.14);
  --matchday-green-soft: rgba(34, 197, 94, 0.18);
  --matchday-blue-soft: rgba(96, 165, 250, 0.14);
  --matchday-warning-bg: rgba(251, 146, 60, 0.16);
  --matchday-warning-border: rgba(251, 146, 60, 0.62);
  --matchday-warning-text: #fed7aa;
  --matchday-highlight-text: #86efac;
  --matchday-button-bg: linear-gradient(135deg, rgba(20, 184, 166, 0.98), rgba(34, 197, 94, 0.9));
  --matchday-button-text: #022c22;
  --matchday-button-shadow: 0 14px 28px rgba(20, 184, 166, 0.2);
  --matchday-backdrop: rgba(2, 6, 23, 0.72);
  --prediction-home-bg: linear-gradient(90deg, #22c55e, #86efac);
  --prediction-draw-bg: linear-gradient(90deg, #38bdf8, #7dd3fc);
  --prediction-away-bg: linear-gradient(90deg, #f59e0b, #facc15);
  --matchday-share-image-bg-start: #020617;
  --matchday-share-image-bg-mid: #0f172a;
  --matchday-share-image-bg-end: #064e3b;
  --matchday-share-image-orb-green: rgba(34, 197, 94, 0.15);
  --matchday-share-image-orb-blue: rgba(56, 189, 248, 0.1);
  --matchday-share-image-section-bg: rgba(15, 23, 42, 0.78);
  --matchday-share-image-section-border: rgba(148, 163, 184, 0.22);
  --matchday-share-image-top-text: #f8fafc;
  --matchday-share-image-title-text: #99f6e4;
  --matchday-share-image-accent-text: #86efac;
  --matchday-share-image-muted-text: #cbd5e1;
  --matchday-share-image-podium-text: #fde68a;
  --matchday-shadow: 0 18px 46px rgba(2, 6, 23, 0.3);
  --matchday-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --race-modal-bg: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(12, 74, 110, 0.86));
  --race-modal-card-bg: rgba(15, 23, 42, 0.42);
  --race-modal-card-bg-strong: rgba(8, 47, 73, 0.42);
  --race-modal-text: #f8fafc;
  --race-modal-muted: #cbd5e1;
  --race-modal-border: rgba(226, 232, 240, 0.16);
  --race-modal-overlay: rgba(2, 6, 23, 0.78);
  --race-modal-table-border: rgba(226, 232, 240, 0.12);
  --race-modal-accent: #67e8f9;
  --race-modal-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
  --race-modal-close-bg: rgba(15, 23, 42, 0.55);
  --race-modal-gain-bg: rgba(34, 197, 94, 0.18);
  --race-modal-gain-text: #86efac;
  --race-modal-shared-bg: rgba(148, 163, 184, 0.18);
  --race-modal-shared-text: #cbd5e1;
  --race-modal-none-bg: rgba(248, 113, 113, 0.16);
  --race-modal-none-text: #fca5a5;
}

/* SHARED DASHBOARD COMPONENTS */
.matchday-shell,
.matchday-header,
.matchday-content,
.matchday-list,
.matchday-insights,
.matchday-insights-grid,
.matchday-card,
.matchday-insight-card,
.prediction-block {
  display: block;
  width: 100%;
  margin: 0;
}

.match-pick-groups {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 8px;
}

.match-pick-group {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--matchday-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.match-pick-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--matchday-text);
  font-weight: 900;
  list-style: none;
}

.match-pick-group summary::-webkit-details-marker {
  display: none;
}

.match-pick-group summary span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--matchday-green-soft);
  color: var(--matchday-highlight-text);
  font-size: 0.78rem;
}

.match-pick-group-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
  min-width: 0;
  padding: 0 12px 12px;
}

.match-pick-group-list span,
.match-pick-group-list a {
  display: inline-flex;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--matchday-border);
  border-radius: 999px;
  background: var(--matchday-card-bg-strong);
  color: var(--matchday-text);
  font-size: 0.82rem;
  font-weight: 850;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.match-scoreline-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 8px;
}

.match-scoreline-chip,
.match-unique-list article {
  padding: 11px;
  border: 1px solid var(--matchday-border);
  border-radius: 10px;
  background: var(--matchday-card-bg-strong);
}

.match-scoreline-chip strong,
.match-scoreline-chip span,
.match-unique-list strong,
.match-unique-list span,
.match-my-pick strong,
.match-my-pick p {
  display: block;
}

.match-scoreline-chip strong,
.match-unique-list strong,
.match-my-pick strong {
  color: var(--matchday-text);
  font-weight: 950;
}

.match-scoreline-chip span,
.match-unique-list span,
.match-my-pick p,
.match-modal-empty {
  margin: 4px 0 0;
  color: var(--matchday-muted);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.32;
}

.match-scoreline-participants {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.match-scoreline-chip .match-scoreline-participants span,
.match-scoreline-chip .match-scoreline-participants a {
  display: inline-flex;
  max-width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 5px 9px;
  border: 1px solid var(--matchday-border);
  border-radius: 999px;
  text-decoration: none;
  background: var(--matchday-card-bg-strong);
  color: var(--matchday-text);
  font-size: 0.82rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.match-my-pick {
  border-color: var(--matchday-border-strong);
  background: var(--matchday-green-soft);
}

.team-flag-svg {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  display: inline-block;
  vertical-align: -2px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
}

.team-flag-svg.is-missing {
  display: none;
}

.prediction-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--matchday-border);
}

.prediction-block>strong {
  display: block;
  margin-bottom: 9px;
  color: var(--matchday-text);
  font-size: 0.92rem;
}

.prediction-row {
  display: block;
  width: 100%;
  margin-top: 9px;
}

.prediction-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: var(--matchday-muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.prediction-label span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.prediction-label strong {
  color: var(--matchday-text);
}

.prediction-track {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--matchday-border);
}

.prediction-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 500ms ease;
}

.prediction-home {
  background: var(--prediction-home-bg);
}

.prediction-draw {
  background: var(--prediction-draw-bg);
}

.prediction-away {
  background: var(--prediction-away-bg);
}

.match-center .match-selector {
  width: min(100%, 520px);
  min-height: 42px;
  margin: 0;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font: inherit;
}

.match-analysis-section,
.match-featured-fact {
  margin: 10px 0 0 !important;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.mvp-card,
.streak-card,
.achievement-card,
.player-card,
.mini-ranking,
.share-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.mvp-card h3,
.streak-card h3,
.achievement-feed h3,
.mini-ranking h3,
.profile-section h3 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 1rem;
}

.player-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #0f766e;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  text-transform: uppercase;
}

.badge-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px !important;
}

.recent-hit-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.recent-hit-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  padding: 9px 0;
  border-top: 1px solid #e2e8f0;
}

.recent-hit-list strong,
.recent-hit-list span,
.recent-hit-list small {
  display: block;
}

.recent-hit-list small {
  grid-column: 1 / -1;
  color: #64748b;
  font-weight: 800;
}

.recent-hit-list small.recent-hit-detail-line {
  padding-top: 6px;
  border-top: 1px solid #e2e8f0;
}

@media (max-width: 900px) {
  .match-center .match-selector {
    width: 100%;
    margin-top: 10px;
  }

  .streak-grid,
  .match-highlight-grid,
  .share-card-grid,
  .player-card-grid,
  .mini-ranking-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {

  .streak-grid,
  .match-highlight-grid,
  .match-special-grid,
  .share-card-grid,
  .player-card-grid,
  .mini-ranking-grid,
  .profile-stat-grid {
    grid-template-columns: 1fr;
  }

  .recent-hit-list li {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .match-selector-label {
    display: block;
  }

  .match-selector {
    width: 100%;
  }
}

.podium-avatar,
.podium-rank-badge,
.ranking-position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 900;
}

.podium-card strong,
.ranking-list-row>strong {
  white-space: nowrap;
}

.match-day-mode,
.compact-ranking,
.share-zone {
  text-align: left;
}

.pick-distribution-card,
.top-score-card {
  min-height: 150px;
}




.dashboard-panel table.results th {
  color: white;
  background-color: #003469;
}

.dashboard-panel table.results:not(.race-current-table) th {
  border-bottom: 2px solid grey;
}

/* MATCH MODAL */
.match-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
}

.match-modal.is-open {
  display: grid;
  place-items: center;
  padding: 18px;
}

.match-unique-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 8px;
}

@media (max-width: 640px) {
  .match-modal.is-open {
    align-items: end;
    padding: 0;
  }
}

.team-flag-placeholder {
  display: inline-block;
  width: 22px;
  height: 16px;
}

.refresh-state {
  margin-top: 8px !important;
  color: #64748b;
  font-size: 0.92rem;
  font-weight: 800;
}

.refresh-state.is-current {
  color: #166534;
}

.refresh-state.is-stale {
  color: #1d4ed8;
}

.refresh-state.is-error {
  color: #991b1b;
}

.last-update-card {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.last-update-card span,
.last-update-card small {
  display: block;
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 800;
}

.last-update-card strong {
  display: block;
  margin-top: 6px;
  color: #0f172a;
  line-height: 1.2;
}

.last-update-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.last-update-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  color: #0f172a;
  font-weight: 700;
}

.last-update-list strong {
  display: inline;
  margin: 0;
  color: #166534;
}

/* MATCH CENTER */
.match-center,
.match-center * {
  text-align: left;
}

.match-center p,
.match-center h2,
.match-center h3,
.match-center div,
.match-center label,
.match-center article,
.match-center section {
  display: block;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

.match-center h2 {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: #111827;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.match-center h3 {
  margin: 0 0 10px;
  color: #111827;
  font-size: 1rem;
  line-height: 1.2;
}

.match-pill-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px !important;
}

.match-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
  padding: 3px 8px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.1;
}

.match-score {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #0f172a;
  text-align: center;
}

.match-score span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow-wrap: anywhere;
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
}

.match-score strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  min-height: 44px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #111827;
  color: white;
  font-size: 1.65rem;
  line-height: 1;
  text-align: center;
}

.match-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 !important;
}

.match-summary-card {
  min-height: 132px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.match-summary-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.match-summary-card li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid #f1f5f9;
}

.match-summary-card li:first-child {
  border-top: 0;
}

.match-summary-card p {
  color: #475569;
  line-height: 1.35;
}

.match-summary-card.exact-hit {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.match-insights-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 10px;
  margin: 10px 0 0 !important;
}

.match-special-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.match-special-grid .match-featured-fact {
  margin: 0 !important;
}

.pick-heatmap {
  background: #f8fafc;
}

.match-ranking-block {
  margin: 10px 0 !important;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.72), rgba(255, 255, 255, 0.96));
}

.match-ranking-block h3 {
  margin-bottom: 10px;
}

.match-featured-fact h3 {
  margin-bottom: 8px;
}

.match-featured-fact {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffbeb, #ffffff);
}

.match-featured-fact p {
  margin: 0;
  color: #78350f;
  font-weight: 900;
  line-height: 1.35;
}

.mvp-person {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 0;
  border-top: 1px solid #fde68a;
}

.mvp-person strong,
.mvp-person small {
  display: block;
}

.mvp-person strong span {
  color: #047857;
}

.mvp-person small {
  margin-top: 4px;
  color: #92400e;
  font-weight: 800;
}

.streak-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.streak-card {
  min-height: 160px;
  padding: 14px;
}

.streak-card span {
  display: inline-flex;
  margin-bottom: 8px;
  font-size: 1.5rem;
}

.streak-card strong {
  display: block;
  margin-top: 8px;
  color: #334155;
  line-height: 1.25;
}

/* PLAYER MODAL */
.player-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.player-modal.is-open {
  display: block;
}

@media (max-width: 900px) {
  .match-score {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
  }

  .match-score span {
    gap: 6px;
    font-size: 1rem;
    line-height: 1.15;
  }

  .match-score strong {
    justify-self: center;
    min-width: 72px;
    min-height: 48px;
    padding: 8px 10px;
    font-size: 1.45rem;
  }

  .match-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 560px) {
  .match-summary-grid {
    grid-template-columns: 1fr;
  }

}

.podium-card {
  position: relative;
  display: grid !important;
  justify-items: center;
  gap: 7px;
  min-height: 154px;
  padding: 16px 10px 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
  text-align: center;
}


.podium-first {
  min-height: 188px;
  padding-top: 22px;
  background: linear-gradient(160deg, #fff7cc 0%, #fbbf24 54%, #b45309 100%);
  color: #431407;
}

.podium-second {
  background: linear-gradient(160deg, #f8fafc 0%, #cbd5e1 45%, #64748b 100%);
}

.podium-third {
  background: linear-gradient(160deg, #fff7ed 0%, #fb923c 62%, #9a3412 100%);
  color: #431407;
}

.podium-avatar {
  width: 58px;
  height: 58px;
  background: rgba(255, 255, 255, 0.82);
  color: #0f172a;
  font-size: 1.18rem;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.86), 0 10px 22px rgba(15, 23, 42, 0.16);
}

@media (max-width: 560px) {
  .podium-first {
    min-height: 168px;
    padding-top: 16px;
  }
}

.podium-first .podium-avatar {
  width: 72px;
  height: 72px;
  font-size: 1.35rem;
}

.podium-rank-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  font-size: 0.84rem;
}

@media (max-width: 560px) {
  .podium-card {
    min-height: 136px;
    padding: 13px 7px 11px;
    border-radius: 14px;
  }

  .podium-avatar {
    width: 48px;
    height: 48px;
  }

  .podium-first .podium-avatar {
    width: 58px;
    height: 58px;
  }

  .podium-rank-badge {
    top: 7px;
    right: 7px;
    min-width: 28px;
    height: 28px;
    font-size: 0.76rem;
  }

  .general-ranking-table,
  .general-ranking-table tbody,
  .general-ranking-table tr,
  .general-ranking-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .general-ranking-table tr:first-child {
    display: none;
  }

  .general-ranking-table tr {
    margin: 0 0 0.75rem;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    text-align: left;
  }

  .general-ranking-table td {
    display: grid;
    grid-template-columns: 42% 58%;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #e5e7eb;
    text-align: right;
  }

  .general-ranking-table td::before {
    content: attr(data-label);
    font-weight: bold;
    text-align: left;
  }

  .general-ranking-table td:last-child {
    border-bottom: 0;
  }
}

/* MATCHDAY CENTER */
.matchday-center,
.matchday-center * {
  box-sizing: border-box;
}

.matchday-center {
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--matchday-border-strong);
  background: var(--matchday-bg);
  color: var(--matchday-text);
  text-align: center;
  box-shadow: var(--matchday-shadow);
}

.matchday-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.matchday-header-copy {
  min-width: 0;
}

.matchday-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.matchday-date-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--matchday-muted);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.matchday-date-control>span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.matchday-date-control .match-selector {
  width: 190px;
  height: 42px;
  margin: 0;
  padding: 0 18px 0 42px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background:
    url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") 16px center / 18px 18px no-repeat,
    rgba(255, 255, 255, 0.78);
  color: var(--matchday-text);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08), var(--matchday-inset-highlight);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, background-color 200ms ease;
}

.matchday-date-control .match-selector::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

.matchday-date-control .match-selector:hover,
.matchday-date-control .match-selector:focus {
  border-color: rgba(13, 148, 136, 0.42);
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.11), 0 0 0 3px rgba(219, 234, 254, 0.7);
}

.matchday-date-control>.matchday-badge {
  justify-content: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-color: #dbeafe;
  background: rgba(255, 255, 255, 0.82);
  color: var(--matchday-accent);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08), var(--matchday-inset-highlight);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, background-color 200ms ease;
}

.matchday-date-control>.matchday-badge:hover,
.matchday-date-control>.matchday-badge:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(13, 148, 136, 0.42);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 13px 26px rgba(15, 23, 42, 0.11);
}

.matchday-header h2 {
  width: auto;
  margin: 5px 0 4px;
  padding: 0;
  background: transparent;
  border-radius: 15px;
  color: var(--matchday-text);
  font-size: clamp(1.45rem, 5vw, 2.15rem);
  line-height: 1.08;
  text-align: left;
}

.matchday-header p {
  margin: 0;
  color: var(--matchday-muted);
  font-weight: 800;
}

.matchday-badge,
.matchday-card-top span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--matchday-border-strong);
  border-radius: 999px;
  background: var(--matchday-accent-soft);
  color: var(--matchday-accent);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.matchday-debug-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 7px 10px;
  border: 1px solid var(--matchday-warning-border);
  border-radius: 8px;
  background: var(--matchday-warning-bg);
  color: var(--matchday-warning-text);
  font-size: 0.82rem;
  font-weight: 900;
}

.matchday-debug-badge strong,
.matchday-debug-badge span {
  display: inline-block;
}

.matchday-debug-badge span {
  color: var(--matchday-warning-text);
}

.matchday-card h3 {
  margin: 10px 0 8px;
  color: var(--matchday-text);
  font-size: clamp(1.15rem, 4.6vw, 1.55rem);
  line-height: 1.18;
  text-align: left;
}

.matchday-card p,
.matchday-empty {
  margin: 0;
  color: var(--matchday-muted);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.matchday-card-clickable {
  cursor: pointer;
}

.matchday-card-clickable:focus-visible {
  outline: 3px solid rgba(45, 212, 191, 0.48);
  outline-offset: 3px;
}

.matchday-card-action {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 5px 9px;
  margin: 10px auto 0;
  border: 1px solid var(--matchday-border-strong);
  border-radius: 999px;
  background: var(--matchday-blue-soft);
  color: var(--matchday-accent);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.knockout-impact-card {
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.knockout-impact-card:hover {
  transform: translateY(-2px);
}

.knockout-impact-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.knockout-impact-card header div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.knockout-impact-card header span {
  color: var(--matchday-text);
  font-size: 1.05rem;
  font-weight: 950;
}

.knockout-impact-card header small {
  color: var(--matchday-highlight-text);
  font-size: .9rem;
  font-weight: 950;
}

.knockout-impact-pill {
  display: inline-flex;
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid var(--matchday-border-strong);
  border-radius: 999px;
  background: var(--matchday-green-soft);
  color: var(--matchday-highlight-text);
  font-size: .78rem;
  white-space: nowrap;
}

.knockout-impact-hero {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--matchday-border-strong);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--matchday-green-soft), var(--matchday-blue-soft));
}

.knockout-impact-hero strong {
  color: var(--matchday-text);
  font-size: clamp(2.4rem, 8vw, 4.2rem);
  line-height: .9;
  letter-spacing: 0;
}

.knockout-impact-hero span {
  color: var(--matchday-muted);
  font-size: .92rem;
  font-weight: 950;
  text-transform: uppercase;
}

.knockout-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.knockout-impact-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.knockout-impact-stat,
.knockout-impact-list {
  padding: 10px;
  border: 1px solid var(--matchday-border);
  border-radius: 8px;
  background: var(--matchday-card-bg-strong);
}

.knockout-impact-stat strong {
  display: block;
  color: var(--matchday-text);
  font-size: 1.45rem;
  line-height: 1;
}

.knockout-impact-stat span,
.knockout-impact-list p {
  margin: 4px 0 0;
  color: var(--matchday-muted);
  font-size: .84rem;
  font-weight: 850;
}

.knockout-impact-stat small {
  display: block;
  margin-top: 6px;
  color: var(--matchday-highlight-text);
  font-size: .78rem;
  font-weight: 950;
}

.knockout-impact-stat.is-missed small {
  color: var(--matchday-muted);
}

.knockout-impact-insight {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--matchday-border);
  border-radius: 8px;
  background: var(--matchday-accent-soft);
  color: var(--matchday-text);
  font-weight: 900;
}

.knockout-impact-card details {
  margin-top: 10px;
  border-radius: 8px;
  transition: background .18s ease;
}

.knockout-impact-card details[open] {
  background: rgba(255, 255, 255, 0.04);
}

.knockout-impact-card summary {
  cursor: pointer;
  color: var(--matchday-accent);
  font-weight: 900;
  transition: color .18s ease;
}

.knockout-scenario-stack {
  display: grid;
  gap: 12px;
}

.knockout-scenario {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--matchday-border);
}

.knockout-scenario:first-child {
  padding-top: 0;
  border-top: 0;
}

.knockout-scenario header {
  margin-bottom: 0;
}

.knockout-advancing-summary {
  display: grid;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--matchday-border-strong);
  border-radius: 8px;
  background: var(--matchday-green-soft);
}

.knockout-advancing-summary strong {
  color: var(--matchday-text);
  font-size: clamp(2rem, 7vw, 3.2rem);
  line-height: .95;
  letter-spacing: 0;
}

.knockout-advancing-summary span {
  color: var(--matchday-muted);
  font-size: .92rem;
  font-weight: 950;
}

.knockout-impact-list {
  margin-top: 8px;
}

.knockout-impact-list strong {
  color: var(--matchday-text);
}

.knockout-impact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.knockout-impact-chip {
  display: inline-flex;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--matchday-border);
  border-radius: 999px;
  background: var(--matchday-accent-soft);
  color: var(--matchday-text);
  font-size: .82rem;
  font-weight: 850;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.knockout-impact-chip:hover {
  transform: translateY(-1px);
  border-color: var(--matchday-border-strong);
  background: var(--matchday-green-soft);
}

.prediction-advance-home {
  background: linear-gradient(90deg, #22c55e, #14b8a6);
}

.prediction-advance-away {
  background: linear-gradient(90deg, #38bdf8, #6366f1);
}

.prediction-bar.is-qualified {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45) inset;
}

.knockout-community-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.knockout-result-badge {
  display: inline-flex;
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid var(--matchday-border-strong);
  border-radius: 999px;
  background: var(--matchday-green-soft);
  color: var(--matchday-highlight-text);
  font-size: .78rem;
  font-weight: 950;
}

@media (min-width: 900px) {
  .knockout-impact-section .matchday-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .knockout-impact-card header {
    flex-direction: column;
  }

  .knockout-impact-grid,
  .knockout-impact-grid-two {
    grid-template-columns: 1fr;
  }

  .knockout-impact-pill {
    display: none;
  }

  .knockout-scenario .knockout-impact-pill {
    display: inline-flex;
  }
}

.matchday-toggle-row {
  display: flex;
  gap: 8px;
  width: 100%;
  margin: 0 0 12px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.matchday-toggle-row::-webkit-scrollbar {
  display: none;
}

.matchday-toggle-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--matchday-border);
  border-radius: 999px;
  background: var(--matchday-card-bg);
  color: var(--matchday-text);
  box-shadow: var(--matchday-inset-highlight);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.matchday-toggle-pill:hover,
.matchday-toggle-pill:focus-visible {
  border-color: var(--matchday-border-strong);
  background: var(--matchday-card-bg-hover);
  color: var(--matchday-accent);
}

.matchday-toggle-pill:focus-visible {
  outline: 3px solid rgba(45, 212, 191, 0.32);
  outline-offset: 2px;
}

.section-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--success-color);
  line-height: 1;
  transition: transform .25s ease;
}

.matchday-toggle-pill.is-active {
  border-color: var(--matchday-border-strong);
  background: var(--matchday-accent-soft);
  color: var(--matchday-accent);
}

.section-toggle[aria-expanded="true"] .section-toggle-icon {
  transform: rotate(90deg);
}

.matchday-today-section {
  margin: 0;
  text-align: left;
}

.matchday-today-section h3 {
  margin: 10px 0 10px;
  color: var(--matchday-text);
  font-size: 1rem;
  font-weight: 950;
  text-align: left;
}

.matchday-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
  margin-top: 0;
}

.matchday-panel-stack {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.matchday-panel-stack:has(.matchday-panel.is-open) {
  margin-bottom: 14px;
}

.matchday-panel[hidden] {
  display: none;
}

.matchday-panel {
  width: 100%;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--matchday-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: var(--matchday-inset-highlight);
  text-align: left;
}

.matchday-panel.is-open {
  display: block;
}

.matchday-panel .matchday-insights,
.matchday-panel .matchday-storylines {
  margin-top: 0;
}

.matchday-panel .matchday-insights-title,
.matchday-panel .matchday-storylines-title {
  display: none;
}

.matchday-panel .matchday-insights-grid,
.matchday-panel .matchday-storylines-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 9px;
}

.matchday-panel .matchday-insight-card,
.matchday-panel .matchday-storyline-card {
  padding: 11px;
}

.matchday-panel-empty {
  width: 100%;
  margin: 0;
  padding: 10px;
  border: 1px dashed var(--matchday-border);
  border-radius: 8px;
  color: var(--matchday-muted);
  font-weight: 800;
  text-align: left;
}

.matchday-insights {
  margin-top: 12px;
}

.matchday-insights-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.matchday-insights-title span,
.matchday-insight-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--matchday-border-strong);
  border-radius: 999px;
  background: var(--matchday-green-soft);
  color: var(--matchday-highlight-text);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.matchday-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.matchday-insight-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--matchday-border);
  border-radius: 8px;
  background: var(--matchday-card-bg);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
  box-shadow: var(--matchday-inset-highlight);
}

.matchday-insight-card:hover {
  transform: translateY(-2px);
  border-color: var(--matchday-border-strong);
  background: var(--matchday-card-bg-hover);
}

.matchday-insight-card h3 {
  margin: 10px 0 6px;
  color: var(--matchday-text);
  font-size: 1.04rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.matchday-insight-card p {
  margin: 0;
  color: var(--matchday-muted);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.35;
}

.matchday-insight-card small {
  display: block;
  margin-top: 7px;
  color: var(--matchday-accent);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

.matchday-storylines {
  margin-top: 14px;
}

.matchday-storylines-title {
  margin-bottom: 9px;
}

.matchday-storylines-title span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--matchday-border-strong);
  border-radius: 999px;
  background: var(--matchday-blue-soft);
  color: var(--matchday-accent);
  font-size: 0.8rem;
  font-weight: 900;
}

.matchday-storylines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 10px;
}

.matchday-storyline-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--matchday-border);
  border-radius: 8px;
  background: var(--matchday-card-bg);
  box-shadow: var(--matchday-inset-highlight);
}

.matchday-storyline-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  margin-bottom: 6px;
  padding: 3px 8px;
  border: 1px solid var(--matchday-border-strong);
  border-radius: 999px;
  background: var(--matchday-blue-soft);
  color: var(--matchday-accent);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.matchday-storyline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--matchday-accent-soft);
  font-size: 1.25rem;
}

.matchday-storyline-card strong,
.matchday-storyline-card p,
.matchday-storyline-card small,
.matchday-storyline-badge {
  overflow-wrap: anywhere;
}

.matchday-storyline-card strong {
  display: block;
  color: var(--matchday-text);
  font-size: 0.92rem;
  line-height: 1.2;
}

.matchday-storyline-card p {
  margin: 5px 0 4px;
  color: var(--matchday-text);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.matchday-storyline-card small {
  color: var(--matchday-accent);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

.matchday-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--matchday-border-strong);
  border-radius: 8px;
  background: var(--matchday-button-bg);
  color: var(--matchday-button-text);
  box-shadow: var(--matchday-button-shadow);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.matchday-share-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.matchday-share-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
}

.matchday-share-backdrop {
  position: absolute;
  inset: 0;
  background: var(--matchday-backdrop);
  backdrop-filter: blur(6px);
}

.matchday-share-panel {
  position: relative;
  width: min(100%, 420px);
  padding: 20px;
  border: 1px solid var(--matchday-border-strong);
  border-radius: 8px;
  background: var(--matchday-card-bg-strong);
  color: var(--matchday-text);
  box-shadow: var(--matchday-shadow);
}

.matchday-share-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--matchday-border);
  border-radius: 8px;
  background: var(--matchday-card-bg);
  color: var(--matchday-text);
  font-size: 1.3rem;
  cursor: pointer;
}

.matchday-share-panel h3 {
  margin: 0 42px 8px 0;
  color: var(--matchday-text);
  font-size: 1.2rem;
}

.matchday-share-panel p,
.matchday-share-panel small {
  display: block;
  margin: 0;
  color: var(--matchday-muted);
  font-weight: 800;
}

.matchday-share-actions {
  display: grid;
  gap: 10px;
  margin: 16px 0 10px;
}

.matchday-share-actions button {
  min-height: 42px;
  border: 1px solid var(--matchday-border);
  border-radius: 8px;
  background: var(--matchday-green-soft);
  color: var(--matchday-highlight-text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.match-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.68);
  backdrop-filter: blur(8px);
}

.match-modal-panel {
  display: flex;
  flex-direction: column;
  position: relative;
  width: min(94vw, 900px);
  max-height: min(90vh, 860px);
  overflow: hidden;
  border: 1px solid var(--matchday-border-strong);
  border-radius: 18px;
  background: var(--matchday-bg);
  color: var(--matchday-text);
  box-shadow: var(--matchday-shadow);
}

.match-modal-open {
  overflow: hidden;
}

.match-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 1px solid var(--matchday-border-strong);
  border-radius: 999px;
  background: var(--matchday-card-bg-strong);
  color: var(--matchday-text);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: var(--matchday-inset-highlight);
}

.match-modal-header {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  padding: 22px 60px 14px;
  border-bottom: 1px solid var(--matchday-border);
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.13), rgba(15, 23, 42, 0));
  text-align: center;
}

.match-modal-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--matchday-border-strong);
  border-radius: 999px;
  background: var(--matchday-blue-soft);
  color: var(--matchday-accent);
  font-size: 0.74rem;
  font-weight: 900;
}

.match-modal-header h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 6px;
  padding: 0;
  background: transparent;
  color: var(--matchday-text);
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.1;
  text-shadow: none;
  text-align: center;
}

.match-modal-header h2 em {
  color: var(--matchday-accent);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.match-modal-header p {
  margin: 0;
  color: var(--matchday-muted);
  font-weight: 900;
}

.match-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-height: calc(min(90vh, 860px) - 126px);
  overflow: auto;
  padding: 14px;
}

.match-modal-section {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  justify-self: stretch;
  margin: 0 0 12px;
  padding: 15px;
  border: 1px solid var(--matchday-border);
  border-radius: 12px;
  background: var(--matchday-card-bg);
  box-shadow: var(--matchday-inset-highlight);
}

.match-modal-section h3 {
  margin: 9px 0 10px;
  color: var(--matchday-text);
  font-size: 1rem;
  line-height: 1.2;
}

.match-modal-prediction {
  margin-top: 0;
}

@media (max-width: 640px) {
  .matchday-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .matchday-header-actions {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
  }

  .matchday-share-button {
    width: 100%;
  }

  .matchday-date-control,
  .matchday-date-control .match-selector {
    width: 100%;
  }

  .matchday-date-control {
    gap: 7px;
  }

  .matchday-date-control>.matchday-badge {
    flex: 0 0 42px;
  }

  .matchday-date-control .match-selector {
    flex: 1 1 auto;
    min-width: 0;
  }

  .matchday-badge {
    align-self: flex-start;
  }

  .match-modal-panel {
    width: 100%;
    height: 90vh;
    max-height: 90vh;
    border-radius: 24px 24px 0 0;
  }

  .match-modal-header {
    padding: 18px 58px 12px;
  }

  .match-modal-body {
    max-height: calc(90vh - 116px);
    padding: 12px;
  }

  .match-modal-section {
    padding: 13px;
  }
}

.matchday-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--matchday-border);
  border-radius: 8px;
  background: var(--matchday-card-bg);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
  box-shadow: var(--matchday-inset-highlight);
}

.matchday-card:hover {
  transform: translateY(-2px);
  border-color: var(--matchday-border-strong);
  background: var(--matchday-card-bg-hover);
}

.matchday-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0 0 10px;
}

.matchday-card-top b {
  color: var(--matchday-muted);
  font-size: 0.9rem;
}

.matchday-card h3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 1.02rem;
}

.matchday-card h3 span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.matchday-card h3 span:last-child {
  text-align: right;
}

.matchday-card h3 em {
  color: var(--matchday-muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.matchday-empty {
  width: 100%;
  padding: 16px;
  border: 1px dashed var(--matchday-border);
  border-radius: 8px;
  background: var(--matchday-card-bg);
  text-align: center;
}

/* STATUS HEADER */
.dashboard-status {
  display: block;
  width: min(100%, 1100px);
  margin: 1rem auto;
  padding: 14px 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  text-align: left;
}

.dashboard-status-live {
  border-left: 5px solid #16a34a;
}

.dashboard-status-main {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 42px;
}

.dashboard-status h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  color: #0f172a;
  font-size: 1rem;
  line-height: 1.2;
}

.dashboard-status h2 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #f1f5f9;
  color: #475569;
  font-size: 1rem;
}

.dashboard-status p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  line-height: 1.2;
}

.dashboard-status-time {
  padding-left: 20px;
  border-left: 1px solid #e2e8f0;
  color: #334155;
  font-size: 0.9rem;
  font-weight: 700;
}

.dashboard-status-result {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding-left: 20px;
  border-left: 1px solid #e2e8f0;
  color: #334155;
}

.dashboard-status-result span,
.dashboard-status-result small {
  display: inline;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-status-result strong {
  display: inline;
  margin: 0;
  color: #0f172a;
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: nowrap;
}

.dashboard-status .dashboard-update-button {
  flex: 0 0 auto;
  width: auto;
  margin: 0 0 0 auto;
  white-space: nowrap;
}

.dashboard-update-button {
  width: 100%;
  min-height: 38px;
  margin-top: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: #2563eb;
  color: white;
  font-weight: 900;
  cursor: pointer;
}

.dashboard-update-button:hover {
  background: #1d4ed8;
}

.dashboard-update-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.simulator-access-panel .dashboard-update-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: min(220px, 100%);
  min-height: 36px;
  font-size: 0.98rem;
  padding: 0.75rem 1rem;
  margin: 1rem auto 0;
}

.dashboard-empty-wrap {
  display: flex;
  justify-content: center;
  width: min(100%, 1100px);
  margin: 1.5rem auto 7.5rem;
  padding: 0 1rem;
}

.dashboard-empty-card {
  display: block;
  width: min(100%, 680px);
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid rgba(226, 232, 240, 0.82);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: center;
}

.dashboard-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 0.85rem;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(220, 252, 231, 0.95), rgba(219, 234, 254, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  font-size: 1.65rem;
}

.dashboard-empty-kicker,
.dashboard-empty-description {
  display: block;
}

.dashboard-empty-kicker {
  margin: 0 0 0.4rem;
  color: #047857;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dashboard-empty-card h2 {
  width: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #0f172a;
  font-size: clamp(1.55rem, 4vw, 2.35rem);
  line-height: 1.08;
}

.dashboard-empty-description {
  max-width: 520px;
  margin: 0.85rem auto 0;
  color: #475569;
  font-size: 1rem;
  line-height: 1.55;
}

.dashboard-empty-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 1.35rem auto 0;
  padding: 0;
  max-width: 560px;
}

.dashboard-empty-meta:empty {
  display: none;
}

.dashboard-empty-meta div {
  display: block;
  width: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.85);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.86);
  text-align: left;
}

.dashboard-empty-meta dt,
.dashboard-empty-meta dd {
  margin: 0;
}

.dashboard-empty-meta dt {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.dashboard-empty-meta dd {
  margin-top: 5px;
  color: #0f172a;
  font-weight: 900;
  line-height: 1.25;
}

.dashboard-empty-refresh {
  min-height: 44px;
  margin-top: 1.35rem;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: #2563eb;
  color: white;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.24);
  font-weight: 900;
  cursor: pointer;
}

.dashboard-empty-refresh:hover {
  background: #1d4ed8;
}

.dashboard-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  max-width: min(360px, calc(100vw - 36px));
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.22);
  font-weight: 900;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dashboard-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.dashboard-toast.is-success {
  background: #dcfce7;
  color: #166534;
}

.dashboard-toast.is-error {
  background: #fee2e2;
  color: #991b1b;
}

.match-center-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px !important;
}

.match-center-header p {
  margin-top: 6px;
  color: #64748b;
  font-weight: 700;
}

.match-center-header .match-selector-label {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  color: #334155;
  font-size: 0.85rem;
}

.match-center-empty {
  padding: 18px;
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.88);
  color: #475569;
  text-align: center !important;
}

.match-center-panel {
  display: none !important;
}

.match-center-panel.is-active {
  display: block !important;
}

.match-center-details {
  margin-top: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.match-center-summary {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  color: #0f172a;
  font-weight: 900;
}

.match-center-summary strong {
  overflow-wrap: anywhere;
}

.match-center-summary small {
  color: #64748b;
  font-weight: 800;
}

.match-center-details[open] .match-center-summary {
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.match-card {
  margin: 8px 0 10px;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 8px;
  background: #f8fafc;
}

.match-score .match-day-flag {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}

.points-gained {
  color: #047857;
  font-weight: 900;
  white-space: nowrap;
}

.match-summary-card.surprise-hit {
  border-color: #fde68a;
  background: #fffbeb;
}

.match-summary-card.unique-pick {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.match-analysis-stack {
  display: grid !important;
  gap: 12px;
}

.match-analysis-group>h3 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 0.98rem;
}

.match-highlight-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

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

.knockout-result-impact ul {
  display: grid;
  gap: 9px;
  margin: 10px 0 0;
  padding-left: 20px;
  color: #475569;
  font-weight: 800;
  line-height: 1.35;
}

.dark-mode .knockout-result-impact ul {
  color: #cbd5e1;
}

.knockout-result-impact .match-day-flag {
  display: inline-block;
  width: 22px;
  height: 16px;
  margin: 0 5px 0 0;
  border-radius: 3px;
  object-fit: cover;
  vertical-align: -2px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}

@media (max-width: 560px) {
  .match-highlight-grid-knockout {
    grid-template-columns: 1fr;
  }
}

.match-highlight-card {
  min-height: 88px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.match-highlight-card span,
.match-highlight-card strong,
.match-highlight-card small {
  display: block;
}

.match-highlight-card span {
  margin-bottom: 4px;
  font-size: 1.2rem;
}

.match-highlight-card strong {
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.15;
}

.match-highlight-card small {
  margin-top: 5px;
  color: #64748b;
  font-weight: 800;
  line-height: 1.25;
}

.match-insight-card {
  min-height: 0;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.match-insight-card p {
  color: #64748b;
  line-height: 1.35;
}

.pick-bar {
  margin-top: 8px;
}

.pick-bar:first-of-type {
  margin-top: 0;
}

.pick-bar-label {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px !important;
  color: #0f172a;
}

.pick-bar-label span {
  overflow-wrap: anywhere;
  font-weight: 800;
}

.pick-bar-label strong {
  color: #475569;
  font-size: 0.85rem;
  white-space: nowrap;
}

.pick-bar-label strong small {
  margin-left: 4px;
  color: #64748b;
  font-weight: 800;
}

.pick-bar-track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.pick-bar-fill {
  display: block;
  min-width: 2px;
  height: 100%;
  border-radius: 999px;
  background: #2563eb;
}

.pick-bar-fill-draw {
  background: #64748b;
}

.pick-bar-fill-away_win {
  background: #dc2626;
}

.scoreline-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
}

.scoreline-chip,
.surprise-chip,
.unique-pick-chip {
  border-radius: 8px;
  font-weight: 800;
}

.scoreline-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
}

.scoreline-chip small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.78rem;
}

.surprise-list {
  border-color: #fde68a;
  background: #fffbeb;
}

.surprise-chip-list,
.unique-pick-list {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

.surprise-chip {
  display: grid;
  grid-template-columns: minmax(88px, 0.8fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #fcd34d;
  background: #fff7ed;
  color: #78350f;
}

.surprise-chip span,
.unique-pick-chip span {
  overflow-wrap: anywhere;
  font-weight: 700;
}

.surprise-chip b {
  color: #047857;
  white-space: nowrap;
}

.unique-picks {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.unique-pick-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #bfdbfe;
  background: #fff;
  color: #1e3a8a;
}

.unique-pick-chip span {
  padding: 3px 8px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  white-space: nowrap;
}

.match-analysis-section summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: #0f172a;
  font-weight: 900;
  line-height: 1.2;
  list-style: none;
}

.match-analysis-section summary::-webkit-details-marker {
  display: none;
}

.match-analysis-section summary::before {
  content: none;
}

.match-analysis-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--success-color);
  line-height: 1;
  transition: transform .25s ease;
}

.match-analysis-section[open] .match-analysis-toggle-icon {
  transform: rotate(90deg);
}

.match-analysis-section[open] summary {
  margin-bottom: 8px;
}

.match-analysis-section:not([open]) {
  background: #fff;
}

.match-center-table {
  min-width: 920px;
}

.match-center-table tr.exact-hit td {
  background: rgba(220, 252, 231, 0.72);
}

.match-center-table tr.surprise-hit td {
  box-shadow: inset 3px 0 0 #f59e0b;
}

.leader-path-ranking .leader-path-reason {
  min-width: 0;
  white-space: normal;
}

.leader-path-reason-list {
  display: grid;
  gap: 5px;
  width: 100%;
  min-width: 0;
}

.leader-path-reason-item {
  display: block;
  width: 100%;
  min-width: 0;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.leader-path-reason-item + .leader-path-reason-item {
  padding-top: 5px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.leader-path-reason-empty {
  color: #64748b;
}

.leader-path-ranking-toggle {
  display: none;
}

/* EVOLUTION */
.evolution-section,
.evolution-section * {
  text-align: left;
}

.evolution-section h2,
.evolution-section h3,
.evolution-section p,
.evolution-section div,
.evolution-section article,
.evolution-section label {
  display: block;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

.evolution-section h2 {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: #111827;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.evolution-section h3 {
  margin: 0 0 12px;
  color: #111827;
  font-size: 1rem;
  line-height: 1.2;
}

.evolution-header {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px !important;
}

.evolution-header p {
  margin-top: 6px;
  color: #64748b;
  font-weight: 700;
  line-height: 1.35;
}

.evolution-controls {
  display: flex !important;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
  min-width: min(100%, 390px);
}

.evolution-controls label {
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  color: #334155;
  font-size: 0.85rem;
  font-weight: 800;
}

.evolution-controls select,
.evolution-toggle {
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font: inherit;
}

.evolution-controls select {
  max-width: 220px;
  padding: 0.45rem 0.6rem;
}

.evolution-toggle {
  cursor: pointer;
  padding: 0.45rem 0.75rem;
  font-weight: 900;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.evolution-toggle:hover,
.evolution-toggle.is-active {
  border-color: #1d4ed8;
  background: #1d4ed8;
  color: #fff;
}

.evolution-snapshot-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px !important;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.evolution-quick-stat {
  position: relative;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 7px;
  background: #fff;
  color: #0f172a;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.88);
  line-height: 1.15;
}

.quick-stat-icon {
  grid-row: 1 / span 2;
  font-size: 1.05rem;
  line-height: 1;
}

.metric-tooltip-trigger {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: start;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
}

.metric-tooltip-trigger:hover,
.metric-tooltip-trigger:focus-visible {
  background: #1d4ed8;
  color: #fff;
  outline: none;
}

.metric-tooltip {
  position: absolute;
  z-index: 20;
  top: calc(100% + 9px);
  right: 8px;
  width: max-content;
  max-width: min(280px, calc(100vw - 40px));
  padding: 10px 11px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: #0f172a;
  color: #f8fafc;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.24);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.metric-tooltip::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 15px;
  width: 10px;
  height: 10px;
  border-left: 1px solid rgba(148, 163, 184, 0.28);
  border-top: 1px solid rgba(148, 163, 184, 0.28);
  background: #0f172a;
  transform: rotate(45deg);
}

.evolution-quick-stat:hover .metric-tooltip,
.evolution-quick-stat:focus-within .metric-tooltip,
.evolution-quick-stat.is-tooltip-open .metric-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.evolution-quick-stat b {
  display: block;
  color: #475569;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.evolution-quick-stat strong {
  display: block;
  min-width: 0;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

/* FIRST GLANCE */
.first-glance-section,
.first-glance-section * {
  text-align: left;
}

.first-glance-pyramid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.first-glance-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.first-glance-winner {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 560px);
}

.first-glance-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.first-glance-card-header>span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  font-size: 1.1rem;
}

.first-glance-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 950;
}

.first-glance-card p,
.first-glance-empty {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.35;
}

.first-glance-bar-list {
  display: grid;
  align-items: stretch;
  gap: 10px;
  overflow: visible;
}

.first-glance-bar-row {
  display: grid;
  gap: 7px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 54px;
  overflow: hidden;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.first-glance-bar-row:hover,
.first-glance-bar-row:focus-visible {
  border-color: #2563eb;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.14);
  outline: none;
  transform: translateY(-1px);
}

.first-glance-bar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.first-glance-bar-label span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.first-glance-bar-label .match-day-flag {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.first-glance-bar-label strong {
  color: #475569;
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}

.first-glance-bar-label small {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 900;
}

.first-glance-bar-track {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.first-glance-bar-fill {
  display: block;
  min-width: 3px;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.first-glance-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1120;
}

.first-glance-modal.is-open {
  display: grid;
  place-items: center;
  padding: 18px;
}

.first-glance-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.68);
  backdrop-filter: blur(8px);
}

.first-glance-modal-panel {
  position: relative;
  width: min(92vw, 520px);
  max-height: min(86vh, 640px);
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.32);
}

.first-glance-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
}

.first-glance-modal-panel h3 {
  margin: 10px 42px 14px 0;
  color: #0f172a;
  font-size: 1.25rem;
  font-weight: 950;
  line-height: 50%;
}

.first-glance-participant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.first-glance-participant-list span,
.first-glance-participant-list a {
  display: inline-flex;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--matchday-border);
  border-radius: 999px;
  text-decoration: none;
  background: var(--matchday-card-bg-strong);
  color: var(--matchday-text);
  font-size: 0.82rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.chart-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px !important;
}

.chart-card {
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.chart-card[hidden] {
  display: none !important;
}

.chart-scroll {
  display: block !important;
  width: 100%;
  height: 340px;
  min-height: 340px;
  max-height: 340px;
  overflow: hidden;
  position: relative;
}

.chart-scroll canvas {
  display: block !important;
  width: 100% !important;
  height: 320px !important;
  max-height: 320px !important;
}

.evolution-legend {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px !important;
  max-height: 116px;
  overflow: auto;
}

.evolution-selection-controls {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px !important;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 850;
}

.evolution-clear-selection {
  min-height: 32px;
  padding: 0.35rem 0.65rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.evolution-clear-selection:hover,
.evolution-clear-selection:focus-visible {
  border-color: #1d4ed8;
  background: #eff6ff;
  color: #1d4ed8;
  outline: none;
}

.evolution-legend-item {
  min-height: 32px;
  padding: 0.35rem 0.55rem;
  border: 1px solid #cbd5e1;
  border-left: 4px solid var(--participant-color, #2563eb);
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.1;
}

.evolution-legend-item.is-selected {
  border-color: #0f172a;
  background: #0f172a;
  color: #fff;
}

.evolution-legend-item.is-hidden {
  opacity: 0.52;
  text-decoration: line-through;
}

.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 !important;
}

.stat-card {
  min-height: 150px;
  padding: 15px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
}

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #eff6ff;
  font-size: 1.2rem;
}

.stat-card strong {
  display: block;
  color: #0f172a;
  font-size: 0.86rem;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: uppercase;
}

.stat-card h3 {
  margin: 10px 0 0;
  color: #0f172a;
  font-size: clamp(1.08rem, 2.4vw, 1.35rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.stat-card p {
  margin-top: 8px;
  color: #475569;
  line-height: 1.35;
  font-weight: 800;
}

.evolution-stats-list {
  display: grid;
  gap: 6px;
  margin: 12px 0 !important;
}

.evolution-stat-row {
  display: grid;
  grid-template-columns: 34px minmax(130px, 0.85fr) minmax(160px, 1fr) minmax(190px, 1.3fr);
  align-items: center;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  column-gap: 10px;
}

.evolution-stat-row .stat-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 0;
  font-size: 1rem;
}

.evolution-stat-row strong {
  color: #334155;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: uppercase;
}

.evolution-stat-row h3 {
  margin: 0;
  color: #0f172a;
  font-size: 0.98rem;
  font-weight: 950;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.evolution-stat-row p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #475569;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.leader-badge {
  border-color: #fde68a;
  background: #fffbeb;
}

.momentum-card {
  border-color: #bae6fd;
  background: linear-gradient(145deg, #fff, #f0f9ff);
}

.phase-ranking {
  margin-top: 18px !important;
}

.evolution-history-details {
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.evolution-history-details summary {
  min-height: 46px;
  padding: 13px 16px;
  color: #0f172a;
  cursor: pointer;
  font-weight: 950;
  list-style-position: inside;
}

.evolution-history-details[open] {
  padding-bottom: 14px;
}

.evolution-history-details[open] summary {
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 12px;
  background: #f8fafc;
}

.evolution-history-details .phase-tabs,
.evolution-history-details .phase-ranking-panel,
.evolution-history-details .evolution-stats-list,
.evolution-history-details .stats-grid {
  margin-left: 14px !important;
  margin-right: 14px !important;
}

.phase-tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px !important;
}

.phase-tabs button {
  min-height: 38px;
  padding: 0.45rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.phase-tabs button:hover,
.phase-tabs button.is-active {
  border-color: #111827;
  background: #111827;
  color: #fff;
}

.phase-ranking-panel {
  display: none !important;
}

.phase-ranking-panel.is-active {
  display: block !important;
}

.phase-ranking-table {
  min-width: 760px;
}

.evolution-empty {
  padding: 18px;
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.88);
  color: #475569;
  text-align: center !important;
}

.participant-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: #0f766e;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
}

.participant-link:hover,
.participant-link:focus-visible {
  color: #115e59;
  text-decoration: underline;
  outline: none;
}

/* RACE FOR THE TITLE */
.race-section,
.race-section * {
  text-align: left;
}

.race-section h2,
.race-section h3,
.race-section p,
.race-section div,
.race-section article,
.race-section section {
  display: block;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

.race-header {
  display: block !important;
  margin-bottom: 10px !important;
}

.race-header h2 {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 15px;
  color: #0f172a;
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  text-shadow: none;
}

.race-header p {
  margin-top: 4px;
  color: #64748b;
  font-weight: 800;
}

.race-summary-card,
.contender-card,
.eliminated-card,
.scenario-card,
.decisive-match {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.race-filter-bar {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 12px 0 !important;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.race-filter {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0.4rem 0.7rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.race-filter:hover,
.race-filter.is-active {
  border-color: #0f766e;
  background: #0f766e;
  color: #fff;
}

[data-race-card][hidden],
[data-race-card].race-is-hidden,
.race-section .race-is-hidden {
  display: none !important;
}

.race-summary-grid,
.contender-grid {
  display: grid !important;
  gap: 8px;
  margin: 10px 0 !important;
}

.race-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

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

.race-standings-head,
.race-status {
  display: none;
}

.race-summary-card {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 7px;
  min-height: 54px;
  padding: 8px 10px;
  border: 0;
  border-right: 1px solid #e2e8f0;
  border-radius: 0;
  background: #f8fafc;
  box-shadow: none;
}

.race-summary-card span,
.race-summary-card strong,
.race-summary-card p {
  display: inline-flex;
  align-items: center;
  margin: 0;
  white-space: nowrap;
}

.race-summary-card span {
  grid-row: span 2;
  margin-bottom: 0;
  font-size: 1.05rem;
}

.race-summary-card strong {
  color: #0f172a;
  font-size: 1.2rem;
  line-height: 1;
}

.race-summary-card p {
  margin-top: 2px;
  color: #475569;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.race-summary-card:last-child {
  border-right: 0;
}

.race-list-header {
  margin: 12px 0 4px !important;
}

.race-list-header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 1rem;
}

.race-chase-group {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.race-chase-group>span {
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.race-chase-group>div {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
}

.contender-card,
.eliminated-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) minmax(58px, auto) 48px;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 7px 10px;
  overflow: visible;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.contender-card:hover,
.eliminated-card:hover {
  transform: translateY(-2px);
}

.contender-card {
  border-color: #dbeafe;
  background: #fff;
}

.eliminated-card {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #475569;
  filter: saturate(0.72);
}

.alive-chip,
.eliminated-chip {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  white-space: nowrap;
}

.alive-chip {
  background: #dcfce7;
  color: #166534;
}

.eliminated-chip {
  background: #e2e8f0;
  color: #475569;
}

button.eliminated-chip {
  border: 1px solid rgba(71, 85, 105, 0.16);
  font-family: inherit;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

button.alive-chip {
  border: 1px solid rgba(22, 101, 52, 0.26);
  font-family: inherit;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

button.alive-chip:hover,
button.alive-chip:focus-visible {
  background: #bbf7d0;
  color: #14532d;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  transform: translateY(-1px);
  outline: 0;
}

button.eliminated-chip:hover,
button.eliminated-chip:focus-visible {
  background: #fee2e2;
  color: #991b1b;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
  transform: translateY(-1px);
  outline: 0;
}

.race-elimination-open {
  overflow: hidden;
}

.race-section .race-elimination-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
  visibility: hidden;
}

.race-section .race-elimination-modal.is-open {
  display: flex;
  pointer-events: auto;
  visibility: visible;
}

.race-elimination-backdrop {
  position: absolute;
  inset: 0;
  background: var(--race-modal-overlay);
  backdrop-filter: blur(10px);
}

.race-section .race-elimination-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: min(88vh, 820px);
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--race-modal-border);
  border-radius: 14px;
  background: var(--race-modal-bg);
  color: var(--race-modal-text);
  box-shadow: var(--race-modal-shadow);
  transform: translateY(10px);
  animation: raceEliminationIn 180ms ease forwards;
  scrollbar-color: var(--race-modal-border) transparent;
}

@keyframes raceEliminationIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.race-elimination-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--race-modal-border);
  border-radius: 999px;
  background: var(--race-modal-close-bg);
  color: var(--race-modal-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.race-elimination-head {
  padding-right: 36px;
}

.race-elimination-head span,
.race-elimination-reason strong {
  color: var(--race-modal-accent);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.race-elimination-head h2 {
  margin: 6px 0 8px;
  color: var(--race-modal-text);
  font-size: clamp(1.25rem, 4vw, 1.9rem);
  line-height: 1.08;
}

.race-elimination-head p,
.race-elimination-reason p {
  margin: 0;
  color: var(--race-modal-muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.race-elimination-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.race-elimination-cards article,
.race-elimination-reason {
  padding: 10px;
  border: 1px solid var(--race-modal-border);
  border-radius: 8px;
  background: var(--race-modal-card-bg);
}

.race-elimination-cards span {
  display: block;
  color: var(--race-modal-muted);
  font-size: 0.7rem;
  font-weight: 850;
}

.race-elimination-cards strong {
  display: block;
  margin-top: 4px;
  color: var(--race-modal-text);
  font-size: 0.96rem;
}

.race-elimination-table-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
}

.race-elimination-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.race-elimination-table th,
.race-elimination-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--race-modal-table-border);
  color: var(--race-modal-text);
  text-align: right;
}

.race-elimination-table th:first-child,
.race-elimination-table td:first-child {
  text-align: left;
}

.race-elimination-picks {
  margin: 16px 0;
  padding-top: 14px;
  border-top: 1px solid var(--race-modal-border);
}

.race-elimination-subhead h3 {
  margin: 0 0 6px;
  color: var(--race-modal-text);
  font-size: 1rem;
}

.race-elimination-subhead p {
  margin: 0;
  color: var(--race-modal-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.race-pick-summary-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.race-pick-summary-cards article {
  padding: 9px;
  border: 1px solid var(--race-modal-border);
  border-radius: 8px;
  background: var(--race-modal-card-bg-strong);
}

.race-pick-summary-cards span {
  display: block;
  color: var(--race-modal-muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.race-pick-summary-cards strong {
  display: block;
  margin-top: 3px;
  color: var(--race-modal-text);
  font-size: 0.92rem;
}

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

.race-pick-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.race-pick-table th,
.race-pick-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--race-modal-table-border);
  color: var(--race-modal-text);
  vertical-align: top;
}

.race-pick-table th {
  color: var(--race-modal-accent);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.race-pick-badge,
.race-pick-status {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 950;
  white-space: nowrap;
}

.race-pick-badge.is-gain,
.race-pick-status.is-gain {
  background: var(--race-modal-gain-bg);
  color: var(--race-modal-gain-text);
}

.race-pick-badge.is-shared,
.race-pick-status.is-shared {
  background: var(--race-modal-shared-bg);
  color: var(--race-modal-shared-text);
}

.race-pick-badge.is-none,
.race-pick-status.is-none {
  background: var(--race-modal-none-bg);
  color: var(--race-modal-none-text);
}

.race-pick-table td:last-child span {
  display: block;
  margin-top: 5px;
  color: var(--race-modal-muted);
  line-height: 1.35;
}

.race-path-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.race-path-actions {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 12px;
}

.race-path-copy {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--race-modal-border);
  border-radius: 8px;
  background: var(--race-modal-card-bg-strong);
  color: var(--race-modal-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.race-path-copy:hover,
.race-path-copy:focus-visible {
  border-color: var(--race-modal-accent);
  color: var(--race-modal-accent);
  outline: none;
}

.race-path-list article,
.race-path-list p {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--race-modal-border);
  border-radius: 8px;
  background: var(--race-modal-card-bg-strong);
}

.race-path-list span,
.race-path-list small {
  display: block;
  color: var(--race-modal-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.race-path-list strong {
  display: block;
  margin: 3px 0;
  color: var(--race-modal-text);
  font-size: 0.94rem;
}

.race-path-top-table td:nth-child(2),
.race-path-top-table th:nth-child(2) {
  text-align: left;
}

@media (max-width: 640px) {
  .race-elimination-modal {
    align-items: stretch;
    padding: 10px;
  }

  .race-section .race-elimination-panel {
    width: 100%;
    max-height: calc(100vh - 20px);
    padding: 18px 14px;
    border-radius: 12px;
  }

  .race-path-actions {
    justify-content: stretch;
  }

  .race-path-copy {
    width: 100%;
  }

  .race-elimination-cards {
    grid-template-columns: 1fr;
  }

  .race-pick-summary-cards {
    grid-template-columns: 1fr;
  }
}

.contender-title {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin-top: 0 !important;
}

.race-rank {
  color: #0f172a;
  font-size: 0.86rem;
  font-weight: 950;
  white-space: nowrap;
}

.race-score {
  color: #0f172a;
  font-weight: 950;
  white-space: nowrap;
}

.race-gap {
  color: #0f766e;
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
}

@media (min-width: 761px) {
  .race-summary-card {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
  }

  .contender-grid {
    gap: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
  }

  .race-standings-head {
    display: grid;
    grid-template-columns: 54px minmax(180px, 1fr) 150px 76px 76px;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .contender-card,
  .eliminated-card {
    grid-template-columns: 54px minmax(180px, 1fr) 150px 76px 76px;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-bottom: 1px solid #eef2f7;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }

  .contender-card:last-child,
  .eliminated-card:last-child {
    border-bottom: 0;
  }

  .contender-card:hover,
  .eliminated-card:hover {
    transform: none;
    background: #f8fafc;
    box-shadow: none;
  }

  .race-status {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  .race-rank {
    font-size: 0.82rem;
  }

  .contender-title {
    gap: 0;
  }

  .contender-title .participant-link {
    font-weight: 950;
  }

  .race-score {
    font-size: 0.84rem;
    text-align: right;
  }

  .race-gap {
    color: #334155;
    font-size: 0.84rem;
  }
}

.race-table-wrap {
  border-radius: 8px;
}

.race-current-table {
  min-width: 620px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-collapse: collapse;
  background: #ffffff;
  text-align: left;
}

.race-current-table th {
  border-color: #003469;
  background: #003469;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-transform: uppercase;
}

.race-current-table td,
.race-current-table th {
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
}

.race-current-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.race-current-table .contender-card:not([hidden]),
.race-current-table .eliminated-card:not([hidden]) {
  display: table-row !important;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  transition: background 160ms ease;
}

.race-current-table .contender-card:hover,
.race-current-table .eliminated-card:hover {
  transform: none;
  background: #eff6ff;
  box-shadow: none;
}

.race-current-table .contender-title {
  display: table-cell !important;
  width: 44%;
}

.race-current-table .contender-title .participant-link {
  color: #0f172a;
  font-weight: 950;
}

.race-current-table .race-status {
  display: table-cell;
}

.race-current-table .race-score,
.race-current-table .race-gap,
.race-current-table th:nth-child(4),
.race-current-table th:nth-child(5) {
  text-align: right;
}

.race-current-table .race-score,
.race-current-table .race-gap {
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 950;
}

.race-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  margin: 12px auto 0;
  padding: 0.62rem 1rem;
  border: 1px solid rgba(0, 52, 105, 0.22);
  border-radius: 999px;
  background: linear-gradient(135deg, #003469, #0f766e);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
  cursor: pointer;
}

.race-mobile-toggle:hover,
.race-mobile-toggle:focus-visible {
  background: linear-gradient(135deg, #00264d, #0d9488);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18);
}

.contender-card p,
.eliminated-card p {
  margin-top: 4px;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.25;
}

.contender-card dl,
.eliminated-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 7px 0 0;
}

.contender-card dt,
.eliminated-card dt,
.contender-card dd,
.eliminated-card dd {
  margin: 0;
}

.contender-card dl div,
.eliminated-card dl div {
  padding: 5px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
}

.contender-card dt,
.eliminated-card dt {
  color: #64748b;
  font-size: 0.64rem;
  font-weight: 900;
}

.contender-card dd,
.eliminated-card dd {
  margin-top: 1px;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 900;
}

.probability-bar {
  width: 100%;
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbeafe;
}

.probability-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0f766e, #22c55e);
  animation: probabilityGrow 700ms ease-out both;
}

.contender-card small {
  display: block;
  margin-top: 6px;
  color: #334155;
  font-weight: 900;
}

.control-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}

.race-expand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 2px 0 10px;
  padding: 0.45rem 0.8rem;
  border: 1px solid #0f766e;
  border-radius: 8px;
  background: #ecfdf5;
  color: #0f766e;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.control-controls {
  background: #fef3c7;
  color: #92400e;
}

.control-needs_help {
  background: #ffedd5;
  color: #9a3412;
}

.control-eliminated {
  background: #e2e8f0;
  color: #475569;
}

.control-alive {
  background: #dcfce7;
  color: #166534;
}

.race-scenarios-details {
  display: block;
  margin-top: 12px;
}

.race-scenarios-details summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.45rem 0.85rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.race-scenarios-details summary::-webkit-details-marker {
  display: none;
}

.race-scenarios-details summary::before {
  content: "▶";
  margin-right: 7px;
  color: #0f766e;
  font-size: 0.78rem;
}

.race-scenarios-details[open] summary::before {
  content: "▼";
}

.race-detail-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: 12px;
  margin-top: 14px !important;
}

.scenario-feed h3,
.decisive-match-list h3 {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 200%;
  line-height: 1.25;
}

.scenario-card {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px !important;
  padding: 12px;
}

.scenario-card>span {
  font-size: 1.25rem;
}

.scenario-card ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: #475569;
  font-weight: 800;
}

.scenario-keys {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}

.scenario-keys h4 {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0;
}

.scenario-keys p {
  margin: 0;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 800;
}

.scenario-key-item {
  margin-top: 6px !important;
}

.scenario-key-item strong,
.scenario-key-item small {
  display: block;
}

.scenario-key-item strong {
  color: #0f172a;
  font-size: 0.78rem;
}

.scenario-key-item small {
  margin-top: 3px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.scenario-key-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.scenario-key-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.62rem;
  font-weight: 950;
  white-space: nowrap;
}

.decisive-match {
  margin-top: 8px !important;
  padding: 12px;
}

.decisive-match strong,
.decisive-match small {
  display: block;
}

.decisive-match strong {
  color: #0f172a;
}

.decisive-match small {
  margin-top: 4px;
  color: #64748b;
  font-weight: 800;
}

.decisive-picks {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px !important;
}

.decisive-picks span {
  display: inline-flex;
  min-height: 26px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 0.78rem;
  font-weight: 900;
}

/* SOCIAL / DAILY HIGHLIGHTS */
.social-zone,
.social-zone *,
.daily-highlights,
.daily-highlights * {
  text-align: left;
}

.social-zone h2,
.social-zone h3,
.social-zone p,
.social-zone div,
.social-zone article,
.social-zone section,
.daily-highlights h2,
.daily-highlights h3,
.daily-highlights p,
.daily-highlights div,
.daily-highlights article,
.daily-highlights section {
  display: block;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

.social-zone-header {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px !important;
}

.social-zone-header h2,
.daily-highlights h2 {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 15px;
  color: #0f172a;
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  text-shadow: none;
}

.social-zone-header p,
.daily-highlights p {
  margin-top: 4px;
  color: #64748b;
  font-weight: 700;
}

.social-live-note {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #ecfeff;
  color: #155e75;
  font-weight: 900;
  white-space: nowrap;
}

.social-zone-actions {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.achievement-codex-trigger {
  border: 0;
  cursor: pointer;
}

.social-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.5fr);
  gap: 12px;
  margin-bottom: 12px !important;
}

.mvp-card {
  min-height: 220px;
  padding: 18px;
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffbeb 0%, #fff 68%);
}

.social-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #fef3c7;
  font-size: 1.45rem;
}

.share-card-grid,
.player-card-grid,
.mini-ranking-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  margin: 12px 0 !important;
}

.share-card {
  min-height: 132px;
  padding: 14px;
  background: #f8fafc;
}

.share-card span {
  display: block;
  margin-bottom: 10px;
  font-size: 1.45rem;
}

.share-card strong,
.share-card small {
  display: block;
}

.share-card strong {
  color: #0f172a;
  line-height: 1.25;
}

.share-card small {
  margin-top: 8px;
  color: #64748b;
  font-weight: 800;
}

.achievement-feed {
  margin: 14px 0 !important;
}

.achievement-empty {
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.82);
  color: #64748b;
  font-weight: 800;
}

.achievement-card {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-top: 8px !important;
  padding: 11px 12px;
}

.achievement-card.is-new {
  animation: achievementPulse 1400ms ease-out 1;
}

.achievement-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #ecfdf5;
  font-size: 1.35rem;
}

.achievement-card strong,
.achievement-card small {
  display: block;
}

.achievement-card small {
  margin-top: 3px;
  color: #64748b;
  font-weight: 800;
}

.achievement-codex-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1140;
}

.achievement-codex-modal.is-open {
  display: grid;
  place-items: center;
  padding: 18px;
}

.achievement-codex-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(8px);
}

.achievement-codex-panel {
  box-sizing: border-box;
  position: relative;
  width: min(94vw, 960px);
  max-height: min(88vh, 780px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--matchday-border-strong);
  border-radius: 14px;
  background: var(--matchday-bg);
  color: var(--matchday-text);
  box-shadow: var(--matchday-shadow);
}

.achievement-codex-modal.is-open .achievement-codex-panel {
  animation: codexModalIn 180ms ease-out;
}

.achievement-codex-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--matchday-border);
  border-radius: 999px;
  background: var(--matchday-card-bg);
  color: var(--matchday-text);
  cursor: pointer;
  font-size: 1.35rem;
  font-weight: 900;
}

.achievement-codex-header h2 {
  margin: 4px 42px 10px 0;
  color: var(--matchday-text);
  font-size: 1.55rem;
  line-height: 1.1;
}

.achievement-codex-header span {
  color: var(--matchday-accent);
  font-weight: 900;
}

.achievement-codex-summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 12px !important;
}

.achievement-codex-summary span {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--matchday-border);
  border-radius: 8px;
  background: var(--matchday-card-bg);
  color: var(--matchday-text);
  font-size: 0.82rem;
  font-weight: 900;
}

.achievement-codex-tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  overflow-x: visible;
  padding-bottom: 9px;
  margin-bottom: 10px !important;
  border-bottom: 1px solid var(--matchday-border);
}

.achievement-codex-tabs button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--matchday-border);
  border-radius: 999px;
  background: var(--matchday-card-bg);
  color: var(--matchday-text);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.achievement-codex-tabs button.is-active {
  border-color: var(--matchday-border-strong);
  background: var(--matchday-accent-soft);
  color: var(--matchday-accent);
}

.achievement-codex-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 9px;
}

.achievement-codex-card {
  box-sizing: border-box;
  display: grid !important;
  grid-template-rows: auto auto auto 1fr;
  min-height: 150px;
  padding: 10px;
  border: 1px solid var(--matchday-border);
  border-radius: 10px;
  background: var(--matchday-card-bg);
  color: var(--matchday-text);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.achievement-codex-card[hidden],
.achievement-codex-card.is-hidden {
  display: none !important;
}

.achievement-codex-card:hover {
  transform: translateY(-2px);
  border-color: var(--matchday-border-strong);
  box-shadow: var(--matchday-shadow);
}

.achievement-codex-card.is-locked {
  filter: grayscale(0.6);
}

.achievement-codex-card-head {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px !important;
}

.achievement-codex-meta,
.achievement-codex-winners {
  display: flex !important;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.achievement-codex-icon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 32px;
  height: 32px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--matchday-card-bg-strong);
  font-size: 1.25rem;
  white-space: nowrap;
}

.achievement-codex-category,
.achievement-codex-rarity,
.achievement-codex-winners span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--matchday-card-bg-strong);
  font-size: 0.72rem;
  font-weight: 900;
}

.achievement-codex-category {
  color: var(--matchday-muted);
}

.achievement-codex-rarity {
  justify-self: end;
  white-space: nowrap;
}

.rarity-legendary .achievement-codex-rarity {
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  color: #eff6ff;
}

.rarity-very-rare .achievement-codex-rarity {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #faf5ff;
}

.rarity-rare .achievement-codex-rarity {
  background: linear-gradient(135deg, #fb923c, #ea580c);
  color: #fff7ed;
}

.rarity-common .achievement-codex-rarity {
  background: linear-gradient(135deg, #34d399, #059669);
  color: #ecfdf5;
}

.rarity-locked .achievement-codex-rarity {
  background: linear-gradient(135deg, #64748b, #334155);
  color: #f8fafc;
}

.achievement-codex-card h3,
.achievement-codex-card p,
.achievement-codex-card small {
  color: inherit;
}

.achievement-codex-card h3 {
  min-width: 0;
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.15;
}

.achievement-codex-card p,
.achievement-codex-card small {
  color: var(--matchday-muted);
  font-weight: 800;
}

.achievement-codex-card p {
  margin: 0 0 8px !important;
  font-size: 0.82rem;
  line-height: 1.3;
}

.achievement-codex-meta {
  margin-bottom: 7px !important;
  color: var(--matchday-text);
  font-size: 0.78rem;
}

.achievement-codex-locked-note {
  margin-top: 0 !important;
  padding-top: 7px;
  border-top: 1px solid var(--matchday-border);
}

.achievement-codex-locked-note span {
  display: block;
  margin-top: 4px;
  color: var(--matchday-muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.achievement-codex-winners {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
  align-self: end;
  margin-top: 6px !important;
}

.achievement-codex-winners span {
  max-width: 100%;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--matchday-border);
  background: var(--matchday-card-bg-strong);
  color: var(--matchday-text);
  font-size: 0.74rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
  box-shadow: var(--matchday-inset-highlight);
}

.achievement-codex-winners span.is-more,
.achievement-codex-winners span.achievement-codex-more {
  border-color: var(--matchday-border-strong);
  background: var(--matchday-accent-soft);
  color: var(--matchday-accent);
}

@keyframes codexModalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.player-card {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.player-card:hover,
.player-card:focus-visible {
  border-color: #0f766e;
  box-shadow: 0 12px 26px rgba(15, 118, 110, 0.16);
  transform: translateY(-2px);
  outline: none;
}

.player-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 1rem;
}

.player-card p {
  margin-top: 4px;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 800;
}

.badge-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.15;
}

.badge-chip.is-muted {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #64748b;
}

.mini-ranking {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  padding: 14px;
}

.mini-ranking h3 {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.mini-ranking ol {
  display: grid;
  grid-template-rows: repeat(3, minmax(44px, 1fr));
  margin: 0;
  padding-left: 22px;
  list-style: none;
  counter-reset: mini-ranking-position;
}

.mini-ranking li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  position: relative;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 0;
  border-top: 1px solid #f1f5f9;
  counter-increment: mini-ranking-position;
}

.mini-ranking li:first-child {
  border-top: 0;
}

.mini-ranking li::before {
  content: counter(mini-ranking-position) ".";
  position: absolute;
  right: calc(100% + 6px);
}

.mini-ranking li .participant-link {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 2.5em;
  padding: 0;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: left;
}

.mini-ranking li strong {
  float: none;
  align-self: center;
  color: #334155;
  font-size: 0.88rem;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .social-zone .mini-ranking-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .social-zone .mini-ranking {
    width: 100%;
  }
}

.player-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
}

.player-modal-panel {
  position: relative;
  width: min(94vw, 860px);
  max-height: min(90vh, 820px);
  margin: 5vh auto;
  overflow: auto;
  padding: 22px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.32);
}

.player-modal-open {
  overflow: hidden;
}

.player-modal-close {
  position: sticky;
  top: 0;
  float: right;
  width: 36px;
  height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
}

.profile-header {
  display: flex !important;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px !important;
}

.profile-header>div {
  min-width: 0;
}

.profile-view-polla {
  flex: 0 0 auto;
  min-height: 34px;
  margin-left: auto;
  padding: 7px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.profile-view-polla:hover,
.profile-view-polla:focus-visible {
  border-color: #0f766e;
  color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.profile-header h2 {
  margin: 0;
  padding: 0;
  background: transparent;
  color: #0f172a;
  overflow-wrap: anywhere;
  text-shadow: none;
}

.profile-header p {
  margin-top: 4px;
  color: #475569;
  font-weight: 800;
}

.profile-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px !important;
}

.profile-stat-grid article {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.profile-stat-grid strong,
.profile-stat-grid span {
  display: block;
}

.profile-stat-grid strong {
  color: #0f172a;
  font-size: 1.25rem;
}

.profile-stat-grid span {
  margin-top: 4px;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 900;
}

.profile-chart {
  min-height: 260px;
  margin: 14px 0 !important;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.profile-chart canvas {
  width: 100% !important;
  min-height: 220px;
}

.profile-section {
  margin-top: 14px !important;
}

@media (max-width: 900px) {
  .match-center-header {
    display: block !important;
  }

  .match-score .match-day-flag {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .surprise-chip {
    grid-template-columns: 1fr;
  }

  .evolution-header {
    display: block !important;
  }

  .evolution-controls {
    justify-content: flex-start;
    margin-top: 12px !important;
  }

  .evolution-snapshot-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .evolution-stat-row {
    grid-template-columns: 34px minmax(120px, 0.85fr) minmax(0, 1fr);
    min-height: 64px;
    row-gap: 2px;
  }

  .evolution-stat-row p {
    grid-column: 3;
    grid-row: 1 / 3;
  }

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

  .social-zone-header,
  .daily-highlights .social-zone-header,
  .social-hero-grid {
    display: block !important;
  }

  .social-zone-actions {
    margin-top: 10px;
    flex-wrap: wrap;
  }

  .social-live-note {
    margin-top: 10px;
  }

  .social-zone-actions .social-live-note {
    margin-top: 0;
  }

  .achievement-codex-modal.is-open {
    padding: 0;
  }

  .achievement-codex-panel {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .achievement-codex-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .achievement-codex-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .achievement-codex-grid {
    grid-template-columns: 1fr;
  }

  .mvp-card {
    margin-bottom: 12px;
  }

  .profile-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .race-header,
  .race-detail-grid {
    grid-template-columns: 1fr;
  }

  .race-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

@media (max-width: 560px) {
  .first-glance-pyramid {
    grid-template-columns: 1fr;
  }

  .first-glance-winner {
    grid-column: auto;
    width: 100%;
  }

  .first-glance-bar-label {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .first-glance-bar-label span,
  .first-glance-bar-label strong {
    width: 100%;
    max-width: 100%;
  }

  .first-glance-bar-label strong {
    white-space: normal;
  }

  .pick-bar-label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px;
  }

  .pick-bar-label span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .pick-bar-label strong {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 0;
    white-space: nowrap;
  }

  .unique-pick-chip {
    display: block !important;
  }

  .unique-pick-chip span {
    display: inline-block;
    margin-top: 4px;
  }

  .player-modal-panel {
    width: 100%;
    max-height: 100vh;
    min-height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  .profile-header {
    gap: 10px;
  }

  .profile-view-polla {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 0.8rem;
  }

  .race-summary-grid,
  .contender-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .race-summary-card:nth-child(2n) {
    border-right: 0;
  }

  .race-summary-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .race-summary-card p {
    min-width: 0;
    white-space: normal;
  }

  .contender-card,
  .eliminated-card {
    grid-template-columns: 40px minmax(0, 1fr) auto 44px;
    gap: 7px;
    padding: 7px 8px;
  }

  .alive-chip,
  .eliminated-chip {
    display: none;
  }

  .evolution-controls select,
  .evolution-toggle {
    width: 100%;
    max-width: none;
  }

  .evolution-snapshot-strip {
    grid-template-columns: 1fr;
  }

  .metric-tooltip {
    right: 8px;
    left: 8px;
    width: auto;
    max-width: none;
  }

  .evolution-stat-row {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 64px;
    padding: 8px 10px;
    row-gap: 2px;
  }

  .evolution-stat-row strong,
  .evolution-stat-row h3,
  .evolution-stat-row p {
    grid-column: 2;
    grid-row: auto;
  }

  .evolution-stat-row .stat-icon {
    grid-row: 1 / 4;
    align-self: start;
  }

  .chart-scroll {
    height: 300px;
    min-height: 300px;
    max-height: 300px;
    overflow-x: auto;
  }

  .chart-scroll canvas {
    height: 280px !important;
    max-height: 280px !important;
  }

  .evolution-legend {
    max-height: 88px;
  }

  .evolution-selection-controls {
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
  }

  .evolution-legend-item {
    flex: 1 1 145px;
  }

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

@media (max-width: 700px) {
  .dashboard-panel {
    padding: 0.75rem;
  }

  .dashboard-empty-wrap {
    margin-top: 1rem;
    margin-bottom: 7rem;
    padding: 0 0.5rem;
  }

  .dashboard-empty-meta {
    grid-template-columns: 1fr;
  }

  .dashboard-status {
    padding: 10px 12px;
  }

  .dashboard-status-main {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }

  .dashboard-status h2 {
    font-size: 1rem;
  }

  .dashboard-status-time {
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 0 0;
    border-left: 0;
    border-top: 1px solid #e2e8f0;
  }

  .dashboard-status-result {
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    border-left: 0;
    border-top: 0;
  }

  .dashboard-status-result small {
    white-space: nowrap;
  }

  .dashboard-status .dashboard-update-button {
    width: 100%;
  }

  .dashboard-update-button {
    min-height: 42px;
  }

  .dashboard-toast {
    right: 10px;
    bottom: 10px;
    max-width: calc(100vw - 20px);
  }

  .responsive-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-ranking-table,
  .dashboard-ranking-table tbody,
  .dashboard-ranking-table tr,
  .dashboard-ranking-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .dashboard-ranking-table {
    border: 0;
    background: transparent;
  }

  .dashboard-ranking-table tr:first-child {
    display: none;
  }

  .dashboard-ranking-table tr {
    margin: 0 0 0.75rem;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    text-align: left;
  }

  .dashboard-ranking-table td {
    display: grid;
    grid-template-columns: 44% 56%;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #e5e7eb;
    text-align: right;
  }

  .dashboard-ranking-table td:last-child {
    border-bottom: 0;
  }

  .dashboard-ranking-table td::before {
    content: attr(data-label);
    font-weight: bold;
    text-align: left;
  }
}

/* PWA / MOBILE NAV */
.mobile-shell {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: rgba(34, 197, 94, 0.22);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.mobile-shell .dashboard-panel,
.mobile-shell .dashboard-status,
.mobile-shell .match-day-mode,
.mobile-shell .compact-ranking,
.mobile-shell .share-zone,
.mobile-shell .race-section,
.mobile-shell .social-zone,
.mobile-shell .evolution-section,
.mobile-shell .match-center {
  max-width: min(1100px, 100%);
  overflow-x: hidden;
}

.dashboard-top-actions {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: 10px;
  z-index: 70;
  display: flex !important;
  gap: 8px;
  width: auto;
  margin: 0;
}

.view-toggle,
.share-card-action button,
.pwa-install-banner button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: #0f172a;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.view-toggle {
  padding: 8px 11px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
}

.section-title-row {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px !important;
  text-align: left;
}

.section-title-row h2,
.section-title-row p,
.section-title-row div {
  display: block;
  width: auto;
  margin: 0;
  text-align: left;
}

.section-title-row h2 {
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: #0f172a;
  font-size: clamp(1.55rem, 5vw, 2.25rem);
}

.section-title-row p {
  margin-top: 4px;
  color: #64748b;
  font-weight: 800;
}

.section-kicker,
.live-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.section-kicker {
  margin-bottom: 7px;
  background: #dcfce7;
  color: #166534;
}

.live-chip {
  background: #fef3c7;
  color: #92400e;
  white-space: nowrap;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 80;
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  width: calc(100vw - 24px);
  max-width: 520px;
  margin: 0 auto;
  padding: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.94);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(14px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.bottom-nav::-webkit-scrollbar {
  display: none;
}

.bottom-nav a {
  display: flex;
  min-width: 54px;
  min-height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 0.72rem;
  text-align: center;
  text-decoration: none;
}

.bottom-nav a:active,
.bottom-nav a:focus-visible {
  background: rgba(34, 197, 94, 0.18);
  color: #fff;
  outline: none;
}

.bottom-nav span,
.bottom-nav strong {
  display: block;
  line-height: 1.1;
}

.pwa-install-banner {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100vw - 24px);
  max-width: 560px;
  margin: 0 auto;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(187, 247, 208, 0.8);
  border-radius: 14px;
  background: rgba(240, 253, 244, 0.96);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.24);
  text-align: left;
}

.pwa-install-banner[hidden] {
  display: none;
}

.pwa-install-banner div,
.pwa-install-banner strong,
.pwa-install-banner span {
  display: block;
  width: auto;
  margin: 0;
  text-align: left;
}

.pwa-install-banner span {
  margin-top: 3px;
  color: #166534;
  font-size: 0.86rem;
  font-weight: 800;
}

.pwa-install-banner button {
  padding: 8px 11px;
  background: #16a34a;
}

.pwa-install-banner .pwa-dismiss {
  width: 34px;
  padding: 0;
  background: #e2e8f0;
  color: #334155;
}

.ranking-podium-section {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 42%, #f1f5f9 100%);
}

.ranking-podium-header {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: 14px;
  text-align: center;
}

.ranking-podium-header h2 {
  display: block;
  width: min(90%, 600px);
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  color: #0f172a;
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  text-align: center;
}

.ranking-podium {
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.14fr) minmax(0, 0.92fr);
  align-items: end;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto 16px;
}

.ranking-podium.is-shared-podium {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: stretch;
}

.ranking-podium .podium-card {
  order: initial;
}

.podium-card .participant-link {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  color: inherit;
}

.ranking-list-modern {
  display: grid !important;
  justify-items: start;
  gap: 10px;
  max-width: 760px;
  max-height: 500px;
  margin: 0 auto;
  overflow-y: auto;
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.ranking-list-modern::-webkit-scrollbar {
  width: 8px;
}

.ranking-list-modern::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #e2e8f0;
}

.ranking-list-modern::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #0f766e;
}

.final-ranking-subtitle { margin: 6px 0 0; color: #64748b; font-size: 0.92rem; }

.dashboard-enhanced .final-ranking-compact:not(.is-final-ranking-expanded) .final-ranking-collapsed-row { display: none !important; }

.final-ranking-compact:not(.is-final-ranking-expanded) .ranking-list-modern {
  max-height: none; overflow-y: visible; padding-right: 0;
}

.final-ranking-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: min(100%, 760px);
  min-height: 44px;
  margin: 12px auto 0;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-align: left;
}

.final-ranking-toggle-icon { color: #0f766e; font-size: 0.82rem; line-height: 1; }

.final-ranking-toggle:hover,
.final-ranking-toggle:focus-visible {
  border-color: #cbd5e1; background: #f8fafc;
}

.final-ranking-toggle:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.22); outline-offset: 2px; }

.ranking-list-row {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  align-items: center;
  justify-items: stretch;
  gap: 14px;
  width: var(--ranking-row-width, 100%);
  min-width: min(100%, 50%);
  max-width: 100%;
  padding: 11px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
  text-align: left;
}

.ranking-position {
  justify-self: start;
  width: 38px;
  height: 38px;
  background: #0f766e;
  color: white;
}

.ranking-list-row>strong,
.ranking-chevron {
  justify-self: end;
}

.ranking-list-player {
  display: grid;
  gap: 8px;
  justify-self: stretch;
  justify-items: start;
  width: 100%;
  margin: 0;
  min-width: 0;
  text-align: left;
}

.ranking-list-player .participant-link {
  justify-self: start;
  width: 100%;
  margin: 0;
  text-align: left;
}

.ranking-progress {
  display: block;
  width: 100%;
  margin: 0;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(15, 23, 42, 0.18) calc(50% - 1px), rgba(15, 23, 42, 0.18) calc(50% + 1px), transparent calc(50% + 1px)),
    #e2e8f0;
}

.ranking-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14b8a6, #f59e0b);
}

.ranking-chevron {
  color: #94a3b8;
  font-size: 1.5rem;
  line-height: 1;
}

.match-day-score {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 12px 0 !important;
  padding: 16px;
  border-radius: 10px;
  background: #0f172a;
  color: white;
}

.match-day-score span,
.match-day-score strong {
  display: block;
  width: auto;
  margin: 0;
  text-align: center;
}

.match-day-score span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.match-day-score span b {
  margin: 0;
}

.match-day-team-away {
  flex-direction: row;
}

.match-day-flag {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin: auto;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 6px 16px rgba(0, 0, 0, 0.2);
}

.match-day-score strong {
  min-width: 86px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #22c55e;
  color: #052e16;
  font-size: 1.7rem;
  line-height: 1;
}

.match-day-grid {
  display: grid !important;
  grid-template-columns: minmax(170px, 0.8fr) minmax(260px, 1.4fr) minmax(210px, 1fr);
  gap: 12px;
}

.match-day-grid-compact {
  grid-template-columns: minmax(280px, 1.35fr) minmax(220px, 0.9fr);
}

.match-day-grid article,
.match-day-columns section {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(248, 250, 252, 0.96), rgba(226, 232, 240, 0.7));
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.match-day-grid article:hover,
.match-day-columns section:hover {
  transform: translateY(-1px);
  border-color: rgba(20, 184, 166, 0.36);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.12);
}

.match-day-grid article span,
.match-day-grid article strong,
.match-day-grid article small {
  display: block;
  width: auto;
  margin: 0;
}

.match-day-grid article span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 900;
}

.match-day-grid article strong {
  margin-top: 5px;
  color: #0f172a;
  font-size: 1.35rem;
  line-height: 1.1;
}

.match-day-grid article small {
  margin-top: 4px;
  color: #475569;
  font-weight: 800;
}

.pick-pie-wrap {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 12px;
}

.pick-pie {
  width: 128px;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
  animation: pickPieIn 520ms ease both;
}

.pick-pie-list {
  display: grid;
  gap: 10px;
}

.pick-pie-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: #0f172a;
  font-weight: 900;
}

.pick-pie-row i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #14b8a6;
}

.pick-pie-row[data-pick-outcome="draw"] i {
  background: #38bdf8;
}

.pick-pie-row[data-pick-outcome="away_win"] i {
  background: #f59e0b;
}

.pick-pie-row span,
.pick-pie-row strong {
  width: auto;
  margin: 0;
}

.pick-pie-row .match-day-flag,
.top-score-line .match-day-flag {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.pick-pie-row span {
  overflow-wrap: anywhere;
  color: #0f172a;
}

.pick-pie-row strong {
  justify-self: end;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: #0f766e;
  font-size: 0.82rem;
  white-space: nowrap;
}

.top-score-card strong {
  font-size: 2.15rem;
  letter-spacing: 0;
}

.top-score-card small {
  font-size: 0.9rem;
}

.top-score-line {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px !important;
}

.top-score-line span {
  width: auto;
  margin: 0;
  color: #0f172a;
  font-size: inherit;
  line-height: 1;
}

.match-day-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px !important;
}

.match-day-columns h3 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 1rem;
  line-height: 1.2;
  text-align: left;
}

.match-day-columns ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.match-day-columns li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid #e2e8f0;
  font-weight: 900;
}

.match-day-columns li:first-child {
  border-top: 0;
}

.match-day-columns li strong {
  color: #047857;
  white-space: nowrap;
}

.match-day-bonus {
  margin-top: 10px !important;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-weight: 900;
}

.share-card-action {
  min-height: 168px;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(15, 118, 110, 0.9)),
    url("../Imgs/WC26_Logo.avif") no-repeat right 12px bottom 10px / 54px auto;
  color: #fff;
}

.share-card-action button {
  margin-bottom: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.16);
}

.share-card-action strong,
.share-card-action small {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.22);
}

.share-card-action.is-highlighted {
  animation: sharePulse 1200ms ease-out 1;
}

.dark-mode {
  color: #e5e7eb;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode .dashboard-panel,
.dark-mode .dashboard-status,
.dark-mode .dashboard-empty-card,
.dark-mode .last-update-card,
.dark-mode .match-card,
.dark-mode .match-center-details,
.dark-mode .match-analysis-details,
.dark-mode .match-analysis-section,
.dark-mode .match-featured-fact,
.dark-mode .match-highlight-card,
.dark-mode .match-summary-card,
.dark-mode .match-insight-card,
.dark-mode .chart-card,
.dark-mode .stat-card,
.dark-mode .evolution-history-details,
.dark-mode .today-champion-card,
.dark-mode .race-summary-card,
.dark-mode .contender-card,
.dark-mode .eliminated-card,
.dark-mode .scenario-card,
.dark-mode .decisive-match,
.dark-mode .mvp-card,
.dark-mode .streak-card,
.dark-mode .achievement-card,
.dark-mode .player-card,
.dark-mode .mini-ranking,
.dark-mode .first-glance-card,
.dark-mode .first-glance-bar-row,
.dark-mode .share-card:not(.share-card-action),
.dark-mode .ranking-podium-section,
.dark-mode .ranking-list-row,
.dark-mode .match-day-grid article,
.dark-mode .match-day-columns section {
  border-color: rgba(148, 163, 184, 0.28);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.9));
  color: #e5e7eb;
}

.dark-mode .scenario-keys {
  border-top-color: rgba(148, 163, 184, 0.28);
}

.dark-mode .final-ranking-subtitle { color: #cbd5e1; }

.dark-mode .final-ranking-toggle {
  border-color: rgba(148, 163, 184, 0.28); background: rgba(15, 23, 42, 0.88);
  color: #f8fafc;
}

.dark-mode .final-ranking-toggle-icon { color: #5eead4; }

.dark-mode .scenario-keys h4,
.dark-mode .scenario-key-item strong {
  color: #e5e7eb;
}

.dark-mode .scenario-keys p,
.dark-mode .scenario-key-item small {
  color: #cbd5e1;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode strong,
.dark-mode .section-title-row h2,
.dark-mode .match-center h2,
.dark-mode .match-center h3,
.dark-mode .match-center-summary,
.dark-mode .evolution-section h2,
.dark-mode .evolution-section h3,
.dark-mode .race-header h2,
.dark-mode .social-zone-header h2,
.dark-mode .first-glance-card h3,
.dark-mode .first-glance-bar-label span,
.dark-mode .daily-highlights h2,
.dark-mode .ranking-podium-header h2,
.dark-mode .ranking-list-row>strong,
.dark-mode .match-day-grid article strong {
  color: #f8fafc;
}

.dark-mode .podium-card,
.dark-mode .podium-card .participant-link,
.dark-mode .podium-card strong {
  color: #ffffff;
}

.dark-mode p,
.dark-mode small,
.dark-mode .dashboard-status-time,
.dark-mode .refresh-state,
.dark-mode .dashboard-empty-description,
.dark-mode .section-title-row p,
.dark-mode .match-center-header p,
.dark-mode .match-center-summary small,
.dark-mode .evolution-header p,
.dark-mode .evolution-quick-stat b,
.dark-mode .race-header p,
.dark-mode .social-zone-header p,
.dark-mode .first-glance-card p,
.dark-mode .first-glance-bar-label strong,
.dark-mode .first-glance-bar-label small,
.dark-mode .daily-highlights p,
.dark-mode .match-day-grid article small {
  color: #cbd5e1;
}

.dark-mode .pick-pie-row,
.dark-mode .pick-pie-row span {
  color: #f8fafc;
}

.dark-mode .evolution-snapshot-strip {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.72);
}

.dark-mode .evolution-quick-stat,
.dark-mode .evolution-legend-item,
.dark-mode .evolution-clear-selection {
  background: rgba(15, 23, 42, 0.88);
  color: #f8fafc;
}

.dark-mode .evolution-selection-controls {
  color: #cbd5e1;
}

.dark-mode .evolution-quick-stat strong {
  color: #f8fafc;
}

.dark-mode .first-glance-bar-track {
  background: rgba(148, 163, 184, 0.22);
}

.dark-mode .first-glance-modal-panel,
.dark-mode .first-glance-modal-close {
  border-color: rgba(148, 163, 184, 0.28);
  background: #0f172a;
  color: #f8fafc;
}

.dark-mode .first-glance-modal-panel h3 {
  color: #f8fafc;
}

.dark-mode .evolution-history-details summary {
  color: #f8fafc;
}

.dark-mode .evolution-history-details[open] summary {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(30, 41, 59, 0.88);
}

.dark-mode .evolution-stat-row {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.72);
}

.dark-mode .evolution-stat-row strong,
.dark-mode .evolution-stat-row h3 {
  color: #f8fafc;
}

.dark-mode .evolution-stat-row p {
  color: #cbd5e1;
}

.dark-mode .pick-pie-row strong {
  background: rgba(248, 250, 252, 0.1);
  color: #5eead4;
}

.dark-mode .race-expand-button {
  border-color: rgba(45, 212, 191, 0.55);
  background: rgba(15, 118, 110, 0.16);
  color: #5eead4;
}

.dark-mode .race-summary-grid {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.72);
}

.dark-mode .race-summary-card {
  border-right-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.72);
}

.dark-mode .race-list-header h3,
.dark-mode .race-rank,
.dark-mode .race-score {
  color: #f8fafc;
}

.dark-mode .race-gap {
  color: #5eead4;
}

@media (min-width: 761px) {
  .dark-mode .contender-grid {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.72);
  }

  .dark-mode .race-standings-head {
    border-bottom-color: rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.92);
    color: #94a3b8;
  }

  .dark-mode .contender-card,
  .dark-mode .eliminated-card {
    border-bottom-color: rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.72);
  }

  .dark-mode .contender-card:hover,
  .dark-mode .eliminated-card:hover {
    background: rgba(30, 41, 59, 0.82);
  }

  .dark-mode .race-gap {
    color: #cbd5e1;
  }
}

.dark-mode .last-update-card span,
.dark-mode .dashboard-status-result span,
.dark-mode .dashboard-status-result small,
.dark-mode .last-update-list li,
.dark-mode .match-summary-card li span {
  color: #f8fafc;
}

.dark-mode .dashboard-status-result {
  border-color: rgba(148, 163, 184, 0.28);
}

.dark-mode .last-update-list strong,
.dark-mode .points-gained {
  color: #86efac;
}

.dark-mode .pick-pie {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.dark-mode table.results tr:nth-child(even),
.dark-mode .dashboard-ranking-table tr,
.dark-mode .scoreline-chip,
.dark-mode .unique-pick-chip,
.dark-mode .badge-chip,
.dark-mode .leader-path-ranking-toggle,
.dark-mode .evolution-empty,
.dark-mode .match-center-empty {
  background: rgba(30, 41, 59, 0.96);
  color: #e5e7eb;
}

.dark-mode .dashboard-empty-kicker {
  color: #86efac;
}

.dark-mode .dashboard-empty-icon {
  border-color: rgba(134, 239, 172, 0.28);
  background: linear-gradient(135deg, rgba(20, 83, 45, 0.86), rgba(30, 64, 175, 0.72));
}

.dark-mode .dashboard-empty-meta div {
  border-color: rgba(148, 163, 184, 0.26);
  background: rgba(30, 41, 59, 0.88);
}

.dark-mode .dashboard-empty-meta dt {
  color: #94a3b8;
}

.dark-mode .dashboard-empty-meta dd {
  color: #f8fafc;
}

.dark-mode .participant-link {
  color: #5eead4;
}

.dark-mode .matchday-center,
[data-theme="dark"] .matchday-center,
[data-theme="light"] .matchday-center {
  border: 1px solid var(--matchday-border-strong);
  background: var(--matchday-bg);
  color: var(--matchday-text);
  box-shadow: var(--matchday-shadow);
}

@media (min-width: 901px) {
  .bottom-nav {
    top: auto;
    bottom: 14px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100vw - 24px);
    max-width: 420px;
    opacity: 0.92;
  }

  .mobile-shell:hover .bottom-nav,
  .bottom-nav:focus-within {
    display: grid;
  }
}

@media (max-width: 900px) {
  body.mobile-shell {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  .bottom-nav {
    display: grid;
  }

  .dashboard-top-actions {
    top: auto;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  .ranking-podium {
    max-width: 100%;
  }

  .match-day-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .share-zone .share-card-grid {
    grid-template-columns: 1fr;
  }

  .chart-scroll {
    min-height: 300px;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-title-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-title-bar h1 {
    width: 100%;
    max-width: 100%;
  }

  .dashboard-title-action {
    width: 100%;
  }
}

@media (max-width: 560px) {

  .section-title-row,
  .ranking-podium-header,
  .pwa-install-banner {
    align-items: stretch;
  }

  .dashboard-title-bar {
    margin: 1rem auto;
    padding: 0 0.5rem;
  }

  .ranking-podium-header h2 {
    width: calc(90vw - 38px);
    min-width: calc(90vw - 38px);
    max-width: calc(90vw - 38px);
  }

  .first-glance-card-header>div {
    flex: 1 1 auto;
  }

  .section-title-row,
  .ranking-podium-header {
    display: block !important;
  }

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

  .pick-pie-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pick-pie-list {
    width: 100%;
  }

  .ranking-podium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .ranking-podium.is-shared-podium {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  }

  .ranking-podium.has-three-podium-cards {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 7px;
  }

  .ranking-list-row {
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    gap: 10px;
    padding: 10px;
  }

  .match-day-score {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    padding: 12px 10px;
  }

  .match-day-score .match-day-team {
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    line-height: 1.1;
  }

  .match-day-score .match-day-team b {
    order: 2;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .match-day-score .match-day-team .match-day-flag {
    order: 1;
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .match-day-score strong {
    min-width: 72px;
    padding: 8px 10px;
    font-size: 1.55rem;
  }

  .pwa-install-banner {
    flex-wrap: wrap;
  }

  .pwa-install-banner div {
    flex: 1 1 100%;
  }

  .pwa-install-banner button:not(.pwa-dismiss) {
    flex: 1 1 auto;
  }
}

.simulator-access-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 86px;
  margin-top: 8px;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid rgba(34, 197, 94, 0.28);
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.94), rgba(219, 234, 254, 0.9));
}

.simulator-access-panel h2,
.simulator-access-panel p {
  margin: 0.15rem 0;
  text-align: left;
}

.simulator-access-panel h2 {
  font-size: 1.05rem;
  line-height: 1.2;
}

.simulator-access-panel p {
  font-size: 0.86rem;
  line-height: 1.25;
}

.simulator-access-panel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.42rem 0.75rem;
  text-decoration: none;
  white-space: nowrap;
}

.dark-mode .simulator-access-panel {
  background: linear-gradient(135deg, rgba(20, 83, 45, 0.78), rgba(30, 41, 59, 0.84));
}

@media (max-width: 760px) {
  .simulator-access-panel {
    display: grid;
    min-height: 0;
    padding: 10px;
  }

  .simulator-access-panel a {
    width: fit-content;
  }
}

@media (max-width: 560px) {

  table.results.dashboard-ranking-table,
  table.results.dashboard-ranking-table tbody,
  table.results.dashboard-ranking-table tr,
  table.results.dashboard-ranking-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  table.results.dashboard-ranking-table {
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    min-width: 0;
    margin: 0;
    text-align: left;
  }

  table.results.dashboard-ranking-table thead,
  table.results.dashboard-ranking-table tr:first-child {
    display: none;
  }

  table.results.dashboard-ranking-table tr {
    position: relative;
    margin: 0 0 12px;
    padding: 54px 14px 12px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
    text-align: left;
  }

  table.results.dashboard-ranking-table tr:nth-child(even) {
    background: #ffffff;
  }

  table.results.leader-path-ranking:not(.is-expanded) tr.leader-path-ranking-item:nth-of-type(n+7) {
    display: none;
  }

  .leader-path-ranking-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin-top: 2px;
    padding: 10px 14px;
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98));
    color: #1d4ed8;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
  }

  .leader-path-ranking-toggle.is-expanded {
    border-color: rgba(15, 23, 42, 0.16);
    background: #ffffff;
    color: #0f172a;
  }

  table.results.dashboard-ranking-table td {
    display: grid;
    grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 34px;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    color: #0f172a;
    font-size: 0.94rem;
    line-height: 1.25;
    text-align: right;
    word-break: break-word;
  }

  table.results.dashboard-ranking-table td b {
    justify-self: end;
    text-align: right;
  }

  table.results.dashboard-ranking-table td:first-child,
  table.results.dashboard-ranking-table td:nth-child(2),
  table.results.dashboard-ranking-table td:nth-child(3) {
    position: absolute;
    top: 14px;
    display: block;
    width: auto;
    min-height: 0;
    padding: 0;
    border-bottom: 0;
  }

  table.results.dashboard-ranking-table td:first-child {
    left: 14px;
    min-width: 36px;
    padding: 7px 8px;
    border-radius: 999px;
    background: #0f172a;
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
  }

  table.results.dashboard-ranking-table td:nth-child(2) {
    right: 76px;
    left: 60px;
    overflow: hidden;
    color: #0f766e;
    font-size: 1rem;
    font-weight: 900;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  table.results.dashboard-ranking-table td:nth-child(3) {
    right: 14px;
    min-width: 50px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #eef2ff;
    color: #1e3a8a;
    font-weight: 900;
    line-height: 1;
    text-align: center;
  }

  table.results.dashboard-ranking-table td:first-child::before,
  table.results.dashboard-ranking-table td:nth-child(2)::before,
  table.results.dashboard-ranking-table td:nth-child(3)::before {
    content: none;
  }

  table.results.dashboard-ranking-table td:nth-child(4) {
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    padding-top: 12px;
  }

  table.results.dashboard-ranking-table td.movement-up {
    color: #047857;
  }

  table.results.dashboard-ranking-table td.movement-down {
    color: #b91c1c;
  }

  table.results.dashboard-ranking-table td.movement-same {
    color: #374151;
  }

  table.results.dashboard-ranking-table td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  table.results.dashboard-ranking-table td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
  }

  table.results.dashboard-ranking-table td.leader-path-reason {
    align-items: start;
  }

  table.results.dashboard-ranking-table td.leader-path-reason::before {
    padding-top: 2px;
  }

  table.results.dashboard-ranking-table td.leader-path-reason .leader-path-reason-list {
    min-width: 0;
    text-align: right;
  }

  table.results.dashboard-ranking-table td.leader-path-reason .leader-path-reason-item {
    text-align: right;
  }

  table.results.dashboard-ranking-table .participant-link {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.dark-mode .race-current-table {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.72);
}

.dark-mode .race-current-table th {
  border-color: rgba(15, 23, 42, 0.95);
  background: rgba(15, 23, 42, 0.95);
  color: #f8fafc;
}

.dark-mode .race-current-table td {
  border-color: rgba(148, 163, 184, 0.22);
}

.dark-mode .race-current-table tbody tr:nth-child(even),
.dark-mode .race-current-table .contender-card,
.dark-mode .race-current-table .eliminated-card {
  background: rgba(15, 23, 42, 0.72);
}

.dark-mode .race-current-table tbody tr:nth-child(odd) {
  background: rgba(30, 41, 59, 0.72);
}

.dark-mode .race-current-table .contender-card:hover,
.dark-mode .race-current-table .eliminated-card:hover {
  background: rgba(30, 41, 59, 0.92);
}

.dark-mode .race-current-table .contender-title .participant-link,
.dark-mode .race-current-table .race-score,
.dark-mode .race-current-table .race-gap {
  color: #f8fafc;
}

.dark-mode .race-mobile-toggle {
  border-color: rgba(45, 212, 191, 0.28);
  background: linear-gradient(135deg, #0f172a, #0f766e);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}

.dark-mode .race-mobile-toggle:hover,
.dark-mode .race-mobile-toggle:focus-visible {
  background: linear-gradient(135deg, #1e293b, #0d9488);
}

.dashboard-title-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: min(100%, 1100px);
  margin: 1rem auto;
  padding: 0 0.5rem;
}

.dashboard-title-bar h1 {
  display: inline-block;
  color: #000;
  font-size: clamp(1.8rem, 8vw, 3.2rem);
  max-width: 90%;
  text-align: center;
  padding: 0.75rem 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  margin: 0;
  word-wrap: break-word;
}

.dashboard-title-bar h1 span {
  display: block;
}

.dark-mode .dashboard-title-bar h1 {
  color: #f8fafc;
  background-color: rgba(15, 23, 42, 0.92);
}

.dashboard-title-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  max-width: max-content;
  min-width: 0;
  margin: 0;
  padding: 0.6rem;
  border-radius: 15px;
  background: #003469;
  color: #ffffff;
  white-space: nowrap;
}

.dashboard-title-action:hover,
.dashboard-title-action:focus {
  background: #003469;
  color: #ffffff;
  filter: none;
  transform: none;
}

.dashboard-status-main .dashboard-update-button {
  display: none;
}

@media (max-width: 560px) {
  .dashboard-title-bar {
    margin: 1rem auto;
    padding: 0 0.5rem;
  }

  .dashboard-title-bar h1 {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0.65rem 0.75rem;
    font-size: 1.55rem;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  .race-table-wrap {
    overflow: visible;
  }

  table.results.dashboard-ranking-table.race-current-table,
  table.results.dashboard-ranking-table.race-current-table tbody,
  table.results.dashboard-ranking-table.race-current-table tr,
  table.results.dashboard-ranking-table.race-current-table td {
    width: auto;
    min-width: 0;
  }

  table.results.dashboard-ranking-table.race-current-table {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
  }

  table.results.dashboard-ranking-table.race-current-table thead {
    display: none;
  }

  table.results.dashboard-ranking-table.race-current-table tbody {
    display: grid;
    gap: 8px;
  }

  table.results.dashboard-ranking-table.race-current-table tr {
    position: relative;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-areas:
      "rank name points"
      "rank status gap";
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.07);
  }

  table.results.dashboard-ranking-table.race-current-table tr[data-race-card][hidden],
  table.results.dashboard-ranking-table.race-current-table tr[data-race-card].race-is-hidden {
    display: none !important;
  }

  table.results.dashboard-ranking-table.race-current-table td {
    position: static !important;
    top: auto;
    right: auto;
    left: auto;
    display: block !important;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: 0.82rem;
    line-height: 1.15;
    text-align: left;
  }

  table.results.dashboard-ranking-table.race-current-table td::before {
    content: none;
  }

  table.results.dashboard-ranking-table.race-current-table td:first-child {
    grid-area: rank;
    align-self: stretch;
  }

  table.results.dashboard-ranking-table.race-current-table td:nth-child(2) {
    grid-area: name;
    justify-self: start;
    overflow: hidden;
    text-align: left;
  }

  table.results.dashboard-ranking-table.race-current-table td:nth-child(3) {
    grid-area: status;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    justify-self: start;
    overflow: hidden;
    text-align: left;
  }

  table.results.dashboard-ranking-table.race-current-table td:nth-child(4) {
    grid-area: points;
    justify-self: end;
    padding: 0;
    border-top: 0;
    text-align: right;
  }

  table.results.dashboard-ranking-table.race-current-table td:nth-child(5) {
    grid-area: gap;
    justify-self: end;
    text-align: right;
  }

  table.results.dashboard-ranking-table.race-current-table .race-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-height: 34px;
    border-radius: 999px;
    background: #0f172a;
    color: #ffffff;
    font-size: 0.78rem;
    line-height: 1;
  }

  table.results.dashboard-ranking-table.race-current-table .participant-link {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 950;
    text-align: left;
  }

  table.results.dashboard-ranking-table.race-current-table .alive-chip,
  table.results.dashboard-ranking-table.race-current-table .eliminated-chip {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    min-height: 17px;
    padding: 1px 6px;
    overflow: hidden;
    font-size: 0.58rem;
    text-align: left;
    text-overflow: ellipsis;
  }

  table.results.dashboard-ranking-table.race-current-table .race-score,
  table.results.dashboard-ranking-table.race-current-table .race-gap {
    font-size: 0.82rem;
    font-weight: 950;
  }

  .dark-mode table.results.dashboard-ranking-table.race-current-table tr {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.88);
  }

  .dark-mode table.results.dashboard-ranking-table.race-current-table td,
  .dark-mode table.results.dashboard-ranking-table.race-current-table .participant-link,
  .dark-mode table.results.dashboard-ranking-table.race-current-table .race-score,
  .dark-mode table.results.dashboard-ranking-table.race-current-table .race-gap {
    color: #f8fafc;
  }

  .dark-mode table.results.dashboard-ranking-table.race-current-table .race-rank {
    background: #f8fafc;
    color: #0f172a;
  }

  table.results.dashboard-ranking-table.race-current-table tr.race-mobile-collapsed {
    display: none !important;
  }

  .race-mobile-toggle:not([hidden]) {
    display: inline-flex;
  }
}

/* Dark mode contrast fixes */
.dark-mode .match-card {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.88);
  color: #f8fafc;
}

.dark-mode .match-ranking-block {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.88);
  color: #f8fafc;
}

.dark-mode .match-ranking-block h3 {
  color: #f8fafc;
}

.dark-mode .match-score {
  color: #f8fafc;
}

.dark-mode .match-score span {
  color: #f8fafc;
}

.dark-mode .match-score strong {
  border: 1px solid rgba(94, 234, 212, 0.36);
  background: rgba(8, 47, 73, 0.78);
  color: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(248, 250, 252, 0.06);
}

.dark-mode .match-selector-wrap {
  color: #f8fafc;
}

.dark-mode .match-selector-label {
  color: #cbd5e1;
}

.dark-mode .match-center .match-selector {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
}

.dark-mode .match-center .match-selector option {
  background: #0f172a;
  color: #f8fafc;
}

.dark-mode .phase-ranking-table {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.88);
  color: #f8fafc;
}

.dark-mode .phase-ranking-table th {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(30, 41, 59, 0.96);
  color: #f8fafc;
}

.dark-mode .phase-ranking-table td {
  border-color: rgba(148, 163, 184, 0.22);
  background: transparent;
  color: #f8fafc;
}

.dark-mode .phase-ranking-table tr {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.88);
  color: #f8fafc;
}

.dark-mode .phase-ranking-table tr:nth-child(even) {
  background: rgba(30, 41, 59, 0.88);
  color: #f8fafc;
}

.dark-mode .phase-tabs button {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.88);
  color: #cbd5e1;
}

.dark-mode .phase-tabs button:hover,
.dark-mode .phase-tabs button.is-active {
  border-color: rgba(94, 234, 212, 0.62);
  background: rgba(20, 184, 166, 0.18);
  color: #5eead4;
}

.dark-mode .scenario-card {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.88);
  color: #f8fafc;
}

.dark-mode .scenario-card ul {
  color: #cbd5e1;
}

.dark-mode .scenario-card li {
  color: #cbd5e1;
}

.dark-mode .scenario-card strong {
  color: #f8fafc;
}

.dark-mode .decisive-match {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.88);
  color: #f8fafc;
}

.dark-mode .decisive-match strong {
  color: #f8fafc;
}

.dark-mode .decisive-match small {
  color: #cbd5e1;
}

.dark-mode .decisive-picks span {
  border: 1px solid rgba(94, 234, 212, 0.3);
  background: rgba(20, 184, 166, 0.16);
  color: #5eead4;
}

.dark-mode .race-scenarios-details summary {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.88);
  color: #f8fafc;
}

.dark-mode .race-scenarios-details summary::before {
  color: #5eead4;
}

.dark-mode .match-analysis-section {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.88);
  color: #f8fafc;
}

.dark-mode .match-analysis-section:not([open]) {
  background: rgba(15, 23, 42, 0.88);
}

.dark-mode .match-analysis-section summary {
  color: #f8fafc;
}

.dark-mode .match-analysis-section summary span {
  color: #f8fafc;
}

.dark-mode .match-analysis-toggle-icon {
  color: #5eead4;
}

.dark-mode .match-analysis-section summary .match-analysis-toggle-icon {
  color: #5eead4;
}

.dark-mode .match-analysis-group h3 {
  color: #f8fafc;
}

.dark-mode .mini-ranking li {
  border-top-color: rgba(148, 163, 184, 0.28);
}

.dark-mode .mini-ranking li strong {
  color: #cbd5e1;
}

.dark-mode .player-modal-panel {
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.96);
  color: #f8fafc;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.48);
}

.dark-mode .player-modal-close {
  border-color: rgba(148, 163, 184, 0.38);
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
}

.dark-mode .profile-view-polla {
  border-color: rgba(148, 163, 184, 0.38);
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
}

.dark-mode .profile-view-polla:hover,
.dark-mode .profile-view-polla:focus-visible {
  border-color: #5eead4;
  color: #5eead4;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.14);
}

.dark-mode .profile-header h2 {
  color: #f8fafc;
}

.dark-mode .profile-header p {
  color: #cbd5e1;
}

.dark-mode .profile-stat-grid article {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(30, 41, 59, 0.86);
}

.dark-mode .profile-stat-grid strong {
  color: #f8fafc;
}

.dark-mode .profile-stat-grid span {
  color: #cbd5e1;
}

.dark-mode .profile-section h3 {
  color: #f8fafc;
}

.dark-mode .profile-chart {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(248, 250, 252, 0.96);
}

.dark-mode .recent-hit-list li {
  border-top-color: rgba(148, 163, 184, 0.28);
}

.dark-mode .recent-hit-list strong,
.dark-mode .recent-hit-list span {
  color: #f8fafc;
}

.dark-mode .recent-hit-list small {
  color: #cbd5e1;
}

.dark-mode .recent-hit-list small.recent-hit-detail-line {
  border-top-color: rgba(148, 163, 184, 0.28);
}

/* ==========================================================
   Comparison Participants
   ========================================================== */
.participant-link[data-player-profile="Polla Random"],
.participant-link[data-player-profile="Polla Promedio"] {
  color: #a21caf !important;
  font-weight: 950;
}

.comparison-polla-tag {
  border-color: rgba(192, 38, 211, .32) !important;
  background: rgba(192, 38, 211, .12) !important;
  color: #a21caf !important;
  font-weight: 950;
}

.dashboard-panel:not(#matchCenter):has(.participant-link[data-player-profile="Polla Random"], .participant-link[data-player-profile="Polla Promedio"]) {
  border-color: rgba(192, 38, 211, .28);
}

.ranking-podium-section :is(.podium-card, .ranking-list-row):has(.participant-link[data-player-profile="Polla Random"], .participant-link[data-player-profile="Polla Promedio"]),
table.results:not(.leader-path-ranking) tr:has(.participant-link[data-player-profile="Polla Random"], .participant-link[data-player-profile="Polla Promedio"]),
.contender-card:not(.leader-path-ranking-item):has(.participant-link[data-player-profile="Polla Random"], .participant-link[data-player-profile="Polla Promedio"]),
.eliminated-card:has(.participant-link[data-player-profile="Polla Random"], .participant-link[data-player-profile="Polla Promedio"]) {
  border-color: rgba(192, 38, 211, .32) !important;
  background: rgba(192, 38, 211, .08) !important;
}

.ranking-podium-section :is(.podium-card, .ranking-list-row) .participant-link[data-player-profile="Polla Random"],
.ranking-podium-section :is(.podium-card, .ranking-list-row) .participant-link[data-player-profile="Polla Promedio"],
.contender-card .participant-link[data-player-profile="Polla Random"],
.contender-card .participant-link[data-player-profile="Polla Promedio"],
.eliminated-card .participant-link[data-player-profile="Polla Random"],
.eliminated-card .participant-link[data-player-profile="Polla Promedio"] {
  border-color: transparent !important;
  background: transparent !important;
}

.dashboard-panel::after {
  content: "Polla Random y Polla Promedio se agregan solo con fines ilustrativos y no son participantes reales.";
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid #c026d3;
  border-radius: 6px;
  background: rgba(192, 38, 211, .08);
  color: #701a75;
  font-size: .86rem;
  font-weight: 800;
  text-align: left;
}

/* ==========================================================
   Dark Mode
   ========================================================== */
.dark-mode .participant-link[data-player-profile="Polla Random"],
.dark-mode .participant-link[data-player-profile="Polla Promedio"] {
  color: #f5d0fe !important;
}

.dark-mode .comparison-polla-tag {
  border-color: rgba(216, 180, 254, .4) !important;
  background: rgba(216, 180, 254, .16) !important;
  color: #f5d0fe !important;
}

.dark-mode .ranking-podium-section :is(.podium-card, .ranking-list-row):has(.participant-link[data-player-profile="Polla Random"], .participant-link[data-player-profile="Polla Promedio"]),
.dark-mode table.results:not(.leader-path-ranking) tr:has(.participant-link[data-player-profile="Polla Random"], .participant-link[data-player-profile="Polla Promedio"]),
.dark-mode .contender-card:not(.leader-path-ranking-item):has(.participant-link[data-player-profile="Polla Random"], .participant-link[data-player-profile="Polla Promedio"]),
.dark-mode .eliminated-card:has(.participant-link[data-player-profile="Polla Random"], .participant-link[data-player-profile="Polla Promedio"]) {
  border-color: rgba(216, 180, 254, .4) !important;
  background: rgba(216, 180, 254, .12) !important;
}

.dark-mode .ranking-podium-section :is(.podium-card, .ranking-list-row) .participant-link[data-player-profile="Polla Random"],
.dark-mode .ranking-podium-section :is(.podium-card, .ranking-list-row) .participant-link[data-player-profile="Polla Promedio"],
.dark-mode .contender-card .participant-link[data-player-profile="Polla Random"],
.dark-mode .contender-card .participant-link[data-player-profile="Polla Promedio"],
.dark-mode .eliminated-card .participant-link[data-player-profile="Polla Random"],
.dark-mode .eliminated-card .participant-link[data-player-profile="Polla Promedio"] {
  border-color: transparent !important;
  background: transparent !important;
}

#matchCenter .participant-link[data-player-profile="Polla Random"],
#matchCenter .participant-link[data-player-profile="Polla Promedio"] {
  color: #a21caf !important;
  font-weight: 950;
}

.dark-mode #matchCenter .participant-link[data-player-profile="Polla Random"],
.dark-mode #matchCenter .participant-link[data-player-profile="Polla Promedio"] {
  color: #f5d0fe !important;
}

.dark-mode .dashboard-panel::after {
  background: rgba(216, 180, 254, .14);
  color: #f5d0fe;
  border-left-color: #d8b4fe;
}

/* ==========================================================
   Dashboard Layout
   ========================================================== */
.dashboard-phase-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dashboard-phase-module {
  width: 100%;
}

.mobile-history-summary,
.mobile-collapse-toggle {
  display: none;
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 700px) {
  .dashboard-phase-layout[data-collapse-evolution-mobile="1"] #evolution .evolution-history-details {
    margin-top: 0;
  }

  .mobile-history-summary {
    display: block;
    margin: 10px 0 8px;
    color: #64748b;
    font: inherit; font-size: 0.9rem; font-weight: 700; line-height: 1.4;
  }

  .mobile-collapse-toggle {
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-weight: 900;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
  }

  .mobile-collapse-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #0f766e;
    font-size: 0.82rem;
    line-height: 1;
  }

  .mobile-collapse-toggle:hover,
  .mobile-collapse-toggle:focus-visible {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  .mobile-collapse-toggle:focus-visible {
    outline: 3px solid rgba(15, 118, 110, 0.22);
    outline-offset: 2px;
  }

  .dashboard-enhanced #socialZone:not(.is-mobile-expanded) > .mobile-collapsible-content,
  .dashboard-enhanced #aPrimeraVista:not(.is-mobile-expanded) > .mobile-collapsible-content,
  .dashboard-enhanced .dashboard-phase-layout[data-collapse-evolution-mobile="1"] #evolution:not(.is-mobile-expanded) .evolution-controls,
  .dashboard-enhanced .dashboard-phase-layout[data-collapse-evolution-mobile="1"] #evolution:not(.is-mobile-expanded) .chart-grid,
  .dashboard-enhanced .dashboard-phase-layout[data-collapse-evolution-mobile="1"] #evolution:not(.is-mobile-expanded) .evolution-history-details { display: none !important; }

  .evolution-mobile-toggle { display: none; margin: 0 0 12px; }
  .dashboard-phase-layout[data-collapse-evolution-mobile="1"] .evolution-mobile-toggle { display: flex; }
  .dark-mode .mobile-history-summary { color: #cbd5e1; }
  .dark-mode .mobile-collapse-toggle { border-color: rgba(148, 163, 184, 0.28); background: rgba(15, 23, 42, 0.88); color: #f8fafc; }
  .dark-mode .mobile-collapse-icon { color: #5eead4; }
}