/* ============================================
   ZEZIMA.NET — v3 Stylesheet
   Dark OSRS theme — refined gold + cyan accents,
   compact retro GP ticker, deeper card depth
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Source+Sans+3:wght@300;400;600;700&display=swap');

/* ---- Variables ---- */
:root {
  /* Core surfaces — neutral dark grey / black */
  --bg:          #0b0b0d;
  --bg-deep:     #050506;
  --bg-card:     #17171a;
  --bg-section:  #111114;
  --bg-inset:    #0c0c0e;

  /* Borders — neutral greys */
  --border:      #2a2a2e;
  --border-glow: #3a3a40;
  --border-gold: rgba(240, 200, 64, 0.22);

  /* Brand gold */
  --gold:        #d4b348;
  --gold-bright: #f5d96a;
  --gold-deep:   #a88628;
  --gold-dim:    #8a6e28;

  /* Cyan accent */
  --cyan:        #22d3ee;
  --cyan-bright: #67e8f9;
  --cyan-deep:   #0e7490;
  --cyan-dim:    #155e75;

  /* Text */
  --text:        #dcd6c4;
  --text-dim:    #8892a8;
  --text-bright: #f4ecd6;
  --text-muted:  #6b7488;

  --radius:      6px;
  --radius-sm:   4px;
  --radius-lg:   10px;
  --transition:  0.18s ease;
  --transition-slow: 0.3s ease;

  --font-display:'Cinzel', serif;
  --font-body:   'Source Sans 3', sans-serif;
  --max-w:       1120px;

  --shadow-card: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 179, 72, 0.04) inset;
  --shadow-gold: 0 0 18px rgba(212, 179, 72, 0.18);
  --shadow-cyan: 0 0 16px rgba(34, 211, 238, 0.25);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 255, 255, 0.025), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(212, 179, 72, 0.025), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-bright); }
img { display: block; }

/* ---- Header ---- */
.site-header {
  background:
    linear-gradient(180deg, rgba(22, 22, 26, 0.95) 0%, rgba(10, 10, 12, 0.95) 100%);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  position: relative;
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 179, 72, 0.35) 20%,
    rgba(34, 211, 238, 0.35) 50%,
    rgba(212, 179, 72, 0.35) 80%,
    transparent 100%);
}
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}
.logo-link {
  display: flex;
  align-items: center;
  justify-self: start;
  transition: filter var(--transition);
}
.logo-link:hover {
  filter: drop-shadow(0 0 8px rgba(245, 217, 106, 0.4));
}
.site-logo {
  height: 46px;
  width: auto;
}

