/* GRIT Handyansicht */
#mainNav .grit-mobile-recruiting-link { display: none !important; }

@media (max-width: 900px) {
  body.public-site:not(.admin-page) .site-spartan-artwork { display: none !important; }
  body.home-page .hero.hero--background-title .grit-recruiting-link { display: none !important; }
  #mainNav .grit-mobile-recruiting-link { display: block !important; }
  #mainNav { background-color: rgba(5, 6, 8, .98) !important; }
}

@media (max-width: 700px) and (orientation: portrait) {
  body.public-site:not(.admin-page) {
    --grit-background-height: 100dvh !important;
  }
  body.public-site:not(.admin-page) .site-visual-layer.world {
    background-image: url('../img/backgrounds/grit-background-mobile-20260928.png') !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

/* GRIT MOBILE SCROLL V3 */
@media (max-width: 700px) and (orientation: portrait) {
  html:has(body.public-site.home-page) {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.public-site.home-page:not(.admin-page) {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body.public-site.home-page #grit-page-content {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.public-site.home-page .site-visual-layer.world {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  body.public-site.home-page .hero.hero--background-title {
    height: 350px !important;
    min-height: 350px !important;
    padding: 0 !important;
  }

  body.public-site.home-page > main > .content-shell,
  body.public-site.home-page .desktop-dashboard-layout,
  body.public-site.home-page .desktop-dashboard-main,
  body.public-site.home-page .desktop-dashboard-side {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  body.public-site.home-page .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  body.public-site.home-page .glass,
  body.public-site.home-page .panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.public-site.home-page .player-card {
    opacity: 1 !important;
  }

  body.public-site.home-page .player-art img {
    filter: saturate(1) brightness(1.12) !important;
  }
}

/* GRIT MOBILE FUNKEN AUS V4 */
@media (max-width: 700px) {
  body.public-site:not(.admin-page) .embers,
  body.public-site:not(.admin-page) .ember {
    display: none !important;
    animation: none !important;
  }
}

/* GRIT MOBILE ROSTER STATIC V5 */
@media (max-width: 700px) {
  body.public-site.home-page .roster-marquee {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  body.public-site.home-page .roster-marquee .roster-grid.is-marquee,
  body.public-site.home-page #customGameSections .custom-game-roster.is-marquee {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  body.public-site.home-page .player-card.player-card--twitch-live {
    animation: none !important;
  }
}

/* GRIT MOBILE BACKGROUND V6 */
@media (max-width: 700px) and (orientation: portrait) {
  body.public-site.home-page .site-visual-layer.world {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    background-size: cover !important;
    background-position: center top !important;
  }
}

/* GRIT MOBILE NEWS WIDTH V7 */
@media (max-width: 700px) {
  body.public-site.home-page .desktop-dashboard-layout,
  body.public-site.home-page .desktop-dashboard-side,
  body.public-site.home-page #news,
  body.public-site.home-page #news .news-feed,
  body.public-site.home-page #news .news-item {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.public-site.home-page #news .news-feed {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.public-site.home-page #news .news-content-row.has-image {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body.public-site.home-page #news .news-copy {
    min-width: 0 !important;
    width: 100% !important;
  }

  body.public-site.home-page #news .news-copy h3,
  body.public-site.home-page #news .news-copy p {
    max-width: 100% !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

/* GRIT MOBILE MENU V8 */
@media (max-width: 900px) {
  body.public-site:not(.admin-page) .topbar #mainNav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 64px) !important;
    margin: 0 !important;
    padding: 10px 18px 18px !important;
    box-sizing: border-box !important;
    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: #08090b !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 20px 45px rgba(0,0,0,.65) !important;
  }

  body.public-site:not(.admin-page) .topbar #mainNav:not(.open) {
    display: none !important;
  }

  body.public-site:not(.admin-page) .topbar #mainNav.open {
    display: flex !important;
  }

  body.public-site:not(.admin-page) .topbar #mainNav > a,
  body.public-site:not(.admin-page) .topbar #mainNav > .teams-nav {
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.public-site:not(.admin-page) .topbar #mainNav > a,
  body.public-site:not(.admin-page) .topbar #mainNav .teams-nav__trigger {
    display: block !important;
    padding: 14px 12px !important;
  }
}

