/* /Components/AdSlot.razor.rz.scp.css */
.ad-slot[b-130fp4c8ng] {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
    min-height: 90px;
}
/* /Components/AudioShareControls.razor.rz.scp.css */
.audio-share-bar[b-1bwjzyl2vo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-teal-dark);
}

.audio-share-active[b-1bwjzyl2vo] {
    color: var(--color-teal);
    font-weight: 600;
}

.audio-share-volume[b-1bwjzyl2vo] {
    width: 6rem;
}
/* /Components/ConsentBanner.razor.rz.scp.css */
.ad-consent-banner[b-ixprme8ce4] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background-color: #fff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

.ad-consent-text[b-ixprme8ce4] {
    font-size: 0.85rem;
    color: #444;
    flex: 1 1 20rem;
}

.ad-consent-actions[b-ixprme8ce4] {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}
/* /Components/DrawingToolbar.razor.rz.scp.css */
/* Everything on one row, never wrapping — the color/size pickers being
   compact dropup triggers (not a permanently-visible swatch/select row)
   is what makes tools + colors + size + undo/clear actually fit together
   at mobile widths without needing a second line. */
.drawing-toolbar[b-ikcf2oqjig] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
}

.toolbar-group[b-ikcf2oqjig] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.toolbar-divider[b-ikcf2oqjig] {
    width: 1px;
    align-self: stretch;
    background-color: var(--color-cloud);
}

.tool-btn[b-ikcf2oqjig] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 10px;
    background-color: var(--color-cloud);
    color: var(--color-teal-dark);
    font-size: 1.1rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .tool-btn:hover:not(:disabled)[b-ikcf2oqjig] {
        background-color: var(--color-mint);
    }

    .tool-btn.active[b-ikcf2oqjig] {
        background-color: var(--color-teal);
        color: #fff;
    }

    .tool-btn:disabled[b-ikcf2oqjig] {
        opacity: 0.4;
    }

.color-swatch[b-ikcf2oqjig] {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 6px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--color-cloud);
    padding: 0;
    cursor: pointer;
}

    .color-swatch.active[b-ikcf2oqjig] {
        box-shadow: 0 0 0 2px var(--color-teal-dark);
    }

    .color-swatch:disabled[b-ikcf2oqjig] {
        opacity: 0.4;
        cursor: default;
    }

.color-swatch-custom[b-ikcf2oqjig] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-cloud);
    color: var(--color-teal-dark);
    font-size: 0.75rem;
    overflow: hidden;
    cursor: pointer;
}

    .color-swatch-custom.disabled[b-ikcf2oqjig] {
        opacity: 0.4;
        pointer-events: none;
    }

    .color-swatch-custom input[type="color"][b-ikcf2oqjig] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

/* The permanently-visible color row became a single trigger (showing the
   currently active color) that pops the actual swatch grid open above it —
   .dropup (Bootstrap) instead of the default downward-opening dropdown,
   since this toolbar sits at the bottom of the canvas card and a menu
   opening downward would spill past it / get clipped by the footer below. */
.toolbar-color-dropdown[b-ikcf2oqjig] {
    display: flex;
    align-items: center;
}

.color-trigger-btn[b-ikcf2oqjig] {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 10px;
}

/* Only non-display properties here — display:none/block is Bootstrap's own
   .dropdown-menu/.dropdown-menu.show toggle, and a same-specificity rule
   setting display here (even "flex") would permanently override that and
   force the menu visible all the time, blocking the trigger button under
   it. The actual flex-wrap grid lives on the inner wrapper below instead. */
.toolbar-color-menu[b-ikcf2oqjig] {
    padding: 0.75rem;
    max-width: none;
}

.toolbar-color-menu-inner[b-ikcf2oqjig] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
}

/* Same dropup-popup shape as the color picker — a trigger showing a dot
   sized to match the current stroke width, opening a row of the actual
   size presets (also just dots, small→large), instead of a native
   <select>/range slider. */
.toolbar-size-dropdown[b-ikcf2oqjig] {
    display: flex;
    align-items: center;
}

.size-dot[b-ikcf2oqjig] {
    display: inline-block;
    border-radius: 50%;
    background-color: currentColor;
}

.toolbar-size-menu[b-ikcf2oqjig] {
    padding: 0.75rem;
}

.toolbar-size-menu-inner[b-ikcf2oqjig] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.size-option[b-ikcf2oqjig] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 10px;
    background-color: var(--color-cloud);
    color: var(--color-teal-dark);
    cursor: pointer;
}

    .size-option:hover:not(:disabled)[b-ikcf2oqjig] {
        background-color: var(--color-mint);
    }

    .size-option.active[b-ikcf2oqjig] {
        background-color: var(--color-teal);
        color: #fff;
    }

    .size-option:disabled[b-ikcf2oqjig] {
        opacity: 0.4;
        cursor: default;
    }

/* Flat fill, no border — matches .tool-btn/.size-option instead of
   Bootstrap's btn-outline-secondary/btn-outline-danger (a visible ring
   around the icon that stood out from every other toolbar control). */
.toolbar-icon-btn[b-ikcf2oqjig] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: none;
    border-radius: 10px;
    background-color: var(--color-cloud);
    color: var(--color-teal-dark);
    font-size: 1.1rem;
    transition: background-color 0.15s ease;
}

    .toolbar-icon-btn:hover:not(:disabled)[b-ikcf2oqjig] {
        background-color: var(--color-mint);
    }

    .toolbar-icon-btn:disabled[b-ikcf2oqjig] {
        opacity: 0.4;
    }

    .toolbar-icon-btn-danger[b-ikcf2oqjig] {
        background-color: #FCE2E0;
        color: #C0392B;
    }

        .toolbar-icon-btn-danger:hover:not(:disabled)[b-ikcf2oqjig] {
            background-color: #F9CDC9;
        }

