/* Site top bar, Games menu and phone tab bar (Layout/SiteNav.razor, 2026-10-10 redesign).
   One fixed dark palette in every theme: the bar is brand chrome, like the old sidebar. All classes prefixed qt-. */
.qt-top {
    --qt-bar: #0E1626; --qt-panel: #0E1626; --qt-card: #121B2E; --qt-card2: #1A2742;
    --qt-fg: #EEF2F8; --qt-dim: #A6B1C4; --qt-dim2: #C7D0DE;
    --qt-line: rgba(255,255,255,0.09); --qt-line2: rgba(255,255,255,0.24);
    --qt-amber: #FFB800; --qt-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --qt-disp: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
    position: sticky; top: 0; z-index: 1025;
    background: var(--qt-bar); color: var(--qt-fg); border-bottom: 1px solid var(--qt-line);
    font-family: Inter, system-ui, sans-serif; font-size: 16px; line-height: 1.4;
}
.qt-top a { color: inherit; text-decoration: none; }
.qt-top button { font: inherit; color: inherit; cursor: pointer; }
.qt-top :focus-visible, .qt-tabs :focus-visible { outline: 2px solid var(--qt-amber, #FFB800); outline-offset: 2px; }
.qt-ic { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.qt-ic.sm { width: 16px; height: 16px; }

.qt-wrap { max-width: 1480px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 48px); }
.qt-top > .qt-wrap { display: flex; align-items: center; gap: 10px 28px; padding-block: 12px; }

.qt-lock { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.qt-lock img { height: 46px; width: auto; display: block; }
.qt-lock span { font-family: var(--qt-disp); font-weight: 900; font-size: 26px; letter-spacing: 0.14em; color: #FFFFFF; line-height: 1; }
.qt-lock small { display: block; margin-top: 3px; font-family: var(--qt-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--qt-dim); font-weight: 600; }

.qt-nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; align-items: center; min-width: 0; }
.qt-nav a, .qt-nav button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--qt-dim2); font-weight: 600; font-size: 16px; border: 0; background: none; white-space: nowrap; }
.qt-nav a:hover, .qt-nav button:hover { color: var(--qt-fg); background: rgba(255,255,255,0.05); }
.qt-nav a[aria-current], .qt-nav button[aria-expanded="true"] { background: var(--qt-card2); color: var(--qt-fg); }

.qt-right { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.qt-plan { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--qt-line2); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; white-space: nowrap; }
.qt-plan:hover { border-color: var(--qt-amber); }
.qt-plan i { width: 9px; height: 9px; border-radius: 999px; }
.qt-ava { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--qt-line2); background: var(--qt-card2); color: var(--qt-fg); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qt-ava[aria-expanded="true"], .qt-ava:hover { border-color: var(--qt-amber); }
.qt-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 10px; background: var(--qt-amber); color: #111111 !important; font-weight: 700; font-size: 15px; white-space: nowrap; }
.qt-btn:hover { filter: brightness(1.08); }
.qt-btn.plain { background: none; color: var(--qt-fg) !important; padding: 0 10px; font-weight: 600; }
.qt-icon-btn { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--qt-line2); background: none; display: inline-flex; align-items: center; justify-content: center; }
.qt-phone { display: none; }

