/* Eindbaas (project compleet) en final countdown (vijf open). */

.celebration[data-mode="boss"] { --c1: #1e0b3a; --c2: #7c3aed; --c3: #f0abfc; --glow: rgb(239 68 68 / .7); }
.celebration[data-mode="trophy"] { --c1: #6b4300; --c2: #e9a800; --c3: #fff1a8; --glow: rgb(255 200 40 / .9); }
.celebration[data-mode="countdown"] { --c1: #450a0a; --c2: #ea580c; --c3: #fed7aa; --glow: rgb(249 115 22 / .8); }

.cel-boss-scene { position: absolute; inset: 0; }
.cel-boss-scene.is-alert::after { content: ""; position: absolute; inset: 0; background: rgb(220 38 38 / .35); }

.cel-hazard {
  position: absolute; left: 0; right: 0; height: 7vh; overflow: hidden; display: flex; align-items: center;
  background: repeating-linear-gradient(-45deg, #facc15 0 3vh, #111 3vh 6vh);
  box-shadow: 0 0 4vh rgb(250 204 21 / .5);
}
.cel-hazard.is-top { top: 3vh; }
.cel-hazard.is-bottom { bottom: 3vh; }
.cel-hazard span {
  white-space: nowrap; padding: .6vh 2vh; background: #111; color: #facc15;
  font-size: 3.4vh; font-weight: 700; letter-spacing: .4em; text-transform: uppercase;
  animation: cel-marquee 6s linear infinite;
}
.cel-hazard.is-bottom span { animation-direction: reverse; }
@keyframes cel-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.cel-boss { position: absolute; left: 50%; top: 14vh; width: 52vh; margin-left: -26vh; display: flex; flex-direction: column; align-items: center; }
.cel-boss-plate { width: 100%; display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; text-transform: uppercase; }
.cel-boss-name { font-size: 3.4vh; letter-spacing: .08em; color: #fff; text-shadow: 0 0 2vh rgb(239 68 68 / .8); }
.cel-boss-hp-text { font-size: 2.2vh; color: #fca5a5; font-variant-numeric: tabular-nums; }
.cel-boss-hp { width: 100%; height: 3vh; margin-top: .8vh; border-radius: .6vh; overflow: hidden; background: #1f1f1f; box-shadow: inset 0 0 0 .3vh #000, 0 0 0 .3vh #fca5a5; }
.cel-boss-hp-fill { width: 100%; height: 100%; background: linear-gradient(180deg, #f87171, #b91c1c); transition: width .15s ease-out; }

.cel-boss-body {
  position: relative; width: 42vh; height: 36vh; margin-top: 5vh; border-radius: 48% 48% 40% 40% / 55% 55% 45% 45%;
  background:
    radial-gradient(circle at 35% 30%, rgb(255 255 255 / .2), transparent 35%),
    radial-gradient(circle at 50% 120%, #7f1d1d, transparent 60%),
    linear-gradient(170deg, #6d28d9, #3b0764 70%);
  box-shadow: inset 0 -3vh 4vh rgb(0 0 0 / .5), 0 0 6vh rgb(124 58 237 / .7);
  animation: cel-boss-bob 2.2s ease-in-out infinite;
}
.cel-boss-body.is-hit { animation: cel-boss-hit .12s steps(2) 6; }
@keyframes cel-boss-bob { 50% { translate: 0 -1.5vh; } }
@keyframes cel-boss-hit { 50% { filter: brightness(3) saturate(0); } }
.cel-boss-horn {
  position: absolute; top: -5vh; width: 8vh; height: 12vh;
  background: linear-gradient(180deg, #fef3c7, #a16207); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cel-boss-horn.is-left { left: 5vh; rotate: -25deg; }
.cel-boss-horn.is-right { right: 5vh; rotate: 25deg; }
.cel-boss-eye {
  position: absolute; top: 11vh; width: 9vh; height: 6vh; border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 55%, #fff 0 18%, #fde047 20%, #ef4444 55%, #7f1d1d 75%);
  box-shadow: 0 0 3vh #ef4444; scale: 1 .1; transition: scale .3s;
}
.cel-boss-body.is-awake .cel-boss-eye { scale: 1 1; animation: cel-boss-blink 3s infinite; }
.cel-boss-eye.is-left { left: 9vh; rotate: 12deg; }
.cel-boss-eye.is-right { right: 9vh; rotate: -12deg; }
@keyframes cel-boss-blink { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 .1; } }
.cel-boss-mouth {
  position: absolute; left: 50%; bottom: 6vh; width: 22vh; height: 7vh; translate: -50% 0; border-radius: 0 0 50% 50%;
  background: #120318;
  box-shadow: inset 0 0 0 .4vh #000;
}
.cel-boss-mouth::before, .cel-boss-mouth::after {
  content: ""; position: absolute; left: 1vh; right: 1vh; height: 2.4vh; background: #f5f5f4;
  --zig: 2.6vh; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zig) 100%;
}
.cel-boss-mouth::before { top: 0; }
.cel-boss-mouth::after { bottom: 0; rotate: 180deg; }

.cel-boss-shot {
  position: absolute; left: 0; top: 0; width: 34vh; padding: 1.6vh 2vh; border-radius: 1.2vh; color: #2c2620;
  background: linear-gradient(135deg, #fffaf0, #f6ead3);
  box-shadow: 0 0 0 .4vh #ffd84d, 0 0 5vh #ff7800;
}
.cel-boss-shot-kicker { font-size: 1.5vh; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: #c23200; }
.cel-boss-shot-title { margin-top: .4vh; font-size: 2vh; font-weight: 700; line-height: 1.2; }
.cel-boss-shot-by { margin-top: .6vh; font-size: 1.6vh; color: #6b5a44; }

.cel-ko {
  position: absolute; left: 50%; top: 45%; opacity: 0;
  font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 22vh; line-height: 1;
  background: linear-gradient(180deg, #fff 15%, #fde047 50%, #ef4444 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1vh 0 #450a0a) drop-shadow(0 0 4vh rgb(239 68 68 / .9));
}

.cel-victory-title, .cel-trophy, .cel-podium, .cel-podium-rest, .cel-boss-stats { visibility: hidden; }
.cel-boss-scene.is-victory .cel-victory-title, .cel-boss-scene.is-victory .cel-trophy,
.cel-boss-scene.is-victory .cel-boss-stats { visibility: visible; }

.cel-victory-title { position: absolute; left: 0; right: 0; top: 2vh; text-align: center; opacity: 0; }
.cel-victory-kicker { font-family: var(--font-brand); font-size: 6vh; color: #fff1a8; text-shadow: 0 0 3vh var(--glow); }
.cel-victory-name { font-size: 4.4vh; font-weight: 700; color: #fff; letter-spacing: .04em; }

.cel-trophy { position: absolute; left: 50%; top: 21vh; width: 22vh; margin-left: -11vh; display: flex; flex-direction: column; align-items: center; opacity: 0; }
.cel-trophy-cup {
  position: relative; width: 15vh; height: 13vh; border-radius: 0 0 50% 50% / 0 0 70% 70%;
  background: linear-gradient(100deg, #a16207, #fde047 35%, #fff7c2 45%, #facc15 60%, #a16207);
  box-shadow: inset 0 1vh 0 rgb(255 255 255 / .35);
  display: flex; align-items: center; justify-content: center;
}
.cel-trophy-cup::before, .cel-trophy-cup::after {
  content: ""; position: absolute; top: 1.5vh; width: 5vh; height: 6vh; border: 1.2vh solid #eab308; border-radius: 50%;
}
.cel-trophy-cup::before { left: -4.2vh; border-right-color: transparent; }
.cel-trophy-cup::after { right: -4.2vh; border-left-color: transparent; }
.cel-trophy-star { font-size: 6vh; color: #fff7c2; text-shadow: 0 0 2vh #fff; }
.cel-trophy-stem { width: 3vh; height: 4vh; background: linear-gradient(90deg, #a16207, #fde047, #a16207); }
.cel-trophy-base {
  width: 14vh; height: 3.4vh; border-radius: .6vh; background: linear-gradient(180deg, #44403c, #1c1917);
  box-shadow: inset 0 0 0 .3vh #a16207; display: flex; align-items: center; justify-content: center;
}
.cel-trophy-base span { width: 8vh; height: 1vh; border-radius: .3vh; background: #facc15; }
.cel-trophy.is-shining { animation: cel-trophy-glow 1.4s ease-in-out infinite; }
@keyframes cel-trophy-glow { 50% { filter: drop-shadow(0 0 4vh #fde047) brightness(1.2); } }

.cel-boss-stats { position: absolute; top: 21vh; display: flex; flex-direction: column; gap: 2vh; perspective: 60vh; }
.cel-boss-stats.is-left { right: calc(50% + 16vh); align-items: flex-end; }
.cel-boss-stats.is-right { left: calc(50% + 16vh); }
.cel-boss-stat {
  min-width: 20vh; padding: 1.2vh 2.4vh; border-radius: 1.4vh; text-align: center;
  background: rgb(0 0 0 / .55); border: .3vh solid #fde047; box-shadow: 0 0 3vh rgb(253 224 71 / .4);
}
.cel-boss-stat-value { font-size: 5.6vh; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cel-boss-stat-label { font-size: 1.8vh; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: #fde047; }

.cel-podium { position: absolute; left: 50%; bottom: 11vh; translate: -50% 0; display: flex; align-items: flex-end; gap: 1vh; }
.cel-podium-step { width: 19vh; display: flex; flex-direction: column; align-items: center; }
.cel-podium-person { display: flex; flex-direction: column; align-items: center; margin-bottom: 1vh; }
.cel-podium-face { width: 8vh; height: 8vh; font-size: 3.4vh; box-shadow: 0 0 0 .5vh #fde047, 0 0 3vh rgb(253 224 71 / .7); }
.cel-podium-step.is-1 .cel-podium-face { width: 10vh; height: 10vh; font-size: 4.4vh; }
.cel-podium-name { margin-top: .6vh; font-size: 2.2vh; font-weight: 700; }
.cel-podium-block {
  width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 1.4vh;
  border-radius: 1vh 1vh 0 0; background: linear-gradient(180deg, #fde047, #ca8a04 60%, #713f12);
  box-shadow: inset 0 .6vh 0 rgb(255 255 255 / .5);
}
.cel-podium-step.is-1 .cel-podium-block { height: 17vh; }
.cel-podium-step.is-2 .cel-podium-block { height: 13.5vh; background: linear-gradient(180deg, #f1f5f9, #94a3b8 60%, #334155); }
.cel-podium-step.is-3 .cel-podium-block { height: 11vh; background: linear-gradient(180deg, #fdba74, #c2410c 60%, #431407); }
.cel-podium-place { font-size: 6vh; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 .4vh 0 rgb(0 0 0 / .35); }
.cel-podium-count { font-size: 1.6vh; font-weight: 700; color: rgb(0 0 0 / .65); }

.cel-podium-rest { position: absolute; left: 50%; bottom: 4vh; translate: -50% 0; display: flex; align-items: center; gap: 1vh; }
.cel-podium-rest-label { margin-right: 1vh; font-size: 1.8vh; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fde047; }
.cel-podium-rest-face { width: 5vh; height: 5vh; font-size: 1.8vh; box-shadow: 0 0 0 .3vh #fde047; }

/* Countdown */
.cel-countdown-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; }
.cel-beacon { position: absolute; left: 50%; top: 0; width: 0; height: 0; }
.cel-beacon-light {
  position: absolute; left: -150vmax; top: -150vmax; width: 300vmax; height: 300vmax;
  background: conic-gradient(from 0deg, rgb(255 120 0 / .55) 0deg 18deg, transparent 30deg 180deg, rgb(255 120 0 / .55) 180deg 198deg, transparent 210deg);
  animation: cel-spin 1.1s linear infinite;
}
.cel-beacon-dome {
  position: absolute; left: -7vh; top: -2vh; width: 14vh; height: 10vh; border-radius: 7vh 7vh 1vh 1vh;
  background: radial-gradient(circle at 50% 60%, #fff, #fb923c 40%, #9a3412); box-shadow: 0 0 6vh #f97316;
}
.cel-countdown-kicker { position: relative; font-family: var(--font-brand); font-size: 7vh; color: #fed7aa; text-shadow: 0 0 3vh var(--glow); }
.cel-countdown-ring { position: relative; width: 36vh; height: 36vh; }
.cel-countdown-ring svg { width: 100%; height: 100%; rotate: -90deg; }
.cel-ring-track { fill: rgb(0 0 0 / .45); stroke: rgb(255 255 255 / .12); stroke-width: 6; }
.cel-ring-fill {
  fill: none; stroke: #f97316; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 276; stroke-dashoffset: 276;
  filter: drop-shadow(0 0 1.5vh #f97316); transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .3, 1);
}
.cel-countdown-number {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 22vh; font-weight: 700; color: #fff;
  text-shadow: 0 0 4vh #f97316, 0 0 1vh #fff;
}
.cel-countdown-text { position: relative; font-size: 6vh; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cel-countdown-project { position: relative; font-size: 2.6vh; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #fed7aa; }