:root {
    --small-border: 0.25vh;
    --big-font-size: min(4vh, 8vw);
    --loader: 2vh;
}
::-webkit-scrollbar {
    width: 0.75vh;
    height: 0.75vh;
}
::-webkit-scrollbar-thumb {
    background: var(--stop);
    border-radius: var(--radius);
}
@media (hover: hover) {
    button:hover {
        background: var(--text);
    }
    .button:enabled:hover {
        background: var(--button);
    }
    #difficulty:hover, #cancel:hover {
        background: var(--text);
        color: var(--background);
    }
    #toggle:hover {
        color: var(--text);
    }
    #send:hover {
        background: var(--button);
    }
    .match button:hover, .match label:hover {
        color: var(--button);
    }
    #list button:hover {
        background: var(--background) !important;
    }
    #search.search:hover {
        color: red;
    }
    .action:hover, .submenu:hover {
        background: var(--background);
        color: var(--text);
    }
}
@keyframes spinY {
    to {transform: translateY(-50%) rotate(360deg)}
}
@keyframes slide {
    to { left: 100%; }
}
@keyframes scroll {
    0%   { transform: translateX(-35%); }
    50%  { transform: translateX(calc(35%)); }
    100% { transform: translateX(-35%); }
}
@keyframes wipe {
    from { background-position: left; }
}
@keyframes flow {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
body {
    display: flex;
    font-family: var(--font);
    font-size: var(--font-size);
    background: var(--text);
    color: var(--text);
    flex-direction: column;
    align-items: center;
    touch-action: manipulation;
}
button {
    background: var(--button);
    color: var(--background);
    border: var(--small-border) solid var(--stop);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: var(--font-size);
    cursor: pointer;
}
div form, #social a, .item div {
    display: flex;
}
button:disabled {
    background: var(--stop);
    opacity: 0.75;
    pointer-events: none;
}
img {
    width: var(--big-font-size);
}
input {
    font-family: var(--font);
    font-size: var(--font-size);
    color: var(--text);
}
input[type="text"] {
    background: var(--background);
    border: var(--border) solid var(--button);
    border-radius: var(--radius);
    text-align: center;
}
input[type="number"] {
    border: var(--small-border) solid var(--stop);
    border-radius: var(--radius);
    text-align: center;
}
input[type="radio"] {
    width: 1.5vh;
    height: 1.5vh;
    cursor: pointer;
}
input[type="submit"] {
    position: absolute;
    right: -6.5%;
    top: 50%;
    transform: translate(50%, -50%);
    background: none; 
    border: none;
    cursor: pointer;
}
.input, .value.loading {
    position: relative;
}
#input {
    background: rgb(160, 32, 240);
    border: var(--small-border) solid var(--background);
    border-radius: var(--radius);
    display: none;
    align-items: center;
}
#invitation {
    flex: 1;
    background: var(--button);
    color: var(--background);
    outline: none;
    border: none;
    text-align: center;
}
#invitation::placeholder {
    color: var(--background);
    opacity: 0.5;
}
#search {
    padding-right: var(--gap);
    font-size: var(--font-size);
    cursor: pointer;
}
#difficulty {
    font-size: var(--font-size);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}
