/* ============================================================
 * AAA menu v2 — gated by body.menu-v2 (set by main.js when MENU_V2 is on).
 *
 * Phase 1   — scene host stacking + transparent screens.
 * Phase 2.5 — Counter-Strike 2 style HUD (top nav + center stage + bottom bar)
 *             over the parallax backdrop. Replaces the original Phase 2 glass
 *             panel; injected DOM lives at #menu-hud-top / #menu-hud-stage /
 *             #menu-hud-bottom inside #main-menu.
 * ============================================================ */


/* ---------- Phase 1: scene host + screen stacking ---------- */

body.menu-v2 #login-screen,
body.menu-v2 #main-menu {
    background: transparent !important;
}

body.menu-v2 #login-screen .splash-bg,
body.menu-v2 #login-screen .splash-vignette,
body.menu-v2 #login-screen .splash-glow {
    display: none !important;
}

/* Subtle vignette so splash text stays legible over the parallax */
body.menu-v2 #login-screen::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(10,7,18,0.55) 100%);
    z-index: 0;
}
body.menu-v2 #login-screen #splash-panel {
    z-index: 2;
}

/* Scene host sits behind everything but participates in stacking */
body.menu-v2 #menu-scene-host {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* All UI screens float above the scene host */
body.menu-v2 #login-screen,
body.menu-v2 #main-menu,
body.menu-v2 #character-screen,
body.menu-v2 #server-select-screen,
body.menu-v2 #lang-screen {
    position: relative;
    z-index: 1;
}


/* ============================================================
 * Phase 2.5 — Hide v1 main-menu interior widgets.
 *
 * The CS2 HUD lives in a fresh DOM tree injected by menu-hud.js. The v1
 * widgets stay in the DOM (so main-menu.js's queries don't break) but are
 * visually suppressed. main-menu.js's loadServers/selectServerById still
 * write into the legacy #menu-server-list etc. — menu-hud.js reads via
 * exported accessors, not DOM scraping.
 * ============================================================ */

body.menu-v2 #main-menu > .menu-left,
body.menu-v2 #main-menu > .menu-right {
    display: none !important;
}

/* Splash floating music button is dead in v2 (the splash itself is hidden;
 * the HUD has its own music toggle in the top-right). */
body.menu-v2 #login-music-btn {
    display: none !important;
}

/* Legacy game-loading overlay (the dark "ENTERING THE REALM" cover with
 * progress bar + tips) is visually suppressed in v2 — the HUD renders its
 * own loading widget over the parallax instead. We keep the element in the
 * tree with opacity:0 so its lifecycle stays intact: perception.js still
 * adds `.fade-out` to it after the first frame with viewport data, and we
 * use that class-add as the teardown signal for the parallax + HUD. */
body.menu-v2 #game-loading {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide the in-game canvas + HUD during the v2 loading phase so the player
 * doesn't see the half-loaded frozen world behind the (translucent) loader.
 * Uses `visibility: hidden` rather than `display: none` so layout queries
 * still work — updateCanvasLayout (renderer.js:361) reads
 * #canvas-container.clientWidth, which would be 0 under display:none.
 *
 * The class drops in teardown BEFORE the loader fade starts, so the loader
 * gracefully fades into the now-visible game in one motion rather than
 * fading into the parallax and then having the parallax disappear. */
body.menu-v2 #game-screen {
    visibility: hidden !important;
}


/* ============================================================
 * Phase 2.5 — v2 loading state.
 *
 * When PLAY is clicked, #main-menu is hidden immediately (so it doesn't
 * compete with #game-screen for flex-row space, which would scale the
 * game canvas tiny). A body-level #hud-loading-overlay sits at z-index
 * 9000 — above the parallax (still in #menu-scene-host) and above the
 * game-canvas as it spins up. The overlay holds until the game is
 * actually playable (perception.js fades out #game-loading + an extra
 * hold to mask the terrain-processing freeze), then fades to opacity 0
 * and is removed.
 * ============================================================ */

#hud-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 7, 18, 0.55) 100%);
    opacity: 1;
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
#hud-loading-overlay.fading-out {
    opacity: 0;
    pointer-events: none;
}

