/*  */
.dark-mode {
    background-image: linear-gradient(#000000, #000000d6);
}
.light-mode {
    background-image: linear-gradient(aliceblue, #001031de);
}
/*  */
.fade-change { 
  transition-property: opacity;
  transition-duration: 1000ms;   /* your 2s */
  transition-timing-function: ease;
  will-change: opacity;
} 
.opacity-0 { opacity: 0; }     
/*  */
    .has-called-start {
        background-image: linear-gradient(to bottom right, rgba(8, 165, 0, 0.907), rgba(0, 255, 76, 0.685));
    }
/*  */
    .highlight-votebox {
        background-color: orange;
        font-size: 1rem;
    }
/*  */
    .slot-free-indicator {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        width: 100%;
        font-size: 0.6rem;
        gap: 1rem;
        letter-spacing: 0.05rem;
        font-weight:300;
    }
    .slot-free-indicator .spinner {
        opacity: 0.5;
    }
/*  */
    .normal-border {
        border: 0.05rem outset #495261ab;
    }
    .red-border {
        border: 0.05rem outset #ff0000ab;
    }
    .green-border {
        border: 0.05rem outset #1cff00;
    }
/*  */
    .spinner {
        border: 0.2rem solid rgba(0, 0, 0, 0.61);
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        border-left-color: rgb(255, 255, 255);
        animation: spin 3s ease infinite;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
/*  */
    .loading-dots {
        display: flex;
        gap: 0.3rem;
        justify-content: center;
        align-items: center;
    }
    .loading-dots span {
        width: 0.3rem;
        height: 0.3rem;
        background: #00000073;
        border-radius: 50%;
        display: inline-block;
        animation: bounce 3s infinite ease-in-out;
    }
    .loading-dots span:nth-child(1) {
        animation-delay: 0s;
    }
    .loading-dots span:nth-child(2) {
        animation-delay: 0.2s;
    }
    .loading-dots span:nth-child(3) {
        animation-delay: 0.4s;
    }
    @keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0.4);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
    }
/*  */
.d-flex {
    display: flex;
}
.d-none {
    display: none;
}
/*  */
.not-in-use { 
    pointer-events: none;
    filter: brightness(0.1);
}
/*  */
.correct-answer-mark::before,
.wrong-answer-mark::before,
.round-timeup-answer-mark::before {
    display: grid;
    position: absolute;
    backdrop-filter: blur(0.1rem);
    place-items: center;
    height: calc(100% - 0.1rem);
    width: calc(100% - 0.2rem);
    background: #000000b6;
    border-radius: 0.3rem;
}
.correct-answer-mark::before {
    color: #00ff00;
    content: "Correct answer ✔";
}
.wrong-answer-mark::before {
    color: #ff3f3f;
    content: "Wrong answer ❌";
}
.round-timeup-answer-mark::before {
    color: #ff3f3f;
    content: "You are too slow ❌";
}
/*  */
.move-up   {
    transform: translate(-50%, -125%);
} 
.move-down {
    transform: translate(-50%, 0);
}
/*  */
.music-on span {
    color: greenyellow;
}
.music-off span {
    color: #ff5c5c;
}
/*  */
.color-white {
    color: rgb(255, 255, 255);
}
.color-black {
    color: rgb(0, 0, 0);
}
.color-red {
    color: red;
}
.color-green {
    color: green;
}
.color-gy {
    color: greenyellow;
}
/*  */
.disconnected::after,
.reconnecting::after {
    position: absolute;
    width: 100%;
    left: 0;
    font-size: 0.8rem;
    height: 100%;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.786);
    border-radius: inherit;
}
.disconnected::after {
    content: "Player disconnected";
    color: #ff5252;
}
.reconnecting::after {
    content: "Reconnecting…";
    color: #caff44;
}
/*  */
.loser {
    opacity: 0.3;
}
.winner {
    border: 0.05rem outset goldenrod;
}
/*  */
.point-change-p.pop { animation: points-pop 2s cubic-bezier(.2,.9,.2,1) forwards; }
.point-change-p.pos { color:#00ff00; }
.point-change-p.neg { color:red; }
@keyframes points-pop{
  0%{opacity:0;transform:translateY(6px) scale(0.6);}
  25%{opacity:1;transform:translateY(-4px) scale(1.15);}
  70%{transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-12px) scale(1)}
}
/*  */
.you p:first-child::after {
    content: " 👤"; 
}