@import '_content/Web.Components/Web.Components.mgyv69mab3.bundle.scp.css';

/* /Accounts/AccountSwitcher.razor.rz.scp.css */
/* Lives inside the top bar's .login-display (MainLayout.razor.css, ui-polish), so it follows the same rules: no fixed
   widths, everything may shrink, and below 480 px the whole login display has its own row. The buttons wrap onto their
   own line rather than widen the page. */
.account-switcher[b-d9zxrrtk4s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    row-gap: 0.25rem;
    min-width: 0;
    max-width: 100%;
}

/* The closed control: the selected name is one line with an ellipsis, and the select may shrink. (Its open list is
   drawn by the browser and never affects the page width.) */
.account-select[b-d9zxrrtk4s] {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Readable on the dark top bar: the bar's colours, a light outline, the page font. */
    color: var(--bar-fg);
    background-color: var(--bar-bg);
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    font: inherit;
}

/* The open list is drawn by the browser on a light surface in most themes: keep its options dark on light. */
.account-select option[b-d9zxrrtk4s] {
    color: var(--page-fg);
    background-color: var(--panel-bg);
}

/* "Sign out {long name}" never sticks out: it's capped at the row's width and truncated. */
.link-button[b-d9zxrrtk4s] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* signed-in-as: read by screen readers, not shown (the drop-down shows the name). */
.visually-hidden[b-d9zxrrtk4s] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* "Sign in with your email (or username)" (email-sign-in 4.1): its own row under the buttons, small and muted on the
   dark bar, one line that truncates rather than widen the page. */
.account-add-hint[b-d9zxrrtk4s] {
    flex-basis: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    opacity: 0.8;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-lelkjmiprp] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.top-bar[b-lelkjmiprp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    row-gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--bar-bg);
    color: var(--bar-fg);
    /* styling: a thin accent line along the bottom (inset, so the bar is no taller) and a tighter line height. */
    box-shadow: inset 0 -3px 0 var(--accent);
    line-height: 1.3;
}

.top-bar[b-lelkjmiprp]  a {
    color: var(--bar-fg);
}

.brand[b-lelkjmiprp] {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-logo[b-lelkjmiprp] {
    display: block;
    width: 1.3em;
    height: 1.3em;
    flex: none;
}

/* profile-page: five signed-in links (Profile added) wrap onto a second line on a very narrow phone instead of
   pushing the page sideways. */
.top-bar[b-lelkjmiprp]  .nav-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.top-bar[b-lelkjmiprp]  .nav-link {
    text-decoration: none;
    opacity: 0.85;
}

.top-bar[b-lelkjmiprp]  .nav-link.active {
    opacity: 1;
    text-decoration: underline;
}

.login-display[b-lelkjmiprp] {
    margin-left: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Whatever LoginDisplay renders must be able to shrink: the name truncates with an ellipsis, the buttons never wrap. */
.login-display[b-lelkjmiprp]  .signed-in-as {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.login-display[b-lelkjmiprp]  .link-button {
    color: var(--bar-fg);
    flex-shrink: 0;
    white-space: nowrap;
}

.content[b-lelkjmiprp] {
    flex: 1;
    padding: 1.5rem;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* WideLayout (web-game-page): no width cap, so the game board can use the window's width. */
.content-wide[b-lelkjmiprp] {
    max-width: none;
}

/* Phones: the bar wraps, and the login display takes its own row so nothing sticks out past the right edge. */
@media (max-width: 480px) {
    .top-bar[b-lelkjmiprp] {
        padding: 0.5rem 1rem;
        column-gap: 1rem;
    }

    .login-display[b-lelkjmiprp] {
        flex-basis: 100%;
        margin-left: 0;
    }

    .content[b-lelkjmiprp] {
        padding: 1rem;
    }
}
/* /Pages/Landing.razor.rz.scp.css */
.landing-hero[b-t4f7b2mbj2] {
    display: block;
    width: clamp(10rem, 40vw, 14rem);
    height: auto;
    margin: 0 auto 0.5rem;
    padding: 0.5rem;
    box-sizing: border-box;
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    background-color: var(--panel-bg);
}