.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.answer-btn {
    display: block;
    margin: 8px 0;
    padding: 12px;
    width: 100%;
    font-size: 16px;
    transition: all 0.3s ease;
}

.correct {
    background-color: #4CAF50;
    color: white;
}

.wrong {
    background-color: #F44336;
    color: white;
}

.disabled {
    opacity: 0.4;
}

/* ===== GLOBAL ===== */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

/* ===== GLOBAL GAME BACKGROUND ===== */
body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:
            radial-gradient(circle at top, rgba(110, 89, 255, 0.25), transparent 35%),
            radial-gradient(circle at bottom right, rgba(0, 224, 255, 0.18), transparent 30%),
            linear-gradient(135deg, #0b1020, #11182d 45%, #0a0f1c 100%);
    color: white;
}

/* ===== GLOBAL LAYOUT ===== */
main,
.page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== MAIN MENU WRAPPER ===== */
.menu-screen {
    width: 100%;
    max-width: 500px;
    padding: 32px 24px;
    text-align: center;
}

/* ===== TITLE ===== */
.menu-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.menu-subtitle {
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    margin-bottom: 32px;
    letter-spacing: 0.5px;
}

/* ===== CONTAINER ===== */
.menu-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ===== BUTTONS ===== */
.menu-btn {
    position: relative;
    overflow: hidden;
    padding: 16px 20px;
    border: none;
    border-radius: 18px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    color: white;
    background: linear-gradient(135deg, #6f5cff, #4cc9f0);
    box-shadow:
            0 10px 20px rgba(76, 201, 240, 0.15),
            0 6px 14px rgba(111, 92, 255, 0.22);
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.menu-btn:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
            0 16px 28px rgba(76, 201, 240, 0.22),
            0 10px 22px rgba(111, 92, 255, 0.30);
    filter: brightness(1.05);
}

.menu-btn:active {
    transform: translateY(0) scale(0.99);
}

.menu-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.28),
            transparent
    );
    transition: left 0.5s ease;
}

.menu-btn:hover::before {
    left: 130%;
}

.menu-btn.exit {
    background: linear-gradient(135deg, #2a2f45, #3c445f);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .menu-screen {
        padding: 20px 16px;
    }

    .menu-container {
        padding: 18px;
        border-radius: 20px;
    }

    .menu-btn {
        font-size: 1rem;
        padding: 14px 16px;
    }
}

.sp-menu {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 300px;
    margin: auto;
}

.casual-setup {
    margin-top: 30px;
    padding: 15px;
    border: 1px solid #ccc;
}

/* ===== PROFILE PAGE ===== */
.profile-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.profile-screen {
    width: 100%;
    max-width: 520px;
    text-align: center;
}

.profile-title {
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.profile-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 28px 0;
    letter-spacing: 0.5px;
    text-align: center;
}

.profile-container {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    text-align: center;
}

.profile-input {
    width: 100%;
    display: block;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    outline: none;
    background: rgba(255, 255, 255, 0.07);
    color: white;
    font-size: 1rem;
    line-height: 1.2;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 6px 16px rgba(0, 0, 0, 0.16);
    transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.profile-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.profile-input:focus {
    border: 1px solid rgba(76, 201, 240, 0.75);
    background: rgba(255, 255, 255, 0.09);
    box-shadow:
            0 0 0 3px rgba(76, 201, 240, 0.12),
            0 10px 25px rgba(0, 0, 0, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.profile-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 18px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    color: white;
    background: linear-gradient(135deg, #6f5cff, #4cc9f0);
    box-shadow:
            0 10px 20px rgba(76, 201, 240, 0.15),
            0 6px 14px rgba(111, 92, 255, 0.22);
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.profile-btn:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
            0 16px 28px rgba(76, 201, 240, 0.22),
            0 10px 22px rgba(111, 92, 255, 0.30);
    filter: brightness(1.05);
}

.profile-btn:active {
    transform: translateY(0) scale(0.99);
}

.profile-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.28),
            transparent
    );
    transition: left 0.5s ease;
}

.profile-btn:hover::before {
    left: 130%;
}

.profile-btn-secondary {
    background: linear-gradient(135deg, #2a2f45, #3c445f);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

.profile-message {
    margin: 8px 0 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    word-break: break-word;
}

/* ===== PROFILE MENU PAGE ===== */
.profile-menu-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.profile-menu-screen {
    width: 100%;
    max-width: 760px;
    text-align: center;
}

.profile-menu-title {
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.profile-menu-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 28px 0;
    letter-spacing: 0.5px;
    text-align: center;
}

.profile-menu-card,
.profile-menu-error-box {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-menu-error-box {
    margin-top: 18px;
}

.profile-menu-user-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-menu-user-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile-menu-user-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
}

.profile-menu-section {
    margin-top: 20px;
    text-align: left;
}

.profile-menu-section-title {
    margin: 0 0 14px 0;
    font-size: 1.35rem;
    color: #ffffff;
    text-align: left;
}

.profile-menu-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.profile-menu-stat-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.profile-menu-stat-label {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.68);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.profile-menu-stat-value {
    font-size: 1.55rem;
    font-weight: 800;
    color: #ffffff;
}

.profile-menu-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.profile-menu-btn {
    position: relative;
    overflow: hidden;
    min-width: 180px;
    padding: 15px 20px;
    border: none;
    border-radius: 18px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    color: white;
    background: linear-gradient(135deg, #6f5cff, #4cc9f0);
    box-shadow:
            0 10px 20px rgba(76, 201, 240, 0.15),
            0 6px 14px rgba(111, 92, 255, 0.22);
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.profile-menu-btn:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
            0 16px 28px rgba(76, 201, 240, 0.22),
            0 10px 22px rgba(111, 92, 255, 0.30);
    filter: brightness(1.05);
}

.profile-menu-btn:active {
    transform: translateY(0) scale(0.99);
}

.profile-menu-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.28),
            transparent
    );
    transition: left 0.5s ease;
}

.profile-menu-btn:hover::before {
    left: 130%;
}

