/*
 * GalaxyBet Design System v2
 * Shared, mobile-first primitives only. Route layouts and application behaviour
 * deliberately remain outside this file.
 */

:root {
  --gbv2-bg: #080d0b;
  --gbv2-surface: #101814;
  --gbv2-surface-raised: #152019;
  --gbv2-surface-strong: #1a281f;
  --gbv2-text: #f3f8f4;
  --gbv2-text-muted: #93a399;
  --gbv2-text-subtle: #65736b;
  --gbv2-primary: #65ff35;
  --gbv2-primary-strong: #91ff72;
  --gbv2-primary-ink: #071008;
  --gbv2-danger: #ff7272;
  --gbv2-line: rgba(236, 255, 241, .09);
  --gbv2-line-strong: rgba(101, 255, 53, .24);
  --gbv2-radius-xs: 8px;
  --gbv2-radius-sm: 12px;
  --gbv2-radius-md: 16px;
  --gbv2-radius-lg: 20px;
  --gbv2-radius-pill: 999px;
  --gbv2-space-1: 4px;
  --gbv2-space-2: 8px;
  --gbv2-space-3: 12px;
  --gbv2-space-4: 16px;
  --gbv2-space-5: 20px;
  --gbv2-control: 44px;
  --gbv2-control-compact: 36px;
  --gbv2-shadow-card: 0 12px 30px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .035);
  --gbv2-shadow-float: 0 18px 42px rgba(0, 0, 0, .38), 0 0 24px rgba(101, 255, 53, .06);
  --gbv2-ease: 180ms cubic-bezier(.2, .8, .2, 1);
}

