/* Eindstand support: scorebord in schakelbordstijl dat aan het eind uitgaat. Links ~27vw vrij voor de octopus. */

.celebration[data-mode="supportend"] { --c1: #0b1f33; --c2: #22c55e; --c3: #e0f2fe; --glow: rgb(250 204 21 / .7); }

.cel-supend-scene {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 62% 40%, rgb(34 197 94 / .14), transparent 70%),
    linear-gradient(180deg, #06121f, #0a1a2b 55%, #050b14);
}
.cel-supend-main {
  position: absolute; left: 27vw; right: 3vw; top: 3vh; bottom: 3vh;
  display: flex; flex-direction: column; align-items: center; gap: 2.4vh;
}

.cel-supend-head { display: flex; flex-direction: column; align-items: center; gap: .8vh; text-align: center; }
.cel-supend-lamps {
  display: flex; gap: 1.4vh; padding: 1vh 2vh; border-radius: 999px;
  background: linear-gradient(180deg, #7c4a22, #4a2a12); box-shadow: 0 1vh 2vh rgb(0 0 0 / .5), inset 0 .3vh 0 rgb(255 220 170 / .35);
}
.cel-supend-lamp {
  width: 2.8vh; height: 2.8vh; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #57534e, #1c1917 70%); box-shadow: inset 0 0 0 .25vh #a16207;
  transition: background .1s, box-shadow .1s;
}
.cel-supend-lamp.is-on {
  background: radial-gradient(circle at 40% 35%, #f0fdf4, #4ade80 45%, #15803d);
  box-shadow: inset 0 0 0 .25vh #ca8a04, 0 0 1.8vh .3vh rgb(74 222 128 / .8);
  animation: cel-supend-blink 1.9s steps(1) infinite;
}
.cel-supend-lamp.is-on:nth-child(3n) { animation-duration: 1.3s; animation-delay: -.4s; }
.cel-supend-lamp.is-on:nth-child(4n+1) { animation-duration: 2.4s; animation-delay: -1s; }
@keyframes cel-supend-blink { 60% { filter: brightness(.5); } }
.cel-supend-title { font-family: var(--font-brand); font-size: 8vh; line-height: 1; color: #fff; text-shadow: 0 .5vh 0 #052e16, 0 0 3vh rgb(74 222 128 / .6); }
.cel-supend-date { font-size: 2.6vh; font-weight: 600; letter-spacing: .12em; color: #86efac; }

/* Gesprekken + bereikbaarheid */
.cel-supend-hero { display: flex; justify-content: center; align-items: stretch; gap: 3vh; }
.cel-supend-calls, .cel-supend-reach {
  opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.4vh 4vh; border-radius: 2.4vh;
  background: linear-gradient(180deg, rgb(20 83 45 / .55), rgb(5 46 22 / .7)); border: .3vh solid rgb(134 239 172 / .4);
  box-shadow: 0 1.6vh 4vh rgb(0 0 0 / .5);
}
.cel-supend-calls { min-width: 38vh; }
.cel-supend-calls-num { font-family: var(--font-brand); font-size: 17vh; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 4vh rgb(74 222 128 / .6); }
.cel-supend-label { font-size: 2.8vh; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #bbf7d0; }

.cel-supend-gauge {
  --p: 0; --gauge: #4ade80;
  position: relative; width: 23vh; height: 23vh; border-radius: 50%;
  background: conic-gradient(var(--gauge) calc(var(--p) * 1%), rgb(255 255 255 / .1) 0);
  mask: radial-gradient(circle, transparent 0 56%, #000 57%);
}
.cel-supend-gauge.is-amber { --gauge: #fbbf24; }
.cel-supend-gauge.is-sky { --gauge: #38bdf8; }
.cel-supend-gauge.is-glowing { filter: drop-shadow(0 0 2vh rgb(74 222 128 / .9)); }
/* De tekst ligt naast de ring in plaats van erin, anders knipt het masker hem weg. */
.cel-supend-reach { display: grid; place-items: center; }
.cel-supend-reach > .cel-supend-gauge { grid-area: 1 / 1; }
.cel-supend-gauge-text { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; }

.cel-supend-gauge-num { font-family: var(--font-brand); font-size: 6.4vh; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.cel-supend-gauge-sub { font-size: 2.2vh; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #bbf7d0; }

/* Tegels */
.cel-supend-tiles { display: flex; justify-content: center; align-items: stretch; gap: 2.4vh; perspective: 120vh; }
.cel-supend-tile {
  position: relative; opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .6vh;
  min-width: 26vh; padding: 1.6vh 3vh; border-radius: 1.8vh;
  background: rgb(15 23 42 / .8); border: .25vh solid rgb(148 163 184 / .35); box-shadow: 0 1vh 3vh rgb(0 0 0 / .45);
}
.cel-supend-tile-label { font-size: 2.4vh; font-weight: 700; color: #cbd5e1; white-space: nowrap; }
.cel-supend-tile-num { font-family: var(--font-brand); font-size: 7vh; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cel-supend-tile-note {
  padding: .3vh 1.4vh; border-radius: 999px; font-size: 2vh; font-weight: 700; white-space: nowrap;
  color: #052e16; background: #4ade80;
}
.cel-supend-tile-note.is-win { position: absolute; right: -1.6vh; top: -1.8vh; background: #fde047; box-shadow: 0 .6vh 1.4vh rgb(0 0 0 / .4); }

.cel-supend-tile.is-tickets { min-width: 40vh; align-items: stretch; gap: 1vh; }
.cel-supend-tile.is-tickets .cel-supend-tile-label { text-align: center; }
.cel-supend-bar { display: flex; align-items: center; gap: 1.4vh; }
.cel-supend-bar-label { width: 11vh; font-size: 2.4vh; font-weight: 600; color: #e2e8f0; }
.cel-supend-bar-track { flex: 1; height: 2.8vh; border-radius: 999px; background: rgb(255 255 255 / .08); overflow: hidden; }
.cel-supend-bar-fill { height: 100%; width: 0; border-radius: 999px; }
.cel-supend-bar.is-closed .cel-supend-bar-fill { background: linear-gradient(90deg, #16a34a, #4ade80); box-shadow: 0 0 1.4vh rgb(74 222 128 / .7); }
.cel-supend-bar.is-created .cel-supend-bar-fill { background: linear-gradient(90deg, #0369a1, #38bdf8); }
.cel-supend-bar-num { min-width: 5vh; text-align: right; font-size: 3.4vh; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Vandaag aan de lijn: op naam, allemaal gelijk */
.cel-supend-people { visibility: hidden; display: flex; flex-direction: column; align-items: center; gap: 1.6vh; margin-top: auto; margin-bottom: 2vh; }
.cel-supend-people-label { font-size: 2.8vh; font-weight: 700; color: #fde68a; white-space: nowrap; }
.cel-supend-people-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2vh; }
.cel-supend-person {
  display: flex; align-items: center; gap: 1.4vh; padding: 1vh 2.8vh 1vh 1vh; border-radius: 999px; opacity: 0;
  background: rgb(15 23 42 / .85); border: .3vh solid rgb(148 163 184 / .45); box-shadow: 0 1vh 3vh rgb(0 0 0 / .5);
}
.cel-supend-person.is-thanked { border-color: rgb(134 239 172 / .7); animation: cel-supend-float 1.6s ease-in-out infinite; }
@keyframes cel-supend-float { 50% { translate: 0 -1.2vh; } }
.cel-supend-person.is-more { padding: 1vh 2.8vh; min-height: 8.4vh; font-size: 3vh; font-weight: 700; color: #cbd5e1; }
.cel-supend-person-face { width: 8.4vh; height: 8.4vh; font-size: 3.2vh; box-shadow: 0 0 0 .35vh #94a3b8; }
.cel-supend-person-name { font-size: 3vh; font-weight: 700; line-height: 1.1; }
/* Groot team: alles op één regel, kleinere pillen. */
.cel-supend-people-row.is-many { flex-wrap: nowrap; gap: 1.4vh; }
.cel-supend-people-row.is-many .cel-supend-person { gap: 1vh; padding: .8vh 2vh .8vh .8vh; }
.cel-supend-people-row.is-many .cel-supend-person.is-more { padding: .8vh 2vh; min-height: 6.4vh; }
.cel-supend-people-row.is-many .cel-supend-person-face { width: 6.4vh; height: 6.4vh; font-size: 2.5vh; }
.cel-supend-people-row.is-many .cel-supend-person-name { font-size: 2.5vh; }

/* Uit */
.cel-supend-dim { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 62% 50%, #0b1630, #02050b 75%); }
.cel-supend-sign {
  position: absolute; left: 27vw; right: 3vw; top: 22vh; visibility: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cel-supend-sign-moon {
  width: 16vh; height: 16vh; border-radius: 50%; margin-bottom: 3vh;
  box-shadow: inset -3.4vh -1.4vh 0 0 #fde68a, 0 0 6vh -1vh rgb(253 230 138 / .55);
  rotate: -20deg; animation: cel-supend-sway 3s ease-in-out infinite;
}
@keyframes cel-supend-sway { 50% { rotate: -8deg; } }
.cel-supend-sign-text {
  font-family: var(--font-brand); font-size: 12vh; line-height: 1; color: #fff7ed;
  text-shadow: 0 0 .6vh #fff, 0 0 2.4vh #ff7800, 0 0 6vh #ea580c;
}
.cel-supend-sign-sub { margin-top: 1vh; font-family: var(--font-brand); font-size: 7vh; color: #fdba74; text-shadow: 0 0 2vh rgb(255 120 0 / .7); }