/* Battle Barge — Shared Shell Layout
   ================================================================
   Page skeleton used by both universes: sticky header, bottom tab
   bar with overflow drawer, in-Battle sub-nav, and the public hub
   landing. All values flow from --bb-* tokens; a universe switch
   re-themes the shell without touching this file.
   ================================================================ */

/* ----------------------------------------------------------------
   Base page — resets scoped so we don't stomp on existing apps.
   VS and TWA have their own resets; we only assert what we need.
   ---------------------------------------------------------------- */
html {
    box-sizing: border-box;
    /* Pin html to the dynamic viewport so position:fixed elements
       (bottom nav, drawer) don't float when iOS Safari's address bar
       collapses/expands. Without an explicit height anchor, mobile
       Safari uses the layout viewport — which doesn't move when the
       chrome bar slides out — so the bottom nav appears to lift away
       from the bottom edge as the visual viewport grows. */
    height: 100%;
}
*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    min-height: 100%;
    /* dvh fallback supported on iOS 16+ Safari and modern Chrome.
       Older browsers fall back to the min-height: 100% above. */
    min-height: 100dvh;
    background: var(--bb-bg-base);
    color: var(--bb-text-primary);
    font-family: var(--bb-font-body);
}

/* Room for the sticky header and fixed bottom nav so page content is
   never occluded. TOW uses normal document flow, so body padding pushes
   content down correctly. The unified shell ALSO needs this padding
   (was previously gated on data-universe, which left the hub-shell
   path under the nav). Match the nav's visible height (60px) plus
   iOS safe-area inset; the nav itself extends safe-area below that
   so the home-indicator zone stays clear. */
body {
    padding-top:    calc(56px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}
/* Hub page (battlebarge.app/ landing) opts out — has its own layout. */
body.bb-hub-page {
    padding-top: 0;
    padding-bottom: 0;
}

/* HH wraps the whole app in `#app { position: fixed; top: 0; height: 100vh;
   overflow: hidden }` with `.screen` children at `position: absolute; top: 0`.
   Fixed-positioned elements are anchored to the VIEWPORT, not the padded
   body, so body padding is ignored — content sits directly under the
   shell header. Shift `#app` down by the header height and squeeze its
   height by header + bottom-nav so screens render in the free zone.
   The shell chrome itself (bb-header, bb-bottom-nav) is also
   `position: fixed`, so it stays at the viewport edges regardless of
   where its parent `#app` is. Specificity 1-1-1 beats `#app` at 1-0-0. */
html[data-universe="hh"] #app {
    top: calc(56px + env(safe-area-inset-top, 0px));
    height: calc(100vh - 56px - 60px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - 56px - 60px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

/* ----------------------------------------------------------------
   Header — 56px sticky, sits above the safe area on iOS.
   ---------------------------------------------------------------- */
.bb-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--bb-bg-surface);
    border-bottom: 1px solid var(--bb-border);
    display: flex;
    align-items: center;
}

.bb-header-inner {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--bb-space-3);
    /* Honor notched-phone safe areas on left/right so the hamburger
       doesn't get eaten by the rounded corner. */
    padding: 0 calc(var(--bb-space-4) + env(safe-area-inset-right, 0px))
              0 calc(var(--bb-space-4) + env(safe-area-inset-left, 0px));
    height: 56px;
    /* Contain inner overflow — otherwise a flexed row that totals wider
       than the viewport clips at the body's `overflow-x: hidden` and
       chops off the rightmost action. */
    min-width: 0;
}

.bb-wordmark {
    /* Stack BETA under the wordmark so the badge doesn't eat horizontal
       space in the header. Keeps the brand identity while freeing up
       room for the universe-switch pill on narrow screens. */
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-lg);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--bb-text-primary);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.bb-wordmark-beta {
    /* Subtle, narrow label beneath the wordmark — no border box now that
       it sits as a second line rather than an inline badge. */
    font-family: var(--bb-font-body);
    font-size: 0.5em;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: var(--bb-accent-warning);
    text-transform: uppercase;
    line-height: 1;
}

.bb-header-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--bb-space-2);
    /* Don't let a wide wordmark or pill squeeze the action buttons out
       — they must be fully visible and tappable at every width. */
    flex-shrink: 0;
}

.bb-icon-btn {
    width: var(--bb-touch-min);
    height: var(--bb-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--bb-radius-md);
    color: var(--bb-text-secondary);
    cursor: pointer;
    padding: 0;
    /* Individual buttons keep their touch-min size even if the row
       is constrained. */
    flex-shrink: 0;
}
.bb-icon-btn:hover,
.bb-icon-btn:focus-visible {
    background: var(--bb-bg-elevated);
    color: var(--bb-text-primary);
    outline: none;
}
.bb-icon-btn svg {
    width: 22px;
    height: 22px;
}

