/* PRIZEFEST 3.0 — mobile-first, compact first screen and a fresh premium visual language.
   No external resources. All key interactions fit the first mobile viewport. */
:root{--ink:#18233d;--blue:#335ff8;--blue-dark:#1e3588;--shadow:0 20px 50px rgba(34,55,123,.15)}
body{background:#f5f6ff;letter-spacing:-.009em}
.container{width:min(100% - 30px,1000px)}
.demo-ribbon{background:#080f29;color:#b6c5ff;border-bottom:1px solid #283662;min-height:26px;letter-spacing:.075em}
.masthead{background:radial-gradient(ellipse at 72% 8%,rgba(106,100,245,.28),transparent 50%),linear-gradient(121deg,#101a45,#142965 61%,#302678);box-shadow:inset 0 -1px rgba(255,255,255,.09)}
.masthead::before{opacity:.34;background-image:radial-gradient(circle,#ecd29a 1px,transparent 2px);background-size:110px 70px;background-position:15px 25px}
.masthead::after{display:none}
.topbar{min-height:70px}
.brand{font-size:clamp(20px,3vw,25px);font-weight:950;letter-spacing:-.055em}
.brand-mark{width:30px;height:30px;flex-basis:30px;color:#f6cb6b}
.edition{font-size:10px;letter-spacing:.04em;padding:8px 10px;background:rgba(255,255,255,.07)}
.masthead-content{min-height:128px;padding:5px 0 22px}
.masthead h1{margin:6px 0 5px;font-size:clamp(36px,5vw,53px);line-height:1.04;letter-spacing:-.058em}
.masthead h1 span{display:inline;color:#f8d586}
.masthead p{font-size:13px;line-height:1.4;color:#c6d2f2;max-width:450px}
.eyebrow{font-size:10px;letter-spacing:.11em;color:#bdcbff}
.eyebrow-star{font-size:14px;color:#fbd681}
.hero-illustration{transform:scale(.54);transform-origin:100% 50%;top:-60px;right:-15px;opacity:.85}
.announcement{background:#111b48;box-shadow:none}
.announcement-inner{min-height:31px;font-size:11px;color:#e3e8ff}
.announcement-good,.announcement-date{font-size:11px}
.play-section{padding:30px 0 35px;background:radial-gradient(ellipse at 51% 0,#eff3ff,transparent 55%),linear-gradient(#e9edff,#f8f8ff)}
.play-section::before{opacity:.3;background-image:radial-gradient(#9baaff 1.5px,transparent 2px);background-size:75px 76px}
.play-container{width:min(100% - 30px,780px)}
.section-intro{width:100%;display:flex;align-items:end;justify-content:space-between;text-align:left;gap:15px;margin:0 0 23px}
.section-eyebrow{color:#6a72a6;letter-spacing:.13em;font-size:10px}
.section-intro h2{font-size:clamp(27px,4vw,39px);letter-spacing:-.047em;margin:3px 0 0;line-height:1.1;color:#17254f}
.section-intro h2 span{color:#5563e9}
.play-tools{display:flex;align-items:center;gap:9px}
.step-indicator{font-size:10px;font-weight:850;letter-spacing:.055em;background:#f0e8fc;color:#6350b1;border-radius:999px;padding:8px 10px;white-space:nowrap}
.sound-toggle{display:grid;place-items:center;width:35px;height:35px;flex:0 0 35px;border-radius:50%;border:1px solid #d0d8fc;background:white;color:#273d94;box-shadow:0 4px 12px rgba(25,35,104,.09);font-size:21px}
.new-reel-frame{padding:9px 13px 13px;border:1px solid #cad4fb;background:linear-gradient(155deg,#fff,#f8f9ff);box-shadow:0 20px 38px rgba(21,35,107,.12),0 0 0 5px rgba(255,255,255,.37);border-radius:23px}
.prizes-head{margin:-23px 2px 8px}
.prizes-pill{background:linear-gradient(110deg,#192854,#243d8d);border-radius:10px;padding:9px 14px;font-size:13px;box-shadow:0 7px 18px rgba(22,29,89,.18)}
.prizes-live{color:#586cd9}
.spin-window{height:166px;border-radius:14px;border:1px solid #dce2fb;background:linear-gradient(140deg,#eff3ff,#fff,#eeebff)}
.spin-window::before{background:linear-gradient(90deg,#edf2ff,transparent)}
.spin-window::after{background:linear-gradient(270deg,#edecff,transparent)}
.spin-slot{background:linear-gradient(165deg,#fff,#f8faff);border:1px solid #e2e7f8;box-shadow:0 7px 14px rgba(21,29,90,.07)}
.spin-window .spin-marker{background:#ffc65d;box-shadow:0 0 0 2px #fff,0 0 12px rgba(249,187,64,.7)}
.reel-legend{color:#717fa4}
.start-button{position:relative;isolation:isolate;overflow:hidden;width:min(100%,620px);min-height:69px;margin-top:17px;border-radius:17px;background:linear-gradient(103deg,#385eff 0%,#4652de 62%,#6652dc 100%);box-shadow:0 10px 19px rgba(76,71,205,.24),inset 0 1px 0 rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.52);font-size:clamp(18px,3.2vw,23px);transition:transform .2s,filter .2s,box-shadow .2s}
.start-button:not(:disabled)::before{content:'';position:absolute;z-index:-1;inset:-5% auto -5% -100%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.21),transparent);transform:skewX(-25deg);animation:sweep 5.8s ease-in-out infinite}
@keyframes sweep{0%,65%{left:-100%}100%{left:140%}}
.start-button:active:not(:disabled){transform:scale(.98)}
.start-arrow{width:39px;height:39px;flex:0 0 39px;background:rgba(255,255,255,.18);font-size:24px}
.attempts{margin:14px 0 10px;color:#354474;font-size:16px;font-weight:650}
.attempts strong{background:#1b2453;box-shadow:0 3px 0 #cad0f2;margin:0 3px;width:36px;height:36px;font-size:18px}
.quality-notice{min-height:68px;border-radius:15px;padding:13px 19px;background:linear-gradient(130deg,#141f4e,#222c64);max-width:540px;box-shadow:none}
.quality-icon{font-size:37px;color:#eecb7b}
.quality-notice p{font-size:13px;color:#d5dcf9}
.demo-explanation{font-size:11px!important;line-height:1.4;text-align:center;color:#7180a3;max-width:520px}
/* Results look like a new product surface, not copied from reference mockups. */
.result-backdrop{background:rgba(4,8,29,.88)}
.result-dialog{max-width:540px}
.result-icon{background:radial-gradient(circle at 25% 25%,#fff9d1,#f5cf7c);border:6px solid rgba(255,255,255,.45)}
.result-icon.miss-icon{background:linear-gradient(145deg,#ffe585,#efa54a)}
.result-continue,.flow-button{background:linear-gradient(108deg,#435cf3,#364cc2);border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 22px rgba(62,71,171,.17)}
.flow-section{background:linear-gradient(160deg,#eeefff,#f8f9ff)}
.flow-card{box-shadow:0 20px 60px rgba(29,40,112,.1)}
.flow-aside{background:#1e2860}
.community-section{background:linear-gradient(180deg,#f7f8ff,#e8eeff)}
.site-footer{background:#111b43}
/* The greeting is compact while the real wheel is visible behind it. */
.welcome{background:rgba(6,10,33,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.welcome::before{background:radial-gradient(ellipse at 50% 36%,rgba(109,89,247,.35),transparent 55%)}
.welcome-dialog{max-width:530px;padding:16px 14px}
.welcome-kicker{font-size:10px;letter-spacing:.075em;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.09)}
.welcome-brand{margin:11px 0 14px;font-size:clamp(28px,7vw,43px);color:#fff;letter-spacing:-.065em}
.welcome h2{font-size:clamp(30px,6.5vw,48px);margin:0 0 12px}
.welcome h2 span{color:#f9d88f}
.welcome-text{font-size:clamp(14px,2vw,18px);line-height:1.48}
.welcome-amount{margin:18px auto;gap:4px}
.welcome-amount strong{color:#ffe0a2;font-size:clamp(26px,6vw,38px)}
.welcome-amount > div{font-size:17px}
.welcome-cta{min-height:64px;background:linear-gradient(105deg,#6d6afa,#405ef5);border:1px solid rgba(255,255,255,.27);font-size:20px;border-radius:13px;padding:9px 10px 9px 20px;box-shadow:0 14px 35px rgba(33,36,124,.34)}
.welcome-cta span:last-child{height:43px;flex-basis:43px;font-size:25px}
.welcome-footnote{color:#b8c2e7;font-size:11px;line-height:1.5}
/* Return visitor: accessible, usable even on narrow screens. */
.returning-backdrop{position:fixed;inset:0;z-index:2300;display:grid;place-items:center;padding:18px;background:rgba(6,12,31,.86);backdrop-filter:blur(10px)}
.returning-card{width:min(100%,435px);background:linear-gradient(160deg,#fff,#f1f3ff);color:#1f2d59;border:1px solid #fff;border-radius:25px;padding:30px 24px 22px;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.25)}
.returning-symbol{margin:0 auto 15px;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:#e6f8ee;color:#238661;font-size:38px;font-weight:900;border:6px solid white;box-shadow:0 8px 19px rgba(25,85,72,.13)}
.returning-overline{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#586cb6}
.returning-card h2{font-size:clamp(24px,5.6vw,32px);line-height:1.11;letter-spacing:-.045em;margin:12px 0}
.returning-card p{font-size:14px;line-height:1.65;color:#65728d}
.returning-time{margin:19px 0;padding:14px;border-radius:14px;background:#e6eafd;font-size:13px}
.returning-time strong{display:block;font-size:20px;color:#283a9a;margin-top:4px}
.returning-action{width:100%;min-height:54px;display:flex;align-items:center;justify-content:center;gap:15px;border:0;border-radius:12px;color:white;background:linear-gradient(105deg,#4163ed,#4242c3);font-size:16px;font-weight:800}
.returning-card small{display:block;color:#8990aa;margin-top:15px;line-height:1.4;font-size:10px}
#receipt-email{font-family:inherit;font-weight:500;letter-spacing:0;font-size:16px}
/* Main fold: reel + CTA visible without second scroll on common phones. */
@media(max-width:600px){
  .container{width:calc(100% - 26px)}
  .demo-ribbon{min-height:23px;font-size:7.2px;letter-spacing:.045em;padding:3px 0}
  .topbar{min-height:50px}
  .brand{font-size:20px;gap:6px}
  .brand-mark{width:24px;height:24px;flex-basis:24px}
  .edition{font-size:8px;padding:6px 9px}
  .masthead-content{min-height:78px;padding:2px 0 14px;align-items:center}
  .masthead-copy{max-width:100%}
  .eyebrow{font-size:8px;gap:3px}
  .masthead h1{font-size:clamp(27px,7.8vw,36px);margin:4px 0;max-width:calc(100vw - 90px)}
  .masthead p{font-size:10px;line-height:1.33;max-width:calc(100vw - 105px)}
  .hero-illustration{transform:scale(.28);transform-origin:100% 15%;right:-55px;top:0;opacity:.75}
  .announcement-inner{min-height:28px;gap:6px}
  .announcement-good,.announcement-date{font-size:9px;gap:2px}
  .play-section{padding:21px 0 32px}
  .play-container{width:calc(100% - 26px)}
  .section-intro{margin-bottom:20px;gap:4px}
  .section-eyebrow{font-size:8px}
  .section-intro h2{font-size:clamp(24px,6.9vw,32px);white-space:nowrap}
  .play-tools{gap:5px}
  .step-indicator{font-size:9px;padding:7px 7px}
  .sound-toggle{width:30px;height:30px;flex-basis:30px;font-size:18px}
  .new-reel-frame{border-radius:16px;padding:7px 7px 10px;box-shadow:0 12px 26px rgba(16,39,98,.11)}
  .prizes-head{margin:-21px 3px 8px}
  .prizes-pill{font-size:11px;padding:7px 11px;border-radius:10px}
  .prizes-live{font-size:7px}
  .spin-window{height:134px;border-radius:10px}
  .spin-track{padding:5px 0;gap:7px}
  .spin-slot{width:106px;min-width:106px;flex-basis:106px;gap:1px;min-height:121px;border-radius:10px}
  .spin-slot .cross{font-size:63px}
  .spin-slot .slot-symbol{height:65px;min-height:65px;font-size:43px}
  .spin-slot .slot-symbol.cash-symbol{font-size:30px}
  .spin-slot strong{font-size:9px;line-height:1.25}
  .spin-slot .gpu-graphic{transform:scale(.6)}
  .spin-slot .phone-graphic{transform:scale(.75)}
  .reel-legend{font-size:8px;padding-top:6px}
  .start-button{min-height:62px;margin-top:15px;border-radius:14px;padding:10px 12px 10px 20px;gap:7px;box-shadow:0 8px 19px rgba(67,72,193,.22)}
  .start-arrow{height:36px;width:36px;flex-basis:36px}
  .attempts{margin:12px 0 5px;font-size:15px}
  .attempts strong{width:32px;height:32px;font-size:18px}
  .quality-notice{min-height:55px;padding:11px 14px;margin-top:4px;gap:10px}
  .quality-icon{font-size:28px}
  .quality-notice p{font-size:11px;line-height:1.35}
  .demo-explanation{font-size:10px!important;margin-top:9px}
  .welcome-brand{font-size:33px;margin:10px 0 11px}
  .welcome h2{font-size:clamp(30px,8vw,39px);margin-bottom:11px}
  .welcome-text{font-size:14px;max-width:330px}
  .welcome-amount{margin:17px auto 15px}
  .welcome-amount > span{font-size:9px}
  .welcome-amount > div{font-size:15px}
  .welcome-amount strong{font-size:30px}
  .welcome-cta{min-height:60px;font-size:18px}
  .welcome-footnote{font-size:10px}
  .returning-card{padding:25px 17px 19px}
}
@media(max-width:355px){
  .edition{display:none}
  .hero-illustration{display:none}
  .masthead h1{max-width:100%}
  .masthead p{max-width:100%}
  .section-intro h2{font-size:24px}
  .step-indicator{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.start-button:not(:disabled)::before{animation:none}}