.stats-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px clamp(14px, 3vw, 40px) 44px;
  display: grid;
  gap: 18px;
}
.stats-cards {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}
.stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
  min-width: 0;
}
.stat-card span { display:block; color:var(--muted); font-size:.76rem; font-weight:750; margin-bottom:6px; }
.stat-card strong { display:block; font-size:1.55rem; line-height:1.1; }
.stats-panel { padding:18px; }
.stats-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:14px; }
.stats-heading h2 { margin:0; font-size:1.1rem; }
.form-strip { display:flex; gap:7px; flex-wrap:wrap; }
.form-dot {
  width:34px; height:34px; border-radius:50%;
  display:inline-grid; place-items:center; font-size:.78rem; font-weight:900;
  border:1px solid var(--line);
}
.form-win { background:#e7f6eb; color:var(--yes); border-color:#a9dab6; }
.form-loss { background:#fdebea; color:var(--no); border-color:#e6b1ad; }
.form-draw { background:#eef1f5; color:#626d7d; border-color:#d6dce4; }
.table-wrap { overflow-x:auto; }
.stats-table { width:100%; border-collapse:collapse; min-width:720px; }
.stats-table th, .stats-table td { padding:10px 9px; border-bottom:1px solid var(--line); text-align:left; font-size:.83rem; }
.stats-table th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
.match-result { display:inline-flex; min-width:48px; justify-content:center; padding:5px 8px; border-radius:999px; font-weight:900; }
.stats-error { padding:0 4px; }
@media (max-width: 1000px) { .stats-cards { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 620px) {
  .stats-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats-heading { align-items:flex-start; flex-direction:column; }
}
@media (prefers-color-scheme: dark) {
  .form-win { background:#173a24; color:#9de0ad; border-color:#2e6540; }
  .form-loss { background:#4a211f; color:#ffb0aa; border-color:#7a3732; }
  .form-draw { background:#252d39; color:#b4bdca; border-color:#3b4655; }
}


/* ===== Mobilní statistiky ===== */
@media (max-width: 700px) {
  body {
    overflow-x: hidden;
  }

  .topbar {
    padding: 16px 14px;
    gap: 12px;
  }

  .topbar h1 {
    font-size: 1.5rem;
    line-height: 1.08;
  }

  .top-actions {
    width: 100%;
  }

  .top-actions .button {
    width: 100%;
    min-height: 44px;
  }

  .stats-layout {
    padding: 12px 10px 32px;
    gap: 12px;
  }

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

  .stat-card {
    padding: 12px;
    border-radius: 12px;
  }

  .stat-card span {
    font-size: .7rem;
    margin-bottom: 4px;
  }

  .stat-card strong {
    font-size: 1.35rem;
  }

  /* Poslední karta využije celou šířku, pokud je počet karet lichý. */
  .stat-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .stats-panel {
    padding: 13px;
    border-radius: 14px;
  }

  .stats-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 10px;
  }

  .stats-heading h2 {
    font-size: 1rem;
  }

  .form-strip {
    width: 100%;
    gap: 8px;
  }

  .form-dot {
    width: 38px;
    height: 38px;
  }

  /* Na mobilu místo široké tabulky zobrazíme jednotlivé řádky jako karty. */
  .table-wrap {
    overflow: visible;
  }

  .stats-table {
    min-width: 0;
    width: 100%;
  }

  .stats-table thead {
    display: none;
  }

  .stats-table,
  .stats-table tbody {
    display: block;
  }

  .stats-table tbody {
    display: grid;
    gap: 9px;
  }

  .stats-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }

  .stats-table td {
    min-width: 0;
    padding: 0;
    border-bottom: 0;
    font-size: .84rem;
    overflow-wrap: anywhere;
  }

  .stats-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .045em;
  }

  /* Název soutěže přes celou šířku. */
  #competition-body td:first-child {
    grid-column: 1 / -1;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }

  /* U historie je soupeř hlavní informace a výsledek je vedle něj výrazný. */
  #matches-body tr {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #matches-body td:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
    font-size: .96rem;
  }

  #matches-body td:nth-child(4) {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    text-align: right;
  }

  #matches-body td:nth-child(1),
  #matches-body td:nth-child(3),
  #matches-body td:nth-child(5) {
    grid-column: 1 / -1;
  }

  #matches-body td:nth-child(1),
  #matches-body td:nth-child(3),
  #matches-body td:nth-child(5) {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
  }

  #matches-body td:nth-child(1)::before,
  #matches-body td:nth-child(3)::before,
  #matches-body td:nth-child(5)::before {
    margin-bottom: 0;
  }

  .match-result {
    min-width: 54px;
    padding: 6px 9px;
    font-size: .92rem;
  }

  .stats-table tr:has(.empty) {
    display: block;
  }

  .stats-table .empty {
    display: block;
    padding: 12px 4px;
  }

  .stats-table .empty::before {
    display: none;
  }
}

@media (max-width: 360px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }

  .stat-card:last-child:nth-child(odd) {
    grid-column: auto;
  }

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

  #matches-body tr {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}