.ad-banner-link {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-banner {
  height: auto;
  max-height: 70px;
  width: auto;
  max-width: 380px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  transition: transform var(--transition);
}
.ad-banner-link:hover .ad-banner {
  transform: translateY(-1px);
}

.donate-btn {
  background: linear-gradient(180deg, var(--cyan) 0%, var(--cyan-deep) 100%);
  color: #061018;
  padding: 7px 18px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all var(--transition);
  white-space: nowrap;
  justify-self: end;
  margin-right: 25px;
  border: 1px solid rgba(34, 211, 238, 0.5);
  box-shadow: 0 2px 10px rgba(34, 211, 238, 0.25);
}
.donate-btn:hover {
  background: linear-gradient(180deg, var(--cyan-bright) 0%, var(--cyan) 100%);
  color: #041018;
  box-shadow: 0 2px 16px rgba(34, 211, 238, 0.5);
  transform: translateY(-1px);
}

/* ---- Hero / Timer Section ---- */
.hero-section {
  background:
    linear-gradient(180deg, rgba(22, 22, 26, 0.6) 0%, var(--bg-section) 100%);
  border-bottom: 1px solid var(--border);
  padding: 24px 16px 22px;
  position: relative;
}
.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
/* Right-side cluster: Ban-O-Meter + Live GP Prices sit 10px apart and
   stretch to the same height. Cluster as a whole hugs the right edge
   while the timer floats on its own on the left. */
.hero-widgets {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex: 0 0 auto;
}
.hero-widgets .ban-block,
.hero-widgets .gp-block {
  margin-right: 0;
  display: flex;
}
/* Narrower Ban-O-Meter: it only needs room for the speedometer + rank label. */
.hero-widgets .ban-block { flex: 0 0 200px; }
.hero-widgets .gp-block  { flex: 0 0 280px; }
.hero-widgets .ban-block > .market-widget,
.hero-widgets .gp-block > .market-widget {
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* The GP widget dictates the row height. The Ban-O-Meter widget fills to
   match it via flex-stretch — internal content is sized smaller than the
   GP widget's natural height so the GP widget is always the tallest. */
.hero-widgets .ban-block > .market-widget > .ban-meter-body {
  flex: 1 1 auto;
  min-height: 0;
}

/* Timer */
.timer-block { flex: 1 1 460px; }
.timer-heading {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.timer-heading::before,
.timer-heading::after {
  content: '';
  flex: 0 0 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.timer-heading::after {
  background: linear-gradient(90deg, var(--gold-deep), transparent);
  flex: 1 1 auto;
  max-width: 80px;
}
.timer-heading::before {
  display: none;
}
.timer-display {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 82px;
}
.digits {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  color: var(--gold-bright);
  background:
    linear-gradient(180deg, #1a1a1d 0%, #08080a 100%);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
  padding: 8px 16px;
  letter-spacing: 0.04em;
  text-shadow: 0 0 18px rgba(245, 217, 106, 0.55), 0 2px 0 rgba(0, 0, 0, 0.5);
  transition: color var(--transition-slow);
  display: block;
  text-align: center;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(212, 179, 72, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.4);
  position: relative;
}
.timer-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 6px;
  font-weight: 600;
}
.timer-sep {
  font-size: 40px;
  color: var(--gold-dim);
  font-weight: 700;
  margin-top: -18px;
  align-self: center;
  line-height: 1;
  text-shadow: 0 0 12px rgba(138, 110, 40, 0.5);
}
.timer-note {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 12px;
  font-style: italic;
}

/* ---- GP Market Widget (v3 compact trading ticker) ---- */
/* Uses Source Sans 3 + tabular-nums (NOT Cinzel) for that trading terminal feel */

:root {
  --trade-up:    #22c55e;
  --trade-up-2:  #10b981;
  --trade-down:  #ef4444;
  --trade-down-2:#b91c1c;
  --trade-flat:  #64748b;
}

.gp-block {
  flex: 0 0 280px;
  margin-right: 30px;
}
.market-widget {
  background:
    linear-gradient(180deg, #1a1a1d 0%, #08080a 100%);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
  padding: 9px 11px 10px;
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(212, 179, 72, 0.1),
    inset 0 0 0 1px rgba(212, 179, 72, 0.03);
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
}
.market-widget::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-deep) 20%,
    var(--gold-bright) 50%,
    var(--gold-deep) 80%,
    transparent 100%);
  opacity: 0.75;
}

.market-widget-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212, 179, 72, 0.14);
}
.gp-title {
  display: flex;
  align-items: center;
  gap: 7px;
}
.gp-coin-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 4px rgba(245, 217, 106, 0.25));
}
.gp-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--gold-bright);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  text-shadow: 0 0 10px rgba(245, 217, 106, 0.3);
}

.market-updated {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.market-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  line-height: 1;
}
.market-delta.is-up {
  color: var(--trade-up);
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.35);
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.45);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.12);
}
.market-delta.is-down {
  color: var(--trade-down);
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.12);
}
.market-delta.is-flat {
  color: var(--trade-flat);
  background: rgba(100, 116, 139, 0.08);
  border-color: rgba(100, 116, 139, 0.25);
}
.gp-trend-icon {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}
.gp-trend-icon .gp-trend-up,
.gp-trend-icon .gp-trend-down,
.gp-trend-icon .gp-trend-flat {
  display: none;
}
.market-delta.is-up .gp-trend-icon .gp-trend-up     { display: block; fill: currentColor; }
.market-delta.is-down .gp-trend-icon .gp-trend-down { display: block; fill: currentColor; }
.market-delta.is-flat .gp-trend-icon .gp-trend-flat { display: block; fill: currentColor; }