.profile-menu-btn-secondary {
    background: linear-gradient(135deg, #2a2f45, #3c445f);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

.profile-menu-btn-danger {
    background: linear-gradient(135deg, #8f2230, #d64550);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

.profile-menu-message {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    word-break: break-word;
}

@media (max-width: 700px) {
    .profile-menu-page {
        padding: 16px;
    }

    .profile-menu-card,
    .profile-menu-error-box {
        padding: 18px;
        border-radius: 20px;
    }

    .profile-menu-stats {
        grid-template-columns: 1fr;
    }

    .profile-menu-section,
    .profile-menu-section-title {
        text-align: center;
    }

    .profile-menu-btn {
        width: 100%;
        min-width: 0;
    }

    .profile-menu-actions {
        flex-direction: column;
    }
}
@media (max-width: 600px) {
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.answer-btn {
    display: block;
    margin: 8px 0;
    padding: 12px;
    width: 100%;
    font-size: 16px;
    transition: all 0.3s ease;
}

.correct {
    background-color: #4CAF50;
    color: white;
}

.wrong {
    background-color: #F44336;
    color: white;
}

.disabled {
    opacity: 0.4;
}

/* ===== GLOBAL ===== */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

/* ===== GLOBAL GAME BACKGROUND ===== */
body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:
            radial-gradient(circle at top, rgba(110, 89, 255, 0.25), transparent 35%),
            radial-gradient(circle at bottom right, rgba(0, 224, 255, 0.18), transparent 30%),
            linear-gradient(135deg, #0b1020, #11182d 45%, #0a0f1c 100%);
    color: white;
}

/* ===== GLOBAL LAYOUT ===== */
main,
.page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== HOME PAGE ===== */
.home-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

/* ===== MAIN MENU WRAPPER ===== */
.menu-screen {
    width: 100%;
    max-width: 500px;
    padding: 32px 24px;
    text-align: center;
}

/* ===== TITLE ===== */
.menu-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.menu-subtitle {
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    margin-bottom: 32px;
    letter-spacing: 0.5px;
}

/* ===== CONTAINER ===== */
.menu-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ===== BUTTONS ===== */
.menu-btn {
    position: relative;
    overflow: hidden;
    padding: 16px 20px;
    border: none;
    border-radius: 18px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    color: white;
    background: linear-gradient(135deg, #6f5cff, #4cc9f0);
    box-shadow:
            0 10px 20px rgba(76, 201, 240, 0.15),
            0 6px 14px rgba(111, 92, 255, 0.22);
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.menu-btn:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
            0 16px 28px rgba(76, 201, 240, 0.22),
            0 10px 22px rgba(111, 92, 255, 0.30);
    filter: brightness(1.05);
}

.menu-btn:active {
    transform: translateY(0) scale(0.99);
}

.menu-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.28),
            transparent
    );
    transition: left 0.5s ease;
}

.menu-btn:hover::before {
    left: 130%;
}

.menu-btn.exit {
    background: linear-gradient(135deg, #2a2f45, #3c445f);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

.sp-menu {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 300px;
    margin: auto;
}

.casual-setup {
    margin-top: 30px;
    padding: 15px;
    border: 1px solid #ccc;
}

/* ===== PROFILE PAGE ===== */
.profile-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.profile-screen {
    width: 100%;
    max-width: 520px;
    text-align: center;
}

.profile-title {
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.profile-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 28px 0;
    letter-spacing: 0.5px;
    text-align: center;
}

.profile-container {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    text-align: center;
}

.profile-input {
    width: 100%;
    display: block;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    outline: none;
    background: rgba(255, 255, 255, 0.07);
    color: white;
    font-size: 1rem;
    line-height: 1.2;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 6px 16px rgba(0, 0, 0, 0.16);
    transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.profile-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.profile-input:focus {
    border: 1px solid rgba(76, 201, 240, 0.75);
    background: rgba(255, 255, 255, 0.09);
    box-shadow:
            0 0 0 3px rgba(76, 201, 240, 0.12),
            0 10px 25px rgba(0, 0, 0, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.profile-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 18px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    color: white;
    background: linear-gradient(135deg, #6f5cff, #4cc9f0);
    box-shadow:
            0 10px 20px rgba(76, 201, 240, 0.15),
            0 6px 14px rgba(111, 92, 255, 0.22);
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.profile-btn:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
            0 16px 28px rgba(76, 201, 240, 0.22),
            0 10px 22px rgba(111, 92, 255, 0.30);
    filter: brightness(1.05);
}

.profile-btn:active {
    transform: translateY(0) scale(0.99);
}

.profile-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.28),
            transparent
    );
    transition: left 0.5s ease;
}

.profile-btn:hover::before {
    left: 130%;
}

.profile-btn-secondary {
    background: linear-gradient(135deg, #2a2f45, #3c445f);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

.profile-message {
    margin: 8px 0 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    word-break: break-word;
}

/* ===== PROFILE MENU PAGE ===== */
.profile-menu-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.profile-menu-screen {
    width: 100%;
    max-width: 760px;
    text-align: center;
}

.profile-menu-title {
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.profile-menu-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 28px 0;
    letter-spacing: 0.5px;
    text-align: center;
}

.profile-menu-card,
.profile-menu-error-box {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-menu-error-box {
    margin-top: 18px;
}

.profile-menu-user-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-menu-user-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile-menu-user-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
}

.profile-menu-section {
    margin-top: 20px;
    text-align: left;
}

.profile-menu-section-title {
    margin: 0 0 14px 0;
    font-size: 1.35rem;
    color: #ffffff;
    text-align: left;
}

.profile-menu-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.profile-menu-stat-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.profile-menu-stat-label {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.68);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.profile-menu-stat-value {
    font-size: 1.55rem;
    font-weight: 800;
    color: #ffffff;
}

.profile-menu-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.profile-menu-btn {
    position: relative;
    overflow: hidden;
    min-width: 180px;
    padding: 15px 20px;
    border: none;
    border-radius: 18px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    color: white;
    background: linear-gradient(135deg, #6f5cff, #4cc9f0);
    box-shadow:
            0 10px 20px rgba(76, 201, 240, 0.15),
            0 6px 14px rgba(111, 92, 255, 0.22);
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.profile-menu-btn:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
            0 16px 28px rgba(76, 201, 240, 0.22),
            0 10px 22px rgba(111, 92, 255, 0.30);
    filter: brightness(1.05);
}

.profile-menu-btn:active {
    transform: translateY(0) scale(0.99);
}

.profile-menu-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.28),
            transparent
    );
    transition: left 0.5s ease;
}

.profile-menu-btn:hover::before {
    left: 130%;
}

.profile-menu-btn-secondary {
    background: linear-gradient(135deg, #2a2f45, #3c445f);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

.profile-menu-btn-danger {
    background: linear-gradient(135deg, #8f2230, #d64550);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

.profile-menu-message {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    word-break: break-word;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 700px) {
    .profile-menu-page {
        padding: 16px;
    }

    .profile-menu-card,
    .profile-menu-error-box {
        padding: 18px;
        border-radius: 20px;
    }

    .profile-menu-stats {
        grid-template-columns: 1fr;
    }

    .profile-menu-section,
    .profile-menu-section-title {
        text-align: center;
    }

    .profile-menu-btn {
        width: 100%;
        min-width: 0;
    }

    .profile-menu-actions {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .home-page,
    .profile-page {
        padding: 16px;
    }

    .menu-screen,
    .profile-screen {
        max-width: 100%;
        padding: 20px 16px;
    }

    .menu-container,
    .profile-container {
        max-width: 100%;
        padding: 18px;
        border-radius: 20px;
    }

    .menu-btn,
    .profile-btn {
        font-size: 1rem;
        padding: 14px 16px;
    }

    .profile-input {
        padding: 14px 16px;
        font-size: 0.95rem;
    }
}

/* ===== LEADERBOARD PAGE ===== */
.leaderboard-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.leaderboard-screen {
    width: 100%;
    max-width: 980px;
    text-align: center;
}

.leaderboard-title {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.leaderboard-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 24px 0;
    letter-spacing: 0.5px;
}

.leaderboard-switch {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.leaderboard-card,
.leaderboard-error-box {
    width: 100%;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.leaderboard-error-box {
    margin-top: 18px;
}

.leaderboard-table-wrap {
    overflow-x: auto;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.leaderboard-table thead tr {
    background: rgba(255, 255, 255, 0.07);
}

.leaderboard-table th,
.leaderboard-table td {
    padding: 16px 14px;
    text-align: center;
}

.leaderboard-table th {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.leaderboard-table td {
    color: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.leaderboard-table tbody tr {
    transition: background 0.2s ease, transform 0.2s ease;
}

.leaderboard-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.leaderboard-table tbody tr:last-child td {
    border-bottom: none;
}

.leaderboard-table td:first-child {
    font-weight: 800;
    color: #4cc9f0;
}

.leaderboard-message {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    text-align: center;
    word-break: break-word;
}

.leaderboard-actions {
    margin-top: 18px;
    display: flex;
    justify-content: center;
}

.leaderboard-back-btn {
    min-width: 220px;
}

@media (max-width: 700px) {
    .leaderboard-page {
        padding: 16px;
    }

    .leaderboard-card,
    .leaderboard-error-box {
        padding: 18px;
        border-radius: 20px;
    }

    .leaderboard-switch {
        flex-direction: column;
        align-items: stretch;
    }

    .leaderboard-switch .menu-btn,
    .leaderboard-back-btn {
        width: 100%;
        min-width: 0;
    }
}

/* ===== SINGLEPLAYER MENU PAGE ===== */
.single-menu-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.single-menu-screen {
    width: 100%;
    max-width: 900px;
    text-align: center;
}

.single-menu-title {
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.single-menu-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 28px 0;
    letter-spacing: 0.5px;
}

.single-menu-main,
.single-menu-setup {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.single-menu-main {
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.single-menu-warning {
    margin: -2px 0 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.single-menu-setup {
    margin-top: 20px;
    text-align: left;
}

.single-menu-setup-title {
    margin: 0 0 20px 0;
    font-size: 1.5rem;
    color: #ffffff;
    text-align: center;
}

.single-menu-field {
    margin-bottom: 22px;
}

.single-menu-label {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.single-menu-range {
    width: 100%;
    accent-color: #6f5cff;
    cursor: pointer;
}

.single-menu-select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    outline: none;
    background: rgba(255, 255, 255, 0.07);
    color: white;
    font-size: 1rem;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.single-menu-select:focus {
    border: 1px solid rgba(76, 201, 240, 0.75);
    box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.12);
}

.single-menu-select option {
    background: #11182d;
    color: white;
}

.single-menu-categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.single-menu-check-item,
.single-menu-radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
}

.single-menu-check-item input,
.single-menu-radio-item input {
    accent-color: #6f5cff;
}

.single-menu-difficulty {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.single-menu-radio-item {
    justify-content: center;
    text-transform: capitalize;
}

.single-menu-start-btn {
    width: 100%;
    margin-top: 8px;
}

.category-dropdown {
    position: relative;
    width: 100%;
}

.category-dropdown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    outline: none;
    background: rgba(255, 255, 255, 0.07);
    color: white;
    font-size: 1rem;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: 0.2s ease;
    text-align: left;
}

.category-dropdown-toggle:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
}

.category-dropdown-toggle:focus {
    border: 1px solid rgba(76, 201, 240, 0.75);
    box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.12);
}

.category-dropdown-arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.category-dropdown-arrow.open {
    transform: rotate(180deg);
}

.category-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    z-index: 20;
    padding: 10px;
    border-radius: 18px;
    background: rgba(17, 24, 45, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.category-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: background 0.18s ease, border 0.18s ease;
    border: 1px solid transparent;
}

.category-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.category-dropdown-item input {
    accent-color: #6f5cff;
    cursor: pointer;
}

.selected-category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.selected-category-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(111, 92, 255, 0.16);
    border: 1px solid rgba(111, 92, 255, 0.35);
    color: #fff;
    font-size: 0.92rem;
}

.selected-category-tag button {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

.selected-category-tag button:hover {
    color: #ffffff;
}

@media (max-width: 700px) {
    .single-menu-page {
        padding: 16px;
    }

    .single-menu-main,
    .single-menu-setup {
        padding: 18px;
        border-radius: 20px;
    }

    .single-menu-categories {
        grid-template-columns: 1fr;
    }

    .single-menu-difficulty {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .single-menu-difficulty {
        grid-template-columns: 1fr;
    }
}

/* ===== SINGLEPLAYER GAME PAGE ===== */
.single-game-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.single-game-screen {
    width: 100%;
    max-width: 900px;
    text-align: center;
}

.single-game-title {
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.single-game-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 24px 0;
    letter-spacing: 0.5px;
}

.single-game-topbar {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 18px auto;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.single-game-stat {
    min-width: 170px;
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255,255,255,0.06);
}

.single-game-stat-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.68);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.single-game-stat-value {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
}

.single-game-card {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);
}

.single-game-question-box {
    margin-bottom: 22px;
}

.single-game-question-number {
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.66);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.single-game-question-text {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff;
}

.single-game-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.single-game-answer-btn {
    border-radius: 18px;
    font-weight: 700;
}

.single-game-message {
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.92);
}

.single-game-finish-card {
    text-align: center;
}

.single-game-finish-title {
    margin: 0 0 20px 0;
    font-size: 2rem;
    color: #ffffff;
}

.single-game-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.single-game-summary-box {
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.single-game-summary-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.68);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.single-game-summary-value {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
}

.single-game-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.single-game-menu-btn {
    min-width: 220px;
}

.single-game-secondary-btn {
    background: linear-gradient(135deg, #2a2f45, #3c445f);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

@media (max-width: 700px) {
    .single-game-page {
        padding: 16px;
    }

    .single-game-card {
        padding: 18px;
        border-radius: 20px;
    }

    .single-game-summary {
        grid-template-columns: 1fr;
    }

    .single-game-menu-btn {
        width: 100%;
        min-width: 0;
    }

    .single-game-actions {
        flex-direction: column;
    }

    .single-game-question-text {
        font-size: 1.15rem;
    }
}

/* ===== RANKED SINGLEPLAYER GAME PAGE ===== */
.ranked-game-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.ranked-game-screen {
    width: 100%;
    max-width: 900px;
    text-align: center;
}

.ranked-game-title {
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.ranked-game-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 24px 0;
    letter-spacing: 0.5px;
}

.ranked-game-topbar {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 18px auto;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ranked-game-stat {
    min-width: 170px;
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255,255,255,0.06);
}

.ranked-game-stat-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.68);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.ranked-game-stat-value {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
}

.ranked-game-card {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);
}

.ranked-game-question-box {
    margin-bottom: 22px;
}

.ranked-game-question-number {
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.66);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ranked-game-question-text {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff;
}

.ranked-game-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ranked-game-answer-btn {
    border-radius: 18px;
    font-weight: 700;
}

.ranked-game-message {
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.92);
}

.ranked-game-finish-card {
    text-align: center;
}

.ranked-game-finish-title {
    margin: 0 0 20px 0;
    font-size: 2rem;
    color: #ffffff;
}

.ranked-game-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ranked-game-summary-box {
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ranked-game-summary-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.68);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.ranked-game-summary-value {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
}

.ranked-game-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.ranked-game-menu-btn {
    min-width: 220px;
}

.ranked-game-secondary-btn {
    background: linear-gradient(135deg, #2a2f45, #3c445f);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

@media (max-width: 700px) {
    .ranked-game-page {
        padding: 16px;
    }

    .ranked-game-card {
        padding: 18px;
        border-radius: 20px;
    }

    .ranked-game-summary {
        grid-template-columns: 1fr;
    }

    .ranked-game-menu-btn {
        width: 100%;
        min-width: 0;
    }

    .ranked-game-actions {
        flex-direction: column;
    }

    .ranked-game-question-text {
        font-size: 1.15rem;
    }
}

/* ===== MULTIPLAYER MENU PAGE ===== */
.multiplayer-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.multiplayer-screen {
    width: 100%;
    max-width: 760px;
    text-align: center;
}

.multiplayer-title {
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.multiplayer-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 24px 0;
    letter-spacing: 0.5px;
}

.multiplayer-main-actions {
    width: 100%;
    max-width: 520px;
    margin: 0 auto 20px auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.multiplayer-join-card,
.multiplayer-info-box {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);
}

.multiplayer-info-box {
    margin-bottom: 20px;
}

.multiplayer-error-box {
    margin-top: 18px;
    margin-bottom: 0;
}

.multiplayer-join-title {
    margin: 0 0 18px 0;
    font-size: 1.45rem;
    color: #ffffff;
}

.multiplayer-join-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.multiplayer-input {
    width: 100%;
    display: block;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    outline: none;
    background: rgba(255, 255, 255, 0.07);
    color: white;
    font-size: 1rem;
    line-height: 1.2;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 6px 16px rgba(0, 0, 0, 0.16);
    transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.multiplayer-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.multiplayer-input:focus {
    border: 1px solid rgba(76, 201, 240, 0.75);
    background: rgba(255, 255, 255, 0.09);
    box-shadow:
            0 0 0 3px rgba(76, 201, 240, 0.12),
            0 10px 25px rgba(0, 0, 0, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.multiplayer-join-btn {
    width: 100%;
}

.multiplayer-message {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    word-break: break-word;
}

@media (max-width: 700px) {
    .multiplayer-page {
        padding: 16px;
    }

    .multiplayer-join-card,
    .multiplayer-info-box {
        padding: 18px;
        border-radius: 20px;
    }
}

/* ===== MULTIPLAYER GAME PAGE ===== */
.multiplayer-game-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.multiplayer-game-screen {
    width: 100%;
    max-width: 900px;
    text-align: center;
}

.multiplayer-game-title {
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.multiplayer-game-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 24px 0;
    letter-spacing: 0.5px;
}

.multiplayer-game-card {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);
}

.multiplayer-game-question-box {
    margin-bottom: 22px;
}

.multiplayer-game-question-label {
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.66);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.multiplayer-game-question {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff;
}

.multiplayer-game-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.multiplayer-game-answer-btn {
    width: 100%;
}

.multiplayer-game-info-box {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.multiplayer-game-message {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    line-height: 1.5;
    word-break: break-word;
}

.multiplayer-game-finish-card {
    text-align: center;
}

.multiplayer-game-finish-title {
    margin: 0 0 20px 0;
    font-size: 2rem;
    color: #ffffff;
}

.multiplayer-game-scoreboard {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.multiplayer-game-score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.multiplayer-game-player {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    text-align: left;
}

.multiplayer-game-points {
    font-size: 1.25rem;
    font-weight: 800;
    color: #4cc9f0;
    text-align: right;
}

@media (max-width: 700px) {
    .multiplayer-game-page {
        padding: 16px;
    }

    .multiplayer-game-card {
        padding: 18px;
        border-radius: 20px;
    }

    .multiplayer-game-question {
        font-size: 1.15rem;
    }

    .multiplayer-game-score-row {
        padding: 14px 16px;
    }
}

/* ===== LOBBY PAGE ===== */
.lobby-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.lobby-screen {
    width: 100%;
    max-width: 980px;
    text-align: center;
}

.lobby-title {
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.lobby-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 24px 0;
    letter-spacing: 0.5px;
}

.lobby-card {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);
    text-align: left;
}

.lobby-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}

.lobby-overview-box,
.lobby-setting-box,
.lobby-status-box,
.lobby-error-box {
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.lobby-overview-label,
.lobby-setting-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.66);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.lobby-overview-value,
.lobby-setting-value {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    word-break: break-word;
}

.lobby-section {
    margin-top: 24px;
}

.lobby-section-title {
    margin: 0 0 16px 0;
    font-size: 1.4rem;
    color: #ffffff;
}

.lobby-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.lobby-setting-box-wide {
    grid-column: span 3;
}

.lobby-host-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lobby-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.lobby-field {
    margin-bottom: 20px;
}

.lobby-label {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.lobby-input,
.lobby-select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    outline: none;
    background: rgba(255, 255, 255, 0.07);
    color: white;
    font-size: 1rem;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lobby-input:focus,
.lobby-select:focus {
    border: 1px solid rgba(76, 201, 240, 0.75);
    box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.12);
}

.lobby-select option {
    background: #11182d;
    color: white;
}

.lobby-categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.lobby-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
}

.lobby-check-item input {
    accent-color: #6f5cff;
}

.lobby-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.lobby-action-btn {
    min-width: 180px;
}

.lobby-start-btn {
    background: linear-gradient(135deg, #6f5cff, #4cc9f0);
}

.lobby-message {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    line-height: 1.5;
    word-break: break-word;
}

.lobby-status-box,
.lobby-error-box {
    margin-top: 18px;
}

@media (max-width: 800px) {
    .lobby-page {
        padding: 16px;
    }

    .lobby-card {
        padding: 18px;
        border-radius: 20px;
    }

    .lobby-overview,
    .lobby-settings-grid,
    .lobby-form-grid,
    .lobby-categories {
        grid-template-columns: 1fr;
    }

    .lobby-setting-box-wide {
        grid-column: span 1;
    }

    .lobby-actions {
        flex-direction: column;
    }

    .lobby-action-btn {
        width: 100%;
        min-width: 0;
    }
}

/* ===== MULTIPLAYER CUSTOM CREATE PAGE ===== */
.mp-custom-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.mp-custom-screen {
    width: 100%;
    max-width: 980px;
    text-align: center;
}

.mp-custom-title {
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.mp-custom-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 24px 0;
    letter-spacing: 0.5px;
}

.mp-custom-card {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);
    text-align: left;
}

.mp-custom-card-title {
    margin: 0 0 22px 0;
    font-size: 1.55rem;
    color: #ffffff;
    text-align: center;
}

.mp-custom-field {
    margin-bottom: 24px;
}

.mp-custom-label {
    display: block;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.mp-custom-value {
    color: #4cc9f0;
    font-weight: 800;
}

.mp-custom-limit {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}

.mp-custom-range {
    width: 100%;
    accent-color: #6f5cff;
    cursor: pointer;
}

.mp-custom-select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    outline: none;
    background: rgba(255, 255, 255, 0.07);
    color: white;
    font-size: 1rem;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mp-custom-select:focus {
    border: 1px solid rgba(76, 201, 240, 0.75);
    box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.12);
    background: rgba(255, 255, 255, 0.09);
}

.mp-custom-select option {
    background: #11182d;
    color: white;
}

.mp-custom-categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mp-custom-check-item,
.mp-custom-radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.mp-custom-check-item:hover,
.mp-custom-radio-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

.mp-custom-check-item input,
.mp-custom-radio-item input {
    accent-color: #6f5cff;
    cursor: pointer;
}

.mp-custom-check-item:has(input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

.mp-custom-difficulty {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.mp-custom-radio-item {
    justify-content: center;
    text-transform: capitalize;
}

.mp-custom-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.mp-custom-btn {
    min-width: 190px;
}

.mp-custom-btn-secondary {
    background: linear-gradient(135deg, #2a2f45, #3c445f);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

.mp-custom-message-box {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mp-custom-message {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    line-height: 1.5;
    word-break: break-word;
    text-align: center;
}

.mp-custom-lobby-category-dropdown {
    position: relative;
    width: 100%;
}

.mp-custom-lobby-category-dropdown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    outline: none;
    background: rgba(255, 255, 255, 0.07);
    color: white;
    font-size: 1rem;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: 0.2s ease;
    text-align: left;
}

.mp-custom-lobby-category-dropdown-toggle:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
}

.mp-custom-lobby-category-dropdown-toggle:focus {
    border: 1px solid rgba(76, 201, 240, 0.75);
    box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.12);
}

.mp-custom-lobby-category-dropdown-arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.mp-custom-lobby-category-dropdown-arrow.open {
    transform: rotate(180deg);
}

.mp-custom-lobby-category-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    z-index: 30;
    padding: 10px;
    border-radius: 18px;
    background: rgba(17, 24, 45, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.mp-custom-lobby-category-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: background 0.18s ease, border 0.18s ease;
    border: 1px solid transparent;
}

.mp-custom-lobby-category-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.mp-custom-lobby-category-dropdown-item input {
    accent-color: #6f5cff;
    cursor: pointer;
}

.mp-custom-lobby-category-dropdown-item:has(input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

.mp-custom-lobby-selected-category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.mp-custom-lobby-selected-category-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(111, 92, 255, 0.16);
    border: 1px solid rgba(111, 92, 255, 0.35);
    color: #fff;
    font-size: 0.92rem;
}

.mp-custom-lobby-selected-category-tag button {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

.mp-custom-lobby-selected-category-tag button:hover {
    color: #ffffff;
}

@media (max-width: 800px) {
    .mp-custom-page {
        padding: 16px;
    }

    .mp-custom-card {
        padding: 18px;
        border-radius: 20px;
    }

    .mp-custom-categories {
        grid-template-columns: 1fr;
    }

    .mp-custom-difficulty {
        grid-template-columns: 1fr 1fr;
    }

    .mp-custom-actions {
        flex-direction: column;
    }

    .mp-custom-btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .mp-custom-difficulty {
        grid-template-columns: 1fr;
    }
}

/* ===== MULTIPLAYER CUSTOM LOBBY PAGE ===== */
.mp-custom-lobby-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.mp-custom-lobby-screen {
    width: 100%;
    max-width: 980px;
    text-align: center;
}

.mp-custom-lobby-title {
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.mp-custom-lobby-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 24px 0;
    letter-spacing: 0.5px;
}

.mp-custom-lobby-card {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);
    text-align: left;
}

.mp-custom-lobby-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.mp-custom-lobby-overview-box,
.mp-custom-lobby-setting-box,
.mp-custom-lobby-players-box,
.mp-custom-lobby-status-box,
.mp-custom-lobby-error-box {
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.mp-custom-lobby-overview-label,
.mp-custom-lobby-setting-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.66);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.mp-custom-lobby-overview-value,
.mp-custom-lobby-setting-value {
    display: block;
    font-size: 1.08rem;
    font-weight: 700;
    color: #ffffff;
    word-break: break-word;
}

.mp-custom-lobby-section {
    margin-top: 24px;
}

.mp-custom-lobby-section-title {
    margin: 0 0 16px 0;
    font-size: 1.4rem;
    color: #ffffff;
}

.mp-custom-lobby-players-count {
    margin: 0 0 14px 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.98rem;
}

.mp-custom-lobby-players-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mp-custom-lobby-player-item {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-weight: 600;
    text-align: center;
}

.mp-custom-lobby-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.mp-custom-lobby-setting-box-wide {
    grid-column: span 3;
}

.mp-custom-lobby-host-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mp-custom-lobby-field {
    margin-bottom: 24px;
}

.mp-custom-lobby-label {
    display: block;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.mp-custom-lobby-highlight {
    color: #4cc9f0;
    font-weight: 800;
}

.mp-custom-lobby-limit {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}

.mp-custom-lobby-range {
    width: 100%;
    accent-color: #6f5cff;
    cursor: pointer;
}

.mp-custom-lobby-select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    outline: none;
    background: rgba(255, 255, 255, 0.07);
    color: white;
    font-size: 1rem;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mp-custom-lobby-select:focus {
    border: 1px solid rgba(76, 201, 240, 0.75);
    box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.12);
    background: rgba(255, 255, 255, 0.09);
}

.mp-custom-lobby-select option {
    background: #11182d;
    color: white;
}

.mp-custom-lobby-category-dropdown {
    position: relative;
    width: 100%;
}

.mp-custom-lobby-category-dropdown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    outline: none;
    background: rgba(255, 255, 255, 0.07);
    color: white;
    font-size: 1rem;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: 0.2s ease;
    text-align: left;
}

.mp-custom-lobby-category-dropdown-toggle:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
}

.mp-custom-lobby-category-dropdown-toggle:focus {
    border: 1px solid rgba(76, 201, 240, 0.75);
    box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.12);
}

.mp-custom-lobby-category-dropdown-arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.mp-custom-lobby-category-dropdown-arrow.open {
    transform: rotate(180deg);
}

.mp-custom-lobby-category-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    z-index: 30;
    padding: 10px;
    border-radius: 18px;
    background: rgba(17, 24, 45, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.mp-custom-lobby-category-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: background 0.18s ease, border 0.18s ease;
    border: 1px solid transparent;
}

.mp-custom-lobby-category-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.mp-custom-lobby-category-dropdown-item input {
    accent-color: #6f5cff;
    cursor: pointer;
}

.mp-custom-lobby-category-dropdown-item:has(input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

.mp-custom-lobby-selected-category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.mp-custom-lobby-selected-category-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(111, 92, 255, 0.16);
    border: 1px solid rgba(111, 92, 255, 0.35);
    color: #fff;
    font-size: 0.92rem;
}

.mp-custom-lobby-selected-category-tag button {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

.mp-custom-lobby-selected-category-tag button:hover {
    color: #ffffff;
} 

.mp-custom-lobby-radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.mp-custom-lobby-check-item:hover,
.mp-custom-lobby-radio-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

.mp-custom-lobby-check-item input,
.mp-custom-lobby-radio-item input {
    accent-color: #6f5cff;
    cursor: pointer;
}

.mp-custom-lobby-check-item:has(input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

.mp-custom-lobby-difficulty {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.mp-custom-lobby-radio-item {
    justify-content: center;
    text-transform: capitalize;
}

.mp-custom-lobby-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.mp-custom-lobby-btn {
    min-width: 190px;
}

.mp-custom-lobby-start-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

.mp-custom-lobby-message {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    line-height: 1.5;
    word-break: break-word;
}

.mp-custom-lobby-status-box,
.mp-custom-lobby-error-box {
    margin-top: 18px;
}

@media (max-width: 800px) {
    .mp-custom-lobby-page {
        padding: 16px;
    }

    .mp-custom-lobby-card {
        padding: 18px;
        border-radius: 20px;
    }

    .mp-custom-lobby-overview,
    .mp-custom-lobby-settings-grid,
    .mp-custom-lobby-categories,
    .mp-custom-lobby-players-list {
        grid-template-columns: 1fr;
    }

    .mp-custom-lobby-setting-box-wide {
        grid-column: span 1;
    }

    .mp-custom-lobby-difficulty {
        grid-template-columns: 1fr 1fr;
    }

    .mp-custom-lobby-actions {
        flex-direction: column;
    }

    .mp-custom-lobby-btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .mp-custom-lobby-difficulty {
        grid-template-columns: 1fr;
    }
}

/* ===== RANKED MULTIPLAYER MENU PAGE ===== */
.ranked-multi-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.ranked-multi-screen {
    width: 100%;
    max-width: 900px;
    text-align: center;
}

.ranked-multi-title {
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.ranked-multi-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 24px 0;
    letter-spacing: 0.5px;
}

.ranked-multi-card {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);
}

.ranked-multi-info-box,
.ranked-multi-status-box {
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ranked-multi-section-title {
    margin: 0 0 16px 0;
    font-size: 1.4rem;
    color: #ffffff;
}

.ranked-multi-rules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.ranked-multi-rule-box {
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ranked-multi-rule-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.66);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.ranked-multi-rule-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
}

.ranked-multi-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.ranked-multi-btn {
    min-width: 240px;
}

.ranked-multi-message {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    line-height: 1.5;
    word-break: break-word;
    text-align: center;
}

.ranked-multi-status-box {
    margin-top: 18px;
}

@media (max-width: 700px) {
    .ranked-multi-page {
        padding: 16px;
    }

    .ranked-multi-card {
        padding: 18px;
        border-radius: 20px;
    }

    .ranked-multi-rules {
        grid-template-columns: 1fr;
    }

    .ranked-multi-actions {
        flex-direction: column;
    }

    .ranked-multi-btn {
        width: 100%;
        min-width: 0;
    }
}

/* ===== RANKED LOBBY PAGE ===== */
.ranked-lobby-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.ranked-lobby-screen {
    width: 100%;
    max-width: 920px;
    text-align: center;
}

.ranked-lobby-title {
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.ranked-lobby-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 24px 0;
    letter-spacing: 0.5px;
}

.ranked-lobby-card {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);
    text-align: left;
}

.ranked-lobby-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.ranked-lobby-overview-box,
.ranked-lobby-setting-box,
.ranked-lobby-players-box,
.ranked-lobby-status-box,
.ranked-lobby-error-box {
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ranked-lobby-overview-label,
.ranked-lobby-setting-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.66);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.ranked-lobby-overview-value,
.ranked-lobby-setting-value {
    display: block;
    font-size: 1.08rem;
    font-weight: 700;
    color: #ffffff;
    word-break: break-word;
}

.ranked-lobby-section {
    margin-top: 24px;
}

.ranked-lobby-section-title {
    margin: 0 0 16px 0;
    font-size: 1.4rem;
    color: #ffffff;
}

.ranked-lobby-players-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ranked-lobby-player-item {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-weight: 600;
    text-align: center;
}

.ranked-lobby-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ranked-lobby-highlight {
    color: #4cc9f0;
    font-weight: 800;
}

.ranked-lobby-message {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    line-height: 1.5;
    word-break: break-word;
}

.ranked-lobby-status-box,
.ranked-lobby-error-box {
    margin-top: 18px;
}

@media (max-width: 700px) {
    .ranked-lobby-page {
        padding: 16px;
    }

    .ranked-lobby-card {
        padding: 18px;
        border-radius: 20px;
    }

    .ranked-lobby-overview,
    .ranked-lobby-settings-grid,
    .ranked-lobby-players-list {
        grid-template-columns: 1fr;
    }
}

/* ===== RANKED MULTIPLAYER GAME PAGE ===== */
.ranked-mp-game-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.ranked-mp-game-screen {
    width: 100%;
    max-width: 980px;
    text-align: center;
}

.ranked-mp-game-title {
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.ranked-mp-game-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 24px 0;
    letter-spacing: 0.5px;
}

.ranked-mp-game-card {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);
}

.ranked-mp-game-info-box {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ranked-mp-game-message {
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
}

.ranked-mp-game-question-box {
    margin-bottom: 22px;
}

.ranked-mp-game-question-label {
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.66);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ranked-mp-game-question {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff;
}

.ranked-mp-game-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ranked-mp-game-answer-btn {
    width: 100%;
}

.ranked-mp-game-finish-card {
    text-align: center;
}

.ranked-mp-game-finish-title {
    margin: 0 0 20px 0;
    font-size: 2rem;
    color: #ffffff;
}

.ranked-mp-game-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ranked-mp-game-result-item {
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}

.ranked-mp-game-result-header {
    margin-bottom: 14px;
}

.ranked-mp-game-result-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
}

.ranked-mp-game-result-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.ranked-mp-game-result-box {
    padding: 14px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.ranked-mp-game-result-label {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.66);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.ranked-mp-game-result-value {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
}

.ranked-mp-game-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.ranked-mp-game-menu-btn {
    min-width: 220px;
}

@media (max-width: 800px) {
    .ranked-mp-game-page {
        padding: 16px;
    }

    .ranked-mp-game-card {
        padding: 18px;
        border-radius: 20px;
    }

    .ranked-mp-game-result-stats {
        grid-template-columns: 1fr 1fr;
    }

    .ranked-mp-game-menu-btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .ranked-mp-game-result-stats {
        grid-template-columns: 1fr;
    }

    .ranked-mp-game-question {
        font-size: 1.15rem;
    }
}

/* ===== ACCOUNT SETTINGS PAGE ===== */
.account-settings-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.account-settings-screen {
    width: 100%;
    max-width: 920px;
    text-align: center;
}

.account-settings-title {
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.account-settings-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 24px 0;
    letter-spacing: 0.5px;
}

.account-settings-card {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: left;
}

.account-settings-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.account-settings-overview-box,
.account-settings-message-box {
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.account-settings-overview-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.66);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.account-settings-overview-value {
    display: block;
    font-size: 1.08rem;
    font-weight: 700;
    color: #ffffff;
    word-break: break-word;
}

.account-settings-section {
    margin-top: 24px;
}

.account-settings-section-title {
    margin: 0 0 16px 0;
    font-size: 1.4rem;
    color: #ffffff;
}

.account-settings-field {
    margin-bottom: 20px;
}

.account-settings-label {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.account-settings-input {
    width: 100%;
    display: block;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    outline: none;
    background: rgba(255, 255, 255, 0.07);
    color: white;
    font-size: 1rem;
    line-height: 1.2;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 6px 16px rgba(0, 0, 0, 0.16);
    transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.account-settings-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.account-settings-input:focus {
    border: 1px solid rgba(76, 201, 240, 0.75);
    background: rgba(255, 255, 255, 0.09);
    box-shadow:
            0 0 0 3px rgba(76, 201, 240, 0.12),
            0 10px 25px rgba(0, 0, 0, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.account-settings-avatar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.account-settings-avatar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 110px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
}

.account-settings-avatar-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}

.account-settings-avatar-btn.active {
    background: rgba(111, 92, 255, 0.16);
    border-color: rgba(111, 92, 255, 0.4);
    box-shadow:
            0 10px 24px rgba(111, 92, 255, 0.18),
            inset 0 1px 0 rgba(255,255,255,0.05);
}

.account-settings-avatar-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: #ffffff;
    word-break: break-word;
}

.account-settings-avatar-check {
    font-size: 0.85rem;
    color: #4cc9f0;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.account-settings-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.account-settings-actions-bottom {
    margin-top: 24px;
    justify-content: flex-start;
}

.account-settings-btn {
    min-width: 190px;
}

.account-settings-btn-secondary {
    background: linear-gradient(135deg, #2a2f45, #3c445f);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

.account-settings-message-box {
    margin-top: 22px;
}

.account-settings-message {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    line-height: 1.5;
    word-break: break-word;
    text-align: center;
}

@media (max-width: 700px) {
    .account-settings-page {
        padding: 16px;
    }

    .account-settings-card {
        padding: 18px;
        border-radius: 20px;
    }

    .account-settings-overview {
        grid-template-columns: 1fr;
    }

    .account-settings-avatar-grid {
        grid-template-columns: 1fr 1fr;
    }

    .account-settings-actions {
        flex-direction: column;
    }

    .account-settings-btn {
        width: 100%;
        min-width: 0;
    }

    .account-settings-actions-bottom {
        justify-content: stretch;
    }
}

@media (max-width: 480px) {
    .account-settings-avatar-grid {
        grid-template-columns: 1fr;
    }
}

.single-game-layout,
.ranked-game-layout {
    width: 100%;
    max-width: 1180px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.single-game-sidebar,
.ranked-game-sidebar {
    width: 230px;
    flex-shrink: 0;
    padding: 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);
    text-align: center;
}

.single-game-sidebar-name,
.ranked-game-sidebar-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 18px;
    word-break: break-word;
}

.single-game-sidebar-stat,
.ranked-game-sidebar-stat {
    padding: 14px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 12px;
}

.single-game-sidebar-stat-label,
.ranked-game-sidebar-stat-label {
    display: block;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.66);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.single-game-sidebar-stat-value,
.ranked-game-sidebar-stat-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
}

@media (max-width: 950px) {
    .single-game-layout,
    .ranked-game-layout {
        flex-direction: column;
        align-items: stretch;
    }

    .single-game-sidebar,
    .ranked-game-sidebar {
        width: 100%;
    }
}

.ranked-mp-game-result-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ranked-mp-game-result-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.10);
}
/* ===== NORMAL LOBBY PLAYER AVATARS ===== */
.lobby-player-row {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.lobby-player-name {
    font-weight: 700;
    color: #ffffff;
    word-break: break-word;
}

/* ===== CUSTOM LOBBY PLAYER AVATARS ===== */
.mp-custom-lobby-player-row {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.mp-custom-lobby-player-name {
    font-weight: 700;
    color: #ffffff;
    word-break: break-word;
}

/* ===== RANKED LOBBY PLAYER AVATARS ===== */
.ranked-lobby-player-row {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.ranked-lobby-player-name {
    font-weight: 700;
    color: #ffffff;
    word-break: break-word;
}

/* ===== NORMAL MULTIPLAYER LIVE SCORES ===== */
.multiplayer-game-live-scores {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.multiplayer-game-live-score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}

.multiplayer-game-live-score-player {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.multiplayer-game-live-score-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.10);
}

.multiplayer-game-live-score-name {
    font-weight: 700;
    color: #ffffff;
    word-break: break-word;
}

.multiplayer-game-live-score-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: #4cc9f0;
    flex-shrink: 0;
}

/* ===== RANKED MULTIPLAYER LIVE SCORES ===== */
.ranked-mp-game-live-scores {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.ranked-mp-game-live-score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}

.ranked-mp-game-live-score-player {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ranked-mp-game-live-score-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.10);
}

.ranked-mp-game-live-score-name {
    font-weight: 700;
    color: #ffffff;
    word-break: break-word;
}

.ranked-mp-game-live-score-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: #4cc9f0;
    flex-shrink: 0;
}

/* ===== PROFILE MENU USER AVATAR BLOCK ===== */
.profile-menu-user-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.profile-menu-user-main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== RESPONSIVE AVATAR/LIVE SCORE FIXES ===== */
@media (max-width: 700px) {
    .ranked-mp-game-live-score-row,
    .multiplayer-game-live-score-row,
    .ranked-lobby-player-row,
    .mp-custom-lobby-player-row,
    .lobby-player-row {
        gap: 10px;
    }

    .ranked-mp-game-live-score-avatar,
    .multiplayer-game-live-score-avatar,
    .ranked-lobby-player-avatar,
    .mp-custom-lobby-player-avatar,
    .lobby-player-avatar {
        width: 38px;
        height: 38px;
    }

    .ranked-mp-game-live-score-value,
    .multiplayer-game-live-score-value {
        font-size: 1.05rem;
    }
}

/* ===== SHARED GAME LAYOUT ===== */
.game-layout {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding: 24px 32px;
}

.game-main {
    min-width: 0;
    display: flex;
    justify-content: center;
}

.multiplayer-game-card,
.ranked-mp-game-card {
    width: 100%;
    max-width: 820px;
}

.game-sidebar {
    width: 100%;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.game-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}

.game-player-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    gap: 12px;
}

.game-player-name {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    word-break: break-word;
}

.game-player-score {
    font-size: 1.05rem;
    font-weight: 800;
    color: #4cc9f0;
    flex-shrink: 0;
}

.game-page-title {
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
    text-align: center;
}

.game-page-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 24px 0;
    letter-spacing: 0.5px;
    text-align: center;
}

@media (max-width: 950px) {
    .game-layout {
        grid-template-columns: 1fr;
    }

    .game-sidebar {
        order: 1;
    }

    .game-main {
        order: 2;
    }
}

.multiplayer-player-color-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    margin-right: 0.55rem;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
    vertical-align: middle;
}

.multiplayer-game-answer-btn--resolved {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

.multiplayer-answer-player-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.75rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: rgba(16, 19, 35, 0.18);
    color: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.question-reveal-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 280px;
    text-align: center;
    gap: 18px;
}

.question-reveal-label {
    margin: 0;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.66);
}

.question-reveal-text {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.35;
    color: #ffffff;
}

.question-reveal-progress {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.question-reveal-progress-bar {
    height: 100%;
    width: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #7c5cff 0%, #4cc9f0 100%);
    transform-origin: left center;
    animation-name: questionRevealCountdown;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes questionRevealCountdown {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

.multiplayer-player-color-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    margin-right: 0.55rem;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
    vertical-align: middle;
}

.multiplayer-game-answer-btn--resolved {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

.multiplayer-answer-player-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.75rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: rgba(16, 19, 35, 0.18);
    color: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ===== SINGLEPLAYER / RANKED ANSWER BUTTONS - MATCH MULTIPLAYER ===== */
.single-game-answer-btn,
.ranked-game-answer-btn {
    display: block;
    width: 100%;
    margin: 0;
    padding: 18px 24px;
    border: none;
    outline: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(90deg, #6f5cff 0%, #57c7f5 100%);
    box-shadow: 0 8px 24px rgba(87, 199, 245, 0.16);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

.single-game-answer-btn:hover,
.ranked-game-answer-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 10px 28px rgba(87, 199, 245, 0.22);
}

.single-game-answer-btn:active,
.ranked-game-answer-btn:active {
    transform: translateY(0);
}

.single-game-answer-btn.correct,
.ranked-game-answer-btn.correct {
    border: 2px solid #51cf66;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(81, 207, 102, 0.38), rgba(81, 207, 102, 0.20));
    box-shadow: 0 8px 24px rgba(81, 207, 102, 0.18);
}

.single-game-answer-btn.wrong,
.ranked-game-answer-btn.wrong {
    border: 2px solid #ff6b6b;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.30), rgba(255, 107, 107, 0.16));
    box-shadow: 0 8px 24px rgba(255, 107, 107, 0.16);
}

.single-game-answer-btn.disabled,
.ranked-game-answer-btn.disabled {
    opacity: 0.45;
    filter: saturate(0.8);
}

.single-game-answer-btn:disabled,
.ranked-game-answer-btn:disabled {
    cursor: default;
}

/* ===== LEAVE MODAL ===== */
.leave-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(5, 10, 24, 0.70);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: leaveModalFadeIn 0.18s ease;
}

.leave-modal-card {
    width: 100%;
    max-width: 460px;
    padding: 28px 24px;
    border-radius: 28px;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
            0 30px 80px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255,255,255,0.08);
    animation: leaveModalPopIn 0.2s ease;
}

.leave-modal-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    color: #ffffff;
    background: linear-gradient(135deg, #6f5cff, #4cc9f0);
    box-shadow:
            0 12px 30px rgba(76, 201, 240, 0.18),
            0 8px 18px rgba(111, 92, 255, 0.24);
}

.leave-modal-title {
    margin: 0 0 12px 0;
    font-size: 1.7rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.4px;
}

.leave-modal-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1.6;
}

.leave-modal-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-top: 24px;
    flex-wrap: wrap;
}

.leave-modal-actions .menu-btn {
    min-width: 160px;
}

.leave-modal-btn-secondary {
    background: linear-gradient(135deg, #2a2f45, #3c445f);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

.leave-modal-btn-danger {
    background: linear-gradient(135deg, #8f2230, #d64550);
    box-shadow:
            0 10px 20px rgba(214, 69, 80, 0.18),
            0 6px 14px rgba(143, 34, 48, 0.22);
}

.leave-modal-btn-danger:hover {
    box-shadow:
            0 16px 28px rgba(214, 69, 80, 0.24),
            0 10px 22px rgba(143, 34, 48, 0.30);
}

@keyframes leaveModalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes leaveModalPopIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 600px) {
    .leave-modal-card {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .leave-modal-title {
        font-size: 1.4rem;
    }

    .leave-modal-actions {
        flex-direction: column;
    }

    .leave-modal-actions .menu-btn {
        width: 100%;
        min-width: 0;
    }
}

.ranked-mp-game-result-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ranked-mp-game-result-name {
    display: block;
    flex: 1;
    min-width: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== SAVED QUIZ LOBBY CREATE PAGE ===== */
.custom-quiz-lobby-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.custom-quiz-lobby-screen {
    width: 100%;
    max-width: 980px;
    text-align: center;
}

.custom-quiz-lobby-title {
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.custom-quiz-lobby-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin: 0 0 24px 0;
    letter-spacing: 0.5px;
}

.custom-quiz-lobby-card {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);
    text-align: left;
}

.custom-quiz-lobby-overview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.custom-quiz-lobby-overview-box,
.custom-quiz-lobby-message-box,
.custom-quiz-lobby-question-card {
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}

.custom-quiz-lobby-overview-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.66);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.custom-quiz-lobby-overview-value {
    display: block;
    font-size: 1.08rem;
    font-weight: 700;
    color: #fff;
}

.custom-quiz-lobby-section {
    margin-top: 24px;
}

.custom-quiz-lobby-section-title {
    margin: 0 0 16px 0;
    font-size: 1.4rem;
    color: #fff;
}

.custom-quiz-lobby-question-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.custom-quiz-lobby-question-header {
    margin-bottom: 10px;
}

.custom-quiz-lobby-question-number {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.66);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.custom-quiz-lobby-question-text {
    margin: 0 0 14px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.45;
}

.custom-quiz-lobby-answer-list {
    display: grid;
    gap: 10px;
}

.custom-quiz-lobby-answer-item {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.92);
}

.custom-quiz-lobby-answer-item.correct {
    border: 2px solid #51cf66;
    background: linear-gradient(135deg, rgba(81,207,102,0.28), rgba(81,207,102,0.14));
    color: #fff;
}

.custom-quiz-lobby-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.custom-quiz-lobby-btn {
    min-width: 220px;
}

.custom-quiz-lobby-btn-secondary {
    background: linear-gradient(135deg, #2a2f45, #3c445f);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

.custom-quiz-lobby-message {
    margin: 0;
    color: rgba(255,255,255,0.92);
    line-height: 1.5;
}

@media (max-width: 700px) {
    .custom-quiz-lobby-page {
        padding: 16px;
    }

    .custom-quiz-lobby-card {
        padding: 18px;
        border-radius: 20px;
    }

    .custom-quiz-lobby-overview {
        grid-template-columns: 1fr;
    }

    .custom-quiz-lobby-actions {
        flex-direction: column;
    }

    .custom-quiz-lobby-btn {
        width: 100%;
        min-width: 0;
    }
}

/* ===== SAVED QUIZ MULTIPLAYER LOBBY ===== */
.saved-quiz-lobby-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.saved-quiz-lobby-screen {
    width: 100%;
    max-width: 980px;
    text-align: center;
}

.saved-quiz-lobby-title {
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    text-shadow:
            0 0 10px rgba(120, 119, 255, 0.6),
            0 0 25px rgba(120, 119, 255, 0.35),
            0 0 45px rgba(0, 224, 255, 0.2);
}

.saved-quiz-lobby-subtitle {
    color: rgba(255,255,255,0.72);
    font-size: 1rem;
    margin: 0 0 24px 0;
}

.saved-quiz-lobby-card {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
            0 20px 50px rgba(0,0,0,0.35),
            inset 0 1px 0 rgba(255,255,255,0.08);
    text-align: left;
}

.saved-quiz-lobby-overview,
.saved-quiz-lobby-settings-grid,
.saved-quiz-lobby-players-list {
    display: grid;
    gap: 16px;
}

.saved-quiz-lobby-overview {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 24px;
}

.saved-quiz-lobby-settings-grid {
    grid-template-columns: repeat(2, 1fr);
}

.saved-quiz-lobby-players-list {
    grid-template-columns: repeat(2, 1fr);
}

.saved-quiz-lobby-overview-box,
.saved-quiz-lobby-setting-box,
.saved-quiz-lobby-status-box,
.saved-quiz-lobby-error-box,
.saved-quiz-lobby-player-item {
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}

.saved-quiz-lobby-overview-label,
.saved-quiz-lobby-setting-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.66);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.saved-quiz-lobby-overview-value,
.saved-quiz-lobby-setting-value {
    display: block;
    font-size: 1.08rem;
    font-weight: 700;
    color: #fff;
}

.saved-quiz-lobby-section {
    margin-top: 24px;
}

.saved-quiz-lobby-section-title {
    margin: 0 0 16px 0;
    font-size: 1.4rem;
    color: #fff;
}

.saved-quiz-lobby-player-row {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.saved-quiz-lobby-player-name {
    font-weight: 700;
    color: #fff;
    word-break: break-word;
}

.saved-quiz-lobby-actions {
    display: flex;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.saved-quiz-lobby-btn {
    min-width: 190px;
}

.saved-quiz-lobby-message {
    margin: 0;
    color: rgba(255,255,255,0.92);
    line-height: 1.5;
}

.saved-quiz-lobby-status-box,
.saved-quiz-lobby-error-box {
    margin-top: 18px;
}

@media (max-width: 800px) {
    .saved-quiz-lobby-page {
        padding: 16px;
    }

    .saved-quiz-lobby-card {
        padding: 18px;
        border-radius: 20px;
    }

    .saved-quiz-lobby-overview,
    .saved-quiz-lobby-settings-grid,
    .saved-quiz-lobby-players-list {
        grid-template-columns: 1fr;
    }

    .saved-quiz-lobby-actions {
        flex-direction: column;
    }

    .saved-quiz-lobby-btn {
        width: 100%;
        min-width: 0;
    }
}

/* ===== SAVED QUIZ GAME PAGE ===== */
.saved-quiz-game-page {
    min-height: 100vh;
    width: 100%;
    padding: 24px;
}

/* ===== SHARED AVATAR STYLES ===== */
.pengu-avatar-shell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.10);
    box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pengu-avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    padding: 6px;
}

/* velikosti */
.pengu-avatar-shell--sm {
    width: 44px;
    height: 44px;
}

.pengu-avatar-shell--md {
    width: 64px;
    height: 64px;
}

.pengu-avatar-shell--lg {
    width: 96px;
    height: 96px;
}

.lobby-player-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lobby-player-avatar-wrap {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    flex-shrink: 0;
}

.lobby-player-avatar {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 4px;
    box-sizing: border-box;
}

.profile-menu-user-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.profile-menu-avatar-wrap {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.08);
    margin-bottom: 14px;
}

.profile-menu-avatar {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 6px;
    box-sizing: border-box;
}

.account-settings-avatar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.account-settings-avatar-wrap {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.08);
}

.account-settings-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 6px;
    box-sizing: border-box;
}

.account-settings-avatar-btn.active .account-settings-avatar-wrap {
    border-color: #6f7cff;
    box-shadow: 0 0 20px rgba(111,124,255,0.35);
}

.mp-custom-lobby-player-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mp-custom-lobby-player-avatar-wrap {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    flex-shrink: 0;
}

.mp-custom-lobby-player-avatar {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 4px;
    box-sizing: border-box;
}

.saved-quiz-lobby-player-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.saved-quiz-lobby-player-avatar-wrap {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    flex-shrink: 0;
}

.saved-quiz-lobby-player-avatar {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 4px;
    box-sizing: border-box;
}

.ranked-lobby-player-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ranked-lobby-player-avatar-wrap {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    flex-shrink: 0;
}

.ranked-lobby-player-avatar {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 4px;
    box-sizing: border-box;
}

.game-avatar-wrap {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    flex-shrink: 0;
}

.game-avatar {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 4px;
    box-sizing: border-box;
}

.ranked-mp-game-result-avatar-wrap {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    flex-shrink: 0;
}

.ranked-mp-game-result-avatar {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 4px;
    box-sizing: border-box;
}

.single-game-sidebar-avatar-wrap {
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    margin: 0 auto 14px auto;
}

.single-game-sidebar-avatar {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 6px;
    box-sizing: border-box;
}

.ranked-game-sidebar-avatar-wrap {
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    margin: 0 auto 14px auto;
}

.ranked-game-sidebar-avatar {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 6px;
    box-sizing: border-box;
}

.mainmenu-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

.mainmenu-logo {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

.home-floating-btn {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 9999;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.mainmenu-logo {
    width: 220px;
    height: 220px;
    object-fit: contain;
    filter: drop-shadow(0 0 25px rgba(80, 140, 255, 0.35));
    transition: transform 0.25s ease;
}

.mainmenu-logo-wrap {
    display: flex;
    justify-content: center;
    margin-top: -60px;  
    margin-bottom: -10px;
}

.home-with-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-with-text span {
    margin-top: 4px;
    color: white;
    font-weight: 800;
    font-size: 1rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}


html,
body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

img,
svg,
canvas,
video {
    max-width: 100%;
    height: auto;
}

@media (max-width: 950px) {
    .single-game-layout,
    .ranked-game-layout {
        flex-direction: column;
        gap: 14px !important;
    }

    .single-game-sidebar,
    .ranked-game-sidebar {
        width: 100%;
        padding: 14px !important;
        border-radius: 18px !important;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        align-items: stretch;
    }

    .single-game-sidebar-name,
    .ranked-game-sidebar-name {
        grid-column: 1 / -1;
        margin-bottom: 2px !important;
        font-size: 1rem !important;
        text-align: center;
    }

    .single-game-sidebar-stat,
    .ranked-game-sidebar-stat {
        margin-bottom: 0 !important;
        padding: 10px 8px !important;
        border-radius: 14px !important;
    }

    .single-game-sidebar-stat-label,
    .ranked-game-sidebar-stat-label {
        font-size: 0.7rem !important;
        margin-bottom: 4px !important;
        letter-spacing: 0.6px !important;
    }

    .single-game-sidebar-stat-value,
    .ranked-game-sidebar-stat-value {
        font-size: 1rem !important;
        line-height: 1.2;
    }

    .game-layout {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    .game-sidebar {
        order: 1;
        width: 100%;
    }

    .game-main {
        order: 2;
        width: 100%;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

@media (max-width: 700px) {
    .home-page,
    .profile-page,
    .profile-menu-page,
    .leaderboard-page,
    .single-menu-page,
    .single-game-page,
    .ranked-game-page,
    .multiplayer-page,
    .multiplayer-game-page,
    .lobby-page,
    .mp-custom-page,
    .mp-custom-lobby-page,
    .ranked-multi-page,
    .ranked-lobby-page,
    .ranked-mp-game-page,
    .account-settings-page,
    .custom-quiz-lobby-page,
    .saved-quiz-lobby-page,
    .saved-quiz-game-page {
        padding: 12px !important;
        padding-top: 72px !important;
    }

    .menu-screen,
    .profile-screen,
    .profile-menu-screen,
    .leaderboard-screen,
    .single-menu-screen,
    .single-game-screen,
    .ranked-game-screen,
    .multiplayer-screen,
    .multiplayer-game-screen,
    .lobby-screen,
    .mp-custom-screen,
    .mp-custom-lobby-screen,
    .ranked-multi-screen,
    .ranked-lobby-screen,
    .ranked-mp-game-screen,
    .account-settings-screen,
    .custom-quiz-lobby-screen,
    .saved-quiz-lobby-screen {
        width: 100%;
        max-width: 100%;
        padding: 0 !important;
    }

    .menu-container,
    .profile-container,
    .profile-menu-card,
    .leaderboard-card,
    .single-menu-main,
    .single-menu-setup,
    .single-game-card,
    .ranked-game-card,
    .multiplayer-join-card,
    .multiplayer-info-box,
    .multiplayer-game-card,
    .lobby-card,
    .mp-custom-card,
    .mp-custom-lobby-card,
    .ranked-multi-card,
    .ranked-lobby-card,
    .ranked-mp-game-card,
    .account-settings-card,
    .custom-quiz-lobby-card,
    .saved-quiz-lobby-card,
    .game-sidebar {
        width: 100%;
        max-width: 100%;
        padding: 16px !important;
        border-radius: 18px !important;
        overflow-x: hidden;
    }

    .menu-title,
    .profile-title,
    .profile-menu-title,
    .leaderboard-title,
    .single-menu-title,
    .single-game-title,
    .ranked-game-title,
    .multiplayer-title,
    .multiplayer-game-title,
    .lobby-title,
    .mp-custom-title,
    .mp-custom-lobby-title,
    .ranked-multi-title,
    .ranked-lobby-title,
    .ranked-mp-game-title,
    .account-settings-title,
    .custom-quiz-lobby-title,
    .saved-quiz-lobby-title,
    .game-page-title {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
        line-height: 1.12 !important;
        letter-spacing: 1px !important;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .menu-subtitle,
    .profile-subtitle,
    .profile-menu-subtitle,
    .leaderboard-subtitle,
    .single-menu-subtitle,
    .single-game-subtitle,
    .ranked-game-subtitle,
    .multiplayer-subtitle,
    .multiplayer-game-subtitle,
    .lobby-subtitle,
    .mp-custom-subtitle,
    .mp-custom-lobby-subtitle,
    .ranked-multi-subtitle,
    .ranked-lobby-subtitle,
    .ranked-mp-game-subtitle,
    .account-settings-subtitle,
    .custom-quiz-lobby-subtitle,
    .saved-quiz-lobby-subtitle,
    .game-page-subtitle {
        font-size: 0.94rem !important;
        margin-bottom: 16px !important;
        overflow-wrap: anywhere;
    }

    .menu-btn,
    .profile-btn,
    .profile-menu-btn,
    .single-game-menu-btn,
    .ranked-game-menu-btn,
    .leaderboard-back-btn,
    .multiplayer-join-btn,
    .lobby-action-btn,
    .mp-custom-btn,
    .mp-custom-lobby-btn,
    .ranked-multi-btn,
    .account-settings-btn,
    .custom-quiz-lobby-btn,
    .saved-quiz-lobby-btn,
    .single-game-answer-btn,
    .ranked-game-answer-btn,
    .multiplayer-game-answer-btn,
    .ranked-mp-game-answer-btn,
    .answer-btn {
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px 14px !important;
        font-size: 0.96rem !important;
        border-radius: 16px !important;
        white-space: normal;
        word-break: break-word;
    }

    .profile-menu-actions,
    .single-game-actions,
    .ranked-game-actions,
    .ranked-multi-actions,
    .mp-custom-actions,
    .mp-custom-lobby-actions,
    .saved-quiz-lobby-actions,
    .account-settings-actions,
    .account-settings-actions-bottom,
    .lobby-actions,
    .leaderboard-switch {
        flex-direction: column !important;
    }

    .profile-menu-btn,
    .leaderboard-switch .menu-btn,
    .leaderboard-back-btn {
        width: 100% !important;
        min-width: 0 !important;
    }

    .profile-input,
    .multiplayer-input,
    .account-settings-input,
    .lobby-input,
    .lobby-select,
    .single-menu-select,
    .mp-custom-select,
    .mp-custom-lobby-select,
    .category-dropdown-toggle,
    .mp-custom-lobby-category-dropdown-toggle {
        width: 100%;
        max-width: 100%;
        padding: 14px 16px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
    }

    .profile-menu-stats,
    .single-game-summary,
    .ranked-game-summary,
    .single-menu-categories,
    .lobby-overview,
    .lobby-settings-grid,
    .lobby-form-grid,
    .lobby-categories,
    .mp-custom-categories,
    .mp-custom-lobby-overview,
    .mp-custom-lobby-settings-grid,
    .mp-custom-lobby-players-list,
    .saved-quiz-lobby-overview,
    .saved-quiz-lobby-settings-grid,
    .saved-quiz-lobby-players-list,
    .ranked-lobby-overview,
    .ranked-lobby-settings-grid,
    .ranked-lobby-players-list,
    .custom-quiz-lobby-overview,
    .account-settings-overview,
    .profile-menu-stats,
    .ranked-multi-rules {
        grid-template-columns: 1fr !important;
    }

    .single-menu-difficulty,
    .mp-custom-difficulty,
    .mp-custom-lobby-difficulty,
    .account-settings-avatar-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .single-game-question-text,
    .ranked-game-question-text,
    .multiplayer-game-question,
    .ranked-mp-game-question,
    .custom-quiz-lobby-question-text,
    .question-reveal-text {
        font-size: 1.02rem !important;
        line-height: 1.4 !important;
        word-break: break-word;
    }

    .single-game-topbar,
    .ranked-game-topbar {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .single-game-stat,
    .ranked-game-stat {
        min-width: calc(50% - 4px);
        flex: 1 1 calc(50% - 4px);
        padding: 10px 12px !important;
        border-radius: 14px !important;
    }

    .single-game-stat-label,
    .ranked-game-stat-label {
        font-size: 0.7rem !important;
        margin-bottom: 4px !important;
    }

    .single-game-stat-value,
    .ranked-game-stat-value {
        font-size: 1rem !important;
    }

    .single-game-sidebar,
    .ranked-game-sidebar {
        padding-top: 12px !important;
    }

    .single-game-sidebar-avatar-wrap,
    .ranked-game-sidebar-avatar-wrap {
        width: 46px !important;
        height: 46px !important;
        margin: 0 auto 6px auto !important;
    }

    .single-game-sidebar-name,
    .ranked-game-sidebar-name {
        font-size: 0.92rem !important;
        margin-bottom: 2px !important;
    }

    .single-game-sidebar-stat,
    .ranked-game-sidebar-stat {
        padding: 8px 6px !important;
        border-radius: 12px !important;
        margin-top: 2px !important;
    }

    .single-game-sidebar-stat-label,
    .ranked-game-sidebar-stat-label {
        font-size: 0.62rem !important;
        margin-bottom: 3px !important;
    }

    .single-game-sidebar-stat-value,
    .ranked-game-sidebar-stat-value {
        font-size: 0.9rem !important;
    }

    .home-floating-btn {
        position: fixed;
        top: 8px !important;
        left: 8px !important;
        z-index: 10000;
        width: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px !important;
        padding: 0 !important;
    }

    .home-floating-img {
        width: 42px !important;
        height: 42px !important;
        display: block;
    }

    .home-floating-btn span {
        font-size: 0.7rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        text-align: center;
    }

    .mainmenu-logo {
        width: 150px !important;
        height: 150px !important;
    }

    .mainmenu-logo-wrap {
        margin-top: -20px !important;
        margin-bottom: 0 !important;
    }

    .game-layout {
        gap: 8px !important;
    }

    .game-sidebar {
        margin-top: 4px !important;
        margin-bottom: 2px !important;
        padding-top: 12px !important;
        padding-bottom: 8px !important;
        gap: 8px !important;
    }

    .game-main > *:first-child,
    .multiplayer-game-card,
    .ranked-mp-game-card,
    .single-game-card,
    .ranked-game-card {
        margin-top: 0 !important;
    }

    .multiplayer-game-live-scores,
    .ranked-mp-game-live-scores {
        margin-top: 4px !important;
        margin-bottom: 8px !important;
        gap: 8px !important;
    }

    .multiplayer-game-live-score-row,
    .ranked-mp-game-live-score-row,
    .multiplayer-game-score-row,
    .game-player,
    .lobby-player-row,
    .mp-custom-lobby-player-row,
    .saved-quiz-lobby-player-row,
    .ranked-lobby-player-row {
        gap: 10px !important;
        min-height: 56px;
        padding: 12px !important;
    }

    .multiplayer-game-live-score-avatar,
    .ranked-mp-game-live-score-avatar,
    .lobby-player-avatar-wrap,
    .mp-custom-lobby-player-avatar-wrap,
    .saved-quiz-lobby-player-avatar-wrap,
    .ranked-lobby-player-avatar-wrap,
    .game-avatar-wrap {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0;
    }

    .ranked-mp-game-result-avatar-wrap {
        width: 44px !important;
        height: 44px !important;
    }

    .multiplayer-game-live-score-name,
    .ranked-mp-game-live-score-name,
    .game-player-name,
    .lobby-player-name,
    .mp-custom-lobby-player-name,
    .saved-quiz-lobby-player-name,
    .ranked-lobby-player-name,
    .ranked-mp-game-result-name {
        font-size: 0.92rem !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
    }

    .multiplayer-game-live-score-value,
    .ranked-mp-game-live-score-value,
    .game-player-score {
        font-size: 0.98rem !important;
    }

    .saved-quiz-lobby-title,
    .custom-quiz-lobby-title,
    .lobby-title,
    .mp-custom-lobby-title,
    .ranked-lobby-title {
        padding-left: 36px;
    }

    .saved-quiz-lobby-subtitle,
    .custom-quiz-lobby-subtitle,
    .lobby-subtitle,
    .mp-custom-lobby-subtitle,
    .ranked-lobby-subtitle {
        padding-left: 36px;
    }

    .category-dropdown-menu,
    .mp-custom-lobby-category-dropdown-menu {
        width: 100%;
        max-height: 220px;
        left: 0;
        right: 0;
    }
}

@media (max-width: 520px) {
    .single-game-topbar,
    .ranked-game-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .single-game-stat,
    .ranked-game-stat {
        min-width: 100%;
        width: 100%;
    }

    .single-menu-difficulty,
    .mp-custom-difficulty,
    .mp-custom-lobby-difficulty,
    .account-settings-avatar-grid {
        grid-template-columns: 1fr !important;
    }

    .question-reveal-card {
        min-height: 220px !important;
        gap: 14px !important;
    }

    .question-reveal-text {
        font-size: 1.45rem !important;
    }
}

@media (max-width: 480px) {
    .home-page,
    .profile-page,
    .profile-menu-page,
    .leaderboard-page,
    .single-menu-page,
    .single-game-page,
    .ranked-game-page,
    .multiplayer-page,
    .multiplayer-game-page,
    .lobby-page,
    .mp-custom-page,
    .mp-custom-lobby-page,
    .ranked-multi-page,
    .ranked-lobby-page,
    .ranked-mp-game-page,
    .account-settings-page,
    .custom-quiz-lobby-page,
    .saved-quiz-lobby-page,
    .saved-quiz-game-page {
        padding-top: 68px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 10px !important;
    }

    .home-floating-btn {
        top: 6px !important;
        left: 6px !important;
        width: 50px;
    }

    .home-floating-img {
        width: 36px !important;
        height: 36px !important;
    }

    .home-floating-btn span {
        font-size: 0.66rem !important;
    }

    .menu-title,
    .profile-title,
    .profile-menu-title,
    .leaderboard-title,
    .single-menu-title,
    .single-game-title,
    .ranked-game-title,
    .multiplayer-title,
    .multiplayer-game-title,
    .lobby-title,
    .mp-custom-title,
    .mp-custom-lobby-title,
    .ranked-multi-title,
    .ranked-lobby-title,
    .ranked-mp-game-title,
    .account-settings-title,
    .custom-quiz-lobby-title,
    .saved-quiz-lobby-title,
    .game-page-title {
        font-size: 1.55rem !important;
    }

    .menu-container,
    .profile-container,
    .profile-menu-card,
    .leaderboard-card,
    .single-menu-main,
    .single-menu-setup,
    .single-game-card,
    .ranked-game-card,
    .multiplayer-join-card,
    .multiplayer-game-card,
    .lobby-card,
    .mp-custom-card,
    .mp-custom-lobby-card,
    .ranked-multi-card,
    .ranked-lobby-card,
    .ranked-mp-game-card,
    .account-settings-card,
    .custom-quiz-lobby-card,
    .saved-quiz-lobby-card,
    .game-sidebar {
        padding: 14px !important;
    }

    .single-game-sidebar,
    .ranked-game-sidebar {
        gap: 6px !important;
        padding: 10px !important;
    }

    .single-game-sidebar-avatar-wrap,
    .ranked-game-sidebar-avatar-wrap {
        width: 40px !important;
        height: 40px !important;
    }

    .single-game-sidebar-name,
    .ranked-game-sidebar-name {
        font-size: 0.86rem !important;
    }

    .single-game-sidebar-stat-label,
    .ranked-game-sidebar-stat-label {
        font-size: 0.56rem !important;
    }

    .single-game-sidebar-stat-value,
    .ranked-game-sidebar-stat-value {
        font-size: 0.8rem !important;
    }

    .single-game-question-number,
    .ranked-game-question-number,
    .multiplayer-game-question-label,
    .ranked-mp-game-question-label {
        font-size: 0.76rem !important;
    }

    .single-game-question-text,
    .ranked-game-question-text,
    .multiplayer-game-question,
    .ranked-mp-game-question {
        font-size: 0.95rem !important;
    }

    .single-game-answer-btn,
    .ranked-game-answer-btn,
    .multiplayer-game-answer-btn,
    .ranked-mp-game-answer-btn,
    .answer-btn {
        font-size: 0.9rem !important;
        padding: 12px 10px !important;
    }

    .saved-quiz-lobby-title,
    .custom-quiz-lobby-title,
    .lobby-title,
    .mp-custom-lobby-title,
    .ranked-lobby-title {
        padding-left: 30px;
    }

    .saved-quiz-lobby-subtitle,
    .custom-quiz-lobby-subtitle,
    .lobby-subtitle,
    .mp-custom-lobby-subtitle,
    .ranked-lobby-subtitle {
        padding-left: 30px;
    }
}

@media (max-width: 700px) {

    .game-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .game-sidebar {
        margin: 0 !important;
        padding-bottom: 4px !important;
    }

    .game-main {
        margin: 0 !important;
        padding: 0 !important;

        justify-content: flex-start !important;
        align-items: stretch !important;
        min-height: auto !important;
    }

    .multiplayer-game-card,
    .ranked-mp-game-card {
        margin-top: 0 !important;
    }

    .game-main > *:first-child {
        margin-top: 0 !important;
    }
}

@media (min-width: 701px) {

    .home-floating-btn {
        position: fixed;
        top: 20px;
        left: 20px;
        width: auto;
    }

    .home-floating-img {
        width: 80px !important;
        height: 80px !important;
    }

    .home-floating-btn span {
        font-size: 1rem !important;
    }
}

.home-floating-btn {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.home-floating-img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.home-floating-btn:hover .home-floating-img {
    transform: scale(1.06);
}

.home-floating-btn span {
    color: white;
    font-weight: 800;
    font-size: 1rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}