:root{--cream:#f6ecd9;--walnut:#5a3820;--walnut2:#3b2414;--ink:#2b1d12;--glass:#1a1a2e;}
body{margin:0;font-family:'Fredoka',sans-serif;color:var(--ink);
background:
 repeating-linear-gradient(92deg,rgba(120,80,40,.05) 0 2px,transparent 2px 9px),
 repeating-linear-gradient(88deg,rgba(120,80,40,.04) 0 1px,transparent 1px 23px),
 radial-gradient(ellipse at top,#fbf4e6,#efdfc2);min-height:100vh;}
.mono{font-family:'JetBrains Mono',monospace}
.frame{background:linear-gradient(180deg,#6d4426,#4a2c17);border-radius:22px;box-shadow:0 18px 40px rgba(60,30,10,.35),inset 0 2px 0 rgba(255,255,255,.15);}
.rail{position:absolute;left:14px;right:14px;height:10px;border-radius:6px;background:linear-gradient(#2a180b,#4b2e18);box-shadow:inset 0 2px 3px rgba(0,0,0,.6);}
.bar{position:relative;border-radius:12px;cursor:pointer;touch-action:none;user-select:none;transition:filter .2s;
 box-shadow:0 6px 10px rgba(0,0,0,.4),inset 0 -6px 10px rgba(0,0,0,.18);}
.bar::before{content:'';position:absolute;left:12%;top:4%;width:26%;height:88%;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.bar:hover{filter:brightness(1.08)}
.screw{position:absolute;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#eee,#777);box-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
.hit{animation:squash .35s ease-out}
@keyframes squash{0%{transform:scaleY(.94) scaleX(1.04);filter:brightness(1.6) drop-shadow(0 0 14px #fff)}100%{transform:none;filter:none}}
.ripple{position:absolute;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:3px solid rgba(255,255,255,.9);border-radius:50%;pointer-events:none;animation:rip .7s ease-out forwards}
@keyframes rip{to{transform:scale(4);opacity:0}}
.mallet{position:absolute;pointer-events:none;left:50%;width:14px;height:90px;margin-left:-7px;transform-origin:bottom center;animation:swoosh .3s ease-out forwards}
.mallet::before{content:'';position:absolute;top:-18px;left:-9px;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd7d7,#c0392b)}
.mallet::after{content:'';position:absolute;inset:0;left:5px;width:4px;background:#d9b98a;border-radius:2px}
@keyframes swoosh{0%{transform:rotate(-55deg) translateY(-30px);opacity:0}50%{transform:rotate(0);opacity:1}100%{transform:rotate(-20deg) translateY(-10px);opacity:0}}
.card{background:#fffaf0;border:2px solid #e5d2b0;border-radius:18px;box-shadow:0 4px 0 #e0c9a0}
.pill{border-radius:999px;padding:6px 14px;background:#fffaf0;border:2px solid var(--walnut);font-weight:500;box-shadow:0 3px 0 var(--walnut);transition:transform .1s}
.pill:active{transform:translateY(3px);box-shadow:none}
.pill.on{background:var(--walnut);color:#fbe8c8}
input[type=range]{width:100%;accent-color:var(--walnut)}
.glass{background:var(--glass);border-radius:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 30px rgba(20,20,50,.35)}
.bonk{display:inline-block;animation:bonk 4s infinite}
@keyframes bonk{0%,85%,100%{transform:rotate(0)}90%{transform:rotate(-40deg)}93%{transform:rotate(10deg)}}
.titlebonk{display:inline-block;animation:tb 4s infinite}
@keyframes tb{0%,89%,100%{transform:none}91%{transform:scaleY(.9) translateY(3px)}}
.wave{animation:wv linear infinite}
@keyframes wv{to{transform:translateX(-20px)}}
.fade-in{animation:fi .6s ease both}
@keyframes fi{from{opacity:0;transform:translateY(12px)}}
.tip{font-size:12px;background:#fff3c4;border:1px dashed #b8860b;border-radius:10px;padding:6px 10px;margin-top:6px}