.hud-loading {
    width: min(560px, calc(100vw - 96px));
    position: relative;
    background: linear-gradient(135deg,
        rgba(30, 18, 48, 0.78) 0%,
        rgba(18, 10, 32, 0.85) 60%,
        rgba(28, 16, 48, 0.78) 100%);
    border: 1px solid rgba(230, 193, 112, 0.32);
    clip-path: polygon(
        0 0,
        calc(100% - 24px) 0,
        100% 24px,
        100% 100%,
        0 100%
    );
    padding: 36px 44px 32px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: hud-loading-in 380ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes hud-loading-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Decorative tracing the diagonal corner cut */
.hud-loading::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 32px; height: 32px;
    background:
        linear-gradient(135deg,
            transparent 49%,
            rgba(230, 193, 112, 0.75) 50%,
            transparent 51%) center / 48px 48px no-repeat;
    pointer-events: none;
}

.hud-loading-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(230, 193, 112, 0.75);
}
.hud-loading-server {
    font-size: 26px;
    font-weight: 900;
    color: #f0ecf6;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
    text-align: center;
}
.hud-loading-progress {
    width: 100%;
    height: 4px;
    background: rgba(230, 193, 112, 0.08);
    border: 1px solid rgba(230, 193, 112, 0.18);
    margin-top: 6px;
    overflow: hidden;
    position: relative;
}
.hud-loading-progress-fill {
    position: absolute;
    top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(230, 193, 112, 0.85) 50%,
        transparent 100%);
    animation: hud-loading-sweep 1.4s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}
@keyframes hud-loading-sweep {
    from { left: -40%; }
    to   { left: 100%; }
}
.hud-loading-status {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(240, 236, 246, 0.55);
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}


/* ============================================================
 * Phase 2.5 — Main menu layout.
 * Three-zone flex column: top nav, center stage, bottom action bar.
 * The injected zones (#menu-hud-*) live as direct children of #main-menu.
 * ============================================================ */

/* When main-menu IS visible (has .visible class added by showMainMenu()),
 * fill the viewport with the three-zone HUD column. We do NOT force
 * display: flex unconditionally — the v1 visibility toggle (display:none vs
 * .visible{display:flex}) MUST stay in control, otherwise the menu renders
 * alongside the splash. */
body.menu-v2 #main-menu.visible {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    height: 100vh;
    padding: 0;
    overflow: hidden;
    font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;
}


/* ============================================================
 * Phase 2.5 — TOP NAV (#menu-hud-top)
 * 64px tall. Left: player profile. Center: nav tabs. Right: system icons.
 * Hairline gold underline. Backdrop-blur lets the parallax glint through.
 * ============================================================ */

#menu-hud-top {
    flex: 0 0 64px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 0 32px;
    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%);
    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;
}

/* Soft inner top-edge highlight */
#menu-hud-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;
}

.hud-top-left,
.hud-top-center,
.hud-top-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hud-top-center {
    gap: 4px;
}

/* Player profile (left) */
.hud-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border: 1px solid rgba(230, 193, 112, 0.18);
    border-radius: 2px;
    background: rgba(230, 193, 112, 0.04);
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease;
}
.hud-profile:hover {
    border-color: rgba(230, 193, 112, 0.5);
    background: rgba(230, 193, 112, 0.08);
}
.hud-profile-avatar {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2a1d3f 0%, #1a1029 100%);
    border: 1px solid rgba(230, 193, 112, 0.35);
    font-weight: 800;
    font-size: 14px;
    color: #e6c170;
    text-transform: uppercase;
}
.hud-profile-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.hud-profile-name {
    font-size: 13px;
    font-weight: 700;
    color: #f0ecf6;
    letter-spacing: 0.4px;
}
.hud-profile-rank {
    font-size: 10px;
    font-weight: 600;
    color: rgba(230, 193, 112, 0.7);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-variant-numeric: tabular-nums;
}

