:root{
  --ink:#121212; --cream:#F7F2E4; --pink:#EE4A8C; --purple:#7B5CD6;
  --green:#4AC860; --red:#E73E38; --yellow:#F5C518; --panel:#1A1E1C;
  --lcd:#7EF5A8; --bubble:#82C9F0; --wall:#A9C6A4;
  --ticker:#FAD6E9;
  --font-display:"Anton","Arial Narrow",Impact,"Franklin Gothic Medium",system-ui,sans-serif;
  --font-label:"Archivo","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --font-mono:"JetBrains Mono","Cascadia Mono",Consolas,"Courier New",monospace;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  overflow:hidden;
  background:#0D100F;
  font-family:var(--font-label);
  color:var(--ink);
}

.gutter{
  position:fixed; top:0; left:0; z-index:0;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
  image-rendering:auto;
}

.foam-edge{
  position:fixed; top:0; height:100%; z-index:6;
  object-fit:cover; pointer-events:none;
  user-select:none; -webkit-user-drag:none;
}
#foamL{ left:0;  object-position:left center; }
#foamR{ right:0; object-position:right center; }

.stage{
  position:absolute; top:0; left:50%; margin-left:-768px;
  width:1536px; height:1024px;
  z-index:1;
  transform-origin:top center;
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
}
.shake{position:absolute; inset:0}
.layer{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; image-rendering:auto;
  -webkit-user-select:none; user-select:none; -webkit-user-drag:none;
}
.layer-wrap{position:absolute; inset:0; pointer-events:none}

#soapWrap{z-index:2; transform-origin:250px 854px; will-change:transform}
#idleWrap,#wipeWrap{z-index:3}
#wipeWrap{display:none; transform-origin:250px 590px; will-change:transform}
#sausageWrap{z-index:12; transform-origin:164px 536px; will-change:transform;
  animation:sausageIdle 2.6s ease-in-out infinite alternate}
#leverWrap{z-index:7; transform-origin:765px 498px; will-change:transform}
#foamWrap{z-index:8; animation:foamBreathe 6s ease-in-out infinite alternate}

.breath{animation:breathe 3s ease-in-out infinite alternate; transform-origin:250px 800px}
.drip{
  position:absolute; left:231px; top:614px; width:10px; height:14px;
  background:var(--purple);
  border-radius:50% 50% 55% 55% / 45% 45% 55% 55%;
  opacity:0; pointer-events:none;
  animation:dripFall 4s linear infinite;
}
#leverIdle{position:absolute; inset:0; transform-origin:765px 498px;
  animation:leverIdle 2.2s ease-in-out infinite alternate}
.stage.is-grip #leverIdle{animation-play-state:paused}
.stage.is-rekt #leverIdle{animation:none}

.lever-hit{
  position:absolute; left:685px; top:230px; width:160px; height:300px;
  pointer-events:auto; cursor:grab;
}
.stage.is-grip .lever-hit{cursor:grabbing}

.tube{
  position:absolute; left:548px; top:12px; width:448px; height:48px;
  border-radius:24px; background:#FFFDF2; opacity:0; z-index:1;
  pointer-events:none; filter:blur(5px);
  animation:tubeFlicker 7s steps(1,end) infinite;
}
.alarm-glow{
  position:absolute; left:1252px; top:-90px; width:420px; height:420px;
  border-radius:50%; opacity:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle, rgba(231,62,56,.95) 0%, rgba(231,62,56,.5) 38%, rgba(231,62,56,0) 70%);
}
.vignette{
  position:absolute; inset:0; z-index:9; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at 50% 52%, rgba(231,62,56,0) 26%, rgba(231,62,56,.42) 58%, rgba(214,22,18,.96) 100%);
  mix-blend-mode:multiply;
}
.streaks{position:absolute; inset:0; width:100%; height:100%; z-index:5; opacity:0; pointer-events:none}

