:root{
  --ink:#1d1233; --sun:#ffd23f; --tomato:#ff4a2e; --cobalt:#2b59ff; --mint:#3ddc97; --pink:#ff7eb9; --paper:#fff6e9;
  --font:"Fredoka",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--paper);font-family:var(--font);overflow:hidden;-webkit-tap-highlight-color:transparent}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#stage.grabbing{cursor:grabbing}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}
.sign{position:fixed;left:50%;top:-320px;transition:top .9s cubic-bezier(.34,1.56,.5,1);width:min(520px,72vw);transform-origin:50% -60px;transform:translateX(-50%) rotate(var(--swing,0deg));pointer-events:none;z-index:3;padding-top:clamp(26px,5vh,54px)}
.sign::before,.sign::after{content:"";position:absolute;top:-10px;width:4px;height:calc(clamp(26px,5vh,54px) + 26px);background:repeating-linear-gradient(180deg,#c9b8ff 0 6px,#8f7ad6 6px 12px);border-radius:2px}
.sign::before{left:18%}.sign::after{right:18%}
.sign img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.plate{position:relative}
.splash2{position:absolute;left:52%;top:60%;transform-origin:0 0;pointer-events:auto;cursor:pointer}
.splash2.sticker,.splash2.foil{top:72%}
.sp-canvas{position:absolute;left:0;top:0;pointer-events:none}
.sp-words{position:absolute;display:flex;align-items:center;justify-content:center;font-family:"Pixelify Sans",var(--font);font-weight:700;white-space:nowrap;line-height:1}
.bubble .sp-words{color:var(--tomato)}
.sticker .sp-words,.foil .sp-words{color:#fff;-webkit-text-stroke:calc(var(--u) * 3.2) var(--ink);paint-order:stroke fill}
.plaque{position:fixed;left:50%;bottom:clamp(14px,3.2vh,34px);transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 22px 11px;background:var(--sun);color:var(--ink);border:3px solid var(--ink);border-radius:14px;box-shadow:0 5px 0 var(--ink),0 14px 28px rgba(0,0,0,.4);text-align:center;max-width:calc(100vw - 32px)}
.plaque b{font-size:clamp(15px,2vw,19px);letter-spacing:.14em}
.plaque span{font-size:clamp(12px,1.5vw,14px);font-weight:500}
.tally{position:fixed;right:16px;bottom:16px;z-index:3;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:999px;background:rgba(29,18,51,.78);border:2px solid rgba(255,255,255,.14);font-size:12px;font-weight:600;letter-spacing:.04em}
.tally b{min-width:26px;padding:2px 8px;border-radius:999px;background:var(--tomato);color:#fff;text-align:center;font-size:13px}
.pop{position:fixed;left:0;top:0;z-index:4;pointer-events:none;padding:8px 14px;border-radius:14px;background:#fff;color:var(--ink);border:3px solid var(--ink);font-weight:700;font-size:clamp(14px,1.8vw,18px);white-space:nowrap;box-shadow:0 4px 0 var(--ink);opacity:0;transform:translate(-50%,-100%) scale(.6);transition:opacity .18s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.pop.on{opacity:1;transform:translate(-50%,-120%) scale(1)}
.loading{position:fixed;inset:0;display:grid;place-items:center;z-index:5;background:var(--ink);font-weight:600;letter-spacing:.06em;transition:opacity .5s}
.loading.done{opacity:0;pointer-events:none}
body.lit .sign{top:0}
.plaque,.ticket,.tally,.sound{opacity:0;transition:opacity .6s .3s}
body.spot .plaque,body.spot .ticket,body.spot .tally,body.spot .sound{opacity:1}
.sound{position:fixed;right:16px;top:16px;z-index:3;display:flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;border-radius:999px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);font:600 13px var(--font);cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .2s cubic-bezier(.3,1.8,.5,1),opacity .6s .3s,background .2s}
.sound:hover{transform:rotate(3deg) scale(1.05)}.sound:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.sound:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.sound svg{width:20px;height:20px}.sound svg path:not(:first-child){fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.sound[aria-pressed="true"]{background:var(--sun)}.sound[aria-pressed="true"] .x{display:none}.sound[aria-pressed="false"] .w1,.sound[aria-pressed="false"] .w2{display:none}
.pg-credits{margin:10px 0 0;font-size:11px;color:#6b5b8a}.pg-credits a{color:inherit}
#stage{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='%23fff' stroke='%231d1233' stroke-width='2.4' stroke-linejoin='round'%3E%3Crect x='11' y='3' width='6.5' height='19' rx='3.2'/%3E%3Crect x='17.5' y='2' width='6.5' height='20' rx='3.2'/%3E%3Crect x='24' y='4' width='6.5' height='18' rx='3.2'/%3E%3Cpath d='M6 21c-2-3 1-6 4-4l3 3V17h18v9c0 7-5 11-11 11S8 33 6 21z'/%3E%3Crect x='12' y='35' width='15' height='6' rx='2.5'/%3E%3C/g%3E%3C/svg%3E") 20 4,grab}
#stage.grabbing{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='%23fff' stroke='%231d1233' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M8 16c0-3 3-5 6-4 1-2 4-3 6-1 2-2 5-2 6 0 3-1 6 1 6 4v8c0 8-5 12-12 12S8 32 8 24z'/%3E%3Cpath d='M14 12v7M20 11v8M26 11v8' fill='none'/%3E%3Crect x='12' y='35' width='16' height='6' rx='2.5'/%3E%3C/g%3E%3C/svg%3E") 20 14,grabbing}
.ticket{position:fixed;left:16px;bottom:16px;z-index:3;font:600 13px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--paper);border:0;padding:10px 18px;cursor:pointer;
  -webkit-mask:radial-gradient(circle 7px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 7px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;transition:transform .2s cubic-bezier(.3,1.8,.5,1),opacity .6s .3s}
.ticket:hover{transform:rotate(-4deg) scale(1.06)}
.ticket:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.programme{border:0;padding:0;background:transparent;max-width:min(420px,calc(100vw - 32px));width:100%;color:var(--ink)}
.programme::backdrop{background:rgba(29,18,51,.72);backdrop-filter:blur(3px)}
.programme[open]{animation:pg .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes pg{from{transform:translateY(40px) rotate(-6deg);opacity:0}}
.pg-inner{background:var(--paper);border:3px solid var(--ink);border-radius:18px;padding:24px 24px 18px;box-shadow:0 8px 0 var(--ink);text-align:center;position:relative;outline:2px dashed #ff7eb9;outline-offset:-12px}
.pg-kicker{margin:6px 0 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#7a5fd0;font-weight:600}
.programme h2{margin:4px 0 0;font-size:42px;line-height:1;color:var(--tomato)}
.pg-sub{margin:4px 0 14px;font-style:italic;font-weight:500}
.programme dl{margin:0 0 12px;display:grid;gap:4px}
.programme dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:2px dotted #d7c9ff;padding:4px 2px;font-size:15px}
.programme dt{font-weight:600}.programme dd{margin:0;font-weight:500;text-align:right}
.pg-rules{list-style:none;margin:0 0 14px;padding:0;font-size:13px;display:grid;gap:4px}
.stub{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border:2px dashed var(--ink);border-radius:10px;font-size:12px;font-weight:700;letter-spacing:.1em;background:#ffe9f3}
.pg-close{margin-top:14px;font:600 14px var(--font);border:3px solid var(--ink);border-radius:999px;padding:8px 22px;background:var(--sun);color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.pg-close:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.zzz{position:fixed;left:0;top:0;z-index:2;pointer-events:none;font:700 26px "Pixelify Sans",var(--font);color:#c9b8ff;text-shadow:2px 2px 0 var(--ink)}
.sign.dangle::after{opacity:0;transition:opacity .2s}
.sign.dangle .plate{transform-origin:18% 0;animation:dangle 3.2s cubic-bezier(.3,1.2,.5,1) forwards}
@keyframes dangle{0%{transform:rotate(0)}14%{transform:rotate(64deg)}30%{transform:rotate(46deg)}46%{transform:rotate(58deg)}62%{transform:rotate(51deg)}100%{transform:rotate(55deg)}}
.sign.hoist .plate{transform-origin:18% 0;animation:hoist 1.1s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes hoist{from{transform:rotate(55deg)}to{transform:rotate(0)}}
@media (max-width:640px){.sound{top:auto;bottom:16px;right:12px;padding:7px 10px}.sound span{display:none}.tally{right:64px!important}.sign{width:84vw}.splash2{left:24%;top:70%}.splash2.sticker,.splash2.foil{top:80%}.plaque{bottom:64px;padding:8px 16px}.plaque b{white-space:nowrap}.tally{right:12px;bottom:16px}.tally span{display:none}.ticket{left:12px}}