/* Squeezes everything down as tight as it'll comfortably go on a phone/
   tablet — the reference design fits colors + size + undo/clear on one
   dense row instead of the three loosely-spaced rows the desktop sizing
   naturally wraps into. Nothing here removes a control, only shrinks it. */
@media (max-width: 767.98px) {
    .drawing-toolbar[b-ikcf2oqjig] {
        gap: 0.4rem;
    }

    .toolbar-group[b-ikcf2oqjig] {
        gap: 0.25rem;
    }

    .toolbar-divider[b-ikcf2oqjig] {
        margin: 0 -0.1rem;
    }

    .tool-btn[b-ikcf2oqjig],
    .toolbar-icon-btn[b-ikcf2oqjig] {
        width: 2rem;
        height: 2rem;
        font-size: 0.95rem;
    }

    .color-swatch[b-ikcf2oqjig] {
        width: 1.15rem;
        height: 1.15rem;
    }

    .color-swatch-custom[b-ikcf2oqjig] {
        width: 1.15rem;
        height: 1.15rem;
        font-size: 0.55rem;
    }
}
/* /Components/GalleryDrawingCard.razor.rz.scp.css */
.gallery-card-image[b-2nibp63oq8] {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background-color: #fff;
    border-top-left-radius: var(--bs-card-border-radius, 24px);
    border-top-right-radius: var(--bs-card-border-radius, 24px);
}

.gallery-star-rating[b-2nibp63oq8] {
    display: flex;
    gap: 0.15rem;
}

.gallery-star-btn[b-2nibp63oq8] {
    border: none;
    background: none;
    padding: 0.15rem;
    font-size: 1.1rem;
    color: var(--color-cloud);
    cursor: pointer;
    transition: color 0.15s ease;
}

    .gallery-star-btn:hover[b-2nibp63oq8],
    .gallery-star-btn.gallery-star-btn-active[b-2nibp63oq8] {
        color: #f1c40f;
    }
/* /Components/HotkeySettingsEditor.razor.rz.scp.css */
.hotkey-editor[b-6jt0ved6nm] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hotkey-editor-section-label[b-6jt0ved6nm] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-teal-dark);
    margin: 0.75rem 0 0.15rem;
}

    .hotkey-editor-section-label:first-child[b-6jt0ved6nm] {
        margin-top: 0;
    }

.hotkey-editor-row[b-6jt0ved6nm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    background-color: var(--color-cloud);
}

.hotkey-editor-label[b-6jt0ved6nm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.hotkey-editor-swatch[b-6jt0ved6nm] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.hotkey-editor-reset[b-6jt0ved6nm] {
    margin-top: 0.75rem;
}

.hotkey-editor-key-btn[b-6jt0ved6nm] {
    min-width: 5rem;
    border: 1px solid var(--color-teal-dark);
    background-color: #fff;
    color: var(--color-teal-dark);
    border-radius: 8px;
    padding: 0.25rem 0.75rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .hotkey-editor-key-btn:hover[b-6jt0ved6nm] {
        background-color: var(--color-mint);
    }

    .hotkey-editor-key-btn.hotkey-editor-key-btn-listening[b-6jt0ved6nm] {
        background-color: var(--color-teal);
        color: #fff;
        border-color: var(--color-teal);
    }
/* /Components/PlayerStatsGrid.razor.rz.scp.css */
.stats-tab-bar[b-fpoudkseio] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.stats-tab[b-fpoudkseio] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background-color: var(--color-cloud);
    color: #666;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .stats-tab:hover[b-fpoudkseio] {
        background-color: var(--color-mint);
        color: var(--color-teal-dark);
    }

    .stats-tab.stats-tab-active[b-fpoudkseio] {
        background-color: var(--color-teal);
        color: #fff;
    }

/* Sits inside Profile.razor's own outer card, so this reads as an inset
   panel (same relationship as .achievement-badge to its card) rather than
   a second nested card of its own. */
.stats-panel[b-fpoudkseio] {
    background-color: var(--color-cloud);
    border-radius: 14px;
    padding: 1.25rem;
    animation: stats-panel-in-b-fpoudkseio 0.15s ease-out;
}

@keyframes stats-panel-in-b-fpoudkseio {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stats-metric-grid[b-fpoudkseio] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1.25rem;
}

.stats-metric[b-fpoudkseio] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
}

    .stats-metric i[b-fpoudkseio] {
        font-size: 1.5rem;
        color: var(--color-teal);
    }

.stats-metric-value[b-fpoudkseio] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
}

.stats-metric-label[b-fpoudkseio] {
    font-size: 0.78rem;
    color: #888;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-txrsoduj2z] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1700px;
    margin: 0 auto;
}
/* /Pages/CanvasTest.razor.rz.scp.css */
.game-status-row[b-k5aiaw49m1] {
    margin-bottom: 0.75rem;
}

@media (min-width: 992px) {
    .participants-col[b-k5aiaw49m1] {
        flex: 0 0 auto;
        width: 16.6667%;
        transition: width 0.25s ease;
    }

    .participants-col-collapsed[b-k5aiaw49m1] {
        width: 4.75rem;
    }

    .canvas-col[b-k5aiaw49m1] {
        flex: 1 1 0%;
        min-width: 0;
    }
}