/* Nav tabs (center) */
.hud-nav-tab {
    position: relative;
    padding: 0 22px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(240, 236, 246, 0.55);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 180ms ease;
    font-family: inherit;
}
.hud-nav-tab:hover {
    color: rgba(240, 236, 246, 0.9);
}
.hud-nav-tab.active {
    color: #e6c170;
}
.hud-nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 18px; right: 18px;
    height: 2px;
    background: linear-gradient(90deg, #e6c170 0%, #f2d48e 100%);
    box-shadow: 0 0 12px rgba(230, 193, 112, 0.55);
}
.hud-nav-tab.disabled {
    color: rgba(240, 236, 246, 0.25);
    cursor: not-allowed;
}
.hud-nav-tab.disabled:hover {
    color: rgba(240, 236, 246, 0.35);
}

/* System icons (right) */
.hud-icon-btn {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(240, 236, 246, 0.6);
    cursor: pointer;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
    font-family: inherit;
}
.hud-icon-btn:hover {
    color: #e6c170;
    border-color: rgba(230, 193, 112, 0.35);
    background: rgba(230, 193, 112, 0.05);
}
.hud-icon-btn svg {
    width: 18px; height: 18px;
}
/* Unopened-packs indicator (booster icon + count badge). */
.hud-packs-btn { position: relative; }
.hud-packs-icon { width: 22px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.hud-packs-btn:hover .hud-packs-icon { filter: drop-shadow(0 0 6px rgba(230,193,112,0.6)); }
.hud-packs-badge {
    position: absolute; top: 2px; right: 0;
    min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box;
    background: #e6c170; color: #1a1206; border-radius: 999px;
    font-size: 10px; font-weight: 900; line-height: 15px; text-align: center;
    box-shadow: 0 0 6px rgba(230,193,112,0.6);
}
.hud-icon-btn.muted {
    color: rgba(240, 236, 246, 0.3);
}
.hud-icon-btn.muted:hover {
    color: rgba(240, 236, 246, 0.6);
}


/* ============================================================
 * Phase 2.5 — CENTER STAGE (#menu-hud-stage)
 * Featured server tile (~840×320) + thumbnail row of other servers.
 * Stage itself is mostly empty so the parallax breathes around the tiles.
 * ============================================================ */

#menu-hud-stage {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 36px 56px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* CARDS full-bleed is now handled by the shared TabbedHud stage
 * (.thud-stage / .thud-stage-content in tabbed-hud.css) — the old
 * #main-menu.cards-active hack is gone. */


/* ---------- Featured server tile ---------- */

.hud-featured {
    width: min(880px, calc(100vw - 112px));
    min-height: 280px;
    position: relative;
    background:
        linear-gradient(135deg,
            rgba(30, 18, 48, 0.78) 0%,
            rgba(18, 10, 32, 0.85) 60%,
            rgba(28, 16, 48, 0.78) 100%);
    border: 1px solid rgba(230, 193, 112, 0.32);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    /* Diagonal-cut top-right corner — the CS2 tactical signature */
    clip-path: polygon(
        0 0,
        calc(100% - 28px) 0,
        100% 28px,
        100% 100%,
        0 100%
    );
    display: flex;
    flex-direction: column;
    padding: 32px 36px 28px;
    cursor: default;
}

/* Decorative geometry — thin gold line tracing the cut corner */
.hud-featured::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 36px; height: 36px;
    background:
        linear-gradient(135deg,
            transparent 49%,
            rgba(230, 193, 112, 0.7) 50%,
            transparent 51%) center / 56px 56px no-repeat;
    pointer-events: none;
}

