:root {
  color-scheme: dark;
  --bg: #11100e;
  --panel: #1c1a16;
  --panel-2: #26221c;
  --text: #f3eadc;
  --muted: #b9aa93;
  --line: #3b342a;
  --accent: #d6a44f;
  --common: #9b8d79;
  --bronze: #b87333;
  --silver: #c9d0d6;
  --gold: #f1c75b;
  --platinum: #94f1ff;
  --legendary: #c884ff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top, rgba(214, 164, 79, 0.14), transparent 32rem),
    radial-gradient(circle at bottom right, rgba(148, 241, 255, 0.08), transparent 28rem),
    linear-gradient(rgba(17, 16, 14, 0.72), rgba(17, 16, 14, 0.86)),
    url('/background.png'),
    var(--bg);
  background-size: auto, auto, cover, cover, auto;
  background-position: top center, bottom right, center, center, center;
  background-attachment: scroll, scroll, fixed, fixed, scroll;
  color: var(--text);
}

body.detail-open {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.shell {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0;
}

.hero, .panel {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
}

.eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  margin: 0 0 8px;
}

h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.4rem, 7vw, 5rem); margin-bottom: 8px; }
h2 { margin-bottom: 16px; }

button {
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  background: var(--accent);
  color: #1a1308;
  font-weight: 800;
  cursor: pointer;
}

button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.secondary-button {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}

.panel { margin-top: 18px; }

.panel-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.reveal-stage {
  min-height: 430px;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.empty-stage {
  min-height: 180px;
  border: 1px dashed var(--line);
  border-radius: 22px;
}

.loot-card {
  --rarity-color: var(--common);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--rarity-color) 22%, var(--panel-2)), #15130f 70%),
    var(--panel-2);
  border: 2px solid color-mix(in srgb, var(--rarity-color) 80%, #ffffff 8%);
  border-radius: 20px;
  padding: 16px;
  min-height: 280px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 16px 36px rgba(0, 0, 0, 0.28),
    0 0 24px color-mix(in srgb, var(--rarity-color) 24%, transparent);
}

.loot-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--rarity-color) 45%, transparent);
  border-radius: 15px;
  pointer-events: none;
  z-index: 1;
}

.loot-card::after {
  content: "";
  position: absolute;
  inset: -45% -20%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.16), transparent 62%);
  transform: translateX(-70%) rotate(8deg);
  pointer-events: none;
  z-index: 2;
}

.loot-card:hover::after { animation: sweep 900ms ease; }

.rarity-glow {
  position: absolute;
  inset: auto -30% -40% -30%;
  height: 55%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rarity-color) 32%, transparent), transparent 65%);
  z-index: -1;
}

.card-inner-content {
  position: relative;
  z-index: 3;
}

.card-topline {
  display: flex;
  justify-content: space-between;
  color: var(--rarity-color);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  text-shadow: 0 0 14px color-mix(in srgb, var(--rarity-color) 45%, transparent);
}

.loot-card h3 { margin-bottom: 12px; }
.loot-card p { color: var(--muted); font-size: 0.92rem; }
.source { font-size: 0.78rem; }
.muted { color: var(--muted); }

.rarity-common { --rarity-color: var(--common); }
.rarity-bronze { --rarity-color: var(--bronze); }
.rarity-silver { --rarity-color: var(--silver); }
.rarity-gold { --rarity-color: var(--gold); }
.rarity-platinum { --rarity-color: var(--platinum); }
.rarity-legendary { --rarity-color: var(--legendary); }

.revealed-card {
  width: min(360px, 100%);
  min-height: 460px;
  animation: cardReveal 780ms cubic-bezier(.16, .9, .22, 1) both;
}

.revealed-card::after {
  animation: revealSweep 900ms 180ms ease both;
}

.card-back {
  position: relative;
  overflow: hidden;
  width: min(360px, 100%);
  min-height: 460px;
  border-radius: 24px;
  padding: 28px;
  border: 2px solid color-mix(in srgb, var(--accent) 70%, #ffffff 8%);
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(214, 164, 79, 0.18), transparent 34%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 8px, rgba(0,0,0,0.08) 8px 16px),
    linear-gradient(160deg, #2b251b, #12100d);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), 0 0 36px rgba(214, 164, 79, 0.18);
  display: grid;
  place-items: center;
  text-align: center;
  transform-style: preserve-3d;
  animation: idleFloat 2600ms ease-in-out infinite;
}

.card-back:hover { transform: translateY(-3px) rotateX(2deg); }

.card-back-mark {
  width: 112px;
  height: 112px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  background: radial-gradient(circle, rgba(214, 164, 79, 0.2), rgba(0,0,0,0.18));
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 26px;
  box-shadow: inset 0 0 22px rgba(214, 164, 79, 0.18);
}

.card-back-shine {
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 180deg, transparent, rgba(255,255,255,0.12), transparent 30%);
  animation: rotateShine 3800ms linear infinite;
}

.card-back > *:not(.card-back-shine) {
  position: relative;
  z-index: 2;
}

@keyframes cardReveal {
  0% { opacity: 0; transform: rotateY(92deg) scale(0.82); filter: blur(8px); }
  58% { opacity: 1; transform: rotateY(-8deg) scale(1.04); filter: blur(0); }
  100% { opacity: 1; transform: rotateY(0) scale(1); filter: blur(0); }
}

@keyframes revealSweep {
  0% { transform: translateX(-85%) rotate(8deg); }
  100% { transform: translateX(85%) rotate(8deg); }
}

@keyframes sweep {
  0% { transform: translateX(-70%) rotate(8deg); }
  100% { transform: translateX(70%) rotate(8deg); }
}

@keyframes idleFloat {
  0%, 100% { transform: translateY(0) rotateX(0); }
  50% { transform: translateY(-8px) rotateX(2deg); }
}

@keyframes rotateShine {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 700px) {
  .hero { align-items: stretch; flex-direction: column; }
  button { width: 100%; }
  .panel-heading-row { align-items: stretch; flex-direction: column; }
  .reveal-stage { min-height: 390px; }
  .card-back, .revealed-card { min-height: 400px; }
}

/* Mobile-safe location workflow */
.location-panel {
  border-color: rgba(117, 211, 255, 0.22);
}

.location-details {
  margin-top: 1rem;
}

.location-ready-card {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(97, 255, 190, 0.28);
  background: rgba(97, 255, 190, 0.08);
}

.location-help {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 196, 87, 0.28);
  background: rgba(255, 196, 87, 0.08);
}

.location-help h3 {
  margin: 0 0 0.5rem;
}

.help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.9rem;
}

.microcopy {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

#locationStatus[data-state="ready"] {
  color: #7dffc7;
}

#locationStatus[data-state="checking"] {
  color: #75d3ff;
}

#locationStatus[data-state="error"] {
  color: #ffc457;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (max-width: 640px) {
  .panel-heading-row,
  .hero {
    align-items: stretch;
  }

  .help-actions,
  .panel-heading-row {
    flex-direction: column;
  }

  .help-actions button,
  .panel-heading-row button,
  .hero button {
    width: 100%;
  }
}

/* Card image support */
.card-image-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 14px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--rarity-color) 36%, rgba(255,255,255,0.12));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--rarity-color) 18%, transparent), transparent),
    #181510;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.card-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
}

.card-image-fallback {
  display: grid;
  place-items: stretch;
}

.fallback-strata {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(8deg,
      rgba(255,255,255,0.06) 0 9%,
      color-mix(in srgb, var(--rarity-color) 32%, #312719) 9% 22%,
      #19150f 22% 37%,
      rgba(255,255,255,0.08) 37% 45%,
      color-mix(in srgb, var(--rarity-color) 22%, #433520) 45% 68%,
      #120f0b 68% 100%);
}

.image-credit {
  font-size: 0.7rem !important;
  line-height: 1.3;
  opacity: 0.76;
}

.image-credit a {
  color: var(--rarity-color);
}

/* Tabbed layout and compact card browsing */
.tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 0.5rem;
  padding: 0.65rem;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(12px);
}

.tab-button {
  flex: 1;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  padding: 0.85rem 1rem;
}

.tab-button.active {
  color: #1a1308;
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 75%, white 10%);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.card-list {
  display: grid;
  gap: 0.75rem;
}

.card-row {
  --rarity-color: var(--common);
  position: relative;
  display: grid;
  grid-template-columns: 6px 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 92px;
  padding: 0.7rem 0.9rem 0.7rem 0;
  overflow: hidden;
  text-align: left;
  color: var(--text);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rarity-color) 14%, transparent), transparent 45%),
    var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--rarity-color) 36%, var(--line));
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

