/* Wereldkaart: een projectfase is gehaald. */

.celebration[data-mode="levelmap"] { --c1: #052e16; --c2: #22c55e; --c3: #fef08a; --glow: rgb(250 204 21 / .85); }

.cel-lvl-scene { position: absolute; inset: 0; }
.cel-lvl-sky { position: absolute; inset: -4vh; background: linear-gradient(180deg, #1e3a8a, #3b82f6 22%, #7dd3fc 38%); }
.cel-lvl-cloud {
  position: absolute; width: 16vh; height: 5vh; border-radius: 5vh; background: #fff; opacity: .9;
  box-shadow: 4vh -2.4vh 0 .4vh #fff, 9vh -1vh 0 0 #fff;
  animation: cel-lvl-drift 26s linear infinite;
}
.cel-lvl-cloud.is-a { top: 13vh; left: 6vw; }
.cel-lvl-cloud.is-b { top: 22vh; left: 62vw; scale: .8; animation-duration: 34s; }
.cel-lvl-cloud.is-c { top: 9vh; left: 82vw; scale: .6; animation-duration: 20s; }
@keyframes cel-lvl-drift { to { translate: -40vw 0; } }

.cel-lvl-sea {
  position: absolute; left: -4vh; right: -4vh; top: 33vh; bottom: -4vh;
  background:
    radial-gradient(ellipse 3vh 1vh at 50% 50%, rgb(255 255 255 / .5) 40%, transparent 45%) 0 0 / 9vh 5vh,
    linear-gradient(180deg, #0ea5e9, #0369a1);
  animation: cel-lvl-waves 4s linear infinite;
}
@keyframes cel-lvl-waves { to { background-position: 9vh 0, 0 0; } }
.cel-lvl-island {
  position: absolute; left: 2.5vw; right: 2.5vw; top: 37vh; bottom: 3vh; border-radius: 6vh;
  background:
    repeating-conic-gradient(#4ade80 0 25%, #22c55e 0 50%) 0 0 / 6vh 6vh;
  box-shadow: 0 0 0 1.6vh #fde68a, 0 0 0 2.2vh #ca8a04, 0 2vh 4vh rgb(0 0 0 / .35), inset 0 -2vh 3vh rgb(0 0 0 / .15);
}

.cel-lvl-decor > * { position: absolute; translate: -50% -100%; }
.cel-lvl-hill {
  width: 14vh; height: 9vh; border-radius: 7vh 7vh 0 0; translate: -50% -60%;
  background: radial-gradient(circle at 35% 30%, #86efac, #16a34a 60%, #14532d);
  box-shadow: inset 0 -.6vh 0 rgb(0 0 0 / .2);
}
.cel-lvl-hill::before, .cel-lvl-hill::after {
  content: ""; position: absolute; top: 3vh; width: 1vh; height: 2.2vh; border-radius: 1vh; background: #052e16;
}
.cel-lvl-hill::before { left: 5vh; }
.cel-lvl-hill::after { left: 7.4vh; }
.cel-lvl-tree { width: 5vh; height: 7vh; animation: cel-lvl-sway 2.4s ease-in-out var(--delay) infinite; transform-origin: 50% 100%; }
.cel-lvl-tree::before {
  content: ""; position: absolute; left: 0; top: 0; width: 5vh; height: 5vh; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4ade80, #15803d 60%, #14532d); box-shadow: 0 .4vh 0 rgb(0 0 0 / .2);
}
.cel-lvl-tree::after { content: ""; position: absolute; left: 2vh; top: 4.4vh; width: 1vh; height: 2.6vh; background: #78350f; border-radius: .3vh; }
@keyframes cel-lvl-sway { 50% { rotate: 4deg; } }
.cel-lvl-flower {
  width: 1.6vh; height: 1.6vh; border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(circle, #facc15 30%, #fff 32%);
  animation: cel-lvl-bloom 1.6s ease-in-out var(--delay) infinite;
}
.cel-lvl-flower:nth-child(3n) { background: radial-gradient(circle, #facc15 30%, #f87171 32%); }
@keyframes cel-lvl-bloom { 50% { scale: 1.3; } }

.cel-lvl-road { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cel-lvl-edge { fill: none; stroke: #92400e; stroke-width: 4.2vh; stroke-linecap: round; }
.cel-lvl-sand { fill: none; stroke: #fde68a; stroke-width: 3vh; stroke-linecap: round; }
.cel-lvl-dots { fill: none; stroke: #b45309; stroke-width: 1vh; stroke-linecap: round; stroke-dasharray: 0 2.4vh; opacity: 0; }
.cel-lvl-seg.is-done .cel-lvl-dots { stroke: #dc2626; }

.cel-lvl-node { position: absolute; width: 0; height: 0; visibility: hidden; }
.cel-lvl-pad {
  position: absolute; left: -4vh; top: -4vh; width: 8vh; height: 8vh; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, #93c5fd, #2563eb 60%, #1e3a8a);
  box-shadow: 0 0 0 .6vh #fff, 0 0 0 1vh #1e293b, 0 .8vh 0 1vh rgb(0 0 0 / .3);
}
.cel-lvl-num { font-size: 3.4vh; font-weight: 700; color: #fff; text-shadow: 0 .3vh 0 rgb(0 0 0 / .45); }
.cel-lvl-node.is-done .cel-lvl-pad { background: radial-gradient(circle at 40% 35%, #fff7c2, #facc15 55%, #a16207); }
.cel-lvl-node.is-done .cel-lvl-num { color: #713f12; text-shadow: 0 .3vh 0 rgb(255 255 255 / .5); }
.cel-lvl-node.is-current .cel-lvl-pad {
  background: radial-gradient(circle at 40% 35%, #fecaca, #ef4444 55%, #7f1d1d);
  animation: cel-lvl-pulse .9s ease-in-out infinite;
}
@keyframes cel-lvl-pulse { 50% { box-shadow: 0 0 0 .6vh #fff, 0 0 0 1vh #1e293b, 0 0 4vh 2vh rgb(254 240 138 / .95); } }
.cel-lvl-node.is-cleared .cel-lvl-pad { animation: cel-lvl-glow 1.4s ease-in-out infinite; }
@keyframes cel-lvl-glow { 50% { box-shadow: 0 0 0 .6vh #fff, 0 0 0 1vh #1e293b, 0 0 5vh 2vh rgb(250 204 21 / .95); } }

.cel-lvl-label {
  position: absolute; left: 0; top: 5.6vh; width: max-content; max-width: 12.5vw; translate: -50% 0; text-align: center;
  padding: .6vh 1.4vh; border-radius: .9vh; background: linear-gradient(180deg, #a16207, #78350f); color: #fff;
  border: .3vh solid #422006; box-shadow: 0 .5vh 0 rgb(0 0 0 / .3);
  font-size: 2.2vh; font-weight: 700; line-height: 1.2;
}
.cel-lvl-node.is-done .cel-lvl-label { background: linear-gradient(180deg, #facc15, #ca8a04); color: #422006; }

.cel-lvl-castle { display: none; }
.cel-lvl-node.is-castle .cel-lvl-castle {
  display: flex; gap: 1vh; position: absolute; left: 4.6vh; top: -7.4vh; width: 9vh; height: 8vh; padding-top: 0;
  background: linear-gradient(180deg, #e7e5e4, #a8a29e); border: .3vh solid #44403c; border-radius: .4vh .4vh 0 0;
}
.cel-lvl-castle i { flex: 1; height: 1.8vh; margin-top: -1.8vh; background: #d6d3d1; border: .3vh solid #44403c; border-bottom: 0; }
.cel-lvl-node.is-castle .cel-lvl-castle::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 3vh; height: 4vh; margin-left: -1.5vh; border-radius: 1.5vh 1.5vh 0 0; background: #292524;
}

.cel-lvl-token { position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; z-index: 3; }
.cel-lvl-token-face {
  position: absolute; left: -4.4vh; top: -10vh; width: 8.8vh; height: 8.8vh; font-size: 3.4vh;
  box-shadow: 0 0 0 .6vh #fff, 0 0 0 1vh #dc2626, 0 1vh 1.6vh rgb(0 0 0 / .4);
  animation: cel-lvl-bob .5s ease-in-out infinite alternate;
}
.cel-lvl-token.is-cheering .cel-lvl-token-face { animation-duration: .25s; }
.cel-lvl-token-shadow { position: absolute; left: -3vh; top: -1.2vh; width: 6vh; height: 1.6vh; border-radius: 50%; background: rgb(0 0 0 / .3); z-index: -1; }
@keyframes cel-lvl-bob { to { translate: 0 -.8vh; } }

.cel-lvl-flag { position: absolute; width: 0; height: 0; visibility: hidden; z-index: 2; }
.cel-lvl-pole {
  position: absolute; left: -.4vh; bottom: 0; width: .8vh; height: 14vh; transform-origin: 50% 100%;
  background: linear-gradient(90deg, #64748b, #f1f5f9, #64748b); border-radius: .4vh;
}
.cel-lvl-knob { position: absolute; left: -1.1vh; bottom: 13.4vh; width: 2.2vh; height: 2.2vh; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff7c2, #facc15 50%, #a16207); opacity: 0; }
.cel-lvl-cloth {
  position: absolute; left: .4vh; bottom: 7.6vh; width: 7.5vh; height: 5.6vh; transform-origin: 0 50%;
  background: linear-gradient(180deg, #ef4444, #b91c1c); clip-path: polygon(0 0, 100% 50%, 0 100%);
  display: flex; align-items: center; padding-left: .8vh; font-size: 2.6vh; color: #fde047;
}
.cel-lvl-cloth.is-waving { animation: cel-lvl-wave .5s ease-in-out infinite alternate; }
@keyframes cel-lvl-wave { to { scale: .88 1.06; } }

.cel-lvl-coin {
  position: absolute; width: 5vh; height: 6vh; border-radius: 50%; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, #fff7c2, #facc15 55%, #a16207); border: .4vh solid #713f12;
  font-size: 2vh; font-weight: 700; color: #713f12;
}
.cel-lvl-next {
  position: absolute; z-index: 4; padding: .6vh 1.6vh; border-radius: 99px; white-space: nowrap;
  background: #fff; color: #dc2626; border: .4vh solid #dc2626; font-size: 2.2vh; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  animation: cel-lvl-bob .45s ease-in-out infinite alternate;
}

.cel-lvl-hud { position: absolute; left: 3vw; right: 3vw; top: 2vh; display: flex; justify-content: space-between; align-items: flex-start; z-index: 5; }
.cel-lvl-hud-box {
  display: flex; flex-direction: column; padding: 1vh 2.4vh; border-radius: 1.2vh; max-width: 55vw;
  background: rgb(15 23 42 / .82); border: .4vh solid #fff; box-shadow: 0 .6vh 0 rgb(0 0 0 / .3);
}
.cel-lvl-hud-box.is-right { align-items: flex-end; }
.cel-lvl-hud-label { font-size: 2vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #fde047; }
.cel-lvl-hud-world, .cel-lvl-hud-count { font-size: 4.4vh; font-weight: 700; line-height: 1.15; color: #fff; text-shadow: 0 .4vh 0 #000; font-variant-numeric: tabular-nums; }

.cel-lvl-banner {
  position: absolute; left: 50%; top: 9vh; z-index: 6; max-width: 70vw; visibility: hidden;
  padding: 1.6vh 5vh 2vh; border-radius: 2.4vh; text-align: center;
  background: linear-gradient(180deg, rgb(30 58 138 / .95), rgb(15 23 42 / .95));
  border: .6vh solid #fff; box-shadow: 0 0 0 1vh #1e293b, 0 2vh 4vh rgb(0 0 0 / .5), 0 0 8vh rgb(250 204 21 / .6);
}
.cel-lvl-banner.is-shining { animation: cel-lvl-shine 1.2s ease-in-out infinite; }
@keyframes cel-lvl-shine { 50% { box-shadow: 0 0 0 1vh #1e293b, 0 2vh 4vh rgb(0 0 0 / .5), 0 0 12vh rgb(250 204 21 / 1); } }
.cel-lvl-banner-kicker {
  font-family: var(--font-brand); font-size: 8.5vh; line-height: 1; color: #fde047;
  text-shadow: 0 .6vh 0 #b45309, 0 0 3vh rgb(250 204 21 / .7);
}
.cel-lvl-banner-phase { margin-top: .6vh; font-size: 5vh; font-weight: 700; line-height: 1.15; color: #fff; text-shadow: 0 .4vh 0 #000; }
.cel-lvl-banner-by { margin-top: 1.2vh; display: flex; align-items: center; justify-content: center; gap: 1.2vh; flex-wrap: wrap; font-size: 2.6vh; font-weight: 700; color: #bfdbfe; }
.cel-lvl-banner-face { width: 4.6vh; height: 4.6vh; font-size: 1.8vh; box-shadow: 0 0 0 .3vh #fff; }
.cel-lvl-banner-project { padding: .3vh 1.4vh; border-radius: 99px; background: rgb(255 255 255 / .15); color: #fff; }