/* ============ общие ============ */
.btn-o {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; overflow: hidden;
  padding: .55em 2.2em .6em; border-radius: .14em; text-decoration: none; cursor: pointer;
  font: 900 clamp(28px, 2.9vw, 46px) / 1 var(--display); text-transform: uppercase; letter-spacing: .01em;
  color: #2a0b2a; background: #ff6a2a; box-shadow: 0 .18em 0 #c94a12, 0 .5em 1.2em rgba(255, 106, 42, .35);
  transition: transform .15s, box-shadow .15s;
}
.btn-o svg { width: .9em; height: .9em; transition: transform .25s; }
.btn-o:hover svg { transform: translateX(.25em); }
.btn-o:active { transform: translateY(.12em); box-shadow: 0 .06em 0 #c94a12, 0 .3em .8em rgba(255, 106, 42, .35); }
.btn-o::after { content: ''; position: absolute; top: 0; bottom: 0; width: 35%; left: 0; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-150%); animation: shine 3.6s ease-in-out 1.5s infinite; pointer-events: none; }

/* ============ ЭКРАН 2 — МИССИЯ ============ */
.mission {
  --cream2: #fbf4e6; --plum: #2a0b2a; --org: #ff6a2a;
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; padding: clamp(56px, 8vh, 96px) 16px;
  background: var(--cream2); color: var(--plum);
}
.mission__wipe { position: absolute; top: 0; bottom: 0; left: -25%; width: 150%; z-index: 5; background: var(--ink); pointer-events: none; }
.mission__dots {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(42, 11, 42, .09) 1.2px, transparent 1.3px); background-size: 14px 14px;
  -webkit-mask: radial-gradient(70% 60% at 50% 50%, transparent 30%, #000 100%); mask: radial-gradient(70% 60% at 50% 50%, transparent 30%, #000 100%);
}
.mission__ghost {
  position: absolute; left: 0; top: 50%; z-index: -1; display: flex; white-space: nowrap; translate: 0 -50%;
  font: 900 34vh / 1 var(--display); color: transparent; -webkit-text-stroke: 1.5px rgba(42, 11, 42, .06); text-transform: uppercase;
  animation: ghost 60s linear infinite; pointer-events: none;
}
@keyframes ghost { to { transform: translateX(-50%); } }

.crosshair { position: absolute; left: 0; top: 0; z-index: 4; width: clamp(54px, 5vw, 84px); height: auto; color: var(--plum); pointer-events: none; will-change: transform; }
.crosshair.is-locked { color: var(--org); }

.mission__in { width: min(1400px, 100%); text-align: center; position: relative; z-index: 1; }
.eyebrow { margin: 0; font: 900 clamp(26px, 2.6vw, 44px) / 1 var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--org); min-height: 1em; }
.mission__title { margin: .02em 0 0; font: 900 clamp(84px, min(14.5vw, 25vh), 260px) / .82 var(--display); text-transform: uppercase; letter-spacing: .005em; }
[data-split] .ch { display: inline-block; }
[data-split] .w { display: inline-block; white-space: nowrap; }
.mission__sub { margin: .5em 0 0; font: 700 clamp(17px, 1.9vw, 31px) / 1.25 var(--body); }