.card-row:hover,
.card-row:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.25), 0 0 18px color-mix(in srgb, var(--rarity-color) 18%, transparent);
  outline: none;
}

.row-rarity-bar {
  align-self: stretch;
  width: 6px;
  background: var(--rarity-color);
  box-shadow: 0 0 14px color-mix(in srgb, var(--rarity-color) 65%, transparent);
}

.row-thumb .card-image-wrap {
  width: 76px;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 14px;
}

.row-main {
  min-width: 0;
}

.row-title-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.row-title-line strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.row-main p,
.row-meta span {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.rarity-pill {
  flex: 0 0 auto;
  padding: 0.2rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--rarity-color) 55%, transparent);
  border-radius: 999px;
  color: var(--rarity-color);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.row-meta {
  display: grid;
  justify-items: end;
  gap: 0.25rem;
  color: var(--muted);
}

.card-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 84%, rgba(0,0,0,0.9) 16%);
  box-shadow: none;
  overflow: hidden;
  overscroll-behavior: none;
}

.card-dialog::backdrop {
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(8px);
}

.dialog-shell {
  width: 100%;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.4rem;
  padding: calc(0.85rem + env(safe-area-inset-top)) calc(0.85rem + env(safe-area-inset-right)) calc(0.75rem + env(safe-area-inset-bottom)) calc(0.85rem + env(safe-area-inset-left));
  overflow: hidden;
}

.dialog-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
}

.icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}

.close-button {
  padding: 0.75rem 1rem;
}

.detail-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.detail-card {
  width: min(92vw, 390px);
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  animation: cardDetailIn 240ms ease both;
  will-change: transform, opacity;
}

.detail-card .card-inner-content {
  display: grid;
}

.detail-card .card-image-wrap {
  aspect-ratio: 16 / 10;
  margin-bottom: 0.7rem;
}

.detail-card h3 {
  margin-bottom: 0.55rem;
  font-size: clamp(1.1rem, 4vw, 1.35rem);
}

.detail-card p {
  margin-bottom: 0.42rem;
  font-size: clamp(0.78rem, 3.2vw, 0.9rem);
  line-height: 1.25;
}

.detail-card .image-credit {
  font-size: clamp(0.62rem, 2.5vw, 0.7rem) !important;
}

.detail-card.is-swiping {
  transition: transform 90ms linear;
}

.detail-card.swipe-exit-left {
  animation: swipeExitLeft 160ms ease both;
}

.detail-card.swipe-exit-right {
  animation: swipeExitRight 160ms ease both;
}

.slide-from-right {
  animation: slideFromRight 220ms ease both;
}

.slide-from-left {
  animation: slideFromLeft 220ms ease both;
}

.swipe-hint {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.84rem;
}

@keyframes cardDetailIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideFromRight {
  from { opacity: 0; transform: translateX(26px) scale(0.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes slideFromLeft {
  from { opacity: 0; transform: translateX(-26px) scale(0.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes swipeExitLeft {
  from { opacity: 1; transform: translateX(0) rotate(0deg); }
  to { opacity: 0; transform: translateX(-42vw) rotate(-4deg); }
}

@keyframes swipeExitRight {
  from { opacity: 1; transform: translateX(0) rotate(0deg); }
  to { opacity: 0; transform: translateX(42vw) rotate(4deg); }
}

@media (max-width: 640px) {
  .tabs {
    border-radius: 18px;
    align-items: stretch;
  }

  .tab-button {
    padding: 0.75rem 0.5rem;
    font-size: 0.86rem;
  }

  .card-row {
    grid-template-columns: 5px 64px minmax(0, 1fr);
    gap: 0.7rem;
    padding-right: 0.7rem;
  }

  .row-thumb .card-image-wrap {
    width: 64px;
  }

  .row-meta {
    display: none;
  }

  .row-title-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .dialog-toolbar {
    grid-template-columns: auto 1fr auto auto;
    gap: 0.45rem;
  }

  .close-button {
    grid-column: auto;
    padding: 0.65rem 0.85rem;
  }

  .icon-button {
    width: 38px;
    height: 38px;
  }

  .detail-card {
    width: min(94vw, 370px);
  }
}

/* Pack opening overlay */
body.pack-open {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.pack-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--text);
  background:
    radial-gradient(circle at top, rgba(214, 164, 79, 0.16), transparent 30rem),
    color-mix(in srgb, var(--panel) 84%, rgba(0,0,0,0.9) 16%);
  box-shadow: none;
  overflow: hidden;
  overscroll-behavior: none;
}

.pack-dialog::backdrop {
  background: rgba(0,0,0,0.76);
  backdrop-filter: blur(9px);
}

.pack-shell {
  width: 100%;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.4rem;
  padding: calc(0.9rem + env(safe-area-inset-top)) calc(0.9rem + env(safe-area-inset-right)) calc(0.8rem + env(safe-area-inset-bottom)) calc(0.9rem + env(safe-area-inset-left));
  overflow: hidden;
}

.pack-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
}

.pack-title {
  text-align: center;
  min-width: 0;
}

.pack-title h2 {
  margin-bottom: 0.2rem;
}

.pack-title .muted {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pack-toolbar #nextCardBtn {
  width: 42px;
  height: 42px;
}

.pack-hint {
  margin: 0;
  padding-bottom: max(0.1rem, env(safe-area-inset-bottom));
}

.pack-dialog .reveal-stage {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.pack-dialog .empty-stage {
  min-height: 0;
}

.pack-dialog .card-back,
.pack-dialog .revealed-card {
  width: min(92vw, 390px);
  max-height: 100%;
  min-height: min(66vh, 500px);
  will-change: transform, opacity;
}

.pack-dialog .revealed-card.is-swiping {
  transition: transform 90ms linear;
}

@media (max-width: 640px) {
  .pack-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .pack-toolbar .close-button {
    width: 100%;
  }

  .pack-dialog .card-back,
  .pack-dialog .revealed-card {
    width: min(94vw, 370px);
    min-height: min(64vh, 470px);
  }
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.stat-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.035);
}

.stat-card span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.stat-card strong {
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  color: var(--text);
}

.leaderboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.leaderboard-list {
  display: grid;
  gap: 8px;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.035);
}

.leaderboard-row .rank {
  color: var(--accent);
  font-weight: 800;
}

.leaderboard-row span:last-child {
  color: var(--muted);
  font-weight: 700;
}

/* First-time loot zone notification */
.loot-toast {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: 16px;
  z-index: 80;
  width: min(360px, calc(100vw - 32px));
  padding: 14px 16px;
  border: 1px solid rgba(250, 204, 21, 0.45);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(23, 23, 23, 0.98), rgba(63, 46, 14, 0.96));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 28px rgba(250, 204, 21, 0.16);
  color: #f8fafc;
  transform: translateX(calc(100% + 28px));
  opacity: 0;
  transition: transform 260ms ease, opacity 260ms ease;
}

.loot-toast.show {
  transform: translateX(0);
  opacity: 1;
}

.loot-toast strong,
.loot-toast span {
  display: block;
}

.loot-toast strong {
  margin-bottom: 4px;
  color: #fde68a;
  font-size: 0.95rem;
}

.loot-toast span {
  color: #d1d5db;
  font-size: 0.88rem;
  line-height: 1.35;
}

.bonus-note {
  display: inline-flex;
  width: fit-content;
  margin: 4px 0;
  padding: 5px 9px;
  border: 1px solid rgba(250, 204, 21, 0.42);
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.1);
  color: #fde68a;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .loot-toast {
    top: auto;
    right: 12px;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: min(340px, calc(100vw - 24px));
  }
}

.score-detail {
  color: var(--muted);
  font-size: 0.82rem;
}

/* Device profile controls */
.profile-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
}

.profile-row label {
  color: rgba(238, 243, 255, 0.72);
  font-size: 0.9rem;
}

.profile-row input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(5, 8, 15, 0.78);
  color: #f8fbff;
  padding: 0.78rem 1rem;
  outline: none;
}

