/* ===================================
   Hub layer of the dashboard: pillar nav, tab panels, hero, and the contents of
   the community cards.
   Boxes are NOT restyled here: every hub box is a real .dashboard-card with a
   .card-header / .card-content, and the Jump-to tiles are .gamemode-card, both
   from dashboard.css. This file only styles what goes inside them, so the hub
   cannot drift from the rest of the app.
   =================================== */

.hub-container {
    max-width: 1280px;
    margin: 0 auto;
}

/* Header extras the base .card-header does not have: an icon in the title and a
   right-aligned link. Everything else about these boxes is .dashboard-card. */
.card-header h3 i {
    color: var(--primary);
    margin-right: 0.15rem;
}

.card-header-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.card-header-link:hover {
    color: var(--primary);
}

.hub-empty {
    color: var(--text-light);
    font-size: 0.9rem;
    padding: 0.25rem 0;
}

/* ===== Hero ===== */
.hub-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    box-shadow: 0 8px 24px -4px rgba(var(--brand-rgb), 0.10), 0 4px 8px -2px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .hub-hero {
    background: rgba(var(--card-bg-rgb), 0.92);
    border-color: rgba(var(--brand-rgb), 0.18);
    box-shadow: 0 0 0 1px rgba(var(--brand-rgb), 0.08), 0 16px 40px rgba(0, 0, 0, 0.4);
}

/* Tint wash, keeps the hero distinct from the plain cards below it */
.hub-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--gradient-primary);
    opacity: 0.07;
    pointer-events: none;
}

.hub-hero-main,
.hub-hero-stats {
    position: relative;
}

.hub-hero h1 {
    font-family: var(--font-primary);
    font-size: 2rem;
    margin: 0 0 0.35rem;
}

/* Yellow to brown: the two things this site is actually about. Deeper amber on
   light backgrounds so the first half of the name stays readable. */
.hub-hero .hub-name {
    background: linear-gradient(100deg, #d99e00 0%, #c98a10 35%, #8b5a2b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

[data-theme="dark"] .hub-hero .hub-name {
    background: linear-gradient(100deg, #f7c948 0%, #e0a32e 35%, #a06a35 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hub-subline {
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
}

.hub-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.hub-hero-actions .btn {
    text-decoration: none;
    padding: 0.75rem 1.15rem;
    height: auto;
    font-size: 0.9rem;
}

.hub-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.hub-stat b {
    display: block;
    font-family: var(--font-primary);
    font-size: 1.6rem;
    line-height: 1.2;
}

.hub-stat small {
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ===== Pillar nav =====
   The pillars are the navigation, so they are a compact strip rather than a
   row of large cards: one surface, and no vertical space spent on every tab.
   It sits inside .dashboard-header, i.e. above the header's bottom rule, and
   shares that row with the bell and the avatar menu. */
.dashboard-header {
    flex-wrap: wrap;
    gap: 1rem;
}

.hub-nav {
    display: flex;
    flex: 1 1 460px;
    gap: 0.35rem;
    padding: 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: var(--card-bg);
    box-shadow: 0 8px 24px -4px rgba(var(--brand-rgb), 0.08);
    overflow-x: auto;
    scrollbar-width: none;
}

.hub-nav::-webkit-scrollbar {
    display: none;
}

[data-theme="dark"] .hub-nav {
    background: rgba(var(--card-bg-rgb), 0.92);
    border-color: rgba(var(--brand-rgb), 0.18);
}

.hub-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 0 auto;
    justify-content: center;
    padding: 0.6rem 1.1rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.hub-nav-item i {
    font-size: 1.05rem;
}

.hub-nav-item:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

[data-theme="dark"] .hub-nav-item:hover {
    background: rgba(var(--brand-rgb), 0.12);
}

.hub-nav-item.active {
    background: var(--gradient-primary);
    color: #fff;
}

.hub-nav-item.active .hub-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* ===== Tab panels ===== */
.hub-tab[hidden] {
    display: none;
}

/* Tabs that hold a single card: .dashboard-grid would otherwise leave it in one
   320px column with dead space beside it. */
.hub-grid-single {
    grid-template-columns: 1fr;
}

/* A card sitting directly in a panel (not inside a .dashboard-grid) has no grid
   gap to separate it from what follows, so it carries the same 1.5rem itself. */
.hub-tab > .dashboard-card {
    margin-bottom: 1.5rem;
}

/* On its own tab the map is the content, not a thumbnail, so it gets the height
   the dashboard preview could not spare. */
[data-tab-panel="peemap"] .peemap-mini-map {
    height: clamp(320px, 55vh, 620px);
}

/* The anonymous-stats note used to live inside the Quick Stats card. It sits
   between the hero and the grid, so it spaces itself like any other block
   rather than pulling itself up under the hero. */
.stat-note {
    font-size: 0.8rem;
    opacity: 0.8;
    margin: 0 0 1.5rem;
    color: var(--text-secondary);
}

/* ===== Badges ===== */
.hub-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--brand-rgb), 0.15);
    color: var(--primary);
    white-space: nowrap;
}

[data-theme="dark"] .hub-badge {
    color: var(--primary-light);
}

.hub-badge.premium {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

[data-theme="dark"] .hub-badge.premium {
    color: #fbbf24;
}

/* ===== Main grid ===== */
.hub-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* Each column stacks .dashboard-cards, which carry no margin of their own (on
   the rest of the site the grid gap separates them), so the columns space their
   own children by the same 1.5rem. */
.hub-col-main,
.hub-col-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ===== Feed preview ===== */
.hub-feed-list {
    display: flex;
    flex-direction: column;
}

.hub-post {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
}

.hub-post:first-child {
    border-top: none;
    padding-top: 0;
}

.hub-post .hub-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-family: var(--font-primary);
    background: var(--gradient-primary);
    object-fit: cover;
    overflow: hidden;
}

.hub-post .hub-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.hub-post-body {
    flex: 1;
    min-width: 0;
}

.hub-post-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.hub-post-head b {
    font-family: var(--font-primary);
}

.hub-post-head .hub-time {
    color: var(--text-light);
    font-size: 0.75rem;
}

.hub-chip {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    white-space: nowrap;
}

[data-theme="dark"] .hub-chip {
    background: rgba(255, 255, 255, 0.06);
}

.hub-chip.live {
    background: rgba(74, 222, 128, 0.16);
    color: #16a34a;
}

[data-theme="dark"] .hub-chip.live {
    color: #4ade80;
}

/* The stat grid itself is .feed-stats from css/feed.css (shared with the feed
   page via js/shared/feed-summary.js); this only tightens it for the narrower
   preview column and drops to two columns when that column gets small. */
.hub-post .feed-stats {
    margin-bottom: 0.6rem;
    background: var(--bg-secondary);
}

[data-theme="dark"] .hub-post .feed-stats {
    background: rgba(var(--brand-rgb), 0.08);
    border-color: rgba(var(--brand-rgb), 0.15);
}

@media (max-width: 1100px) {
    .hub-post .feed-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Reaction buttons are the feed page's (.reaction-btn from css/feed.css), just
   sized down for the preview. Reacting here is the same call the feed makes. */
.hub-post-actions .reaction-btn {
    padding: 0.25rem 0.55rem;
    font-size: 0.8rem;
}

.hub-post-comments {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.hub-post-actions {
    display: flex;
    gap: 1.1rem;
    font-size: 0.8rem;
    color: var(--text-light);
    font-weight: 600;
}

.hub-post-actions span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Quick Stats list. .stat-item/.stat-label/.stat-value come from dashboard.css;
   only the outer rules are trimmed, the card already draws its own edges. */
.hub-stat-list .stat-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.hub-stat-list .stat-item:first-child {
    padding-top: 0;
}

/* ===== Live now / community rows ===== */
.hub-live-list {
    display: flex;
    flex-direction: column;
}

.hub-live-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--border-color);
    font-size: 0.88rem;
}

.hub-live-row:first-child {
    border-top: none;
}

.hub-live-row i {
    color: var(--primary);
}

.hub-live-value {
    margin-left: auto;
    font-weight: 700;
    font-family: var(--font-primary);
    color: var(--text-secondary);
}

.hub-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
    flex-shrink: 0;
}

