/*
  Patch: stable public/player shell while browsing.
  This file intentionally only targets the public and player layouts.
  It avoids changing game cards, gameplay shell, ads, profile, ranking or admin styles.
*/

body.public-layout-body {
  --ag-shell-topbar-height: 86px;
  --ag-shell-sidebar-width: 88px;
  padding-top: var(--ag-shell-topbar-height);
}

body.public-layout-body .public-app-shell {
  grid-template-rows: minmax(0, 1fr) !important;
  min-height: calc(100dvh - var(--ag-shell-topbar-height));
}

body.public-layout-body .public-topbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  min-height: var(--ag-shell-topbar-height);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(5, 8, 18, 0.94);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.24);
}

@media (min-width: 981px) {
  body.public-layout-body .public-app-shell {
    grid-template-columns: var(--ag-shell-sidebar-width) minmax(0, 1fr) !important;
  }

  body.public-layout-body .public-sidebar {
    position: fixed !important;
    top: var(--ag-shell-topbar-height) !important;
    left: 0;
    bottom: 0;
    z-index: 1050;
    width: var(--ag-shell-sidebar-width);
    min-width: var(--ag-shell-sidebar-width);
    max-width: var(--ag-shell-sidebar-width);
    height: calc(100dvh - var(--ag-shell-topbar-height)) !important;
    max-height: calc(100dvh - var(--ag-shell-topbar-height));
    overflow: visible;
  }

  body.public-layout-body .public-sidebar:hover,
  body.public-layout-body .public-sidebar:focus-within {
    width: var(--ag-shell-sidebar-width);
    min-width: var(--ag-shell-sidebar-width);
    max-width: var(--ag-shell-sidebar-width);
  }

  body.public-layout-body .public-sidebar-panel {
    height: 100% !important;
    max-height: 100%;
    top: 0 !important;
  }

  body.public-layout-body .public-app-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  body.public-layout-body .page-shell-public,
  body.public-layout-body .public-footer {
    max-width: calc(100vw - var(--ag-shell-sidebar-width) - 36px);
  }
}

@media (max-width: 980px) {
  body.public-layout-body .public-app-shell {
    grid-template-columns: 1fr !important;
  }

  body.public-layout-body .public-sidebar {
    position: fixed !important;
    top: var(--ag-shell-topbar-height) !important;
    left: 0;
    bottom: 0;
    z-index: 1050;
    height: calc(100dvh - var(--ag-shell-topbar-height)) !important;
    max-height: calc(100dvh - var(--ag-shell-topbar-height));
  }

  body.public-layout-body .public-sidebar-panel {
    height: 100% !important;
    max-height: 100%;
  }
}

@media (max-width: 820px) {
  body.public-layout-body {
    --ag-shell-topbar-height: 142px;
  }

  body.public-layout-body .public-topbar {
    min-height: var(--ag-shell-topbar-height);
  }
}

@media (max-width: 620px) {
  body.public-layout-body {
    --ag-shell-topbar-height: 134px;
  }
}

body.player-layout-body {
  --ag-player-topbar-height: 78px;
  padding-top: var(--ag-player-topbar-height);
}

body.player-layout-body .player-topbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  min-height: var(--ag-player-topbar-height);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(5, 8, 18, 0.94);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.24);
}

@media (max-width: 820px) {
  body.player-layout-body {
    --ag-player-topbar-height: 112px;
  }
}

@media (max-width: 560px) {
  body.player-layout-body {
    --ag-player-topbar-height: 154px;
  }
}