.profile-row input:focus {
  border-color: rgba(104, 213, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(104, 213, 255, 0.14);
}

@media (max-width: 620px) {
  .profile-row {
    grid-template-columns: 1fr;
  }
}

.recovery-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  display: grid;
  gap: 12px;
}

.recovery-panel h3 {
  margin: 0 0 4px;
}

.recovery-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.recovery-code {
  display: inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.14);
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #f7e7b1;
}

.link-device-row input {
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .recovery-actions,
  .link-device-row {
    align-items: stretch;
  }

  .recovery-actions > *,
  .link-device-row > * {
    width: 100%;
  }
}

/* Progress dashboard goals */
.dashboard-panel {
  border-color: rgba(214, 164, 79, 0.28);
}

.goal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.goal-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(214, 164, 79, 0.08), transparent 52%),
    rgba(255, 255, 255, 0.035);
}

.goal-title-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 12px;
}

.goal-title-row span {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.goal-bar {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.goal-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #f7e7b1);
  box-shadow: 0 0 18px rgba(214, 164, 79, 0.28);
}

.zone-progress-panel {
  border-color: rgba(117, 211, 255, 0.22);
}

@media (max-width: 640px) {
  .goal-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .goal-title-row span {
    white-space: normal;
  }
}

/* v15: Pack reveal cards use the same sizing rules as full-card detail view. */
.pack-dialog .revealed-card.detail-card {
  width: min(92vw, 390px);
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 640px) {
  .pack-dialog .revealed-card.detail-card {
    width: min(94vw, 370px);
    min-height: 0;
  }
}

/* v16: make list rows visibly match full-card rarity styling */
.card-row.rarity-bronze {
  background: linear-gradient(135deg, rgba(177, 104, 54, 0.32), rgba(26, 20, 16, 0.95) 58%), var(--panel-2);
}

.card-row.rarity-silver {
  background: linear-gradient(135deg, rgba(210, 222, 232, 0.30), rgba(21, 26, 30, 0.95) 58%), var(--panel-2);
}

.card-row.rarity-gold {
  background: linear-gradient(135deg, rgba(255, 198, 77, 0.34), rgba(34, 25, 12, 0.95) 58%), var(--panel-2);
}

.card-row.rarity-platinum {
  background: linear-gradient(135deg, rgba(167, 245, 255, 0.32), rgba(15, 31, 34, 0.95) 58%), var(--panel-2);
}

.card-row.rarity-legendary {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 236, 128, 0.30), transparent 28%),
    linear-gradient(135deg, rgba(182, 88, 255, 0.36), rgba(35, 16, 53, 0.96) 60%),
    var(--panel-2);
  box-shadow: 0 14px 34px rgba(0,0,0,0.26), 0 0 24px color-mix(in srgb, var(--rarity-color) 30%, transparent);
}

.card-row .row-title-line strong {
  text-shadow: 0 0 12px color-mix(in srgb, var(--rarity-color) 20%, transparent);
}

/* v18/v20 expansion/fossil polish */
.loot-card.type-fossil {
  border-style: double;
  box-shadow:
    0 18px 42px rgba(0,0,0,0.34),
    0 0 30px color-mix(in srgb, var(--rarity-color) 24%, transparent);
}

.loot-card.type-fossil .card-topline::before,
.card-row.type-fossil .row-title-line::before {
  content: "FOSSIL";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rarity-color) 65%, transparent);
  background: color-mix(in srgb, var(--rarity-color) 16%, rgba(0,0,0,0.34));
  color: var(--rarity-color);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.card-row.type-fossil {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--rarity-color) 54%, var(--line));
  box-shadow:
    0 14px 34px rgba(0,0,0,0.28),
    0 0 20px color-mix(in srgb, var(--rarity-color) 28%, transparent);
}

.card-row.type-fossil::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--rarity-color) 22%, transparent), transparent 28%),
    linear-gradient(90deg, color-mix(in srgb, var(--rarity-color) 10%, transparent), transparent 44%);
  mix-blend-mode: screen;
  opacity: 0.75;
}

.card-row.type-fossil > * {
  position: relative;
  z-index: 1;
}


/* v20 wanted images page */
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.wanted-shell {
  gap: 18px;
}

.wanted-hero {
  align-items: center;
}

.submit-steps {
  margin: 12px 0 0;
  padding-left: 22px;
  color: var(--text);
}

.submit-steps li {
  margin: 8px 0;
}

.submit-steps code,
.manifest-snippet,
.wanted-image-card code {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
}

.submit-steps code,
.wanted-image-card code {
  padding: 2px 6px;
}

.wanted-image-list {
  display: grid;
  gap: 14px;
}

.wanted-image-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(214, 164, 79, 0.09), transparent 54%),
    rgba(255, 255, 255, 0.035);
}

.wanted-card-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.wanted-card-header h3 {
  margin: 0;
}

.wanted-status {
  flex: 0 0 auto;
  border: 1px solid rgba(214, 164, 79, 0.38);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--accent);
  background: rgba(214, 164, 79, 0.09);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wanted-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.wanted-facts div {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 10px;
  background: rgba(0,0,0,0.14);
}

.wanted-facts dt {
  color: var(--muted);
  font-size: 0.76rem;
  margin-bottom: 4px;
}

.wanted-facts dd {
  margin: 0;
  color: var(--text);
}

.wanted-image-card details {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 10px;
  margin-top: 10px;
}

.wanted-image-card summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 800;
}

.query-list {
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--muted);
}

.manifest-snippet {
  display: block;
  overflow-x: auto;
  padding: 12px;
  margin: 10px 0 0;
  white-space: pre;
  color: var(--text);
}

@media (max-width: 640px) {
  .wanted-card-header {
    flex-direction: column;
  }
}


.balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.balance-grid div {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,0.035);
}

.balance-grid strong,
.balance-grid span {
  display: block;
}

.balance-grid span {
  color: var(--muted);
  margin-top: 4px;
}

/* Internal image manifest tool */
.manifest-form {
  display: grid;
  gap: 1rem;
}

.manifest-form label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
}

.manifest-form input,
.manifest-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 0.85rem 0.95rem;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #f5f2e8);
  font: inherit;
}

.manifest-form textarea {
  resize: vertical;
}

.field-help {
  color: var(--muted, #b9b19f);
  font-size: 0.82rem;
  font-weight: 500;
}

.manifest-status {
  margin-top: 1rem;
}

.manifest-entry-list {
  display: grid;
  gap: 1rem;
}

.manifest-entry-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.06);
}

.hidden {
  display: none !important;
}

/* v24 Field Guide Theme Pass
   Goal: make LithoLoot feel like a field notebook / museum specimen system
   while preserving the existing mobile-safe full-card sizing rules. */
:root {
  color-scheme: light dark;
  --bg: #221b13;
  --panel: #f0e4cc;
  --panel-2: #e5d4b5;
  --text: #2d2418;
  --muted: #725f45;
  --line: #9b7c50;
  --accent: #8f5e24;
  --ink: #2a2318;
  --paper: #f4ead7;
  --paper-deep: #dcc9a8;
  --map-blue: #3f6f7a;
  --survey-red: #9a4637;
  --common: #817a6a;
  --bronze: #9a673d;
  --silver: #8a9599;
  --gold: #b88629;
  --platinum: #4f8c92;
  --legendary: #7b4d9a;
}

html, body {
  min-height: 100%;
}

body {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--text);
  background:
    linear-gradient(rgba(35, 27, 18, 0.22), rgba(35, 27, 18, 0.32)),
    url('/background.png'),
    radial-gradient(circle at 12% 8%, rgba(143, 94, 36, 0.16), transparent 22rem),
    radial-gradient(circle at 90% 14%, rgba(63, 111, 122, 0.12), transparent 20rem),
    linear-gradient(135deg, #2a2015 0%, #46351f 42%, #221912 100%);
  background-size: cover, cover, auto, auto, auto;
  background-position: center, center, top left, top right, center;
  background-attachment: fixed, fixed, scroll, scroll, scroll;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.28;
  background:
    repeating-radial-gradient(ellipse at 22% 18%, transparent 0 17px, rgba(244, 234, 215, 0.16) 18px 19px, transparent 20px 35px),
    repeating-radial-gradient(ellipse at 78% 70%, transparent 0 22px, rgba(244, 234, 215, 0.11) 23px 24px, transparent 25px 44px);
  mix-blend-mode: screen;
}

