:root{
  --paper:#ece6d8; --ink:#111; --red:#ff3b1f; --acid:#d4ff00; --blue:#2340ff; --pink:#ff2e88;
  --anton:'Anton',Impact,'Arial Narrow',sans-serif;
  --type:'Special Elite','Courier New',monospace;
  --marker:'Permanent Marker','Comic Sans MS',cursive;
  --top:env(safe-area-inset-top,0px); --bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--paper);color:var(--ink);font-family:var(--type);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button,a.btn{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
svg{display:block}

/* dirt + light falloff over everything */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(40,30,20,.22) 100%);mix-blend-mode:multiply}

#wall,#fx{position:fixed;inset:0;width:100%;height:100%;display:block}
#wall{z-index:0;transition:clip-path .55s cubic-bezier(.6,0,.4,1)}
#fx{z-index:1;pointer-events:none}

/* ---------- app shell ---------- */
#app{position:fixed;inset:0;z-index:2;display:grid;grid-template-rows:auto 1fr auto;
  padding:calc(var(--top) + 10px) 14px 0;height:100svh}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none}
.logo{font-family:var(--anton);font-weight:400;font-size:clamp(30px,8vw,46px);line-height:.9;letter-spacing:.01em;
  text-shadow:3px 2px 0 var(--red);transform:rotate(-2deg);display:flex;align-items:flex-end;gap:.12em}
.logo span{font-family:var(--marker);font-size:.55em;color:var(--paper);background:var(--ink);padding:.12em .3em .02em;transform:rotate(-6deg) translateY(-.15em);text-shadow:none}
.mess{font-family:var(--type);border:2.5px solid var(--ink);padding:4px 9px 3px;transform:rotate(3deg);text-align:center;background:var(--paper);box-shadow:3px 3px 0 var(--ink);min-width:74px}
.mess span{display:block;font-size:11px;letter-spacing:.2em}
.mess b{display:block;font-family:var(--anton);font-weight:400;font-size:24px;line-height:1}
.mess.bump{animation:bump .35s}
@keyframes bump{40%{transform:rotate(-4deg) scale(1.18)}}

