:root {
  --bg: #050816;
  --bg-soft: #0f172a;
  --bg-softer: #111827;
  --accent: #22c55e;
  --accent-soft: rgba(34, 197, 94, 0.14);
  --accent-strong: #16a34a;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #1f2937;
  --danger: #ef4444;
  --radius-lg: 14px;
  --radius-md: 10px;
  --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.85);
  --transition-fast: 0.18s ease-out;
  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-main);
  background:
    radial-gradient(circle at top left, #1e293b 0, transparent 55%),
    radial-gradient(circle at bottom right, #1d4ed8 0, transparent 60%),
    var(--bg);
  color: var(--text);
}

.app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}
/* v2 reclaims the empty side space → wider match column → 2-up cards get real
   breathing room so country names fit without overflowing */
body.design-v2 .app { max-width: 1320px; }

/* Header */

.app-header {
  text-align: center;
  margin-bottom: 24px;
}

.app-header h1 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: 0.02em;
}

.subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* Layout */

.layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cards */

.card {
  background: linear-gradient(135deg, #020617 0%, #020617 45%, #020617 100%);
  border-radius: var(--radius-lg);
  padding: 16px 16px 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px);
}

.card--wide {
  padding: 18px 18px 20px;
}

.card h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

/* Text utils */

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

.small {
  font-size: 12px;
}

/* Forms */

.form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}

.form-inline label {
  font-size: 14px;
  color: var(--muted);
}

input,
select {
  font-family: inherit;
  font-size: 14px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  background: rgba(15, 23, 42, 0.8);
  color: var(--text);
  outline: none;
  min-width: 0;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

input:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.45);
  background: rgba(15, 23, 42, 0.98);
}

/* Buttons */

button {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #022c22;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.35);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-fast),
    background var(--transition-fast);
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(34, 197, 94, 0.45);
  filter: brightness(1.02);
}

button:active {
  transform: translateY(0);
  box-shadow: 0 10px 26px rgba(34, 197, 94, 0.4);
}

.secondary-btn {
  background: rgba(15, 23, 42, 0.9);
  color: var(--text);
  border-radius: 999px;
  padding-inline: 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.4);
}

.secondary-btn:hover {
  background: rgba(15, 23, 42, 1);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.95);
}

.link-btn {
  background: transparent;
  border-radius: 999px;
  box-shadow: none;
  padding-inline: 0;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-style: dotted;
}

.link-btn:hover {
  box-shadow: none;
  color: #e5e7eb;
}

/* Matches */

.matches-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.match-row {
  display: grid;
  grid-template-columns: minmax(0, 140px) 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border-radius: var(--radius-md);
  background: radial-gradient(circle at top left, #0f172a 0, #020617 55%);
  border: 1px solid rgba(31, 41, 55, 0.9);
}

.match-row-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

.match-time {
  font-size: 11px;
  color: var(--muted);
}

.match-group {
  font-size: 11px;
  color: var(--muted);
}

.match-prediction,
.match-actual {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.score-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.score-input-group input {
  width: 46px;
  text-align: center;
}

.match-player-input {
  flex: 1 1 130px;
}

.matches-list--compact .match-row {
  grid-template-columns: minmax(0, 140px) 1fr;
}

/* Outrights */

.outrights-form {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.form-grid label {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.actions {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

/* Scoreboard */

.scoreboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 10px;
}

.scoreboard-table-wrapper {
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(30, 64, 175, 0.45);
  overflow: auto;
  max-height: 380px;
}

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

.scoreboard-table thead {
  background: linear-gradient(to right, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 1));
  position: sticky;
  top: 0;
  z-index: 1;
}

.scoreboard-table th,
.scoreboard-table td {
  padding: 7px 9px;
  text-align: left;
  border-bottom: 1px solid rgba(31, 41, 55, 0.85);
}

.scoreboard-table th {
  font-weight: 600;
  color: var(--muted);
  font-size: 12px;
}

.scoreboard-table tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.98);
}

.scoreboard-table tbody tr:nth-child(odd) {
  background: rgba(15, 23, 42, 0.94);
}

.scoreboard-table tbody tr:first-child {
  box-shadow: inset 0 1px 0 rgba(250, 204, 21, 0.35);
}

.scoreboard-table tbody tr td:nth-child(3) {
  font-weight: 600;
}

/* Results */

.results-panel {
  background: radial-gradient(circle at top right, #0b1120 0, #020617 55%);
  border-radius: var(--radius-md);
  padding: 10px 12px 12px;
  border: 1px solid rgba(37, 99, 235, 0.4);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.results-panel h3 {
  margin: 0;
  font-size: 15px;
}

.results-block {
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(31, 41, 55, 0.9);
  padding: 5px 9px 8px;
}

.results-block summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}

/* Responsive */

@media (max-width: 900px) {
  .scoreboard-layout {
    grid-template-columns: 1fr;
  }
}

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

  .matches-list--compact .match-row {
    grid-template-columns: 1fr;
  }

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

  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .app {
    padding-inline: 12px;
  }
}

/* Views & auth */

.hidden {
  display: none !important;
}

.view--centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 48px);
}

.auth-card {
  width: 100%;
  max-width: 560px;
}

.auth-header {
  text-align: center;
  margin-bottom: 16px;
}

.auth-header h1 {
  margin: 0 0 6px;
  font-size: 24px;
}

.wc-logo {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 12px;
  border-radius: 6px;
}

.wc-logo--header {
  width: 48px;
  margin: 0;
  border-radius: 4px;
  flex-shrink: 0;
}

.main-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */

.site-footer {
  text-align: center;
  padding: 32px 16px 24px;
  margin-top: 24px;
}

.donate-img {
  width: 160px;
  height: auto;
  display: block;
  margin: 0 auto 10px;
  opacity: 0.9;
}

.donate-text {
  font-size: 13px;
  color: var(--text-muted, #8899aa);
  letter-spacing: 0.03em;
  margin: 0;
}

.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.auth-tab {
  flex: 1;
  background: rgba(15, 23, 42, 0.9);
  color: var(--muted);
  box-shadow: none;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.auth-tab--active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #022c22;
  border-color: transparent;
}

.auth-form h2 {
  margin: 0 0 8px;
  font-size: 17px;
}

.form-section {
  margin-top: 14px;
}

.form-section h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--muted);
}

.form-section--passport {
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px dashed rgba(250, 204, 21, 0.35);
  background: rgba(250, 204, 21, 0.04);
}

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

.joke-hint {
  margin-bottom: 10px;
}

.form-error {
  color: #fca5a5;
  font-size: 13px;
  margin: 8px 0 0;
}

.btn-full {
  width: 100%;
  margin-top: 12px;
}

.points-tag {
  display: inline-block;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-left: 4px;
}

/* Main layout */

.main-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.main-header__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.design-toggle {
  font-size: 13px;
}

@media (max-width: 480px) {
  .design-toggle { font-size: 12px; padding-inline: 10px; }
}

.main-header h1 {
  margin: 0 0 4px;
  font-size: clamp(22px, 3vw, 28px);
}

.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 16px;
}

.outrights-display {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.outrights-item {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(31, 41, 55, 0.9);
}

.outrights-item .label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.outrights-item .value {
  font-size: 14px;
  font-weight: 600;
}

.scoreboard-row--me td {
  color: #86efac;
}


.card--admin summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 8px;
}

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

.results-toggle {
  min-width: 32px;
  padding-inline: 8px;
}

.results-collapsed {
  display: none;
}