/* Profile button — paired with the notification bell on the right
   side of the header. Avatar-or-icon swap: paid + logged-in users
   with an uploaded avatar see the circular image; everyone else sees
   the default user-silhouette SVG. (Hamburger button removed
   2026-04-27 — its CSS rules were stripped with it.) */
.bb-profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--bb-radius-full);
    object-fit: cover;
    border: 1.5px solid var(--bb-accent-primary);
}
.bb-profile-btn.has-avatar .bb-profile-icon   { display: none; }
.bb-profile-btn.has-avatar .bb-profile-avatar { display: block; }
.bb-profile-btn.has-avatar {
    background: transparent;
}

.bb-notification-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 8px;
    height: 8px;
    border-radius: var(--bb-radius-full);
    background: var(--bb-accent-danger);
    pointer-events: none;
}

/* ----------------------------------------------------------------
   Bottom navigation — fixed 72px (incl. safe area), 4 primary tabs.
   ---------------------------------------------------------------- */
.bb-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    /* 60px gives icons + labels enough room without wasting screen
       real estate. iOS home-indicator inset is rendered as
       padding-bottom so the visible flex content keeps to 60px even on
       notched devices. */
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bb-bg-surface);
    border-top: 1px solid var(--bb-border);
}

.bb-tab {
    /* Position is required so the .bb-tab-badge below anchors to the
       tab itself rather than bubbling up to the nearest ancestor (the
       fixed bottom nav), which previously parked the active-battle
       badge in the wrong spot on every layout. */
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--bb-touch-min);
    padding: var(--bb-space-2) var(--bb-space-1);
    background: transparent;
    border: none;
    color: var(--bb-text-muted);
    font-family: var(--bb-font-body);
    font-size: var(--bb-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.bb-tab:hover,
.bb-tab:focus-visible {
    color: var(--bb-text-primary);
    outline: none;
}
.bb-tab[aria-current="page"],
.bb-tab.is-active {
    color: var(--bb-accent-primary);
}
.bb-tab-icon {
    width: 24px;
    height: 24px;
    stroke-width: 1.75;
}
.bb-tab-label {
    line-height: 1;
}

/* Small in-tab badge (e.g. "Battle" showing an active game). Anchored
   relative to the .bb-tab parent (which now has `position: relative`)
   so the dot reliably sits at the upper-right of the tab icon. */
.bb-tab-badge {
    position: absolute;
    top: 4px;
    right: 25%;
    width: 8px;
    height: 8px;
    border-radius: var(--bb-radius-full);
    background: var(--bb-accent-primary);
}

/* ----------------------------------------------------------------
   More drawer — slide-up overlay triggered by the "More" tab.
   ---------------------------------------------------------------- */
.bb-more-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--bb-transition-base);
}
.bb-more-drawer {
    /* Lift the drawer ABOVE the bottom nav (which sits at z:40) so the
       last row of drawer items isn't visually clipped by the fixed nav.
       Earlier draft pinned the nav above the drawer for toggle-close
       reach — that's now handled in bb-shell.js by routing a tap on the
       More tab while the drawer is open back through the close path. */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--bb-bg-surface);
    border-top: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg) var(--bb-radius-lg) 0 0;
    padding: var(--bb-space-3) var(--bb-space-4);
    /* Clear the bottom nav (60px tall) AND iOS home indicator inset so
       the last row of drawer items sits visibly above the nav rather
       than under it. */
    padding-bottom: calc(var(--bb-space-6) + 60px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform var(--bb-transition-base);
    box-shadow: var(--bb-shadow-lg);
}
.bb-more-drawer.is-open {
    transform: translateY(0);
}
.bb-more-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.bb-more-handle {
    /* Small swipe-indicator bar at the top of the drawer. Decorative
       — actual close happens via backdrop click or a drawer item. */
    width: 40px;
    height: 4px;
    background: var(--bb-border);
    border-radius: var(--bb-radius-full);
    margin: 0 auto var(--bb-space-3);
}

.bb-more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--bb-space-2);
}

.bb-more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bb-space-2);
    min-height: calc(var(--bb-touch-min) + 16px);
    padding: var(--bb-space-3) var(--bb-space-2);
    background: var(--bb-bg-elevated);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    color: var(--bb-text-secondary);
    font-family: var(--bb-font-body);
    font-size: var(--bb-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.bb-more-item:hover,
.bb-more-item:focus-visible {
    color: var(--bb-text-primary);
    border-color: var(--bb-accent-primary);
    outline: none;
}
.bb-more-item svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.75;
    color: var(--bb-accent-primary);
}