.steps { margin: clamp(32px, 6vh, 70px) auto 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; max-width: 1500px; }
.steps__div { width: 1.5px; background: rgba(42, 11, 42, .25); transform-origin: top; margin: 6px 0; }
.step { position: relative; padding: 0 clamp(8px, 1.5vw, 28px); cursor: default; }
.step__num { position: relative; display: inline-block; font: 900 clamp(110px, min(13vw, 22vh), 230px) / .8 var(--display); letter-spacing: .01em; --fill: 0%; }
.step__stroke { color: transparent; -webkit-text-stroke: 3px var(--org); }
.step__fill { position: absolute; inset: 0; color: var(--org); clip-path: inset(var(--fill) 0 0 0); }
.step__title { margin: .14em 0 0; font: 900 clamp(40px, 4.4vw, 76px) / .9 var(--display); text-transform: uppercase; overflow: hidden; padding-bottom: .04em; }
.step__title span { display: inline-block; }
.step__price { display: inline-block; margin: .5em 0 0; padding: .25em .6em .2em; rotate: -2deg; background: var(--org); color: #fff; font: 900 clamp(22px, 2.4vw, 40px) / 1 var(--display); text-transform: uppercase; box-shadow: .08em .1em 0 var(--plum); }
.step__price--phone { rotate: 2deg; text-transform: none; }
.step__text { margin: .45em 0 0; font: 500 clamp(16px, 1.65vw, 27px) / 1.3 var(--body); color: #3a1a35; }
.step:hover .step__num { animation: rgb .35s steps(2) 1; }
@keyframes rgb { 50% { text-shadow: 3px 0 0 rgba(255, 61, 139, .7), -3px 0 0 rgba(60, 170, 255, .7); transform: translateX(2px); } }

.lockbox { position: absolute; inset: -14px 4px; pointer-events: none; opacity: 0; transform: scale(1.12); transition: opacity .2s, transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.lockbox b { position: absolute; width: 26px; height: 26px; border: 3px solid var(--org); }
.lockbox b:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.lockbox b:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.lockbox b:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.lockbox b:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.step.is-locked .lockbox { opacity: 1; transform: scale(1); }

.mission__cta { margin-top: clamp(36px, 6vh, 64px); min-width: min(500px, 100%); }
.mission__rules { display: table; margin: 18px auto 0; font: 500 clamp(14px, 1.2vw, 19px) var(--body); color: var(--plum); text-underline-offset: 4px; }
.mission__rules:hover { color: var(--org); }

/* ============ ЭКРАН 3 — ЛИДЕРБОРД ============ */
.board {
  --violet: #b9a6ff; --line: rgba(185, 166, 255, .32);
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; padding: clamp(36px, 5vh, 64px) 16px clamp(48px, 7vh, 80px);
  background: #12061a; color: var(--cream);
}
.board__bg { position: absolute; inset: 0; z-index: -2; }
.bb { position: absolute; inset: -3%; width: 106%; height: 106%; will-change: transform; }
.bb-sky { background: radial-gradient(70% 30% at 50% 72%, rgba(255, 70, 140, .38), transparent 70%), linear-gradient(180deg, #0f0516 0%, #1d0828 30%, #3a0d40 55%, #6b1748 72%, #3a0d36 100%); }
.bb-skyline { top: auto; bottom: 17%; height: 26%; }
.bb-skyline .b { fill: #1c0824; } .bb-skyline .b2 { fill: #13051a; }
.bb-skyline .w { fill: #ffc9e8; animation: twinkle 2.8s ease-in-out infinite alternate; }
.bb-skyline .w1 { fill: #ffd27a; animation-duration: 3.9s; animation-delay: -1.4s; }
.bb-skyline .w2 { fill: #8fe3ff; animation-duration: 5.3s; animation-delay: -2.2s; }
.bb-water {
  top: auto; bottom: -3%; height: 21%;
  background:
    radial-gradient(30% 50% at 50% 0%, rgba(255, 90, 160, .55), transparent 70%),
    radial-gradient(1.0% 42% at 33% 0%, rgba(255, 210, 120, .45), transparent 70%),
    radial-gradient(1.0% 43% at 80% 0%, rgba(255, 120, 200, .45), transparent 70%),
    radial-gradient(0.7% 61% at 51% 0%, rgba(255, 120, 200, .45), transparent 70%),
    radial-gradient(0.7% 68% at 26% 0%, rgba(255, 150, 90, .45), transparent 70%),
    radial-gradient(1.2% 60% at 92% 0%, rgba(255, 120, 200, .45), transparent 70%),
    radial-gradient(1.2% 47% at 95% 0%, rgba(255, 120, 200, .45), transparent 70%),
    radial-gradient(1.2% 68% at 42% 0%, rgba(255, 120, 200, .45), transparent 70%),
    radial-gradient(1.2% 72% at 67% 0%, rgba(255, 120, 200, .45), transparent 70%),
    radial-gradient(1.2% 71% at 38% 0%, rgba(255, 120, 200, .45), transparent 70%),
    radial-gradient(1.4% 63% at 50% 0%, rgba(255, 150, 90, .45), transparent 70%),
    radial-gradient(0.9% 80% at 90% 0%, rgba(143, 227, 255, .45), transparent 70%),
    radial-gradient(0.7% 55% at 69% 0%, rgba(255, 210, 120, .45), transparent 70%),
    radial-gradient(1.3% 54% at 50% 0%, rgba(143, 227, 255, .45), transparent 70%),
    radial-gradient(1.1% 48% at 95% 0%, rgba(255, 120, 200, .45), transparent 70%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #2b0a33, #0c0310);
}
.bb-palms path { fill: #0b030f; }
.bb-palms--back path { fill: #2a0a32; opacity: .9; }
.bb-palms .palm { transform-box: fill-box; transform-origin: 50% 100%; animation: sway var(--d, 6s) ease-in-out var(--dl, 0s) infinite alternate; }
.board::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 60% at 50% 45%, rgba(18, 6, 26, .78), rgba(18, 6, 26, .2) 75%); }

.board__char { position: absolute; z-index: 0; pointer-events: none; will-change: transform; }
.board__char--courier { left: -2%; bottom: 0; height: 92%; width: 30%; }
.board__char--courier .char { object-position: left bottom; }
.board__char--girl { right: 0; top: 14%; height: 66%; width: 25%; }
.board__char--girl .char { object-position: right top; }
.board__char--car { right: -4%; bottom: -5%; width: 36%; aspect-ratio: 2; }

.board__in { position: relative; z-index: 1; width: min(820px, 100%); text-align: center; }
.board__title {
  margin: 0; font: 900 clamp(84px, min(11vw, 17vh), 190px) / .82 var(--display); text-transform: uppercase; color: #fff1d8;
  text-shadow: 0 0 .06em #fff, 0 0 .2em rgba(255, 150, 90, .55), 0 0 .5em rgba(255, 70, 140, .35);
}
.board__title .ch { display: inline-block; }
.board__title .ch.off { color: rgba(255, 241, 216, .18); text-shadow: none; }
.board__sub { margin: .25em 0 0; font: 700 clamp(17px, 1.7vw, 28px) / 1.2 var(--body); }
.pill { display: inline-block; margin-top: 14px; padding: .35em 1.4em; border-radius: 999px; border: 1.5px solid var(--violet); color: #e5dcff; font: 800 clamp(10px, .8vw, 13px) / 1 var(--wide); letter-spacing: .04em; text-transform: uppercase; }

.board__cta { margin-top: 18px; min-width: min(360px, 100%); font-size: clamp(26px, 2.4vw, 38px); }

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .steps__div { width: 60%; height: 1.5px; margin: 0 auto; transform-origin: left; }
  .board__char--courier { height: 40%; width: 46%; left: -10%; opacity: .55; }
  .board__char--girl { height: 30%; width: 40%; right: -8%; top: auto; bottom: 10%; opacity: .55; }
  .board__char--car { width: 70%; right: -20%; opacity: .5; }
}

/* «Заказать сет»: выбор города */
.opick { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(10, 4, 14, .78); animation: opIn .2s ease-out; }
.opick.is-out { opacity: 0; transition: opacity .2s; }
@keyframes opIn { from { opacity: 0; } to { opacity: 1; } }
.opick__card { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 18px 18px; border-radius: 18px; background: #1b0d26; box-shadow: 0 0 0 2px #ffd60a, 0 30px 80px rgba(0, 0, 0, .6); color: #fff3df; }
.opick__x { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font: 900 24px/1 sans-serif; cursor: pointer; }
.opick__k { margin: 0; font: 900 11px var(--wide); text-transform: uppercase; letter-spacing: .08em; color: #ffd60a; }
.opick__t { margin: 4px 0 14px; font: 900 40px/1 var(--display); text-transform: uppercase; }
.opick__list { display: grid; gap: 8px; }
.opick__city { position: relative; display: grid; gap: 2px; padding: 12px 40px 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset; color: inherit; text-decoration: none; }
.opick__city b { font: 800 16px var(--wide); text-transform: uppercase; }
.opick__city small { font: 600 12px/1.3 system-ui, sans-serif; color: rgba(255, 243, 223, .6); }
.opick__city i { position: absolute; right: 14px; top: 50%; translate: 0 -50%; font: 900 20px sans-serif; font-style: normal; color: #ffd60a; }
a.opick__city:hover { background: rgba(255, 214, 10, .14); box-shadow: 0 0 0 2px #ffd60a inset; }
.opick__city.is-off { opacity: .45; }