/* Матч&мяч v55 — mobile shell: gradient header, clear hamburger, resilient notifications */

@media (max-width: 960px) {
  :root { --mobile-shell-top: max(8px, env(safe-area-inset-top)); }

  /* The shell is no longer a floating island. It blends into the page. */
  .global-tools {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(76px + env(safe-area-inset-top)) !important;
    min-height: 0 !important;
    padding: var(--mobile-shell-top) 14px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(68px, 1fr) 44px 44px 44px 44px !important;
    align-items: start !important;
    gap: 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(
      180deg,
      rgba(8, 12, 8, .98) 0%,
      rgba(8, 12, 8, .88) 48%,
      rgba(8, 12, 8, .48) 72%,
      rgba(8, 12, 8, 0) 100%
    ) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
    transition: background .22s ease, transform .22s ease !important;
  }
  .global-tools.is-scrolled {
    background: linear-gradient(
      180deg,
      rgba(8, 12, 8, 1) 0%,
      rgba(8, 12, 8, .94) 50%,
      rgba(8, 12, 8, .60) 76%,
      rgba(8, 12, 8, 0) 100%
    ) !important;
  }

  .global-tools > * { pointer-events: auto !important; }
  .global-tools .mobile-shell-brand {
    height: 44px !important;
    padding: 0 7px !important;
    display: flex !important;
    align-items: center !important;
  }
  .global-tools .mobile-shell-brand img {
    width: 82px !important;
    max-height: 27px !important;
  }

  .global-tools #city-switcher-float,
  .global-tools #notif-bell-float,
  .global-tools #profile-shortcut-float,
  .global-tools .mobile-menu-trigger {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
  }
  .global-tools .city-pill,
  .global-tools .notif-btn,
  .global-tools .profile-shortcut,
  .global-tools .mobile-menu-trigger {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border: 1px solid rgba(255,255,255,.095) !important;
    border-radius: 14px !important;
    background: rgba(16, 21, 15, .76) !important;
    color: #9ca497 !important;
    box-shadow: 0 8px 24px -20px rgba(0,0,0,.9) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    touch-action: manipulation;
  }
  .global-tools .city-pill:active,
  .global-tools .notif-btn:active,
  .global-tools .profile-shortcut:active,
  .global-tools .mobile-menu-trigger:active {
    transform: scale(.94) !important;
  }
  .global-tools .mobile-menu-trigger .ic,
  .global-tools .mobile-menu-trigger svg { width: 21px !important; height: 21px !important; }
  .global-tools .mobile-menu-trigger[aria-expanded="true"] {
    color: var(--accent) !important;
    border-color: rgba(200,255,61,.28) !important;
    background: rgba(200,255,61,.08) !important;
  }

  /* Bell stays visually present even with zero notifications. */
  .global-tools .notif-btn { display: grid !important; place-items: center !important; }
  .global-tools .notif-btn svg { width: 19px !important; height: 19px !important; }
  .global-tools .notif-btn.has-unread {
    color: var(--accent-ink) !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
  }
  .global-tools .notif-badge {
    top: -3px !important;
    right: -3px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border: 2px solid #0a0e09 !important;
    font-size: 8px !important;
  }

  .profile-shortcut img,
  .profile-shortcut-initial,
  .profile-shortcut-icon {
    width: 37px !important;
    height: 37px !important;
    border-radius: 11px !important;
  }

  /* Menus are anchored below the functional row, not below the full gradient. */
  .profile-shortcut-menu { top: calc(env(safe-area-inset-top) + 58px) !important; right: 10px !important; }
  .global-tools .notif-menu {
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 58px) !important;
    right: 10px !important;
    width: min(390px, calc(100vw - 20px)) !important;
    max-height: min(620px, calc(100dvh - 86px - env(safe-area-inset-bottom))) !important;
  }
  .global-tools .city-menu {
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 58px) !important;
    right: 10px !important;
    left: auto !important;
    width: min(320px, calc(100vw - 20px)) !important;
  }

  /* Drawer respects notches and feels like a real mobile navigation surface. */
  .mobile-nav-drawer {
    top: max(7px, env(safe-area-inset-top)) !important;
    right: 7px !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    width: min(365px, calc(100vw - 14px)) !important;
  }
  .mobile-nav-links > a { min-height: 52px !important; }
  .mobile-nav-close { width: 44px !important; height: 44px !important; }

  /* Touch targets in the persistent bottom bar. */
  .mobile-tabbar a {
    min-height: 58px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-tabbar a:active:not(.mobile-play) { transform: scale(.96); }

  /* When the OS keyboard opens, free the useful vertical space. */
  body.mobile-keyboard-open .mobile-tabbar {
    transform: translateY(calc(100% + 24px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 390px) {
  .global-tools {
    grid-template-columns: minmax(56px, 1fr) 41px 41px 41px 41px !important;
    gap: 3px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .global-tools .mobile-shell-brand { padding-left: 5px !important; }
  .global-tools .mobile-shell-brand img { width: 69px !important; }
  .global-tools #city-switcher-float,
  .global-tools #notif-bell-float,
  .global-tools #profile-shortcut-float,
  .global-tools .mobile-menu-trigger,
  .global-tools .city-pill,
  .global-tools .notif-btn,
  .global-tools .profile-shortcut {
    width: 41px !important;
    min-width: 41px !important;
    max-width: 41px !important;
    height: 41px !important;
    min-height: 41px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-tools, .mobile-tabbar { transition: none !important; }
}