/* Clickable player names in scoreboard */
.player-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.player-link:hover { color: var(--accent); }

/* Correct outright pick highlight */
.check-correct { color: var(--accent); font-weight: 600; }

/* Dark horse chip selector */
.form-field-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font-size: 14px;
  color: var(--text);
}
.dark-horse-selector { margin-top: 4px; }
.dh-counter { margin: 0 0 8px; font-size: 12px; }
.dh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dh-chip {
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-softer);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.dh-chip:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.dh-chip--on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.dh-chip--dim { opacity: 0.35; cursor: not-allowed; }

/* All-outrights collapsible */
.all-outrights-summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  list-style: none;
  padding: 2px 0 6px;
}
.all-outrights-summary::-webkit-details-marker { display: none; }
.all-outrights-summary::before { content: "▶ "; font-size: 11px; }
details[open] .all-outrights-summary::before { content: "▼ "; }

.admin-subtitle {
  margin: 12px 0 6px;
  font-size: 14px;
}

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

  .outrights-display {
    grid-template-columns: 1fr;
  }
}
.match-odds {
  margin-top: 10px;
  font-size: 14px;
  color: #ffd166;
}

.match-lineups {
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  font-size: 13px;
  line-height: 1.5;
}
.match-odds {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
}

.match-odds span {
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
}

/* Match status badges */

.match-status--live {
  color: #4ade80;
  font-weight: 700;
  animation: pulse-live 1.4s ease-in-out infinite;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.match-status--ended {
  color: var(--muted);
}

/* Confirm bet button */

.confirm-bet-btn {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.confirm-bet-btn:hover:not(:disabled) {
  opacity: 0.88;
}
.confirm-bet-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.confirm-bet-btn--saved {
  background: #2e7d32;
}

/* Locked-bet notice */

.match-locked-label {
  width: 100%;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
}

/* Disabled inputs */

input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Points badge shown after match ends */

.match-points-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(31, 41, 55, 0.9);
  font-size: 12px;
  color: var(--muted);
}

.match-points-badge--positive {
  background: var(--accent-soft);
  border-color: rgba(34, 197, 94, 0.35);
  color: var(--accent);
}

.match-points-value {
  font-weight: 700;
}

.match-points-hints {
  font-size: 11px;
  opacity: 0.8;
}

/* Test / Debug block */

.test-block {
  margin-top: 16px;
  border-radius: var(--radius-md);
  border: 1px dashed rgba(250, 204, 21, 0.4);
  background: rgba(250, 204, 21, 0.04);
  padding: 10px 12px;
}

.test-block__title {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #fbbf24;
  list-style: none;
}

.test-block__title::before {
  content: "⚙ ";
}

.test-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
}

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

.test-date-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.test-mock-hint {
  margin: 4px 0 0;
}

/* Match results section */

.match-results-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.result-card {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: radial-gradient(circle at top left, #0f172a 0, #020617 55%);
  border: 1px solid rgba(31, 41, 55, 0.9);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.result-card__teams {
  font-weight: 600;
  font-size: 14px;
}

.result-card__league {
  margin-top: 2px;
}

.result-card__actual-score {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.result-card__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(31, 41, 55, 0.7);
}

.result-card__prediction {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
}

.result-card__pred-score {
  font-weight: 600;
  font-size: 15px;
}

.result-card__actual-player {
  opacity: 0.7;
}

.result-card__points {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.result-card__pts {
  font-size: 18px;
  font-weight: 700;
  color: var(--muted);
}

.result-card__points--positive .result-card__pts {
  color: var(--accent);
}

.result-card__hints {
  font-size: 11px;
  text-align: right;
}

/* Admin panel */

.admin-table-wrapper {
  overflow-x: auto;
  margin-top: 6px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(31, 41, 55, 0.9);
}

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

.admin-table th,
.admin-table td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(31, 41, 55, 0.7);
  white-space: nowrap;
}

.admin-table th {
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  background: rgba(15, 23, 42, 0.98);
  position: sticky;
  top: 0;
}

.admin-table tbody tr:hover {
  background: rgba(15, 23, 42, 0.6);
}

.admin-db-links {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(31, 41, 55, 0.7);
}

.admin-db-btn {
  display: inline-flex;
  text-decoration: none;
  font-size: 13px;
}

.admin-check {
  color: var(--accent);
  font-weight: 700;
  margin-left: 4px;
}

.auto-player-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  margin-left: 6px;
  vertical-align: middle;
  cursor: default;
}

.player-dropdown {
  background: #111;
  border: 1px solid #333;
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 9999;
}

.player-dropdown-item {
  padding: 8px 10px;
  cursor: pointer;
  color: white;
}

.player-dropdown-item:hover {
  background: #2a2a2a;
}
/* ── All participants' bets (shown after match starts) ─────────────────────── */

.match-all-bets {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(31, 41, 55, 0.7);
}

.all-bets-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}

.all-bets-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
}

.all-bets-nick {
  font-weight: 600;
  color: var(--text);
  min-width: 80px;
}

.all-bets-score {
  font-family: monospace;
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
}

.all-bets-player {
  color: var(--muted);
  font-size: 12px;
}

/* ── Bet validation error toast ────────────────────────────────────────────── */

.bet-error {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--danger);
  color: #fff;
  padding: 11px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  z-index: 99999;
  pointer-events: none;
  white-space: nowrap;
  animation: bet-error-in 0.2s ease-out;
}

@keyframes bet-error-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── WC Team / Player Selectors ─────────────────────────────────────────────── */

.wcs-container {
  position: relative;
  width: 100%;
}

.wcs-wrap {
  position: relative;
  width: 100%;
}

/* Selected chip */
.wcs-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid rgba(34, 197, 94, 0.35);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.wcs-selected:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.55);
}

.wcs-selected-text {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  user-select: none;
}

.wcs-clear {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  width: 22px;
  height: 22px;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}

.wcs-clear:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.14);
  transform: none;
  box-shadow: none;
  filter: none;
}

/* Search input */
.wcs-input-wrap {
  position: relative;
}

.wcs-input {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  background: rgba(15, 23, 42, 0.8);
  color: var(--text);
  outline: none;
  min-width: 0;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.wcs-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.4);
  background: rgba(15, 23, 42, 0.98);
}

/* Dropdown */
.wcs-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  background: #0a111e;
  border: 1px solid rgba(31, 41, 55, 0.95);
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.4),
    0 20px 50px rgba(0, 0, 0, 0.7);
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

/* Option rows */
.wcs-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid rgba(31, 41, 55, 0.5);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.wcs-option:last-child {
  border-bottom: none;
}

.wcs-option:hover {
  background: var(--accent-soft);
  color: var(--accent);
  transform: none;
  box-shadow: none;
  filter: none;
}

/* Player option (two-line) */
.wcs-option--player {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
}

.wcs-player-name {
  font-size: 13px;
  font-weight: 600;
}

.wcs-player-team {
  font-size: 11px;
  color: var(--muted);
}