.hud-featured-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.hud-featured-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(230, 193, 112, 0.7);
    margin-bottom: 6px;
}
.hud-featured-name {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.05;
    color: #f0ecf6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.hud-featured-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1a1206;
    background: linear-gradient(180deg, #e6c170 0%, #c89d4a 100%);
    padding: 4px 10px;
    flex-shrink: 0;
}

.hud-featured-desc {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(240, 236, 246, 0.7);
    max-width: 580px;
    margin-bottom: 18px;
}

/* Stat chips row — PLAYERS · WEATHER · REGION · VERSION */
.hud-featured-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(230, 193, 112, 0.12);
}
.hud-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 96px;
}
.hud-stat-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(230, 193, 112, 0.55);
}
.hud-stat-value {
    font-size: 18px;
    font-weight: 800;
    color: #f0ecf6;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}
.hud-stat-value.accent {
    color: #e6c170;
}


/* ---------- Thumbnail row of other servers ---------- */

.hud-thumbs {
    width: min(880px, calc(100vw - 112px));
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(230, 193, 112, 0.25) transparent;
}
.hud-thumbs::-webkit-scrollbar {
    height: 6px;
}
.hud-thumbs::-webkit-scrollbar-thumb {
    background: rgba(230, 193, 112, 0.25);
}

.hud-thumb {
    flex: 0 0 200px;
    height: 116px;
    position: relative;
    background: linear-gradient(135deg,
        rgba(30, 18, 48, 0.7) 0%,
        rgba(18, 10, 32, 0.78) 100%);
    border: 1px solid rgba(230, 193, 112, 0.14);
    cursor: pointer;
    transition:
        transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 220ms ease,
        background 220ms ease;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
/* top-edge gold sheen */
.hud-thumb::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(230, 193, 112, 0.35) 50%,
        transparent 100%);
}
.hud-thumb:hover {
    transform: translateY(-2px);
    border-color: rgba(230, 193, 112, 0.5);
    background: linear-gradient(135deg,
        rgba(44, 28, 68, 0.78) 0%,
        rgba(28, 16, 48, 0.85) 100%);
}
.hud-thumb.selected {
    border-color: rgba(230, 193, 112, 0.85);
    background: linear-gradient(135deg,
        rgba(64, 44, 92, 0.85) 0%,
        rgba(40, 24, 64, 0.9) 100%);
    box-shadow:
        0 0 0 1px rgba(230, 193, 112, 0.4) inset,
        0 12px 28px rgba(0, 0, 0, 0.45);
}
/* Tactical corner indicator on selected thumb */
.hud-thumb.selected::after {
    content: '';
    position: absolute;
    top: -1px; right: -1px;
    width: 14px; height: 14px;
    background:
        linear-gradient(225deg,
            #e6c170 0%, #e6c170 48%,
            transparent 50%) center / 100% 100% no-repeat;
}

.hud-thumb-name {
    font-size: 13px;
    font-weight: 800;
    color: #f0ecf6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.15;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.hud-thumb-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
}
.hud-thumb-region {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(230, 193, 112, 0.7);
    font-variant-numeric: tabular-nums;
}
.hud-thumb-players {
    font-size: 11px;
    font-weight: 700;
    color: rgba(240, 236, 246, 0.75);
    font-variant-numeric: tabular-nums;
}
.hud-thumb-players::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    background: #5fd068;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 6px rgba(95, 208, 104, 0.7);
}

