/*
Tuin Face Pong
File: css/06-mobile.css

Mobile gameplay, mobile menu, mobile background shop, and device-specific background shop visibility.
Loaded after style.css.
*/

/* Mobile gameplay, menu, and run-menu layout */
@media (max-width: 700px) {
  html,
  body {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #pageBackground {
    background: var(--tuin-bg-mobile);
  }

  #pageShade {
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,0.20) 0%,
        rgba(0,0,0,0.08) 18%,
        rgba(0,0,0,0.46) 50%,
        rgba(0,0,0,0.08) 82%,
        rgba(0,0,0,0.34) 100%
      );
  }

  #gameWrap {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 54px 1vw 18px !important;
  }

  canvas {
    width: 96vw !important;
    max-width: 96vw !important;
    height: auto !important;
    max-height: 70dvh !important;
    object-fit: contain !important;
    border-width: 4px !important;
    background: rgba(0,0,0,0.34);
  }

  #hud {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 9000 !important;
    max-width: calc(100vw - 100px) !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    padding: 6px 7px !important;
    border-radius: 9px !important;
    opacity: 0.92;
  }

  #topbar {
    display: block !important;
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    z-index: 9100 !important;
    pointer-events: auto !important;
  }

  #topbar button {
    display: none !important;
  }

  #topbar #pauseBtn,
  button#pauseBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 99999 !important;
    width: auto !important;
    min-width: 76px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: #00d9ff !important;
    color: #001015 !important;
    font-size: 0 !important;
    pointer-events: auto !important;
    box-shadow:
      0 0 24px rgba(0,217,255,0.72),
      0 0 12px rgba(255,204,0,0.26) !important;
  }

  #topbar #pauseBtn::before,
  button#pauseBtn::before {
    content: "MENU" !important;
    display: block !important;
    color: #001015 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
  }

  #topbar #pauseBtn::after,
  button#pauseBtn::after {
    content: "" !important;
    display: none !important;
  }

  #help,
  #fireBtn,
  body.touch-mode #fireBtn,
  #mobileFloatingMenuBtn {
    display: none !important;
  }

  /* Hide the blue gameplay MENU button only when a menu overlay is explicitly open.
     Do NOT use :not([style*="display: none"]) here, because hidden overlays can have no inline style
     and would accidentally hide the gameplay MENU button during a normal run. */
  body:has(#startSplashOverlay[style*="display: block"]) #topbar,
  body:has(#startSplashOverlay[style*="display: flex"]) #topbar,
  body:has(#welcomeOverlay[style*="display: block"]) #topbar,
  body:has(#welcomeOverlay[style*="display: flex"]) #topbar,
  body:has(#shopOverlay[style*="display: block"]) #topbar,
  body:has(#shopOverlay[style*="display: flex"]) #topbar,
  body:has(#selectOverlay[style*="display: block"]) #topbar,
  body:has(#selectOverlay[style*="display: flex"]) #topbar,
  body:has(#patchNotesOverlay[style*="display: block"]) #topbar,
  body:has(#patchNotesOverlay[style*="display: flex"]) #topbar,
  body:has(#helpOverlay[style*="display: block"]) #topbar,
  body:has(#helpOverlay[style*="display: flex"]) #topbar,
  body:has(#prestigeOverlay[style*="display: block"]) #topbar,
  body:has(#prestigeOverlay[style*="display: flex"]) #topbar,
  body:has(#missionsOverlay[style*="display: block"]) #topbar,
  body:has(#missionsOverlay[style*="display: flex"]) #topbar,
  body:has(#relicsOverlay[style*="display: block"]) #topbar,
  body:has(#relicsOverlay[style*="display: flex"]) #topbar,
  body:has(#challengesOverlay[style*="display: block"]) #topbar,
  body:has(#challengesOverlay[style*="display: flex"]) #topbar,
  body:has(#codexOverlay[style*="display: block"]) #topbar,
  body:has(#codexOverlay[style*="display: flex"]) #topbar,
  body:has(#backupOverlay[style*="display: block"]) #topbar,
  body:has(#backupOverlay[style*="display: flex"]) #topbar,
  body:has(#restoreOverlay[style*="display: block"]) #topbar,
  body:has(#restoreOverlay[style*="display: flex"]) #topbar,
  body:has(#redeemOverlay[style*="display: block"]) #topbar,
  body:has(#redeemOverlay[style*="display: flex"]) #topbar,
  body:has(#leaderboardOverlay[style*="display: block"]) #topbar,
  body:has(#leaderboardOverlay[style*="display: flex"]) #topbar,
  body:has(#dailyGiftOverlay[style*="display: block"]) #topbar,
  body:has(#dailyGiftOverlay[style*="display: flex"]) #topbar,
  body:has(#trophyRoomOverlay[style*="display: block"]) #topbar,
  body:has(#trophyRoomOverlay[style*="display: flex"]) #topbar,
  body:has(#runSummaryOverlay[style*="display: block"]) #topbar,
  body:has(#runSummaryOverlay[style*="display: flex"]) #topbar,
  body:has(#difficultySelectOverlay[style*="display: block"]) #topbar,
  body:has(#difficultySelectOverlay[style*="display: flex"]) #topbar,
  body:has(#nicknamePromptOverlay[style*="display: block"]) #topbar,
  body:has(#nicknamePromptOverlay[style*="display: flex"]) #topbar,
  body:has(#presentOpenOverlay[style*="display: block"]) #topbar,
  body:has(#presentOpenOverlay[style*="display: flex"]) #topbar,
  body:has(#skinInspectOverlay[style*="display: block"]) #topbar,
  body:has(#skinInspectOverlay[style*="display: flex"]) #topbar,
  body:has(#loadoutRestartOverlay[style*="display: block"]) #topbar,
  body:has(#loadoutRestartOverlay[style*="display: flex"]) #topbar,
  body:has(#mobileRunMenuOverlay[style*="display: block"]) #topbar,
  body:has(#mobileRunMenuOverlay[style*="display: flex"]) #topbar,
  body:has(#startSplashOverlay[style*="display: block"]) #pauseBtn,
  body:has(#startSplashOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#welcomeOverlay[style*="display: block"]) #pauseBtn,
  body:has(#welcomeOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#shopOverlay[style*="display: block"]) #pauseBtn,
  body:has(#shopOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#selectOverlay[style*="display: block"]) #pauseBtn,
  body:has(#selectOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#patchNotesOverlay[style*="display: block"]) #pauseBtn,
  body:has(#patchNotesOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#helpOverlay[style*="display: block"]) #pauseBtn,
  body:has(#helpOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#prestigeOverlay[style*="display: block"]) #pauseBtn,
  body:has(#prestigeOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#missionsOverlay[style*="display: block"]) #pauseBtn,
  body:has(#missionsOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#relicsOverlay[style*="display: block"]) #pauseBtn,
  body:has(#relicsOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#challengesOverlay[style*="display: block"]) #pauseBtn,
  body:has(#challengesOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#codexOverlay[style*="display: block"]) #pauseBtn,
  body:has(#codexOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#backupOverlay[style*="display: block"]) #pauseBtn,
  body:has(#backupOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#restoreOverlay[style*="display: block"]) #pauseBtn,
  body:has(#restoreOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#redeemOverlay[style*="display: block"]) #pauseBtn,
  body:has(#redeemOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#leaderboardOverlay[style*="display: block"]) #pauseBtn,
  body:has(#leaderboardOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#dailyGiftOverlay[style*="display: block"]) #pauseBtn,
  body:has(#dailyGiftOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#trophyRoomOverlay[style*="display: block"]) #pauseBtn,
  body:has(#trophyRoomOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#runSummaryOverlay[style*="display: block"]) #pauseBtn,
  body:has(#runSummaryOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#difficultySelectOverlay[style*="display: block"]) #pauseBtn,
  body:has(#difficultySelectOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#nicknamePromptOverlay[style*="display: block"]) #pauseBtn,
  body:has(#nicknamePromptOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#presentOpenOverlay[style*="display: block"]) #pauseBtn,
  body:has(#presentOpenOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#skinInspectOverlay[style*="display: block"]) #pauseBtn,
  body:has(#skinInspectOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#loadoutRestartOverlay[style*="display: block"]) #pauseBtn,
  body:has(#loadoutRestartOverlay[style*="display: flex"]) #pauseBtn,
  body:has(#mobileRunMenuOverlay[style*="display: block"]) #pauseBtn,
  body:has(#mobileRunMenuOverlay[style*="display: flex"]) #pauseBtn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #welcomePanel {
    width: 94vw !important;
    max-height: 96vh !important;
    min-height: 0 !important;
    padding: 10px !important;
    border-radius: 20px !important;
    justify-content: flex-start !important;
  }

  #welcomeImage {
    max-height: 96px !important;
    margin-bottom: 6px !important;
  }

  #welcomeText {
    display: none !important;
  }

  #welcomeLoadout {
    width: min(350px, 90vw) !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
    margin-bottom: 8px !important;
    border-radius: 14px !important;
  }

  #welcomeHeadPreviewWrap {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
  }

  #welcomeHeadPreview {
    width: 42px !important;
    height: 42px !important;
  }

  #welcomeLoadoutText .loadoutTitleGlow,
  #welcomeLoadoutText strong.loadoutTitleGlow {
    font-size: 12px !important;
    margin-bottom: 5px !important;
  }

  .loadoutChipGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .loadoutChip {
    min-height: 30px !important;
    padding: 4px 6px !important;
    border-radius: 9px !important;
  }

  .loadoutChip_player {
    grid-column: 1 / -1 !important;
  }

  .loadoutChip b {
    font-size: 7px !important;
    margin-bottom: 2px !important;
  }

  .loadoutChip span {
    font-size: 10px !important;
  }

  #welcomeButtons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(350px, 90vw) !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }

  #welcomeButtons button {
    min-height: 38px !important;
    padding: 8px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
  }

  #welcomePlayBtn {
    grid-column: 1 / -1 !important;
    min-height: 42px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
  }

  #welcomeButtons button:last-child:nth-child(odd) {
    grid-column: auto !important;
    width: auto !important;
  }

  #selectPanel,
  #shopPanel,
  #patchNotesPanel,
  #helpPanel,
  #prestigePanel,
  #missionsPanel,
  #relicsPanel,
  #challengesPanel,
  #codexPanel,
  #skinInspectPanel,
  #difficultySelectPanel,
  #nicknamePromptPanel,
  #runSummaryPanel,
  #backupPanel,
  #restorePanel,
  #redeemPanel,
  #leaderboardPanel,
  #dailyGiftPanel {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 14px !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #shopOverlay,
  #selectOverlay,
  #patchNotesOverlay,
  #helpOverlay,
  #prestigeOverlay,
  #missionsOverlay,
  #relicsOverlay,
  #challengesOverlay,
  #codexOverlay,
  #backupOverlay,
  #restoreOverlay,
  #redeemOverlay,
  #leaderboardOverlay,
  #dailyGiftOverlay {
    overflow-x: hidden !important;
  }

  #shopPanel {
    padding-top: 12px !important;
  }

  #shopPanel h1,
  #shopPanel .panelTitle,
  #shopPanel > h1:first-child {
    font-size: 28px !important;
    line-height: 1.05 !important;
    margin: 0 0 10px !important;
  }

  /* Keep only general mobile menu/panel fixes here.
     Market card grids, pagers, Presents, Paddles and Prestige layouts now live in
     css/04-market-shop.css plus the final Market safety block in index.php. */
  #marketTabs,
  .marketTabs,
  #shopTabs,
  .shopTabs {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .marketTab,
  .shopTab,
  #marketTabs button,
  #shopTabs button {
    flex: 1 1 calc(33.333% - 8px) !important;
    min-width: 92px !important;
    max-width: 138px !important;
    min-height: 42px !important;
    padding: 9px 8px !important;
    font-size: 11px !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

@media (max-width: 430px) {
  .marketTab,
  .shopTab,
  #marketTabs button,
  #shopTabs button {
    flex: 1 1 calc(50% - 8px) !important;
    max-width: none !important;
  }
}

@media (max-width: 420px), (max-height: 740px) {
  #welcomeImage {
    display: none !important;
  }

  #welcomeLoadout {
    width: min(340px, 90vw) !important;
  }

  .loadoutChip_background,
  .loadoutChip_relic,
  .loadoutChip_challenge {
    display: none !important;
  }

  #welcomeButtons button {
    min-height: 34px !important;
    padding: 7px !important;
    font-size: 11px !important;
  }

  #welcomePlayBtn {
    min-height: 40px !important;
    font-size: 15px !important;
  }
}

@media (max-height: 700px) and (max-width: 700px) {
  #gameWrap {
    padding-top: 48px !important;
    padding-bottom: 8px !important;
  }

  canvas {
    max-height: 72dvh !important;
  }

  #pauseBtn {
    min-width: 68px !important;
    min-height: 32px !important;
    padding: 6px 9px !important;
  }
}

/* Phone landscape safety layout.
   This prevents the phone from becoming a desktop/tablet hybrid when rotated. */
@media (max-height: 820px) and (orientation: landscape) and (pointer: coarse) {
  html,
  body {
    overflow: hidden !important;
  }

  #gameWrap {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 38px 10px 52px !important;
  }

  canvas,
  #game {
    width: auto !important;
    max-width: 82vw !important;
    height: auto !important;
    max-height: calc(100dvh - 98px) !important;
    object-fit: contain !important;
    border-width: 3px !important;
  }

  #hud {
    top: 6px !important;
    left: 8px !important;
    max-width: 250px !important;
    font-size: 9px !important;
    line-height: 1.12 !important;
    padding: 5px 6px !important;
    z-index: 9000 !important;
  }

  #topbar {
    display: block !important;
    position: fixed !important;
    top: 6px !important;
    right: 8px !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    z-index: 9100 !important;
    pointer-events: auto !important;
  }

  #topbar button {
    display: none !important;
  }

  #topbar #pauseBtn,
  button#pauseBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 6px !important;
    right: 8px !important;
    min-width: 66px !important;
    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 6px 9px !important;
    border-radius: 10px !important;
    font-size: 0 !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
  }

  #topbar #pauseBtn::before,
  button#pauseBtn::before {
    content: "MENU" !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  #help,
  #fireBtn,
  body.touch-mode #fireBtn,
  #mobileFloatingMenuBtn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Phone landscape has very little vertical room.
     Hide the sidekick here so it does not cover the arena. */
  #sidekickTipBox,
  #sidekickTipBox.active,
  #sidekickPortraitFrame,
  #sidekickPortrait,
  #sidekickSpeechBox,
  #sidekickSpeechName,
  #sidekickSpeechText {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body #sidekickTipBox,
  body #sidekickTipBox.active {
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }
}

#mobileRunMenuOverlay {
  z-index: 360;
  background:
    radial-gradient(circle at center, rgba(0,217,255,0.18), rgba(255,204,0,0.10) 36%, rgba(0,0,0,0.88) 100%);
  align-items: center;
  justify-content: center;
}

#mobileRunMenuPanel {
  width: min(420px, 90vw);
  padding: 22px;
  border-radius: 22px;
  text-align: center;
  background:
    radial-gradient(circle at top, rgba(0,217,255,0.14), transparent 42%),
    rgba(5,5,5,0.92);
  border: 3px solid #ffcc00;
  box-shadow:
    0 0 34px rgba(255,204,0,0.46),
    0 0 24px rgba(0,217,255,0.24),
    inset 0 0 24px rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  animation: restartWarningPop 0.16s ease-out both;
}

#mobileRunMenuPanel h1 {
  margin: 0 0 8px;
  color: #ffcc00;
  font-size: 34px;
  text-shadow: 0 0 14px rgba(255,204,0,0.72);
}

#mobileRunMenuPanel p {
  margin: 0 0 16px;
  color: #9ff4ff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

#mobileRunMenuButtons {
  display: grid;
  gap: 10px;
}

#mobileRunMenuButtons button {
  width: 100%;
  min-height: 44px;
  font-size: 16px;
  border-radius: 12px;
}

#mobileRunResumeBtn {
  background: #00d9ff;
  color: #001015;
  box-shadow: 0 0 20px rgba(0,217,255,0.46);
}

#mobileRunRestartBtn {
  background: #ffcc00;
  color: #160b00;
}

#mobileRunMainMenuBtn {
  background: #ff3b58;
  color: #fff;
  box-shadow: 0 0 18px rgba(255,59,88,0.42);
}

/* Mobile Background Shop styling */
#mobileBackgroundGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 14px;
  margin-bottom: 12px;
}

.mobileBackgroundItem {
  position: relative;
  min-height: 222px;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(0,217,255,0.13), rgba(255,204,0,0.06), rgba(0,0,0,0.44));
  border: 2px solid rgba(0,217,255,0.28);
}

.mobileBackgroundItem:hover {
  border-color: #00d9ff;
  box-shadow:
    0 0 20px rgba(0,217,255,0.38),
    inset 0 0 16px rgba(255,255,255,0.04);
}

.mobileBackgroundItem.selected {
  border-color: #ffcc00;
  box-shadow:
    0 0 22px rgba(255,204,0,0.42),
    0 0 18px rgba(0,217,255,0.22),
    inset 0 0 16px rgba(255,204,0,0.08);
}

.mobileBackgroundItem img {
  width: 92px;
  height: 142px;
  object-fit: cover;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.18);
  box-shadow:
    0 0 16px rgba(0,217,255,0.18),
    inset 0 0 12px rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.45);
}

.mobileBackgroundItem span {
  font-size: 12px;
  line-height: 1.15;
  min-height: 28px;
}

.mobileBackgroundItem .priceTag {
  font-size: 11px;
  padding: 4px 7px;
}

.mobileBackgroundItem:hover .inspectHintBadge {
  opacity: 1;
  transform: translateY(0);
}

#skinInspectCard.mobileBackgroundInspect {
  grid-template-columns: minmax(260px, 0.75fr) minmax(280px, 1fr) !important;
  width: min(780px, 92vw) !important;
}

#skinInspectCard.mobileBackgroundInspect #skinInspectImageWrap {
  min-height: 430px !important;
  padding: 14px !important;
}

#skinInspectCard.mobileBackgroundInspect #skinInspectImage {
  width: min(255px, 42vw) !important;
  height: min(455px, 72vh) !important;
  aspect-ratio: 9 / 16 !important;
  object-fit: cover !important;
  border-radius: 22px !important;
  border: 2px solid rgba(255,204,0,0.38) !important;
}

#skinInspectCard.mobileBackgroundInspect #skinInspectName {
  color: #ffcc00 !important;
  text-shadow: 0 0 14px rgba(255,204,0,0.60) !important;
}

#skinInspectCard.mobileBackgroundInspect #skinInspectMeta {
  color: #00d9ff !important;
}

@media (max-width: 900px) {
  #mobileBackgroundGrid {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
  }
}

@media (max-width: 620px) {
  .marketTab[data-market-tab="backgrounds"] {
    font-size: 9px;
  }
}

@media (max-width: 700px) {
  #mobileBackgroundGrid {
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
    gap: 10px !important;
  }

  .mobileBackgroundItem {
    min-height: 210px;
    padding: 9px !important;
  }

  .mobileBackgroundItem img {
    width: 86px !important;
    height: 132px !important;
  }

  #skinInspectCard.mobileBackgroundInspect {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  #skinInspectCard.mobileBackgroundInspect #skinInspectImageWrap {
    min-height: 320px !important;
  }

  #skinInspectCard.mobileBackgroundInspect #skinInspectImage {
    width: min(210px, 58vw) !important;
    height: min(374px, 58vh) !important;
  }
}

/* Device-specific background shop visibility */
@media (max-width: 700px) {
  /* Hide normal desktop/wide background shop on mobile. */
  #backgroundGrid {
    display: none !important;
  }

  .shopSubTitle:has(+ p + #backgroundGrid),
  .shopSubTitle:has(+ #backgroundGrid) {
    display: none !important;
  }

  .shopSubTitle:has(+ p + #backgroundGrid) + p {
    display: none !important;
  }
}

@media (min-width: 701px) {
  /* Hide portrait mobile background shop on desktop. */
  #mobileBackgroundGrid {
    display: none !important;
  }

  .shopSubTitle:has(+ p + #mobileBackgroundGrid),
  .shopSubTitle:has(+ #mobileBackgroundGrid) {
    display: none !important;
  }

  .shopSubTitle:has(+ p + #mobileBackgroundGrid) + p {
    display: none !important;
  }
}