/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-wuigl4g0q0] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.app-header[b-wuigl4g0q0] {
    padding: 1.1rem 1.5rem;
}

.app-logo[b-wuigl4g0q0] {
    display: inline-block;
    font-weight: 900;
    font-size: 1.35rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    background: var(--gradient-title);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px var(--color-red-deep);
}

.app-main[b-wuigl4g0q0] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#blazor-error-ui[b-wuigl4g0q0] {
    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[b-wuigl4g0q0] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-108bc835vr],
.components-reconnect-repeated-attempt-visible[b-108bc835vr],
.components-reconnect-failed-visible[b-108bc835vr],
.components-pause-visible[b-108bc835vr],
.components-resume-failed-visible[b-108bc835vr],
.components-rejoining-animation[b-108bc835vr] {
    display: none;
}

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


#components-reconnect-modal[b-108bc835vr] {
    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-108bc835vr 0.5s both;
    &[open]

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

}

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

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

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

@keyframes components-reconnect-modal-fadeInOpacity-b-108bc835vr {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-108bc835vr {
    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/CreateRoom.razor.rz.scp.css */
/* Settings-picker styles moved to Components/Shared/GameSettingsPicker.razor.css
   — this page now renders through the shared <GameSettingsPicker> component
   so "start a new game" from the end screen can reuse the exact same UI. */
/* /Components/Pages/Home.razor.rz.scp.css */
.hero[b-o642o90lm3] {
    gap: 1.75rem;
}

.hero-title[b-o642o90lm3] {
    margin: 0;
    font-weight: 900;
    font-size: clamp(2.75rem, 11vw, 5.5rem);
    letter-spacing: 0.01em;
    line-height: 1;
    background: var(--gradient-title);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-red-deep);
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.globe-wrap[b-o642o90lm3] {
    width: min(80vw, 420px);
}

.globe-art[b-o642o90lm3] {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.45));
}

.join-form[b-o642o90lm3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 22rem;
}

/* TextEntryField already carries its own margin-bottom (for callers that
   aren't inside a gap-based flex column, e.g. RoomJoin) — .join-form's own
   gap already spaces it from .cta-row, so avoid double-spacing here. */
.join-form[b-o642o90lm3]  .text-entry-field {
    margin-bottom: 0;
}

/* Create Room is Display-oriented (a settings screen meant for a TV/desktop,
   not a phone) — hide its entry point below 1280px so a phone's landing page
   only offers "Join a room", requiring an actual desktop/TV-width screen to
   create. This reads off the actual CSS viewport width, so it responds
   correctly to Chrome's "Desktop site" toggle (which changes the reported
   viewport, not just the user-agent). */
@media (max-width: 1279px) {
    .create-room-link[b-o642o90lm3] {
        display: none;
    }
}
/* /Components/Pages/RoomLobby.razor.rz.scp.css */
/* Matches .topic-heading's weight/size on the Create Room page — the two
   instructional lines around the QR code (scan hint above, room code below)
   share this treatment rather than reading as plain body text. */
.qr-hint[b-0kifym7h2l] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.qr-frame[b-0kifym7h2l] {
    max-width: 22rem;
    width: 100%;
    margin: 0 auto;
    padding: 1.25rem;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: var(--shadow-soft);
}

.room-code[b-0kifym7h2l] {
    color: var(--color-gold);
    letter-spacing: 0.2em;
}

.join-link[b-0kifym7h2l] {
    font-weight: 600;
    word-break: break-all;
    text-align: center;
}

.join-link-row[b-0kifym7h2l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
}

/* Round icon button next to the join link — swaps to a checkmark for 2s
   after a successful copy (see CopyJoinLink/ResetCopiedAfter), no separate
   toast/notice needed for feedback this small. */
