@font-face{font-family:"Skizzed";src:url(fonts/Skizzed-DSG.ttf)}
@font-face{font-family:"Platz";src:url(fonts/Platz-Condensed.otf)}
@font-face{font-family:"CTUL";src:url(fonts/CookieTimeUL-Regular.ttf);font-weight:400}
@font-face{font-family:"CTUL";src:url(fonts/CookieTimeUL-Bold.ttf);font-weight:700}
@font-face{font-family:"CTUL";src:url(fonts/CookieTimeUL-Black.ttf);font-weight:900}

:root{
  --sky:#00a3de; --sky-dark:#0086b8;
  --leaf:#69b245; --leaf-dark:#5aa044; --leaf-light:#99cc66;
  --pill:#8fd14f; --red:#ed1c24; --choc:#470500; --gold:#ffc20e; --cream:#fff8e7;
  --display:"Skizzed","Platz",Impact,sans-serif;
  --cond:"Platz",Impact,sans-serif;
  --hand:"CTUL","Trebuchet MS",sans-serif;
  --body:"CTUL","Trebuchet MS",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--sky);color:var(--choc);font-family:var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- HERO ---------- */
.hero{position:relative;padding:clamp(20px,3vw,48px) clamp(16px,4vw,64px) clamp(24px,3.5vw,50px);overflow:hidden}
.hero-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;max-width:1280px;margin:0 auto}
.jumanji{width:clamp(130px,20vw,280px)}
.jumanji span{display:block;margin-top:6px;color:#fff;font:400 clamp(11px,1.7vw,22px)/1 var(--cond);letter-spacing:.04em;text-align:center}
.jumanji .sony-top{width:56%;margin:clamp(22px,3.4vw,44px) auto 0}
.shield{width:clamp(78px,9vw,130px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.3));transition:transform .3s}
.shield:hover{transform:rotate(-4deg) scale(1.06)}
.jumanji img{transition:transform .3s}
.jumanji img:hover{transform:rotate(-4deg) scale(1.06)}
.title{position:relative;z-index:2;pointer-events:none;margin:calc(-1*clamp(20px,6vw,90px)) auto 0;text-align:center;color:#fff;font:400 clamp(60px,10.5vw,150px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.05em;
  filter:drop-shadow(0 5px 0 rgba(0,70,110,.25))}
.title .w{display:block;transform:rotate(-5deg);animation:pop .9s cubic-bezier(.2,1.6,.4,1) both}
.title .w2{margin-top:.08em;margin-left:.9em;font-size:.72em;animation-delay:.18s}
.title i{display:inline-block;font-style:normal;font-size:1.9em;line-height:.45;margin:0 -.1em 0 -.02em;letter-spacing:0;animation:dot 1.4s infinite both}
.title i:nth-child(2){animation-delay:.2s}.title i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,20%{opacity:.6;transform:translateY(0)}50%{opacity:1;transform:translateY(-.08em)}80%,100%{opacity:.6}}
@keyframes pop{from{transform:rotate(-14deg) scale(.2);opacity:0}to{transform:rotate(-5deg) scale(1);opacity:1}}

