/*
  Hotfix for the legacy satsort.com index.html home screen.

  Add this after the existing inline styles, or host it as:

    /var/www/satsort/legacy-home-hotfix.css

  then add this before </head> in /var/www/satsort/index.html:

    <link rel="stylesheet" href="/legacy-home-hotfix.css">
*/

html,
html:has(body.is-browser),
html.is-browser-frame {
  background: #15042e !important;
  overflow: hidden !important;
}

body.is-browser {
  width: min(100dvw, 460px) !important;
  max-width: 460px !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  position: fixed !important;
  left: 50% !important;
  top: 0 !important;
  transform: translateX(-50%) translateZ(0) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

html.is-browser-frame::before {
  display: none !important;
}

#startScreen {
  width: 100% !important;
  height: 100dvh !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
  overflow-y: auto !important;
  justify-content: flex-start !important;
  gap: clamp(10px, 2vh, 18px) !important;
  padding: 16px clamp(14px, 4vw, 28px)
    max(env(safe-area-inset-bottom, 18px), 18px) !important;
  scrollbar-width: none;
}

body.is-browser #startScreen,
body.is-browser #levelSelectScreen,
body.is-browser .screen,
body.is-browser #app,
body.is-browser #hardcore-screen {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

#startScreen::-webkit-scrollbar {
  display: none;
}

.start-hero {
  flex: 0 0 auto !important;
  gap: clamp(7px, 1.4vh, 12px) !important;
  padding-top: clamp(64px, 9vh, 92px) !important;
  margin-bottom: clamp(8px, 1.6vh, 16px) !important;
}

#startStatsStrip {
  max-width: min(100%, 760px) !important;
  margin-bottom: 0 !important;
}

.stats-tiles-row {
  flex-wrap: nowrap !important;
}

.stats-tile {
  min-width: 0 !important;
}

.stats-tile-label,
.stats-tile-value,
.lvl-label,
.lvl-xp {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.start-actions {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  padding-bottom: max(env(safe-area-inset-bottom, 18px), 18px) !important;
}

#startStatsStrip .lvl-pill,
.lvl-pill {
  margin-top: clamp(8px, 1.5vh, 14px) !important;
  margin-bottom: 0 !important;
}

@media (max-height: 760px) {
  #startScreen {
    gap: 10px !important;
    padding-top: 14px !important;
  }

  .start-hero {
    padding-top: 58px !important;
  }

  .start-title-line1,
  .start-title-line2 {
    font-size: clamp(34px, 8vh, 48px) !important;
  }

  #startStatsStrip .lvl-pill,
  .lvl-pill {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 460px) {
  .stats-tiles-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .stats-tile {
    max-width: none !important;
    padding: 8px 10px !important;
  }
}