@font-face{font-family:Manrope;src:url(/static/fonts/manrope-cyr.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url(/static/fonts/manrope-lat.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20BD,U+2122,U+2212}
@font-face{font-family:Inter;src:url(/static/fonts/inter-cyr.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;src:url(/static/fonts/inter-lat.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+20BD,U+2122,U+2212}

:root{
  --graphite-900:#0F141D; --graphite-800:#1B2230; --graphite-700:#2A3243;
  --steel-500:#5A6376; --mist-300:#C9CCD3; --rule:#E4E2DD;
  --paper:#F2EFEA; --paper-50:#F8F6F2; --white:#fff;
  --signal:#EE6A1F; --signal-600:#C9551A; --signal-400:#F38A4C; --signal-100:#FBE2D2;
  --bad:#B2462C;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--paper);color:var(--graphite-800);
  font:16px/1.45 Inter,"Helvetica Neue",Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.page{max-width:1180px;margin:0 auto;padding:20px 16px 32px;min-height:100%;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{height:40px;width:auto}
.tag{font:700 13px/1 Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--signal-600);
  background:var(--signal-100);padding:8px 12px;border-radius:999px}

.stage{flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:24px}

/* ---------- wheel ---------- */
.wheel-wrap{position:relative;width:min(100%,560px);aspect-ratio:1;justify-self:center}
.wheel{width:100%;height:100%;display:block;transition:transform 6.2s cubic-bezier(.11,.64,.08,1);will-change:transform;
  filter:drop-shadow(0 18px 40px rgba(27,34,48,.25))}
.wheel text{font-family:Manrope,sans-serif;font-weight:800;pointer-events:none}
.pointer{position:absolute;left:50%;top:-6px;transform:translateX(-50%);z-index:2;width:44px;height:56px;
  background:var(--signal);clip-path:polygon(0 0,100% 0,50% 100%);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.pointer::after{content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--white)}
.hub{position:absolute;inset:0;margin:auto;width:21%;height:21%;border-radius:50%;background:var(--graphite-800);
  border:5px solid var(--white);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.hub span{font:800 clamp(11px,2.2vw,17px)/1 Manrope,sans-serif;color:var(--white);letter-spacing:.06em}
.wheel-wrap.locked .wheel{opacity:.92}

/* ---------- form ---------- */
.card{background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);padding:28px;box-shadow:0 10px 30px rgba(27,34,48,.06)}
h1{font:800 clamp(28px,4vw,40px)/1.1 Manrope,sans-serif;margin:0 0 8px;letter-spacing:-.01em}
.lead{margin:0 0 22px;color:var(--steel-500)}
.field{display:block;margin-bottom:14px}
.field span{display:block;font:600 14px/1 Manrope,sans-serif;margin-bottom:8px}
.field input{width:100%;font:inherit;font-size:19px;padding:15px 16px;border:1.5px solid var(--mist-300);border-radius:12px;background:var(--paper-50);color:inherit;outline:none;transition:border-color .15s, box-shadow .15s}
.field input:focus{border-color:var(--signal);box-shadow:0 0 0 4px var(--signal-100);background:var(--white)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--steel-500);margin:6px 0 20px;cursor:pointer}
.check input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--signal)}

.spin{width:100%;border:0;border-radius:14px;padding:19px 20px;font:800 20px/1 Manrope,sans-serif;letter-spacing:.01em;
  background:var(--signal);color:var(--white);cursor:pointer;box-shadow:0 8px 20px rgba(238,106,31,.35);
  transition:transform .12s, background .15s, box-shadow .15s, opacity .15s}
.spin:hover:not(:disabled){background:var(--signal-600)}
.spin:active:not(:disabled){transform:scale(.98)}
.spin:disabled{background:var(--mist-300);color:var(--white);box-shadow:none;cursor:not-allowed}
.spin.ready{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 8px 20px rgba(238,106,31,.35)}50%{box-shadow:0 8px 34px rgba(238,106,31,.65)}}
.hint{margin:12px 0 0;text-align:center;font-size:14px;color:var(--steel-500)}
.error{margin:12px 0 0;text-align:center;font-size:15px;color:var(--bad);font-weight:600}

/* ---------- result ---------- */
.overlay{position:fixed;inset:0;background:rgba(15,20,29,.62);display:grid;place-items:center;padding:16px;z-index:10;animation:fade .25s ease}
.overlay[hidden]{display:none}
.modal{position:relative;overflow:hidden;background:var(--white);border-radius:24px;padding:40px 32px 28px;max-width:440px;width:100%;text-align:center;
  animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
.modal.win{background:var(--graphite-800);color:var(--white)}
.res-kicker{margin:0;font:700 13px/1 Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.modal h2{position:relative;font:800 clamp(30px,6vw,42px)/1.1 Manrope,sans-serif;margin:12px 0 10px}
.res-text{position:relative;margin:0 0 26px;color:var(--steel-500)}
.modal.win .res-text{color:var(--mist-300)}
.modal .spin{position:relative}
.burst{position:absolute;inset:0;pointer-events:none}
.burst i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(560px) rotate(720deg);opacity:.2}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:scale(.85);opacity:0}}

@media (max-width:860px){
  .stage{grid-template-columns:1fr;gap:24px;margin-top:16px}
  .wheel-wrap{width:min(100%,460px)}
  .card{padding:22px}
}
@media (max-width:420px){.logo{height:32px}.tag{font-size:11px}}
@media (prefers-reduced-motion:reduce){.wheel{transition-duration:1.2s}.spin.ready{animation:none}}