/* Empty / loading states */
.wcs-empty,
.wcs-loading {
  margin: 0;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* "Use typed name" fallback button */
.wcs-use-typed {
  display: block;
  width: 100%;
  padding: 9px 12px;
  background: rgba(34, 197, 94, 0.06);
  border: none;
  border-top: 1px solid rgba(31, 41, 55, 0.7);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

.wcs-use-typed:hover {
  background: rgba(34, 197, 94, 0.13);
  transform: none;
  box-shadow: none;
  filter: none;
}

/* ── Team flag icons ───────────────────────────────────────────────────────── */

.team-flag {
  display: inline-block;
  width: 1.2em;
  height: 0.9em;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

/* ── Player rating badge ───────────────────────────────────────────────────── */

.player-rating {
  font-size: 11px;
  font-weight: 700;
  color: #facc15;
  margin-left: 3px;
}

/* ════════════════════════════════════════════════════════════════════════════
   DESIGN v2 — stadium-night skin. Scoped under body.design-v2 so v1 is 100%
   untouched. Green actions (kept from v1), gold highlights, big logo, and an
   aligned result table so the eye never darts. Opt-in per user via the toggle.
   ════════════════════════════════════════════════════════════════════════════ */

body.design-v2 {
  --bg:           #0b0a1f;
  --bg-soft:      #15123a;
  --bg-softer:    #1c1840;
  --accent:       #22c55e;   /* green — primary action (kept from v1) */
  --accent-strong:#16a34a;
  --accent-soft:  rgba(34, 197, 94, 0.16);
  --gold:         #ffd23f;   /* highlight: scores, stars, your nickname */
  --text:         #f4f1ff;
  --muted:        #a9a3d4;
  --border:       #2e2960;
  --danger:       #ff4d6d;
  --radius-lg:    20px;
  --radius-md:    14px;

  background:
    radial-gradient(circle at 12% -5%, rgba(124, 58, 237, 0.38) 0, transparent 45%),
    radial-gradient(circle at 88% 8%,  rgba(56, 189, 248, 0.22) 0, transparent 45%),
    radial-gradient(circle at 50% 108%, rgba(34, 197, 94, 0.26) 0, transparent 55%),
    #0b0a1f;
}

/* Sporty display font for headings + the big scores */
body.design-v2 h1,
body.design-v2 h2,
body.design-v2 .v2rc-nums,
body.design-v2 .result-card__actual-score {
  font-family: "Russo One", var(--font-main);
  letter-spacing: 0.01em;
}

/* ── Header: big logo, readable greeting, a clear "what to do" line ──────────── */
body.design-v2 .main-header { align-items: center; }
body.design-v2 .main-header__brand { gap: 16px; align-items: center; }
body.design-v2 .main-header__brand h1 { display: none; }
body.design-v2 .wc-logo--header {
  width: 104px;
  border-radius: 22px;
  box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.4), 0 14px 36px rgba(124, 58, 237, 0.55);
}
body.design-v2 .main-header__brand p {        /* greeting */
  font-size: 20px;
  color: var(--text);
  font-weight: 700;
  margin: 0;
}
body.design-v2 #main-nickname { color: var(--gold); }
.main-header__tagline { display: none; }       /* removed — was just clutter */

body.design-v2 .auth-header .wc-logo,
body.design-v2 #view-onboarding .wc-logo {
  width: 176px;
  border-radius: 28px;
  box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.4), 0 18px 45px rgba(124, 58, 237, 0.55);
}

/* Cards / panels */
body.design-v2 .card {
  background: linear-gradient(160deg, rgba(30, 26, 70, 0.92), rgba(15, 13, 40, 0.92));
  border: 1px solid rgba(168, 163, 212, 0.22);
  box-shadow: 0 18px 50px rgba(8, 6, 26, 0.7);
}

/* Buttons stay green (v1 look). Only secondary + the toggle get restyled. */
body.design-v2 .secondary-btn {
  background: rgba(28, 24, 64, 0.92);
  color: var(--text);
  border: 1px solid rgba(168, 163, 212, 0.4);
  box-shadow: none;
}
body.design-v2 .design-toggle {
  background: linear-gradient(135deg, #7c3aed, #db2777);
  color: #fff;
  border: none;
}

/* Inputs */
body.design-v2 input,
body.design-v2 .wcs-input {
  background: rgba(15, 13, 40, 0.85);
  border: 1px solid rgba(168, 163, 212, 0.3);
  border-radius: 10px;
}
body.design-v2 input:focus,
body.design-v2 .wcs-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.4);
}

/* Match rows → clean vertical card with a tidy "Твой прогноз" block */
body.design-v2 .match-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(160deg, rgba(38, 32, 84, 0.9), rgba(18, 15, 46, 0.92));
  border: 1px solid rgba(168, 163, 212, 0.2);
}
body.design-v2 .match-row-header { gap: 4px; }
body.design-v2 .match-teams { font-size: 16px; font-weight: 800; }
body.design-v2 .match-time { font-size: 12px; }
body.design-v2 .match-status--live { color: #ff5d6c; }
body.design-v2 .match-group { font-size: 11px; }
body.design-v2 .match-odds { gap: 8px; margin-top: 4px; }
body.design-v2 .match-odds span {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(168, 163, 212, 0.2);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
body.design-v2 .match-prediction {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(168, 163, 212, 0.18);
}
body.design-v2 .match-prediction::before {
  content: "Твой прогноз";
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}
body.design-v2 .score-input-group { justify-content: center; gap: 12px; }
body.design-v2 .score-input-group span { font-size: 22px; font-weight: 800; color: var(--muted); }
body.design-v2 .score-input-group input {
  width: 60px;
  height: 50px;
  font-family: "Russo One", var(--font-main);
  font-size: 22px;
  text-align: center;
}
body.design-v2 .score-input-group input::-webkit-inner-spin-button,
body.design-v2 .score-input-group input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
body.design-v2 .match-player-input { flex: 0 0 auto; width: 100%; height: 42px; }
body.design-v2 .confirm-bet-btn { width: 100%; height: 46px; border-radius: 12px; font-size: 15px; }
body.design-v2 .result-card {
  background: linear-gradient(160deg, rgba(38, 32, 84, 0.9), rgba(18, 15, 46, 0.92));
  border: 1px solid rgba(168, 163, 212, 0.2);
}

/* Colour semantics: GOLD = you (your row); neutral tint for the leader */
body.design-v2 .scoreboard-table tbody tr:first-child {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.04);
}
body.design-v2 .scoreboard-row--me td { color: var(--gold); font-weight: 700; }

/* Empty-state while playoff hasn't started (внутри карточки «Турнирная таблица») */
body.design-v2 .playoff-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 16px;
  margin-top: 4px;
  text-align: center;
  color: var(--muted);
}
body.design-v2 .playoff-empty__emoji { font-size: 36px; line-height: 1; }
body.design-v2 .playoff-empty__text  { margin: 0; font-size: 14px; max-width: 380px; }
body.design-v2 .playoff-empty.hidden { display: none; }