.shell {
  padding-top: 26px;
}

.hero,
.panel,
.tabs,
.card-dialog,
.pack-dialog,
.wanted-image-card,
.manifest-entry-card,
.recovery-panel,
.stat-card,
.goal-card,
.location-ready-card,
.location-help {
  color: var(--text);
  border-color: rgba(85, 62, 35, 0.52);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.36), rgba(255,255,255,0.05)),
    radial-gradient(circle at 12% 0%, rgba(143, 94, 36, 0.10), transparent 18rem),
    var(--paper);
  box-shadow:
    0 18px 44px rgba(25, 18, 10, 0.28),
    inset 0 0 0 1px rgba(255,255,255,0.24);
}

.hero,
.panel {
  border-radius: 14px;
  position: relative;
}

.hero::after,
.panel::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(85, 62, 35, 0.20);
  border-radius: 9px;
  pointer-events: none;
}

.eyebrow,
.card-topline,
.rarity-pill,
.stat-card span,
.bonus-note,
.wanted-status,
.goal-title-row span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
}

.eyebrow {
  color: var(--survey-red);
  font-weight: 900;
}

h1,
h2,
h3,
.row-title-line strong,
.loot-card h3 {
  color: var(--ink);
}

h1 {
  line-height: 0.92;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

h2 {
  border-bottom: 1px solid rgba(85, 62, 35, 0.24);
  padding-bottom: 0.45rem;
}

p,
.muted,
.microcopy,
.row-main p,
.row-meta span,
.score-detail,
.field-help,
.balance-grid span,
.leaderboard-row span:last-child,
.image-credit {
  color: var(--muted) !important;
}

button,
.link-button {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #b47a36, #80511f);
  color: #fff6e7;
  border: 1px solid rgba(61, 39, 16, 0.55);
  box-shadow: 0 4px 0 rgba(69, 43, 16, 0.85), 0 12px 24px rgba(25, 18, 10, 0.22);
}

button:hover,
.link-button:hover {
  transform: translateY(-1px);
}

.secondary-button,
.icon-button {
  background: rgba(255,255,255,0.28);
  color: var(--ink);
  border: 1px solid rgba(85, 62, 35, 0.45);
  box-shadow: 0 3px 0 rgba(85, 62, 35, 0.28);
}

.tabs {
  border-radius: 12px;
  padding: 0.45rem;
  backdrop-filter: blur(8px);
}

.tab-button {
  color: var(--muted);
  box-shadow: none;
  border-radius: 8px;
}

.tab-button.active {
  color: #fff6e7;
  background: var(--ink);
  border-color: rgba(0,0,0,0.22);
}

.loot-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.04)),
    radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--rarity-color) 16%, transparent), transparent 10rem),
    var(--paper);
  border: 2px solid color-mix(in srgb, var(--rarity-color) 68%, #4f3b24 32%);
  border-radius: 10px;
  color: var(--text);
  box-shadow:
    0 16px 34px rgba(25, 18, 10, 0.32),
    inset 0 0 0 1px rgba(255,255,255,0.34),
    inset 0 0 0 7px rgba(255,255,255,0.12);
}

.loot-card::before {
  inset: 9px;
  border-style: dashed;
  border-radius: 5px;
  border-color: color-mix(in srgb, var(--rarity-color) 46%, rgba(85,62,35,0.42));
}

.loot-card::after {
  background: linear-gradient(115deg, transparent 39%, rgba(255,255,255,0.22), transparent 58%);
}

.card-topline {
  color: color-mix(in srgb, var(--rarity-color) 72%, var(--ink));
  text-shadow: none;
  border-bottom: 1px solid rgba(85, 62, 35, 0.18);
  padding-bottom: 0.4rem;
}

.loot-card h3 {
  font-size: clamp(1.05rem, 3.7vw, 1.32rem);
  line-height: 1.05;
}

.card-image-wrap {
  border-radius: 7px;
  border-color: color-mix(in srgb, var(--rarity-color) 42%, rgba(85,62,35,0.42));
  background:
    linear-gradient(145deg, rgba(255,255,255,0.16), transparent),
    var(--paper-deep);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.2),
    0 5px 12px rgba(25,18,10,0.16);
}

.card-image {
  filter: saturate(0.82) contrast(1.04) sepia(0.08);
}

.card-back {
  border-radius: 10px;
  background:
    radial-gradient(circle at center, rgba(244,234,215,0.08), transparent 9rem),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(244,234,215,0.08) 18px 19px),
    linear-gradient(135deg, #3b2a17, #18110b);
  border-color: rgba(222, 190, 127, 0.70);
}

.card-back-mark {
  border-radius: 8px;
  border-style: dashed;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(244, 234, 215, 0.10);
}

.card-row {
  border-radius: 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rarity-color) 16%, transparent), transparent 38%),
    var(--paper);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(25,18,10,0.18), inset 0 0 0 1px rgba(255,255,255,0.16);
}

.card-row:hover,
.card-row:focus-visible {
  box-shadow: 0 12px 24px rgba(25,18,10,0.24), 0 0 0 3px color-mix(in srgb, var(--rarity-color) 22%, transparent);
}

.row-rarity-bar {
  box-shadow: none;
}

.rarity-pill,
.wanted-status,
.bonus-note {
  border-radius: 6px;
  background: color-mix(in srgb, var(--rarity-color, var(--accent)) 10%, rgba(255,255,255,0.18));
}

.card-dialog,
.pack-dialog {
  background:
    linear-gradient(rgba(35,27,18,0.48), rgba(35,27,18,0.62)),
    radial-gradient(circle at top, rgba(244,234,215,0.12), transparent 28rem),
    #1d150d;
}

.dialog-shell,
.pack-shell {
  /* Preserve mobile fit. Do not add large footer controls here. */
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.detail-stage,
.pack-dialog .reveal-stage {
  padding: 0.25rem 0;
}

.detail-card,
.pack-dialog .revealed-card.detail-card {
  width: min(90vw, 382px);
  max-height: 100%;
  min-height: 0;
}

.detail-card .card-image-wrap {
  aspect-ratio: 16 / 9;
}

.detail-card p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.74rem, 2.9vw, 0.86rem);
  line-height: 1.2;
}

.detail-card .card-topline,
.detail-card .image-credit,
.detail-card .source,
.score-detail {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.pack-title h2 {
  border-bottom: 0;
  padding-bottom: 0;
}

.stat-card,
.goal-card,
.balance-grid div,
.wanted-facts div,
.leaderboard-row {
  border-radius: 10px;
  background: rgba(255,255,255,0.20);
  border-color: rgba(85, 62, 35, 0.28);
}

.goal-bar {
  background: rgba(85, 62, 35, 0.16);
  border-color: rgba(85, 62, 35, 0.20);
}

.goal-bar span {
  background: repeating-linear-gradient(45deg, var(--accent) 0 8px, #c99a55 8px 16px);
  box-shadow: none;
}

.profile-row input,
.manifest-form input,
.manifest-form textarea {
  background: rgba(255,255,255,0.34);
  color: var(--ink);
  border-color: rgba(85,62,35,0.38);
  border-radius: 8px;
}

.recovery-code,
.manifest-snippet,
.submit-steps code,
.wanted-image-card code {
  color: var(--ink);
  background: rgba(255,255,255,0.30);
  border-color: rgba(85,62,35,0.34);
}

.loot-toast {
  border-radius: 10px;
  border-color: rgba(222, 190, 127, 0.72);
  background:
    linear-gradient(135deg, rgba(244,234,215,0.98), rgba(214,195,157,0.98));
  color: var(--ink);
  box-shadow: 0 16px 34px rgba(25,18,10,0.34);
}

.loot-toast strong {
  color: var(--survey-red);
}

.loot-toast span {
  color: var(--muted);
}

/* Fossils: museum drawer / catalog treatment */
.loot-card.type-fossil,
.card-row.type-fossil {
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--rarity-color) 18%, transparent), transparent 9rem),
    linear-gradient(135deg, rgba(255,255,255,0.34), rgba(222,203,166,0.20)),
    var(--paper);
}

.loot-card.type-fossil .card-topline::before,
.card-row.type-fossil .row-title-line::before {
  border-radius: 5px;
  background: rgba(255,255,255,0.28);
}