.copy-button[b-0kifym7h2l] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.copy-button:hover[b-0kifym7h2l] {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

.copy-button img[b-0kifym7h2l] {
    width: 1.1rem;
    height: 1.1rem;
}

/* Display is a TV/monitor with room to spare — split the QR/join info from
   the player list + start button instead of stacking everything in one
   narrow column. */
.room-columns[b-0kifym7h2l] {
    display: flex;
    width: 100%;
    text-align: left;
}

.room-column[b-0kifym7h2l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0 2rem;
    text-align: center;
}

.room-column + .room-column[b-0kifym7h2l] {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* .btn-pill has no margin of its own, and a lone button following a
   .cta-row (which only adds gap *between* its own children) otherwise sits
   flush against it with no breathing room. */
.btn-pill.ghost-danger[b-0kifym7h2l] {
    margin-top: 0.75rem;
}

@media (max-width: 700px) {
    .room-columns[b-0kifym7h2l] {
        flex-direction: column;
    }

    .room-column + .room-column[b-0kifym7h2l] {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 1.5rem;
        margin-top: 0.5rem;
    }
}
/* /Components/Shared/CategoryIcon.razor.rz.scp.css */
/* Size-override modifier classes (passed via CssClass) — each targets the
   <img> this component itself renders. Consolidated from what were 2
   identical copies (PlayerRound and the mobile/category demo page) once
   CategoryIcon centralized the actual <img>. */

/* Player's own picking screen, and the mobile demo's equivalent — .panel is
   much narrower than .stage, so .choice-icon's own clamp() (which scales
   against the full viewport) overshoots and forces a scroll without this. */
.category-icon[b-jyvhl3eqda] {
    width: clamp(2.6rem, 6vw, 3.2rem);
    height: clamp(2.6rem, 6vw, 3.2rem);
}

/* GameSettingsPicker's dense topic grid — icon sits inside a colored
   .icon-badge circle (5 per row), so it needs to shrink to a fraction of
   that circle rather than the grid's normal full size. */
.choice-icon.compact[b-jyvhl3eqda] {
    width: 55%;
    height: 55%;
}
/* /Components/Shared/ChoiceCard.razor.rz.scp.css */
.choice-card[b-vkfm4dc7gs] {
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.choice-card.clickable[b-vkfm4dc7gs] {
    cursor: pointer;
}

.choice-card.selected[b-vkfm4dc7gs] {
    border-color: var(--color-ocean);
    box-shadow: 0 0 0 2px var(--color-ocean) inset;
    transform: translateY(-3px);
}

.choice-card.compact[b-vkfm4dc7gs] {
    padding: clamp(0.6rem, 1.2vw, 1.2rem) clamp(0.4rem, 0.8vw, 0.8rem);
    gap: clamp(0.25rem, 0.5vw, 0.5rem);
}

.choice-label[b-vkfm4dc7gs] {
    font-weight: 700;
    font-size: clamp(1rem, 1.6vw, 1.6rem);
}

.choice-card.compact .choice-label[b-vkfm4dc7gs] {
    font-size: clamp(0.7rem, 1vw, 0.9rem);
    text-align: center;
}

/* A player's claim on a country: flag, then a dimming layer marking it
   unavailable, then a big colored numbered "coin" (matching the physical
   game's tiles) stamped centered on top. */
.flag-wrap[b-vkfm4dc7gs] {
    position: relative;
    display: inline-flex;
    /* Explicit height matching .choice-flag's rendered height (its 4:3 SVG
       aspect ratio: width * 0.75) — gives .pick-coin's height:80% a real,
       non-auto value to resolve against, so it stays truly relative to the
       flag's actual size instead of a second hand-tuned number. */
    height: clamp(3rem, 6vw, 7.5rem);
}

.flag-overlay[b-vkfm4dc7gs] {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 20, 0.62);
    border-radius: 4px;
}

.pick-coin[b-vkfm4dc7gs] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 80%;
    aspect-ratio: 1 / 1;
    width: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    /* ~45% of the coin's own diameter (80% of flag height) — font-size can't
       reference an element's own box size directly, so this is that ratio
       pre-multiplied through by hand. */
    font-size: clamp(1.1rem, 2.2vw, 2.7rem);
    color: #ffffff;
    border: 3px solid rgba(255, 255, 255, 0.85);
    box-shadow: var(--shadow-soft);
}

/* Display's spectator variant — half the size, no dim overlay behind it
   (see CompactPick on ChoiceCard), so the flag stays mostly visible instead
   of being dominated by the claim marker. */
.pick-coin.compact-pick[b-vkfm4dc7gs] {
    height: 40%;
    font-size: clamp(0.6rem, 1.1vw, 1.35rem);
    border-width: 2px;
}
/* /Components/Shared/ChoiceGrid.razor.rz.scp.css */
/* Column count is set inline per-instance; rows fall out naturally from
   however many cards are passed in (6 cards / 3 cols = 3x2, 3 cards = 3x1). */
.choice-grid[b-x946q8xs09] {
    display: grid;
    gap: clamp(1rem, 2vw, 2rem);
    width: 100%;
    margin: 1.5rem 0 2rem;
}

.choice-grid.compact[b-x946q8xs09] {
    gap: clamp(0.5rem, 1vw, 1rem);
    margin: 0.5rem 0 1rem;
}
/* /Components/Shared/CoinPicker.razor.rz.scp.css */
.coin-picker-backdrop[b-o5dqk4rin5] {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 20, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 50;
}

.coin-picker-sheet[b-o5dqk4rin5] {
    width: 100%;
    max-width: 22rem;
    background: rgba(20, 30, 45, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-soft-hover);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.coin-picker-title[b-o5dqk4rin5] {
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
    text-align: center;
}

.coin-picker-grid[b-o5dqk4rin5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
}

.coin-picker-coin[b-o5dqk4rin5] {
    aspect-ratio: 1 / 1;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    color: #ffffff;
    font-weight: 900;
    font-size: 1.5rem;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.coin-picker-coin:hover[b-o5dqk4rin5] {
    transform: scale(1.08);
}
/* /Components/Shared/CountryFlag.razor.rz.scp.css */
/* Size-override modifier classes (passed via CssClass) — each targets the
   <img> this component itself renders, so they have to live here rather
   than in whichever page/component sets CssClass. Consolidated from what
   were 3 identical copies (PlayerRound, and the mobile/country + mobile/
   category demo pages) once CountryFlag centralized the actual <img>. */

/* Player's own picking screen, and the mobile demo's equivalent — .panel is
   much narrower than .stage, so .choice-flag's own clamp() (which scales
   against the full viewport) overshoots and forces a scroll without this. */
.country-flag[b-7qh99bxwxs] {
    width: clamp(3.2rem, 14vw, 5rem);
    height: auto;
}

/* Reveal's big spotlight card and the event-result card (both rendered
   inside RevealOverlay) — bigger than the base .choice-flag
   (clamp(4rem,8vw,10rem)), this is the dramatic reveal moment, not a small
   grid slot. RevealOverlay.razor.css overrides ChoiceCard's .flag-wrap
   height to match, so the pick-coin (sized relative to it) stays correctly
   proportioned on this bigger flag. */
.spotlight-flag[b-7qh99bxwxs] {
    width: clamp(8rem, 18vw, 16rem);
}
/* /Components/Shared/DisplayRound.razor.rz.scp.css */
/* Starts invisible — .revealed is added one rank at a time (see
   RunRevealAnimation) so the sort into place-order reads as a staged reveal
   instead of an instant, hard-to-follow swap. */
.reveal-card[b-yuqt4gzc1r] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(12px) scale(0.94);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal-card.revealed[b-yuqt4gzc1r] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.points-badge[b-yuqt4gzc1r] {
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.9rem;
    box-shadow: var(--shadow-soft);
}

.spotlight-rank[b-yuqt4gzc1r] {
    font-size: clamp(1.2rem, 2vw, 1.75rem);
    font-weight: 800;
    opacity: 0.7;
}

.spotlight-value[b-yuqt4gzc1r] {
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    font-weight: 800;
    background: var(--gradient-warm);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Rendered (but invisible) as soon as its RevealOverlay mounts, not only once
   spotlightShowPick flips true — reserves its line in the spotlight card's
   layout from the first frame so revealing the score fades it in place
   instead of growing the card (a size change mid-popup reads as janky). */
.spotlight-score[b-yuqt4gzc1r] {
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 800;
    color: var(--color-success);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.spotlight-score.visible[b-yuqt4gzc1r] {
    opacity: 1;
    transform: scale(1);
}

/* Same reveal-scrim/reveal-spotlight treatment reused for the category-chosen
   moment (CategoryChoice -> CountryPicking) — square instead of the flag's
   4:3, so no .flag-wrap override needed like .spotlight-flag has. */
.category-popout-icon[b-yuqt4gzc1r] {
    width: clamp(6rem, 14vw, 11rem);
    height: clamp(6rem, 14vw, 11rem);
}

/* Event 2 incorrect only — distinguishes the two reveal stages (the right
   answer, then what the player actually clicked instead). */
.spotlight-caption[b-yuqt4gzc1r] {
    font-size: clamp(0.9rem, 1.4vw, 1.15rem);
    font-weight: 600;
    opacity: 0.75;
}

/* @key'd on which country is currently shown (target vs chosen) — Blazor
   tears down and recreates this element when the key changes, retriggering
   the pop animation for the swap instead of a silent attribute patch.
   reveal-spotlight-pop is defined in RevealOverlay.razor.css but keyframes
   aren't scoped by Blazor's CSS isolation, so the name is reachable here. */
.spotlight-swap[b-yuqt4gzc1r] {
    animation: reveal-spotlight-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* /Components/Shared/GameSettingsPicker.razor.rz.scp.css */
.settings-section[b-psr4b242ev] {
    width: 100%;
    margin: 1.25rem 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-section h2[b-psr4b242ev] {
    margin-bottom: 0.25rem;
}

/* Game Mode + Language side by side (was two full-width stacked sections) —
   saves enough vertical space on shorter/1440p viewports to avoid an extra
   scroll before reaching the category grid. Wraps to stacked on narrow
   screens since each column's own .settings-row already wraps internally. */
.settings-columns[b-psr4b242ev] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
}

.settings-column[b-psr4b242ev] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 16rem;
}

/* Two-tier type scale within a settings-section: h2 (default, largest) >
   .topic-heading (group label, smaller). The third tier — selection count —
   lives in the floating .rounds-counter instead of an inline subtitle. */
.topic-group[b-psr4b242ev] {
    width: 100%;
    text-align: left;
    margin-top: 1.25rem;
}

.topic-heading[b-psr4b242ev] {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--color-text);
}

/* Colored circle sitting behind the (white-stroke) category icon, so the
   otherwise flat-white icon reads with some identity, similar in spirit to
   how flags carry their own color. Background color is computed per-topic
   (see GenerateTopicColor) and set inline per-card. */
.icon-badge[b-psr4b242ev] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(2.25rem, 4.5vw, 3.5rem);
    height: clamp(2.25rem, 4.5vw, 3.5rem);
    border-radius: 50%;
    box-shadow: var(--shadow-soft);
}

/* Pinned to .stage's visible bottom-right corner while its content scrolls.
   position:absolute doesn't do this: its containing block is .stage's full
   scrollable content box (which grows with the category list), not the
   clipped viewport, so the badge just sat at the bottom of all the content
   instead of the bottom of what's on screen. position:sticky anchors to the
   nearest scrolling ancestor's actual viewport (.stage, via overflow-y:auto),
   which is what we want; align-self pushes it to the right since .stage is a
   centered flex column. */
.rounds-counter[b-psr4b242ev] {
    position: sticky;
    bottom: 1.25rem;
    align-self: flex-end;
    background: rgba(20, 20, 25, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.1rem;
    font-weight: 700;
    font-size: 1.05rem;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(4px);
}

/* Once the count reaches what's required, flip the badge to the same
   status-green used for "Ready" elsewhere in the app. */
.rounds-counter.complete[b-psr4b242ev] {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-bg-deep);
}
/* /Components/Shared/PlayerList.razor.rz.scp.css */
/* Moved here from RoomLobby.razor.css when the <ul> markup was extracted
   into this component — these rules target elements PlayerList itself now
   renders, not RoomLobby. */

/* Groups the color dot with the name as one flex item, so .item-list li's
   justify-content:space-between still pushes a second item (e.g. "(you)")
   to the far right instead of splitting the dot away from the name. */
.player-name[b-rzr9ugrjxj] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.player-dot[b-rzr9ugrjxj] {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.ready-badge[b-rzr9ugrjxj] {
    color: var(--color-success);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}
/* /Components/Shared/RevealOverlay.razor.rz.scp.css */
/* Moved here from DisplayRound.razor.css when the scrim/spotlight markup was
   extracted into its own component — Blazor's CSS isolation scopes a rule to
   whichever .razor file the element is actually authored in, not wherever
   its content ends up nested, so these rules stopped matching once the
   <div class="reveal-scrim"><div class="reveal-spotlight"> wrapper moved
   into this file. Left behind in DisplayRound.razor.css, they silently
   became dead CSS — the wrapper rendered as a plain unstyled/unpositioned
   block, which is why the reveal spotlight and category popout started
   showing up as a flat block below the grid instead of a centered overlay. */

/* Full-stage dimming layer behind a rank's spotlight — positioned relative
   to .stage (the nearest positioned ancestor), matching how .rounds-counter
   already anchors to .stage rather than the page. */
.reveal-scrim[b-tsycepwmxp] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 10, 0.78);
    border-radius: 1.5rem;
    z-index: 5;
    animation: reveal-scrim-in-b-tsycepwmxp 0.3s ease;
}

@keyframes reveal-scrim-in-b-tsycepwmxp {
    from { opacity: 0; }
    to { opacity: 1; }
}

.reveal-spotlight[b-tsycepwmxp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-soft-hover);
    animation: reveal-spotlight-pop-b-tsycepwmxp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes reveal-spotlight-pop-b-tsycepwmxp {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: scale(1); }
}

/* .flag-wrap is ChoiceCard's own template — reached via ::deep since it's a
   grandchild component (ChoiceCard, nested inside this overlay's
   ChildContent) rather than something this file renders directly. Bigger
   than the base .choice-flag (clamp(4rem,8vw,10rem)) sized flag-wrap so
   .pick-coin (sized relative to it) stays correctly proportioned on the
   bigger spotlight flag (see CountryFlag.razor.css's .spotlight-flag). */
.reveal-spotlight[b-tsycepwmxp]  .flag-wrap {
    height: clamp(6rem, 13.5vw, 12rem);
}
/* /Components/Shared/ScoreboardChart.razor.rz.scp.css */
.score-chart[b-q7c4si3y99] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    margin: 2rem 0 2.5rem;
}

