/* VEYLON — Mini App. Холодная аниме-эстетика: бездна, лёд, неон. */
:root {
  --abyss: #070B14;
  --graphite: #111A2B;
  --graphite-2: #18233A;
  --line: rgba(127, 168, 217, .16);
  --line-strong: rgba(127, 168, 217, .32);
  --ice: #DDF3FF;
  --glacier: #7FA8D9;
  --neon: #34D6FF;
  --neon-deep: #1F7BFF;
  --violet: #9C8CFF;
  --gold: #FFD98A;
  --danger: #FF7A98;
  --ok: #5CF2C8;

  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;

  --pad: 18px;
  --safe-top: var(--tg-content-safe-area-inset-top, 0px);
  --safe-bottom: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--abyss); color: var(--ice); }
body {
  font: 400 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 10px; }

#svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.backdrop {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 60% at 85% -10%, rgba(31, 123, 255, .28), transparent 60%),
    radial-gradient(90% 50% at -10% 30%, rgba(52, 214, 255, .10), transparent 60%),
    linear-gradient(180deg, #08101F 0%, var(--abyss) 55%);
}
.backdrop::after { /* ледяная «сетка» снизу */
  content: ""; position: absolute; left: -20%; right: -20%; bottom: 0; height: 40vh;
  background:
    repeating-linear-gradient(90deg, rgba(127,168,217,.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(127,168,217,.07) 0 1px, transparent 1px 44px);
  transform: perspective(300px) rotateX(58deg); transform-origin: bottom;
  mask-image: linear-gradient(to top, #000, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 85%);
}

#app { position: relative; z-index: 1; max-width: 520px; margin: 0 auto;
       padding: calc(10px + var(--safe-top)) var(--pad) calc(32px + var(--safe-bottom)); }
.screen { display: none; }
.screen.is-active { display: block; }

/* ------------------------------------------------------------------ topbar */
.topbar { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 14px; }
.brand { display: flex; align-items: baseline; gap: 8px; margin-right: auto; }
.brand-word {
  font: 800 17px/1 var(--font-display); letter-spacing: .06em;
  background: linear-gradient(180deg, #fff 10%, #9EDCFF 60%, #4FA8FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-jp { font: 700 11px/1 var(--font-jp); color: var(--glacier); opacity: .8; }
.me { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--glacier); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; font: 700 14px/1 var(--font-display); color: var(--abyss);
  background: linear-gradient(135deg, #BFEAFF, #5C9CFF); box-shadow: 0 0 0 2px rgba(52,214,255,.35);
}
.avatar { position: relative; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.icon-btn { width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(127,168,217,.1); display: grid; place-items: center; cursor: pointer; }
.icon-btn svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ mascot */
.mascot-slot svg, .mascot-slot img { width: 100%; height: auto; display: block; }
.mascot-slot .m-eyes-open { animation: blink 5.2s infinite; transform-box: fill-box; transform-origin: center 60%; }
.mascot-slot .m-led { animation: led 2.4s ease-in-out infinite; }
.mascot-slot .m-spark { animation: twinkle 2.8s ease-in-out infinite; }
.mascot-slot .m-spark:nth-of-type(2n) { animation-delay: -1.4s; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }
@keyframes twinkle { 50% { opacity: .2; } }
@keyframes led { 50% { opacity: .45; } }

/* ------------------------------------------------------------------ banner */
.banner {
  position: relative; margin-top: 64px; padding: 20px 18px 18px; border-radius: 28px;
  background:
    linear-gradient(160deg, rgba(52,214,255,.16), transparent 42%),
    linear-gradient(180deg, #13213D 0%, #0B1324 100%);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 30px 60px -30px rgba(31,123,255,.55);
  isolation: isolate;
}
.banner::before { /* ледяная кромка */
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; overflow: hidden;
  background:
    linear-gradient(115deg, transparent 0 58%, rgba(221,243,255,.07) 58% 60%, transparent 60% 70%, rgba(221,243,255,.05) 70% 71%, transparent 71%);
}
.banner-kanji {
  position: absolute; right: 10px; bottom: 92px; z-index: -1;
  font: 700 92px/1 var(--font-jp); color: transparent;
  -webkit-text-stroke: 1px rgba(127,168,217,.22); writing-mode: vertical-rl; letter-spacing: -.04em;
}
.banner-copy { position: relative; z-index: 2; max-width: 56%; min-height: 184px; }
.status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 5px 10px 5px 8px;
          border-radius: 999px; background: rgba(52,214,255,.12); color: var(--neon); font-size: 12.5px; font-weight: 600; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: pulse 1.8s infinite; }
.status.is-finished { color: var(--gold); background: rgba(255,217,138,.12); }
.status.is-finished .status-dot { animation: none; }
.status.is-drawing { color: var(--violet); background: rgba(156,140,255,.14); }
@keyframes pulse { 50% { opacity: .35; } }
.banner-title {
  margin: 0; font: 700 23px/1.14 var(--font-display); letter-spacing: -.01em; text-wrap: balance;
  overflow-wrap: anywhere;
}
.banner-prize { margin: 10px 0 0; color: #BFE3FF; font-size: 14.5px; line-height: 1.4; }
.banner-prize b { color: #fff; font-weight: 600; }

.banner-girl { position: absolute; right: -26px; top: -62px; width: 56%; z-index: 1; pointer-events: none;
               -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 96%); mask-image: linear-gradient(to bottom, #000 72%, transparent 96%); }
.mascot-slot--hero { filter: drop-shadow(0 10px 30px rgba(31,123,255,.45)); }
.bubble {
  position: absolute; z-index: 3; margin: 0; padding: 8px 11px; border-radius: 14px 14px 4px 14px;
  background: rgba(221,243,255,.94); color: #0B1530; font-size: 12px; line-height: 1.3; font-weight: 600;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
}
.banner > .bubble { top: -58px; right: 43%; max-width: 200px; z-index: 3; }

.countdown { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px;
             padding: 12px 6px 10px; border-radius: 18px; background: rgba(7,11,20,.72); box-shadow: inset 0 0 0 1px var(--line);
             backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cd-cell { display: flex; flex-direction: column; align-items: center; position: relative; }
.cd-cell + .cd-cell::before { content: ""; position: absolute; left: -3px; top: 8px; bottom: 22px; width: 1px; background: var(--line); }
.cd-num {
  font: 800 30px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  background: linear-gradient(180deg, #FFFFFF 20%, #8FDBFF 70%, #3A9BFF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(52,214,255,.35));
}
.cd-label { margin-top: 6px; font-size: 11.5px; color: var(--glacier); }
.countdown.is-urgent .cd-num { background: linear-gradient(180deg, #fff 20%, #B9AEFF 70%, #7A63FF); -webkit-background-clip: text; background-clip: text; }
.drawing-note { position: relative; z-index: 2; margin-top: 14px; padding: 18px; border-radius: 18px; text-align: center;
                background: rgba(7,11,20,.72); box-shadow: inset 0 0 0 1px rgba(156,140,255,.35); }
.shimmer { font: 700 15px/1 var(--font-display); background: linear-gradient(90deg, var(--glacier) 0%, #fff 50%, var(--glacier) 100%);
           background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ------------------------------------------------------------------- facts */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 2px 0; }
.facts div { padding: 2px 10px; }
.facts div + div { border-left: 1px solid var(--line); }
.facts div:first-child { padding-left: 0; }
.facts dt { font-size: 12px; color: var(--glacier); }
.facts dd { margin: 2px 0 0; font: 700 19px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
#f-chance { color: var(--neon); }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
       border-radius: 16px; padding: 12px 18px; font-weight: 600; font-size: 15px; transition: transform .12s ease, box-shadow .2s ease, opacity .2s; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn--primary { color: #04121F; background: linear-gradient(180deg, #8BEBFF 0%, var(--neon) 45%, #1E9BFF 100%);
                box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 10px 30px -8px rgba(52,214,255,.7); }
.btn--ghost { background: rgba(127,168,217,.1); color: var(--ice); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--sm { padding: 9px 14px; font-size: 13.5px; border-radius: 13px; }
.btn--xl { width: 100%; padding: 18px; font: 700 16px/1 var(--font-display); letter-spacing: .01em; border-radius: 20px; position: relative; overflow: hidden; }
.btn--xl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
                  transform: translateX(-120%); animation: sweep 3.6s ease-in-out 1.2s infinite; }
@keyframes sweep { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.cta-zone { margin-top: 20px; }
.closed-note { margin: 0; text-align: center; color: var(--glacier); }

/* ------------------------------------------------------------------- ticket */
.ticket { display: flex; align-items: stretch; border-radius: 18px; overflow: hidden;
          background: linear-gradient(90deg, rgba(52,214,255,.18), rgba(31,123,255,.10));
          box-shadow: inset 0 0 0 1px rgba(52,214,255,.45);
          -webkit-mask: radial-gradient(circle 11px at calc(100% - 74px) 0, transparent 98%, #000) top/100% 51% no-repeat,
                        radial-gradient(circle 11px at calc(100% - 74px) 100%, transparent 98%, #000) bottom/100% 51% no-repeat;
          mask: radial-gradient(circle 11px at calc(100% - 74px) 0, transparent 98%, #000) top/100% 51% no-repeat,
                radial-gradient(circle 11px at calc(100% - 74px) 100%, transparent 98%, #000) bottom/100% 51% no-repeat; }
.ticket-main { flex: 1; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.ticket-caption { font-size: 13px; color: var(--ok); font-weight: 600; }
.ticket-no { font: 800 22px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.ticket-stub { width: 74px; display: grid; place-items: center; border-left: 2px dashed rgba(52,214,255,.4);
               font: 700 20px/1.05 var(--font-jp); writing-mode: vertical-rl; color: var(--neon); }
.ticket.is-new { animation: stamp .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes stamp { from { transform: scale(1.12) rotate(-2deg); opacity: 0; } }

/* ------------------------------------------------------------------- blocks */
.block, .results { margin-top: 30px; }
.section-title { margin: 0 0 12px; font: 700 16px/1.2 var(--font-display); }
.boost-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.boost-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--neon); background: rgba(52,214,255,.1); }
.boost-icon svg { width: 22px; height: 22px; }
.boost-row.is-on .boost-icon { color: #04121F; background: var(--neon); box-shadow: 0 0 18px rgba(52,214,255,.6); }
.boost-body { flex: 1; min-width: 0; }
.boost-title, .boost-text { margin: 0; }
.boost-title { font-weight: 600; }
.boost-text { font-size: 13.5px; color: var(--glacier); }
.boost-row.is-on .boost-text { color: var(--ok); }
.tag-word { color: var(--neon); font-weight: 700; }
.howto { margin: 0 0 4px 52px; font-size: 13.5px; color: var(--glacier); }
.howto summary { cursor: pointer; color: var(--ice); font-weight: 500; padding: 4px 0 8px; list-style: none; }
.howto summary::before { content: "+ "; color: var(--neon); }
.howto[open] summary::before { content: "− "; }
.howto p { margin: 0 0 10px; }
.ref-actions { display: flex; gap: 8px; margin: 2px 0 0 52px; flex-wrap: wrap; }
.ref-actions .btn { flex: 1 1 auto; }

.rich { color: #C6DDF2; overflow-wrap: anywhere; }
.rich a { color: var(--neon); }
.rich blockquote { margin: 8px 0; padding-left: 12px; border-left: 2px solid var(--neon); color: var(--glacier); }
.rich code { font-size: .92em; background: rgba(127,168,217,.12); padding: 1px 5px; border-radius: 6px; }
.rich .spoiler { background: var(--glacier); color: transparent; border-radius: 4px; cursor: pointer; transition: .2s; }
.rich .spoiler.is-open { background: transparent; color: inherit; }
.ends-at { margin: 12px 0 0; font-size: 13px; color: var(--glacier); }

/* ----------------------------------------------------------------- results */
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.results-head .section-title { margin: 0; }
.winner-list { list-style: none; margin: 0; padding: 0; }
.winner { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.winner:first-child { border-top: 0; }
.winner-place { width: 30px; flex: none; font: 800 15px/1 var(--font-display); color: var(--glacier); text-align: center; }
.winner:nth-child(-n+3) .winner-place { color: var(--gold); text-shadow: 0 0 12px rgba(255,217,138,.5); }
.winner-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.winner-name small { display: block; font-weight: 400; color: var(--glacier); font-size: 12.5px; }
.winner.is-me { margin: 0 -10px; padding: 10px; border-radius: 14px; border-top-color: transparent; background: rgba(255,217,138,.1); box-shadow: inset 0 0 0 1px rgba(255,217,138,.4); }
.winner.is-me + .winner { border-top-color: transparent; }

/* -------------------------------------------------------------------- list */
.list-hero { display: grid; grid-template-columns: 112px 1fr; align-items: end; gap: 14px; margin-bottom: 18px; }
.mascot-slot--list { filter: drop-shadow(0 8px 24px rgba(31,123,255,.4)); }
.list-title { margin: 0; font: 700 22px/1.15 var(--font-display); }
.list-sub { margin: 6px 0 4px; color: var(--glacier); font-size: 14px; }
.contest-list { list-style: none; margin: 0; padding: 0; }
.contest-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); cursor: pointer; }
.contest-item:last-child { border-bottom: 1px solid var(--line); }
.contest-item-body { flex: 1; min-width: 0; }
.contest-item-title { margin: 0; font-weight: 600; font-size: 15.5px; }
.contest-item-meta { margin: 2px 0 0; color: var(--glacier); font-size: 13px; }
.contest-item-time { font: 700 13px/1 var(--font-display); color: var(--neon); white-space: nowrap; font-variant-numeric: tabular-nums; }
.empty { color: var(--glacier); text-align: center; margin-top: 30px; }

/* -------------------------------------------------------------------- gate */
.gate-visual { display: grid; grid-template-columns: 184px 1fr; align-items: center; gap: 4px; margin: 0 0 8px -8px; }
.bubble.bubble--gate { position: relative; border-radius: 14px 14px 14px 4px; align-self: start; margin-top: 34px; }
.mascot-slot--gate svg { clip-path: inset(0 0 12% 0); }
.gate-title { margin: 0; font: 700 22px/1.2 var(--font-display); }
.gate-text { margin: 8px 0 16px; color: var(--glacier); }
.channel-list { list-style: none; margin: 0 0 20px; padding: 0; }
.channel { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.channel:last-child { border-bottom: 1px solid var(--line); }
.channel-icon { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
                font: 700 15px/1 var(--font-display); color: #04121F; background: linear-gradient(135deg, #BFEAFF, #5C9CFF); }
.channel-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-ok { color: var(--ok); font-size: 13.5px; font-weight: 600; }
.channel.is-missing .channel-icon { background: linear-gradient(135deg, #3A4B6E, #22304D); color: var(--glacier); }
#gate-check { width: 100%; }

/* ------------------------------------------------------------------- state */
.state-block { text-align: center; padding-top: 6vh; }
.mascot-slot--small { width: 170px; margin: 0 auto 6px; }
.mascot-slot--small svg { clip-path: inset(0 0 14% 0); }
.state-title { margin: 0; font: 700 21px/1.2 var(--font-display); }
.state-text { margin: 10px auto 22px; max-width: 34ch; color: var(--glacier); }

.loader { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: 14px; }
.loader-flake { width: 56px; height: 56px; color: var(--neon); filter: drop-shadow(0 0 14px rgba(52,214,255,.7)); animation: spin 2.4s linear infinite; }
.loader-text { margin: 0; color: var(--glacier); font-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- captcha */
.sheet-layer { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center;
               background: rgba(3,6,12,.66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade .2s ease; }
.sheet { width: 100%; max-width: 520px; padding: 10px 20px calc(22px + var(--safe-bottom)); border-radius: 26px 26px 0 0;
         background: linear-gradient(180deg, #15223D, #0C1426); box-shadow: inset 0 1px 0 rgba(221,243,255,.2); animation: rise .28s cubic-bezier(.2,.9,.3,1); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
.sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0 auto 16px; }
.sheet-title { margin: 0; font: 700 19px/1.2 var(--font-display); }
.sheet-text { margin: 6px 0 18px; color: var(--glacier); }
.track { position: relative; height: 64px; border-radius: 20px; touch-action: none; user-select: none; -webkit-user-select: none;
         background:
           repeating-linear-gradient(135deg, rgba(221,243,255,.04) 0 6px, transparent 6px 14px),
           linear-gradient(180deg, #0A1222, #0E1830);
         box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 8px 18px rgba(0,0,0,.4); }
.track-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 64px; border-radius: 20px;
              background: linear-gradient(90deg, rgba(52,214,255,.05), rgba(52,214,255,.35)); }
.track-slot { position: absolute; top: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%); color: var(--neon);
              filter: drop-shadow(0 0 8px rgba(52,214,255,.6)); animation: slot 1.6s ease-in-out infinite; }
.track-slot svg { width: 100%; height: 100%; }
@keyframes slot { 50% { opacity: .55; } }
.knob { position: absolute; left: 4px; top: 4px; width: 56px; height: 56px; border: 0; border-radius: 17px; cursor: grab; touch-action: none;
        display: grid; place-items: center; color: #04121F;
        background: linear-gradient(180deg, #E8F8FF, #8FDBFF); box-shadow: 0 6px 18px -4px rgba(52,214,255,.8), inset 0 0 0 1px rgba(255,255,255,.6); }
.knob svg { width: 30px; height: 30px; }
.knob:active { cursor: grabbing; }
.track.is-ok { box-shadow: inset 0 0 0 2px var(--ok), 0 0 26px rgba(92,242,200,.35); }
.track.is-ok .knob { background: linear-gradient(180deg, #D9FFF3, var(--ok)); }
.track.is-fail { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.sheet-status { min-height: 22px; margin: 12px 0 6px; font-size: 14px; color: var(--glacier); }
.sheet-status.is-error { color: var(--danger); }
.sheet-status.is-ok { color: var(--ok); }
.sheet-close { width: 100%; margin-top: 4px; }

/* ---------------------------------------------------------------- roulette */
.overlay { position: fixed; inset: 0; z-index: 30; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
           padding: calc(28px + var(--safe-top)) 0 calc(24px + var(--safe-bottom));
           background: radial-gradient(80% 50% at 50% 38%, rgba(31,123,255,.25), transparent 70%), #050810; animation: fade .3s ease; }
.overlay-kanji { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); font: 700 150px/1 var(--font-jp);
                 color: transparent; -webkit-text-stroke: 1px rgba(127,168,217,.12); pointer-events: none; white-space: nowrap; }
.roul-head { position: relative; text-align: center; padding: 0 var(--pad); margin-top: auto; }
.roul-step { margin: 0; color: var(--glacier); font-size: 13.5px; }
.roul-title { margin: 4px 0 0; font: 800 24px/1.15 var(--font-display); }
.reel { position: relative; width: 100%; height: 168px; margin-top: 28px; overflow: hidden;
        mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.reel-strip { position: absolute; top: 14px; left: 0; display: flex; gap: 10px; will-change: transform; }
.reel-marker { position: absolute; z-index: 2; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%);
               background: var(--neon); box-shadow: 0 0 14px var(--neon), 0 0 30px rgba(52,214,255,.6); }
.reel-marker::before, .reel-marker::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%);
                                            border: 9px solid transparent; }
.reel-marker::before { top: 0; border-top-color: var(--neon); }
.reel-marker::after { bottom: 0; border-bottom-color: var(--neon); }
.card { width: 104px; height: 140px; flex: none; border-radius: 16px; position: relative; overflow: hidden;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 10px 8px 14px;
        background: linear-gradient(180deg, #16223C, #0D1528); box-shadow: inset 0 0 0 1px var(--line); }
.card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--rarity, var(--glacier)); box-shadow: 0 0 12px var(--rarity, transparent); }
.card .avatar { width: 54px; height: 54px; font-size: 20px; }
.card-name { font-size: 12.5px; font-weight: 600; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.r-ice { --rarity: #8FDBFF; }
.card.r-neon { --rarity: var(--neon); }
.card.r-violet { --rarity: var(--violet); }
.card.r-deep { --rarity: var(--neon-deep); }
.card.is-win { --rarity: var(--gold); background: linear-gradient(180deg, #2B2A3A, #141A2C); box-shadow: inset 0 0 0 2px var(--gold), 0 0 30px rgba(255,217,138,.55);
               transform: scale(1.06); transition: transform .4s cubic-bezier(.2,1.6,.4,1), box-shadow .4s; }
.roul-result { min-height: 64px; margin-top: 18px; text-align: center; padding: 0 var(--pad); }
.roul-result .win-name { display: block; font: 800 22px/1.2 var(--font-display); color: var(--gold); text-shadow: 0 0 22px rgba(255,217,138,.5); animation: stamp .45s cubic-bezier(.2,1.4,.4,1); }
.roul-result .win-sub { color: var(--glacier); font-size: 13.5px; }
.roul-final { width: 100%; max-width: 520px; padding: 0 var(--pad); }
.mascot-slot--final { width: 190px; margin: -10px auto 0; }
.mascot-slot--final svg { clip-path: inset(0 0 12% 0); }
.winner-list--final { margin-top: 10px; }
.roul-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 18px; }
.roul-actions .btn { min-width: 140px; }
.is-me-win .roul-title { color: var(--gold); }

/* ------------------------------------------------------------------ toast */
.toast { position: fixed; left: 50%; bottom: calc(22px + var(--safe-bottom)); z-index: 40; transform: translate(-50%, 30px); opacity: 0;
         max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 14px; background: rgba(221,243,255,.96); color: #0B1530;
         font-weight: 600; font-size: 14px; transition: .25s ease; pointer-events: none; text-align: center; }
.toast.is-shown { transform: translate(-50%, 0); opacity: 1; }
.toast.is-error { background: #FFD6E0; }

.demo-bar { position: fixed; bottom: calc(76px + var(--safe-bottom)); right: 12px; z-index: 15; display: flex; align-items: center; gap: 8px;
            padding: 5px 6px 5px 12px; border-radius: 999px; background: rgba(17,26,43,.92); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 12px; color: var(--glacier); }
.demo-bar button { border: 0; border-radius: 999px; padding: 5px 10px; background: rgba(52,214,255,.16); color: var(--neon); font-weight: 600; font-size: 12px; cursor: pointer; }

/* -------------------------------------------------------------- entrance */
.screen.is-active .banner { animation: banner-in .7s cubic-bezier(.2,.9,.3,1) both; }
.screen.is-active .mascot-slot--hero { animation: girl-in .9s cubic-bezier(.2,.9,.3,1) .15s both; }
@keyframes banner-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes girl-in { from { opacity: 0; transform: translateY(26px) scale(.96); } }

/* ===================================================== v4: анимации и эффекты */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.screen.is-active { animation: screen-in .32s ease both; }
@keyframes screen-in { from { opacity: 0; } }

/* таймер */
.cd-caption { position: relative; z-index: 2; margin: 14px 0 6px 4px; font-size: 12.5px; color: var(--glacier); }
.cd-caption + .countdown { margin-top: 0; }
.cd-num { display: inline-block; }
.cd-num.roll { animation: roll .42s cubic-bezier(.2,.9,.3,1); }
@keyframes roll { from { transform: translateY(-38%) scale(.9); opacity: 0; } }
.countdown.is-final { box-shadow: inset 0 0 0 1px rgba(156,140,255,.6), 0 0 34px rgba(122,99,255,.35); }
.final-count { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none;
               font: 800 150px/1 var(--font-display); color: transparent; -webkit-text-stroke: 2px rgba(221,243,255,.9);
               text-shadow: 0 0 40px rgba(156,140,255,.8); opacity: 0; }
.final-count.beat { animation: beat .95s ease-out; }
@keyframes beat { 0% { opacity: 0; transform: scale(1.6); } 15% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.82); } }
body.final-10::before { content: ""; position: fixed; inset: 0; z-index: 5; pointer-events: none;
                        box-shadow: inset 0 0 90px rgba(122,99,255,.5); animation: edge 1s ease-in-out infinite; }
@keyframes edge { 50% { opacity: .3; } }

/* этап «определяем победителей» */
.drawing-note { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; }
.draw-ring { position: relative; width: 46px; height: 46px; flex: none; }
.draw-ring i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent;
               border-top-color: var(--violet); border-right-color: var(--neon); animation: spin 1s linear infinite; }
.draw-ring i + i { inset: 9px; animation-duration: 1.6s; animation-direction: reverse;
                   border-top-color: var(--neon); border-right-color: transparent; border-left-color: var(--violet); }
.draw-title { margin: 0; }
.draw-sub { margin: 6px 0 0; font-size: 13px; color: var(--glacier); }
#draw-ticket { color: var(--ice); font-variant-numeric: tabular-nums; }

/* числа, пузырь, маскотка */
.facts dd { transform-origin: left center; }
.bump { animation: bump .5s ease; }
@keyframes bump { 40% { transform: scale(1.14); color: var(--neon); } }
.bubble.pop { animation: pop .45s cubic-bezier(.2,1.5,.4,1); }
.banner > .bubble { transform-origin: 85% 100%; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.mascot-slot--hero { animation: breathe 4.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateY(-1.2%); } }
.mascot-slot.jump svg { animation: jump .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes jump { 30% { transform: translateY(-6%) scale(1.03); } 60% { transform: translateY(1%); } }

/* шкала шанса */
.boost-lead { margin: -4px 0 8px; color: var(--glacier); font-size: 14px; }
.meter { margin-top: 18px; padding: 14px 16px 12px; border-radius: 18px; background: rgba(17,26,43,.72); box-shadow: inset 0 0 0 1px var(--line); }
.meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.meter-head span { font-size: 13.5px; color: var(--glacier); }
.meter-x { font: 800 26px/1 var(--font-display); color: var(--neon); text-shadow: 0 0 18px rgba(52,214,255,.45); font-variant-numeric: tabular-nums; }
.meter-bar { display: flex; height: 12px; margin-top: 10px; border-radius: 6px; overflow: hidden; background: rgba(127,168,217,.12); }
.meter-seg { display: block; height: 100%; width: 0; transition: width .9s cubic-bezier(.2,.9,.3,1); }
.seg-base { background: #7FA8D9; }
.seg-tag { background: linear-gradient(90deg, #34D6FF, #8BEBFF); box-shadow: 0 0 12px rgba(52,214,255,.7); }
.seg-ref { background: linear-gradient(90deg, #9C8CFF, #C9C0FF); box-shadow: 0 0 12px rgba(156,140,255,.6); }
.meter-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--glacier); }
.lg::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.lg-base::before { background: #7FA8D9; } .lg-tag::before { background: #34D6FF; } .lg-ref::before { background: #9C8CFF; }
.meter-note { margin: 8px 0 0; font-size: 13.5px; color: #C6DDF2; }

/* капча */
.track-hint { position: absolute; left: 76px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; pointer-events: none; transition: opacity .2s; }
.track-hint i { width: 9px; height: 9px; border-right: 2px solid var(--glacier); border-top: 2px solid var(--glacier); transform: rotate(45deg); opacity: .15; animation: chev 1.4s infinite; }
.track-hint i:nth-child(2) { animation-delay: .15s; } .track-hint i:nth-child(3) { animation-delay: .3s; }
@keyframes chev { 40% { opacity: .9; } }
.track.is-dragging .track-hint, .track.is-ok .track-hint { opacity: 0; }
.track.is-dragging .knob { box-shadow: 0 0 0 6px rgba(52,214,255,.18), 0 6px 26px rgba(52,214,255,.95), inset 0 0 0 1px rgba(255,255,255,.6); }
.track-slot { transition: transform .2s, color .2s; }
.track-slot.near { transform: translate(-50%, -50%) scale(1.18); color: #fff; filter: drop-shadow(0 0 14px rgba(52,214,255,1)); }
.track.is-ok .track-slot { opacity: 0; transition: opacity .3s; }

/* билет */
.ticket { position: relative; }
.ticket.is-new { animation: print .75s cubic-bezier(.2,1.1,.4,1); }
.ticket.is-new::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                        background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
                        transform: translateX(-120%); animation: sheen .9s .35s forwards; }
@keyframes print { from { clip-path: inset(0 100% 0 0); transform: translateY(6px); } to { clip-path: inset(0 0 0 0); } }
@keyframes sheen { to { transform: translateX(120%); } }

/* рулетка */
.sound-btn { position: absolute; top: calc(14px + var(--safe-top)); right: 14px; z-index: 6; width: 40px; height: 40px; border: 0; border-radius: 12px;
             background: rgba(127,168,217,.12); color: var(--ice); display: grid; place-items: center; cursor: pointer; }
.sound-btn svg { width: 22px; height: 22px; }
.sound-btn .sound-off { display: none; }
.sound-btn[aria-pressed="false"] .sound-on { display: none; }
.sound-btn[aria-pressed="false"] .sound-off { display: inline; }
.reel { --speed: 0; }
.reel-strip { filter: blur(calc(var(--speed) * 2.2px)); z-index: 1; }
.card { transform: scale(var(--lens, 1)); transition: opacity .45s, filter .45s; }
.card.is-win { transform: scale(1.14); }
.card.is-win::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
                       background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
                       transform: translateX(-120%); animation: sheen .9s .1s forwards; }
.reel-speed { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: calc(var(--speed) * .9);
              background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(143,219,255,.12) 46px 48px);
              animation: speedlines .22s linear infinite; }
@keyframes speedlines { to { background-position: -96px 0; } }
.reel-marker { z-index: 3; box-shadow: 0 0 calc(14px + var(--speed) * 28px) var(--neon), 0 0 30px rgba(52,214,255,.6); }
.reel-marker.tick { animation: mtick .14s ease-out; }
@keyframes mtick { 50% { width: 6px; } }
.reel-rays { position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; margin: -310px 0 0 -310px; z-index: 0; border-radius: 50%;
             pointer-events: none; opacity: 0; transition: opacity .5s;
             background: repeating-conic-gradient(from 0deg, rgba(143,219,255,.22) 0 7deg, transparent 7deg 20deg);
             -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 66%); mask-image: radial-gradient(circle, #000 18%, transparent 66%);
             animation: rays 10s linear infinite; }
.is-me-win .reel-rays { background: repeating-conic-gradient(from 0deg, rgba(255,217,138,.32) 0 7deg, transparent 7deg 20deg); }
.reel.revealed .reel-rays { opacity: 1; }
@keyframes rays { to { transform: rotate(360deg); } }
.reel.revealed .card:not(.is-win) { opacity: .32; filter: saturate(.35) brightness(.8); }
.roul-count { position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-50%); z-index: 4; text-align: center; pointer-events: none;
              font: 800 140px/1 var(--font-display); color: transparent; -webkit-text-stroke: 2px #DDF3FF;
              text-shadow: 0 0 50px rgba(52,214,255,.85); opacity: 0; }
.roul-count.beat { animation: beat .62s ease-out; }
.roul-flash { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
              background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.95), rgba(160,230,255,.4) 30%, transparent 65%); }
.roul-flash.gold { background: radial-gradient(circle at 50% 42%, rgba(255,248,225,.95), rgba(255,200,110,.45) 30%, transparent 65%); }
.roul-flash.go { animation: flash .6s ease-out; }
@keyframes flash { 12% { opacity: 1; } 100% { opacity: 0; } }
.roul-girl { position: absolute; left: -14px; bottom: calc(-34px + var(--safe-bottom)); width: 128px; z-index: 2; pointer-events: none;
             transform: translateY(115%); transition: transform .6s cubic-bezier(.2,1.2,.4,1); }
.roul-girl.in { transform: translateY(0); }
.roul-girl svg { clip-path: inset(0 0 22% 0); }
.roul-actions { position: relative; z-index: 3; }
.roul-result .win-sub { display: block; margin-top: 4px; }
.is-me-win .roul-title { animation: glowpulse 1.2s ease-in-out infinite; }
@keyframes glowpulse { 50% { text-shadow: 0 0 30px rgba(255,217,138,.9); } }
.winner-list--final .winner { animation: row-in .5s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--i, 0) * 110ms + .1s); }
@keyframes row-in { from { opacity: 0; transform: translateX(-18px); } }
.is-final .mascot-slot--final { animation: pop .6s cubic-bezier(.2,1.5,.4,1); }

.meter-max { margin-left: auto; }
.lite .reel-strip { filter: none; }
.is-intro .reel, .is-intro .roul-result { visibility: hidden; }
.reel.revealed .reel-marker { opacity: .28; transition: opacity .4s; }
.final-count { color: rgba(221,243,255,.1); -webkit-text-stroke-width: 2.5px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  #snow, #fx, .reel-speed, .reel-rays, .final-count, body.final-10::before { display: none; }
}