/* ===================================================================
   НСВС · «Колесо фортуны».

   VENDORED 1:1 from the handoff prototype (nsvs-home.html, FORTUNE_CSS),
   which itself is a straight transplant of the block from
   «Макет ПК + Моб.html». It ships as its own file, with its own token
   block scoped to .nsvs-fortune-scope, because that is how the designer
   shipped it, rewriting it onto the shared UI layer would be a rewrite,
   not a port, and this is the one component where the animation timing
   is the design.

   The blocks.css rule ("layout only, no local values") does not apply to
   this file. Do not extend it: new work goes into ui.css / blocks.css.
   =================================================================== */
.nsvs-fortune-scope{ container-type:inline-size;
  --teal:#66CCCC; --teal-dark:#43B8BC; --teal-deep:#22787F; --teal-soft:#E3F7F7; --teal-mist:#F0FAFA;
  --cream:#F6F4EE; --line:#E2EAEA; --ink:#15282A; --ink-2:#3F5557; --ink-3:#7B8E90;
  --bio-deep:#B81E5B; --accent:#22787F; --accent-2:#43B8BC; --rad-lg:32px; --rad-sm:14px; --ease:cubic-bezier(.22,.61,.36,1);
  font-family:'Manrope',system-ui,sans-serif; color:var(--ink); }
.nsvs-fortune-scope *{ box-sizing:border-box; }
/* The one deviation from the vendored file: its container was 1280/40, so the
   block sat 158px narrower than every other section on the page and than the
   same block on /gbt, where it inherits `.gbt-scope .wrap` at 1600/40. Page
   geometry is defined once, in tokens, see base.css. */
