@import '_content/DragulaDropula/DragulaDropula.bundle.scp.css';
@import '_content/QIWeb/QIWeb.4s31duiqs2.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Site-wide footer — Privacy / Terms links that open the LegalDialog modal. */
.site-footer[b-dlco0kb3tv] {
    padding: 1rem 1rem .5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-inner[b-dlco0kb3tv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #6a7a90;
}

.footer-copy[b-dlco0kb3tv] {
    letter-spacing: 0.02em;
}

.footer-sep[b-dlco0kb3tv] {
    color: #3a4658;
}

/* Buttons styled as text links (semantic <button> so they're keyboard-accessible). */
.footer-link[b-dlco0kb3tv] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: #9aa7bb;
    letter-spacing: 0.02em;
    transition: color 0.12s ease;
}

.footer-link:hover[b-dlco0kb3tv],
.footer-link:focus-visible[b-dlco0kb3tv] {
    color: #f4a261;
    text-decoration: underline;
    outline: none;
}

#blazor-error-ui[b-dlco0kb3tv] {
    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-dlco0kb3tv] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Navbar identity flair — framed avatar + badge + cosmetic-colored name (see MainLayout @code). */
.navbar-identity[b-dlco0kb3tv] {
    display: inline-flex;
    align-items: center;
    gap: 0.57rem;
}

.navbar-avatar-frame[b-dlco0kb3tv] {
    position: relative;
    display: inline-flex;
    border-radius: 50%;
    line-height: 0;
}

.navbar-badge[b-dlco0kb3tv] {
    position: absolute;
    right: -0.21rem;
    bottom: -0.21rem;
    font-size: 0.93rem;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .65));
    pointer-events: none;
}

.navbar-name[b-dlco0kb3tv] {
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .02em;
    white-space: nowrap;
    max-width: 14.29rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Desktop icon row vs. mobile hamburger — exactly one shows, chosen by width (media query below). Both are
   inline-flex so their children (the icon buttons / the menu activator) stay centered in the app bar. */
.nav-icons-desktop[b-dlco0kb3tv] { display: inline-flex; align-items: center; }
.nav-hamburger-mobile[b-dlco0kb3tv] { display: none; align-items: center; }

/* Desktop login cluster (Roblox button / identity + the mounted QIWeb heartbeat widget). inline-flex so its
   pieces sit in a row as before. Its mobile counterpart is the dropdown below. */
.nav-login-desktop[b-dlco0kb3tv] { display: inline-flex; align-items: center; }
.nav-user-mobile[b-dlco0kb3tv] { display: none; align-items: center; }

/* Mobile app-bar layout: hamburger LEFT · brand CENTERED · login/avatar dropdown RIGHT. 760px matches the
   name-drop threshold, so the whole bar switches at one breakpoint.
   • Icon row → hamburger; the desktop login cluster is hidden (display:none, so the QIWeb heartbeat widget
     inside stays MOUNTED), the mobile dropdown shows; the env chip is dev-only noise on a narrow bar, dropped.
   • The brand is absolutely centered (out of flow) so it stays centered regardless of the differing widths
     of the hamburger and the avatar/login control on either side. Its containing block is the fixed
     .mud-appbar (spans the viewport), so left:50% is the true center.
   • !important on the brand: MudBlazor's `.ml-4` spacing utility and the base .navbar-brand font-size both
     set these with higher priority than a plain override would carry here. */
@media (max-width: 760px) {
    .navbar-name[b-dlco0kb3tv] { display: none; }
    .nav-icons-desktop[b-dlco0kb3tv] { display: none; }
    .nav-hamburger-mobile[b-dlco0kb3tv] { display: inline-flex; }
    .nav-login-desktop[b-dlco0kb3tv] { display: none; }
    .nav-user-mobile[b-dlco0kb3tv] { display: inline-flex; }
    .nav-env-chip[b-dlco0kb3tv] { display: none !important; }

    .navbar-brand[b-dlco0kb3tv] {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
        font-size: 1.15rem !important;
    }
}

/* Mobile login/identity dropdown contents. These render inside the MudMenu popover, which is portaled out
   of this component's DOM — but the wrappers are our own markup, so they still carry the scope attribute and
   these scoped rules reach them (scoped CSS matches by attribute, not by DOM position). */
.nav-login-menu[b-dlco0kb3tv] { padding: 0.75rem 0.85rem; }

.nav-login-menu-head[b-dlco0kb3tv],
.nav-user-head[b-dlco0kb3tv] {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #9aa7bb;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.35rem 0.5rem;
}

.nav-user-head[b-dlco0kb3tv] {
    padding: 0.35rem 0.9rem 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 0.25rem;
}

/* Header brand wordmark — small Cinzel gradient lockup mirroring the splash hero's .landing-title.
   Cinzel renders lowercase as small-caps, so the O-L-Z tower over the bb-a-n-d. */
.navbar-brand[b-dlco0kb3tv] {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-decoration: none;
    background: linear-gradient(180deg, #f4a261 0%, #e8633a 55%, #c44820 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 18px rgba(232, 99, 58, 0.25);
    white-space: nowrap;
    transition: filter 0.12s ease;
}
.navbar-brand:hover[b-dlco0kb3tv] { filter: brightness(1.08); }

/* "Log in with Roblox" — Roblox-blue rounded square holding the washer logo + LOGIN wordmark (inline SVG). */
.rblx-login[b-dlco0kb3tv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border-radius: 0.55rem;
    background: #3662fb;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
    cursor: pointer;
    flex: 0 0 auto;
}
.rblx-login:hover[b-dlco0kb3tv] {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 4px 12px rgba(54, 98, 251, 0.55);
}
.rblx-login:active[b-dlco0kb3tv] { transform: translateY(0) scale(0.97); }
.rblx-login .rblx-svg[b-dlco0kb3tv] { width: 100%; height: 100%; display: block; }
/* /Components/Layout/RecognitionTicker.razor.rz.scp.css */
.rec-ticker[b-6scdiq7qil] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(90deg, #1a1a2e88, #1a1a2e3a);
    border: 1px solid #ffffff14;
    border-radius: 0.71rem;
    /*padding: 0.5rem 1rem;*/
    /*margin-bottom: 1.29rem;*/
    overflow: hidden;
}

.rec-ticker-label[b-6scdiq7qil] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #ffcf4d;
    white-space: nowrap;
}

.rec-ticker-trophy[b-6scdiq7qil] {
    margin-right: 0.43rem;
    font-size: 1rem;
}

/* Fade the marquee edges so items slide in/out instead of popping. */
.rec-ticker-viewport[b-6scdiq7qil] {
    flex: 1 1 auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.rec-ticker-track[b-6scdiq7qil] {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    white-space: nowrap;
    will-change: transform;
    animation: rec-ticker-scroll-b-6scdiq7qil 40s linear infinite;
}

/* Pause on hover so a name can be read. */
.rec-ticker:hover .rec-ticker-track[b-6scdiq7qil] {
    animation-play-state: paused;
}

.rec-ticker-item[b-6scdiq7qil] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: .85rem;
}

.rec-ticker-av[b-6scdiq7qil] {
    width: 1.57rem;
    height: 1.57rem;
    border-radius: 50%;
    object-fit: cover;
    background: #0d1320;
    flex: 0 0 auto;
}

/* Wraps the avatar so an equipped frame's color shows as a ring (padding+background set inline). */
.rec-ticker-avwrap[b-6scdiq7qil] {
    display: inline-flex;
    border-radius: 50%;
    line-height: 0;
    flex: 0 0 auto;
}

.rec-ticker-badge[b-6scdiq7qil] {
    font-size: .9rem;
    line-height: 1;
}

.rec-ticker-name[b-6scdiq7qil] {
    font-weight: 600;
    color: #e8e8ef;
}

.rec-ticker-amt[b-6scdiq7qil] {
    font-size: .76rem;
    color: #9aa0aa;
}

@keyframes rec-ticker-scroll-b-6scdiq7qil {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .rec-ticker-track[b-6scdiq7qil] { animation: none; }
}

@media (max-width: 600px) {
    .rec-ticker-label[b-6scdiq7qil] { font-size: .68rem; }
    .rec-ticker[b-6scdiq7qil] { gap: 0.71rem; padding: 0.43rem 0.71rem; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-c5mqatlaw9],
.components-reconnect-repeated-attempt-visible[b-c5mqatlaw9],
.components-reconnect-failed-visible[b-c5mqatlaw9],
.components-pause-visible[b-c5mqatlaw9],
.components-resume-failed-visible[b-c5mqatlaw9],
.components-rejoining-animation[b-c5mqatlaw9] {
    display: none;
}

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


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

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

}

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

@keyframes components-reconnect-modal-slideUp-b-c5mqatlaw9 {
    0% {
        transform: translateY(2.14rem) scale(0.95);
    }

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-c5mqatlaw9] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 0.29rem 1.71rem;
    border-radius: 0.29rem;
}

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

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

.components-rejoining-animation[b-c5mqatlaw9] {
    position: relative;
    width: 5.71rem;
    height: 5.71rem;
}

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

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