@media (max-width: 800px) {
  /* Foundation: focus treatment, type scale and reliable touch targets. */
  #app {
    --gb-card-radius: var(--gbv2-radius-md);
    --gb-btn-height: var(--gbv2-control);
    --gb-btn-height-sm: var(--gbv2-control-compact);
  }

  #app :where(button, input, select, textarea) { font-family: inherit; }
  #app :where(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--gbv2-primary) !important;
    outline-offset: 2px;
  }
  #app :where(button, a[href]) { -webkit-tap-highlight-color: transparent; }
  #app :where(button:not([disabled]), a[href]) { touch-action: manipulation; }
  #app :where(button[disabled], input[disabled], select[disabled], textarea[disabled]) { cursor: not-allowed; opacity: .52; }

  /* Buttons: existing button classes receive one consistent hierarchy. */
  #app :is(.btn, .gb-primary-btn, .mobile-game-play, .campaign-cta, .section-see-all, .gb-result-open, .gb-hero-action) {
    min-height: var(--gbv2-control) !important;
    border-radius: var(--gbv2-radius-sm) !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    transition: transform var(--gbv2-ease), box-shadow var(--gbv2-ease), border-color var(--gbv2-ease), background var(--gbv2-ease) !important;
  }
  #app :is(.btn.primary, .gb-primary-btn, .mobile-game-play, .campaign-cta, .gb-result-open) {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--gbv2-primary), var(--gbv2-primary-strong)) !important;
    box-shadow: 0 8px 18px rgba(101, 255, 53, .16) !important;
    color: var(--gbv2-primary-ink) !important;
  }
  #app :is(.btn.ghost, .gb-secondary-btn, .gb-hero-action, .section-see-all) {
    border: 1px solid var(--gbv2-line) !important;
    background: rgba(255, 255, 255, .035) !important;
    color: var(--gbv2-text) !important;
  }
  #app :is(.btn, .gb-primary-btn, .gb-secondary-btn, .mobile-game-play, .campaign-cta, .section-see-all, .gb-result-open, .gb-hero-action):active { transform: scale(.975) !important; }

  /* Card and section shell primitives. */
  #app :is(.card, .mobile-home-section, .gb-home-section, .gb-section-card, .gb-settings-card, .gb-library-section, .slot-lobby-card, .coupon-shell) {
    border-color: var(--gbv2-line) !important;
    border-radius: var(--gbv2-radius-md) !important;
    box-shadow: var(--gbv2-shadow-card) !important;
  }
  #app :is(.card-head, .gb-section-card > header, .gb-settings-card > header, .gb-library-section > header, .section-header) {
    border-color: var(--gbv2-line) !important;
  }
  #app :is(.card-head h3, .section-title, .gb-section-card h2, .gb-settings-card h2, .gb-library-section h2) {
    color: var(--gbv2-text) !important;
    letter-spacing: -.025em;
  }

  /* Forms and search share the same field geometry and focus state. */
  #app :is(.field input, .field select, .login-extra input, .pass-wrap input, .payment-search input, .bet-games-search input, .gb-search-input-row input, .gb-support-form input, .gb-support-form textarea, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    border: 1px solid var(--gbv2-line) !important;
    border-radius: var(--gbv2-radius-sm) !important;
    background: var(--gbv2-surface) !important;
    color: var(--gbv2-text) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16);
  }
  #app :is(input, select, textarea):focus {
    border-color: var(--gbv2-line-strong) !important;
    box-shadow: 0 0 0 3px rgba(101, 255, 53, .10), inset 0 1px 1px rgba(0, 0, 0, .16) !important;
  }
  #app :is(input, textarea)::placeholder { color: var(--gbv2-text-subtle) !important; opacity: 1; }

  /* Tabs, provider chips and category controls are horizontally scrollable by default. */
  #app :is(.tabs, .casino-tabs, .mobile-coupon-tabs, .gb-filter-tabs, .bet-provider-tabs, .bb-games-provider-tabs, .rf-provider-tabs) {
    display: flex;
    gap: var(--gbv2-space-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  #app :is(.tabs, .casino-tabs, .mobile-coupon-tabs, .gb-filter-tabs, .bet-provider-tabs, .bb-games-provider-tabs, .rf-provider-tabs)::-webkit-scrollbar { display: none; }
  #app :is(.tabs button, .casino-tabs button, .mobile-coupon-tabs button, .gb-filter-tabs button, .bet-provider-tabs button, .bb-games-provider-tabs button, .rf-provider-tabs button, .provider-button-grid button, .mobile-provider-card, .bb-public-provider-row button) {
    min-height: var(--gbv2-control-compact) !important;
    flex: 0 0 auto;
    scroll-snap-align: start;
    border: 1px solid var(--gbv2-line) !important;
    border-radius: var(--gbv2-radius-pill) !important;
    background: rgba(255, 255, 255, .035) !important;
    color: var(--gbv2-text-muted) !important;
    font-weight: 750 !important;
  }
  #app :is(.tabs button.active, .casino-tabs button.active, .mobile-coupon-tabs button.active, .gb-filter-tabs button.active, .bet-provider-tabs button.active, .bb-games-provider-tabs button.active, .rf-provider-tabs button.active, .provider-button-grid button.active) {
    border-color: rgba(101, 255, 53, .32) !important;
    background: rgba(101, 255, 53, .13) !important;
    color: var(--gbv2-primary) !important;
    box-shadow: inset 0 0 0 1px rgba(101, 255, 53, .04);
  }

  /* Header, drawer and navigation: visual consistency without changing position or routes. */
  #app .topbar.mobile-header {
    border-bottom: 1px solid var(--gbv2-line) !important;
    background: rgba(8, 13, 11, .94) !important;
    backdrop-filter: blur(18px) saturate(130%);
  }
  .bb-bottom-nav-real {
    border: 1px solid var(--gbv2-line) !important;
    background: linear-gradient(180deg, rgba(21, 32, 25, .97), rgba(7, 12, 9, .99)) !important;
    box-shadow: var(--gbv2-shadow-float) !important;
  }
  .bb-bottom-nav-real button.active { color: var(--gbv2-primary) !important; }

  /* Empty/loading states avoid bespoke per-route visual treatment. */
  #app :is(.empty-coupon, .empty-profile-tx, .mobile-coupon-empty, .mobile-coupon-history-empty, .mobile-casino-empty, .gb-empty, .gb-library-empty, .provider-empty-box) {
    border: 1px dashed rgba(255, 255, 255, .14) !important;
    border-radius: var(--gbv2-radius-md) !important;
    background: linear-gradient(145deg, rgba(21, 32, 25, .72), rgba(11, 17, 13, .82)) !important;
    color: var(--gbv2-text-muted) !important;
  }
  #app :is(.gb-route-skeleton, .gb-home-skeleton) { border-radius: var(--gbv2-radius-md) !important; overflow: hidden; }
  #app :is(.gb-route-skeleton i, .gb-route-skeleton b, .gb-route-skeleton span, .gb-home-skeleton i, .gb-home-skeleton .gb-sk-bar, .gb-home-skeleton .gb-sk-hero) {
    background: linear-gradient(90deg, var(--gbv2-surface) 20%, var(--gbv2-surface-raised) 50%, var(--gbv2-surface) 80%) !important;
    background-size: 220% 100% !important;
    animation: gbv2-shimmer 1.25s linear infinite;
  }
}

