/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-vclvval70n] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-vclvval70n] {
    flex: 1;
}

.sidebar[b-vclvval70n] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-vclvval70n] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-vclvval70n]  a, .top-row[b-vclvval70n]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-vclvval70n]  a:hover, .top-row[b-vclvval70n]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-vclvval70n]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-vclvval70n] {
        justify-content: space-between;
    }

    .top-row[b-vclvval70n]  a, .top-row[b-vclvval70n]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-vclvval70n] {
        flex-direction: row;
    }

    .sidebar[b-vclvval70n] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-vclvval70n] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-vclvval70n]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-vclvval70n], article[b-vclvval70n] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-cuz826oke7] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-cuz826oke7] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-cuz826oke7] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-cuz826oke7] {
    font-size: 1.1rem;
}

.bi[b-cuz826oke7] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-cuz826oke7] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-cuz826oke7] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-cuz826oke7] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-cuz826oke7] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-cuz826oke7] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-cuz826oke7] {
        padding-bottom: 1rem;
    }

    .nav-item[b-cuz826oke7]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-cuz826oke7]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-cuz826oke7]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-cuz826oke7] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-cuz826oke7] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-cuz826oke7] {
        display: none;
    }

    .nav-scrollable[b-cuz826oke7] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-77r2cs8x5t],
.components-reconnect-repeated-attempt-visible[b-77r2cs8x5t],
.components-reconnect-failed-visible[b-77r2cs8x5t],
.components-pause-visible[b-77r2cs8x5t],
.components-resume-failed-visible[b-77r2cs8x5t],
.components-rejoining-animation[b-77r2cs8x5t] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-77r2cs8x5t],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-77r2cs8x5t],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-77r2cs8x5t],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-77r2cs8x5t],
#components-reconnect-modal.components-reconnect-retrying[b-77r2cs8x5t],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-77r2cs8x5t],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-77r2cs8x5t],
#components-reconnect-modal.components-reconnect-failed[b-77r2cs8x5t],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-77r2cs8x5t] {
    display: block;
}


#components-reconnect-modal[b-77r2cs8x5t] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-77r2cs8x5t 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-77r2cs8x5t 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-77r2cs8x5t 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-77r2cs8x5t]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-77r2cs8x5t 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-77r2cs8x5t {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-77r2cs8x5t {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-77r2cs8x5t {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-77r2cs8x5t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-77r2cs8x5t] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-77r2cs8x5t] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-77r2cs8x5t] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-77r2cs8x5t] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-77r2cs8x5t] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-77r2cs8x5t] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-77r2cs8x5t 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-77r2cs8x5t] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-77r2cs8x5t {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Game/Play.razor.rz.scp.css */
/* === Shared game screen base === */
.game-join[b-o2lbgbngq2],
.game-lobby[b-o2lbgbngq2],
.game-question[b-o2lbgbngq2],
.game-answered[b-o2lbgbngq2],
.game-round-result[b-o2lbgbngq2],
.game-eliminated[b-o2lbgbngq2],
.game-over[b-o2lbgbngq2] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

/* === Join View === */
.game-join[b-o2lbgbngq2] {
    justify-content: center;
    gap: 0.5rem;
}

