@font-face{font-family:DM Sans;src:url(/fonts/DMSans.ttf) format("truetype");font-display:swap}@font-face{font-family:Syne;src:url(/fonts/Syne-Bold.ttf) format("truetype");font-display:swap}:root{--background-color: #1b2027;--text-color: rgba(255, 255, 255, .87);--accent-color: #535bf2;--accent-color-2: #8491e6;--button-background-color: #1a1a1a;--additional-color: #131313;--box-shadow-color: rgba(0, 0, 0, .6);--incorrect-color: #e25d68;--correct-color: #00ff00;font-family:DM Sans;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--text-color);background-color:var(--background-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:scope::-webkit-scrollbar{width:6px}:scope::-webkit-scrollbar-thumb{background-color:var(--text-color);border-radius:8px}:scope::-webkit-scrollbar-track{background-color:transparent}a{font-weight:500;text-decoration:inherit}a:hover{color:var(--accent-color)}body{margin:0}h1{font-size:3.2rem;line-height:1.1}h2{font-size:2.6rem;line-height:1.1;text-align:center}@media screen and (max-width: 450px){h2{font-size:2rem}}button,input[type=text],input[type=number],select{font-family:inherit;font-weight:500;color:var(--text-color);background-color:var(--button-background-color);border-radius:8px;border:2px solid transparent;box-shadow:var(--box-shadow-color);transition:border-color .25s}button:hover,button:focus,button:focus-visible,button:active,input[type=text]:focus,input[type=number]:focus,select:focus{outline:none;border-color:var(--accent-color)}button{padding:.6em 1.2em;font-size:1rem;cursor:pointer}select{padding:.1em;font-size:.9rem;cursor:pointer}input[type=text],input[type=number]{padding:.5em;font-size:1rem}input[type=range]{cursor:pointer}.inline-form-group{display:flex;align-items:baseline;gap:.5em}dialog{color:var(--text-color);background-color:var(--background-color)}.error{color:var(--incorrect-color);margin:0 0 .5em;line-height:1.2;height:20px;white-space:nowrap}.hidden{display:none!important}.invisible{visibility:hidden}:root[data-theme=light]{--background-color: #f9f9f9;--text-color: #333;--accent-color: #6b7ffd;--button-background-color: #f9f9f9;--additional-color: #ccc;--box-shadow-color: 0 0 3px rgba(0, 0, 0, .6)}:root[data-theme=default]{--background-color: #1b2027;--text-color: rgba(255, 255, 255, .87);--accent-color: #535bf2;--button-background-color: #1a1a1a;--additional-color: #131313;--box-shadow-color: 0 0 3px rgba(0, 0, 0)}:root[data-theme=dark]{--background-color: #000000;--text-color: rgba(241, 241, 241, .87);--accent-color: #575ff9;--button-background-color: #181818;--additional-color: #131313;--box-shadow-color: 0 0 1px 1px rgba(86, 86, 86, .515)}@media (prefers-color-scheme: light){:root{--background-color: #f9f9f9;--text-color: #333;--accent-color: #6b7ffd;--button-background-color: #f9f9f9;--additional-color: #ccc}}*{font-family:DM Sans}.main{display:flex;flex-direction:row;align-items:center;height:100vh}.main-screen{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:100vh;width:100%;position:relative;overflow:hidden}.main-screen>h1{font-family:Syne;font-size:5em;height:25vh;margin:0;display:flex;justify-content:center;align-items:center;text-align:center}@media screen and (max-width: 1000px){.main-screen>h1{height:20vh}}@media screen and (max-width: 450px){.main-screen>h1{font-size:3.5rem}}.main-screen label{text-indent:.3rem;margin-bottom:.1em;margin-top:.3em;font-size:large}.main-screen .start-screen-content{display:flex;flex-direction:column;justify-content:end;height:30vh}@media screen and (max-width: 1000px){.main-screen .start-screen-content{height:auto}}.main-screen .start-screen-inputs{display:flex;flex-direction:column}.main-screen .start-screen-inputs>input:first-of-type{margin-bottom:1em}.main-screen .start-screen-buttons{display:flex;gap:1em}.main-screen .start-screen-buttons>button{width:147px}.main-screen .game-screen-content{display:flex;flex-direction:column;gap:1em;justify-self:center;width:300px}@media screen and (max-width: 1000px){.main-screen .game-screen-content:has(.timer:not(.invisible)){height:44vh}}.main-screen .round-summary{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;gap:1em;width:338px;height:30vh}.main-screen .round-summary h3{text-align:center}.main-screen .summary-list{display:flex;flex-direction:column;padding:0;list-style-type:none;counter-reset:list-counter;width:100%}.main-screen .summary-list li{counter-increment:list-counter;width:-webkit-fill-available;position:relative;padding:0 0 .5em 2em;margin-bottom:2.5em;border-bottom:1px solid var(--text-color);text-align:left;display:flex;flex-direction:row;justify-content:space-between}.main-screen .summary-list li :before{color:inherit}.main-screen .summary-list li p{margin:0}.main-screen .summary-list li:before{content:counter(list-counter) ".";color:var(--text-color);font-size:2em;line-height:1;position:absolute;left:0;bottom:10px}.main-screen>footer{height:auto;display:flex;flex-direction:column;justify-content:end}.main-screen .progress-bar{position:absolute;z-index:1;top:0;width:0px;height:8px;left:0;background:linear-gradient(to right,var(--accent-color) 30%,var(--accent-color-2) 100%);transition:width .2s linear}.main-screen .progress-bar.right{left:auto;right:0}.main-screen .timer{display:flex;align-items:baseline;margin:0 0 .5em}@media screen and (max-width: 450px){.main-screen .timer{justify-content:center;margin:0 0 1em}}.song-picker{position:fixed;bottom:3rem;display:flex;align-items:center;justify-content:end;flex-direction:column;margin:0 3vw;max-height:45vh;width:-webkit-fill-available}@media screen and (max-width: 1000px){.song-picker{max-height:70vh}.song-picker>h2{margin:0}}.song-picker-songs{display:flex;gap:clamp(1rem,3vw,2rem)}@media screen and (max-width: 1000px){.song-picker-songs{display:grid;grid:1fr 1fr / 1fr 1fr;margin:1em 0}.song-picker-songs>:nth-child(odd){justify-self:end}.song-picker-songs>:nth-child(2n){justify-self:start}}.song-picker-song{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:1 / 1;max-width:25ch;width:100%;border-radius:10%;background-color:var(--additional-color);overflow:hidden;cursor:pointer}.song-picker-song>img{width:87%;aspect-ratio:1 / 1;border-radius:8.7%;object-fit:none;-webkit-user-select:none;user-select:none}.song-picker-song.disabled:not(.selected){opacity:.5;cursor:not-allowed}.song-picker-song.selected{background-color:#fff}.song-picker-song.correct{background-color:var(--correct-color)}.song-picker-song.incorrect{background-color:var(--incorrect-color)}.song-info{position:absolute;display:flex;flex-direction:column;justify-content:end;bottom:6%;width:87%;aspect-ratio:1 / 1;border-radius:8.7%;background-image:linear-gradient(transparent,#000c);color:#fff;text-align:center;font-size:1.1rem;-webkit-user-select:none;user-select:none}.song-info>p{margin:0;padding:.5em}.sidebar{position:sticky;display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:25vw;min-width:360px;margin-left:calc(-25vw + 83px);transition:margin-left .4s ease-in-out;height:100%;background-color:#0000001a;font-weight:700;text-align:center;box-shadow:var(--box-shadow-color)}.sidebar>h2{margin-top:30%}.sidebar .sidebar-buttons{display:flex;width:calc(100% - 40px);flex-direction:row;align-items:center;justify-content:space-between;gap:20px;padding:0 3px 8px 20px;transition:padding .3s ease-in-out}.sidebar.open{margin-left:0}.sidebar.open .sidebar-buttons{padding:0 20px 8px}.sidebar .settings-button,.sidebar .leave-button{display:flex;padding:4px;box-shadow:var(--box-shadow-color)}.sidebar .settings-button:focus,.sidebar .leave-button:focus{outline:none;border:2px solid transparent}.sidebar .settings-button:hover,.sidebar .leave-button:hover{border:2px solid var(--accent-color)}.sidebar .settings-button>svg{transition:rotate .3s ease-in-out}.sidebar .settings-button:hover>svg{rotate:90deg}.sidebar .leave-button>svg{transition:rotate .2s ease-in-out,transform .2s ease-in-out}.sidebar .leave-button:hover>svg{rotate:8deg;transform:translate(4px)}.sidebar .volume{display:flex;flex-direction:column}.sidebar .volume>label{text-indent:.3rem;margin-bottom:.1em;font-size:large}.sidebar .volume>input{margin-bottom:1em}@media (max-width: 1000px){.sidebar{display:none}}@media (max-width: 1500px){.sidebar{margin-left:-294px}}body:has(.settings-dialog[open]) .sidebar .settings-button svg{rotate:90deg}.settings-dialog{position:fixed;justify-items:center;align-content:center;width:100%;height:100%;border:none;box-shadow:var(--box-shadow-color);background-color:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:20px}.settings-dialog .settings-dialog-content{text-align:center;background-color:var(--background-color);padding:50px;border:2px solid rgb(127 127 127 / 50%);border-radius:10px;width:min-content}.settings-dialog .settings-dialog-content>.inline-form-group{justify-content:space-between}.settings-dialog .settings-dialog-content h2{margin-top:0;margin-bottom:25px}.leaderboard{width:86%;opacity:0}.leaderboard-players{display:flex;flex-direction:column;align-items:center;padding:10px}.leaderboard-players .clients-player{background-color:var(--additional-color)}.leaderboard-players .leaderboard-player:first-child{border-radius:8px 8px 0 0}.leaderboard-players .leaderboard-player{display:flex;justify-content:space-between;width:100%;border-bottom:1px solid var(--text-color)}.leaderboard-players .leaderboard-player>p{margin-right:20px}.leaderboard-players .leaderboard-player>span{display:flex;align-items:center;gap:30px;margin-left:20px}.leaderboard-players .leaderboard-player>span>p:last-child{display:flex;gap:5px}.game-summary{display:flex;flex-direction:column;justify-content:flex-end;height:30vh;width:338px}.game-summary>div:last-of-type{display:flex;justify-content:space-between;gap:1rem}.game-summary>div:last-of-type button{width:-webkit-fill-available}.host-controls{display:flex;flex-direction:column;justify-content:center}.host-controls .artists-list{display:flex;flex-wrap:wrap;width:300px;height:30vh;border-radius:8px;position:relative;justify-content:center;box-shadow:var(--box-shadow-color)}.host-controls .artists-list>.artists-list-header{z-index:10;display:flex;padding:10px 20px;justify-content:center;align-items:center;flex-wrap:nowrap;height:fit-content;width:260px;font-size:1rem;color:var(--text-color);border-radius:8px 8px 0 0;background-color:var(--additional-color);gap:.5em}.host-controls .artists-list>.artists-list-header>svg{color:var(--text-color);background-color:var(--button-background-color);padding:.5em;border-radius:8px;cursor:pointer;transition:border-color .25s;box-shadow:var(--box-shadow-color);border:2px solid transparent}.host-controls .artists-list>.artists-list-header>svg:hover{border-color:var(--accent-color)}.host-controls .artists-list>.artists-list-header :focus{border-color:var(--accent-color);outline:none}.host-controls .artists-list>.artists-list-content{width:100%;height:calc(30vh - 61px - 2em);border-radius:0 0 8px 8px;overflow-y:scroll;overflow-x:hidden;background-color:var(--button-background-color);padding:1em;display:flex;align-content:flex-start;align-items:flex-start;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:.6em}.host-controls .artists-list>.artists-list-content::-webkit-scrollbar{width:4px}.host-controls .artists-list>.artists-list-content::-webkit-scrollbar-thumb{background-color:var(--text-color);border-radius:8px}.host-controls .artists-list>.artists-list-content::-webkit-scrollbar-track{background-color:transparent}.host-controls .artists-list>.artists-list-content:before{content:"";position:absolute;top:61px;left:0;right:0;height:20px;width:-webkit-fill-available;border-radius:0 0 8px 8px;box-shadow:inset 0 13px 20px -20px var(--accent-color);z-index:1;pointer-events:none}.host-controls .artists-list>.artists-list-content .artist{display:flex;align-items:center;width:fit-content;height:fit-content;padding:.2em .5em;gap:10px;color:var(--text-color);background-color:var(--button-background-color);border-radius:8px;cursor:pointer;transition:border-color .25s;box-shadow:var(--box-shadow-color);background-position:center;border:2px solid transparent;word-break:keep-all;white-space:nowrap}.host-controls .artists-list>.artists-list-content .artist:hover{border:2px solid var(--accent-color)}.host-controls .gameMode{-webkit-user-select:none;user-select:none;cursor:pointer;position:relative}.host-controls .gameMode>.gameModeSelected{display:flex;padding:.5em;border-radius:8px;border:2px solid transparent;background-color:var(--button-background-color);transition:border-color .25s;box-shadow:var(--box-shadow-color);z-index:10;position:relative}.host-controls .gameMode>.gameModeSelected:focus{border-color:var(--accent-color)}.host-controls .gameMode .gameModeOptions{opacity:0;visibility:hidden;transform:translateY(-.5em);flex-direction:column;position:absolute;z-index:100;top:100%;left:0;width:100%;transition:opacity .25s,transform .25s,border-color .25s;background-color:var(--additional-color);border-radius:8px;box-shadow:var(--box-shadow-color)}.host-controls .gameMode .gameModeOptions.gameModeOptionsVisible{opacity:1;transform:translateY(0);visibility:visible}.host-controls .gameMode .gameModeOptions .gameModeOption{display:flex;padding:.5em;border-radius:8px;border:2px solid transparent;transition:border-color .25s}.host-controls .gameMode .gameModeOptions .gameModeOption:hover{border-color:var(--accent-color)}.lobbies-list{width:30rem}@media screen and (max-width: 1000px){.lobbies-list{margin-top:2em;width:auto}}.lobbies-list>ul{display:flex;flex-direction:column;gap:1em;margin:0;padding:0;list-style-type:none}.lobbies-list>ul>li{position:relative;display:flex;align-items:center;justify-content:space-between;width:inherit;color:#ffffffde;background-color:var(--button-background-color);border-radius:8px;padding:.5em 1em;gap:10px;cursor:pointer;transition:border-color .25s;box-shadow:var(--box-shadow-color),inset 0 0 0 100px #0009;background-image:url(https://picsum.photos/380/80?random0);background-position:center;overflow:hidden}.lobbies-list>ul>li h2{margin:0;font-size:2em}.lobbies-list>ul>li .join-lobby-button{width:100%;height:100%;background:radial-gradient(circle at 50% 50%,#34683080,#00000080);position:absolute;right:0;bottom:0;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .25s,transform .25s;transform:translateY(.5em)}.lobbies-list>ul>li:hover>.join-lobby-button{opacity:1;transform:translateY(0)}