/* Collapsible group-stage table inside the scoreboard card */
body.design-v2 .scoreboard-group-details {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
body.design-v2 .scoreboard-group-summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
body.design-v2 .scoreboard-group-summary::-webkit-details-marker { display: none; }
body.design-v2 .scoreboard-group-summary::before {
  content: "▶";
  font-size: 10px;
  transition: transform .2s;
}
body.design-v2 .scoreboard-group-details[open] .scoreboard-group-summary::before {
  transform: rotate(90deg);
}
body.design-v2 .scoreboard-group-details .scoreboard-table-wrapper {
  margin-top: 10px;
}

/* Persistent "bet saved" indicator (v2 only) */
body.design-v2 .bet-saved-note {
  width: 100%;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
body.design-v2 .bet-saved-note--on { color: #7CFFB2; font-weight: 700; }

/* Collapsible participants panel inside live "Матчи сёдня" rows */
body.design-v2 .match-all-bets--collapsible {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(168, 163, 212, 0.2);
}
body.design-v2 .all-bets-summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  list-style: none;
}
body.design-v2 .all-bets-summary::-webkit-details-marker { display: none; }
body.design-v2 .all-bets-summary::before { content: "▶ "; font-size: 10px; }
body.design-v2 details[open] > .all-bets-summary::before { content: "▼ "; }
body.design-v2 .all-bets-body { margin-top: 6px; }

/* ── v2 result card (hybrid): GREEN score hero (actual = correct) + GOLD "ТЫ" row ─
   Colour semantics: GREEN = what actually happened / points earned; GOLD = you.   */
body.design-v2 .v2rc { display: flex; flex-direction: column; gap: 10px; position: relative; }

.v2rc-hero {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 4px 0 12px;
  border-bottom: 1px dashed rgba(168, 163, 212, 0.28);
}
.v2rc-type { font-size: 12px; color: var(--muted); text-align: center; }
.v2rc-scoreline { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.v2rc-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; overflow-wrap: break-word; }
.v2rc-t--r { justify-content: flex-end; text-align: right; }
/* RESULT-card hero names: long multi-word names (Bosnia & Herzegovina, Cape Verde
   Islands) wrap onto several lines at spaces; single words break only as a last
   resort. This is what the user wants in «Результаты». */
body.design-v2 .v2rc-t .team-name { min-width: 0; white-space: normal; overflow-wrap: break-word; }
/* MATCH-card hero names (the betting cards) stay on ONE line — too narrow on a
   phone to wrap a single word cleanly, so ellipsize as the last resort instead of
   breaking mid-letter or overflowing. Desktop is wide enough to show them in full. */
body.design-v2 .v2mc .v2rc-t .team-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Flags stay a fixed size everywhere (never shrink with the name). Name shrinks instead. */
body.design-v2 .team-flag { width: 22px; height: 15px; flex-shrink: 0; vertical-align: middle; }
.v2rc-nums {
  font-family: "Russo One", var(--font-main); font-size: 30px;
  color: var(--green); white-space: nowrap;
}
.v2rc-best {
  background: var(--green-soft); border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 999px; padding: 4px 14px; font-size: 13px; color: #7CFFB2; font-weight: 600;
}

.v2rc-grid { display: flex; flex-direction: column; }
.v2rc-row {
  display: grid;
  grid-template-columns: 96px 44px 1fr auto 42px;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
}
.v2rc-who {
  font-size: 12px; font-weight: 700; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2rc-score { font-weight: 800; white-space: nowrap; }
.v2rc-player { font-size: 13px; color: var(--text); line-height: 1.25; min-width: 0; }
.v2rc-vibe { font-size: 11px; font-style: italic; white-space: normal; text-align: right; color: var(--muted); max-width: 130px; line-height: 1.15; }
.v2rc-vibe--pos { color: #7CFFB2; }
.v2rc-vibe--bad { color: #ff8a9b; }
.v2rc-pts { text-align: right; font-weight: 800; color: var(--muted); }

.v2rc-row--label { padding: 2px 8px; }
.v2rc-row--label span {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600;
}

/* GOLD = you */
.v2rc-row--mine {
  border-radius: 10px;
  background: rgba(255, 210, 63, 0.12);
  border: 1px solid rgba(255, 210, 63, 0.35);
}
.v2rc-row--mine .v2rc-who   { color: var(--gold); }
.v2rc-row--mine .v2rc-score { font-size: 17px; }

/* GREEN = correct / points earned */
.v2rc-pos   { color: #7CFFB2; }
.v2rc-muted { color: var(--muted); }

.v2rc-others { margin-top: 2px; }
.v2rc-others-sum {
  cursor: pointer; font-size: 12px; font-weight: 700; color: var(--accent);
  list-style: none; padding: 6px 0;
}
.v2rc-others-sum::-webkit-details-marker { display: none; }
.v2rc-others-sum::before { content: "▶ "; font-size: 10px; }
details[open] > .v2rc-others-sum::before { content: "▼ "; }
.v2rc-row--other .v2rc-who { font-weight: 600; }
.v2rc-row--other:nth-child(even) { background: rgba(255, 255, 255, 0.03); border-radius: 8px; }

/* ── Шеринг прогноза картинкой ─────────────────────────────────────────────── */
/* Маленькая ненавязчивая кнопка-иконка «поделиться» в правом верхнем углу
   карточки. Абсолютный оверлей — не влияет на раскладку карточки. */
.share-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border: 1px solid rgba(168, 163, 212, 0.2);
  border-radius: 50%;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), opacity var(--transition-fast);
}
.share-btn:hover:not(:disabled) {
  opacity: 1;
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(34, 197, 94, 0.4);
}
.share-btn:disabled { cursor: progress; opacity: 0.4; }

.share-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5, 8, 22, 0.82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: share-fade 0.18s ease-out;
}
@keyframes share-fade { from { opacity: 0; } to { opacity: 1; } }
.share-modal {
  position: relative;
  width: min(420px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.share-modal__title {
  font-family: "Russo One", var(--font-main);
  font-size: 20px;
  color: var(--text);
  text-align: center;
}
.share-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.9);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: none;
}
.share-close:hover { color: var(--accent); border-color: var(--accent); }
.share-preview {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.share-act {
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.9);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.share-act:hover { border-color: var(--accent); color: var(--accent); }
.share-act--primary {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #022c22;
  border: none;
}
.share-act--primary:hover { color: #022c22; opacity: 0.92; }
.share-modal__hint { text-align: center; }

.share-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  background: var(--accent-strong);
  color: #fff;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow-soft);
  animation: share-toast-in 0.2s ease-out;
}
.share-toast--bad { background: var(--danger); }
@keyframes share-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 480px) {
  .v2rc-row { grid-template-columns: 68px 32px 1fr auto 30px; gap: 6px; padding: 6px 4px; }
  .v2rc-vibe { font-size: 10px; }
  .v2rc-nums { font-size: 26px; }
  .v2rc-t { font-size: 13px; }
}

/* Outrights: others as a collapsible right under your picks (v2); hide bottom dup */
.outrights-others { display: none; }
body.design-v2 .outrights-others {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(168, 163, 212, 0.18);
}
body.design-v2 #all-outrights-section { display: none; }
.outrights-others-sum {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--accent);
  list-style: none; padding: 4px 0;
}
.outrights-others-sum::-webkit-details-marker { display: none; }
.outrights-others-sum::before { content: "▶ "; font-size: 10px; }
details[open] > .outrights-others-sum::before { content: "▼ "; }

/* v2: «Как начисляются очки» — пояснение по коэффициентам у долгосрочных ставок */
#outrights-rules { display: none; }
body.design-v2 #outrights-rules { display: block; margin-top: 12px; }
.rules-note {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-soft); padding: 4px 12px;
}
.rules-note__sum {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted);
  list-style: none; padding: 8px 0;
}
.rules-note__sum::-webkit-details-marker { display: none; }
.rules-note__sum::before { content: "▶ "; font-size: 10px; }
details[open] > .rules-note__sum::before { content: "▼ "; }
.rules-note__body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 22px; padding: 4px 0 12px;
}
.rules-note__title {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 700; margin-bottom: 6px;
}
.rules-note__group ul { margin: 0; padding-left: 18px; }
.rules-note__group li { font-size: 13px; color: var(--text); line-height: 1.55; }
.rules-note__group li b { color: var(--accent); }
.rules-note__why {
  margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5;
}