.game-logo[b-o2lbgbngq2] {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.game-title[b-o2lbgbngq2] {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 1.5rem;
    text-align: center;
}

.join-card[b-o2lbgbngq2] {
    background: var(--jfw-panel);
    border-radius: var(--jfw-radius);
    padding: 1.75rem 1.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 0 24px rgba(226, 0, 26, 0.2);
}

.join-label[b-o2lbgbngq2] {
    font-size: 0.9rem;
    color: var(--jfw-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.room-code-input[b-o2lbgbngq2] {
    width: 100%;
    background: #3a3a3a;
    border: 2px solid #555;
    border-radius: 10px;
    color: #fff;
    padding: 1rem;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.3em;
    box-sizing: border-box;
    transition: border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.room-code-input:focus[b-o2lbgbngq2] {
    outline: none;
    border-color: var(--jfw-red);
    box-shadow: 0 0 0 3px rgba(226, 0, 26, 0.2);
}

.btn-join[b-o2lbgbngq2] {
    width: 100%;
    background: var(--jfw-red);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn-join:active:not(:disabled)[b-o2lbgbngq2] {
    transform: scale(0.97);
}

.btn-join:disabled[b-o2lbgbngq2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.join-error[b-o2lbgbngq2] {
    background: rgba(226, 0, 26, 0.12);
    border: 1px solid var(--jfw-red);
    border-radius: 8px;
    color: #ff7070;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    text-align: center;
}

/* === Lobby View === */
.game-lobby[b-o2lbgbngq2] {
    justify-content: flex-start;
    gap: 1.5rem;
    padding-top: 2.5rem;
}

.lobby-top[b-o2lbgbngq2] {
    text-align: center;
    width: 100%;
}

.room-code-badge[b-o2lbgbngq2] {
    display: inline-block;
    background: var(--jfw-panel);
    border: 2px solid var(--jfw-gold);
    border-radius: 10px;
    padding: 0.4rem 1.2rem;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--jfw-gold);
    letter-spacing: 0.2em;
    margin-bottom: 0.75rem;
}

.lobby-waiting-text[b-o2lbgbngq2] {
    color: var(--jfw-muted);
    font-size: 1rem;
    margin: 0;
}

.lobby-players[b-o2lbgbngq2] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.lobby-player[b-o2lbgbngq2] {
    background: var(--jfw-panel);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 500;
}

.lobby-player-me[b-o2lbgbngq2] {
    border: 1px solid var(--jfw-red);
    background: rgba(226, 0, 26, 0.08);
}

.lobby-player-icon[b-o2lbgbngq2] {
    font-size: 1.3rem;
}

.lobby-player-name[b-o2lbgbngq2] {
    flex: 1;
}

.lobby-you-tag[b-o2lbgbngq2] {
    background: var(--jfw-red);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lobby-powerups[b-o2lbgbngq2] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.lobby-powerups-title[b-o2lbgbngq2] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--jfw-muted);
    text-align: center;
}

.powerup-info-card[b-o2lbgbngq2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
}

.powerup-info-card.powerup-shield[b-o2lbgbngq2] {
    background: rgba(21, 101, 192, 0.2);
    border: 1px solid var(--jfw-shield-blue);
}

.powerup-info-card.powerup-flamethrower[b-o2lbgbngq2] {
    background: rgba(245, 168, 0, 0.15);
    border: 1px solid var(--jfw-gold);
}

.powerup-info-icon[b-o2lbgbngq2] {
    font-size: 1.6rem;
    line-height: 1;
}

.powerup-info-body[b-o2lbgbngq2] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.powerup-info-name[b-o2lbgbngq2] {
    font-size: 0.95rem;
    font-weight: 700;
}

.powerup-info-card.powerup-shield .powerup-info-name[b-o2lbgbngq2] {
    color: #64b5f6;
}

.powerup-info-card.powerup-flamethrower .powerup-info-name[b-o2lbgbngq2] {
    color: var(--jfw-gold);
}

.powerup-info-how[b-o2lbgbngq2],
.powerup-info-effect[b-o2lbgbngq2] {
    font-size: 0.78rem;
    color: var(--jfw-muted);
}

/* === Question View === */
.game-question[b-o2lbgbngq2] {
    position: relative;
    justify-content: flex-start;
    gap: 1rem;
    padding: 1rem;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.question-scroll-fade[b-o2lbgbngq2] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    background: linear-gradient(to bottom, transparent, var(--jfw-dark));
    pointer-events: none;
}

.question-scroll-area[b-o2lbgbngq2] {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.question-top-bar[b-o2lbgbngq2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
}

.timer-container[b-o2lbgbngq2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.timer-number[b-o2lbgbngq2] {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--jfw-gold);
    line-height: 1;
    transition: color 0.3s;
}

.timer-number.timer-urgent[b-o2lbgbngq2] {
    color: var(--jfw-red);
    animation: pulse-timer-b-o2lbgbngq2 0.5s ease-in-out infinite alternate;
}

@keyframes pulse-timer-b-o2lbgbngq2 {
    from { opacity: 1; }
    to { opacity: 0.5; }
}

.timer-label[b-o2lbgbngq2] {
    font-size: 0.65rem;
    color: var(--jfw-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.question-meta[b-o2lbgbngq2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.round-badge[b-o2lbgbngq2] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--jfw-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hp-bar-mini-track[b-o2lbgbngq2] {
    width: 100%;
    max-width: 140px;
    height: 8px;
    background: #444;
    border-radius: 4px;
    overflow: hidden;
}

.hp-bar-mini-fill[b-o2lbgbngq2] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease, background 0.5s ease;
}

.hp-text-mini[b-o2lbgbngq2] {
    font-size: 0.8rem;
    color: var(--jfw-muted);
    font-weight: 600;
}

.paused-banner[b-o2lbgbngq2] {
    width: 100%;
    border-radius: 8px;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    background: rgba(245, 168, 0, 0.15);
    border: 1px solid var(--jfw-gold);
    color: var(--jfw-gold);
}

.powerup-banner[b-o2lbgbngq2] {
    width: 100%;
    border-radius: 8px;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    animation: anim-powerup-banner-glow-b-o2lbgbngq2 2s ease-in-out infinite;
}

.powerup-banner.powerup-shield[b-o2lbgbngq2] {
    background: rgba(21, 101, 192, 0.2);
    border: 1px solid var(--jfw-shield-blue);
    color: #64b5f6;
}

.powerup-banner.powerup-flamethrower[b-o2lbgbngq2] {
    background: rgba(245, 168, 0, 0.15);
    border: 1px solid var(--jfw-gold);
    color: var(--jfw-gold);
}

.question-category-badge[b-o2lbgbngq2] {
    align-self: center;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(245, 168, 0, 0.15);
    color: var(--jfw-gold);
}

.question-text[b-o2lbgbngq2] {
    width: 100%;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    padding: 0.75rem;
    background: var(--jfw-panel);
    border-radius: var(--jfw-radius);
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.question-image[b-o2lbgbngq2] {
    display: block;
    max-width: 220px;
    max-height: 220px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--jfw-radius);
    padding: 0.5rem;
}

.answer-grid[b-o2lbgbngq2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 0.75rem;
    width: 100%;
}

.answer-btn[b-o2lbgbngq2] {
    background: var(--jfw-panel);
    color: #fff;
    border: 2px solid #444;
    border-radius: var(--jfw-radius);
    padding: 1rem 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 72px;
    text-align: center;
    line-height: 1.35;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.answer-btn:active:not(:disabled)[b-o2lbgbngq2] {
    transform: scale(0.96);
}

.answer-btn:disabled[b-o2lbgbngq2] {
    cursor: not-allowed;
    opacity: 0.5;
}

.answer-btn.answer-selected[b-o2lbgbngq2] {
    background: rgba(226, 0, 26, 0.15);
    border-color: var(--jfw-red);
    color: #fff;
    opacity: 1;
}

/* === Answered View === */
.game-answered[b-o2lbgbngq2] {
    justify-content: center;
    text-align: center;
    gap: 1rem;
}

.answered-icon[b-o2lbgbngq2] {
    font-size: 4rem;
}

.answered-heading[b-o2lbgbngq2] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.answered-sub[b-o2lbgbngq2] {
    color: var(--jfw-muted);
    font-size: 1rem;
    margin: 0;
}

.answered-progress[b-o2lbgbngq2] {
    background: var(--jfw-panel);
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    color: var(--jfw-muted);
}

.answered-count[b-o2lbgbngq2] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--jfw-gold);
}

/* === Round Result View === */
.game-round-result[b-o2lbgbngq2] {
    justify-content: center;
    gap: 1rem;
    text-align: center;
}

.result-icon[b-o2lbgbngq2] {
    font-size: 4rem;
    display: inline-block;
    animation: anim-bounce-in-b-o2lbgbngq2 0.5s ease;
}

.result-heading[b-o2lbgbngq2] {
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
}

.result-heading.result-correct[b-o2lbgbngq2] {
    color: #4caf50;
}

.result-heading.result-wrong[b-o2lbgbngq2] {
    color: var(--jfw-red);
}

.hp-change[b-o2lbgbngq2] {
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0.4rem 1.2rem;
    border-radius: 8px;
    animation: anim-slide-up-in-b-o2lbgbngq2 0.4s ease 0.3s both;
}

.hp-change.hp-lost[b-o2lbgbngq2] {
    color: var(--jfw-red);
    background: rgba(226, 0, 26, 0.1);
}

.hp-change.hp-safe[b-o2lbgbngq2] {
    color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
}

.result-hp-display[b-o2lbgbngq2] {
    width: 100%;
    background: var(--jfw-panel);
    border-radius: var(--jfw-radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.result-hp-label[b-o2lbgbngq2] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--jfw-muted);
}

.result-hp-value[b-o2lbgbngq2] {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
}

.result-hp-value.hp-critical[b-o2lbgbngq2] {
    color: var(--jfw-red);
    animation: pulse-timer-b-o2lbgbngq2 0.8s ease-in-out infinite alternate;
}

.result-hp-bar-track[b-o2lbgbngq2] {
    width: 100%;
    height: 10px;
    background: #444;
    border-radius: 5px;
    overflow: hidden;
}

.result-hp-bar-fill[b-o2lbgbngq2] {
    height: 100%;
    border-radius: 5px;
    transition: width 0.6s ease, background 0.6s ease;
}

.powerup-gained[b-o2lbgbngq2] {
    border-radius: 10px;
    padding: 0.7rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 700;
    width: 100%;
    text-align: center;
    animation: anim-pop-in-b-o2lbgbngq2 0.5s ease 0.6s both;
}

.powerup-gained.powerup-shield[b-o2lbgbngq2] {
    background: rgba(21, 101, 192, 0.2);
    border: 1px solid var(--jfw-shield-blue);
    color: #64b5f6;
}

.powerup-gained.powerup-flamethrower[b-o2lbgbngq2] {
    background: rgba(245, 168, 0, 0.15);
    border: 1px solid var(--jfw-gold);
    color: var(--jfw-gold);
}

.result-waiting[b-o2lbgbngq2] {
    color: var(--jfw-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* === Eliminated View === */
.game-eliminated[b-o2lbgbngq2] {
    justify-content: flex-start;
    gap: 1rem;
    padding-top: 2rem;
}

.eliminated-skull[b-o2lbgbngq2] {
    font-size: 4rem;
    text-align: center;
    display: inline-block;
    animation: anim-skull-wobble-b-o2lbgbngq2 0.7s ease;
}

.eliminated-heading[b-o2lbgbngq2] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--jfw-muted);
    text-align: center;
    margin: 0;
}

.ranking-panel[b-o2lbgbngq2] {
    width: 100%;
    background: var(--jfw-panel);
    border-radius: var(--jfw-radius);
    padding: 1rem;
}

.ranking-title[b-o2lbgbngq2] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--jfw-gold);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rank-row[b-o2lbgbngq2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #3a3a3a;
    font-size: 0.95rem;
}

.rank-row:last-child[b-o2lbgbngq2] {
    border-bottom: none;
}

.rank-row.rank-me[b-o2lbgbngq2] {
    color: var(--jfw-gold);
    font-weight: 700;
}

.rank-row.rank-out[b-o2lbgbngq2] {
    opacity: 0.45;
}

.rank-pos[b-o2lbgbngq2] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--jfw-muted);
    min-width: 28px;
}

.rank-name[b-o2lbgbngq2] {
    flex: 1;
}

.rank-hp[b-o2lbgbngq2] {
    font-size: 0.85rem;
    color: var(--jfw-muted);
}

/* === Game Over View === */
.game-over[b-o2lbgbngq2] {
    justify-content: center;
    text-align: center;
    gap: 1rem;
}

.gameover-icon[b-o2lbgbngq2] {
    font-size: 5rem;
}

.gameover-heading[b-o2lbgbngq2] {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.game-won .gameover-heading[b-o2lbgbngq2] {
    color: var(--jfw-gold);
}

.gameover-sub[b-o2lbgbngq2] {
    font-size: 1.2rem;
    color: var(--jfw-muted);
    margin: 0;
}

.gameover-actions[b-o2lbgbngq2] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.btn-gameover[b-o2lbgbngq2] {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn-gameover:active[b-o2lbgbngq2] {
    transform: scale(0.97);
}

.btn-gameover-primary[b-o2lbgbngq2] {
    background: var(--jfw-red);
    color: #fff;
    border: none;
}

.btn-gameover-secondary[b-o2lbgbngq2] {
    background: transparent;
    color: var(--jfw-muted);
    border: 2px solid #444;
}

/* === Stage 7: Animations === */

@keyframes anim-bounce-in-b-o2lbgbngq2 {
    0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
    60%  { transform: scale(1.25) rotate(5deg); opacity: 1; }
    80%  { transform: scale(0.9) rotate(-2deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes anim-slide-up-in-b-o2lbgbngq2 {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes anim-pop-in-b-o2lbgbngq2 {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes anim-powerup-banner-glow-b-o2lbgbngq2 {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.78; transform: scale(1.01); }
}

@keyframes anim-skull-wobble-b-o2lbgbngq2 {
    0%   { transform: rotate(0); }
    20%  { transform: rotate(-12deg); }
    40%  { transform: rotate(10deg); }
    60%  { transform: rotate(-7deg); }
    80%  { transform: rotate(5deg); }
    100% { transform: rotate(0); }
}

@keyframes anim-trophy-bounce-b-o2lbgbngq2 {
    from { transform: translateY(0); }
    to   { transform: translateY(-12px); }
}

@keyframes anim-winner-text-glow-b-o2lbgbngq2 {
    0%, 100% { text-shadow: 0 0 10px rgba(245,168,0,0.4); }
    50%       { text-shadow: 0 0 30px rgba(245,168,0,1); }
}

@keyframes anim-hp-low-pulse-b-o2lbgbngq2 {
    from { opacity: 1; }
    to   { opacity: 0.4; }
}

/* Low HP bar pulse */
.hp-bar-mini-fill.hp-bar-low[b-o2lbgbngq2] {
    animation: anim-hp-low-pulse-b-o2lbgbngq2 0.8s ease-in-out infinite alternate;
}

/* Game won: icon bounces, heading glows */
.game-won .gameover-icon[b-o2lbgbngq2] {
    display: inline-block;
    animation: anim-trophy-bounce-b-o2lbgbngq2 1s ease-in-out infinite alternate;
}

.game-won .gameover-heading[b-o2lbgbngq2] {
    animation: anim-winner-text-glow-b-o2lbgbngq2 1.5s ease-in-out infinite;
}
/* /Components/Pages/Learn/Flashcards.razor.rz.scp.css */
.learn-loading[b-xmcwoc85u1],
.learn-done[b-xmcwoc85u1],
.learn-session[b-xmcwoc85u1] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

.learn-loading[b-xmcwoc85u1] {
    justify-content: center;
    color: var(--jfw-muted);
    font-size: 1rem;
}

.learn-back-link[b-xmcwoc85u1] {
    align-self: flex-start;
    color: var(--jfw-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.3rem 0;
    -webkit-tap-highlight-color: transparent;
}

.learn-back-link:active[b-xmcwoc85u1] {
    opacity: 0.6;
}

/* === Done View === */
.learn-done[b-xmcwoc85u1] {
    justify-content: center;
    text-align: center;
    gap: 1rem;
}

.learn-done-icon[b-xmcwoc85u1] {
    font-size: 4rem;
}

.learn-done-heading[b-xmcwoc85u1] {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.learn-done-sub[b-xmcwoc85u1] {
    color: var(--jfw-muted);
    font-size: 1rem;
    margin: 0;
}

/* === Session View === */
.learn-session[b-xmcwoc85u1] {
    justify-content: flex-start;
    gap: 1.25rem;
}

.learn-top-bar[b-xmcwoc85u1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
}

.learn-progress[b-xmcwoc85u1] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--jfw-muted);
}

.learn-category-badge[b-xmcwoc85u1] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(245, 168, 0, 0.15);
    color: var(--jfw-gold);
}

.learn-card[b-xmcwoc85u1] {
    width: 100%;
    background: var(--jfw-panel);
    border-radius: var(--jfw-radius);
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 0 24px rgba(226, 0, 26, 0.15);
}

.learn-question-text[b-xmcwoc85u1] {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.learn-question-image[b-xmcwoc85u1] {
    display: block;
    max-width: 220px;
    max-height: 220px;
    background: #fff;
    border-radius: var(--jfw-radius);
    padding: 0.5rem;
}

.learn-answer-grid[b-xmcwoc85u1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 0.75rem;
    width: 100%;
}

.learn-answer-btn[b-xmcwoc85u1] {
    background: #3a3a3a;
    color: #fff;
    border: 2px solid #444;
    border-radius: var(--jfw-radius);
    padding: 1rem 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 72px;
    text-align: center;
    line-height: 1.35;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.learn-answer-btn:active:not(:disabled)[b-xmcwoc85u1] {
    transform: scale(0.96);
}

.learn-answer-btn:disabled[b-xmcwoc85u1] {
    cursor: not-allowed;
}

.learn-answer-btn-correct[b-xmcwoc85u1] {
    background: rgba(76, 175, 80, 0.15);
    border-color: #4caf50;
    color: #fff;
    font-weight: 700;
    opacity: 1;
}

.learn-answer-btn-wrong[b-xmcwoc85u1] {
    background: rgba(226, 0, 26, 0.15);
    border-color: var(--jfw-red);
    color: #fff;
    opacity: 1;
}

.learn-rate-label[b-xmcwoc85u1] {
    color: var(--jfw-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.learn-rate-grid[b-xmcwoc85u1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    width: 100%;
}

.btn-rate[b-xmcwoc85u1] {
    border: none;
    border-radius: 10px;
    padding: 0.9rem 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn-rate:active[b-xmcwoc85u1] {
    transform: scale(0.96);
}

.btn-rate-again[b-xmcwoc85u1] {
    background: #b71c1c;
}

.btn-rate-hard[b-xmcwoc85u1] {
    background: #8a5a00;
}

.btn-rate-good[b-xmcwoc85u1] {
    background: #2e7d32;
}

.btn-rate-easy[b-xmcwoc85u1] {
    background: #1565c0;
}
/* /Components/Pages/Master/Master.razor.rz.scp.css */
/* === Master (Beamer) base === */
:root[b-6bpgy4m8c3] {
    --master-font-base: 1.4rem;
}

.master-no-session[b-6bpgy4m8c3],
.master-lobby[b-6bpgy4m8c3],
.master-question[b-6bpgy4m8c3],
.master-round-result[b-6bpgy4m8c3],
.master-game-over[b-6bpgy4m8c3] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    width: 100%;
    font-size: var(--master-font-base);
}

/* === Shared Controls === */
.master-controls[b-6bpgy4m8c3] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
}

.master-btn[b-6bpgy4m8c3] {
    border: none;
    border-radius: var(--jfw-radius);
    padding: 0.9rem 2rem;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.2s;
}

.master-btn:active:not(:disabled)[b-6bpgy4m8c3] {
    transform: scale(0.97);
}

.master-btn:disabled[b-6bpgy4m8c3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.master-btn-primary[b-6bpgy4m8c3] {
    background: var(--jfw-red);
    color: #fff;
    box-shadow: 0 0 20px rgba(226, 0, 26, 0.3);
}

.master-btn-primary:hover:not(:disabled)[b-6bpgy4m8c3] {
    background: #c0001a;
    box-shadow: 0 0 30px rgba(226, 0, 26, 0.5);
}

.master-btn-danger[b-6bpgy4m8c3] {
    background: #424242;
    color: var(--jfw-muted);
    border: 1px solid #555;
}

.master-btn-danger:hover:not(:disabled)[b-6bpgy4m8c3] {
    background: #555;
    color: #fff;
}

.master-section-title[b-6bpgy4m8c3] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--jfw-gold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1rem;
}

.master-hint-text[b-6bpgy4m8c3] {
    color: var(--jfw-muted);
    font-size: 1rem;
    margin: 0;
    text-align: center;
}

/* === No Session View === */
.master-no-session[b-6bpgy4m8c3] {
    gap: 1rem;
    text-align: center;
}

.master-logo[b-6bpgy4m8c3] {
    font-size: 6rem;
    line-height: 1;
}

.master-main-title[b-6bpgy4m8c3] {
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    margin: 0;
}

.master-sub[b-6bpgy4m8c3] {
    color: var(--jfw-muted);
    font-size: 1.2rem;
    margin: 0 0 1rem;
}

.master-session-config[b-6bpgy4m8c3] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0.5rem 0;
}

.master-config-label[b-6bpgy4m8c3] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--jfw-muted);
    text-align: left;
}

.master-config-input[b-6bpgy4m8c3] {
    background: var(--jfw-panel, #2d2d2d);
    border: 1px solid #555;
    border-radius: var(--jfw-radius);
    color: #fff;
    padding: 0.6rem 0.8rem;
    font-size: 1.1rem;
    width: 10rem;
}

.master-config-input:focus[b-6bpgy4m8c3] {
    outline: none;
    border-color: var(--jfw-gold);
}

/* === Lobby View === */
.master-lobby[b-6bpgy4m8c3] {
    justify-content: space-between;
    padding: 3rem 2rem;
    gap: 2rem;
    width: 100%;
}

.master-room-code-section[b-6bpgy4m8c3] {
    text-align: center;
}

.master-room-label[b-6bpgy4m8c3] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--jfw-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
}

.master-room-code[b-6bpgy4m8c3] {
    font-size: clamp(4rem, 12vw, 8rem);
    font-weight: 900;
    color: var(--jfw-gold);
    letter-spacing: 0.25em;
    line-height: 1;
    text-shadow: 0 0 40px rgba(245, 168, 0, 0.4);
}

.master-room-hint[b-6bpgy4m8c3] {
    font-size: 1.1rem;
    color: var(--jfw-muted);
    margin-top: 0.75rem;
}

.master-lobby-players[b-6bpgy4m8c3] {
    width: 100%;
    text-align: center;
}

.master-player-grid[b-6bpgy4m8c3] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.master-lobby-player-card[b-6bpgy4m8c3] {
    background: var(--jfw-panel);
    border-radius: var(--jfw-radius);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid #444;
}

.master-player-avatar[b-6bpgy4m8c3] {
    font-size: 2rem;
}

.master-player-name-lg[b-6bpgy4m8c3] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}

.master-waiting-hint[b-6bpgy4m8c3] {
    color: var(--jfw-muted);
    font-size: 1.2rem;
    text-align: center;
}

/* === Question View === */
.master-question[b-6bpgy4m8c3] {
    justify-content: flex-start;
    padding: 1.5rem 2rem;
    gap: 1.5rem;
    width: 100%;
}

.master-question-header[b-6bpgy4m8c3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.master-round-badge[b-6bpgy4m8c3] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--jfw-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.master-timer[b-6bpgy4m8c3] {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 900;
    color: var(--jfw-gold);
    line-height: 1;
    min-width: 2.5ch;
    text-align: center;
    transition: color 0.3s;
}

.master-timer.master-timer-urgent[b-6bpgy4m8c3] {
    color: var(--jfw-red);
    animation: master-pulse-b-6bpgy4m8c3 0.5s ease-in-out infinite alternate;
}

@keyframes master-pulse-b-6bpgy4m8c3 {
    from { opacity: 1; }
    to { opacity: 0.4; }
}

.master-answered-info[b-6bpgy4m8c3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    min-width: 150px;
}

.master-answered-count[b-6bpgy4m8c3] {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--jfw-gold);
    line-height: 1;
}

.master-answered-label[b-6bpgy4m8c3] {
    font-size: 0.9rem;
    color: var(--jfw-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.master-progress-bar-track[b-6bpgy4m8c3] {
    width: 100%;
    max-width: 200px;
    height: 10px;
    background: #444;
    border-radius: 5px;
    overflow: hidden;
}

.master-progress-bar-fill[b-6bpgy4m8c3] {
    height: 100%;
    background: var(--jfw-gold);
    border-radius: 5px;
    transition: width 0.4s ease;
}

.master-pause-bar[b-6bpgy4m8c3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.master-btn-pause[b-6bpgy4m8c3] {
    background: var(--jfw-panel);
    color: var(--jfw-gold);
    border: 1px solid var(--jfw-gold);
    padding: 0.6rem 1.4rem;
    font-size: 1rem;
}

.master-btn-pause:hover:not(:disabled)[b-6bpgy4m8c3] {
    background: rgba(245, 168, 0, 0.15);
}

.master-paused-badge[b-6bpgy4m8c3] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--jfw-gold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    animation: master-pulse-b-6bpgy4m8c3 1.2s ease-in-out infinite alternate;
}

.master-category-badge[b-6bpgy4m8c3] {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 1rem;
    border-radius: 999px;
    background: rgba(245, 168, 0, 0.15);
    color: var(--jfw-gold);
}

.master-question-text[b-6bpgy4m8c3] {
    width: 100%;
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
    text-align: center;
    background: var(--jfw-panel);
    border-radius: var(--jfw-radius);
    padding: 1.5rem 2rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.master-question-image[b-6bpgy4m8c3] {
    display: block;
    max-width: min(320px, 40vw);
    max-height: 320px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--jfw-radius);
    padding: 0.75rem;
}

.master-answer-grid[b-6bpgy4m8c3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
}

.master-answer-option[b-6bpgy4m8c3] {
    background: var(--jfw-panel);
    border: 1px solid #444;
    border-radius: var(--jfw-radius);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.master-answer-letter[b-6bpgy4m8c3] {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--jfw-gold);
    min-width: 1.5ch;
    text-align: center;
}

.master-answer-text[b-6bpgy4m8c3] {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.35;
    overflow-wrap: break-word;
    word-break: break-word;
}

.master-player-chips[b-6bpgy4m8c3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    width: 100%;
}

.master-player-chip[b-6bpgy4m8c3] {
    background: var(--jfw-panel);
    border: 1px solid #555;
    border-radius: 30px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--jfw-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.master-player-chip.master-chip-answered[b-6bpgy4m8c3] {
    background: rgba(76, 175, 80, 0.12);
    border-color: #4caf50;
    color: #81c784;
}

.master-player-chip.master-chip-eliminated[b-6bpgy4m8c3] {
    opacity: 0.35;
}

.master-chip-check[b-6bpgy4m8c3] {
    font-size: 0.9rem;
}

/* === Round Result View === */
.master-round-result[b-6bpgy4m8c3] {
    justify-content: flex-start;
    padding: 1.5rem 2rem;
    gap: 1.5rem;
    width: 100%;
}

.master-result-header[b-6bpgy4m8c3] {
    text-align: center;
    width: 100%;
}

.master-result-title[b-6bpgy4m8c3] {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 900;
    color: var(--jfw-gold);
    margin: 0;
}

.master-correct-answer[b-6bpgy4m8c3] {
    background: rgba(76, 175, 80, 0.12);
    border: 1px solid #4caf50;
    border-radius: var(--jfw-radius);
    color: #81c784;
    padding: 0.8rem 1.5rem;
    font-size: 1.2rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.master-player-cards[b-6bpgy4m8c3] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    width: 100%;
}

.master-player-card[b-6bpgy4m8c3] {
    background: var(--jfw-panel);
    border-radius: var(--jfw-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    min-width: 160px;
    flex: 1 1 160px;
    max-width: 220px;
    border: 2px solid transparent;
    position: relative;
    transition: border-color 0.3s;
}

.master-player-card.master-card-correct[b-6bpgy4m8c3] {
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.06);
}

.master-player-card.master-card-wrong[b-6bpgy4m8c3] {
    border-color: var(--jfw-red);
    background: rgba(226, 0, 26, 0.06);
}

.master-player-card.master-card-eliminated[b-6bpgy4m8c3] {
    border-color: var(--jfw-eliminated);
    background: var(--jfw-eliminated);
    opacity: 0.6;
}

.master-card-eliminated-overlay[b-6bpgy4m8c3] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    font-size: 2rem;
    font-weight: 900;
    color: var(--jfw-muted);
    opacity: 0.6;
    pointer-events: none;
    letter-spacing: 0.1em;
}

.master-card-avatar[b-6bpgy4m8c3] {
    font-size: 2.5rem;
    line-height: 1;
}

.master-card-name[b-6bpgy4m8c3] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    word-break: break-word;
}

.master-card-result-icon[b-6bpgy4m8c3] {
    font-size: 1.6rem;
    line-height: 1;
}

.master-card-hp-bar-track[b-6bpgy4m8c3] {
    width: 100%;
    height: 12px;
    background: #444;
    border-radius: 6px;
    overflow: hidden;
}

.master-card-hp-bar-fill[b-6bpgy4m8c3] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease, background 0.6s ease;
}

.master-card-hp-text[b-6bpgy4m8c3] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--jfw-muted);
}

.master-powerup-badge[b-6bpgy4m8c3] {
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

.master-powerup-badge.master-powerup-shield[b-6bpgy4m8c3] {
    background: rgba(21, 101, 192, 0.2);
    border: 1px solid var(--jfw-shield-blue);
    color: #64b5f6;
}

.master-powerup-badge.master-powerup-flamethrower[b-6bpgy4m8c3] {
    background: rgba(245, 168, 0, 0.15);
    border: 1px solid var(--jfw-gold);
    color: var(--jfw-gold);
}

/* === Game Over View === */
.master-game-over[b-6bpgy4m8c3] {
    gap: 1.5rem;
    text-align: center;
}

.master-winner-trophy[b-6bpgy4m8c3] {
    font-size: clamp(5rem, 12vw, 8rem);
    line-height: 1;
    animation: master-trophy-bounce-b-6bpgy4m8c3 1s ease-in-out infinite alternate;
}

@keyframes master-trophy-bounce-b-6bpgy4m8c3 {
    from { transform: translateY(0); }
    to { transform: translateY(-12px); }
}

.master-winner-name[b-6bpgy4m8c3] {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    color: var(--jfw-gold);
    margin: 0;
    text-shadow: 0 0 40px rgba(245, 168, 0, 0.5);
}

.master-winner-sub[b-6bpgy4m8c3] {
    font-size: 1.8rem;
    color: var(--jfw-muted);
    margin: 0;
    font-weight: 600;
}

.master-final-ranking[b-6bpgy4m8c3] {
    width: 100%;
    max-width: 600px;
    background: var(--jfw-panel);
    border-radius: var(--jfw-radius);
    padding: 1.5rem;
    text-align: left;
}

.master-rank-row[b-6bpgy4m8c3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #3a3a3a;
    font-size: 1.2rem;
}

.master-rank-row:last-child[b-6bpgy4m8c3] {
    border-bottom: none;
}

.master-rank-row.master-rank-first[b-6bpgy4m8c3] {
    color: var(--jfw-gold);
}

.master-rank-row.master-rank-out[b-6bpgy4m8c3] {
    opacity: 0.45;
}

.master-rank-pos[b-6bpgy4m8c3] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--jfw-muted);
    min-width: 2ch;
}

.master-rank-avatar[b-6bpgy4m8c3] {
    font-size: 1.5rem;
}

.master-rank-name[b-6bpgy4m8c3] {
    flex: 1;
    font-weight: 700;
}

.master-rank-hp[b-6bpgy4m8c3] {
    font-size: 1rem;
    color: var(--jfw-muted);
    font-weight: 600;
}

/* === Stage 7: Attack & Animation Keyframes === */

@keyframes anim-attack-shake-b-6bpgy4m8c3 {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-7px); box-shadow: 0 0 22px rgba(226,0,26,0.85); }
    30%  { transform: translateX(6px); box-shadow: 0 0 22px rgba(226,0,26,0.85); }
    45%  { transform: translateX(-5px); box-shadow: 0 0 12px rgba(226,0,26,0.4); }
    60%  { transform: translateX(4px); }
    75%  { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

@keyframes anim-flamethrower-hit-b-6bpgy4m8c3 {
    0%   { transform: translateX(0) scale(1); }
    10%  { transform: translateX(-9px) scale(0.97); box-shadow: 0 0 32px rgba(255,120,0,0.9); }
    25%  { transform: translateX(8px) scale(1.02); box-shadow: 0 0 32px rgba(255,120,0,0.9); }
    40%  { transform: translateX(-7px) scale(0.98); box-shadow: 0 0 20px rgba(255,120,0,0.5); }
    55%  { transform: translateX(5px) scale(1.01); }
    70%  { transform: translateX(-3px); }
    85%  { transform: translateX(2px); }
    100% { transform: translateX(0) scale(1); }
}

@keyframes anim-shield-absorb-b-6bpgy4m8c3 {
    0%   { box-shadow: 0 0 0 rgba(21,101,192,0); }
    25%  { box-shadow: 0 0 28px rgba(21,101,192,0.95); }
    65%  { box-shadow: 0 0 18px rgba(21,101,192,0.45); }
    100% { box-shadow: 0 0 0 rgba(21,101,192,0); }
}

@keyframes anim-flamethrower-used-b-6bpgy4m8c3 {
    0%   { box-shadow: 0 0 0 rgba(245,168,0,0); }
    25%  { box-shadow: 0 0 28px rgba(245,168,0,0.85); }
    65%  { box-shadow: 0 0 16px rgba(245,168,0,0.35); }
    100% { box-shadow: 0 0 0 rgba(245,168,0,0); }
}

@keyframes anim-powerup-pop-b-6bpgy4m8c3 {
    0%   { transform: scale(0) translateY(8px); opacity: 0; }
    60%  { transform: scale(1.2) translateY(-2px); opacity: 1; }
    80%  { transform: scale(0.95) translateY(0); }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes anim-eliminate-wobble-b-6bpgy4m8c3 {
    0%   { transform: rotate(0deg) scale(1); }
    15%  { transform: rotate(-5deg) scale(1.03); filter: brightness(1.5); }
    35%  { transform: rotate(7deg) scale(0.97); filter: brightness(0.7); }
    55%  { transform: rotate(-4deg) scale(1.01); }
    75%  { transform: rotate(3deg) scale(0.99); }
    100% { transform: rotate(0deg) scale(1); }
}

@keyframes anim-winner-name-pulse-b-6bpgy4m8c3 {
    0%, 100% { text-shadow: 0 0 40px rgba(245,168,0,0.5); }
    50%       { text-shadow: 0 0 80px rgba(245,168,0,1), 0 0 40px rgba(245,168,0,0.7); }
}

/* === Animation classes === */

.master-card-attacked[b-6bpgy4m8c3] {
    animation: anim-attack-shake-b-6bpgy4m8c3 0.65s ease;
}

.master-card-flamethrower-hit[b-6bpgy4m8c3] {
    animation: anim-flamethrower-hit-b-6bpgy4m8c3 0.75s ease;
}

.master-card-shield-absorbed[b-6bpgy4m8c3] {
    animation: anim-attack-shake-b-6bpgy4m8c3 0.65s ease, anim-shield-absorb-b-6bpgy4m8c3 0.9s ease 0.1s;
}

.master-card-flamethrower-hit.master-card-shield-absorbed[b-6bpgy4m8c3] {
    animation: anim-flamethrower-hit-b-6bpgy4m8c3 0.75s ease, anim-shield-absorb-b-6bpgy4m8c3 0.9s ease 0.1s;
}

.master-card-flamethrower-used[b-6bpgy4m8c3] {
    animation: anim-flamethrower-used-b-6bpgy4m8c3 0.85s ease;
}

.master-powerup-new[b-6bpgy4m8c3] {
    animation: anim-powerup-pop-b-6bpgy4m8c3 0.5s ease 0.9s both;
}

.master-card-eliminating[b-6bpgy4m8c3] {
    animation: anim-eliminate-wobble-b-6bpgy4m8c3 0.9s ease 1.3s;
}

.master-winner-name[b-6bpgy4m8c3] {
    animation: anim-winner-name-pulse-b-6bpgy4m8c3 1.5s ease-in-out infinite;
}