/* Devbord-animaties: pakje openen (Done), ticket afstempelen (gesloten) en de
   trein met nieuwe tickets.
   Alles schaalt met --card-h, zodat het op laptop en 4K-TV gelijk oogt. */

@property --c1   { syntax: "<color>"; inherits: true; initial-value: #5a3214; }
@property --c2   { syntax: "<color>"; inherits: true; initial-value: #b8733a; }
@property --c3   { syntax: "<color>"; inherits: true; initial-value: #f3c08a; }
@property --glow { syntax: "<color>"; inherits: true; initial-value: rgb(232 150 80 / .7); }

.celebration {
  --card-h: min(62vh, 125vw);
  --card-w: calc(var(--card-h) * .7);
  --u: calc(var(--card-h) / 100);
  --c1: #5a3214; --c2: #b8733a; --c3: #f3c08a; --glow: rgb(232 150 80 / .7);
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
  font-family: var(--font-display);
  color: #fff;
  transition: --c1 .45s, --c2 .45s, --c3 .45s, --glow .45s, visibility 0s .5s;
}
.celebration.is-active { visibility: visible; transition: --c1 .45s, --c2 .45s, --c3 .45s, --glow .45s; }

.celebration[data-tier="1"], .cel-tiered[data-tier="1"] { --c1: #3c4553; --c2: #aab4c2; --c3: #f4f7fb; --glow: rgb(205 222 255 / .75); }
.celebration[data-tier="2"], .cel-tiered[data-tier="2"] { --c1: #6b4300; --c2: #e9a800; --c3: #fff1a8; --glow: rgb(255 200 40 / .85); }
.celebration[data-tier="3"], .cel-tiered[data-tier="3"] { --c1: #2a0d57; --c2: #8b3dff; --c3: #e6c8ff; --glow: rgb(165 95 255 / .9); }
.celebration[data-tier="4"], .cel-tiered[data-tier="4"] { --c1: #6e1a00; --c2: #ff7800; --c3: #ffe0b0; --glow: rgb(255 120 0 / .95); }
.celebration[data-tier="5"], .cel-tiered[data-tier="5"] { --c1: #1a0010; --c2: #e11d48; --c3: #ffe4e6; --glow: rgb(255 31 75 / .95); }
.cel-tiered[data-tier="0"] { --c1: #5a3214; --c2: #b8733a; --c3: #f3c08a; --glow: rgb(232 150 80 / .7); }
.celebration[data-mode="closed"] { --c1: #053d2c; --c2: #10b981; --c3: #d1fae5; --glow: rgb(52 211 153 / .7); }

.cel-backdrop {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--c1) 55%, #000) 0%, rgb(0 0 0 / .94) 72%);
  backdrop-filter: blur(6px);
  transition: opacity .5s ease;
}
.celebration.is-active .cel-backdrop { opacity: 1; }

.cel-rays {
  position: absolute; left: 50%; top: 50%;
  width: 240vmax; height: 240vmax;
  translate: -50% -50%;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in oklab, var(--glow) 55%, transparent) 0deg 5deg, transparent 5deg 15deg);
  mask: radial-gradient(circle, #000 0%, rgb(0 0 0 / .5) 18%, transparent 42%);
  animation: cel-spin 40s linear infinite;
  transition: opacity .8s ease;
}
.celebration.rays-on .cel-rays { opacity: 1; }

.cel-stage { position: absolute; inset: 0; }
.cel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cel-flash { position: absolute; inset: 0; background: #fff; opacity: 0; mix-blend-mode: screen; }

.cel-shock {
  position: absolute;
  width: calc(var(--card-h) * 1.8); height: calc(var(--card-h) * 1.8);
  border-radius: 50%;
  border: calc(var(--u) * 1.2) solid var(--c3);
  box-shadow: 0 0 calc(var(--u) * 6) var(--glow), inset 0 0 calc(var(--u) * 6) var(--glow);
}

.cel-queue {
  position: absolute; right: 3vmin; bottom: 3vmin;
  padding: .6vmin 1.6vmin; border-radius: 999px;
  background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .25);
  font-size: 2.2vmin; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transition: opacity .3s;
}
.cel-queue.is-visible { opacity: 1; }

/* Uit welke repo de animatie komt. */
.cel-repo {
  position: absolute; left: 3vmin; top: 3vmin;
  padding: .6vmin 1.6vmin; border-radius: 999px;
  background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .25);
  font-size: 2.2vmin; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transition: opacity .3s;
}
.cel-repo.is-visible { opacity: 1; }

/* --- Pakje -------------------------------------------------------------- */

.cel-pack-scene { position: absolute; inset: 0; }

.cel-pack {
  --pack-w: calc(var(--card-w) * 1.12);
  --pack-h: calc(var(--card-h) * 1.14);
  position: absolute; left: 50%; top: 50%;
  width: var(--pack-w); height: var(--pack-h);
  margin: calc(var(--pack-h) / -2) 0 0 calc(var(--pack-w) / -2);
  filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 5) rgb(0 0 0 / .6)) drop-shadow(0 0 calc(var(--u) * 4) var(--glow));
}
.cel-pack.is-charged { animation: cel-charge .25s ease-in-out infinite alternate; }

.cel-pack-body, .cel-pack-top {
  position: absolute; left: 0; right: 0; overflow: hidden;
  background:
    linear-gradient(115deg, var(--c1) 0%, var(--c2) 28%, var(--c3) 46%, var(--c2) 60%, var(--c1) 100%);
}
.cel-pack-body {
  top: 11%; bottom: 0;
  --zig: calc(var(--u) * 3);
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zig) 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.5);
}
.cel-pack-top {
  top: 0; height: 11.5%;
  --zig: calc(var(--u) * 3);
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zig) 100%;
  border-bottom: calc(var(--u) * .5) dashed rgb(255 255 255 / .55);
}
.cel-pack-glow {
  position: absolute; left: 10%; right: 10%; bottom: -40%; height: 80%;
  background: radial-gradient(ellipse at 50% 100%, #fff 0%, var(--c3) 30%, transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.cel-pack.is-charged .cel-pack-glow { opacity: 1; }

.cel-pack-foil {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgb(255 255 255 / .07) 0 calc(var(--u) * .6), transparent 0 calc(var(--u) * 2.2)),
    radial-gradient(circle at 50% 38%, rgb(255 255 255 / .45), transparent 45%);
}
.cel-pack-sheen {
  position: absolute; inset: -50%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .75) 50%, transparent 58%);
  animation: cel-sheen 2.2s ease-in-out infinite;
}
.cel-pack-logo {
  position: relative; width: 52%; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 calc(var(--u) * 1.5) calc(var(--u) * 2) rgb(0 0 0 / .45));
  animation: cel-bob 2.4s ease-in-out infinite;
}
.cel-pack-brand {
  position: relative; font-family: var(--font-brand); font-size: calc(var(--u) * 11); line-height: .9;
  color: #fff; text-shadow: 0 calc(var(--u) * .6) 0 var(--c1), 0 0 calc(var(--u) * 3) var(--glow);
}
.cel-pack-name {
  position: relative; font-size: calc(var(--u) * 4.2); font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
  color: var(--c1); background: var(--c3); padding: calc(var(--u) * .8) calc(var(--u) * 3);
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}
.cel-pack-tier {
  position: relative; font-size: calc(var(--u) * 3.4); font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 calc(var(--u) * 2) var(--glow);
}

