@property --progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  color-scheme: light;
  --ink: #151421;
  --muted: rgba(34, 32, 48, .52);
  --paper: #f7f7f3;
  --progress: 0;
  --prize-accent: #58b8f7;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #e9e8e4; }
body { min-width: 320px; overflow-x: hidden; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; }

.app {
  position: relative; isolation: isolate; width: min(100%, 430px); min-height: 100svh; margin: 0 auto; overflow: hidden;
  background: radial-gradient(circle at 90% 4%, rgba(128,102,255,.11), transparent 27%), radial-gradient(circle at 4% 66%, rgba(39,197,255,.10), transparent 31%), linear-gradient(160deg, #fffefa 0%, #f4f3f0 58%, #efefec 100%);
}
.app::before { content: ""; position: absolute; z-index: -2; inset: -20%; background: conic-gradient(from 120deg at 52% 56%, transparent, rgba(84,203,255,.09), transparent 25%, rgba(147,98,255,.08), transparent 50%, rgba(255,91,151,.07), transparent 76%); filter: blur(44px); animation: ambient-turn 18s linear infinite; }
.app::after { content: ""; position: absolute; z-index: -1; inset: -28%; opacity: 0; pointer-events: none; background: radial-gradient(circle at 18% 66%, rgba(41,208,255,.34), transparent 29%), radial-gradient(circle at 82% 54%, rgba(255,78,153,.29), transparent 31%), radial-gradient(circle at 52% 86%, rgba(111,79,255,.34), transparent 34%), radial-gradient(circle at 50% 42%, rgba(255,190,73,.16), transparent 25%); filter: blur(42px) saturate(1.16); transform: scale(.82) rotate(-8deg); transition: opacity .42s ease, filter .42s ease; }
.ambient { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.ambient i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(74,112,190,.19); animation: mote 7s ease-in-out infinite; }
.ambient i:nth-child(1) { left: 10%; top: 46%; }
.ambient i:nth-child(2) { right: 10%; top: 30%; animation-delay: -2.5s; }
.ambient i:nth-child(3) { right: 24%; top: 74%; animation-delay: -4.5s; }

.brand { position: absolute; z-index: 40; top: calc(23px + env(safe-area-inset-top)); left: 50%; line-height: 1; transform: translateX(-50%); transition: opacity .35s ease; }
.brand__logo { display: block; width: 76px; height: auto; object-fit: contain; object-position: left center; }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 100svh; padding: calc(73px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom)); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px) scale(.985); transition: opacity .38s ease, transform .58s cubic-bezier(.16,.82,.22,1), visibility 0s linear .58s; }
.screen.is-active { position: relative; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.eyebrow { margin: 0 0 10px; color: #5d6cd5; font-size: 10px; font-weight: 560; letter-spacing: .025em; text-transform: none; }

.screen--intro { justify-content: flex-start; padding-bottom: 0; }
.intro-copy { position: relative; z-index: 5; width: 100%; padding-top: 23px; text-align: center; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease; }
.intro-copy h1 { max-width: 370px; margin: 0 auto; color: #171621; font-size: clamp(40px, 10.8vw, 47px); font-weight: 620; line-height: .96; letter-spacing: -.047em; }
.intro-copy h1 span { display: block; }
.intro-title__light { margin-bottom: 3px; color: rgba(23,22,33,.88); font-weight: 420; letter-spacing: -.038em; }
.intro-copy__body { max-width: 300px; margin: 18px auto 0; color: var(--muted); font-size: 14px; font-weight: 430; line-height: 1.42; letter-spacing: -.014em; }

.touch-panel { position: absolute; z-index: 4; left: 0; right: 0; top: 50%; bottom: 0; container-type: size; overflow: visible; border: 0; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
.touch-panel:focus-visible { box-shadow: inset 0 0 0 2px rgba(93,108,213,.3); }
.ios-haptic-switch, .ios-haptic-pulse { display: none; }
.app.has-ios-haptic-switch .ios-haptic-switch { position: absolute; z-index: 20; inset: 0; display: block; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; clip-path: inset(0); -webkit-tap-highlight-color: transparent; touch-action: none; }
.app.has-ios-haptic-switch .ios-haptic-pulse { position: fixed; z-index: -1; left: 0; bottom: 0; display: block; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.touch-panel__wash { position: absolute; inset: -20% 0 0; background: radial-gradient(ellipse 110% 78% at 50% 100%, rgba(120,107,255,.07), transparent 65%); opacity: .7; pointer-events: none; }
.touch-panel::before { display: none; }
.idle-cue { position: absolute; z-index: 6; left: 50%; top: 53%; display: flex; flex-direction: column; align-items: center; width: 260px; transform: translate(-50%,-50%); transition: opacity .3s ease, transform .5s cubic-bezier(.16,.8,.2,1), filter .3s ease; }
.idle-cue__gesture { position: relative; width: 42px; height: 42px; margin-bottom: 17px; border-radius: 50%; }
.idle-cue__gesture::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(96,83,191,.16); border-radius: 50%; background: rgba(255,255,255,.18); box-shadow: 0 7px 20px rgba(77,66,155,.08); animation: cue-breathe 2.2s ease-in-out infinite; }
.idle-cue__gesture::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: radial-gradient(circle at 34% 28%, #dffaff 0 10%, #55d0fa 30%, #6e5bff 76%, #5547ce 100%); box-shadow: inset 0 1px 2px rgba(255,255,255,.75), 0 5px 13px rgba(82,69,184,.28), 0 0 0 4px rgba(106,91,255,.05); animation: cue-object 2.2s ease-in-out infinite; }
.idle-cue strong { color: #24212f; font-size: 16px; font-weight: 560; letter-spacing: -.018em; }
.idle-cue small { display: block; margin-top: 7px; color: rgba(108,103,124,.72); font-size: 11px; font-weight: 450; line-height: 1.25; letter-spacing: -.01em; }
.hold-experience { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 0 14px; pointer-events: none; }
.hold-stage { position: relative; width: auto; height: min(58vw,56cqh,230px); aspect-ratio: 1; display: grid; flex: 0 0 auto; place-items: center; isolation: isolate; opacity: 0; filter: blur(12px); pointer-events: none; transform: translateY(30px) scale(.48); transition: opacity .3s ease, filter .42s ease, transform .56s cubic-bezier(.12,.82,.22,1.08); }
.touch-echo { position: absolute; z-index: 2; inset: 0; opacity: 0; background: radial-gradient(circle 125px at var(--touch-x,50%) var(--touch-y,58%), rgba(115,92,255,.20), rgba(41,205,255,.10) 38%, transparent 72%); filter: blur(4px); transition: opacity .25s ease; pointer-events: none; }
.color-bloom { position: absolute; z-index: -3; width: 128%; height: 128%; border-radius: 50%; background: conic-gradient(from 40deg, rgba(255,83,145,.38), rgba(255,190,71,.30), rgba(64,211,255,.4), rgba(110,82,255,.38), rgba(255,83,145,.38)); opacity: calc(.08 + var(--progress) * .72); filter: blur(calc(30px - var(--progress) * 11px)); transform: scale(calc(.76 + var(--progress) * .31)) rotate(calc(var(--progress) * 160deg)); transition: opacity .15s ease; }
.hold-glow { position: absolute; z-index: -2; inset: 6%; border-radius: 50%; background: rgba(255,255,255,calc(.05 + var(--progress) * .58)); box-shadow: 0 22px 70px rgba(88,81,155,calc(.03 + var(--progress) * .23)); transform: scale(calc(.92 + var(--progress) * .08)); }
.orbit { position: absolute; z-index: -1; inset: -2%; border: 1px solid rgba(96,83,191,calc(.04 + var(--progress) * .22)); border-radius: 50%; opacity: calc(.08 + var(--progress) * .92); transform: rotate(calc(var(--progress) * 240deg)); }
.orbit--two { inset: -9%; border-color: rgba(24,167,231,calc(.07 + var(--progress) * .16)); transform: rotate(calc(var(--progress) * -190deg)); }
.orbit i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #755eff; box-shadow: 0 0 14px 4px rgba(117,94,255,.35); transform: translateX(-50%) scale(calc(.65 + var(--progress) * .7)); }
.orbit--two i { top: auto; right: 12%; bottom: 7%; left: auto; background: #27cfff; box-shadow: 0 0 14px 4px rgba(39,207,255,.32); }
.energy-dots { position: absolute; inset: -16%; opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.energy-dots i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; transform: rotate(var(--a)) translateY(calc(-118px - var(--progress) * 28px)) scale(calc(.3 + var(--progress))); animation: energy-pop .7s ease-in-out infinite alternate; }
.energy-dots i:nth-child(1) { --a: 10deg; color: #6e5cff; }
.energy-dots i:nth-child(2) { --a: 74deg; color: #ff4e9b; animation-delay: -.2s; }
.energy-dots i:nth-child(3) { --a: 136deg; color: #ffaf3d; animation-delay: -.4s; }
.energy-dots i:nth-child(4) { --a: 202deg; color: #36ccff; animation-delay: -.1s; }
.energy-dots i:nth-child(5) { --a: 263deg; color: #7061ff; animation-delay: -.35s; }
.energy-dots i:nth-child(6) { --a: 322deg; color: #ff5794; animation-delay: -.5s; }

.hold-control { position: relative; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; color: #171622; background: transparent; }
.progress-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); filter: drop-shadow(0 0 calc(2px + var(--progress) * 9px) rgba(105,88,255,calc(.16 + var(--progress) * .25))); }
.progress-ring circle { fill: none; vector-effect: non-scaling-stroke; }
.progress-ring__track { stroke: rgba(40,37,62,.08); stroke-width: 2; }
.progress-ring__value { stroke: url(#spectrum); stroke-width: calc(3px + var(--progress) * 3px); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--progress) * 100); }
.hold-control__surface { position: absolute; inset: 18%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,calc(.06 + var(--progress) * .62)); border-radius: 44% 56% 53% 47% / 49% 46% 54% 51%; background: radial-gradient(circle at 36% 24%, rgba(255,255,255,calc(.10 + var(--progress) * .72)), rgba(255,255,255,calc(.04 + var(--progress) * .24)) 56%, rgba(234,232,246,calc(.03 + var(--progress) * .30))); box-shadow: inset 0 1px 1px rgba(255,255,255,calc(.1 + var(--progress) * .65)), 0 22px 55px rgba(40,35,72,calc(.02 + var(--progress) * .09)); backdrop-filter: blur(calc(5px + var(--progress) * 13px)); transform: scale(calc(1 - var(--progress) * .026)); transition: box-shadow .2s ease, border-radius .7s ease; animation: lens-morph 7s ease-in-out infinite alternate; }
.hold-control__surface::before { content: ""; position: absolute; width: 145%; height: 42%; left: -23%; top: -20%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); filter: blur(10px); transform: rotate(-13deg); animation: surface-glint 5.5s ease-in-out infinite; }
.hold-control__surface::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from calc(var(--progress) * 260deg), transparent 0 24%, rgba(102,78,255,.12), transparent 39% 58%, rgba(255,80,153,.10), transparent 77%); opacity: calc(var(--progress) * .9); transform: scale(.88); filter: blur(11px); }
.hold-control__meter { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: center; gap: 2px; color: #24212f; font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(4px); transition: opacity .28s .08s ease, transform .28s .08s ease; }
.hold-control__meter span { min-width: 54px; font-size: clamp(34px,16cqw,44px); font-weight: 520; line-height: .9; letter-spacing: -.065em; text-align: right; }
.hold-control__meter i { margin-top: 2px; color: rgba(45,41,64,.42); font-size: 11px; font-style: normal; font-weight: 520; line-height: 1; }
.haptic-hint { display: flex; align-items: center; gap: 7px; margin-top: 14px; color: rgba(31,29,43,.40); font-size: 10px; opacity: 0; transform: translateY(6px); transition: opacity .25s .12s ease, transform .25s .12s ease; }
.haptic-hint > i { flex: 0 0 auto; width: 8px; height: 12px; border: 1px solid rgba(73,69,98,.3); border-radius: 3px; }
.haptic-hint__text { min-width: 84px; text-align: left; transition: opacity .15s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.haptic-hint__text.is-changing { opacity: 0; transform: translateY(3px); }
.app.is-holding .intro-copy { transform: none; opacity: 1; }
.app.is-holding .brand { opacity: 1; }
.app.is-holding::after { opacity: calc(.28 + var(--progress) * .58); animation: hold-atmosphere 3.8s ease-in-out infinite alternate; }
.app.is-holding .ambient i { background: rgba(91,84,255,.42); box-shadow: 0 0 18px 5px rgba(86,191,255,.24); animation-duration: 2.8s; }
.app.is-holding .touch-panel__wash { opacity: calc(.62 + var(--progress) * .28); filter: saturate(1.25); transform: scale(calc(1 + var(--progress) * .08)); transition: opacity .25s ease, transform .35s ease, filter .35s ease; }
.app.is-holding .touch-echo { opacity: 1; }
.app.is-holding .idle-cue { opacity: 0; filter: blur(5px); transform: translate(-50%,-45%) scale(.92); }
.app.is-holding .hold-stage { opacity: 1; filter: none; transform: none; }
.app.is-holding .haptic-hint { opacity: 1; transform: none; }
.app.is-releasing .idle-cue { opacity: 0; }
.app.is-releasing .hold-stage { opacity: 0; filter: blur(7px); transform: scale(.84); transition-duration: .42s; }
.app.is-holding .hold-control__surface { box-shadow: inset 0 5px 14px rgba(67,57,111,.10), inset 0 -18px 34px rgba(67,57,111,.11), 0 22px 58px rgba(88,70,183,.18); }
.app.is-holding .hold-control__meter { opacity: 1; transform: none; }
.app.is-holding .energy-dots { opacity: calc(.2 + var(--progress) * .8); animation: energy-spin calc(5s - var(--progress) * 3s) linear infinite; }
.app.is-final .hold-stage { animation: final-beat .32s ease-in-out infinite alternate; }
.app.is-final .color-bloom { filter: blur(13px); }
.hold-control.is-peak { animation: peak-pop .42s cubic-bezier(.16,.9,.24,1) both; }
.hold-control.is-peak .hold-control__surface { transform: scale(1.045); }

.screen--win { align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 52%, rgba(255,255,255,.96), rgba(248,246,242,.8) 45%, transparent 70%); }
.screen--win.is-active.is-leaving { opacity: 0; pointer-events: none; transform: scale(1.018); transition: opacity .24s ease, transform .3s cubic-bezier(.3,.7,.2,1); }
.win-copy { position: relative; z-index: 7; transform: translateY(-116px); animation: win-copy-in .7s .08s cubic-bezier(.16,.86,.22,1) both; }
.win-copy h2 { margin: 0; color: #171521; font-size: 66px; font-weight: 760; line-height: .9; letter-spacing: -.065em; }
.win-copy > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.reveal-stage { position: absolute; top: 46%; width: 280px; height: 280px; display: grid; place-items: center; }
.reveal-flare { position: absolute; width: 270px; height: 270px; border-radius: 50%; background: conic-gradient(from 50deg, rgba(99,79,255,.5), rgba(43,207,255,.45), rgba(255,188,65,.45), rgba(255,75,150,.48), rgba(99,79,255,.5)); filter: blur(27px); animation: reveal-flare 1s ease both; }
.reveal-wave { position: absolute; width: 170px; height: 170px; border: 1px solid rgba(103,84,225,.22); border-radius: 50%; animation: wave-out 1.15s .08s cubic-bezier(.1,.7,.2,1) both; }
.reveal-wave--two { border-color: rgba(255,87,153,.2); animation-delay: .22s; }
.reveal-box { position: relative; width: 122px; height: 92px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 25px 25px 31px 31px; color: #171521; background: linear-gradient(145deg, #fff, #ecebfa 64%, #e9e6ff); box-shadow: inset 0 1px #fff, 0 28px 70px rgba(87,67,173,.22); animation: box-reveal .82s cubic-bezier(.16,.86,.24,1) both; }
.reveal-box span { font-size: 18px; font-weight: 760; letter-spacing: .09em; }
.reveal-box i { position: absolute; z-index: 2; width: 130px; height: 31px; top: -16px; border: 1px solid rgba(255,255,255,.9); border-radius: 18px; background: linear-gradient(135deg, #f8f7ff, #ded9ff); transform-origin: 10% 100%; animation: lid-open .75s .16s cubic-bezier(.12,.9,.24,1) both; }
.reveal-box b { position: absolute; z-index: 3; top: -56px; width: 70px; height: 98px; border-radius: 18px; background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(238,235,255,.95)); box-shadow: 0 15px 34px rgba(87,67,173,.16); animation: ticket-rise .75s .2s cubic-bezier(.12,.88,.24,1) both; }
.particle { position: absolute; left: 50%; top: 50%; width: 5px; height: 18px; border-radius: 4px; background: var(--particle-color); opacity: .8; box-shadow: 0 0 11px currentColor; transform: rotate(var(--r)) translateY(0); animation: particle-out 1s var(--d) cubic-bezier(.16,.76,.2,1) both; }

.screen--prize { justify-content: center; padding: calc(68px + env(safe-area-inset-top)) 17px calc(15px + env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--prize-accent) 16%, transparent), transparent 50%); perspective: 900px; transform: none; transition: opacity .3s ease, visibility 0s linear .3s; }
.screen--prize.is-active { transform: none; transition: opacity .3s ease, visibility 0s linear 0s; }
.reward-aura { position: absolute; z-index: -1; left: 50%; top: 44%; width: 360px; height: 360px; border-radius: 50%; background: conic-gradient(from 180deg, color-mix(in srgb, var(--prize-accent) 30%, transparent), rgba(108,91,255,.13), rgba(255,95,155,.12), color-mix(in srgb, var(--prize-accent) 28%, transparent)); filter: blur(38px); transform: translate(-50%,-50%); animation: reward-aura 1.4s cubic-bezier(.16,.82,.22,1) both; }
.prize-status { position: relative; z-index: 5; display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 7px; margin: 0 0 15px; text-align: center; }
.prize-kicker { display: flex; width: 100%; align-items: center; justify-content: center; margin: 0; color: rgba(27,25,39,.54); font-size: 10px; line-height: 1.35; text-align: center; animation: kicker-in .55s .45s ease both; }
.claimed-message { width: 100%; margin: 0; color: #5d5ac7; text-align: center; font-size: 12px; font-weight: 650; line-height: 1.35; }
.prize-stack { position: relative; width: 100%; transform-style: preserve-3d; }
.prize-stack__back { position: absolute; inset: 8px 14px -8px; border: 1px solid rgba(255,255,255,.75); border-radius: 29px; background: color-mix(in srgb, var(--prize-accent) 15%, #f8f7f3); box-shadow: 0 15px 38px rgba(48,39,94,.09); animation: back-card-one .8s .18s cubic-bezier(.16,.84,.24,1) both; }
.prize-stack__back--two { inset: 4px 7px -4px; background: color-mix(in srgb, var(--prize-accent) 8%, #fff); animation-name: back-card-two; animation-delay: .1s; }
.prize-card { position: relative; z-index: 3; overflow: hidden; width: 100%; padding: 24px 22px 19px; border: 1px solid rgba(255,255,255,.94); border-radius: 28px; color: #171622; background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(250,249,247,.96) 62%, color-mix(in srgb, var(--prize-accent) 7%, #f5f3f0)); box-shadow: 0 26px 65px rgba(48,40,85,.16), inset 0 1px #fff; transform-origin: 50% 54%; backface-visibility: hidden; will-change: transform, opacity; animation: card-arrive .76s cubic-bezier(.18,.86,.22,1) both; }
.prize-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.76) 44%, transparent 64%); transform: translateX(-130%); animation: card-sweep 1.1s .62s ease both; pointer-events: none; }
.prize-card__accent { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle 205px at calc(100% + 54px) -44px, color-mix(in srgb, var(--prize-accent) 42%, transparent) 0%, color-mix(in srgb, var(--prize-accent) 22%, transparent) 43%, transparent 74%); opacity: 1; clip-path: inset(0 round 28px); -webkit-clip-path: inset(0 round 28px); pointer-events: none; }
.prize-card__shine { position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, transparent, var(--prize-accent), #ff76ad, transparent); opacity: .7; }
.prize-card__topline { position: relative; display: flex; justify-content: space-between; align-items: center; color: #6c6978; font-size: 9px; font-weight: 750; letter-spacing: .14em; }
.prize-card__gift { position: relative; width: 27px; height: 27px; display: block; border: 1px solid color-mix(in srgb, var(--prize-accent) 24%, rgba(42,38,61,.10)); border-radius: 9px; background: color-mix(in srgb, var(--prize-accent) 9%, rgba(255,255,255,.72)); }
.prize-card__gift::before { content: ""; position: absolute; left: 6px; right: 6px; top: 10px; bottom: 5px; border: 1.3px solid #565165; border-radius: 2px 2px 4px 4px; }
.prize-card__gift::after { content: ""; position: absolute; left: 5px; right: 5px; top: 8px; height: 4px; border: 1.3px solid #565165; border-radius: 2px; background: color-mix(in srgb, var(--prize-accent) 5%, #fff); }
.prize-card__gift > i { position: absolute; z-index: 2; left: 50%; top: 8px; bottom: 5px; width: 1.3px; background: #565165; transform: translateX(-50%); }
.prize-card__gift > i::before, .prize-card__gift > i::after { content: ""; position: absolute; top: -5px; width: 7px; height: 5px; border: 1.2px solid #565165; }
.prize-card__gift > i::before { right: 1px; border-radius: 7px 7px 2px 7px; transform: rotate(12deg); }
.prize-card__gift > i::after { left: 1px; border-radius: 7px 7px 7px 2px; transform: rotate(-12deg); }
.prize-card h2 { position: relative; max-width: 320px; margin: 22px 0 25px; font-size: clamp(25px, 7.2vw, 31px); font-weight: 690; line-height: 1.02; letter-spacing: -.045em; }
.prize-card__value { position: relative; font-size: 20px; font-weight: 690; letter-spacing: -.025em; }
.prize-card__detail { position: relative; margin-top: 5px; color: #706d7b; font-size: 12px; line-height: 1.38; }
.prize-card__rule { height: 1px; margin: 18px 0 14px; background: rgba(34,31,48,.08); }
.prize-card__tariff { min-height: 32px; margin: 0 0 16px; color: #5e5b68; font-size: 11px; line-height: 1.4; }
.promo-code { width: 100%; min-height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; border: 1px solid color-mix(in srgb, var(--prize-accent) 45%, #b9b5c4); border-radius: 16px; color: #1d1a2a; background: color-mix(in srgb, var(--prize-accent) 12%, #f8f7f4); box-shadow: 0 8px 22px color-mix(in srgb, var(--prize-accent) 11%, transparent), inset 0 1px rgba(255,255,255,.8); cursor: pointer; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.promo-code:active { transform: scale(.99); background: color-mix(in srgb, var(--prize-accent) 17%, #f4f3f1); box-shadow: 0 4px 14px color-mix(in srgb, var(--prize-accent) 10%, transparent); }
.promo-code__content { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.promo-code__content small { color: rgba(38,34,52,.46); font-size: 8px; font-weight: 560; letter-spacing: .04em; }
.promo-code__text { font-size: 15px; font-weight: 780; letter-spacing: .085em; }
.promo-code__copy { position: relative; width: 20px; height: 20px; }
.promo-code__copy i { position: absolute; width: 11px; height: 13px; border: 1.5px solid #817d8d; border-radius: 3px; }
.promo-code__copy i:first-child { left: 2px; top: 2px; }
.promo-code__copy i:last-child { right: 2px; bottom: 2px; background: #f4f3f1; }
.promo-code.is-copied .promo-code__copy::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #3a7c5b; font-size: 18px; font-weight: 760; }
.promo-code.is-copied .promo-code__copy i { display: none; }
.prize-actions { display: grid; gap: 8px; margin-top: 11px; }
.button { width: 100%; min-height: 48px; border-radius: 15px; font-size: 10px; font-weight: 760; letter-spacing: .09em; cursor: pointer; transition: transform .16s ease, opacity .16s ease, background .2s ease; }
.button:active { transform: scale(.985); }
.button--primary { display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; color: white; background: linear-gradient(120deg, #24213a, #5146b9 62%, #7656c9); box-shadow: 0 10px 25px rgba(69,56,158,.2); }
.button--primary span { color: #92e2ff; font-size: 14px; }
.button--secondary { border: 1px solid rgba(34,31,48,.10); color: #514e5c; background: rgba(255,255,255,.32); }
.button--share { color: #4e45a2; background: color-mix(in srgb, var(--prize-accent) 8%, rgba(255,255,255,.42)); }
.button--share span { display: inline-block; margin-left: 5px; color: var(--prize-accent); font-size: 13px; transform: translateY(-1px); }
.prize-note { position: relative; z-index: 4; align-self: center; max-width: 310px; margin: 13px 0 0; color: rgba(32,29,44,.39); text-align: center; font-size: 9px; line-height: 1.4; }

.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(23px + env(safe-area-inset-bottom)); padding: 11px 16px; border: 1px solid rgba(255,255,255,.5); border-radius: 14px; color: #fff; background: rgba(32,29,46,.88); box-shadow: 0 15px 45px rgba(45,36,86,.2); backdrop-filter: blur(16px); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%,12px); transition: .25s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }
.dev-panel { position: fixed; z-index: 100; left: 50%; bottom: calc(7px + env(safe-area-inset-bottom)); width: min(calc(100% - 14px), 416px); padding: 5px; display: flex; gap: 4px; overflow-x: auto; border: 1px solid rgba(43,39,60,.10); border-radius: 12px; background: rgba(255,255,255,.76); box-shadow: 0 8px 30px rgba(45,39,76,.10); backdrop-filter: blur(18px); transform: translateX(-50%); scrollbar-width: none; }
.dev-panel[hidden] { display: none; }
.dev-panel button { flex: 0 0 auto; padding: 7px 8px; border: 0; border-radius: 7px; color: rgba(30,27,42,.62); background: rgba(49,43,83,.06); font-size: 8px; font-weight: 750; }
.error-state, .noscript { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 30px; color: rgba(28,26,38,.72); background: #f7f7f3; text-align: center; line-height: 1.5; }
.error-state[hidden] { display: none; }

@keyframes ambient-turn { to { transform: rotate(360deg); } }
@keyframes hold-atmosphere { 0% { transform: scale(.96) translate(-2%,1%) rotate(-7deg); } 48% { transform: scale(1.04) translate(2%,-2%) rotate(3deg); } 100% { transform: scale(1) translate(-1%,-3%) rotate(9deg); } }
@keyframes mote { 0%,100% { transform: translateY(0); opacity: .15; } 50% { transform: translateY(-18px); opacity: .55; } }
@keyframes surface-glint { 0%,62% { transform: translateX(-75%) rotate(-13deg); opacity: 0; } 75% { opacity: .8; } 100% { transform: translateX(80%) rotate(-13deg); opacity: 0; } }
@keyframes cue-breathe { 0%,100% { opacity: .44; transform: scale(1); } 50% { opacity: .72; transform: scale(1.045); } }
@keyframes cue-object { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes lens-morph { to { border-radius: 56% 44% 47% 53% / 43% 57% 46% 54%; transform: translateY(-4px) scale(calc(1 - var(--progress) * .026)); } }
@keyframes energy-spin { to { transform: rotate(360deg); } }
@keyframes energy-pop { to { transform: rotate(var(--a)) translateY(calc(-124px - var(--progress) * 28px)) scale(calc(.45 + var(--progress) * 1.35)); } }
@keyframes final-beat { from { transform: scale(1); } to { transform: scale(1.018); } }
@keyframes peak-pop { 0% { transform: scale(.98); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes win-copy-in { from { opacity: 0; transform: translateY(-92px) scale(.88); filter: blur(8px); } to { opacity: 1; transform: translateY(-116px); filter: none; } }
@keyframes reveal-flare { 0% { opacity: 0; transform: scale(.2) rotate(-60deg); } 42% { opacity: .9; } 100% { opacity: .52; transform: scale(1.18) rotate(50deg); } }
@keyframes wave-out { from { opacity: .8; transform: scale(.35); } to { opacity: 0; transform: scale(1.75); } }
@keyframes box-reveal { from { opacity: 0; transform: translateY(24px) scale(.7) rotate(-5deg); } to { opacity: 1; transform: none; } }
@keyframes lid-open { from { transform: none; } to { transform: rotate(-22deg) translate(-10px,-19px); } }
@keyframes ticket-rise { from { opacity: 0; transform: translateY(58px) scale(.76); } to { opacity: 1; transform: translateY(0) rotate(3deg); } }
@keyframes particle-out { 0% { opacity: 0; transform: rotate(var(--r)) translateY(0) scale(.35); } 24% { opacity: .9; } 100% { opacity: 0; transform: rotate(var(--r)) translateY(-133px) scale(1); } }
@keyframes reward-aura { from { opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(-80deg); } to { opacity: .9; transform: translate(-50%,-50%) scale(1) rotate(26deg); } }
@keyframes kicker-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes card-arrive { 0% { opacity: 0; transform: translateY(58px) rotateX(14deg) scale(.88); } 62% { opacity: 1; transform: translateY(-4px) rotateX(-1deg) scale(1.006); } 100% { opacity: 1; transform: none; } }
@keyframes back-card-one { from { opacity: 0; transform: translateY(54px) rotate(-2deg) scale(.78); } to { opacity: 1; transform: rotate(-3deg); } }
@keyframes back-card-two { from { opacity: 0; transform: translateY(65px) rotate(3deg) scale(.76); } to { opacity: 1; transform: rotate(2deg); } }
@keyframes card-sweep { to { transform: translateX(130%); } }

.screen--win .win-copy,
.screen--win .reveal-flare,
.screen--win .reveal-wave,
.screen--win .reveal-box,
.screen--win .reveal-box i,
.screen--win .reveal-box b,
.screen--prize .reward-aura,
.screen--prize .prize-kicker,
.screen--prize .prize-card,
.screen--prize .prize-card::before,
.screen--prize .prize-stack__back { animation: none; }
.screen--win.is-active .win-copy { animation: win-copy-in .7s .08s cubic-bezier(.16,.86,.22,1) both; }
.screen--win.is-active .reveal-flare { animation: reveal-flare 1s ease both; }
.screen--win.is-active .reveal-wave { animation: wave-out 1.15s .08s cubic-bezier(.1,.7,.2,1) both; }
.screen--win.is-active .reveal-wave--two { animation-delay: .22s; }
.screen--win.is-active .reveal-box { animation: box-reveal .82s cubic-bezier(.16,.86,.24,1) both; }
.screen--win.is-active .reveal-box i { animation: lid-open .75s .16s cubic-bezier(.12,.9,.24,1) both; }
.screen--win.is-active .reveal-box b { animation: ticket-rise .75s .2s cubic-bezier(.12,.88,.24,1) both; }
.screen--prize.is-active .reward-aura { animation: reward-aura 1.4s cubic-bezier(.16,.82,.22,1) both; }
.screen--prize.is-active .prize-kicker { animation: kicker-in .55s .45s ease both; }
.screen--prize.is-active .prize-card { animation: card-arrive .76s cubic-bezier(.18,.86,.22,1) both; }
.screen--prize.is-active .prize-card::before { animation: card-sweep 1.1s .62s ease both; }
.screen--prize.is-active .prize-stack__back { animation: back-card-one .8s .18s cubic-bezier(.16,.84,.24,1) both; }
.screen--prize.is-active .prize-stack__back--two { animation-name: back-card-two; animation-delay: .1s; }

@media (min-width: 431px) { body { background: radial-gradient(circle at 50% 45%, #f8f6f2, #deddd9 68%); } .app { box-shadow: 0 0 0 1px rgba(36,31,54,.05), 0 40px 120px rgba(42,36,68,.14); } }
@media (max-height: 830px) {
  .screen { padding-top: calc(62px + env(safe-area-inset-top)); }
  .intro-copy h1 { font-size: 38px; }
  .intro-copy__body { margin-top: 9px; }
  .hold-stage { width: auto; height: min(58vw,56cqh,224px); }
  .haptic-hint { margin-top: 12px; }
  .prize-card { padding-top: 20px; padding-bottom: 16px; }
  .prize-card h2 { margin: 18px 0 20px; font-size: 26px; }
  .prize-card__rule { margin: 14px 0 12px; }
  .prize-card__tariff { margin-bottom: 13px; }
  .promo-code { min-height: 55px; }
  .button { min-height: 44px; }
}
@media (max-height: 700px) { .intro-copy h1 { font-size: 34px; } .intro-copy__body { font-size: 12px; } .touch-panel { top: 50%; } .hold-stage { width: auto; height: min(56vw,54cqh,185px); } .prize-kicker { display: none; } .prize-card h2 { font-size: 23px; margin: 14px 0 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .ambient, .energy-dots, .orbit { display: none; } .screen { transition: opacity .2s ease; transform: none; } }