/* v2: your outrights as one compact line (with a flag on the champion pick) */
body.design-v2 .outrights-display { display: block; }
.outrights-compact { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.oc-item { font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; }
.oc-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 600; margin-right: 6px;
}
.oc-dh { white-space: nowrap; }
.oc-dh-list { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
@media (max-width: 700px) {
  .outrights-compact { flex-direction: column; align-items: flex-start; gap: 10px; }
  .oc-item { align-items: flex-start; }
  .oc-dh-list { flex-direction: column; gap: 2px; }
}
.oc-mine-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700; margin-bottom: 6px;
}

/* v2 "Матчи сёдня" card — same hero as result cards, but score boxes you fill */
body.design-v2 .v2mc { padding: 16px; gap: 12px; }
.v2mc-score { display: flex; align-items: center; justify-content: center; gap: 3px; flex-shrink: 0; }
.v2mc-score-input {
  width: 38px; height: 38px; text-align: center; padding: 0;
  font-family: "Russo One", var(--font-main); font-size: 18px;
  border-radius: 10px;
}
.v2mc-score-input::-webkit-inner-spin-button,
.v2mc-score-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.v2mc-colon { font-family: "Russo One", var(--font-main); font-size: 16px; color: var(--muted); }
/* Имена команд в «Матчи сёдня»: крупный читаемый шрифт.
   ВАЖНО: hero по умолчанию ужимается до контента (flex column + center), из-за
   чего scoreline жил в ~258px и имена резались даже в широкой карточке. Тянем
   hero на всю ширину карточки, а scoreline ограничиваем, чтобы не растягивался
   до краёв на широких карточках — имена получают вагон места. */
body.design-v2 .v2mc .v2rc-hero { width: 100%; }
body.design-v2 .v2mc .v2rc-scoreline { gap: 8px; max-width: 480px; margin: 0 auto; }
body.design-v2 .v2mc .v2rc-t { font-size: 14px; gap: 6px; }
body.design-v2 .v2mc .v2rc-t .team-flag { width: 20px; height: 14px; }
@media (max-width: 560px) {
  /* tighter score block + smaller name font so full team names fit one line on phones */
  .v2mc-score-input { width: 36px; height: 36px; font-size: 17px; }
  .v2mc-colon { font-size: 16px; }
  body.design-v2 .v2mc .v2rc-t { font-size: 12px; }
  body.design-v2 .v2mc .v2rc-scoreline { gap: 4px; }
  body.design-v2 .v2mc .v2rc-t .team-flag { width: 18px; height: 13px; }
}
.v2mc-live { color: #ff5d6c; font-weight: 700; }
.v2mc-odds { display: flex; justify-content: center; gap: 8px; margin-top: 2px; }
.v2mc-odds span {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(168, 163, 212, 0.2);
  border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--muted); font-weight: 600;
}
.v2mc-controls { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.v2mc-player { width: 100%; height: 44px; }
body.design-v2 .v2mc .confirm-bet-btn { width: 100%; height: 46px; border-radius: 12px; font-size: 15px; }

/* v2: give the matches the bigger share of the row so 2-up cards are genuinely
   wide (the only lever that widens 2-up cards is a wider column) */
body.design-v2 .main-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr);
}

/* v2: "Матчи сёдня" cards flow into a responsive grid (2-up on wide, 1-up on phone).
   Bigger min → each card needs real width, so full country names fit on one line;
   falls back to 1-up (full width) on narrow screens. */
body.design-v2 .matches-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 12px;
  align-items: start;
}

/* v2 mobile: collapse the matches/scoreboard row to a single stacked column
   (the desktop 1.5fr/0.8fr + 370px-min rules above out-specify the base mobile
   stack, so they must be explicitly undone here or the table overlaps the cards) */
@media (max-width: 900px) {
  body.design-v2 .main-grid { grid-template-columns: 1fr; }
  body.design-v2 .matches-list { grid-template-columns: 1fr; }
}

/* v2: leaderboard expands fully on big screens, fixed height + scroll on phones */
body.design-v2 .scoreboard-table-wrapper { max-height: none; }
@media (max-width: 720px) {
  body.design-v2 .scoreboard-table-wrapper { max-height: 60vh; overflow: auto; }
}

/* v2: collapsible stats block (points race + blurbs) before "Матчи сёдня" */
.card--stats { display: none; }
body.design-v2 .card--stats { display: block; }
.stats-summary {
  cursor: pointer; font-family: "Russo One", var(--font-main); font-size: 18px; list-style: none;
}
.stats-summary::-webkit-details-marker { display: none; }
.stats-summary::before { content: "▶ "; font-size: 12px; }
.card--stats[open] .stats-summary::before { content: "▼ "; }
.stats-title { font-weight: 700; margin: 14px 0 4px; }
.stats-chart { width: 100%; height: auto; display: block; margin: 6px 0 12px; }
.stats-blurbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.stats-blurb {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(168, 163, 212, 0.18);
  border-radius: 12px; padding: 10px 12px;
}
.sb-emoji { font-size: 22px; }
.sb-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.sb-val { font-size: 14px; font-weight: 700; }

