/* The round bar. Sits above the marquee on a game page, inline on the clubhouse.
   Tokens only — no values that aren't in assets/tokens.css. */

.round-bar {
  position: fixed; left: 0; right: 0; bottom: 44px; z-index: 8;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px var(--gutter);
  background: rgba(6, 26, 16, .82);
  border-top: 1px solid var(--hair);
  backdrop-filter: blur(6px);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-mute);
}
body.has-round-bar .marquee { bottom: 0; }
body.has-round-bar main { padding-bottom: 150px; }

.round-where { color: var(--text); }
.round-par,
.round-note { color: var(--text-mute); }
.round-lbl { margin-right: 8px; }

.round-score { display: inline-flex; align-items: center; gap: 6px; }
.round-step {
  font: inherit; width: 30px; height: 30px; cursor: pointer;
  color: var(--text); background: var(--panel);
  border: 1px solid var(--hair);
}
.round-step:hover { border-color: var(--text-dim); color: var(--accent); }
.round-value {
  min-width: 26px; text-align: center; color: var(--accent);
  font-size: 15px; letter-spacing: 0;
}

.round-card { color: var(--text); }
.round-card.under { color: var(--green); }
.round-card.over  { color: var(--coral); }

.round-next {
  font-family: var(--display); font-weight: var(--display-weight); font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 20px; cursor: pointer; margin-left: auto;
  background: var(--accent); color: var(--on-accent);
  border: 1.5px solid var(--accent);
}
.round-next:hover { background: var(--accent-hover); }
.round-next:active { transform: translateY(2px); }
.round-next[disabled] { opacity: .35; cursor: not-allowed; }
.round-next[disabled]:active { transform: none; }

.round-quit {
  font: inherit; cursor: pointer; padding: 10px 12px;
  color: var(--text-mute); background: none; border: 1px solid var(--hair);
}
.round-quit:hover { color: var(--coral); border-color: var(--coral); }

/* On the clubhouse the bar is part of the page, not fixed chrome. */
.round-bar--home {
  position: static; margin-top: 30px; max-width: 34rem;
  background: var(--panel); border: 1px solid var(--hair);
  backdrop-filter: none; padding: 16px 18px;
  animation: fadeup .8s ease both; animation-delay: 1.15s;
}
.round-bar--home .round-next { margin-left: 0; }

/* The finished card. */
.round-done {
  margin-top: 30px; max-width: 34rem;
  border: 1px solid var(--hair); background: var(--panel);
  padding: 20px 22px 18px;
  animation: fadeup .8s ease both;
}
.round-done-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.round-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
}
.round-table th, .round-table td {
  padding: 7px 4px; text-align: center;
  border-bottom: 1px solid var(--hair); color: var(--text-mute);
}
.round-table th { color: var(--text-dim); font-weight: 400; }
.round-table th:first-child { text-align: left; color: var(--text-mute); }
.round-table td.under { color: var(--green); }
.round-table td.over  { color: var(--coral); }
.round-table .tot { color: var(--accent); }
.round-done-score {
  margin-top: 14px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text);
}
.round-done .round-next { margin-top: 16px; }

@media (max-width: 820px) {
  .round-bar { gap: 10px; padding: 10px 16px; font-size: 10px; bottom: 42px; }
  .round-next { width: 100%; margin-left: 0; }
  .round-quit { margin-left: auto; }
  body.has-round-bar main { padding-bottom: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .round-bar--home, .round-done { animation: none; opacity: 1; transform: none; }
  .round-next:active { transform: none; }
}