/* ----------------------------------------------------------------
   Sub-nav — horizontal pill bar inside the Battle screen.
   Rendered by the app, styled here. Scrolls horizontally on narrow
   screens rather than wrapping — keeps pill alignment predictable.
   ---------------------------------------------------------------- */
.bb-sub-nav {
    display: flex;
    gap: var(--bb-space-2);
    padding: var(--bb-space-3) var(--bb-space-4);
    overflow-x: auto;
    background: var(--bb-bg-surface);
    border-bottom: 1px solid var(--bb-border);
    /* Hide scrollbar on mobile — desktop users rarely need it here. */
    scrollbar-width: none;
}
.bb-sub-nav::-webkit-scrollbar { display: none; }

.bb-sub-nav-pill {
    flex-shrink: 0;
    min-height: 36px;
    padding: 0 var(--bb-space-3);
    background: var(--bb-bg-elevated);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-full);
    color: var(--bb-text-secondary);
    font-family: var(--bb-font-body);
    font-size: var(--bb-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.bb-sub-nav-pill:hover,
.bb-sub-nav-pill:focus-visible {
    color: var(--bb-text-primary);
    border-color: var(--bb-accent-primary);
    outline: none;
}
.bb-sub-nav-pill[aria-selected="true"],
.bb-sub-nav-pill.is-active {
    color: var(--bb-bg-base);
    background: var(--bb-accent-primary);
    border-color: var(--bb-accent-primary);
}

/* ----------------------------------------------------------------
   Hub landing — public / pre-universe-pick split hero.
   Mobile: stacked. Desktop: side-by-side halves.
   ---------------------------------------------------------------- */
.bb-hub {
    /* The hub OPTs OUT of the default body padding because it's
       full-bleed and has no header/bottom-nav. Apps using this
       layout can add `.bb-hub-page` to body to zero those out. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bb-bg-base);
    color: var(--bb-text-primary);
}

body.bb-hub-page {
    padding-top: 0;
    padding-bottom: 0;
}

.bb-hub-brand {
    text-align: center;
    padding: var(--bb-space-6) var(--bb-space-4);
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-2xl);
    font-weight: 700;
    letter-spacing: 0.12em;
}
.bb-hub-brand-beta {
    font-size: 0.45em;
    vertical-align: middle;
    margin-left: var(--bb-space-2);
    color: var(--bb-accent-warning);
    padding: 2px 6px;
    border: 1px solid currentColor;
    border-radius: var(--bb-radius-sm);
    letter-spacing: 0.1em;
}

.bb-hub-split {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--bb-border);
}

.bb-hub-half {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bb-space-4);
    padding: var(--bb-space-12) var(--bb-space-6);
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}
.bb-hub-half-hh {
    background: linear-gradient(135deg, #08080d 0%, #1a1425 60%, #3a2e15 100%);
    color: #e2e8f0;
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
}
.bb-hub-half-tow {
    background: linear-gradient(135deg, #0d0b08 0%, #2a1f12 60%, #4a3520 100%);
    color: #e8e0d0;
    font-family: 'Cinzel', Georgia, serif;
}

.bb-hub-half-title {
    font-size: var(--bb-text-3xl);
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0;
    text-transform: uppercase;
}
.bb-hub-half-sub {
    font-size: var(--bb-text-base);
    opacity: 0.75;
    margin: 0;
    max-width: 32ch;
}
.bb-hub-half-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bb-touch-min);
    padding: 0 var(--bb-space-6);
    border: 1px solid currentColor;
    border-radius: var(--bb-radius-full);
    font-family: inherit;
    font-size: var(--bb-text-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: var(--bb-space-2);
}

.bb-hub-footer {
    text-align: center;
    padding: var(--bb-space-4);
    color: var(--bb-text-muted);
    font-size: var(--bb-text-xs);
}

/* ----------------------------------------------------------------
   Responsive bumps.
   ---------------------------------------------------------------- */
@media (min-width: 768px) {
    .bb-header-inner {
        padding: 0 var(--bb-space-6);
    }
    .bb-hub-split {
        flex-direction: row;
    }
    .bb-hub-brand {
        font-size: var(--bb-text-3xl);
    }
    .bb-hub-half-title {
        font-size: var(--bb-text-4xl);
    }
}

/* ----------------------------------------------------------------
   Screen-reader-only utility (for skip-links etc.)
   ---------------------------------------------------------------- */
.bb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}