@keyframes gbv2-shimmer { to { background-position: -220% 0; } }

@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/*
 * Phase 2 — mobile home only
 * Every selector is scoped to the home route so route-specific views retain
 * their existing presentation and behaviour.
 */
@media (max-width: 800px) {
  body[data-app-route="home"] .topbar.mobile-header {
    height: calc(62px + env(safe-area-inset-top)) !important;
    min-height: calc(62px + env(safe-area-inset-top)) !important;
    border-bottom-color: rgba(236, 255, 241, .075) !important;
    background: linear-gradient(180deg, rgba(12, 20, 16, .96), rgba(8, 13, 11, .91)) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .24) !important;
  }
  body[data-app-route="home"] .topbar.mobile-header .mobile-header-logo {
    height: 44px !important;
  }
  body[data-app-route="home"] .topbar.mobile-header .mobile-header-logo .clean-logo {
    height: 44px !important;
  }
  body[data-app-route="home"] .topbar.mobile-header .mobile-header-actions {
    gap: 6px !important;
  }
  body[data-app-route="home"] .topbar.mobile-header .mobile-header-actions .gb-mobile-auth-image {
    width: 46px !important;
    min-width: 46px !important;
    height: 38px !important;
    min-height: 38px !important;
    overflow: hidden;
    border: 1px solid var(--gbv2-line) !important;
    border-radius: 11px !important;
    background: var(--gbv2-surface) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  body[data-app-route="home"] .topbar.mobile-header .mobile-header-actions .gb-mobile-auth-image:last-child {
    border-color: rgba(101,255,53,.35) !important;
    box-shadow: 0 5px 15px rgba(101,255,53,.12), inset 0 1px 0 rgba(255,255,255,.12);
  }
  body[data-app-route="home"] .topbar.mobile-header .mobile-header-actions .gb-mobile-auth-image img {
    width: 100%; height: 100%; object-fit: contain;
  }

  body[data-app-route="home"] .gb-premium-home {
    padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important;
  }
  body[data-app-route="home"] .gb-premium-home > .mobile-hero-slider {
    margin-top: 12px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: var(--gbv2-radius-lg) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.32), 0 0 0 1px rgba(101,255,53,.035) !important;
  }
  body[data-app-route="home"] .gb-premium-home .mobile-hero-slide {
    border-radius: inherit !important;
    transition: opacity 260ms ease, transform 420ms cubic-bezier(.2,.8,.2,1) !important;
  }
  body[data-app-route="home"] .gb-premium-home .mobile-hero-dots {
    bottom: 10px !important;
    padding: 4px 6px !important;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--gbv2-radius-pill);
    background: rgba(5,10,7,.38);
    backdrop-filter: blur(8px);
  }
  body[data-app-route="home"] .gb-premium-home .mobile-hero-dots button {
    box-shadow: none !important;
  }
  body[data-app-route="home"] .gb-premium-home .mobile-hero-dots button.active {
    box-shadow: 0 0 11px rgba(101,255,53,.48) !important;
  }

  /* Category / quick action rail retains its navigation actions and gets a shared card treatment. */
  body[data-app-route="home"] .gb-premium-home :is(.category-row, .gb-hero-glass-grid) {
    margin-top: 12px !important;
    margin-bottom: 18px !important;
    gap: 9px !important;
  }
  body[data-app-route="home"] .gb-premium-home .category-row .cat,
  body[data-app-route="home"] .gb-premium-home .gb-hero-glass-grid > button {
    border: 1px solid var(--gbv2-line) !important;
    border-radius: var(--gbv2-radius-md) !important;
    background: linear-gradient(145deg, var(--gbv2-surface-raised), var(--gbv2-surface)) !important;
    box-shadow: 0 9px 20px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.035) !important;
    transition: transform var(--gbv2-ease), border-color var(--gbv2-ease), background var(--gbv2-ease), box-shadow var(--gbv2-ease) !important;
  }
  body[data-app-route="home"] .gb-premium-home .category-row .cat.active,
  body[data-app-route="home"] .gb-premium-home .category-row .cat[aria-current="page"] {
    border-color: rgba(101,255,53,.4) !important;
    background: linear-gradient(145deg, rgba(101,255,53,.20), rgba(18,42,23,.92)) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.24), 0 0 18px rgba(101,255,53,.10) !important;
  }
  body[data-app-route="home"] .gb-premium-home .category-row .cat.active b,
  body[data-app-route="home"] .gb-premium-home .category-row .cat[aria-current="page"] b {
    color: var(--gbv2-primary) !important;
  }
  body[data-app-route="home"] .gb-premium-home .gb-hero-glass-grid > button:first-child {
    border-color: rgba(101,255,53,.30) !important;
    background: linear-gradient(145deg, rgba(101,255,53,.15), var(--gbv2-surface-raised)) !important;
  }
  body[data-app-route="home"] .gb-premium-home :is(.category-row .cat, .gb-hero-glass-grid > button):active {
    transform: scale(.975) !important;
  }

  /* Section rhythm and headings are shared across popular, new, live and promotion rails. */
  body[data-app-route="home"] .bb-mobile-home-content {
    margin-top: 0 !important;
    padding-bottom: 12px !important;
  }
  body[data-app-route="home"] .bb-mobile-home-content .mobile-home-section {
    margin-bottom: 26px !important;
  }
  body[data-app-route="home"] .bb-mobile-home-content .section-header {
    min-height: 34px !important;
    margin-bottom: 12px !important;
    padding-inline: 2px !important;
  }
  body[data-app-route="home"] .bb-mobile-home-content .section-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
  }
  body[data-app-route="home"] .bb-mobile-home-content .section-see-all {
    min-height: 32px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(101,255,53,.20) !important;
    border-radius: var(--gbv2-radius-pill) !important;
    background: rgba(101,255,53,.07) !important;
    color: var(--gbv2-primary) !important;
    font-size: 11px !important;
  }
  body[data-app-route="home"] .bb-mobile-home-content .section-see-all span { font-size: 16px !important; }
  body[data-app-route="home"] .bb-mobile-home-content .mobile-horizontal-row {
    gap: 12px !important;
    padding-bottom: 7px !important;
  }

  /* Card proportions are intentionally untouched; only shell spacing/alignment changes. */
  body[data-app-route="home"] .bb-mobile-home-content .mobile-game-card {
    border-color: rgba(236,255,241,.11) !important;
    border-radius: var(--gbv2-radius-md) !important;
    background: linear-gradient(160deg, #17221b, #101713) !important;
    box-shadow: 0 10px 23px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.035) !important;
  }
  body[data-app-route="home"] .bb-mobile-home-content .mobile-game-art { border-radius: calc(var(--gbv2-radius-md) - 1px) calc(var(--gbv2-radius-md) - 1px) 0 0; }
  body[data-app-route="home"] .bb-mobile-home-content .mobile-game-info { padding: 9px 9px 10px !important; }
  body[data-app-route="home"] .bb-mobile-home-content .mobile-game-meta { margin-bottom: 8px !important; }
  body[data-app-route="home"] .bb-mobile-home-content .mobile-game-play {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 14px rgba(101,255,53,.14) !important;
  }
  body[data-app-route="home"] .bb-mobile-home-content .mobile-promotion-card,
  body[data-app-route="home"] .bb-mobile-home-content .mobile-provider-card {
    border-color: var(--gbv2-line) !important;
    border-radius: var(--gbv2-radius-md) !important;
    box-shadow: 0 9px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035) !important;
  }
  body[data-app-route="home"] .bb-mobile-home-content .mobile-provider-card { background: linear-gradient(145deg, var(--gbv2-surface-raised), var(--gbv2-surface)) !important; }

  body[data-app-route="home"] .gb-premium-home .gb-home-section,
  body[data-app-route="home"] .gb-premium-home .gb-home-support {
    margin-top: 0 !important;
    margin-bottom: 26px !important;
    border-radius: var(--gbv2-radius-lg) !important;
  }
  body[data-app-route="home"] .gb-premium-home .gb-home-section > header { margin-bottom: 15px !important; }
}