.burst{position:absolute; z-index:6; pointer-events:none; transform:translate(-50%,-50%)}
#burstA{left:1262px; top:462px; width:430px}
#burstB{left:196px; top:800px; width:400px}
.burst-inner{position:relative; width:100%; aspect-ratio:920/903; opacity:0}
.burst-inner img{position:absolute; inset:0; width:100%; height:100%}

.fx-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:8; pointer-events:none}

.needle{
  position:absolute; left:5px; top:195px; width:120px; height:120px;
  z-index:9; pointer-events:none; transform:rotate(50deg); transform-origin:60px 60px;
}

.ticker{
  position:fixed; left:0; top:0; width:100vw; height:40px;
  background:#000; z-index:20; overflow:hidden; pointer-events:none;
}
.ticker-track{display:flex; width:max-content; animation:tickerMove 50s linear infinite}
.ticker-half{white-space:pre; font:700 19px/40px var(--font-mono); color:var(--ticker); letter-spacing:.5px}

.wordmark{
  position:absolute; left:258px; top:112px; z-index:10; pointer-events:none;
  font:400 104px/1 var(--font-display); color:var(--pink); letter-spacing:2px;
  -webkit-text-stroke:6px #000; paint-order:stroke fill;
  text-shadow:4px 4px 0 #000;
}
.subtitle{
  position:absolute; left:268px; top:214px; z-index:10; pointer-events:none;
  font:700 26px/1 var(--font-label); color:#4A4E4A; letter-spacing:1px; white-space:nowrap;
}
.pills{
  position:absolute; left:1030px; top:132px; width:248px; height:44px; z-index:10;
  display:flex; gap:10px; justify-content:flex-end; align-items:center; pointer-events:none;
}
.pill{
  height:44px; padding:0 20px; border:4px solid #000; border-radius:22px;
  background:var(--cream); color:var(--ink); text-decoration:none;
  font:600 24px/1 var(--font-label); display:flex; align-items:center;
  pointer-events:auto; cursor:pointer;
}
.contract-pill{
  position:absolute; left:860px; top:196px; width:418px; height:48px; z-index:10;
  border:4px solid #000; border-radius:24px; background:var(--cream); color:var(--ink);
  display:flex; align-items:center; gap:10px; padding:0 16px;
  font:700 22px/1 var(--font-mono); pointer-events:auto; cursor:pointer;
}
.contract-pill .copy-ico{flex:0 0 auto; opacity:.85}

.panel{
  position:absolute; left:470px; top:520px; width:830px; height:120px; z-index:10;
  background:var(--panel); border:6px solid #000; border-radius:18px; pointer-events:none;
}
.panel-label{
  position:absolute; left:26px; top:14px;
  font:600 24px/1.1 var(--font-label); color:#809688; letter-spacing:1.5px;
}
.readout{
  position:absolute; left:24px; top:40px;
  font:400 58px/1 var(--font-display); letter-spacing:1px; color:var(--lcd);
}
.readout.green{color:var(--lcd)}
.readout.amber{color:var(--yellow)}
.readout.red{color:var(--red)}
.target{
  position:absolute; left:292px; top:62px;
  font:600 22px/1 var(--font-label); color:#5E6E64; letter-spacing:1px;
}
.grip-label{
  position:absolute; left:480px; top:14px;
  font:600 24px/1.1 var(--font-label); color:#809688; letter-spacing:1.5px;
}
.grip-track{
  position:absolute; left:480px; top:50px; width:320px; height:40px;
  border-radius:20px; background:#0C0F0D; border:3px solid #000; overflow:hidden;
}
.grip-fill{height:100%; width:0%; background:var(--yellow); border-radius:20px}

.hint{
  position:absolute; left:765px; top:668px; height:66px; transform:translateX(-50%);
  padding:0 34px; border:6px solid #000; border-radius:33px; background:var(--yellow);
  color:#000; font:400 40px/1 var(--font-display); letter-spacing:1px; white-space:nowrap;
  display:flex; align-items:center; z-index:10; pointer-events:none;
}
.hint.pulse{animation:hintPulse 1.6s ease-in-out infinite alternate}
.hint.almost{background:var(--green)}

