/* Dagstand: stadion-scorebord met LED-cijfers, schijnwerpers en een lichtkrant. */

.celebration[data-mode="dayrecap"] { --c1: #0a1428; --c2: #ffb000; --c3: #ffe7a8; --glow: rgb(255 176 0 / .8); }

.cel-dayrecap-scene {
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 110%, rgb(34 197 94 / .25), transparent 60%), rgb(3 7 16 / .6);
}

.cel-dayrecap-light {
  position: absolute; top: -12vh; width: 60vh; height: 140vh; opacity: 0;
  background: conic-gradient(from 168deg at 50% 0%, transparent 0deg, rgb(255 250 220 / .2) 8deg, rgb(255 250 220 / .32) 12deg, rgb(255 250 220 / .2) 16deg, transparent 24deg);
  transform-origin: 50% 0;
}
.cel-dayrecap-light::before {
  content: ""; position: absolute; left: 50%; top: 9vh; width: 14vh; height: 6vh; translate: -50% 0; border-radius: 1vh;
  background: radial-gradient(ellipse, #fff, #fef3c7 40%, #78716c 75%); box-shadow: 0 0 6vh 2vh rgb(255 250 220 / .7);
}
.cel-dayrecap-light.is-left { left: -10vh; rotate: -24deg; }
.cel-dayrecap-light.is-right { right: -10vh; rotate: 24deg; }
.cel-dayrecap-light.is-on { opacity: 1; animation: cel-dayrecap-sweep 5s ease-in-out infinite alternate; }
.cel-dayrecap-light.is-right.is-on { animation-direction: alternate-reverse; }
@keyframes cel-dayrecap-sweep { from { rotate: -30deg; } to { rotate: 22deg; } }
.cel-dayrecap-light.is-right { scale: -1 1; }

.cel-dayrecap-board {
  position: absolute; left: 50%; top: 6vh; width: min(90vw, 160vh); height: 86vh; margin-left: max(-45vw, -80vh);
  display: flex; flex-direction: column; gap: 1.6vh; padding: 2vh 2.4vh; border-radius: 2vh; overflow: hidden;
  background: linear-gradient(180deg, #0b0f19, #05070d);
  border: .8vh solid #1f2937;
  box-shadow: 0 0 0 .3vh #4b5563, 0 3vh 8vh rgb(0 0 0 / .8), 0 0 8vh rgb(255 176 0 / .18);
}
.cel-dayrecap-dots {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, transparent .16vh, rgb(0 0 0 / .45) .24vh) 0 0 / .55vh .55vh;
}
.cel-dayrecap-board.is-live::after {
  content: ""; position: absolute; left: 0; right: 0; height: 18vh; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(255 255 255 / .05), transparent);
  animation: cel-dayrecap-scan 3.5s linear infinite;
}
@keyframes cel-dayrecap-scan { from { top: -20vh; } to { top: 100%; } }