#left, #right {
    background: none;
    border: none;
}
#cd {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150vmin;
    transform: translate(-50%, -50%);
    z-index: -1;
}
#start {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
}
.circle {
    fill: none;
    stroke: black;
    stroke-width: 0.25;
    filter: url(#blur)
}
.grey1 {
    stop-color: rgb(15, 15, 15);
}
.grey2 {
    stop-color: rgb(30, 30, 30);
}
.grey3 {
    stop-color: rgb(50, 50, 50);
}
.grey4 {
    stop-color: rgb(90, 90, 90);
}
.grey5 {
    stop-color: rgb(150, 150, 150);
}
#progress {
    --percent: 0;
    --color: transparent;
    --delay: 0;
    --success: transparent;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        var(--success) calc(var(--delay) * 1%),
        var(--color) calc(var(--delay) * 1%),
        var(--color) calc(var(--percent) * 1%),
        transparent calc(var(--percent) * 1%),
        transparent 100%
    );
    z-index: -1;
}
.center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#countdown {
    width: 30vmin;
    height: 30vmin;
    border-radius: 50%;
    z-index: 1;
}
#box {
    width: 25vmin;
    height: 25vmin;
    background: var(--background);
    color: var(--button);
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: var(--border) solid var(--button);
    border-radius: 50%;
    z-index: 1;
}
#center {
    margin: 0;
    font-size: 5vmin;
    width: 25vmin;
    text-align: center;
}
#name {
    font-size: var(--size);
}
#play {
    font-size: 6vmin;
    display: none;
}
#menu {
    position: fixed;
    top: 1vmin;
    left: 15%;
    color: var(--background);
    font-size: var(--big-font-size);
    z-index: 2;
}
#actions {
    display: none;
    flex-direction: column;
    gap: var(--small-border);
}
.search {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.search::before {
    position: absolute;
    content: "";
    left: -50%;
    width: 50%;
    height: 100%;
    background: var(--button);
    animation: slide 1s linear infinite;
    z-index: -1;
}
#social {
    display: flex;
    margin-top: var(--border);
    gap: var(--padding);
    justify-content: center;
}
.action {
    background: var(--text);
    border: var(--small-border) solid var(--background);
}
.submenu {
    background: rgb(160, 32, 240);
    border: var(--small-border) solid var(--background);
    display: none;
}
#header {
    position: fixed;
    top: 1.5vmin;
    right: 15%;
    color: var(--background);
}
#volume {
    position: fixed;
    top: 5%;
    right: 15%;
    font-size: var(--big-font-size);
    display: flex;
    align-items: center;
}
#control {
    margin-top: var(--border);
    width: 10vh;
    height: var(--border);
    background: var(--stop);
    cursor: pointer;
    appearance: none;
}
#control::-webkit-slider-thumb {
    width: var(--loader);
    height: var(--loader);
    background: var(--button);
    border-radius: 50%;
    appearance: none;
}
#control::-moz-range-thumb {
    width: var(--loader);
    height: var(--loader);
    background: var(--button);
    border: none;
}
.text {
    position: fixed;
    bottom: calc(50% + 11.5vmin);
    width: 51.5vmin;
    height: 35vmin;
    color: var(--background);
    text-align: center;
    white-space: pre-line;
    display: none;
    place-items: center;
    overflow: auto;
}
#win, #together {
    color: rgb(0, 255, 0);
}
#select, #choice {
    top: calc(50% + min(5vh, 10vw));
}
.information {
    position: fixed;
    color: var(--background);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.fade-in {
    animation: fadeIn 1s forwards;
}
#count {
    bottom: calc(50% + 34vmin);
    font-size: var(--small-font-size);
}
#playlist {
    bottom: calc(50% + 28vmin);
    width: 45vmin;
    font-size: var(--small-font-size);
}
#artists {
    bottom: calc(50% + 19.5vmin);
    width: 60vmin;
}
#title {
    bottom: calc(50% + 13.5vmin);
    width: 75vmin;
}
#text {
    bottom: calc(50% - 28vmin);
    width: 75vmin;
    font-size: min(3.5vh, 7vw);
}
#items {
    position: fixed;
    top: 11%;
    right: 1%;
    width: 35%;
    height: 60%;
    overflow-y: auto;
}
#items p {
    margin: 0;
    flex: auto;
    min-width: 35%;
    font-size: var(--small-font-size);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.item {
    margin-bottom: var(--gap);
    padding: var(--gap);
    border-radius: var(--radius);
    backdrop-filter: blur(0.1vmin);
}
.second {
    text-align: right;
}
.bottom {
    opacity: 0.75;
}
#score {
    position: fixed;
    bottom: 21.5%;
    left: 2.5%;
    color: var(--background);
    font-size: var(--loader);
}
#bar {
    position: fixed;
    bottom: 2.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    height: 20%;
    background: var(--background);
    border: var(--border) solid black;
    border-radius: var(--radius);
}
.level {
    position: absolute;
    width: calc(100% / 11);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    font-size: var(--small-font-size);
    overflow: hidden;
}
.player {
    margin: -1vh;
    white-space: nowrap;
}
.command {
    position: fixed;
    bottom: 2.5%;
    width: 90%;
    height: 20%;
    display: none;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1;
}
.command label {
    border-radius: var(--radius);
    background: var(--background);
}
.modal {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 3;
}
.overlay {
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
.content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--background);
    padding: var(--size);
    border-radius: var(--radius);
    text-align: center;
    box-shadow: 0 0 var(--size) black;
}
#spinner {
    justify-content: center;
    align-items: center;
}
#circle {
    width: 90vmin;
    height: 90vmin;
    border: var(--margin) solid var(--background);
    border-top: var(--margin) solid var(--button);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
