:root{--snow:#FFFDF7;--cream:#F5EEDC;--glow:#FFE9A8;--ink:#1d2b24}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--snow);font-family:'Nunito',system-ui,sans-serif;font-weight:500;
  background:radial-gradient(1200px 600px at 50% -10%,#1d5a45 0,transparent 60%),linear-gradient(#0c2a20,var(--green) 55%,#0a241b);overflow-x:hidden}
h1,h2,.marquee span,.big{font-family:'Fraunces',Georgia,serif}
button,input{font:inherit}
:focus-visible{outline:3px solid var(--glow);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;color:#000;padding:8px;z-index:99}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#snow{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.flake{position:absolute;top:-10px;color:#fff;opacity:.8;animation:fall linear infinite;user-select:none}
@keyframes fall{to{transform:translate3d(var(--dx,30px),105vh,0)}}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
/* header */
.top{position:relative;z-index:2;display:flex;align-items:center;gap:16px;padding:16px clamp(16px,4vw,40px);flex-wrap:wrap}
.logo{width:64px;height:64px;object-fit:contain;border-radius:16px;background:var(--cream)}
.logo-ph{display:grid;place-items:center;font-size:38px;background:var(--cream);border:2px solid var(--gold)}
.company{margin:0;color:var(--gold);font-weight:800;letter-spacing:.02em}
h1{margin:0;font-size:clamp(1.6rem,4vw,2.8rem);line-height:1.05;font-weight:800}
.sub{margin:4px 0 0;color:var(--cream)}
.toggles{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.toggles button{background:rgba(255,253,247,.1);color:var(--snow);border:1px solid rgba(212,175,105,.5);border-radius:999px;padding:8px 14px;cursor:pointer}
.toggles button[aria-pressed=true]{background:var(--gold);color:var(--ink)}
/* arcade */
.arcade{position:relative;z-index:2;display:flex;justify-content:center;padding:8px 12px 48px}
.machine{width:min(820px,100%);position:relative}
.marquee{position:relative;text-align:center;padding:16px 12px 22px;border-radius:26px 26px 6px 6px;
  background:linear-gradient(180deg,#e03a3a,var(--red) 55%,#8f1818);border:3px solid var(--gold);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.marquee span{font-size:clamp(1.4rem,4.5vw,2.4rem);font-weight:800;color:var(--snow);text-shadow:0 0 18px var(--glow),0 2px 0 #7a1010}
.bulbs{position:absolute;left:14px;right:14px;bottom:6px;height:10px;
  background:radial-gradient(circle,var(--glow) 0 3px,transparent 4px) 0 0/22px 10px repeat-x;animation:twinkle 1.6s steps(2) infinite}
@keyframes twinkle{50%{filter:hue-rotate(160deg) brightness(1.2)}}
.cabinet-wrap{position:relative;padding:0 14px;background:linear-gradient(90deg,#8f1818,var(--red) 50%,#8f1818);border-left:3px solid var(--gold);border-right:3px solid var(--gold)}
.cabinet{position:relative;height:clamp(300px,52vw,400px);overflow:hidden;border-radius:6px;
  background:linear-gradient(#173f33,#0d2a20 70%,#0a2018);box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.cabinet::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(212,175,105,.06) 38px 40px)}
.rail{position:absolute;top:12px;left:8px;right:8px;height:10px;border-radius:6px;background:linear-gradient(#e8e8e8,#8a8a8a);box-shadow:0 2px 4px rgba(0,0,0,.5)}
.carriage{position:absolute;top:8px;left:50%;width:0;display:flex;flex-direction:column;align-items:center;transition:left 1s ease-in-out;z-index:3}
.trolley{width:34px;height:16px;border-radius:5px;background:linear-gradient(#f2f2f2,#7c7c7c);border:1px solid #555;flex:none}
.rope{width:4px;height:26px;background:repeating-linear-gradient(#bbb 0 4px,#777 4px 6px);transition:height 1.3s ease-in-out;flex:none}
.claw{position:relative;width:64px;height:58px;flex:none}
.hub{position:absolute;left:19px;top:0;width:26px;height:16px;border-radius:6px 6px 10px 10px;background:linear-gradient(#ffe9a8,var(--gold));border:1px solid #8a6d2b}
.prong{position:absolute;top:10px;width:9px;height:50px;border-radius:5px 5px 14px 4px;background:linear-gradient(90deg,#f4f4f4,#8c8c8c);transform-origin:50% 0;transition:transform .5s ease}
.prong.l{left:14px;transform:rotate(26deg)}.prong.r{right:14px;transform:rotate(-26deg) scaleX(-1)}
.claw.closed .prong.l{transform:rotate(6deg)}.claw.closed .prong.r{transform:rotate(-6deg) scaleX(-1)}
.glass{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 30%,transparent 70%,rgba(255,255,255,.08));border-radius:6px}
.floor-label{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--gold);z-index:1;font-size:0}
.base{position:relative;display:flex;gap:18px;align-items:center;padding:18px;border:3px solid var(--gold);border-top:0;border-radius:6px 6px 26px 26px;
  background:linear-gradient(#a31f1f,#7a1010);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.joystick{width:64px;height:64px;border-radius:50%;background:#2b2b2b;display:grid;place-items:center;flex:none;border:3px solid #111;box-shadow:inset 0 0 8px #000}
.joystick i{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7373,var(--red))}
.screen{flex:1;min-height:150px;display:grid;align-items:center;text-align:center;padding:14px 16px;border-radius:14px;background:#08150f;border:2px solid #000;box-shadow:inset 0 0 20px rgba(212,175,105,.18)}
.big{font-size:clamp(1.1rem,2.6vw,1.5rem);margin:0 0 14px;line-height:1.3;color:var(--cream)}
.btn{cursor:pointer;border:0;border-radius:999px;padding:14px 30px;font-weight:800;font-size:1.1rem;letter-spacing:.03em;color:#fff;
  background:linear-gradient(#ee4a4a,var(--red) 60%,#8f1818);box-shadow:0 5px 0 #6b0f0f,0 10px 20px rgba(0,0,0,.4);transition:transform .1s,box-shadow .1s}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #6b0f0f}
.btn:disabled{opacity:.6;cursor:wait}
.btn.go{font-size:clamp(1.2rem,3vw,1.7rem);padding:18px 38px;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 5px 0 #6b0f0f,0 0 0 10px rgba(255,233,168,.25),0 0 30px var(--glow)}}
label{display:block;margin-bottom:8px;font-weight:800;color:var(--gold)}
input{width:100%;max-width:360px;padding:12px 14px;border-radius:12px;border:2px solid var(--gold);background:var(--snow);color:var(--ink);font-size:1.1rem;margin-bottom:10px}
.err{color:#ffb4a8;min-height:1.3em;margin:4px 0 10px;font-weight:700}
/* reveal */
.reveal{position:absolute;inset:0 14px;z-index:8;display:grid;place-items:center;background:rgba(6,20,14,.78);backdrop-filter:blur(3px);padding:12px}
.reveal[hidden]{display:none}
.card{width:min(480px,100%);text-align:center;color:var(--ink);padding:22px 20px;border-radius:22px;
  background:linear-gradient(var(--snow),var(--cream));border:4px solid var(--gold);box-shadow:0 0 0 4px var(--red),0 0 50px var(--glow);animation:pop .7s cubic-bezier(.2,1.4,.4,1)}
.card p{margin:6px 0}.lead{font-weight:800;color:var(--red)}.burst{font-size:1.6rem}
.card h2{font-size:clamp(1.9rem,6vw,3rem);margin:8px 0;color:var(--green);text-shadow:0 0 22px var(--glow);animation:glow 2s ease-in-out infinite}
.dept{font-weight:700;color:#6b5b2e}.secret{font-style:italic;color:#6b2b2b;margin-bottom:14px!important}
@keyframes pop{from{transform:scale(.3) rotate(-6deg);opacity:0}}
@keyframes glow{50%{text-shadow:0 0 36px #ffd35c,0 0 8px #fff}}
/* trees */
.tree{position:absolute;bottom:40px;width:clamp(90px,14vw,190px);aspect-ratio:3/4;z-index:0;
  background:radial-gradient(circle at 30% 40%,#ff5a5a 0 4px,transparent 5px),radial-gradient(circle at 65% 55%,var(--glow) 0 4px,transparent 5px),radial-gradient(circle at 45% 78%,#ff5a5a 0 4px,transparent 5px),linear-gradient(#2c8a57,#16603c);
  clip-path:polygon(50% 0,80% 34%,66% 34%,92% 66%,72% 66%,100% 94%,56% 94%,56% 100%,44% 100%,44% 94%,0 94%,28% 66%,8% 66%,34% 34%,20% 34%)}
.tree-l{left:max(0px,calc(50% - 560px))}.tree-r{right:max(0px,calc(50% - 560px));transform:scaleX(-1)}
@media(max-width:1100px){.tree{display:none}}
@media(max-width:560px){.base{flex-direction:column}.joystick{display:none}.toggles{margin-left:0}}
.reduce *,.reduce *::before,.reduce *::after{animation:none!important;transition-duration:.01s!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}

.btn.alt{background:linear-gradient(#2f8f5f,#1f6b43);box-shadow:0 5px 0 #124a2d,0 10px 20px rgba(0,0,0,.4);margin-top:12px;padding:10px 22px;font-size:.95rem}
.steer-pad{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.btn.pad{width:64px;height:64px;padding:0;font-size:1.6rem;margin:0}
.carriage.steer{transition-duration:.18s}

.hint{margin:0 0 12px;color:var(--cream);font-size:.95rem}
#code{letter-spacing:.45em;text-align:center;font-size:1.6rem;max-width:260px}
#resendBtn{margin-left:8px}

/* plush prize pile */
.cabinet{--u:calc(clamp(300px,52vw,400px)/400)}
.gifts{position:absolute;inset:0;z-index:2;pointer-events:none}
.plush{position:absolute}
.plush svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 100%;filter:drop-shadow(0 calc(var(--u)*3) calc(var(--u)*4) rgba(0,0,0,.55))}
.gift{transition:transform 1.4s ease-in-out,opacity .5s}
.gift.lifted{z-index:99!important}.gift.gone{opacity:0}
.gift.lifted svg{transform-origin:50% 8%;animation:dangle 1.3s ease-in-out infinite}
.gift.aim svg{filter:drop-shadow(0 0 6px #ffe9a8) drop-shadow(0 0 14px #ffe9a8)}
@keyframes dangle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.cabinet::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(rgba(0,0,0,.25),transparent 25%,transparent 70%,rgba(0,0,0,.3))}

/* prize chute + removed prizes */
.gift.taken{visibility:hidden!important}
.partition{position:absolute;left:12.5%;bottom:0;width:calc(var(--u)*5);height:calc(var(--u)*170);z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.07));border-right:2px solid var(--gold);border-top-right-radius:4px}
.chute{position:absolute;left:1.2%;bottom:0;width:10%;height:calc(var(--u)*66);z-index:4;pointer-events:none;display:grid;place-items:start center;
  background:linear-gradient(#02080a,#0a1d15 70%,#14382a);border:2px solid var(--gold);border-bottom:0;border-radius:12px 12px 0 0;box-shadow:inset 0 8px 14px rgba(0,0,0,.8)}
.chute span{margin-top:calc(var(--u)*8);font:800 calc(var(--u)*13)/1 'Nunito',sans-serif;letter-spacing:.14em;color:var(--gold);opacity:.85}