.cel-dayrecap-head {
  flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 1vh;
  border-bottom: .3vh solid rgb(255 176 0 / .35); padding-bottom: 1vh;
}
.cel-dayrecap-title { font-size: 5.2vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #ffb000; text-shadow: 0 0 2vh rgb(255 176 0 / .8); }
.cel-dayrecap-clock { font-size: 2.8vh; font-weight: 700; letter-spacing: .12em; color: #67e8f9; text-shadow: 0 0 1.4vh rgb(103 232 249 / .7); font-variant-numeric: tabular-nums; }

.cel-dayrecap-score { flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2vh; }
.cel-dayrecap-side { display: flex; flex-direction: column; align-items: center; }
.cel-dayrecap-side-label { font-size: 2.8vh; font-weight: 700; letter-spacing: .35em; text-transform: uppercase; color: #94a3b8; }
.cel-dayrecap-big {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 20vh; font-weight: 700; line-height: 1;
  color: #ffb000; font-variant-numeric: tabular-nums; text-shadow: 0 0 3vh rgb(255 176 0 / .9), 0 0 .8vh #fff3c4;
}
.is-yesterday .cel-dayrecap-big { font-size: 13vh; color: #78716c; text-shadow: 0 0 2vh rgb(120 113 108 / .6); }
.cel-dayrecap-score.is-solo { grid-template-columns: 1fr auto; }
.cel-dayrecap-score.is-solo .is-yesterday { display: none; }
.cel-dayrecap-mid { display: flex; flex-direction: column; align-items: center; gap: 1.6vh; min-width: 26vh; }
.cel-dayrecap-unit { font-size: 3vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #fde68a; }
.cel-dayrecap-delta {
  min-height: 7vh; padding: .6vh 2.6vh; border-radius: 1.2vh; opacity: 0;
  font-size: 5.4vh; font-weight: 700; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cel-dayrecap-delta.is-up { color: #052e16; background: #22c55e; box-shadow: 0 0 4vh rgb(34 197 94 / .8); }
.cel-dayrecap-delta.is-down { color: #fff; background: #dc2626; box-shadow: 0 0 3vh rgb(220 38 38 / .6); }
.cel-dayrecap-delta.is-even { color: #0a1428; background: #94a3b8; }

.cel-dayrecap-tiles { flex: 0 0 auto; display: flex; gap: 1.4vh; perspective: 60vh; min-height: 14vh; }
.cel-dayrecap-tile {
  flex: 1 1 0; min-width: 0; padding: 1.2vh 1vh; border-radius: 1.2vh; text-align: center;
  background: linear-gradient(180deg, #111827, #0b0f19); border: .25vh solid rgb(56 189 248 / .4);
  box-shadow: inset 0 0 2vh rgb(56 189 248 / .12);
}
.cel-dayrecap-tile-num { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 7vh; font-weight: 700; line-height: 1; color: #67e8f9; text-shadow: 0 0 2vh rgb(103 232 249 / .8); font-variant-numeric: tabular-nums; }
.cel-dayrecap-tile-label { margin-top: .8vh; font-size: 2.3vh; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cel-dayrecap-panels { flex: 1 1 auto; min-height: 0; display: flex; gap: 1.6vh; }
.cel-dayrecap-panel {
  flex: 1 1 0; min-width: 0; visibility: hidden; display: flex; flex-direction: column; gap: 1vh;
  padding: 1.4vh 2vh; border-radius: 1.4vh; background: linear-gradient(180deg, #13182a, #0b0f19);
  border: .25vh solid rgb(255 176 0 / .45);
}
.cel-dayrecap-panel-kicker { font-size: 2.4vh; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ffb000; }
.cel-dayrecap-panel.is-team { flex-grow: 1.25; }
.cel-dayrecap-team { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1vh; min-height: 0; }
.cel-dayrecap-team-faces { flex: 0 0 auto; display: flex; gap: 1.2vh; overflow: hidden; padding-top: .4vh; }
.cel-dayrecap-mate { flex: 0 0 8.4vh; display: flex; flex-direction: column; align-items: center; gap: .5vh; opacity: 0; }
.cel-dayrecap-mate-face { width: 7vh; height: 7vh; font-size: 2.6vh; box-shadow: 0 0 0 .3vh #ffb000; }
.cel-dayrecap-mate-name { max-width: 100%; font-size: 1.9vh; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel-dayrecap-mate.is-more { flex-basis: 7vh; height: 7vh; justify-content: center; border-radius: 50%; font-size: 2.6vh; font-weight: 700; color: #ffd84d; background: rgb(255 176 0 / .15); box-shadow: inset 0 0 0 .3vh rgb(255 176 0 / .6); }
.cel-dayrecap-panel.is-team.is-thanked .cel-dayrecap-mate-face { box-shadow: 0 0 0 .3vh #ffd84d, 0 0 2.4vh rgb(255 216 77 / .6); }
/* Het aantal staat rechts naast de kop, zodat de namen onder de gezichten passen. */
.cel-dayrecap-panel.is-team { position: relative; }
.cel-dayrecap-team-count { position: absolute; right: 2vh; top: 1.4vh; font-size: 2.4vh; font-weight: 700; line-height: 1.2; color: #ffd84d; white-space: nowrap; }
.cel-dayrecap-heavy { flex: 1; display: flex; align-items: center; gap: 2.4vh; min-height: 0; }
.cel-dayrecap-heavy-num {
  flex: 0 0 auto; width: 13vh; height: 13vh; border-radius: 1.4vh; display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 8vh; font-weight: 700; color: #0b0f19;
  background: linear-gradient(180deg, #ffd84d, #ffb000); box-shadow: 0 0 3vh rgb(255 176 0 / .6);
}
.cel-dayrecap-heavy-num::after { content: "pt"; font-size: 2.6vh; margin-left: .3vh; align-self: flex-end; margin-bottom: 2.6vh; }
.cel-dayrecap-heavy-text { min-width: 0; }
.cel-dayrecap-heavy-title { font-size: 3vh; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.cel-dayrecap-ticker {
  flex: 0 0 6vh; overflow: hidden; display: flex; align-items: center; border-radius: 1vh;
  background: #000; border: .25vh solid rgb(255 176 0 / .3); opacity: .25; transition: opacity .4s;
}
.cel-dayrecap-ticker.is-on { opacity: 1; }
.cel-dayrecap-ticker-run { display: flex; white-space: nowrap; animation: cel-dayrecap-marquee 9s linear infinite; }
.cel-dayrecap-ticker-run span { padding-right: 4vh; font-size: 3.2vh; font-weight: 700; letter-spacing: .08em; color: #ffb000; text-shadow: 0 0 1.4vh rgb(255 176 0 / .8); }
@keyframes cel-dayrecap-marquee { from { translate: 0 0; } to { translate: -50% 0; } }