:root {
  --ink:#121114; --panel:#1d1a1d; --gold:#d79a4b; --cream:#f3e7d4;
  --silk:#e9e3df; --pink:#ff6d77; --lime:#d8ff9c;
}
* { box-sizing:border-box; }
body {
  margin:0; min-width:320px; color:var(--cream); font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:radial-gradient(circle at 50% -10%,#3d3030 0,#1a171a 42%,#100f11 100%);
}
.game-shell { width:min(1100px,100%); min-height:100svh; margin:auto; padding:22px clamp(14px,4vw,44px) 25px; overflow:hidden; }
.topbar,.controls,.stats,.how-to { display:flex; align-items:center; }
.topbar { justify-content:space-between; padding-bottom:17px; border-bottom:1px solid #ffffff18; }
.brand { font-size:14px; font-weight:800; letter-spacing:.16em; }
.brand-mark { color:var(--pink); font-size:21px; }
.controls { gap:8px; }
.icon-button {
  border:1px solid #ffffff25; border-radius:8px; padding:8px 10px; color:var(--cream); background:#292429;
  cursor:pointer; font:500 12px system-ui; touch-action:manipulation;
}
.icon-button:hover:not(:disabled) { background:#40363d; }
.icon-button:disabled { opacity:.4; cursor:not-allowed; }
.stats { gap:clamp(10px,3vw,38px); padding:18px 4px 16px; }
.stats > div { display:grid; gap:2px; }
.stats span { color:#c9b9ab; font:500 10px ui-monospace,monospace; letter-spacing:.15em; }
.stats strong { font:800 clamp(18px,3vw,28px) system-ui; letter-spacing:-.05em; }
.stats em { color:var(--gold); font:500 11px ui-monospace,monospace; font-style:normal; letter-spacing:0; }
.stats .timer { min-width:min(190px,27vw); margin-left:auto; text-align:right; }
.timer i { display:block; width:100%; height:4px; margin-top:4px; overflow:hidden; border-radius:9px; background:#ffffff1b; }
.timer b { display:block; width:100%; height:100%; transform-origin:left; background:var(--pink); }
.web-status strong { color:var(--silk); font-size:16px!important; letter-spacing:0; }

.stage {
  position:relative; isolation:isolate; min-height:750px; overflow:hidden; border:1px solid #ffffff14; border-radius:17px;
  background:
    radial-gradient(ellipse at 50% 58%,#281a22 0,transparent 37%),
    linear-gradient(90deg,#130d16 0,#21151e 20%,#161219 50%,#21151e 80%,#130d16 100%);
  box-shadow:0 25px 80px #0007;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
.stage-glow {
  position:absolute; z-index:0; inset:-28% 14% auto; height:62%; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse,#a47d5a62 0,transparent 64%);
}
.cabaret-backdrop { position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none; }
.cabaret-backdrop::before {
  position:absolute; inset:0; content:""; opacity:.72;
  background:
    radial-gradient(ellipse at 4% 42%,#6c4a9450 0,transparent 19%),
    radial-gradient(ellipse at 96% 57%,#5e4b8650 0,transparent 20%),
    radial-gradient(ellipse at 19% 18%,#e5a4551b 0 4%,transparent 18%),
    radial-gradient(ellipse at 81% 26%,#e5a45516 0 4%,transparent 17%),
    radial-gradient(ellipse at 50% 104%,#e59e461f 0 8%,transparent 38%),
    radial-gradient(circle at 16% 63%,#d7cde41b 0 1px,transparent 1.8px),
    radial-gradient(circle at 84% 73%,#d7cde417 0 1px,transparent 1.8px),
    repeating-linear-gradient(90deg,transparent 0 43px,#ffffff03 44px 45px,transparent 46px 90px);
}
.cabaret-backdrop::after {
  position:absolute; inset:13% 14% 11%; content:""; opacity:.55; filter:blur(10px);
  background:
    radial-gradient(ellipse at 50% 8%,#80609d1c 0 12%,transparent 36%),
    linear-gradient(112deg,transparent 27%,#f0c0840d 45%,transparent 60%),
    linear-gradient(248deg,transparent 30%,#f0c0840a 48%,transparent 64%);
  animation:haze 12s ease-in-out infinite alternate;
}
.velvet { position:absolute; top:-3%; bottom:-4%; width:17%; opacity:.93; background:linear-gradient(90deg,#370d21,#6f1831 30%,#250917 68%,#110713); box-shadow:inset -12px 0 17px #08050a99,inset 9px 0 14px #b8526030,8px 0 22px #050307aa; }
.velvet::before { position:absolute; top:12%; bottom:8%; left:54%; width:14px; content:""; border-radius:50%; opacity:.48; background:repeating-linear-gradient(180deg,#e2777150 0 12px,transparent 13px 26px); box-shadow:15px 0 #17061166,-14px 0 #be465c25; }
.velvet::after { position:absolute; inset:0; content:""; opacity:.5; background:repeating-linear-gradient(84deg,transparent 0 15px,#d2596430 17px 20px,#18051144 23px 34px); }
.velvet-left { left:-7%; transform:skewY(-1.5deg); }
.velvet-right { right:-7%; transform:scaleX(-1) skewY(-1.5deg); }
.top-drape { position:absolute; top:-7%; left:9%; width:82%; height:13%; border-radius:0 0 47% 47%; opacity:.94; background:linear-gradient(#751a35,#390c21 65%,#150612); box-shadow:0 9px 22px #070309b3,inset 0 -5px 9px #df586837; }
.top-drape::after { position:absolute; right:8%; bottom:-7px; left:8%; height:12px; content:""; border-radius:0 0 48% 48%; opacity:.66; background:repeating-radial-gradient(ellipse at 50% -20%,#ed9c755f 0 5px,transparent 6px 13px); }
.corner-web {
  position:absolute; z-index:1; width:190px; height:165px; opacity:.31; filter:drop-shadow(0 0 5px #bcb4d344);
  background:
    repeating-radial-gradient(ellipse at 0 0,transparent 0 14px,#c9c0d468 15px 17px,transparent 18px 27px),
    repeating-linear-gradient(35deg,transparent 0 28px,#c9c0d44e 29px 31px,transparent 32px 56px);
  clip-path:polygon(0 0,100% 0,80% 13%,96% 29%,68% 36%,79% 56%,49% 56%,55% 78%,23% 66%,0 100%);
}
.corner-web-left { top:7%; left:-21px; }
.corner-web-right { top:12%; right:-25px; transform:scaleX(-1); }
.valance-web {
  position:absolute; z-index:1; top:4%; right:17%; width:155px; height:58px; opacity:.2;
  background:repeating-radial-gradient(ellipse at 50% 0,transparent 0 11px,#c9c0d450 12px 14px,transparent 15px 23px);
  clip-path:polygon(0 0,100% 0,86% 17%,100% 35%,73% 39%,83% 65%,52% 61%,48% 100%,31% 61%,4% 68%,23% 39%,0 35%);
}
.spotlight { position:absolute; top:2%; width:28%; height:58%; opacity:.28; filter:blur(2px); transform-origin:top; background:linear-gradient(168deg,#f7d29d35,transparent 62%); clip-path:polygon(43% 0,58% 0,100% 100%,0 100%); animation:beam 7s ease-in-out infinite alternate; }
.spotlight-left { left:18%; transform:rotate(8deg); }
.spotlight-right { right:17%; transform:scaleX(-1) rotate(8deg); animation-delay:-3.2s; }
.wall-sconce { position:absolute; top:20%; width:12px; height:23px; border:2px solid #5a3728; border-radius:7px 7px 3px 3px; opacity:.67; background:radial-gradient(circle at 50% 30%,#ffe0a2 0 15%,#d1873d 26%,#36201c 68%); box-shadow:0 0 20px 8px #d58b4144; }
.sconce-left { left:18%; }.sconce-right { right:18%; }
.piano-scene { position:absolute; right:8%; bottom:7%; width:min(31%,260px); height:160px; opacity:.48; transform:rotate(-4deg); transform-origin:bottom right; filter:drop-shadow(0 13px 7px #020104); }
.piano-scene::before { position:absolute; right:-12px; bottom:32px; width:31px; height:75px; content:""; border:2px solid #78526a66; border-left:0; border-radius:0 20px 20px 0; transform:rotate(8deg); }
.piano-web { position:absolute; z-index:2; top:3px; right:0; width:67px; height:63px; opacity:.42; background:repeating-radial-gradient(ellipse at 100% 0,transparent 0 9px,#c8bdd45a 10px 12px,transparent 13px 20px); clip-path:polygon(0 0,100% 0,100% 100%,78% 65%,51% 86%,42% 51%,0 43%); }
.piano-body { position:absolute; right:5%; bottom:22px; width:88%; height:71px; border:3px solid #73444b; border-radius:58% 47% 18px 30px / 67% 62% 17px 20px; background:linear-gradient(157deg,#5b2e3a 0,#281720 44%,#100d12 73%); box-shadow:inset 8px 9px 0 #b8656830,inset -8px -5px 0 #07050899; }
.piano-body::after { position:absolute; top:13px; left:14%; width:32%; height:8px; content:""; border-radius:50%; background:#ef99954a; transform:rotate(-8deg); }
.piano-lid { position:absolute; right:9%; bottom:80px; width:82%; height:53px; border:3px solid #87505a; border-bottom:0; border-radius:83% 74% 13% 10% / 96% 88% 10% 10%; transform:skewX(-18deg) rotate(3deg); background:linear-gradient(157deg,#713846,#351c28 58%,#150d13); box-shadow:inset 7px 7px 0 #cc6c6b25; }
.piano-lid::after { position:absolute; right:-10px; bottom:-5px; width:25px; height:16px; content:""; border-radius:0 70% 70% 0; background:#6c3946; transform:rotate(15deg); }
.piano-keys { position:absolute; z-index:1; right:13%; bottom:47px; width:64%; height:16px; border:2px solid #3a2830; border-radius:3px 1px 5px 4px; background:repeating-linear-gradient(90deg,#eee0c7 0 9px,#3a2830 10px 13px); opacity:.9; transform:skewX(-13deg) rotate(-2deg); box-shadow:0 3px 0 #0c090d; }
.piano-leg { position:absolute; bottom:0; width:8px; height:38px; border-radius:0 0 7px 7px; background:#2b181f; transform:rotate(8deg); }.leg-one { right:20%; }.leg-two { right:75%; transform:rotate(-12deg); }
.piano-bench { position:absolute; right:43%; bottom:3px; width:47px; height:12px; border:2px solid #633945; border-radius:8px 5px 6px 7px; background:#3b212b; transform:rotate(7deg); box-shadow:10px 13px 0 -4px #1a1116,-6px 11px 0 -4px #1a1116; }
.footlights { position:absolute; right:16%; bottom:15px; left:16%; display:flex; justify-content:space-between; opacity:.7; }
.footlights i { width:8px; height:8px; border:1px solid #f5bd6c; border-radius:50%; background:#ffb354; box-shadow:0 0 9px 4px #e9863c69; animation:footlight 3.5s ease-in-out infinite alternate; }
.footlights i:nth-child(2n) { animation-delay:-1.6s; }
.rack {
  position:absolute; z-index:1; inset:20px 8% 18px; transform:rotate(var(--rack-angle,0deg)); transform-origin:50% 100%;
  will-change:transform;
}
.rack-base {
  position:absolute; bottom:0; left:50%; width:155px; height:38px; transform:translateX(-50%);
  border:2px solid #c69a70; clip-path:polygon(13% 0,87% 0,100% 100%,0 100%);
  background:linear-gradient(135deg,#d9d6d0,#8c8990 48%,#d2c7bd); box-shadow:0 6px 12px #0009,inset 0 2px #fff8;
}
.rack-pole {
  position:absolute; z-index:1; top:24px; bottom:28px; left:50%; width:13px; transform:translateX(-50%);
  border-radius:10px; background:linear-gradient(90deg,#575660,#d9d8d7 33%,#8c8d98 57%,#3d3d46); box-shadow:2px 3px 7px #0008,inset 1px 0 #fff8;
}
.rack-knob { position:absolute; z-index:2; left:50%; width:33px; height:11px; transform:translateX(-50%); border-radius:50%; background:linear-gradient(#f1eeea,#666671); box-shadow:0 2px 4px #0008,inset 0 1px #fff9; }
.rack-knob.top { top:18px; }
.rack-knob.bottom { bottom:26px; }
.rack.tipping { animation:racktip .9s cubic-bezier(.32,.05,.56,1) forwards; }
.rack.unstable .hat-art { animation:hatwobble .5s ease-in-out infinite alternate; }
.rack.critical .hat-art { animation-duration:.28s; }
.rack.strand-cleared { animation:strandclear .28s ease-out; }
.rack.rack-cleared { animation:rackclear .5s ease-out; }

.trail-lines { position:absolute; z-index:2; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.trail-lines path { fill:none; stroke:#f4efe7; stroke-width:2.8; stroke-linecap:round; stroke-dasharray:3 9; opacity:.88; filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #d5d8ff44); }

.hat-station { position:absolute; z-index:3; width:178px; height:176px; text-align:center; }
.station-0 { top:18px; left:7%; }
.station-1 { top:139px; right:7%; }
.station-2 { top:260px; left:7%; }
.station-3 { top:381px; right:7%; }
.station-4 { top:502px; left:7%; }
.station-5 { top:623px; right:7%; }
.hat-station.locked { pointer-events:none; opacity:0; transform:scale(.86); }
.hat-station.unlocked { animation:unlockhat .55s cubic-bezier(.2,.9,.25,1.25); }
.rack-arm { position:absolute; z-index:-1; top:22px; width:calc(50vw - 170px); min-width:82px; max-width:265px; height:48px; border-bottom:3px solid #c9c3bd; opacity:.92; pointer-events:none; }
.rack-arm::after { position:absolute; bottom:-7px; width:14px; height:14px; content:""; border:2px solid #e6dfd5; border-radius:50%; background:#5e5955; }
.arm-left { right:-88px; border-right:3px solid #c9c3bd; transform:skewY(-16deg); transform-origin:right bottom; }
.arm-left::after { left:-7px; }
.arm-right { left:-88px; border-left:3px solid #c9c3bd; transform:skewY(16deg); transform-origin:left bottom; }
.arm-right::after { right:-7px; }

.hat { position:relative; display:block; width:150px; height:130px; margin:0 auto; padding:0; border:0; background:transparent; cursor:pointer; touch-action:manipulation; }
.hat:focus-visible,.web:focus-visible,.icon-button:focus-visible { outline:3px solid var(--lime); outline-offset:3px; }
.hook { position:absolute; top:5px; left:50%; width:22px; height:47px; transform:translateX(-50%); border:5px solid #d6ad7a; border-bottom:0; border-radius:15px 15px 0 0; pointer-events:none; }
.hat-art { position:absolute; top:43px; left:50%; width:126px; height:110px; transform:translateX(-50%) scale(.82); transform-origin:top; filter:drop-shadow(0 13px 7px #0008); transition:filter .18s,transform .45s cubic-bezier(.2,.9,.35,1); pointer-events:none; }
.hat-art::before,.hat-art::after,.hat-art i { position:absolute; display:block; content:""; }
.fedora::before { top:0; left:29px; width:69px; height:74px; border:5px solid #3e2220; border-radius:50% 50% 21% 21%; background:linear-gradient(105deg,#db8359,#94442f); }
.fedora::after { bottom:11px; left:3px; width:120px; height:36px; border:5px solid #3e2220; border-radius:50%; background:linear-gradient(100deg,#ca704d,#8f3f2c); }
.fedora i { z-index:1; top:56px; left:27px; width:74px; height:15px; border:3px solid #3e2220; background:#2e2930; }
.bowler::before { top:5px; left:21px; width:85px; height:79px; border:5px solid #202a38; border-radius:50% 50% 25% 25%; background:linear-gradient(112deg,#668eaa,#31495f); }
.bowler::after { bottom:11px; left:0; width:126px; height:33px; border:5px solid #202a38; border-radius:50%; background:linear-gradient(100deg,#5b819e,#30475e); }
.bowler i { z-index:1; top:65px; left:18px; width:92px; height:13px; border:3px solid #202a38; background:#eabd55; }
.cap::before { top:9px; left:24px; width:82px; height:75px; border:5px solid #263020; border-radius:65% 65% 20% 20%; background:linear-gradient(112deg,#839561,#495639); }
.cap::after { right:-2px; bottom:16px; width:71px; height:35px; border:5px solid #263020; border-radius:0 50% 50% 50%; background:linear-gradient(110deg,#7e925d,#465438); transform:skewX(-17deg); }
.cap i { z-index:1; top:57px; left:36px; width:55px; height:12px; border:2px solid #263020; background:#3e4932; }
.top-hat::before { top:3px; left:29px; width:69px; height:75px; border:5px solid #2a1d28; border-radius:8px 8px 17px 17px; background:linear-gradient(100deg,#995d7b,#583047); }
.top-hat::after { bottom:11px; left:0; width:126px; height:31px; border:5px solid #2a1d28; border-radius:50%; background:linear-gradient(100deg,#8b5270,#552e44); }
.top-hat i { z-index:1; top:59px; left:25px; width:76px; height:12px; border:2px solid #2a1d28; background:#e3b6ca; }
.beret::before { top:22px; left:14px; width:100px; height:61px; border:5px solid #3a2021; border-radius:58% 54% 45% 50%; background:linear-gradient(110deg,#c26b62,#813c40); transform:rotate(-8deg); }
.beret::after { top:11px; left:58px; width:16px; height:19px; border:4px solid #3a2021; border-radius:50% 50% 0 0; background:#b95e59; }
.beret i { z-index:1; top:66px; left:28px; width:78px; height:11px; border:2px solid #3a2021; border-radius:50%; background:#873e3f; }
.hat.falling .hat-art { animation:hatfall .55s cubic-bezier(.45,.02,.8,.3) forwards; }
.hat.replacing .hat-art { animation:hatdrop .52s cubic-bezier(.12,.75,.35,1.2) forwards; }

.web {
  position:absolute; top:111px; left:50%; width:158px; height:142px; margin:0; padding:0;
  transform:translateX(-50%) scale(.68); transform-origin:top center; border:0; background:transparent; color:var(--silk);
  cursor:pointer; opacity:.3; transition:opacity .2s,transform .2s; touch-action:manipulation;
}
.web.ready { transform:translateX(-50%) scale(.83); opacity:1; }
.web-lines { position:absolute; inset:14px; pointer-events:none; opacity:var(--web-strength,.3); clip-path:polygon(50% 0,61% 30%,83% 12%,75% 43%,100% 50%,75% 57%,84% 90%,61% 70%,50% 100%,39% 70%,16% 90%,25% 57%,0 50%,25% 43%,17% 12%,39% 30%); background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 15px,#eee6df 16px 18px,transparent 19px 29px); transition:opacity .22s ease,filter .22s ease; }
.web b,.web small { position:relative; z-index:1; display:block; pointer-events:none; }
.web b { padding-top:48px; font:700 12px system-ui; letter-spacing:.08em; }
.web small { margin-top:4px; color:var(--lime); font:500 11px ui-monospace,monospace; }
.web.torn .web-lines { filter:brightness(1.7); }
.web.cleared .web-lines { opacity:0; }
.web.cleared b,.web.cleared small { opacity:.45; }
.bonus-live .web.ready { box-shadow:0 0 0 1px #d8ff9c22; }

.landing-ring {
  --x:50%; --y:18%; --hop-duration:0ms; --hop-delay:0ms;
  position:absolute; z-index:4; top:var(--y); left:var(--x); width:min(25vw,138px); aspect-ratio:1;
  transform:translate(-50%,-50%); border:3px solid transparent; border-radius:50%; pointer-events:none; opacity:0;
}
.landing-ring.active { border-color:var(--pink); opacity:1; animation:countdown var(--hop-duration) linear var(--hop-delay) forwards; }
.spider {
  --x:50%; --y:18%;
  position:absolute; z-index:5; top:var(--y); left:var(--x); width:38px; height:38px; padding:0;
  transform:translate(-50%,-50%); filter:drop-shadow(0 3px 2px #000); pointer-events:none;
}
.spider .body { position:absolute; top:8px; left:9px; width:20px; height:22px; border:2px solid #c9bbc0; border-radius:52% 48% 49% 46%; background:radial-gradient(ellipse at 34% 28%,#35363d 0 9%,#171820 31%,#090a0d 78%); box-shadow:inset 1px 1px 0 #807d861f,inset -2px -3px 0 #0008; }
.spider .body::after { position:absolute; inset:4px 5px 4px; content:""; border-radius:50%; opacity:.22; background:repeating-linear-gradient(125deg,transparent 0 3px,#b8a6ad 4px 5px,transparent 6px 9px); }
.spider .eye { position:absolute; z-index:2; top:13px; left:18px; width:4px; height:4px; border-radius:50%; background:#e8e4b8; box-shadow:7px 0 #e8e4b8; }
.spider .eye::before { position:absolute; top:1px; left:1px; width:2px; height:2px; content:""; border-radius:50%; background:#28262d; box-shadow:7px 0 #28262d; }
.spider .eye::after { position:absolute; top:-4px; left:-3px; width:14px; height:8px; content:""; border-top:1px solid #b9aab1; border-radius:50%; opacity:.72; }
.spider .leg { position:absolute; top:16px; left:17px; width:21px; height:11px; border-top:2px solid #a89ea3; border-right:2px solid #a89ea3; border-radius:0 100% 0 0; transform-origin:left; }
.spider .one { transform:rotate(-47deg); }
.spider .two { transform:rotate(0deg) scaleX(.92); }
.spider .three { transform:rotate(47deg); }
.spider.scurrying { filter:drop-shadow(1px 3px 2px #000); }
.spider.scurrying .body { animation:spiderbob .12s steps(2,end) infinite; transform-origin:50% 65%; }
.spider.scurrying .leg { animation:legscurry .13s steps(2,end) infinite; }
.spider.scurrying .one { animation-delay:.02s; }.spider.scurrying .two { animation-delay:.07s; }.spider.scurrying .three { animation-delay:.11s; }
.spider.scurry-jump .body { animation:spiderbob .12s steps(2,end) infinite,spideranticipation .44s ease-in-out infinite; }
.spider.scurry-jump .leg { animation:legscurry .1s steps(2,end) infinite; }
.spider.settled .body { animation:spiderland .24s ease-out; }

.count-in { position:absolute; z-index:12; top:14px; left:50%; transform:translateX(-50%); padding:6px 10px; border-radius:999px; background:#171217d9; color:#f4e8d8; font:800 12px system-ui; letter-spacing:.04em; pointer-events:none; }
.count-in:empty { display:none; }
.feedback-layer { position:absolute; z-index:30; inset:0; overflow:hidden; pointer-events:none; }
.tap-feedback { position:absolute; z-index:1; transform:translate(-50%,-50%); padding:4px 7px; border-radius:999px; background:#171217e8; color:#fff7e6; font:800 12px system-ui; letter-spacing:.03em; white-space:nowrap; animation:tapfeedback .62s ease-out forwards; }
.tap-feedback.perfect,.tap-feedback.bonus,.tap-feedback.rack-clear { color:#d8ff9c; border:1px solid #d8ff9c; }
.tap-feedback.good { color:#8edbff; border:1px solid #8edbff; }
.tap-feedback.miss { color:#ffabb1; border:1px solid #ff6d77; }
.tap-feedback.duplicate { color:#f4ce86; border:1px solid #d79a4b; }
.tap-feedback.strand-clear { color:#c9f6ff; border:1px solid #82dff3; }
.tap-feedback.rack-clear { background:#1d291ce8; }
.web-shred { position:absolute; z-index:3; width:7px; height:2px; border-radius:3px; background:#f3eee8; transform:translate(-50%,-50%); animation:webshred .44s ease-out forwards; }
.debug-hit-area,.debug-panel { pointer-events:none; }
.debug-hit-area { position:absolute; z-index:29; border:2px dashed #7dfffc; border-radius:50%; background:#7dfffc12; box-shadow:0 0 0 1px #001d1d; }
.debug-panel { position:absolute; z-index:31; right:7px; bottom:7px; max-width:calc(100% - 14px); padding:7px 8px; border:1px solid #7dfffc88; border-radius:7px; background:#071012e8; color:#c9fffc; font:10px/1.35 ui-monospace,monospace; text-align:left; }
.debug-panel hr { margin:4px 0; border:0; border-top:1px solid #7dfffc55; }
.debug-tap { position:absolute; z-index:2; width:14px; height:14px; border:2px solid #ffeb73; border-radius:50%; transform:translate(-50%,-50%); animation:debugtap .7s ease-out forwards; }

.game-message { position:absolute; z-index:10; inset:0; display:grid; place-content:center; text-align:center; background:#110f12a8; backdrop-filter:blur(2px); transition:opacity .25s; }
.game-message.hidden { pointer-events:none; opacity:0; }
.game-message p { margin:0 0 16px; font-size:clamp(20px,4vw,34px); font-weight:800; letter-spacing:-.05em; }
.game-message button { justify-self:center; padding:14px 19px; border:0; border-radius:9px; color:#271619; background:var(--pink); cursor:pointer; font:800 15px system-ui; touch-action:manipulation; }
.game-message button span { margin-left:12px; }
.how-to { justify-content:center; gap:clamp(10px,4vw,48px); padding:18px 0 0; color:#cbbfb5; font-size:12px; }
.how-to b { margin-right:5px; color:var(--gold); font-family:ui-monospace,monospace; }

.face-hug { position:fixed; z-index:100; inset:0; display:block; overflow:hidden; pointer-events:auto; visibility:hidden; opacity:0; background:transparent; transition:opacity .08s linear; }
.face-hug.hidden { display:none; }
.face-hug.face-hug-active { visibility:visible; opacity:1; }
.face-hug-spider { position:fixed; top:var(--hug-y,50vh); left:var(--hug-x,50vw); width:46px; height:46px; transform:translate(-50%,-50%) rotate(0deg); filter:drop-shadow(0 4px 4px #0009); will-change:left,top,transform; }
.face-hug-spider .body { position:absolute; top:7px; left:7px; width:30px; height:32px; border:3px solid #c9bbc0; border-radius:54% 46% 50% 48%; background:radial-gradient(ellipse at 34% 26%,#4a4b52 0 8%,#1b1c24 32%,#090a0d 78%); box-shadow:inset 2px 2px 0 #a9a2aa1f,inset -3px -4px 0 #0008; }
.face-hug-spider .body::after { position:absolute; inset:6px 7px 5px; content:""; border-radius:50%; opacity:.18; background:repeating-linear-gradient(125deg,transparent 0 3px,#d4c0c8 4px 5px,transparent 6px 9px); }
.face-hug-spider .eye { position:absolute; z-index:2; top:12px; left:14px; width:6px; height:6px; border-radius:50%; background:#e8e4b8; box-shadow:10px 0 #e8e4b8; }
.face-hug-spider .eye::before { position:absolute; top:1px; left:1px; width:3px; height:3px; content:""; border-radius:50%; background:#28262d; box-shadow:10px 0 #28262d; }
.face-hug-spider .leg { position:absolute; top:18px; left:16px; width:28px; height:16px; border-top:3px solid #a89ea3; border-right:3px solid #a89ea3; border-radius:0 100% 0 0; transform-origin:left; }
.face-hug-spider .one { transform:rotate(-48deg); }
.face-hug-spider .two { transform:rotate(0); }
.face-hug-spider .three { transform:rotate(48deg); }
.face-hug.prepare { background:radial-gradient(circle at var(--hug-x,50%) var(--hug-y,50%),#3e2a3b22 0 20px,transparent 75px); }
.face-hug.prepare .face-hug-spider { animation:huganticipation .26s ease-out forwards; }
.face-hug.launch { background:#120d16ba; backdrop-filter:blur(1px); }
.face-hug.launch .face-hug-spider { animation:facehug .78s cubic-bezier(.17,.8,.22,1) forwards; }
.face-hug.launch .face-hug-spider .body { animation:facehugbody .5s ease-in-out .1s both; }
.face-hug.launch .face-hug-spider .one { animation:facehuglegone .55s ease-out both; }
.face-hug.launch .face-hug-spider .two { animation:facehuglegtwo .55s ease-out both; }
.face-hug.launch .face-hug-spider .three { animation:facehuglegthree .55s ease-out both; }
.stage.face-shake { animation:faceshake .38s linear both; }

.stage.is-paused *, .stage.is-paused *::before, .stage.is-paused *::after { animation-play-state:paused!important; }

@keyframes countdown { from { transform:translate(-50%,-50%) scale(.35); border-width:12px; opacity:0; } to { transform:translate(-50%,-50%) scale(1.24); border-width:1px; opacity:1; } }
@keyframes hatfall { to { transform:translateX(-50%) rotate(18deg) translateY(250px); opacity:0; } }
@keyframes hatdrop { from { transform:translateX(-50%) translateY(-180px); opacity:0; } to { transform:translateX(-50%) translateY(0); opacity:1; } }
@keyframes racktip { to { transform:rotate(76deg) translateX(80px); opacity:.25; } }
@keyframes unlockhat { from { opacity:0; transform:scale(.5); } to { opacity:1; transform:scale(1); } }
@keyframes hatwobble { to { filter:drop-shadow(3px 11px 7px #0008); } }
@keyframes strandclear { 50% { filter:brightness(1.55) drop-shadow(0 0 7px #b8efff); } }
@keyframes rackclear { 0% { filter:brightness(1); } 35% { filter:brightness(1.8) drop-shadow(0 0 13px #d8ff9c); } 100% { filter:brightness(1); } }
@keyframes spiderbob { 50% { transform:translate(1px,-2px) rotate(3deg) scale(.96,1.06); } }
@keyframes legscurry { 50% { margin-top:2px; opacity:.74; } }
@keyframes spideranticipation { 35% { transform:translate(-2px,2px) rotate(-4deg) scale(1.13,.83); } 57% { transform:translate(2px,-4px) rotate(5deg) scale(.9,1.16); } }
@keyframes spiderland { 0% { transform:rotate(-3deg) scale(1.22,.72); } 58% { transform:rotate(2deg) scale(.91,1.09); } 100% { transform:rotate(0) scale(1); } }
@keyframes tapfeedback { 0% { opacity:0; transform:translate(-50%,-35%) scale(.82); } 16% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-120%) scale(1.04); } }
@keyframes webshred { to { transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(120deg); opacity:0; } }
@keyframes debugtap { to { transform:translate(-50%,-50%) scale(2.5); opacity:0; } }
@keyframes huganticipation { to { transform:translate(-50%,-50%) scale(.82) rotate(-9deg); } }
@keyframes facehug { 0% { transform:translate(-50%,-50%) scale(.84) rotate(-9deg); } 52% { transform:translate(-50%,-50%) scale(3.1) rotate(16deg); } 100% { top:50vh; left:50vw; transform:translate(-50%,-50%) scale(5.5) rotate(-7deg); } }
@keyframes facehugbody { 38% { transform:scale(.8,1.17) rotate(-5deg); } 100% { transform:scale(1.08,.94) rotate(4deg); } }
@keyframes facehuglegone { 45% { transform:rotate(-78deg) scaleX(1.18); } 100% { transform:rotate(-58deg) scaleX(1.06); } }
@keyframes facehuglegtwo { 45% { transform:rotate(11deg) scaleX(1.2); } 100% { transform:rotate(2deg) scaleX(1.07); } }
@keyframes facehuglegthree { 45% { transform:rotate(78deg) scaleX(1.18); } 100% { transform:rotate(58deg) scaleX(1.06); } }
@keyframes faceshake { 20%,60% { transform:translateX(-5px); } 40%,80% { transform:translateX(5px); } 100% { transform:translateX(0); } }
@keyframes haze { to { transform:translate3d(1.5%,.8%,0) scale(1.03); opacity:.72; } }
@keyframes beam { to { opacity:.38; filter:blur(3px); } }
@keyframes footlight { to { opacity:.46; transform:translateY(1px); } }

@media (max-width:650px) {
  body { min-width:0; }
  .game-shell { padding:8px 2vw 14px; }
  .topbar { align-items:flex-start; }
  .brand { padding-top:7px; font-size:11px; }
  .icon-button span,.stats em,.how-to { display:none; }
  .stats { gap:9px; padding:11px 2px 10px; }
  .stats strong { font-size:19px; }
  .stats .timer { min-width:70px; }
  .web-status { display:grid!important; }
  .web-status strong { font-size:12px!important; white-space:nowrap; }
  .stage { min-height:760px; border-radius:14px; }
  .rack { inset:4px 0 8px; }
  .rack-base { width:132px; height:33px; }
  .rack-pole { top:13px; bottom:22px; width:11px; }
  .rack-arm { top:13px; width:calc(50vw - 120px); min-width:30px; height:37px; }
  .hat-station { width:min(43vw,142px); height:126px; }
  .station-0,.station-2,.station-4 { left:17.5%; right:auto; margin-left:calc(-1 * min(21.5vw,71px)); }
  .station-1,.station-3,.station-5 { left:82.5%; right:auto; margin-left:calc(-1 * min(21.5vw,71px)); }
  .station-0 { top:5px; }.station-1 { top:129px; }.station-2 { top:253px; }
  .station-3 { top:377px; }.station-4 { top:501px; }.station-5 { top:625px; }
  .hat { width:100%; height:108px; }
  .hat-art,.top-hat,.beret { top:34px; transform:translateX(-50%) scale(.78); }
  .hook { transform:translateX(-50%) scale(.9); transform-origin:top; }
  .web { top:84px; transform:translateX(-50%) scale(.66); }
  .web.ready { transform:translateX(-50%) scale(.80); }
  .landing-ring { width:min(43vw,156px); }
  .spider { width:46px; height:46px; }
  .velvet { width:21%; opacity:.82; }
  .velvet::before { opacity:.31; }
  .top-drape { left:5%; width:90%; height:10%; }
  .top-drape::after { opacity:.43; }
  .corner-web { width:128px; height:112px; opacity:.19; }
  .corner-web-left { top:8%; left:-24px; }
  .corner-web-right { top:14%; right:-30px; }
  .valance-web { right:10%; width:105px; height:40px; opacity:.15; }
  .spotlight { width:33%; height:47%; opacity:.2; }
  .wall-sconce { top:16%; }
  .piano-scene { right:2%; bottom:7%; width:31%; height:120px; opacity:.32; }
  .piano-web { width:47px; height:46px; opacity:.28; }
  .footlights { right:18%; bottom:12px; left:18%; }
  .footlights i { width:6px; height:6px; }
}
@media (prefers-reduced-motion:reduce) {
  .rack { transform:none!important; }
  .rack.unstable .hat-art,.rack.critical .hat-art { animation:none; }
  .rack.strand-cleared,.rack.rack-cleared { animation:none; filter:brightness(1.3); }
  .spider.scurrying .body,.spider.scurrying .leg,.spider.scurry-jump .body,.spider.settled .body,
  .tap-feedback,.web-shred,.face-hug.prepare .face-hug-spider,.face-hug.launch .face-hug-spider,.face-hug.launch .face-hug-spider .body,.face-hug.launch .face-hug-spider .leg,.stage.face-shake { animation:none; }
  .tap-feedback { opacity:1; }
  .web-shred { display:none; }
  .web .web-lines { transition:none; }
  .face-hug.launch { background:#120d16d9; }
  .face-hug.launch .face-hug-spider { top:50vh; left:50vw; transform:translate(-50%,-50%) scale(3); }
  .cabaret-backdrop::after,.spotlight,.footlights i { animation:none; }
}