/* Mobile/tablet room layout — a genuinely separate, self-contained block
   (room-mobile-logo-bar / room-mobile-actions-row / canvas-col / room-mobile-
   footer), all wrapped in .room-view-shell, instead of the desktop 3-column
   .row repurposed via CSS tricks (display:contents/order previously caused
   real bugs: card fragmentation, a cascade-order bug, fighting Bootstrap's
   gutter system). The canvas itself can't be duplicated (one DrawingCanvas/
   DrawingToolbar instance only), so canvas-col stays visible and in its
   natural DOM position on both breakpoints — on mobile it just sits,
   completely flat (no shadow/radius of its own), between the header pieces
   above and the tab/players/chat/input footer below. Only the very first
   piece (logo bar) and very last piece (footer) get a shadow + rounded
   corners — zero margin between all of them makes the flat middle read as
   part of the same continuous surface without needing one shared wrapper
   element for THAT part. .room-view-shell itself is the one shared wrapper
   that turns the whole stack into a fixed-height flex column so it fills
   the full screen and the footer (with the chat input) always lands
   exactly at the bottom instead of wherever the content happens to end. */
@media (max-width: 991.98px) {
    .room-view-shell[b-k5aiaw49m1] {
        display: flex;
        flex-direction: column;
        height: 100dvh;
    }

    /* Bootstrap's .row applies a -12px bleed (half its default gutter) so
       child columns' own 12px padding lands back on the container edge —
       but at this breakpoint only canvas-col is visible (the other columns
       are d-none), and its padding is zeroed below for the flush look, so
       the row's bleed alone was left unopposed and pushed the canvas card
       12px past the logo-bar/actions-row/footer on each side. Zeroing the
       row's margin here makes canvas-col align to the exact same edges.
       flex:0 0 auto — the canvas now has a fixed, width-driven height (its
       own aspect-ratio below), so this row just takes whatever that natural
       height is; room-mobile-footer is what absorbs the rest of the screen. */
    .row.g-4[b-k5aiaw49m1] {
        margin-left: 0;
        margin-right: 0;
        flex: 0 0 auto;
    }

    .canvas-col[b-k5aiaw49m1] {
        padding-left: 0;
        padding-right: 0;
    }

        .canvas-col .card.game-card[b-k5aiaw49m1] {
            border-radius: 0;
            box-shadow: none;
            margin-bottom: 0;
            background-color: #f8f8f7;
        }

        .canvas-col .card-body[b-k5aiaw49m1] {
            padding: 0 0.75rem;
        }

        .game-status-row[b-k5aiaw49m1] {
            padding-top: 5px;
            padding-bottom: 5px;
            margin-bottom: 0;
        }

        /* .canvas-col prefix needed: the base .my-word-banner-row rule
           (margin-bottom: 0.75rem) sits further down in this same file, so
           without the extra qualifier here, equal single-class specificity
           would let that later rule win regardless of this media query. */
        .canvas-col .my-word-banner-row[b-k5aiaw49m1] {
            margin-bottom: 5px;
        }

        /* Toolbar card-body specifically: no top border line, full width
           (zeroes the horizontal padding the rule above gives every other
           card-body in this column), and its own items centered rather
           than left-aligned. Bootstrap's .border-top utility is !important,
           so beating it needs !important here too. .canvas-col prefix is
           required to outrank .canvas-col .card-body above (equal single-
           class specificity would otherwise leave the winner to file order).
           ::deep is required for .drawing-toolbar — it's rendered by the
           DrawingToolbar CHILD component, so without it this compiles to a
           selector requiring CanvasTest's own scope attribute on that div,
           which it can never have (same issue hit twice already this
           session: the canvas aspect-ratio and the hotkey button). */
        .canvas-col .toolbar-card-body[b-k5aiaw49m1] {
            border-top: 0 !important;
            padding-left: 0;
            padding-right: 0;
        }

        .toolbar-card-body[b-k5aiaw49m1]  .drawing-toolbar {
            justify-content: center;
        }

    .room-mobile-logo-bar[b-k5aiaw49m1] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        background-color: #f8f8f7;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 4px 16px rgba(31, 111, 95, 0.08);
        padding: 0.85rem 0.75rem 0.5rem;
    }

    /* Same single row as the copy-link box, buttons pushed to the right —
       not stacked underneath it — now that the link box itself (smaller
       text, much lower max-width below) is small enough to actually share
       the row instead of needing one of its own. */
    .room-mobile-actions-row[b-k5aiaw49m1] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        gap: 0.5rem;
        background-color: #f8f8f7;
        border-top: 1px solid rgba(0, 0, 0, 0.07);
        padding: 0.65rem 0.75rem 5px;
    }

    .room-mobile-actions-buttons[b-k5aiaw49m1] {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        gap: 0.5rem;
    }

    /* Smaller text + a much lower max-width than the desktop 360px cap —
       on a narrow screen the room code doesn't need to nearly fill the row
       to be usable, so it truncates a lot sooner instead of only shrinking
       once it's actually out of room. */
    .room-mobile-actions-row .share-link-box[b-k5aiaw49m1] {
        max-width: 140px;
        font-size: 0.7rem;
    }

    /* Fills whatever height the (now fixed-size) header/actions/canvas
       pieces above don't use — a flex column itself so the tab bar and
       chat input stay their natural size while the players/chat list
       (flex:1 below) stretches to soak up the rest, scrolling internally
       only if its own content overflows that space. */
    .room-mobile-footer[b-k5aiaw49m1] {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        background-color: #f8f8f7;
        border-radius: 0 0 24px 24px;
        box-shadow: 0 4px 16px rgba(31, 111, 95, 0.08);
        padding: 5px 0.75rem 1rem;
    }

        .room-mobile-footer .room-mobile-tab-bar[b-k5aiaw49m1] {
            flex: 0 0 auto;
        }

        .room-mobile-footer .room-mobile-players-list[b-k5aiaw49m1],
        .room-mobile-footer .room-mobile-chat-messages[b-k5aiaw49m1] {
            flex: 1 1 auto;
            min-height: 0;
            max-height: none;
        }

        .room-mobile-footer .room-mobile-players-list[b-k5aiaw49m1] {
            padding-top: 5px;
        }

        .room-mobile-footer .chat-input-row[b-k5aiaw49m1] {
            flex: 0 0 auto;
        }
}