@media (max-width: 640px) {
  .shell {
    width: min(100% - 20px, 1100px);
    padding: 14px 0 22px;
  }

  .hero,
  .panel {
    padding: 18px;
  }

  h1 {
    font-size: clamp(2.15rem, 12vw, 3.4rem);
  }

  .tabs {
    top: 6px;
    gap: 0.32rem;
  }

  .detail-card,
  .pack-dialog .revealed-card.detail-card,
  .pack-dialog .card-back {
    width: min(91vw, 360px);
  }

  .detail-card .card-image-wrap {
    aspect-ratio: 16 / 8.8;
    margin-bottom: 0.55rem;
  }

  .detail-card h3 {
    font-size: clamp(1rem, 5vw, 1.22rem);
    margin-bottom: 0.42rem;
  }

  .detail-card p {
    font-size: clamp(0.7rem, 3vw, 0.8rem);
    margin-bottom: 0.32rem;
  }

  .dialog-shell,
  .pack-shell {
    padding: calc(0.55rem + env(safe-area-inset-top)) calc(0.55rem + env(safe-area-inset-right)) calc(0.55rem + env(safe-area-inset-bottom)) calc(0.55rem + env(safe-area-inset-left));
  }
}

/* v25 contrast and rarity polish
   Improves dark rarity rows, makes fossils more celebratory,
   and gives full-card/detail views stronger rarity-backed contrast
   without changing the mobile-safe sizing rules. */
.card-row,
.card-row.rarity-bronze,
.card-row.rarity-silver,
.card-row.rarity-gold,
.card-row.rarity-platinum,
.card-row.rarity-legendary {
  color: #fff8eb;
  text-shadow: 0 1px 2px rgba(0,0,0,0.34);
}

.card-row .row-title-line strong,
.card-row .row-main p,
.card-row .row-meta span {
  color: #fff8eb;
}

.card-row .row-main p,
.card-row .row-meta span {
  opacity: 0.88;
}

.card-row .rarity-pill {
  color: #fff8eb;
  border-color: rgba(255,255,255,0.46);
  background: rgba(0,0,0,0.24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.card-row .row-thumb .card-image-wrap {
  border-color: rgba(255,255,255,0.42);
  box-shadow: 0 6px 14px rgba(0,0,0,0.32);
}

.card-row.type-fossil {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--rarity-color) 78%, #fff4ca 22%);
  background:
    radial-gradient(circle at 14% 16%, rgba(255,255,255,0.34), transparent 5.6rem),
    radial-gradient(circle at 88% 24%, color-mix(in srgb, var(--rarity-color) 52%, transparent), transparent 8rem),
    linear-gradient(135deg, color-mix(in srgb, var(--rarity-color) 52%, #3b2414 48%), rgba(23,13,8,0.98) 64%);
  box-shadow:
    0 16px 38px rgba(0,0,0,0.36),
    0 0 0 1px rgba(255,244,202,0.22),
    0 0 30px color-mix(in srgb, var(--rarity-color) 52%, transparent),
    inset 0 0 28px rgba(255,255,255,0.08);
}

.card-row.type-fossil::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(255,244,202,0.38);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}

.card-row.type-fossil::after {
  background:
    linear-gradient(115deg, transparent 34%, rgba(255,255,255,0.24), transparent 58%),
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--rarity-color) 38%, transparent), transparent 30%);
  opacity: 0.92;
}

.card-row.type-fossil .row-title-line::before {
  color: #1f160c;
  background: linear-gradient(180deg, #fff3c7, color-mix(in srgb, var(--rarity-color) 32%, #f1d590 68%));
  border-color: rgba(255,255,255,0.72);
  box-shadow: 0 0 18px color-mix(in srgb, var(--rarity-color) 62%, transparent);
}

.card-row.type-fossil > * {
  z-index: 2;
}

.card-dialog,
.pack-dialog {
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--rarity-color, var(--accent)) 26%, transparent), transparent 22rem),
    linear-gradient(rgba(22,16,10,0.74), rgba(22,16,10,0.9)),
    #120d08;
}

.detail-card,
.pack-dialog .revealed-card.detail-card {
  color: #fff8eb;
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--rarity-color) 62%, rgba(255,255,255,0.06)), transparent 9.5rem),
    linear-gradient(155deg, color-mix(in srgb, var(--rarity-color) 42%, #16100a 58%), #0f0b07 72%);
  border-color: color-mix(in srgb, var(--rarity-color) 82%, #fff2bc 18%);
  box-shadow:
    0 22px 46px rgba(0,0,0,0.48),
    0 0 42px color-mix(in srgb, var(--rarity-color) 38%, transparent),
    inset 0 0 0 1px rgba(255,255,255,0.16),
    inset 0 0 0 7px rgba(255,255,255,0.06);
  text-shadow: 0 1px 2px rgba(0,0,0,0.36);
}

.detail-card::before,
.pack-dialog .revealed-card.detail-card::before {
  border-color: color-mix(in srgb, var(--rarity-color) 62%, rgba(255,255,255,0.28));
}

.detail-card .card-topline,
.pack-dialog .revealed-card.detail-card .card-topline {
  color: #fff2bc;
  border-bottom-color: rgba(255,255,255,0.22);
}

.detail-card h3,
.detail-card p,
.detail-card .source,
.detail-card .image-credit,
.detail-card .score-detail,
.pack-dialog .revealed-card.detail-card h3,
.pack-dialog .revealed-card.detail-card p,
.pack-dialog .revealed-card.detail-card .source,
.pack-dialog .revealed-card.detail-card .image-credit,
.pack-dialog .revealed-card.detail-card .score-detail {
  color: #fff8eb;
}

.detail-card .muted,
.pack-dialog .revealed-card.detail-card .muted {
  color: rgba(255,248,235,0.78);
}

.detail-card .rarity-pill,
.pack-dialog .revealed-card.detail-card .rarity-pill,
.detail-card .bonus-note,
.pack-dialog .revealed-card.detail-card .bonus-note {
  color: #fff8eb;
  border-color: rgba(255,255,255,0.42);
  background: rgba(0,0,0,0.24);
}

.detail-card.type-fossil,
.pack-dialog .revealed-card.detail-card.type-fossil {
  border-style: double;
  background:
    radial-gradient(circle at 20% 14%, rgba(255,244,202,0.34), transparent 5.8rem),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--rarity-color) 72%, transparent), transparent 10rem),
    linear-gradient(155deg, color-mix(in srgb, var(--rarity-color) 48%, #241209 52%), #0c0704 72%);
  box-shadow:
    0 24px 52px rgba(0,0,0,0.54),
    0 0 0 1px rgba(255,244,202,0.24),
    0 0 56px color-mix(in srgb, var(--rarity-color) 58%, transparent),
    inset 0 0 34px rgba(255,255,255,0.10);
}

.detail-card.type-fossil .card-topline::before,
.pack-dialog .revealed-card.detail-card.type-fossil .card-topline::before {
  color: #1f160c;
  background: linear-gradient(180deg, #fff3c7, color-mix(in srgb, var(--rarity-color) 32%, #f1d590 68%));
  border-color: rgba(255,255,255,0.72);
  box-shadow: 0 0 20px color-mix(in srgb, var(--rarity-color) 64%, transparent);
}

/* v26 readability and fossil row polish
   Keeps the shared full-card sizing intact while improving contrast. */
.card-back,
.pack-dialog .card-back {
  color: #fff8eb;
  text-shadow: 0 2px 4px rgba(0,0,0,0.62);
}

.card-back .eyebrow,
.pack-dialog .card-back .eyebrow {
  color: #fff3c7;
  opacity: 1;
}

.card-back h3,
.pack-dialog .card-back h3 {
  color: #ffffff;
}

.card-back p,
.pack-dialog .card-back p {
  color: rgba(255,248,235,0.92);
}

.detail-card .detail-field,
.pack-dialog .revealed-card.detail-card .detail-field,
.detail-card .source,
.pack-dialog .revealed-card.detail-card .source {
  display: block;
  margin: 0.36rem 0;
  line-height: 1.28;
}

.detail-card .detail-label,
.pack-dialog .revealed-card.detail-card .detail-label {
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.012em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

.detail-card .detail-value,
.pack-dialog .revealed-card.detail-card .detail-value,
.detail-card .score-detail,
.pack-dialog .revealed-card.detail-card .score-detail {
  color: color-mix(in srgb, var(--rarity-color) 68%, #fff8eb 32%);
  font-weight: 800;
  text-shadow: 0 0 14px color-mix(in srgb, var(--rarity-color) 40%, transparent), 0 1px 2px rgba(0,0,0,0.55);
}

.card-row .row-main p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem;
  margin-top: 0.34rem;
}

.card-row .row-main p span,
.card-row .row-meta span,
.card-row .rarity-pill {
  color: #fff8eb;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  padding: 0.16rem 0.44rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.04);
  text-shadow: 0 1px 2px rgba(0,0,0,0.58);
}

.card-row .row-title-line strong {
  color: #ffffff;
  background: rgba(0,0,0,0.36);
  border-radius: 8px;
  padding: 0.12rem 0.38rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.72);
}

.card-row.type-fossil {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rarity-color) 46%, rgba(23,13,8,0.95) 54%), rgba(17,9,5,0.98) 70%),
    linear-gradient(90deg, color-mix(in srgb, var(--rarity-color) 34%, transparent), transparent 58%),
    url('/fossil-bg.svg');
  background-size: cover, cover, auto 150%;
  background-position: center, center, right center;
  background-blend-mode: multiply, screen, screen;
}

