:root {
  --bg:            #f0f2f5;
  --card-bg:       #ffffff;
  --text:          #1a1a1a;
  --text-muted:    #666;
  --border:        #dcdfe4;

  /* stavy závodu: 0 čeká, 1 běží, 2 v cíli */
  --wait:          #9aa0a6;
  --wait-bg:       #f1f3f4;
  --run:           #1e8e3e;
  --run-bg:        #e6f4ea;
  --done:          #1a73e8;
  --done-bg:       #e8f0fe;

  --dnx:           #d93025;
  --dnx-bg:        #fce8e6;
}

* { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; padding: 0; margin: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  padding: 10px;
  max-width: 1100px;
  margin: 0 auto;
  line-height: 1.4;
}

/* ---------- Header ---------- */
#header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 6px 4px 12px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 14px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

#header h1 {
  font-size: 1.25rem;
  font-weight: 700;
}

#clock {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text);
}

/* ---------- Cards grid ---------- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 6px solid var(--wait);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* barevné odlišení podle stavu */
.card--state0 { border-left-color: var(--wait); }
.card--state1 { border-left-color: var(--run);  }
.card--state2 { border-left-color: var(--done); }

.card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.card__num {
  flex: 0 0 auto;
  min-width: 2em;
  height: 2em;
  padding: 0 .4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--text);
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1.05rem;
}

.card__name {
  flex: 1 1 auto;
  font-size: 1.15rem;
  font-weight: 700;
}

.card__state {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  background: var(--wait-bg);
  color: var(--wait);
}
.card--state1 .card__state { background: var(--run-bg);  color: var(--run);  }
.card--state2 .card__state { background: var(--done-bg); color: var(--done); }

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 10px;
}

.chip {
  background: var(--bg);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: .9rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.chip__label {
  color: var(--text-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.card__numbers {
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 10px;
}
.card__numbers-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.card__numbers-list {
  font-size: 1.2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  word-spacing: .15em;
  line-height: 1.5;
}

.card__dnx {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--dnx-bg);
  border-radius: 8px;
}
.card__dnx-label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--dnx);
  font-weight: 700;
  margin-bottom: 3px;
}
.card__dnx-list {
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  word-spacing: .15em;
  color: var(--dnx);
}

/* ---------- Indikátor spojení ---------- */
.conn {
  position: sticky;
  top: 52px;
  z-index: 9;
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: .95rem;
  text-align: center;
}
.conn--error {
  background: var(--dnx-bg);
  color: var(--dnx);
  box-shadow: inset 0 0 0 2px var(--dnx);
}
.conn--ok {
  background: var(--run-bg);
  color: var(--run);
}

/* ---------- Gender akcent názvu kategorie ---------- */
/* 0 = muži (modrá), 1 = ženy (červená) */
.card--gender0 .card__name,
.card--gender0 .card__num { --accent: #1f5fbf; }
.card--gender1 .card__name,
.card--gender1 .card__num { --accent: #d0102e; }

.card__name { color: var(--accent, var(--text)); }
.card__num  { background: var(--accent, var(--text)); }

/* ---------- Barva startovního čísla (čtvereček v čtverečku) ---------- */
.bib {
  display: inline-block;
  vertical-align: middle;
  align-self: stretch;
  margin-left: auto;
  width: 26px;
  aspect-ratio: 1;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  position: relative;
}
.bib__in {
  position: absolute;
  inset: 7px;
  border-radius: 1px;
}

/* paleta – odstíny podle core.js (CONFIG.colors) */
.bib--bg-black  { background: #2b2b2b; }
.bib--bg-white  { background: #ffffff; }
.bib--bg-red    { background: #d0102e; }
.bib--bg-yellow { background: #ffd500; }
.bib--bg-blue   { background: #1f5fbf; }
.bib--bg-green  { background: #a2cd39; }
.bib--bg-violet { background: #7b2d8e; }
.bib--bg-orange { background: #f28c28; }
.bib--bg-pink   { background: #ef7fb0; }
.bib--bg-gray   { background: #8a8a8a; }
.bib--bg-brown  { background: #7a4a23; }

/* ---------- Summary & footer ---------- */
.summary {
  margin: 16px 4px;
  color: var(--text-muted);
  font-size: .95rem;
}

#footer {
  text-align: center;
  padding: 10px 0;
  margin-top: 16px;
  color: var(--text-muted);
  font-size: .8rem;
  border-top: 1px solid var(--border);
}

/* ---------- Desktop: více sloupců ---------- */
@media (min-width: 720px) {
  body { padding: 16px; }
  #header h1 { font-size: 1.5rem; }
  #clock { font-size: 1.8rem; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (min-width: 1000px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}