/* Bootstrap adds a caret via .dropdown-toggle::after — the reference's
   icon buttons (add-friend/game-options) don't have one, and on the mobile
   actions row every bit of horizontal space is needed for the icon itself. */
.no-caret[b-k5aiaw49m1]::after {
    display: none !important;
    margin: 0 !important;
}

/* d-lg-none already hides this row entirely at desktop widths, but the
   inline style block above only targets <=991.98px — this keeps the class
   available at any width the markup renders it, matching .app-header-brand. */
.room-mobile-logo[b-k5aiaw49m1] {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-teal-dark);
    text-decoration: none;
}

.room-mobile-logo-actions[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.room-mobile-players-list[b-k5aiaw49m1] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 45vh;
    overflow-y: auto;
}

.room-mobile-chat-messages[b-k5aiaw49m1] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 10px;
    max-height: 45vh;
    overflow-y: auto;
}

.room-mobile-tab-bar[b-k5aiaw49m1] {
    display: flex;
    width: 100%;
    background-color: var(--color-cloud);
    border-radius: 999px;
    padding: 0.2rem;
    gap: 0.25rem;
}

.room-mobile-tab[b-k5aiaw49m1] {
    flex: 1 1 0;
    border: none;
    background: none;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #777;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .room-mobile-tab.room-mobile-tab-active[b-k5aiaw49m1] {
        background-color: #fff;
        color: var(--color-teal-dark);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }

/* canvasColHeightSync.js measures this, not .canvas-col itself — .canvas-col
   is a flex item that the row stretches to match its tallest sibling, so its
   own rendered height reflects that stretch, not its true intrinsic content
   size. This plain block wrapper is never stretched, so it always reports the
   canvas card + toolkit card's actual natural height. */
.canvas-col-content[b-k5aiaw49m1] {
    display: block;
}

.page-connecting-overlay[b-k5aiaw49m1] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background-color: rgba(238, 238, 238, 0.8);
    color: var(--color-teal-dark);
    font-size: 0.9rem;
    font-weight: 500;
}

    .page-connecting-overlay .spinner-border[b-k5aiaw49m1] {
        color: var(--color-teal);
        opacity: 0.8;
    }

.achievement-toast-stack[b-k5aiaw49m1] {
    position: fixed;
    top: 10rem;
    right: 1rem;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: min(22rem, calc(100vw - 2rem));
}

.achievement-toast[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: white;
    animation: achievement-toast-in-b-k5aiaw49m1 0.25s ease-out;
}

.achievement-toast-icon[b-k5aiaw49m1] {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--color-teal);
}

.achievement-toast-title[b-k5aiaw49m1] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-teal);
}

.achievement-toast-name[b-k5aiaw49m1] {
    font-weight: 600;
}