.card-row.type-fossil::before {
  background:
    radial-gradient(circle at 15% 28%, color-mix(in srgb, var(--rarity-color) 42%, transparent), transparent 8rem),
    linear-gradient(90deg, rgba(255,244,202,0.18), transparent 42%);
  border-color: rgba(255,244,202,0.48);
}

.card-row.type-fossil .row-main p span,
.card-row.type-fossil .row-meta span,
.card-row.type-fossil .rarity-pill {
  background: color-mix(in srgb, var(--rarity-color) 22%, rgba(0,0,0,0.58) 78%);
  border-color: rgba(255,244,202,0.34);
}

.card-row.type-fossil .row-title-line strong {
  background: linear-gradient(90deg, rgba(0,0,0,0.62), color-mix(in srgb, var(--rarity-color) 20%, rgba(0,0,0,0.52) 80%));
}

/* v27 list cleanup and fossil texture system */
.card-row .row-card-summary,
.card-row .row-location-summary {
  color: rgba(255,248,235,0.9);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.72);
}

.card-row .row-main p span,
.card-row.type-fossil .row-main p span {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.card-row .row-location-summary {
  display: flex;
  align-items: center;
  gap: 0.42rem;
}

.card-row .row-zone-text {
  color: rgba(255,248,235,0.74);
  font-weight: 800;
}

.card-row .near-pill,
.card-row.type-fossil .near-pill {
  color: #fff8eb;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 0.16rem 0.48rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.04);
}

.card-row.type-fossil {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--rarity-color) 58%, rgba(30,16,9,0.96) 42%),
      color-mix(in srgb, var(--rarity-color) 22%, rgba(13,8,5,0.99) 78%) 72%),
    radial-gradient(circle at 18% 22%, rgba(255,244,202,0.28), transparent 8rem),
    url('/fossil-texture.png'),
    url('/fossil-bg.svg');
  background-size: cover, cover, auto 145%, auto 150%;
  background-position: center, center, right center, right center;
  background-blend-mode: normal, screen, soft-light, screen;
}

.card-row.type-fossil::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rarity-color) 45%, rgba(255,244,202,0.18) 55%), transparent 58%),
    radial-gradient(circle at 82% 45%, rgba(255,244,202,0.18), transparent 9rem);
  border-color: rgba(255,244,202,0.58);
}

.card-row.type-fossil .row-title-line strong::after {
  content: "  ·  FOSSIL FIND";
  color: color-mix(in srgb, var(--rarity-color) 38%, #fff3c7 62%);
  font-size: 0.72em;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.detail-card.type-fossil,
.pack-dialog .revealed-card.detail-card.type-fossil {
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--rarity-color) 58%, #241209 42%),
      color-mix(in srgb, var(--rarity-color) 18%, #0c0704 82%) 74%),
    radial-gradient(circle at 18% 12%, rgba(255,244,202,0.28), transparent 7rem),
    url('/fossil-texture.png'),
    url('/fossil-bg.svg');
  background-size: cover, cover, auto 132%, auto 145%;
  background-position: center, center, center, center;
  background-blend-mode: normal, screen, soft-light, screen;
}

.detail-card.type-fossil .card-inner-content,
.pack-dialog .revealed-card.detail-card.type-fossil .card-inner-content {
  position: relative;
  z-index: 1;
}

/* v28 fossil texture visibility + cleaner readable loot list */
.card-row {
  color: #fff8eb;
}

.card-row .row-title-line strong,
.card-row .row-card-summary,
.card-row .row-meta,
.card-row .rarity-pill {
  color: #fff8eb;
  text-shadow: 0 1px 3px rgba(0,0,0,0.78);
}

.card-row .row-card-summary {
  opacity: 0.96;
}

.card-row .row-meta {
  color: rgba(255,248,235,0.88);
}

.card-row .rarity-pill {
  background: rgba(0,0,0,0.34);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 3px 10px rgba(0,0,0,0.22);
}

.card-row .row-location-summary,
.card-row .row-zone-text,
.card-row .near-pill {
  display: none !important;
}

.card-row.type-fossil {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--rarity-color) 72%, rgba(24,13,8,0.96) 28%) 0%,
      color-mix(in srgb, var(--rarity-color) 42%, rgba(14,8,5,0.99) 58%) 58%,
      rgba(10,6,4,0.98) 100%),
    radial-gradient(circle at 18% 20%, rgba(255,244,202,0.34), transparent 7rem),
    url('/fossil-texture.png'),
    url('/fossil-bg.svg');
  background-size: cover, cover, auto 185%, auto 190%;
  background-position: center, center, right center, right center;
  background-blend-mode: multiply, screen, screen, luminosity;
  box-shadow:
    0 18px 36px rgba(0,0,0,0.32),
    0 0 0 1px color-mix(in srgb, var(--rarity-color) 56%, rgba(255,244,202,0.44) 44%),
    0 0 24px color-mix(in srgb, var(--rarity-color) 34%, transparent);
}

.card-row.type-fossil::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rarity-color) 58%, rgba(255,244,202,0.22) 42%), transparent 60%),
    radial-gradient(circle at 82% 45%, rgba(255,244,202,0.24), transparent 9rem);
  border-color: color-mix(in srgb, var(--rarity-color) 42%, rgba(255,244,202,0.62) 58%);
}

.card-row.type-fossil::after {
  opacity: 0.42;
}

.card-row.type-fossil .row-title-line strong,
.card-row.type-fossil .row-card-summary,
.card-row.type-fossil .row-meta,
.card-row.type-fossil .rarity-pill {
  color: #fffaf0;
}

.detail-card.type-fossil,
.pack-dialog .revealed-card.detail-card.type-fossil {
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--rarity-color) 68%, #241209 32%) 0%,
      color-mix(in srgb, var(--rarity-color) 34%, #0c0704 66%) 64%,
      #080503 100%),
    radial-gradient(circle at 18% 12%, rgba(255,244,202,0.30), transparent 7rem),
    url('/fossil-texture.png'),
    url('/fossil-bg.svg');
  background-size: cover, cover, auto 185%, auto 190%;
  background-position: center, center, center, center;
  background-blend-mode: multiply, screen, screen, luminosity;
}

.detail-card.type-fossil::after,
.pack-dialog .revealed-card.detail-card.type-fossil::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 34%, rgba(255,244,202,0.18), transparent 8rem),
    linear-gradient(135deg, transparent 25%, color-mix(in srgb, var(--rarity-color) 16%, transparent) 100%);
  z-index: 0;
}

.detail-card.type-fossil > *,
.pack-dialog .revealed-card.detail-card.type-fossil > * {
  position: relative;
  z-index: 1;
}

/* v29 list readability + fossil rarity background fix */
.card-row,
.card-row * {
  color: #fffaf0 !important;
}

.card-row .row-card-summary {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: rgba(255,250,240,0.88) !important;
}