#check {
    color: red;
}
.match {
    display: flex;
    flex-direction: column;
    background: var(--text);
    border: var(--border) solid var(--text);
    border-radius: var(--radius);
    overflow-wrap: break-word;
}
.match span {
    background: var(--background);
    border-radius: var(--border) var(--border) 0 0;
}
.match div {
    display: flex;
    flex-direction: column;
}
.match button {
    border: none;
    background: var(--text);
}
.match input {
    outline: none;
    border: none;
    border-top: var(--small-border) solid var(--text);
    border-radius: 0;
}
.match label {
    padding: var(--gap);
    color: var(--background);
    cursor: pointer;
}
#custom input, #custom button, #matches span {
    padding: var(--gap);
}
#custom input[type="text"] {
    background: revert;
}
#custom .content {
    width: 70vmin;
    height: 70vh;
    display: flex;
    flex-direction: column;
}
#tabs {
    display: flex;
    margin-bottom: var(--margin);
    border-bottom: var(--small-border) solid rgba(105, 105, 105, 0.5);
}
#tabs button {
    position: relative;
    flex: 1;
    background: none;
    border: none;
    color: var(--stop);
    font-size: var(--small-font-size);
}
#tabs button::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 50%;
    width: 0;
    height: var(--small-border);
    background: var(--button);
    transition: left .25s, width .25s;
}
#tabs button.current::after {
    left: 0;
    width: 100%;
}
#scroll {
    flex: 1;
    overflow-y: auto;
    padding-right: var(--gap);
}
#footer {
    margin-top: var(--margin);
}
#tab1 input[type="text"] {
    border: var(--small-border) solid var(--stop);
}
#modes {
    text-align: left;
}
#modes label {
    display: flex;
    align-items: center;
    gap: var(--gap);
    cursor: pointer;
}
#section {
    display: flex;
    flex-direction: column;
    gap: var(--margin);
}
#cancel {
    background: var(--background);
    color: var(--text);
}
#matches {
    display: flex;
    flex-direction: column;
    gap: var(--padding);
}
#press, #messages span, #tabs button.current {
    color: var(--button);
}
#list {
    position: fixed;
    left: 50%;
    bottom: 9%;
    width: 45vmin;
    max-height: 85%;
    background: var(--button);
    display: none;
    flex-direction: column;
    overflow-y: auto;
    border: var(--border) solid var(--button);
    border-radius: var(--radius);
    z-index: 1;
}
#list button {
    font-size: var(--small-font-size);
}
#loader {
    margin: var(--radius) auto;
    width: var(--loader);
    height: var(--loader);
    border: var(--border) solid var(--background);
    border-top: var(--border) solid var(--button);
    border-radius: 50%;
    animation: spin 0.5s linear infinite;
    display: none;
}
#playlists button {
    width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#scale {
    position: fixed;
    bottom: 1%;
    width: 95%;
    color: var(--background);
    display: flex;
    justify-content: space-around;
    font-size: 1.5vh;
}
.button {
    width: 7vh;
    height: 7vh;
    font-size: 4vh;
    border-radius: 50%;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}
