/* Approved bright preview: live entry slots and a complete left-facing mixer. */
body{background:#f4fbff;color:#004c2a}
.draw-page{max-width:520px;min-height:100dvh;margin:auto;padding:0 10px max(6px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 0 68%,#b3ecff99,transparent 60%),linear-gradient(#fff 38%,#edfbff 70%,#fff);box-shadow:0 0 40px #10602b12}
.draw-page header{height:44px;padding:0 3px;gap:5px;border-bottom:1px solid #e9c975}
.draw-page header strong{font-size:15px;white-space:nowrap;color:#004922}.draw-page header img{width:23px;height:28px;margin-right:5px}.draw-page header .back{font-size:32px;min-width:30px;min-height:44px;display:grid;place-items:center}.draw-page header .account{font-size:10px;display:inline-flex;align-items:center;min-height:44px}
.intro{text-align:center;padding:8px 0 7px}.intro h1{position:relative;color:#004b29;font-size:clamp(29px,8.7vw,41px);letter-spacing:-1.4px;font-weight:950;line-height:1.05;margin:0}.intro h1:before,.intro h1:after{content:'✦';color:#e98a00;font-size:17px;vertical-align:middle;margin:0 7px}.draw-subtitle{font-size:12px;font-weight:650;font-style:italic;line-height:1.3;margin:3px 0 7px}.intro .prize{background:linear-gradient(110deg,#dc9b00,#ffe46b 48%,#e9ae0a);color:#004c28;font-size:20px;font-weight:900;line-height:1.1;border-radius:30px;padding:7px 26px;box-shadow:inset 0 1px 3px #fff7bc}
#drawScene{container-type:size;width:100%;height:auto;aspect-ratio:2.72;min-height:0;margin:0 0 8px;border-radius:18px;background:#70cfff url('pot-hole-preview-road.png') center/100% 100% no-repeat;overflow:hidden}
#drawScene .truck{top:auto;bottom:15%;left:8%;margin:0;width:70%;height:auto;filter:drop-shadow(0 3px 1px #1721163b)}
#drawScene .truck:before{bottom:0;left:5%;right:3%;height:4%;filter:blur(2px)}
#drawScene .truck img{width:100%;height:auto;display:block}
#drawScene .truck canvas{display:none}
#drawScene .truck-chute-origin{left:97%;top:51%}
#drawScene .truck-wheel-roll{display:none}
#drawScene .winner-ticket{left:37%;top:39%;width:54%;padding:6px 9px}
#drawScene .winner-ticket strong{font-size:20px}#drawScene .winner-ticket b{font-size:16px}#drawScene .winner-ticket small{font-size:8px}
#drawScene .tickets i.settled-ticket{left:calc(74% + var(--i)*3%);top:calc(78% + var(--i)*1.5%);width:27px;height:18px}
#drawScene.driving .truck{animation:preview-arrive 1.5s ease-out both}
#drawScene.departing .truck{animation:preview-depart 2.6s ease-in forwards}
#drawScene.departed .truck{visibility:hidden;transform:translateX(var(--truck-exit-distance,-800px))}
@keyframes preview-arrive{from{transform:translateX(130%)}to{transform:translateX(0)}}
@keyframes preview-depart{from{transform:translateX(0)}to{transform:translateX(var(--truck-exit-distance,-800px))}}
.entry-dashboard{padding:8px 10px 6px;border:2px solid #e4ac0c;border-radius:16px;background:#ffffffed;box-shadow:0 2px 6px #0e7f5410;margin:0 0 6px}
.entry-dashboard-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:7px}.entry-dashboard h2{font-size:12px;line-height:1.2;margin:0;color:#00552e;font-weight:900}.entry-dashboard-heading>strong{border-left:2px solid #ecc535;padding-left:8px;font-size:12px;white-space:nowrap}
.entry-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding:2px 2px 0}
.entry-stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:54px;padding:5px 2px;border:2px solid #65c4f8;border-radius:7px;color:#00552d;background:linear-gradient(140deg,#fff,#dff3ff);font-family:inherit;cursor:pointer}
.entry-stub:before,.entry-stub:after{content:'';position:absolute;top:43%;width:7px;height:10px;background:white;border:2px solid #65c4f8;border-radius:50%;box-sizing:border-box}.entry-stub:before{left:-5px}.entry-stub:after{right:-5px}
.entry-stub strong{font-size:18px;line-height:1}.entry-stub-icon{display:grid;place-items:center;background:#50baf5;color:#fff;border-radius:50%;width:19px;height:19px;font-size:17px;font-weight:800;line-height:1}
.entry-stub.confirmed{border-color:#e2a700;background:linear-gradient(125deg,#ffe986,#ffca22 65%,#e8a307);box-shadow:inset 0 0 0 2px #fff1a3,0 1px 2px #dda12535}
.entry-stub.confirmed:before,.entry-stub.confirmed:after{border-color:#e2a700}.entry-stub.confirmed .entry-stub-icon{background:#087339;font-size:14px}
.entry-stub.confirmed strong:after{content:'✦';position:absolute;right:0;top:-8px;color:#edb310;font-size:11px}
#entryCheer{text-align:center;font-size:12px;line-height:1.25;font-style:italic;font-weight:750;margin:7px 0 0;color:#00502a}
#drawStatus{background:transparent;border:0;border-radius:0;padding:0;margin:4px 0 0;font-size:10px;line-height:1.3;color:#557060;font-weight:500;text-align:center}
.dashboard-win{background:#075b35;color:#fff0a1;border-radius:9px;padding:6px;font-size:11px;text-align:center;font-weight:750;margin:5px 0 0}
#drawInfo{padding:0 4px;text-align:center}.count-row{display:block;font-size:12px;font-weight:800;padding:0;line-height:1.35;color:#00532d}#entryCount{display:none}.rule-summary{font-size:11px;font-style:italic;margin:2px 0 8px;line-height:1.3}
.tickets-primary{width:100%;min-height:44px;padding:9px 12px;border:0;border-radius:24px;background:linear-gradient(#00682f,#004a25);color:white;font-family:inherit;font-size:17px;font-weight:850;margin:0 0 7px;cursor:pointer}
#drawInfo .primary{display:block;width:82%;min-height:44px;padding:7px 10px;border:1.5px solid #078243;border-radius:15px;background:white;color:#005029;font-size:13px;line-height:1.2;margin:0 auto 3px;font-weight:800}
#drawInfo .links{display:flex;justify-content:space-evenly;gap:5px}.links button{font-size:12px;text-decoration:none;min-height:44px;padding:3px 6px;font-weight:750}.points-note{font-size:10px;line-height:1.25;border-top:1px solid #ead8a3;margin:0;padding-top:5px;color:#345b40;font-style:italic;font-weight:500}.animation-status{font-size:10px;line-height:1.3;min-height:0;margin:2px 0}.animation-status:empty{display:none}#signIn{font-size:11px}
.draw-page[data-view=draw] #myDrawTickets{display:none!important}
#myDrawTickets{margin:6px 4px}.ticket-back{border:0;background:transparent;color:#006039;font:750 13px system-ui;min-height:44px;padding:5px 0}.ticket-section-heading h2{font-size:19px}.ticket-section-note,.ticket-status{font-size:11px;margin:3px 0}.ticket-quota{font-size:12px;margin:5px 0}.draw-ticket-card{padding:10px 12px 7px}.ticket-brand{font-size:8px;margin-bottom:4px}.ticket-heading{gap:4px}.ticket-heading h3{font-size:20px}.ticket-fields{gap:8px;margin:8px 0}.ticket-fields dd{font-size:14px;margin-top:0}.ticket-reference{padding-top:6px}.ticket-code{font-size:12px;margin:0}.ticket-report,.ticket-explanation,.ticket-footer small{display:none}.ticket-footer{margin-top:7px;padding-top:3px;justify-content:flex-end}.ticket-copy{min-height:44px;padding:5px 9px}.ticket-pagination{align-items:center;gap:6px;margin:5px 0}#ticketPosition{font-size:11px;color:#52664c}.ticket-congratulations{margin:5px 0;padding:8px 11px}.ticket-congratulations h3{font-size:18px;margin:3px 0}.ticket-congratulations p{font-size:10px;margin:2px 0}.ticket-congratulations p:last-of-type{display:none}.ticket-congratulations .ticket-win-eyebrow{font-size:8px}.ticket-congratulations .ticket-copy{background:transparent;color:#fff0b2;border:0;font-size:11px}.draw-ticket-empty{padding:12px}
@media(min-height:740px){.intro{padding:12px 0 10px}#drawScene{aspect-ratio:2.3;margin-bottom:10px}.entry-dashboard{padding:10px 12px 8px;margin-bottom:9px}.entry-stub{min-height:64px}#entryCheer{margin-top:9px}.rule-summary{margin-bottom:10px}.tickets-primary{min-height:48px;margin-bottom:9px}}
@media(max-width:350px){.draw-page header strong{font-size:13px}.intro h1{font-size:27px}.intro h1:before,.intro h1:after{margin:0 4px;font-size:13px}.entry-dashboard h2{font-size:10px}.entry-dashboard-heading>strong{font-size:11px}.entry-slots{gap:6px}.entry-dashboard{padding-left:8px;padding-right:8px}.links button{font-size:11px}}
@media(max-height:600px){.intro{padding-top:4px;padding-bottom:5px}.intro h1{font-size:28px}.intro .prize{font-size:18px;padding:5px 22px}.draw-subtitle{font-size:11px;margin:2px 0 5px}#drawScene{aspect-ratio:2.85;margin-bottom:6px}.entry-dashboard{padding-top:6px;padding-bottom:5px}.entry-dashboard-heading{margin-bottom:4px}.entry-stub{min-height:48px}.entry-stub strong{font-size:16px}#entryCheer{font-size:11px;margin-top:5px}#drawStatus{font-size:9px}.tickets-primary{margin-bottom:5px}.rule-summary{font-size:10px;margin-bottom:6px}}
@media(prefers-reduced-motion:reduce){#drawScene.driving .truck,#drawScene.departing .truck{animation:none!important}.entry-stub{transition:none}}
/* The entry count already communicates an active draw's confirmation. */
.entry-dashboard[data-ready=true] #drawStatus[data-draw-state=active]{display:none}
@media(max-height:600px){
 #drawScene{aspect-ratio:3.05}
 .draw-page:has(#dashboardWin:not([hidden])) #drawScene{aspect-ratio:3.6}
 .dashboard-win{font-size:10px;line-height:1.25;margin-top:4px;padding:4px}
}
#drawScene .truck{width:min(72%,190cqh);left:calc(80% - min(72%,190cqh))}
.draw-page[data-view=tickets] .intro{display:none}
@media(max-height:600px){#myDrawTickets .ticket-section-note{display:none}#myDrawTickets:has(.draw-ticket-card) .ticket-status{display:none}.ticket-fields{margin:5px 0}.ticket-congratulations h3{font-size:16px}.ticket-congratulations .ticket-copy{min-height:36px}}
@media(max-height:700px){
 .draw-page:has(#dashboardWin:not([hidden])) .intro,.draw-page:has(#drawStatus[data-draw-state=result]) .intro{padding-top:4px;padding-bottom:4px}
 .draw-page:has(#dashboardWin:not([hidden])) #drawScene,.draw-page:has(#drawStatus[data-draw-state=result]) #drawScene,.draw-page:has(#drawStatus[data-draw-state=error]) #drawScene{aspect-ratio:3.6}
}
@media(max-height:600px){.draw-page:has(#dashboardWin:not([hidden])) .draw-subtitle{display:none}}
/* Explicit visibility also holds when button layout rules set display. */
.draw-page [hidden]{display:none!important}
.ui-icon{width:19px;height:19px;vertical-align:-4px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-right:4px}.tickets-primary .ui-icon{color:#ffcf35;width:22px;height:22px}
@media(min-height:701px){.draw-page:has(#dashboardWin:not([hidden])) #drawScene{aspect-ratio:2.7}}
@media(max-height:600px){.ticket-brand{display:none}.ticket-heading h3{font-size:17px}.ticket-badge{font-size:9px;padding:4px 6px}}
.entry-dashboard:has(#dashboardWin:not([hidden])) #drawStatus[data-draw-state=result]{display:none}