.halloween-game{--ink:#191323;--cream:#fff8e8;--orange:#ff7c23;--purple:#9755ed;--lime:#c5ed58}
.preview-note{position:relative;z-index:70;background:var(--lime);color:var(--ink);padding:9px 20px;display:flex;gap:12px;justify-content:center;align-items:center;font:700 12px/1.5 'DM Sans',sans-serif}
.preview-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
#game-canvas,#game-targets{position:fixed;inset:0;pointer-events:none;z-index:80;width:100%;height:100%}
#game-targets{z-index:81;overflow:clip}
#game-canvas{opacity:0;transition:opacity .6s ease}
.halloween-game[data-renderer=webgl] #game-canvas{opacity:1}
.game-hud{visibility:hidden}
.halloween-game[data-ready=true] .game-hud{visibility:visible;animation:hud-in .6s ease both}
@keyframes hud-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.treat-hit{position:absolute;width:106px;height:84px;transform:translate(-50%,-50%);border:0;border-radius:45%;background:transparent;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.treat-hit:focus-visible{outline:3px solid var(--lime);outline-offset:3px;background:#c5ed5820}
.treat-hit img{display:none;width:100%;height:100%;object-fit:contain}
.halloween-game.fallback .treat-hit img{display:block}
.game-hud{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:82;width:175px;text-align:center;font-family:'DM Sans',sans-serif;color:var(--ink)}
.bucket-space{height:160px;pointer-events:none}
.bucket-fallback{display:none;width:145px;height:145px;object-fit:contain;margin:auto}
.halloween-game.fallback .bucket-fallback{display:block}
.bucket-space{position:relative}
.treat-badge{position:absolute;right:-4px;top:2px;min-width:42px;height:42px;padding:0 9px;box-sizing:border-box;border-radius:21px;background:var(--purple);color:#fff;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:20px/36px 'Anton',sans-serif;text-align:center}
.halloween-reward button:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.game-pop{position:fixed;color:var(--lime);font:bold 32px 'Anton',sans-serif;-webkit-text-stroke:1px var(--ink);z-index:85;pointer-events:none;animation:pop-up .7s ease-out forwards}
@keyframes pop-up{to{transform:translateY(-60px) rotate(8deg);opacity:0}}
.halloween-reward{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(450px,calc(100vw - 32px));max-height:90dvh;overflow:auto;border:4px solid var(--ink);border-radius:24px;background:var(--cream);color:var(--ink);text-align:center;padding:32px;box-shadow:9px 9px 0 var(--purple);font-family:'DM Sans',sans-serif}
.halloween-reward::backdrop{background:#130d26b8;backdrop-filter:blur(6px)}
.halloween-reward img{display:block;height:160px;width:auto;margin-inline:auto}
.halloween-reward h2{font:46px/1.1 'Anton',sans-serif;margin:12px 0;text-transform:uppercase}
.halloween-reward p{line-height:1.5}
.halloween-reward button{background:var(--lime);border:3px solid var(--ink);border-radius:10px;padding:13px 22px;color:var(--ink);font:800 16px 'DM Sans',sans-serif;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.game-hud{right:12px;bottom:12px;width:140px}.bucket-space{height:135px}.treat-hit{width:86px;height:74px}.preview-note{font-size:10px;padding:7px;flex-wrap:wrap;gap:5px}.halloween-home section{max-width:100vw}.halloween-reward h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){#game-canvas{transition:none}.halloween-game[data-ready=true] .game-hud{animation:none}.halloween-home *,.halloween-home *:before,.halloween-home *:after{animation:none!important}.game-pop{animation:none}}

.halloween-game [hidden] { display: none !important; }

/* Leave room for the page content on phones. */
@media (max-width: 600px) {
    .halloween-game .game-hud { width: 108px; right: max(10px,env(safe-area-inset-right)); bottom: max(10px,env(safe-area-inset-bottom)); }
    .halloween-game .bucket-space { height: 100px; }
    .halloween-game .bucket-fallback { width: 100px; height: 100px; }
    .halloween-game .treat-badge { min-width: 32px; height: 32px; font-size: 15px; line-height: 26px; }
}





/* The 555 finale uses the dialog top layer so fireworks remain above the backdrop. */
.halloween-reward .legend-total[hidden] { display: none; }
.halloween-reward .legend-total { margin: 8px 0 0; font: 400 clamp(64px,12vw,96px)/1 Anton,sans-serif; color: #ffbf45; text-shadow: 4px 4px 0 #6723a3; }
.halloween-reward.reward-legend { border-color: #ffe27a; background: #25103f; color: #fff8e8; box-shadow: 0 0 0 4px #9755ed, 0 0 60px #ff8c1a80, 9px 9px 0 #9755ed; }
.halloween-reward.reward-legend h2 { color: #ffe27a; }
.halloween-reward.reward-legend button { background: #ffe27a; }
.halloween-reward.reward-legend::backdrop { background: #130824dc; }
.halloween-fireworks { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; pointer-events: none; z-index: -1; }
@media (prefers-reduced-motion: reduce) { .halloween-fireworks { display: none; } }