/* Pet Universe Values v36 — game-matched rarity text, neutral surfaces */

/*
  Important design rule:
  The supplied rarity HEX sequences are used as typography / small accents only.
  Panels, cards, modal surfaces and the chart canvas stay neutral.
*/

:root{
  --surface-0:#0b0910;
  --surface-1:#100d14;
  --surface-2:#151119;
  --surface-3:#1b1620;
  --surface-border:rgba(255,255,255,.075);
  --surface-border-strong:rgba(255,255,255,.11);
}

/* ---------- neutral collection sections ---------- */
.rarity-section[data-rarity='exclusive'],
.rarity-section[data-rarity='mythical'],
.rarity-section[data-rarity='secret']{
  border:1px solid var(--surface-border)!important;
  background:linear-gradient(180deg,rgba(17,14,20,.94),rgba(10,8,13,.96))!important;
  box-shadow:0 18px 52px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.03)!important;
}

/* Rarity headings use the supplied in-game colors as text, not as panel backgrounds. */
.rarity-section[data-rarity='exclusive'] .rarity-section-head h2,
.rarity-section[data-rarity='mythical'] .rarity-section-head h2,
.rarity-section[data-rarity='secret'] .rarity-section-head h2{
  background:var(--section-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  -webkit-text-fill-color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,.5),0 3px 7px rgba(0,0,0,.45);
  letter-spacing:-.015em;
}

/* ---------- cards: ordinary dark background ---------- */
.value-card[data-rarity='exclusive'] .card-button,
.value-card[data-rarity='mythical'] .card-button,
.value-card[data-rarity='secret'] .card-button{
  border:1px solid color-mix(in srgb,var(--rarity) 38%,rgba(255,255,255,.075))!important;
  background:linear-gradient(180deg,rgba(24,20,28,.97),rgba(12,10,15,.98))!important;
  box-shadow:0 15px 36px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.value-card[data-rarity='exclusive'] .card-button:hover,
.value-card[data-rarity='mythical'] .card-button:hover,
.value-card[data-rarity='secret'] .card-button:hover{
  border-color:color-mix(in srgb,var(--rarity) 68%,rgba(255,255,255,.12))!important;
  box-shadow:0 22px 48px rgba(0,0,0,.34),0 0 18px color-mix(in srgb,var(--rarity) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.065)!important;
}

.value-card[data-rarity='exclusive'] .card-art,
.value-card[data-rarity='mythical'] .card-art,
.value-card[data-rarity='secret'] .card-art{
  background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.065),transparent 45%),linear-gradient(180deg,#17141b,#100d13)!important;
  border-color:rgba(255,255,255,.04)!important;
}

/* Small ambient tint only — no full rarity wash. */
.value-card[data-rarity='exclusive'] .card-ambient,
.value-card[data-rarity='mythical'] .card-ambient,
.value-card[data-rarity='secret'] .card-ambient{
  opacity:.34!important;
}

/* ---------- rarity labels: game-style gradient lettering ---------- */
.value-card[data-rarity='exclusive'] .rarity-badge,
.value-card[data-rarity='mythical'] .rarity-badge,
.value-card[data-rarity='secret'] .rarity-badge,
.detail-modal[data-rarity='exclusive'] .modal-rarity,
.detail-modal[data-rarity='mythical'] .modal-rarity,
.detail-modal[data-rarity='secret'] .modal-rarity{
  background:rgba(8,7,11,.74)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 7px 16px rgba(0,0,0,.28)!important;
  animation:none!important;
}

.value-card[data-rarity='exclusive'] .rarity-badge i,
.value-card[data-rarity='mythical'] .rarity-badge i,
.value-card[data-rarity='secret'] .rarity-badge i,
.detail-modal[data-rarity='exclusive'] .modal-rarity i,
.detail-modal[data-rarity='mythical'] .modal-rarity i,
.detail-modal[data-rarity='secret'] .modal-rarity i{display:none!important}

.value-card[data-rarity='exclusive'] .rarity-text,
.value-card[data-rarity='mythical'] .rarity-text,
.value-card[data-rarity='secret'] .rarity-text,
.detail-modal[data-rarity='exclusive'] .rarity-text,
.detail-modal[data-rarity='mythical'] .rarity-text,
.detail-modal[data-rarity='secret'] .rarity-text{
  display:inline-block;
  background:var(--rarity-gradient);
  background-size:100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  -webkit-text-fill-color:transparent;
  font-weight:950;
  letter-spacing:-.02em;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.88)) drop-shadow(0 0 2px rgba(0,0,0,.72));
}

