*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.canvas-container{width:100%;height:100dvh;position:fixed}@property --angle-1{syntax: "<angle>"; inherits: false; initial-value: -75deg;}@property --angle-2{syntax: "<angle>"; inherits: false; initial-value: -45deg;}:root{--global--size: clamp(2rem, 4vw, 5rem);--anim--active-time: .4s;--anim--active-ease: cubic-bezier(.25, 1, .5, 1)}body{font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}.button-wrap{position:relative;z-index:2;border-radius:999vw;background:transparent;pointer-events:none;transition:all var(--anim--active-time) var(--anim--active-ease)}.button-shadow{--shadow-cuttoff-fix: 2em;position:absolute;width:calc(100% + var(--shadow-cuttoff-fix));height:calc(100% + var(--shadow-cuttoff-fix));top:calc(0% - var(--shadow-cuttoff-fix) / 2);left:calc(0% - var(--shadow-cuttoff-fix) / 2);filter:blur(clamp(2px,.125em,12px));-webkit-filter:blur(clamp(2px,.125em,12px));-moz-filter:blur(clamp(2px,.125em,12px));-ms-filter:blur(clamp(2px,.125em,12px));overflow:visible;pointer-events:none}.button-shadow:after{content:"";position:absolute;z-index:0;inset:0;border-radius:999vw;background:linear-gradient(180deg,#0003,#0000001a);width:calc(100% - var(--shadow-cuttoff-fix) - .25em);height:calc(100% - var(--shadow-cuttoff-fix) - .25em);top:calc(var(--shadow-cuttoff-fix) - .5em);left:calc(var(--shadow-cuttoff-fix) - .875em);padding:.125em;box-sizing:border-box;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:all var(--anim--active-time) var(--anim--active-ease);overflow:visible;opacity:1}button{--border-width: clamp(1px, .0625em, 4px);all:unset;cursor:pointer;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);pointer-events:auto;z-index:3;background:linear-gradient(-75deg,#ffffff0d,#fff3,#ffffff0d);border-radius:999vw;box-shadow:inset 0 .125em .125em #0000000d,inset 0 -.125em .125em #ffffff80,0 .25em .125em -.125em #0003,0 0 .1em .25em inset #fff3,0 0 #fff;backdrop-filter:blur(clamp(1px,.125em,4px));-webkit-backdrop-filter:blur(clamp(1px,.125em,4px));-moz-backdrop-filter:blur(clamp(1px,.125em,4px));-ms-backdrop-filter:blur(clamp(1px,.125em,4px));transition:all var(--anim--active-time) var(--anim--active-ease)}button:active{backdrop-filter:blur(.01em);-webkit-backdrop-filter:blur(.01em);-moz-backdrop-filter:blur(.01em);-ms-backdrop-filter:blur(.01em);box-shadow:inset 0 .125em .125em #0000000d,inset 0 -.125em .125em #ffffff80,0 .15em .05em -.1em #00000040,0 0 .05em .1em inset #ffffff80,0 0 #fff}button span{position:relative;display:block;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;font-family:Inter,sans-serif;letter-spacing:-.05em;font-weight:500;font-size:1em;color:#323232;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-shadow:0em .25em .05em rgba(0,0,0,.1);transition:all var(--anim--active-time) var(--anim--active-ease);padding-inline:1.5em;padding-block:.875em}button:active span{text-shadow:.025em .025em .025em rgba(0,0,0,.12)}button span:after{content:"";display:block;position:absolute;z-index:1;width:calc(100% - var(--border-width));height:calc(100% - var(--border-width));top:calc(0% + var(--border-width) / 2);left:calc(0% + var(--border-width) / 2);box-sizing:border-box;border-radius:999vw;overflow:clip;background:linear-gradient(var(--angle-2),rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 40% 50%,rgba(255,255,255,0) 55%);z-index:3;mix-blend-mode:screen;pointer-events:none;background-size:200% 200%;background-position:0% 50%;background-repeat:no-repeat;transition:background-position calc(var(--anim--active-time) * 1.25) var(--anim--active-ease),--angle-2 calc(var(--anim--active-time) * 1.25) var(--anim--active-ease)}button:active span:after{background-position:25% 50%}button:active span:after{background-position:50% 15%;--angle-2: -15deg}button:after{content:"";position:absolute;z-index:1;inset:0;border-radius:999vw;width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));top:calc(0% - var(--border-width) / 2);left:calc(0% - var(--border-width) / 2);padding:var(--border-width);box-sizing:border-box;background:conic-gradient(from var(--angle-1) at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 5% 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 60% 95%,rgba(0,0,0,.5)),linear-gradient(180deg,#ffffff80,#ffffff80);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:all var(--anim--active-time) var(--anim--active-ease),--angle-1 .5s ease;box-shadow:inset 0 0 0 calc(var(--border-width) / 2) #ffffff80}button:active:after{--angle-1: -125deg}.container{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:25px}.container .explanation{font-size:12px;width:80%;text-align:justify;text-align-last:center;opacity:.4}.A-button{position:relative;z-index:2;border-radius:50%;background:transparent;pointer-events:none;transition:all var(--anim--active-time) var(--anim--active-ease)}.A-button .button-shadow{--shadow-cuttoff-fix: 2em;position:absolute;width:calc(100% + var(--shadow-cuttoff-fix));height:calc(100% + var(--shadow-cuttoff-fix));top:calc(0% - var(--shadow-cuttoff-fix) / 2);left:calc(0% - var(--shadow-cuttoff-fix) / 2);filter:blur(clamp(2px,.125em,12px));pointer-events:none}.A-button .button-shadow:after{content:"";position:absolute;z-index:0;inset:0;border-radius:50%;background:linear-gradient(180deg,#0003,#0000001a);width:calc(100% - var(--shadow-cuttoff-fix) - .25em);height:calc(100% - var(--shadow-cuttoff-fix) - .25em);top:calc(var(--shadow-cuttoff-fix) - .5em);left:calc(var(--shadow-cuttoff-fix) - .875em);padding:.125em;box-sizing:border-box;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:all var(--anim--active-time) var(--anim--active-ease);overflow:visible;opacity:1}.A-button button{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0}.A-button button span:after{width:100px;height:100px;top:-52%;left:-38%}.catch{position:absolute;top:150px;font-size:48px;opacity:.5;animation:catch 1s infinite}@keyframes catch{0%{color:#000}50%{color:#ff3131}to{color:#000}}.username-input{padding:.75em 1.25em;font-size:1em;border:2px solid rgba(0,0,0,.1);border-radius:999vw;background:#fffc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);outline:none;text-align:center;font-family:Inter,sans-serif;transition:border-color .2s ease}.username-input:focus{border-color:#0000004d}.username-input::placeholder{color:#0000004d}.leaderboard{position:fixed;top:20px;left:20px;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:16px 20px;min-width:200px;box-shadow:0 4px 20px #0000001a;z-index:100;font-family:Inter,sans-serif}.leaderboard h2{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#00000080;margin-bottom:12px}.leaderboard ul{list-style:none;display:flex;flex-direction:column;gap:8px}.leaderboard li{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#00000008;border-radius:8px;transition:background .2s ease}.leaderboard li.leader{background:linear-gradient(135deg,#ffd70033,#ffd7001a)}.leaderboard .rank{font-size:12px;font-weight:600;color:#0006;min-width:24px}.leaderboard .name{flex:1;font-size:14px;font-weight:500;color:#000c}.leaderboard .score{font-size:16px;font-weight:700;color:#000000e6}.leaderboard .no-players{font-size:12px;color:#0006;text-align:center;padding:10px}.game-over-overlay{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.game-over-modal{background:#fff;border-radius:24px;padding:40px 50px;text-align:center;max-width:400px;width:90%;animation:slideUp .5s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.game-over-modal .trophy{font-size:64px;margin-bottom:16px;animation:bounce 1s ease infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.game-over-modal h1{font-size:28px;font-weight:700;color:#333;margin-bottom:8px}.game-over-modal .final-score{font-size:16px;color:#666;margin-bottom:30px}.final-leaderboard{background:#f5f5f5;border-radius:16px;padding:20px;margin-bottom:30px}.final-leaderboard h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#999;margin-bottom:16px}.final-leaderboard ul{list-style:none;display:flex;flex-direction:column;gap:8px}.final-leaderboard li{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff;border-radius:10px}.final-leaderboard li.winner{background:linear-gradient(135deg,gold,#ffed4a);font-weight:600}.final-leaderboard .rank{font-size:12px;font-weight:600;color:#999;min-width:28px}.final-leaderboard li.winner .rank{color:#856404}.final-leaderboard .name{flex:1;font-size:14px;color:#333;text-align:left}.final-leaderboard .score{font-size:16px;font-weight:700;color:#333}.game-over-buttons{display:flex;gap:12px;justify-content:center}.play-again-btn,.new-room-btn{padding:14px 28px;border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.play-again-btn{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.play-again-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.new-room-btn{background:#f0f0f0;color:#333}.new-room-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}