/* Rows */
.market-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.market-row {
  display: grid;
  grid-template-columns: 66px 1fr;
  align-items: stretch;
  gap: 6px;
  padding: 2px 0;
  position: relative;
}
.market-row-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding-left: 2px;
  align-self: center;
}
.market-row-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
  filter: drop-shadow(0 0 4px currentColor);
}
.market-row-icon-buy  { color: #22c55e; fill: #22c55e; }
.market-row-icon-sell { color: #ef4444; fill: #ef4444; }
.market-row-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  line-height: 1;
}
.market-row-buyer .market-row-label {
  color: #22c55e;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.35);
}
.market-row-seller .market-row-label {
  color: #ef4444;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.35);
}
.market-row-delta {
  font-size: 9px;
  padding: 1px 4px;
  gap: 2px;
}
.market-row-delta .gp-trend-icon {
  width: 7px;
  height: 7px;
}
.market-row-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.market-metric {
  background:
    linear-gradient(180deg, rgba(30, 30, 34, 0.75) 0%, rgba(12, 12, 14, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  transition: all var(--transition);
}
/* Green/red Low/High trading colors.
   Buying: Low green, High red.  Selling: Low red, High green. */
.market-metric.metric-good {
  border-color: rgba(34, 197, 94, 0.28);
}
.market-metric.metric-good:hover {
  border-color: rgba(34, 197, 94, 0.5);
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.08) 0%, rgba(12, 12, 14, 0.8) 100%);
}
.market-metric.metric-bad {
  border-color: rgba(239, 68, 68, 0.28);
}
.market-metric.metric-bad:hover {
  border-color: rgba(239, 68, 68, 0.5);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.08) 0%, rgba(12, 12, 14, 0.8) 100%);
}
.market-metric-label {
  display: inline-block;
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  line-height: 1;
}
.market-metric strong {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
/* Price number colors follow Low/High semantic, not the row */
.market-metric.metric-good strong {
  color: var(--trade-up);
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.35);
}
.market-metric.metric-bad strong {
  color: var(--trade-down);
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
}

.market-meta {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed rgba(212, 179, 72, 0.1);
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.market-meta [data-gp-count] {
  color: var(--cyan-bright);
  font-weight: 700;
}
.market-meta [data-gp-updated] {
  color: var(--gold-bright);
  font-weight: 600;
  white-space: nowrap;
}
.market-widget-compact {
  width: min(100%, 380px);
}

/* Head actions — updated timestamp + refresh button */
.gp-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gp-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(245, 217, 106, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: var(--gold-bright);
  cursor: pointer;
  transition: all var(--transition);
  line-height: 0;
}
.gp-refresh-btn:hover {
  border-color: var(--gold-bright);
  background: rgba(245, 217, 106, 0.12);
  box-shadow: 0 0 8px rgba(245, 217, 106, 0.35);
  transform: rotate(-30deg);
}
.gp-refresh-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}
.gp-refresh-icon {
  width: 11px;
  height: 11px;
  fill: currentColor;
  display: block;
}
.gp-refresh-btn.is-spinning .gp-refresh-icon {
  animation: gp-spin 0.7s linear infinite;
}
@keyframes gp-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Single 24h trend banner — sits below the widget head, shows one arrow
   plus "GP/USD is up/down X% from past 24 hours". Replaces the old
   per-row .market-trend arrows. */
.gp-trend-24h {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 0 8px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  transition: all var(--transition);
}
.gp-trend-24h-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  display: block;
}
.gp-trend-24h-icon .trend-up,
.gp-trend-24h-icon .trend-down { display: none; }
.gp-trend-24h.is-up {
  color: var(--trade-up);
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.3);
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.35);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.1);
}
.gp-trend-24h.is-up .trend-up {
  display: block;
  fill: var(--trade-up);
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.55));
}
.gp-trend-24h.is-down {
  color: var(--trade-down);
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.1);
}
.gp-trend-24h.is-down .trend-down {
  display: block;
  fill: var(--trade-down);
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.55));
}

/* Legacy per-row arrow kept hidden in case markup lingers anywhere */
.market-trend { display: none; }

