/* Главная для гостя: табло и разметка корта.
   Табло — механический «одометр»: каждая цифра — колонка 0–9, при загрузке
   прокручивается до значения (--d). Без JS: итоговое положение то же. */
.court-hero { position: relative; overflow: hidden; isolation: isolate; }
.court-lines { position: absolute; inset: 0; z-index: -1; pointer-events: none; color: rgb(var(--c-ink) / .16); }
/* Разметка гаснет под заголовком и текстом: линии не должны резать буквы. */
.court-lines { -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 24%, #000 50%);
  mask-image: linear-gradient(to right, transparent 0, transparent 24%, #000 50%); }
.court-net { stroke: rgb(var(--c-ink) / .55); }
.court-lines svg { position: absolute; right: -2%; top: 50%; width: min(120vw, 1000px); transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) { .court-ball { display: none; } }

.score-board { display: inline-grid; gap: 0; border: 2px solid rgb(var(--c-ink) / .9); border-radius: 6px;
  background: rgb(var(--c-bg)); box-shadow: 8px 8px 0 rgb(var(--c-or)); }
.score-cell { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 1.1rem;
  padding: .9rem 1.2rem; }
.score-cell + .score-cell { border-top: 2px solid rgb(var(--c-ink) / .9); }
.score-digits { display: inline-flex; gap: 3px; font-family: Unbounded, "Golos Text", sans-serif; font-weight: 800;
  font-size: clamp(2rem, 7vw, 3.1rem); line-height: 1.15; font-variant-numeric: tabular-nums; }
.score-digit { position: relative; display: block; height: 1.15em; width: .82em; overflow: hidden; text-align: center;
  background: rgb(var(--c-ink)); color: rgb(var(--c-bg)); border-radius: 4px; }
.score-digit::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: rgb(var(--c-bg) / .75); }
.score-col { display: block; transform: translateY(calc(var(--d) * -1.15em)); }
.score-col span { display: block; height: 1.15em; }
@media (prefers-reduced-motion: no-preference) {
  .score-col { animation: score-roll 1.6s cubic-bezier(.2,.8,.15,1) both; animation-delay: calc(var(--i) * 140ms + .5s); }
}
@keyframes score-roll { from { transform: translateY(0); } }
.score-label { font-size: .875rem; line-height: 1.25; color: rgb(var(--c-sub));  }
.score-label b { display: block; color: rgb(var(--c-ink)); font-weight: 700; font-size: 1rem; }
.score-pulse { width: .55rem; height: .55rem; border-radius: 50%; background: rgb(var(--c-or)); display: inline-block; margin-right: .4rem; }
@media (prefers-reduced-motion: no-preference) {
  .score-pulse { animation: score-ping 1.8s ease-out infinite; }
}
@keyframes score-ping { 0% { box-shadow: 0 0 0 0 rgb(var(--c-or) / .55); } 70%, 100% { box-shadow: 0 0 0 .6rem rgb(var(--c-or) / 0); } }

/* Телефон: разметка корта фоном, а не поверх текста. */
@media (max-width: 640px) {
  .court-lines { color: rgb(var(--c-ink) / .10); -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 55%, #000 85%);
    mask-image: linear-gradient(to bottom, transparent 0, transparent 55%, #000 85%); }
  .court-lines svg { right: -30%; top: auto; bottom: -5%; transform: none; width: 140vw; }
  .court-ball { display: none; }
}