@keyframes components-rejoining-animation-b-c5mqatlaw9 {
    0% {
        top: 2.86rem;
        left: 2.86rem;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 2.86rem;
        left: 2.86rem;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 2.86rem;
        left: 2.86rem;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 0;
        width: 5.71rem;
        height: 5.71rem;
        opacity: 0;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
/* About page — same dark motif as the roster/home pages (surface #0f1520, Cinzel/Inter, per-feature
   accents). Sizing is rem (1rem = 14px base) so it scales with the responsive root; hairlines stay px. */

.about-root[b-k0pu0uay7i] {
    --surface: #0f1520;
    --border:  rgba(255, 255, 255, 0.07);
    --rtext:   #e8edf5;
    --muted:   #9aa7bb;
    --dim:     #6a7a90;
    font-family: 'Inter', sans-serif;
    color: var(--rtext);
    max-width: 64rem;
    margin: 0 auto;
    padding-bottom: 1rem;
}

/* HERO */
.ab-hero[b-k0pu0uay7i] {
    text-align: center;
    padding: 3.43rem 1.71rem 2.29rem;
    position: relative;
    overflow: hidden;
}
.ab-hero[b-k0pu0uay7i]::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(176, 112, 255, 0.18) 0%, transparent 70%);
    pointer-events: none;
}
.ab-eyebrow[b-k0pu0uay7i] {
    font-family: 'Cinzel', serif; font-size: 0.79rem; letter-spacing: .25em;
    color: #b070ff; text-transform: uppercase; margin-bottom: 1.14rem; opacity: .85;
}
.ab-title[b-k0pu0uay7i] {
    font-family: 'Cinzel', serif; font-size: clamp(2rem, 5.5vw, 3.71rem); font-weight: 700;
    letter-spacing: .03em; line-height: 1.12; margin: 0 0 1rem; text-wrap: balance;
    background: linear-gradient(135deg, #fff 0%, #f4a261 45%, #b070ff 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ab-lede[b-k0pu0uay7i] {
    font-size: 1.07rem; line-height: 1.6; color: rgba(232, 237, 245, 0.78);
    max-width: 44rem; margin: 0 auto 1.71rem;
}

/* Blue "Play on Roblox" CTA (shared by the hero + the closing CTA). */
.ab-play[b-k0pu0uay7i] {
    display: inline-flex; align-items: center; gap: 0.57rem;
    padding: 0.79rem 1.86rem; border-radius: 0.8rem;
    background: linear-gradient(180deg, #4d72ff 0%, #3b66f5 50%, #2f57e0 100%);
    box-shadow: 0 8px 22px rgba(59, 102, 245, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.3);
    color: #fff; text-decoration: none; font-weight: 800; font-size: 1.07rem; letter-spacing: .02em;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.ab-play:hover[b-k0pu0uay7i] {
    transform: translateY(-2px) scale(1.02); filter: brightness(1.05);
    box-shadow: 0 12px 30px rgba(59, 102, 245, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.35);
}
.ab-play:active[b-k0pu0uay7i] { transform: translateY(1px) scale(0.99); }
.ab-play-icon[b-k0pu0uay7i] {
    width: 0; height: 0; border-style: solid; border-width: 0.4em 0 0.4em 0.7em;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

/* SECTIONS */
.ab-section[b-k0pu0uay7i] { padding: 1.71rem 1.71rem 0.86rem; }
.ab-h2[b-k0pu0uay7i] {
    font-family: 'Cinzel', serif; font-size: 1.57rem; font-weight: 700; letter-spacing: .04em;
    margin: 0 0 1rem; color: var(--rtext);
}
.ab-h2[b-k0pu0uay7i]::after {
    content: ''; display: block; width: 3rem; height: 2px; margin-top: 0.5rem;
    background: linear-gradient(90deg, #e8633a, #b070ff); border-radius: 2px;
}
.ab-body[b-k0pu0uay7i] {
    font-size: 0.98rem; line-height: 1.7; color: rgba(232, 237, 245, 0.75);
    max-width: 52rem; margin: 0 0 1rem;
}
.ab-body strong[b-k0pu0uay7i] { color: var(--rtext); font-weight: 600; }

/* FEATURE GRID */
.ab-features[b-k0pu0uay7i] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}
.ab-feature[b-k0pu0uay7i] {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-top: 2px solid var(--accent); border-radius: 1rem;
    padding: 1.14rem 1.29rem 1.29rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ab-feature:hover[b-k0pu0uay7i] {
    transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    border-color: var(--accent);
}
.ab-feature-icon[b-k0pu0uay7i] {
    font-size: 1.86rem; line-height: 1; margin-bottom: 0.57rem;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 45%, transparent));
}
.ab-feature-title[b-k0pu0uay7i] {
    font-family: 'Cinzel', serif; font-size: 1.14rem; font-weight: 700; letter-spacing: .03em;
    margin: 0 0 0.43rem; color: var(--rtext);
}
.ab-feature-desc[b-k0pu0uay7i] {
    font-size: 0.86rem; line-height: 1.5; color: rgba(232, 237, 245, 0.68); margin: 0;
    flex: 1 1 auto;
}
.ab-feature-link[b-k0pu0uay7i] {
    margin-top: 0.86rem; align-self: flex-start;
    font-size: 0.79rem; font-weight: 700; letter-spacing: .03em; color: var(--accent);
    text-decoration: none; display: inline-flex; align-items: center; gap: 0.29rem;
    transition: gap 0.2s ease;
}
.ab-feature-link:hover[b-k0pu0uay7i] { gap: 0.5rem; }

/* BREAKTHROUGHS — the differentiators, as full-width numbered statement blocks. */
.ab-breaks[b-k0pu0uay7i] { display: flex; flex-direction: column; gap: 1rem; }
.ab-break[b-k0pu0uay7i] {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
    border-radius: 1rem; padding: 1.43rem 1.71rem;
}
.ab-break.hot[b-k0pu0uay7i] {
    background: radial-gradient(ellipse 60% 120% at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 70%), var(--surface);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.ab-break-num[b-k0pu0uay7i] {
    position: absolute; top: -0.36rem; right: 0.71rem;
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 4.29rem; line-height: 1;
    color: color-mix(in srgb, var(--accent) 16%, transparent); pointer-events: none; user-select: none;
}
.ab-break-kicker[b-k0pu0uay7i] {
    font-family: 'Cinzel', serif; font-size: 0.72rem; font-weight: 600; letter-spacing: .18em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 0.43rem;
}
.ab-break-head[b-k0pu0uay7i] {
    font-family: 'Cinzel', serif; font-size: clamp(1.14rem, 2.6vw, 1.43rem); font-weight: 700;
    letter-spacing: .02em; color: var(--rtext); margin: 0 0 0.57rem; max-width: 40rem; text-wrap: balance;
}
.ab-break-body[b-k0pu0uay7i] {
    position: relative;
    font-size: 0.93rem; line-height: 1.65; color: rgba(232, 237, 245, 0.74);
    margin: 0; max-width: 46rem;
}

/* GETTING STARTED — numbered steps */
.ab-steps[b-k0pu0uay7i] {
    list-style: none; counter-reset: ab; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem;
}
.ab-step[b-k0pu0uay7i] {
    counter-increment: ab; position: relative;
    background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: 0.86rem;
    padding: 1.07rem 1.14rem 1.07rem 3.57rem; display: flex; flex-direction: column; gap: 0.21rem;
}
.ab-step[b-k0pu0uay7i]::before {
    content: counter(ab); position: absolute; left: 1rem; top: 1rem;
    width: 1.86rem; height: 1.86rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.93rem; color: #0f1520;
    background: linear-gradient(135deg, #f4a261, #e8633a);
}
.ab-step-title[b-k0pu0uay7i] { font-family: 'Cinzel', serif; font-weight: 600; font-size: 1rem; letter-spacing: .02em; color: var(--rtext); }
.ab-step-text[b-k0pu0uay7i] { font-size: 0.84rem; line-height: 1.45; color: var(--muted); }

/* FAQ — native accordion */
.ab-faq[b-k0pu0uay7i] { display: flex; flex-direction: column; gap: 0.57rem; }
.ab-faq-item[b-k0pu0uay7i] {
    background: var(--surface); border: 1px solid var(--border); border-radius: 0.71rem;
    overflow: hidden; transition: border-color 0.2s ease;
}
.ab-faq-item[open][b-k0pu0uay7i] { border-color: rgba(176, 112, 255, 0.4); }
.ab-faq-q[b-k0pu0uay7i] {
    list-style: none; cursor: pointer; position: relative;
    padding: 0.93rem 2.86rem 0.93rem 1.14rem;
    font-family: 'Cinzel', serif; font-weight: 600; font-size: 0.98rem; letter-spacing: .02em;
    color: var(--rtext); transition: color 0.15s ease;
}
.ab-faq-q[b-k0pu0uay7i]::-webkit-details-marker { display: none; }
.ab-faq-q[b-k0pu0uay7i]::after {
    content: '+'; position: absolute; right: 1.14rem; top: 50%; transform: translateY(-50%);
    font-family: 'Inter', sans-serif; font-size: 1.29rem; color: var(--dim); transition: transform 0.2s ease, color 0.2s ease;
}
.ab-faq-item[open] .ab-faq-q[b-k0pu0uay7i]::after { transform: translateY(-50%) rotate(45deg); color: #b070ff; }
.ab-faq-q:hover[b-k0pu0uay7i] { color: #f4a261; }
.ab-faq-a[b-k0pu0uay7i] {
    padding: 0 1.14rem 1.07rem; font-size: 0.89rem; line-height: 1.6; color: rgba(232, 237, 245, 0.72);
}
.ab-faq-a a[b-k0pu0uay7i] { color: #f4a261; text-decoration: none; }
.ab-faq-a a:hover[b-k0pu0uay7i] { text-decoration: underline; }
.ab-faq-a strong[b-k0pu0uay7i] { color: var(--rtext); font-weight: 600; }

/* CLOSING CTA */
.ab-cta[b-k0pu0uay7i] {
    text-align: center; margin: 2.29rem 1.71rem 0; padding: 2.29rem 1.71rem;
    border-radius: 1.14rem; border: 1px solid var(--border);
    background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(232, 99, 58, 0.12) 0%, transparent 70%), var(--surface);
}
.ab-cta-title[b-k0pu0uay7i] {
    font-family: 'Cinzel', serif; font-size: 1.43rem; font-weight: 700; letter-spacing: .04em;
    color: var(--rtext); margin-bottom: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .ab-feature[b-k0pu0uay7i], .ab-feature-link[b-k0pu0uay7i], .ab-faq-q[b-k0pu0uay7i]::after, .ab-play[b-k0pu0uay7i] { transition: none; }
}
/* /Components/Pages/Badges.razor.rz.scp.css */
/* Badges page — mirrors the ObbLingZ Roster look (same dark surface + Cinzel/Inter type).
   Palette vars live on .badges-root; sizing is rem (1rem = 14px base) so it scales with the
   responsive root font-size; hairline borders + glow shadows stay px. One accent color per badge
   category (obby/egg/skyrace/turf/com), echoed on the filter buttons and card head.

   The five accents ARE the badge art's disc colours (handoff §4: disc colour = activity group), so
   a card's rule and its filter chip line up with the discs inside it instead of fighting them. The
   page's own purple (header glow / title gradient) is the site accent and is unrelated to these. */

.badges-root[b-i3wk9z15s4] {
    --obby:    #e13e3e;   /* crimson */
    --egg:     #f666a6;   /* pink    */
    --skyrace: #28b2b8;   /* teal    */
    --turf:    #4ab964;   /* green   */
    --com:     #4e7af0;   /* blue    */
    --surface: #0f1520;
    --border:  rgba(255,255,255,0.07);
    --rtext:   #e8edf5;
    --muted:   #6a7a90;
    font-family: 'Inter', sans-serif;
    color: var(--rtext);
}

/* HEADER */
.b-header[b-i3wk9z15s4] {
    text-align: center;
    padding: 3.43rem 1.71rem 2.29rem;
    position: relative;
    overflow: hidden;
}
.b-header[b-i3wk9z15s4]::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(176,112,255,0.18) 0%, transparent 70%);
    pointer-events: none;
}
.b-eyebrow[b-i3wk9z15s4] {
    font-family: 'Cinzel', serif;
    font-size: 0.79rem; letter-spacing: .25em;
    color: var(--com); text-transform: uppercase;
    margin-bottom: 1.14rem; opacity: .85;
}
.b-title[b-i3wk9z15s4] {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 5vw, 3.71rem);
    font-weight: 700; letter-spacing: .04em;
    background: linear-gradient(135deg, #fff 0%, #b070ff 60%, #4fc3f7 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; line-height: 1.15; margin-bottom: 0.86rem;
}
.b-sub[b-i3wk9z15s4] { font-size: 1rem; color: var(--muted); letter-spacing: .04em; }
.b-sub span[b-i3wk9z15s4] { color: var(--rtext); font-weight: 500; }

/* CONTROLS */
.controls[b-i3wk9z15s4] {
    display: flex; flex-wrap: wrap; gap: 0.57rem;
    justify-content: center; padding: 0 1.71rem 2.86rem;
}
.cat-btn[b-i3wk9z15s4] {
    padding: 0.5rem 1.29rem; border-radius: 7.14rem;
    border: 1px solid rgba(255,255,255,0.08);
    font-family: 'Inter', sans-serif; font-size: 0.86rem;
    font-weight: 600; letter-spacing: .04em;
    cursor: pointer; transition: all .2s;
    background: rgba(255,255,255,0.04); color: var(--muted);
    display: inline-flex; align-items: center; gap: 0.43rem;
}
.cat-btn-icon[b-i3wk9z15s4] { font-size: 1rem; line-height: 1; }
.cat-btn:hover[b-i3wk9z15s4] { color: var(--rtext); background: rgba(255,255,255,0.08); }
.cat-btn.on-all[b-i3wk9z15s4]     { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.22); }
.cat-btn.on-obby[b-i3wk9z15s4]    { background: rgba(225,62,62,0.18);  color: var(--obby);    border-color: var(--obby);    }
.cat-btn.on-egg[b-i3wk9z15s4]     { background: rgba(246,102,166,0.16);color: var(--egg);     border-color: var(--egg);     }
.cat-btn.on-skyrace[b-i3wk9z15s4] { background: rgba(40,178,184,0.18); color: var(--skyrace); border-color: var(--skyrace); }
.cat-btn.on-turf[b-i3wk9z15s4]    { background: rgba(74,185,100,0.16); color: var(--turf);    border-color: var(--turf);    }
.cat-btn.on-com[b-i3wk9z15s4]     { background: rgba(78,122,240,0.20); color: var(--com);     border-color: var(--com);     }

/* GRID */
.grid[b-i3wk9z15s4] {
    display: grid;
    /* min() clamps the track floor to the container: without it a 26rem card is wider than a phone
       viewport and the grid overflows horizontally, clipping the right edge of every card. */
    grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
    align-items: start;   /* cards size to their own badge count — no dead space under the short ones */
    gap: 1.14rem; padding: 0 1.71rem;
    max-width: 100rem; margin: 0 auto;
}

/* CARD */
.card[b-i3wk9z15s4] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.14rem; overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.card.hidden[b-i3wk9z15s4] { display: none; }
.card:hover[b-i3wk9z15s4] { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.5); }

.card-head[b-i3wk9z15s4] {
    display: flex; align-items: center; gap: 0.86rem;
    padding: 1.14rem 1.29rem 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
}
.card-icon[b-i3wk9z15s4] { font-size: 1.57rem; line-height: 1; flex-shrink: 0; }
.card-name[b-i3wk9z15s4] {
    font-family: 'Cinzel', serif; font-size: 1rem;
    font-weight: 600; letter-spacing: .06em; color: var(--rtext);
}
.card-count[b-i3wk9z15s4] {
    margin-left: auto; font-size: 0.71rem; font-weight: 700;
    letter-spacing: .06em; color: var(--muted);
    background: rgba(255,255,255,0.05); border: 1px solid var(--border);
    border-radius: 7.14rem; padding: 0.14rem 0.64rem;
}

/* accent-tinted card head + left rule per category */
.card.obby[b-i3wk9z15s4]    { border-top: 2px solid var(--obby);    }
.card.egg[b-i3wk9z15s4]     { border-top: 2px solid var(--egg);     }
.card.skyrace[b-i3wk9z15s4] { border-top: 2px solid var(--skyrace); }
.card.turf[b-i3wk9z15s4]    { border-top: 2px solid var(--turf);    }
.card.com[b-i3wk9z15s4]     { border-top: 2px solid var(--com);     }

/* BADGE ROW — the icon leads, name + criteria stack beside it. This replaced a two-column
   name | description table: a 56px icon left the description column too narrow inside a card that
   can be as tight as 26rem, and stacking also lets the long egg criteria breathe on mobile. */
.b-row[b-i3wk9z15s4] {
    display: flex; align-items: center; gap: 0.86rem;
    padding: 0.64rem 1rem;
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}
.b-row:last-child[b-i3wk9z15s4] { border-bottom: none; }
.b-row:hover[b-i3wk9z15s4] { background: rgba(255,255,255,0.025); }

/* The art is full-bleed: circular with transparent corners, and the badge's outer metal ring IS the
   image edge (it touches the midpoint of all four sides). So the breathing room is this row's
   padding + gap — never a scale-down inside the icon's own box — and there is deliberately no
   border-radius, mask, plate, tint or corner-spilling shadow on it. The ring is the frame.
   Masters are 512²; wwwroot/badgeart ships a 128px Lanczos cut (see tools/gen_badge_icons.py).
   Sized in px, not rem: the art stops reading below 48px, and rem would drift under that on the
   small-screen step of the root font-size ladder. */
.badge-icon[b-i3wk9z15s4] {
    width: 56px; height: 56px; flex-shrink: 0; display: block;
    transition: transform .2s;
}
.b-row:hover .badge-icon[b-i3wk9z15s4] { transform: scale(1.06); }

/* "Soon" = not wired up in the game yet, so it gets the unearned-badge treatment: a CSS filter,
   not a second art set (there is no locked variant, and game-side would rather not maintain one). */
.b-row.is-soon .badge-icon[b-i3wk9z15s4] { filter: grayscale(1) opacity(.45); }

.badge-text[b-i3wk9z15s4] { min-width: 0; }
.badge-cell[b-i3wk9z15s4] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.badge-name[b-i3wk9z15s4] { font-size: 0.86rem; font-weight: 600; color: var(--rtext); line-height: 1.25; }
.badge-desc[b-i3wk9z15s4] { font-size: 0.82rem; color: rgba(232,237,245,0.72); line-height: 1.35; margin-top: 0.14rem; }

.soon[b-i3wk9z15s4] {
    font-size: 0.6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #0f1520; background: #ffcf4d; border-radius: 7.14rem;
    padding: 0.07rem 0.5rem; flex-shrink: 0;
}

@media (max-width: 599px) {
    /* 48px is the floor — below it the ring tier stops separating and it is just a coloured dot. */
    .badge-icon[b-i3wk9z15s4] { width: 48px; height: 48px; }
    .b-row[b-i3wk9z15s4] { gap: 0.71rem; padding: 0.57rem 0.71rem; }
}

.b-legend[b-i3wk9z15s4] {
    text-align: center; padding: 2.86rem 1.71rem 0;
    font-size: 0.82rem; color: rgba(232,237,245,0.6); letter-spacing: .03em; line-height: 1.7;
}
.b-legend-k[b-i3wk9z15s4] { color: var(--rtext); font-weight: 600; }

.b-footer[b-i3wk9z15s4] {
    text-align: center; padding: 1rem 1.71rem 0;
    font-size: 0.79rem; color: var(--muted); letter-spacing: .04em;
}
/* /Components/Pages/DungeonGear.razor.rz.scp.css */
/* Dungeon Gear page — mirrors the roster family look (dark #0f1520 surface, Cinzel/Inter, per-item
   accent). Each weapon card carries its class accent via the inline --accent custom prop. Sizing is
   rem (1rem = 14px base) so it scales with the responsive root; hairlines/shadows stay px. */

.dg-root[b-oelrug41sn] {
    --surface: #0f1520;
    --border:  rgba(255, 255, 255, 0.07);
    --rtext:   #e8edf5;
    --muted:   #6a7a90;
    font-family: 'Inter', sans-serif;
    color: var(--rtext);
}

/* HEADER */
.dg-header[b-oelrug41sn] { text-align: center; padding: 3.43rem 1.71rem 2rem; position: relative; overflow: hidden; }
.dg-header[b-oelrug41sn]::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(176, 112, 255, 0.18) 0%, transparent 70%);
    pointer-events: none;
}
.dg-eyebrow[b-oelrug41sn] {
    font-family: 'Cinzel', serif; font-size: 0.79rem; letter-spacing: .25em;
    color: #b070ff; text-transform: uppercase; margin-bottom: 1.14rem; opacity: .85;
}
.dg-title[b-oelrug41sn] {
    font-family: 'Cinzel', serif; font-size: clamp(2rem, 5vw, 3.71rem); font-weight: 700; letter-spacing: .04em;
    background: linear-gradient(135deg, #fff 0%, #e8633a 55%, #b070ff 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    line-height: 1.15; margin: 0 0 0.71rem;
}
.dg-sub[b-oelrug41sn] { font-size: 1rem; color: var(--muted); letter-spacing: .04em; margin: 0 0 1rem; }
.dg-sub span[b-oelrug41sn] { color: var(--rtext); font-weight: 500; }
.dg-lede[b-oelrug41sn] { font-size: 0.93rem; color: rgba(232, 237, 245, 0.72); line-height: 1.6; max-width: 46rem; margin: 0 auto; }

/* SECTION HEADINGS */
.dg-section[b-oelrug41sn] {
    font-family: 'Cinzel', serif; font-size: 1.29rem; font-weight: 700; letter-spacing: .05em;
    max-width: 72rem; margin: 1.71rem auto 1rem; padding: 0 1.71rem; color: var(--rtext);
}
.dg-section-note[b-oelrug41sn] { font-family: 'Inter', sans-serif; font-size: 0.86rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }

/* WEAPON GRID */
.dg-grid[b-oelrug41sn] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1.14rem; max-width: 72rem; margin: 0 auto; padding: 0 1.71rem;
}
.dg-card[b-oelrug41sn] {
    display: flex; gap: 1rem; align-items: stretch;
    background: var(--surface); border: 1px solid var(--border);
    border-top: 2px solid var(--accent); border-radius: 1.14rem; overflow: hidden;
    padding: 1.14rem 1.29rem; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.dg-card:hover[b-oelrug41sn] { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }

/* Weapon art panel */
.dg-art[b-oelrug41sn] {
    flex: 0 0 4.29rem; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%);
    border-radius: 0.86rem;
}
.dg-svg[b-oelrug41sn] { width: 4rem; height: 8rem; display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }

.dg-body[b-oelrug41sn] { display: flex; flex-direction: column; min-width: 0; }
.dg-name-row[b-oelrug41sn] { display: flex; align-items: baseline; justify-content: space-between; gap: 0.57rem; flex-wrap: wrap; }
.dg-name[b-oelrug41sn] { font-family: 'Cinzel', serif; font-size: 1.07rem; font-weight: 700; letter-spacing: .03em; color: var(--rtext); }
.dg-class[b-oelrug41sn] {
    font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 7.14rem; padding: 0.14rem 0.57rem; white-space: nowrap;
}
.dg-glyph[b-oelrug41sn] { font-size: 0.86rem; }
.dg-blurb[b-oelrug41sn] { font-size: 0.82rem; color: rgba(232, 237, 245, 0.72); line-height: 1.4; margin: 0.5rem 0 0.71rem; }

/* Stat pills */
.dg-stats[b-oelrug41sn] { display: flex; gap: 0.43rem; flex-wrap: wrap; margin-bottom: 0.71rem; }
.dg-stat[b-oelrug41sn] {
    font-size: 0.68rem; font-weight: 600; letter-spacing: .04em; color: var(--muted);
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
    border-radius: 0.43rem; padding: 0.21rem 0.5rem;
}
.dg-stat b[b-oelrug41sn] { color: var(--rtext); font-weight: 700; margin-right: 0.14rem; }
.dg-stat.up[b-oelrug41sn] { color: #6bd968; border-color: rgba(107, 217, 104, 0.4); background: rgba(107, 217, 104, 0.1); }
.dg-stat.up b[b-oelrug41sn] { color: #6bd968; }

/* Part breakdown */
.dg-parts[b-oelrug41sn] { list-style: none; margin: auto 0 0; padding: 0; }
.dg-parts li[b-oelrug41sn] {
    font-size: 0.75rem; color: rgba(232, 237, 245, 0.6); line-height: 1.5;
    padding-left: 0.86rem; position: relative;
}
.dg-parts li[b-oelrug41sn]::before { content: '·'; position: absolute; left: 0.14rem; color: var(--accent); font-weight: 700; }

/* Wearables coming-soon */
.dg-soon[b-oelrug41sn] {
    display: flex; align-items: center; gap: 1rem;
    max-width: 72rem; margin: 0 auto; padding: 1.29rem 1.43rem;
    background: rgba(255, 255, 255, 0.02); border: 1px dashed var(--border); border-radius: 1.14rem;
}
.dg-soon-icon[b-oelrug41sn] { font-size: 2rem; line-height: 1; filter: grayscale(0.3) opacity(0.9); }
.dg-soon-title[b-oelrug41sn] { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 600; letter-spacing: .04em; color: var(--rtext); margin-bottom: 0.21rem; }
.dg-soon-text[b-oelrug41sn] { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }

.dg-footer[b-oelrug41sn] {
    text-align: center; padding: 2.86rem 1.71rem 0; font-size: 0.78rem;
    color: var(--muted); letter-spacing: .03em;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Public landing hero — large centered "ObbLandZ" wordmark, themed to the orange primary palette. */
.landing-hero[b-5lewxorhy5] {
    min-height: calc(100vh - 16rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2rem;
}

.landing-title[b-5lewxorhy5] {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(3rem, 13vw, 9rem);
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1.05;
    background: linear-gradient(180deg, #f4a261 0%, #e8633a 55%, #c44820 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 60px rgba(232, 99, 58, 0.25);
}

/* Roblox-style green "Play" call-to-action. */
.play-button[b-5lewxorhy5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: clamp(0.9rem, 2.2vw, 1.5rem) clamp(2.2rem, 6vw, 4rem);
    border-radius: 1rem;
    background: linear-gradient(180deg, #4d72ff 0%, #3b66f5 50%, #2f57e0 100%);
    box-shadow: 0 10px 30px rgba(59, 102, 245, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.3);
    color: #fff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 3.4vw, 2.6rem);
    letter-spacing: 0.02em;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.play-button:hover[b-5lewxorhy5] {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 38px rgba(59, 102, 245, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.35);
    filter: brightness(1.05);
}

.play-button:active[b-5lewxorhy5] {
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 6px 18px rgba(59, 102, 245, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

.play-icon[b-5lewxorhy5] {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.55em 0 0.55em 0.95em;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

.play-caption[b-5lewxorhy5] {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 2.4vw, 1.5rem);
    letter-spacing: 0.03em;
    color: #f4a261;
    text-shadow: 0 0 24px rgba(232, 99, 58, 0.3);
}

/* ── Signed-in landing ─────────────────────────────────────────────────────────────────────
   A compact wordmark up top + welcome + Play CTA, then a grid of cards linking to every part of
   the site. Card language mirrors the /rosters hub (dark surface, per-section accent, hover lift). */
.home-signed[b-5lewxorhy5] {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.5rem 0 2rem;
}

.home-top[b-5lewxorhy5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

/* Smaller than the anonymous hero's .landing-title — sits up top rather than filling the screen. */
.home-wordmark[b-5lewxorhy5] {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 7vw, 4rem);
    letter-spacing: 0.04em;
    line-height: 1.05;
    text-decoration: none;
    background: linear-gradient(180deg, #f4a261 0%, #e8633a 55%, #c44820 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 40px rgba(232, 99, 58, 0.22);
    transition: filter 0.12s ease;
}
.home-wordmark:hover[b-5lewxorhy5] { filter: brightness(1.08); }

.home-welcome[b-5lewxorhy5] {
    display: inline-flex;
    align-items: center;
    gap: 0.71rem;
    margin-top: 0.5rem;
}
.home-avatar[b-5lewxorhy5] {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 2px solid rgba(244, 162, 97, 0.5);
    object-fit: cover;
}
.home-hi[b-5lewxorhy5] {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    color: #e8edf5;
}
.home-tag[b-5lewxorhy5] {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #9aa7bb;
    max-width: 40rem;
    margin: 0.29rem 0 0;
}

/* Compact blue Play CTA (the big one is .play-button, used on the anonymous hero). */
.home-play[b-5lewxorhy5] {
    margin-top: 0.86rem;
    display: inline-flex;
    align-items: center;
    gap: 0.57rem;
    padding: 0.71rem 1.71rem;
    border-radius: 0.8rem;
    background: linear-gradient(180deg, #4d72ff 0%, #3b66f5 50%, #2f57e0 100%);
    box-shadow: 0 8px 22px rgba(59, 102, 245, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.3);
    color: #fff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.07rem;
    letter-spacing: 0.02em;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.home-play:hover[b-5lewxorhy5] {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.05);
    box-shadow: 0 12px 30px rgba(59, 102, 245, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.35);
}
.home-play:active[b-5lewxorhy5] { transform: translateY(1px) scale(0.99); }
.home-play .play-icon[b-5lewxorhy5] { border-width: 0.4em 0 0.4em 0.7em; }

/* Scroll cue at the base of the anonymous splash — hints that there's content below the fold. */
.scroll-cue[b-5lewxorhy5] {
    margin-top: 1.5rem;
    font-family: 'Inter', sans-serif; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.06em;
    color: #9aa7bb; opacity: 0.85;
    animation: home-bob-b-5lewxorhy5 1.8s ease-in-out infinite;
}
@keyframes home-bob-b-5lewxorhy5 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue[b-5lewxorhy5] { animation: none; } }

/* Anonymous "below the fold" explore — the same section grid the signed-in home shows, under the splash. */
.home-explore[b-5lewxorhy5] {
    max-width: 72rem; margin: 0 auto; padding: 1rem 0 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.home-explore-top[b-5lewxorhy5] { text-align: center; padding: 2rem 1.14rem 2.29rem; }
.home-explore-title[b-5lewxorhy5] {
    font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(1.7rem, 4.5vw, 2.71rem);
    letter-spacing: 0.03em; line-height: 1.15; margin: 0 0 0.71rem; text-wrap: balance;
    background: linear-gradient(135deg, #fff 0%, #f4a261 55%, #b070ff 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.home-explore-tag[b-5lewxorhy5] {
    font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.6;
    color: rgba(232, 237, 245, 0.72); max-width: 44rem; margin: 0 auto;
}

/* Section link cards — at most two columns; ObbLandZ TV spans the full width on the first row. */
.home-grid[b-5lewxorhy5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 54rem;
    margin: 0 auto;
}
.home-card.tv[b-5lewxorhy5] { grid-column: 1 / -1; }   /* first row, alone, spanning both columns */

@media (max-width: 640px) {
    .home-grid[b-5lewxorhy5] { grid-template-columns: 1fr; }
    .home-card.tv[b-5lewxorhy5] { grid-column: auto; }
}

.home-card[b-5lewxorhy5] {
    display: flex;
    flex-direction: column;
    gap: 0.57rem;
    padding: 1.14rem 1.29rem 1.29rem;
    background: #0f1520;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top: 2px solid var(--accent, #8a8a8a);
    border-radius: 1rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.home-card:hover[b-5lewxorhy5], .home-card:focus-visible[b-5lewxorhy5] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    border-color: var(--accent);
    outline: none;
}
.home-card-head[b-5lewxorhy5] { display: flex; align-items: center; gap: 0.71rem; }
.home-card-icon[b-5lewxorhy5] { font-size: 1.71rem; line-height: 1; flex-shrink: 0; }
.home-card-title[b-5lewxorhy5] {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.14rem;
    letter-spacing: 0.03em;
    color: #e8edf5;
    flex: 1 1 auto;
    transition: color 0.2s ease;
}
.home-card-arrow[b-5lewxorhy5] {
    color: #6a7a90;
    font-size: 1.14rem;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}
.home-card-desc[b-5lewxorhy5] {
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    line-height: 1.5;
    color: rgba(232, 237, 245, 0.72);
    margin: 0;
}
.home-card-tags[b-5lewxorhy5] { display: flex; flex-wrap: wrap; gap: 0.43rem; margin-top: 0.14rem; }
.home-card-tag[b-5lewxorhy5] {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #9aa7bb;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7.14rem;
    padding: 0.14rem 0.57rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.home-card:hover .home-card-title[b-5lewxorhy5] { color: var(--accent); }
.home-card:hover .home-card-arrow[b-5lewxorhy5] { color: var(--accent); transform: translateX(3px); }
.home-card:hover .home-card-tag[b-5lewxorhy5] { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }

/* Per-section accent (drives the top rule + hover title/arrow/tags/border). */
.home-card.tv[b-5lewxorhy5]        { --accent: #4fc3f7; }
.home-card.account[b-5lewxorhy5]   { --accent: #e8633a; }
.home-card.news[b-5lewxorhy5]      { --accent: #ffd700; }
.home-card.rosters[b-5lewxorhy5]   { --accent: #b070ff; }
.home-card.about[b-5lewxorhy5]     { --accent: #6bd968; }
/* /Components/Pages/Items.razor.rz.scp.css */
/* Items page — mirrors the ObbLingZ Roster / Badges look (dark surface + Cinzel/Inter type).
   Palette vars live on .items-root; sizing is rem (1rem = 14px base) so it scales with the
   responsive root font-size; hairline borders + glow shadows stay px. One accent color per shop
   (store/dungeon/turf/orchard); currency chips are color-coded (Gems vs turf Cash). */

.items-root[b-w4hkh03myo] {
    --store:   #4fc3f7;
    --dungeon: #b070ff;
    --turf:    #e8633a;
    --orchard: #6bd968;
    --surface: #0f1520;
    --border:  rgba(255,255,255,0.07);
    --rtext:   #e8edf5;
    --muted:   #6a7a90;
    font-family: 'Inter', sans-serif;
    color: var(--rtext);
}

/* HEADER */
.i-header[b-w4hkh03myo] {
    text-align: center;
    padding: 3.43rem 1.71rem 2.29rem;
    position: relative;
    overflow: hidden;
}
.i-header[b-w4hkh03myo]::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(176,112,255,0.18) 0%, transparent 70%);
    pointer-events: none;
}
.i-eyebrow[b-w4hkh03myo] {
    font-family: 'Cinzel', serif;
    font-size: 0.79rem; letter-spacing: .25em;
    color: var(--dungeon); text-transform: uppercase;
    margin-bottom: 1.14rem; opacity: .85;
}
.i-title[b-w4hkh03myo] {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 5vw, 3.71rem);
    font-weight: 700; letter-spacing: .04em;
    background: linear-gradient(135deg, #fff 0%, #b070ff 60%, #4fc3f7 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; line-height: 1.15; margin-bottom: 0.86rem;
}
.i-sub[b-w4hkh03myo] { font-size: 1rem; color: var(--muted); letter-spacing: .04em; }
.i-sub span[b-w4hkh03myo] { color: var(--rtext); font-weight: 500; }

/* CONTROLS */
.controls[b-w4hkh03myo] {
    display: flex; flex-wrap: wrap; gap: 0.57rem;
    justify-content: center; padding: 0 1.71rem 2.86rem;
}
.shop-btn[b-w4hkh03myo] {
    padding: 0.5rem 1.29rem; border-radius: 7.14rem;
    border: 1px solid rgba(255,255,255,0.08);
    font-family: 'Inter', sans-serif; font-size: 0.86rem;
    font-weight: 600; letter-spacing: .04em;
    cursor: pointer; transition: all .2s;
    background: rgba(255,255,255,0.04); color: var(--muted);
    display: inline-flex; align-items: center; gap: 0.43rem;
}
.shop-btn-icon[b-w4hkh03myo] { font-size: 1rem; line-height: 1; }
.shop-btn:hover[b-w4hkh03myo] { color: var(--rtext); background: rgba(255,255,255,0.08); }
.shop-btn.on-all[b-w4hkh03myo]     { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.22); }
.shop-btn.on-store[b-w4hkh03myo]   { background: rgba(79,195,247,0.15); color: var(--store);   border-color: var(--store);   }
.shop-btn.on-dungeon[b-w4hkh03myo] { background: rgba(176,112,255,0.18);color: var(--dungeon); border-color: var(--dungeon); }
.shop-btn.on-turf[b-w4hkh03myo]    { background: rgba(232,99,58,0.18);  color: var(--turf);    border-color: var(--turf);    }
.shop-btn.on-orchard[b-w4hkh03myo] { background: rgba(107,217,104,0.15);color: var(--orchard); border-color: var(--orchard); }

/* GRID */
.grid[b-w4hkh03myo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(29rem, 1fr));
    gap: 1.14rem; padding: 0 1.71rem;
    max-width: 100rem; margin: 0 auto;
}

/* CARD */
.card[b-w4hkh03myo] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.14rem; overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.card.hidden[b-w4hkh03myo] { display: none; }
.card:hover[b-w4hkh03myo] { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.5); }

.card-head[b-w4hkh03myo] {
    display: flex; align-items: center; gap: 0.86rem;
    padding: 1.14rem 1.29rem 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
}
.card-icon[b-w4hkh03myo] { font-size: 1.57rem; line-height: 1; flex-shrink: 0; }
.card-name[b-w4hkh03myo] {
    font-family: 'Cinzel', serif; font-size: 1rem;
    font-weight: 600; letter-spacing: .06em; color: var(--rtext);
}
.card-count[b-w4hkh03myo] {
    margin-left: auto; font-size: 0.71rem; font-weight: 700;
    letter-spacing: .06em; color: var(--muted);
    background: rgba(255,255,255,0.05); border: 1px solid var(--border);
    border-radius: 7.14rem; padding: 0.14rem 0.64rem;
}

.card.store[b-w4hkh03myo]   { border-top: 2px solid var(--store);   }
.card.dungeon[b-w4hkh03myo] { border-top: 2px solid var(--dungeon); }
.card.turf[b-w4hkh03myo]    { border-top: 2px solid var(--turf);    }
.card.orchard[b-w4hkh03myo] { border-top: 2px solid var(--orchard); }

.col-heads[b-w4hkh03myo] {
    display: grid; grid-template-columns: 10rem 6rem 1fr;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.015);
}
.col-h[b-w4hkh03myo] {
    padding: 0.43rem 1rem; font-size: 0.64rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.col-h + .col-h[b-w4hkh03myo] { border-left: 1px solid var(--border); }

/* ITEM ROW */
.i-row[b-w4hkh03myo] {
    display: grid; grid-template-columns: 10rem 6rem 1fr;
    align-items: stretch; border-bottom: 1px solid var(--border);
    transition: background .15s;
}
.i-row:last-child[b-w4hkh03myo] { border-bottom: none; }
.i-row:hover[b-w4hkh03myo] { background: rgba(255,255,255,0.025); }

.item-cell[b-w4hkh03myo] {
    padding: 0.71rem 1rem; display: flex; align-items: center; gap: 0.43rem;
    border-right: 1px solid var(--border); flex-wrap: wrap;
}
.pip[b-w4hkh03myo] { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }
.item-name[b-w4hkh03myo] { font-size: 0.86rem; font-weight: 600; color: var(--rtext); line-height: 1.25; }

.tag[b-w4hkh03myo] {
    font-size: 0.6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); background: rgba(255,255,255,0.06);
    border: 1px solid var(--border); border-radius: 7.14rem;
    padding: 0.05rem 0.43rem; flex-shrink: 0;
}

.cost-cell[b-w4hkh03myo] {
    padding: 0.71rem 1rem; border-right: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.21rem; justify-content: center;
}
.cost-amt[b-w4hkh03myo] { font-size: 0.93rem; font-weight: 700; color: var(--rtext); line-height: 1; }
.cur[b-w4hkh03myo] {
    font-size: 0.58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    border-radius: 7.14rem; padding: 0.05rem 0.43rem;
}
.cur-gems[b-w4hkh03myo] { color: #6fe0ef; background: rgba(79,195,247,0.15); }
.cur-cash[b-w4hkh03myo] { color: #ffcf6b; background: rgba(255,207,107,0.14); }

.item-desc[b-w4hkh03myo] { padding: 0.71rem 1rem; font-size: 0.82rem; color: rgba(232,237,245,0.72); line-height: 1.35; }

/* per-shop pip color */
.store   .pip[b-w4hkh03myo] { background: var(--store);   box-shadow: 0 0 6px var(--store);   }
.dungeon .pip[b-w4hkh03myo] { background: var(--dungeon); box-shadow: 0 0 6px var(--dungeon); }
.turf    .pip[b-w4hkh03myo] { background: var(--turf);    box-shadow: 0 0 6px var(--turf);    }
.orchard .pip[b-w4hkh03myo] { background: var(--orchard); box-shadow: 0 0 6px var(--orchard); }

.i-footer[b-w4hkh03myo] {
    text-align: center; padding: 3.43rem 1.71rem 0;
    font-size: 0.79rem; color: var(--muted); letter-spacing: .04em;
}
.i-footer a[b-w4hkh03myo] { color: var(--store); text-decoration: none; }
.i-footer a:hover[b-w4hkh03myo] { text-decoration: underline; }
/* /Components/Pages/News.razor.rz.scp.css */
/* News page — same dark motif as About/Home/rosters. Post cards carry their category accent via the
   inline --accent custom prop. The rendered-Markdown body reuses the global .legal-doc styles (the
   MarkupString children don't get this component's scope), so only the card chrome is styled here. */

.news-root[b-s0owp1ozs7] {
    --surface: #0f1520;
    --border:  rgba(255, 255, 255, 0.07);
    --rtext:   #e8edf5;
    --muted:   #9aa7bb;
    --dim:     #6a7a90;
    font-family: 'Inter', sans-serif;
    color: var(--rtext);
    max-width: 52rem;
    margin: 0 auto;
}

/* HEADER */
.news-header[b-s0owp1ozs7] { text-align: center; padding: 3.43rem 1.71rem 1.71rem; position: relative; overflow: hidden; }
.news-header[b-s0owp1ozs7]::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(176, 112, 255, 0.18) 0%, transparent 70%);
    pointer-events: none;
}
.news-eyebrow[b-s0owp1ozs7] {
    font-family: 'Cinzel', serif; font-size: 0.79rem; letter-spacing: .25em;
    color: #b070ff; text-transform: uppercase; margin-bottom: 1.14rem; opacity: .85;
}
.news-title[b-s0owp1ozs7] {
    font-family: 'Cinzel', serif; font-size: clamp(2rem, 5vw, 3.43rem); font-weight: 700; letter-spacing: .04em;
    line-height: 1.15; margin: 0 0 0.71rem;
    background: linear-gradient(135deg, #fff 0%, #b070ff 60%, #4fc3f7 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.news-lede[b-s0owp1ozs7] { font-size: 1rem; color: rgba(232, 237, 245, 0.72); margin: 0; }

/* Personalized greeting / sign-in nudge */
.news-greeting[b-s0owp1ozs7] {
    display: flex; align-items: center; gap: 0.86rem;
    margin: 0 1.71rem 1.71rem; padding: 0.86rem 1.14rem;
    background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 0.86rem;
}
.news-avatar[b-s0owp1ozs7] { width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid rgba(244, 162, 97, 0.5); object-fit: cover; flex-shrink: 0; }
.news-hi[b-s0owp1ozs7] { font-family: 'Cinzel', serif; font-weight: 600; font-size: 1.14rem; letter-spacing: .02em; color: var(--rtext); }
.news-sub[b-s0owp1ozs7] { font-size: 0.82rem; color: var(--muted); margin-top: 0.14rem; }
.news-sub a[b-s0owp1ozs7] { color: #f4a261; text-decoration: none; }
.news-sub a:hover[b-s0owp1ozs7] { text-decoration: underline; }

.news-signin[b-s0owp1ozs7] {
    margin: 0 1.71rem 1.71rem; padding: 0.86rem 1.14rem;
    background: rgba(79, 195, 247, 0.06); border: 1px solid rgba(79, 195, 247, 0.25); border-radius: 0.86rem;
    font-size: 0.89rem; color: rgba(232, 237, 245, 0.82); line-height: 1.5;
}
.news-signin strong[b-s0owp1ozs7] { color: var(--rtext); font-weight: 600; }

/* FEED */
.news-feed[b-s0owp1ozs7] { display: flex; flex-direction: column; gap: 1.14rem; padding: 0 1.71rem 1rem; }
.news-post[b-s0owp1ozs7] {
    background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--accent);
    border-radius: 1.14rem; padding: 1.29rem 1.43rem 1.43rem;
}
.news-post-meta[b-s0owp1ozs7] { display: flex; align-items: center; justify-content: space-between; gap: 0.71rem; margin-bottom: 0.57rem; }
.news-cat[b-s0owp1ozs7] {
    display: inline-flex; align-items: center; gap: 0.36rem;
    font-size: 0.68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 7.14rem; padding: 0.14rem 0.64rem;
}
.news-cat-icon[b-s0owp1ozs7] { font-size: 0.86rem; }
.news-date[b-s0owp1ozs7] { font-size: 0.78rem; color: var(--dim); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.news-post-title[b-s0owp1ozs7] {
    font-family: 'Cinzel', serif; font-size: 1.29rem; font-weight: 700; letter-spacing: .02em;
    color: var(--rtext); margin: 0 0 0.71rem; line-height: 1.25; text-wrap: balance;
}
/* Body markdown is styled by the global .legal-doc rules; keep the container tight. */
.news-post-body[b-s0owp1ozs7] { font-size: 0.93rem; }

.news-tags[b-s0owp1ozs7] { display: flex; flex-wrap: wrap; gap: 0.43rem; margin-top: 1rem; }
.news-tag[b-s0owp1ozs7] {
    font-size: 0.7rem; font-weight: 600; letter-spacing: .03em; color: var(--muted);
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
    border-radius: 7.14rem; padding: 0.14rem 0.57rem;
}
/* /Components/Pages/Roster.razor.rz.scp.css */
/* Ported from D:\RBProjects\ObbLandZ\roblox-pet-roster.html — scoped to the roster page.
   Palette vars live on .roster-root (inherit to children); --text renamed --rtext to
   avoid clashing with anything global. Sizing is in rem (1rem = 14px base) so it scales
   with the responsive root font-size; hairline borders + glow shadows stay px. */

.roster-root[b-zqo2cj6jlz] {
    --bronze:      #cd7f32;
    --bronze-glow: #ff9d3f;
    --silver:      #aab8c2;
    --silver-glow: #d0e8f8;
    --gold:        #ffd700;
    --gold-glow:   #ffe566;
    --plat:        #4fc3f7;
    --plat-glow:   #a0e8ff;
    --epic:        #b070ff;
    --epic-glow:   #d4aaff;
    --surface:     #0f1520;
    --border:      rgba(255,255,255,0.07);
    --rtext:       #e8edf5;
    --muted:       #6a7a90;
    font-family: 'Inter', sans-serif;
    color: var(--rtext);
}

/* HEADER */
.r-header[b-zqo2cj6jlz] {
    text-align: center;
    padding: 3.43rem 1.71rem 2.29rem;
    position: relative;
    overflow: hidden;
}
.r-header[b-zqo2cj6jlz]::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(176,112,255,0.18) 0%, transparent 70%);
    pointer-events: none;
}
.r-eyebrow[b-zqo2cj6jlz] {
    font-family: 'Cinzel', serif;
    font-size: 0.79rem; letter-spacing: .25em;
    color: var(--epic); text-transform: uppercase;
    margin-bottom: 1.14rem; opacity: .85;
}
.r-title[b-zqo2cj6jlz] {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 5vw, 3.71rem);
    font-weight: 700; letter-spacing: .04em;
    background: linear-gradient(135deg, #fff 0%, #b070ff 60%, #4fc3f7 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; line-height: 1.15; margin-bottom: 0.86rem;
}
.r-sub[b-zqo2cj6jlz] { font-size: 1rem; color: var(--muted); letter-spacing: .04em; }
.r-sub span[b-zqo2cj6jlz] { color: var(--rtext); font-weight: 500; }

/* CONTROLS */
.controls[b-zqo2cj6jlz] {
    display: flex; flex-wrap: wrap; gap: 0.57rem;
    justify-content: center; padding: 0 1.71rem 2.86rem;
}
.tier-btn[b-zqo2cj6jlz] {
    padding: 0.5rem 1.43rem; border-radius: 7.14rem;
    border: 1px solid rgba(255,255,255,0.08);
    font-family: 'Inter', sans-serif; font-size: 0.86rem;
    font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer; transition: all .2s;
    background: rgba(255,255,255,0.04); color: var(--muted);
}
.tier-btn:hover[b-zqo2cj6jlz] { color: var(--rtext); background: rgba(255,255,255,0.08); }
.tier-btn.on-all[b-zqo2cj6jlz] { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.22); }
.tier-btn.on-br[b-zqo2cj6jlz]  { background: rgba(205,127,50,0.18);  color: var(--bronze-glow); border-color: var(--bronze); }
.tier-btn.on-si[b-zqo2cj6jlz]  { background: rgba(170,184,194,0.15); color: var(--silver-glow); border-color: var(--silver); }
.tier-btn.on-go[b-zqo2cj6jlz]  { background: rgba(255,215,0,0.15);   color: var(--gold-glow);   border-color: var(--gold);   }
.tier-btn.on-pl[b-zqo2cj6jlz]  { background: rgba(79,195,247,0.15);  color: var(--plat-glow);   border-color: var(--plat);   }
.tier-btn.on-ep[b-zqo2cj6jlz]  { background: rgba(176,112,255,0.18); color: var(--epic-glow);   border-color: var(--epic);   }

/* GRID */
.grid[b-zqo2cj6jlz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22.86rem, 1fr));
    gap: 1.14rem; padding: 0 1.71rem;
    max-width: 100rem; margin: 0 auto;
}

/* CARD */
.card[b-zqo2cj6jlz] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.14rem; overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.card:hover[b-zqo2cj6jlz] { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.5); }

.card-head[b-zqo2cj6jlz] {
    display: flex; align-items: center; gap: 0.86rem;
    padding: 1.14rem 1.29rem 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
}
.card-icon[b-zqo2cj6jlz] { font-size: 1.57rem; line-height: 1; flex-shrink: 0; }
.card-name[b-zqo2cj6jlz] {
    font-family: 'Cinzel', serif; font-size: 1rem;
    font-weight: 600; letter-spacing: .06em; color: var(--rtext);
}

.col-heads[b-zqo2cj6jlz] {
    display: grid; grid-template-columns: 6rem 1fr 1fr;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.015);
}
.col-h[b-zqo2cj6jlz] {
    padding: 0.43rem 1rem; font-size: 0.64rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.col-h + .col-h[b-zqo2cj6jlz] { border-left: 1px solid var(--border); }

/* TIER ROW */
.t-row[b-zqo2cj6jlz] {
    display: grid; grid-template-columns: 6rem 1fr 1fr;
    align-items: center; border-bottom: 1px solid var(--border);
    transition: background .15s;
}
.t-row:last-child[b-zqo2cj6jlz] { border-bottom: none; }
.t-row:hover[b-zqo2cj6jlz] { background: rgba(255,255,255,0.025); }
.t-row.hidden[b-zqo2cj6jlz] { display: none; }

.t-row-sub[b-zqo2cj6jlz] { background: rgba(255,255,255,0.012); }
.t-row-sub:hover[b-zqo2cj6jlz] { background: rgba(255,255,255,0.03); }

.tier-cell[b-zqo2cj6jlz] {
    padding: 0.71rem 1rem; display: flex; align-items: center; gap: 0.5rem;
    border-right: 1px solid var(--border);
}
.tier-sub-cell[b-zqo2cj6jlz] {
    padding: 0.71rem 1rem;
    border-right: 1px solid var(--border);
    min-height: 1px;
}
.pip[b-zqo2cj6jlz] { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }
.tier-name[b-zqo2cj6jlz] { font-size: 0.64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.obbling[b-zqo2cj6jlz] { padding: 0.71rem 1rem; font-size: 0.86rem; font-weight: 500; color: var(--rtext); line-height: 1.3; }
.obbling + .obbling[b-zqo2cj6jlz] { border-left: 1px solid var(--border); }
.t-row-sub .obbling[b-zqo2cj6jlz] { color: rgba(232,237,245,0.7); font-size: 0.82rem; }

/* tier palette */
.br .pip[b-zqo2cj6jlz] { background: var(--bronze); box-shadow: 0 0 6px var(--bronze); }
.br .tier-name[b-zqo2cj6jlz] { color: var(--bronze-glow); }
.si .pip[b-zqo2cj6jlz] { background: var(--silver); box-shadow: 0 0 6px var(--silver); }
.si .tier-name[b-zqo2cj6jlz] { color: var(--silver-glow); }
.go .pip[b-zqo2cj6jlz] { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.go .tier-name[b-zqo2cj6jlz] { color: var(--gold-glow); }
.pl .pip[b-zqo2cj6jlz] { background: var(--plat); box-shadow: 0 0 6px var(--plat); }
.pl .tier-name[b-zqo2cj6jlz] { color: var(--plat-glow); }
.ep .pip[b-zqo2cj6jlz] { background: var(--epic); box-shadow: 0 0 8px var(--epic); }
.ep .tier-name[b-zqo2cj6jlz] { color: var(--epic-glow); }

.r-footer[b-zqo2cj6jlz] {
    text-align: center; padding: 3.43rem 1.71rem 0;
    font-size: 0.79rem; color: var(--muted); letter-spacing: .06em;
}
/* /Components/Pages/Rosters.razor.rz.scp.css */
/* Rosters hub — landing page for the four content catalogs. Mirrors the Badges/Items look
   (dark surface #0f1520, Cinzel/Inter type, one accent color per catalog). Sizing is rem
   (1rem = 14px base) so it scales with the responsive root font-size; hairlines/shadows stay px. */

.rosters-root[b-vlgp276eko] {
    --roster:  #e8633a;
    --badges:  #ffd700;
    --items:   #4fc3f7;
    --objects: #6bd968;
    --finds:   #b070ff;
    --gear:    #d64550;
    --surface: #0f1520;
    --border:  rgba(255, 255, 255, 0.07);
    --rtext:   #e8edf5;
    --muted:   #6a7a90;
    font-family: 'Inter', sans-serif;
    color: var(--rtext);
}

/* HEADER */
.r-header[b-vlgp276eko] {
    text-align: center;
    padding: 3.43rem 1.71rem 2.29rem;
    position: relative;
    overflow: hidden;
}
.r-header[b-vlgp276eko]::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(176, 112, 255, 0.18) 0%, transparent 70%);
    pointer-events: none;
}
.r-eyebrow[b-vlgp276eko] {
    font-family: 'Cinzel', serif;
    font-size: 0.79rem; letter-spacing: .25em;
    color: #b070ff; text-transform: uppercase;
    margin-bottom: 1.14rem; opacity: .85;
}
.r-title[b-vlgp276eko] {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 5vw, 3.71rem);
    font-weight: 700; letter-spacing: .04em;
    background: linear-gradient(135deg, #fff 0%, #b070ff 60%, #4fc3f7 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; line-height: 1.15; margin-bottom: 0.86rem;
}
.r-sub[b-vlgp276eko] {
    font-size: 1rem; color: var(--muted); letter-spacing: .02em;
    max-width: 44rem; margin: 0 auto; line-height: 1.55;
}

/* GRID */
.r-grid[b-vlgp276eko] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1.14rem; padding: 0 1.71rem 1.71rem;
    max-width: 72rem; margin: 0 auto;
}

/* CARD — the whole card is a single <a> (large tap target). */
.r-card[b-vlgp276eko] {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--muted);
    border-radius: 1.14rem; overflow: hidden;
    padding: 1.29rem 1.43rem 1.43rem;
    text-decoration: none; color: inherit;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.r-card:hover[b-vlgp276eko], .r-card:focus-visible[b-vlgp276eko] {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    outline: none;
}

.r-card-head[b-vlgp276eko] {
    display: flex; align-items: center; gap: 0.86rem;
    margin-bottom: 0.86rem;
}
.r-card-icon[b-vlgp276eko] { font-size: 1.86rem; line-height: 1; flex-shrink: 0; }
.r-card-name[b-vlgp276eko] {
    font-family: 'Cinzel', serif; font-size: 1.14rem;
    font-weight: 700; letter-spacing: .05em; color: var(--rtext);
}
.r-card-count[b-vlgp276eko] {
    margin-left: auto; font-size: 0.71rem; font-weight: 700;
    letter-spacing: .06em; color: var(--muted);
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
    border-radius: 7.14rem; padding: 0.21rem 0.71rem; white-space: nowrap;
}

.r-card-desc[b-vlgp276eko] {
    font-size: 0.89rem; color: rgba(232, 237, 245, 0.72);
    line-height: 1.5; margin: 0 0 1.29rem;
    flex-grow: 1;
}

.r-card-cta[b-vlgp276eko] {
    font-size: 0.82rem; font-weight: 600; letter-spacing: .04em;
    color: var(--muted); display: inline-flex; align-items: center; gap: 0.36rem;
    transition: color .2s, gap .2s;
}
.r-arrow[b-vlgp276eko] { transition: transform .2s; }

/* Per-catalog accent — top rule always; border + name + cta + arrow light up on hover/focus. */
.r-card.roster[b-vlgp276eko]  { border-top-color: var(--roster);  }
.r-card.badges[b-vlgp276eko]  { border-top-color: var(--badges);  }
.r-card.items[b-vlgp276eko]   { border-top-color: var(--items);   }
.r-card.objects[b-vlgp276eko] { border-top-color: var(--objects); }
.r-card.finds[b-vlgp276eko]   { border-top-color: var(--finds);   }
.r-card.gear[b-vlgp276eko]    { border-top-color: var(--gear);    }

.r-card.roster:hover[b-vlgp276eko],  .r-card.roster:focus-visible[b-vlgp276eko]  { border-color: var(--roster);  }
.r-card.badges:hover[b-vlgp276eko],  .r-card.badges:focus-visible[b-vlgp276eko]  { border-color: var(--badges);  }
.r-card.items:hover[b-vlgp276eko],   .r-card.items:focus-visible[b-vlgp276eko]   { border-color: var(--items);   }
.r-card.objects:hover[b-vlgp276eko], .r-card.objects:focus-visible[b-vlgp276eko] { border-color: var(--objects); }
.r-card.finds:hover[b-vlgp276eko],   .r-card.finds:focus-visible[b-vlgp276eko]   { border-color: var(--finds);   }
.r-card.gear:hover[b-vlgp276eko],    .r-card.gear:focus-visible[b-vlgp276eko]    { border-color: var(--gear);    }

.r-card.roster:hover  .r-card-name[b-vlgp276eko], .r-card.roster:focus-visible  .r-card-name[b-vlgp276eko] { color: var(--roster);  }
.r-card.badges:hover  .r-card-name[b-vlgp276eko], .r-card.badges:focus-visible  .r-card-name[b-vlgp276eko] { color: var(--badges);  }
.r-card.items:hover   .r-card-name[b-vlgp276eko], .r-card.items:focus-visible   .r-card-name[b-vlgp276eko] { color: var(--items);   }
.r-card.objects:hover .r-card-name[b-vlgp276eko], .r-card.objects:focus-visible .r-card-name[b-vlgp276eko] { color: var(--objects); }
.r-card.finds:hover   .r-card-name[b-vlgp276eko], .r-card.finds:focus-visible   .r-card-name[b-vlgp276eko] { color: var(--finds);   }
.r-card.gear:hover    .r-card-name[b-vlgp276eko], .r-card.gear:focus-visible    .r-card-name[b-vlgp276eko] { color: var(--gear);    }

.r-card.roster:hover  .r-card-cta[b-vlgp276eko], .r-card.roster:focus-visible  .r-card-cta[b-vlgp276eko] { color: var(--roster);  }
.r-card.badges:hover  .r-card-cta[b-vlgp276eko], .r-card.badges:focus-visible  .r-card-cta[b-vlgp276eko] { color: var(--badges);  }
.r-card.items:hover   .r-card-cta[b-vlgp276eko], .r-card.items:focus-visible   .r-card-cta[b-vlgp276eko] { color: var(--items);   }
.r-card.objects:hover .r-card-cta[b-vlgp276eko], .r-card.objects:focus-visible .r-card-cta[b-vlgp276eko] { color: var(--objects); }
.r-card.finds:hover   .r-card-cta[b-vlgp276eko], .r-card.finds:focus-visible   .r-card-cta[b-vlgp276eko] { color: var(--finds);   }
.r-card.gear:hover    .r-card-cta[b-vlgp276eko], .r-card.gear:focus-visible    .r-card-cta[b-vlgp276eko] { color: var(--gear);    }

.r-card:hover .r-card-cta[b-vlgp276eko], .r-card:focus-visible .r-card-cta[b-vlgp276eko] { gap: 0.57rem; }
.r-card:hover .r-arrow[b-vlgp276eko],    .r-card:focus-visible .r-arrow[b-vlgp276eko]    { transform: translateX(3px); }
/* /Components/Pages/ThemedObjects.razor.rz.scp.css */
/* Ported from D:\RBProjects\ObbLandZ\themed-objects-roster.html — scoped to the themed-objects page.
   Palette vars live on .objects-root (inherit to children). Sizing is rem (1rem = 14px base) so it scales
   with the responsive root font-size; hairline borders, glows, and the small accent bars stay px.
   Per-card --taccent / --tglow are set inline from each theme's accent color. */

.objects-root[b-usfpcxmj90] {
    --surface:   #0f1520;
    --surface-2: #131a26;
    --border:    rgba(255,255,255,0.07);
    --otext:     #e8edf5;
    --muted:     #6a7a90;
    --ground:    #7fd08a;   /* grounded */
    --float:     #7fb8ff;   /* floater  */
    --hazard:    #ff6a4d;   /* hazard   */
    font-family: 'Inter', sans-serif;
    color: var(--otext);
    padding-bottom: 2.86rem;
}

/* HEADER */
.o-header[b-usfpcxmj90] { text-align: center; padding: 4.29rem 1.71rem 2.86rem; position: relative; overflow: hidden; }
.o-header[b-usfpcxmj90]::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(127,184,255,0.16) 0%, transparent 70%);
    pointer-events: none;
}
.o-eyebrow[b-usfpcxmj90] {
    font-family: 'Cinzel', serif; font-size: 0.79rem; letter-spacing: .25em;
    color: var(--float); text-transform: uppercase; margin-bottom: 1.14rem; opacity: .85;
}
.o-title[b-usfpcxmj90] {
    font-family: 'Cinzel', serif; font-size: clamp(2rem, 5vw, 3.57rem);
    font-weight: 700; letter-spacing: .04em;
    background: linear-gradient(135deg, #fff 0%, #7fd08a 45%, #7fb8ff 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; line-height: 1.15; margin-bottom: 1rem;
}
.o-sub[b-usfpcxmj90] { font-size: 1rem; color: var(--muted); letter-spacing: .04em; }
.o-sub span[b-usfpcxmj90] { color: var(--otext); font-weight: 500; }
.o-lede[b-usfpcxmj90] {
    max-width: 51.43rem; margin: 1.43rem auto 0; font-size: 0.96rem; line-height: 1.6;
    color: #9fb0c4; letter-spacing: .01em;
}
.o-lede b[b-usfpcxmj90] { color: var(--otext); font-weight: 600; }

/* CONTROLS */
.controls[b-usfpcxmj90] { display: flex; flex-wrap: wrap; gap: 0.57rem; justify-content: center; padding: 2.29rem 1.71rem 0.57rem; }
.fbtn[b-usfpcxmj90] {
    padding: 0.5rem 1.29rem; border-radius: 7.14rem; border: 1px solid rgba(255,255,255,0.08);
    font-family: 'Inter', sans-serif; font-size: 0.86rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer; transition: all .2s; background: rgba(255,255,255,0.04); color: var(--muted);
}
.fbtn:hover[b-usfpcxmj90] { color: var(--otext); background: rgba(255,255,255,0.08); }
.fbtn.on-all[b-usfpcxmj90]    { background: rgba(255,255,255,0.10); color: #fff;          border-color: rgba(255,255,255,0.22); }
.fbtn.on-ground[b-usfpcxmj90] { background: rgba(127,208,138,0.15); color: var(--ground); border-color: var(--ground); }
.fbtn.on-float[b-usfpcxmj90]  { background: rgba(127,184,255,0.15); color: var(--float);  border-color: var(--float);  }
.fbtn.on-hazard[b-usfpcxmj90] { background: rgba(255,106,77,0.16);  color: var(--hazard); border-color: var(--hazard); }

.legend[b-usfpcxmj90] { display: flex; flex-wrap: wrap; gap: 1.29rem; justify-content: center; padding: 0.43rem 1.71rem 2.43rem; font-size: 0.79rem; color: var(--muted); }
.legend .lg[b-usfpcxmj90] { display: flex; align-items: center; gap: 0.5rem; letter-spacing: .04em; }
.lg .pip[b-usfpcxmj90] { width: 0.57rem; height: 0.57rem; border-radius: 50%; }
.lg.g .pip[b-usfpcxmj90] { background: var(--ground); box-shadow: 0 0 7px var(--ground); }
.lg.f .pip[b-usfpcxmj90] { background: var(--float);  box-shadow: 0 0 7px var(--float);  }
.lg.h .pip[b-usfpcxmj90] { background: var(--hazard); box-shadow: 0 0 7px var(--hazard); }

/* GRID */
.grid[b-usfpcxmj90] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(24.29rem, 1fr));
    gap: 1.14rem; padding: 0 1.71rem; max-width: 107.14rem; margin: 0 auto;
}

/* CARD */
.card[b-usfpcxmj90] {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 1.14rem; overflow: hidden; transition: transform .2s, box-shadow .2s;
    display: flex; flex-direction: column;
}
.card:hover[b-usfpcxmj90] { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.card.hidden[b-usfpcxmj90] { display: none; }

.card-head[b-usfpcxmj90] {
    display: flex; align-items: center; gap: 0.86rem; padding: 1.07rem 1.29rem;
    border-bottom: 1px solid var(--border); position: relative;
    background: linear-gradient(90deg, var(--tglow) 0%, rgba(255,255,255,0.02) 60%);
}
.card-head[b-usfpcxmj90]::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--taccent);
}
.card-icon[b-usfpcxmj90] {
    font-size: 1.57rem; line-height: 1; flex-shrink: 0; width: 2.43rem; height: 2.43rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.64rem; background: rgba(255,255,255,0.05);
}
.card-titles[b-usfpcxmj90] { flex: 1; min-width: 0; }
.card-name[b-usfpcxmj90] { font-family: 'Cinzel', serif; font-size: 1.07rem; font-weight: 600; letter-spacing: .06em; color: #fff; }
.card-meta[b-usfpcxmj90] { font-size: 0.75rem; color: var(--muted); letter-spacing: .06em; margin-top: 0.14rem; text-transform: uppercase; }

.obj-list[b-usfpcxmj90] { display: flex; flex-direction: column; }

.obj[b-usfpcxmj90] {
    padding: 0.93rem 1.29rem; border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent; transition: background .15s;
}
.obj:last-child[b-usfpcxmj90] { border-bottom: none; }
.obj:hover[b-usfpcxmj90] { background: rgba(255,255,255,0.02); }
.obj.hidden[b-usfpcxmj90] { display: none; }
.obj.k-grounded[b-usfpcxmj90] { border-left-color: rgba(127,208,138,0.55); }
.obj.k-floater[b-usfpcxmj90]  { border-left-color: rgba(127,184,255,0.55); }
.obj.k-carry[b-usfpcxmj90]    { border-left-color: rgba(255,106,77,0.55); }

.obj-top[b-usfpcxmj90] { display: flex; align-items: center; gap: 0.64rem; margin-bottom: 0.43rem; flex-wrap: wrap; }
.obj-emoji[b-usfpcxmj90] { font-size: 1.07rem; line-height: 1; }
.obj-name[b-usfpcxmj90] { font-size: 0.96rem; font-weight: 600; color: var(--otext); letter-spacing: .02em; }
.tag[b-usfpcxmj90] {
    font-size: 0.64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 0.18rem 0.57rem; border-radius: 7.14rem; border: 1px solid transparent;
}
.tag.grounded[b-usfpcxmj90] { color: var(--ground); background: rgba(127,208,138,0.10); border-color: rgba(127,208,138,0.35); }
.tag.floater[b-usfpcxmj90]  { color: var(--float);  background: rgba(127,184,255,0.10); border-color: rgba(127,184,255,0.35); }
.tag.carry[b-usfpcxmj90]    { color: var(--hazard); background: rgba(255,106,77,0.10);  border-color: rgba(255,106,77,0.35); }
.tag.hz[b-usfpcxmj90]       { color: var(--hazard); background: rgba(255,106,77,0.14);  border-color: rgba(255,106,77,0.5); }
.tag.new[b-usfpcxmj90]      { color: #ffd76a; background: rgba(255,215,106,0.12); border-color: rgba(255,215,106,0.45); }

.obj-desc[b-usfpcxmj90] { font-size: 0.86rem; line-height: 1.5; color: #a9b7c8; }

.obj-effect[b-usfpcxmj90] {
    margin-top: 0.57rem; padding: 0.64rem 0.79rem; border-radius: 0.64rem;
    background: rgba(255,106,77,0.07); border: 1px solid rgba(255,106,77,0.22);
    font-size: 0.82rem; line-height: 1.5; color: #f2c3b6;
}
.obj-effect b[b-usfpcxmj90] { color: #ffb8a4; font-weight: 600; }
.obj-effect .lbl[b-usfpcxmj90] {
    display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--hazard); margin-right: 0.43rem;
}

.obj.empty .obj-desc[b-usfpcxmj90] { color: var(--muted); font-style: italic; }

.o-footer[b-usfpcxmj90] { text-align: center; padding: 3.43rem 1.71rem 0; font-size: 0.79rem; color: var(--muted); letter-spacing: .05em; line-height: 1.7; }
.o-footer b[b-usfpcxmj90] { color: #9fb0c4; }
/* /Components/Pages/Tv.razor.rz.scp.css */
/* ObbLandZ TV (/TV) — a retro CRT "game system".
 *
 * The console (wwwroot/js/obblandz-console.js) never touches these elements directly; it only writes
 * state attributes onto `.tv-screen`, and this stylesheet turns them into a picture:
 *
 *   data-phase      off → on → ready    the 2s power-on. The ONLY fade that includes the scanlines.
 *   data-mode       which [data-layer] is visible (boot/menu/options/credits/login/select/connect/world)
 *   data-dock       hidden | center | corner — where the server dropdown lives; it SLIDES between them
 *   data-connect    waiting | failed | live
 *   data-scanlines  on | off      \
 *   data-glow       on | off       }  the OPTIONS screen, persisted in localStorage
 *   data-motion     full | reduced/
 *
 * Keeping visibility in CSS (rather than JS setting `hidden`) matters: Blazor owns this DOM and re-renders
 * the roster/server list constantly, so a single attribute on the root — which Blazor's render tree knows
 * nothing about — is the only handle JS can hold safely.
 */

/* ── headline stat cards ── only belong to the live view; on the menu they'd break the illusion ── */
.dash-stats[b-curqheokcq] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s ease, max-height 0.4s ease, margin-bottom 0.4s ease;
}

.dash-stats.is-on[b-curqheokcq] {
    opacity: 1;
    max-height: 14rem;
    margin-bottom: 1.25rem;
}

.dash-stat[b-curqheokcq] {
    flex: 1 1 160px;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: #1a1a2e44;
    border: 1px solid #ffffff14;
}

.dash-stat-label[b-curqheokcq] {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #f4a261;
}

.dash-stat-value[b-curqheokcq] {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(1.1rem, 2.4vw, 1.7rem);
    color: #fff;
    margin-top: 0.65rem;
}

.dash-stat-note[b-curqheokcq] {
    flex: 1 1 100%;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: #9fb0a0;
}

/* ── CRT bezel + tube ─────────────────────────────────────────────────────────────────────────── */
.tv-frame[b-curqheokcq] {
    background: linear-gradient(180deg, #2c2c2c, #141414);
    border: 2px solid #000;
    border-radius: 22px;
    padding: clamp(12px, 2vw, 28px);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.06);
}

.tv-screen[b-curqheokcq] {
    --tv-fade: 500ms;
    --tv-dock: 600ms;
    position: relative;
    overflow: hidden;
    height: clamp(280px, calc(100vh - 11rem), 620px);
    border-radius: 12px;
    background: radial-gradient(ellipse at center, #06210a 0%, #020a04 70%, #000 100%);
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.9), inset 0 0 30px rgba(57, 255, 20, 0.15);
}

.tv-screen[data-motion="reduced"][b-curqheokcq] { --tv-fade: 80ms; --tv-dock: 120ms; }

/* Everything inside the tube. This is what the POWER-ON animates — scanlines included, which is exactly
   why they're in here and not inside `.tv-fade`. */
.tv-crt[b-curqheokcq] {
    position: absolute;
    inset: 0;
    transform-origin: center center;
}

.tv-screen[data-phase="off"] .tv-crt[b-curqheokcq] { opacity: 0; }
.tv-screen[data-phase="on"] .tv-crt[b-curqheokcq] { animation: crt-on-b-curqheokcq 2s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.tv-screen[data-motion="reduced"][data-phase="on"] .tv-crt[b-curqheokcq] { animation-duration: 0.32s; }

/* An old tube waking up: a hot horizontal line snaps in, stretches open, blooms over-bright, then
   settles with one small flicker. */
@keyframes crt-on-b-curqheokcq {
    0%   { opacity: 0; transform: scaleY(0.004) scaleX(1.12); filter: brightness(8) saturate(0.2); }
    5%   { opacity: 1; transform: scaleY(0.004) scaleX(1.12); filter: brightness(9) saturate(0.2); }
    14%  { opacity: 1; transform: scaleY(0.02)  scaleX(1.06); filter: brightness(7) saturate(0.4); }
    30%  { opacity: 1; transform: scaleY(1)     scaleX(1);    filter: brightness(3.2) blur(1.2px); }
    48%  { filter: brightness(1.7) blur(0.5px); }
    62%  { filter: brightness(1.02); }
    72%  { filter: brightness(1.45); }
    100% { opacity: 1; transform: none; filter: none; }
}

/* The bright collapsing scan line of the switch-on. */
.tv-flash[b-curqheokcq] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: #eaffe8;
    box-shadow: 0 0 26px 7px rgba(214, 255, 214, 0.85);
    opacity: 0;
    transform: scaleX(0);
    pointer-events: none;
    z-index: 8;
}

.tv-screen[data-phase="on"] .tv-flash[b-curqheokcq] { animation: crt-line-b-curqheokcq 2s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.tv-screen[data-motion="reduced"][data-phase="on"] .tv-flash[b-curqheokcq] { animation-duration: 0.32s; }

@keyframes crt-line-b-curqheokcq {
    0%   { opacity: 0; transform: scaleX(0); }
    4%   { opacity: 1; transform: scaleX(1); }
    16%  { opacity: 0.85; transform: scaleX(1); }
    30%  { opacity: 0; transform: scaleX(1); }
    100% { opacity: 0; }
}

/* ── the view-transition fade ──────────────────────────────────────────────────────────────────────
   TWO wrappers that fade in lockstep, with `.tv-scanlines` as a sibling BETWEEN them. Splitting them is
   what lets the scanlines hold a z-order position mid-fade: a single wrapper at opacity < 1 becomes a
   stacking context and flattens its children, which would make the scanlines jump layers as the fade runs.
   Neither wrapper contains the scanlines, so they never fade on a view change — only the power-on does
   that, and it animates the whole `.tv-crt`. */
.tv-fade[b-curqheokcq] {
    position: absolute;
    inset: 0;
    opacity: 1;
    transition: opacity var(--tv-fade) ease;
}

.tv-fade.is-out[b-curqheokcq] { opacity: 0; }

.tv-fade-canvas[b-curqheokcq] { z-index: 0; }   /* the live map, under the scanlines */
.tv-fade-stage[b-curqheokcq]  { z-index: 3; }   /* menus + UI overlays, over them (unless scanlines are set to "over") */

/* Live map canvas — transparent so the phosphor bg + scanlines show through. */
.tv-canvas[b-curqheokcq] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.tv-stage[b-curqheokcq] { position: absolute; inset: 0; }

/* Scanline overlay. Default z-index puts it between the map and the UI — how the TV has always read. */
.tv-scanlines[b-curqheokcq] {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.35) 3px,
        rgba(0, 0, 0, 0.35) 4px
    );
    mix-blend-mode: multiply;
    animation: tv-flicker-b-curqheokcq 6s infinite;
}

@keyframes tv-flicker-b-curqheokcq {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
    92% { opacity: 0.82; }
}

/* ── OPTIONS ───────────────────────────────────────────────────────────────────────────────────────
   SCANLINES cycles behind → over → none. "behind" is the default and needs no rule (z-index: 2 above);
   "over" lifts them past the stage (3) and the dock (6) but stays under the power-on flash (8). */
.tv-screen[data-scanlines="over"] .tv-scanlines[b-curqheokcq] { z-index: 7; }
.tv-screen[data-scanlines="none"] .tv-scanlines[b-curqheokcq] { display: none; }

.tv-screen[data-glow="off"] .tv-layer[b-curqheokcq],
.tv-screen[data-glow="off"] .tv-title[b-curqheokcq],
.tv-screen[data-glow="off"] .tv-msg[b-curqheokcq],
.tv-screen[data-glow="off"] .tv-menu-logo[b-curqheokcq],
.tv-screen[data-glow="off"] .tv-menu-item[b-curqheokcq] { text-shadow: none; }
.tv-screen[data-glow="off"] .tv-server-select[b-curqheokcq],
.tv-screen[data-glow="off"] .tv-card[b-curqheokcq],
.tv-screen[data-glow="off"] .tv-menu-item[b-curqheokcq] { box-shadow: none; }

.tv-screen[data-motion="reduced"] .tv-scanlines[b-curqheokcq],
.tv-screen[data-motion="reduced"] .tv-msg[b-curqheokcq],
.tv-screen[data-motion="reduced"] .tv-ellipsis[b-curqheokcq]::after { animation: none; }

/* ── layers: exactly one is shown, chosen by data-mode ─────────────────────────────────────────── */
.tv-layer[b-curqheokcq] {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #39ff14;
    font-family: 'Press Start 2P', monospace;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.8), 0 0 18px rgba(57, 255, 20, 0.4);
    padding: 1rem;
}

.tv-screen[data-mode="boot"]     [data-layer="boot"][b-curqheokcq],
.tv-screen[data-mode="firstrun"] [data-layer="firstrun"][b-curqheokcq],
.tv-screen[data-mode="menu"]    [data-layer="menu"][b-curqheokcq],
.tv-screen[data-mode="options"] [data-layer="options"][b-curqheokcq],
.tv-screen[data-mode="credits"] [data-layer="credits"][b-curqheokcq],
.tv-screen[data-mode="login"]   [data-layer="login"][b-curqheokcq],
.tv-screen[data-mode="select"]  [data-layer="select"][b-curqheokcq],
.tv-screen[data-mode="connect"] [data-layer="connect"][b-curqheokcq] { display: flex; }

/* The world layer's children are absolutely positioned overlays, not a centred stack. */
.tv-screen[data-mode="world"] [data-layer="world"][b-curqheokcq] { display: block; padding: 0; }

.tv-title[b-curqheokcq] {
    font-size: clamp(1rem, 3vw, 2rem);
    letter-spacing: 0.1em;
}

.tv-msg[b-curqheokcq] {
    margin-top: 1.25rem;
    font-size: clamp(0.6rem, 1.8vw, 1rem);
    color: #ffcf3a;
    text-shadow: 0 0 8px rgba(255, 207, 58, 0.7);
    animation: tv-blink-b-curqheokcq 1.4s steps(1) infinite;
}

.tv-sub[b-curqheokcq] {
    margin-top: 1rem;
    font-size: clamp(0.45rem, 1.2vw, 0.7rem);
    color: #39ff1499;
    letter-spacing: 0.08em;
}

.tv-hint[b-curqheokcq] {
    margin-top: 1.6rem;
    font-size: clamp(0.4rem, 1vw, 0.55rem);
    color: #39ff1466;
    letter-spacing: 0.08em;
}

@keyframes tv-blink-b-curqheokcq { 50% { opacity: 0.25; } }

/* ── START MENU ────────────────────────────────────────────────────────────────────────────────── */
.tv-menu[b-curqheokcq] { display: flex; flex-direction: column; align-items: center; }

.tv-menu-logo[b-curqheokcq] {
    font-size: clamp(1.4rem, 5vw, 3rem);
    letter-spacing: 0.12em;
    color: #39ff14;
    text-shadow: 0 0 12px rgba(57, 255, 20, 0.9), 0 0 34px rgba(57, 255, 20, 0.45);
}

.tv-menu-sub[b-curqheokcq] {
    margin-top: 0.7rem;
    font-size: clamp(0.42rem, 1.1vw, 0.62rem);
    letter-spacing: 0.3em;
    color: #ffcf3aaa;
    text-shadow: 0 0 8px rgba(255, 207, 58, 0.5);
}

.tv-menu-stack[b-curqheokcq] {
    margin-top: clamp(1.4rem, 4vh, 2.6rem);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: stretch;
    min-width: clamp(150px, 34%, 250px);
}

/* Menu items carry their own selection caret so the focus ring reads as a game cursor, not a hover. */
.tv-menu-item[b-curqheokcq] {
    position: relative;
    padding: 0.75rem 1rem 0.75rem 2.2rem;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(0.6rem, 1.6vw, 0.85rem);
    letter-spacing: 0.08em;
    text-align: left;
    color: #cfe9c8;
    background: #04120655;
    border: 1px solid #39ff1433;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.tv-menu-item.is-small[b-curqheokcq] {
    padding: 0.55rem 0.8rem 0.55rem 1.8rem;
    font-size: clamp(0.45rem, 1.1vw, 0.6rem);
}

.tv-menu-item[b-curqheokcq]::before {
    content: '\25B6';                       /* ▶ selection caret */
    position: absolute;
    left: 0.8rem;
    opacity: 0;
    transform: translateX(-0.35rem);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.tv-menu-item.is-small[b-curqheokcq]::before { left: 0.6rem; }

/* One focus treatment for every input source — mouse hover, arrow keys, and gamepad all set `.is-focused`. */
.tv-menu-item.is-focused[b-curqheokcq],
.tv-menu-item:hover[b-curqheokcq] {
    color: #020a04;
    background: #39ff14;
    border-color: #39ff14;
    box-shadow: 0 0 16px rgba(57, 255, 20, 0.55);
    text-shadow: none;
}

.tv-menu-item.is-focused[b-curqheokcq]::before,
.tv-menu-item:hover[b-curqheokcq]::before { opacity: 1; transform: translateX(0); }

.tv-menu-item:active[b-curqheokcq] { transform: translateY(1px); }

/* ── OPTIONS / CREDITS panel ───────────────────────────────────────────────────────────────────── */
.tv-panel[b-curqheokcq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
    /* Breathing room INSIDE the scroll container. Two things need it: the focus glow is a box-shadow that
       `overflow-y: auto` would otherwise clip flat at the panel edge, and the `:active` press shifts an item
       1px down — a transform counts toward scrollable overflow, so with a snug fit every mousedown popped a
       scrollbar. Explicit box-sizing so the padding can't widen the clamped width, whatever the global reset
       does. */
    box-sizing: border-box;
    padding: 0.5rem 0.9rem 0.9rem;
    width: clamp(200px, 62%, 380px);
    max-height: 92%;
    overflow-y: auto;
}

.tv-panel-head[b-curqheokcq] {
    font-size: clamp(0.75rem, 2.2vw, 1.1rem);
    letter-spacing: 0.16em;
    color: #ffcf3a;
    text-shadow: 0 0 10px rgba(255, 207, 58, 0.6);
    margin-bottom: 0.6rem;
}

.tv-opt[b-curqheokcq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.65rem 0.85rem;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(0.45rem, 1.1vw, 0.6rem);
    color: #cfe9c8;
    background: #04120655;
    border: 1px solid #39ff1433;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.tv-opt.is-focused[b-curqheokcq],
.tv-opt:hover[b-curqheokcq] { color: #39ff14; border-color: #39ff14aa; background: #0c3a1355; }

/* The value comes from the state attribute the console writes after reading localStorage — rendering it
   in CSS rather than as JS textContent keeps it safe from a Blazor re-render of this (static) markup. */
.tv-opt-val[b-curqheokcq]::after { content: '\2022 \2022 \2022'; color: #6b7a6b; }
.tv-opt[data-state="on"]     .tv-opt-val[b-curqheokcq]::after { content: 'ON';     color: #39ff14; }
.tv-opt[data-state="off"]    .tv-opt-val[b-curqheokcq]::after { content: 'OFF';    color: #6b7a6b; }
.tv-opt[data-state="behind"] .tv-opt-val[b-curqheokcq]::after { content: 'BEHIND'; color: #39ff14; }
.tv-opt[data-state="over"]   .tv-opt-val[b-curqheokcq]::after { content: 'OVER';   color: #ffcf3a; }
.tv-opt[data-state="none"]   .tv-opt-val[b-curqheokcq]::after { content: 'NONE';   color: #6b7a6b; }

/* ── FIRST RUN ────────────────────────────────────────────────────────────────────────────────── */
.tv-firstrun-note[b-curqheokcq] {
    font-size: clamp(0.38rem, 0.95vw, 0.48rem);
    line-height: 1.9;
    color: #7fa478;
    text-align: left;
    text-shadow: none;
    margin-bottom: 0.5rem;
}

/* The only way out of the gate, so it reads as the primary action from the moment the tube warms up. */
.tv-save-btn[b-curqheokcq] {
    margin-top: 0.7rem;
    color: #020a04;
    background: #39ff14cc;
    border-color: #39ff14;
    text-shadow: none;
}

.tv-credits[b-curqheokcq] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.45rem 0.9rem;
    text-align: left;
    padding: 0.4rem 0.2rem 0.8rem;
}

.tv-cr-role[b-curqheokcq] {
    font-size: clamp(0.38rem, 0.9vw, 0.48rem);
    color: #ffcf3a99;
    letter-spacing: 0.1em;
    align-self: center;
}

.tv-cr-name[b-curqheokcq] {
    font-size: clamp(0.5rem, 1.2vw, 0.65rem);
    color: #cfe9c8;
}

.tv-cr-note[b-curqheokcq] {
    font-size: clamp(0.38rem, 0.95vw, 0.48rem);
    line-height: 1.9;
    color: #7fa478;
    text-align: left;
    text-shadow: none;
    margin-bottom: 0.7rem;
}

/* ── LOGIN GATE ────────────────────────────────────────────────────────────────────────────────── */
.tv-panel.is-login[b-curqheokcq] { align-items: center; text-align: center; }

/* The LoginButtons anchors are console-focusable (the input router matches `a.lb-btn`). CSS isolation can't
   style a child component's elements from here, so LoginButtons.razor.css owns the ring and reads its colour
   from these custom properties — which inherit straight through the isolation boundary. Phosphor green: it's
   the console's cursor colour everywhere else on this screen, and unlike any brand colour it stays visible
   against both the blue Roblox/Facebook pills and the white Google one. */
.tv-login-buttons[b-curqheokcq] {
    --lb-focus: #39ff14;
    --lb-focus-glow: rgba(57, 255, 20, 0.55);
    margin-top: 1.29rem;
    margin-bottom: 0.9rem;
    display: flex;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    text-shadow: none;
}

/* ── SERVER SELECT ─────────────────────────────────────────────────────────────────────────────── */
/* The dropdown itself is `.tv-dock` (outside the fade). This layer is only the framing around it, so the
   prompt sits above the dock's centred position and BACK sits below it. */
.tv-select-prompt[b-curqheokcq] {
    position: absolute;
    top: 24%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
}

/* Sits below the docked dropdown (which is centred at 52%). Centred with auto margins, NOT
   `left:50% + translateX(-50%)`: these are interactive, and `.tv-menu-item:active` sets
   `transform: translateY(1px)` — which REPLACES a centring transform rather than composing with it, so on
   mousedown a button would jump right by half its width and slip out from under the cursor. Any
   absolutely-positioned menu item has to centre without a transform for that reason. (The buttons
   themselves are statically positioned inside this flex column, so their press transform is safe.) */
.tv-select-actions[b-curqheokcq] {
    position: absolute;
    top: 63%;
    left: 0;
    right: 0;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: clamp(150px, 34%, 250px);
}

/* Dimmed until the dropdown actually holds a server — the console mirrors that onto data-picked. Pressing
   it anyway is refused with a caption rather than being unclickable, so the reason is always stated. */
.tv-screen[data-picked="no"] .tv-connect-btn[b-curqheokcq] { opacity: 0.4; }

.tv-screen[data-picked="yes"] .tv-connect-btn[b-curqheokcq] {
    color: #020a04;
    background: #39ff14cc;
    border-color: #39ff14;
    text-shadow: none;
}

/* ── CONNECTING ────────────────────────────────────────────────────────────────────────────────── */
.tv-connect-wait[b-curqheokcq],
.tv-connect-fail[b-curqheokcq] { display: none; }

.tv-screen[data-connect="waiting"] .tv-connect-wait[b-curqheokcq],
.tv-screen[data-connect="live"] .tv-connect-wait[b-curqheokcq] { display: block; }
.tv-screen[data-connect="failed"] .tv-connect-fail[b-curqheokcq] { display: block; }

.tv-connect-wait .tv-title[b-curqheokcq]::after {
    content: '';
    animation: tv-dots-b-curqheokcq 1.4s steps(4, end) infinite;
}

@keyframes tv-dots-b-curqheokcq {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
}

.tv-connect-actions[b-curqheokcq] {
    margin-top: 1.4rem;
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── subtitles ─────────────────────────────────────────────────────────────────────────────────────
   Sits above everything except the power-on flash, so a caption stays readable even with the scanlines
   set to "over". Empty is the resting state, so `:empty` collapses it entirely rather than leaving a
   floating box. */
.tv-subtitle[b-curqheokcq] {
    position: absolute;
    left: 50%;
    bottom: clamp(10px, 3vh, 24px);
    transform: translateX(-50%);
    z-index: 9;
    max-width: 84%;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    background: rgba(2, 10, 4, 0.82);
    border: 1px solid #39ff1433;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(0.4rem, 1.05vw, 0.56rem);
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #eafff0;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}

.tv-subtitle:empty[b-curqheokcq] { display: none; }
.tv-screen[data-subtitles="off"] .tv-subtitle[b-curqheokcq] { display: none; }

/* ── the dock: the one element that survives a view transition ─────────────────────────────────────
   It slides between the picker's centre position and its docked corner. Because it lives outside
   `.tv-fade`, the "dim everything except the dropdown" step is free — the fade simply doesn't reach it. */
.tv-dock[b-curqheokcq] {
    position: absolute;
    z-index: 6;
    transition:
        top var(--tv-dock) cubic-bezier(0.2, 0.8, 0.2, 1),
        left var(--tv-dock) cubic-bezier(0.2, 0.8, 0.2, 1),
        width var(--tv-dock) cubic-bezier(0.2, 0.8, 0.2, 1),
        transform var(--tv-dock) cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 300ms ease;
}

.tv-screen[data-dock="hidden"] .tv-dock[b-curqheokcq],
.tv-screen[data-dock="center"] .tv-dock[b-curqheokcq] {
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(74%, 21rem);
}

.tv-screen[data-dock="hidden"] .tv-dock[b-curqheokcq] { opacity: 0; pointer-events: none; }

.tv-screen[data-dock="corner"] .tv-dock[b-curqheokcq] {
    top: clamp(8px, 2.2vw, 20px);
    left: clamp(8px, 2.2vw, 20px);
    transform: translate(0, 0);
    width: clamp(150px, 26%, 220px);
}

/* Custom listbox (see the note in Tv.razor) — a native <select> can't be driven by a gamepad, because the
   browser owns its popup. `data-open` is written by the console and never appears in Blazor's render tree,
   so the 2.5s server-list refresh can't slam the list shut mid-use. */
.tv-picker[b-curqheokcq] { position: relative; width: 100%; }

.tv-picker-trigger[b-curqheokcq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    font-family: 'Press Start 2P', monospace;
    letter-spacing: 0.04em;
    text-align: left;
    color: #39ff14;
    background: #041206ee;
    border: 1px solid #39ff1466;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.25);
    cursor: pointer;
    outline: none;
    transition: font-size var(--tv-dock) ease, padding var(--tv-dock) ease,
                background 0.12s ease, border-color 0.12s ease;
}

/* One treatment for hover, keyboard and gamepad — they all resolve to .is-focused. */
.tv-picker-trigger:hover[b-curqheokcq],
.tv-picker-trigger.is-focused[b-curqheokcq],
.tv-picker-trigger:focus-visible[b-curqheokcq] {
    border-color: #39ff14;
    background: #0c3a13;
    box-shadow: 0 0 16px rgba(57, 255, 20, 0.45);
}

.tv-screen[data-dock="hidden"] .tv-picker-trigger[b-curqheokcq],
.tv-screen[data-dock="center"] .tv-picker-trigger[b-curqheokcq] {
    font-size: clamp(0.55rem, 1.5vw, 0.8rem);
    padding: 0.85rem 0.7rem;
    box-shadow: 0 0 22px rgba(57, 255, 20, 0.4);
}

.tv-screen[data-dock="corner"] .tv-picker-trigger[b-curqheokcq] {
    font-size: 0.6rem;
    padding: 0.45rem 0.5rem;
}

.tv-picker-label[b-curqheokcq] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-picker-caret[b-curqheokcq] { flex: 0 0 auto; transition: transform 0.15s ease; }
.tv-picker[data-open="yes"] .tv-picker-caret[b-curqheokcq] { transform: rotate(180deg); }

.tv-picker-list[b-curqheokcq] {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 2;
    box-sizing: border-box;
    max-height: clamp(120px, 34vh, 280px);
    overflow-y: auto;
    padding: 0.3rem;
    background: #020e05f5;
    border: 1px solid #39ff1466;
    border-radius: 8px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.7), 0 0 18px rgba(57, 255, 20, 0.25);
}

.tv-picker[data-open="yes"] .tv-picker-list[b-curqheokcq] { display: block; }

.tv-picker-opt[b-curqheokcq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.55rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    text-align: left;
    color: #cfe9c8;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

/* The already-chosen row, so re-opening the list shows where you are. */
.tv-picker-opt.is-picked[b-curqheokcq] { border-color: #39ff1455; color: #39ff14; }

.tv-picker-opt:hover[b-curqheokcq],
.tv-picker-opt.is-focused[b-curqheokcq] {
    color: #020a04;
    background: #39ff14;
    border-color: #39ff14;
}

.tv-picker-opt-name[b-curqheokcq] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-picker-opt-count[b-curqheokcq] { flex: 0 0 auto; font-size: 0.45rem; opacity: 0.75; }

.tv-picker-empty[b-curqheokcq] {
    padding: 0.6rem;
    font-size: 0.5rem;
    color: #6b7a6b;
    text-align: center;
}

/* ── WORLD: floating phosphor overlays above the map ───────────────────────────────────────────── */
.tv-controls[b-curqheokcq],
.tv-card[b-curqheokcq] {
    position: absolute;
    z-index: 5;
    font-family: 'Press Start 2P', monospace;
    color: #39ff14;
}

/* Roster sits directly under the docked server dropdown. */
.tv-controls[b-curqheokcq] {
    top: calc(clamp(8px, 2.2vw, 20px) + 2.5rem);
    left: clamp(8px, 2.2vw, 20px);
    width: clamp(150px, 26%, 220px);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Active-group outline (2D nav): a thin ring around the top-left controls group while it's the focused group.
   The server dropdown (dock) is part of that group, so it gets a matching ring. data-navgroup is console-set. */
.tv-screen[data-navgroup="controls"] .tv-controls[b-curqheokcq],
.tv-screen[data-navgroup="controls"] .tv-dock .tv-picker[b-curqheokcq] {
    outline: 1px solid rgba(57, 255, 20, 0.5);
    outline-offset: 4px;
    border-radius: 8px;
}

/* The roster is a dropdown (collapsed by default) on both desktop and portrait: the toggle below opens it,
   and a temporary SOUND mute button sits under the list. The head/close are unused now (the toggle collapses
   the list), so they stay hidden. */
.tv-roster-head[b-curqheokcq] { display: none; }

/* Players dropdown toggle + Sound button — one shared control-button look, stacked in the top-left column. */
.tv-roster-toggle-d[b-curqheokcq],
.tv-sound-btn[b-curqheokcq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.03em;
    color: #39ff14;
    background: #041206ee;
    border: 1px solid #39ff1466;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.22);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease;
}

/* One treatment for hover, keyboard and gamepad — all resolve to .is-focused. */
.tv-roster-toggle-d:hover[b-curqheokcq], .tv-roster-toggle-d.is-focused[b-curqheokcq],
.tv-sound-btn:hover[b-curqheokcq], .tv-sound-btn.is-focused[b-curqheokcq] {
    background: #0c3a13;
    border-color: #39ff14;
    box-shadow: 0 0 16px rgba(57, 255, 20, 0.4);
}

.tv-ctl-caret[b-curqheokcq] { flex: 0 0 auto; transition: transform 0.15s ease; }
.tv-roster-toggle-d.is-open .tv-ctl-caret[b-curqheokcq] { transform: rotate(180deg); }

/* Sound button icon+label, rendered by CSS off the console's data-muted so a Blazor re-render can't wipe it.
   Amber + 🔇 when the effective sound is muted, phosphor + 🔊 when it's on. */
.tv-sound-txt[b-curqheokcq]::after { content: '🔊 SOUND'; }
.tv-screen[data-muted="yes"] .tv-sound-btn[b-curqheokcq] {
    color: #ffcf3a;
    border-color: #ffcf3a66;
    box-shadow: 0 0 10px rgba(255, 207, 58, 0.22);
}
.tv-screen[data-muted="yes"] .tv-sound-txt[b-curqheokcq]::after { content: '🔇 MUTED'; }

/* top-middle: floor / view selector + reset-view button */
.tv-viewbar[b-curqheokcq] {
    position: absolute;
    top: clamp(8px, 2.2vw, 20px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tv-reset[b-curqheokcq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    color: #7ad1ff;
    background: #041206ee;
    border: 1px solid #7ad1ff66;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(122, 209, 255, 0.22);
    cursor: pointer;
    outline: none;
}
.tv-reset:hover[b-curqheokcq], .tv-reset.is-focused[b-curqheokcq] { background: #062a33; border-color: #7ad1ff; box-shadow: 0 0 14px rgba(122, 209, 255, 0.5); }

/* Map view selector — a custom listbox (amber, matching the old floor <select>) so a gamepad can reach the
   options. Mirrors the server picker's structure; data-open is console-owned. */
.tv-viewpicker[b-curqheokcq] { position: relative; }

.tv-viewpicker-trigger[b-curqheokcq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    color: #ffcf3a;
    background: #041206ee;
    border: 1px solid #ffcf3a66;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(255, 207, 58, 0.22);
    cursor: pointer;
    outline: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.tv-viewpicker-trigger:hover[b-curqheokcq],
.tv-viewpicker-trigger.is-focused[b-curqheokcq],
.tv-viewpicker-trigger:focus-visible[b-curqheokcq] {
    border-color: #ffcf3a;
    background: #2a2206;
    box-shadow: 0 0 16px rgba(255, 207, 58, 0.4);
}
.tv-viewpicker[data-open="yes"] .tv-picker-caret[b-curqheokcq] { transform: rotate(180deg); }

.tv-viewpicker-list[b-curqheokcq] {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    z-index: 6;
    box-sizing: border-box;
    max-height: clamp(140px, 50vh, 320px);
    overflow-y: auto;
    padding: 0.3rem;
    background: #020e05f5;
    border: 1px solid #ffcf3a66;
    border-radius: 8px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.7), 0 0 18px rgba(255, 207, 58, 0.2);
}
.tv-viewpicker[data-open="yes"] .tv-viewpicker-list[b-curqheokcq] { display: block; }

.tv-viewpicker-opt[b-curqheokcq] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.55rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.03em;
    text-align: left;
    color: #cfe9c8;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.tv-viewpicker-opt.is-picked[b-curqheokcq] { border-color: #ffcf3a55; color: #ffcf3a; }
.tv-viewpicker-opt:hover[b-curqheokcq],
.tv-viewpicker-opt.is-focused[b-curqheokcq] { color: #020a04; background: #ffcf3a; border-color: #ffcf3a; }

/* side-view rotate arrows — inline in the viewbar, flanking the view dropdown + reset. */
.tv-rot[b-curqheokcq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: #39ff14;
    background: #041206ee;
    border: 1px solid #39ff1466;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.25);
    cursor: pointer;
}
.tv-rot:hover[b-curqheokcq], .tv-rot.is-focused[b-curqheokcq] { background: #0c3a13; border-color: #39ff14; box-shadow: 0 0 14px rgba(57, 255, 20, 0.55); }

/* facing readout — just below the viewbar (centered on desktop; the portrait block repositions it). */
.tv-rot-label[b-curqheokcq] {
    position: absolute;
    top: calc(clamp(8px, 2.2vw, 20px) + 2.7rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: #39ff14;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.6);
}

.tv-roster[b-curqheokcq] {
    max-height: clamp(140px, 40vh, 360px);
    overflow-y: auto;
    display: none;                 /* collapsed by default now — the toggle above opens it (dropdown) */
    flex-direction: column;
    gap: 2px;
    background: #02100655;
    border: 1px solid #39ff1422;
    border-radius: 8px;
    padding: 4px;
    backdrop-filter: blur(1px);
}

.tv-roster.is-open[b-curqheokcq] { display: flex; }

.tv-roster-empty[b-curqheokcq] {
    font-size: 0.55rem;
    color: #6b7a6b;
    padding: 0.5rem;
    text-align: center;
}

.tv-roster-row[b-curqheokcq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.35rem 0.4rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #cfe9c8;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.tv-roster-row:hover[b-curqheokcq] { background: #0c3a1366; }
.tv-roster-row.is-focused[b-curqheokcq] { background: #0c3a13; border-color: #39ff14; box-shadow: 0 0 10px rgba(57, 255, 20, 0.4); }

.tv-roster-row.is-active[b-curqheokcq] {
    background: #0c3a13;
    border-color: #39ff14aa;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.35);
}

.tv-roster-dot[b-curqheokcq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 6px currentColor;
}

.tv-roster-name[b-curqheokcq] {
    flex: 1 1 auto;
    font-size: 0.55rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-roster-zone[b-curqheokcq] {
    flex: 0 0 auto;
    font-size: 0.45rem;
    color: #7fa478;
    text-transform: uppercase;
}

/* right: selected-player action card */
.tv-card[b-curqheokcq] {
    top: clamp(8px, 2.2vw, 20px);
    right: clamp(8px, 2.2vw, 20px);
    width: clamp(180px, 30%, 250px);
    /* Head stays put; the body (buttons or a tall give/grant form) scrolls within a tube-bounded card. */
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 2.5rem);
    background: #041206ee;
    border: 1px solid #39ff1466;
    border-radius: 10px;
    box-shadow: 0 0 18px rgba(57, 255, 20, 0.3);
    padding: 0.75rem;
}

/* The scrollable region of the card (the ✕ is absolute, so it stays pinned as this scrolls). */
.tv-card-body[b-curqheokcq] { min-height: 0; overflow-y: auto; }

.tv-card-x[b-curqheokcq] {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    color: #39ff1499;
    font-size: 0.7rem;
    cursor: pointer;
}
.tv-card-x:hover[b-curqheokcq] { color: #39ff14; }
.tv-card-x.is-focused[b-curqheokcq] { color: #eafff0; text-shadow: 0 0 8px rgba(234, 255, 240, 0.7); }

.tv-card-head[b-curqheokcq] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.7rem;
}

.tv-card-av[b-curqheokcq] {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: #0a2410;
    border: 1px solid #39ff1444;
    object-fit: cover;
    flex: 0 0 auto;
}

.tv-card-name[b-curqheokcq] {
    font-size: 0.7rem;
    color: #39ff14;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.6);
    word-break: break-word;
}

.tv-card-meta[b-curqheokcq] {
    font-size: 0.45rem;
    color: #7fa478;
    margin-top: 0.25rem;
    text-transform: uppercase;
}

.tv-card-actions[b-curqheokcq] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tv-act-btn[b-curqheokcq] {
    width: 100%;
    padding: 0.5rem 0.4rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.03em;
    color: #020a04;
    background: #39ff14;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: filter 0.1s ease, transform 0.05s ease;
}

.tv-act-btn:hover[b-curqheokcq] { filter: brightness(1.12); }
/* Focus ring — the card buttons already carry colour, so a bright outline reads better than a bg swap. */
.tv-act-btn.is-focused[b-curqheokcq] { outline: 2px solid #eafff0; outline-offset: 2px; box-shadow: 0 0 12px rgba(234, 255, 240, 0.55); }
.tv-act-btn:active[b-curqheokcq] { transform: translateY(1px); }
.tv-act-btn:disabled[b-curqheokcq] { opacity: 0.45; cursor: default; }

/* Zoom / follow — cyan to set it apart from the green give actions; filled when active. */
.tv-act-btn.zoom[b-curqheokcq] {
    color: #7ad1ff;
    background: #062a33;
    border: 1px solid #7ad1ff66;
}
.tv-act-btn.zoom.is-on[b-curqheokcq] {
    color: #020a04;
    background: #7ad1ff;
    box-shadow: 0 0 12px rgba(122, 209, 255, 0.5);
}

/* Cheer — warm amber, celebratory; set apart from the green give + cyan zoom actions. */
.tv-act-btn.cheer[b-curqheokcq] {
    color: #020a04;
    background: #ffcf3a;
}

.tv-card-note[b-curqheokcq] {
    margin-top: 0.7rem;
    font-size: 0.42rem;
    line-height: 1.5;
    color: #ffb24a;
    text-transform: uppercase;
}

/* ── in-card give/grant FORM (swaps in place of the card's action buttons) ─────────────────────────────
   The form lives inside .tv-card; the body cross-fades on the swap. Option buttons are console-navigable
   (data-group="card"): the chosen value keeps an amber .is-sel mark, the cursor is the phosphor swap. */
.tv-card-body[b-curqheokcq] { animation: tv-card-fade-b-curqheokcq 0.22s ease; }
@keyframes tv-card-fade-b-curqheokcq { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.tv-card-form[b-curqheokcq] { display: flex; flex-direction: column; gap: 0.5rem; }
.tv-form-title[b-curqheokcq] {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    color: #ffcf3a;
    text-shadow: 0 0 8px rgba(255, 207, 58, 0.5);
    margin-bottom: 0.1rem;
}
.tv-form-group[b-curqheokcq] { display: flex; flex-direction: column; gap: 0.3rem; }
.tv-form-label[b-curqheokcq] { font-size: 0.45rem; letter-spacing: 0.06em; color: #7fa478; text-transform: uppercase; }
.tv-form-opts[b-curqheokcq] { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.tv-form-opt[b-curqheokcq] {
    padding: 0.4rem 0.5rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #cfe9c8;
    background: #04120655;
    border: 1px solid #39ff1433;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.1s ease, background 0.1s ease, border-color 0.1s ease;
}
.tv-form-opt:hover[b-curqheokcq],
.tv-form-opt.is-focused[b-curqheokcq] { color: #020a04; background: #39ff14; border-color: #39ff14; }
/* The chosen value stays marked (amber) even when the cursor moves off it. */
.tv-form-opt.is-sel[b-curqheokcq] { border-color: #ffcf3a; color: #ffcf3a; box-shadow: 0 0 6px rgba(255, 207, 58, 0.3); }
.tv-form-opt.is-sel.is-focused[b-curqheokcq] { color: #020a04; background: #ffcf3a; border-color: #ffcf3a; }

.tv-form-actions[b-curqheokcq] { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.tv-form-actions .tv-act-btn[b-curqheokcq] { flex: 1 1 0; width: auto; }
.tv-act-btn.send[b-curqheokcq] { background: #39ff14; color: #020a04; }
.tv-act-btn.back[b-curqheokcq] { background: #04120655; color: #cfe9c8; border: 1px solid #39ff1433; }

/* keep overlays usable on narrow screens — controls top-left, card bottom-right (no horizontal overlap) */
@media (max-width: 640px) {
    .tv-controls[b-curqheokcq] { width: 46%; }
    .tv-roster[b-curqheokcq] { max-height: clamp(110px, 26vh, 200px); }
    .tv-card[b-curqheokcq] { top: auto; bottom: clamp(8px, 2.2vw, 20px); width: clamp(150px, 52%, 220px); }
    .tv-screen[data-dock="corner"] .tv-dock[b-curqheokcq] { width: 46%; }
}

/* ── PORTRAIT (phones held upright) ──────────────────────────────────────────────────────────────────
   The CRT is inherently wide, so in portrait we reshape the tube taller and turn the floating corner
   overlays into BOTTOM SHEETS, letting the live map keep the screen. Landscape (including narrow landscape,
   via the 640px block above) keeps the corner layout — per the call that a phone in landscape has too
   little height to be worth a separate design. These rules come after the 640px block, so on a portrait
   phone (which matches both) they win by source order. */
@media (orientation: portrait) {
    /* Taller, portrait-shaped tube. The canvas resizes to this box via its ResizeObserver (obblandz-tv.js),
       so there's no drift to chase. dvh tracks the visible viewport past the mobile toolbar. */
    .tv-screen[b-curqheokcq] { height: clamp(360px, calc(100dvh - 12rem), 720px); }

    /* Headline stats: one compact 3-across row (flex-basis 0 so they never wrap) instead of stealing height. */
    .dash-stats.is-on[b-curqheokcq] { max-height: 6rem; }
    .dash-stat[b-curqheokcq] { flex: 1 1 0; min-width: 0; padding: 0.55rem 0.5rem; }
    .dash-stat-label[b-curqheokcq] { font-size: 0.6rem; letter-spacing: 0.05em; }
    .dash-stat-value[b-curqheokcq] { font-size: clamp(0.85rem, 4.2vw, 1.25rem); margin-top: 0.3rem; }

    /* Server picker compact top-left; floor/view selector to the top-right — no center collision between them. */
    .tv-screen[data-dock="corner"] .tv-dock[b-curqheokcq] { width: min(56%, 12.5rem); }
    .tv-viewbar[b-curqheokcq] {
        top: clamp(8px, 2.2vw, 20px);
        left: auto;
        right: clamp(8px, 2.2vw, 20px);
        transform: none;
    }
    /* The view list opens leftward from the top-right trigger so it can't run off the tube's right edge. */
    .tv-viewpicker-list[b-curqheokcq] { left: auto; right: 0; }
    /* Facing readout follows the top-right viewbar on portrait. */
    .tv-rot-label[b-curqheokcq] { left: auto; right: clamp(8px, 2.2vw, 20px); transform: none; }

    /* The roster is a top-left dropdown on portrait too (unified with desktop) — cap its height and give the
       control column a portrait-appropriate width. The player CARD stays a bottom sheet (below). */
    .tv-controls[b-curqheokcq] { width: min(62%, 15rem); }
    .tv-roster[b-curqheokcq] { max-height: 40dvh; }

    /* Player card → bottom sheet, scrollable if the actions run long. */
    .tv-card[b-curqheokcq] {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        max-height: 60dvh;
        overflow-y: auto;
        border-radius: 12px 12px 0 0;
        z-index: 7;
        /* clear the home indicator / gesture bar on phones with a bottom inset */
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    /* Touch polish — comfortable tap targets on the roster rows + the card's close button. */
    .tv-roster-row[b-curqheokcq] { min-height: 2.6rem; }
    .tv-card-x[b-curqheokcq] { top: 8px; right: 10px; font-size: 0.95rem; padding: 0.15rem 0.35rem; }
}
/* /Components/Shared/LoginButtons.razor.rz.scp.css */
/* Three-provider sign-in buttons — branded solid pills (Roblox blue, Google white, Facebook blue). */
.login-buttons[b-63i8fdhnc0] {
    display: flex; flex-direction: column; gap: 0.71rem;
    width: 100%; max-width: 22rem; margin: 0 auto;
}
.login-buttons.compact[b-63i8fdhnc0] { max-width: 18rem; gap: 0.5rem; }

.lb-btn[b-63i8fdhnc0] {
    display: flex; align-items: center; justify-content: center; gap: 0.57rem;
    padding: 0.71rem 1.14rem; border-radius: 0.71rem;
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.93rem; letter-spacing: 0.01em;
    text-decoration: none; border: 1px solid transparent; cursor: pointer;
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}
.login-buttons.compact .lb-btn[b-63i8fdhnc0] { padding: 0.57rem 1rem; font-size: 0.86rem; }
.lb-btn:hover[b-63i8fdhnc0] { transform: translateY(-1px); filter: brightness(1.05); }
.lb-btn:active[b-63i8fdhnc0] { transform: translateY(0); }

/* Selection ring. Two sources land here:
     :focus-visible  — the browser's own keyboard focus (Tab)
     .is-focused     — a host console's cursor (ObbLandZ TV's input router sets this as the user moves
                       through with mouse, arrow keys, or a gamepad)
   The colour is a custom property so the host page decides, rather than this component guessing: brand
   colours are out (a blue ring against the blue Roblox/Facebook pills reads as nothing, and a white one
   disappears into the Google pill), so the right answer is whatever the surrounding UI already uses as
   its "cursor is here" colour. /TV sets it to phosphor green; anything else gets the site default.
   Custom properties inherit straight through CSS isolation, so a host only has to set them on the
   wrapper it already owns. */
.lb-btn:focus-visible[b-63i8fdhnc0],
.lb-btn.is-focused[b-63i8fdhnc0] {
    outline: 2px solid var(--lb-focus, #b070ff);
    outline-offset: 2px;
    box-shadow: 0 0 14px var(--lb-focus-glow, rgba(176, 112, 255, 0.5));
}

/* Match the hover lift so the ring and the pointer feel like the same thing. */
.lb-btn.is-focused[b-63i8fdhnc0] { transform: translateY(-1px); filter: brightness(1.05); }

.lb-roblox[b-63i8fdhnc0] { background: #3662fb; color: #fff; box-shadow: 0 4px 14px rgba(54, 98, 251, 0.4); }
.lb-google[b-63i8fdhnc0] { background: #ffffff; color: #1f1f1f; border-color: #dadce0; }
.lb-fb[b-63i8fdhnc0]     { background: #1877f2; color: #fff; box-shadow: 0 4px 14px rgba(24, 119, 242, 0.4); }
/* /Components/Shared/Store.razor.rz.scp.css */
/* Tokens & Cosmetics store. When anonymous, a dim overlay covers the whole store (blocking clicks) and
   its "log in" message is position:sticky, so it stays in view as you scroll the catalog. */
.store-root[b-xwu2lj6qn0] { position: relative; }

.store-lock[b-xwu2lj6qn0] {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(8, 12, 20, 0.55);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    border-radius: 0.86rem;
    display: flex; justify-content: center;   /* horizontal center; the message sticks vertically */
}

.store-lock-msg[b-xwu2lj6qn0] {
    position: sticky; top: 30vh; align-self: flex-start;
    margin-top: 2rem; height: max-content;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.71rem;
    max-width: 24rem; padding: 1.57rem 1.71rem;
    background: rgba(15, 21, 32, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
}
.store-lock-title[b-xwu2lj6qn0] {
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.14rem; letter-spacing: 0.02em; color: #e8edf5;
}
.store-lock-sub[b-xwu2lj6qn0] { font-size: 0.86rem; line-height: 1.45; color: #9aa7bb; }