:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--spinner-height: 110px;--fluid-25-50: clamp(1.5625rem, 0rem + 1.3021vw, 3.125rem);--fluid-30-60: clamp(1.875rem, 0rem + 1.5625vw, 3.75rem);--fluid-40-80: clamp(2.5rem, 0rem + 2.0833vw, 5rem);--fluid-50-100: clamp(3.125rem, 0rem + 2.6042vw, 6.25rem);--fluid-60-120: clamp(3.75rem, 0rem + 3.125vw, 7.5rem);--fluid-80-160: clamp(5rem, 0rem + 4.1667vw, 10rem);--fluid-100-200: clamp(6.25rem, 0rem + 5.2083vw, 12.5rem);--fluid-120-240: clamp(7.5rem, 0rem + 6.25vw, 15rem);--fluid-140-280: clamp(8.75rem, 0rem + 7.2917vw, 17.5rem);--fluid-160-320: clamp(10rem, 0rem + 8.3333vw, 20rem)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}#playButton{position:absolute;top:var(--fluid-25-50);right:var(--fluid-25-50);border:none;outline:none;background:none;font-size:var(--fluid-25-50);color:#ffffff40;cursor:pointer;transition:color .2s ease}#playButton:hover{color:#fff}#canvas-container{position:fixed;top:0;left:0;outline:none;z-index:-1}.container{width:100%;height:100vh;display:grid}.container>*{grid-area:1 / -1}.content-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fluid-60-120);text-align:center}.svg-logo{width:370px;min-width:150px}.spinner-container{height:var(--spinner-height);aspect-ratio:16 / 2;font-size:clamp(1.5rem,5vh,8rem);font-weight:800;text-align:center;border-radius:99px;color:#000;background-color:#ffffffb3;backdrop-filter:blur(50px) saturate(230%);-webkit-backdrop-filter:blur(50px) saturate(230%);overflow:hidden;display:flex;align-items:center;justify-content:center}.draw-button{font-size:clamp(1.5rem,4vh,5rem);font-weight:800;padding:20px 80px;border-radius:99px;border:none;color:#000;background-color:#f50;cursor:pointer;transition:all .2s ease-in-out}.draw-button:hover{color:#f50;background-color:#fff}.home-link,.result-link{font-size:var(--fluid-25-50);color:#f50;text-decoration:none;cursor:pointer;transition:color .2s ease}.home-link:hover,.result-link:hover{color:#fff;text-decoration:underline}.home-link{margin-top:50px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:#000c;z-index:999;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}.modal-overlay.active{opacity:1;visibility:visible;pointer-events:auto}.modal-content{width:50vw;min-width:580px;height:60vh;border-radius:99px;background-color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}.modal-content h2{font-size:var(--fluid-50-100)}.modal-content p{font-size:var(--fluid-100-200);font-weight:900;color:#f50}.modal-btns{width:86%;display:flex;gap:5%;margin:var(--fluid-25-50)}.modal-content button{flex:1;font-size:var(--fluid-50-100);font-weight:600;background:none;border:none;outline:8px solid black;border-radius:99px;padding-block:var(--fluid-25-50);cursor:pointer}.modal-content button:hover{color:#fff;background:#f50;border-color:#f50;outline:8px solid #ff5500}@keyframes popIn{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popOut{0%{transform:scale(1);opacity:1}to{transform:scale(.85);opacity:0}}.result-page{width:100%;height:100vh;background-color:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.result-container{width:100%;height:100%;padding-block:var(--fluid-80-160);display:flex;flex-direction:column;align-items:center}.player-list{list-style:none;display:flex;flex-direction:column;gap:3vh;margin-top:50px}.player-item{font-size:var(--fluid-100-200);font-weight:800;padding:5px var(--fluid-50-100);border-radius:200px;background-color:#fff;color:#f50;text-align:center;min-width:540px;max-width:80vw}.modal-overlay{transition:opacity .3s ease,visibility .3s ease}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity .3s ease;opacity:1}.loading-screen.hidden{opacity:0;pointer-events:none}.loading-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;text-align:center}.loading-content img{width:350px;height:auto;animation:pulse 1.5s infinite ease-in-out}.loading-content p{color:#fff;font-size:2rem;font-weight:600;text-align:center}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.05)}}