/* Стилі плагіна cutscene — катсцена будівництва «Бобрового містечка» */
.cs-ov {
  position: fixed; inset: 0; z-index: 950;
  display: grid; grid-template-rows: auto 1fr auto;
  overflow: hidden; color: #3b2f2a;
  font-family: var(--font-round, system-ui), system-ui, sans-serif;
  background: linear-gradient(#86ccf0 0%, #bfe7fa 55%, #e6f7ff 100%);
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  cursor: pointer; opacity: 1; transition: opacity .3s ease;
  animation: cs-in .35s ease both;
}
.cs-ov.cs-out { opacity: 0; pointer-events: none; }
.cs-ov * { box-sizing: border-box; }
.cs-ov svg [class^="cs-"], .cs-ov svg [class*=" cs-"] { transform-box: fill-box; }

/* ---------- небо ---------- */
.cs-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cs-sun {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 7%); left: 7%;
  width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff2b0, #ffd45c 60%, #f7b733);
  border: 3px solid #3b2f2a; box-shadow: 0 0 0 10px rgba(255, 220, 110, .35), 0 0 0 22px rgba(255, 220, 110, .15);
}
.cs-sun::before {
  content: ""; position: absolute; inset: -22px; border-radius: 50%; z-index: -1;
  background: repeating-conic-gradient(rgba(255, 214, 92, .55) 0 10deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 47%, #000 68%, transparent 70%);
  mask: radial-gradient(circle, transparent 46%, #000 47%, #000 68%, transparent 70%);
  animation: cs-spin 14s linear infinite;
}
.cs-cloud { position: absolute; left: 0; animation: cs-drift 30s linear infinite; opacity: .95; }
.cs-cloud svg { display: block; width: 100%; height: auto; }
.cs-bird { position: absolute; left: 0; width: 22px; animation: cs-fly 15s linear infinite; }
.cs-bird svg { display: block; width: 100%; animation: cs-flap .35s ease-in-out infinite alternate; transform-origin: 50% 60%; }
.cs-hills {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 46%;
  background:
    radial-gradient(60% 55% at 15% 100%, #a9d796 98%, transparent 100%),
    radial-gradient(55% 48% at 60% 100%, #b9e0a6 98%, transparent 100%),
    radial-gradient(50% 52% at 95% 100%, #a3d290 98%, transparent 100%);
}

/* ---------- рамка ---------- */
.cs-skip {
  position: absolute; z-index: 4;
  top: calc(env(safe-area-inset-top, 0px) + 12px); right: calc(env(safe-area-inset-right, 0px) + 12px);
  min-height: 40px; padding: 8px 16px; border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 800; color: #3b2f2a; cursor: pointer;
  background: rgba(255, 255, 255, .9); border: 2.5px solid #3b2f2a; box-shadow: 0 3px 0 rgba(59, 47, 42, .3);
}
.cs-skip:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(59, 47, 42, .3); }
.cs-skip:focus-visible { outline: 3px solid #ff8a1f; outline-offset: 2px; }
.cs-ended .cs-skip { background: #ff8a1f; color: #fff; }

.cs-title {
  position: relative; z-index: 2; text-align: center;
  padding: calc(env(safe-area-inset-top, 0px) + 62px) calc(env(safe-area-inset-right, 0px) + 16px) 0 calc(env(safe-area-inset-left, 0px) + 16px);
  min-height: calc(env(safe-area-inset-top, 0px) + 150px);
  opacity: 0; transform: translateY(-12px) scale(.9); transition: opacity .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.cs-title h2 {
  margin: 4px 0 2px; font-size: clamp(24px, 7vw, 40px); font-weight: 900; line-height: 1.1; letter-spacing: -.01em;
  color: #3b2f2a; text-shadow: 0 2px 0 #fff, 0 0 18px rgba(255, 255, 255, .8);
}
.cs-title p { margin: 4px 0 0; font-size: clamp(14px, 4vw, 17px); font-weight: 700; opacity: .8; }
.cs-kicker {
  display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800;
  background: #ff8a1f; color: #fff; border: 2px solid #3b2f2a; text-transform: uppercase; letter-spacing: .04em;
}
.cs-star { display: inline-block; color: #f2c14e; -webkit-text-stroke: 1.5px #3b2f2a; animation: cs-starpop .7s cubic-bezier(.34, 1.56, .64, 1) .3s both; }
.s6 .cs-title { opacity: 1; transform: none; }

.cs-wrap { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; min-height: 0; padding: 0 8px; }
.cs-stagebox {
  position: relative; aspect-ratio: 200 / 140;
  width: min(94vw, 680px, calc((100vh - 260px) * 1.4286));
  width: min(94vw, 680px, calc((100dvh - 260px) * 1.4286));
  min-width: 260px;
}
.cs-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

.cs-bottom {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px calc(env(safe-area-inset-right, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 22px) calc(env(safe-area-inset-left, 0px) + 16px);
  min-height: 96px;
}
.cs-cap {
  max-width: 100%; padding: 10px 20px; border-radius: 999px; text-align: center;
  font-size: clamp(16px, 4.6vw, 22px); font-weight: 800; color: #3b2f2a;
  background: rgba(255, 255, 255, .94); border: 2.5px solid #3b2f2a; box-shadow: 0 4px 0 rgba(59, 47, 42, .25);
}
.cs-cap:empty { visibility: hidden; }
.cs-cap-in { animation: cs-capin .4s cubic-bezier(.34, 1.56, .64, 1) both; }
.cs-dots { display: flex; gap: 8px; }
.cs-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .7); border: 2px solid #3b2f2a; transition: background .3s, transform .3s; }
.cs-dots i.on { background: #ff8a1f; transform: scale(1.15); }

/* бобер-прораб */
.cs-fox {
  position: absolute; z-index: 2; left: -4%; bottom: 13.5%; width: 19%; max-width: 130px;
  animation: cs-foxin .7s cubic-bezier(.34, 1.4, .64, 1) .15s both;
}
.cs-fox .cs-mascot { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .15)); }
.cs-blueprint { position: absolute; right: -30%; bottom: 8%; width: 58%; transform: rotate(-12deg); transform-origin: 0 100%; animation: cs-bp 1.6s ease-in-out infinite alternate; }
.cs-fox.cs-cheer { animation: cs-hop .55s ease-in-out infinite alternate; }

/* ---------- анімації обʼєктів SVG ---------- */
.cs-survey, .cs-found, .cs-pile, .cs-slab, .cs-digger, .cs-walls, .cs-post, .cs-brick, .cs-frame, .cs-beam,
.cs-scaf, .cs-workers, .cs-crane, .cs-roofwrap, .cs-final, .cs-ribbon, .cs-fws, .cs-twinkles, .cs-dust,
.cs-uworkers, .cs-bunting { opacity: 0; }
.cs-swing { transform-origin: 0% 50%; animation: cs-swing .44s ease-in infinite; }
.cs-brush { animation-name: cs-paint; animation-duration: .6s; }
.cs-dig { transform-origin: 0% 0%; animation: cs-digm .5s ease-in-out infinite alternate; }
.cs-bob { transform-origin: 50% 100%; animation: cs-bobm .44s ease-in-out infinite alternate; }
.cs-spark { opacity: 0; animation: cs-sparkm .44s linear infinite; }

/* 1 — розмітка */
.s1 .cs-survey { opacity: 1; transition: opacity .2s; }
.cs-peg { transform-origin: 50% 100%; transform: scaleY(0); }
.s1 .cs-peg { animation: cs-rise .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.cs-wave { transform-origin: 0% 50%; animation: cs-wavem .7s ease-in-out infinite alternate; }
.s1 .cs-string { animation: cs-fadein .5s ease .5s both; }
.s3 .cs-survey { opacity: 0; transition: opacity .4s; }

/* 2 — фундамент */
.s2 .cs-found { opacity: 1; }
.s2 .cs-pile { opacity: 1; transform-origin: 50% 100%; animation: cs-rise .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.s2 .cs-pile-r { animation-delay: .15s; }
.s2 .cs-digger { opacity: 1; animation: cs-slidein .45s ease-out both; }
.s2 .cs-slab { opacity: 1; transform-origin: 50% 100%; animation: cs-rise .55s cubic-bezier(.34, 1.56, .64, 1) .55s both; }
.cs-dirt { opacity: 0; }
.s2 .cs-dirt { animation: cs-fly-p .7s ease-out 2 both; }
.s3 .cs-pile { animation: cs-sink .5s ease-in both; }
.s3 .cs-digger { opacity: 0; transition: opacity .3s; animation: none; }
.s3 .cs-dirt { animation: none; opacity: 0; }

/* 3 — стіни */
.s3 .cs-walls { opacity: 1; }
.s3 .cs-post { opacity: 1; transform-origin: 50% 100%; animation: cs-rise .5s ease-out both; }
.s3 .cs-brick { opacity: 1; animation: cs-brickm .32s cubic-bezier(.3, 1.4, .6, 1) both; }
.s3 .cs-frame { opacity: 1; transform-origin: 50% 100%; animation: cs-pop .4s cubic-bezier(.34, 1.56, .64, 1) 1.25s both; }
.s3 .cs-beam { opacity: 1; animation: cs-drop .4s ease-out 1.15s both; }
.s3 .cs-scaf { opacity: 1; animation: cs-up .5s ease-out both; }
.s3 .cs-workers { opacity: 1; animation: cs-fadein .4s ease .25s both; }
.s3 .cs-crane { opacity: 1; animation: cs-cranein .8s cubic-bezier(.3, 1.2, .6, 1) .5s both; }

/* 4 — дах */
.s4 .cs-roofwrap { opacity: 1; }
.cs-cable { transform-origin: 50% 0%; }
.s4 .cs-roof { animation: cs-roofdown 1.05s cubic-bezier(.45, .05, .35, 1) both; }
.s4 .cs-cable { animation: cs-cablem 1.05s cubic-bezier(.45, .05, .35, 1) both; }

/* 5 — розкриття */
.s5 .cs-scaf { animation: cs-fall .6s ease-in both; }
.s5 .cs-workers { animation: cs-fadeout .3s ease both; }
.s5 .cs-crane { animation: cs-craneout .7s ease-in both; }
.s5 .cs-walls, .s5 .cs-roofwrap, .s5 .cs-found { opacity: 0; transition: opacity .2s ease .3s; }
.s5 .cs-dust { opacity: 1; }
.cs-puff { opacity: 0; }
.s5 .cs-puff { animation: cs-puffm .9s ease-out .25s both; }
.s5 .cs-final { opacity: 1; transform-origin: 50% 100%; animation: cs-bounce .8s cubic-bezier(.34, 1.56, .64, 1) .35s both; }

/* 6 — урочисте відкриття */
.s6 .cs-ribbon { opacity: 1; animation: cs-fadein .3s ease both; }
.cs-rib-l { transform-origin: 0% 0%; }
.cs-rib-r { transform-origin: 100% 0%; }
.s6 .cs-rib-l { animation: cs-cutl .6s ease-in .7s both; }
.s6 .cs-rib-r { animation: cs-cutr .6s ease-in .7s both; }
.s6 .cs-bow { animation: cs-bowfall .6s ease-in .7s both; }
.s6 .cs-fws { opacity: 1; }
.cs-fw { opacity: 0; transform-origin: 50% 50%; }
.s6 .cs-fw { animation: cs-boom 1.2s ease-out infinite; }
.s6 .cs-twinkles { opacity: 1; }
.cs-tw { transform-origin: 50% 50%; }
.s6 .cs-tw { animation: cs-twinkle 1s ease-in-out infinite alternate; }
.s6 .cs-tw:nth-child(2n) { animation-delay: .4s; }
.s6 .cs-tw:nth-child(3n) { animation-delay: .7s; }

/* перескок у кінець — будівельні шари прибираємо одразу */
.cs-jump .cs-survey, .cs-jump .cs-found, .cs-jump .cs-walls, .cs-jump .cs-scaf, .cs-jump .cs-workers,
.cs-jump .cs-crane, .cs-jump .cs-roofwrap, .cs-jump .cs-uscaf, .cs-jump .cs-uworkers, .cs-jump .cs-shine { display: none; }
.cs-jump .cs-final, .cs-jump .cs-ubuild { animation-delay: 0s; }
.cs-jump .cs-puff { animation-delay: 0s; }

/* ---------- покращення ---------- */
.cs-uscaf { opacity: 0; }
.s1 .cs-uscaf { opacity: 1; animation: cs-up .45s ease-out both; }
.s1 .cs-uworkers { opacity: 1; animation: cs-fadein .3s ease .3s both; }
.cs-shine { opacity: 0; }
.s2 .cs-shine { animation: cs-shinem .9s ease-in-out 2 both; }
.s3 .cs-bunting { opacity: 1; }
.cs-pennant { transform-origin: 50% 0%; }
.s3 .cs-pennant { animation: cs-pennantm .4s cubic-bezier(.34, 1.56, .64, 1) both; }
.s5 .cs-uscaf { animation: cs-fall .5s ease-in both; }
.s5 .cs-uworkers { animation: cs-fadeout .25s ease both; }
.s5 .cs-bunting { opacity: 0; transition: opacity .3s; }
.cs-ubuild { transform-origin: 50% 100%; }
.s5 .cs-ubuild { animation: cs-bounce .7s cubic-bezier(.34, 1.56, .64, 1) .15s both; }

/* живі деталі будівель TownArt */
.cs-ov .ta-smoke { animation: cs-smoke 2.4s ease-in-out infinite; }
.cs-ov .ta-blades { animation: cs-spin 5s linear infinite; }
.cs-ov .ta-light { animation: cs-glow 1.6s ease-in-out infinite alternate; }
.cs-ov .ta-water { animation: cs-bobm 1.2s ease-in-out infinite alternate; }
.cs-ov .ta-hook { animation: cs-wavem 1.8s ease-in-out infinite alternate; }

/* конфеті */
.cs-confetti { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.cs-confetti i { position: absolute; top: -24px; width: 9px; height: 13px; border-radius: 2px; animation: cs-fall-c 2.6s linear both; }

/* ---------- статична картка (анімації вимкнено) ---------- */
.cs-static { display: flex; align-items: center; justify-content: center; background: rgba(28, 20, 14, .5); animation: none; }
.cs-card {
  width: min(86vw, 300px); padding: 20px 18px 22px; text-align: center; border-radius: 24px;
  background: #fff4e0; border: 3px solid #3b2f2a; box-shadow: 0 8px 0 rgba(59, 47, 42, .3);
}
.cs-card-art svg { display: block; width: 150px; height: 150px; margin: 0 auto; }
.cs-card h2 { margin: 6px 0 2px; font-size: 28px; font-weight: 900; }
.cs-card p { margin: 0; font-size: 16px; font-weight: 700; opacity: .8; }

@media (max-aspect-ratio: 4/5) {
  .cs-wrap { align-items: center; padding-bottom: 4vh; }
  .cs-stagebox { flex: none; width: min(114vw, 680px); min-width: 0; }
  .cs-fox { left: 5%; width: 17%; }
}
@media (max-width: 420px) {
  .cs-title { padding-top: calc(env(safe-area-inset-top, 0px) + 60px); min-height: calc(env(safe-area-inset-top, 0px) + 136px); }
  .cs-sun { width: 44px; height: 44px; }
  .cs-skip { font-size: 14px; padding: 7px 14px; }
}
@media (max-height: 560px) {
  .cs-title { padding-top: calc(env(safe-area-inset-top, 0px) + 58px); min-height: 0; }
  .cs-kicker { display: none; }
  .cs-title h2 { font-size: 22px; }
  .cs-title p { font-size: 14px; }
  .cs-stagebox { width: min(94vw, 680px, calc((100dvh - 200px) * 1.4286)); }
  .cs-bottom { min-height: 0; padding-top: 8px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
}
@media (max-height: 560px) and (min-width: 600px) {
  .cs-title { padding: calc(env(safe-area-inset-top, 0px) + 12px) 140px 0; }
}

/* ---------- ключові кадри ---------- */
@keyframes cs-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-spin { to { transform: rotate(360deg); } }
@keyframes cs-drift { from { transform: translateX(-180px); } to { transform: translateX(calc(100vw + 40px)); } }
@keyframes cs-fly { from { transform: translateX(-40px); } to { transform: translateX(calc(100vw + 40px)) translateY(-30px); } }
@keyframes cs-flap { from { transform: scaleY(1); } to { transform: scaleY(-.5); } }
@keyframes cs-capin { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes cs-foxin { from { transform: translateX(-140%); } to { transform: none; } }
@keyframes cs-hop { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-16%) rotate(3deg); } }
@keyframes cs-bp { from { transform: rotate(-12deg); } to { transform: rotate(-4deg) translateY(-4%); } }
@keyframes cs-swing { 0% { transform: rotate(-55deg); } 70% { transform: rotate(18deg); } 100% { transform: rotate(-55deg); } }
@keyframes cs-paint { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(25deg); } }
@keyframes cs-digm { from { transform: rotate(-10deg); } to { transform: rotate(18deg) translateY(1px); } }
@keyframes cs-bobm { from { transform: translateY(0); } to { transform: translateY(-1px); } }
@keyframes cs-sparkm { 0%, 60% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes cs-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cs-sink { to { transform: scaleY(0); opacity: 0; } }
@keyframes cs-wavem { from { transform: skewY(-6deg); } to { transform: skewY(8deg) scaleX(.9); } }
@keyframes cs-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-fadeout { to { opacity: 0; } }
@keyframes cs-slidein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes cs-fly-p { 0% { opacity: 1; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(calc(var(--dx) * .5), var(--dy)); } 100% { opacity: 0; transform: translate(var(--dx), 2px); } }
@keyframes cs-brickm { from { opacity: 0; transform: translateY(-16px) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes cs-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes cs-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes cs-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes cs-cranein { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes cs-craneout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(90px); } }
@keyframes cs-roofdown { from { transform: translateY(-26px); } 85% { transform: translateY(1px); } to { transform: none; } }
@keyframes cs-cablem { from { transform: scaleY(.08); } 85% { transform: scaleY(1.03); } to { transform: none; } }
@keyframes cs-fall { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(26px) rotate(-8deg); } }
@keyframes cs-puffm { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.8); } }
@keyframes cs-bounce { 0% { opacity: 0; transform: scale(.4, .2); } 45% { opacity: 1; transform: scale(1.08, 1.12); } 65% { transform: scale(.96, .92); } 82% { transform: scale(1.02, 1.03); } 100% { opacity: 1; transform: none; } }
@keyframes cs-cutl { to { transform: rotate(38deg); opacity: 0; } }
@keyframes cs-cutr { to { transform: rotate(-38deg); opacity: 0; } }
@keyframes cs-bowfall { to { transform: translateY(14px) rotate(40deg); opacity: 0; } }
@keyframes cs-boom { 0% { opacity: 0; transform: scale(.1); } 15% { opacity: 1; } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes cs-twinkle { from { transform: scale(.5) rotate(0); opacity: .4; } to { transform: scale(1.2) rotate(30deg); opacity: 1; } }
@keyframes cs-shinem { 0% { opacity: 0; transform: skewX(-18deg) translateX(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: skewX(-18deg) translateX(170px); } }
@keyframes cs-pennantm { from { transform: scale(0); } to { transform: none; } }
@keyframes cs-starpop { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
@keyframes cs-smoke { 0% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-3px); opacity: .6; } 100% { transform: translateY(0); opacity: .9; } }
@keyframes cs-glow { from { opacity: .55; } to { opacity: 1; } }
@keyframes cs-fall-c { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--x), 105vh) rotate(var(--r)); opacity: 0; } }

/* ================= Покращення катсцени ================= */
/* Камера: наїзд на стіни під час будівництва, плавний наїзд на готову будівлю у фіналі */
.cs-stagebox { transition: transform 1.2s cubic-bezier(.32,.72,0,1); transform-origin: 50% 85%; }
.cs-ov.s3 .cs-stagebox { transform: scale(1.12) translateY(2%); }
.cs-ov.s4 .cs-stagebox { transform: scale(1.06) translateY(4%); }
.cs-ov.s5 .cs-stagebox { transform: scale(1); }
.cs-ov.s6 .cs-stagebox { transform: scale(1.08); transition-duration: 2.4s; }
/* Золота година у фіналі */
.cs-ov .cs-sky::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.8s;
  background: linear-gradient(180deg, rgba(255, 170, 90, .35), rgba(255, 210, 140, .15) 55%, transparent); }
.cs-ov.s6 .cs-sky::after { opacity: 1; }
/* Сусіди-бобри */
.cs-crowd { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; pointer-events: none; opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .8s cubic-bezier(.32,.72,0,1); }
.cs-crowd span { width: 13%; max-width: 70px; display: block; }
.cs-crowd span:nth-child(2) { margin-left: auto; margin-right: 6%; width: 11%; }
.cs-crowd svg { width: 100%; height: auto; display: block; }
.cs-ov.s6 .cs-crowd { opacity: 1; transform: none; }
.cs-ov.s6 .cs-crowd span { animation: csJump .7s ease-in-out infinite; }
.cs-ov.s6 .cs-crowd span:nth-child(2) { animation-delay: .2s; }
.cs-ov.s6 .cs-crowd span:nth-child(3) { animation-delay: .4s; }
@keyframes csJump { 50% { transform: translateY(-12%); } }
/* Підсумок */
.cs-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; min-height: 0; }
.cs-chip { padding: 6px 12px; border-radius: 99px; font-weight: 800; font-size: 15px; background: #fff; color: #3b2a1e; box-shadow: 0 3px 0 rgba(90,60,30,.15);
  opacity: 0; transform: translateY(12px) scale(.9); }
.cs-chip-ny { color: #2a4f7a; }
.cs-ov.s6 .cs-chip { animation: csChip .5s cubic-bezier(.32,.72,0,1) forwards; }
.cs-ov.s6 .cs-chip:nth-child(2) { animation-delay: .25s; }
.cs-ov.s6 .cs-chip:nth-child(3) { animation-delay: .5s; }
@keyframes csChip { to { opacity: 1; transform: none; } }
/* Святковий варіант: сніг і гірлянда */
.cs-snow { position: absolute; inset: -50% 0 0 0; pointer-events: none; z-index: 1;
  background-image: radial-gradient(3px 3px at 10% 20%, #fff 50%, transparent 52%), radial-gradient(2px 2px at 35% 55%, #fff 50%, transparent 52%),
    radial-gradient(3px 3px at 60% 30%, #fff 50%, transparent 52%), radial-gradient(2px 2px at 85% 70%, #fff 50%, transparent 52%);
  background-size: 180px 180px; animation: csSnow 7s linear infinite; }
@keyframes csSnow { to { transform: translateY(33%); } }
.cs-garland { position: absolute; left: 18%; right: 18%; top: 20%; width: 64%; opacity: 0; transition: opacity .6s .4s; pointer-events: none; }
.cs-ov.s6 .cs-garland { opacity: 1; }
.cs-bulb { animation: csBulb 1.2s steps(2) infinite; }
@keyframes csBulb { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cs-stagebox { transition: none; transform: none !important; } .cs-crowd span, .cs-snow, .cs-bulb { animation: none !important; } }
html.no-motion .cs-stagebox { transform: none !important; }