/* ===== My friends ===== */
.hub-dot.offline {
    background: var(--text-light);
    box-shadow: none;
    opacity: 0.5;
}

.hub-friend-row.is-offline a:not(.hub-friend-dm) {
    color: var(--text-secondary);
}

.hub-friend-row.is-offline {
    opacity: 0.7;
}

.hub-friend-dm {
    display: inline-flex;
    align-items: center;
    color: var(--text-light);
    font-size: 1rem;
    transition: color var(--transition-fast);
}

.hub-friend-dm:hover {
    color: var(--primary);
}

.hub-friends-count {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-light);
    white-space: nowrap;
}

/* A waiting co-op invite is the one row here that wants an answer */
.hub-invite-row {
    color: var(--primary);
    font-weight: 600;
}

.hub-invite-row button {
    border: none;
    background: none;
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
}

.hub-live-row a {
    color: inherit;
    text-decoration: none;
}

.hub-live-row a:hover {
    color: var(--primary);
}

/* .gamemode-cards defaults to 300px minimum tracks for the five gamemode cards;
   these two tiles are shorter, so they may sit closer together. */
.hub-quick.gamemode-cards {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 0;
}

/* ===== Avatar account menu ===== */
.avatar-menu-wrapper {
    position: relative;
}

.avatar-menu-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    border-radius: 50%;
    transition: transform var(--transition-fast);
}

.avatar-menu-btn:hover {
    transform: scale(1.05);
}

/* components.css styles .dropdown-menu links; these items are buttons so that
   dashboard.js's existing #profile-btn / #settings-btn handlers still apply. */
.avatar-menu-wrapper .dropdown-menu {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.avatar-menu-wrapper .dropdown-menu ul {
    margin: 0;
}

.avatar-menu-wrapper .dropdown-menu button {
    display: block;
    width: 100%;
    padding: 0.8rem 1rem;
    border: none;
    background: none;
    text-align: left;
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.avatar-menu-wrapper .dropdown-menu button:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

[data-theme="dark"] .avatar-menu-wrapper .dropdown-menu button:hover {
    background: rgba(var(--brand-rgb), 0.12);
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
    .hub-grid {
        grid-template-columns: 1fr;
    }
}

/* Below 900px dashboard.css pins the header to a single non-wrapping row with
   `!important` (it was built for the old scrollable button row, which the pillar
   nav has replaced). The nav is the primary navigation now, so it gets a full
   row of its own under the bell/avatar rather than a squeezed 200px sliver. */
@media (max-width: 900px) {
    .dashboard-header {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        justify-content: space-between !important;
    }

    .hub-nav {
        flex: 1 0 100%;
        order: 2;
    }

    /* The fade/overlay existed to mask the scrolling button row underneath it */
    .user-menu {
        margin-left: 0;
        padding-left: 0;
        background: none;
    }
}

@media (max-width: 768px) {
    .hub-hero {
        padding: 1.5rem;
    }

    .hub-hero h1 {
        font-size: 1.6rem;
    }

    .hub-hero-stats {
        gap: 1.25rem;
    }

    .hub-stat b {
        font-size: 1.3rem;
    }
}