.hud-stage-empty {
    color: rgba(240, 236, 246, 0.45);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* ============================================================
 * Phase 2.5 — BOTTOM ACTION BAR (#menu-hud-bottom)
 * 96px. Left: region/ping. Center: small Woweach mark. Right: ENTER REALM
 * button (the big gold action) + secondary Explore Worlds link.
 * ============================================================ */

#menu-hud-bottom {
    flex: 0 0 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    background: linear-gradient(0deg,
        rgba(10, 7, 18, 0.95) 0%,
        rgba(10, 7, 18, 0.78) 100%);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    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;
}

.hud-bottom-left,
.hud-bottom-right {
    display: flex;
    align-items: center;
    gap: 24px;
}
.hud-bottom-center {
    flex: 1;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

/* Region / ping cluster (left) */
.hud-region-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.hud-region-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(230, 193, 112, 0.55);
}
.hud-region-value {
    font-size: 13px;
    font-weight: 800;
    color: #f0ecf6;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}
.hud-ping {
    color: #5fd068;
}
.hud-ping.med { color: #e6c170; }
.hud-ping.high { color: #f25a5a; }
.hud-bottom-divider {
    width: 1px;
    height: 28px;
    background: rgba(230, 193, 112, 0.15);
}

/* Small bottom-bar logo (center) */
.hud-bottom-logo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    color: rgba(230, 193, 112, 0.4);
    text-transform: uppercase;
}

/* Secondary "Explore Worlds" text link */
.hud-explore-link {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(240, 236, 246, 0.6);
    background: transparent;
    border: 1px solid rgba(230, 193, 112, 0.25);
    padding: 12px 18px;
    cursor: pointer;
    font-family: inherit;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.hud-explore-link:hover {
    color: #e6c170;
    border-color: rgba(230, 193, 112, 0.6);
    background: rgba(230, 193, 112, 0.06);
}

/* ENTER REALM — the big gold action button. Diagonal-cut top-left corner,
 * sheen sweep on hover. */
.hud-enter-btn {
    position: relative;
    min-width: 240px;
    height: 56px;
    padding: 0 32px;
    background: linear-gradient(180deg, #e6c170 0%, #c89d4a 100%);
    color: #1a1206;
    border: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    clip-path: polygon(
        12px 0,
        100% 0,
        100% 100%,
        0 100%,
        0 12px
    );
    box-shadow:
        0 0 0 1px rgba(230, 193, 112, 0.65),
        0 12px 32px rgba(230, 193, 112, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms ease;
}
.hud-enter-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(230, 193, 112, 0.85),
        0 18px 40px rgba(230, 193, 112, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.hud-enter-btn:active {
    transform: translateY(0);
}
.hud-enter-btn:disabled {
    background: linear-gradient(180deg, rgba(230, 193, 112, 0.35) 0%, rgba(200, 157, 74, 0.35) 100%);
    color: rgba(26, 18, 6, 0.5);
    cursor: not-allowed;
    box-shadow: 0 0 0 1px rgba(230, 193, 112, 0.25);
}
/* Diagonal sheen sweep on hover */
.hud-enter-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -40%;
    width: 30%; height: 100%;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 100%);
    pointer-events: none;
    transition: left 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hud-enter-btn:hover::after {
    left: 130%;
}


/* ============================================================
 * Phase 2.5 — Explore modal restyle (server browsing).
 * Kept from earlier — server cards in the Explore modal pick up the
 * tactical hover/select treatment too.
 * ============================================================ */

body.menu-v2 #menu-explore-modal {
    background: rgba(10, 7, 18, 0.55) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.menu-v2 #menu-explore-modal .menu-scard {
    position: relative;
    background: linear-gradient(135deg,
        rgba(40, 28, 56, 0.85) 0%,
        rgba(28, 18, 42, 0.85) 100%);
    border: 1px solid rgba(230, 193, 112, 0.18);
    border-radius: 0;
    transition:
        transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 220ms ease,
        background 220ms ease;
    will-change: transform;
    overflow: hidden;
}
body.menu-v2 #menu-explore-modal .menu-scard::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(230, 193, 112, 0.5) 50%,
        transparent 100%);
}
body.menu-v2 #menu-explore-modal .menu-scard:hover {
    transform: translateY(-2px);
    border-color: rgba(230, 193, 112, 0.6);
}
body.menu-v2 #menu-explore-modal .menu-scard.selected {
    border-color: rgba(230, 193, 112, 0.9);
    box-shadow: 0 0 0 1px rgba(230, 193, 112, 0.45) inset;
}


/* ============================================================
 * Phase 2.5 — Mobile fallback.
 * Stack the three zones vertically with reduced padding. The featured
 * tile shrinks to viewport width minus margins.
 * ============================================================ */

@media (max-width: 720px) {
    #menu-hud-top {
        flex: 0 0 56px;
        padding: 0 16px;
    }
    #menu-hud-top .hud-top-center {
        display: none;  /* tabs collapse — use hamburger in Phase 3 */
    }
    #menu-hud-bottom {
        flex: 0 0 80px;
        padding: 0 16px;
    }
    .hud-bottom-center {
        display: none;
    }
    #menu-hud-stage {
        padding: 20px 16px;
        gap: 16px;
        justify-content: flex-start;
    }
    .hud-featured {
        width: 100%;
        padding: 22px 20px 18px;
        min-height: 220px;
    }
    .hud-featured-name {
        font-size: 22px;
    }
    .hud-thumbs {
        width: 100%;
    }
    .hud-enter-btn {
        min-width: 180px;
        height: 48px;
        font-size: 14px;
        padding: 0 20px;
    }
}
@media (max-height: 540px) and (orientation: landscape) {
    #menu-hud-stage {
        padding: 14px 32px;
        gap: 14px;
    }
    .hud-featured {
        min-height: 180px;
        padding: 18px 22px 14px;
    }
    .hud-featured-stats {
        padding-top: 10px;
    }
    .hud-thumb {
        height: 92px;
    }
}