.cel-beam {
  position: absolute; left: 50%; bottom: calc(50% + var(--card-h) * .44);
  width: calc(var(--card-w) * .9); height: 120vh;
  translate: -50% 0; transform-origin: 50% 100%;
  background: linear-gradient(to top, #fff 0%, var(--c3) 12%, color-mix(in oklab, var(--glow) 60%, transparent) 45%, transparent 85%);
  filter: blur(calc(var(--u) * 2));
  mix-blend-mode: screen;
  opacity: 0; scale: 1 0;
  transition: scale .45s cubic-bezier(.2, .9, .3, 1), opacity .2s;
}
.cel-beam.is-on { opacity: 1; scale: 1 1; }

/* --- Kaart -------------------------------------------------------------- */

.cel-card {
  --chamfer: polygon(0 7%, 9% 0, 91% 0, 100% 7%, 100% 93%, 91% 100%, 9% 100%, 0 93%);
  position: absolute; left: 50%; top: 50%;
  width: var(--card-w); height: var(--card-h);
  margin: calc(var(--card-h) / -2) 0 0 calc(var(--card-w) / -2);
  perspective: calc(var(--u) * 260);
}
.cel-card-aura {
  position: absolute; inset: -14%;
  background: radial-gradient(closest-side, var(--glow), transparent);
  filter: blur(calc(var(--u) * 4));
  opacity: .55;
}
.cel-card.is-revealed .cel-card-aura { animation: cel-pulse 1.6s ease-in-out infinite; }
.cel-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.cel-card.is-revealed .cel-card-inner { animation: cel-float 4s ease-in-out infinite; }
.cel-card-face { position: absolute; inset: 0; backface-visibility: hidden; clip-path: var(--chamfer); overflow: hidden; }

.cel-card-back {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2);
  background:
    radial-gradient(circle at 50% 45%, rgb(255 255 255 / .25), transparent 55%),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / .06) 0 calc(var(--u) * 1), transparent 0 calc(var(--u) * 3)),
    linear-gradient(160deg, var(--c2), var(--c1));
  box-shadow: inset 0 0 0 calc(var(--u) * 1.6) var(--c3);
}
.cel-card-back-logo { width: 58%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 0 calc(var(--u) * 3) var(--glow)); }
.cel-card-back-text { font-family: var(--font-brand); font-size: calc(var(--u) * 10); text-shadow: 0 0 calc(var(--u) * 3) var(--glow); }

.cel-card-front {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--c3), var(--c2) 35%, var(--c1) 55%, var(--c2) 75%, var(--c3));
}
.cel-card-panel {
  position: absolute; inset: calc(var(--u) * 1.6);
  clip-path: var(--chamfer);
  background:
    radial-gradient(ellipse at 50% 28%, color-mix(in oklab, var(--c3) 45%, transparent), transparent 55%),
    repeating-linear-gradient(60deg, rgb(255 255 255 / .05) 0 calc(var(--u) * .5), transparent 0 calc(var(--u) * 2.5)),
    linear-gradient(170deg, color-mix(in oklab, var(--c2) 75%, #000), color-mix(in oklab, var(--c1) 80%, #000) 70%);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--u) * 4) calc(var(--u) * 5) calc(var(--u) * 4);
  text-align: center;
}
.cel-card-rating { position: absolute; left: calc(var(--u) * 5); top: calc(var(--u) * 4.5); display: flex; flex-direction: column; align-items: center; line-height: .85; }
.cel-card-weight {
  font-size: calc(var(--u) * 15); font-weight: 700; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 calc(var(--u) * .5) 0 var(--c1), 0 0 calc(var(--u) * 3) var(--glow);
}
.cel-card-pt { font-size: calc(var(--u) * 3.6); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--c3); margin-top: calc(var(--u) * .8); }
.cel-card-rarity {
  margin-top: calc(var(--u) * 1.6); font-size: calc(var(--u) * 2.3); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c1); background: var(--c3); padding: calc(var(--u) * .5) calc(var(--u) * 1.2); border-radius: calc(var(--u) * .6);
}
.cel-card-project {
  position: absolute; right: calc(var(--u) * 5); top: calc(var(--u) * 5.5); max-width: 42%;
  font-size: calc(var(--u) * 2.6); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: right; line-height: 1.15;
  color: var(--c3);
}
.cel-card-portrait { margin-top: calc(var(--u) * 9); position: relative; }
.cel-card-portrait::before {
  content: ""; position: absolute; inset: -18%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--c3) 0deg 8deg, transparent 8deg 20deg);
  mask: radial-gradient(circle, transparent 52%, #000 54%, transparent 72%);
  animation: cel-spin 12s linear infinite;
  opacity: .7;
}
.cel-card-avatar {
  width: calc(var(--u) * 33); height: calc(var(--u) * 33);
  box-shadow: 0 0 0 calc(var(--u) * 1) var(--c3), 0 0 calc(var(--u) * 6) var(--glow);
  font-size: calc(var(--u) * 11);
}
.cel-card-maker { margin-top: calc(var(--u) * 3.5); font-size: calc(var(--u) * 2.2); letter-spacing: .2em; text-transform: uppercase; color: var(--c3); opacity: .85; }
.cel-card-name { font-size: calc(var(--u) * 5.2); font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: .03em; text-shadow: 0 calc(var(--u) * .4) calc(var(--u) * 1) rgb(0 0 0 / .5); }
.cel-card-divider { width: 70%; height: calc(var(--u) * .4); margin: calc(var(--u) * 2) 0; background: linear-gradient(90deg, transparent, var(--c3), transparent); }
.cel-card-title {
  font-size: calc(var(--u) * 3.4); font-weight: 500; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cel-card-meta { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 1); align-items: center; }
