/* v38 — cleaner header, brighter names, improved volcano particles, stronger history trend visuals */

:root{
  --trend-up:#45e88c;
  --trend-up-2:#97ffbb;
  --trend-down:#ff6060;
  --trend-down-2:#ff9696;
  --panel-darker:rgba(13,10,15,.96);
}

/* remove duplicate collection kicker and align title with search area */
#sectionKicker,
.page-title-wrap .eyebrow{display:none!important}
.page-header{
  min-height:88px!important;
  grid-template-columns:minmax(220px,.64fr) minmax(0,1.36fr)!important;
  align-items:center!important;
  background:linear-gradient(180deg,rgba(15,11,18,.96),rgba(10,8,13,.98))!important;
}
.page-title-wrap{
  display:flex!important;
  align-items:center!important;
  min-height:52px!important;
}
.page-title-wrap h1{
  margin:0!important;
  color:#fff9f2!important;
  text-shadow:0 1px 0 rgba(255,255,255,.08),0 8px 20px rgba(0,0,0,.25)!important;
}
.search-box,
.sort-trigger,
.variant-switch,
.catalog-card,
.content-card,
.page-header,
.sidebar .side-card{
  background-color:rgba(14,11,18,.92)!important;
}

/* slightly brighter name-related labels */
.modal-kicker,
.catalog-label,
.tool-label,
.detail-box span,
.history-stat span,
.history-subtitle,
#modalDescription,
#historyHint,
#historyLastUpdated{
  color:#d9c9bf!important;
}
.modal-info h2,
.detail-box strong,
.value-panel strong,
.history-stat strong,
#historyTitle{
  color:#fff7ef!important;
}

/* keep rarity as user wanted */

/* better volcano particles */
.modal-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.modal-particles::before,
.modal-particles::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:70px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ffbf5f;
  filter:blur(.1px);
}
.modal-particles::before{
  transform:translateX(-140px);
  box-shadow:
    24px -18px 0 1px #ff8b47,
    48px 16px 0 0 #ffd26d,
    86px -54px 0 1px #ff7842,
    122px -10px 0 0 #ffbc57,
    -16px 42px 0 0 #ff7a37,
    -54px -24px 0 1px #ffc96a,
    -94px 10px 0 0 #ff6d33,
    -122px -60px 0 1px #ffb24a,
    160px -90px 0 1px rgba(255,214,105,.92),
    -168px -96px 0 1px rgba(255,163,70,.88),
    204px -32px 0 0 rgba(255,121,57,.9),
    -214px -10px 0 1px rgba(255,203,84,.82);
  animation:volcanoSparkRiseA 5.2s ease-in-out infinite;
}
.modal-particles::after{
  transform:translateX(-30px) scale(.8);
  box-shadow:
    32px -34px 0 0 #ffb84f,
    64px -78px 0 1px #ff6a39,
    98px -42px 0 0 #ffd975,
    -24px -28px 0 0 #ff8d3f,
    -66px -74px 0 1px #ffc35b,
    -116px -26px 0 0 #ff6b3b,
    144px -126px 0 1px rgba(255,188,74,.85),
    -146px -130px 0 1px rgba(255,121,66,.85),
    6px -118px 0 1px rgba(255,225,130,.82);
  animation:volcanoSparkRiseB 4.4s ease-in-out infinite 1.1s;
}
@keyframes volcanoSparkRiseA{
  0%{opacity:.15;transform:translateX(-140px) translateY(22px) scale(.72)}
  20%{opacity:.95}
  100%{opacity:0;transform:translateX(-120px) translateY(-200px) scale(1.08)}
}
@keyframes volcanoSparkRiseB{
  0%{opacity:.12;transform:translateX(-30px) translateY(28px) scale(.62)}
  18%{opacity:.96}
  100%{opacity:0;transform:translateX(-12px) translateY(-218px) scale(1.02)}
}
html[data-motion='off'] .modal-particles::before,
html[data-motion='off'] .modal-particles::after{animation:none!important;opacity:.55}

/* darker but same layout modal/history */
.detail-modal,
.modal-grid,
.market-panel-v35,
.history-chart-shell,
.value-panel,
.detail-box{
  background-color:var(--panel-darker)!important;
}
.market-panel-v35{
  background:linear-gradient(180deg,rgba(18,14,21,.98),rgba(11,9,14,.99))!important;
}
.history-chart-shell{
  background:linear-gradient(180deg,#141018,#0e0b11)!important;
}

/* improved history visuals with arrows and up/down colors */
#historyChange.is-up,
#historyChangeAmount.is-up,
.history-status.is-up{color:var(--trend-up)!important}
#historyChange.is-down,
#historyChangeAmount.is-down,
.history-status.is-down{color:var(--trend-down)!important}
#historyChange.is-neutral,
#historyChangeAmount.is-neutral{color:#fff7ef!important}

.history-stat strong.is-up{
  color:var(--trend-up)!important;
  text-shadow:0 0 12px rgba(69,232,140,.18);
}
.history-stat strong.is-down{
  color:var(--trend-down)!important;
  text-shadow:0 0 12px rgba(255,96,96,.16);
}
.history-stat small.is-up{color:var(--trend-up-2)!important}
.history-stat small.is-down{color:var(--trend-down-2)!important}

.history-point.is-up{fill:#121016!important;stroke:var(--trend-up)!important;filter:drop-shadow(0 0 6px rgba(69,232,140,.26))}
.history-point.is-down{fill:#121016!important;stroke:var(--trend-down)!important;filter:drop-shadow(0 0 6px rgba(255,96,96,.22))}
.history-point.is-neutral{fill:#121016!important;stroke:#b57cf8!important}
.history-point.is-last.is-up{fill:var(--trend-up)!important;stroke:#effff5!important;filter:drop-shadow(0 0 10px rgba(69,232,140,.48))!important}
.history-point.is-last.is-down{fill:var(--trend-down)!important;stroke:#fff2f2!important;filter:drop-shadow(0 0 10px rgba(255,96,96,.42))!important}
.history-point.is-last.is-neutral{fill:#b57cf8!important;stroke:#fff!important}
.history-focus-dot.is-up{fill:var(--trend-up)!important;stroke:#fff!important;filter:drop-shadow(0 0 10px rgba(69,232,140,.5))!important}
.history-focus-dot.is-down{fill:var(--trend-down)!important;stroke:#fff!important;filter:drop-shadow(0 0 10px rgba(255,96,96,.42))!important}
.history-focus-dot.is-neutral{fill:#b57cf8!important;stroke:#fff!important}
.history-line.is-up{filter:drop-shadow(0 0 10px rgba(69,232,140,.32))!important}
.history-line.is-down{filter:drop-shadow(0 0 10px rgba(255,96,96,.28))!important}
.history-area.is-up{opacity:.95}
.history-area.is-down{opacity:.95}

/* brighten section headings a bit but keep list/layout the same */
.rarity-section-head h2,
.card-name,
#modalTitle{
  color:#fffaf4!important;
}

@media (max-width:980px){
  .page-title-wrap{min-height:auto!important}
}