@import 'Wordist.Web.Classic.Client.s9si05096z.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
   MainLayout — CSS Isolation
   Top banner, nav banner, marquee banner, and shell layout.
   ============================================================ */

/* ---- Shell ---- */
.site-shell[b-48cwsp7pxn] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---- Sticky header (banner + nav + marquee) ---- */
.sticky-header[b-48cwsp7pxn] {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ============================================================
   TOP BANNER
   ============================================================ */
.top-banner[b-48cwsp7pxn] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 20px;
    background: var(--banner-bg);
    border-bottom: 1px solid var(--banner-border);
    box-shadow: var(--banner-shadow);
}

/* Left — logo tile + hamburger */
.banner-left[b-48cwsp7pxn] {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 6px;
}

.logo-link[b-48cwsp7pxn] {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.2s ease;
}

    .logo-link:hover[b-48cwsp7pxn] {
        transform: rotate(-3deg) scale(1.05);
    }

/* Hamburger menu */
.hamburger-wrapper[b-48cwsp7pxn] {
    position: relative;
}

.hamburger-btn[b-48cwsp7pxn] {
    width: 36px;
    height: 36px;
}

.hamburger-menu[b-48cwsp7pxn] {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    background: var(--banner-bg, #111827);
    border: 1px solid var(--banner-border, #374151);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 4px 0;
    z-index: 200;
}

.hamburger-wrapper.open .hamburger-menu[b-48cwsp7pxn] {
    display: block;
}

.hamburger-menu-item[b-48cwsp7pxn] {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text, #F1F5F9);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.15s;
    font-family: inherit;
}

.hamburger-menu-item:hover[b-48cwsp7pxn] {
    background: rgba(124, 58, 237, 0.15);
}

.hamburger-menu-version[b-48cwsp7pxn] {
    display: block;
    padding: 6px 16px 8px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-muted, #94A3B8);
    opacity: 0.5;
    border-top: 1px solid var(--banner-border, #374151);
    margin-top: 4px;
}

/* Center — WORDIST title tiles */
.banner-center[b-48cwsp7pxn] {
    display: flex;
    align-items: center;
    gap: 5px;
    filter: drop-shadow(0 6px 18px rgba(124, 58, 237, 0.35));
}

/* Right — icon buttons */
.banner-right[b-48cwsp7pxn] {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Profile icon gets a coloured ring to stand out */
.banner-right[b-48cwsp7pxn]  .icon-btn--profile {
    color: var(--color-violet-lt);
    background-color: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.banner-right[b-48cwsp7pxn]  .icon-btn--profile:hover {
    color: #fff;
    background-color: rgba(124, 58, 237, 0.35);
    border-color: rgba(124, 58, 237, 0.6);
}

/* Profile initials badge */
.banner-right[b-48cwsp7pxn]  .profile-initials {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Profile wrapper — anchor for the dropdown */
.banner-right[b-48cwsp7pxn]  .profile-wrapper {
    position: relative;
}

/* Profile dropdown menu */
.banner-right[b-48cwsp7pxn]  .profile-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--banner-bg, #111827);
    border: 1px solid var(--banner-border, #374151);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 4px 0;
    z-index: 200;
}

.banner-right[b-48cwsp7pxn]  .profile-wrapper.open .profile-menu {
    display: block;
}

.banner-right[b-48cwsp7pxn]  .profile-menu-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text, #F1F5F9);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.15s;
    font-family: inherit;
}

.banner-right[b-48cwsp7pxn]  .profile-menu-item:hover {
    background: rgba(124, 58, 237, 0.15);
}

/* Sign-in / Join links (unauthenticated) */
.banner-right[b-48cwsp7pxn]  .auth-link {
    color: var(--color-muted, #94A3B8);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s;
}

.banner-right[b-48cwsp7pxn]  .auth-link:hover {
    color: var(--color-text, #F1F5F9);
}

.banner-right[b-48cwsp7pxn]  .auth-link-accent {
    color: var(--color-violet-lt, #A78BFA);
}

.banner-right[b-48cwsp7pxn]  .auth-link-accent:hover {
    color: #C4B5FD;
}

.banner-right[b-48cwsp7pxn]  .auth-sep {
    color: var(--color-muted, #94A3B8);
    font-size: 0.85rem;
    opacity: 0.5;
}

/* ============================================================
   NAV BANNER
   ============================================================ */
.nav-banner[b-48cwsp7pxn] {
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    padding: 0 24px;
    display: flex;
    align-items: center;
    height: 30px;
    justify-content: center;
    position: relative;
}

.nav-links[b-48cwsp7pxn] {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 100%;
    justify-content: center;
}

.nav-banner[b-48cwsp7pxn]  .player-stats-bar {
    position: absolute;
    right: 24px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.nav-banner[b-48cwsp7pxn]  .stats-item {
    color: var(--color-muted, #94A3B8);
}

.nav-banner[b-48cwsp7pxn]  .stats-item--level {
    color: var(--color-accent, #7c3aed);
}

.nav-banner[b-48cwsp7pxn]  .stats-item--credits {
    color: var(--color-gold, #F59E0B);
    text-decoration: none;
}

.nav-banner[b-48cwsp7pxn]  .stats-item--credits:hover {
    opacity: 0.8;
}

.nav-banner[b-48cwsp7pxn]  .stats-sep {
    color: var(--color-muted, #94A3B8);
    opacity: 0.4;
}

@media (max-width: 768px) {
    .nav-banner[b-48cwsp7pxn]  .player-stats-bar {
        display: none;
    }
}

    /* Force nav links to fill the banner height for a larger click target */
    .nav-links[b-48cwsp7pxn]  .nav-link-item {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 2px;
    }

/* ============================================================
   MARQUEE BANNER
   ============================================================ */
.marquee-banner[b-48cwsp7pxn] {
    display: flex;
    align-items: center;
    height: 30px;
    background: var(--marquee-bg);
    border-bottom: 1px solid var(--marquee-border);
    overflow: hidden;
    gap: 12px;
    padding-left: 12px;
    box-shadow: var(--marquee-shadow);
}

.marquee-badge[b-48cwsp7pxn] {
    flex-shrink: 0;
    background: var(--color-violet);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.marquee-track[b-48cwsp7pxn] {
    flex: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.marquee-inner[b-48cwsp7pxn] {
    display: inline-block;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--marquee-text);
    /* Animation driven by JS (marquee-live.js) for jerk-free dynamic content updates. */
}

    .marquee-inner em[b-48cwsp7pxn] {
        color: var(--color-muted);
        font-style: normal;
    }

    .marquee-inner strong[b-48cwsp7pxn] {
        color: var(--color-text);
        font-weight: 800;
    }

.xp-highlight[b-48cwsp7pxn] {
    color: var(--color-gold);
    font-weight: 900;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content[b-48cwsp7pxn] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer[b-48cwsp7pxn] {
    border-top: 1px solid var(--banner-border, #374151);
    background: var(--banner-bg, #111827);
    padding: 2rem 1.5rem;
    text-align: center;
}

.footer-inner[b-48cwsp7pxn] {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.footer-links[b-48cwsp7pxn] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
}

.footer-links a[b-48cwsp7pxn] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted, #94A3B8);
    text-decoration: none;
    transition: color 0.15s;
}

.footer-links a:hover[b-48cwsp7pxn] {
    color: var(--color-text, #F1F5F9);
}

.footer-copy[b-48cwsp7pxn] {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-muted, #94A3B8);
    opacity: 0.7;
}

.footer-version[b-48cwsp7pxn] {
    margin: 0;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--color-muted, #94A3B8);
    opacity: 0.4;
}

/* ============================================================
   Blazor error UI
   ============================================================ */
#blazor-error-ui[b-48cwsp7pxn] {
    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-48cwsp7pxn] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ============================================================
   BUG REPORT BUTTON
   ============================================================ */
.bug-report-btn[b-48cwsp7pxn] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-violet, #7c3aed);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    z-index: 90;
    text-decoration: none;
}

.bug-report-btn:hover[b-48cwsp7pxn] {
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.5);
    background: var(--color-violet-lt, #8b5cf6);
}

.bug-report-btn svg[b-48cwsp7pxn] {
    width: 22px;
    height: 22px;
}

/* ============================================================
   MOBILE FLOATING LOGO (visible on all pages, ≤768px only)
   ============================================================ */
.mobile-floating-logo[b-48cwsp7pxn] {
    display: none;
}

/* ============================================================
   MOBILE MENU OVERLAY (full-screen, ≤768px only)
   ============================================================ */
.mobile-menu-overlay[b-48cwsp7pxn] {
    display: none;
}

/* ============================================================
   Responsive — Tablet / Small desktop
   ============================================================ */
@media (max-width: 480px) {
    .top-banner[b-48cwsp7pxn] {
        padding: 8px 12px;
    }

    .banner-right[b-48cwsp7pxn] {
        gap: 2px;
    }
}

/* ============================================================
   Responsive — MOBILE (≤768px)
   ============================================================ */
@media (max-width: 768px) {

    /* ---- Hide the full desktop header on ALL mobile pages ---- */
    .sticky-header[b-48cwsp7pxn] {
        display: none;
    }

    /* ---- Floating W logo: shown on all mobile pages ---- */
    /* ---- Floating W logo: bottom-left, symmetric with bug-report bottom-right ---- */
    .mobile-floating-logo[b-48cwsp7pxn] {
        display: flex;
        position: fixed;
        bottom: 20px;
        left: 20px;
        z-index: 90;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: transform 0.15s ease;
    }

    /* Scale W tile to match bug button (both 33×33 on mobile) */
    .mobile-floating-logo[b-48cwsp7pxn]  .letter-tile {
        width: 33px;
        height: 33px;
    }

    .mobile-floating-logo[b-48cwsp7pxn]  .tile-letter {
        font-size: 1rem;
    }

    .bug-report-btn[b-48cwsp7pxn] {
        width: 33px;
        height: 33px;
    }

    .bug-report-btn svg[b-48cwsp7pxn] {
        width: 17px;
        height: 17px;
    }

    .mobile-floating-logo:hover[b-48cwsp7pxn] {
        transform: scale(1.1);
    }


    /* ---- Mobile menu overlay ---- */
    .mobile-menu-overlay[b-48cwsp7pxn] {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 500;
        background: var(--color-bg, #0A0E1A);
        flex-direction: column;
        overflow-y: auto;
    }

    .mobile-menu-overlay.open[b-48cwsp7pxn] {
        display: flex;
    }

    .mobile-menu-header[b-48cwsp7pxn] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 16px 12px;
    }

    .mobile-menu-header .banner-center[b-48cwsp7pxn] {
        display: flex;
        gap: 4px;
        filter: drop-shadow(0 4px 12px rgba(124, 58, 237, 0.3));
    }

    .mobile-close-btn[b-48cwsp7pxn] {
        width: 44px;
        height: 44px;
    }

    .mobile-menu-nav[b-48cwsp7pxn] {
        display: flex;
        flex-direction: column;
        padding: 1rem 1.5rem;
        gap: 0.25rem;
        flex: 1;
    }

    .mobile-menu-row[b-48cwsp7pxn] {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-theme-toggle[b-48cwsp7pxn] {
        flex-shrink: 0;
    }

    .mobile-menu-link[b-48cwsp7pxn] {
        display: block;
        padding: 0.9rem 0.5rem;
        font-size: 1.25rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-text, #F1F5F9);
        text-decoration: none;
        border-radius: 8px;
        transition: background-color 0.15s;
    }

    .mobile-menu-link:hover[b-48cwsp7pxn] {
        background: rgba(124, 58, 237, 0.12);
    }

    .mobile-menu-link--secondary[b-48cwsp7pxn] {
        font-size: 1rem;
        font-weight: 600;
        text-transform: none;
        letter-spacing: normal;
        color: var(--color-muted, #94A3B8);
    }

    .mobile-menu-divider[b-48cwsp7pxn] {
        border: none;
        border-top: 1px solid var(--color-border, #374151);
        margin: 0.5rem 0;
    }

    .mobile-menu-footer[b-48cwsp7pxn] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 1.5rem;
        border-top: 1px solid var(--color-border, #374151);
    }

    .mobile-menu-footer[b-48cwsp7pxn]  .auth-link {
        font-size: 1.1rem;
        font-weight: 700;
        padding: 0.6rem 1.5rem;
        border-radius: 8px;
        border: 1px solid var(--color-border, #374151);
        color: var(--color-text, #F1F5F9);
        transition: background-color 0.15s, border-color 0.15s;
    }

    .mobile-menu-footer[b-48cwsp7pxn]  .auth-link:hover {
        background: rgba(124, 58, 237, 0.12);
        border-color: var(--color-violet, #7C3AED);
    }

    .mobile-menu-footer[b-48cwsp7pxn]  .auth-link-accent {
        background: var(--color-violet, #7C3AED);
        color: #fff;
        border-color: var(--color-violet, #7C3AED);
    }

    .mobile-menu-footer[b-48cwsp7pxn]  .auth-link-accent:hover {
        background: var(--color-violet-lt, #8b5cf6);
        border-color: var(--color-violet-lt, #8b5cf6);
        color: #fff;
    }

    .mobile-menu-footer[b-48cwsp7pxn]  .auth-sep {
        display: none;
    }

    .mobile-menu-version[b-48cwsp7pxn] {
        display: block;
        text-align: center;
        padding: 0.5rem;
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--color-muted, #94A3B8);
        opacity: 0.5;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-uwq6n5vjyn],
.components-reconnect-repeated-attempt-visible[b-uwq6n5vjyn],
.components-reconnect-failed-visible[b-uwq6n5vjyn],
.components-pause-visible[b-uwq6n5vjyn],
.components-resume-failed-visible[b-uwq6n5vjyn],
.components-rejoining-animation[b-uwq6n5vjyn] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-uwq6n5vjyn {
    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/About.razor.rz.scp.css */
.about-page[b-vyo2vrjolc] {
    max-width: 700px;
    margin: 2rem auto;
    padding: 0 1rem 3rem;
}

.about-title[b-vyo2vrjolc] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem;
}

.about-intro[b-vyo2vrjolc] {
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 2rem;
}

.about-section[b-vyo2vrjolc] {
    margin-bottom: 2rem;
}

.about-section-title[b-vyo2vrjolc] {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.about-section p[b-vyo2vrjolc] {
    font-size: 0.9rem;
    color: var(--color-text-secondary, #cbd5e1);
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.about-link[b-vyo2vrjolc] {
    color: var(--color-accent, #7c3aed);
    text-decoration: none;
    font-weight: 700;
}

.about-link:hover[b-vyo2vrjolc] {
    text-decoration: underline;
}
/* /Components/Pages/Admin/BonusWords.razor.rz.scp.css */
/* ── Admin page layout ──────────────────────────────────────────────── */

.admin-page[b-fbzvbldx52] {
    width: min(800px, 100%);
    margin: 2rem auto;
    padding: 0 1rem;
}

.admin-header[b-fbzvbldx52] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.admin-title[b-fbzvbldx52] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0;
}

.admin-back-link[b-fbzvbldx52] {
    font-size: 0.85rem;
    color: var(--color-accent, #7c3aed);
    text-decoration: none;
}

.admin-back-link:hover[b-fbzvbldx52] {
    text-decoration: underline;
}

.admin-error[b-fbzvbldx52] {
    text-align: center;
    padding: 3rem 1rem;
    font-size: 1.1rem;
    color: #ef4444;
    font-weight: 700;
}

.admin-loading[b-fbzvbldx52] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.admin-empty[b-fbzvbldx52] {
    text-align: center;
    padding: 1.5rem;
    color: var(--color-text-muted, #94a3b8);
    font-style: italic;
}

/* ── Sections ──────────────────────────────────────────────────────── */

.admin-section[b-fbzvbldx52] {
    margin-bottom: 2.5rem;
}

.admin-section-title[b-fbzvbldx52] {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

/* ── Active bonus word card ────────────────────────────────────────── */

.admin-card[b-fbzvbldx52] {
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.admin-card--highlight[b-fbzvbldx52] {
    border-color: var(--color-accent, #7c3aed);
    border-width: 2px;
}

.admin-card-row[b-fbzvbldx52] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
}

.admin-card-row + .admin-card-row[b-fbzvbldx52] {
    border-top: 1px solid var(--color-border, #3a3a4a);
}

.admin-card-row--summary[b-fbzvbldx52] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

.admin-label[b-fbzvbldx52] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-value[b-fbzvbldx52] {
    font-size: 0.95rem;
    color: var(--color-text-primary);
    font-weight: 600;
}

.admin-value--word[b-fbzvbldx52] {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.admin-value--summary[b-fbzvbldx52] {
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-secondary, #cbd5e1);
}

.admin-value--muted[b-fbzvbldx52] {
    font-size: 0.88rem;
    color: var(--color-text-muted, #94a3b8);
    font-style: italic;
}

/* ── Filter row ────────────────────────────────────────────────────── */

.filter-row[b-fbzvbldx52] {
    margin-bottom: 1rem;
}

.filter-select[b-fbzvbldx52] {
    width: 180px;
}

.admin-input[b-fbzvbldx52] {
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--color-surface-1, #111827);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s;
}

.admin-input:focus[b-fbzvbldx52] {
    border-color: var(--color-accent, #7c3aed);
}

/* ── Messages ──────────────────────────────────────────────────────── */

.admin-message[b-fbzvbldx52] {
    margin-bottom: 1rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.admin-message--success[b-fbzvbldx52] {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.admin-message--error[b-fbzvbldx52] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ── Proposal cards ────────────────────────────────────────────────── */

.proposal-list[b-fbzvbldx52] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.proposal-card[b-fbzvbldx52] {
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.6rem;
    padding: 0.75rem 1rem;
}

.proposal-card--today[b-fbzvbldx52] {
    border-color: var(--color-accent, #7c3aed);
    background: rgba(124, 58, 237, 0.06);
}

.proposal-card--past[b-fbzvbldx52] {
    opacity: 0.5;
}

.proposal-top[b-fbzvbldx52] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.proposal-date-col[b-fbzvbldx52] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 5rem;
}

.proposal-date[b-fbzvbldx52] {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--color-text-primary);
}

.proposal-word[b-fbzvbldx52] {
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    color: var(--color-text-primary);
    min-width: 5rem;
}

.proposal-reward[b-fbzvbldx52] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted, #94a3b8);
}

.proposal-reward--custom[b-fbzvbldx52] {
    color: var(--color-accent, #7c3aed);
}

.proposal-actions[b-fbzvbldx52] {
    margin-left: auto;
    display: flex;
    gap: 0.3rem;
}

.proposal-reasoning[b-fbzvbldx52] {
    font-size: 0.8rem;
    color: var(--color-text-secondary, #cbd5e1);
    line-height: 1.45;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border, #3a3a4a);
}

/* ── Badges ────────────────────────────────────────────────────────── */

.admin-badge[b-fbzvbldx52] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.admin-badge--proposed[b-fbzvbldx52] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.admin-badge--approved[b-fbzvbldx52] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.admin-badge--rejected[b-fbzvbldx52] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.today-badge[b-fbzvbldx52] {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

/* ── Action buttons ────────────────────────────────────────────────── */

.action-btn[b-fbzvbldx52] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    font-size: 0.9rem;
    font-weight: 700;
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.35rem;
    cursor: pointer;
    background: transparent;
    transition: background-color 0.15s, border-color 0.15s;
}

.action-btn:disabled[b-fbzvbldx52] {
    opacity: 0.4;
    cursor: not-allowed;
}

.action-btn--approve[b-fbzvbldx52] {
    color: #4ade80;
}

.action-btn--approve:hover:not(:disabled)[b-fbzvbldx52] {
    background: rgba(34, 197, 94, 0.15);
    border-color: #4ade80;
}

.action-btn--reject[b-fbzvbldx52] {
    color: #f87171;
}

.action-btn--reject:hover:not(:disabled)[b-fbzvbldx52] {
    background: rgba(239, 68, 68, 0.15);
    border-color: #f87171;
}

.action-btn--edit[b-fbzvbldx52] {
    color: var(--color-text-muted, #94a3b8);
}

.action-btn--edit:hover[b-fbzvbldx52] {
    background: rgba(124, 58, 237, 0.1);
    border-color: var(--color-accent, #7c3aed);
    color: var(--color-accent, #7c3aed);
}

/* ── Inline edit row ───────────────────────────────────────────────── */

.proposal-edit[b-fbzvbldx52] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border, #3a3a4a);
    flex-wrap: wrap;
}

.edit-field[b-fbzvbldx52] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.edit-label[b-fbzvbldx52] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #94a3b8);
}

.edit-input[b-fbzvbldx52] {
    width: 6rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.88rem;
    font-family: inherit;
    background: var(--color-surface-1, #111827);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.4rem;
    outline: none;
    transition: border-color 0.15s;
}

.edit-input:focus[b-fbzvbldx52] {
    border-color: var(--color-accent, #7c3aed);
}

.edit-input[b-fbzvbldx52]::placeholder {
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.78rem;
}

.admin-btn[b-fbzvbldx52] {
    padding: 0.45rem 1rem;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: opacity 0.15s;
}

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

.admin-btn--primary[b-fbzvbldx52] {
    background: var(--color-accent, #7c3aed);
    color: #fff;
}

.admin-btn--primary:hover:not(:disabled)[b-fbzvbldx52] {
    opacity: 0.85;
}

.admin-btn--secondary[b-fbzvbldx52] {
    background: transparent;
    color: var(--color-text-muted, #94a3b8);
    border: 1px solid var(--color-border, #3a3a4a);
}

.admin-btn--secondary:hover[b-fbzvbldx52] {
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.edit-save[b-fbzvbldx52] {
    align-self: flex-end;
}
/* /Components/Pages/Admin/BugReports.razor.rz.scp.css */
/* ── Admin shared styles (scoped per-component by Blazor CSS isolation) ── */

.admin-page[b-48bc22jm11] {
    width: min(600px, 100%);
    margin: 2rem auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

.admin-header[b-48bc22jm11] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.admin-title[b-48bc22jm11] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0;
}

.admin-back-link[b-48bc22jm11] {
    font-size: 0.85rem;
    color: var(--color-accent, #7c3aed);
    text-decoration: none;
}

.admin-back-link:hover[b-48bc22jm11] {
    text-decoration: underline;
}

.admin-error[b-48bc22jm11] {
    text-align: center;
    padding: 3rem 1rem;
    font-size: 1.1rem;
    color: #ef4444;
    font-weight: 700;
}

.admin-loading[b-48bc22jm11] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.admin-empty[b-48bc22jm11] {
    text-align: center;
    padding: 1.5rem;
    color: var(--color-text-muted, #94a3b8);
    font-style: italic;
}

.admin-input[b-48bc22jm11] {
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--color-surface-1, #111827);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s;
}

.admin-input:focus[b-48bc22jm11] {
    border-color: var(--color-accent, #7c3aed);
}

.admin-message[b-48bc22jm11] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.admin-message--success[b-48bc22jm11] {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.admin-message--error[b-48bc22jm11] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ── Filter ────────────────────────────────────────────────────────── */

.bug-filter[b-48bc22jm11] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.bug-filter-label[b-48bc22jm11] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bug-filter-select[b-48bc22jm11] {
    max-width: 180px;
}

.bug-count[b-48bc22jm11] {
    font-size: 0.8rem;
    color: var(--color-text-muted, #94a3b8);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

/* ── Bug card ──────────────────────────────────────────────────────── */

.bug-card[b-48bc22jm11] {
    width: 100%;
    box-sizing: border-box;
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.bug-card-header[b-48bc22jm11] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.bug-card-id[b-48bc22jm11] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-text-muted, #94a3b8);
}

.bug-card-description[b-48bc22jm11] {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.bug-card-meta[b-48bc22jm11] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.75rem;
    color: var(--color-text-muted, #94a3b8);
    margin-bottom: 0.75rem;
}

.bug-user-link[b-48bc22jm11] {
    color: var(--color-accent, #7c3aed);
    text-decoration: none;
    font-weight: 700;
}

.bug-user-link:hover[b-48bc22jm11] {
    text-decoration: underline;
}

.bug-anon-badge[b-48bc22jm11] {
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.3);
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bug-card-actions[b-48bc22jm11] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border, #3a3a4a);
}

.bug-action-label[b-48bc22jm11] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bug-action-select[b-48bc22jm11] {
    max-width: 160px;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
}

/* ── Status badges ─────────────────────────────────────────────────── */

.bug-status[b-48bc22jm11] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
}

.bug-status--open[b-48bc22jm11] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.bug-status--inprogress[b-48bc22jm11] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.bug-status--resolved[b-48bc22jm11] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.bug-status--closed[b-48bc22jm11] {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}
/* /Components/Pages/Admin/Index.razor.rz.scp.css */
/* ── Admin dashboard ───────────────────────────────────────────────── */

.admin-page[b-ma75eaosq2] {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.admin-title[b-ma75eaosq2] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin-bottom: 2rem;
}

.admin-error[b-ma75eaosq2] {
    text-align: center;
    padding: 3rem 1rem;
    font-size: 1.1rem;
    color: #ef4444;
    font-weight: 700;
}

/* ── Nav grid ──────────────────────────────────────────────────────── */

.admin-nav-grid[b-ma75eaosq2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.admin-nav-card[b-ma75eaosq2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}

.admin-nav-card:hover[b-ma75eaosq2] {
    border-color: var(--color-accent, #7c3aed);
    transform: translateY(-2px);
}

.admin-nav-icon[b-ma75eaosq2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.4rem;
    font-weight: 900;
    background: var(--color-accent, #7c3aed);
    color: #fff;
    border-radius: 0.5rem;
}

.admin-nav-label[b-ma75eaosq2] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text-primary);
}

.admin-nav-desc[b-ma75eaosq2] {
    font-size: 0.8rem;
    color: var(--color-text-muted, #94a3b8);
    text-align: center;
    line-height: 1.4;
}
/* /Components/Pages/Admin/Seasons.razor.rz.scp.css */
/* ── Admin page layout ──────────────────────────────────────────────── */

.admin-page[b-ohha5vt8hn] {
    width: min(600px, 100%);
    margin: 2rem auto;
    padding: 0 1rem;
}

.admin-header[b-ohha5vt8hn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.admin-title[b-ohha5vt8hn] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0;
}

.admin-back-link[b-ohha5vt8hn] {
    font-size: 0.85rem;
    color: var(--color-accent, #7c3aed);
    text-decoration: none;
}

.admin-back-link:hover[b-ohha5vt8hn] {
    text-decoration: underline;
}

.admin-error[b-ohha5vt8hn] {
    text-align: center;
    padding: 3rem 1rem;
    font-size: 1.1rem;
    color: #ef4444;
    font-weight: 700;
}

.admin-loading[b-ohha5vt8hn] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.admin-empty[b-ohha5vt8hn] {
    text-align: center;
    padding: 1.5rem;
    color: var(--color-text-muted, #94a3b8);
    font-style: italic;
}

/* ── Sections ──────────────────────────────────────────────────────── */

.admin-section[b-ohha5vt8hn] {
    margin-bottom: 2.5rem;
}

.admin-section-title[b-ohha5vt8hn] {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

/* ── Cards ─────────────────────────────────────────────────────────── */

.admin-card[b-ohha5vt8hn] {
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.admin-card--highlight[b-ohha5vt8hn] {
    border-color: var(--color-accent, #7c3aed);
    border-width: 2px;
}

.admin-card-row[b-ohha5vt8hn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
}

.admin-card-row + .admin-card-row[b-ohha5vt8hn] {
    border-top: 1px solid var(--color-border, #3a3a4a);
}

.admin-label[b-ohha5vt8hn] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-value[b-ohha5vt8hn] {
    font-size: 0.95rem;
    color: var(--color-text-primary);
    font-weight: 600;
}

/* ── Badges ────────────────────────────────────────────────────────── */

.admin-badge[b-ohha5vt8hn] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
}

.admin-badge--auto[b-ohha5vt8hn] {
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.admin-badge--manual[b-ohha5vt8hn] {
    background: rgba(13, 148, 136, 0.15);
    color: #5eead4;
    border: 1px solid rgba(13, 148, 136, 0.3);
}

/* ── Forms ──────────────────────────────────────────────────────────── */

.admin-form[b-ohha5vt8hn] {
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-top: 1rem;
}

.admin-form-title[b-ohha5vt8hn] {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin: 0 0 1rem;
}

.admin-form-row[b-ohha5vt8hn] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.admin-form-label[b-ohha5vt8hn] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-input[b-ohha5vt8hn] {
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--color-surface-1, #111827);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s;
}

.admin-input:focus[b-ohha5vt8hn] {
    border-color: var(--color-accent, #7c3aed);
}

.admin-form-actions[b-ohha5vt8hn] {
    margin-top: 1rem;
}

.admin-btn[b-ohha5vt8hn] {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: opacity 0.15s;
}

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

.admin-btn--primary[b-ohha5vt8hn] {
    background: var(--color-accent, #7c3aed);
    color: #fff;
}

.admin-btn--primary:hover:not(:disabled)[b-ohha5vt8hn] {
    opacity: 0.85;
}

.admin-message[b-ohha5vt8hn] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.admin-message--success[b-ohha5vt8hn] {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.admin-message--error[b-ohha5vt8hn] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ── Table ──────────────────────────────────────────────────────────── */

.admin-table-wrap[b-ohha5vt8hn] {
    overflow-x: auto;
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
}

.admin-table[b-ohha5vt8hn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-table th[b-ohha5vt8hn] {
    text-align: left;
    padding: 0.75rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #94a3b8);
    background: var(--color-surface-2, #1e1e2e);
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.admin-table td[b-ohha5vt8hn] {
    padding: 0.65rem 0.85rem;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.admin-table tbody tr:last-child td[b-ohha5vt8hn] {
    border-bottom: none;
}

.admin-table tbody tr:hover[b-ohha5vt8hn] {
    background: rgba(124, 58, 237, 0.05);
}

[b-ohha5vt8hn] .admin-row--active {
    background: rgba(124, 58, 237, 0.08);
}

[b-ohha5vt8hn] .admin-row--active td {
    font-weight: 600;
}

code[b-ohha5vt8hn] {
    font-size: 0.85em;
    padding: 0.1rem 0.35rem;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 0.25rem;
    color: #a78bfa;
}
/* /Components/Pages/Admin/ShopManager.razor.rz.scp.css */
/* ── Admin Shop Manager ─────────────────────────────────────────────── */

.adm-shop[b-y7r3e7b6ib] {
    width: min(800px, 100%);
    margin: 2rem auto;
    padding: 0 1rem 3rem;
    box-sizing: border-box;
}

.adm-shop-header[b-y7r3e7b6ib] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.adm-shop-title[b-y7r3e7b6ib] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0;
}

.adm-shop-back[b-y7r3e7b6ib] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-accent, #7c3aed);
    text-decoration: none;
}

.adm-shop-error[b-y7r3e7b6ib] {
    text-align: center;
    padding: 3rem;
    color: #ef4444;
    font-weight: 700;
}

.adm-shop-loading[b-y7r3e7b6ib] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.adm-shop-empty[b-y7r3e7b6ib] {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-muted, #94a3b8);
    font-style: italic;
}

/* ── Messages ──────────────────────────────────────────────────────── */

.adm-shop-msg[b-y7r3e7b6ib] {
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.adm-shop-msg--ok[b-y7r3e7b6ib] {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.adm-shop-msg--error[b-y7r3e7b6ib] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ── Tabs ──────────────────────────────────────────────────────────── */

.adm-shop-tabs[b-y7r3e7b6ib] {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
    padding-bottom: 0.75rem;
}

.adm-tab[b-y7r3e7b6ib] {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.4rem;
    background: transparent;
    color: var(--color-text-secondary, #cbd5e1);
    cursor: pointer;
    transition: all 0.15s;
}

.adm-tab:hover[b-y7r3e7b6ib] {
    border-color: var(--color-accent, #7c3aed);
    color: var(--color-text-primary);
}

.adm-tab--active[b-y7r3e7b6ib] {
    background: var(--color-accent, #7c3aed);
    border-color: var(--color-accent, #7c3aed);
    color: #fff;
}

/* ── Editor ────────────────────────────────────────────────────────── */

.adm-shop-editor[b-y7r3e7b6ib] {
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.adm-shop-section-title[b-y7r3e7b6ib] {
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
    margin: 0 0 1rem;
}

/* ── Form Fields ───────────────────────────────────────────────────── */

.adm-form-row[b-y7r3e7b6ib] {
    margin-bottom: 0.75rem;
}

.adm-form-row label[b-y7r3e7b6ib] {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-secondary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.adm-form-row input[b-y7r3e7b6ib],
.adm-form-row textarea[b-y7r3e7b6ib],
.adm-form-row select[b-y7r3e7b6ib] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--input-bg, #1f2937);
    color: var(--input-text, #f1f5f9);
    border: 1px solid var(--input-border, #374151);
    border-radius: 0.35rem;
    box-sizing: border-box;
}

.adm-form-row input[type="checkbox"][b-y7r3e7b6ib] {
    width: auto;
    margin-right: 0.35rem;
}

.adm-form-row--inline[b-y7r3e7b6ib] {
    display: flex;
    gap: 0.75rem;
}

.adm-form-row--inline > div[b-y7r3e7b6ib] {
    flex: 1;
}

.adm-form-section[b-y7r3e7b6ib] {
    border-top: 1px solid var(--color-border, #3a3a4a);
    margin-top: 1rem;
    padding-top: 0.75rem;
}

.adm-form-section h3[b-y7r3e7b6ib] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.adm-form-section-header[b-y7r3e7b6ib] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.adm-form-section-header h3[b-y7r3e7b6ib] {
    margin: 0;
}

.adm-toggle-btn[b-y7r3e7b6ib] {
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: inherit;
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.3rem;
    background: transparent;
    color: var(--color-accent, #7c3aed);
    cursor: pointer;
}

.adm-json-editor[b-y7r3e7b6ib] {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    resize: vertical;
}

/* ── Theme Fields ──────────────────────────────────────────────────── */

.adm-theme-field[b-y7r3e7b6ib] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.adm-theme-field label[b-y7r3e7b6ib] {
    width: 140px;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-secondary, #94a3b8);
    text-align: right;
}

.adm-theme-field input[b-y7r3e7b6ib] {
    flex: 1;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
    background: var(--input-bg, #1f2937);
    color: var(--input-text, #f1f5f9);
    border: 1px solid var(--input-border, #374151);
    border-radius: 0.3rem;
}

/* ── Form Actions ──────────────────────────────────────────────────── */

.adm-form-actions[b-y7r3e7b6ib] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border, #3a3a4a);
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.adm-btn[b-y7r3e7b6ib] {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 0.35rem;
    cursor: pointer;
    transition: opacity 0.15s;
}

.adm-btn:disabled[b-y7r3e7b6ib] {
    opacity: 0.4;
    cursor: not-allowed;
}

.adm-btn--primary[b-y7r3e7b6ib] {
    background: var(--color-accent, #7c3aed);
    color: #fff;
}

.adm-btn--secondary[b-y7r3e7b6ib] {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.adm-btn--danger[b-y7r3e7b6ib] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.adm-btn--small[b-y7r3e7b6ib] {
    padding: 0.25rem 0.6rem;
    font-size: 0.72rem;
}

.adm-btn:hover:not(:disabled)[b-y7r3e7b6ib] {
    opacity: 0.85;
}

/* ── Filter ────────────────────────────────────────────────────────── */

.adm-shop-filter[b-y7r3e7b6ib] {
    margin-bottom: 1rem;
}

.adm-shop-filter select[b-y7r3e7b6ib] {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    font-family: inherit;
    background: var(--input-bg, #1f2937);
    color: var(--input-text, #f1f5f9);
    border: 1px solid var(--input-border, #374151);
    border-radius: 0.35rem;
}

/* ── Item List ─────────────────────────────────────────────────────── */

.adm-shop-list[b-y7r3e7b6ib] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.adm-item-row[b-y7r3e7b6ib] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.5rem;
    transition: border-color 0.15s;
}

.adm-item-row:hover[b-y7r3e7b6ib] {
    border-color: var(--color-text-muted, #94a3b8);
}

/* Rarity borders */
.adm-item-row.rarity-common[b-y7r3e7b6ib] { border-left: 3px solid #9ca3af; }
.adm-item-row.rarity-rare[b-y7r3e7b6ib] { border-left: 3px solid #7c3aed; }
.adm-item-row.rarity-epic[b-y7r3e7b6ib] { border-left: 3px solid #ec4899; }
.adm-item-row.rarity-legendary[b-y7r3e7b6ib] { border-left: 3px solid #f59e0b; }

.rarity-text-common[b-y7r3e7b6ib] { color: #9ca3af; background: rgba(107, 114, 128, 0.15); }
.rarity-text-rare[b-y7r3e7b6ib] { color: #a78bfa; background: rgba(124, 58, 237, 0.15); }
.rarity-text-epic[b-y7r3e7b6ib] { color: #f472b6; background: rgba(236, 72, 153, 0.15); }
.rarity-text-legendary[b-y7r3e7b6ib] { color: #fbbf24; background: rgba(245, 158, 11, 0.15); }

.adm-item-info[b-y7r3e7b6ib] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.adm-item-name[b-y7r3e7b6ib] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-text-primary);
}

.adm-item-meta[b-y7r3e7b6ib] {
    font-size: 0.7rem;
    color: var(--color-text-muted, #94a3b8);
}

.adm-item-actions[b-y7r3e7b6ib] {
    display: flex;
    gap: 0.35rem;
}

/* ── Bundle Picker ─────────────────────────────────────────────────── */

.adm-bundle-selected[b-y7r3e7b6ib] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.adm-bundle-chip[b-y7r3e7b6ib] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(124, 58, 237, 0.15);
    color: var(--color-accent, #7c3aed);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 0.3rem;
}

.adm-bundle-chip button[b-y7r3e7b6ib] {
    background: none;
    border: none;
    color: #f87171;
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
    padding: 0 0.15rem;
    font-family: inherit;
}

.adm-form-section select[b-y7r3e7b6ib] {
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    font-family: inherit;
    background: var(--input-bg, #1f2937);
    color: var(--input-text, #f1f5f9);
    border: 1px solid var(--input-border, #374151);
    border-radius: 0.35rem;
}

/* ── Preview ───────────────────────────────────────────────────────── */

.adm-preview[b-y7r3e7b6ib] {
    display: flex;
    justify-content: center;
    padding: 0.75rem;
    background: var(--color-surface-3, #16162a);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.5rem;
}

.adm-preview-tiles[b-y7r3e7b6ib] {
    display: flex;
    gap: 3px;
}

.adm-preview-tile[b-y7r3e7b6ib] {
    width: 2.5rem;
    height: 2.5rem;
    border: 1.5px solid;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
}

.adm-preview-grid[b-y7r3e7b6ib] {
    display: grid;
    grid-template-columns: repeat(3, 2rem);
    grid-template-rows: repeat(3, 2rem);
    gap: 2px;
    border-radius: 4px;
    padding: 4px;
}

.adm-preview-cell[b-y7r3e7b6ib] {
    border: 1px solid;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adm-preview-mult[b-y7r3e7b6ib] {
    font-size: 0.5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

.adm-preview-bg[b-y7r3e7b6ib] {
    width: 100%;
    height: 4rem;
    border-radius: 4px;
    border: 1px solid var(--color-border, #3a3a4a);
}

.adm-preview-flair[b-y7r3e7b6ib] {
    padding: 0.4rem 1rem;
    border: 2px solid;
    border-radius: 0.35rem;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.adm-preview-na[b-y7r3e7b6ib] {
    font-size: 0.8rem;
    color: var(--color-text-muted, #94a3b8);
    font-style: italic;
}

/* ── AI Theme Generator ───────────────────────────────────────────── */

.adm-ai-gen[b-y7r3e7b6ib] {
    margin-bottom: 0.75rem;
}

.adm-ai-gen-row[b-y7r3e7b6ib] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.adm-ai-gen-input[b-y7r3e7b6ib] {
    flex: 1;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    font-family: inherit;
    background: var(--input-bg, #1f2937);
    color: var(--input-text, #f1f5f9);
    border: 1px solid var(--color-accent, #7c3aed);
    border-radius: 0.35rem;
    box-sizing: border-box;
}

.adm-ai-gen-input[b-y7r3e7b6ib]::placeholder {
    color: var(--color-text-muted, #94a3b8);
    font-style: italic;
}

.adm-ai-gen-error[b-y7r3e7b6ib] {
    font-size: 0.75rem;
    color: #f87171;
    margin-top: 0.35rem;
}

/* ── Upload Button in Theme Fields ────────────────────────────────── */

.adm-theme-field .adm-btn[b-y7r3e7b6ib] {
    flex-shrink: 0;
}

/* ── Theme Group Labels ──────────────────────────────────────────── */

.adm-theme-group-label[b-y7r3e7b6ib] {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent, #7c3aed);
    margin: 0.75rem 0 0.35rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

/* ── Board Skin Preview ──────────────────────────────────────────── */

.adm-preview--board[b-y7r3e7b6ib] {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.adm-preview-hud[b-y7r3e7b6ib] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid;
    border-radius: 4px;
    width: 100%;
    max-width: 200px;
}

.adm-preview-stage[b-y7r3e7b6ib] {
    display: flex;
    gap: 2px;
    padding: 4px;
    border-radius: 4px;
}

.adm-preview-slot[b-y7r3e7b6ib] {
    width: 1.4rem;
    height: 1.4rem;
    border: 1px dashed;
    border-radius: 2px;
}

.adm-preview-buttons[b-y7r3e7b6ib] {
    display: flex;
    gap: 0.4rem;
}

.adm-preview-btn[b-y7r3e7b6ib] {
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    border: none;
}

.adm-preview-btn--outline[b-y7r3e7b6ib] {
    background: transparent;
    border: 1px solid;
}
/* /Components/Pages/Admin/Words.razor.rz.scp.css */
/* ── Admin shared styles (scoped per-component by Blazor CSS isolation) ── */

.admin-page[b-qpxi7q7jsj] {
    width: min(600px, 100%);
    margin: 2rem auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

.admin-header[b-qpxi7q7jsj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.admin-title[b-qpxi7q7jsj] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0;
}

.admin-back-link[b-qpxi7q7jsj] {
    font-size: 0.85rem;
    color: var(--color-accent, #7c3aed);
    text-decoration: none;
}

.admin-back-link:hover[b-qpxi7q7jsj] {
    text-decoration: underline;
}

.admin-error[b-qpxi7q7jsj] {
    text-align: center;
    padding: 3rem 1rem;
    font-size: 1.1rem;
    color: #ef4444;
    font-weight: 700;
}

.admin-btn[b-qpxi7q7jsj] {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    background: var(--color-accent, #7c3aed);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: opacity 0.15s;
}

.admin-btn:hover:not(:disabled)[b-qpxi7q7jsj] {
    opacity: 0.85;
}

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

.admin-message[b-qpxi7q7jsj] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.admin-message--success[b-qpxi7q7jsj] {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.admin-message--error[b-qpxi7q7jsj] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ── Reconcile-specific styles ────────────────────────────────────── */

.reconcile-section[b-qpxi7q7jsj] {
    margin-bottom: 1.5rem;
}

.reconcile-desc[b-qpxi7q7jsj] {
    color: var(--color-text-muted, #94a3b8);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.reconcile-result[b-qpxi7q7jsj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.reconcile-stat[b-qpxi7q7jsj] {
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.reconcile-stat-label[b-qpxi7q7jsj] {
    font-size: 0.8rem;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.reconcile-stat-value[b-qpxi7q7jsj] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary, #fff);
}

.reconcile-stat-value--highlight[b-qpxi7q7jsj] {
    color: var(--color-accent, #7c3aed);
}

[b-qpxi7q7jsj] .loading-spinner--small {
    width: 16px;
    height: 16px;
    border-width: 2px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
}
/* /Components/Pages/Blog.razor.rz.scp.css */
.blog-page[b-v79d79j2cm] {
    max-width: 700px;
    margin: 2rem auto;
    padding: 0 1rem 3rem;
}

.blog-title[b-v79d79j2cm] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem;
}

.blog-intro[b-v79d79j2cm] {
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 2.5rem;
}

/* ── Post ─────────────────────────────────────────────────────────── */

.blog-post[b-v79d79j2cm] {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.blog-post:last-child[b-v79d79j2cm] {
    border-bottom: none;
}

.blog-post-meta[b-v79d79j2cm] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent, #7c3aed);
    margin-bottom: 0.5rem;
}

.blog-post-title[b-v79d79j2cm] {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    color: var(--color-text-primary);
    margin: 0 0 1rem;
}

.blog-post-subtitle[b-v79d79j2cm] {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin: 1.25rem 0 0.5rem;
}

.blog-post p[b-v79d79j2cm] {
    font-size: 0.9rem;
    color: var(--color-text-secondary, #cbd5e1);
    line-height: 1.7;
    margin: 0 0 0.75rem;
}

.blog-post-sign-off[b-v79d79j2cm] {
    font-style: italic;
    color: var(--color-text-muted, #94a3b8) !important;
    margin-top: 1.5rem !important;
}
/* /Components/Pages/Board.razor.rz.scp.css */
/* ── Page layout ────────────────────────────────────────────────────── */

.board-page[b-t7nr0mz9mv] {
    max-width: 640px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.board-loading[b-t7nr0mz9mv],
.board-not-found[b-t7nr0mz9mv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.loading-spinner[b-t7nr0mz9mv] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-border, #3a3a4a);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin-b-t7nr0mz9mv 0.7s linear infinite;
}

@keyframes spin-b-t7nr0mz9mv {
    to { transform: rotate(360deg); }
}

/* ── Header ────────────────────────────────────────────────────────── */

.board-header[b-t7nr0mz9mv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.board-date-heading[b-t7nr0mz9mv] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--color-accent);
    margin: 0;
}

.board-name[b-t7nr0mz9mv] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.03em;
}

/* ── Cards ─────────────────────────────────────────────────────────── */

.stat-card[b-t7nr0mz9mv] {
    background-color: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.card-title[b-t7nr0mz9mv] {
    display: flex;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

/* ── Stat grid ─────────────────────────────────────────────────────── */

.stat-grid[b-t7nr0mz9mv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    gap: 1rem;
    text-align: center;
}

.stat-item[b-t7nr0mz9mv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.stat-value[b-t7nr0mz9mv] {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-text-primary);
    line-height: 1;
}

.stat-value--accent[b-t7nr0mz9mv] {
    color: var(--color-accent);
}

.stat-label[b-t7nr0mz9mv] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* ── Leaderboard ───────────────────────────────────────────────────── */

.leaderboard[b-t7nr0mz9mv] {
    display: flex;
    flex-direction: column;
}

.lb-header[b-t7nr0mz9mv] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.lb-row[b-t7nr0mz9mv] {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background-color 0.15s;
}

.lb-row--link[b-t7nr0mz9mv] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.lb-row:hover[b-t7nr0mz9mv] {
    background-color: rgba(139, 92, 246, 0.06);
}

.lb-player-name[b-t7nr0mz9mv] {
    color: var(--color-accent);
}

.lb-col-rank[b-t7nr0mz9mv] {
    width: 2rem;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--color-accent);
}

.lb-col-player[b-t7nr0mz9mv] {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.lb-col-player a[b-t7nr0mz9mv] {
    color: var(--color-accent);
    text-decoration: none;
}

.lb-col-player a:hover[b-t7nr0mz9mv] {
    text-decoration: underline;
}

.anon-player[b-t7nr0mz9mv] {
    color: var(--color-text-secondary);
    font-style: italic;
}

.wordist-badge[b-t7nr0mz9mv] {
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background-color: rgba(139, 92, 246, 0.2);
    color: var(--color-accent);
    flex-shrink: 0;
}

.lb-col-words[b-t7nr0mz9mv] {
    width: 3.5rem;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.lb-col-score[b-t7nr0mz9mv] {
    width: 3.5rem;
    text-align: right;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--color-text-primary);
}

/* ── Popular Words ─────────────────────────────────────────────────── */

.word-list[b-t7nr0mz9mv] {
    display: flex;
    flex-direction: column;
}

.word-row[b-t7nr0mz9mv] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.88rem;
}

.word-text[b-t7nr0mz9mv] {
    flex: 1;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--color-accent);
    text-decoration: none;
}

.word-text:hover[b-t7nr0mz9mv] {
    text-decoration: underline;
}

.word-plays[b-t7nr0mz9mv] {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    margin-right: 1rem;
}

.word-high[b-t7nr0mz9mv] {
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--color-text-primary);
}

/* ── All Sessions ─────────────────────────────────────────────────── */

.all-sessions-list[b-t7nr0mz9mv] {
    max-height: 400px;
    overflow-y: auto;
}

.first-try-badge[b-t7nr0mz9mv] {
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    flex-shrink: 0;
}

.conceded-badge[b-t7nr0mz9mv] {
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background-color: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    flex-shrink: 0;
}
/* /Components/Pages/BugReport.razor.rz.scp.css */
.bug-report-page[b-doxbskyg99] {
    max-width: 600px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.bug-report-title[b-doxbskyg99] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem;
}

.bug-report-subtitle[b-doxbskyg99] {
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
}

.bug-report-form[b-doxbskyg99] {
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.bug-report-field[b-doxbskyg99] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.bug-report-label[b-doxbskyg99] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bug-report-textarea[b-doxbskyg99],
.bug-report-input[b-doxbskyg99] {
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--color-surface-1, #111827);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s;
    resize: vertical;
}

.bug-report-textarea:focus[b-doxbskyg99],
.bug-report-input:focus[b-doxbskyg99] {
    border-color: var(--color-accent, #7c3aed);
}

.bug-report-char-count[b-doxbskyg99] {
    font-size: 0.75rem;
    color: var(--color-text-muted, #94a3b8);
    text-align: right;
}

.bug-report-actions[b-doxbskyg99] {
    margin-top: 0.5rem;
}

.bug-report-btn[b-doxbskyg99] {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: opacity 0.15s;
    background: var(--color-accent, #7c3aed);
    color: #fff;
}

.bug-report-btn:hover:not(:disabled)[b-doxbskyg99] {
    opacity: 0.85;
}

.bug-report-btn:disabled[b-doxbskyg99] {
    opacity: 0.5;
    cursor: not-allowed;
}

.bug-report-error[b-doxbskyg99] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ── Success state ─────────────────────────────────────────────────── */

.bug-report-success[b-doxbskyg99] {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
}

.bug-report-success-icon[b-doxbskyg99] {
    font-size: 2.5rem;
    color: #4ade80;
    margin-bottom: 0.75rem;
}

.bug-report-success-text[b-doxbskyg99] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
}
/* /Components/Pages/Dictionary.razor.rz.scp.css */
/* ── Page layout ────────────────────────────────────────────────────── */

.dictionary-page[b-n1iifa8rdv] {
    max-width: 640px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.dictionary-heading[b-n1iifa8rdv] {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
}

/* ── Search row ─────────────────────────────────────────────────────── */

.dictionary-search-row[b-n1iifa8rdv] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.dictionary-search-input[b-n1iifa8rdv] {
    flex: 1;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    background-color: var(--color-surface-2, #1e1e2e);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s;
}

.dictionary-search-input:focus[b-n1iifa8rdv] {
    border-color: var(--color-accent);
}

.dictionary-search-btn[b-n1iifa8rdv] {
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.04em;
    background-color: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s, opacity 0.15s;
}

.dictionary-search-btn:hover:not(:disabled)[b-n1iifa8rdv] {
    background-color: #7c3aed;
}

.dictionary-search-btn:disabled[b-n1iifa8rdv] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Loading spinner ────────────────────────────────────────────────── */

.dictionary-loading[b-n1iifa8rdv] {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.loading-spinner[b-n1iifa8rdv] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-border, #3a3a4a);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin-b-n1iifa8rdv 0.7s linear infinite;
}

@keyframes spin-b-n1iifa8rdv {
    to { transform: rotate(360deg); }
}

/* ── Not found ──────────────────────────────────────────────────────── */

.dictionary-not-found[b-n1iifa8rdv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 2rem;
    color: var(--color-text-secondary);
}

.not-found-word[b-n1iifa8rdv] {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--color-text-primary);
}

.not-found-msg[b-n1iifa8rdv] {
    font-size: 0.95rem;
}

/* ── Filter row (Recent + Alphabet) ────────────────────────────────── */

.filter-row[b-n1iifa8rdv] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.recent-btn[b-n1iifa8rdv] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background-color: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.5rem;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background-color 0.15s;
}

.recent-btn:hover[b-n1iifa8rdv] {
    border-color: var(--color-accent);
    background-color: rgba(139, 92, 246, 0.08);
}

.recent-btn--active[b-n1iifa8rdv] {
    border-color: var(--color-accent) !important;
    background-color: rgba(139, 92, 246, 0.15) !important;
}

.recent-label[b-n1iifa8rdv] {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
}

/* ── Alphabet row ───────────────────────────────────────────────────── */

.alphabet-row[b-n1iifa8rdv] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
}

.alpha-btn[b-n1iifa8rdv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.35rem 0.4rem;
    min-width: 2rem;
    background-color: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.35rem;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background-color 0.15s;
}

.alpha-btn:hover:not(:disabled)[b-n1iifa8rdv] {
    border-color: var(--color-accent);
    background-color: rgba(139, 92, 246, 0.08);
}

.alpha-btn--active[b-n1iifa8rdv] {
    border-color: var(--color-accent) !important;
    background-color: rgba(139, 92, 246, 0.15) !important;
}

.alpha-btn--empty[b-n1iifa8rdv],
.alpha-btn:disabled[b-n1iifa8rdv] {
    opacity: 0.3;
    cursor: not-allowed;
}

.alpha-letter[b-n1iifa8rdv] {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
    line-height: 1;
}

.alpha-count[b-n1iifa8rdv] {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    line-height: 1;
}

/* ── Search results list ────────────────────────────────────────────── */

.word-result-list[b-n1iifa8rdv] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.word-result-card[b-n1iifa8rdv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    background-color: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.6rem;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
    transition: border-color 0.15s, background-color 0.15s;
}

.word-result-card:hover[b-n1iifa8rdv] {
    border-color: var(--color-accent);
    background-color: rgba(139, 92, 246, 0.08);
}

.word-result-left[b-n1iifa8rdv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.word-result-word[b-n1iifa8rdv] {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--color-text-primary);
}

.word-result-discoverer[b-n1iifa8rdv] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.word-result-og[b-n1iifa8rdv] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #d4a017;
    color: #d4a017;
    background-color: rgba(212, 160, 23, 0.12);
    white-space: nowrap;
}

.word-result-meta[b-n1iifa8rdv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.word-result-length[b-n1iifa8rdv] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

/* ── Infinite scroll sentinel ──────────────────────────────────────── */

.scroll-sentinel[b-n1iifa8rdv] {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
    min-height: 1px;
}

.loading-spinner--small[b-n1iifa8rdv] {
    width: 1.4rem;
    height: 1.4rem;
    border-width: 2px;
}
/* /Components/Pages/DictionaryWord.razor.rz.scp.css */
/* ── Page shell ─────────────────────────────────────────────────────── */

.word-entry-page[b-oouzoe7bn0] {
    max-width: 640px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* ── Back link ──────────────────────────────────────────────────────── */

.word-entry-back[b-oouzoe7bn0] {
    display: inline-block;
    margin-bottom: 1.25rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.15s;
}

.word-entry-back:hover[b-oouzoe7bn0] {
    color: var(--color-accent);
}

/* ── Loading spinner ────────────────────────────────────────────────── */

.word-entry-loading[b-oouzoe7bn0] {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.loading-spinner[b-oouzoe7bn0] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-border, #3a3a4a);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin-b-oouzoe7bn0 0.7s linear infinite;
}

@keyframes spin-b-oouzoe7bn0 {
    to { transform: rotate(360deg); }
}

/* ── Not found ──────────────────────────────────────────────────────── */

.word-entry-not-found[b-oouzoe7bn0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 2rem;
    color: var(--color-text-secondary);
}

.not-found-word[b-oouzoe7bn0] {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--color-text-primary);
}

.not-found-msg[b-oouzoe7bn0] {
    font-size: 0.95rem;
}

/* ── Word card ──────────────────────────────────────────────────────── */

.dictionary-word-card[b-oouzoe7bn0] {
    background-color: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    overflow: hidden;
}

.word-card-header[b-oouzoe7bn0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background-color: var(--color-surface-3, #16162a);
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.word-card-text[b-oouzoe7bn0] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--color-text-primary);
}

/* ── Header left group (word + tags, wrapping) ─────────────────────── */

.word-card-header-left[b-oouzoe7bn0] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* ── Content tags ──────────────────────────────────────────────────── */

.word-tag[b-oouzoe7bn0] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.word-tag--vulgar[b-oouzoe7bn0]     { background-color: rgba(239, 68, 68, 0.15);  color: #f87171; border-color: rgba(239, 68, 68, 0.3); }
.word-tag--sexual[b-oouzoe7bn0]     { background-color: rgba(236, 72, 153, 0.15); color: #f472b6; border-color: rgba(236, 72, 153, 0.3); }
.word-tag--mature[b-oouzoe7bn0]     { background-color: rgba(251, 146, 60, 0.15); color: #fb923c; border-color: rgba(251, 146, 60, 0.3); }
.word-tag--drug-reference[b-oouzoe7bn0] { background-color: rgba(163, 230, 53, 0.15); color: #a3e635; border-color: rgba(163, 230, 53, 0.3); }
.word-tag--violent[b-oouzoe7bn0]    { background-color: rgba(220, 38, 38, 0.15);  color: #ef4444; border-color: rgba(220, 38, 38, 0.3); }
.word-tag--offensive[b-oouzoe7bn0]  { background-color: rgba(249, 115, 22, 0.15); color: #f97316; border-color: rgba(249, 115, 22, 0.3); }
.word-tag--slang[b-oouzoe7bn0]      { background-color: rgba(56, 189, 248, 0.15); color: #38bdf8; border-color: rgba(56, 189, 248, 0.3); }
.word-tag--archaic[b-oouzoe7bn0]    { background-color: rgba(168, 162, 158, 0.15); color: #a8a29e; border-color: rgba(168, 162, 158, 0.3); }
.word-tag--medical[b-oouzoe7bn0]    { background-color: rgba(34, 197, 94, 0.15);  color: #22c55e; border-color: rgba(34, 197, 94, 0.3); }

/* ── Claim holders (below header) ──────────────────────────────────── */

.word-card-claimants[b-oouzoe7bn0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding: 0.55rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
    background-color: var(--color-surface-3, #16162a);
}

.claimant-row[b-oouzoe7bn0] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.claimant-label[b-oouzoe7bn0] {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
}

.claimant-row--og .claimant-label[b-oouzoe7bn0] {
    background-color: rgba(217, 119, 6, 0.15);
    color: #d97706;
    border: 1px solid rgba(217, 119, 6, 0.4);
}

.claimant-row--season .claimant-label[b-oouzoe7bn0] {
    background-color: rgba(139, 92, 246, 0.12);
    color: var(--color-accent);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.claimant-row--vacant .claimant-label[b-oouzoe7bn0] {
    background-color: rgba(139, 92, 246, 0.12);
    color: var(--color-accent);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.claimant-handle[b-oouzoe7bn0] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color 0.15s;
}

.claimant-handle:hover[b-oouzoe7bn0] {
    color: var(--color-accent);
}

.claimant-vacant[b-oouzoe7bn0] {
    font-size: 0.82rem;
    font-weight: 600;
    font-style: italic;
    color: var(--color-text-secondary);
}

/* ── Parts of speech pills ──────────────────────────────────────────── */

.word-card-pos[b-oouzoe7bn0] {
    display: flex;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.pronunciation[b-oouzoe7bn0] {
    font-size: 0.88rem;
    font-style: italic;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
}

.pos-pill[b-oouzoe7bn0] {
    font-size: 0.72rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background-color: rgba(139, 92, 246, 0.12);
    color: var(--color-accent);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* ── Generic word section ───────────────────────────────────────────── */

.word-section[b-oouzoe7bn0] {
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.word-section-title[b-oouzoe7bn0] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 0.65rem;
}

/* ── Definitions ────────────────────────────────────────────────────── */

.definition-list[b-oouzoe7bn0] {
    margin: 0;
    padding-left: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.definition-item[b-oouzoe7bn0] {
    font-size: 0.92rem;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.def-pos[b-oouzoe7bn0] {
    font-size: 0.7rem;
    font-weight: 700;
    font-style: italic;
    color: var(--color-accent);
    margin-right: 0.4rem;
}

/* ── Synonyms ──────────────────────────────────────────────────────── */

.synonym-list[b-oouzoe7bn0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.synonym-chip[b-oouzoe7bn0] {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background-color: rgba(139, 92, 246, 0.08);
    color: var(--color-accent);
    border: 1px solid rgba(139, 92, 246, 0.25);
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s;
}

.synonym-chip:hover[b-oouzoe7bn0] {
    background-color: rgba(139, 92, 246, 0.18);
    border-color: var(--color-accent);
}

/* ── Generational Usage ─────────────────────────────────────────────── */

.gen-usage-list[b-oouzoe7bn0] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.gen-usage-row[b-oouzoe7bn0] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.88rem;
    padding: 0.55rem 0;
    border-left: 5px solid var(--color-border, #3a3a4a);
    padding-left: 0.75rem;
    border-radius: 2px;
}

/* Generation-specific left border colors — high-contrast, saturated */
.gen-usage-row--alpha[b-oouzoe7bn0]      { border-left-color: #e500ff; }
.gen-usage-row--genz[b-oouzoe7bn0]       { border-left-color: #3b82f6; }
.gen-usage-row--millennial[b-oouzoe7bn0] { border-left-color: #ef4444; }
.gen-usage-row--genx[b-oouzoe7bn0]       { border-left-color: #22c55e; }
.gen-usage-row--boomer[b-oouzoe7bn0]     { border-left-color: #f59e0b; }
.gen-usage-row--silent[b-oouzoe7bn0]     { border-left-color: #06b6d4; }
.gen-usage-row--greatest[b-oouzoe7bn0]   { border-left-color: #eab308; }

.gen-label[b-oouzoe7bn0] {
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    min-width: 5.5rem;
    padding-top: 0.15rem;
    flex-shrink: 0;
}

.gen-text[b-oouzoe7bn0] {
    color: var(--color-text-primary);
    font-style: italic;
    line-height: 1.45;
}

.gen-text[b-oouzoe7bn0]::before { content: '\201c'; }
.gen-text[b-oouzoe7bn0]::after  { content: '\201d'; }

[b-oouzoe7bn0] .gen-highlight {
    color: var(--color-accent);
    font-weight: 700;
    font-style: italic;
}

/* ── Play Stats ─────────────────────────────────────────────────────── */

.word-section--stats[b-oouzoe7bn0] {}

.stat-chips[b-oouzoe7bn0] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0;
}

.stat-chip[b-oouzoe7bn0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.6rem 1.25rem;
    min-width: 5.5rem;
    background-color: var(--color-surface-3, #16162a);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.5rem;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background-color 0.15s;
}

.stat-chip:hover[b-oouzoe7bn0] {
    border-color: var(--color-accent);
    background-color: rgba(139, 92, 246, 0.08);
}

.stat-chip--active[b-oouzoe7bn0] {
    border-color: var(--color-accent);
    background-color: rgba(139, 92, 246, 0.12);
}

.stat-chip--active .stat-label[b-oouzoe7bn0]::after {
    content: ' ▲';
    font-size: 0.6rem;
}

.stat-chip:not(.stat-chip--active) .stat-label[b-oouzoe7bn0]::after {
    content: ' ▼';
    font-size: 0.6rem;
}

.stat-number[b-oouzoe7bn0] {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-accent);
    line-height: 1;
}

.stat-label[b-oouzoe7bn0] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* ── Play list ──────────────────────────────────────────────────────── */

.play-list-header[b-oouzoe7bn0] {
    display: flex;
    align-items: center;
    margin-top: 0.9rem;
    margin-bottom: 0.4rem;
}

.play-list-title[b-oouzoe7bn0] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.play-list-empty[b-oouzoe7bn0] {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    font-style: italic;
    margin: 0.5rem 0 0;
}

.play-list[b-oouzoe7bn0] {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.4rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) transparent;
}

.play-list-cols[b-oouzoe7bn0] {
    display: grid;
    grid-template-columns: 1fr 4rem 6rem 3rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background-color: var(--color-surface-3, #16162a);
    border-bottom: 1px solid var(--color-border, #3a3a4a);
    position: sticky;
    top: 0;
    z-index: 1;
}

.play-col-score[b-oouzoe7bn0] {
    text-align: right;
}

.play-row[b-oouzoe7bn0] {
    display: grid;
    grid-template-columns: 1fr 4rem 6rem 3rem;
    align-items: center;
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
    transition: background-color 0.1s;
}

.play-row:last-child[b-oouzoe7bn0] {
    border-bottom: none;
}

.play-row:hover[b-oouzoe7bn0] {
    background-color: rgba(139, 92, 246, 0.05);
}

.play-date[b-oouzoe7bn0] {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    text-decoration: none;
    transition: color 0.15s;
}

.play-date:hover[b-oouzoe7bn0] {
    color: var(--color-accent);
}

.play-board[b-oouzoe7bn0] {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
    transition: opacity 0.15s;
}

.play-board:hover[b-oouzoe7bn0] {
    opacity: 0.8;
}

.play-user[b-oouzoe7bn0] {
    color: var(--color-text-primary);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s;
}

.play-user:hover[b-oouzoe7bn0] {
    color: var(--color-accent);
}

.play-score[b-oouzoe7bn0] {
    color: #4ade80;
    font-weight: 700;
    font-size: 0.82rem;
    text-align: right;
}

/* ── Claim History ──────────────────────────────────────────────────── */

.ledger-history[b-oouzoe7bn0] {
    padding: 0.9rem 1.25rem;
}

.ledger-section-title[b-oouzoe7bn0] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 0.65rem;
}

.ledger-no-claims[b-oouzoe7bn0] {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0;
    font-style: italic;
}

.ledger-history-list[b-oouzoe7bn0] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ledger-history-entry[b-oouzoe7bn0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.86rem;
    color: var(--color-text-primary);
}

.ledger-history-entry--og[b-oouzoe7bn0] {
    color: #d97706;
}

.ledger-history-seq[b-oouzoe7bn0] {
    font-weight: 700;
    font-size: 0.78rem;
    min-width: 1.8rem;
    color: var(--color-text-secondary);
}

.ledger-history-season[b-oouzoe7bn0] {
    flex: 1;
}

.ledger-history-date[b-oouzoe7bn0] {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    text-decoration: none;
    transition: color 0.15s;
}

.ledger-history-date:hover[b-oouzoe7bn0] {
    color: var(--color-accent);
}

.ledger-history-user[b-oouzoe7bn0] {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-style: italic;
    text-decoration: none;
    transition: color 0.15s;
}

.ledger-history-user:hover[b-oouzoe7bn0] {
    color: var(--color-accent);
}

.ledger-og-badge[b-oouzoe7bn0] {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background-color: rgba(217, 119, 6, 0.15);
    color: #d97706;
    border: 1px solid #d97706;
    flex-shrink: 0;
}

/* ── WOTD History ──────────────────────────────────────────────────── */

.wotd-history-list[b-oouzoe7bn0] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.wotd-history-entry[b-oouzoe7bn0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.wotd-history-entry:last-child[b-oouzoe7bn0] {
    border-bottom: none;
}

.wotd-history-category[b-oouzoe7bn0] {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    background-color: rgba(139, 92, 246, 0.12);
    color: var(--color-accent);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.wotd-history-date[b-oouzoe7bn0] {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

.wotd-history-summary[b-oouzoe7bn0] {
    width: 100%;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.hero[b-gznjc6c3kq] {
    display: flex;
    align-items: center;
    flex-direction: column;
    min-height: calc(100vh - 9.5rem);
    padding: 3rem 1.5rem;
    text-align: center;
    background-color: var(--color-bg);
}

.hero-content[b-gznjc6c3kq] {
    max-width: 560px;
}

.hero-tagline[b-gznjc6c3kq] {
    font-size: 1.1rem;
    color: var(--color-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}

.hero-description[b-gznjc6c3kq] {
    font-size: 1rem;
    color: var(--color-muted);
    line-height: 1.8;
    margin: 0 0 2.5rem;
}

.btn-play[b-gznjc6c3kq] {
    display: inline-block;
    padding: 0.9rem 2.75rem;
    background-color: var(--color-violet);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.15s, transform 0.1s;
}

.btn-play:hover[b-gznjc6c3kq] {
    background-color: #6D28D9;
    transform: scale(1.03);
}

.btn-how[b-gznjc6c3kq] {
    display: block;
    margin-top: 1rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 0.15s;
}

.btn-how:hover[b-gznjc6c3kq] {
    color: var(--color-accent);
}
/* /Components/Pages/HowToPlay.razor.rz.scp.css */
.htp-page[b-9rrjc2pfaq] {
    max-width: 700px;
    margin: 2rem auto;
    padding: 0 1rem 3rem;
}

.htp-title[b-9rrjc2pfaq] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem;
}

.htp-intro[b-9rrjc2pfaq] {
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 2rem;
}

/* ── Sections ──────────────────────────────────────────────────────── */

.htp-section[b-9rrjc2pfaq] {
    margin-bottom: 2rem;
}

.htp-section-title[b-9rrjc2pfaq] {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.htp-section p[b-9rrjc2pfaq] {
    font-size: 0.9rem;
    color: var(--color-text-secondary, #cbd5e1);
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

/* ── Subsections ───────────────────────────────────────────────────── */

.htp-sub[b-9rrjc2pfaq] {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.htp-sub-title[b-9rrjc2pfaq] {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
}

/* ── Cards ─────────────────────────────────────────────────────────── */

.htp-card-row[b-9rrjc2pfaq] {
    display: flex;
    gap: 0.75rem;
    margin: 1rem 0;
}

.htp-card[b-9rrjc2pfaq] {
    flex: 1;
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
}

.htp-card--win[b-9rrjc2pfaq] {
    border-color: rgba(34, 197, 94, 0.4);
}

.htp-card--lose[b-9rrjc2pfaq] {
    border-color: rgba(239, 68, 68, 0.4);
}

.htp-card--og[b-9rrjc2pfaq] {
    border-color: rgba(245, 158, 11, 0.4);
}

.htp-card-icon[b-9rrjc2pfaq] {
    font-size: 1.5rem;
    color: var(--color-accent, #7c3aed);
    margin-bottom: 0.4rem;
}

.htp-card-label[b-9rrjc2pfaq] {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
    margin-bottom: 0.35rem;
}

.htp-card-desc[b-9rrjc2pfaq] {
    font-size: 0.8rem;
    color: var(--color-text-muted, #94a3b8);
    line-height: 1.5;
}

/* ── Steps ─────────────────────────────────────────────────────────── */

.htp-steps[b-9rrjc2pfaq] {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0.75rem 0;
}

.htp-steps li[b-9rrjc2pfaq] {
    counter-increment: step;
    position: relative;
    padding-left: 2.25rem;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary, #cbd5e1);
    line-height: 1.5;
}

.htp-steps li[b-9rrjc2pfaq]::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--color-accent, #7c3aed);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Lists ─────────────────────────────────────────────────────────── */

.htp-list[b-9rrjc2pfaq] {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
    list-style-type: disc;
}

.htp-list li[b-9rrjc2pfaq] {
    font-size: 0.9rem;
    color: var(--color-text-secondary, #cbd5e1);
    line-height: 1.6;
    list-style-type: disc;
    margin-bottom: 0.35rem;
}

.htp-tips-list[b-9rrjc2pfaq] {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.htp-tips-list li[b-9rrjc2pfaq] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary, #cbd5e1);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.htp-tip-icon[b-9rrjc2pfaq] {
    flex-shrink: 0;
    font-size: 1rem;
}

/* ── Tip callout ───────────────────────────────────────────────────── */

.htp-tip[b-9rrjc2pfaq] {
    background: rgba(124, 58, 237, 0.08);
    border-left: 3px solid var(--color-accent, #7c3aed);
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary, #cbd5e1);
    line-height: 1.5;
}

/* ── Multiplier badges ─────────────────────────────────────────────── */

.htp-mult-row[b-9rrjc2pfaq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.htp-mult[b-9rrjc2pfaq] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.6rem;
    border-radius: 0.35rem;
}

.htp-mult--letter[b-9rrjc2pfaq] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.htp-mult--word[b-9rrjc2pfaq] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ── Display mock ──────────────────────────────────────────────────── */

.htp-display-mock[b-9rrjc2pfaq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    background: var(--color-bg, #0f172a);
    border: 1px solid var(--color-border, #3a3a4a);
    margin: 0.5rem 0;
    min-height: 2.2rem;
}

.htp-display-mock--valid[b-9rrjc2pfaq] {
    border-color: var(--color-accent, #7c3aed);
}

.htp-display-mock--dead-end[b-9rrjc2pfaq] {
    border-color: #ef4444;
}

.htp-display-mock--submitted[b-9rrjc2pfaq] {
    border-color: var(--color-accent, #7c3aed);
    opacity: 0.7;
}

.htp-mock-text[b-9rrjc2pfaq] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-text-primary);
}

.htp-mock-score[b-9rrjc2pfaq] {
    font-size: 0.85rem;
    color: var(--color-accent, #7c3aed);
    font-weight: 700;
}

.htp-mock-meta[b-9rrjc2pfaq] {
    font-size: 0.7rem;
    color: var(--color-text-secondary, #cbd5e1);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding-left: 0.35rem;
    border-left: 1px solid var(--color-border, #3a3a4a);
    white-space: nowrap;
}

.htp-mock-dead-end[b-9rrjc2pfaq] {
    font-size: 0.75rem;
    color: #ef4444;
    font-weight: 700;
    white-space: nowrap;
    padding-left: 0.35rem;
    border-left: 1px solid #ef4444;
}

/* ── Display legend ────────────────────────────────────────────────── */

.htp-display-legend[b-9rrjc2pfaq] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.75rem 0;
}

.htp-legend-item[b-9rrjc2pfaq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary, #cbd5e1);
    line-height: 1.4;
}

.htp-legend-swatch[b-9rrjc2pfaq] {
    flex-shrink: 0;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 2px;
}

.htp-legend-swatch--text[b-9rrjc2pfaq] {
    background: var(--color-text-primary, #e2e8f0);
}

.htp-legend-swatch--score[b-9rrjc2pfaq] {
    background: var(--color-accent, #7c3aed);
}

.htp-legend-swatch--meta[b-9rrjc2pfaq] {
    background: var(--color-text-secondary, #cbd5e1);
    opacity: 0.6;
}

/* ── Divider ───────────────────────────────────────────────────────── */

.htp-divider[b-9rrjc2pfaq] {
    border: none;
    border-top: 1px solid var(--color-border, #3a3a4a);
    margin: 2.5rem 0;
}

/* ── Inline link ───────────────────────────────────────────────────── */

.htp-inline-link[b-9rrjc2pfaq] {
    color: var(--color-accent, #7c3aed);
    text-decoration: none;
    font-weight: 700;
}

.htp-inline-link:hover[b-9rrjc2pfaq] {
    text-decoration: underline;
}

/* ── Tier table ────────────────────────────────────────────────────── */

.htp-tier-table[b-9rrjc2pfaq] {
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    overflow: hidden;
    margin: 0.75rem 0;
}

.htp-tier-row[b-9rrjc2pfaq] {
    display: grid;
    grid-template-columns: 7rem 1fr 6rem;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary, #cbd5e1);
    align-items: center;
}

.htp-tier-row + .htp-tier-row[b-9rrjc2pfaq] {
    border-top: 1px solid var(--color-border, #3a3a4a);
}

.htp-tier-row--header[b-9rrjc2pfaq] {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #94a3b8);
    background: var(--color-surface-2, #1e1e2e);
}

.htp-tier[b-9rrjc2pfaq] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    width: fit-content;
}

.htp-tier--legendary[b-9rrjc2pfaq] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.htp-tier--rare[b-9rrjc2pfaq] {
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.htp-tier--common[b-9rrjc2pfaq] {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* ── Rewards grid ──────────────────────────────────────────────────── */

.htp-rewards-grid[b-9rrjc2pfaq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.6rem;
    margin: 1rem 0;
}

.htp-reward-item[b-9rrjc2pfaq] {
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.6rem;
    padding: 0.75rem;
    text-align: center;
}

.htp-reward-amount[b-9rrjc2pfaq] {
    display: block;
    font-size: 1.1rem;
    font-weight: 900;
    color: #4ade80;
}

.htp-reward-label[b-9rrjc2pfaq] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #94a3b8);
    margin-bottom: 0.25rem;
}

.htp-reward-desc[b-9rrjc2pfaq] {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary, #cbd5e1);
    line-height: 1.4;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 500px) {
    .htp-card-row[b-9rrjc2pfaq] {
        flex-direction: column;
    }
}
/* /Components/Pages/Inventory.razor.rz.scp.css */
/* ── Inventory page ─────────────────────────────────────────────────── */

.inv-page[b-n3zcklg2mm] {
    width: min(600px, 100%);
    margin: 2rem auto;
    padding: 0 1rem 3rem;
    box-sizing: border-box;
}

.inv-title[b-n3zcklg2mm] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0 0 1.25rem;
}

.inv-loading[b-n3zcklg2mm] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.inv-empty[b-n3zcklg2mm] {
    text-align: center;
    padding: 3rem 1rem;
    font-size: 1rem;
    color: var(--color-text-muted, #94a3b8);
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
}

.inv-empty a[b-n3zcklg2mm] {
    color: var(--color-accent, #7c3aed);
    font-weight: 700;
}

/* ── Auth gate ─────────────────────────────────────────────────────── */

.inv-auth-gate[b-n3zcklg2mm] {
    text-align: center;
    padding: 4rem 1rem;
}

.inv-auth-gate h1[b-n3zcklg2mm] {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.inv-auth-gate p[b-n3zcklg2mm] {
    color: var(--color-text-muted, #94a3b8);
    margin-bottom: 1.5rem;
}

.inv-cta[b-n3zcklg2mm] {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    background: var(--color-accent, #7c3aed);
    color: #fff;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: opacity 0.15s;
}

.inv-cta:hover[b-n3zcklg2mm] {
    opacity: 0.85;
}

/* ── Messages ──────────────────────────────────────────────────────── */

.inv-message[b-n3zcklg2mm] {
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.inv-message--success[b-n3zcklg2mm] {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.inv-message--error[b-n3zcklg2mm] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ── Tabs ──────────────────────────────────────────────────────────── */

.inv-tabs[b-n3zcklg2mm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
    padding-bottom: 0.75rem;
}

.inv-tab[b-n3zcklg2mm] {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.4rem;
    background: transparent;
    color: var(--color-text-secondary, #cbd5e1);
    cursor: pointer;
    transition: all 0.15s;
}

.inv-tab:hover[b-n3zcklg2mm] {
    border-color: var(--color-accent, #7c3aed);
    color: var(--color-text-primary);
}

.inv-tab--active[b-n3zcklg2mm] {
    background: var(--color-accent, #7c3aed);
    border-color: var(--color-accent, #7c3aed);
    color: #fff;
}

/* ── Sections ──────────────────────────────────────────────────────── */

.inv-section[b-n3zcklg2mm] {
    margin-bottom: 2rem;
}

.inv-section-title[b-n3zcklg2mm] {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0 0 0.75rem;
}

/* ── Current Loadout ───────────────────────────────────────────────── */

.inv-loadout[b-n3zcklg2mm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.inv-loadout-slot[b-n3zcklg2mm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-accent, #7c3aed);
    border-radius: 0.5rem;
}

.inv-loadout-category[b-n3zcklg2mm] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent, #7c3aed);
}

.inv-loadout-name[b-n3zcklg2mm] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.inv-loadout-empty[b-n3zcklg2mm] {
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.85rem;
    margin: 0;
}

/* ── Grid ──────────────────────────────────────────────────────────── */

.inv-grid[b-n3zcklg2mm] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (max-width: 700px) {
    .inv-grid[b-n3zcklg2mm] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Cards ─────────────────────────────────────────────────────────── */

.inv-card[b-n3zcklg2mm] {
    position: relative;
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: border-color 0.15s;
}

.inv-card:hover[b-n3zcklg2mm] {
    border-color: var(--color-text-muted, #94a3b8);
}

.inv-card--equipped[b-n3zcklg2mm] {
    border-color: var(--color-accent, #7c3aed);
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.2);
}

/* Rarity borders */
.inv-card.rarity-common[b-n3zcklg2mm] { border-left: 3px solid #9ca3af; }
.inv-card.rarity-rare[b-n3zcklg2mm] { border-left: 3px solid #7c3aed; }
.inv-card.rarity-epic[b-n3zcklg2mm] { border-left: 3px solid #ec4899; }
.inv-card.rarity-legendary[b-n3zcklg2mm] { border-left: 3px solid #f59e0b; }

.inv-card-name[b-n3zcklg2mm] {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--color-text-primary);
    letter-spacing: 0.02em;
}

.inv-card-desc[b-n3zcklg2mm] {
    font-size: 0.78rem;
    color: var(--color-text-muted, #94a3b8);
    line-height: 1.4;
    flex: 1;
}

.inv-card-meta[b-n3zcklg2mm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.inv-card-footer[b-n3zcklg2mm] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border, #3a3a4a);
    margin-top: 0.35rem;
}

/* ── Badges ────────────────────────────────────────────────────────── */

.inv-badge[b-n3zcklg2mm] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.4rem;
    border-radius: 0.2rem;
}

.inv-badge--equipped[b-n3zcklg2mm] {
    background: rgba(124, 58, 237, 0.15);
    color: var(--color-accent, #7c3aed);
    border: 1px solid rgba(124, 58, 237, 0.3);
}

/* ── Rarity text ───────────────────────────────────────────────────── */

.inv-rarity[b-n3zcklg2mm] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.4rem;
    border-radius: 0.2rem;
}

.rarity-text-common[b-n3zcklg2mm] { color: #9ca3af; background: rgba(107, 114, 128, 0.15); }
.rarity-text-rare[b-n3zcklg2mm] { color: #a78bfa; background: rgba(124, 58, 237, 0.15); }
.rarity-text-epic[b-n3zcklg2mm] { color: #f472b6; background: rgba(236, 72, 153, 0.15); }
.rarity-text-legendary[b-n3zcklg2mm] { color: #fbbf24; background: rgba(245, 158, 11, 0.15); }

.inv-acquired[b-n3zcklg2mm] {
    font-size: 0.7rem;
    color: var(--color-text-muted, #94a3b8);
    font-weight: 600;
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.inv-equip-btn[b-n3zcklg2mm],
.inv-unequip-btn[b-n3zcklg2mm] {
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 0.35rem;
    cursor: pointer;
    transition: opacity 0.15s;
}

.inv-equip-btn[b-n3zcklg2mm] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.inv-unequip-btn[b-n3zcklg2mm] {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.inv-equip-btn:hover:not(:disabled)[b-n3zcklg2mm],
.inv-unequip-btn:hover:not(:disabled)[b-n3zcklg2mm] {
    opacity: 0.85;
}

.inv-equip-btn:disabled[b-n3zcklg2mm],
.inv-unequip-btn:disabled[b-n3zcklg2mm] {
    opacity: 0.4;
    cursor: not-allowed;
}

.inv-default-label[b-n3zcklg2mm] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Previews ──────────────────────────────────────────────────────── */

.inv-preview[b-n3zcklg2mm] {
    margin: 0.5rem 0 0.35rem;
    display: flex;
    justify-content: center;
}

/* Tile preview */
.inv-preview-tiles[b-n3zcklg2mm] {
    display: flex;
    gap: 3px;
}

.inv-preview-tile[b-n3zcklg2mm] {
    width: 2rem;
    height: 2rem;
    border: 1.5px solid;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

/* Board preview */
.inv-preview-grid[b-n3zcklg2mm] {
    display: grid;
    grid-template-columns: repeat(3, 1.6rem);
    grid-template-rows: repeat(3, 1.6rem);
    gap: 2px;
    border-radius: 4px;
    padding: 3px;
}

.inv-preview-cell[b-n3zcklg2mm] {
    border: 1px solid;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inv-preview-mult-label[b-n3zcklg2mm] {
    font-size: 0.5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

/* Background preview */
.inv-preview-bg[b-n3zcklg2mm] {
    width: 100%;
    height: 3rem;
    border-radius: 4px;
    border: 1px solid var(--color-border, #3a3a4a);
}

/* Sound preview */
.inv-preview-sound[b-n3zcklg2mm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    color: var(--color-text-muted, #94a3b8);
}

/* Profile flair preview */
.inv-preview-flair[b-n3zcklg2mm] {
    padding: 0.3rem 0.75rem;
    border: 2px solid;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .inv-grid[b-n3zcklg2mm] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
/* ── Page layout ────────────────────────────────────────────────────── */

.profile-page[b-sk3ztl5lre] {
    width: 500px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.profile-loading[b-sk3ztl5lre],
.profile-not-found[b-sk3ztl5lre] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.loading-spinner[b-sk3ztl5lre] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-border, #3a3a4a);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin-b-sk3ztl5lre 0.7s linear infinite;
}

@keyframes spin-b-sk3ztl5lre {
    to { transform: rotate(360deg); }
}

/* ── Header ────────────────────────────────────────────────────────── */

.profile-header[b-sk3ztl5lre] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.profile-handle-text[b-sk3ztl5lre] {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--color-accent);
    margin: 0;
}

.profile-display-name[b-sk3ztl5lre] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.profile-member-since[b-sk3ztl5lre] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.03em;
}

.profile-bio[b-sk3ztl5lre] {
    font-size: 0.9rem;
    color: var(--color-text-muted, #94a3b8);
    margin: 0.5rem 0 0;
    max-width: 28rem;
    line-height: 1.5;
}

/* ── XP / Level ────────────────────────────────────────────────────── */

.xp-card[b-sk3ztl5lre] {
    background-color: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.xp-header[b-sk3ztl5lre] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.xp-level[b-sk3ztl5lre] {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--color-accent);
    letter-spacing: 0.03em;
}

.xp-total[b-sk3ztl5lre] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    letter-spacing: 0.03em;
}

.xp-bar-track[b-sk3ztl5lre] {
    height: 0.5rem;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.xp-bar-fill[b-sk3ztl5lre] {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), #a78bfa);
    border-radius: 999px;
    transition: width 0.4s ease;
    min-width: 0;
}

.xp-footer[b-sk3ztl5lre] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
}

.xp-progress[b-sk3ztl5lre] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.xp-next[b-sk3ztl5lre] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* ── Wallet ────────────────────────────────────────────────────────── */

.wallet-card[b-sk3ztl5lre] {
    background-color: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
}

.wallet-header[b-sk3ztl5lre] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wallet-label[b-sk3ztl5lre] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.wallet-balance[b-sk3ztl5lre] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
}

/* ── Badges ────────────────────────────────────────────────────────── */

.badge-row[b-sk3ztl5lre] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.badge-pill[b-sk3ztl5lre] {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background-color: rgba(139, 92, 246, 0.15);
    color: var(--color-accent);
    cursor: default;
}

/* ── Cards ─────────────────────────────────────────────────────────── */

.stat-card[b-sk3ztl5lre] {
    background-color: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.card-title[b-sk3ztl5lre] {
    display: flex;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

/* ── Stat grid ─────────────────────────────────────────────────────── */

.stat-grid[b-sk3ztl5lre] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    gap: 1rem;
    text-align: center;
}

.stat-item[b-sk3ztl5lre] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.stat-value[b-sk3ztl5lre] {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-text-primary);
    line-height: 1;
}

.stat-value--accent[b-sk3ztl5lre] {
    color: var(--color-accent);
}

.stat-value--streak[b-sk3ztl5lre] {
    color: var(--color-gold, #F59E0B);
}

.stat-label[b-sk3ztl5lre] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* ── Career highlights ─────────────────────────────────────────────── */

.career-highlights[b-sk3ztl5lre] {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.highlight-item[b-sk3ztl5lre] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.highlight-label[b-sk3ztl5lre] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.highlight-value[b-sk3ztl5lre] {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--color-text-primary);
}

.highlight-subtext[b-sk3ztl5lre] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* ── Season participation ──────────────────────────────────────────── */

.season-part-list[b-sk3ztl5lre] {
    display: flex;
    flex-direction: column;
}

.season-part-row[b-sk3ztl5lre] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.85rem;
}

.season-part-name[b-sk3ztl5lre] {
    font-weight: 700;
    color: var(--color-text-primary);
}

.season-part-count[b-sk3ztl5lre] {
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

/* ── Match history ─────────────────────────────────────────────────── */

.history-list[b-sk3ztl5lre] {
    display: flex;
    flex-direction: column;
    max-height: 50vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) transparent;
}

.history-row[b-sk3ztl5lre] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.history-row--link[b-sk3ztl5lre] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.15s;
    border-radius: 4px;
    padding: 0.55rem 0.5rem;
    margin: 0 -0.5rem;
}

.history-row--link:hover[b-sk3ztl5lre] {
    background-color: rgba(139, 92, 246, 0.06);
}

.history-left[b-sk3ztl5lre] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.history-board-date[b-sk3ztl5lre] {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--color-accent);
}

.result-badge[b-sk3ztl5lre] {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
}

.result-badge--wordist[b-sk3ztl5lre] {
    background-color: rgba(139, 92, 246, 0.2);
    color: var(--color-accent);
}

.result-badge--conceded[b-sk3ztl5lre] {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.result-badge--cleared[b-sk3ztl5lre] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.history-right[b-sk3ztl5lre] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.history-score[b-sk3ztl5lre] {
    font-weight: 800;
    color: var(--color-text-primary);
}

.history-words[b-sk3ztl5lre] {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.history-empty[b-sk3ztl5lre] {
    text-align: center;
    padding: 1.5rem;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.first-try-badge[b-sk3ztl5lre] {
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    flex-shrink: 0;
}
/* /Components/Pages/Rankings.razor.rz.scp.css */
/* ── Page layout ────────────────────────────────────────────────────── */

.rankings-page[b-gcdu6a99e9] {
    max-width: 500px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.rankings-heading[b-gcdu6a99e9] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--color-accent);
    text-align: center;
    margin: 0 0 1.25rem;
}

/* ── Scope toggle ──────────────────────────────────────────────────── */

.scope-toggle[b-gcdu6a99e9] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    justify-content: center;
}

.scope-btn[b-gcdu6a99e9] {
    padding: 0.5rem 1.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.04em;
    background-color: var(--color-surface-2, #1e1e2e);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 2rem;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.scope-btn:hover[b-gcdu6a99e9] {
    border-color: var(--color-accent);
    color: var(--color-text-primary);
}

.scope-btn--active[b-gcdu6a99e9] {
    background-color: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* ── Tab bar ───────────────────────────────────────────────────────── */

.tab-bar[b-gcdu6a99e9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.tab-btn[b-gcdu6a99e9] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.03em;
    white-space: nowrap;
    background-color: transparent;
    color: var(--color-text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.tab-btn:hover[b-gcdu6a99e9] {
    color: var(--color-text-primary);
}

.tab-btn--active[b-gcdu6a99e9] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.tab-icon[b-gcdu6a99e9] {
    font-size: 0.9rem;
    line-height: 1;
}

/* ── Loading / Empty ───────────────────────────────────────────────── */

.rankings-loading[b-gcdu6a99e9] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.loading-spinner[b-gcdu6a99e9] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-border, #3a3a4a);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin-b-gcdu6a99e9 0.7s linear infinite;
}

@keyframes spin-b-gcdu6a99e9 {
    to { transform: rotate(360deg); }
}

.rankings-empty[b-gcdu6a99e9] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
}

/* ── Card container ───────────────────────────────────────────────── */

.stat-card[b-gcdu6a99e9] {
    background-color: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    overflow: hidden;
}

/* ── Leaderboard rows ─────────────────────────────────────────────── */

.lb-header[b-gcdu6a99e9] {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background-color: var(--color-surface-3, #16162a);
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.lb-row[b-gcdu6a99e9] {
    display: flex;
    align-items: center;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background-color 0.15s;
}

.lb-row:last-child[b-gcdu6a99e9] {
    border-bottom: none;
}

.lb-row--link[b-gcdu6a99e9] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.lb-row:hover[b-gcdu6a99e9] {
    background-color: rgba(139, 92, 246, 0.06);
}

.lb-player-name[b-gcdu6a99e9] {
    color: var(--color-accent);
}

.lb-row--top[b-gcdu6a99e9] {
    background-color: rgba(139, 92, 246, 0.03);
}

.lb-col-rank[b-gcdu6a99e9] {
    width: 2.5rem;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.lb-col-rank--top1[b-gcdu6a99e9] {
    color: #fbbf24;
}

.lb-col-rank--top2[b-gcdu6a99e9] {
    color: #94a3b8;
}

.lb-col-rank--top3[b-gcdu6a99e9] {
    color: #d97706;
}

.rank-medal[b-gcdu6a99e9] {
    font-size: 1.1rem;
    line-height: 1;
}

.lb-col-player[b-gcdu6a99e9] {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-col-player a[b-gcdu6a99e9] {
    color: var(--color-accent);
    text-decoration: none;
}

.lb-col-player a:hover[b-gcdu6a99e9] {
    text-decoration: underline;
}

.anon-player[b-gcdu6a99e9] {
    color: var(--color-text-secondary);
    font-style: italic;
}

.lb-col-detail[b-gcdu6a99e9] {
    width: 7rem;
    text-align: right;
    padding-right: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.word-link[b-gcdu6a99e9] {
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--color-accent);
    text-decoration: none;
}

.word-link:hover[b-gcdu6a99e9] {
    text-decoration: underline;
}

.lb-col-score[b-gcdu6a99e9] {
    width: 3.5rem;
    text-align: right;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.first-try-badge[b-gcdu6a99e9] {
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    flex-shrink: 0;
}
/* /Components/Pages/Session.razor.rz.scp.css */
/* ── Page layout ────────────────────────────────────────────────────── */

.session-page[b-e8fz9cvsxc] {
    max-width: 640px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.session-loading[b-e8fz9cvsxc],
.session-not-found[b-e8fz9cvsxc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.loading-spinner[b-e8fz9cvsxc] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-border, #3a3a4a);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin-b-e8fz9cvsxc 0.7s linear infinite;
}

@keyframes spin-b-e8fz9cvsxc {
    to { transform: rotate(360deg); }
}

/* ── Header ────────────────────────────────────────────────────────── */

.session-header[b-e8fz9cvsxc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
    text-align: center;
}

.session-back[b-e8fz9cvsxc] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
}

.session-back:hover[b-e8fz9cvsxc] {
    text-decoration: underline;
}

.session-board-name[b-e8fz9cvsxc] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.03em;
}

/* ── Player row ────────────────────────────────────────────────────── */

.session-player-row[b-e8fz9cvsxc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.session-player-link[b-e8fz9cvsxc] {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-accent);
    text-decoration: none;
}

.session-player-link:hover[b-e8fz9cvsxc] {
    text-decoration: underline;
}

.session-anon[b-e8fz9cvsxc] {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-text-secondary);
    font-style: italic;
}

.session-badge[b-e8fz9cvsxc] {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.session-badge--wordist[b-e8fz9cvsxc] {
    background-color: rgba(139, 92, 246, 0.2);
    color: var(--color-accent);
}

.session-badge--conceded[b-e8fz9cvsxc] {
    background-color: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.session-badge--cleared[b-e8fz9cvsxc] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.session-badge--first-try[b-e8fz9cvsxc] {
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.session-badge--try[b-e8fz9cvsxc] {
    background-color: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

/* ── Cards ─────────────────────────────────────────────────────────── */

.stat-card[b-e8fz9cvsxc] {
    background-color: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.card-title[b-e8fz9cvsxc] {
    display: flex;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

.stat-grid[b-e8fz9cvsxc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    gap: 1rem;
    text-align: center;
}

.stat-item[b-e8fz9cvsxc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.stat-value[b-e8fz9cvsxc] {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-text-primary);
    line-height: 1;
}

.stat-label[b-e8fz9cvsxc] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* ── Word list ─────────────────────────────────────────────────────── */

.session-word-list[b-e8fz9cvsxc] {
    display: flex;
    flex-direction: column;
}

.session-word-header[b-e8fz9cvsxc] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.session-word-row[b-e8fz9cvsxc] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.session-word-row:last-child[b-e8fz9cvsxc] {
    border-bottom: none;
}

.session-word-row--bonus[b-e8fz9cvsxc] {
    background-color: rgba(251, 191, 36, 0.04);
}

.session-word-col-num[b-e8fz9cvsxc] {
    width: 2rem;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.session-word-col-word[b-e8fz9cvsxc] {
    flex: 1;
    min-width: 0;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.session-word-col-word a[b-e8fz9cvsxc] {
    color: var(--color-accent);
    text-decoration: none;
}

.session-word-col-word a:hover[b-e8fz9cvsxc] {
    text-decoration: underline;
}

.session-bonus-tag[b-e8fz9cvsxc] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-bonus, #fbbf24);
    white-space: nowrap;
}

.session-word-col-score[b-e8fz9cvsxc] {
    width: 3.5rem;
    text-align: right;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--color-text-primary);
}

.session-no-words[b-e8fz9cvsxc] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    text-align: center;
    padding: 0.75rem 0;
    margin: 0;
}
/* /Components/Pages/Settings.razor.rz.scp.css */
/* ── Settings page layout ───────────────────────────────────────────── */

.settings-page[b-fp2r3tuz0t] {
    width: 500px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.settings-title[b-fp2r3tuz0t] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin-bottom: 2rem;
}

.settings-loading[b-fp2r3tuz0t] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.settings-error[b-fp2r3tuz0t] {
    text-align: center;
    padding: 3rem 1rem;
    color: #ef4444;
    font-weight: 700;
}

.settings-empty[b-fp2r3tuz0t] {
    text-align: center;
    padding: 1.5rem;
    color: var(--color-text-muted, #94a3b8);
    font-style: italic;
}

/* ── Auth gate ─────────────────────────────────────────────────────── */

.settings-auth-gate[b-fp2r3tuz0t] {
    text-align: center;
    padding: 4rem 1rem;
}

.settings-auth-gate h1[b-fp2r3tuz0t] {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.settings-auth-gate p[b-fp2r3tuz0t] {
    color: var(--color-text-muted, #94a3b8);
    margin-bottom: 1.5rem;
}

.settings-cta[b-fp2r3tuz0t] {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    background: var(--color-accent, #7c3aed);
    color: #fff;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: opacity 0.15s;
}

.settings-cta:hover[b-fp2r3tuz0t] {
    opacity: 0.85;
}

/* ── Tabs ─────────────────────────────────────────────────────────── */

.settings-tabs[b-fp2r3tuz0t] {
    display: flex;
    gap: 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.settings-tab[b-fp2r3tuz0t] {
    padding: 0.65rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted, #94a3b8);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.settings-tab:hover[b-fp2r3tuz0t] {
    color: var(--color-text-primary);
}

.settings-tab--active[b-fp2r3tuz0t] {
    color: var(--color-accent, #7c3aed);
    border-bottom-color: var(--color-accent, #7c3aed);
}

/* ── Sections ──────────────────────────────────────────────────────── */

.settings-section[b-fp2r3tuz0t] {
    margin-bottom: 2.5rem;
}

.settings-section-title[b-fp2r3tuz0t] {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.settings-subsection-title[b-fp2r3tuz0t] {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin: 1.25rem 0 0.75rem;
}

/* ── Form ──────────────────────────────────────────────────────────── */

.settings-form[b-fp2r3tuz0t] {
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.settings-form-row[b-fp2r3tuz0t] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.settings-label[b-fp2r3tuz0t] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.settings-input[b-fp2r3tuz0t] {
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--color-surface-1, #111827);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s;
}

.settings-input:focus[b-fp2r3tuz0t] {
    border-color: var(--color-accent, #7c3aed);
}

.settings-textarea[b-fp2r3tuz0t] {
    resize: vertical;
    min-height: 3.5rem;
}

.settings-hint[b-fp2r3tuz0t] {
    font-size: 0.75rem;
    color: var(--color-text-muted, #94a3b8);
}

.settings-hint--error[b-fp2r3tuz0t] {
    color: #f87171;
}

.settings-value-static[b-fp2r3tuz0t] {
    font-size: 0.95rem;
    color: var(--color-text-primary);
    padding: 0.3rem 0;
}

.settings-form-actions[b-fp2r3tuz0t] {
    margin-top: 1.25rem;
}

.settings-btn[b-fp2r3tuz0t] {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: opacity 0.15s;
}

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

.settings-btn--primary[b-fp2r3tuz0t] {
    background: var(--color-accent, #7c3aed);
    color: #fff;
}

.settings-btn--primary:hover:not(:disabled)[b-fp2r3tuz0t] {
    opacity: 0.85;
}

.settings-message[b-fp2r3tuz0t] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.settings-message--success[b-fp2r3tuz0t] {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.settings-message--error[b-fp2r3tuz0t] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ── Connected accounts ────────────────────────────────────────────── */

.connected-account-row[b-fp2r3tuz0t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.connected-account-info[b-fp2r3tuz0t] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.connected-account-name[b-fp2r3tuz0t] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.connected-account-email[b-fp2r3tuz0t] {
    font-size: 0.85rem;
    color: var(--color-text-muted, #94a3b8);
}

.connected-badge[b-fp2r3tuz0t] {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.6rem;
    border-radius: 0.25rem;
}

.connected-badge--linked[b-fp2r3tuz0t] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.connected-link-btn[b-fp2r3tuz0t] {
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.45rem 1rem;
    white-space: nowrap;
}

/* ── Wallet card ───────────────────────────────────────────────────── */

.wallet-card[b-fp2r3tuz0t] {
    background: var(--color-surface-2, #1e1e2e);
    border: 2px solid var(--color-accent, #7c3aed);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.wallet-row[b-fp2r3tuz0t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
}

.wallet-row + .wallet-row[b-fp2r3tuz0t] {
    border-top: 1px solid var(--color-border, #3a3a4a);
}

.wallet-label[b-fp2r3tuz0t] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wallet-balance[b-fp2r3tuz0t] {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-accent, #7c3aed);
}

.wallet-value[b-fp2r3tuz0t] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── Transaction table ─────────────────────────────────────────────── */

.settings-table-wrap[b-fp2r3tuz0t] {
    overflow-x: auto;
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
}

.settings-table[b-fp2r3tuz0t] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.settings-table th[b-fp2r3tuz0t] {
    text-align: left;
    padding: 0.75rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #94a3b8);
    background: var(--color-surface-2, #1e1e2e);
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.settings-table td[b-fp2r3tuz0t] {
    padding: 0.55rem 0.85rem;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border, #3a3a4a);
}

.settings-table tbody tr:last-child td[b-fp2r3tuz0t] {
    border-bottom: none;
}

[b-fp2r3tuz0t] .tx-positive {
    color: #4ade80;
    font-weight: 700;
}

[b-fp2r3tuz0t] .tx-negative {
    color: #f87171;
    font-weight: 700;
}

/* ── Danger zone ──────────────────────────────────────────────────── */

.settings-danger-title[b-fp2r3tuz0t] {
    color: #ef4444;
    border-bottom-color: rgba(239, 68, 68, 0.3);
}

.settings-danger-zone[b-fp2r3tuz0t] {
    border-color: rgba(239, 68, 68, 0.3);
}

.settings-danger-text[b-fp2r3tuz0t] {
    font-size: 0.9rem;
    color: var(--color-text-muted, #94a3b8);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.settings-btn--danger[b-fp2r3tuz0t] {
    background: #dc2626;
    color: #fff;
}

.settings-btn--danger:hover:not(:disabled)[b-fp2r3tuz0t] {
    background: #b91c1c;
}

.settings-btn--secondary[b-fp2r3tuz0t] {
    background: var(--color-surface-2, #1e1e2e);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border, #3a3a4a);
}

.settings-btn--secondary:hover:not(:disabled)[b-fp2r3tuz0t] {
    background: var(--color-surface-1, #111827);
}
/* /Components/Pages/Shop.razor.rz.scp.css */
.shop-page[b-jrtgl2zk40] {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem 3rem;
}

.shop-header[b-jrtgl2zk40] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.shop-title[b-jrtgl2zk40] {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0;
}

.shop-balance[b-jrtgl2zk40] {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-gold, #F59E0B);
    letter-spacing: 0.03em;
}

.shop-loading[b-jrtgl2zk40] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.shop-error[b-jrtgl2zk40] {
    text-align: center;
    padding: 3rem 1rem;
    font-size: 1.1rem;
    color: #ef4444;
    font-weight: 700;
}

/* ── Messages ──────────────────────────────────────────────────────── */

.shop-message[b-jrtgl2zk40] {
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.shop-message--success[b-jrtgl2zk40] {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.shop-message--error[b-jrtgl2zk40] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ── Tabs ──────────────────────────────────────────────────────────── */

.shop-tabs[b-jrtgl2zk40] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border, #3a3a4a);
    padding-bottom: 0.75rem;
}

.shop-tab[b-jrtgl2zk40] {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.4rem;
    background: transparent;
    color: var(--color-text-secondary, #cbd5e1);
    cursor: pointer;
    transition: all 0.15s;
}

.shop-tab:hover[b-jrtgl2zk40] {
    border-color: var(--color-accent, #7c3aed);
    color: var(--color-text-primary);
}

.shop-tab--active[b-jrtgl2zk40] {
    background: var(--color-accent, #7c3aed);
    border-color: var(--color-accent, #7c3aed);
    color: #fff;
}

/* ── Ownership Filter ──────────────────────────────────────────────── */

.shop-filters[b-jrtgl2zk40] {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
}

.shop-filter[b-jrtgl2zk40] {
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.35rem;
    background: transparent;
    color: var(--color-text-secondary, #cbd5e1);
    cursor: pointer;
    transition: all 0.15s;
}

.shop-filter:hover[b-jrtgl2zk40] {
    border-color: var(--color-accent, #7c3aed);
    color: var(--color-text-primary);
}

.shop-filter--active[b-jrtgl2zk40] {
    background: rgba(124, 58, 237, 0.15);
    border-color: var(--color-accent, #7c3aed);
    color: var(--color-accent, #7c3aed);
}

/* ── Sections ──────────────────────────────────────────────────────── */

.shop-section[b-jrtgl2zk40] {
    margin-bottom: 2rem;
}

.shop-section-title[b-jrtgl2zk40] {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0 0 0.75rem;
}

/* ── Grid ──────────────────────────────────────────────────────────── */

.shop-grid[b-jrtgl2zk40] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

/* ── Cards ─────────────────────────────────────────────────────────── */

.shop-card[b-jrtgl2zk40] {
    position: relative;
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: border-color 0.15s;
}

.shop-card:hover[b-jrtgl2zk40] {
    border-color: var(--color-text-muted, #94a3b8);
}

/* Rarity borders */
.shop-card.rarity-common[b-jrtgl2zk40] { border-left: 3px solid #9ca3af; }
.shop-card.rarity-rare[b-jrtgl2zk40] { border-left: 3px solid #7c3aed; }
.shop-card.rarity-epic[b-jrtgl2zk40] { border-left: 3px solid #ec4899; }
.shop-card.rarity-legendary[b-jrtgl2zk40] { border-left: 3px solid #f59e0b; }

.shop-card--bundle[b-jrtgl2zk40] {
    border-left-width: 3px;
    background: linear-gradient(135deg, var(--color-surface-2, #1e1e2e), rgba(124, 58, 237, 0.05));
}

.shop-card-name[b-jrtgl2zk40] {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--color-text-primary);
    letter-spacing: 0.02em;
}

.shop-card-desc[b-jrtgl2zk40] {
    font-size: 0.78rem;
    color: var(--color-text-muted, #94a3b8);
    line-height: 1.4;
    flex: 1;
}

.shop-card-meta[b-jrtgl2zk40] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.shop-card-footer[b-jrtgl2zk40] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border, #3a3a4a);
    margin-top: 0.35rem;
}

/* ── Badges ────────────────────────────────────────────────────────── */

.shop-badge[b-jrtgl2zk40] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.4rem;
    border-radius: 0.2rem;
}

.shop-badge--limited[b-jrtgl2zk40] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.shop-badge--default[b-jrtgl2zk40] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* ── Rarity text ───────────────────────────────────────────────────── */

.shop-rarity[b-jrtgl2zk40] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.4rem;
    border-radius: 0.2rem;
}

.rarity-text-common[b-jrtgl2zk40] { color: #9ca3af; background: rgba(107, 114, 128, 0.15); }
.rarity-text-rare[b-jrtgl2zk40] { color: #a78bfa; background: rgba(124, 58, 237, 0.15); }
.rarity-text-epic[b-jrtgl2zk40] { color: #f472b6; background: rgba(236, 72, 153, 0.15); }
.rarity-text-legendary[b-jrtgl2zk40] { color: #fbbf24; background: rgba(245, 158, 11, 0.15); }

.shop-item-count[b-jrtgl2zk40] {
    font-size: 0.7rem;
    color: var(--color-text-muted, #94a3b8);
    font-weight: 600;
}

/* ── Prices & Labels ───────────────────────────────────────────────── */

.shop-price[b-jrtgl2zk40] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-accent, #7c3aed);
}

.shop-owned-label[b-jrtgl2zk40] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.shop-buy-btn[b-jrtgl2zk40] {
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 0.35rem;
    cursor: pointer;
    transition: opacity 0.15s;
    background: var(--color-accent, #7c3aed);
    color: #fff;
}

.shop-buy-btn:hover:not(:disabled)[b-jrtgl2zk40] {
    opacity: 0.85;
}

.shop-buy-btn:disabled[b-jrtgl2zk40] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Previews ──────────────────────────────────────────────────────── */

.shop-preview[b-jrtgl2zk40] {
    margin: 0.5rem 0 0.35rem;
    display: flex;
    justify-content: center;
}

/* Tile preview */
.shop-preview-tiles[b-jrtgl2zk40] {
    display: flex;
    gap: 3px;
}

.shop-preview-tile[b-jrtgl2zk40] {
    width: 2rem;
    height: 2rem;
    border: 1.5px solid;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

/* Board preview */
.shop-preview-grid[b-jrtgl2zk40] {
    display: grid;
    grid-template-columns: repeat(3, 1.6rem);
    grid-template-rows: repeat(3, 1.6rem);
    gap: 2px;
    border-radius: 4px;
    padding: 3px;
}

.shop-preview-cell[b-jrtgl2zk40] {
    border: 1px solid;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-preview-mult-label[b-jrtgl2zk40] {
    font-size: 0.5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

/* Background preview */
.shop-preview-bg[b-jrtgl2zk40] {
    width: 100%;
    height: 3rem;
    border-radius: 4px;
    border: 1px solid var(--color-border, #3a3a4a);
}

/* Sound preview */
.shop-preview-sound[b-jrtgl2zk40] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    color: var(--color-text-muted, #94a3b8);
}

/* Profile flair preview */
.shop-preview-flair[b-jrtgl2zk40] {
    padding: 0.3rem 0.75rem;
    border: 2px solid;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 500px) {
    .shop-grid[b-jrtgl2zk40] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Stats.razor.rz.scp.css */
/* ── Page layout ────────────────────────────────────────────────────── */

.stats-page[b-xl7016n28l] {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.stats-section[b-xl7016n28l] {
    margin-top: 2rem;
}

.section-heading[b-xl7016n28l] {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

/* ── Player search ─────────────────────────────────────────────────── */

.player-search-row[b-xl7016n28l] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.player-search-input[b-xl7016n28l] {
    flex: 1;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    background-color: var(--color-surface-2, #1e1e2e);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s;
}

.player-search-input:focus[b-xl7016n28l] {
    border-color: var(--color-accent);
}

.player-search-btn[b-xl7016n28l] {
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.04em;
    background-color: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s, opacity 0.15s;
}

.player-search-btn:hover:not(:disabled)[b-xl7016n28l] {
    background-color: #7c3aed;
}

.player-search-btn:disabled[b-xl7016n28l] {
    opacity: 0.4;
    cursor: not-allowed;
}

.search-results[b-xl7016n28l] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1.5rem;
}

.search-result-card[b-xl7016n28l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background-color: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.5rem;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
    transition: border-color 0.15s;
}

.search-result-card:hover[b-xl7016n28l] {
    border-color: var(--color-accent);
}

.search-result-handle[b-xl7016n28l] {
    font-weight: 800;
    color: var(--color-accent);
    font-size: 0.9rem;
}

.search-result-name[b-xl7016n28l] {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.search-empty[b-xl7016n28l] {
    text-align: center;
    padding: 0.75rem;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

/* ── Two-column layout ─────────────────────────────────────────────── */

.stats-columns[b-xl7016n28l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 640px) {
    .stats-columns[b-xl7016n28l] {
        grid-template-columns: 1fr;
    }
}

/* ── Cards ─────────────────────────────────────────────────────────── */

.stat-card[b-xl7016n28l] {
    background-color: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.card-title[b-xl7016n28l] {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

/* ── Global Pulse ──────────────────────────────────────────────────── */

.pulse-grid[b-xl7016n28l] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    text-align: center;
}

.pulse-item[b-xl7016n28l] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.pulse-value[b-xl7016n28l] {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--color-text-primary);
    line-height: 1;
}

.pulse-label[b-xl7016n28l] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* ── Word Cloud ────────────────────────────────────────────────────── */

.word-cloud[b-xl7016n28l] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.5rem;
    min-height: 6rem;
}

.cloud-word[b-xl7016n28l] {
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--color-accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.1rem 0.25rem;
    line-height: 1.2;
    transition: color 0.15s, transform 0.15s;
}

.cloud-word:hover[b-xl7016n28l] {
    color: #c4b5fd;
    transform: scale(1.1);
}

/* ── Loading / Empty ───────────────────────────────────────────────── */

.stats-loading[b-xl7016n28l] {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.loading-spinner[b-xl7016n28l] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-border, #3a3a4a);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin-b-xl7016n28l 0.7s linear infinite;
}

@keyframes spin-b-xl7016n28l {
    to { transform: rotate(360deg); }
}

/* ── Recent Games Feed ─────────────────────────────────────────────── */

.feed-list[b-xl7016n28l] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 40vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) transparent;
}

.feed-row[b-xl7016n28l] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.feed-row--link[b-xl7016n28l] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: 4px;
    padding: 0.6rem 0.5rem;
    margin: 0 -0.5rem;
    transition: background-color 0.15s;
}

.feed-row--link:hover[b-xl7016n28l] {
    background-color: rgba(139, 92, 246, 0.06);
}

.feed-player[b-xl7016n28l] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text-primary);
}

.feed-player-name[b-xl7016n28l] {
    color: var(--color-accent);
}

.anon-player[b-xl7016n28l] {
    color: var(--color-text-secondary);
    font-style: italic;
}

.feed-details[b-xl7016n28l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
}

.feed-score[b-xl7016n28l] {
    font-weight: 800;
    color: var(--color-text-primary);
}

.feed-words[b-xl7016n28l] {
    color: var(--color-text-secondary);
    font-weight: 600;
}

.feed-badge[b-xl7016n28l] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
}

.feed-badge--wordist[b-xl7016n28l] {
    background-color: rgba(139, 92, 246, 0.2);
    color: var(--color-accent);
}

.feed-badge--conceded[b-xl7016n28l] {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.feed-badge--first-try[b-xl7016n28l] {
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.feed-meta[b-xl7016n28l] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.feed-empty[b-xl7016n28l] {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

/* ── Board Archives ────────────────────────────────────────────────── */

.board-grid[b-xl7016n28l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.5rem;
}

.board-card[b-xl7016n28l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.6rem 0.4rem;
    background-color: var(--color-surface-2, #1e1e2e);
    border: 1px solid var(--color-border, #3a3a4a);
    border-radius: 0.5rem;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background-color 0.15s;
}

.board-card:hover[b-xl7016n28l] {
    border-color: var(--color-accent);
    background-color: rgba(139, 92, 246, 0.08);
}

.board-date[b-xl7016n28l] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-text-primary);
}

.board-stats[b-xl7016n28l] {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.board-avg[b-xl7016n28l] {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}
/* /Components/Shared/LetterTile.razor.rz.scp.css */
/* ============================================================
   LetterTile — CSS Isolation
   Scoped styles for the physical letter tile component.
   ============================================================ */

.letter-tile[b-qo7ynxy4vy] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Warm cream gradient — mimics a physical tile */
    background: linear-gradient(145deg, #FAF6EE, #E8DFCC);
    border: 1px solid var(--tile-border-clr, #CEC0A4);
    border-radius: 7px;
    /* 3-D raised look */
    box-shadow:
        0 3px 0 var(--tile-shadow-clr, #A89870),
        0 5px 8px rgba(0, 0, 0, 0.45);
    color: var(--tile-letter-clr, #1A1A2E);
    font-family: 'Nunito', system-ui, sans-serif;
    user-select: none;
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.letter-tile:hover[b-qo7ynxy4vy] {
    transform: translateY(-6px);
    box-shadow:
        0 5px 0 var(--tile-shadow-clr, #A89870),
        0 8px 12px rgba(0, 0, 0, 0.5);
}

/* --- Letter --- */
.tile-letter[b-qo7ynxy4vy] {
    display: block;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.5px;
    margin-top: 2px; /* optical centering (score nudges visual center up) */
}

/* --- Score badge --- */
.tile-score[b-qo7ynxy4vy] {
    position: absolute;
    bottom: 3px;
    right: 4px;
    font-size: 0.5rem;
    font-weight: 800;
    color: var(--tile-score-clr, #4A3E28);
    line-height: 1;
}

/* ---- Size variants ---- */

.tile-sm[b-qo7ynxy4vy] {
    width: 34px;
    height: 34px;
}
.tile-sm .tile-letter[b-qo7ynxy4vy] {
    font-size: 1rem;
}
.tile-sm .tile-score[b-qo7ynxy4vy] {
    font-size: 0.45rem;
    bottom: 2px;
    right: 3px;
}

.tile-md[b-qo7ynxy4vy] {
    width: 46px;
    height: 46px;
}
.tile-md .tile-letter[b-qo7ynxy4vy] {
    font-size: 1.45rem;
}

.tile-lg[b-qo7ynxy4vy] {
    width: 56px;
    height: 56px;
}
.tile-lg .tile-letter[b-qo7ynxy4vy] {
    font-size: 1.75rem;
}
.tile-lg .tile-score[b-qo7ynxy4vy] {
    font-size: 0.55rem;
}

/* Hero — large standalone logo tile */
.tile-hero[b-qo7ynxy4vy] {
    width: 68px;
    height: 68px;
    border-radius: 10px;
    box-shadow:
        0 4px 0 var(--tile-shadow-clr, #A89870),
        0 6px 16px rgba(0, 0, 0, 0.55);
}
.tile-hero .tile-letter[b-qo7ynxy4vy] {
    font-size: 2.25rem;
}
.tile-hero .tile-score[b-qo7ynxy4vy] {
    font-size: 0.6rem;
    bottom: 5px;
    right: 6px;
}