/* PRIZEFEST v4 — five independent presentation themes.
   All game logic and the server API are shared, only appearance changes.
   Change DESIGN_THEME in src/config.php. No brand impersonation. */

/* The tokens below drive every main surface; layouts and illustrations further
   diverge in the five themed sections near the end of this file. */
body[data-theme]{
  --t-hero-a:#0a6ffc;--t-hero-b:#13aafa;--t-hero-text:#fff;--t-hero-sub:#e1f7ff;
  --t-page:#e7f7ff;--t-section:#e8f8ff;--t-ink:#07327a;--t-muted:#5475aa;
  --t-primary:#087afb;--t-primary-end:#0753d6;--t-primary-text:#fff;
  --t-accent:#fa208d;--t-pill:#0a57c5;--t-outline:#9fd9ff;--t-reel:#f2faff;
  --t-marker:#ffce35;--t-notice:#0842b1;--t-notice-text:#fff;
  --t-shadow:0 14px 36px rgba(8,80,172,.13);
  background:var(--t-page);color:var(--t-ink)
}
body[data-theme] .masthead{
  color:var(--t-hero-text);
  background:linear-gradient(125deg,var(--t-hero-a),var(--t-hero-b));
  box-shadow:inset 0 -1px rgba(255,255,255,.1)
}
body[data-theme] .masthead::before{
  opacity:.6;
  background-image:radial-gradient(circle at 22% 29%,rgba(255,255,255,.45) 1.5px,transparent 3px),radial-gradient(circle at 67% 78%,rgba(255,255,255,.36) 1px,transparent 2px);
  background-size:117px 79px,147px 103px
}
body[data-theme] .brand{color:var(--t-hero-text)}
body[data-theme] .edition{color:var(--t-hero-text);border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.13)}
body[data-theme] .eyebrow{color:var(--t-hero-sub)}
body[data-theme] .masthead h1{color:var(--t-hero-text)}
body[data-theme] .masthead h1 span{color:var(--t-hero-sub)}
body[data-theme] .masthead p{color:var(--t-hero-sub)}
body[data-theme] .announcement{background:var(--t-pill);color:#fff;box-shadow:none}
body[data-theme] .announcement-date{color:rgba(255,255,255,.82)}
body[data-theme] .play-section{
  background:linear-gradient(155deg,var(--t-section),var(--t-page) 83%);
}
body[data-theme] .play-section::before{opacity:.15}
body[data-theme] .section-intro h2{color:var(--t-ink)}
body[data-theme] .section-intro h2 span{color:var(--t-primary)}
body[data-theme] .section-eyebrow{color:var(--t-muted)}
body[data-theme] .step-indicator{background:#fff;color:var(--t-primary);border:1px solid var(--t-outline)}
body[data-theme] .sound-toggle{border-color:var(--t-outline);color:var(--t-primary)}
body[data-theme] .new-reel-frame{
  background:linear-gradient(150deg,#fff,#f9fdff);
  border:1px solid var(--t-outline);
  box-shadow:var(--t-shadow);
}
body[data-theme] .prizes-pill{background:var(--t-pill);box-shadow:none}
body[data-theme] .prizes-live{background:#f4faff;color:var(--t-primary)}
body[data-theme] .spin-window{
  background:var(--t-reel);border-color:var(--t-outline)
}
body[data-theme] .spin-window::before{background:linear-gradient(90deg,var(--t-reel),transparent)}
body[data-theme] .spin-window::after{background:linear-gradient(270deg,var(--t-reel),transparent)}
body[data-theme] .spin-slot{
  background:linear-gradient(#fff,#fffefa);border-color:var(--t-outline);
  box-shadow:0 7px 16px rgba(28,87,171,.055)
}
body[data-theme] .spin-window .spin-marker{border-color:var(--t-marker);filter:drop-shadow(0 1px 4px rgba(0,40,130,.26))}
body[data-theme] .spin-marker::before{border-top-color:var(--t-marker)}
body[data-theme] .spin-marker::after{border-bottom-color:var(--t-marker)}
body[data-theme] .reel-legend{color:var(--t-muted)}
body[data-theme] .start-button{
  color:var(--t-primary-text);
  background:linear-gradient(112deg,var(--t-primary),var(--t-primary-end));
  box-shadow:0 14px 26px color-mix(in srgb,var(--t-primary) 27%,transparent),inset 0 1px 0 rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.56)
}
body[data-theme] .start-arrow{background:rgba(255,255,255,.17)}
body[data-theme] .attempts{color:var(--t-ink)}
body[data-theme] .attempts strong{background:var(--t-pill);box-shadow:none}
body[data-theme] .quality-notice{background:var(--t-notice);color:var(--t-notice-text);box-shadow:var(--t-shadow)}
body[data-theme] .quality-notice p{color:var(--t-notice-text)}
body[data-theme] .demo-explanation{color:var(--t-muted)}
body[data-theme] .community-section{background:linear-gradient(var(--t-page),#fff)}
body[data-theme] .community-info h2{color:var(--t-ink)}
body[data-theme] .community-chat{box-shadow:var(--t-shadow)}
body[data-theme] .site-footer{background:var(--t-pill)}
body[data-theme] .flow-section{background:var(--t-page)}
body[data-theme] .flow-button,body[data-theme] .returning-action{
 background:linear-gradient(112deg,var(--t-primary),var(--t-primary-end));color:var(--t-primary-text)
}
body[data-theme] .flow-button.secondary{background:#fff;color:var(--t-primary);border-color:var(--t-outline)}
body[data-theme] .result-continue{background:linear-gradient(112deg,var(--t-primary),var(--t-primary-end));color:var(--t-primary-text)}
body[data-theme] .prize-card{border-color:var(--t-outline)}
body[data-theme] .welcome-cta{background:linear-gradient(112deg,var(--t-primary),var(--t-primary-end));color:var(--t-primary-text)}
body[data-theme] .welcome{background:rgba(3,20,57,.83)}
body[data-theme] .welcome h2 span{color:#a3ebff}
body[data-theme] .welcome-amount strong{color:#ffdb6d}

/* 1 — CLASSIC BRIGHT: sky-blue festival energy + turquoise / pink. */
body[data-theme="classic-bright"]{
  --t-hero-a:#006afc;--t-hero-b:#0baef6;--t-hero-text:#fff;--t-hero-sub:#d5fbff;
  --t-page:#dff5ff;--t-section:#d9efff;--t-ink:#074081;--t-muted:#396ab0;
  --t-primary:#ff2799;--t-primary-end:#ef087c;--t-pill:#0756c4;
  --t-outline:#b1defc;--t-reel:#eafaff;--t-notice:#0065dd;
  --t-shadow:0 16px 31px rgba(5,75,182,.17)
}
body[data-theme="classic-bright"] .masthead::before{
  background-image:url('/assets/img/clouds.svg');
  background-size:cover;background-position:center 30%;opacity:.65
}
body[data-theme="classic-bright"] .hero-star{color:#faff98}
body[data-theme="classic-bright"] .section-intro h2 span{color:#ff218d}
body[data-theme="classic-bright"] .new-reel-frame{border-radius:22px}
body[data-theme="classic-bright"] .start-button{border-radius:15px}
body[data-theme="classic-bright"] .prizes-pill{border-radius:999px}

/* 2 — PREMIUM LIGHT: pearl white, champagne gold, sapphire lettering. */
body[data-theme="premium-light"]{
  --t-hero-a:#edf4ff;--t-hero-b:#fdfaf3;--t-hero-text:#134ac3;--t-hero-sub:#3963a9;
  --t-page:#f8f8f4;--t-section:#f7f6f0;--t-ink:#183f82;--t-muted:#7c8496;
  --t-primary:#f3c64a;--t-primary-end:#ffdd76;--t-primary-text:#132954;--t-pill:#194bba;
  --t-outline:#e5d8bc;--t-reel:#fbf9f2;--t-marker:#c89a32;
  --t-notice:#fff;--t-notice-text:#2c4b7d;
  --t-shadow:0 17px 42px rgba(83,87,101,.13)
}
body[data-theme="premium-light"] .masthead::before{
  background-image:url('/assets/img/gold-ribbons.svg');background-size:cover;background-position:center;opacity:.75
}
body[data-theme="premium-light"] .masthead{border-bottom:1px solid #f0dfb0}
body[data-theme="premium-light"] .edition{border-color:#d3dcf2;background:rgba(255,255,255,.8)}
body[data-theme="premium-light"] .edition-pulse{background:#e5b54c}
body[data-theme="premium-light"] .hero-star{color:#e9c060}
body[data-theme="premium-light"] .section-intro h2 span{color:#c39539}
body[data-theme="premium-light"] .prizes-pill{background:linear-gradient(120deg,#c79d39,#ebc96b);color:#162e67;border-radius:8px}
body[data-theme="premium-light"] .new-reel-frame{border-radius:24px;box-shadow:0 15px 38px rgba(121,104,60,.1)}
body[data-theme="premium-light"] .start-button{box-shadow:0 12px 20px rgba(203,157,51,.19),inset 0 1px #fff7cb;border-radius:14px}
body[data-theme="premium-light"] .quality-notice{border:1px solid #e8dfcd}
body[data-theme="premium-light"] .quality-icon{color:#e0b44e}
body[data-theme="premium-light"] .spin-slot{background:linear-gradient(155deg,#fff,#fffbf3)}
body[data-theme="premium-light"] .spin-marker{border-left-width:4px}

/* 3 — SUMMER BEACH: tropical sea, warm sunshine, coral CTA, airy art. */
body[data-theme="summer-beach"]{
  --t-hero-a:#1e90f9;--t-hero-b:#4dcff3;--t-hero-text:#fff;--t-hero-sub:#e0ffff;
  --t-page:#e3fbf4;--t-section:#d3f4fa;--t-ink:#075271;--t-muted:#3b8aa3;
  --t-primary:#ff4e91;--t-primary-end:#f31975;--t-pill:#079aae;
  --t-outline:#a7e4df;--t-reel:#f1fdf6;--t-marker:#ffcd4f;
  --t-notice:#048b9a;--t-notice-text:#fff;
  --t-shadow:0 17px 38px rgba(8,139,160,.16)
}
body[data-theme="summer-beach"] .masthead::before{
  background-image:url('/assets/img/palms.svg');background-position:center;background-size:cover;opacity:1
}
body[data-theme="summer-beach"] .masthead{box-shadow:inset 0 -14px 30px rgba(0,172,201,.18)}
body[data-theme="summer-beach"] .section-intro h2 span{color:#ff458a}
body[data-theme="summer-beach"] .new-reel-frame{border-radius:26px}
body[data-theme="summer-beach"] .spin-window{border-radius:20px}
body[data-theme="summer-beach"] .prizes-pill{border-radius:999px;background:#009aa8}
body[data-theme="summer-beach"] .quality-notice{border-radius:22px}

/* 4 — CLEAN MINIMAL: airy white, cobalt structural lines, restrained motion. */
body[data-theme="clean-minimal"]{
  --t-hero-a:#fff;--t-hero-b:#eaf5ff;--t-hero-text:#074fd0;--t-hero-sub:#3767b0;
  --t-page:#f7fbff;--t-section:#fff;--t-ink:#113a80;--t-muted:#6b83ac;
  --t-primary:#0268ed;--t-primary-end:#0657cb;--t-pill:#095acf;
  --t-outline:#c6dcf7;--t-reel:#f7fbff;--t-marker:#1763db;
  --t-notice:#eaf3ff;--t-notice-text:#224a90;
  --t-shadow:0 11px 27px rgba(13,69,137,.065)
}
body[data-theme="clean-minimal"] .masthead::before{
  background-image:url('/assets/img/city.svg');background-size:cover;background-position:center;opacity:.58
}
body[data-theme="clean-minimal"] .masthead{border-bottom:1px solid #cbdffb}
body[data-theme="clean-minimal"] .edition{background:white;border-color:#d6e4f5}
body[data-theme="clean-minimal"] .section-intro h2 span{color:#0e66e2}
body[data-theme="clean-minimal"] .new-reel-frame{border-radius:14px;border-width:1px}
body[data-theme="clean-minimal"] .spin-window{border-radius:8px}
body[data-theme="clean-minimal"] .spin-slot{border-radius:8px}
body[data-theme="clean-minimal"] .start-button{border-radius:10px}
body[data-theme="clean-minimal"] .prizes-pill{border-radius:7px}
body[data-theme="clean-minimal"] .quality-notice{border:1px solid #d2e4fc;box-shadow:none}
body[data-theme="clean-minimal"] .quality-icon{color:#1467de}
body[data-theme="clean-minimal"] .play-section::before{opacity:.04}

/* 5 — CONFETTI CELEBRATION: blue-purple party, vivid pink & glossy highlights. */
body[data-theme="confetti-celebration"]{
  --t-hero-a:#0058e9;--t-hero-b:#653ce2;--t-hero-text:#fff;--t-hero-sub:#f1dfff;
  --t-page:#ece9ff;--t-section:#e7e5ff;--t-ink:#262f81;--t-muted:#746bb6;
  --t-primary:#ff19b7;--t-primary-end:#e80087;--t-pill:#4b2fc0;
  --t-outline:#cfc4ff;--t-reel:#f3efff;--t-marker:#ffce45;
  --t-notice:#4031b5;--t-notice-text:#fff;
  --t-shadow:0 18px 38px rgba(77,40,170,.16)
}
body[data-theme="confetti-celebration"] .masthead::before{
  background-image:url('/assets/img/confetti.svg');background-size:cover;background-position:center;opacity:1
}
body[data-theme="confetti-celebration"] .masthead{box-shadow:inset 0 -9px 25px rgba(20,18,112,.2)}
body[data-theme="confetti-celebration"] .section-intro h2 span{color:#ae30c9}
body[data-theme="confetti-celebration"] .new-reel-frame{border-radius:28px;box-shadow:0 14px 34px rgba(65,35,181,.18)}
body[data-theme="confetti-celebration"] .spin-slot{border-radius:15px}
body[data-theme="confetti-celebration"] .prizes-pill{border-radius:16px;background:linear-gradient(110deg,#4a36c2,#8a47df)}
body[data-theme="confetti-celebration"] .start-button{border-radius:999px;box-shadow:0 9px 24px rgba(235,12,150,.32)}
body[data-theme="confetti-celebration"] .quality-notice{border-radius:20px}

/* Mobile-first affordances and reduced motion on every theme. */
body[data-theme] button{touch-action:manipulation}
body[data-theme] :is(button,a,input):focus-visible{outline:3px solid var(--t-accent);outline-offset:4px}
@media(max-width:600px){
  body[data-theme] .masthead .topbar{min-height:48px}
  body[data-theme] .masthead-content{min-height:82px;padding:0 0 10px}
  body[data-theme] .play-section{padding:17px 0 28px}
  body[data-theme] .section-intro{margin-bottom:17px}
  body[data-theme] .new-reel-frame{padding:7px 7px 10px}
  body[data-theme] .spin-window{height:128px}
  body[data-theme] .spin-slot{min-height:114px}
  body[data-theme] .start-button{min-height:59px;margin-top:12px}
  body[data-theme] .attempts{margin:11px 0 6px}
  body[data-theme] .quality-notice{min-height:52px}
  body[data-theme] .demo-explanation{margin-top:7px}
}
@media(prefers-reduced-motion:reduce){
  body[data-theme] *,body[data-theme] *::before,body[data-theme] *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Shared themed details for deeper screens: result modals, fulfillment mockups and chat. */
body[data-theme] .flow-card{border-color:var(--t-outline);box-shadow:var(--t-shadow)}
body[data-theme] .flow-top-icon{background:var(--t-reel)}
body[data-theme] .flow-top strong{color:var(--t-ink)}
body[data-theme] .flow-top p{color:var(--t-muted)}
body[data-theme] .prize-card{background:var(--t-reel)}
body[data-theme] .prize-card .prize-count{background:var(--t-pill)}
body[data-theme] .flow-aside{background:var(--t-pill);color:#fff}
body[data-theme] .community-chat-header{background:var(--t-pill)}
body[data-theme] .returning-card{background:linear-gradient(160deg,#fff,var(--t-page));color:var(--t-ink)}
body[data-theme] .returning-overline{color:var(--t-primary)}
body[data-theme] .returning-time{background:var(--t-reel)}
body[data-theme] .returning-time strong{color:var(--t-ink)}
body[data-theme] .result-backdrop{background:rgba(5,23,67,.88)}
body[data-theme] .result-icon{box-shadow:0 0 48px 12px color-mix(in srgb,var(--t-marker) 33%,transparent)}
body[data-theme="premium-light"] .result-icon{background:linear-gradient(145deg,#fffae9,#dfc079)}
body[data-theme="summer-beach"] .result-icon{background:linear-gradient(145deg,#fdfff2,#79e4d3)}
body[data-theme="clean-minimal"] .result-icon{background:linear-gradient(145deg,#fff,#cfe5ff)}
body[data-theme="confetti-celebration"] .result-icon{background:linear-gradient(145deg,#ffeffe,#dcc4ff)}
body[data-theme="premium-light"] .brand-mark svg path,
body[data-theme="clean-minimal"] .brand-mark svg path{fill:var(--t-hero-text)}
body[data-theme="premium-light"] .brand-mark svg circle,
body[data-theme="clean-minimal"] .brand-mark svg circle{stroke:var(--t-hero-text)}
body[data-theme="premium-light"] .hero-illustration{filter:drop-shadow(0 9px 21px rgba(151,125,58,.14))}
body[data-theme="clean-minimal"] .hero-illustration{opacity:.5}