*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.app-landing { min-height: 100vh; background: radial-gradient(circle at 50% 3%, #20172f 0, #14121e 42%, #111117 100%); color: #f6f7fb; }

/* Spin animation — these were inline transitions in the original React page. */
.app-landing__wheel, .app-landing__prize-content { transition: none; }
.app-landing.is-spinning .app-landing__wheel,
.app-landing.is-spinning .app-landing__prize-content { transition: transform 4.7s cubic-bezier(.11,.69,.12,1); }

/* Button reset (was a MUI Button in the original). */
.app-landing__shine-button { border: 0; cursor: pointer; font-size: 15px; font-family: inherit; letter-spacing: .3px; }
.app-landing__shine-button:disabled { opacity: .75; cursor: default; }

/* FAQ accordion (was MUI Accordion). */
.app-landing__faq details { border: 1px solid rgba(185,190,202,.13); border-radius: 12px; background: #131315; overflow: hidden; }
.app-landing__faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; font-weight: 700; }
.app-landing__faq summary::-webkit-details-marker { display: none; }
.app-landing__faq summary svg { width: 22px; height: 22px; color: #aaa7bc; transition: transform .2s ease; flex: 0 0 auto; }
.app-landing__faq details[open] summary svg { transform: rotate(180deg); }
.app-landing__faq .app-landing__faq-body { color: #aaa7bc; padding: 0 14px 14px; font-size: 14px; line-height: 1.5; }

/* Modal dialogs (were MUI Dialogs). */
.app-modal { position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(6,5,10,.72); }
.app-modal.is-open { display: flex; }
.app-modal__paper { position: relative; width: 100%; max-width: 420px; background: #19191f; border-radius: 24px; padding: 24px; text-align: center; background-image: none; }
.app-modal__paper--prize { border: 1px solid #5b34cd; }
.app-modal__paper--info { border: 1px solid rgba(185,190,202,.18); }
.app-modal__close { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #c4bed2; cursor: pointer; }
.app-modal__close:hover { background: #ffffff12; color: #fff; }
.app-modal__close svg { width: 22px; height: 22px; }
.app-modal__gift { width: 54px; height: 54px; color: #5b34cd; margin: 0 auto 8px; display: block; }
.app-modal__title { font-size: clamp(24px, 6vw, 30px); font-weight: 800; margin: 0; color: #f6f7fb; }
.app-modal__muted { color: #aaa7bc; margin: 8px 0 0; }
.app-modal__prize-title { color: #5b34cd; font-size: clamp(30px, 9vw, 52px); font-weight: 900; line-height: 1.2; margin: 8px 0 0; }
.app-modal__prize-detail { color: #aaa7bc; margin: 0 0 16px; }
.app-modal__link { display: inline-block; margin-top: 16px; color: #5b34cd; text-decoration: none; font-weight: 700; }
.app-modal__choices { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.app-modal__choices .app-landing__shine-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.app-modal__choices .app-landing__shine-button svg { width: 20px; height: 20px; flex: 0 0 auto; }
.app-landing__shell { max-width: 1080px; margin: 0 auto; padding: 18px 28px 24px; }
.app-landing__header { display: flex; justify-content: space-between; align-items: center; }
.app-landing__header img { width: 46px; height: 46px; object-fit: contain; }
.app-landing__language { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; background: #22202b; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; font-size: 13px; line-height: 1; }
.app-landing__language svg:first-child { width: 16px; height: 16px; }
.app-landing__language svg:last-child { width: 17px; height: 17px; margin-left: -3px; }
.app-landing__hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.app-landing__hero h1 { font-size: clamp(38px, 7vw, 64px); line-height: 1.05; font-weight: 900; margin: 14px 0 5px; }
.app-landing__hero h1 span { color: #5b34cd; }
.app-landing__intro { color: #c1bfd0; font-size: clamp(15px, 2vw, 18px); line-height: 1.35; }
.app-landing__sub { color: #aaa7bc; font-size: 15px; margin-top: 3px; }
.app-landing__wheel-wrap { --wheel-size: min(58vw, 430px); position: relative; width: var(--wheel-size); height: var(--wheel-size); margin: 28px auto 17px; }
.app-landing__wheel-rim { position: absolute; inset: 0; border-radius: 50%; padding: 18px; border: 3px solid #60449b; background: repeating-conic-gradient(from 0deg, #9c83d4 0 1deg, #1c1728 1deg 45deg); box-shadow: 0 0 0 8px #100e18 inset, 0 18px 35px #0008, 0 0 34px #5b34cd55; }
.app-landing__wheel { position: relative; width: 100%; height: 100%; border-radius: 50%; border: 5px solid #0e0d15; background: conic-gradient(from -30deg, #5b34cd 0deg 60deg, #17151d 60deg 120deg, #442493 120deg 180deg, #242034 180deg 240deg, #17151d 240deg 300deg, #35294f 300deg 360deg); box-shadow: inset 0 0 25px #0009; }
.app-landing__pointer { position: absolute; z-index: 4; left: 50%; top: -14px; transform: translateX(-50%); width: 0; height: 0; border-left: 19px solid transparent; border-right: 19px solid transparent; border-top: 36px solid #7847ec; filter: drop-shadow(0 3px 6px #000b); }
.app-landing__prize { position: absolute; top: 50%; left: 50%; width: 80px; height: 92px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; line-height: 1.15; pointer-events: none; }
.app-landing__prize-content { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.app-landing__prize svg { width: 26px; height: 26px; margin-bottom: 4px; }
.app-landing__prize strong { font-size: 17px; white-space: nowrap; }
.app-landing__prize span, .app-landing__prize small { color: #c5c0d2; font-size: 11px; }
.app-landing__prize .app-landing__no-prize { font-size: 39px; line-height: .85; }
.app-landing__wheel-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 28%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 2px solid #5b5080; background: radial-gradient(circle at 30% 15%,#333044,#0c0b11 75%); box-shadow: 0 8px 20px #0009; }
.app-landing__wheel-center img { width: 58%; height: 58%; object-fit: contain; }
.app-landing__shine-button { position: relative !important; overflow: hidden !important; width: min(290px, 100%); height: 48px; border-radius: 10px !important; color: #fff !important; background: linear-gradient(180deg,#7650f4,#5b34cd 65%,#4925b8) !important; box-shadow: inset 0 1px 0 #ffffff66, inset 0 -4px 7px #0003, 0 10px 22px #5b34cd38 !important; font-weight: 800 !important; }
.app-landing__shine-button::after { content: ''; position: absolute; top: -60%; left: -48%; height: 220%; width: 22%; transform: rotate(25deg); background: linear-gradient(90deg,transparent,#ffffffaa,transparent); animation: app-button-shine 3s ease-in-out infinite; pointer-events: none; }
@keyframes app-button-shine { 0%,55% { left: -48%; } 82%,100% { left: 130%; } }
.app-landing__secure { color: #918da4; font-size: 11px; margin-top: 9px; }
.app-landing__section { margin-top: 36px; }
.app-landing__section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.app-landing__section-heading h2 { font-size: 24px; font-weight: 800; }
.app-landing__review-controls { display: flex; gap: 5px; margin-left: auto; }
.app-landing__review-controls button { width: 34px; height: 34px; color: #c4bed2; border: 1px solid rgba(185,190,202,.18); border-radius: 9px; background: #22212a; }
.app-landing__review-controls button:hover { color: #fff; background: #302b3b; }
.app-landing__review-controls svg { width: 16px; height: 16px; }
.app-landing__reviews { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 20px) / 3); gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #5b34cd transparent; padding-bottom: 9px; }
.app-landing__review { display: flex; align-items: flex-start; gap: 12px; min-width: 0; min-height: 118px; padding: 14px; border: 1px solid rgba(185,190,202,.13); border-radius: 12px; background: #131315; box-shadow: inset 0 1px 0 #ffffff06; }
.app-landing__review { scroll-snap-align: start; }
.app-landing__review > div:last-child { min-width: 0; }
.app-landing__avatar { width: 58px; height: 58px; flex: 0 0 58px; border: 1px solid #3b3254; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(145deg,#2b2149,#15141d); color: #aa89ff; font-size: 25px; font-weight: 900; }
.app-landing__review strong { font-size: 13px; }
.app-landing__stars { color: #8b59ff; letter-spacing: 2px; font-size: 12px; }
.app-landing__review p { color: #b4b1c0; font-size: 13px; line-height: 1.45; margin-top: 5px; }
.app-landing__faq { display: grid; gap: 8px; }
.app-landing__footer { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #a4a0b4; }
.app-landing__footer > p { font-size: 12px; }
.app-landing__socials { display: flex; gap: 10px; }
.app-landing__socials a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(185,190,202,.13); background: #22212a; color: #e9e8ef; }
.app-landing__socials svg { width: 20px; height: 20px; }
.app-landing__back { color: #c4aaff; text-decoration: none; font-size: 13px; }
.app-landing__back:hover { color: #fff; }
.app-landing__copyright { align-self: stretch; text-align: center; border-top: 1px solid #ffffff13; padding-top: 14px; }
@media (max-width: 980px) { .app-landing__reviews { grid-auto-columns: calc((100% - 10px) / 2); } }
@media (max-width: 620px) { .app-landing__reviews { grid-auto-columns: min(82vw, 340px); gap: 10px; } .app-landing__review { min-height: 114px; padding: 15px; gap: 14px; } .app-landing__avatar { width: 56px; height: 56px; flex-basis: 56px; font-size: 24px; } .app-landing__review p { font-size: 14px; } }
@media (max-width: 520px) { .app-landing__shell { padding: 12px 16px 22px; } .app-landing__hero h1 { margin-top: 22px; } .app-landing__wheel-wrap { --wheel-size: min(88vw, 390px); } .app-landing__prize { width: 58px; height: 74px; } .app-landing__prize strong { font-size: 12px; } .app-landing__prize svg { width: 18px; height: 18px; } .app-landing__prize span, .app-landing__prize small { font-size: 9px; } .app-landing__section-heading { flex-wrap: wrap; column-gap: 10px; row-gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .app-landing__shine-button::after { animation: none; } }