/* Supportdag begint: schakelbord, neonbord, openingstijden en de bezetting. Links ~27vw vrij voor de octopus. */

.celebration[data-mode="supportstart"] { --c1: #052e22; --c2: #22c55e; --c3: #dcfce7; --glow: rgb(74 222 128 / .8); }

.cel-supstart-scene {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 62% 30%, rgb(34 197 94 / .16), transparent 70%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .025) 0 .2vh, transparent .2vh 6vh),
    linear-gradient(180deg, #04140f, #071d18 60%, #03100c);
}
.cel-supstart-glow {
  position: absolute; left: 27vw; right: 0; top: 0; height: 45vh; opacity: .55;
  background: radial-gradient(ellipse 55% 60% at 50% 40%, rgb(74 222 128 / .25), transparent 70%);
}

.cel-supstart-main {
  position: absolute; left: 27vw; right: 3vw; top: 3vh; bottom: 3vh;
  display: flex; flex-direction: column; align-items: center; gap: 2.2vh;
}
.cel-supstart-kicker { font-size: 2.6vh; font-weight: 700; letter-spacing: .45em; text-transform: uppercase; color: #86efac; opacity: 0; }

/* Schakelbord */
.cel-supstart-board {
  position: relative; display: flex; align-items: center; gap: 2.4vh; padding: 1.6vh 2.4vh 1.6vh 2.4vh; border-radius: 1.6vh;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .12), transparent 30%),
    repeating-linear-gradient(95deg, rgb(0 0 0 / .12) 0 .4vh, transparent .4vh 2.2vh),
    linear-gradient(180deg, #7c4a22, #4a2a12);
  box-shadow: 0 2vh 4vh rgb(0 0 0 / .6), inset 0 .3vh 0 rgb(255 220 170 / .35), inset 0 -.5vh 0 rgb(0 0 0 / .35);
}
.cel-supstart-lamps {
  display: flex; gap: 1.2vh; padding: 1.4vh 1.8vh; border-radius: 1vh;
  background: linear-gradient(180deg, #1c1917, #0c0a09); box-shadow: inset 0 .4vh 1vh #000;
}
.cel-supstart-slot { display: flex; flex-direction: column; align-items: center; gap: .8vh; width: 4.4vh; }
.cel-supstart-lamp {
  width: 3.6vh; height: 3.6vh; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #57534e, #292524 70%); box-shadow: inset 0 0 0 .3vh #a16207, 0 0 0 .2vh #000;
  transition: background .12s, box-shadow .12s;
}
.cel-supstart-slot.is-on .cel-supstart-lamp {
  background: radial-gradient(circle at 40% 35%, #f0fdf4, #4ade80 45%, #15803d);
  box-shadow: inset 0 0 0 .3vh #ca8a04, 0 0 2.2vh .4vh rgb(74 222 128 / .8);
}
.cel-supstart-board.is-live .cel-supstart-slot:nth-child(3n+1) .cel-supstart-lamp { animation: cel-supstart-blink 1.7s steps(1) infinite; }
.cel-supstart-board.is-live .cel-supstart-slot:nth-child(4n+2) .cel-supstart-lamp { animation: cel-supstart-blink 2.3s steps(1) .6s infinite; }
.cel-supstart-board.is-party .cel-supstart-slot .cel-supstart-lamp { animation: cel-supstart-blink .4s steps(1) infinite; }
.cel-supstart-board.is-party .cel-supstart-slot:nth-child(even) .cel-supstart-lamp { animation-delay: .2s; }
@keyframes cel-supstart-blink { 50% { filter: brightness(1.6) saturate(.6); } 80% { filter: brightness(.55); } }
.cel-supstart-jack {
  width: 2.8vh; height: 2.8vh; border-radius: 50%;
  background: radial-gradient(circle, #000 0 32%, #e7c27d 36%, #a87b3a 58%, #5c3d17 64%);
  box-shadow: 0 .2vh .4vh rgb(0 0 0 / .6);
}
.cel-supstart-num { font-size: 2vh; font-weight: 700; color: #d6d3d1; font-variant-numeric: tabular-nums; }

/* Hendel */
.cel-supstart-switch {
  position: relative; width: 12vh; height: 12vh; border-radius: 1.2vh;
  background: linear-gradient(180deg, #292524, #0c0a09); box-shadow: inset 0 .3vh 1vh #000, 0 0 0 .3vh #a16207;
}
.cel-supstart-switch span { position: absolute; top: 1vh; font-size: 2vh; font-weight: 700; letter-spacing: .08em; }
.cel-supstart-switch-off { left: 1.2vh; color: #f87171; }
.cel-supstart-switch-on { right: 1.2vh; color: #57534e; }
.cel-supstart-switch.is-on .cel-supstart-switch-off { color: #57534e; }
.cel-supstart-switch.is-on .cel-supstart-switch-on { color: #4ade80; text-shadow: 0 0 1.4vh #4ade80; }
.cel-supstart-lever {
  position: absolute; left: calc(50% - .6vh); bottom: 2.6vh; width: 1.2vh; height: 6.4vh; border-radius: .6vh;
  background: linear-gradient(90deg, #a8a29e, #f5f5f4 40%, #78716c); transform-origin: 50% 100%; rotate: -50deg;
}
.cel-supstart-lever span {
  position: absolute; left: 50%; top: -1.6vh; width: 3.4vh; height: 3.4vh; margin-left: -1.7vh; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fecaca, #dc2626 50%, #7f1d1d); box-shadow: 0 .4vh .8vh rgb(0 0 0 / .6);
}
.cel-supstart-pivot {
  position: absolute; left: calc(50% - 1.6vh); bottom: 1vh; width: 3.2vh; height: 3.2vh; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fef3c7, #ca8a04 55%, #713f12);
}

/* Neonbord */
.cel-supstart-neon {
  visibility: hidden; font-family: var(--font-brand); font-size: 9vh; line-height: 1.05; white-space: nowrap;
  color: #f0fdf4; text-shadow: 0 0 .6vh #fff, 0 0 2vh #4ade80, 0 0 5vh #22c55e, 0 0 9vh #16a34a;
}
.cel-supstart-neon.is-lit { animation: cel-supstart-hum 3s ease-in-out infinite; }
@keyframes cel-supstart-hum { 50% { text-shadow: 0 0 .6vh #fff, 0 0 2.6vh #4ade80, 0 0 7vh #22c55e, 0 0 12vh #16a34a; } 93% { opacity: 1; } 95% { opacity: .55; } 97% { opacity: 1; } }

/* Openingstijden */
.cel-supstart-hours { visibility: hidden; width: min(62vw, 110vh); display: flex; align-items: center; gap: 2.4vh; }
.cel-supstart-hours-label { font-size: 2.8vh; font-weight: 700; color: #bbf7d0; white-space: nowrap; }
.cel-supstart-track {
  position: relative; flex: 1; height: 5.4vh; border-radius: 1vh; margin-bottom: 2.6vh;
  background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 .25vh rgb(134 239 172 / .3);
}
.cel-supstart-track.is-plain { display: flex; gap: 1.6vh; align-items: center; background: none; box-shadow: none; margin: 0; }
.cel-supstart-pill { padding: .8vh 2vh; border-radius: 999px; font-size: 3vh; font-weight: 700; background: #15803d; }
.cel-supstart-tick { position: absolute; top: 100%; height: 0; font-size: 2vh; color: #86efac; translate: -50% .6vh; font-variant-numeric: tabular-nums; }
.cel-supstart-tick::before { content: ""; position: absolute; left: 50%; top: -1.2vh; width: .2vh; height: .8vh; background: rgb(134 239 172 / .5); }
.cel-supstart-block {
  position: absolute; top: .5vh; bottom: .5vh; border-radius: .7vh; transform-origin: 0 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(180deg, #4ade80, #16a34a); box-shadow: 0 0 2vh rgb(74 222 128 / .55);
}
.cel-supstart-block-text { font-size: 2.6vh; font-weight: 700; color: #052e16; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Bezetting */
.cel-supstart-lineup { display: flex; justify-content: center; align-items: stretch; gap: 3vh; width: 100%; }
.cel-supstart-card {
  display: flex; flex-direction: column; gap: 1.6vh; padding: 2vh 2.6vh 2.4vh; border-radius: 2vh; opacity: 0;
  background: linear-gradient(180deg, rgb(20 83 45 / .7), rgb(5 46 22 / .75));
  border: .3vh solid rgb(134 239 172 / .45); box-shadow: 0 1.6vh 4vh rgb(0 0 0 / .5);
}
.cel-supstart-card.is-backup { max-width: 44vw; background: linear-gradient(180deg, rgb(30 41 59 / .75), rgb(15 23 42 / .8)); border-color: rgb(148 163 184 / .4); }
.cel-supstart-card-head { display: flex; align-items: center; gap: 1.2vh; font-size: 3.2vh; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #dcfce7; }
.cel-supstart-card.is-backup .cel-supstart-card-head { color: #e2e8f0; }
.cel-supstart-card-icon { font-size: 3.6vh; }
.cel-supstart-card-body { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2.6vh; }
.cel-supstart-card.is-backup .cel-supstart-card-body { gap: 1.8vh 2vh; }

.cel-supstart-op { position: relative; display: flex; flex-direction: column; align-items: center; gap: .8vh; width: 18vh; }
.cel-supstart-op-head { position: relative; width: 14vh; height: 14vh; margin-top: 1.6vh; }
.cel-supstart-op-face { width: 14vh; height: 14vh; font-size: 5vh; box-shadow: 0 0 0 .5vh #4ade80, 0 0 3vh rgb(74 222 128 / .5); }
.cel-supstart-band {
  position: absolute; left: -1.4vh; right: -1.4vh; top: -2vh; height: 9vh; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border: 1.1vh solid #334155; border-bottom: 0; box-shadow: 0 -.3vh 0 rgb(255 255 255 / .15);
}
.cel-supstart-cup {
  position: absolute; top: 4.4vh; width: 3.2vh; height: 5.2vh; border-radius: 1.4vh;
  background: linear-gradient(180deg, #374151, #111827); box-shadow: inset 0 0 0 .4vh #4ade80;
}
.cel-supstart-cup.is-l { left: -2.2vh; }
.cel-supstart-cup.is-r { right: -2.2vh; }
.cel-supstart-mic {
  position: absolute; left: -.9vh; top: 9.2vh; width: 6.4vh; height: 4.2vh;
  border: .7vh solid #334155; border-top: 0; border-right: 0; border-radius: 0 0 0 3.4vh;
}
.cel-supstart-mic::after {
  content: ""; position: absolute; right: -2vh; bottom: -1.5vh; width: 2.6vh; height: 2.2vh; border-radius: 1.2vh;
  background: radial-gradient(circle at 40% 35%, #bbf7d0, #22c55e 60%, #14532d); box-shadow: 0 0 1.4vh rgb(74 222 128 / .8);
}
.cel-supstart-op-name { font-size: 3.2vh; font-weight: 700; line-height: 1.1; }
.cel-supstart-op.is-out .cel-supstart-op-face { filter: grayscale(1) brightness(.6); box-shadow: 0 0 0 .5vh #78716c; }
.cel-supstart-op.is-out .cel-supstart-band,
.cel-supstart-op.is-out .cel-supstart-cup,
.cel-supstart-op.is-out .cel-supstart-mic { display: none; }
.cel-supstart-op.is-out .cel-supstart-op-name { color: #a8a29e; }
.cel-supstart-op-out {
  position: absolute; top: 6vh; left: 50%; translate: -50% 0; rotate: -10deg; padding: .4vh 1.4vh; border-radius: .6vh;
  font-size: 2.4vh; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: #fff; background: #b91c1c; box-shadow: 0 .6vh 1.4vh rgb(0 0 0 / .5);
}

.cel-supstart-mate { display: flex; flex-direction: column; align-items: center; gap: .6vh; width: 10.6vh; }
.cel-supstart-mate-face { width: 9vh; height: 9vh; font-size: 3.3vh; box-shadow: 0 0 0 .35vh #94a3b8; }
.cel-supstart-mate-name { font-size: 2.2vh; font-weight: 600; color: #e2e8f0; white-space: nowrap; max-width: 10vh; overflow: hidden; text-overflow: ellipsis; }

.cel-supstart-yesterday {
  visibility: hidden; margin-top: auto; padding: 1vh 2.6vh; border-radius: 999px;
  font-size: 2.6vh; font-weight: 600; color: #d1fae5; background: rgb(255 255 255 / .07); border: .2vh solid rgb(134 239 172 / .3);
}

/* Drie of vier op dienst, of veel backups: kleiner, zodat alles op één regel blijft. */
.cel-supstart-card.is-duty .cel-supstart-card-body { flex-wrap: nowrap; }
.cel-supstart-lineup.is-crowded .cel-supstart-op { width: 14vh; }
.cel-supstart-lineup.is-crowded .cel-supstart-op-head,
.cel-supstart-lineup.is-crowded .cel-supstart-op-face { width: 11vh; height: 11vh; font-size: 4vh; }
.cel-supstart-lineup.is-crowded .cel-supstart-band { height: 7.4vh; }
.cel-supstart-lineup.is-crowded .cel-supstart-cup { top: 3.4vh; height: 4.4vh; width: 2.8vh; }
.cel-supstart-lineup.is-crowded .cel-supstart-mic { top: 7.2vh; width: 5vh; height: 3.4vh; }
.cel-supstart-lineup.is-crowded .cel-supstart-op-out { top: 4.4vh; font-size: 2.1vh; }
.cel-supstart-lineup.is-stacked .cel-supstart-card.is-backup .cel-supstart-card-body { max-width: 49vh; }
.cel-supstart-card { flex: 0 0 auto; }
.cel-supstart-lineup.is-crowded { gap: 2vh; }
.cel-supstart-lineup.is-crowded .cel-supstart-card.is-duty .cel-supstart-card-body { gap: 1.8vh; }
.cel-supstart-lineup.is-crowded .cel-supstart-op { width: 13vh; }
.cel-supstart-lineup.is-crowded.is-stacked .cel-supstart-card.is-backup .cel-supstart-card-body { max-width: 44vh; gap: 1.6vh; }
.cel-supstart-lineup.is-crowded.is-stacked .cel-supstart-mate { width: 9.6vh; }
.cel-supstart-lineup.is-crowded.is-stacked .cel-supstart-mate-face { width: 8vh; height: 8vh; font-size: 3vh; }
.cel-supstart-card.is-duty .cel-supstart-card-body { flex: 1; align-items: center; }