/* History link button — sibling of refresh, opens gp-history.php */
.gp-history-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(245, 217, 106, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: var(--gold-bright);
  text-decoration: none;
  line-height: 0;
  transition: all var(--transition);
}
.gp-history-btn:hover {
  border-color: var(--gold-bright);
  background: rgba(245, 217, 106, 0.12);
  box-shadow: 0 0 8px rgba(245, 217, 106, 0.35);
}
.gp-history-icon {
  width: 11px;
  height: 11px;
  fill: currentColor;
  display: block;
}

/* Row-head now has label + trend arrow inline */
.market-row-head {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

/* ---- Listings ---- */
.listings-main {
  padding: 14px 16px 28px;
}
.listings-container {
  max-width: var(--max-w);
  margin: 0 auto;
  column-count: 3;
  column-gap: 8px;
}

/* Section */
.listing-section {
  background:
    linear-gradient(180deg, var(--bg-card) 0%, #0c0c0f 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 8px;
  display: inline-block;
  width: 100%;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition);
  position: relative;
}
.listing-section:hover {
  border-color: var(--border-glow);
  box-shadow:
    0 4px 22px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(212, 179, 72, 0.08) inset;
}

.section-heading {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold-bright);
  background:
    linear-gradient(180deg, #1c1c20 0%, #101013 100%);
  padding: 8px 12px;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border-glow);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.section-heading::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(212, 179, 72, 0.5),
    transparent);
}
.sec-icon {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  max-width: 14px;
  max-height: 14px;
  fill: var(--gold-bright);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 0 4px rgba(245, 217, 106, 0.4));
}

/* Subsection */
.subsection { padding: 7px 10px 8px; }
.subsection + .subsection {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.subsection-heading {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--cyan-bright);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 5px;
  font-weight: 600;
  opacity: 0.85;
}

/* Listing Grid */
.listing-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Listing Card */
.listing-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
}
.listing-card:hover {
  background: linear-gradient(90deg,
    rgba(212, 179, 72, 0.1) 0%,
    rgba(212, 179, 72, 0.04) 100%);
  border-color: rgba(212, 179, 72, 0.18);
  transform: translateX(2px);
}
.listing-card.listing-link {
  color: var(--text);
  text-decoration: none;
}
.listing-card.listing-link:hover {
  color: var(--text-bright);
}

/* Icons */
.listing-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  image-rendering: auto;
  border-radius: 2px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.listing-name {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 400;
}
.listing-card:hover .listing-name {
  color: var(--gold-bright);
}

/* Partner promo card */
.partner-promo-card {
  flex-wrap: wrap;
  align-items: center;
}
.partner-promo-card .listing-icon { width: 18px; height: 18px; }
.promo-links {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  flex-wrap: wrap;
}
.promo-or { color: var(--text-dim); }

/* ---- Ad Bottom ---- */
.ad-bottom-wrap {
  text-align: center;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 7, 13, 0.4) 100%);
}
.ad-bottom-wrap a {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition);
}
.ad-bottom-wrap a:hover {
  transform: translateY(-1px);
}
.ad-bottom-wrap .ad-banner {
  max-height: 70px;
  max-width: 480px;
  width: auto;
  height: auto;
}

/* ---- Footer ---- */
.site-footer {
  background:
    linear-gradient(0deg, var(--bg-deep) 0%, var(--bg-section) 100%);
  border-top: 1px solid var(--border);
  padding: 20px 16px 16px;
  text-align: center;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34, 211, 238, 0.3) 30%,
    rgba(212, 179, 72, 0.3) 50%,
    rgba(34, 211, 238, 0.3) 70%,
    transparent 100%);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.footer-gp {
  width: min(100%, 420px);
}
/* Desktop: hide the live GP prices widget in the footer — it duplicates
   the hero widget on the homepage and clutters the footer on desktop.
   Still visible on tablet/mobile (<=900px) where the hero widget scrolls
   off-screen and the footer copy is the user's handy quick reference. */
@media (min-width: 901px) {
  .footer-gp { display: none !important; }
}

/* Fan-site disclaimer — sits at the very bottom of every page.
   Styled small and muted so it reads like a legal note, not a CTA. */