@media (max-width: 360px) {
  body[data-app-route="home"] .gb-premium-home > .mobile-hero-slider { margin-top: 9px !important; }
  body[data-app-route="home"] .gb-premium-home .category-row .cat { flex-basis: 72px !important; min-height: 92px !important; height: 92px !important; }
  body[data-app-route="home"] .bb-mobile-home-content .mobile-home-section { margin-bottom: 22px !important; }
  body[data-app-route="home"] .bb-mobile-home-content .mobile-horizontal-row { gap: 10px !important; }
}

/* Phase 3 — premium home polish. CSS only; no route or interaction changes. */
@media (max-width: 800px) {
  body[data-app-route="home"] .topbar.mobile-header {
    height: calc(64px + env(safe-area-inset-top)) !important;
    min-height: calc(64px + env(safe-area-inset-top)) !important;
    background: linear-gradient(180deg, rgba(16, 26, 20, .96), rgba(7, 12, 9, .90)) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.28), inset 0 -1px rgba(255,255,255,.025) !important;
    backdrop-filter: blur(22px) saturate(145%);
  }
  body[data-app-route="home"] .topbar.mobile-header .mobile-header-logo,
  body[data-app-route="home"] .topbar.mobile-header .mobile-header-logo .clean-logo {
    width: clamp(128px, 37vw, 148px) !important;
    max-width: 148px !important;
    height: 48px !important;
  }
  body[data-app-route="home"] .mobile-menu-button {
    width: 40px !important;
    height: 40px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, rgba(30,44,35,.92), rgba(12,20,15,.94)) !important;
    box-shadow: 0 7px 16px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.045) !important;
  }
  body[data-app-route="home"] .mobile-menu-button span { background: var(--gbv2-primary) !important; }
  body[data-app-route="home"] .topbar.mobile-header .mobile-header-actions { gap: 7px !important; }
  body[data-app-route="home"] .topbar.mobile-header .mobile-header-actions .gb-mobile-auth-image {
    width: 48px !important;
    min-width: 48px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
  }

  body[data-app-route="home"] .gb-premium-home > .mobile-hero-slider {
    margin-bottom: 2px !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 42px rgba(0,0,0,.36), 0 0 0 1px rgba(101,255,53,.055), inset 0 1px rgba(255,255,255,.07) !important;
  }
  body[data-app-route="home"] .gb-premium-home .mobile-hero-slide {
    transition: opacity 300ms ease, transform 460ms cubic-bezier(.2,.8,.2,1) !important;
  }
  body[data-app-route="home"] .gb-premium-home .mobile-hero-dots {
    gap: 5px !important;
    padding: 5px 7px !important;
    box-shadow: 0 6px 15px rgba(0,0,0,.20), inset 0 1px rgba(255,255,255,.05);
  }
  body[data-app-route="home"] .gb-premium-home .mobile-hero-dots button {
    width: 6px !important;
    height: 6px !important;
    background: rgba(255,255,255,.52) !important;
  }
  body[data-app-route="home"] .gb-premium-home .mobile-hero-dots button.active {
    width: 19px !important;
    background: var(--gbv2-primary) !important;
  }

  body[data-app-route="home"] .gb-premium-home :is(.category-row .cat, .gb-hero-glass-grid > button) {
    min-height: 72px !important;
    border-radius: var(--gbv2-radius-md) !important;
  }
  body[data-app-route="home"] .gb-premium-home .category-row .cat-icon {
    display: grid;
    place-items: center;
  }
  body[data-app-route="home"] .gb-premium-home .category-row .cat b,
  body[data-app-route="home"] .gb-premium-home .gb-hero-glass-grid strong {
    font-weight: 800 !important;
    letter-spacing: -.015em !important;
  }
  body[data-app-route="home"] .gb-premium-home .gb-hero-glass-grid > button:first-child {
    box-shadow: 0 10px 23px rgba(0,0,0,.24), 0 0 19px rgba(101,255,53,.09), inset 0 1px rgba(255,255,255,.055) !important;
  }

  body[data-app-route="home"] .bb-mobile-home-content .section-header {
    border-bottom: 1px solid rgba(255,255,255,.055);
    padding-bottom: 8px !important;
  }
  body[data-app-route="home"] .bb-mobile-home-content .section-title {
    color: var(--gbv2-text) !important;
    font-size: 17px !important;
    font-weight: 850 !important;
  }
  body[data-app-route="home"] .bb-mobile-home-content .section-see-all {
    min-height: 30px !important;
    padding-inline: 10px !important;
    box-shadow: inset 0 1px rgba(255,255,255,.045);
  }

  body[data-app-route="home"] .bb-mobile-home-content .mobile-game-card {
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease, border-color 180ms ease !important;
  }
  body[data-app-route="home"] .bb-mobile-home-content .mobile-game-play {
    border-color: rgba(137,255,111,.55) !important;
    background: linear-gradient(135deg, #8aff65, var(--gbv2-primary)) !important;
    box-shadow: 0 7px 16px rgba(101,255,53,.18), inset 0 1px rgba(255,255,255,.30) !important;
    font-weight: 850 !important;
  }
  body[data-app-route="home"] .bb-mobile-home-content .mobile-provider-row { gap: 10px !important; }
  body[data-app-route="home"] .bb-mobile-home-content .mobile-provider-card {
    min-height: 60px !important;
    border-color: rgba(236,255,241,.10) !important;
    background: linear-gradient(145deg, #1a281f, #101814) !important;
  }
  body[data-app-route="home"] .bb-mobile-home-content .mobile-provider-card span {
    color: #e4ece6 !important;
    font-weight: 800 !important;
    letter-spacing: -.015em;
  }

  /* Existing navigation markup stays intact; this is presentation only on Home. */
  body[data-app-route="home"] .bb-bottom-nav-real {
    height: calc(74px + env(safe-area-inset-bottom)) !important;
    padding: 6px 5px env(safe-area-inset-bottom) !important;
    border-color: rgba(236,255,241,.10) !important;
    border-radius: 20px 20px 0 0 !important;
    background: linear-gradient(180deg, rgba(22,34,27,.96), rgba(6,11,8,.99)) !important;
    box-shadow: 0 -10px 28px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.055) !important;
    backdrop-filter: blur(20px) saturate(130%);
  }
  body[data-app-route="home"] .bb-bottom-nav-real > button {
    min-height: 66px !important;
    gap: 4px !important;
    border-radius: 12px !important;
    transition: transform 160ms ease, background 160ms ease, color 160ms ease !important;
  }
  body[data-app-route="home"] .bb-bottom-nav-real > button.active {
    background: radial-gradient(circle at 50% 35%, rgba(101,255,53,.14), transparent 66%) !important;
    color: var(--gbv2-primary) !important;
  }
  body[data-app-route="home"] .bb-bottom-nav-real > button.active .bb-mobile-nav-symbol {
    filter: drop-shadow(0 0 7px rgba(101,255,53,.34));
  }
  body[data-app-route="home"] .bb-bottom-nav-real > button:active { transform: scale(.98) !important; }
}

