/* TBE Vault final readable player-view CSS.
   This loads directly on /vault and wins over older global patches. */

body.vault-page-body .vault-panel,
body.vault-page-body .vault-panel * {
  font-family: Verdana, Geneva, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: auto !important;
}

/* Main vault chamber */
body.vault-page-body .vault-panel {
  background: rgba(1, 5, 3, 0.95) !important;
  border-color: rgba(78, 128, 72, 0.42) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Header text inside the panel */
body.vault-page-body .vault-panel h2 {
  color: rgba(250, 246, 232, 0.98) !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  text-transform: none !important;
}

body.vault-page-body .vault-title-accent {
  color: rgba(135, 230, 170, 0.95) !important;
}

body.vault-page-body .vault-panel > div:first-child p {
  color: rgba(232, 229, 214, 0.86) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Step boxes */
body.vault-page-body .vault-how-strip > div {
  background: rgba(3, 12, 6, 0.78) !important;
  border-color: rgba(70, 140, 82, 0.45) !important;
}

body.vault-page-body .vault-how-strip p {
  color: rgba(242, 238, 224, 0.92) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

body.vault-page-body .vault-how-strip span {
  color: rgba(235, 205, 95, 0.95) !important;
}

/* Divider/helper text */
body.vault-page-body .vault-bloodline-divider span,
body.vault-page-body .vault-simple-help,
body.vault-page-body .vault-simple-help * {
  color: rgba(235, 232, 215, 0.88) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  text-transform: none !important;
}

body.vault-page-body .vault-bloodline-divider::before,
body.vault-page-body .vault-bloodline-divider::after {
  opacity: 0.38 !important;
  box-shadow: none !important;
}

/* The saved-dino list scrolls internally only when needed */
body.vault-page-body .vault-dino-list {
  max-height: clamp(460px, 58vh, 720px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 12px 12px 18px 0 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  scrollbar-gutter: stable !important;
}

body.vault-page-body .vault-dino-list::-webkit-scrollbar {
  width: 8px !important;
}

body.vault-page-body .vault-dino-list::-webkit-scrollbar-track {
  background: rgba(0, 10, 5, 0.78) !important;
  border-radius: 999px !important;
}

body.vault-page-body .vault-dino-list::-webkit-scrollbar-thumb {
  background: rgba(135, 190, 85, 0.55) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* Dino cards */
body.vault-page-body .vault-dino-list > section,
body.vault-page-body .vault-panel .space-y-3 > section {
  background: rgba(3, 7, 4, 0.96) !important;
  border: 1px solid rgba(70, 125, 78, 0.42) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 16px 18px 20px !important;
  margin-bottom: 18px !important;
  overflow: visible !important;
  min-height: auto !important;
}

body.vault-page-body .vault-dino-list > section::after,
body.vault-page-body .vault-panel .space-y-3 > section::after {
  opacity: 0.025 !important;
}

/* Dino name area */
body.vault-page-body .vault-dino-list h3,
body.vault-page-body .vault-dino-name {
  color: rgba(250, 246, 232, 0.98) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  text-transform: none !important;
}

body.vault-page-body .vault-dino-number {
  color: rgba(125, 220, 170, 0.95) !important;
  font-weight: 800 !important;
}

body.vault-page-body .vault-dino-list > section p,
body.vault-page-body .vault-panel .space-y-3 > section p {
  color: rgba(224, 222, 206, 0.9) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  text-transform: none !important;
}

/* Gender / Health / Growth pills */
body.vault-page-body .vault-dino-list > section .grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 10px 0 12px !important;
}

body.vault-page-body .vault-dino-list > section .grid > div:first-child {
  display: none !important;
}

body.vault-page-body .vault-dino-list > section .grid > div {
  min-height: 34px !important;
  padding: 7px 11px !important;
  background: rgba(8, 12, 8, 0.96) !important;
  border-color: rgba(72, 135, 86, 0.4) !important;
  border-radius: 9px !important;
}

body.vault-page-body .vault-dino-list > section .grid > div p:first-child {
  color: rgba(170, 202, 165, 0.88) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

body.vault-page-body .vault-dino-list > section .grid > div p:last-child {
  color: rgba(250, 246, 232, 0.98) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

/* Progress line calmer */
body.vault-page-body .vault-panel .h-2\.5 {
  height: 3px !important;
  margin-top: 5px !important;
  margin-bottom: 12px !important;
  background: rgba(80, 105, 65, 0.28) !important;
  box-shadow: none !important;
}

body.vault-page-body .vault-panel .h-2\.5 > div {
  background: rgba(140, 180, 95, 0.58) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Mutations: most important readability fix */
body.vault-page-body .vault-dino-list > section p:has(+ div span.rounded-full),
body.vault-page-body .vault-panel .space-y-3 > section p:has(+ div span.rounded-full) {
  color: rgba(235, 218, 175, 0.98) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.vault-page-body .vault-dino-list > section [class*="flex"][class*="wrap"],
body.vault-page-body .vault-panel .space-y-3 > section [class*="flex"][class*="wrap"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding-top: 7px !important;
  padding-bottom: 6px !important;
  overflow: visible !important;
  opacity: 1 !important;
  filter: none !important;
}

body.vault-page-body .vault-dino-list > section span.rounded-full,
body.vault-page-body .vault-panel .space-y-3 > section span.rounded-full {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 31px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: rgba(255, 250, 235, 0.98) !important;
  background: rgba(26, 23, 15, 0.98) !important;
  border: 1px solid rgba(190, 165, 85, 0.68) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  white-space: normal !important;
}

/* Buttons */
body.vault-page-body .vault-panel button {
  color: rgba(250, 246, 232, 0.98) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  background: rgba(8, 14, 8, 0.92) !important;
  border-color: rgba(78, 150, 90, 0.55) !important;
  box-shadow: none !important;
  text-transform: none !important;
}

/* Shorter screens / player browser with tabs and bookmarks */
@media (max-height: 820px) {
  body.vault-page-body .vault-dino-list {
    max-height: 430px !important;
  }

  body.vault-page-body .vault-dino-list > section {
    padding: 14px 16px 18px !important;
  }

  body.vault-page-body .vault-dino-list h3,
  body.vault-page-body .vault-dino-name {
    font-size: 1.22rem !important;
  }

  body.vault-page-body .vault-dino-list > section span.rounded-full {
    font-size: 12px !important;
    min-height: 29px !important;
  }
}

@media (max-width: 900px) {
  body.vault-page-body .vault-dino-list > section .grid {
    grid-template-columns: 1fr !important;
  }
}