/* "LIVE ON QSE" ticker (above the bar; scrolls away). */
.qt-tick { background: #0B111C; border-bottom: 1px solid rgba(255,255,255,0.09); overflow: hidden; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; color: #C7D0DE; }
.qt-tick .qt-wrap { display: flex; align-items: center; gap: 22px; min-height: 40px; white-space: nowrap; }
.qt-tick .live { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; border-radius: 4px; background: #FFB800; color: #111111; font-family: "Roboto Condensed", "Arial Narrow", sans-serif; font-weight: 900; font-size: 14px; letter-spacing: 0.08em; flex-shrink: 0; }
.qt-tick .live::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #B91C1C; }
.qt-tick b { color: #FFFFFF; }
.qt-tick .g { flex-shrink: 0; }
.qt-tick a { margin-left: auto; color: #FFD27A; font-family: Inter, system-ui, sans-serif; font-weight: 600; text-decoration: none; flex-shrink: 0; padding-left: 12px; }
@media (max-width: 767.98px) { .qt-tick { display: none; } } /* the prototype phone screens have no ticker */

/* Menus: drop-down panels under the bar, a sheet above the tab bar on phones. */
.qt-panel { position: absolute; top: 100%; z-index: 1026; background: var(--qt-panel); border-bottom: 1px solid var(--qt-line2); box-shadow: 0 30px 60px rgba(0,0,0,0.5); }
.qt-scrim { position: fixed; inset: 0; z-index: 1020; background: rgba(4, 8, 16, 0.45); }
.qt-panel h2 { margin: 0 0 10px; font-family: var(--qt-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--qt-dim); font-weight: 600; }

.qt-games { left: 0; right: 0; max-height: calc(100vh - 80px); overflow-y: auto; }
.qt-games-grid { padding-block: 24px 28px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
.qt-g-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.qt-g-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qt-g { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; min-width: 0; }
a.qt-g:hover { background: var(--qt-card2); }
.qt-g i { width: 64px; height: 44px; border-radius: 8px; background-size: cover; background-position: center; flex-shrink: 0; }
.qt-g i.more { background: repeating-linear-gradient(135deg, #1A2742 0 10px, #121B2E 10px 20px); }
.qt-g b { display: block; font-family: var(--qt-disp); font-weight: 900; font-size: 21px; line-height: 1.05; text-transform: uppercase; }
.qt-g small { display: block; color: var(--qt-dim); font-size: 14px; }
.qt-g.next b { color: var(--qt-dim2); }
.qt-g-extra { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--qt-line); }
.qt-g-extra a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--qt-dim2); font-weight: 600; }
.qt-g-extra a:hover { background: var(--qt-card2); color: var(--qt-fg); }
.qt-cg { border-radius: 14px; padding: 16px; background: #10151E; border: 1px solid var(--qt-line); display: flex; flex-direction: column; gap: 8px; }
.qt-cg b { font-family: var(--qt-disp); font-weight: 900; font-size: 25px; text-transform: uppercase; letter-spacing: 0.04em; color: #E9DFC6; }
.qt-cg p { margin: 0; color: var(--qt-dim); font-size: 15px; }
.qt-cg .tac, .qt-cg .pwr { font-family: var(--qt-mono); font-size: 11px; letter-spacing: 0.16em; color: #C9B98F; font-weight: 600; }
.qt-cg a { color: var(--qt-amber); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

.qt-account { right: clamp(16px, 3vw, 48px); width: min(320px, calc(100vw - 32px)); border: 1px solid var(--qt-line2); border-top: 0; border-radius: 0 0 14px 14px; padding: 14px; }
.qt-acct-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 12px; border-bottom: 1px solid var(--qt-line); margin-bottom: 6px; min-width: 0; }
.qt-acct-head b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-acct-head small { display: block; color: var(--qt-dim); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.qt-acct-head > span:last-child { min-width: 0; }
.qt-ava.static { cursor: default; }
.qt-account nav { display: flex; flex-direction: column; }
.qt-account nav a, .qt-allpages, .qt-signout { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 10px; color: var(--qt-dim2); font-weight: 600; border: 0; background: none; width: 100%; text-align: left; }
.qt-account nav a:hover, .qt-allpages:hover, .qt-signout:hover { background: var(--qt-card2); color: var(--qt-fg); }
.qt-account nav a[aria-current] { color: var(--qt-fg); background: var(--qt-card); }
.qt-account form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--qt-line); }
.qt-signout { color: #FCA5A5; }

/* In-page jumps (the home page's "How it plays") land below the sticky bar, not under it. */
html:has(.qse-topbar-shell) { scroll-padding-top: 84px; }
@media (max-width: 767.98px) { html:has(.qse-topbar-shell) { scroll-padding-top: 68px; } }

/* The page list drawer opened from "All pages" needs its own scrim on wide screens. */
.qse-topbar-shell > .mobile-nav-backdrop.show { position: fixed; inset: 0; z-index: 1035; background: rgba(0, 0, 0, 0.4); }

/* Site footer (PortalLayout): brand line + legal links. Themed and compact on game surfaces, dark brand on top-bar pages. */
.qt-foot { border-top: 1px solid var(--qse-border, #dee2e6); background: var(--qse-surface, #fff); color: var(--qse-text-muted, #6c757d); font-size: 14px; }
.qt-foot-wrap { max-width: 1480px; margin: 0 auto; padding: 14px clamp(16px, 3vw, 48px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; }
.qt-foot a { color: inherit; text-decoration: none; }
.qt-foot a:hover { text-decoration: underline; }
.qt-foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.qt-foot .fam b { color: var(--qse-text, #212529); }
.qse-topbar-shell .qt-foot { background: #0B1220; border-top-color: rgba(255,255,255,0.09); color: #A6B1C4; font-size: 15px; }
.qse-topbar-shell .qt-foot-wrap { padding-block: 20px; }
.qse-topbar-shell .qt-foot .fam b { color: #EEF2F8; }
.qt-foot a.cg { color: #8A6D1F; }
.qse-topbar-shell .qt-foot a.cg { color: #E9DFC6; }
.qt-foot nav a { min-height: 24px; display: inline-flex; align-items: center; }
@media (max-width: 767.98px) { .qt-foot nav a { min-height: 44px; } }
.qse-game-first .qt-foot-wrap { padding: 0; gap: 4px 16px; }

/* Phone tab bar */
.qt-tabs { display: none; }

/* Tablets and narrow laptops: keep the nav on one line. */
@media (min-width: 768px) and (max-width: 1100px) {
    .qt-top > .qt-wrap { gap: 10px 14px; }
    .qt-nav { flex-wrap: nowrap; gap: 0; }
    .qt-nav a, .qt-nav button { padding: 0 9px; font-size: 15px; }
    .qt-plan { padding: 7px 10px; font-size: 12px; }
}
@media (min-width: 768px) and (max-width: 960px) {
    .qt-lock span { display: none; }
}

@media (max-width: 1100px) {
    .qt-games-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .qt-games-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .qt-top > .qt-wrap { height: 60px; padding-block: 0; gap: 10px; }
    .qt-lock img { height: 34px; }
    .qt-lock span { font-size: 20px; }
    .qt-lock small { font-size: 9px; }
    .qt-nav, .qt-desk { display: none; }
    .qt-phone { display: inline-flex; }
    .qt-plan { padding: 6px 10px; font-size: 11px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }

    .qt-panel { position: fixed; top: 61px; left: 0; right: 0; bottom: 0; max-height: none; overflow-y: auto; border: 0; border-radius: 0; width: auto; box-shadow: none; }
    .qse-topbar-shell:has(.qt-tabs) .qt-panel { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    .qt-games-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-block: 18px 24px; }
    .qt-g-list.two { grid-template-columns: minmax(0, 1fr); }
    .qt-account { padding: 16px; }

    .qt-tabs {
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1027;
        background: #0E1626; border-top: 1px solid rgba(255,255,255,0.09);
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
        font-family: Inter, system-ui, sans-serif;
    }
    .qt-tabs a, .qt-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; color: #A6B1C4; font-size: 12px; font-weight: 600; text-decoration: none; border: 0; background: none; font-family: inherit; }
    .qt-tabs .qt-ic { width: 22px; height: 22px; }
    .qt-tabs a[aria-current], .qt-tabs button.on { color: #FFFFFF; font-weight: 800; }
    .qt-tabs a[aria-current] .qt-ic, .qt-tabs button.on .qt-ic { stroke: #FFB800; }
    /* Room for the fixed tab bar under the page and footer. */
    .qse-topbar-shell:has(.qt-tabs) > main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 400px) {
    .qt-lock small { display: none; }
    .qt-lock span { font-size: 18px; letter-spacing: 0.1em; }
}
@media (max-width: 340px) {
    .qt-plan { display: none; }
}