/* Halloween theme for the real campaign page (index.html). Active only with <html data-theme="halloween">:
   remove the attribute (and this stylesheet / halloween.js / the 3D stage block) to return to the everyday page.
   Prizes, odds, coupons, limits and the backend are untouched — this file only restyles. */

/* ---------- 3D stage (stage-3d.js) inside the wheel zone ---------- */
.hw-playground { position: relative; z-index: 5; width: 100%; height: 560px; --bleed: 140px; } /* --bleed: the 3D canvas renders this far past the box */
.hw-playground .stage { position: absolute; inset: calc(-1 * var(--bleed)); z-index: 1; pointer-events: none; } /* drawn over everything around it; the box itself takes the clicks */
.hw-playground .stage canvas { display: block; width: 100%; height: 100%; touch-action: pan-y pinch-zoom; }
.hw-playground .wheel-load-status { position: absolute; inset: var(--bleed); display: grid; place-items: center; font-size: 13px; color: #c3b2d6; pointer-events: none; }
.hw-playground .wheel-load-status[hidden] { display: none; }
.hw-playground:not(.hw-ready) .speech, .hw-playground:not(.hw-ready) .cat-card, .hw-playground:not(.hw-ready) .wheel-view-controls { visibility: hidden; }
.hw-playground .speech { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s; background: #fff3e2; border: 1px solid #f0b26b; color: #3a2433; border-radius: 14px; padding: 9px 12px; font-size: 12px; box-shadow: 0 4px 0 #f0b26b55, 0 0 18px #f58a2a33; white-space: nowrap; will-change: transform; }
.hw-playground .speech.placed { opacity: 1; }
.hw-playground .speech:after { content: ''; position: absolute; left: var(--tail, 55%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: #fff3e2; border-right: 1px solid #f0b26b; border-bottom: 1px solid #f0b26b; transform: rotate(45deg); }
.hw-playground .speech.beside:after { display: none; }
.hw-playground .speech span, .hw-playground.is-spinning .speech { color: #c95f0d; }
.hw-playground .cat-card { position: absolute; bottom: 8px; z-index: 4; text-align: center; }
.hw-playground .orange-card { left: 6px; } .hw-playground .tabby-card { right: 6px; }
.hw-playground .cat-button { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 6px; border: 1px solid #4a3866; border-radius: 16px; background: #2a1d3de6; color: #f4e9dc; box-shadow: 0 3px 0 #120c1a; font: inherit; text-align: left; transition: transform .2s, border-color .2s, box-shadow .2s; }
.hw-playground .cat-button:hover { transform: translateY(-2px) rotate(-1.5deg); border-color: #f58a2a; box-shadow: 0 3px 0 #120c1a, 0 0 18px #f58a2a55; }
.hw-playground .cat-button i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #3d2a56; color: #f58a2a; font-size: 13px; font-style: normal; }
.hw-playground .cat-button:hover i { animation: wobble .6s ease-in-out infinite; }
.hw-playground .cat-button strong { font-weight: 600; font-size: 13px; }
.hw-playground .cat-button strong span { display: block; font-size: 7px; letter-spacing: 1.6px; color: #f58a2a; margin-top: 2px; }
.hw-playground .model-status { display: block; font-size: 9px; color: #b9a8cc; margin-top: 3px; }
.hw-playground .model-status[hidden] { display: block; visibility: hidden; }
.hw-playground .wheel-view-controls { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 4; }
.hw-playground .wheel-view-controls button { font: inherit; font-size: 11px; border: 1px solid #4a3866; padding: 5px 11px; border-radius: 20px; color: #d8c8e8; background: #241a33; }
.hw-playground .wheel-view-controls button[aria-pressed="true"] { color: #f58a2a; border-color: #f58a2a; }
.hw-playground .heart-pop { position: absolute; z-index: 3; font-size: 32px; line-height: 1; pointer-events: none; translate: -50% -100%; animation: heart 1.1s ease-out forwards; filter: drop-shadow(0 0 8px #f58a2a); }
.hw-playground.is-spinning .stage { filter: drop-shadow(0 0 30px #a985ff55); }
@keyframes heart { to { transform: translateY(-90px) rotate(15deg); opacity: 0; } }
@media (max-width: 959px) { .hw-playground { height: 500px; } }
@media (max-width: 480px) { .hw-playground { height: 410px; --bleed: 60px; } .hw-playground .cat-button strong { font-size: 11px; } .hw-playground .cat-button strong span { font-size: 6px; letter-spacing: 1px; } .hw-playground .speech { font-size: 10px; padding: 7px 9px; } }

/* ---------- Night palette for the page's own components ---------- */
[data-theme="halloween"] {
  --bg-1: #1b1326; --bg-2: #150f1f; --bg-3: #221832;
  --pink-50: #2a1d3d; --pink-100: #3b2a55; --pink-200: #5a3c7a; --pink-300: #f0a24d; --pink-500: #f58a2a; --pink-700: #ffb066; --pink-900: #ffe2c2;
  --gold-300: #4a3866; --gold-400: #c9a2ff; --gold-500: #a985ff; --gold-700: #d9c2ff;
  --ink: #f4e9dc; --ink-2: #c3b2d6;
  --shadow-pink: 0 20px 50px rgba(0,0,0,.45), 0 0 40px rgba(169,133,255,.12);
  --shadow-gold: 0 18px 40px rgba(245,138,42,.3);
  --serif: 'Prompt', Georgia, serif; --sans: 'Prompt', system-ui, sans-serif;
  color-scheme: dark;
}
[data-theme="halloween"] body { background: radial-gradient(900px 600px at 50% 18%, #3b2a5c 0, transparent 65%), linear-gradient(#1b1326, #150f1f 60%, #1b1326); }
[data-theme="halloween"] :is(.blob, .sparkle) { display: none; } /* the everyday floating decorations: not rendered (halloween.js draws the night sky) */
[data-theme="halloween"] :is(header.top, .steps, .prize-list, .terms, footer.bottom) { background: rgba(34,24,50,.72); border-color: rgba(169,133,255,.2); }
[data-theme="halloween"] .hero { background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } /* see-through: the haunted sky and the 3D stage show behind and around it */
[data-theme="halloween"] .hero-copy .eyebrow { background: linear-gradient(90deg, #3b2a55, #2a1d3d); border-color: rgba(245,138,42,.4); }
[data-theme="halloween"] .pill { background: linear-gradient(135deg, #3b2a55, #2a1d3d); border-color: rgba(169,133,255,.45); color: #d9c2ff; }
[data-theme="halloween"] .step { background: linear-gradient(180deg, #2a1d3d, #22182f); border-color: rgba(169,133,255,.2); }
[data-theme="halloween"] .step:hover { box-shadow: 0 14px 30px rgba(0,0,0,.4), 0 0 22px rgba(169,133,255,.25); }
[data-theme="halloween"] .step::after { background: radial-gradient(circle, rgba(245,138,42,.25), transparent 70%); }
[data-theme="halloween"] .prize-chip { background: #2a1d3d; border-color: rgba(169,133,255,.22); }
[data-theme="halloween"] .prize-chip .emoji { background: linear-gradient(135deg, #3b2a55, #2a1d3d); }
[data-theme="halloween"] .prize-chip.grand { background: linear-gradient(135deg, #3a2a14, #5a3e14); border-color: rgba(245,160,74,.6); color: #ffd36b; }
[data-theme="halloween"] .prize-chip.grand .emoji { background: linear-gradient(135deg, #6b4a1a, #3a2a14); color: #ffd36b; }
[data-theme="halloween"] .terms-agree { background: rgba(42,29,61,.85); border-color: rgba(245,138,42,.3); }
[data-theme="halloween"] .terms-agree:hover { background: #2f2143; }
[data-theme="halloween"] .terms-agree input[type="checkbox"] { background: #1b1326; }
[data-theme="halloween"] .spin-btn { background: linear-gradient(135deg, #ffb347, #f07d1f 55%, #c9580c); color: #2a1100; box-shadow: 0 10px 26px rgba(245,138,42,.45), inset 0 -3px 0 rgba(0,0,0,.18); }
[data-theme="halloween"] .spin-btn:not(:disabled) { animation: glow 2.4s ease-in-out infinite; }
[data-theme="halloween"] .spin-btn:hover:not(:disabled) .ic { display: inline-block; animation: wobble .5s ease-in-out infinite; }
[data-theme="halloween"] .hist-card { background: #2a1d3d; }
[data-theme="halloween"] .hist-card.expired { background: #221a2c; border-color: rgba(255,255,255,.08); }
[data-theme="halloween"] .hist-icon { background: linear-gradient(135deg, #3b2a55, #5a3c7a); }
[data-theme="halloween"] .hist-card.expired .hist-icon { background: #33293f; color: #9a8fae; }
[data-theme="halloween"] .hist-card.expired .hist-code, [data-theme="halloween"] .hist-card.expired .hist-view-btn { color: #9a8fae; }
[data-theme="halloween"] .hist-view-btn { background: #2a1d3d; }
[data-theme="halloween"] .hist-view-btn:hover, [data-theme="halloween"] .hist-card.expired .hist-view-btn:hover { background: #3b2a55; }
[data-theme="halloween"] .hist-badge.valid { background: #183a2b; color: #6fdcaa; }
[data-theme="halloween"] .hist-badge.expired { background: #3a1f24; color: #f0a0a0; }
[data-theme="halloween"] footer.bottom .social a { background: #2a1d3d; }
[data-theme="halloween"] .modal-scrim { background: rgba(12,8,18,.72); }
[data-theme="halloween"] .modal { background: linear-gradient(180deg, #2a1d3d, #1e1530); border-color: rgba(169,133,255,.3); box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 40px rgba(245,138,42,.2); }
[data-theme="halloween"] .modal::before { background: radial-gradient(circle, rgba(245,138,42,.3), transparent 65%); }
[data-theme="halloween"] .modal-icon .ic-bubble { background: linear-gradient(135deg, #ffb347, #f07d1f); box-shadow: 0 14px 26px rgba(245,138,42,.4), inset 0 0 0 3px #1b1326, inset 0 0 0 5px rgba(169,133,255,.6); }
[data-theme="halloween"] .modal-icon.grand .ic-bubble { background: linear-gradient(135deg, #c9a2ff, #7d55b5); box-shadow: 0 14px 26px rgba(169,133,255,.5), inset 0 0 0 3px #1b1326, inset 0 0 0 5px rgba(245,138,42,.6); }
[data-theme="halloween"] .modal-scrim.open .modal-icon .ic-bubble { animation: flicker 2.5s .4s infinite; }
[data-theme="halloween"] .modal .prize-name.grand { background: linear-gradient(100deg, #ffd36b, #fff3c0, #f58a2a); -webkit-background-clip: text; background-clip: text; background-size: 200% auto; }
[data-theme="halloween"] .coupon { background: #241a34; }
[data-theme="halloween"] .coupon .label { background: linear-gradient(135deg, #3b2a55, #241a34); }
[data-theme="halloween"] .btn.primary { background: linear-gradient(135deg, #ffb347, #f07d1f 55%, #c9580c); color: #2a1100; box-shadow: 0 10px 22px rgba(245,138,42,.35); }
[data-theme="halloween"] .btn.ghost { background: #2a1d3d; border-color: rgba(245,138,42,.4); }
[data-theme="halloween"] .btn.ghost:hover { background: #3b2a55; }
[data-theme="halloween"] .fb-page-card { background: #2a1d3d; border-color: rgba(169,133,255,.25); }
[data-theme="halloween"] .incognito-steps { background: #241a34; border-color: rgba(169,133,255,.25); }
[data-theme="halloween"] :is(a, button):focus-visible { outline-color: #f5a04a; }
[data-theme="halloween"] .hero-copy h1 .accent { text-shadow: none; filter: drop-shadow(0 0 18px rgba(245,138,42,.35)); }
@keyframes glow { 50% { box-shadow: 0 10px 26px rgba(245,138,42,.45), 0 0 40px rgba(245,138,42,.6), 0 0 80px rgba(169,133,255,.35); } }

/* ---------- Halloween effects (halloween.js): haunted sky, cursor, trail, intro, spooky actions ---------- */
[data-theme="halloween"] {
  --pumpkin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 8c0-3 2-5 4-5' stroke='%235b6b2a' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='10' cy='19' rx='7' ry='9' fill='%23c9580c'/%3E%3Cellipse cx='22' cy='19' rx='7' ry='9' fill='%23c9580c'/%3E%3Cellipse cx='16' cy='19' rx='7.5' ry='10' fill='%23f07d1f'/%3E%3Cpath d='M9 17l3-4 3 4zM17 17l3-4 3 4zM9 22q7 5 14 0q-7 2-14 0z' fill='%23ffd24a'/%3E%3C/svg%3E") 16 18;
  --pumpkin-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='-4 -4 40 40'%3E%3Ccircle cx='16' cy='18' r='17' fill='%23ffd24a' fill-opacity='.35'/%3E%3Cpath d='M16 8c0-3 2-5 4-5' stroke='%235b6b2a' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='10' cy='19' rx='7' ry='9' fill='%23d9620f'/%3E%3Cellipse cx='22' cy='19' rx='7' ry='9' fill='%23d9620f'/%3E%3Cellipse cx='16' cy='19' rx='7.5' ry='10' fill='%23ff8a24'/%3E%3Cpath d='M9 17l3-4 3 4zM17 17l3-4 3 4zM9 22q7 5 14 0q-7 2-14 0z' fill='%23fff3a0'/%3E%3C/svg%3E") 20 22;
}
[data-theme="halloween"], [data-theme="halloween"] body { cursor: var(--pumpkin), auto; }
[data-theme="halloween"] :is(a, button, [role="button"], label) { cursor: var(--pumpkin-hover), pointer; }
.hw-bg, .hw-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hw-flash { position: fixed; inset: 0; z-index: 8999; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 70% 10%, #f3eeff, #b9a1ff88 40%, transparent 75%); }
.hw-flash.on { animation: bolt .7s ease-out; }
@keyframes bolt { 0%, 100% { opacity: 0; } 8% { opacity: .75; } 16% { opacity: .1; } 24% { opacity: .55; } }
.hw-intro { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 55%, #2c1d44, #0b0711 75%); cursor: var(--pumpkin-hover), pointer; transition: opacity .9s, visibility .9s; }
.hw-intro.out { opacity: 0; visibility: hidden; }
.hw-intro p { position: relative; margin: 0; text-align: center; color: #fff1dc; font: 400 clamp(40px, 8vw, 92px)/1.1 var(--serif); letter-spacing: -1px; animation: haunt 2.6s ease-out both; }
.hw-intro strong { font-weight: 400; color: #f58a2a; text-shadow: 0 0 30px #f58a2a99; }
.hw-intro span { display: block; margin-top: 14px; font: 500 15px var(--sans); color: #cdbbe6; letter-spacing: .5px; }
.hw-intro-fog { position: absolute; inset: -20%; background: radial-gradient(ellipse at 30% 70%, #9b6ee044, transparent 45%), radial-gradient(ellipse at 70% 40%, #6fbf8a33, transparent 45%); animation: fog 6s ease-in-out infinite alternate; }
@keyframes haunt { 0% { opacity: 0; filter: blur(14px); transform: scale(.92); } 25% { opacity: 1; filter: blur(0); } 32% { opacity: .35; } 38% { opacity: 1; } 46% { opacity: .6; } 52%, 100% { opacity: 1; transform: none; } }
@keyframes fog { to { transform: translate(6%, -4%) scale(1.1); } }
@keyframes flicker { 0%, 90%, 100% { opacity: 1; } 91% { opacity: .4; } 92% { opacity: 1; } 94% { opacity: .55; } 95% { opacity: 1; } }
@keyframes wobble { 50% { transform: rotate(-14deg) scale(1.2); } }
@keyframes rise { from { opacity: 0; transform: translateY(40px) scale(.9) rotate(-2deg); filter: blur(6px); } }