/* Sprint-eindstand: stadionscorebord. */

.celebration[data-mode="sprint"] { --c1: #052e16; --c2: #16a34a; --c3: #fde047; --glow: rgb(250 204 21 / .5); }

.cel-sprint-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cel-board {
  width: min(90vw, 150vh); padding: 3vh 4vh; border-radius: 2vh;
  background:
    radial-gradient(circle, rgb(255 255 255 / .04) 1px, transparent 1.5px) 0 0 / .8vh .8vh,
    linear-gradient(180deg, #0a0a0a, #111827);
  border: .6vh solid #27272a; box-shadow: 0 0 0 .3vh #52525b, 0 3vh 6vh rgb(0 0 0 / .7), 0 0 6vh rgb(250 204 21 / .25);
}
.cel-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2vh; }
.cel-board-kicker {
  font-family: ui-monospace, Menlo, monospace; font-size: 5vh; font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
  color: #fde047; text-shadow: 0 0 2vh #facc15;
}
.cel-board-title { font-size: 3vh; font-weight: 700; color: #e5e7eb; }

.cel-board-score { margin-top: 2vh; display: flex; align-items: center; gap: 4vh; }
.cel-score { text-align: center; }
.cel-score-value {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13vh; font-weight: 700; line-height: 1;
  color: #fff; text-shadow: 0 0 2vh #fde047; font-variant-numeric: tabular-nums;
}
.cel-score.is-prev .cel-score-value { font-size: 7vh; color: #a1a1aa; text-shadow: none; }
.cel-score-label { margin-top: .6vh; font-size: 1.9vh; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #a1a1aa; }
.cel-score-vs { font-size: 3vh; font-weight: 700; color: #52525b; }
.cel-score-delta { margin-left: auto; font-size: 5vh; font-weight: 700; opacity: 0; }
.cel-score-delta.is-up { color: #4ade80; text-shadow: 0 0 2vh #22c55e; }
.cel-score-delta.is-down { color: #f87171; }

.cel-board-chart { margin-top: 2vh; height: 18vh; border-bottom: .3vh solid #3f3f46; }
.cel-board-chart svg { width: 100%; height: 100%; display: block; }
.cel-chart-line { fill: none; stroke: #fde047; stroke-width: 4; stroke-linejoin: round; filter: drop-shadow(0 0 6px #facc15); }
.cel-chart-area { fill: rgb(250 204 21 / .15); }

.cel-board-tiles { margin-top: 2.4vh; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6vh; perspective: 80vh; }
.cel-tile {
  padding: 1.6vh 1.8vh; border-radius: 1.2vh; background: rgb(255 255 255 / .05); border: .25vh solid #3f3f46; transform-origin: 50% 0;
}
.cel-tile-label { font-size: 1.6vh; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fde047; }
.cel-tile-row { margin-top: .8vh; display: flex; align-items: center; gap: 1vh; }
.cel-tile-face { width: 5vh; height: 5vh; font-size: 1.8vh; box-shadow: 0 0 0 .3vh #fde047; }
.cel-tile-value { font-size: 3vh; font-weight: 700; line-height: 1.15; }
.cel-tile-sub {
  margin-top: .6vh; font-size: 1.6vh; color: #a1a1aa;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}