@import"https://fonts.googleapis.com/css2?family=Bangers&family=DM+Sans:wght@300;400;500&display=swap";@property --border-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}:root{--bg: #0a0a0b;--surface: #111114;--surface-hover: #18181d;--boo-color: #e8453c;--clap-color: #f5c842;--text-primary: #f0ede8;--text-muted: #6b6870;--border: rgba(255, 255, 255, .06)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;touch-action:manipulation}body{font-family:DM Sans,sans-serif;background:var(--bg);color:var(--text-primary);display:flex;align-items:center;justify-content:center}#app{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}#app:before{content:"";position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,rgba(30,28,35,.5),transparent);pointer-events:none;z-index:0}#app:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.6) 100%);pointer-events:none;z-index:0}.spotlight{position:fixed;top:-20%;left:50%;transform:translate(-50%);width:600px;height:700px;background:radial-gradient(ellipse at top,rgba(255,255,255,.04) 0%,transparent 70%);pointer-events:none;z-index:0;transition:background .6s ease}.spotlight.boo-lit{background:radial-gradient(ellipse at top,rgba(232,69,60,.1) 0%,transparent 70%)}.spotlight.clap-lit{background:radial-gradient(ellipse at top,rgba(245,200,66,.1) 0%,transparent 70%)}.grain{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:100;opacity:.03}.flash{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:99;opacity:0}.flash.boo-flash{background:radial-gradient(circle at center,rgba(232,69,60,.15),transparent 70%);animation:flash-blink .3s ease-out}.flash.clap-flash{background:radial-gradient(circle at center,rgba(245,200,66,.15),transparent 70%);animation:flash-blink .3s ease-out}@keyframes flash-blink{0%{opacity:1}to{opacity:0}}.stage{position:relative;z-index:1;text-align:center;padding-bottom:5rem}.header{margin-bottom:3rem}.header h1{font-family:Bangers,cursive;font-size:3.5rem;letter-spacing:.15em;background:linear-gradient(90deg,var(--boo-color),var(--clap-color));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 12px rgba(232,69,60,.4)) drop-shadow(0 0 12px rgba(245,200,66,.4))}.header p{font-weight:300;font-size:.95rem;color:var(--text-muted);margin-top:.25rem}.buttons{display:flex;gap:2rem;justify-content:center;max-width:440px;margin:0 auto}.btn{position:relative;overflow:hidden;border:1px solid var(--border);background:var(--surface);border-radius:16px;padding:1.5rem;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;flex:1;aspect-ratio:1;min-width:160px;-webkit-user-select:none;user-select:none;outline:none}.btn:disabled:not(.playing){opacity:.35;cursor:not-allowed;transform:none}.btn:hover:not(:disabled){transform:translateY(-3px);background:var(--surface-hover)}.btn:active{transform:scale(.94)}.btn:focus-visible{outline:2px solid var(--text-muted);outline-offset:3px}.btn .icon{position:relative;z-index:2;font-size:2.8rem;line-height:1;transition:transform .3s ease}.btn .label{position:relative;z-index:2;font-family:Bangers,cursive;font-size:1.6rem;letter-spacing:.1em;color:var(--text-primary)}.btn .sublabel{position:relative;z-index:2;font-size:.75rem;font-weight:400;color:var(--text-muted)}.btn.playing{border-color:transparent;overflow:visible}.btn.playing:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;z-index:1;border-radius:18px;background:conic-gradient(from var(--border-angle),transparent 40%,var(--play-color) 50%,transparent 60%);animation:rotate-border 1.5s linear infinite;pointer-events:none}.btn.playing:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:16px;background:var(--surface);pointer-events:none}.btn-boo.playing{--play-color: var(--boo-color)}.btn-clap.playing{--play-color: var(--clap-color)}@keyframes rotate-border{to{--border-angle: 360deg}}.btn-boo:hover{box-shadow:0 8px 32px #e8453c26}.btn-boo.firing{box-shadow:0 0 40px #e8453c4d;animation:glow-pulse-boo .6s ease}.btn-boo.firing .icon{animation:icon-pop .4s ease}.btn-clap:hover{box-shadow:0 8px 32px #f5c84226}.btn-clap.firing{box-shadow:0 0 40px #f5c8424d;animation:glow-pulse-clap .6s ease}.btn-clap.firing .icon{animation:icon-pop .4s ease}@keyframes glow-pulse-boo{0%,to{box-shadow:0 0 20px #e8453c26}50%{box-shadow:0 0 50px #e8453c66}}@keyframes glow-pulse-clap{0%,to{box-shadow:0 0 20px #f5c84226}50%{box-shadow:0 0 50px #f5c84266}}@keyframes icon-pop{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.3) rotate(-8deg)}60%{transform:scale(.95) rotate(3deg)}to{transform:scale(1) rotate(0)}}.ripple{position:absolute;border-radius:50%;background:#ffffff1f;transform:scale(0);animation:ripple-expand .6s ease-out forwards;pointer-events:none}@keyframes ripple-expand{to{transform:scale(4);opacity:0}}.footer{position:fixed;bottom:1rem;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:.75rem;z-index:2}.footer-divider{width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--boo-color),var(--clap-color),transparent)}.footer-content{display:flex;align-items:center;gap:.75rem}.footer-sep{color:var(--text-muted);font-size:.8rem}.made-by{font-size:.8rem;color:var(--text-muted)}.made-by a{color:var(--text-muted);text-decoration:none;transition:color .2s ease}.made-by a:hover{color:var(--text-primary)}.credits-link{background:none;border:none;color:var(--text-muted);font-family:DM Sans,sans-serif;font-size:.8rem;cursor:pointer;padding:0;transition:color .2s ease}.credits-link:hover{color:var(--text-primary)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#000000b3;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-overlay[hidden]{display:none}.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2rem;max-width:420px;width:90%}.modal h2{font-family:Bangers,cursive;font-size:1.6rem;letter-spacing:.05em;margin-bottom:1.25rem;color:var(--text-primary)}.modal ul{list-style:none;display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.modal li{font-size:.85rem;color:var(--text-muted);line-height:1.5}.modal li strong{color:var(--text-primary)}.modal a{color:var(--clap-color);text-decoration:none}.modal a:hover{text-decoration:underline}.modal-close{background:var(--surface-hover);border:1px solid var(--border);color:var(--text-primary);font-family:DM Sans,sans-serif;font-size:.85rem;padding:.5rem 1.25rem;border-radius:8px;cursor:pointer;transition:background .2s ease}.modal-close:hover{background:var(--border)}@media (max-width: 480px){.buttons{flex-direction:column;gap:1.5rem}.header h1{font-size:2.5rem}.btn{padding:2rem 2.5rem;min-width:unset;width:100%;max-width:200px;margin:0 auto}}