.nsvs-fortune-scope .wrap{ max-width:var(--wrap,1600px); margin:0 auto; padding:0 var(--wrap-pad,40px); }
@container (max-width:860px){ .nsvs-fortune-scope .wrap{ padding:0 var(--wrap-pad-m,20px); } }
.nsvs-fortune-scope .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent); }
.nsvs-fortune-scope .eyebrow::before{ content:''; width:26px; height:2px; background:var(--accent-2); border-radius:2px; }
.nsvs-fortune-scope .cta{ display:inline-flex; align-items:center; gap:12px; padding:0 28px; height:60px; border-radius:var(--rad-sm); font-weight:800; font-size:16px; cursor:pointer; border:none; font-family:inherit; text-decoration:none; white-space:nowrap; transition:transform .18s, box-shadow .18s; }
.nsvs-fortune-scope .cta:hover{ transform:translateY(-2px); }
.nsvs-fortune-scope .cta-accent{ background:linear-gradient(135deg,var(--teal-deep),var(--teal-dark)); color:#fff; box-shadow:0 18px 40px -18px rgba(34,120,127,.7); }
.nsvs-fortune-scope .cta-arrow{ width:30px; height:30px; border-radius:999px; background:rgba(255,255,255,.2); display:inline-flex; align-items:center; justify-content:center; margin-right:-8px; }

.fortune{ padding: clamp(56px,8cqw,120px) 0; background: var(--cream); }
.fortune-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius: var(--rad-lg); padding: clamp(26px,3.6cqw,52px); display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4cqw,56px); align-items:start; box-shadow:0 40px 90px -60px rgba(15,40,42,.55); overflow:hidden; }
.fortune-glow{ position:absolute; right:-8%; top:50%; transform:translateY(-50%); width:62%; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, rgba(102,204,204,.22), transparent 62%); pointer-events:none; z-index:0; }
.fortune-copy, .fortune-stage{ position:relative; z-index:1; }
.fortune-kicker{ font-size: clamp(14px,1.5cqw,18px); font-weight:800; color: var(--ink-2); margin-top:16px; text-transform:uppercase; letter-spacing:.6px; }
.fortune-kicker b{ color: var(--bio-deep); }
.fortune-h{ font-size: clamp(27px,3.3cqw,46px); font-weight:700; letter-spacing:-1px; line-height:1.07; margin:10px 0 0; text-wrap:pretty; }
.fortune-h .hl{ color:#fff; background: linear-gradient(135deg,var(--teal-deep),var(--teal-dark)); padding:1px 11px; border-radius:9px; display:inline-block; transform:rotate(-1.5deg); }
.fortune-h .muted{ color: var(--ink-3); }
.fortune-note{ font-size:13px; color: var(--ink-3); margin:16px 0 0; }
.fortune-form{ margin-top:22px; display:flex; flex-direction:column; gap:13px; max-width:430px; }
.fortune-label{ font-size:15px; font-weight:700; color: var(--ink); }
.fortune-field{ position:relative; }
.fortune-field.shake{ animation: fShake .42s; }
.fortune-input{ width:100%; height:58px; border-radius: var(--rad-sm); border:1.5px solid var(--line); background: var(--cream); padding:0 46px 0 18px; font:inherit; font-size:17px; font-weight:600; color: var(--ink); outline:none; transition:border-color .15s, background .15s; }
.fortune-input::placeholder{ color: var(--ink-3); font-weight:500; }
.fortune-input:focus{ border-color: var(--teal); background:#fff; }
.fortune-field-ok{ position:absolute; right:14px; top:50%; transform:translateY(-50%) scale(.5); opacity:0; width:26px; height:26px; border-radius:999px; background: var(--teal-deep); color:#fff; display:flex; align-items:center; justify-content:center; transition: all .22s var(--ease); }
.fortune-field-ok.show{ opacity:1; transform:translateY(-50%) scale(1); }
.fortune-charge{ display:flex; flex-direction:column; gap:8px; }
.fortune-charge-bar{ height:7px; border-radius:999px; background: var(--line); overflow:hidden; }
.fortune-charge-bar i{ display:block; height:100%; width:0; border-radius:999px; background: linear-gradient(90deg, var(--teal), var(--teal-deep)); transition: width .35s var(--ease); }
.fortune-charge span{ font-size:13px; font-weight:700; color: var(--ink-3); transition: color .2s; }
.fortune.is-armed .fortune-charge span{ color: var(--teal-deep); }
.fortune.is-armed .fortune-charge-bar i{ box-shadow:0 0 12px rgba(102,204,204,.85); }
.fortune-spin{ width:100%; justify-content:center; transition: transform .15s, box-shadow .25s, opacity .2s, filter .2s; }
.fortune-spin.is-locked{ opacity:.55; box-shadow:none; filter:saturate(.6); }
.fortune-spin.is-ready{ animation: fwReady 1.7s ease-in-out infinite; }
@keyframes fwReady{ 0%,100%{ box-shadow:0 18px 40px -18px rgba(34,120,127,.7);} 50%{ box-shadow:0 22px 54px -12px rgba(102,204,204,.95);} }
.fortune-spin.is-ready [data-fortune-arrow] svg{ animation: fwArrowSpin 2.6s linear infinite; }
@keyframes fwArrowSpin{ to{ transform: rotate(-360deg);} }
.fortune-consent{ display:flex; align-items:center; gap:10px; font-size:13px; color: var(--ink-3); cursor:pointer; line-height:1.4; }
.fortune-check{ flex:0 0 22px; width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; color:#fff; transition:all .15s; }
.fortune-check svg{ opacity:0; transition:opacity .12s; }
.fortune-check.is-on{ background: var(--teal-deep); border-color: var(--teal-deep); }
.fortune-check.is-on svg{ opacity:1; }
.fortune-consent.shake{ animation: fShake .42s; }
@keyframes fShake{ 0%,100%{transform:none} 20%{transform:translateX(-6px)} 60%{transform:translateX(6px)} 80%{transform:translateX(-3px)} }
.fortune.is-won .fortune-form{ display:none; }
.fortune-result{ margin-top:22px; opacity:0; transform: translateY(12px) scale(.97); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.fortune-result[hidden]{ display:none; }
.fortune-result.show{ opacity:1; transform:none; }
.fortune-result-in{ border:1.5px dashed var(--teal); background: var(--teal-soft); border-radius: var(--rad-sm); padding:22px; }
.fortune-result-badge{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color: var(--teal-deep); }
.fortune-result-prize{ font-size: clamp(21px,2.3cqw,30px); font-weight:800; letter-spacing:-.5px; margin:8px 0 10px; color: var(--ink); line-height:1.12; }
.fortune-result-sub{ font-size:13.5px; color: var(--ink-2); margin:0 0 16px; line-height:1.5; }
.fortune-result-sub b{ color: var(--teal-deep); }
.fortune-stage{ position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; }
.fortune-gift{ align-self:flex-start; display:inline-flex; align-items:center; gap:10px; background: var(--teal-deep); color:#fff; padding:9px 15px 9px 10px; border-radius:14px; box-shadow:0 12px 26px -14px rgba(34,120,127,.7); }
.fortune-gift-ic{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:10px; background:rgba(255,255,255,.18); color:#fff; }
.fortune-gift-ic svg{ width:18px; height:18px; }
.fortune-gift-tx{ display:flex; flex-direction:column; line-height:1.12; }
.fortune-gift-cap{ font-size:13px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; opacity:.85; }
.fortune-gift b{ font-size:15px; font-weight:800; }
@keyframes fwGiftBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }
.fortune-wheel{ --fw-r: clamp(78px,16.8cqw,160px); --fw-pad: clamp(11px,2.3cqw,19px); position:relative; flex:0 0 auto; width: clamp(300px,46cqw,460px); height: clamp(300px,46cqw,460px); border-radius:50%; background: radial-gradient(circle at 50% 38%, #2E8A91, var(--teal-deep)); padding: var(--fw-pad); box-shadow:0 40px 80px -38px rgba(34,120,127,.8), inset 0 0 0 2px rgba(255,255,255,.16); }
.fw-dots{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:4; opacity:.92; }
.fw-disc{ position:relative; width:100%; height:100%; border-radius:50%; background: repeating-conic-gradient(from -30deg, rgba(34,120,127,.13) 0 .7deg, transparent .7deg 60deg), #fff; box-shadow: inset 0 0 0 4px rgba(255,255,255,.92), 0 0 0 1px rgba(15,40,42,.06); }
.fw-disc::before{ content:''; position:absolute; inset:0; border-radius:50%; z-index:0; pointer-events:none; background: conic-gradient(from -30deg, var(--teal) 0 60deg, transparent 60deg 360deg); transform: rotate(var(--hl,0deg)); transition: none; }
.fortune.is-won .fw-disc::before{ background: conic-gradient(from -30deg, var(--teal-deep) 0 60deg, transparent 60deg 360deg); }
.fw-sheen{ position:absolute; inset: var(--fw-pad); border-radius:50%; pointer-events:none; z-index:2; background: conic-gradient(from 0deg, transparent 0 60%, rgba(255,255,255,.30) 80%, rgba(255,255,255,.06) 88%, transparent 93% 100%); mix-blend-mode: soft-light; animation: fwSheen 7s linear infinite; }
.fortune.is-armed .fw-sheen{ animation-duration: 3.2s; }
.fortune.is-spinning .fw-sheen{ opacity:0; transition:opacity .3s; }
@keyframes fwSheen{ to{ transform: rotate(360deg);} }
.fw-label{ position:absolute; top:50%; left:50%; width: clamp(84px,17cqw,134px); text-align:center; transform: translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--fw-r) * -1)) rotate(calc(var(--a) * -1)); display:flex; flex-direction:column; align-items:center; gap:5px; line-height:1.12; pointer-events:none; z-index:2; transition: opacity .4s; }
.fw-label .fw-ic{ width: clamp(22px,2.5cqw,27px); height: clamp(22px,2.5cqw,27px); border-radius:999px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.fw-label .fw-txt{ font-size: clamp(9.5px,1.2cqw,13.5px); font-weight:800; letter-spacing:-.2px; line-height:1.08; text-wrap:balance; }
.fw-label.on-teal{ color: var(--ink); } .fw-label.on-teal .fw-ic{ background: var(--teal-soft); color: var(--teal-deep); }
.fw-label.on-light{ color: var(--ink); } .fw-label.on-light .fw-ic{ background: var(--teal-soft); color: var(--teal-deep); }
.fortune.is-won .fw-label:not(.win){ opacity:.42; }
.fw-label.win{ color:#fff; } .fw-label.lit{ color:#fff; } .fw-label.lit .fw-ic{ background: rgba(255,255,255,.30); color:#fff; }
.fw-label.win .fw-ic{ background: rgba(255,255,255,.30); color:#fff; animation: fwWinPop .7s ease-out; box-shadow:0 0 0 3px rgba(255,255,255,.7), 0 0 18px rgba(242,184,68,.85); }
.fw-label.win .fw-txt{ text-shadow:0 0 10px rgba(242,184,68,.65); }
@keyframes fwWinPop{ 0%{transform:scale(1)} 40%{transform:scale(1.42)} 100%{transform:scale(1.14)} }
.fw-hub{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:6; width: clamp(66px,12.5cqw,96px); height: clamp(66px,12.5cqw,96px); border-radius:50%; border:4px solid var(--teal-deep); background:#fff; color: var(--teal-deep); font-weight:800; letter-spacing:.2px; cursor:pointer; box-shadow:0 10px 26px -10px rgba(0,0,0,.45); transition: transform .15s; display:flex; align-items:center; justify-content:center; padding:0; }
.fw-hub span{ font-size: clamp(13px,1.1cqw,14px); white-space:nowrap; }
.fw-hub:hover{ transform:translate(-50%,-50%) scale(1.07); }
.fortune.is-spinning .fw-hub{ pointer-events:none; }
.fortune.is-armed .fw-hub{ animation: fwHubGlow 1.5s ease-out infinite; }
@keyframes fwHubGlow{ 0%{ box-shadow:0 10px 26px -10px rgba(0,0,0,.45), 0 0 0 0 rgba(102,204,204,.55);} 70%{ box-shadow:0 10px 26px -10px rgba(0,0,0,.45), 0 0 0 17px rgba(102,204,204,0);} 100%{ box-shadow:0 10px 26px -10px rgba(0,0,0,.45), 0 0 0 0 rgba(102,204,204,0);} }
.fw-pointer{ position:absolute; top:-3px; left:50%; transform-origin:50% 0; transform:translateX(-50%); z-index:7; width:0; height:0; border-left:15px solid transparent; border-right:15px solid transparent; border-top:27px solid var(--bio-deep); filter: drop-shadow(0 5px 5px rgba(0,0,0,.35)); animation: fwBob 2.4s ease-in-out infinite; }
.fw-pointer::before{ content:''; position:absolute; left:-15px; top:-13px; width:30px; height:14px; border-radius:8px 8px 0 0; background: var(--bio-deep); }
@keyframes fwBob{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(-4px);} }
.fortune.is-spinning .fw-pointer{ animation: fwTick .11s ease-in-out infinite; }
@keyframes fwTick{ 0%{ transform:translateX(-50%) rotate(0);} 50%{ transform:translateX(-50%) rotate(-8deg);} 100%{ transform:translateX(-50%) rotate(0);} }
.fw-confetti-layer{ position:absolute; inset:0; pointer-events:none; z-index:9; overflow:visible; }
.fw-confetti{ position:absolute; top:46%; width:9px; height:14px; border-radius:2px; transform:translate(-50%,-50%); animation: fwPop 1.5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes fwPop{ 0%{ transform:translate(-50%,-50%) scale(.2) rotate(0); opacity:0;} 12%{ opacity:1;} 38%{ transform:translate(calc(-50% + var(--dx)*.5), calc(-50% + var(--dy))) scale(1) rotate(calc(var(--rot)*.5)); opacity:1;} 100%{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 330px)) scale(.85) rotate(var(--rot)); opacity:0;} }
@container (min-width:861px){ .fortune-card{ grid-template-columns: minmax(320px,420px) 1fr; } .fortune-copy{ align-self:center; } .fortune-stage{ display:block; position:relative; min-height: clamp(520px,44cqw,680px); } .fortune-wheel{ position:absolute; top:50%; right: clamp(0px,2cqw,44px); transform:translateY(-50%); margin:0; width: clamp(520px,44cqw,680px); height: clamp(520px,44cqw,680px); --fw-r: clamp(120px,12.6cqw,184px); } .fw-label{ width: clamp(124px,14.5cqw,188px); gap:9px; } .fw-label .fw-txt{ font-size: clamp(15px,1.75cqw,21px); } .fw-label .fw-ic{ width:46px; height:46px; border-radius:14px; } .fw-label .fw-ic svg{ width:25px; height:25px; } .fortune-gift{ position:absolute; top: clamp(20px,3.5cqw,56px); left: clamp(0px,1cqw,28px); z-index:12; gap:14px; padding:14px 22px 14px 14px; border-radius:20px; background: linear-gradient(135deg, var(--teal-deep), var(--teal-dark)); box-shadow:0 24px 48px -18px rgba(34,120,127,.85); animation: fwGiftBob 3s ease-in-out infinite; } .fortune-gift-ic{ width:54px; height:54px; border-radius:16px; } .fortune-gift-ic svg{ width:30px; height:30px; } .fortune-gift-cap{ font-size:13px; } .fortune-gift b{ font-size:26px; } .fw-confetti-layer{ left:auto; right: clamp(0px,2cqw,44px); top:50%; transform:translateY(-50%); width: clamp(520px,44cqw,680px); height: clamp(520px,44cqw,680px); z-index:10; } }
@container (max-width:860px){ .fortune-card{ grid-template-columns:1fr; padding-top: clamp(46px,9cqw,68px); } .fortune-stage{ order:-1; min-height:0; margin-bottom:6px; } .fortune-glow{ display:none; } .fortune-form{ max-width:none; } .fortune-gift{ position:absolute; top: clamp(-24px,-5cqw,-12px); left: clamp(-20px,-4.5cqw,-8px); z-index:auto; gap:8px; padding:7px 12px 7px 8px; animation: fwGiftBob 3s ease-in-out infinite; } .fortune-gift-ic{ width:30px; height:30px; border-radius:9px; } .fortune-gift-ic svg{ width:16px; height:16px; } .fortune-gift-cap{ font-size:13px; } .fortune-gift b{ font-size:13px; } .fortune-result .cta{ white-space:normal; height:auto; min-height:54px; padding:13px 18px; font-size:15px; line-height:1.2; text-align:center; } }
@media (prefers-reduced-motion: reduce){ .fortune-gift, .fw-sheen, .fortune.is-armed .fw-hub, .fortune-spin.is-ready, .fortune-spin.is-ready [data-fortune-arrow] svg{ animation:none !important; } }