/* GRIT MOBILE TEAMS V9 */
@media (max-width: 700px) {
  html:has(body.public-site .teams-page-main) {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.public-site:has(.teams-page-main):not(.admin-page) {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body.public-site:not(.admin-page) main.teams-page-main {
    height: auto !important;
    max-height: none !important;
    padding-top: 170px !important;
    overflow: visible !important;
  }

  body.public-site:not(.admin-page) main.teams-page-main .teams-page-shell,
  body.public-site:not(.admin-page) main.teams-page-main .teams-page-stack {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.public-site:not(.admin-page) main.teams-page-main
  .teams-page-stack > .teams-page-team-panel .teams-page-roster {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  body.public-site:not(.admin-page) main.teams-page-main
  .teams-page-stack > .teams-page-team-panel .teams-page-player-grid {
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: 12px !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    transform: none !important;
    animation: none !important;
  }

  body.public-site:not(.admin-page) main.teams-page-main
  .teams-page-stack > .teams-page-team-panel .teams-page-player-card {
    flex: 0 0 175px !important;
    width: 175px !important;
    min-width: 175px !important;
    max-width: 175px !important;
  }
}

/* GRIT MOBILE TEAMS BACKGROUND V10 */
@media (max-width: 700px) and (orientation: portrait) {
  body.public-site:has(.teams-page-main):not(.admin-page)
  .site-visual-layer.world {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    background-size: cover !important;
    background-position: center top !important;
  }
}

/* GRIT MOBILE WINDOWS HIGHER V11 */
@media (max-width: 700px) and (orientation: portrait) {
  body.public-site.home-page:not(.admin-page)
  .hero.hero--background-title {
    height: 325px !important;
    min-height: 325px !important;
  }

  body.public-site:not(.admin-page)
  main.teams-page-main {
    padding-top: 155px !important;
  }

  body.public-site:not(.admin-page)
  main.news-page-main,
  body.public-site:not(.admin-page)
  main.matches-page-main,
  body.public-site:not(.admin-page)
  main.media-page-main,
  body.public-site:not(.admin-page)
  main.polls-page-main {
    padding-top: 250px !important;
  }

  body.public-site:not(.admin-page):not(.home-page):not(.auth-page):
  not(.account-settings-page):not(.player-profile-page):
  not(.legal-page):not(.contact-page)
  #grit-page-content > main:not(.my-profiles-main):has(> .content-shell)::before {
    height: 110px !important;
    min-height: 110px !important;
  }
}

/* GRIT MOBILE PLAYER PROFILE V12 */
@media (max-width: 700px) and (orientation: portrait) {
  html:has(body.public-site.player-profile-page) {
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.public-site.player-profile-page:not(.admin-page) {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body.public-site.player-profile-page:not(.admin-page)
  .site-visual-layer.world {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  body.public-site.player-profile-page:not(.admin-page)
  main.public-player-profile-main {
    height: auto !important;
    max-height: none !important;
    padding-top: 240px !important;
    padding-bottom: 48px !important;
    overflow: visible !important;
  }

  body.public-site.player-profile-page:not(.admin-page)
  .public-player-profile-shell,
  body.public-site.player-profile-page:not(.admin-page)
  .public-player-profile-card {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.public-site.player-profile-page:not(.admin-page)
  .public-player-profile-hero {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
  }

  body.public-site.player-profile-page:not(.admin-page)
  .public-player-profile-avatar {
    width: 112px !important;
    height: 130px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  body.public-site.player-profile-page:not(.admin-page)
  .public-player-profile-title {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body.public-site.player-profile-page:not(.admin-page)
  .public-player-profile-title h1 {
    font-size: clamp(21px, 6vw, 28px) !important;
  }

  body.public-site.player-profile-page:not(.admin-page)
  .public-player-profile-socials {
    grid-column: 1 / -1 !important;
  }
}

/* GRIT MOBILE PROFILE WINDOW V13 */
@media (max-width: 700px) and (orientation: portrait) {
  body.public-site.player-profile-page.long-document-page:not(.admin-page):not(.auth-page)
  #grit-page-content > main.public-player-profile-main,
  body.public-site.player-profile-page.long-document-page:not(.admin-page):not(.auth-page)
  .public-player-profile-shell,
  body.public-site.player-profile-page.long-document-page:not(.admin-page):not(.auth-page)
  .public-player-profile-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.public-site.player-profile-page.long-document-page:not(.admin-page):not(.auth-page)
  .public-player-profile-card {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
}

/* GRIT MOBILE FACEIT WIDTH V14 */
@media (max-width: 700px) {
  body.public-site.player-profile-page:not(.admin-page)
  .public-player-profile-shell,
  body.public-site.player-profile-page:not(.admin-page)
  .public-player-profile-card,
  body.public-site.player-profile-page:not(.admin-page)
  .public-player-profile-stats,
  body.public-site.player-profile-page:not(.admin-page)
  .faceit-profile-dashboard,
  body.public-site.player-profile-page:not(.admin-page)
  .faceit-profile-dashboard section {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.public-site.player-profile-page:not(.admin-page)
  .faceit-summary-panel,
  body.public-site.player-profile-page:not(.admin-page)
  .faceit-performance-layout,
  body.public-site.player-profile-page:not(.admin-page)
  .faceit-details-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.public-site.player-profile-page:not(.admin-page)
  .faceit-summary-totals {
    grid-column: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.public-site.player-profile-page:not(.admin-page)
  .public-player-profile-section-head {
    flex-wrap: wrap !important;
  }

  body.public-site.player-profile-page:not(.admin-page)
  .faceit-match-table-wrap {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}


/* GRIT MOBILE CONTENT PAGES V15 */
@media (max-width: 700px) {
  html:has(body.public-site #grit-page-content > main:is(
    .news-page-main, .servers-page-main, .matches-page-main,
    .media-page-main, .recruiting-main
  )) {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.public-site:not(.admin-page):has(#grit-page-content > main:is(
    .news-page-main, .servers-page-main, .matches-page-main,
    .media-page-main, .recruiting-main
  )) {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    --grit-panel-max: none !important;
    --grit-flow-max: none !important;
  }

  body.public-site:not(.admin-page):has(#grit-page-content > main:is(
    .news-page-main, .servers-page-main, .matches-page-main,
    .media-page-main, .recruiting-main
  )) #grit-page-content {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.public-site:not(.admin-page):has(#grit-page-content > main:is(
    .news-page-main, .servers-page-main, .matches-page-main,
    .media-page-main, .recruiting-main
  )) .site-visual-layer.world {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  body.public-site:not(.admin-page) #grit-page-content > main:is(
    .news-page-main, .servers-page-main, .matches-page-main,
    .media-page-main, .recruiting-main
  ) {
    box-sizing: border-box !important;
    margin-top: 0 !important;
    padding: 155px 0 80px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.public-site:not(.admin-page) #grit-page-content > main:is(
    .news-page-main, .servers-page-main, .matches-page-main,
    .media-page-main, .recruiting-main
  )::before {
    display: none !important;
    content: none !important;
  }

  body.public-site:not(.admin-page) #grit-page-content > main:is(
    .news-page-main, .servers-page-main, .matches-page-main,
    .media-page-main, .recruiting-main
  ) > .content-shell {
    box-sizing: border-box !important;
    margin-top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.public-site:not(.admin-page) :is(
    .news-page-panel, .servers-page-panel, .matches-page-panel,
    .media-page-panel, .recruiting-panel, .news-page-feed,
    .matches-page-list, .media-grid, .grit-server-list
  ) {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
}


/* GRIT MOBILE NEWS FLOW V16 */
@media (max-width: 700px) {
  /* Den zusätzlichen 150-Pixel-Abstand der allgemeinen Unterseiten entfernen. */
  body.public-site:not(.admin-page):not(.home-page):not(.auth-page):not(.account-settings-page):not(.player-profile-page):not(.legal-page):not(.contact-page)
  #grit-page-content > main.news-page-main:has(> .content-shell)::before {
    content: none !important;
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  body.public-site.news-page #grit-page-content > main.news-page-main {
    margin-top: 0 !important;
    padding: 260px 0 80px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.public-site.news-page #grit-page-content > main.news-page-main > .news-page-shell {
    margin-top: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.public-site.news-page #grit-page-content #news.news-page-panel {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.public-site.news-page #grit-page-content #newsFeed.news-page-feed {
    display: flex !important;
    flex-direction: column !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.public-site.news-page #grit-page-content #newsFeed.news-page-feed > .news-item {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* GRIT MOBILE MATCHES MEDIA SERVER POSITION V17 */
@media (max-width: 700px) {
  body.public-site:not(.admin-page):not(.home-page):not(.auth-page):not(.account-settings-page):not(.player-profile-page):not(.legal-page):not(.contact-page)
  #grit-page-content > main:is(.matches-page-main, .media-page-main):has(> .content-shell)::before {
    content: none !important;
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  body.public-site:not(.admin-page) #grit-page-content > main:is(
    .matches-page-main, .media-page-main
  ) {
    margin-top: 0 !important;
    padding: 340px 0 80px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.public-site:not(.admin-page) #grit-page-content > main:is(
    .matches-page-main, .media-page-main
  ) > .content-shell {
    margin-top: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.public-site:not(.admin-page) #grit-page-content > main:is(
    .matches-page-main, .media-page-main
  ) :is(.matches-page-panel, .media-page-panel, .servers-page-panel) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* GRIT MOBILE SAME WINDOW START V18 */
@media (max-width: 700px) {
  /* Gemeinsame Oberkante für alle genannten Seiten. */
  body.public-site {
    --grit-mobile-window-start: 260px;
  }

  /* Home: Das leere Titel-Element bestimmt den Abstand zum ersten Fenster. */
  body.public-site.home-page #grit-page-content > main > .hero.hero--background-title {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    height: var(--grit-mobile-window-start) !important;
    min-height: var(--grit-mobile-window-start) !important;
    max-height: var(--grit-mobile-window-start) !important;
  }

  body.public-site.home-page #grit-page-content > main > .content-shell {
    margin-top: 0 !important;
  }

  /* Teams hatte zusätzlich den alten 150-Pixel-Platzhalter. */
  body.public-site:not(.admin-page):not(.home-page):not(.auth-page):not(.account-settings-page):not(.player-profile-page):not(.legal-page):not(.contact-page)
  #grit-page-content > main.teams-page-main:has(> .content-shell)::before {
    content: none !important;
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  /* Recruiting bekommt denselben Abstand ohne zusätzlichen Platzhalter. */
  body.public-site:not(.admin-page):not(.home-page):not(.auth-page):not(.account-settings-page):not(.player-profile-page):not(.legal-page):not(.contact-page)
  #grit-page-content > main.recruiting-main:has(> .content-shell)::before {
    content: none !important;
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  body.public-site:not(.admin-page) #grit-page-content > main:is(
    .teams-page-main, .news-page-main, .matches-page-main,
    .media-page-main, .recruiting-main
  ) {
    box-sizing: border-box !important;
    margin-top: 0 !important;
    padding: var(--grit-mobile-window-start) 0 80px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.public-site:not(.admin-page) #grit-page-content > main:is(
    .teams-page-main, .news-page-main, .matches-page-main,
    .media-page-main, .recruiting-main
  ) > .content-shell {
    margin-top: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
}