/* stats tabs */
.stats-tabs { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.stats-tab {
  background: rgba(28, 24, 64, 0.9); color: var(--muted);
  border: 1px solid rgba(168, 163, 212, 0.3); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.stats-tab--on { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #022c22; border-color: transparent; }
/* race sub-toggle: line vs histogram (compact pills under the Гонка tab) */
.stats-tabs--sub { gap: 6px; margin: 2px 0 6px; }
.stats-tab--sm { padding: 4px 12px; font-size: 12px; }

/* race legend (toggle players) */
.stats-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.legend-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(28, 24, 64, 0.7); border: 1px solid rgba(168, 163, 212, 0.25);
  border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600;
  color: var(--text); cursor: pointer;
}
.legend-chip--off { opacity: 0.45; text-decoration: line-through; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* race hover tooltip + scrubber */
.stats-chart-wrap { position: relative; }
.stats-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: rgba(10, 8, 26, 0.96); border: 1px solid rgba(168, 163, 212, 0.3);
  border-radius: 10px; padding: 8px 10px; font-size: 12px; min-width: 130px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.tip-day { font-weight: 800; margin-bottom: 4px; color: var(--gold); }
.tip-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.tip-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tip-nick { flex: 1; }
.tip-val { font-weight: 700; }

/* accuracy table + distribution chips */
.acc-table td { white-space: nowrap; }
.acc-table .acc-nick { font-weight: 700; }
body.design-v2 .acc-table .acc-me td { color: var(--gold); }
.acc-dist { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; margin-top: 8px; }
.dist-chip { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(168, 163, 212, 0.18); border-radius: 12px; padding: 10px 8px; text-align: center; }
.dist-num { font-family: "Russo One", var(--font-main); font-size: 22px; }
.dist-lbl { font-size: 12px; font-weight: 700; margin-top: 2px; }
.dist-pct { font-size: 11px; color: var(--muted); }
.dist-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
.dist-5 { border-color: rgba(124, 255, 178, 0.5); } .dist-5 .dist-num { color: #7CFFB2; }
.dist-3 { border-color: rgba(34, 197, 94, 0.4); } .dist-3 .dist-num { color: #4ade80; }
.dist-2 .dist-num, .dist-1 .dist-num { color: #a9a3d4; }
.dist-0 { border-color: rgba(255, 138, 155, 0.4); } .dist-0 .dist-num { color: #ff8a9b; }

/* ── Стрики: hero-карточки горящего/холодного + список серий ──────────────── */
.streak-heroes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
@media (max-width: 560px) { .streak-heroes { grid-template-columns: 1fr; } }
.streak-hero {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(168, 163, 212, 0.18);
  border-radius: var(--radius-lg); padding: 14px 16px; min-height: 92px;
}
.streak-hero--hot {
  border-color: rgba(251, 146, 60, 0.55);
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.16), rgba(255, 210, 63, 0.06));
}
.streak-hero--cold {
  border-color: rgba(56, 189, 248, 0.5);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(167, 139, 250, 0.05));
}
.streak-hero--empty { opacity: 0.75; }
.sh-emoji { font-size: 38px; line-height: 1; flex-shrink: 0; }
.sh-body { min-width: 0; }
.sh-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.sh-nick { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 17px; margin-top: 2px; }
.streak-hero--hot .sh-big { color: #fb923c; }
.streak-hero--cold .sh-big { color: #38bdf8; }
.sh-big { font-family: "Russo One", var(--font-main); font-size: 18px; margin-top: 2px; }
.sh-cap { font-size: 12px; color: var(--muted); margin-top: 3px; }

.streak-list-head, .streak-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 8px 12px;
}
.streak-list-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  padding-bottom: 4px;
}
.streak-list { display: flex; flex-direction: column; gap: 6px; }
.streak-row {
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(168, 163, 212, 0.18);
  border-radius: 12px;
}
body.design-v2 .streak-row--me { border-color: rgba(255, 210, 63, 0.5); }
body.design-v2 .streak-row--me .sr-nick { color: var(--gold); }
.sr-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sr-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sr-nick { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-cur, .sr-rec {
  font-weight: 800; font-size: 14px; white-space: nowrap; text-align: right;
  font-variant-numeric: tabular-nums;
}
.sr-cur--hot { color: #fb923c; }
.sr-cur--cold { color: #38bdf8; }
.sr-cur--none, .sr-rec--zero { color: var(--muted); font-weight: 600; }
.sr-rec { color: var(--gold); min-width: 44px; }

/* v2: drop the "Пересчитать" / collapse buttons in Результаты (not needed for players) */
body.design-v2 .results-actions { display: none; }

/* ── Playoff bracket ──────────────────────────────────────────────────────── */
.bracket-btn { font-weight: 700; }

/* ── ТГ-бот: плавающая кнопка снизу-справа (FAB), не лезет в шапку ─────────── */
.tg-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border: 1px solid var(--accent-strong);
  box-shadow: var(--shadow-soft);
  color: #022c22;
  text-decoration: none;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-fast);
}
.tg-fab:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  text-decoration: none;
}
.tg-fab__icon {
  width: 26px;
  height: 26px;
  fill: #022c22;
  display: block;
}
/* В режиме казика не мозолим глаз — там свой вайб */
body.casino-mode .tg-fab { display: none; }
@media (max-width: 480px) {
  .tg-fab { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  .tg-fab__icon { width: 24px; height: 24px; }
}

/* ── Донат разрабу: заметная плавающая монетка (FAB), над ТГ-кнопкой ──────────── */
.donate-fab {
  position: fixed;
  right: 18px;
  bottom: 82px; /* стоит над .tg-fab (52px + отступ), в один столбик */
  z-index: 41;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border: 1px solid var(--accent-strong);
  box-shadow: var(--shadow-soft);
  color: #022c22;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  animation: donate-fab-wiggle 4.5s ease-in-out infinite;
  transition:
    transform var(--transition-fast),
    filter var(--transition-fast),
    box-shadow var(--transition-fast);
}
.donate-fab:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}
.donate-fab__coin {
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  transition: transform var(--transition-fast);
}
.donate-fab:hover .donate-fab__coin {
  animation: donate-coin-spin 0.7s ease-in-out;
}
/* лёгкое покачивание, чтобы зацепить взгляд, но не бесить */
@keyframes donate-fab-wiggle {
  0%, 88%, 100% { transform: translateY(0) rotate(0); }
  91% { transform: translateY(-2px) rotate(-2deg); }
  94% { transform: translateY(-2px) rotate(2deg); }
  97% { transform: translateY(0) rotate(0); }
}
@keyframes donate-coin-spin {
  from { transform: rotateY(0); }
  to   { transform: rotateY(360deg); }
}
/* В режиме казика прячемся — там свой коин-вайб (падающие монеты/слот) */
body.casino-mode .donate-fab { display: none; }
@media (prefers-reduced-motion: reduce) {
  .donate-fab { animation: none; }
  .donate-fab:hover .donate-fab__coin { animation: none; }
}
@media (max-width: 480px) {
  .donate-fab {
    right: 14px;
    bottom: 72px; /* над мобильной .tg-fab (48px + отступ) */
    padding: 9px 13px 9px 10px;
    font-size: 13px;
  }
  .donate-fab__coin { font-size: 18px; }
}

/* ── Мини-модалка доната (поверх паттерна .share-modal) ───────────────────────── */
.donate-modal {
  text-align: center;
  align-items: center;
}
.donate-modal__coin {
  font-size: 44px;
  line-height: 1;
  margin-top: 4px;
}
.donate-modal__sub { margin: 0; }
.donate-modal__req {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.donate-modal__phone {
  font-family: "Russo One", var(--font-main);
  font-size: 20px;
  color: var(--text);
  letter-spacing: 0.02em;
  padding: 10px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-strong);
  border-radius: var(--radius-md);
}
.donate-modal__copy {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #022c22;
  border: none;
}
.donate-modal__copy:hover { color: #022c22; opacity: 0.92; }

/* ── «Предложить улучшение» link styled as a button ───────────────────────── */
.feature-request-btn {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #022c22;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border: 1px solid rgba(251, 191, 36, 0.6);
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.4);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-fast);
}
.feature-request-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 16px 38px rgba(245, 158, 11, 0.55);
  text-decoration: none;
}
.feature-request-btn .frb-icon { line-height: 1; }

/* On narrow screens lay the header buttons out in a tidy 2-column grid (2 rows)
   instead of an uneven wrap — keeps full labels readable without blowing up. */
@media (max-width: 560px) {
  .main-header__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .main-header__actions > .secondary-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    padding-inline: 10px;
  }
  .feature-request-btn {
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
  }
}
.card--bracket { overflow: hidden; }
/* bracket view uses the full monitor width so all 9 columns fit without scroll */
body.bracket-open .app { max-width: 1700px; }

.bk-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.bk-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.bk-legend b { color: var(--text); }
.bk-mybonus {
  font-size: 14px; padding: 6px 14px; border-radius: 999px;
  background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.35); color: #7CFFB2;
}
.bk-mybonus b { color: #7CFFB2; }
.bk-hint { font-size: 12px; color: var(--muted); margin: 0 0 14px; line-height: 1.4; }

.bracket-scroll { overflow-x: auto; padding-bottom: 10px; }
.bracket {
  display: flex; align-items: stretch; gap: 8px;
  width: max-content; margin: 0 auto;  /* centered; scrolls if wider than the view */
}
.bk-col { display: flex; flex-direction: column; min-width: 128px; }
.bk-col--c { min-width: 148px; justify-content: center; }
.bk-col-head {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding-bottom: 8px; text-align: center;
}
.bk-col-title { font-family: "Russo One", var(--font-main); font-size: 13px; color: var(--text); }
.bk-bonus {
  font-size: 10px; color: var(--muted);
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(168, 163, 212, 0.2);
  border-radius: 999px; padding: 2px 8px;
}
.bk-bonus--champ { color: #ffd23f; border-color: rgba(255, 210, 63, 0.35); background: rgba(255, 210, 63, 0.1); }

.bk-col-body {
  flex: 1; display: flex; flex-direction: column; justify-content: space-around;
  min-height: 600px; gap: 8px;
}

.bk-match {
  position: relative;
  background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(168, 163, 212, 0.18);
  border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px;
}
.bk-match--empty { opacity: 0.55; border-style: dashed; }
.bk-col--f .bk-match { border-color: rgba(255, 210, 63, 0.45); background: rgba(255, 210, 63, 0.06); }

.bk-team {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text); min-width: 0;
}
.bk-team .team-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.bk-team .team-flag { width: 20px; height: 14px; flex-shrink: 0; }
.bk-score { margin-left: auto; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.bk-q { color: var(--muted); opacity: 0.6; font-weight: 700; }

/* GREEN = advanced / your correct outcome */
.bk-team--win { color: #7CFFB2; }
.bk-team--win .bk-score { color: #7CFFB2; }
/* GOLD = your pick */
.bk-team--pick { }
.bk-team--pick .team-name { text-decoration: underline; text-decoration-color: rgba(255, 210, 63, 0.7); text-underline-offset: 3px; }

.bk-badge {
  position: absolute; top: -7px; right: -6px; font-size: 10px; font-weight: 800;
  border-radius: 999px; padding: 1px 7px; line-height: 1.5;
}
.bk-badge--ok   { background: #16331f; color: #7CFFB2; border: 1px solid rgba(34, 197, 94, 0.5); }
.bk-badge--no   { background: #3a1c22; color: #ff8a9b; border: 1px solid rgba(255, 138, 155, 0.4); }
.bk-badge--pick { background: rgba(255, 210, 63, 0.14); color: #ffd23f; border: 1px solid rgba(255, 210, 63, 0.4); }

@media (max-width: 600px) {
  .bk-col { min-width: 132px; }
  .bk-team { font-size: 11.5px; }
}

/* ══ Режим казика 🎰 (только новый дизайн) ════════════════════════════════════ */

/* Логотип-триггер: намёк, что на него можно нажать */
body.design-v2 #view-main .wc-logo--header {
  cursor: pointer;
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
}
body.design-v2 #view-main .wc-logo--header:hover {
  transform: scale(1.08) rotate(-3deg);
  filter: drop-shadow(0 0 8px rgba(255, 210, 63, 0.7));
}
/* В режиме казика лого ЗАМЕТНО больше + пульсирует золотом (включился лютейший казик) */
body.casino-mode #view-main .wc-logo--header {
  width: 88px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.5), 0 0 22px rgba(255, 210, 63, 0.7);
  animation: casinoLogoPulse 1.3s ease-in-out infinite;
}
@keyframes casinoLogoPulse {
  0%, 100% { transform: scale(1)    rotate(0deg);  filter: drop-shadow(0 0 8px rgba(255, 210, 63, 0.7)); }
  50%      { transform: scale(1.12) rotate(4deg);  filter: drop-shadow(0 0 20px rgba(255, 210, 63, 1)); }
}

/* Радужные переливающиеся обводки карточек */
@keyframes casinoRainbow {
  0%   { border-color: #ff004c; box-shadow: 0 0 16px rgba(255, 0, 76, 0.55); }
  17%  { border-color: #ff9a00; box-shadow: 0 0 16px rgba(255, 154, 0, 0.55); }
  34%  { border-color: #ffe600; box-shadow: 0 0 16px rgba(255, 230, 0, 0.55); }
  50%  { border-color: #27ff64; box-shadow: 0 0 16px rgba(39, 255, 100, 0.55); }
  67%  { border-color: #00d4ff; box-shadow: 0 0 16px rgba(0, 212, 255, 0.55); }
  84%  { border-color: #b14bff; box-shadow: 0 0 16px rgba(177, 75, 255, 0.55); }
  100% { border-color: #ff004c; box-shadow: 0 0 16px rgba(255, 0, 76, 0.55); }
}
body.casino-mode .card,
body.casino-mode .match-row,
body.casino-mode .result-card,
body.casino-mode .bk-match {
  border-width: 2px !important;
  border-style: solid !important;
  animation: casinoRainbow 3.2s linear infinite;
}
/* лёгкий разнобой фаз, чтобы радуга «текла» по сетке карточек */
body.casino-mode .card:nth-child(3n+2),
body.casino-mode .matches-list > .match-row:nth-child(3n+2),
body.casino-mode .match-results-list > .result-card:nth-child(3n+2) { animation-delay: -1.05s; }
body.casino-mode .card:nth-child(3n),
body.casino-mode .matches-list > .match-row:nth-child(3n),
body.casino-mode .match-results-list > .result-card:nth-child(3n)   { animation-delay: -2.1s; }

/* Падающие монеты — единый canvas-оверлей (раньше были 150 fixed-нод, лагало) */
.casino-coin-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9000;
  pointer-events: none;
  user-select: none;
}

/* Огромная кнопка «НАУГАД БЛЯ» */
.casino-roll-btn { display: none; }
body.casino-mode .v2mc-controls .confirm-bet-btn { display: none; }
body.casino-mode .casino-roll-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 18px 12px;
  border: none;
  border-radius: 14px;
  font-family: "Russo One", var(--font-main);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a0033;
  cursor: pointer;
  background: linear-gradient(100deg, #ffd23f, #ff7a00, #ff004c, #b14bff, #00d4ff, #27ff64, #ffd23f);
  background-size: 300% 100%;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 210, 63, 0.6);
  animation: casinoBtnShine 2.4s linear infinite, casinoBtnPulse 1.1s ease-in-out infinite;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}
@keyframes casinoBtnShine { to { background-position: 300% 0; } }
@keyframes casinoBtnPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
body.casino-mode .casino-roll-btn:hover  { filter: brightness(1.08); }
body.casino-mode .casino-roll-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 24px rgba(255,210,63,.6); }
body.casino-mode .casino-roll-btn:disabled { opacity: 0.75; cursor: wait; }

/* ── Слот-машина (оверлей) ─────────────────────────────────────────────────────*/
.casino-slot-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s ease-out;
}
.casino-slot-overlay--in { opacity: 1; }
.casino-slot-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(20, 6, 40, 0.82), rgba(2, 0, 8, 0.95));
  backdrop-filter: blur(3px);
}
.casino-slot-machine {
  position: relative;
  z-index: 1;
  padding: 26px 30px 30px;
  border-radius: 24px;
  text-align: center;
  background: linear-gradient(160deg, #2a0f4d, #14082e);
  border: 3px solid #ffd23f;
  box-shadow: 0 0 0 3px rgba(255, 0, 76, 0.4), 0 24px 70px rgba(0, 0, 0, 0.7), 0 0 50px rgba(255, 210, 63, 0.35);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(.2,1.3,.4,1);
}
.casino-slot-overlay--in .casino-slot-machine { transform: scale(1); }
.casino-slot-title {
  font-family: "Russo One", var(--font-main);
  font-size: 24px;
  color: #ffd23f;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
  text-shadow: 0 0 12px rgba(255, 210, 63, 0.8);
}
.casino-slot-reels {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 14px 18px;
  background: #0a0418;
  border-radius: 16px;
  border: 2px solid rgba(255, 210, 63, 0.4);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
}
.casino-reel {
  position: relative;
  width: 92px; height: 110px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf5, #e9e2ff);
  box-shadow: inset 0 8px 12px rgba(0,0,0,.25), inset 0 -8px 12px rgba(0,0,0,.25);
}
/* лёгкая «засветка» центральной линии барабана */
.casino-reel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 28%, transparent 72%, rgba(0,0,0,.35));
}
.casino-reel-strip { display: flex; flex-direction: column; will-change: transform; }
.casino-reel-digit {
  height: 110px; line-height: 110px;
  font-family: "Russo One", var(--font-main);
  font-size: 68px; font-weight: 800;
  color: #1a0033;
  text-align: center;
}
.casino-slot-colon {
  font-family: "Russo One", var(--font-main);
  font-size: 56px; color: #ffd23f;
  text-shadow: 0 0 10px rgba(255, 210, 63, 0.8);
}
.casino-slot-result {
  margin-top: 18px;
  font-size: 19px; font-weight: 700; color: var(--text);
  min-height: 26px;
}
.casino-slot-result b { color: #ffd23f; font-size: 24px; }
.casino-slot-result--jackpot {
  color: #ffd23f; font-size: 24px;
  animation: casinoBtnPulse 0.5s ease-in-out infinite;
  text-shadow: 0 0 16px rgba(255, 210, 63, 0.9);
}
.casino-slot-actions {
  margin-top: 16px;
  display: flex; gap: 12px; justify-content: center;
}
.casino-slot-actions.hidden { display: none; }
.casino-slot-go, .casino-slot-no {
  padding: 12px 22px;
  border: none; border-radius: 12px;
  font-family: "Russo One", var(--font-main);
  font-size: 16px; cursor: pointer;
}
.casino-slot-go {
  color: #06210f;
  background: linear-gradient(135deg, #27ff64, #16a34a);
  box-shadow: 0 5px 0 rgba(0,0,0,.3), 0 0 20px rgba(39, 255, 100, 0.5);
}
.casino-slot-no {
  color: #fff;
  background: linear-gradient(135deg, #4a4366, #2a2540);
  box-shadow: 0 5px 0 rgba(0,0,0,.3);
}
.casino-slot-go:hover, .casino-slot-no:hover  { filter: brightness(1.12); }
.casino-slot-go:active, .casino-slot-no:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.3); }

/* Барабан игрока (скремблится рядом со счётом) */
.casino-player-roll {
  margin-top: 14px;
  padding: 9px 16px;
  background: #0a0418;
  border: 2px solid rgba(255, 210, 63, 0.4);
  border-radius: 12px;
  font-family: "Russo One", var(--font-main);
  font-size: 18px;
  color: #ffd23f;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.7);
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 280px;
}
.casino-player-name {
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}

/* Эквалайзер в шапке */
.casino-eq { display: none; }
body.casino-mode .casino-eq {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  max-width: 260px;
  height: 56px;
  margin: 0 16px;
  align-self: center;
}
.casino-eq-label { display: none; }
body.casino-mode .casino-eq-label {
  display: block;
  font-family: "Russo One", var(--font-main);
  font-size: 13px;
  letter-spacing: 4px;
  text-align: center;
  line-height: 1;
  margin-bottom: 3px;
  background: linear-gradient(90deg, #ff2e63, #ff9a00, #ffe600, #27ff64, #00d4ff, #b14bff, #ff2e63);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: casinoEqShine 2.4s linear infinite;
}
@keyframes casinoEqShine { to { background-position: 200% center; } }
body.casino-mode .casino-eq canvas {
  flex: 1 1 auto;
  width: 100%; height: 100%;
  display: block;
  filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.4));
}
@media (max-width: 760px) { body.casino-mode .casino-eq { display: none; } }

/* Заставка «CASINO» при включении: разноцветные буквы дугой, появляется → растёт → уходит */
.casino-intro {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.casino-intro-word {
  display: flex;
  font-family: "Russo One", var(--font-main);
  font-size: clamp(54px, 17vw, 220px);
  line-height: 1;
  animation: casinoIntroPop 2s cubic-bezier(.2, 1.2, .3, 1) forwards;
}
.casino-intro-word span {
  display: inline-block;
  /* арка, сбалансированная вокруг центра (--off): надпись стоит ровно по центру окна */
  transform: translateY(calc(var(--off) * 0.13em)) rotate(calc(var(--d) * 9deg));
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.25);
}
@keyframes casinoIntroPop {
  0%   { transform: scale(0.2);  opacity: 0; }
  20%  { transform: scale(1.2);  opacity: 1; }
  35%  { transform: scale(1);    opacity: 1; }
  70%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(0.3);  opacity: 0; }
}

@media (max-width: 560px) {
  .casino-reel { width: 74px; height: 92px; }
  .casino-reel-digit { height: 92px; line-height: 92px; font-size: 56px; }
  .casino-slot-machine { padding: 20px 18px 24px; }
  .casino-slot-title { font-size: 20px; }
  .casino-roll-btn { font-size: 17px; padding: 16px 10px; }
}

/* ── OTS-21: плей-офф — раздельные предсказания (исход / счёт / игрок / пенальти) ── */
/* Блок появляется только на карточках матчей плей-офф, под полем «лучший игрок». */
/* OTS-21 плей-офф: «кто пройдёт дальше» выбирается прямо в шапке — сами команды
   на уровне со счётом становятся кнопками. Выбранная подсвечена акцентом. */
body.design-v2 .v2mc .v2rc-t.v2mc-side-btn {
  justify-content: center;
  padding: 7px 8px; min-height: 38px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: transparent; cursor: pointer;
  transition: var(--transition-fast);
}
body.design-v2 .v2mc .v2rc-t.v2mc-side-btn:hover { border-color: var(--accent); }
body.design-v2 .v2mc .v2rc-t.v2mc-side-btn:hover .team-name { color: var(--accent); }
body.design-v2 .v2mc .v2rc-t.v2mc-side-btn--on {
  justify-content: center;
  padding: 7px 8px; min-height: 38px;
  border: 1px solid var(--accent); border-radius: var(--radius-md);
  background: var(--accent-soft);
}
body.design-v2 .v2mc .v2rc-t.v2mc-side-btn--on .team-name { color: var(--accent); }
@keyframes v2mcSidePulse {
  0%, 100% { border-color: var(--border); box-shadow: none; }
  50% { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
}
body.design-v2 .v2mc .v2rc-t.v2mc-side-btn--pulse { animation: v2mcSidePulse 0.45s ease-in-out 3; }

/* Админ-ввод факта плей-офф (кто прошёл + была ли серия пенальти) */
.actual-playoff { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.actual-winner-select {
  height: 38px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-softer); color: var(--text); font-family: inherit; font-size: 13px;
}
.actual-winner-select:focus { outline: none; border-color: var(--accent); }
.actual-pen-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.actual-pen-label input { accent-color: var(--accent); }

/* Результат-карточка плей-офф: кто прошёл + разбивка ставки юзера */
body.design-v2 .v2rc-advanced { font-size: 12px; color: var(--muted); }
body.design-v2 .v2rc-advanced .team-flag { vertical-align: middle; }
body.design-v2 .v2rc-breakdown {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px;
  padding: 8px 8px 2px; font-size: 12px; color: var(--muted);
}
body.design-v2 .v2rc-bd-item { display: inline-flex; align-items: center; gap: 5px; }
body.design-v2 .v2rc-bd-ok { color: var(--accent); font-weight: 700; }
body.design-v2 .v2rc-bd-no { color: var(--muted); font-weight: 700; }