/* ---------- modal: neutral background, rarity only as slim accent ---------- */
.detail-modal[data-rarity='exclusive'],
.detail-modal[data-rarity='mythical'],
.detail-modal[data-rarity='secret']{
  border:1px solid color-mix(in srgb,var(--modal-rarity) 48%,rgba(255,255,255,.08))!important;
  background:#0d0b10!important;
  box-shadow:0 40px 110px rgba(0,0,0,.68),0 0 30px color-mix(in srgb,var(--modal-rarity) 8%,transparent)!important;
}
.detail-modal[data-rarity='exclusive'] .modal-grid,
.detail-modal[data-rarity='mythical'] .modal-grid,
.detail-modal[data-rarity='secret'] .modal-grid{
  background:linear-gradient(180deg,#100d13,#0d0b10)!important;
}
.detail-modal[data-rarity='exclusive'] .modal-visual,
.detail-modal[data-rarity='mythical'] .modal-visual,
.detail-modal[data-rarity='secret'] .modal-visual{
  background:radial-gradient(circle at 50% 66%,rgba(255,90,35,.10),transparent 30%),linear-gradient(180deg,#151119,#0b0910 76%)!important;
}

/* ---------- market history: entirely neutral surfaces ---------- */
.market-panel-v35{
  border:1px solid var(--surface-border)!important;
  background:linear-gradient(165deg,rgba(23,19,27,.96),rgba(12,10,15,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 38px rgba(0,0,0,.12)!important;
}
.market-panel-v35::before{display:none!important}
.market-head-v35 .tool-label{color:#f2a94b!important}
.history-subtitle{color:var(--muted)!important}

.market-summary-v35 .history-stat,
.history-stat-current{
  background:linear-gradient(180deg,rgba(255,255,255,.038),rgba(0,0,0,.13))!important;
  border:1px solid rgba(255,255,255,.055)!important;
}

.history-range{
  background:rgba(0,0,0,.18)!important;
  border-color:rgba(255,255,255,.055)!important;
}
.history-range button.active{
  color:#fff!important;
  background:#30253b!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 5px 14px rgba(0,0,0,.18)!important;
}
.history-range button:focus-visible{outline-color:#8e62b5!important}
.history-status.is-neutral{color:#c9c0d2!important}

.market-chart-v35,
.history-chart-shell{
  background:linear-gradient(180deg,#151219,#0f0d12)!important;
  border:1px solid rgba(255,255,255,.06)!important;
}
.market-chart-v35::before{
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px)!important;
}
.history-empty-icon{
  background:#1b1720!important;
  border-color:rgba(255,255,255,.065)!important;
  color:#b79acb!important;
}
.history-tooltip-v35{
  background:rgba(11,9,14,.96)!important;
  border-color:rgba(255,255,255,.09)!important;
  box-shadow:0 12px 26px rgba(0,0,0,.36)!important;
}
.history-first-snapshot rect{
  fill:#121016!important;
  stroke:rgba(255,255,255,.11)!important;
}

/* Keep rarity colors where they are useful: the actual chart line / points. */
.history-line{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--modal-rarity) 24%,transparent))!important}
.history-point{fill:#121016!important}

/* neutral value panel, ticket remains the visual value cue */
.value-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
  border-color:rgba(255,255,255,.075)!important;
}
.value-panel > div{
  background:rgba(255,255,255,.045)!important;
  box-shadow:none!important;
}

/* ---------- light mode ---------- */
html[data-theme='light'] .rarity-section[data-rarity='exclusive'],
html[data-theme='light'] .rarity-section[data-rarity='mythical'],
html[data-theme='light'] .rarity-section[data-rarity='secret']{
  background:linear-gradient(180deg,#fff,#fbf8f6)!important;
  border-color:rgba(70,47,36,.10)!important;
}
html[data-theme='light'] .value-card[data-rarity='exclusive'] .card-button,
html[data-theme='light'] .value-card[data-rarity='mythical'] .card-button,
html[data-theme='light'] .value-card[data-rarity='secret'] .card-button{
  background:linear-gradient(180deg,#fff,#fbf7f3)!important;
  border-color:color-mix(in srgb,var(--rarity) 34%,rgba(70,47,36,.11))!important;
}
html[data-theme='light'] .value-card[data-rarity='exclusive'] .card-art,
html[data-theme='light'] .value-card[data-rarity='mythical'] .card-art,
html[data-theme='light'] .value-card[data-rarity='secret'] .card-art{
  background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.95),transparent 45%),linear-gradient(180deg,#fff,#f6f1ed)!important;
}
html[data-theme='light'] .detail-modal[data-rarity='exclusive'],
html[data-theme='light'] .detail-modal[data-rarity='mythical'],
html[data-theme='light'] .detail-modal[data-rarity='secret']{
  background:#fffaf7!important;
}
html[data-theme='light'] .detail-modal[data-rarity='exclusive'] .modal-grid,
html[data-theme='light'] .detail-modal[data-rarity='mythical'] .modal-grid,
html[data-theme='light'] .detail-modal[data-rarity='secret'] .modal-grid{
  background:linear-gradient(180deg,#fff,#fff9f5)!important;
}
html[data-theme='light'] .detail-modal[data-rarity='exclusive'] .modal-visual,
html[data-theme='light'] .detail-modal[data-rarity='mythical'] .modal-visual,
html[data-theme='light'] .detail-modal[data-rarity='secret'] .modal-visual{
  background:linear-gradient(180deg,#f7f3f1,#eee8e4)!important;
}
html[data-theme='light'] .market-panel-v35{
  background:linear-gradient(180deg,#fff,#fbf7f4)!important;
  border-color:rgba(70,47,36,.10)!important;
}
html[data-theme='light'] .market-chart-v35,
html[data-theme='light'] .history-chart-shell{
  background:linear-gradient(180deg,#fff,#f7f3f0)!important;
  border-color:rgba(70,47,36,.10)!important;
}
html[data-theme='light'] .history-range button.active{
  color:#fff!important;
  background:#3a2d45!important;
}
html[data-theme='light'] .history-first-snapshot rect{fill:#fff!important;stroke:rgba(70,47,36,.14)!important}
html[data-theme='light'] .history-tooltip-v35{background:rgba(255,255,255,.97)!important;border-color:rgba(70,47,36,.14)!important}

/* no moving rainbow rarity labels */
.value-card[data-rarity='exclusive'] .rarity-badge,
.value-card[data-rarity='mythical'] .rarity-badge,
.value-card[data-rarity='secret'] .rarity-badge,
.detail-modal[data-rarity='exclusive'] .modal-rarity,
.detail-modal[data-rarity='mythical'] .modal-rarity,
.detail-modal[data-rarity='secret'] .modal-rarity{
  animation:none!important;
}