.card-row .rarity-pill {
  color: #fffaf0 !important;
  background: rgba(0,0,0,0.36) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

.card-row .row-title-line strong {
  color: #ffffff !important;
}

.card-row .row-meta {
  color: rgba(255,250,240,0.82) !important;
}

/* Hide the older fossil badges so fossil status is not repeated several times. */
.loot-card.type-fossil .card-topline::before,
.detail-card.type-fossil .card-topline::before,
.pack-dialog .revealed-card.detail-card.type-fossil .card-topline::before,
.card-row.type-fossil .row-title-line::before,
.card-row.type-fossil .row-title-line strong::after {
  display: none !important;
  content: none !important;
}

/* Make fossil list rows use the same rarity family as normal rows, plus fossil texture. */
.card-row.type-fossil.rarity-bronze {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bronze) 70%, rgba(24,13,8,0.96) 30%) 0%, color-mix(in srgb, var(--bronze) 36%, rgba(14,8,5,0.99) 64%) 62%, rgba(10,6,4,0.98) 100%),
    url('/fossil-texture.png'),
    url('/fossil-bg.svg') !important;
}

.card-row.type-fossil.rarity-silver {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--silver) 70%, rgba(18,21,23,0.96) 30%) 0%, color-mix(in srgb, var(--silver) 36%, rgba(9,11,13,0.99) 64%) 62%, rgba(6,7,8,0.98) 100%),
    url('/fossil-texture.png'),
    url('/fossil-bg.svg') !important;
}

.card-row.type-fossil.rarity-gold {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 72%, rgba(38,22,6,0.96) 28%) 0%, color-mix(in srgb, var(--gold) 38%, rgba(16,9,4,0.99) 62%) 62%, rgba(10,6,3,0.98) 100%),
    url('/fossil-texture.png'),
    url('/fossil-bg.svg') !important;
}

.card-row.type-fossil.rarity-platinum {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--platinum) 72%, rgba(8,27,34,0.96) 28%) 0%, color-mix(in srgb, var(--platinum) 38%, rgba(4,13,17,0.99) 62%) 62%, rgba(2,7,9,0.98) 100%),
    url('/fossil-texture.png'),
    url('/fossil-bg.svg') !important;
}

.card-row.type-fossil.rarity-legendary {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--legendary) 74%, rgba(42,20,4,0.96) 26%) 0%, color-mix(in srgb, var(--legendary) 44%, rgba(17,7,3,0.99) 56%) 60%, rgba(9,4,2,0.98) 100%),
    url('/fossil-texture.png'),
    url('/fossil-bg.svg') !important;
}

.card-row.type-fossil.rarity-bronze,
.card-row.type-fossil.rarity-silver,
.card-row.type-fossil.rarity-gold,
.card-row.type-fossil.rarity-platinum,
.card-row.type-fossil.rarity-legendary {
  background-size: cover, auto 195%, auto 195% !important;
  background-position: center, right center, right center !important;
  background-blend-mode: normal, screen, luminosity !important;
  border-color: color-mix(in srgb, var(--rarity-color) 76%, rgba(255,244,202,0.26) 24%) !important;
  box-shadow:
    0 18px 36px rgba(0,0,0,0.32),
    0 0 0 1px color-mix(in srgb, var(--rarity-color) 48%, rgba(255,244,202,0.30) 52%),
    0 0 26px color-mix(in srgb, var(--rarity-color) 34%, transparent) !important;
}

/* v30 final polish updates
   - stronger fossil texture visibility
   - readable image credit text
   - no dark/brown list text
   - fixes quality text readability after removing duplicate Grade suffix in JS
*/
.card-row,
.card-row * {
  color: #ffffff !important;
}

.card-row .row-card-summary,
.card-row .row-meta,
.card-row .rarity-pill {
  color: rgba(255,255,255,0.92) !important;
}

