[hidden]{display:none!important}
:root{
  --paper:#efe0bd; --paper2:#e6d1a2; --ink:#1c1410; --blood:#7d1d14; --blood2:#a1291b;
  --mustard:#e3a72f; --teal:#1f5650; --cream:#fff6dd; --rose:#d9826a;
  --cond:"Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --didot:"GFS Didot", Georgia, serif; --mono:"Fira Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); font-family:var(--didot); font-size:18px; line-height:1.4;
  background-color:var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 30%, rgba(255,246,221,.7), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(125,29,20,.18), transparent 55%);
  min-height:100vh; overflow-x:hidden;
}
button{font:inherit;color:inherit;cursor:pointer}

/* ——— signboard ——— */
.sign{padding:18px 14px 0; display:flex; justify-content:center}
.sign-board{
  position:relative; width:min(640px,100%); text-align:center; color:var(--cream);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 9px),
    linear-gradient(180deg,#8c2318,#6d170f);
  border:3px solid var(--ink); border-radius:6px 6px 40px 40px / 6px 6px 18px 18px;
  box-shadow:0 0 0 6px var(--mustard), 0 0 0 9px var(--ink), 8px 12px 0 9px rgba(28,20,16,.25);
  padding:14px 18px 18px; margin:10px 6px 4px;
}
.screw{position:absolute;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f6e2a6,#9a7420 70%);border:1.5px solid var(--ink)}
.screw::after{content:"";position:absolute;left:1px;right:1px;top:4px;height:1.5px;background:var(--ink);transform:rotate(35deg)}
.tl{left:9px;top:9px}.tr{right:9px;top:9px}.bl{left:14px;bottom:12px}.br{right:14px;bottom:12px}
.sign-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:2px 0 0;color:#f2c96b}
.sign-arch{display:block;width:100%;max-width:520px;margin:-4px auto -38px;overflow:visible}
.sign-arch text{font-family:var(--cond);font-weight:900;font-size:58px;letter-spacing:.08em}
.arch-text{fill:var(--cream)} .arch-shadow{fill:var(--ink);transform:translate(4px,4px)}
.sign-big{margin:0;font-family:var(--cond);font-weight:900;font-size:clamp(84px,25vw,150px);line-height:.8;letter-spacing:.02em}
.sign-big span{
  display:inline-block; color:var(--mustard); filter:url(#rough);
  text-shadow:-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),2px 2px 0 var(--ink),5px 5px 0 var(--ink),8px 8px 0 #3b0c07;
}
.sign-sub{margin:8px 0 0;font-size:19px;color:var(--cream)}
.sign-sub em{color:#f2c96b}

/* ——— stages ——— */
main{max-width:980px;margin:0 auto;padding:6px 12px 10px}
.stage{position:relative;display:flex;flex-direction:column;align-items:center;padding:22px 0 8px}
.stage-label{display:flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:.04em}
.stage-label .num{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:var(--ink);color:var(--mustard);font-size:24px;transform:rotate(-8deg);
  box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 5px var(--mustard);
}
.wheel-wrap{
  --size:min(92vw,520px); position:relative; width:var(--size); height:var(--size); margin:26px auto 8px;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
.wheel-wrap.small{--size:min(92vw,480px)}
.wheel-wrap::before{ /* sunburst behind */
  content:"";position:absolute;inset:-14%;border-radius:50%;z-index:-1;
  background:repeating-conic-gradient(from 0deg, rgba(227,167,47,.28) 0 7.5deg, transparent 7.5deg 15deg);
  -webkit-mask:radial-gradient(circle, #000 35%, transparent 70%); mask:radial-gradient(circle, #000 35%, transparent 70%);
}
.wheel{position:absolute;inset:7%;width:86%;height:86%;border-radius:50%;cursor:grab;
  box-shadow:0 0 0 5px var(--ink), 10px 14px 0 2px rgba(28,20,16,.22)}
.wheel.blur{filter:blur(1.1px)}
.bulbs{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, transparent 59.5%, var(--ink) 60%, var(--ink) 61%, #8c2318 61.5%, #6d170f 71%, var(--ink) 71.5%);
}
.bulb{position:absolute;width:4.2%;height:4.2%;margin:-2.1% 0 0 -2.1%;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#fffbe8,#f6cd62 45%,#b9801a);border:1.5px solid var(--ink);
  box-shadow:0 0 10px 3px rgba(255,214,110,.75)}
.bulb.off{background:radial-gradient(circle at 38% 35%,#d9c79c,#8b6b2e 60%);box-shadow:none}
.hub{position:absolute;left:50%;top:50%;width:15%;height:15%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f7dc8e,#c48a1f 60%,#8a5b0e);border:3px solid var(--ink);
  display:grid;place-items:center;box-shadow:3px 4px 0 rgba(28,20,16,.35);pointer-events:none}
.hub span{font-family:var(--didot);font-size:clamp(20px,5vw,30px);color:var(--blood);font-style:italic}
.flapper{position:absolute;left:50%;top:-1.5%;width:11%;margin-left:-5.5%;transform-origin:50% 26%;z-index:3;
  filter:drop-shadow(3px 4px 0 rgba(28,20,16,.35))}

.controls{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:10px}
.lever{
  position:relative;border:3px solid var(--ink);background:var(--blood);color:var(--cream);
  font-family:var(--cond);font-weight:900;font-size:30px;letter-spacing:.06em;padding:12px 38px 10px;
  border-radius:999px 999px 999px 999px / 60% 60% 40% 40%;
  box-shadow:0 6px 0 var(--ink), inset 0 -5px 0 rgba(0,0,0,.25), inset 0 3px 0 rgba(255,255,255,.18);
  transition:transform .08s, box-shadow .08s;
}
.lever span{display:inline-block;transform:translateY(1px)}
.lever:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink), inset 0 -3px 0 rgba(0,0,0,.25)}
.lever:disabled{opacity:.7;cursor:wait}
.lever.teal{background:var(--teal)}
.link-btn{background:none;border:0;padding:4px 2px;font-family:var(--didot);font-style:italic;font-size:18px;
  color:var(--blood);text-decoration:underline wavy rgba(125,29,20,.45);text-underline-offset:5px}
.small-actions{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}

.verdict{min-height:1.6em;margin:14px 0 0;font-family:var(--cond);font-weight:800;font-size:30px;text-align:center}
.verdict b{color:var(--blood);font-weight:900;background:linear-gradient(transparent 62%, rgba(227,167,47,.55) 62%);padding:0 4px}

/* drawer of stamps */
.drawer{width:min(720px,100%);margin-top:12px;padding:14px 12px 10px;border:2px dashed rgba(28,20,16,.45);background:rgba(255,246,221,.45)}
.drawer-note{margin:0 0 10px;font-size:16px;text-align:center}
.stamps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.stamp{
  position:relative;font-family:var(--cond);font-weight:800;font-size:19px;letter-spacing:.03em;padding:5px 11px 4px;
  background:var(--cream);border:2px solid var(--ink);color:var(--ink);transform:rotate(var(--r,0deg));
}
.stamp small{font-family:var(--mono);font-weight:400;font-size:11px;opacity:.7;margin-left:4px}
.stamp[aria-pressed="true"]{background:var(--ink);color:var(--mustard)}
.drawer-actions{display:flex;gap:18px;justify-content:center;margin-top:10px}

.stage2{border-top:3px double rgba(28,20,16,.5);margin-top:18px}
.pool-note{font-size:15px;margin:10px 0 0;text-align:center;opacity:.8;max-width:34em}

/* ——— ticket ——— */
.ticket{
  --hole:radial-gradient(circle at 0 50%, transparent 9px, #000 9.5px);
  display:flex;width:min(640px,100%);margin:22px auto 6px;filter:drop-shadow(6px 8px 0 rgba(28,20,16,.28));
  transform-origin:50% 0;
}
.ticket.show{animation:drop .7s cubic-bezier(.2,1.5,.4,1) both}
@keyframes drop{from{transform:translateY(-30px) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.ticket-stub{
  flex:0 0 74px;background:var(--mustard);border:2.5px solid var(--ink);border-right:0;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12px 4px;
  writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);
  -webkit-mask:radial-gradient(circle at 50% 0, transparent 9px,#000 9.5px) top/100% 51% no-repeat, radial-gradient(circle at 50% 100%, transparent 9px,#000 9.5px) bottom/100% 51% no-repeat;
}
.stub-label{font-family:var(--cond);font-weight:900;font-size:26px;letter-spacing:.2em}
.stub-no{font-size:14px}
.stub-cat{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.ticket-body{
  flex:1;min-width:0;background:var(--cream);border:2.5px solid var(--ink);border-left:2.5px dashed var(--ink);padding:16px 16px 14px;
  background-image:repeating-linear-gradient(0deg, transparent 0 27px, rgba(31,86,80,.08) 27px 28px);
}
.ticket-head{display:flex;gap:12px;align-items:center}
.t-logo{position:relative;width:70px;height:70px;flex:0 0 70px;border:2.5px solid var(--ink);border-radius:50%;overflow:hidden;transform:rotate(-4deg);
  background:repeating-linear-gradient(45deg,var(--mustard) 0 6px,#d8981f 6px 12px);display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink)}
.t-logo span{font-family:var(--cond);font-weight:900;font-size:38px;color:var(--blood)}
.t-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff;opacity:0;transition:opacity .3s}
.t-logo img.ok{opacity:1}
.t-kicker{margin:0;font-style:italic;font-size:16px;color:var(--teal)}
.ticket h2{margin:0;font-family:var(--cond);font-weight:900;font-size:clamp(30px,8vw,42px);line-height:.95;overflow-wrap:anywhere}
.t-desc{margin:4px 0 0;font-size:15px;opacity:.8}
.t-facts{display:grid;grid-template-columns:repeat(4,1fr);margin:14px 0 8px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.t-facts div{padding:7px 6px;border-right:1px dashed rgba(28,20,16,.5)}
.t-facts div:last-child{border-right:0}
.t-facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.t-facts dd{margin:2px 0 0;font-family:var(--cond);font-weight:800;font-size:22px;white-space:nowrap}
.t-addr{margin:0 0 12px;font-family:var(--mono);font-size:13px}
.wolt-btn{display:inline-block;background:var(--teal);color:var(--cream);text-decoration:none;font-family:var(--cond);font-weight:900;
  font-size:24px;letter-spacing:.05em;padding:9px 20px 7px;border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(-1deg)}
.wolt-btn:active{transform:translate(3px,3px) rotate(-1deg);box-shadow:1px 1px 0 var(--ink)}
.t-small{font-size:13px;margin:10px 0 0;opacity:.7;font-style:italic}

/* footer */
.foot{max-width:720px;margin:10px auto 0;padding:16px 16px calc(28px + env(safe-area-inset-bottom));text-align:center}
.foot-row{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:17px}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle .box{width:22px;height:22px;border:2.5px solid var(--ink);background:var(--cream);position:relative;transform:rotate(-3deg)}
.toggle input:checked + .box::after{content:"";position:absolute;left:5px;top:-6px;width:8px;height:18px;border:solid var(--blood);border-width:0 4px 4px 0;transform:rotate(40deg)}
.toggle input:focus-visible + .box{outline:3px solid var(--mustard)}
.fine{font-family:var(--mono);font-size:11.5px;margin:4px 0;opacity:.7}

#confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:50}

@media (min-width:900px){
  .sign-board{width:560px}
  .sign-big{font-size:118px}
  .sign-arch{max-width:420px;margin-bottom:-30px}
  .stage{padding-top:16px}
  .wheel-wrap{--size:min(560px,62vh)}
  .wheel-wrap.small{--size:min(520px,60vh)}
}
@media (max-width:520px){
  .stamp{font-size:16px;padding:3px 8px 2px}
  .stamps{gap:6px}
}
@media (max-width:420px){
  .t-facts{grid-template-columns:repeat(2,1fr)}
  .t-facts div:nth-child(2){border-right:0}
  .t-facts div:nth-child(-n+2){border-bottom:1px dashed rgba(28,20,16,.5)}
  .ticket-stub{flex-basis:56px}
  .stub-label{font-size:22px}
  .lever{font-size:27px;padding:11px 30px 9px}
}
@media (prefers-reduced-motion:reduce){.ticket.show{animation:none}}

.hint{margin:0;font-style:italic;font-size:15px;opacity:.65}
.link-btn.tiny{font-size:14px;padding:0;margin-left:4px}
.empty{font-style:italic;color:var(--blood);text-align:center}
@media (hover:none){.hint{display:block}}
@media (min-width:1100px){
  main.duo{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1240px;align-items:start}
  main.duo .stage2{border-top:0;margin-top:0;border-left:3px double rgba(28,20,16,.35);padding-left:20px}
  main.duo .wheel-wrap,main.duo .wheel-wrap.small{--size:min(500px,38vw,62vh)}
  main.duo .ticket{width:100%}
}