/* Mobile scroll safety net
   Keeps the game compact, but prevents content from being trapped off-screen on phones. */

@media (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html,
  body {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
  }

  body[data-qse-route]:not([data-qse-route="/room"]):not([data-qse-route="/rooms"]) {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-qse-route]:not([data-qse-route="/room"]):not([data-qse-route="/rooms"]) .min-h-screen.overflow-hidden,
  body[data-qse-route]:not([data-qse-route="/room"]):not([data-qse-route="/rooms"]) .relative.min-h-screen {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Login/setup card on route /. Keeps the real home layout intact, but never traps the nickname/Google fields. */
  body[data-qse-route="/"]:not(:has(.home-lobby-section)),
  body[data-qse-route="/"]:has(input[placeholder*="APELIDO"]),
  body[data-qse-route="/"]:has(input[placeholder*="apelido"]),
  body[data-qse-route="/"]:has(input[placeholder*="email"]),
  body[data-qse-route="/"]:has(input[placeholder*="Email"]) {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-qse-route="/"]:not(:has(.home-lobby-section)) > div,
  body[data-qse-route="/"]:has(input[placeholder*="APELIDO"]) > div,
  body[data-qse-route="/"]:has(input[placeholder*="apelido"]) > div,
  body[data-qse-route="/"]:has(input[placeholder*="email"]) > div,
  body[data-qse-route="/"]:has(input[placeholder*="Email"]) > div {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body[data-qse-route="/"]:not(:has(.home-lobby-section)) .home-lobby-main,
  body[data-qse-route="/"]:has(input[placeholder*="APELIDO"]) .home-lobby-main,
  body[data-qse-route="/"]:has(input[placeholder*="apelido"]) .home-lobby-main,
  body[data-qse-route="/"]:has(input[placeholder*="email"]) .home-lobby-main,
  body[data-qse-route="/"]:has(input[placeholder*="Email"]) .home-lobby-main {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-top: max(1rem, env(safe-area-inset-top)) !important;
    padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-qse-route="/"]:not(:has(.home-lobby-section)) .home-lobby-main > *,
  body[data-qse-route="/"]:has(input[placeholder*="APELIDO"]) .home-lobby-main > *,
  body[data-qse-route="/"]:has(input[placeholder*="apelido"]) .home-lobby-main > *,
  body[data-qse-route="/"]:has(input[placeholder*="email"]) .home-lobby-main > *,
  body[data-qse-route="/"]:has(input[placeholder*="Email"]) .home-lobby-main > * {
    flex-shrink: 0 !important;
  }

  body[data-qse-route] main,
  body[data-qse-route] section,
  body[data-qse-route] .space-y-3,
  body[data-qse-route] .grid {
    scrollbar-width: thin;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 640px) and (orientation: portrait) {
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    scroll-padding-top: calc(4.75rem + env(safe-area-inset-top)) !important;
  }

  body[data-qse-route="/"],
  body[data-qse-route="/lobby"],
  body[data-qse-route="/avatar-store"],
  body[data-qse-route="/decks"],
  body[data-qse-route="/friends"],
  body[data-qse-route="/profile"] {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body[data-qse-route="/"] > .relative.min-h-screen,
  body[data-qse-route="/lobby"] > .min-h-screen,
  body[data-qse-route="/avatar-store"] > .relative.min-h-screen,
  body[data-qse-route="/decks"] > .min-h-screen,
  body[data-qse-route="/friends"] > main.min-h-screen,
  body[data-qse-route="/profile"] > .min-h-screen {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body[data-qse-route="/"] .home-lobby-main,
  body[data-qse-route="/lobby"] main,
  body[data-qse-route="/avatar-store"] main,
  body[data-qse-route="/decks"] main,
  body[data-qse-route="/friends"] main > .relative.z-10,
  body[data-qse-route="/profile"] main {
    width: 100% !important;
    max-width: min(100%, 44rem) !important;
    min-height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-top: calc(5rem + env(safe-area-inset-top)) !important;
    padding-bottom: calc(6rem + env(safe-area-inset-bottom)) !important;
  }

  body[data-qse-route="/"] .home-lobby-main {
    align-items: flex-start !important;
    justify-content: center !important;
  }

  body[data-qse-route="/"] .home-lobby-section,
  body[data-qse-route="/lobby"] main > section,
  body[data-qse-route="/avatar-store"] main > .grid,
  body[data-qse-route="/decks"] main > section,
  body[data-qse-route="/friends"] main > .relative.z-10 > section,
  body[data-qse-route="/friends"] main > .relative.z-10 > div,
  body[data-qse-route="/profile"] main > .grid {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body[data-qse-route="/lobby"] main > section:last-child,
  body[data-qse-route="/avatar-store"] main > .grid > section,
  body[data-qse-route="/avatar-store"] main > .grid > aside,
  body[data-qse-route="/decks"] main > section,
  body[data-qse-route="/friends"] section,
  body[data-qse-route="/profile"] main > .grid > section {
    border-radius: 1.35rem !important;
    border-width: 3px !important;
  }

  body[data-qse-route="/lobby"] h1,
  body[data-qse-route="/avatar-store"] h1,
  body[data-qse-route="/decks"] h1,
  body[data-qse-route="/friends"] h1,
  body[data-qse-route="/profile"] h1 {
    font-size: clamp(2rem, 12vw, 3.1rem) !important;
    line-height: .95 !important;
    overflow-wrap: anywhere !important;
  }

  body[data-qse-route="/lobby"] .min-h-\[430px\] {
    min-height: 18rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
  }

  body[data-qse-route="/avatar-store"] main > .grid > aside {
    position: static !important;
  }

  body[data-qse-route="/avatar-store"] video {
    max-width: 100% !important;
  }

  body[data-qse-route="/decks"] main > section > div.grid:last-child,
  body[data-qse-route="/friends"] .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-qse-route="/profile"] main > .grid,
  body[data-qse-route="/profile"] main > .grid > section {
    height: auto !important;
    max-height: none !important;
  }

  body[data-qse-route="/profile"] .max-h-\[62vh\] {
    max-height: none !important;
  }
}

/* Never show emoji as profile photo fallback. PNG avatar appears normally when equipped. */
nav span[aria-hidden="true"] {
  font-size: 0 !important;
}

nav span[aria-hidden="true"] img {
  font-size: initial !important;
}

nav span[aria-hidden="true"]:not(:has(img))::before {
  content: '';
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: .45rem;
  background: linear-gradient(135deg, #c7d2fe, #67e8f9);
  box-shadow: inset 0 0 0 2px rgba(49, 46, 129, .3);
}

@media (hover: none) and (pointer: coarse) and (max-width: 1024px) and (orientation: landscape) {
  body[data-qse-route="/rooms"] .gameplay-shell,
  body[data-qse-route="/room"] .gameplay-shell {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-qse-route="/rooms"] .gameplay-board,
  body[data-qse-route="/room"] .gameplay-board {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-qse-route="/rooms"] .gameplay-card-grid,
  body[data-qse-route="/room"] .gameplay-card-grid {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: .55rem !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  body[data-qse-route="/rooms"] .gameplay-player-list,
  body[data-qse-route="/room"] .gameplay-player-list {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: .16rem !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  body[data-qse-route="/rooms"] .party-grid-bg > .relative.z-10,
  body[data-qse-route="/room"] .party-grid-bg > .relative.z-10 {
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-qse-route="/rooms"] .party-grid-bg .grid,
  body[data-qse-route="/room"] .party-grid-bg .grid {
    min-height: 0 !important;
  }

  body[data-qse-route="/rooms"] [class*="grid-cols"],
  body[data-qse-route="/room"] [class*="grid-cols"] {
    min-height: 0 !important;
    scrollbar-width: thin;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 640px) and (orientation: portrait) {
  body[data-qse-route="/rooms"],
  body[data-qse-route="/room"] {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-qse-route="/rooms"] .gameplay-screen,
  body[data-qse-route="/room"] .gameplay-screen,
  body[data-qse-route="/rooms"] .gameplay-shell,
  body[data-qse-route="/room"] .gameplay-shell {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-qse-route="/rooms"] .gameplay-board,
  body[data-qse-route="/room"] .gameplay-board,
  body[data-qse-route="/rooms"] .gameplay-card-grid,
  body[data-qse-route="/room"] .gameplay-card-grid {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-qse-route="/rooms"] .party-grid-bg > .relative.z-10,
  body[data-qse-route="/room"] .party-grid-bg > .relative.z-10 {
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}