.cel-card-ref { font-size: calc(var(--u) * 2.8); font-weight: 700; color: var(--c3); }
.cel-chip {
  font-size: calc(var(--u) * 2.1); font-weight: 500; padding: calc(var(--u) * .3) calc(var(--u) * 1.2);
  border-radius: 999px; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .25); white-space: nowrap;
}
.cel-card-team { margin-top: calc(var(--u) * 2); display: flex; align-items: center; gap: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.4); }
.cel-card-team:empty { display: none; }
.cel-card-team-label { text-transform: uppercase; letter-spacing: .14em; color: var(--c3); font-size: calc(var(--u) * 2); }
.cel-card-team-faces { display: flex; }
.cel-card-team-avatar { width: calc(var(--u) * 5.5); height: calc(var(--u) * 5.5); font-size: calc(var(--u) * 2); box-shadow: 0 0 0 calc(var(--u) * .4) var(--c1); }
.cel-card-team-avatar + .cel-card-team-avatar { margin-left: calc(var(--u) * -1.5); }
.cel-card-team-names { font-weight: 700; }

.cel-card-holo {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .25;
  background: linear-gradient(115deg, transparent 20%, rgb(255 0 150 / .55) 35%, rgb(0 255 255 / .55) 50%, rgb(255 255 0 / .55) 65%, transparent 80%);
  background-size: 300% 300%;
  animation: cel-holo 3.5s ease-in-out infinite alternate;
}
.celebration[data-tier="3"] .cel-card-holo { opacity: .45; }
.celebration[data-tier="4"] .cel-card-holo { opacity: .7; }
.celebration[data-tier="5"] .cel-card-holo { opacity: .85; mix-blend-mode: screen; }
.cel-card-sheen {
  position: absolute; inset: -50%; pointer-events: none;
  background: linear-gradient(105deg, transparent 44%, rgb(255 255 255 / .55) 50%, transparent 56%);
  translate: -60% 0;
}
.cel-card.is-revealed .cel-card-sheen { animation: cel-sweep 2.6s ease-in-out .2s infinite; }

