@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wdth,wght@62..125,100..900&family=JetBrains+Mono:wght@400;700;800&display=swap');

/* Hazmat zone: a blank page, then emergency lighting over a live slop pool.
   One sticker language everywhere: cream/yellow cards, 4px ink borders, hard shadows.
   Anton for signage, condensed grotesk for stickers, mono for small print. */
:root{
  color-scheme:dark;
  --paper:#fbfaf6;
  --void:#0f0a07;
  --ink:#111;
  --slop:#a7773f;
  --slop-ink:#24150a;
  --pea:#9cc33b;
  --cream:#f2e4c4;
  --hazard:#ffd60a;
  --alarm:#e3121b;
  --stencil:'Anton',Impact,'Arial Narrow',sans-serif;
  --grot:'Archivo','Arial Narrow',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --stripes:repeating-linear-gradient(-45deg,var(--hazard) 0 14px,var(--ink) 14px 28px);
  --pop:cubic-bezier(.3,1.6,.5,1);
  --drip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 135'%3E%3Cpath d='M0 0H600V10H21c4 0 6 3 6 9v38a7 7 0 0 0 14 0v-38c0-6 2-9 6-9H75c4 0 6 3 6 9v74a11 11 0 0 0 22 0v-74c0-6 2-9 6-9H139c4 0 6 3 6 9v26a5 5 0 0 0 10 0v-26c0-6 2-9 6-9H191c4 0 6 3 6 9v54a9 9 0 0 0 18 0v-54c0-6 2-9 6-9H249c4 0 6 3 6 9v96a13 13 0 0 0 26 0v-96c0-6 2-9 6-9H318c4 0 6 3 6 9v34a6 6 0 0 0 12 0v-34c0-6 2-9 6-9H368c4 0 6 3 6 9v64a10 10 0 0 0 20 0v-64c0-6 2-9 6-9H427c4 0 6 3 6 9v30a7 7 0 0 0 14 0v-30c0-6 2-9 6-9H474c4 0 6 3 6 9v84a12 12 0 0 0 24 0v-84c0-6 2-9 6-9H544c4 0 6 3 6 9v44a6 6 0 0 0 12 0v-44c0-6 2-9 6-9H600V0Z'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;overflow:hidden;font-synthesis:none;background:radial-gradient(ellipse at 50% -10%,#2d1a10,transparent 60%),var(--void);color:var(--cream);font:400 15px/1.6 var(--mono);-webkit-tap-highlight-color:transparent;transition:background-color .35s}
body.clean{background:var(--paper)}
body.flash{background:var(--alarm)}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
:focus-visible{outline:4px dashed var(--hazard);outline-offset:5px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shake{animation:shake .45s}
@keyframes shake{15%,55%{translate:-12px 4px}35%,75%{translate:11px -5px}90%{translate:-3px 1px}}

/* ───────── atmosphere ───────── */
.bg-type{position:fixed;inset:-4vh 0;z-index:0;display:grid;align-content:space-between;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.2s}
body.alarm .bg-type,body.in-lab .bg-type{opacity:1}
.bg-type .row{white-space:nowrap;font:900 30vh/.82 var(--stencil);color:transparent;-webkit-text-stroke:1.5px #f2e4c417}
.bg-type .row span{display:inline-block;animation:drift 70s linear infinite}
.bg-type .r2 span{animation-direction:reverse;animation-duration:90s}
@keyframes drift{to{transform:translateX(-50%)}}
.beacon{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .8s}
.beacon::before{content:'';position:absolute;left:50%;top:50%;width:260vmax;height:260vmax;translate:-50% -50%;background:conic-gradient(from 0deg,transparent 0 288deg,#ff1e1e33 326deg,#ff3b3070 352deg,transparent 360deg);mix-blend-mode:screen;animation:spin 2.6s linear infinite}
.beacon::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 22vmin #e3121b78;animation:pulse 1.3s ease-in-out infinite}
@keyframes spin{to{rotate:1turn}}
@keyframes pulse{50%{opacity:.3}}
body.alarm .beacon{opacity:1}
.grain{position:fixed;inset:-50%;z-index:80;pointer-events:none;opacity:.07;animation:grain .5s steps(4) infinite;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-4%)}75%{transform:translate(-4%,-1%)}}
#liquid{position:fixed;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
#liquid.over{z-index:55}
#fx{position:fixed;inset:0;z-index:46;width:100%;height:100%;pointer-events:none}
/* fallbacks for devices without WebGL */
.level{display:none;position:fixed;left:0;right:0;bottom:0;z-index:2;height:0;background:linear-gradient(var(--slop),#5a3a1b);border-top:4px solid var(--slop-ink);transition:height 1s cubic-bezier(.3,1.3,.4,1);pointer-events:none}
.pour{position:fixed;inset:0;z-index:55;pointer-events:none;transform:translateY(calc(-100% - 150px));background:linear-gradient(#5a3a1b,var(--slop))}
.pour::after{content:'';position:absolute;left:0;right:0;top:calc(100% - 1px);height:135px;background:var(--slop);-webkit-mask:var(--drip) 0 0/600px 135px repeat-x;mask:var(--drip) 0 0/600px 135px repeat-x}

/* ───────── chrome ───────── */
.sound,.code-btn{position:fixed;z-index:70;top:calc(14px + env(safe-area-inset-top,0px));display:inline-flex;align-items:center;gap:8px;padding:10px 14px 9px;border:3px solid var(--ink);border-radius:12px;font:800 12px/1 var(--mono);letter-spacing:.12em;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:translate .15s var(--pop),box-shadow .15s}
.sound:hover,.code-btn:hover{translate:-2px -2px;box-shadow:6px 6px 0 var(--ink)}
.sound{right:max(14px,env(safe-area-inset-right,0px));background:var(--hazard);color:var(--ink)}
.sound[aria-pressed=false]{animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{50%{box-shadow:4px 4px 0 var(--ink),0 0 0 8px #ffd60a55}}
.sound svg{width:18px;height:18px;flex:none}
.sound[aria-pressed=false] .waves{opacity:.2}
.code-btn{left:max(14px,env(safe-area-inset-left,0px));background:var(--cream);color:var(--ink)}
body.in-lab .sound{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
body.in-lab #code-btn{display:none}
.preview-tag{position:fixed;z-index:70;left:max(12px,env(safe-area-inset-left,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));margin:0;padding:5px 8px;background:#000c;color:#bba98a;font:700 9px/1.3 var(--mono);letter-spacing:.16em}

/* ───────── tap to enter (unlocks sound) ───────── */
.gate{position:fixed;inset:0;z-index:90;display:grid;place-content:center;justify-items:center;gap:22px;padding:24px;border:0;background:transparent;color:var(--ink);text-align:center;cursor:pointer}
.gate[hidden]{display:none}
.gate:focus-visible{outline:none}
.gate-k{display:inline-flex;align-items:center;gap:10px;font:800 12px/1 var(--mono);letter-spacing:.24em}
.gate-k svg{width:30px;height:auto;animation:throb 1s ease-in-out infinite}
@keyframes throb{50%{scale:1.18}}
.gate-b{padding:14px 26px 6px;border:5px solid var(--ink);background:var(--hazard);font:900 clamp(46px,8.5vw,118px)/.88 var(--stencil);letter-spacing:.01em;box-shadow:10px 10px 0 var(--ink);rotate:-2deg;transition:rotate .2s var(--pop),scale .2s var(--pop)}
.gate:hover .gate-b,.gate:focus-visible .gate-b{rotate:1deg;scale:1.04}
.gate-s{display:inline-flex;align-items:center;gap:8px;font:800 12px/1 var(--mono);letter-spacing:.18em;animation:pulse 1.3s ease-in-out infinite}
.gate-s svg{width:18px;height:18px}

/* ───────── scene 1: the warning ───────── */
.scene{position:fixed;inset:0;z-index:5}
#warning{overflow:hidden}
.tag{position:absolute;z-index:6;left:50%;top:calc(2vh + env(safe-area-inset-top,0px));width:min(56vw,700px,74vh);margin:0;translate:-50% 0}
.tag img{width:100%;filter:drop-shadow(0 22px 34px #000c)}
.sign{position:absolute;z-index:8;left:50%;top:67%;translate:-50% -50%;display:grid;justify-items:center;gap:10px;pointer-events:none}
.sign::before{content:'';position:absolute;z-index:-1;left:50%;top:34%;width:min(64vh,560px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:conic-gradient(#e3121b00,#e3121b66 12%,#e3121b00 30%,#e3121b00 50%,#e3121b66 62%,#e3121b00 80%);filter:blur(8px);animation:spin 3.2s linear infinite}
.sign svg{width:min(27vh,250px);height:auto;overflow:visible;filter:drop-shadow(0 0 34px #e3121bbb) drop-shadow(0 14px 18px #000c)}
.sign-label{padding:8px 20px 2px;background:var(--alarm);color:#fff;border:4px solid #fff;outline:4px solid var(--alarm);font:900 clamp(38px,5vw,72px)/.92 var(--stencil);letter-spacing:.02em;text-shadow:3px 3px 0 #000;rotate:-2deg;box-shadow:0 12px 30px #000c;white-space:nowrap;animation:glitch 3.8s steps(1) infinite}
@keyframes glitch{0%,88%,100%{translate:0;text-shadow:3px 3px 0 #000}90%{translate:-6px 2px;text-shadow:-4px 0 0 #00e5ff,4px 0 0 #ff2bd6,3px 3px 0 #000}93%{translate:5px -3px;text-shadow:4px 0 0 #00e5ff,-4px 0 0 #ff2bd6,3px 3px 0 #000}96%{translate:-2px 1px}}
.caption{min-height:2.4em;width:max-content;max-width:min(92vw,720px);margin:4px 0 0;padding:7px 14px 5px;border:3px solid var(--ink);background:var(--hazard);color:var(--ink);font:900 clamp(17px,2.2vw,28px)/1.15 var(--grot);font-stretch:70%;text-align:center;text-transform:uppercase;text-wrap:balance;box-shadow:5px 5px 0 var(--ink);rotate:1deg}
.caption:empty{visibility:hidden}

.tapes{position:absolute;inset:0;z-index:7;pointer-events:none}
.tape{position:absolute;left:-15%;width:130%;height:clamp(44px,5vw,66px);display:flex;align-items:center;overflow:hidden;white-space:nowrap;background:linear-gradient(#ffffff38,transparent 45%,#0000001c),var(--hazard);color:var(--ink);border-block:6px solid var(--ink);box-shadow:0 12px 26px #000b;font:900 clamp(20px,2.6vw,34px)/1 var(--grot);font-stretch:66%;text-transform:uppercase;rotate:var(--r);transform-origin:var(--o,left center);animation:sway 7s ease-in-out infinite alternate}
@keyframes sway{from{rotate:calc(var(--r) - .7deg)}to{rotate:calc(var(--r) + .7deg)}}
.tape .track{display:inline-block;animation:roll var(--dur,30s) linear infinite}
.tape.rev .track{animation-direction:reverse}
@keyframes roll{to{transform:translateX(-50%)}}
.t1{top:47%;--r:-4deg;--dur:30s}
.t2{top:95%;--r:2deg;--o:center;--dur:36s;animation-delay:-3s}
.t3{top:62%;--r:21deg;--dur:42s;animation-delay:-5s}

.sticker{position:absolute;z-index:9;width:clamp(150px,14vw,210px);background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:10px;box-shadow:6px 8px 0 #000b,0 22px 30px #0008;text-align:center;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.sticker:active{cursor:grabbing}
.sticker b{display:block;padding:8px 6px 6px;border-bottom:4px solid var(--ink);font:900 clamp(22px,2.2vw,32px)/1 var(--grot);font-stretch:80%;letter-spacing:.08em}
.sticker span{display:block;padding:12px 8px 14px;font:900 clamp(20px,2vw,30px)/1 var(--stencil)}
.caution{left:4%;top:50%;rotate:-8deg}
.caution b{background:var(--hazard)}
.danger{right:4%;top:48%;rotate:7deg}
.danger b{background:var(--ink);color:#fff}
.danger b i{display:inline-block;padding:3px 16px 1px;border:2px solid #fff;border-radius:50%;background:var(--alarm);font-style:normal}

.enter{position:fixed;left:0;top:0;z-index:20;padding:56px 40px 20px;border:0;border-radius:20px;background:var(--hazard);color:var(--ink);font:900 clamp(30px,3.4vw,46px)/1 var(--stencil);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;cursor:pointer;box-shadow:0 0 0 5px var(--ink),0 0 0 11px var(--hazard),0 0 0 15px var(--ink),0 24px 44px #000c,0 0 90px #ffd60a77;will-change:transform;transition:background .2s}
.enter .cap{position:absolute;left:-8px;top:-10px;width:calc(100% + 16px);height:62px;overflow:visible;filter:drop-shadow(0 3px 0 #0006)}
.enter .cap path{vector-effect:non-scaling-stroke}
.enter span{position:relative;display:inline-block}
.enter:hover{background:#fff27a}

/* ───────── scene 2: the screening ───────── */
#lab{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
#lab[hidden]{display:none}
.lab-bar{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));background:#0f0a07e8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lab-bar::after{content:'';position:absolute;left:0;right:0;top:100%;height:7px;background:var(--stripes)}
.lab-id{display:flex;align-items:center;gap:12px;min-width:0}
.lab-id img{width:58px;flex:none}
.lab-id b{font:900 clamp(18px,2.2vw,28px)/1 var(--stencil);letter-spacing:.04em;color:var(--hazard);white-space:nowrap}
.meter{display:flex;align-items:center;gap:10px;font:800 10px/1 var(--mono);letter-spacing:.18em}
.meter i{position:relative;display:block;width:clamp(80px,14vw,180px);height:18px;border:3px solid var(--ink);border-radius:6px;background:var(--cream);overflow:hidden;box-shadow:3px 3px 0 var(--ink)}
.meter i b{position:absolute;inset:0 auto 0 0;width:var(--pct,0%);background:var(--stripes);transition:width .8s var(--pop)}
.meter em{min-width:3.2em;font:900 24px/1 var(--stencil);font-style:normal;color:var(--hazard);text-align:right;font-variant-numeric:tabular-nums}

.panel{position:relative;z-index:3;flex:1;width:min(1000px,100%);margin:0 auto;padding:clamp(30px,6vh,72px) max(16px,env(safe-area-inset-right,0px)) 34vh max(16px,env(safe-area-inset-left,0px))}
.kicker{display:inline-block;margin:0 0 18px;padding:7px 12px 5px;border:3px solid var(--ink);background:var(--hazard);color:var(--ink);font:800 11px/1.2 var(--mono);letter-spacing:.22em;rotate:-1.5deg;box-shadow:4px 4px 0 var(--ink)}
.q{margin:0 0 18px;font:900 clamp(46px,8vw,120px)/.96 var(--stencil);letter-spacing:.005em;text-transform:uppercase;text-wrap:balance;outline:none;text-shadow:5px 5px 0 #000}
.q.long{font-size:clamp(36px,5.6vw,80px)}
.q .w{display:inline-block;white-space:nowrap}
.q .c{display:inline-block}
.note{max-width:640px;margin:0 0 30px;color:#dccaa4}
.note a{color:var(--hazard);font-weight:800}
.placeholder-link{padding:1px 6px;background:var(--alarm);color:#fff;font-weight:800}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.choice{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;min-height:108px;padding:18px 22px;border:4px solid var(--ink);border-radius:18px;background:var(--cream);color:var(--ink);font:900 clamp(24px,2.7vw,36px)/1 var(--grot);font-stretch:66%;letter-spacing:.01em;text-transform:uppercase;text-align:left;cursor:pointer;box-shadow:8px 8px 0 var(--ink);rotate:-1.2deg;transition:translate .18s var(--pop),rotate .18s var(--pop),box-shadow .18s,background .15s}
.choice:nth-child(2){rotate:1.2deg}
.choice:hover,.choice:focus-visible{background:var(--hazard);translate:-4px -6px;rotate:0deg;box-shadow:13px 14px 0 var(--ink)}
.choice:active{translate:4px 4px;box-shadow:2px 2px 0 var(--ink)}
.choice kbd{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--ink);color:var(--hazard);font:800 15px var(--mono)}
.choice.yes{background:var(--pea)}
.choice.no{background:#ff6a5c}
.choice.yes:hover,.choice.yes:focus-visible{background:#c4ec52}
.choice.no:hover,.choice.no:focus-visible{background:var(--alarm);color:#fff}
.choice::before{content:'';position:absolute;left:16px;right:16px;top:-4px;height:0;background:var(--slop);-webkit-mask:var(--drip) 0 bottom/300px 68px repeat-x;mask:var(--drip) 0 bottom/300px 68px repeat-x;filter:drop-shadow(0 0 1px var(--slop-ink));transition:height .3s var(--pop);pointer-events:none}
.choice:hover::before,.choice:focus-visible::before{height:68px}
.field label{display:flex;align-items:center;gap:10px;font:800 11px/1.2 var(--mono);letter-spacing:.2em;color:var(--hazard);text-transform:uppercase}
.field input{display:block;width:100%;margin-top:12px;padding:16px 18px;border:4px solid var(--ink);border-radius:14px;background:var(--cream);color:var(--ink);font:700 clamp(16px,2.2vw,26px)/1.2 var(--mono);letter-spacing:-.01em;box-shadow:8px 8px 0 var(--ink);outline:none;caret-color:var(--alarm);transition:box-shadow .2s}
.field input:focus{box-shadow:8px 8px 0 var(--hazard)}
.field input::placeholder{color:#8b7a5a}
.okb{padding:3px 8px 2px;border:2px solid var(--ink);background:var(--pea);color:var(--ink);font:800 10px/1.4 var(--mono);letter-spacing:.14em;rotate:-3deg;animation:pop-in .35s var(--pop)}
.okb[hidden]{display:none}
@keyframes pop-in{from{scale:0}}
.mini{margin-top:16px;padding:6px 0;background:none;border:0;color:var(--hazard);font:800 12px var(--mono);letter-spacing:.08em;text-decoration:underline wavy;text-underline-offset:6px;cursor:pointer}
.err{min-height:1.5em;margin:18px 0 0}
.err:not(:empty){display:inline-block;padding:6px 12px 5px;border:3px solid var(--ink);background:var(--alarm);color:#fff;font-weight:800;rotate:-1deg;box-shadow:4px 4px 0 var(--ink)}
.actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:30px}
.back{padding:8px 0;background:none;border:0;color:#dccaa4;font:800 12px var(--mono);letter-spacing:.1em;cursor:pointer}
.back:hover{color:var(--hazard)}
.go{position:relative;margin-left:auto;padding:22px 34px 16px;border:4px solid var(--ink);border-radius:16px;background:var(--hazard);color:var(--ink);font:900 clamp(26px,2.8vw,36px)/1 var(--stencil);letter-spacing:.03em;text-transform:uppercase;cursor:pointer;box-shadow:8px 8px 0 var(--ink);transition:translate .15s var(--pop),box-shadow .15s}
.go:hover{translate:-3px -4px;box-shadow:11px 12px 0 var(--ink)}
.go:active{translate:4px 4px;box-shadow:2px 2px 0 var(--ink)}
.go:disabled{opacity:.6;cursor:wait}
.statement{margin:0 0 24px;padding:18px 22px;border:4px solid var(--ink);background:var(--hazard);color:var(--ink);list-style:none;font:900 clamp(18px,2.3vw,28px)/1.25 var(--grot);font-stretch:74%;text-transform:uppercase;box-shadow:8px 8px 0 var(--ink);rotate:-.6deg}
.statement li+li{margin-top:6px}
.receipt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:0 0 24px;font-size:13px}
.receipt dt{color:var(--hazard);font-weight:800;letter-spacing:.14em}
.receipt dd{margin:0;word-break:break-all}
.ask{margin:0 0 20px;font:900 clamp(34px,4.8vw,62px)/.95 var(--stencil);color:var(--hazard);text-transform:uppercase;text-shadow:4px 4px 0 #000}

.stamp{position:fixed;z-index:47;left:50%;top:44%;padding:12px 28px 4px;border:6px solid var(--ink);background:var(--pea);color:var(--ink);font:900 clamp(58px,10vw,140px)/1 var(--stencil);letter-spacing:.02em;box-shadow:10px 10px 0 var(--ink);translate:-50% -50%;rotate:-9deg;pointer-events:none}

.denied{position:fixed;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:24px;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));text-align:center}
.denied[hidden]{display:none}
.denied-head{position:relative}
.denied h2{margin:0;padding:12px 26px 2px;background:var(--alarm);color:#fff;border:6px solid #fff;outline:6px solid var(--alarm);font:900 clamp(54px,12vw,170px)/.9 var(--stencil);text-shadow:4px 4px 0 #000;rotate:-4deg;box-shadow:14px 14px 0 #000a;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{background:#8f0a10}}
.ngmi{position:absolute;right:-16px;top:-30px;padding:6px 14px 2px;border:4px solid var(--ink);background:var(--hazard);color:var(--ink);font:900 clamp(28px,4vw,48px)/1 var(--stencil);rotate:14deg;box-shadow:6px 6px 0 var(--ink)}
.denied p{max-width:560px;margin:0;padding:14px 18px;border:4px solid var(--ink);background:var(--cream);color:var(--ink);font:700 16px/1.5 var(--mono);box-shadow:8px 8px 0 var(--ink);rotate:.8deg}
.restart{padding:22px 40px 16px;border:4px solid var(--ink);border-radius:14px;background:var(--hazard);color:var(--ink);font:900 clamp(30px,3.4vw,42px)/1 var(--stencil);letter-spacing:.04em;cursor:pointer;box-shadow:8px 8px 0 var(--ink);transition:translate .15s var(--pop),box-shadow .15s}
.restart:hover{translate:-3px -4px;box-shadow:11px 12px 0 var(--ink)}
.restart:active{translate:4px 4px;box-shadow:2px 2px 0 var(--ink)}

.done{display:grid;justify-items:center;gap:16px;text-align:center}
.done-a{margin:0;font:900 clamp(46px,8vw,118px)/.88 var(--stencil);color:var(--hazard);text-transform:uppercase;text-wrap:balance;text-shadow:6px 6px 0 #000}
.done-b{margin:0;padding:10px 20px 4px;border:4px solid var(--ink);background:var(--hazard);color:var(--ink);font:900 clamp(30px,4.6vw,64px)/1 var(--stencil);text-transform:uppercase;rotate:-2deg;box-shadow:8px 8px 0 var(--ink)}
.done-puddle{width:min(72vw,400px,34vh)}
.done-c{margin:0;font:900 clamp(32px,4.8vw,70px)/.92 var(--stencil);text-transform:uppercase;text-wrap:balance;text-shadow:0 4px 0 #000,0 0 24px #000}
.done-d{margin:0;padding:8px 18px 2px;border:4px solid var(--ink);background:var(--pea);color:var(--ink);font:900 clamp(30px,5vw,72px)/1 var(--stencil);text-transform:uppercase;rotate:1.5deg;box-shadow:8px 8px 0 var(--ink)}
.done-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin-top:8px}
.share{display:inline-block;padding:16px 24px 11px;border:4px solid var(--ink);border-radius:14px;background:var(--hazard);color:var(--ink);font:900 clamp(22px,2.4vw,30px)/1 var(--stencil);letter-spacing:.03em;text-decoration:none;box-shadow:7px 7px 0 var(--ink);transition:translate .15s var(--pop),box-shadow .15s}
.share:hover{translate:-3px -3px;box-shadow:10px 10px 0 var(--ink)}
.done .code-btn{position:static;padding:16px 20px 13px;font-size:13px}
.done-note{margin:6px 0 0;padding:6px 10px;background:#000c;color:#bba98a;font-size:12px}

.fly{position:fixed;left:-17px;top:-14px;z-index:9;width:34px;height:28px;pointer-events:none;filter:drop-shadow(0 0 1px #f2e4c4cc) drop-shadow(0 3px 2px #0009)}
.fly svg{width:100%;height:100%;overflow:visible}
.fly .w{fill:#dbeef6a8;stroke:#4c585e;stroke-width:.8;transform-box:fill-box;transform-origin:center;animation:flap .05s linear infinite alternate}
@keyframes flap{to{transform:scaleY(.25)}}

/* ───────── claim your spot ───────── */
.claim{width:min(520px,calc(100vw - 32px));max-width:none;padding:34px 28px 26px;border:6px solid transparent;border-radius:18px;background:linear-gradient(#17100b,#17100b) padding-box,var(--stripes) border-box;color:var(--cream);box-shadow:0 30px 80px #000}
.claim::backdrop{background:#0f0a07d9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.claim-title{margin:0 0 10px;font:900 clamp(44px,9vw,66px)/.9 var(--stencil);letter-spacing:.01em}
.claim-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border:3px solid var(--ink);border-radius:50%;background:var(--cream);color:var(--ink);font-weight:800;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.claim .note{margin-bottom:20px}
.claim .field input{margin-bottom:6px}

/* ───────── small screens ───────── */
@media (max-width:899px){
  .sticker{display:none}
}
@media (max-width:640px){
  .tag{width:min(94vw,72vh);top:calc(8vh + env(safe-area-inset-top,0px))}
  .sign{top:62%}
  .sign svg{width:min(46vw,26vh)}
  .t1{top:37%}
  .t2{top:86%}
  .enter{padding:38px 24px 14px}
  .lab-id img{width:42px}
  .lab-id b,.meter span{display:none}
  .choices{grid-template-columns:1fr;gap:18px}
  .choice{min-height:88px}
}
@media (max-width:480px){
  .actions{flex-wrap:wrap}
  .preview-tag{max-width:calc(100vw - 190px);font-size:8px;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}