.card-row .row-title-line strong {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

.card-row.type-fossil.rarity-bronze,
.card-row.type-fossil.rarity-silver,
.card-row.type-fossil.rarity-gold,
.card-row.type-fossil.rarity-platinum,
.card-row.type-fossil.rarity-legendary {
  background-size: cover, auto 255%, auto 210% !important;
  background-position: center, right center, right center !important;
  background-blend-mode: normal, screen, luminosity !important;
}

.card-row.type-fossil::after {
  opacity: 0.72 !important;
}

.detail-card.type-fossil,
.pack-dialog .revealed-card.detail-card.type-fossil {
  background-size: cover, cover, auto 235%, auto 215% !important;
  background-blend-mode: multiply, screen, screen, luminosity !important;
}

.detail-card.type-fossil::after,
.pack-dialog .revealed-card.detail-card.type-fossil::after {
  opacity: 0.58 !important;
}

.image-credit,
.detail-card .image-credit,
.pack-dialog .revealed-card.detail-card .image-credit {
  color: rgba(255,255,255,0.74) !important;
  font-size: 12px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

.image-credit a,
.detail-card .image-credit a,
.pack-dialog .revealed-card.detail-card .image-credit a {
  color: rgba(255,255,255,0.88) !important;
}


/* v31 viewport safety pass: prevent occasional full-card clipping in pack and loot detail views. */
body.detail-open,
body.pack-open { width: 100%; height: 100dvh; overflow: hidden !important; overscroll-behavior: none; }
.card-dialog, .pack-dialog { overflow: hidden !important; }
.dialog-shell, .pack-shell { height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; box-sizing: border-box; }
.detail-stage, .pack-dialog .reveal-stage { min-height: 0 !important; height: 100% !important; overflow: hidden !important; box-sizing: border-box; display: grid !important; place-items: center !important; padding: clamp(0.2rem, 1.2vh, 0.55rem) 0 !important; }
.detail-card, .pack-dialog .revealed-card.detail-card { width: min(90vw, 382px) !important; max-height: min(100%, calc(100dvh - 128px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important; overflow: hidden !important; box-sizing: border-box !important; display: grid !important; }
.detail-card .card-inner-content, .pack-dialog .revealed-card.detail-card .card-inner-content { min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; display: grid !important; gap: clamp(0.12rem, 0.48vh, 0.32rem) !important; }
.detail-card .card-image-wrap, .pack-dialog .revealed-card.detail-card .card-image-wrap { aspect-ratio: 16 / 8.4 !important; margin-bottom: clamp(0.12rem, 0.58vh, 0.38rem) !important; min-height: 0 !important; }
.detail-card h3, .pack-dialog .revealed-card.detail-card h3 { font-size: clamp(0.98rem, 4.15vw, 1.28rem) !important; line-height: 1.06 !important; margin: 0 0 clamp(0.06rem, 0.38vh, 0.28rem) !important; }
.detail-card p, .pack-dialog .revealed-card.detail-card p, .detail-card .detail-field, .pack-dialog .revealed-card.detail-card .detail-field, .detail-card .source, .pack-dialog .revealed-card.detail-card .source { font-size: clamp(0.66rem, 2.55vw, 0.82rem) !important; line-height: 1.12 !important; margin: 0 !important; }
.detail-card .card-topline, .pack-dialog .revealed-card.detail-card .card-topline { font-size: clamp(0.58rem, 2.1vw, 0.7rem) !important; line-height: 1.1 !important; padding-bottom: clamp(0.1rem, 0.45vh, 0.28rem) !important; margin-bottom: clamp(0.08rem, 0.45vh, 0.28rem) !important; }
.detail-card .image-credit, .pack-dialog .revealed-card.detail-card .image-credit { font-size: clamp(0.55rem, 2vw, 0.66rem) !important; line-height: 1.12 !important; }
.pack-complete-stage { cursor: pointer; }
.pack-complete-card { width: min(88vw, 420px); border: 1px solid rgba(255,255,255,0.22); border-radius: 22px; padding: 1.4rem; text-align: center; color: #fff8eb; background: linear-gradient(145deg, rgba(73,48,22,0.92), rgba(20,14,8,0.96)); box-shadow: 0 20px 50px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.12); }
.pack-complete-card h3 { color: #fff8eb; margin: 0.25rem 0 0.45rem; }
.pack-complete-card .muted { color: rgba(255,255,255,0.78) !important; }
@media (max-height: 720px) { .dialog-toolbar, .pack-toolbar { min-height: 38px !important; } .close-button { padding: 0.48rem 0.72rem !important; } .icon-button, .pack-toolbar #nextCardBtn { width: 34px !important; height: 34px !important; font-size: 1.25rem !important; } .detail-card, .pack-dialog .revealed-card.detail-card { width: min(88vw, 350px) !important; max-height: calc(100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; padding: clamp(0.55rem, 1.35vh, 0.82rem) !important; } .detail-card .card-image-wrap, .pack-dialog .revealed-card.detail-card .card-image-wrap { aspect-ratio: 16 / 7.2 !important; } .pack-hint, .swipe-hint { font-size: 0.72rem !important; line-height: 1.1 !important; } }
@media (max-height: 620px) { .detail-card .card-image-wrap, .pack-dialog .revealed-card.detail-card .card-image-wrap { aspect-ratio: 16 / 6.0 !important; } .detail-card p, .pack-dialog .revealed-card.detail-card p, .detail-card .detail-field, .pack-dialog .revealed-card.detail-card .detail-field, .detail-card .source, .pack-dialog .revealed-card.detail-card .source { font-size: clamp(0.58rem, 2.25vw, 0.72rem) !important; line-height: 1.06 !important; } }

/* v32 card fit and fossil texture tuning
   - uses more of the viewport again without returning to clipping
   - slightly larger full-card copy
   - makes fossil texture visible on mobile by using a real overlay layer instead of relying only on blended background stacks
*/
.detail-stage,
.pack-dialog .reveal-stage {
  padding: clamp(0.05rem, 0.55vh, 0.28rem) 0 !important;
}

.detail-card,
.pack-dialog .revealed-card.detail-card {
  width: min(92vw, 404px) !important;
  max-height: min(100%, calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  padding: clamp(0.72rem, 1.65vh, 1.02rem) !important;
}

.detail-card .card-inner-content,
.pack-dialog .revealed-card.detail-card .card-inner-content {
  gap: clamp(0.16rem, 0.58vh, 0.38rem) !important;
}

.detail-card .card-image-wrap,
.pack-dialog .revealed-card.detail-card .card-image-wrap {
  aspect-ratio: 16 / 8.9 !important;
  margin-bottom: clamp(0.14rem, 0.62vh, 0.42rem) !important;
}

.detail-card h3,
.pack-dialog .revealed-card.detail-card h3 {
  font-size: clamp(1.08rem, 4.45vw, 1.42rem) !important;
  line-height: 1.08 !important;
}

.detail-card p,
.pack-dialog .revealed-card.detail-card p,
.detail-card .detail-field,
.pack-dialog .revealed-card.detail-card .detail-field,
.detail-card .source,
.pack-dialog .revealed-card.detail-card .source {
  font-size: clamp(0.72rem, 2.75vw, 0.9rem) !important;
  line-height: 1.16 !important;
}

.detail-card .card-topline,
.pack-dialog .revealed-card.detail-card .card-topline {
  font-size: clamp(0.62rem, 2.2vw, 0.76rem) !important;
}

.detail-card .image-credit,
.pack-dialog .revealed-card.detail-card .image-credit {
  font-size: clamp(0.58rem, 2.1vw, 0.72rem) !important;
}

/* Robust fossil texture layer for full cards, including mobile browsers. */
.detail-card.type-fossil,
.pack-dialog .revealed-card.detail-card.type-fossil {
  position: relative !important;
  isolation: isolate !important;
}

.detail-card.type-fossil::after,
.pack-dialog .revealed-card.detail-card.type-fossil::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: url('/fossil-texture.png'), url('/fossil-bg.svg') !important;
  background-repeat: no-repeat !important;
  background-size: auto 185%, auto 175% !important;
  background-position: right center, right center !important;
  opacity: 0.42 !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
}

.detail-card.type-fossil > *,
.pack-dialog .revealed-card.detail-card.type-fossil > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Keep small screens safe, but not overly conservative. */
@media (max-height: 720px) {
  .detail-stage,
  .pack-dialog .reveal-stage {
    padding: clamp(0.03rem, 0.38vh, 0.18rem) 0 !important;
  }

  .detail-card,
  .pack-dialog .revealed-card.detail-card {
    width: min(91vw, 382px) !important;
    max-height: calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    padding: clamp(0.62rem, 1.25vh, 0.9rem) !important;
  }

  .detail-card .card-image-wrap,
  .pack-dialog .revealed-card.detail-card .card-image-wrap {
    aspect-ratio: 16 / 8.0 !important;
  }

  .detail-card h3,
  .pack-dialog .revealed-card.detail-card h3 {
    font-size: clamp(1rem, 4.15vw, 1.28rem) !important;
  }

  .detail-card p,
  .pack-dialog .revealed-card.detail-card p,
  .detail-card .detail-field,
  .pack-dialog .revealed-card.detail-card .detail-field,
  .detail-card .source,
  .pack-dialog .revealed-card.detail-card .source {
    font-size: clamp(0.68rem, 2.55vw, 0.82rem) !important;
    line-height: 1.12 !important;
  }
}

@media (max-height: 620px) {
  .detail-card,
  .pack-dialog .revealed-card.detail-card {
    max-height: calc(100dvh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    width: min(90vw, 354px) !important;
  }

  .detail-card .card-image-wrap,
  .pack-dialog .revealed-card.detail-card .card-image-wrap {
    aspect-ratio: 16 / 6.7 !important;
  }

  .detail-card p,
  .pack-dialog .revealed-card.detail-card p,
  .detail-card .detail-field,
  .pack-dialog .revealed-card.detail-card .detail-field,
  .detail-card .source,
  .pack-dialog .revealed-card.detail-card .source {
    font-size: clamp(0.61rem, 2.35vw, 0.76rem) !important;
    line-height: 1.08 !important;
  }
}

/* v33 milestone rewards and safe profile polish */
.milestone-rewards-panel {
  position: relative;
  overflow: hidden;
}

.milestone-rewards {
  margin-top: 10px;
}

.milestone-ready-card,
.milestone-locked-card {
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 227, 145, 0.26), transparent 34%),
    linear-gradient(135deg, rgba(40, 32, 20, 0.92), rgba(14, 22, 24, 0.92));
  color: #fff;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
}

.milestone-ready-card h3,
.milestone-locked-card h3,
.milestone-ready-card p,
.milestone-locked-card p {
  color: #fff;
}

.type-geologist {
  background:
    radial-gradient(circle at 20% 8%, rgba(255, 239, 176, 0.28), transparent 30%),
    linear-gradient(145deg, rgba(130, 81, 32, 0.98), rgba(66, 44, 31, 0.98)) !important;
  border-color: rgba(255, 222, 150, 0.74) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 18px 42px rgba(80, 45, 16, 0.32) !important;
}

.type-geologist::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.24;
  pointer-events: none;
}

.type-geologist .card-image-fallback {
  background:
    radial-gradient(circle at center, rgba(255, 237, 182, 0.35), transparent 42%),
    linear-gradient(135deg, rgba(62, 41, 28, 0.96), rgba(20, 24, 26, 0.96));
}

.type-geologist .fallback-strata::before {
  content: "FIELD ARCHIVE";
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--mono-font, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.72);
}

.detail-description {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-left: 3px solid rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.18);
  color: #fff !important;
  border-radius: 10px;
}

.card-row.type-geologist {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 226, 145, 0.28), transparent 28%),
    linear-gradient(135deg, rgba(123, 77, 31, 0.96), rgba(52, 38, 28, 0.96)) !important;
}

.profile-row input:invalid {
  border-color: rgba(255, 130, 130, 0.7);
}

.dev-test-tools {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px dashed rgba(255, 255, 255, 0.32);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.dev-test-tools h3 {
  margin: 0 0 0.35rem;
}

.dev-test-tools[hidden] {
  display: none !important;
}

/* v35 consolidated milestone goals */
.milestone-pack-button {
  white-space: nowrap;
}

.goal-card.milestone-ready-card {
  border-color: rgba(255, 217, 128, 0.85);
  box-shadow: 0 0 0 1px rgba(255, 217, 128, 0.28), 0 18px 42px rgba(255, 183, 77, 0.18);
}

.goal-card.milestone-ready-card .goal-title-row span {
  color: #ffe7a8;
  border-color: rgba(255, 231, 168, 0.5);
}

.goal-card.milestone-opened-card {
  opacity: 0.78;
}

@media (max-width: 620px) {
  .goals-panel .panel-heading-row {
    align-items: stretch;
  }

  .milestone-pack-button:not([hidden]) {
    width: 100%;
  }
}