/* ============ общие ============ */
.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; will-change: transform;
}
.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: -50%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); animation: shine 3.6s ease-in-out 1.5s infinite; }

/* ============ ЭКРАН 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; will-change: transform; }
[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__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 var(--t, 3s) ease-in-out var(--td, 0s) infinite alternate; }
.bb-skyline .w:nth-child(3n) { fill: #ffd27a; } .bb-skyline .w:nth-child(5n) { fill: #8fe3ff; }
.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);
  animation: water2 6s linear infinite;
}
@keyframes water2 { 50% { filter: brightness(1.15) saturate(1.2); } }
.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: 600 clamp(13px, 1vw, 16px) / 1 var(--head); letter-spacing: .08em; text-transform: uppercase; }

.search { margin: clamp(18px, 3vh, 30px) auto 0; display: flex; align-items: stretch; max-width: 770px; border-radius: 10px; background: rgba(18, 6, 26, .75); box-shadow: 0 0 0 1.5px var(--line) inset; backdrop-filter: blur(8px); overflow: hidden; transition: box-shadow .2s; }
.search:focus-within { box-shadow: 0 0 0 1.5px #ff7a1a inset, 0 0 24px rgba(255, 122, 26, .25); }
.search svg { width: 26px; margin: 0 4px 0 18px; color: #d8cdfa; flex: none; }
.search input { flex: 1; min-width: 0; padding: 16px 12px; border: 0; background: none; outline: none; color: #fff; font: 500 clamp(16px, 1.3vw, 20px) var(--body); }
.search input::placeholder { color: rgba(229, 220, 255, .55); }
.search button { flex: none; border: 0; padding: 0 clamp(22px, 4vw, 64px); background: #ff7a1a; color: #2a0b1a; cursor: pointer; font: 700 clamp(16px, 1.3vw, 20px) var(--head); letter-spacing: .06em; text-transform: uppercase; }
.search button:hover { background: #ff9442; }
.search.shake { animation: shakeX .4s; }
@keyframes shakeX { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.search__msg { min-height: 1.3em; margin: 8px 0 0; font: 600 14px var(--body); color: #ffb37a; }

.tabs { position: relative; display: inline-flex; gap: clamp(8px, 2vw, 28px); margin: 4px 0 18px; }
.tabs button { padding: 8px 16px 12px; border: 0; background: none; color: #d8cdfa; cursor: pointer; font: 600 clamp(15px, 1.25vw, 20px) var(--head); letter-spacing: .06em; text-transform: uppercase; transition: color .2s; }
.tabs button[aria-selected="true"] { color: #ff8a3a; }
.tabs__bar { position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 2px; background: #ff7a1a; box-shadow: 0 0 12px rgba(255, 122, 26, .7); }

.lb { --rowH: clamp(46px, 5.6vh, 56px); border-radius: 12px; background: rgba(18, 6, 26, .78); box-shadow: 0 0 0 1.5px var(--line) inset, 0 20px 50px rgba(0, 0, 0, .45); backdrop-filter: blur(10px); text-align: left; overflow: hidden; }
.lb__head, .lb__row { display: grid; grid-template-columns: 22% 1fr 26% 15%; align-items: center; padding: 0 clamp(14px, 3vw, 48px); }
.lb__head { height: 50px; font: 500 clamp(12px, 1vw, 15px) var(--head); letter-spacing: .08em; text-transform: uppercase; color: #c9b9ff; }
.lb__head span:last-child, .lb__row span:last-child { text-align: center; }
.lb__rows { position: relative; }
.lb__row {
  position: absolute; left: 0; right: 0; top: 0; height: var(--rowH);
  border-top: 1px solid rgba(185, 166, 255, .2); will-change: transform;
}
.lb__row .place { font: 600 clamp(22px, 2vw, 30px) / 1 var(--head); color: var(--violet); }
.lb__row .name { font: 600 clamp(15px, 1.4vw, 22px) / 1 var(--head); letter-spacing: .05em; color: #fff3df; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb__row .city { font: 500 clamp(14px, 1.2vw, 19px) var(--body); color: #f1e9ff; }
.lb__row .chances { font: 700 clamp(16px, 1.3vw, 20px) var(--body); font-variant-numeric: tabular-nums; }
.lb__row.is-top { background: linear-gradient(90deg, rgba(255, 122, 26, .3), rgba(255, 122, 26, .12)); box-shadow: 0 0 0 1.5px #ff8a3a inset, 0 0 22px rgba(255, 122, 26, .25); border-radius: 6px; border-top-color: transparent; }
.lb__row.is-top .place { color: #ff8a3a; }
.lb__row.is-me { background: rgba(120, 200, 255, .14); box-shadow: 0 0 0 1.5px #8fe3ff inset; border-radius: 6px; }
.lb__row.is-me .place { color: #8fe3ff; }
.lb__row.flash::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 220, 160, .35), transparent); animation: rowFlash .9s ease-out forwards; pointer-events: none; }
@keyframes rowFlash { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.lb__sep { position: absolute; left: 0; right: 0; height: 22px; display: grid; place-items: center; color: rgba(229, 220, 255, .5); font: 600 13px var(--head); letter-spacing: .3em; }
.board__note { margin: 14px 0 0; font: 500 clamp(13px, 1vw, 15px) var(--body); color: rgba(229, 220, 255, .65); }
.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; }
  .lb__head, .lb__row { grid-template-columns: 17% 1fr 27% 16%; padding: 0 12px; }
  .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; }
  .search button { padding: 0 18px; }
  .search svg { margin-left: 12px; width: 22px; }
}