/* Dagstand-show "Bedankt, team!": iedereen even groot op een rij, het teamtotaal eronder. Linksonder ruimte voor Octie. */

.celebration[data-mode="show-podium"] { --c1: #1a1205; --c2: #ffb000; --c3: #fde68a; --glow: rgb(255 176 0 / .55); }

.cel-show-podium-scene {
  --accent: #ffb000; --accent-glow: rgb(255 176 0 / .7); --accent-soft: rgb(255 176 0 / .16); --face: 15vh;
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, #060a14, #0b1222 60%, #04060c);
}
.cel-show-podium-scene.is-support { --accent: #4ade80; --accent-glow: rgb(74 222 128 / .7); --accent-soft: rgb(74 222 128 / .14); }

.cel-show-podium-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40vh;
  background:
    radial-gradient(ellipse 50% 60% at 50% 0%, rgb(255 255 255 / .08), transparent 70%),
    linear-gradient(180deg, #111827, #05070d);
  border-top: .3vh solid rgb(255 255 255 / .1);
}

/* Schijnwerpers: een lamp boven in beeld met een lichtbundel die draait. */
.cel-show-podium-rig { position: absolute; top: -2vh; width: 0; height: 0; z-index: 1; }
.cel-show-podium-rig.is-left { left: 10vw; }
.cel-show-podium-rig.is-right { left: 90vw; }
.cel-show-podium-rig::after {
  content: ""; position: absolute; left: -6vh; top: -2vh; width: 12vh; height: 6vh; border-radius: 0 0 6vh 6vh;
  background: radial-gradient(ellipse at 50% 100%, #fff, #fef3c7 35%, #57534e 75%);
  box-shadow: 0 0 5vh 1.5vh rgb(255 250 220 / .6);
}
.cel-show-podium-beam {
  position: absolute; left: -22vh; top: 0; width: 44vh; height: 130vh; transform-origin: 50% 0; opacity: 0;
  background: linear-gradient(180deg, rgb(255 250 220 / .45), rgb(255 250 220 / .14) 55%, transparent 90%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen; transition: opacity .25s;
}
.cel-show-podium-beam.is-on { opacity: 1; }

.cel-show-podium-head { position: absolute; left: 0; right: 0; top: 3.5vh; text-align: center; z-index: 2; opacity: 0; }
.cel-show-podium-kicker { font-size: 3vh; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 2vh var(--accent-glow); }
.cel-show-podium-title { display: inline-block; font-family: var(--font-brand); font-size: 10vh; line-height: 1.05; color: #fff; text-shadow: 0 .5vh 0 rgb(0 0 0 / .6), 0 0 4vh var(--accent-glow); }

/* Het team: iedereen dezelfde kaart, op naam gesorteerd. */
.cel-show-podium-team {
  position: absolute; left: 4vw; right: 4vw; top: 23vh; height: 36vh; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vh;
}
.cel-show-podium-row { display: flex; align-items: flex-start; justify-content: center; gap: 2.6vh; }
.cel-show-podium-card {
  width: calc(var(--face) + 9vh); padding: 2.2vh 1.4vh 1.8vh; border-radius: 2.4vh;
  display: flex; flex-direction: column; align-items: center; visibility: hidden;
  background: linear-gradient(180deg, rgb(30 41 59 / .9), rgb(15 23 42 / .92));
  border: .3vh solid rgb(148 163 184 / .35); box-shadow: 0 1.4vh 3.4vh rgb(0 0 0 / .55);
  transition: border-color .5s, box-shadow .5s;
  animation: cel-show-podium-float 3.6s ease-in-out infinite;
}
/* Allemaal op één lijn; ze dobberen alleen een beetje, elk op een eigen moment. */
.cel-show-podium-card:nth-child(3n+2) { animation-delay: -1.2s; }
.cel-show-podium-card:nth-child(3n) { animation-delay: -2.4s; }
@keyframes cel-show-podium-float { 50% { translate: 0 -.9vh; } }
.cel-show-podium-face {
  width: var(--face); height: var(--face); font-size: calc(var(--face) * .36);
  box-shadow: 0 0 0 .5vh rgb(203 213 225 / .55), 0 1vh 2.4vh rgb(0 0 0 / .5);
  transition: box-shadow .5s;
}
.cel-show-podium-first {
  margin-top: 1.4vh; max-width: 100%; font-size: calc(var(--face) * .27); font-weight: 700; line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 .4vh 1vh rgb(0 0 0 / .7);
}
.cel-show-podium-last {
  max-width: 100%; min-height: 1.2em; font-size: max(2.1vh, calc(var(--face) * .15)); font-weight: 500; color: #cbd5e1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cel-show-podium-card.is-lit { border-color: var(--accent); box-shadow: 0 0 5vh var(--accent-glow), 0 1.4vh 3.4vh rgb(0 0 0 / .55); }
.cel-show-podium-card.is-lit .cel-show-podium-face { box-shadow: 0 0 0 .6vh var(--accent), 0 0 5vh var(--accent-glow); }

/* Teamtotaal */
.cel-show-podium-total {
  position: absolute; left: 0; right: 0; top: 62vh; z-index: 2; visibility: hidden;
  display: flex; align-items: center; justify-content: center; gap: 5vh;
}
.cel-show-podium-stat { display: flex; flex-direction: column; align-items: center; }
.cel-show-podium-num {
  display: inline-block; font-family: var(--font-brand); font-size: 17vh; line-height: .95; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 1vh 0 rgb(0 0 0 / .45), 0 0 5vh var(--accent-glow);
}
.cel-show-podium-unit { font-size: 3.6vh; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.cel-show-podium-dot { font-size: 12vh; line-height: 1; color: rgb(255 255 255 / .4); padding-bottom: 5vh; }

.cel-show-podium-line {
  position: absolute; left: 0; right: 0; top: 88vh; z-index: 2; text-align: center;
  font-size: 4.2vh; font-weight: 700; color: #fff; text-shadow: 0 .4vh 1vh rgb(0 0 0 / .7);
}

/* Meer dan zes mensen: twee rijen, het totaal schuift wat omlaag. */
.cel-show-podium-scene.is-crowd .cel-show-podium-team { top: 21vh; height: 47vh; }
.cel-show-podium-scene.is-crowd .cel-show-podium-total { top: 70vh; }
.cel-show-podium-scene.is-crowd .cel-show-podium-num { font-size: 12vh; }
.cel-show-podium-scene.is-crowd .cel-show-podium-dot { font-size: 9vh; padding-bottom: 3.6vh; }
.cel-show-podium-scene.is-crowd .cel-show-podium-line { top: 91vh; font-size: 3.6vh; }