.controllers {
    position: fixed;
    top: 2.5%;
    width: 47.5%;
    height: 95%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    pointer-events: none;
}
.right {
    left: 50%;
    align-items: flex-end;
}
.left {
    left: 2.5%;
    align-items: flex-start;
}
.controller {
    display: flex;
    align-items: center;
    pointer-events: all;
}
.left .controller {
    flex-direction: row-reverse;
}
.owner {
    font-size: var(--small-font-size);
    color: var(--button);
    max-width: 25vw;
    overflow: hidden;
}
.active {
    cursor: pointer;
}
.disabled {
    color: var(--stop);
}
.buttons {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
#opponent {
    position: fixed;
    max-width: 72.5%;
    background: var(--background);
    color: var(--text);
    padding: var(--radius);
    border: 0.35vh solid var(--button);
    border-radius: var(--radius);
    font-size: var(--small-font-size);
    transition: opacity 0.1s;
    box-shadow: 0 var(--border) var(--radius) rgba(0, 0, 0, 0.5);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}
#opponent.visible {
    opacity: 1;
    pointer-events: auto;
}
#versus {
    text-align: center;
    margin-bottom: var(--gap);
}
.line {
    display: flex;
    justify-content: space-between;
}
.value {
    margin-left: var(--size);
    text-align: right;
}
.value.loading::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: var(--radius);
    height: var(--radius);
    border: var(--small-border) solid var(--text);
    border-top-color: transparent;
    border-radius: 50%;
    transform: translateY(-50%);
    animation: spinY 0.5s infinite;
    content: '';
}
.score {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0 0.5vmin;
    background: var(--stop);
    font-size: var(--small-font-size);
}
#panel, #popup p {
    position: relative;
    border: solid var(--stop);
    border-radius: var(--radius);
    color: var(--background);
}
#panel {
    width: 50%;
    overflow: hidden;
    white-space: nowrap;
    background: red;
}
#panel p {
    margin: 0;
    display: inline-block;
    padding-left: 100%;
    animation: flow 10s linear infinite;
}
#popup {
    text-align: center;
    z-index: 2;
}
#popup p {
    margin: var(--gap) auto;
    background: linear-gradient(to left, var(--text) 50%, red 50%);
    background-size: 200% 100%;
    background-position: right;
    font-size: var(--small-font-size);
    animation: wipe 10s;
    cursor: pointer;
}
#chat {
    position: fixed;
    bottom: 25%;
    left: 15%;
    width: min(25vmax, 85%);
    background: var(--text);
    border: var(--border) solid var(--button);
    border-radius: var(--radius);
    color: var(--background);
    font-size: var(--small-font-size);
    transition: width 0.25s;
    z-index: 1;
    display: none;
}
#chat.collapsed {
    width: min(20vh, 40vw);
}
#tab {
    display: flex;
    justify-content: space-between;
    background: var(--button);
    padding: var(--border);
    font-size: var(--font-size);
}
#toggle {
    background: none;
    border: none;
}
#body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 35vmin;
    transition: max-height 0.25s;
}
#chat.collapsed #body {
    max-height: 0;
}
#messages {
    padding: var(--gap);
    overflow-y: auto;
    word-break: break-word;
}
#message {
    flex: 1;
    min-width: 0;
    padding: var(--gap);
    outline: none;
    border: none;
    border-top: var(--border) solid var(--button);
    border-radius: 0 0 0 var(--border);
    font-size: var(--small-font-size);
    text-align: left;
}
#message:disabled {
    border-color: var(--stop);
    opacity: 0.75;
}
#send {
    padding-left: var(--border);
    border: none;
    border-radius: 0;
}