/* floating cookies */
.cookies{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.cookie{position:absolute;pointer-events:auto;cursor:pointer;animation:bob var(--d,6s) ease-in-out infinite alternate;transition:transform .15s}
.cookie img{width:100%;transform:rotate(var(--r,0deg))}
.cookie:active{transform:scale(.8)}
.cookie.eaten{animation:none;transform:scale(0) rotate(180deg);opacity:0;transition:transform .35s,opacity .35s}
@keyframes bob{from{translate:0 -8px}to{translate:0 10px}}
.crumb{position:fixed;width:7px;height:7px;border-radius:50%;background:#c17a13;pointer-events:none;z-index:99}
.munch{position:fixed;left:50%;bottom:18px;translate:-50% 0;z-index:90;background:var(--choc);color:#fff;border-radius:99px;padding:8px 18px;font-weight:700;font-size:14px;opacity:0;transition:opacity .3s;pointer-events:none}
.munch.on{opacity:1}

/* ---------- ENTRY CARD ---------- */
.stage{position:relative;padding:0 16px;z-index:3}
.palm{position:absolute;bottom:-40px;width:clamp(150px,27vw,380px);z-index:4;pointer-events:none;transform-origin:50% 100%;animation:sway 7s ease-in-out infinite alternate}
.palm-l{left:calc(50% - min(380px,46vw) - clamp(70px,16vw,230px))}
.palm-r{right:calc(50% - min(380px,46vw) - clamp(70px,16vw,230px));animation-delay:-3s}
@keyframes sway{from{transform:rotate(-1.8deg)}to{transform:rotate(1.8deg)}}
.card{position:relative;z-index:2;width:min(760px,100%);margin:0 auto;background:#fff;border-radius:120px 120px 0 0;padding:clamp(28px,4vw,48px) clamp(20px,5vw,72px) 110px;box-shadow:0 -10px 40px rgba(0,60,100,.18);text-align:center;min-height:420px}
.card h2{margin:0 0 6px;font:400 clamp(36px,5.6vw,66px)/.95 var(--cond);letter-spacing:-.02em;color:var(--choc);text-transform:uppercase}
.card h2 small{font-size:.62em;display:block;margin-top:2px;color:var(--choc)}
.lead{margin:6px 0 22px;font:700 clamp(16px,2vw,19px)/1.25 var(--hand);color:var(--choc)}

form{display:grid;gap:14px;text-align:left;max-width:480px;margin:0 auto}
.field label{display:block;margin:0 0 4px 6px;font:700 15px/1 var(--hand);letter-spacing:.04em;text-transform:uppercase;color:var(--choc)}
.field input{width:100%;border:3px solid transparent;border-radius:99px;background:var(--pill);padding:12px 22px;font:700 18px var(--body);color:var(--choc);transition:.2s;outline:0}
.field input::placeholder{color:rgba(71,5,0,.45);font-weight:400}
.field input:focus{background:#a8e068;border-color:var(--choc);box-shadow:0 0 0 5px rgba(143,209,79,.35)}
.field.err input{border-color:var(--red);background:#ffd9d9}
.field .msg{display:none;margin:5px 8px 0;color:var(--red);font:700 14px/1.25 var(--body)}
.field.err .msg{display:block}
.codefield input{font:400 clamp(30px,6vw,42px) var(--display);letter-spacing:.34em;text-align:center;text-transform:uppercase;padding:10px 12px 6px 28px}
.codefield .help{display:flex;gap:10px;align-items:center;margin:8px 6px 0;font-size:13px;line-height:1.3;opacity:.85}
.mini-sticker{flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7fd0e8,#2c9fcb 55%,#2a7fa5);border:3px solid var(--leaf);display:grid;place-items:center;color:#fff;font:400 7px/.9 var(--display);text-align:center;rotate:-12deg}
.welcome{background:#eaf7dc;border-radius:18px;padding:10px 16px;font-size:15px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.welcome button{background:none;border:0;text-decoration:underline;color:var(--choc);font-size:13px}
.tcs{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.35}
.tcs input{width:22px;height:22px;accent-color:var(--leaf-dark);flex:none;margin-top:1px}
.tcs.err{color:var(--red);font-weight:700}
.btn{border:3px solid #000;border-radius:16px;padding:17px 34px 9px;background:var(--red);color:#fff;font:700 24px/1 var(--body);text-transform:uppercase;letter-spacing:.04em;transition:transform .12s,background .12s;position:relative}
.btn:hover{transform:translateY(-2px);background:#ff2f37}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.7;pointer-events:none}
.btn.ghost{background:var(--leaf);font-size:18px;padding:15px 26px 9px}
#tsWidget{display:flex;justify-content:center;margin-top:4px}
.formerr{background:#ffe3e3;border:2px solid var(--red);border-radius:18px;padding:10px 16px;font-weight:700;font-size:15px;display:none}
.formerr.on{display:block;animation:shake .4s}
@keyframes shake{20%,60%{translate:-8px 0}40%,80%{translate:8px 0}}
.spin{display:none;width:22px;height:22px;vertical-align:-4px;margin-right:8px;animation:spinr .7s linear infinite}
.loading .spin{display:inline-block}
@keyframes spinr{to{rotate:360deg}}

/* peel + result */
.peelwrap{position:relative;min-height:340px;margin-top:18px;display:grid;place-items:center}
.sticker{position:absolute;z-index:5;width:min(280px,70%);border:0;padding:0;background:none;box-shadow:none;border-radius:0;transition:transform .55s cubic-bezier(.5,0,.2,1),opacity .55s;animation:wiggle 1.6s ease-in-out infinite;cursor:pointer}
.sticker img{width:100%;height:auto;filter:drop-shadow(0 12px 14px rgba(0,0,0,.25));transition:transform .2s}
.sticker:hover img{transform:scale(1.06)}
.sticker.peeled{animation:none;transform:scale(1.6) rotate(24deg);opacity:0;pointer-events:none}
@keyframes wiggle{0%,100%{rotate:-4deg}50%{rotate:4deg}}
.result{display:none;width:100%}
.result.on{display:block;animation:rise .6s cubic-bezier(.2,1.3,.4,1) both}
@keyframes rise{from{transform:translateY(30px) scale(.9);opacity:0}}
.result h3{margin:0 0 10px;font:400 clamp(38px,7vw,58px)/1 var(--display);text-transform:uppercase;color:var(--red)}
.result.win h3{color:var(--leaf-dark);text-shadow:0 3px 0 var(--gold)}
.result p{margin:10px auto;max-width:430px;font-size:17px;line-height:1.35}
.pnote{margin:2px auto 0;font-size:15px;opacity:.85}
.prizeimg{display:block;margin:6px auto 0;max-height:210px;width:auto;max-width:80%;filter:drop-shadow(0 12px 12px rgba(0,0,0,.22));animation:bob 4s ease-in-out infinite alternate}
.prizeimg.wide{max-height:170px}
.prizeline{display:inline-flex;align-items:center;justify-content:center;background:var(--gold);padding:6px 30px 12px;border-radius:99px;font:400 clamp(30px,5vw,44px)/1 var(--cond);letter-spacing:.01em;text-transform:uppercase;rotate:-2deg;margin:18px 0 8px;text-align:center}
.claim h4{text-align:center;margin:0 0 10px;font:400 26px/1 var(--cond);text-transform:uppercase;color:var(--choc)}
.csteps{margin:8px 0 12px;padding-left:22px;line-height:1.35}
.csteps li{margin-bottom:6px}
.claimbtn{display:block;width:max-content;margin:6px auto 0;text-align:center;text-decoration:none;font-size:20px;padding:15px 24px 9px}
.claim{background:#fff6d6;border:0;border-radius:22px;padding:16px 20px;text-align:left;font-size:15px;max-width:480px;margin:14px auto}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0}
.chip{background:#eaf7dc;border:2px solid var(--leaf);border-radius:99px;padding:6px 14px;font:700 14px var(--body)}
.chip b{font:400 18px var(--display);text-transform:uppercase;margin-right:6px;color:var(--red)}
.entries{margin:18px auto 6px;max-width:480px;background:var(--cream);border-radius:24px;padding:16px 18px}
.entries h4{margin:0 0 8px;font:400 22px var(--display);text-transform:uppercase}
.tally{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:6px 0 12px;min-height:34px}
.tally img{width:30px;animation:land .5s cubic-bezier(.2,1.8,.4,1) both}
@keyframes land{from{transform:translateY(-60px) scale(2);opacity:0}}
.social{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sbtn{flex:1 1 130px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:99px;border:3px solid var(--choc);background:#fff;padding:10px 14px;font-weight:700;font-size:15px;text-decoration:none;transition:.15s}
.sbtn:hover{background:var(--gold);transform:translateY(-2px)}
.sbtn.done{background:#eaf7dc;border-color:var(--leaf-dark);pointer-events:none}
.sbtn svg{width:20px;height:20px;flex:none}
.entries small{display:block;margin-top:8px;font-size:12px;opacity:.75}
.again{margin-top:14px}

/* ---------- MEADOW ---------- */
.meadow{position:relative;margin-top:-76px;z-index:5;background:linear-gradient(to bottom,transparent calc(max(100vw,1100px)*.09),var(--leaf) calc(max(100vw,1100px)*.09));clip-path:inset(-200px 0 0 0);color:#fff}
.grass{position:absolute;left:50%;top:0;width:max(100%,1100px);max-width:none;height:auto;translate:-50% 0;pointer-events:none}
.grass.light{top:-30px;z-index:0}
.grass.mid{z-index:1}
.meadow-in{position:relative;z-index:2;padding:clamp(80px,9vw,150px) clamp(16px,5vw,64px) 60px}
.wrap{max-width:1080px;margin:0 auto}
.intro{text-align:center;font:700 clamp(19px,2.6vw,28px)/1.2 var(--body);max-width:640px;margin:0 auto 60px}
.intro strong{display:block;white-space:nowrap;width:max-content;max-width:94vw;position:relative;left:50%;transform:translateX(-50%);margin-top:10px;font:400 clamp(22px,5vw,64px)/1 var(--cond);letter-spacing:-.01em;text-transform:uppercase;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.18)}
h2.sec{margin:0 0 28px;text-align:center;font:400 clamp(36px,6vw,72px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.045em;text-shadow:0 4px 0 rgba(0,0,0,.18)}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:70px}
.step{background:rgba(255,255,255,.14);border:3px solid rgba(255,255,255,.55);border-radius:30px;padding:26px 22px;text-align:center;transition:transform .25s}
.step:hover{transform:translateY(-6px) rotate(-1deg)}
.step .n{width:62px;height:62px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;margin:-56px auto 12px;font:400 40px/1 var(--cond);padding:0 0 5px 1px}
.step h3{margin:0 0 6px;font:400 30px/1 var(--display);text-transform:uppercase;letter-spacing:-.04em}
.step p{margin:0;font-size:16px;line-height:1.35}
.packs{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;margin-bottom:80px}
.fan{position:relative;aspect-ratio:1.4;width:100%;animation:bob 6s ease-in-out infinite alternate}
.pk{position:absolute;width:45%;height:auto;opacity:0;filter:drop-shadow(0 14px 14px rgba(0,0,0,.28));transform:translateX(var(--hide)) rotate(var(--r));transition:transform .95s cubic-bezier(.2,1.2,.35,1),opacity .45s ease-out;transition-delay:var(--d,0s)}
.pk-choc{left:53%;bottom:0;z-index:4;--r:7deg;--hide:75%;--d:0s}
.pk-straw{left:36%;bottom:3%;z-index:3;--r:1deg;--hide:38%;--d:1s}
.pk-banana{left:19%;bottom:6%;z-index:2;--r:-5deg;--hide:38%;--d:2s}
.pk-honey{left:2%;bottom:9%;z-index:1;--r:-11deg;--hide:38%;--d:3s}
.fan.go .pk{opacity:1;transform:rotate(var(--r))}
.packs h2{margin:0 0 14px;font:400 clamp(40px,6vw,76px)/.95 var(--cond);text-transform:uppercase;letter-spacing:-.01em;text-shadow:0 4px 0 rgba(0,0,0,.18)}
.packs p{font-size:18px;line-height:1.4;margin:0 0 10px}
.draws{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:70px}
.draw{background:var(--cream);color:var(--choc);border-radius:30px;overflow:hidden;display:flex;flex-direction:column;container-type:inline-size;transition:transform .25s,box-shadow .25s;box-shadow:0 10px 0 rgba(0,0,0,.14)}
.draw:hover{transform:translateY(-8px) rotate(.6deg)}
.draw .top{aspect-ratio:4/3;position:relative;overflow:hidden}
.draw .top.j{background:#fff url(jumanji-artwork.jpg) center/cover}
.draw .top.b{background:#8db4dc url(blackclash-photo.jpg) center/cover}
.draw .top.s{background:#0a9ad6 url(sony-prizes.webp) center/cover}
.draw .date{position:absolute;right:12px;top:12px;z-index:3;background:var(--red);color:#fff;border-radius:16px;padding:6px 12px;text-align:center;font:400 24px/.9 var(--display);rotate:4deg}
.draw .date small{display:block;font:700 10px var(--body);letter-spacing:.1em}
.draw .body{padding:20px 22px 24px}
.draw h3{text-wrap:balance;margin:0 0 10px;font:400 min(38px,calc(10cqw - 5px))/1 var(--cond);white-space:nowrap;text-transform:uppercase;letter-spacing:0;color:#7a0d10}
.drawdate{margin:16px 0 0;font:700 15px/1.3 var(--body);color:var(--choc)}
.draw ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:16px}
.draw li{display:flex;gap:10px;align-items:flex-start;line-height:1.25}
.draw li img{width:20px;flex:none;margin-top:1px}
.faq{max-width:760px;margin:0 auto 20px}
details{background:rgba(255,255,255,.14);border:3px solid rgba(255,255,255,.5);border-radius:22px;margin-bottom:12px;overflow:hidden}
summary{list-style:none;cursor:pointer;padding:16px 22px;font:400 clamp(24px,2.6vw,32px)/1.1 var(--cond);text-transform:uppercase;letter-spacing:.01em;display:flex;justify-content:space-between;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:34px;line-height:.8;transition:rotate .25s}
details[open] summary::after{rotate:45deg}
details p{margin:0;padding:0 22px 18px;font-size:16px;line-height:1.4}
footer{position:relative;background:var(--leaf-dark);color:#fff;text-align:center;padding:50px 20px 110px;font-size:14px;line-height:1.5}
footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:60px;background:var(--leaf);}
footer .wrap{position:relative}
footer a{font-weight:700}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(40px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}

/* demo helper (prototype only) */
.demo{position:fixed;left:12px;bottom:12px;z-index:100;font:13px/1.35 var(--body)}
.demo button.tog{background:var(--choc);color:#fff;border:0;border-radius:99px;padding:8px 14px;font-weight:700}
.demo .panel{display:none;margin-bottom:8px;background:#fff;border:3px solid var(--choc);border-radius:18px;padding:12px 14px;max-width:260px;color:var(--choc)}
.demo.open .panel{display:block}
.demo code{background:#eee;padding:1px 5px;border-radius:5px;font-weight:700}
.demo .panel button{margin-top:6px;border:2px solid var(--choc);background:#fff;border-radius:99px;padding:4px 10px;font-size:12px}
canvas#confetti{position:fixed;inset:0;pointer-events:none;z-index:98;width:100%;height:100%}

@media(max-width:860px){
  .how,.draws{grid-template-columns:1fr;gap:42px}
  .packs{grid-template-columns:1fr}
  .palm{width:clamp(120px,32vw,200px);bottom:auto;top:-70px}
  .palm-l{left:-34px}.palm-r{right:-34px}
  .card{border-radius:80px 80px 0 0}
  .meadow{margin-top:-50px}
}
@media(max-width:700px){
  .palm,.cookies{display:none!important}
  h2.sec{line-height:1.15;margin-bottom:34px}
  .packs h2{line-height:1.05}
  .hero{padding-bottom:26px}
  .title{margin:18px auto 0;font-size:clamp(44px,13.5vw,76px)}
  .title .w2{margin-top:.1em}
  .card{padding-bottom:90px}
}
@media(max-width:520px){
  .hero-top{align-items:center}
  .title .w2{margin-left:.3em}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}