@keyframes achievement-toast-in-b-k5aiaw49m1 {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.elimination-toast-stack[b-k5aiaw49m1] {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: min(22rem, calc(100vw - 2rem));
}

.elimination-toast[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: white;
    animation: achievement-toast-in-b-k5aiaw49m1 0.25s ease-out;
}

.elimination-toast-icon[b-k5aiaw49m1] {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    color: #c0392b;
}

.elimination-toast-name[b-k5aiaw49m1] {
    font-weight: 600;
}

/* Deliberately NOT .game-card — that class's decorative background pattern
   is sized for large cards and looks cluttered on a small popup. Centered
   and non-blocking (no backdrop, pointer-events:none on the wrapper) so it
   reads as a prominent notice rather than a modal dialog. */
.audio-error-overlay[b-k5aiaw49m1] {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    pointer-events: none;
}

.audio-error-popup[b-k5aiaw49m1] {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: min(26rem, calc(100vw - 2rem));
    padding: 1rem 2rem 1rem 1.25rem;
    border-radius: 14px;
    background-color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    animation: audio-error-popup-in-b-k5aiaw49m1 0.2s ease-out;
}

.audio-error-popup-icon[b-k5aiaw49m1] {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    color: #c0392b;
}

.audio-error-popup-message[b-k5aiaw49m1] {
    font-size: 0.9rem;
    color: #333;
}

.audio-error-popup-close[b-k5aiaw49m1] {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    border: none;
    background: none;
    padding: 0.25rem;
    font-size: 0.8rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
}

    .audio-error-popup-close:hover[b-k5aiaw49m1] {
        color: #333;
    }

@keyframes audio-error-popup-in-b-k5aiaw49m1 {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Flexbox items default to min-width:auto (never shrink below their content's
   natural size) unless told otherwise — that default has to be overridden at
   EVERY level of this chain, not just on .share-link-box itself, or the
   ellipsis truncation never actually engages because nothing upstream ever
   squeezes it that far in the first place. */
.share-link-shrink-wrap[b-k5aiaw49m1] {
    flex: 1 1 auto;
    min-width: 0;
}

.share-link-row[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.share-link-box[b-k5aiaw49m1] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 360px;
    background-color: var(--color-cloud);
    color: #666;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Soft pastel fills (tinted background + matching-tone icon) instead of a
   solid saturated background + white icon — matches the reference's icon
   buttons, which read as gentle accents rather than heavy CTAs. */
.game-options-trigger-btn[b-k5aiaw49m1] {
    border-radius: 10px;
    border: none;
}

.game-options-btn[b-k5aiaw49m1],
.invite-friends-trigger-btn[b-k5aiaw49m1] {
    background-color: #DCF3E7;
    border: none;
    color: var(--color-teal-dark);
    transition: background-color 0.15s ease;
}

    .game-options-btn:hover[b-k5aiaw49m1],
    .game-options-btn:focus[b-k5aiaw49m1],
    .game-options-btn.show[b-k5aiaw49m1],
    .invite-friends-trigger-btn:hover[b-k5aiaw49m1],
    .invite-friends-trigger-btn:focus[b-k5aiaw49m1],
    .invite-friends-trigger-btn.show[b-k5aiaw49m1] {
        background-color: #C5EBD8;
        border: none;
        color: var(--color-teal-dark);
    }

.leave-room-btn[b-k5aiaw49m1] {
    border-radius: 10px;
    background-color: #FCE2E0;
    border: none;
    color: #C0392B;
    transition: background-color 0.15s ease;
}

    .leave-room-btn:hover[b-k5aiaw49m1],
    .leave-room-btn:focus[b-k5aiaw49m1] {
        background-color: #F9CDC9;
        border: none;
        color: #C0392B;
    }

.game-options-menu[b-k5aiaw49m1] {
    min-width: 300px;
    padding: 0.4rem 0;
    overflow: hidden;
}

.game-options-header[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: #999;
    border-bottom: 1px solid var(--color-cloud);
    margin-bottom: 0.3rem;
}

.game-options-item[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .game-options-item:hover[b-k5aiaw49m1] {
        background-color: var(--color-cloud);
    }

.game-options-item-icon[b-k5aiaw49m1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: var(--color-cloud);
    color: var(--color-teal-dark);
    font-size: 0.9rem;
}

.game-options-item-text[b-k5aiaw49m1] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.game-options-item-title[b-k5aiaw49m1] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
}

.game-options-item-desc[b-k5aiaw49m1] {
    font-size: 0.72rem;
    color: #999;
}

.game-options-item .form-check[b-k5aiaw49m1] {
    flex: 0 0 auto;
}

    .game-options-item .form-check-input[b-k5aiaw49m1] {
        width: 2.4rem;
        height: 1.3rem;
        margin: 0;
        cursor: pointer;
    }

        .game-options-item .form-check-input:checked[b-k5aiaw49m1] {
            background-color: var(--color-teal);
            border-color: var(--color-teal);
        }

.invite-friends-menu[b-k5aiaw49m1] {
    max-height: 22rem;
    overflow-y: auto;
}

.invite-friends-search-wrap[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 1rem 0.55rem;
    border-bottom: 1px solid var(--color-cloud);
    margin-bottom: 0.3rem;
}

.invite-friends-search-icon[b-k5aiaw49m1] {
    color: #999;
    font-size: 0.85rem;
}

.invite-friends-search-input[b-k5aiaw49m1] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: none;
    font-size: 0.85rem;
    min-width: 0;
}

.invite-friend-row[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 1rem;
    margin: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .invite-friend-row:hover[b-k5aiaw49m1] {
        background-color: var(--color-cloud);
    }

    .invite-friend-row.disabled[b-k5aiaw49m1] {
        cursor: default;
        opacity: 0.6;
    }

        .invite-friend-row.disabled:hover[b-k5aiaw49m1] {
            background-color: transparent;
        }

.invite-friend-name[b-k5aiaw49m1] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invite-friend-status-icon[b-k5aiaw49m1] {
    flex: 0 0 auto;
    color: var(--color-teal-dark);
    font-size: 0.85rem;
}

.btn-copy-link[b-k5aiaw49m1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 10px;
    border: none;
    background-color: var(--color-cloud);
    color: #666;
    font-size: 0.8rem;
}

    .btn-copy-link:hover[b-k5aiaw49m1], .btn-copy-link:active[b-k5aiaw49m1] {
        background-color: #e0e0e0;
        color: #333;
    }

.status-row[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.participants-header[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.participants-title[b-k5aiaw49m1] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: #999;
}

.participants-collapse-btn[b-k5aiaw49m1] {
    border: none;
    background: transparent;
    color: #999;
    padding: 0.1rem 0.3rem;
    line-height: 1;
}

    .participants-collapse-btn:hover[b-k5aiaw49m1] {
        color: var(--color-teal-dark);
    }

.participants-list-collapsed[b-k5aiaw49m1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.participant-avatar-wrap[b-k5aiaw49m1] {
    position: relative;
    display: inline-flex;
}

.participant-drawing-badge[b-k5aiaw49m1] {
    position: absolute;
    bottom: -0.1rem;
    right: -0.1rem;
    width: 0.85rem;
    height: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-teal);
    color: #fff;
    border-radius: 50%;
    font-size: 0.42rem;
    border: 1.5px solid #fff;
}

.participant-disconnected-badge[b-k5aiaw49m1] {
    position: absolute;
    bottom: -0.15rem;
    right: -0.15rem;
    width: 1.1rem;
    height: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #999;
    color: #fff;
    border-radius: 50%;
    font-size: 0.55rem;
    border: 2px solid #fff;
}

.participant-eliminated-badge[b-k5aiaw49m1] {
    position: absolute;
    bottom: -0.15rem;
    right: -0.15rem;
    width: 1.1rem;
    height: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c0392b;
    color: #fff;
    border-radius: 50%;
    font-size: 0.55rem;
    border: 2px solid #fff;
}

.participants-card-body[b-k5aiaw49m1] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.participants-list[b-k5aiaw49m1] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    /* A bootstrap row stretches every column to match whichever one's content
       is naturally tallest — without a cap here, a long players/chat list
       would keep inflating that shared row height instead of just scrolling.
       --canvas-col-height is kept live by canvasColHeightSync.js (the canvas
       card + toolkit card's real height varies by game state — e.g. the
       toolkit only shows for the current drawer — so a fixed guess would
       drift out of sync). 650px is only the pre-JS-init fallback. */
    max-height: var(--canvas-col-height, 650px);
}

.participant-row[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.3rem 0.5rem 0.3rem 0.25rem;
    transition: background-color 0.15s ease;
}

.participant-row-btn[b-k5aiaw49m1] {
    width: 100%;
    border: none;
    background-color: transparent;
    text-align: left;
    cursor: pointer;
}

    .participant-row-btn:hover[b-k5aiaw49m1] {
        background-color: var(--color-cloud);
    }

.soon-badge[b-k5aiaw49m1] {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 600;
    color: #999;
    background-color: var(--color-cloud);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

    .participant-row.participant-owner[b-k5aiaw49m1] {
        background-color: rgba(212, 160, 23, 0.12);
    }

    .participant-row.participant-drawing[b-k5aiaw49m1] {
        background-color: rgba(111, 207, 151, 0.35);
    }

    .participant-row.participant-eliminated[b-k5aiaw49m1] {
        opacity: 0.5;
    }

.player-chip-name[b-k5aiaw49m1] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #444;
}

.player-chip-owner[b-k5aiaw49m1] {
    color: #d4a017;
    font-size: 0.7rem;
}

.player-chip-score[b-k5aiaw49m1] {
    font-size: 0.75rem;
    color: #777;
}

.status-round-info[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Matches .status-round-info's own row/wrap layout — desktop-only now
   (.guesser-drawer-wrap here is d-none d-lg-flex; mobile shows the drawer
   name as an overlay on the canvas itself instead, see .canvas-drawer-badge). */
.guesser-status-row[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

@media (max-width: 991.98px) {
    /* The hint gets the same pill background as every other status-badge
       on mobile, sitting right next to the timer. */
    .guesser-status-row .hint-pattern-row[b-k5aiaw49m1] {
        background-color: var(--color-cloud);
        border-radius: 999px;
        padding: 0.3rem 0.75rem;
        flex-basis: auto;
    }
}

.status-label[b-k5aiaw49m1] {
    font-size: 0.9rem;
    color: #555;
}

.status-badge[b-k5aiaw49m1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: var(--color-cloud);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    color: var(--color-teal-dark);
    font-weight: 500;
}

.hint-pattern[b-k5aiaw49m1] {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    letter-spacing: 0.15rem;
}

/* flex-basis:100% forces this onto its own line within .status-round-info's
   wrapping flex row (a plain CSS trick — no separate markup structure
   needed), matching the reference's hint dashes sitting under the
   turn/timer badges instead of squeezed inline with them. */
.hint-pattern-row[b-k5aiaw49m1] {
    flex-basis: 100%;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    letter-spacing: 0.2rem;
    color: #888;
    font-size: 0.85rem;
}

.status-badge-timer[b-k5aiaw49m1] {
    background-color: #fce4e2;
    color: #c0392b;
    font-weight: 700;
}

.canvas-stage[b-k5aiaw49m1] {
    position: relative;
    display: block;
    width: 100%;
}

/* Mobile/tablet only (d-lg-none) — desktop keeps the drawer-name badge
   inline in .guesser-status-row above the canvas instead (.guesser-drawer-
   wrap there is d-none d-lg-flex, the mirror image of this). pointer-events:
   none so it never intercepts guesses/taps meant for the canvas itself. */
.canvas-drawer-badge[b-k5aiaw49m1] {
    position: absolute;
    bottom: 1.5rem;
    right: 0.6rem;
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Blind Draw modifier — covers only the DRAWER's own view of their own
   canvas (guessers' clients never render this). pointer-events:none is load
   -bearing: without it, this div would intercept the pointerdown/move/up
   events the canvas needs to actually receive strokes, since it sits on top
   of it in the same .canvas-stage. Strokes still happen (and still
   broadcast to everyone else normally) underneath — only the drawer's own
   visual feedback is hidden, and it lifts automatically once the round ends
   (see the RoundStatus.Drawing gate), revealing what they actually drew. */
.blind-draw-overlay[b-k5aiaw49m1] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Fully opaque, deliberately — even a few percent of transparency lets a
       high-contrast stroke bleed through visibly, which defeats the point. */
    background-color: #1a1a1a;
    color: #fff;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
    padding: 1rem;
    pointer-events: none;
}

    .blind-draw-overlay .bi[b-k5aiaw49m1] {
        font-size: 2rem;
    }

/* Teams mode: the other team's board is watch-only — visually toned down so
   it doesn't compete for attention with your own, interactive canvas. */
.other-team-canvas-stage[b-k5aiaw49m1] {
    opacity: 0.7;
    pointer-events: none;
}

.canvas-team-toggle[b-k5aiaw49m1] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.canvas-team-toggle-btn[b-k5aiaw49m1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--color-cloud);
    background-color: #fff;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .canvas-team-toggle-btn:hover[b-k5aiaw49m1] {
        background-color: var(--color-cloud);
    }

    .canvas-team-toggle-btn.active[b-k5aiaw49m1] {
        background-color: var(--team-accent, var(--color-teal));
        border-color: var(--team-accent, var(--color-teal));
        color: #fff;
    }

.canvas-team-toggle-badge[b-k5aiaw49m1] {
    font-size: 0.7rem;
    font-weight: 500;
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.team-assignment-box[b-k5aiaw49m1] {
    background-color: var(--color-cloud);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    min-height: 3.5rem;
}

.team-assignment-player[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.canvas-overlay[b-k5aiaw49m1] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    /*background-color: rgba(255, 255, 255, 0.85);*/
    border-radius: 12px;
}

.canvas-overlay-button[b-k5aiaw49m1] {
    padding: 0.65rem 2rem;
    border-radius: 999px;
    font-size: 1rem;
}

.canvas-overlay-note[b-k5aiaw49m1] {
    color: #555;
    font-size: 0.9rem;
    font-weight: 700;
}

.game-over-overlay[b-k5aiaw49m1] {
    background-color: rgba(255, 255, 255, 0.97);
}

.game-over-panel[b-k5aiaw49m1] {
    width: 100%;
    max-width: 420px;
    max-height: 100%;
    overflow-y: auto;
    padding: 0.5rem 1rem;
    text-align: center;
}

.game-over-title[b-k5aiaw49m1] {
    color: var(--color-teal-dark);
    font-weight: 700;
    margin-bottom: 1rem;
}

.game-over-standings[b-k5aiaw49m1] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.game-over-standing-row[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--color-cloud);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    text-align: left;
}

    .game-over-standing-row.is-first[b-k5aiaw49m1] {
        background-color: rgba(212, 160, 23, 0.15);
    }

.game-over-rank[b-k5aiaw49m1] {
    font-weight: 700;
    color: var(--color-teal-dark);
    width: 1.75rem;
    flex: 0 0 auto;
}

.game-over-name[b-k5aiaw49m1] {
    flex: 1 1 auto;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-over-score[b-k5aiaw49m1] {
    color: #777;
    font-size: 0.85rem;
    flex: 0 0 auto;
}

.game-over-drawings[b-k5aiaw49m1] {
    text-align: left;
    margin-bottom: 1rem;
}

.game-over-section-title[b-k5aiaw49m1] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: #999;
    margin-bottom: 0.5rem;
}

.game-over-drawing-row[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
}

    .game-over-drawing-row .bi-star-fill[b-k5aiaw49m1] {
        color: #d4a017;
        flex: 0 0 auto;
    }

.game-over-drawing-rating[b-k5aiaw49m1] {
    margin-left: auto;
    color: var(--color-teal-dark);
    font-weight: 600;
    flex: 0 0 auto;
}

.game-over-actions[b-k5aiaw49m1] {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.game-over-countdown[b-k5aiaw49m1] {
    font-size: 0.8rem;
    color: #888;
}

.my-word-banner-row[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.my-word-banner[b-k5aiaw49m1] {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    background-color: rgba(111, 207, 151, 0.3);
    color: var(--color-teal-dark);
    border-radius: 999px;
    padding: 0.25rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Square-with-rounding, matching the rest of this page's icon buttons
   (game-options-btn/leave-room-btn etc.) instead of Bootstrap's default
   rectangular btn-sm — and moved to sit right next to the word banner
   (only ever rendered together, both scoped to IsMyTurn) instead of its
   own separate row above the toolbar. ::deep is required because the
   button is rendered by the HotkeySettingsButton CHILD component — without
   it this selector compiles to require CanvasTest's own scope attribute on
   that button, which it can never have, so it'd silently never match (the
   same issue the canvas aspect-ratio override hit earlier). */
.my-word-banner-row[b-k5aiaw49m1]  .hotkey-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 10px;
    border: none;
    background-color: var(--color-cloud);
    color: var(--color-teal-dark);
}

.spectator-banner[b-k5aiaw49m1] {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.06);
    color: #666;
    border-radius: 999px;
    padding: 0.4rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.rating-bar[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    background-color: var(--color-cloud);
    border-radius: 12px;
    padding: 0.6rem 0.9rem;
    margin-top: 0.75rem;
}

.rating-bar-label[b-k5aiaw49m1] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
}

.rating-buttons[b-k5aiaw49m1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.rating-btn[b-k5aiaw49m1] {
    width: 2.1rem;
    padding: 0.2rem 0;
}

@media (max-width: 991.98px) {
    /* Less gap above the canvas, a smaller label, and the 10 rating
       buttons forced onto one line (flex-shrink + min-width:0 lets them
       squeeze down as far as needed instead of wrapping to a second row —
       "always fits on one line" as a hard constraint, not just a goal). */
    .rating-bar[b-k5aiaw49m1] {
        margin-top: 0;
        padding: 0.5rem 0.6rem;
        gap: 0.35rem;
    }

    .rating-bar-label[b-k5aiaw49m1] {
        font-size: 0.7rem;
        flex-basis: 100%;
    }

    .rating-buttons[b-k5aiaw49m1] {
        flex-wrap: nowrap;
        width: 100%;
        gap: 0.2rem;
    }

    .rating-btn[b-k5aiaw49m1] {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding: 0.15rem 0;
        font-size: 0.75rem;
    }
}

.game-chat-header[b-k5aiaw49m1] {
    font-weight: 600;
    color: var(--color-teal-dark);
}

.chat-tabs[b-k5aiaw49m1] {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.chat-tab[b-k5aiaw49m1] {
    border: none;
    background: none;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #888;
    cursor: pointer;
}

    .chat-tab.chat-tab-active[b-k5aiaw49m1] {
        background-color: var(--color-cloud);
        color: var(--color-teal-dark);
        font-weight: 600;
    }

.chat-messages[b-k5aiaw49m1] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    min-height: 0;
    /* Same reasoning as .participants-list — cap it so a long conversation
       scrolls internally instead of inflating the whole row's height. */
    max-height: var(--canvas-col-height, 650px);
}

/* Plain "Name: message" text lines instead of chat bubbles — matches the
   reference's flat list style and always shows who said what (the old
   bubble layout hid your OWN name label, which read as "no sender at all"
   when testing solo with only one player in the room). */
.chat-line[b-k5aiaw49m1] {
    font-size: 0.85rem;
    line-height: 1.4;
    word-break: break-word;
}

.chat-line-name[b-k5aiaw49m1] {
    font-weight: 700;
    margin-right: 0.3rem;
}

.chat-line-system[b-k5aiaw49m1] {
    font-style: italic;
    color: #888;
}

    .chat-line-system .chat-line-name[b-k5aiaw49m1] {
        color: #888;
    }

.team-group-label[b-k5aiaw49m1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--team-accent, #999);
    margin: 0.5rem 0.5rem 0.15rem 0.25rem;
}

    .team-group-label:first-child[b-k5aiaw49m1] {
        margin-top: 0;
    }

.team-group-score[b-k5aiaw49m1] {
    font-variant-numeric: tabular-nums;
}

.chat-error[b-k5aiaw49m1] {
    font-size: 0.8rem;
    color: #b3261e;
    margin-bottom: 0.4rem;
}

.chat-input-row[b-k5aiaw49m1] {
    display: flex;
    gap: 0.5rem;
}

.chat-input-row input[b-k5aiaw49m1] {
    flex: 1 1 auto;
}

.btn-chat-send[b-k5aiaw49m1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    flex: 0 0 auto;
    background-color: var(--color-teal-dark);
    border-color: var(--color-teal-dark);
    color: #fff;
}

    .btn-chat-send:hover[b-k5aiaw49m1], .btn-chat-send:active[b-k5aiaw49m1] {
        background-color: var(--color-teal);
        border-color: var(--color-teal);
        color: #fff;
    }

    .btn-chat-send:disabled[b-k5aiaw49m1] {
        background-color: var(--color-teal-dark);
        border-color: var(--color-teal-dark);
        opacity: 0.4;
    }
/* /Pages/Friends.razor.rz.scp.css */
/* Same inset-tile language as .stats-panel/.achievement-badge on Profile —
   rows sit on --color-cloud inside the surrounding game-card rather than
   being bare list items. */
.friend-row-list[b-qez2yh15sj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.friend-row[b-qez2yh15sj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    border-radius: 12px;
    background-color: var(--color-cloud);
}
/* /Pages/Gallery.razor.rz.scp.css */
.gallery-my-drawing[b-t77d8aj3en] {
    max-width: 100%;
    max-height: 500px;
    border-radius: 12px;
    border: 1px solid var(--color-cloud);
    background-color: #fff;
}

.gallery-submit-header[b-t77d8aj3en] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.gallery-submit-actions[b-t77d8aj3en] {
    display: flex;
    align-items: center;
    gap: 1rem;
}
/* /Pages/Play.razor.rz.scp.css */
.mode-card[b-hbpxsd0p95] {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a:hover .mode-card[b-hbpxsd0p95] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(31, 111, 95, 0.18);
}

.mode-card-locked[b-hbpxsd0p95] {
    opacity: 0.6;
}

.mode-icon[b-hbpxsd0p95] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--color-mint);
    color: var(--color-teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
}

.mode-badge[b-hbpxsd0p95] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    background-color: var(--color-cloud);
    color: #777;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}
/* /Pages/PlayClassic.razor.rz.scp.css */
.mode-icon[b-vcu39itmt6] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--color-mint);
    color: var(--color-teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
}

.mode-icon-lg[b-vcu39itmt6] {
    width: 4rem;
    height: 4rem;
    font-size: 1.75rem;
}

.open-room-row[b-vcu39itmt6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background-color: var(--color-cloud);
    border-radius: 12px;
    padding: 0.6rem 1rem;
}
/* /Pages/WordPacks.razor.rz.scp.css */
.open-room-row[b-gy65z2sjj5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background-color: var(--color-cloud);
    border-radius: 12px;
    padding: 0.6rem 1rem;
    cursor: pointer;
}

.word-pack-row .open-room-row .bi-chevron-right[b-gy65z2sjj5],
.word-pack-row .open-room-row .bi-chevron-down[b-gy65z2sjj5] {
    color: var(--color-teal-dark);
    margin-right: 0.35rem;
}

.word-pack-words[b-gy65z2sjj5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 1rem 0.25rem;
}

.word-pack-word-pill[b-gy65z2sjj5] {
    background-color: #fff;
    border: 1px solid var(--color-teal-dark);
    color: var(--color-teal-dark);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-size: 0.8rem;
}