.kit{place-self:center;width:min(94vw,calc(100svh - 236px - var(--top) - var(--bot)),640px);aspect-ratio:1;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:1.5%}
.junk{position:relative;background:none;border:0;outline:none;touch-action:none;display:grid;place-items:center}
.junk svg{width:100%;height:100%;overflow:visible;pointer-events:none}
.junk .obj{filter:url(#boil);transform-origin:60px 100px;transform-box:view-box}
.junk:focus-visible .shadow{fill:var(--red);opacity:.6}
.tag{position:absolute;left:50%;bottom:2%;transform:translateX(-50%) rotate(var(--r,-3deg));
  background:var(--ink);color:var(--paper);font-size:clamp(10px,2.6vw,13px);padding:2px 7px 1px;letter-spacing:.08em;white-space:nowrap;pointer-events:none}
.tag kbd{font:inherit;color:var(--acid);margin-left:6px;display:none}
.keys .tag kbd{display:inline}

.ln{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.ln.wht{stroke:#fffaf0;stroke-width:2.6}
.ln.thin{stroke-width:2.2}
.ln.red{stroke:#d7261e;stroke-width:2.2}
.stamp{font-family:var(--anton);font-size:10px;fill:#d7261e;letter-spacing:.06em}
.eye,.seeds{fill:var(--ink)}
.shadow{fill:var(--ink);opacity:.16}
.cut *{fill:#f6f1e6!important;stroke:#f6f1e6!important;stroke-width:13px;stroke-linejoin:round;opacity:1!important}
.cut text{display:none}
.crack{opacity:0;transition:opacity .05s}
.junk[data-crack="1"] .c1,.junk[data-crack="2"] .crack{opacity:1}
.lid{transform-box:fill-box;transform-origin:20% 100%}

/* ---------- buttons ---------- */
.bar{display:flex;justify-content:center;gap:10px;padding:10px 0 calc(var(--bot) + 46px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;
  font-family:var(--anton);font-weight:400;font-size:19px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  padding:11px 16px 10px;min-height:54px;transform:rotate(var(--r,0deg));transition:transform .08s,box-shadow .08s}
.btn svg{width:22px;height:22px;flex:none}
.btn:active{transform:translate(3px,3px) rotate(var(--r,0deg));box-shadow:1px 1px 0 var(--ink)}
.bar .btn:nth-child(1){--r:-2deg}.bar .btn:nth-child(2){--r:1.5deg}.bar .btn:nth-child(3){--r:-1deg}
.btn.rec{background:var(--red);color:#fff8ee}
.btn.rec.on{background:var(--ink);color:var(--acid)}
.btn.rec.on svg{animation:blink .6s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.btn .prog{position:absolute;left:0;bottom:0;height:5px;width:calc(var(--p,0)*100%);background:var(--acid)}
.btn.save{background:var(--acid)}

/* ---------- side notes (big screens) ---------- */
.side{display:none;position:fixed;font-family:var(--marker);font-size:26px;line-height:1.1;pointer-events:none}
.side-l{left:4vw;top:50%;transform:translateY(-50%) rotate(-7deg);color:var(--ink)}
.side-r{right:4vw;top:50%;transform:translateY(-50%) rotate(5deg);font-family:var(--type);font-size:14px;letter-spacing:.2em;text-align:center}
.side-r b{display:block;white-space:nowrap;font-family:var(--anton);font-weight:400;font-size:26px;letter-spacing:.3em;margin-top:4px}
.hint{position:fixed;left:50%;top:calc(var(--top) + 16px);transform:translateX(-50%) rotate(-4deg);font-family:var(--marker);font-size:22px;
  background:var(--acid);padding:3px 12px;border:2.5px solid var(--ink);pointer-events:none;animation:wob 1.2s ease-in-out infinite}
.hint.gone{opacity:0;transition:opacity .4s;animation:none}
@keyframes wob{50%{transform:translateX(-50%) rotate(3deg) scale(1.06)}}

/* ---------- flying words ---------- */
#words{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.word{position:absolute;font-family:var(--anton);font-weight:400;font-size:clamp(24px,7vw,46px);line-height:1;padding:.08em .22em 0;white-space:nowrap;
  transform:translate(-50%,-50%) rotate(var(--r)) scale(.3);animation:word .75s cubic-bezier(.2,1.4,.4,1) forwards}
.word.w0{background:var(--ink);color:var(--paper)}
.word.w1{background:var(--acid);color:var(--ink);border:2.5px solid var(--ink)}
.word.w2{color:var(--red);-webkit-text-stroke:1.5px var(--ink);text-shadow:3px 3px 0 var(--ink)}
.word.w3{background:#fff8ee;color:var(--ink);border:2.5px solid var(--ink);font-family:var(--marker);font-size:clamp(20px,5.6vw,36px)}
@keyframes word{
  0%{transform:translate(-50%,-50%) rotate(var(--r)) scale(.3)}
  25%{transform:translate(-50%,-70%) rotate(var(--r)) scale(1.1);opacity:1}
  70%{opacity:1}
  100%{transform:translate(-50%,-150%) rotate(calc(var(--r) * -1)) scale(.9);opacity:0}}

/* ---------- count-in + milestones ---------- */
#count{position:fixed;inset:0;z-index:6;display:grid;place-items:center;pointer-events:none}
#count b{font-family:var(--anton);font-weight:400;font-size:min(48vw,46svh);line-height:1;color:var(--ink);-webkit-text-stroke:4px var(--ink);
  text-shadow:10px 8px 0 var(--red);animation:cnt .55s ease-out forwards}
@keyframes cnt{0%{transform:scale(1.6) rotate(-8deg);opacity:0}20%{transform:scale(1) rotate(-3deg);opacity:1}100%{transform:scale(.85) rotate(2deg);opacity:0}}
#stampBig{position:fixed;left:50%;top:44%;z-index:7;pointer-events:none;font-family:var(--anton);font-size:min(16vw,110px);line-height:1;color:var(--red);
  border:.08em solid var(--red);padding:.04em .2em 0;transform:translate(-50%,-50%) rotate(-12deg) scale(0);opacity:0;mix-blend-mode:multiply;white-space:nowrap}
#stampBig.go{animation:stamp 2.2s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes stamp{0%{transform:translate(-50%,-50%) rotate(-12deg) scale(3);opacity:0}12%{transform:translate(-50%,-50%) rotate(-12deg) scale(1);opacity:.95}80%{opacity:.95}100%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:20;background:var(--paper);display:grid;place-items:center;overflow:hidden;
  transition:transform .7s cubic-bezier(.7,0,.3,1),opacity .7s}
#intro.out{transform:translateY(-104%) rotate(-4deg);pointer-events:none}
#introInk{position:absolute;inset:0;width:100%;height:100%}
.intro-in{position:relative;text-align:center;padding:20px}
.big{font-family:var(--anton);font-weight:400;font-size:min(34vw,30svh);line-height:.82;letter-spacing:-.01em;display:flex;justify-content:center}
.big span{display:inline-block;opacity:0;transform:translateY(-60vh) rotate(var(--r,0deg));animation:drop .55s cubic-bezier(.3,1.5,.5,1) forwards;
  text-shadow:.05em .035em 0 var(--red)}
.big span:nth-child(1){--r:-8deg;animation-delay:.15s}.big span:nth-child(2){--r:5deg;animation-delay:.3s}
.big span:nth-child(3){--r:-3deg;animation-delay:.45s}.big span:nth-child(4){--r:9deg;animation-delay:.6s}.big span:nth-child(5){--r:-6deg;animation-delay:.75s}
@keyframes drop{0%{opacity:1;transform:translateY(-60vh) rotate(0)}100%{opacity:1;transform:translateY(0) rotate(var(--r))}}
.kit-w{font-family:var(--marker);font-size:min(16vw,13svh);line-height:1;color:var(--paper);background:var(--ink);display:inline-block;padding:0 .25em;
  transform:rotate(-7deg) scale(0);margin-top:-.25em;animation:pop .4s 1.05s cubic-bezier(.3,1.8,.5,1) forwards}
@keyframes pop{to{transform:rotate(-7deg) scale(1)}}
.sub{font-size:clamp(16px,4.4vw,22px);margin:22px 0 22px;background:var(--paper);display:table;margin-inline:auto;padding:2px 8px;opacity:0;animation:fade .4s 1.35s forwards}
@keyframes fade{to{opacity:1}}
.btn.go{font-size:clamp(24px,6.5vw,34px);padding:16px 30px 14px;background:var(--acid);--r:-2deg;opacity:0;animation:fade .4s 1.55s forwards,nudge 1.6s 2.2s ease-in-out infinite}
@keyframes nudge{50%{transform:rotate(2deg) scale(1.05)}}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:calc(var(--bot) + 124px);z-index:9;display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);
  padding:8px 8px 8px 16px;white-space:nowrap;transform:translate(-50%,30px) rotate(-1deg);opacity:0;pointer-events:none;transition:.25s;font-size:15px}
#toast.show{opacity:1;transform:translate(-50%,0) rotate(-1deg);pointer-events:auto}
#toast button{display:flex;align-items:center;gap:6px;background:var(--acid);color:var(--ink);border:0;font-family:var(--anton);font-size:17px;text-transform:uppercase;padding:8px 12px 6px}
#toast svg{width:18px;height:18px}

/* ---------- saved poster ---------- */
#saved{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:20px 16px calc(var(--bot) + 54px);
  background:rgba(17,17,17,.9);opacity:0;pointer-events:none;transition:opacity .3s}
#saved.show{opacity:1;pointer-events:auto}
.poster{position:relative;max-width:min(88vw,900px);max-height:calc(100svh - 180px);padding:10px;background:var(--paper);transform:rotate(-2deg) scale(.7);transition:transform .5s cubic-bezier(.3,1.5,.5,1);box-shadow:0 20px 50px rgba(0,0,0,.5)}
#saved.show .poster{transform:rotate(-2deg) scale(1)}
.poster img{display:block;max-width:100%;max-height:calc(100svh - 200px);object-fit:contain}
.tape{position:absolute;width:90px;height:26px;background:rgba(240,230,190,.75);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tape.t1{left:-24px;top:8px;transform:rotate(-38deg)}.tape.t2{right:-24px;top:8px;transform:rotate(38deg)}
.saved-btns{display:flex;gap:12px}
.saved-btns .btn{--r:-1.5deg}.saved-btns .btn+.btn{--r:1.5deg}

/* ---------- layouts ---------- */
@media (max-width:380px){.btn{font-size:17px;padding:10px 12px 9px;gap:6px}.bar{gap:8px}}
@media (min-width:1000px) and (min-height:640px){
  .side{display:block}
  .kit{width:min(calc(100svh - 230px),640px)}
  .bar{padding-bottom:28px}
}
@media (max-height:520px) and (orientation:landscape){
  #app{grid-template-columns:1fr auto 1fr;grid-template-rows:1fr;padding:10px calc(env(safe-area-inset-right,0px) + 12px) 10px calc(env(safe-area-inset-left,0px) + 12px);column-gap:12px}
  .top{flex-direction:column;justify-content:space-between;grid-column:1;grid-row:1}
  .kit{grid-column:2;grid-row:1;width:auto;height:calc(100svh - 20px)}
  .bar{grid-column:3;grid-row:1;flex-direction:column;align-items:stretch;justify-content:center;padding:0 0 40px}
  .btn{min-height:46px;font-size:17px}
  .hint{top:10px;bottom:auto;left:auto;right:14px;transform:rotate(3deg);animation:none}
  #toast{bottom:16px}
}
@media (prefers-reduced-motion:reduce){.junk .obj{filter:none}.hint,.btn.go{animation:none;opacity:1}}
@media (max-width:600px){.hint{top:calc(var(--top) + 70px)}}