.score-column[b-q7c4si3y99] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    max-width: 11rem;
}

/* Plain text-color (not player-colored) — same "text never wears the data
   color" rule the player names follow. Same size as .score-value, sitting
   right above it. */
.score-rank[b-q7c4si3y99] {
    font-size: clamp(1.4rem, 2.4vw, 2.25rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02em;
}

.score-value[b-q7c4si3y99] {
    font-size: clamp(1.4rem, 2.4vw, 2.25rem);
    font-weight: 900;
}

.score-tube-track[b-q7c4si3y99] {
    width: 100%;
    height: clamp(10rem, 32vh, 26rem);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.score-tube[b-q7c4si3y99] {
    width: clamp(3.5rem, 6vw, 6rem);
    min-height: 0.5rem;
    border-radius: 1.75rem 1.75rem 4px 4px;
    box-shadow: var(--shadow-soft);
    transition: height 0.4s ease;
}

.score-baseline[b-q7c4si3y99] {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
}

.score-name[b-q7c4si3y99] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: clamp(1rem, 1.4vw, 1.4rem);
    color: var(--color-text);
    text-align: center;
}

.score-swatch[b-q7c4si3y99] {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    flex-shrink: 0;
}
/* /Components/Shared/TextEntryField.razor.rz.scp.css */
/* Default spacing below the field so a button placed right after it (e.g.
   RoomJoin's "Continue", PlayerRound's "Submit") doesn't sit flush against
   it — .panel/.view don't put a gap between plain block children. Callers
   that already sit inside their own gap-based flex column (e.g. Home's
   .join-form) zero this out to avoid double-spacing. */
.text-entry-field[b-pu3t9a1gsm] {
    margin-bottom: 1rem;
}

/* Size-override modifier class (passed via CssClass) — targets the <input>
   this component itself renders, so it has to live here rather than in
   Home.razor.css, where it lived before this component existed. */
.code-field[b-pu3t9a1gsm] {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    font-size: 1.5rem;
    font-weight: 700;
}

.code-field[b-pu3t9a1gsm]::placeholder {
    letter-spacing: normal;
    text-transform: none;
    font-weight: 400;
}
/* /Components/Shared/WorldMap.razor.rz.scp.css */
/* Clips the pan/zoomed SVG to a fixed-aspect box instead of letting it grow
   past its bounds — aspect-ratio matches the map's own viewBox (900x440.7)
   so the default (unzoomed, untranslated) view fills it exactly, same as
   before this existed. touch-action:none stops the browser's own
   scroll/pinch-zoom from fighting with worldmap-panzoom.js's touch handling. */
.world-map-viewport[b-x5k2ewubzl] {
    position: relative;
    overflow: hidden;
    touch-action: none;
    width: 100%;
    max-width: 48rem;
    aspect-ratio: 900 / 440.7;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
}

.world-map-viewport .world-map[b-x5k2ewubzl] {
    width: 100%;
    height: 100%;
    max-width: none;
    transform-origin: 0 0;
}

.world-map-reset[b-x5k2ewubzl] {
    margin-top: 0.75rem;
}

.map-country[b-x5k2ewubzl] {
    fill: rgba(255, 255, 255, 0.14);
    stroke: rgba(255, 255, 255, 0.35);
    stroke-width: 0.6;
    transition: fill 0.15s ease;
}

.map-country.interactive[b-x5k2ewubzl] {
    cursor: pointer;
}

.map-country.interactive:hover[b-x5k2ewubzl] {
    fill: var(--color-gold);
}

/* Tapped but not yet submitted (select-then-confirm) — ocean blue, matching
   ChoiceCard's own .selected convention elsewhere in the app. Distinct from
   the post-submit green/red below so "picked" never reads as "resolved". */
.map-country.selected[b-x5k2ewubzl] {
    fill: var(--color-ocean);
}

.map-country.highlight-success[b-x5k2ewubzl] {
    fill: var(--color-success);
}

.map-country.highlight-fail[b-x5k2ewubzl] {
    fill: var(--color-danger);
}