/* Shared TabbedHud chrome — used by BOTH the main-menu (mode "screen") and
 * the in-game game-menu (mode "overlay"). Class-scoped so it applies whether
 * the shell is mounted into #main-menu or into getModalRoot().
 *
 * The inner `.hud-*` classes (.hud-top-left/center/right, .hud-profile,
 * .hud-nav-tab, .hud-icon-btn, .hud-region-*, .hud-enter-btn) are global and
 * live in menu-v2.css — reused verbatim so the two surfaces look identical.
 * This file only owns the three-zone frame + the two modes. */

.thud {
    /* Single content gutter — the header, stage, and bottom bar all inset
     * their content by this so everything lines up on the same vertical rail.
     * (Was the mismatch: 32px nav padding vs full-bleed content.) */
    --thud-gutter: 32px;
    --thud-stage-top: 24px;   /* breathing room below the nav */
    /* Gold frame language carried from the nav underline into the content. */
    --thud-frame-border: rgba(230, 193, 112, 0.22);
    display: flex;
    flex-direction: column;
    min-height: 0;
    font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;
    color: var(--w-text-primary);
}

/* Screen mode (menu): fills the #main-menu flex column over the parallax. */
.thud[data-mode="screen"] {
    flex: 1 1 auto;
    width: 100%;
}

/* Overlay mode (in-game): full-screen, solid background over the live game
 * (no backdrop-filter — blurring the game canvas every paint is a perf cost). */
.thud[data-mode="overlay"] {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--w-bg-primary);
}

/* ── Top nav (64px) ─────────────────────────────────────────────────────── */
.thud-top {
    flex: 0 0 64px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 0 var(--thud-gutter);
    border-bottom: 1px solid rgba(230, 193, 112, 0.28);
    box-shadow:
        0 0 24px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(230, 193, 112, 0.05);
    position: relative;
    z-index: 2;
}
/* Screen mode keeps the glassmorphic blur (parallax glints through). */
.thud[data-mode="screen"] .thud-top {
    background: linear-gradient(180deg, rgba(10, 7, 18, 0.92) 0%, rgba(10, 7, 18, 0.75) 100%);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}
/* Overlay mode uses a solid bar (no blur over the game). */
.thud[data-mode="overlay"] .thud-top {
    background: var(--w-bg-secondary);
}
.thud-top::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(230, 193, 112, 0.45) 25%,
        rgba(230, 193, 112, 0.45) 75%,
        transparent 100%);
    pointer-events: none;
}

/* Header slot containers (reuse the global .hud-top-* flex rules from
 * menu-v2.css; alias .thud-top-* to them for clarity). */
.thud-top-left,
.thud-top-center,
.thud-top-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.thud-top-center { gap: 4px; }

/* ── Center stage — full-bleed; tab content owns its own layout ─────────── */
.thud-stage {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
/* Column flex (matches the old in-game `.sm-content`) so each tab's single
 * root child fills the stage on both axes. Tab-content modules
 * (journey/reputation/settings/deck builder) rely on this. */
.thud-stage-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    /* Same horizontal gutter as the nav so all tab content shares its rail,
     * plus breathing room below the nav. */
    padding: var(--thud-stage-top) var(--thud-gutter) var(--thud-gutter);
}
.thud-stage-content > * { flex: 1 1 auto; min-height: 0; min-width: 0; }
/* Golden frame: every content tab (NOT the PLAY hero) sits in the same
 * gold-bordered, rounded panel — the single biggest "streamlined" win, since
 * each tab reads as the identical framed surface regardless of its internals.
 * The frame edge aligns to the nav gutter. */
.thud-stage-content > *:not(.menu-play-stage) {
    border: 1px solid var(--thud-frame-border);
    border-radius: var(--w-radius-md, 10px);
    background: var(--w-bg-secondary);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(230, 193, 112, 0.05);
    overflow: hidden;
}
/* The headerless deck builder fills its frame. */
.thud-stage-content > .db-root { height: 100%; }

/* Menu PLAY tab — centered featured-tile + thumb-row. Horizontal gutter comes
 * from .thud-stage-content; this only centers + spaces its children. */
.menu-play-stage {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    overflow: hidden;
}

/* ── Bottom action bar (96px) — only shown when a tab provides one ──────── */
.thud-bottom {
    flex: 0 0 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--thud-gutter);
    background: linear-gradient(0deg, rgba(10, 7, 18, 0.95) 0%, rgba(10, 7, 18, 0.78) 100%);
    border-top: 1px solid rgba(230, 193, 112, 0.28);
    box-shadow:
        0 0 32px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(230, 193, 112, 0.05);
    position: relative;
    z-index: 2;
}
.thud[data-mode="screen"] .thud-bottom {
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}
/* Bottom-bar content fills the bar + space-betweens its three clusters
 * (region/ping · spacer · Enter Realm). */
.hud-bottom-inner {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* CHARACTERS placeholder panel (deferred — routes to the existing picker). */
.menu-characters-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px;
    text-align: center;
}
.menu-characters-hint {
    color: var(--w-text-secondary);
    font-size: 14px;
}

/* Close ✕ in the header right (overlay only). */
.thud-close {
    font-size: 16px;
    font-weight: 700;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .thud { --thud-gutter: 14px; --thud-stage-top: 14px; }
    .thud-top { flex: 0 0 56px; }
    .thud-bottom { flex: 0 0 80px; }
    .hud-nav-tab { padding: 0 12px; letter-spacing: 1.4px; font-size: 11px; }
    .menu-play-stage { gap: 16px; }
}