.cta{
  position:absolute; left:536px; top:792px; width:450px; height:94px; z-index:10;
  border-radius:47px; background:var(--pink); border:7px solid #000;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  font:400 50px/1 var(--font-display); color:var(--cream); letter-spacing:2px;
  -webkit-text-stroke:5px #000; paint-order:stroke fill; text-shadow:3px 3px 0 #000;
  pointer-events:auto; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.cta:hover{transform:translateY(-3px); box-shadow:0 10px 0 rgba(0,0,0,.55)}

.counter-card{
  position:absolute; left:1012px; top:792px; width:336px; height:94px; z-index:10;
  background:var(--cream); border:6px solid #000; border-radius:24px;
  padding:10px 22px; pointer-events:none;
}
.counter-label{font:600 20px/1.2 var(--font-label); color:#3A403C; letter-spacing:1.5px}
.counter-num{
  font:400 44px/1 var(--font-display); color:#1A1E1C; margin-top:4px;
  font-variant-numeric:tabular-nums; letter-spacing:1px;
}
.counter-num .dig{display:inline-block; height:1em; overflow:hidden; vertical-align:bottom}
.counter-num .dig-col{display:block}
.counter-num .dig-col i{display:block; height:1em; font-style:normal; line-height:1}
.counter-num .sep{display:inline-block}

.microcopy{
  position:absolute; left:761px; top:901px; transform:translateX(-50%); z-index:10;
  font:500 23px/1.2 var(--font-label); color:#33424A; letter-spacing:.5px;
  pointer-events:none; opacity:.9;
}
.lore{
  position:absolute; left:470px; top:926px; width:830px; height:64px; z-index:10;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.28));
  display:flex; gap:12px; pointer-events:none;
}
.lore-card{
  flex:1; background:var(--cream); border:4px solid #000; border-radius:14px;
  padding:7px 14px 6px; overflow:hidden;
}
.lore-label{font:600 17px/1.1 var(--font-label); color:#3A403C; letter-spacing:.5px; white-space:nowrap}
.lore-value{font:400 26px/1.05 var(--font-display); color:#1A1E1C; margin-top:2px; letter-spacing:1px}

.stamp{
  position:absolute; left:556px; top:300px; z-index:14; pointer-events:none;
  transform:translate(-50%,-50%) scale(3); opacity:0; will-change:transform,opacity;
}
.stamp-band{background:var(--red); border:6px solid #000; border-radius:12px; padding:18px 26px; transform:rotate(-8deg)}
.stamp-text{
  font:400 96px/1 var(--font-display); color:var(--cream); letter-spacing:2px;
  -webkit-text-stroke:9px #000; paint-order:stroke fill;
}

.flash{position:absolute; inset:0; background:#fff; opacity:0; z-index:30; pointer-events:none; display:none}

.sound{
  position:fixed; left:22px; bottom:20px; top:auto;
  width:44px; height:44px; z-index:22;
  border-radius:50%; background:var(--cream); border:4px solid #000;
  display:flex; align-items:center; justify-content:center;
  pointer-events:auto; cursor:pointer; padding:0;
}
.sound svg{width:20px; height:20px}
.sound .waves{display:none}
.sound:not(.muted) .waves{display:block}
.sound:not(.muted) .slash{display:none}

@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes breathe{from{transform:scaleY(1) scaleX(1)}to{transform:scaleY(1.025) scaleX(.985)}}
@keyframes dripFall{
  0%{transform:translateY(0) scaleY(.8); opacity:0}
  6%{opacity:1}
  55%{transform:translateY(90px) scaleY(1.05); opacity:1}
  63%{transform:translateY(96px) scaleY(.35) scaleX(1.5); opacity:.85}
  76%{opacity:0}
  100%{transform:translateY(96px) scaleY(.35) scaleX(1.5); opacity:0}
}
@keyframes sausageIdle{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@keyframes leverIdle{from{transform:rotate(-1.5deg) translateY(-2px)}to{transform:rotate(1.5deg) translateY(2px)}}
@keyframes foamBreathe{from{transform:translateY(0)}to{transform:translateY(4px)}}
@keyframes tubeFlicker{
  0%,82%{opacity:0}
  83%{opacity:.14}
  84%{opacity:.02}
  85%{opacity:.12}
  86%{opacity:0}
  91%{opacity:.1}
  92%{opacity:0}
  96%{opacity:.14}
  97%{opacity:0}
  100%{opacity:0}
}
@keyframes hintPulse{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.03)}}

@keyframes leverSlip{
  0%{transform:translateX(var(--lever-dx,0px)) rotate(0deg)}
  68%{transform:translateX(520px) rotate(-17deg)}
  100%{transform:translateX(514px) rotate(-24deg)}
}
@keyframes wipeoutFall{
  0%{transform:translate(0,0) rotate(0deg); animation-timing-function:cubic-bezier(.15,.75,.3,1)}
  24.4%{transform:translate(102px,-104px) rotate(-14deg); animation-timing-function:cubic-bezier(.5,.05,.85,.55)}
  85%{transform:translate(100px,-34px) rotate(-21.5deg); animation-timing-function:cubic-bezier(.2,.9,.3,1)}
  100%{transform:translate(100px,-40px) rotate(-20deg)}
}
@keyframes soapToss{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(-184px,-42px) rotate(42deg)}}
@keyframes sausageToss{
  0%{transform:rotate(0deg) scale(1); opacity:1}
  82%{opacity:1}
  100%{transform:translate(456px,-330px) rotate(200deg) scale(.5); opacity:0}
}
@keyframes streaksRekt{
  0%{transform:translateX(-140px); opacity:0}
  18%{opacity:1}
  62%{opacity:1}
  100%{transform:translateX(140px); opacity:0}
}
@keyframes burstA{
  0%{transform:scale(.25); opacity:0}
  14%{transform:scale(1); opacity:1}
  55%{transform:scale(1.12); opacity:1}
  84%{transform:scale(1.34); opacity:.35}
  100%{transform:scale(1.42); opacity:0}
}
@keyframes burstB{
  0%{transform:scale(.22); opacity:0}
  16%{transform:scale(.92); opacity:1}
  58%{transform:scale(1.04); opacity:1}
  84%{transform:scale(1.22); opacity:.35}
  100%{transform:scale(1.3); opacity:0}
}
@keyframes alarmPulse{
  0%{opacity:.15}
  12.5%{opacity:.85}
  25%{opacity:.15}
  37.5%{opacity:.85}
  50%{opacity:.15}
  62.5%{opacity:.85}
  75%{opacity:.15}
  87.5%{opacity:.85}
  100%{opacity:.15}
}
@keyframes needleSlip{
  0%{transform:rotate(var(--needle-from,50deg)); animation-timing-function:cubic-bezier(.4,0,.9,.5)}
  62%{transform:rotate(190deg); animation-timing-function:ease-in-out}
  79%{transform:rotate(164deg); animation-timing-function:ease-in-out}
  91%{transform:rotate(176deg)}
  100%{transform:rotate(172deg)}
}
@keyframes vignetteIn{0%{opacity:0}34%{opacity:.85}100%{opacity:.42}}
@keyframes shake{
  0%{transform:translate(-5px,3px)}
  11.1%{transform:translate(4px,-6px)}
  22.2%{transform:translate(-6px,-2px)}
  33.3%{transform:translate(5px,5px)}
  44.4%{transform:translate(-3px,6px)}
  55.6%{transform:translate(6px,-4px)}
  66.7%{transform:translate(-4px,2px)}
  77.8%{transform:translate(3px,-5px)}
  88.9%{transform:translate(-2px,4px)}
  100%{transform:translate(0,0)}
}
@keyframes stampIn{
  from{transform:translate(-50%,-50%) scale(3); opacity:0}
  to{transform:translate(-50%,-50%) scale(1); opacity:1}
}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}

.stage.is-rekt #leverWrap{animation:leverSlip 180ms cubic-bezier(.2,.9,.1,1) forwards}
.stage.is-rekt #wipeWrap{animation:wipeoutFall 900ms forwards}
.stage.is-rekt #soapWrap{animation:soapToss 420ms cubic-bezier(.2,.8,.3,1) forwards}
.stage.is-rekt #sausageWrap{animation:sausageToss 700ms ease-out forwards}
.stage.is-rekt .streaks{animation:streaksRekt 460ms linear forwards}
.stage.is-rekt .burst-innerA{animation:burstA 900ms linear 20ms forwards}
.stage.is-rekt .burst-innerB{animation:burstB 900ms linear 70ms forwards}
.stage.is-rekt .alarm-glow{animation:alarmPulse 2400ms steps(1,end) forwards}
.stage.is-rekt .needle{animation:needleSlip 500ms forwards}
.stage.is-rekt .vignette{animation:vignetteIn 500ms ease forwards}
.stage.is-rekt .shake{animation:shake 400ms steps(1,end)}
.stage.is-rekt .stamp{animation:stampIn 200ms cubic-bezier(.2,1.6,.4,1) 120ms forwards}

.stage.is-rekt.is-resetting #leverWrap{animation:none}
.stage.is-rekt.is-resetting #soapWrap{animation:soapReturn 300ms ease forwards}
.stage.is-rekt.is-resetting #sausageWrap{animation:sausageReturn 300ms ease forwards}
.stage.is-rekt.is-resetting .needle{animation:needleReturn 300ms ease forwards}
.stage.is-rekt.is-resetting .stamp{animation:stampOut 300ms ease forwards}
.stage.is-rekt.is-resetting .vignette{animation:vignetteOut 300ms ease forwards}
.stage.is-rekt.is-resetting .alarm-glow{animation:alarmOut 300ms ease forwards}

@keyframes soapReturn{from{transform:translate(-184px,-42px) rotate(42deg)}to{transform:translate(0,0) rotate(0deg)}}
@keyframes sausageReturn{
  from{transform:translate(456px,-330px) rotate(200deg) scale(.5); opacity:0}
  to{transform:translate(0,0) rotate(0deg) scale(1); opacity:1}
}
@keyframes needleReturn{from{transform:rotate(172deg)}to{transform:rotate(50deg)}}
@keyframes stampOut{
  from{transform:translate(-50%,-50%) scale(1); opacity:1}
  to{transform:translate(-50%,-50%) scale(1); opacity:0}
}
@keyframes vignetteOut{from{opacity:.22}to{opacity:0}}
@keyframes alarmOut{from{opacity:.15}to{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none}
  .breath,.drip,#sausageWrap,#leverIdle,#foamWrap,.tube{animation:none}
  .hint.pulse{animation:none}
  .flash{display:none}
  .stage.is-rekt #leverWrap{animation-duration:.06s}
  .stage.is-rekt #wipeWrap{animation-duration:.18s}
  .stage.is-rekt #soapWrap{animation-duration:.084s}
  .stage.is-rekt #sausageWrap{animation-duration:.14s}
  .stage.is-rekt .streaks{animation-duration:.06s}
  .stage.is-rekt .burst-innerA{animation-duration:.124s}
  .stage.is-rekt .burst-innerB{animation-duration:.136s}
  .stage.is-rekt .alarm-glow{animation-duration:.48s}
  .stage.is-rekt .needle{animation-duration:.1s}
  .stage.is-rekt .vignette{animation-duration:.11s}
  .stage.is-rekt .stamp{animation-duration:.04s; animation-delay:.024s}
  .stage.is-rekt .shake{animation:none}
  .stage.is-rekt .flash{display:block; animation:flash .12s steps(1,end) forwards}
}