@media (hover: hover) and (pointer: fine) {
  body[data-app-route="home"] .bb-mobile-home-content .mobile-game-card:hover {
    transform: translateY(-2px);
    border-color: rgba(101,255,53,.25) !important;
    box-shadow: 0 15px 29px rgba(0,0,0,.31), 0 0 16px rgba(101,255,53,.06) !important;
  }
  body[data-app-route="home"] .bb-mobile-home-content .mobile-provider-card:hover {
    transform: translateY(-2px);
    border-color: rgba(101,255,53,.26) !important;
  }
}

/* Phase 3.1 — alignment and existing account assets. No interaction changes. */
@media (max-width: 800px) {
  /* Preserve the safe-area pad on the container; center every item in its own equal row. */
  .bb-bottom-nav-real {
    min-height: calc(76px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
  }
  .bb-bottom-nav-real > button {
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1 !important;
  }
  .bb-bottom-nav-real > button :is(img, .bb-mobile-nav-symbol) {
    flex: 0 0 24px !important;
    margin: 0 !important;
  }
  .bb-bottom-nav-real > button b {
    min-height: 10px;
    margin: 0 !important;
    display: block;
    line-height: 10px !important;
  }
  .bb-bottom-nav-real > button[data-page="menu"] .bb-mobile-nav-symbol {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    margin: 0 !important;
  }

  /* Keep account text in place; remove only the inner trailing inset so the avatar sits ~8px from the edge. */
  .topbar.mobile-header .header-user-summary {
    padding-right: 0 !important;
  }

  /* The existing high-resolution PNG assets keep their natural ratios instead of being compressed into square buttons. */
  .topbar.mobile-header .mobile-header-actions .gb-mobile-auth-image {
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
  }
  .topbar.mobile-header .mobile-header-actions .gb-mobile-auth-image img {
    width: auto !important;
    max-width: none !important;
    height: 24px !important;
    display: block !important;
    object-fit: contain !important;
  }
  .topbar.mobile-header:has(.gb-mobile-auth-image) .mobile-header-logo,
  .topbar.mobile-header:has(.gb-mobile-auth-image) .mobile-header-logo .clean-logo {
    width: clamp(96px, 30vw, 112px) !important;
    max-width: 112px !important;
  }
  .topbar.mobile-header:has(.gb-mobile-auth-image) .mobile-header-actions { gap: 3px !important; }

  /* Both existing avatar pickers expose the manifest-backed premium package consistently. */
  .profile-avatar-picker > div,
  .gb-settings-avatar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .profile-avatar-picker button,
  .gb-settings-avatar-grid button {
    border-color: rgba(236,255,241,.10) !important;
    border-radius: var(--gbv2-radius-sm) !important;
    background: var(--gbv2-surface) !important;
  }
  .profile-avatar-picker button.active,
  .gb-settings-avatar-grid button.active {
    border-color: var(--gbv2-primary) !important;
    box-shadow: 0 0 0 2px rgba(101,255,53,.14), 0 8px 18px rgba(0,0,0,.20) !important;
  }
}