:root {
  --bg: #090c14;
  --bg-glow: radial-gradient(1200px 600px at 20% -10%, rgba(52, 211, 153, 0.10), transparent 60%),
             radial-gradient(1000px 500px at 100% 0%, rgba(96, 165, 250, 0.10), transparent 55%);
  --panel: #121826;
  --panel-hover: #161d2e;
  --border: #232b3d;
  --border-soft: #1b2233;
  --text: #edf1f8;
  --muted: #8b96ab;
  --muted-2: #5f6a80;
  --accent: #34d399;
  --accent-strong: #10b981;
  --accent2: #60a5fa;
  --gold: #fbbf24;
  --silver: #cbd5e1;
  --bronze: #f0975a;
  --radius: 14px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(rgba(6, 8, 13, 0.82), rgba(6, 8, 13, 0.93)),
    url("background.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

header {
  position: relative;
  border-bottom: 1px solid var(--border-soft);
  z-index: 10;
}

/* The banner text is baked into the PNG, so it must never be cropped —
   object-fit: cover looked fine at one viewport width but silently clipped
   the subtitle at others (wide monitors squeeze the visible vertical slice
   down when height is fixed and width stretches to 100%). Sizing the image
   itself with width/height: auto + matching max-width/max-height lets the
   browser pick whichever axis is limiting and always show the whole image,
   centered, at any viewport width or zoom level. */
.header-banner {
  width: 100%;
  max-height: 260px;
  overflow: hidden;
  text-align: center;
}

.header-image {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 260px;
}

.next-update {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(9, 12, 20, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 9px 18px;
  text-align: center;
  min-width: 140px;
  line-height: normal;
}
.next-update .label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.next-update .countdown {
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.network-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.network-stat {
  flex: 1 1 200px;
  background: #0a0e18;
  padding: 12px 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.network-stat .label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: "Courier New", ui-monospace, monospace;
  white-space: nowrap;
}
.network-stat .value {
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.network-stat .value.money { color: var(--accent); }
.network-stat .value.burn { color: #fb7185; }
.network-stat .value.count { color: #fb7185; }

.status {
  color: var(--muted);
  font-size: 0.85rem;
  padding: 10px 16px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  line-height: 1.5;
}

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

.stat-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.stat-tile:hover { transform: translateY(-2px); border-color: var(--accent2); }
.stat-tile .label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stat-tile .value {
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  font-weight: 800;
  margin-top: 6px;
  letter-spacing: -0.01em;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 780px) {
  .grid { grid-template-columns: 1fr; }
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 4px; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; }
.hint { color: var(--muted); font-size: 0.82rem; margin: 0 0 16px; }

.chart-wrap { position: relative; width: 100%; height: 260px; }
.chart-wrap.tall { height: 320px; }
.chart-wrap canvas { max-width: 100%; }

.table-scroll {
  overflow-x: auto;
  margin: 0 -6px;
  padding: 0 6px;
  -webkit-overflow-scrolling: touch;
}

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 560px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
th:first-child, td:first-child { padding-left: 4px; }
th { color: var(--muted); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: var(--panel-hover); }
tbody tr:last-child td { border-bottom: none; }

.rank { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.72rem; font-weight: 800; color: #06231b; background: var(--muted-2); }
.rank.gold { background: var(--gold); }
.rank.silver { background: var(--silver); }
.rank.bronze { background: var(--bronze); }

.asset-name { color: var(--muted); font-weight: 400; }

.explain p, .explain li { color: var(--muted); line-height: 1.6; font-size: 0.9rem; }
.explain ul { margin: 10px 0 0; padding-left: 20px; }
.explain li { margin-bottom: 4px; }
.explain code {
  background: #0e1420;
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--accent2);
  font-size: 0.85em;
}
.explain a { color: var(--accent2); text-decoration: none; }
.explain a:hover { text-decoration: underline; }

.donate { border-color: rgba(52, 211, 153, 0.25); background: linear-gradient(180deg, rgba(52, 211, 153, 0.06), var(--panel) 60%); }
.donate p { color: var(--muted); line-height: 1.6; font-size: 0.9rem; margin: 0 0 16px; }
.donate .wallet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.donate .wallet {
  flex: 1;
  min-width: 0;
  background: #0e1420;
  border: 1px solid var(--border);
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--accent);
  font-size: 0.85rem;
  word-break: break-all;
}
.copy-btn {
  background: transparent;
  color: var(--accent2);
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.copy-btn:hover { border-color: var(--accent2); background: rgba(96, 165, 250, 0.08); }

footer {
  text-align: center;
  color: var(--muted-2);
  font-size: 0.78rem;
  padding: 30px 20px 50px;
}
footer a { color: var(--muted); }

@media (max-width: 560px) {
  main { padding: 20px 14px 40px; gap: 16px; }
  .card { padding: 18px; }
  .header-banner { max-height: 150px; }
  .header-image { max-height: 150px; }
  .next-update {
    top: 8px;
    right: 8px;
    min-width: 0;
    padding: 5px 10px;
  }
  .next-update .label { font-size: 0.55rem; }
  .next-update .countdown { font-size: 0.85rem; }
  .chart-wrap { height: 220px; }
  .donate .wallet-row { flex-direction: column; align-items: stretch; }
  .copy-btn { width: 100%; }
}