/* TBE Vault responsive fit layer.
   Goal: fit nicely on different screen heights/widths without feeling zoomed. */

body.vault-page-body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Main page spacing adapts to screen height. */
body.vault-page-body .vault-page > .relative.z-10 {
  padding-top: clamp(82px, 9vh, 116px) !important;
  padding-bottom: clamp(14px, 2vh, 28px) !important;
}

/* Vault width adapts: not huge on big screens, not cramped on small ones. */
body.vault-page-body .vault-shell {
  width: min(68rem, calc(100vw - clamp(24px, 8vw, 180px))) !important;
  margin-top: clamp(8px, 1.6vh, 24px) !important;
}

/* Hero/title scales down on shorter screens. */
body.vault-page-body .vault-shell > div:first-child {
  margin-bottom: clamp(8px, 1.4vh, 18px) !important;
}

body.vault-page-body .vault-shell > div:first-child h1 {
  font-size: clamp(2rem, 4.1vw, 3.35rem) !important;
  line-height: 0.95 !important;
  letter-spacing: clamp(4px, 0.7vw, 10px) !important;
}

body.vault-page-body .vault-shell > div:first-child p:first-child {
  font-size: clamp(8px, 0.8vw, 10px) !important;
}

body.vault-page-body .vault-shell > div:first-child p:last-child {
  font-size: clamp(9px, 0.85vw, 11px) !important;
  margin-top: clamp(5px, 0.8vh, 10px) !important;
}

/* Main vault chamber scales softly. */
body.vault-page-body .vault-panel {
  padding: clamp(12px, 1.4vw, 18px) !important;
  border-radius: clamp(16px, 1.6vw, 22px) !important;
}

/* Top title row inside chamber. */
body.vault-page-body .vault-panel > div:first-child {
  margin-bottom: clamp(8px, 1vh, 14px) !important;
  padding-bottom: clamp(8px, 1vh, 14px) !important;
}

body.vault-page-body .vault-panel h2 {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem) !important;
}

body.vault-page-body .vault-panel > div:first-child p:last-child {
  font-size: clamp(10px, 0.9vw, 12px) !important;
}

/* Step boxes adapt instead of staying giant. */
body.vault-page-body .vault-how-strip {
  gap: clamp(6px, 0.8vw, 10px) !important;
  margin-bottom: clamp(6px, 1vh, 10px) !important;
}

body.vault-page-body .vault-how-strip > div {
  min-height: clamp(30px, 4vh, 40px) !important;
  padding: clamp(5px, 0.8vw, 9px) clamp(8px, 1vw, 12px) !important;
}

body.vault-page-body .vault-how-strip p {
  font-size: clamp(10px, 0.9vw, 12px) !important;
}

/* Divider/helper line takes less room on short screens. */
body.vault-page-body .vault-bloodline-divider {
  min-height: clamp(16px, 2vh, 24px) !important;
  margin-top: clamp(4px, 0.8vh, 10px) !important;
  margin-bottom: clamp(6px, 1vh, 12px) !important;
}

body.vault-page-body .vault-simple-help,
body.vault-page-body .vault-bloodline-divider span {
  font-size: clamp(10px, 0.9vw, 12px) !important;
}

/* The important part:
   Dino list uses remaining screen height and scrolls inside the vault. */
body.vault-page-body .vault-dino-list {
  max-height: clamp(300px, calc(100svh - 470px), 700px) !important;
  min-height: 220px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 10px !important;
  padding-bottom: 14px !important;
  scrollbar-gutter: stable !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Dino cards scale gently. */
body.vault-page-body .vault-dino-list > section {
  padding: clamp(12px, 1.2vw, 18px) clamp(13px, 1.4vw, 20px) !important;
  margin-bottom: clamp(12px, 1.6vh, 20px) !important;
  border-radius: clamp(12px, 1.1vw, 16px) !important;
}

body.vault-page-body .vault-dino-list h3,
body.vault-page-body .vault-dino-name {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem) !important;
}

/* Stats row adapts. */
body.vault-page-body .vault-dino-list > section .grid {
  gap: clamp(6px, 0.8vw, 10px) !important;
  margin-top: clamp(6px, 1vh, 10px) !important;
  margin-bottom: clamp(8px, 1.2vh, 14px) !important;
}

body.vault-page-body .vault-dino-list > section .grid > div {
  min-height: clamp(30px, 4vh, 36px) !important;
  padding: clamp(5px, 0.7vw, 8px) clamp(8px, 1vw, 12px) !important;
}

/* Progress less dominant. */
body.vault-page-body .vault-panel .h-2\.5 {
  height: clamp(3px, 0.5vh, 5px) !important;
  margin-bottom: clamp(8px, 1.2vh, 14px) !important;
}

/* Mutations stay readable and wrap. */
body.vault-page-body .vault-dino-list > section span.rounded-full {
  min-height: clamp(28px, 3.8vh, 32px) !important;
  padding: clamp(6px, 0.8vw, 8px) clamp(10px, 1vw, 14px) !important;
  font-size: clamp(11px, 0.95vw, 13px) !important;
}

body.vault-page-body .vault-dino-list > section [class*="flex"][class*="wrap"] {
  gap: clamp(7px, 0.9vw, 10px) !important;
  padding-bottom: 8px !important;
}

/* Medium/short browser screens: shrink chrome, keep list usable. */
@media (max-height: 850px) {
  body.vault-page-body .vault-page > .relative.z-10 {
    padding-top: 76px !important;
  }

  body.vault-page-body .vault-shell {
    margin-top: 4px !important;
    width: min(66rem, calc(100vw - 56px)) !important;
  }

  body.vault-page-body .vault-shell > div:first-child h1 {
    font-size: clamp(1.75rem, 3.4vw, 2.65rem) !important;
  }

  body.vault-page-body .vault-dino-list {
    max-height: calc(100svh - 390px) !important;
  }
}

/* Very short/player browser with lots of bars/tabs. */
@media (max-height: 720px) {
  body.vault-page-body .vault-page > .relative.z-10 {
    padding-top: 64px !important;
  }

  body.vault-page-body .vault-shell > div:first-child {
    margin-bottom: 6px !important;
  }

  body.vault-page-body .vault-shell > div:first-child h1 {
    font-size: 1.9rem !important;
  }

  body.vault-page-body .vault-shell > div:first-child p:last-child {
    display: none !important;
  }

  body.vault-page-body .vault-panel {
    padding: 10px !important;
  }

  body.vault-page-body .vault-dino-list {
    max-height: calc(100svh - 330px) !important;
  }
}

/* Narrow screens: use the full width and stack info. */
@media (max-width: 900px) {
  body.vault-page-body .vault-shell {
    width: calc(100vw - 24px) !important;
  }

  body.vault-page-body .vault-dino-list > section .grid {
    grid-template-columns: 1fr !important;
  }
}