/* Dagstand-segment "Tickets vandaag": weegschaal opgelost/nieuw en wie er meehielpen. Schakelbordfamilie. */

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

.cel-show-tickets-scene {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 50% 55%, rgb(34 197 94 / .14), transparent 70%),
    linear-gradient(180deg, #06121f, #0a1a2b 55%, #050b14);
}

.cel-show-tickets-head {
  position: absolute; left: 0; right: 0; top: 3vh; opacity: 0;
  display: flex; flex-direction: column; align-items: center; gap: .8vh; text-align: center;
}
.cel-show-tickets-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-show-tickets-lamp {
  width: 2.4vh; height: 2.4vh; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #57534e, #1c1917 70%); box-shadow: inset 0 0 0 .25vh #a16207;
}
.cel-show-tickets-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-show-tickets-blink 1.9s steps(1) infinite;
}
.cel-show-tickets-lamp.is-on:nth-child(3n) { animation-duration: 1.3s; animation-delay: -.4s; }
.cel-show-tickets-lamp.is-on:nth-child(4n+1) { animation-duration: 2.4s; animation-delay: -1s; }
@keyframes cel-show-tickets-blink { 60% { filter: brightness(.5); } }
.cel-show-tickets-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-show-tickets-sub { font-size: 2.6vh; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #86efac; }

/* Weegschaal */
.cel-show-tickets-scale { position: absolute; inset: 0; visibility: hidden; }
.cel-show-tickets-post {
  position: absolute; left: calc(50% - 1.8vh); top: 40vh; bottom: 7vh; width: 3.6vh; transform-origin: 50% 100%;
  border-radius: 1vh 1vh 0 0;
  background: linear-gradient(90deg, #4a2a12, #a16207 40%, #7c4a22 70%, #3b200d);
  box-shadow: 0 0 3vh rgb(0 0 0 / .5);
}
.cel-show-tickets-base {
  position: absolute; left: 50%; bottom: 3.5vh; width: 34vh; height: 4.4vh; border-radius: 2vh 2vh 1vh 1vh;
  background: linear-gradient(180deg, #a16207, #7c4a22 50%, #3b200d); box-shadow: 0 1.4vh 3vh rgb(0 0 0 / .6), inset 0 .3vh 0 rgb(255 220 170 / .4);
}
.cel-show-tickets-beam {
  --tilt: 0;
  position: absolute; left: 50%; top: 40vh; width: 62vw; height: 2.6vh; opacity: 0;
  translate: -50% -50%; rotate: calc(var(--tilt) * 1deg);
  border-radius: 999px;
  background: linear-gradient(180deg, #fde68a, #ca8a04 45%, #854d0e);
  box-shadow: 0 1vh 2.4vh rgb(0 0 0 / .55), 0 0 2vh rgb(250 204 21 / .25);
}
.cel-show-tickets-pivot {
  position: absolute; left: 50%; top: 50%; width: 7vh; height: 7vh; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fef9c3, #eab308 40%, #713f12);
  box-shadow: 0 0 0 .5vh #3b200d, 0 0 3vh rgb(250 204 21 / .6);
}
.cel-show-tickets-hanger {
  position: absolute; top: 50%; width: 30vh; height: 22vh;
  translate: -50% 0; rotate: calc(var(--tilt) * -1deg); transform-origin: 50% 0;
}
.cel-show-tickets-hanger.is-left { left: 1.5vh; }
.cel-show-tickets-hanger.is-right { left: calc(100% - 1.5vh); }
.cel-show-tickets-hook {
  position: absolute; left: 50%; top: -1.4vh; width: 2.8vh; height: 2.8vh; translate: -50% 0; border-radius: 50%;
  border: .55vh solid #fde68a; box-shadow: 0 0 1vh rgb(0 0 0 / .5);
}
.cel-show-tickets-strings { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.cel-show-tickets-strings path { fill: none; stroke: #fcd34d; stroke-width: 3; opacity: .85; }
.cel-show-tickets-pan {
  position: absolute; left: -1vh; right: -1vh; top: 100%; height: 6.4vh;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, #fef3c7, #eab308 25%, #a16207 70%, #713f12);
  box-shadow: 0 1.6vh 3vh rgb(0 0 0 / .55), inset 0 .5vh 0 rgb(255 255 255 / .5);
  transition: box-shadow .4s;
}
.cel-show-tickets-hanger.is-heavy.is-left .cel-show-tickets-pan { box-shadow: 0 1.6vh 3vh rgb(0 0 0 / .55), 0 0 6vh rgb(74 222 128 / .8), inset 0 .5vh 0 rgb(255 255 255 / .5); }
.cel-show-tickets-hanger.is-heavy.is-right .cel-show-tickets-pan { box-shadow: 0 1.6vh 3vh rgb(0 0 0 / .55), 0 0 6vh rgb(56 189 248 / .8), inset 0 .5vh 0 rgb(255 255 255 / .5); }
.cel-show-tickets-pile {
  position: absolute; left: 3vh; right: 3vh; bottom: -.4vh;
  display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: .35vh;
}
.cel-show-tickets-token {
  position: relative; width: 5.2vh; height: 3.3vh; border-radius: .5vh;
  display: grid; place-items: center; font-size: 2.2vh; font-weight: 900; color: #052e16;
  mask:
    radial-gradient(circle at 0 50%, transparent .6vh, #000 .65vh) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent .6vh, #000 .65vh) right / 51% 100% no-repeat;
}
.cel-show-tickets-token.is-closed { background: linear-gradient(180deg, #bbf7d0, #4ade80 50%, #16a34a); }
.cel-show-tickets-token.is-closed::after { content: "✓"; }
.cel-show-tickets-token.is-created { background: linear-gradient(180deg, #e0f2fe, #38bdf8 50%, #0369a1); color: #082f49; }
.cel-show-tickets-token.is-created::after { content: "+"; }
.cel-show-tickets-count {
  position: absolute; left: -10vh; right: -10vh; top: calc(100% + 7.4vh); opacity: 0;
  display: flex; flex-direction: column; align-items: center;
}
.cel-show-tickets-num { font-family: var(--font-brand); font-size: 11vh; line-height: .95; color: #fff; font-variant-numeric: tabular-nums; }
.cel-show-tickets-label { font-size: 3.2vh; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.is-left .cel-show-tickets-num { text-shadow: 0 0 4vh rgb(74 222 128 / .7); }
.is-left .cel-show-tickets-label { color: #86efac; }
.is-right .cel-show-tickets-num { text-shadow: 0 0 4vh rgb(56 189 248 / .7); }
.is-right .cel-show-tickets-label { color: #7dd3fc; }

.cel-show-tickets-verdict {
  position: absolute; left: 50%; top: 62vh; visibility: hidden; white-space: nowrap;
  padding: 1.2vh 3.6vh; border-radius: 2vh;
  font-family: var(--font-brand); font-size: 7vh; line-height: 1;
  box-shadow: 0 1.6vh 4vh rgb(0 0 0 / .6);
}
.cel-show-tickets-verdict.is-win { color: #052e16; background: linear-gradient(180deg, #fef08a, #facc15); border: .5vh solid #fff; animation: cel-show-tickets-pulse 1.4s ease-in-out .5s infinite; }
.cel-show-tickets-verdict.is-behind { color: #082f49; background: linear-gradient(180deg, #e0f2fe, #7dd3fc); border: .5vh solid #fff; }
.cel-show-tickets-verdict.is-even { color: #052e16; background: linear-gradient(180deg, #bbf7d0, #4ade80); border: .5vh solid #fff; }
@keyframes cel-show-tickets-pulse { 50% { box-shadow: 0 1.6vh 4vh rgb(0 0 0 / .6), 0 0 6vh rgb(250 204 21 / .9); } }

/* Alleen één getal bekend */
.cel-show-tickets-solo {
  position: absolute; left: 0; right: 0; top: 30vh; visibility: hidden;
  display: flex; flex-direction: column; align-items: center;
}
.cel-show-tickets-solo-num { font-family: var(--font-brand); font-size: 30vh; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 6vh rgb(74 222 128 / .7); }
.cel-show-tickets-solo.is-created .cel-show-tickets-solo-num { text-shadow: 0 0 6vh rgb(56 189 248 / .7); }
.cel-show-tickets-solo-label { font-size: 4.4vh; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #86efac; }
.cel-show-tickets-solo.is-created .cel-show-tickets-solo-label { color: #7dd3fc; }

/* Wie hielp mee: iedereen dezelfde chip, op naam; links ~27vw vrij voor de octopus. */
.cel-show-tickets-thanks {
  position: absolute; left: 27vw; right: 4vw; top: 22vh; bottom: 4vh; visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5vh;
}
.cel-show-tickets-team { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2vh 3vh; max-width: 111vh; }
.cel-show-tickets-mate {
  display: flex; align-items: center; gap: 2vh; width: 54vh; height: 11vh; padding: 0 3vh 0 1.2vh; border-radius: 999px; opacity: 0;
  background: rgb(15 23 42 / .85); border: .3vh solid rgb(148 163 184 / .4); box-shadow: 0 1vh 3vh rgb(0 0 0 / .5);
  transition: border-color .4s, box-shadow .4s;
}
.cel-show-tickets-face { width: 8.6vh; height: 8.6vh; font-size: 3.2vh; box-shadow: 0 0 0 .35vh #94a3b8; transition: box-shadow .4s; }
.cel-show-tickets-name { min-width: 0; font-size: 3.8vh; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel-show-tickets-mate.is-lit { border-color: #4ade80; box-shadow: 0 0 4vh rgb(74 222 128 / .55), 0 1vh 3vh rgb(0 0 0 / .5); }
.cel-show-tickets-mate.is-lit .cel-show-tickets-face { box-shadow: 0 0 0 .45vh #4ade80, 0 0 3vh rgb(74 222 128 / .7); }
.cel-show-tickets-thanks-line {
  opacity: 0; text-align: center;
  font-family: var(--font-brand); font-size: 6.4vh; line-height: 1.1; color: #fff; text-shadow: 0 .5vh 0 #052e16, 0 0 3vh rgb(74 222 128 / .6);
}
.cel-show-tickets-thanks.is-crowd { gap: 3vh; }
.cel-show-tickets-thanks.is-crowd .cel-show-tickets-team { gap: 1.6vh 2.4vh; max-width: 120vh; }
.cel-show-tickets-thanks.is-crowd .cel-show-tickets-mate { width: 38vh; height: 8.6vh; gap: 1.4vh; padding-right: 2vh; }
.cel-show-tickets-thanks.is-crowd .cel-show-tickets-face { width: 6.6vh; height: 6.6vh; font-size: 2.6vh; }
.cel-show-tickets-thanks.is-crowd .cel-show-tickets-name { font-size: 3vh; }
.cel-show-tickets-thanks.is-crowd .cel-show-tickets-thanks-line { font-size: 5vh; }