:root{--paper:#f3eee5;--ink:#171714;--red:#ef412c;--yellow:#f3ca52}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}.noise{position:fixed;inset:0;pointer-events:none;opacity:.045;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}header{position:fixed;z-index:5;top:0;left:0;right:0;height:72px;padding:0 clamp(20px,4vw,60px);display:flex;align-items:center;justify-content:space-between}.brand{color:var(--ink);text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-1px}.brand span{color:var(--red)}.brand i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:8px}.sound,.reset{background:none;border:0;border-bottom:1px solid currentColor;padding:3px 0;color:var(--ink);font:500 10px DM Mono,monospace;letter-spacing:.08em;cursor:pointer}.sound span{color:#18734c}
main{height:100dvh;min-height:460px;display:grid;grid-template-rows:1fr auto auto 1fr;place-items:center;padding:75px 20px 35px}.question{align-self:end;margin:0 0 clamp(18px,3vh,34px);font:500 11px DM Mono,monospace;letter-spacing:.18em;text-transform:uppercase}.button-stage{position:relative;transition:transform .28s ease}.button-stage:before{content:"";position:absolute;left:-10%;right:-10%;top:calc(-10% + 8px);bottom:calc(-10% - 8px);border:1px dashed rgba(23,23,20,.2);border-radius:50%;animation:spin 24s linear infinite}.hit-button{position:relative;width:clamp(210px,34vh,350px);height:clamp(210px,34vh,350px);border-radius:50%;border:0;background:var(--red);color:#fff;cursor:pointer;box-shadow:0 16px 0 #a72b1b,0 25px 38px rgba(55,22,16,.32),inset 0 4px 2px rgba(255,255,255,.42);transition:transform .08s,box-shadow .08s,background .25s,border-radius .25s}.hit-button:hover{transform:translateY(-4px);box-shadow:0 20px 0 #a72b1b,0 30px 42px rgba(55,22,16,.3),inset 0 4px 2px rgba(255,255,255,.42)}.hit-button:active,.hit-button.hit{transform:translateY(12px) scale(.97);box-shadow:0 4px 0 #a72b1b,0 8px 15px rgba(55,22,16,.3),inset 0 4px 2px rgba(255,255,255,.35)}.hit-button:focus-visible{outline:5px solid var(--yellow);outline-offset:10px}.rim{position:absolute;inset:13px;border:2px solid rgba(255,255,255,.18);border-radius:inherit}.label{position:relative;display:grid;place-items:center;height:100%;font-weight:800;font-size:clamp(29px,5vh,51px);line-height:.83;letter-spacing:-.07em}.reaction{height:28px;margin:clamp(26px,4vh,42px) 0 0;font-size:clamp(16px,2.2vh,21px);font-weight:700;letter-spacing:-.03em;text-align:center}.reaction.pop{animation:pop .3s ease}.hint{align-self:start;margin:8px 0 0;opacity:.45;font:9px DM Mono,monospace;text-transform:uppercase;letter-spacing:.1em}.count{position:fixed;left:clamp(20px,4vw,60px);bottom:34px;font:9px/1.5 DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em}.count span{font:800 25px Manrope;letter-spacing:-.04em}.reset{position:fixed;right:clamp(20px,4vw,60px);bottom:38px;opacity:.55}
.burst{position:fixed;z-index:15;pointer-events:none;font:800 19px Manrope;color:var(--red);animation:fly .65s ease-out forwards}.shake{animation:shake .2s linear}.button-stage.sideways{transform:rotate(90deg)}.button-stage.upside{transform:rotate(180deg)}.button-stage.lean{transform:rotate(-14deg)}.button-stage.tiny{transform:scale(.38)}.button-stage.huge{transform:scale(1.16)}.button-stage.wiggle{animation:wiggle .35s ease}.button-stage.square .hit-button{border-radius:12px}.button-stage.pill .hit-button{border-radius:42% 58% 35% 65%/55% 38% 62% 45%}.button-stage.fancy .hit-button{background:#8757d6;box-shadow:0 16px 0 #57359a,0 25px 38px rgba(55,22,16,.25)}.button-stage.yellow .hit-button{background:#f3ca52;color:#171714;box-shadow:0 16px 0 #b38d25,0 25px 38px rgba(55,22,16,.25)}.button-stage.blue .hit-button{background:#2879df;box-shadow:0 16px 0 #17509b,0 25px 38px rgba(15,40,70,.28)}.button-stage.green .hit-button{background:#2f9666;box-shadow:0 16px 0 #1c6140,0 25px 38px rgba(15,60,35,.25)}.button-stage.black .hit-button{background:#171714;box-shadow:0 16px 0 #000,0 25px 38px rgba(0,0,0,.3)}.button-stage.flat .hit-button{box-shadow:none;border:3px solid #171714}.button-stage.flat:before{display:none}.button-stage.dotted .hit-button{background-image:radial-gradient(rgba(255,255,255,.3) 2px,transparent 2px);background-size:18px 18px}.button-stage.soft .hit-button{border-radius:38% 62% 63% 37%/45% 36% 64% 55%}.button-stage.soft:before{border-radius:43% 57% 58% 42%/48% 41% 59% 52%}.button-stage.loud .label{font-size:clamp(43px,7vh,72px)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pop{50%{transform:scale(1.12)}}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes wiggle{25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}@keyframes fly{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
@media(max-height:600px){header{height:55px}.hit-button{width:210px;height:210px}main{padding-top:55px}.reaction{margin-top:22px}.count,.reset{bottom:16px}}@media(max-width:520px){.count{bottom:18px}.reset{bottom:21px}.hit-button{width:min(62vw,31vh);height:min(62vw,31vh)}.question{margin-bottom:20px}.reaction{margin-top:30px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* Extra clearance keeps copy outside the deepest and largest button variants. */
.question{margin-bottom:clamp(48px,6vh,72px)}
.reaction{margin-top:clamp(52px,7vh,78px)}
.button-stage.pink .hit-button{background:#ee5c9a;box-shadow:0 16px 0 #a83265,0 25px 38px rgba(70,20,45,.25)}
.button-stage.orange .hit-button{background:#f28b30;color:#171714;box-shadow:0 16px 0 #ad5817,0 25px 38px rgba(70,35,10,.25)}
.button-stage.cyan .hit-button{background:#49c8d1;color:#171714;box-shadow:0 16px 0 #248b92,0 25px 38px rgba(15,60,65,.23)}
.button-stage.white .hit-button{background:#fff;color:#171714;box-shadow:0 16px 0 #bdb8b0,0 25px 38px rgba(40,35,30,.2)}
.button-stage.striped .hit-button{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 12px,transparent 12px 24px)}
.button-stage.oval .hit-button{border-radius:50% 32%}
.button-stage.diamond{transform:rotate(45deg) scale(.78)}.button-stage.diamond .label{transform:rotate(-45deg)}
.button-stage.thin .hit-button{transform:scaleX(.58)}.button-stage.thin .label{transform:scaleX(1.72)}
.button-stage.wide .hit-button{transform:scaleX(1.18) scaleY(.75)}.button-stage.wide .label{transform:scaleX(.85) scaleY(1.33)}
.button-stage.outline .hit-button{background:transparent;color:#171714;border:7px solid #171714;box-shadow:0 16px 0 #171714}
.button-stage.neon .hit-button{background:#d8ff35;color:#171714;box-shadow:0 16px 0 #8ca91b,0 0 45px rgba(181,255,31,.65)}
@media(max-height:600px){.hit-button{width:190px;height:190px}.question{margin-bottom:34px}.reaction{margin-top:38px}}
@media(max-width:520px){.hit-button{width:min(58vw,29vh);height:min(58vw,29vh)}.question{margin-bottom:38px}.reaction{margin-top:42px}}
@font-face{font-family:Manrope;src:url('fonts/Manrope.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
@font-face{font-family:'DM Mono';src:url('fonts/DMMono-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'DM Mono';src:url('fonts/DMMono-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
.legal-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:22px}.legal-links a{color:var(--ink);font:500 9px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid transparent}.legal-links a:hover,.legal-links a:focus-visible{border-color:currentColor}
@media(max-width:620px){.legal-links{top:58px;gap:16px}.legal-links a{font-size:8px}}
.legal-links{position:fixed;z-index:5;top:auto;bottom:18px;opacity:.42;gap:14px;transition:opacity .2s}.legal-links:hover,.legal-links:focus-within{opacity:1}.legal-links a{font-size:8px;letter-spacing:.05em;text-transform:none}
@media(max-width:620px){.legal-links{top:auto;bottom:8px}.count{bottom:38px}.reset{bottom:42px}}
.stats{position:fixed;left:clamp(20px,4vw,60px);bottom:34px;display:flex;gap:25px;align-items:flex-end}.stats .count,.total-count{position:static;font:9px/1.5 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em}.stats span{display:block;font:800 25px Manrope,sans-serif;line-height:1;letter-spacing:-.04em}@media(max-width:620px){.stats{bottom:38px;gap:14px}.stats .count,.total-count{font-size:7px}.stats span{font-size:20px}.reset{bottom:42px}}
.cheater-badge{position:fixed;z-index:18;top:22px;left:50%;transform:translateX(-50%) rotate(-3deg);padding:7px 11px;border:2px solid var(--red);color:var(--red);background:var(--paper);font:800 10px 'DM Mono',monospace;letter-spacing:.08em;box-shadow:3px 3px 0 var(--red);animation:cheater-in .28s ease}.cheater-badge[hidden]{display:none}.cheater-mode .hit-button{cursor:crosshair}@keyframes cheater-in{from{transform:translateX(-50%) rotate(-12deg) scale(1.8);opacity:0}}@media(max-width:620px){.cheater-badge{top:58px;font-size:8px}}
.reaction{width:min(92vw,760px);height:auto;min-height:28px;padding:0 8px}