:root{--blow:#3ec8ff;--draw:#ffb02e;--bg1:#0c1224;--bg2:#17181c;--chrome:#d9dde3;}
body{margin:0;font-family:'IBM Plex Mono',monospace;color:#e8e2d4;min-height:100vh;
background:radial-gradient(ellipse at 50% 22%,rgba(255,220,150,.13),transparent 55%),linear-gradient(160deg,var(--bg1),var(--bg2));}
.rye{font-family:'Rye',serif;}
.badge{background:linear-gradient(180deg,#fff,#9aa1ab 45%,#e9ecef 55%,#7d848e);-webkit-background-clip:text;color:transparent;text-shadow:0 2px 0 rgba(0,0,0,.2);}
.harp{position:relative;border-radius:18px;padding:18px 14px;
background:linear-gradient(180deg,#f4f6f8,#aeb4bc 30%,#e6e9ec 50%,#8d949d 75%,#d2d6db);
box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 2px 0 #fff;touch-action:none;user-select:none;}
.harp::before,.harp::after{content:"";position:absolute;left:24px;right:24px;height:2px;background:repeating-linear-gradient(90deg,#6b717a 0 8px,transparent 8px 12px);opacity:.5}
.harp::before{top:7px}.harp::after{bottom:7px}
.comb{background:repeating-linear-gradient(90deg,#7a4a22 0 3px,#8f5a2b 3px 7px);border-radius:6px;padding:6px;display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.hole{background:#120c08;border-radius:6px;display:flex;flex-direction:column;overflow:hidden;min-height:96px;box-shadow:inset 0 3px 8px #000}
.half{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:#776;transition:background .08s;cursor:pointer}
.half.blow.on{background:radial-gradient(circle,var(--blow),rgba(62,200,255,.2));color:#001;animation:shake .06s infinite}
.half.draw.on{background:radial-gradient(circle,var(--draw),rgba(255,176,46,.2));color:#210;animation:shake .06s infinite}
.half.next{outline:2px dashed #7f7;outline-offset:-3px}
@keyframes shake{0%{transform:translateX(-1px)}50%{transform:translateX(1px)}}
.panel{background:rgba(20,22,28,.85);border:1px solid #333;border-radius:14px}
input[type=range]{accent-color:var(--draw);width:100%}
.pill{border:1px solid #555;border-radius:999px;padding:4px 12px;font-size:12px}
.pill:hover{border-color:var(--draw);color:var(--draw)}
.fade{animation:fade .7s ease both}
@keyframes fade{from{opacity:0;transform:translateY(12px)}}