.cel-avatar {
  position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 50%; overflow: hidden; background: color-mix(in oklab, var(--c1) 70%, #000);
}
.cel-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cel-avatar-initials { font-weight: 700; color: var(--c3); }

/* --- Banner & walkout --------------------------------------------------- */

.cel-banner {
  position: absolute; left: 0; right: 0; top: calc(50% - var(--card-h) * .5 - 15vh);
  display: flex; flex-direction: column; align-items: center; opacity: 0;
}
.cel-banner-title {
  font-family: var(--font-brand); font-size: 11vh; line-height: 1;
  background: linear-gradient(180deg, #fff 20%, var(--c3) 55%, var(--c2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .6vh 0 var(--c1)) drop-shadow(0 0 3vh var(--glow));
}
.celebration[data-tier="4"] .cel-banner-title {
  background: linear-gradient(90deg, #ff3ea5, #ff7800, #ffd400, #7cff6b, #00e0ff, #b06bff, #ff3ea5);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: cel-rainbow 2s linear infinite;
}
.cel-banner-sub { font-size: 2.6vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--c3); }

.cel-walkout {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: 2vh; text-align: center; width: 90vw;
}
.cel-walkout-kicker { font-size: 2.8vh; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; color: var(--c3); }
.cel-walkout-text {
  font-family: var(--font-brand); font-size: 12vh; line-height: 1;
  text-shadow: 0 .6vh 0 var(--c1), 0 0 4vh var(--glow);
}
.cel-walkout-avatar {
  width: 26vh; height: 26vh; font-size: 9vh;
  box-shadow: 0 0 0 1vh var(--c3), 0 0 6vh var(--glow);
}
.cel-walkout-avatar > * { filter: blur(1.6vh) brightness(.35); }

/* --- Ticket ------------------------------------------------------------- */

.cel-ticket-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.5vh; }
.cel-ticket {
  --tw: min(80vw, 110vh);
  --t: calc(var(--tw) / 100);
  --notch: calc(var(--t) * 2.6);
  position: relative; display: flex;
  width: var(--tw); height: calc(var(--tw) * .36);
  filter: drop-shadow(0 calc(var(--t) * 1.5) calc(var(--t) * 3) rgb(0 0 0 / .55)) drop-shadow(0 0 calc(var(--t) * 3) var(--glow));
  color: #2c2620;
}
.cel-ticket-main {
  flex: 1; position: relative; padding: calc(var(--t) * 3) calc(var(--t) * 3.5);
  border-radius: calc(var(--t) * 1.4) 0 0 calc(var(--t) * 1.4);
  background:
    radial-gradient(circle at 15% 20%, rgb(255 255 255 / .8), transparent 40%),
    repeating-linear-gradient(0deg, rgb(120 90 40 / .035) 0 2px, transparent 2px 6px),
    linear-gradient(135deg, #fffaf0, #f6ead3);
  mask:
    radial-gradient(circle at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + 1px)) top / 100% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + 1px)) bottom / 100% 51% no-repeat;
  display: flex; flex-direction: column;
}
.cel-ticket-head { display: flex; align-items: center; gap: calc(var(--t) * 1.5); font-size: calc(var(--t) * 1.6); font-weight: 700; letter-spacing: .25em; text-transform: uppercase; }
.cel-ticket-kicker { color: #fff; background: #ff7800; padding: calc(var(--t) * .3) calc(var(--t) * 1); border-radius: calc(var(--t) * .4); }
.cel-ticket-project { color: #8a6b3f; }
.cel-ticket-body { flex: 1; display: flex; align-items: center; gap: calc(var(--t) * 3); margin-top: calc(var(--t) * 1.5); }
.cel-ticket-face { width: calc(var(--t) * 15); height: calc(var(--t) * 15); font-size: calc(var(--t) * 5); box-shadow: 0 0 0 calc(var(--t) * .6) #ff7800; }
.cel-ticket-text { flex: 1; min-width: 0; }
.cel-ticket-title {
  font-size: calc(var(--t) * 3.1); font-weight: 700; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cel-ticket-meta { margin-top: calc(var(--t) * 1.4); display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--t) * 1); font-size: calc(var(--t) * 1.6); color: #6b5a44; }
.cel-ticket-meta .cel-chip { font-size: calc(var(--t) * 1.4); background: rgb(255 120 0 / .12); border-color: rgb(255 120 0 / .35); color: #9a4a00; padding: calc(var(--t) * .2) calc(var(--t) * .9); }
.cel-ticket-stub {
  position: relative; width: 24%; transform-origin: 0 0;
  border-left: calc(var(--t) * .35) dashed rgb(255 255 255 / .7);
  border-radius: 0 calc(var(--t) * 1.4) calc(var(--t) * 1.4) 0;
  background:
    repeating-linear-gradient(45deg, rgb(255 255 255 / .08) 0 calc(var(--t) * .4), transparent 0 calc(var(--t) * 1.4)),
    linear-gradient(160deg, #ff9a3c, #ff7800 45%, #c23200);
  mask:
    radial-gradient(circle at 0 0, #0000 var(--notch), #000 calc(var(--notch) + 1px)) top / 100% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + 1px)) bottom / 100% 51% no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--t) * 1.2);
  color: #fff;
}
.cel-ticket-ref { font-size: calc(var(--t) * 5); font-weight: 700; line-height: 1; text-shadow: 0 calc(var(--t) * .3) 0 rgb(0 0 0 / .25); }
.cel-ticket-barcode {
  width: 70%; height: calc(var(--t) * 6);
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 7px, transparent 7px 9px, #fff 9px 10px, transparent 10px 14px);
  opacity: .9;
}
.cel-ticket-weight { font-size: calc(var(--t) * 2); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

.cel-stamp {
  position: absolute; left: 63%; top: 70%; visibility: hidden;
  padding: calc(var(--t) * 1.2) calc(var(--t) * 3.4);
  border: calc(var(--t) * .9) solid #0f9f6e; border-radius: calc(var(--t) * 1.6);
  box-shadow: inset 0 0 0 calc(var(--t) * .4) #f6ead3, inset 0 0 0 calc(var(--t) * .8) #0f9f6e;
  color: #0f9f6e; text-align: center; line-height: 1;
  transform: translate(-50%, -50%) rotate(-12deg);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 0 0 0 2.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-size: cover;
}
.cel-stamp.is-inked { visibility: visible; mix-blend-mode: multiply; }
.cel-stamp-word { font-size: calc(var(--t) * 6); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cel-stamp-date { margin-top: calc(var(--t) * .6); font-size: calc(var(--t) * 1.7); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

.cel-caption {
  min-height: 7vh; font-family: var(--font-brand); font-size: 6.5vh; line-height: 1;
  color: #fff; text-shadow: 0 0 3vh var(--glow);
}

/* --- Projectvoortgang -------------------------------------------------- */

.cel-progress {
  --panel-w: min(40vw, 72vh);
  --gap: 6vh;
  position: absolute; top: 50%; translate: 0 -50%;
  left: calc(50% + (var(--card-w) + var(--gap) - var(--panel-w)) / 2);
  width: var(--panel-w); visibility: hidden;
  padding: 3.4vh 3.6vh; border-radius: 2.4vh;
  background: linear-gradient(160deg, color-mix(in oklab, var(--c1) 70%, #000), rgb(0 0 0 / .75));
  border: .3vh solid color-mix(in oklab, var(--c3) 45%, transparent);
  box-shadow: 0 0 6vh color-mix(in oklab, var(--glow) 45%, transparent);
}
.cel-progress.is-complete { border-color: #ffd84d; box-shadow: 0 0 9vh rgb(255 200 40 / .8); }
.cel-progress-kicker { font-size: 1.9vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--c3); }
.cel-progress-name { margin-top: .8vh; font-size: 4.4vh; font-weight: 700; line-height: 1.1; }
.cel-progress-bar {
  position: relative; margin-top: 3.2vh; height: 4.2vh; border-radius: 999px;
  background: rgb(255 255 255 / .1); box-shadow: inset 0 .3vh .8vh rgb(0 0 0 / .5);
}
.cel-progress-fill, .cel-progress-gain { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; }
.cel-progress-fill { background: linear-gradient(90deg, var(--c1), var(--c2)); }
.cel-progress-gain {
  width: 0; background: linear-gradient(90deg, var(--c3), #fff);
  box-shadow: 0 0 2.5vh var(--glow);
  background-size: 200% 100%; animation: cel-holo 1s linear infinite alternate;
}
.cel-progress-head {
  position: absolute; top: 50%; width: 6vh; height: 6vh; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--c3) 30%, transparent 70%);
  mix-blend-mode: screen;
}
.cel-progress-numbers { margin-top: 1.6vh; display: flex; justify-content: space-between; align-items: baseline; font-variant-numeric: tabular-nums; }
.cel-progress-count { font-size: 3vh; font-weight: 700; }
.cel-progress-pct { font-size: 5.5vh; font-weight: 700; color: var(--c3); text-shadow: 0 0 2vh var(--glow); }
.cel-progress-note { margin-top: 1.4vh; min-height: 3.6vh; font-family: var(--font-brand); font-size: 3.4vh; color: #fff; }
.cel-progress.is-complete .cel-progress-note { font-size: 6vh; color: #ffd84d; text-shadow: 0 0 3vh rgb(255 200 40 / .9); }

.cel-progress-chip {
  position: absolute; left: 0; top: 0;
  padding: .8vh 2vh; border-radius: 999px; white-space: nowrap;
  font-size: 4vh; font-weight: 700; color: var(--c1);
  background: linear-gradient(180deg, #fff, var(--c3));
  box-shadow: 0 0 4vh var(--glow);
}

/* --- Tickets afvinken --------------------------------------------------- */

.cel-tickoff { width: min(80vw, 110vh); visibility: hidden; }
.cel-tickoff-head { display: flex; justify-content: space-between; align-items: baseline; gap: 2vh; }
.cel-tickoff-name { font-size: 2.6vh; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--c3); }
.cel-tickoff-count { font-size: 3.6vh; font-weight: 700; font-variant-numeric: tabular-nums; }
.cel-tickoff-track { margin-top: 1.4vh; display: flex; gap: .5vh; height: 3.4vh; }
.cel-seg {
  flex: 1; border-radius: .6vh; background: rgb(255 255 255 / .12);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15);
}
.cel-seg.is-closed { background: linear-gradient(180deg, #6ee7b7, #10b981); box-shadow: 0 0 1vh rgb(52 211 153 / .45); }
.cel-seg.is-next { box-shadow: inset 0 0 0 .3vh #fff, 0 0 2vh #fff; animation: cel-blink .5s ease-in-out infinite alternate; }
.cel-seg.is-new { background: linear-gradient(180deg, #fff, #6ee7b7); animation: cel-pop .5s cubic-bezier(.3,1.6,.5,1); box-shadow: 0 0 3vh #34d399; }
.cel-tickoff-track.is-bar { position: relative; display: block; border-radius: 999px; background: rgb(255 255 255 / .12); }
.cel-tickoff-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #059669, #6ee7b7); transition: width .6s cubic-bezier(.2,.8,.3,1); }
.cel-tickoff-head-dot {
  position: absolute; top: 50%; width: 5vh; height: 5vh; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, #fff, #6ee7b7 35%, transparent 70%); transition: left .6s cubic-bezier(.2,.8,.3,1);
}
.cel-tickoff-note { margin-top: 1.2vh; min-height: 4vh; text-align: center; font-family: var(--font-brand); font-size: 4.6vh; color: #fbbf24; text-shadow: 0 0 3vh rgb(251 191 36 / .8); }

.cel-check {
  position: absolute; width: 9vh; height: 9vh; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #6ee7b7, #059669);
  box-shadow: 0 0 0 .6vh #fff, 0 0 5vh #34d399;
}
.cel-check svg { width: 62%; height: 62%; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; }
.cel-check.is-drawn svg { transition: stroke-dashoffset .3s ease-out; stroke-dashoffset: 0; }

.cel-sound {
  position: absolute; left: 3vmin; bottom: 3vmin; pointer-events: auto; cursor: pointer;
  padding: .6vmin 1.6vmin; border-radius: 999px; color: #fff;
  background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .25);
  font: 700 2vmin var(--font-display);
}
.cel-sound[hidden] { display: none; }

/* --- Zonder beweging ---------------------------------------------------- */

.is-still .cel-pack, .is-still .cel-beam, .is-still .cel-banner, .is-still .cel-progress { display: none; }
.is-still .cel-tickoff { visibility: visible; }
.is-still .cel-card-inner { transform: rotateY(180deg); animation: none; }
.is-still .cel-stamp { visibility: visible; }
.is-still *, .is-still *::before { animation: none !important; }

/* --- Trein: nieuwe tickets ---------------------------------------------- */

.celebration[data-mode="train"] { --c1: #0b2545; --c2: #2563eb; --c3: #bfdbfe; --glow: rgb(96 165 250 / .7); }

.cel-train-scene {
  --wagon-h: calc(var(--wagon-w) * .42);
  --wheel: calc(var(--wagon-h) * .34);
  --rail-y: 60vh;
  position: absolute; inset: 0;
}

.cel-train-title {
  position: absolute; left: 0; right: 0; top: 4vh;
  display: flex; flex-direction: column; align-items: center; gap: 1vh; opacity: 0;
}
.cel-train-title-main {
  font-family: var(--font-brand); font-size: 10vh; line-height: 1;
  color: #fff; text-shadow: 0 .6vh 0 #ff7800, 0 0 4vh var(--glow);
}
.cel-train-title-sub {
  font-size: 2.6vh; font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
  color: var(--c3); background: rgb(0 0 0 / .35); padding: .6vh 2.2vh; border-radius: 999px;
}

.cel-train-track {
  transition: opacity .4s;
  position: absolute; left: 0; right: 0; top: var(--rail-y); height: 2.6vh;
  background:
    linear-gradient(#cbd5e1, #64748b) top / 100% .7vh no-repeat,
    linear-gradient(#94a3b8, #475569) 0 1.5vh / 100% .5vh no-repeat,
    repeating-linear-gradient(90deg, #5b3a1e 0 2.2vh, transparent 2.2vh 5vh) 0 .5vh / 100% 2.1vh no-repeat;
  filter: drop-shadow(0 1vh 1.5vh rgb(0 0 0 / .6));
}

.cel-train {
  position: absolute; left: 0; top: var(--rail-y);
  display: flex; align-items: flex-end; gap: calc(var(--wagon-w) * .06);
  translate: 0 -100%;
  will-change: transform;
}

.cel-wheels {
  position: absolute; left: 8%; right: 8%; bottom: 0; height: var(--wheel);
  display: flex; justify-content: space-around; align-items: flex-end;
}
.cel-wheel {
  width: var(--wheel); height: var(--wheel); border-radius: 50%;
  background:
    radial-gradient(circle, #e2e8f0 0 14%, transparent 15%),
    repeating-conic-gradient(#94a3b8 0 8deg, #1e293b 8deg 45deg);
  box-shadow: 0 0 0 calc(var(--wheel) * .1) #0f172a inset, 0 0 0 calc(var(--wheel) * .04) #cbd5e1;
}
.cel-wheel.is-big { --wheel: calc(var(--wagon-h) * .48); }
.cel-train.is-moving .cel-wheel { animation: cel-spin .45s linear infinite; }

/* Locomotief: rijdt naar links, dus de neus zit links. */
.cel-loco {
  position: relative; flex: none;
  width: calc(var(--wagon-w) * .95); height: calc(var(--wagon-h) * 1.55);
}
.cel-loco-boiler {
  position: absolute; left: 6%; width: 64%; bottom: calc(var(--wheel) * .7); height: calc(var(--wagon-h) * .66);
  border-radius: calc(var(--wagon-h) * .33) calc(var(--wagon-h) * .06) calc(var(--wagon-h) * .06) calc(var(--wagon-h) * .33);
  background: linear-gradient(180deg, #ffb066 0%, #ff7800 45%, #b84f00 100%);
  box-shadow: inset 0 calc(var(--wagon-h) * -.06) 0 rgb(0 0 0 / .2);
  display: flex; align-items: center; justify-content: center;
}
.cel-loco-logo { height: 70%; filter: drop-shadow(0 .4vh .6vh rgb(0 0 0 / .4)); }
.cel-loco-lamp {
  position: absolute; left: -4%; top: 22%; width: 14%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0 35%, #ffd84d 60%, #b45309);
  box-shadow: -2vh 0 5vh 1vh rgb(255 230 140 / .6);
}
.cel-loco-chimney {
  position: absolute; left: 16%; width: 13%; bottom: calc(var(--wheel) * .7 + var(--wagon-h) * .6); height: calc(var(--wagon-h) * .42);
  background: linear-gradient(90deg, #1e293b, #475569 50%, #1e293b);
  clip-path: polygon(0 0, 100% 0, 82% 30%, 82% 100%, 18% 100%, 18% 30%);
}
.cel-loco-cab {
  position: absolute; right: 0; width: 36%; bottom: calc(var(--wheel) * .7); height: calc(var(--wagon-h) * 1.12);
  border-radius: calc(var(--wagon-h) * .08) calc(var(--wagon-h) * .08) calc(var(--wagon-h) * .04) calc(var(--wagon-h) * .04);
  background: linear-gradient(180deg, #1d4ed8, #0b2545);
  border-top: calc(var(--wagon-h) * .08) solid #ff7800;
}
.cel-loco-window {
  position: absolute; left: 18%; right: 18%; top: 14%; height: 34%; border-radius: calc(var(--wagon-h) * .04);
  background: linear-gradient(160deg, #fef3c7, #fbbf24); box-shadow: 0 0 3vh rgb(251 191 36 / .5);
}
.cel-loco-catcher {
  position: absolute; left: -4%; bottom: 0; width: 18%; height: calc(var(--wheel) * .9);
  background: repeating-linear-gradient(90deg, #475569 0 .5vh, #1e293b .5vh 1.1vh);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Wagons: één per project. */
.cel-wagon {
  position: relative; flex: none;
  width: var(--wagon-w); height: calc(var(--wagon-h) + var(--wheel) * .6);
}
.cel-wagon::before {
  content: ""; position: absolute; right: 100%; bottom: calc(var(--wheel) * .9);
  width: calc(var(--wagon-w) * .07); height: calc(var(--wagon-h) * .06); background: #334155;
}
.cel-wagon-body {
  position: absolute; left: 0; right: 0; bottom: calc(var(--wheel) * .6); height: var(--wagon-h);
  padding: calc(var(--wagon-h) * .09) calc(var(--wagon-w) * .05);
  border-radius: calc(var(--wagon-h) * .08);
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .06) 0 calc(var(--wagon-w) * .002), transparent 0 calc(var(--wagon-w) * .12)),
    linear-gradient(180deg, #fff8ec, #f3e3c3);
  border-bottom: calc(var(--wagon-h) * .1) solid #ff7800;
  box-shadow: 0 1.5vh 3vh rgb(0 0 0 / .5), inset 0 0 0 calc(var(--wagon-h) * .03) rgb(184 79 0 / .35);
  display: flex; flex-direction: column; justify-content: space-between; color: #3b2a14;
}
.cel-wagon.is-merged .cel-wagon-body { background: linear-gradient(180deg, #e2e8f0, #94a3b8); }
.cel-wagon-name {
  font-family: var(--font-brand); font-size: calc(var(--wagon-h) * .2); line-height: 1.05;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cel-wagon-faces { display: flex; align-items: center; }
.cel-wagon-face, .cel-wagon-more {
  width: calc(var(--wagon-h) * .27); height: calc(var(--wagon-h) * .27); font-size: calc(var(--wagon-h) * .1);
  margin-right: calc(var(--wagon-h) * -.06); box-shadow: 0 0 0 calc(var(--wagon-h) * .025) #fff8ec;
}
.cel-wagon-more {
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: #ff7800; color: #fff; font-weight: 700;
}
.cel-wagon-load {
  position: absolute; left: 14%; right: 14%; bottom: calc(var(--wheel) * .6 + var(--wagon-h) * .82); height: calc(var(--wagon-h) * .4);
  display: flex; justify-content: center; align-items: flex-end;
}
.cel-wagon-crate {
  width: 30%; height: 70%; margin: 0 -3%; border-radius: .4vh;
  background: linear-gradient(90deg, #fff8ec 75%, #ff7800 75%); box-shadow: 0 .3vh .8vh rgb(0 0 0 / .4);
}
.cel-wagon-crate:nth-child(odd) { rotate: -7deg; }
.cel-wagon-crate:nth-child(even) { rotate: 6deg; height: 85%; }

.cel-wagon-sign {
  position: absolute; left: 50%; bottom: calc(100% + 5vh); translate: -50% 0;
  min-width: 60%; padding: .8vh 2vh; border-radius: 1.2vh; text-align: center; white-space: nowrap;
  background: linear-gradient(160deg, color-mix(in oklab, var(--c1) 70%, #000), rgb(0 0 0 / .8));
  border: .3vh solid color-mix(in oklab, var(--c3) 45%, transparent);
  box-shadow: 0 0 4vh color-mix(in oklab, var(--glow) 45%, transparent);
  display: flex; align-items: baseline; justify-content: center; gap: 1vh;
}
.cel-wagon-sign:empty, .cel-wagon-sign:has(.cel-wagon-sign-count:empty) { opacity: 0; }
.cel-wagon-sign-count { font-size: calc(var(--wagon-h) * .26); font-weight: 700; font-variant-numeric: tabular-nums; }
.cel-wagon-sign-unit { font-size: calc(var(--wagon-h) * .1); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--c3); }
.cel-wagon-gain {
  position: absolute; left: 50%; bottom: 100%;
  padding: .4vh 1.6vh; border-radius: 999px;
  font-size: calc(var(--wagon-h) * .2); font-weight: 700; color: #3b1d00;
  background: linear-gradient(180deg, #fff, #ffd84d); box-shadow: 0 0 3vh rgb(255 200 40 / .8);
}

/* Gevallen tickets */
.cel-train-piles { position: absolute; inset: 0; }
.cel-mini {
  --mh: calc(var(--wagon-h) * .4);
  position: absolute; left: 0; top: 0;
  width: calc(var(--wagon-w) * .92); height: var(--mh);
  padding: 0 calc(var(--mh) * .2);
  display: flex; align-items: center; gap: calc(var(--mh) * .2);
  border-radius: calc(var(--mh) * .12);
  background: linear-gradient(90deg, #fff8ec 86%, #ff7800 86%);
  color: #3b2a14; box-shadow: 0 1vh 2vh rgb(0 0 0 / .5);
}
.cel-mini-face { width: calc(var(--mh) * .68); height: calc(var(--mh) * .68); font-size: calc(var(--mh) * .26); box-shadow: 0 0 0 calc(var(--mh) * .05) #ff7800; }
.cel-mini-text { min-width: 0; flex: 1; padding-right: 14%; }
.cel-mini-title { font-size: calc(var(--mh) * .25); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel-mini-meta { display: flex; gap: calc(var(--mh) * .2); font-size: calc(var(--mh) * .2); color: #6b5a44; }
.cel-mini-ref { font-weight: 700; color: #b84f00; }
.cel-mini.is-more { justify-content: center; background: linear-gradient(180deg, #ff9a3c, #ff7800); color: #fff; }
.cel-mini-more { font-family: var(--font-brand); font-size: calc(var(--mh) * .42); }

/* Eindbord: wie maakte ze en welke projecten groeiden */
.cel-train-board {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(88vw, 165vh); visibility: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3vw;
}
.cel-board-col {
  padding: 3vh 3vh 2vh; border-radius: 2vh;
  background: linear-gradient(160deg, color-mix(in oklab, var(--c1) 70%, #000), rgb(0 0 0 / .78));
  border: .3vh solid color-mix(in oklab, var(--c3) 40%, transparent);
  box-shadow: 0 0 6vh color-mix(in oklab, var(--glow) 40%, transparent);
}
.cel-board-kicker { font-size: 2.2vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--c3); margin-bottom: 1.6vh; }
.cel-board-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.6vh;
  padding: 1.1vh 0; border-top: .15vh solid rgb(255 255 255 / .1);
  opacity: 0; translate: -3vh 0; transition: opacity .3s, translate .3s cubic-bezier(.2,.9,.3,1.3);
}
.cel-board-row.is-in { opacity: 1; translate: 0 0; }
[data-list="projects"] .cel-board-row { grid-template-columns: 1fr auto auto; }
.cel-board-face { width: 5vh; height: 5vh; font-size: 2vh; box-shadow: 0 0 0 .3vh #ff7800; }
.cel-board-face-more { color: var(--c3); font-weight: 700; }
.cel-board-row.is-summary .cel-board-bar { visibility: hidden; }
.cel-board-name { font-size: 3vh; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel-board-bar {
  width: 12vw; height: 1.4vh; border-radius: 999px; background: rgb(255 255 255 / .1); position: relative; overflow: hidden;
}
.cel-board-bar::after {
  content: ""; position: absolute; inset: 0; width: calc(var(--share) * 100%); border-radius: inherit;
  background: linear-gradient(90deg, #ff7800, #ffd84d); box-shadow: 0 0 1.5vh rgb(255 160 40 / .7);
}
.cel-board-change { font-size: 2.4vh; color: var(--c3); font-variant-numeric: tabular-nums; }
.cel-board-count { font-size: 3.4vh; font-weight: 700; color: #ffd84d; font-variant-numeric: tabular-nums; min-width: 5vh; text-align: right; }

.cel-train-scene.is-board .cel-train-track { opacity: 0; }
.is-still .cel-train-title { opacity: 1; }
.is-still .cel-train, .is-still .cel-train-track { display: none; }

@keyframes cel-spin    { to { rotate: 360deg; } }
@keyframes cel-sheen   { 0% { translate: -60% 0; } 60%, 100% { translate: 60% 0; } }
@keyframes cel-sweep   { 0% { translate: -60% 0; } 55%, 100% { translate: 60% 0; } }
@keyframes cel-bob     { 50% { translate: 0 calc(var(--u) * -1.2); } }
@keyframes cel-pulse   { 50% { opacity: .95; scale: 1.06; } }
@keyframes cel-holo    { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes cel-rainbow { to { background-position: 200% 0; } }
@keyframes cel-blink   { to { opacity: .45; } }
@keyframes cel-pop     { 50% { scale: 1 1.6; } }
@keyframes cel-charge  { from { filter: drop-shadow(0 0 calc(var(--u) * 3) var(--glow)) brightness(1); } to { filter: drop-shadow(0 0 calc(var(--u) * 9) var(--glow)) brightness(1.25); } }
@keyframes cel-float {
  0%, 100% { transform: rotateY(180deg) rotateX(0deg) translateY(0); }
  25% { transform: rotateY(186deg) rotateX(3deg) translateY(calc(var(--u) * -1.5)); }
  75% { transform: rotateY(174deg) rotateX(-3deg) translateY(calc(var(--u) * 1)); }
}

/* --- Rookie, combo, mythisch ------------------------------------------- */

.cel-card.is-rookie .cel-card-project { display: none; }
.cel-card.is-rookie .cel-card-front { background: linear-gradient(135deg, #a7f3d0, #10b981 35%, #064e3b 55%, #10b981 75%, #a7f3d0); }
.cel-card.is-rookie .cel-card-panel::after {
  content: "Rookie"; position: absolute; right: calc(var(--u) * -9); top: calc(var(--u) * 13); rotate: 45deg;
  width: calc(var(--u) * 42); padding: calc(var(--u) * .8) 0; text-align: center;
  font-size: calc(var(--u) * 3); font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: #064e3b; background: linear-gradient(90deg, #a7f3d0, #ecfdf5, #a7f3d0);
  box-shadow: 0 0 calc(var(--u) * 3) rgb(16 185 129 / .8);
}

.cel-combo {
  position: absolute; left: 6vw; top: 18vh; display: flex; align-items: baseline; gap: 1.5vh;
  font-family: var(--font-display); font-weight: 700; font-style: italic; text-transform: uppercase;
  filter: drop-shadow(0 .6vh 0 #7a1f00) drop-shadow(0 0 3vh rgb(255 120 0 / .9));
}
.cel-combo-word { font-size: 7vh; letter-spacing: .05em; color: #fff; -webkit-text-stroke: .25vh #ff7800; }
.cel-combo-count {
  font-size: 13vh; line-height: .9;
  background: linear-gradient(180deg, #fff 10%, #ffd84d 45%, #ff7800 80%); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.cel-crack { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cel-crack polyline {
  fill: none; stroke: rgb(255 255 255 / .85); stroke-width: 2.5; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgb(125 249 255 / .9));
  stroke-dasharray: 4000; stroke-dashoffset: 4000; animation: cel-draw .45s ease-out forwards;
}
@keyframes cel-draw { to { stroke-dashoffset: 0; } }

/* --- Alarmbadge en rustige weergave ------------------------------------ */

.cel-alert {
  position: absolute; left: 50%; top: 1.5vh; translate: -50% 0; visibility: hidden;
  padding: .8vh 2.4vh; border-radius: 999px; white-space: nowrap;
  font-size: 2.4vh; font-weight: 700; color: #fff; background: #b91c1c;
  box-shadow: 0 0 0 .3vh #fecaca, 0 0 4vh rgb(239 68 68 / .9);
  animation: cel-alert-pulse 1.2s ease-in-out infinite;
}
.cel-alert.is-visible { visibility: visible; }
@keyframes cel-alert-pulse { 50% { background: #ef4444; box-shadow: 0 0 0 .5vh #fecaca, 0 0 7vh rgb(239 68 68 / 1); } }

.cel-notice {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; text-align: center;
  padding: 4vh 6vh; border-radius: 2vh; background: rgb(0 0 0 / .6); border: .3vh solid var(--c3);
}
.cel-notice-kicker { font-size: 2.4vh; letter-spacing: .3em; text-transform: uppercase; color: var(--c3); }
.cel-notice-title { margin-top: 1vh; font-size: 5vh; font-weight: 700; }

/* --- Octie, de 3D-mascotte ---------------------------------------------- */

.cel-octopus { position: absolute; z-index: 2; pointer-events: none; opacity: 0; filter: drop-shadow(0 2vh 3vh rgb(0 0 0 / .45)); }
/* Vaste volgorde, ook boven een welkomstscherm (z-index 1): Octie, dan deeltjes, dan de flits. */
.cel-canvas { z-index: 3; }
.cel-flash { z-index: 4; }