:root {
  color-scheme: dark;
  --gold: #ffd56b;
  --gold-2: #ffad42;
  --rose: #ff5a7d;
  --paper: #fff8e9;
  --muted: #c9c1bd;
  --glass: rgba(12, 7, 11, .72);
  --line: rgba(255, 236, 204, .17);
  --bg: url('/img/splash/vault.jpg');
  --focal: 68% 50%;
  --accent: #ffbd4a;
  --accent2: #ff5c5f;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; background: #080507; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #fff; overflow: hidden; }
button, a { font: inherit; }
button { color: inherit; }
.app { position: relative; min-height: 100svh; isolation: isolate; background: #080507; overflow: hidden; }

.topbar {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 80px; padding: 15px clamp(18px, 3.2vw, 62px);
  display: grid; grid-template-columns: 230px 1fr 118px; gap: 22px; align-items: center;
  background: linear-gradient(180deg, rgba(6,3,5,.9), rgba(6,3,5,.35) 72%, transparent);
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; width: max-content; }
.brand-mark { width: 42px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #7eb8ff; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #8be0ff, #1a67d1 46%, #06162d 75%); font-weight: 950; font-size: 13px; box-shadow: 0 0 22px rgba(64,152,255,.22); }
.brand b { display: block; letter-spacing: .12em; font-size: 13px; }
.brand small { display: block; color: #b7adb2; font-size: 10px; margin-top: 2px; }

.concept-nav { min-width: 0; display: flex; justify-content: center; gap: 6px; }
.concept-tab { position: relative; display: flex; gap: 8px; align-items: center; border: 1px solid transparent; border-radius: 999px; padding: 9px 13px; background: rgba(11,7,10,.48); backdrop-filter: blur(12px); cursor: pointer; color: #bcb4b8; transition: .25s ease; white-space: nowrap; }
.concept-tab i { font-style: normal; font-weight: 850; font-size: 10px; color: #857f82; }
.concept-tab span { font-size: 11px; font-weight: 750; }
.concept-tab:hover { color: #fff; border-color: var(--line); transform: translateY(-1px); }
.concept-tab.is-active { color: #15100a; border-color: rgba(255,255,255,.45); background: linear-gradient(100deg, var(--gold), #fff0b0 53%, #ffb9c9); box-shadow: 0 8px 30px rgba(255,177,70,.18); }
.concept-tab.is-active i { color: #7d441d; }
.replay { justify-self: end; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 9px 12px; background: rgba(10,6,9,.55); backdrop-filter: blur(10px); cursor: pointer; }
.replay span { font-size: 21px; line-height: 1; color: var(--gold); }
.replay b { font-size: 10px; letter-spacing: .05em; }
.replay:hover span { transform: rotate(-45deg); }

.scene { position: relative; min-height: 100svh; overflow: hidden; }
.background { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(7,3,6,.34), transparent 35%), var(--bg); background-size: cover; background-position: var(--focal); transform: scale(1.035); filter: saturate(1.04) contrast(1.03); transition: opacity .4s ease, transform 1.6s cubic-bezier(.2,.8,.2,1); }
.scene::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(5,2,5,.8) 0%, rgba(5,2,5,.52) 27%, rgba(5,2,5,.08) 54%, rgba(5,2,5,.09)), linear-gradient(0deg, rgba(4,2,4,.7), transparent 31%); }
.light-sweep { position: absolute; z-index: 2; width: 34vw; height: 140vh; top: -20vh; left: 42%; pointer-events: none; opacity: 0; transform: rotate(18deg) translateX(-40vw); background: linear-gradient(90deg, transparent, rgba(255,222,139,.14), rgba(255,248,213,.35), transparent); filter: blur(10px); mix-blend-mode: screen; }
.spark-field, .coin-field { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.spark { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #ffe7a0; box-shadow: 0 0 8px #ffb13b, 0 0 20px rgba(255,172,43,.7); opacity: 0; }
.coin { position: absolute; width: var(--s); height: calc(var(--s) * .42); border: 1px solid #fff0a0; border-radius: 50%; background: linear-gradient(#ffef9e, #b45c13); box-shadow: 0 0 9px rgba(255,180,38,.45); opacity: 0; }
.curtain { position: absolute; z-index: 30; top: 0; bottom: 0; width: 51%; background: linear-gradient(90deg, #080307, #290817 50%, #080307); box-shadow: inset -30px 0 80px rgba(0,0,0,.45); pointer-events: none; }
.curtain-left { left: 0; transform-origin: left center; }
.curtain-right { right: 0; transform-origin: right center; transform: scaleX(-1); }

.copy-panel { position: absolute; z-index: 8; top: 50%; left: clamp(24px, 4.1vw, 78px); width: min(40vw, 670px); transform: translateY(-48%); }
.eyebrow { display: flex; align-items: center; gap: 13px; margin-bottom: 17px; letter-spacing: .2em; font-size: clamp(9px, .7vw, 12px); color: #ffe6a2; }
.eyebrow span { width: 42px; height: 2px; background: linear-gradient(90deg, var(--rose), var(--gold)); }
.copy-panel :is(h1,.h1) { margin: 0; font-size: clamp(45px, 4.7vw, 90px); line-height: .88; letter-spacing: -.055em; font-weight: 950; text-wrap: balance; text-shadow: 0 8px 34px rgba(0,0,0,.42); }
.copy-panel :is(h1,.h1) em { display: inline-block; margin-top: .12em; color: transparent; background: linear-gradient(100deg, #fff3b6, var(--gold) 46%, #ffb7ae); -webkit-background-clip: text; background-clip: text; font-style: normal; }
.lead { max-width: 620px; margin: 22px 0 20px; color: #d8d0d3; font-size: clamp(13px, 1vw, 18px); line-height: 1.55; }

.featured-offer { position: relative; width: min(100%, 610px); min-height: 116px; padding: 13px 14px; display: grid; grid-template-columns: 100px 1fr 154px; gap: 16px; align-items: center; overflow: hidden; border: 1px solid rgba(255,237,210,.23); border-radius: 26px; background: linear-gradient(115deg, rgba(31,21,26,.88), rgba(12,7,11,.79)); backdrop-filter: blur(20px); box-shadow: 0 22px 50px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.06); }
.logo-box { height: 86px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.logo-box img { width: 82%; max-height: 58px; object-fit: contain; }
.offer-copy span { display: block; color: #ffe59d; font-weight: 850; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.offer-copy strong { display: block; font-size: clamp(22px, 2vw, 34px); margin: 2px 0; }
.offer-copy small { color: #d9ced2; font-weight: 650; }
.primary-cta { position: relative; z-index: 2; min-height: 72px; display: grid; place-content: center; text-align: center; border-radius: 22px; color: #1c1014; text-decoration: none; background: linear-gradient(105deg, #fff0a5, #ffb4ca); box-shadow: 0 7px 28px rgba(255,170,111,.2); line-height: .94; }
.primary-cta span, .primary-cta b { display: block; font-size: 17px; font-weight: 950; letter-spacing: .03em; }
.primary-cta:hover { transform: translateY(-2px) scale(1.015); }
.featured-shine { position: absolute; inset: -80% auto -80% -35%; width: 22%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.19), transparent); pointer-events: none; }
.trust-row { display: flex; gap: 24px; margin-top: 13px; color: #a59ca0; font-size: 10px; font-weight: 650; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #4bf2a1; box-shadow: 0 0 10px #4bf2a1; }

.fx-stage { position: absolute; z-index: 7; top: 15%; right: 4%; width: 48vw; height: 55vh; pointer-events: none; }
.fx-variant { position: absolute; inset: 0; display: none; }
[data-concept="vault"] .vault-fx, [data-concept="reels"] .reels-fx, [data-concept="ticket"] .ticket-fx, [data-concept="wheel"] .wheel-fx, [data-concept="gift"] .gift-fx { display: block; }
.vault-ring { position: absolute; right: 7%; top: 7%; width: min(36vw, 540px); aspect-ratio: 1; border: 1px solid rgba(255,211,111,.34); border-radius: 50%; opacity: .3; }
.vault-ring.r2 { transform: scale(.8); border-style: dashed; }
.vault-ring.r3 { transform: scale(.6); box-shadow: 0 0 60px rgba(255,183,58,.16); }
.vault-seal { position: absolute; right: 19%; top: 28%; width: 128px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff2a2, #f0a21e 50%, #8e4306); color: #2d1603; box-shadow: 0 0 40px #ffc148, 0 0 100px rgba(255,166,45,.7); }
.vault-seal span { font-size: 28px; font-weight: 950; }
.vault-seal b { font-size: 10px; letter-spacing: .2em; }

.reels-fx { top: 16%; right: 3%; left: auto; width: min(43vw, 700px); height: 42%; perspective: 1000px; }
.reel { position: relative; display: inline-block; width: 27%; height: 170px; margin: 0 1%; overflow: hidden; border: 3px solid #e7ac3a; border-radius: 20px; background: #15080a; box-shadow: inset 0 0 24px #000, 0 0 25px rgba(255,180,46,.3); vertical-align: top; opacity: 0; }
.reel div { position: absolute; top: -410px; width: 100%; color: #ffdd77; text-align: center; font-size: 88px; font-weight: 950; line-height: 1.4; text-shadow: 0 0 24px #ff8300; }
.jackpot-flash { margin-top: 18px; opacity: 0; text-align: center; font-size: clamp(32px, 4vw, 66px); font-weight: 1000; letter-spacing: .08em; color: #fff0a1; text-shadow: 0 0 14px #ff7a00, 0 0 45px #ff2a00; }

.ticket-fx { perspective: 1000px; }
.ticket-card { position: absolute; right: 12%; top: 29%; width: min(30vw, 430px); aspect-ratio: 1.8; display: grid; place-content: center; text-align: center; opacity: 0; transform-style: preserve-3d; color: #3b2104; border: 1px solid #fff0a5; border-radius: 16px; background: linear-gradient(135deg, #aa640b, #fff1a1 32%, #c78419 57%, #ffeb91); box-shadow: inset 0 0 0 8px rgba(88,43,4,.17), 0 0 60px rgba(255,184,43,.7); clip-path: polygon(0 0, 97% 0, 100% 15%, 97% 30%, 100% 50%, 97% 70%, 100% 85%, 97% 100%, 0 100%, 3% 85%, 0 70%, 3% 50%, 0 30%, 3% 15%); }
.ticket-card span { letter-spacing: .3em; font-size: 12px; font-weight: 850; }
.ticket-card strong { font-size: clamp(31px, 4vw, 60px); line-height: 1.05; }
.ticket-card small { font-weight: 750; }
.ticket-halo { position: absolute; right: 17%; top: 12%; width: min(25vw, 380px); aspect-ratio: 1; border-radius: 50%; border: 2px solid #ffc963; box-shadow: 0 0 70px rgba(255,187,57,.45), inset 0 0 70px rgba(255,187,57,.18); opacity: 0; }

.wheel-fx { inset: 1% 1% auto auto; width: min(42vw, 620px); aspect-ratio: 1; }
.wheel-disc { position: absolute; inset: 8%; border-radius: 50%; background: repeating-conic-gradient(#8e1523 0 30deg, #17151c 30deg 60deg, #c58a2b 60deg 90deg); border: 11px solid #e4ae4c; box-shadow: 0 0 0 4px #4a2608, 0 0 50px rgba(255,177,54,.5), inset 0 0 35px #000; opacity: 0; }
.wheel-core { position: absolute; inset: 35%; display: grid; place-items: center; border-radius: 50%; color: #2c1605; font-weight: 950; font-size: 25px; background: radial-gradient(circle at 35% 25%, #fff4a8, #bd6d18); box-shadow: 0 0 0 8px #3f2109; }
.wheel-pointer { position: absolute; z-index: 2; left: 50%; top: 0; width: 0; height: 0; transform: translateX(-50%); border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 58px solid #ffe18a; filter: drop-shadow(0 4px 7px #000); opacity: 0; }
.winner-pill { position: absolute; bottom: 1%; left: 50%; transform: translateX(-50%) scale(.6); opacity: 0; padding: 13px 30px; border-radius: 999px; color: #2c1605; background: linear-gradient(100deg, #fff2ab, #ffbc4e); font-size: 14px; font-weight: 950; white-space: nowrap; box-shadow: 0 0 30px rgba(255,187,64,.5); }

.gift-fx { inset: 10% 3% auto auto; width: min(43vw, 650px); height: 52vh; }
.gift-box { position: absolute; right: 20%; bottom: 8%; width: 220px; height: 190px; opacity: 0; }
.gift-body { position: absolute; inset: 48px 12px 0; background: linear-gradient(135deg, #09080b, #29232b); border: 2px solid #d8a84e; box-shadow: 0 22px 35px rgba(0,0,0,.5), inset 0 0 25px rgba(255,192,76,.2); }
.gift-body i { position: absolute; left: 44%; top: 0; bottom: 0; width: 12%; background: linear-gradient(90deg, #a76819, #ffe08a, #a76819); }
.gift-lid { position: absolute; z-index: 3; left: 0; top: 25px; width: 100%; height: 58px; border: 2px solid #e5b554; background: linear-gradient(135deg, #171319, #373039); box-shadow: inset 0 -8px rgba(212,157,62,.24), 0 8px 15px rgba(0,0,0,.4); transform-origin: 90% 100%; }
.gift-lid::before { content: ""; position: absolute; left: 45%; top: 0; width: 11%; height: 100%; background: linear-gradient(90deg, #a76819, #ffe08a, #a76819); }
.gift-rays { position: absolute; right: 6%; bottom: 1%; width: 450px; aspect-ratio: 1; opacity: 0; background: repeating-conic-gradient(from 0deg, rgba(255,216,111,.5) 0 2deg, transparent 2deg 12deg); filter: blur(1px); mask-image: radial-gradient(circle, #000 0 25%, transparent 70%); }
.gift-prize { position: absolute; right: 21%; bottom: 22%; width: 190px; padding: 18px; text-align: center; opacity: 0; color: #2b1502; border-radius: 18px; background: linear-gradient(135deg, #fff4ac, #eda333); box-shadow: 0 0 45px #ffbd41; }
.gift-prize small, .gift-prize strong { display: block; }
.gift-prize small { font-size: 11px; letter-spacing: .2em; font-weight: 800; }
.gift-prize strong { font-size: 42px; }

/*
 * Полка партнёров.
 *
 * ЧТО БЫЛО. Карточки лежали в ленте с горизонтальной прокруткой: восемь
 * помещались в полосу шириной в половину экрана, а пятнадцать уходили за
 * правый край — половина площадок оставалась за кадром, и на телефоне тоже.
 *
 * КАК СТАЛО. Полка занимает всю ширину под сценой и раскладывает карточки
 * сеткой: сколько бы их ни было, они переносятся на следующий ряд. Ширина
 * колонки — минимум 96 точек, поэтому на широком экране в ряд встаёт до
 * десяти карточек, а на телефоне — четыре.
 */
.partner-area { position: absolute; z-index: 10; left: 46%; right: clamp(18px, 3vw, 58px); bottom: 78px; width: auto; }
.partner-caption { display: flex; justify-content: space-between; margin: 0 7px 8px; color: rgba(255,255,255,.58); font-size: 9px; letter-spacing: .12em; }
.partner-caption b { color: #ffe08a; }
.partner-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; padding: 5px 6px 10px; scrollbar-width: none; }
.partner-rail::-webkit-scrollbar { display: none; }
.partner-card { height: 88px; display: grid; grid-template-rows: 40px auto auto; place-items: center; padding: 9px 6px 7px; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; color: #fff; text-decoration: none; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--c), white 18%), color-mix(in srgb, var(--c), black 47%)); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 12px 25px rgba(0,0,0,.25); transition: .22s ease; user-select: none; }
.partner-card:hover, .partner-card.is-current { transform: translateY(-6px) scale(1.04); border-color: rgba(255,235,178,.7); box-shadow: inset 0 1px rgba(255,255,255,.25), 0 14px 32px color-mix(in srgb, var(--c), transparent 62%); }
.partner-card img { width: 75px; max-height: 35px; object-fit: contain; pointer-events: none; }
.partner-card strong { font-size: 12px; }
.partner-card small { font-size: 8px; color: #ffeaa2; font-weight: 750; }

.win-toast { position: absolute; z-index: 15; top: 94px; right: 34px; display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px 11px; border: 1px solid rgba(255,255,255,.15); border-radius: 17px; background: rgba(14,9,12,.75); backdrop-filter: blur(16px); box-shadow: 0 14px 40px rgba(0,0,0,.3); opacity: 0; transform: translateY(-20px); }
.win-toast > span { width: 31px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #042515; background: #55e99f; font-weight: 950; }
.win-toast b, .win-toast small { display: block; }
.win-toast b { font-size: 11px; }
.win-toast small { margin-top: 2px; color: #aaa0a5; font-size: 9px; }

.ticker { position: fixed; z-index: 45; inset: auto 0 0; height: 54px; overflow: hidden; border-top: 1px solid rgba(255,232,186,.17); background: rgba(8,4,7,.9); backdrop-filter: blur(12px); }
.ticker::before { content: ""; position: absolute; inset: 0 0 auto; height: 24px; background: linear-gradient(90deg, #4a1426, #a2512e 48%, #4b1330); }
.ticker-track { position: absolute; top: 0; left: 0; display: flex; height: 24px; align-items: center; gap: 56px; white-space: nowrap; animation: ticker 38s linear infinite; }
.ticker-item { color: #fff1b4; font-size: 9px; font-weight: 850; letter-spacing: .02em; }
.age { position: absolute; top: 24px; left: 0; right: 0; height: 30px; display: flex; align-items: center; gap: 9px; padding: 0 clamp(18px, 4vw, 75px); color: #736b6f; font-size: 9px; }
.age b { width: 22px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #696166; border-radius: 50%; color: #aaa1a6; font-size: 8px; }

.is-playing .curtain-left { animation: curtainLeft 1.2s .08s cubic-bezier(.7,0,.2,1) forwards; }
.is-playing .curtain-right { animation: curtainRight 1.2s .08s cubic-bezier(.7,0,.2,1) forwards; }
.is-playing .background { animation: backgroundReveal 5s cubic-bezier(.2,.8,.2,1) both; }
.is-playing .copy-panel { animation: copyIn .9s .75s both; }
.is-playing .featured-offer { animation: cardIn .8s 1.15s both; }
.is-playing .featured-shine { animation: shine 2.7s 1.8s ease-in-out infinite; }
.is-playing .light-sweep { animation: sweep 2.1s .65s ease-out both; }
.is-playing .spark { animation: sparkFly var(--d) var(--delay) ease-out both; }
.is-playing .coin { animation: coinFall var(--d) var(--delay) cubic-bezier(.2,.7,.3,1) both; }
.is-playing .win-toast { animation: toast .8s 3.25s both; }

[data-concept="vault"].is-playing .vault-ring.r1 { animation: ring 2.4s .7s ease-out both; }
[data-concept="vault"].is-playing .vault-ring.r2 { animation: ring2 3.3s .8s ease-out both; }
[data-concept="vault"].is-playing .vault-ring.r3 { animation: ring3 3s .9s ease-out both; }
[data-concept="vault"].is-playing .vault-seal { animation: seal 1.4s 1.45s cubic-bezier(.2,1.4,.35,1) both, breathe 2.2s 3s ease-in-out infinite; }
[data-concept="reels"].is-playing .reel { animation: reelShow .5s .7s both; }
[data-concept="reels"].is-playing .reel:nth-child(2) { animation-delay: .84s; }
[data-concept="reels"].is-playing .reel:nth-child(3) { animation-delay: .98s; }
[data-concept="reels"].is-playing .reel div { animation: reelSpin 2s .85s cubic-bezier(.12,.7,.1,1) both; }
[data-concept="reels"].is-playing .reel:nth-child(2) div { animation-delay: 1.05s; }
[data-concept="reels"].is-playing .reel:nth-child(3) div { animation-delay: 1.25s; }
[data-concept="reels"].is-playing .jackpot-flash { animation: jackpot .75s 3s cubic-bezier(.2,1.5,.3,1) both, glowPulse 1.5s 3.8s infinite; }
[data-concept="ticket"].is-playing .ticket-card { animation: ticketRise 2s 1s cubic-bezier(.18,1.2,.3,1) both, ticketFloat 3.2s 3s ease-in-out infinite; }
[data-concept="ticket"].is-playing .ticket-halo { animation: halo 1.3s 2s ease-out both, haloPulse 2.5s 3.3s infinite; }
[data-concept="wheel"].is-playing .wheel-disc { animation: wheelAppear .5s .75s both, wheelSpin 3.4s 1s cubic-bezier(.12,.75,.2,1) both; }
[data-concept="wheel"].is-playing .wheel-pointer { animation: pointer .5s .7s both, pointerTick .16s 1s 14 alternate; }
[data-concept="wheel"].is-playing .winner-pill { animation: winner 1s 3.8s cubic-bezier(.2,1.5,.2,1) both; }
[data-concept="gift"].is-playing .gift-box { animation: giftDrop 1s .9s cubic-bezier(.15,1.4,.4,1) both; }
[data-concept="gift"].is-playing .gift-lid { animation: lidPop 1.2s 1.8s cubic-bezier(.1,1.3,.2,1) both; }
[data-concept="gift"].is-playing .gift-rays { animation: rays 1.2s 1.9s ease-out both, raysSpin 18s 3s linear infinite; }
[data-concept="gift"].is-playing .gift-prize { animation: prizeRise 1.2s 2s cubic-bezier(.15,1.3,.3,1) both, ticketFloat 3s 3.2s ease-in-out infinite; }

@keyframes curtainLeft { to { transform: translateX(-104%) skewX(-5deg); } }
@keyframes curtainRight { to { transform: scaleX(-1) translateX(-104%) skewX(-5deg); } }
@keyframes backgroundReveal { 0% { transform: scale(1.13); filter: brightness(.45) saturate(.7); } 35%,100% { transform: scale(1.035); filter: brightness(1) saturate(1.04) contrast(1.03); } }
@keyframes copyIn { from { opacity: 0; transform: translateY(calc(-48% + 30px)); filter: blur(8px); } to { opacity: 1; transform: translateY(-48%); filter: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(25px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes shine { 0%,30% { left: -35%; } 65%,100% { left: 125%; } }
@keyframes sweep { 0% { opacity: 0; transform: rotate(18deg) translateX(-40vw); } 40% { opacity: .7; } 100% { opacity: 0; transform: rotate(18deg) translateX(60vw); } }
@keyframes sparkFly { 0% { opacity: 0; transform: translate3d(0,40px,0) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--x),var(--y),0) scale(1.4); } }
@keyframes coinFall { 0% { opacity: 0; transform: translate3d(0,-15vh,0) rotateX(0) rotateZ(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--x),95vh,0) rotateX(900deg) rotateZ(560deg); } }
@keyframes toast { 0% { opacity: 0; transform: translateY(-20px); } 25%,80% { opacity: 1; transform: none; } 100% { opacity: .72; transform: none; } }
@keyframes ring { from { opacity: 0; transform: scale(.2) rotate(-30deg); } to { opacity: .4; transform: scale(1) rotate(0); } }
@keyframes ring2 { from { opacity: 0; transform: scale(.2) rotate(120deg); } to { opacity: .35; transform: scale(.8) rotate(0); } }
@keyframes ring3 { from { opacity: 0; transform: scale(.1); } to { opacity: .42; transform: scale(.6); } }
@keyframes seal { from { opacity: 0; transform: scale(.15) rotate(-90deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes breathe { 50% { transform: scale(1.06); filter: brightness(1.15); } }
@keyframes reelShow { from { opacity: 0; transform: translateY(-25px) rotateX(20deg); } to { opacity: 1; transform: none; } }
@keyframes reelSpin { from { top: -410px; filter: blur(5px); } to { top: -118px; filter: none; } }
@keyframes jackpot { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes glowPulse { 50% { filter: brightness(1.35); transform: scale(1.04); } }
@keyframes ticketRise { 0% { opacity: 0; transform: translateY(160px) rotateX(90deg) rotateZ(-12deg) scale(.6); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ticketFloat { 50% { transform: translateY(-12px) rotateZ(1deg); } }
@keyframes halo { from { opacity: 0; transform: scale(.2); } to { opacity: .7; transform: scale(1); } }
@keyframes haloPulse { 50% { transform: scale(1.08); opacity: .35; } }
@keyframes wheelAppear { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes wheelSpin { from { transform: rotate(-900deg); } to { transform: rotate(18deg); } }
@keyframes pointer { from { opacity: 0; transform: translateX(-50%) translateY(-25px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes pointerTick { from { transform: translateX(-50%) rotate(-9deg); } to { transform: translateX(-50%) rotate(9deg); } }
@keyframes winner { from { opacity: 0; transform: translateX(-50%) scale(.4); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes giftDrop { from { opacity: 0; transform: translateY(-220px) rotate(-8deg) scale(.75); } to { opacity: 1; transform: none; } }
@keyframes lidPop { from { transform: none; } to { transform: translate(-42px,-155px) rotate(-22deg); } }
@keyframes rays { from { opacity: 0; transform: scale(.2); } to { opacity: .8; transform: scale(1); } }
@keyframes raysSpin { to { transform: rotate(360deg); } }
@keyframes prizeRise { from { opacity: 0; transform: translateY(130px) scale(.55); } to { opacity: 1; transform: translateY(-80px) scale(1); } }
@keyframes ticker { to { transform: translateX(-50%); } }

body[data-concept="vault"] { --bg: url('/img/splash/vault.jpg'); --focal: 67% 50%; --accent: #ffbd4a; --accent2: #ef4d43; }
body[data-concept="reels"] { --bg: url('/img/splash/vault.jpg'); --focal: 69% 50%; --accent: #ff532f; --accent2: #ffc44f; }
body[data-concept="ticket"] { --bg: url('/img/splash/vault.jpg'); --focal: 68% 50%; --accent: #e8b852; --accent2: #86aaff; }
body[data-concept="wheel"] { --bg: url('/img/splash/gift.jpg'); --focal: 70% 50%; --accent: #ffbe50; --accent2: #bb293d; }
body[data-concept="gift"] { --bg: url('/img/splash/gift.jpg'); --focal: 69% 50%; --accent: #f5c15b; --accent2: #b482ff; }

@media (max-width: 1100px) {
  .topbar { grid-template-columns: 170px 1fr 45px; padding-inline: 24px; }
  .replay b, .concept-tab i { display: none; }
  .concept-tab { padding-inline: 10px; }
  .copy-panel { width: 43vw; }
  .featured-offer { grid-template-columns: 78px 1fr 118px; min-height: 96px; border-radius: 21px; }
  .logo-box { height: 69px; }
  .primary-cta { min-height: 58px; }
  .primary-cta span, .primary-cta b { font-size: 14px; }
  .partner-card { height: 82px; }
}

@media (max-width: 760px) {
  body { overflow: auto; }
  .app { min-height: 100svh; }
  .topbar { height: 64px; grid-template-columns: 145px 1fr 40px; gap: 8px; padding: 9px 12px; background: linear-gradient(#070306 65%, transparent); }
  .brand-mark { width: 34px; font-size: 10px; }
  .brand b { font-size: 11px; }
  .brand small { font-size: 8px; }
  .concept-nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .concept-nav::-webkit-scrollbar { display: none; }
  .concept-tab { flex: 0 0 auto; width: 31px; height: 31px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
  .concept-tab span { font-size: 0; }
  .concept-tab span::after { content: attr(data-short); }
  .concept-tab::after { content: attr(data-set); font-size: 0; }
  .concept-tab:nth-child(1)::before { content: "1"; }
  .concept-tab:nth-child(2)::before { content: "2"; }
  .concept-tab:nth-child(3)::before { content: "3"; }
  .concept-tab:nth-child(4)::before { content: "4"; }
  .concept-tab:nth-child(5)::before { content: "5"; }
  .concept-tab::before { font-size: 11px; font-weight: 900; }
  .replay { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; }

  /* На телефоне витрина складывается в столбик: текст, главный оффер и
     полка партнёров идут друг за другом. Раньше и текст, и полка висели
     абсолютно (одна прибита к низу экрана) — пятнадцать карточек ложились
     поверх заголовка. */
  .scene { min-height: 0; padding-bottom: 14px; }
  .background { background-image: linear-gradient(180deg, rgba(5,2,4,.05) 22%, rgba(5,2,4,.32) 43%, rgba(5,2,4,.96) 65%, #080507 88%), var(--bg); background-position: var(--mobile-focal, var(--focal)); background-size: auto 66svh; background-repeat: no-repeat; background-color: #080507; }
  .scene::after { background: linear-gradient(90deg, rgba(5,2,5,.18), transparent 58%), linear-gradient(0deg, #080507 9%, transparent 55%); }
  body[data-concept="vault"] { --mobile-focal: 69% top; }
  body[data-concept="reels"] { --mobile-focal: 72% top; }
  body[data-concept="ticket"] { --mobile-focal: 69% top; }
  body[data-concept="wheel"] { --mobile-focal: 72% top; }
  body[data-concept="gift"] { --mobile-focal: 71% top; }

  .copy-panel { position: relative; top: auto; left: auto; right: auto; width: auto; margin: 42svh 18px 0; transform: none; }
  .eyebrow { margin-bottom: 9px; font-size: 8px; }
  .eyebrow span { width: 28px; }
  .copy-panel :is(h1,.h1) { width: 94%; font-size: clamp(39px, 12.4vw, 56px); line-height: .9; }
  .lead { margin: 13px 0 14px; font-size: 12px; line-height: 1.42; max-width: 540px; }
  .featured-offer { width: 100%; min-height: 88px; grid-template-columns: 72px 1fr 112px; gap: 10px; padding: 9px; border-radius: 20px; }
  .logo-box { height: 68px; border-radius: 14px; }
  .offer-copy span { font-size: 8px; }
  .offer-copy strong { font-size: 20px; }
  .offer-copy small { font-size: 9px; }
  .primary-cta { min-height: 64px; border-radius: 18px; }
  .primary-cta span, .primary-cta b { font-size: 13px; }
  .trust-row { display: none; }

  .fx-stage { top: 7%; right: 0; width: 100vw; height: 39svh; opacity: .8; transform: scale(.78); transform-origin: 82% 25%; }
  .vault-seal { right: 16%; top: 25%; width: 92px; }
  .vault-ring { right: -8%; top: -4%; width: 76vw; }
  .reels-fx { right: -7%; top: 10%; width: 84vw; }
  .reel { height: 112px; border-radius: 14px; }
  .reel div { font-size: 56px; }
  .jackpot-flash { font-size: 34px; }
  .ticket-card { right: 2%; top: 22%; width: 70vw; }
  .ticket-halo { right: 6%; top: 5%; width: 61vw; }
  .wheel-fx { width: 82vw; top: -5%; right: -15%; }
  .gift-fx { width: 90vw; top: -5%; right: -9%; }
  .gift-box { right: 18%; transform: scale(.75); }
  .gift-prize { right: 17%; transform: scale(.75); }

  .partner-area { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: 16px 12px 0; padding: 0; }
  .partner-caption { padding-right: 8px; }
  .partner-rail { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; padding: 4px 2px 8px; }
  .partner-card { height: 64px; grid-template-rows: 26px auto auto; padding: 5px 4px 4px; border-radius: 15px; }
  .partner-card img { width: 58px; max-height: 22px; }
  .partner-card strong { font-size: 10px; }
  .partner-card small { font-size: 7px; }
  .win-toast { top: 69px; right: 12px; padding: 8px 11px 8px 8px; }
  .win-toast > span { width: 27px; }
  .win-toast small { display: none; }
  .ticker { height: 42px; }
  .ticker::before, .ticker-track { height: 21px; }
  .ticker-track { top: 0; gap: 34px; }
  .ticker-item { font-size: 8px; }
  .age { top: 21px; height: 21px; padding-inline: 12px; font-size: 7px; }
  .age b { width: 18px; }
  .age span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .curtain { width: 52%; }
  .is-playing .copy-panel { animation-name: copyMobile; }
  @keyframes copyMobile { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
}

@media (max-width: 760px) and (max-height: 730px) {
  /* Панель здесь в потоке (см. блок выше), поэтому отступ задаётся полем,
     а не сдвигом top: сдвиг оставлял под панелью пустое место и уводил её
     на карточки партнёров. */
  .copy-panel { margin-top: 39svh; }
  .copy-panel :is(h1,.h1) { font-size: clamp(33px, 10.5vw, 44px); }
  .lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .featured-offer { min-height: 75px; }
  .logo-box { height: 58px; }
  .primary-cta { min-height: 54px; }
  .trust-row { display: none; }
  .partner-card { height: 58px; grid-template-rows: 24px auto auto; }
  .partner-card img { max-height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}