.footer-disclaimer {
  max-width: 720px;
  margin: 6px auto 0;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.01em;
  padding: 10px 16px;
  border-top: 1px dashed rgba(245, 217, 106, 0.15);
}
.footer-disclaimer strong {
  color: var(--text-dim);
  font-weight: 600;
}
.footer-disclaimer a {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-disclaimer a:hover { color: var(--gold-bright); }
.footer-links {
  display: flex;
  gap: 24px;
  font-size: 13px;
}
.footer-links a {
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  transition: color var(--transition);
}
.footer-links a:hover {
  color: var(--gold-bright);
}
.footer-copy {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Cache Notice */
.cache-notice {
  margin-top: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  color: var(--text-dim);
  box-shadow: var(--shadow-card);
}
.cache-notice button {
  background: linear-gradient(180deg, var(--cyan) 0%, var(--cyan-deep) 100%);
  color: #041018;
  border: 1px solid rgba(34, 211, 238, 0.5);
  border-radius: var(--radius-sm);
  padding: 4px 16px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  transition: all var(--transition);
}
.cache-notice button:hover {
  background: linear-gradient(180deg, var(--cyan-bright) 0%, var(--cyan) 100%);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.35);
}

/* =========================================================
   BAN-O-METER WIDGET
   Shares .market-widget shell with the GP widget for visual parity.
   Sits as a flex sibling of .gp-block inside .hero-inner.
   ========================================================= */
.ban-block {
  flex: 0 0 280px;
  margin-right: 30px;
}
/* Ban-O-Meter widget overrides:
   1. Allow the info tooltip to escape the widget bounds. Every ancestor
      between the tooltip and the viewport must not clip — .market-widget
      normally uses `overflow: hidden` for the gold top-strip, so we
      override it here AND on the ban-block / hero-widgets wrappers just
      to be bulletproof.
   2. Re-clip that gold ::before strip with a matching border-radius so
      it doesn't bleed past the rounded corners now that overflow:visible.
   3. Keep the title row on a single line — never wrap "Ban-O-Meter Beta". */
.hero-widgets,
.hero-widgets .ban-block,
.ban-meter-widget {
  overflow: visible !important;
}
.ban-meter-widget::before {
  border-radius: var(--radius) var(--radius) 0 0;
}
.ban-meter-widget .market-widget-head { flex-wrap: nowrap; }
.ban-meter-widget .gp-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.ban-meter-widget .gp-label { white-space: nowrap; }

/* Info chip: `?` icon pinned to the BOTTOM-RIGHT corner of the widget,
   with hover/focus tooltip explaining the beta status. */
.ban-meter-info {
  position: absolute;
  bottom: 6px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--gold-bright, #f5d96a);
  opacity: 0.55;
  cursor: help;
  flex-shrink: 0;
  transition: opacity 180ms ease, color 180ms ease;
  outline: none;
  z-index: 3;
}
.ban-meter-info:hover,
.ban-meter-info:focus { opacity: 1; }
.ban-meter-info-icon {
  width: 14px;
  height: 14px;
  display: block;
}
.ban-meter-info-tip {
  position: absolute;
  /* Open DOWNWARDS from the bottom-right icon. Because the icon sits at
     the bottom of the widget, "down" puts the tooltip in the empty
     space below the hero row where it can overlay freely without being
     visually swallowed by the speedometer above. */
  top: calc(100% + 8px);
  right: -4px;
  width: 260px;
  max-width: 80vw;
  padding: 10px 12px;
  font-family: var(--font-body, sans-serif);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim, #c7c7cc);
  background: linear-gradient(180deg, #1a1a1d 0%, #0c0c0e 100%);
  border: 1px solid rgba(212, 179, 72, 0.35);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  /* Very high so it wins against every page surface. */
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease;
  white-space: normal;
}
.ban-meter-info:hover .ban-meter-info-tip,
.ban-meter-info:focus .ban-meter-info-tip,
.ban-meter-info:focus-visible .ban-meter-info-tip {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ban-meter-info-tip::before {
  /* Arrow points UP from the TOP of the tooltip toward the icon above. */
  content: '';
  position: absolute;
  top: -6px;
  right: 8px;
  width: 10px;
  height: 10px;
  background: #1a1a1d;
  border-top: 1px solid rgba(212, 179, 72, 0.35);
  border-left: 1px solid rgba(212, 179, 72, 0.35);
  transform: rotate(45deg);
}

.ban-meter-beta-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0b0b0d;
  background: linear-gradient(180deg, #f5d96a 0%, #d4b348 100%);
  border: 1px solid rgba(212, 179, 72, 0.6);
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(245, 217, 106, 0.35);
  vertical-align: middle;
  line-height: 1.4;
}
.ban-meter-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 5px rgba(245, 217, 106, 0.25));
}
.ban-meter-body {
  padding: 2px 2px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  flex: 1 1 auto;
}

/* =========================================================
   SPEEDOMETER (half-dial with needle)
   ========================================================= */
.ban-meter-speedo-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
}
.ban-meter-speedo {
  width: 100%;
  max-width: 140px;
  height: auto;
  display: block;
  overflow: visible;
}
.ban-meter-speedo .speedo-seg {
  fill: none;
  stroke-width: 20;
  stroke-linecap: butt;
  filter: drop-shadow(0 0 2px currentColor);
  opacity: 0.95;
}
.ban-meter-speedo .seg-very-low { stroke: #22c55e; color: rgba(34,197,94,0.55); }
.ban-meter-speedo .seg-low      { stroke: #84cc16; color: rgba(132,204,22,0.50); }
.ban-meter-speedo .seg-mid      { stroke: #eab308; color: rgba(234,179,8,0.55); }
.ban-meter-speedo .seg-high     { stroke: #f97316; color: rgba(249,115,22,0.55); }
.ban-meter-speedo .seg-risky    { stroke: #ef4444; color: rgba(239,68,68,0.60); }

/* Needle: polygon is the arrow, circle is the hub. Rotated inline. */
.ban-meter-needle {
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Subtle idle wobble — applied to an inner <g> so it stacks on top of the
   inline rotation without fighting it. Irregular keyframe stops + organic
   easing make it look like a live analogue instrument. */
@keyframes ban-meter-needle-wobble {
  0%   { transform: rotate(-0.6deg); }
  13%  { transform: rotate(0.9deg); }
  27%  { transform: rotate(-0.3deg); }
  41%  { transform: rotate(1.1deg); }
  55%  { transform: rotate(-0.9deg); }
  69%  { transform: rotate(0.5deg); }
  83%  { transform: rotate(-0.4deg); }
  100% { transform: rotate(-0.6deg); }
}
.ban-meter-needle-wobble {
  transform-origin: 110px 110px;
  animation: ban-meter-needle-wobble 4.3s ease-in-out infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .ban-meter-needle-wobble { animation: none; }
}
.ban-meter-needle polygon {
  fill: var(--gold-bright, #f5d96a);
  filter: drop-shadow(0 0 3px rgba(245, 217, 106, 0.6));
}
.ban-meter-needle circle {
  fill: #1a1a1d;
  stroke: var(--gold-bright, #f5d96a);
  stroke-width: 2;
}

/* Recolor the needle to match the current bucket for extra pop. */
.ban-meter-widget.bucket-very-low .ban-meter-needle polygon { fill: #22c55e; filter: drop-shadow(0 0 4px rgba(34,197,94,0.7)); }
.ban-meter-widget.bucket-very-low .ban-meter-needle circle  { stroke: #22c55e; }
.ban-meter-widget.bucket-low      .ban-meter-needle polygon { fill: #84cc16; filter: drop-shadow(0 0 4px rgba(132,204,22,0.7)); }
.ban-meter-widget.bucket-low      .ban-meter-needle circle  { stroke: #84cc16; }
.ban-meter-widget.bucket-mid      .ban-meter-needle polygon { fill: #eab308; filter: drop-shadow(0 0 4px rgba(234,179,8,0.7)); }
.ban-meter-widget.bucket-mid      .ban-meter-needle circle  { stroke: #eab308; }
.ban-meter-widget.bucket-high     .ban-meter-needle polygon { fill: #f97316; filter: drop-shadow(0 0 4px rgba(249,115,22,0.8)); }
.ban-meter-widget.bucket-high     .ban-meter-needle circle  { stroke: #f97316; }
.ban-meter-widget.bucket-risky    .ban-meter-needle polygon { fill: #ef4444; filter: drop-shadow(0 0 5px rgba(239,68,68,0.9)); }
.ban-meter-widget.bucket-risky    .ban-meter-needle circle  { stroke: #ef4444; }

/* Rank legend under the speedometer. Colors mirror the arcs. */
.ban-meter-scale {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 2px;
  padding: 0;
}
.ban-meter-scale span {
  flex: 1 1 0;
  text-align: center;
  opacity: 0.85;
}
.ban-meter-scale .scale-vl { color: #22c55e; }
.ban-meter-scale .scale-lo { color: #84cc16; }
.ban-meter-scale .scale-md { color: #eab308; }
.ban-meter-scale .scale-hi { color: #f97316; }
.ban-meter-scale .scale-rk { color: #ef4444; }

/* Bucket label now centers under the dial. */
.ban-meter-body .ban-meter-bucket {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.12em;
  margin: 0;
}
.ban-meter-score-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
  font-family: var(--font-display);
  color: var(--gold-bright);
  line-height: 1;
}
.ban-meter-score {
  font-size: 40px;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(245, 217, 106, 0.28);
  font-variant-numeric: tabular-nums;
  transition: color 220ms ease;
}
.ban-meter-score-max {
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.ban-meter-bucket {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--text-dim);
  transition: color 220ms ease, text-shadow 220ms ease;
}
.ban-meter-bar {
  position: relative;
  height: 10px;
  width: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 5px;
}
.ban-meter-bar-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #22c55e 0%,
    #22c55e 18%,
    #eab308 38%,
    #f59e0b 58%,
    #ef4444 78%,
    #b91c1c 100%
  );
  box-shadow: 0 0 10px rgba(245, 217, 106, 0.25) inset;
  transition: width 500ms ease;
}
.ban-meter-bar-ticks {
  position: absolute; inset: 0;
  pointer-events: none;
}
.ban-meter-bar-ticks span {
  position: absolute;
  top: 1px; bottom: 1px;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.ban-meter-scale {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}

/* Bucket color accents — applied to the widget root */
.ban-meter-widget.bucket-very-low .ban-meter-score   { color: #22c55e; text-shadow: 0 0 14px rgba(34,197,94,0.35); }
.ban-meter-widget.bucket-very-low .ban-meter-bucket  { color: #22c55e; text-shadow: 0 0 8px rgba(34,197,94,0.35); }
.ban-meter-widget.bucket-low      .ban-meter-score   { color: #84cc16; text-shadow: 0 0 14px rgba(132,204,22,0.35); }
.ban-meter-widget.bucket-low      .ban-meter-bucket  { color: #84cc16; }
.ban-meter-widget.bucket-mid      .ban-meter-score   { color: #eab308; text-shadow: 0 0 14px rgba(234,179,8,0.35); }
.ban-meter-widget.bucket-mid      .ban-meter-bucket  { color: #eab308; }
.ban-meter-widget.bucket-high     .ban-meter-score   { color: #f97316; text-shadow: 0 0 14px rgba(249,115,22,0.45); }
.ban-meter-widget.bucket-high     .ban-meter-bucket  { color: #f97316; }
.ban-meter-widget.bucket-risky    .ban-meter-score   { color: #ef4444; text-shadow: 0 0 18px rgba(239,68,68,0.55); }
.ban-meter-widget.bucket-risky    .ban-meter-bucket  { color: #ef4444; text-shadow: 0 0 10px rgba(239,68,68,0.4); }
.ban-meter-widget.bucket-unknown  .ban-meter-score   { color: var(--text-dim); }
.ban-meter-widget.bucket-unknown  .ban-meter-bucket  { color: var(--text-dim); }

/* Footer-compact variant — keep the widget tight if dropped into .footer-inner */
.market-widget-compact.ban-meter-widget .ban-meter-score { font-size: 34px; }

/* ---- Signal breakdown pills ---- */
.ban-meter-pills {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ban-meter-pill {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: help;
  transition: border-color 180ms ease, background 180ms ease;
  min-width: 0;
}
.ban-meter-pill:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(245, 217, 106, 0.35);
}
.ban-meter-pill-name {
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ban-meter-pill-score {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  color: #e5e7eb;
}
.ban-meter-pill.is-stale { opacity: 0.45; }
.ban-meter-pill.pill-very-low .ban-meter-pill-score { color: #22c55e; }
.ban-meter-pill.pill-low      .ban-meter-pill-score { color: #84cc16; }
.ban-meter-pill.pill-mid      .ban-meter-pill-score { color: #eab308; }
.ban-meter-pill.pill-high     .ban-meter-pill-score { color: #f97316; }
.ban-meter-pill.pill-risky    .ban-meter-pill-score { color: #ef4444; }

/* ---- Sparkline ---- */
.ban-meter-spark-wrap {
  margin-top: 4px;
  margin-bottom: 4px;
  height: 28px;
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}
.ban-meter-spark {
  width: 100%;
  height: 100%;
  display: block;
}
.ban-meter-spark-line {
  fill: none;
  stroke: #f5d96a;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(245, 217, 106, 0.35));
}
.ban-meter-spark-fill {
  fill: rgba(245, 217, 106, 0.12);
  stroke: none;
}
.ban-meter-widget.bucket-risky .ban-meter-spark-line { stroke: #ef4444; filter: drop-shadow(0 0 4px rgba(239,68,68,0.45)); }
.ban-meter-widget.bucket-risky .ban-meter-spark-fill { fill: rgba(239, 68, 68, 0.14); }
.ban-meter-widget.bucket-high  .ban-meter-spark-line { stroke: #f97316; }
.ban-meter-widget.bucket-high  .ban-meter-spark-fill { fill: rgba(249, 115, 22, 0.14); }
.ban-meter-widget.bucket-mid   .ban-meter-spark-line { stroke: #eab308; }
.ban-meter-widget.bucket-mid   .ban-meter-spark-fill { fill: rgba(234, 179, 8, 0.12); }
.ban-meter-widget.bucket-low      .ban-meter-spark-line { stroke: #84cc16; }
.ban-meter-widget.bucket-low      .ban-meter-spark-fill { fill: rgba(132, 204, 22, 0.12); }
.ban-meter-widget.bucket-very-low .ban-meter-spark-line { stroke: #22c55e; }
.ban-meter-widget.bucket-very-low .ban-meter-spark-fill { fill: rgba(34, 197, 94, 0.12); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .listings-container { column-count: 2; }
}

/* Stacked layout for narrow browsers: Timer → Ban-O-Meter → GP widget,
   each full-width and centered. Triggers early enough that the cluster
   never runs out of horizontal room next to the timer. */
@media (max-width: 1100px) {
  .hero-inner {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 16px;
  }
  .timer-block {
    flex: 1 1 auto;
    width: 100%;
    text-align: center;
  }
  .timer-block .timer-display { justify-content: center; }
  .hero-widgets {
    flex: 1 1 auto;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-widgets .ban-block,
  .hero-widgets .gp-block {
    flex: 1 1 auto;
    width: 100%;
    margin-right: 0;
  }
  .hero-widgets .ban-block > .market-widget,
  .hero-widgets .gp-block > .market-widget {
    width: 100%;
  }
  /* Cap the speedometer so it doesn't blow up when the widget is full-width. */
  .ban-meter-speedo { max-width: 180px; }
}

@media (max-width: 768px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
  }
  .ad-banner   { max-height: 52px; max-width: 240px; }
  .site-logo   { height: 36px; }
  .timer-display { justify-content: center; }
  .digits      { font-size: 38px; padding: 6px 12px; }
  .timer-sep   { font-size: 30px; }
  .timer-unit  { min-width: 70px; }
  .timer-heading { justify-content: center; }
  /* Keep the widget head horizontal on mobile too: title on the left,
     action icons (history, refresh) pinned to the upper-right corner. */
  .market-widget-head {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
}

@media (max-width: 540px) {
  .listings-container { column-count: 1; }
  .header-inner { grid-template-columns: 1fr auto; }
  .ad-banner-link { display: none; }
  .digits    { font-size: 32px; }
  .timer-sep { font-size: 24px; }
  .ad-banner { max-width: 180px; max-height: 44px; }
  .donate-btn { margin-right: 0; padding: 6px 14px; font-size: 11px; }
  .market-metric strong { font-size: 14px; }
  .market-row { grid-template-columns: 60px 1fr; }
}