*{box-sizing:border-box}body{margin:0;background:#efe9dd;color:#153d2c;font:15px/1.5 system-ui,-apple-system,sans-serif}.draw-page{max-width:520px;margin:auto;min-height:100dvh;background:#fffaf0;box-shadow:0 0 50px #233c2512}header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:8px}header strong{display:flex;align-items:center;font-size:16px}header img{width:25px;height:28px;margin-right:6px}.back{font-size:36px;line-height:1;text-decoration:none;color:#075337;min-width:36px}.account{font-size:12px;color:#075337}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{opacity:.6;cursor:wait}[hidden]{display:none!important}.intro{text-align:center;padding:0 15px}.eyebrow{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;margin:6px}h1{font-size:clamp(32px,9vw,48px);line-height:1.1;letter-spacing:-2px;margin:6px 0;font-weight:950}.tagline{font-weight:750;color:#ae4b24;font-style:italic;font-size:22px;margin:2px 0 12px}.prize{display:inline-block;border-radius:30px;background:linear-gradient(100deg,#c3890e,#e2aa2c);color:white;padding:8px 20px;font-size:16px}.scene{height:300px;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(#e7f0e5,#f5d5a0 70%);margin-top:15px}.sun{position:absolute;right:10%;top:6%;width:50px;height:50px;background:#fff4bc;border-radius:50%;box-shadow:0 0 40px #fff3a8}.hills{position:absolute;top:38%;width:140%;height:45%;background:#8d9d6d;border-radius:50% 70% 0 0;transform:rotate(-7deg)}.road{position:absolute;inset:54% 0 0;background:linear-gradient(#777c77,#444a47);border-top:4px solid #dfc183}.road:after{content:'';position:absolute;top:28%;width:100%;height:4px;background:repeating-linear-gradient(90deg,#f8edd2 0 45px,transparent 45px 90px)}.truck{position:absolute;width:89%;left:8%;top:9%;z-index:3;filter:drop-shadow(0 9px 3px #20261f40)}.truck img{width:100%;display:block}.truck canvas{position:absolute;width:50%;height:67%;left:10%;top:0;z-index:-1}.pothole{position:absolute;left:5%;top:70%;width:37%;height:18%;border-radius:50%;background:radial-gradient(ellipse,#151c17 25%,#3e2d20 65%,#b68c58 68%,#d0ae79 78%,transparent 81%);box-shadow:0 8px 8px #1e251f50;z-index:2;transform:rotate(-8deg)}.scene-caption{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:10px;color:#fff6dd;letter-spacing:.5px}.winner-ticket{z-index:6;position:absolute;left:15%;top:46%;width:64%;text-align:center;background:linear-gradient(130deg,#ffeaa0,#f5c74c);border:3px solid #c18410;outline:3px solid #fff4b7;border-radius:12px;box-shadow:0 0 38px #ffd357cc;transform:rotate(-6deg);padding:10px;color:#19432a;animation:ticket-pop .8s cubic-bezier(.2,.8,.2,1)}.winner-ticket small,.winner-ticket strong,.winner-ticket b{display:block}.winner-ticket small{font-size:11px;letter-spacing:2px}.winner-ticket strong{font-size:28px;line-height:1.3}.winner-ticket b{font-size:21px;color:#a44b1d}.tickets i{position:absolute;z-index:5;top:45%;left:10%;width:12px;height:17px;background:#fff4d8;border:1px solid #d4b47d;animation:fall .9s ease-in infinite;animation-delay:calc(var(--i)*.09s);opacity:0}.confetti i{position:absolute;z-index:8;top:-10px;left:calc(var(--i)*5%);width:7px;height:12px;background:#f1bc33;animation:confetti 2.4s ease-out forwards;animation-delay:calc(var(--i)*.025s)}.confetti i:nth-child(even){background:#1c794c}.pouring .truck{animation:rumble .3s linear infinite}.driving .truck{animation:drive-in 1.5s ease-out}.draw-info{padding:14px 22px 20px;text-align:center}.entry-status{border-radius:12px;background:#e7efdb;color:#275a33;padding:10px 12px;margin:0;font-weight:750;font-size:14px}.count-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#65745f;padding-top:8px}.rule-summary{font-size:13px;margin:10px 0 15px}.primary{width:100%;border:0;border-radius:28px;background:#075337;color:white;font-weight:750;padding:13px 18px;font-size:16px;margin-bottom:7px;min-height:48px}.links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.links button{border:0;background:none;color:#075337;text-decoration:underline;min-height:44px;padding:2px;font-size:13px}.points-note{border-top:1px solid #e2d8c1;margin:8px 0;padding-top:12px;font-weight:700;font-size:13px}#signIn{color:#075337;font-size:13px}.animation-status{margin:0;font-size:12px;color:#8b5825;min-height:18px}dialog{width:calc(100% - 32px);max-width:470px;max-height:80dvh;border:1px solid #d5c5a4;border-radius:18px;padding:24px;background:#fffaf0;color:#153d2c}dialog::backdrop{background:#143223aa}.close{float:right;background:none;border:0;font-size:28px;width:44px;height:44px}dialog h2{margin-top:4px}dialog p{white-space:pre-line}button:focus-visible,a:focus-visible{outline:3px solid #d39a12;outline-offset:4px}.history-row{padding:12px 0;border-bottom:1px solid #d5c5a4}.draw-admin-box{padding:16px;background:#fff8e8;border-radius:14px}.draw-admin-box textarea,.draw-admin-box input{width:100%;font:inherit;padding:12px;margin:8px 0;border:1px solid #aebdb3;border-radius:8px}.draw-admin-box button{margin:5px;padding:10px 15px;min-height:44px}.draw-admin-box p{overflow-wrap:anywhere}@keyframes ticket-pop{from{opacity:0;transform:translateY(90px) scale(.3) rotate(-20deg)}to{opacity:1;transform:rotate(-6deg)}}@keyframes fall{0%{opacity:0;transform:translate(0,0) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translate(30px,90px) rotate(210deg)}}@keyframes confetti{to{transform:translateY(300px) rotate(550deg);opacity:0}}@keyframes drive-in{from{transform:translateX(-115%)}to{transform:translateX(0)}}@keyframes rumble{50%{transform:translateY(1px)}}@media(max-width:360px){.scene{height:260px}.draw-info{padding:12px 16px}.prize{font-size:14px}.winner-ticket strong{font-size:24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}
@media(max-width:520px){.scene{height:250px}.draw-info{padding-top:10px}.intro .eyebrow{margin-top:0}.rule-summary{margin:8px 0 12px}}
/* Real asphalt and paper assets for the draw scene only. */
.scene{background:#8f8b80 url('pot-hole-road.png') center/100% 100% no-repeat;perspective:700px}
.scene>.sun,.scene>.hills,.scene>.road,.scene>.pothole{display:none}
.scene .truck{top:8%;width:86%;left:10%;filter:drop-shadow(0 7px 3px #241b164d)}
.scene-caption{bottom:5px;left:auto;right:10px;font-size:9px;background:#14281a99;padding:3px 7px;border-radius:5px;max-width:72%;color:#fff8e4}
.tickets{position:absolute;inset:0;z-index:5;pointer-events:none}
.tickets i{top:43%;left:12%;width:48px;height:27px;padding:3px 4px;background:repeating-linear-gradient(0deg,#fff3d720 0 1px,#bda37315 1px 2px),linear-gradient(145deg,#fff9e9 0%,#f8eacb 49%,#d0b98c 50%,#fff3dc 53%,#f5e6c7 100%);border:1px solid #b19a73;color:#244d35;font-style:normal;line-height:1.15;text-align:center;filter:drop-shadow(2px 3px 2px #20170f55);transform-origin:center;clip-path:polygon(0 0,8% 3%,16% 0,24% 3%,32% 0,40% 3%,48% 0,56% 3%,64% 0,72% 3%,80% 0,88% 3%,100% 0,97% 20%,100% 40%,97% 60%,100% 80%,97% 100%,85% 97%,75% 100%,65% 97%,55% 100%,45% 97%,35% 100%,25% 97%,15% 100%,0 97%,3% 80%,0 60%,3% 40%,0 20%);animation:paper-fall 1.45s linear infinite;animation-delay:calc(var(--i)*.12s)}
.tickets i small{display:block;font-size:5px;letter-spacing:.7px;border-bottom:1px dotted #9e8763;padding-bottom:2px;margin-bottom:2px;font-weight:700}
.tickets i b{display:block;font-size:6px;font-weight:800;white-space:nowrap}
.tickets i.settled-ticket{top:calc(73% + var(--i)*2%);left:calc(10% + var(--i)*8%);opacity:1;animation:none;transform:rotate(var(--start-turn));width:43px;height:25px;z-index:2}
.winner-ticket{left:28%;top:58%;width:64%;padding:9px 13px;outline:0;border:2px solid #ae751d;border-radius:5px;box-shadow:2px 8px 10px #32211166,inset 0 0 0 4px #ffe19b;filter:drop-shadow(0 4px 3px #31231460);color:#1e4a32;background:repeating-linear-gradient(15deg,#fff5d41a 0 1px,#7c4a0b0d 1px 3px),linear-gradient(110deg,#f9dfa2 0%,#e7b95e 47%,#b88330 48%,#f4cf83 49%,#edc16a 75%,#ffe9b7 100%);clip-path:polygon(0 0,5% 2%,10% 0,15% 2%,20% 0,25% 2%,30% 0,35% 2%,40% 0,45% 2%,50% 0,55% 2%,60% 0,65% 2%,70% 0,75% 2%,80% 0,85% 2%,90% 0,95% 2%,100% 0,98% 14%,100% 28%,98% 42%,100% 56%,98% 70%,100% 84%,98% 100%,90% 98%,80% 100%,70% 98%,60% 100%,50% 98%,40% 100%,30% 98%,20% 100%,10% 98%,0 100%,2% 84%,0 70%,2% 56%,0 42%,2% 28%,0 14%)}
.winner-ticket small{font-size:10px;letter-spacing:1px;border-bottom:1px solid #ab7d3266;padding-bottom:3px}.winner-ticket strong{font-size:26px;text-shadow:0 1px #fff0bf}.winner-ticket b{font-size:21px;color:#9c4828}
@keyframes paper-fall{0%{opacity:0;transform:translate3d(0,0,0) rotate(var(--start-turn)) rotateY(-15deg)}12%{opacity:1}35%{transform:translate3d(calc(var(--drift)*.35),calc(var(--fall)*.12),10px) rotate(25deg) rotateY(65deg)}65%{opacity:1;transform:translate3d(calc(var(--drift)*.72),calc(var(--fall)*.5),0) rotate(-20deg) rotateY(-45deg)}92%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),var(--fall),-15px) rotate(var(--turn)) rotateX(50deg)}}
@media(max-width:380px){.winner-ticket{padding:8px 11px}.winner-ticket strong{font-size:22px}.winner-ticket b{font-size:19px}.tickets i{width:42px;height:25px}}
@media(prefers-reduced-motion:reduce){.tickets i{animation:none!important}}
/* Park the truck behind the damaged area so its wheels do not hide the hole. */
.scene .truck{top:1%;width:78%;left:10%}
.winner-ticket{top:52%}
/* Truck contact and motion use the same road plane throughout the draw. */
.scene .truck{top:auto;bottom:31%;left:10%;width:78%;filter:none;transform:translateX(0);will-change:transform}
.scene .truck:before{content:'';position:absolute;left:12%;right:7%;bottom:4.3%;height:4%;border-radius:50%;background:radial-gradient(ellipse,#231d17a8 10%,#211b146b 50%,transparent 74%);filter:blur(1px);z-index:-2}
.scene .truck>img{filter:drop-shadow(0 1px 1px #251d192d)}
.truck-chute-origin{position:absolute;left:3.5%;top:49.5%;width:1px;height:1px;pointer-events:none}
.truck-wheel-roll{position:absolute;width:14.5%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background-image:url('pot-hole-truck.png');background-size:689.6551724% auto;background-position:var(--wheel-bg-x) var(--wheel-bg-y);opacity:0;pointer-events:none;z-index:4}
.scene.driving .truck-wheel-roll,.scene.departing .truck-wheel-roll{opacity:1;animation:truck-wheel-turn .55s linear infinite}
.scene.pouring .truck{animation:none}
.scene.driving .truck{animation:truck-arrive 1.5s cubic-bezier(.12,.45,.35,1) both}
.scene.departing .truck{animation:truck-leave 2.6s cubic-bezier(.45,0,.9,.7) forwards}
.scene.departed .truck{visibility:hidden;transform:translateX(var(--truck-exit-distance,800px))}
/* The sheet is centred on a measured chute mouth, never a viewport guess. */
.scene .tickets i:not(.settled-ticket){animation:chute-paper-fall 1.45s ease-in infinite;animation-delay:calc(var(--i)*.12s);opacity:0;transform:translate(-50%,-50%)}
@keyframes chute-paper-fall{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--start-turn)) scale(.45)}8%{opacity:1;transform:translate(-50%,calc(-50% + 4px)) rotate(var(--start-turn)) scale(.62)}35%{opacity:1;transform:translate(calc(-50% + var(--drift)*.25),calc(-50% + var(--fall)*.2)) rotate(15deg) rotateY(30deg) scale(.85)}70%{opacity:1;transform:translate(calc(-50% + var(--drift)*.7),calc(-50% + var(--fall)*.65)) rotate(-10deg) rotateY(-25deg)}92%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--drift)),calc(-50% + var(--fall))) rotate(var(--turn)) rotateX(45deg)}}
@keyframes truck-arrive{from{transform:translateX(-120%)}to{transform:translateX(0)}}
@keyframes truck-leave{from{transform:translateX(0)}to{transform:translateX(var(--truck-exit-distance,800px))}}
@keyframes truck-wheel-turn{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.scene .truck-wheel-roll,.scene .tickets i:not(.settled-ticket){animation:none!important}.scene .truck{will-change:auto}}