body{--stage:#2F12C4;--deep:#190773;--yellow:#FFD60A;--pink:#FF2F7E;--cyan:#21D4F5;--paper:#FFFBEA;--ink:#150550;
  --disp:"Bungee","Arial Black",sans-serif;--sans:"Rubik",system-ui,sans-serif;
  --bulb:radial-gradient(circle,#FFF3A8 0 28%,var(--yellow) 36%,transparent 44%);
  background:var(--deep);color:#fff;font:400 1.0625rem/1.55 var(--sans)}
body.is-dokon{--stage:#C8102E;--deep:#6E0519;--pink:#0B2FB0;--cyan:#21D4F5;--ink:#3D020D}
.l-wrap{width:min(100% - 2.5rem,1240px);margin-inline:auto}

/* Hero */
.l-hero{position:relative;background:var(--stage);padding-bottom:clamp(2rem,4vw,3.4rem);border-bottom:10px solid var(--yellow)}
.l-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem}
.l-addr{display:flex;align-items:center;gap:.4rem;font-weight:500}
.l-phone{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:1.1rem;text-decoration:none;white-space:nowrap}
.l-phone:hover{color:var(--yellow)}
.l-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,4rem);align-items:center;margin-top:clamp(1rem,2.4vw,2rem)}
.l-chip{display:inline-block;padding:.35rem .8rem;background:var(--yellow);color:var(--ink);font-weight:700}
.l-hero h1{margin-top:1rem;font:400 clamp(2.2rem,5.2vw,4.9rem)/1.02 var(--disp);text-shadow:.055em .055em 0 var(--deep)}
.l-hero h1 span{display:block}
.l-hero h1 span:last-child{color:var(--yellow)}
.l-sub{margin:1.2rem 0 1.6rem;max-width:32rem;font-size:1.25rem;line-height:1.4}
.l-money{margin:1.1rem 0 1.5rem}
.l-money b{display:block;font:400 clamp(2.6rem,6.2vw,5.4rem)/1.05 var(--disp)}
.l-money small{display:block;font-size:1.1rem;max-width:32rem}
.l-btn,.l-spin,.lf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:60px;padding:0 2rem;border:0;border-radius:14px;background:var(--yellow);color:var(--ink);font:400 1.15rem/1.1 var(--disp);text-decoration:none;cursor:pointer;box-shadow:0 7px 0 var(--deep);transition:transform .08s,box-shadow .08s}
.l-btn:hover,.l-spin:hover,.lf-btn:hover{background:#FFE23D}
.l-btn:active,.l-spin:active,.lf-btn:active{transform:translateY(5px);box-shadow:0 2px 0 var(--deep)}

/* Machine with a chasing-lights frame that only runs during a spin */
.l-machine{position:relative;padding:26px;background:var(--deep);border-radius:26px;
  background-image:var(--bulb),var(--bulb),var(--bulb),var(--bulb);background-size:26px 26px;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-position:0 0,0 100%,0 0,100% 0}
.l-machine.is-spin{animation:l-chase .5s linear infinite}
@keyframes l-chase{to{background-position:26px 0,-26px 100%,0 -26px,100% 26px}}
.l-drum{width:min(100%,clamp(240px,42vh,420px));margin-inline:auto}
#drum{width:100%;height:auto;aspect-ratio:1}
.l-panel{margin-top:.5rem}
.l-tiers legend{font-weight:500;margin-bottom:.35rem}
.l-tiers div{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:.4rem}
.l-tiers input{position:absolute;opacity:0;width:1px;height:1px}
.l-tiers label{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 .4rem;border:2px solid #fff;border-radius:10px;font-weight:700;text-align:center;cursor:pointer;transition:background-color .12s,color .12s}
.l-tiers input:checked+label{background:#fff;color:var(--ink)}
.l-tiers input:focus-visible+label{outline:3px solid var(--yellow);outline-offset:2px}
.l-count{margin:.55rem 0;font-size:1.05rem}
.l-count b{color:var(--yellow)}
.l-spin{width:100%;box-shadow:0 6px 0 #000a}
.l-spin[disabled]{opacity:.65;cursor:progress}
.l-result{min-height:3em;margin-top:.9rem;font-size:.98rem;line-height:1.35}
.l-result.is-win{color:var(--yellow);font-weight:700}

/* Intro and ticket form */
.l-intro{background:var(--yellow);color:var(--ink);padding:clamp(3.2rem,7vw,6rem) 0}
.l-intro-in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.l-h2{font:400 clamp(2rem,4.6vw,4rem)/1.05 var(--disp)}
.l-lede{margin-top:1rem;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.25;font-weight:700}
.l-body{margin-top:1rem;max-width:34rem;font-size:1.15rem}
.l-form{display:grid;grid-template-columns:72px 1fr;background:var(--paper);border-radius:18px;box-shadow:10px 10px 0 var(--stage);
  --cut:radial-gradient(circle 13px at 72px 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at 72px 100%,#0000 98%,#000) bottom/100% 51% no-repeat;filter:drop-shadow(8px 8px 0 var(--stage))}
.l-form{box-shadow:none;background:none}
.l-form-stub,.l-form-main{background:var(--paper)}
.l-form-stub{display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font:400 1.5rem/1 var(--disp);color:var(--stage);border-radius:0 18px 18px 0;border-left:3px dashed var(--ink)}
.l-form-main{padding:clamp(1.4rem,3vw,2.3rem);border-radius:0 18px 18px 0}
.l-form-main h2{font:400 clamp(1.6rem,2.6vw,2.2rem)/1.1 var(--disp)}
.l-form-main>p{margin:.35rem 0 1.1rem}
.lf-field{margin-bottom:.9rem}
.lf-field label{display:block;margin-bottom:.2rem;font-weight:700}
.lf-field input{width:100%;height:54px;padding:0 1rem;border:3px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);font-size:1.08rem}
.lf-field input:focus{outline:3px solid var(--stage);outline-offset:1px}
.lf-field input::placeholder{color:#6d6890}
.lf-phone{display:flex}
.lf-phone span{display:flex;align-items:center;padding:0 .75rem;background:var(--ink);color:#fff;font-weight:700;border-radius:10px 0 0 10px}
.lf-phone input{border-radius:0 10px 10px 0}
.lf-msg{color:#B00020;font-weight:700;margin-bottom:.4rem}
.lf-btn{width:100%;box-shadow:0 6px 0 var(--ink)}
.lf-done h3{font:400 1.8rem/1.1 var(--disp)}
.lf-done p{margin-top:.4rem}

/* Prize board */
.l-prizes{background:var(--deep);padding:clamp(3.2rem,7vw,6rem) 0}
.l-board{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(220px,auto);gap:1rem;margin-top:clamp(1.8rem,4vw,3rem)}
.l-prize{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--stage);border-radius:18px;border:4px solid var(--yellow)}
.l-prize-0{grid-column:span 2;grid-row:span 2}
.l-prize-1{grid-column:span 2}
.l-prize img{flex:1 1 0;min-height:0;width:100%;object-fit:cover;object-position:center 68%}
.l-prize p{padding:.7rem 1rem .8rem;line-height:1.2}
.l-prize b{display:block;font:400 clamp(1.6rem,3vw,2.8rem)/1.05 var(--disp);color:var(--yellow)}
.l-prize span{font-weight:700;font-size:1.15rem}
.l-prize-icon{flex:1 1 0;display:grid;place-items:center;min-height:110px;color:var(--yellow)}
.l-prize-icon svg{width:64px;height:64px}

/* Coupons */
.l-coupons{background:var(--stage);padding:clamp(3.2rem,7vw,6rem) 0}
.l-coupons .l-h2{max-width:22ch;text-shadow:.05em .05em 0 var(--deep)}
.l-steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem 2rem;margin:clamp(1.8rem,4vw,3rem) 0}
.l-steps li{counter-increment:s}
.l-steps li::before{content:counter(s);display:block;font:400 4rem/1 var(--disp);color:var(--yellow)}
.l-steps b{display:block;font-size:1.25rem;font-weight:700;line-height:1.25;margin-top:.3rem}
.l-tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.l-ticket{--m:radial-gradient(circle 12px at 0 66%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 66%,#0000 98%,#000) right/51% 100% no-repeat;display:grid;grid-template-rows:66% 34%;height:270px;background:var(--paper);color:var(--ink);text-align:center;border-radius:14px;-webkit-mask:var(--m);mask:var(--m)}
.l-ticket-3{background:var(--yellow)}
.l-ticket>div{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.6rem}
.l-ticket-a b{font:400 clamp(2rem,3.6vw,3.2rem)/1.05 var(--disp)}
.l-ticket-a span{font-weight:500;margin-top:.3rem}
.l-ticket-b{border-top:3px dashed var(--ink);gap:.4rem}
.l-ticket-b strong{font-weight:800;font-size:1.2rem}
.l-holes{display:flex;gap:.4rem}
.l-holes i{width:18px;height:18px;border-radius:50%;background:var(--stage)}
.l-rules{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 3rem;margin-top:clamp(1.8rem,4vw,3rem);font-size:1.1rem}

/* Date */
.l-day{background:var(--yellow);color:var(--ink);padding:clamp(2.4rem,5vw,4rem) 0}
.l-day-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 3rem}
.l-day-date{font:400 clamp(2.5rem,7.4vw,6.2rem)/1 var(--disp);text-shadow:.04em .04em 0 var(--pink)}
.is-dokon .l-day-date{color:var(--stage);text-shadow:.04em .04em 0 var(--ink)}
.l-day-text{flex:1 1 16rem;max-width:26rem;font-size:1.25rem;line-height:1.3;font-weight:700}
.l-btn-dark{background:var(--ink);color:var(--yellow);box-shadow:0 7px 0 var(--stage)}
.l-btn-dark:hover{background:var(--deep)}

/* Footer */
.l-foot{padding:2.8rem 0}
.l-foot-in{display:flex;flex-wrap:wrap;gap:2rem 4rem;align-items:center;justify-content:space-between}
.l-foot-promo{margin-top:.6rem;font:400 1.4rem/1 var(--disp);color:var(--yellow)}
.l-foot-links{display:flex;flex-direction:column;gap:.2rem}
.l-foot a{text-decoration:none}
.l-foot-links a:hover{color:var(--yellow)}
.cross u{color:var(--yellow);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.l-intro :focus-visible,.l-day :focus-visible{outline-color:var(--ink)}

.dock{background:var(--deep);border-top:4px solid var(--yellow)}
.dock-call{border:2px solid #fff;border-radius:12px}
.dock-cta{background:var(--yellow);color:var(--ink);border-radius:12px}

@media (max-width:980px){
  .l-hero-in,.l-intro-in{grid-template-columns:minmax(0,1fr)}
  .l-addr{display:none}
  .l-board{grid-template-columns:1fr 1fr}
  .l-prize-0,.l-prize-1{grid-column:span 2}
  .l-prize-0{grid-row:auto}
  .l-prize-0 img,.l-prize-1 img{aspect-ratio:16/10;flex:none}
  .l-drum{width:min(100%,380px)}
}
@media (max-width:760px){
  .l-steps,.l-rules,.l-tickets{grid-template-columns:1fr}
  .l-ticket{height:220px;max-width:420px}
}
@media (max-width:640px){
  :root,body{--logo-h:46px}
  .l-phone{font-size:1rem}
  .l-machine{padding:22px 20px;background-size:20px 20px}
  .l-btn{width:100%}
  .l-form{grid-template-columns:48px 1fr}
  .l-form-stub{font-size:1.1rem}
  .l-board{grid-auto-rows:auto}
  .l-prize img{aspect-ratio:4/3;flex:none}
  .l-prize span{font-size:1rem}
  .l-tiers label{font-size:.95rem}
}