/* Trade.Game leaderboard — the logo's world: black, lime green, brushed silver; italic Exo 2 like the wordmark. */
:root {
  --bg: #050605;
  --panel: #0d100c;
  --panel-2: #121711;
  --line: #1d241b;
  --text: #eef3ea;
  --muted: #8d9a88;
  --lime: #8fe31f;
  --lime-2: #b8f25a;
  --lime-dim: rgba(143, 227, 31, 0.14);
  --silver: linear-gradient(180deg, #ffffff 0%, #c9cfd3 55%, #9aa2a8 100%);
  --red: #ff6b5e;
  --display: "Exo 2", "Arial Narrow", system-ui, sans-serif;
  --body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }
.glow { position: fixed; inset: -20vh -10vw auto auto; width: 70vw; height: 70vh; pointer-events: none;
  background: radial-gradient(closest-side, rgba(143, 227, 31, 0.13), transparent 70%); filter: blur(10px); z-index: 0; }
header.top, main { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding-inline: 16px; }
header.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px 8px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { border-radius: 12px; flex: none; }
.word { font: italic 800 24px/1 var(--display); letter-spacing: 0.01em; }
.word span { color: #fff; } .word b { color: var(--lime); font-weight: 800; }
.sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.live { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); flex: none; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(143, 227, 31, 0.6); animation: pulse 1.8s infinite; }
.live span { font: italic 800 12px/1 var(--display); letter-spacing: 0.12em; color: var(--lime); }
.live small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.live.off i { background: #6b7468; animation: none; } .live.off span { color: #6b7468; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(143, 227, 31, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(143, 227, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(143, 227, 31, 0); } }

.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 28px 18px; }
h1 { margin: 0; font: italic 900 clamp(34px, 7vw, 64px)/0.95 var(--display); text-transform: uppercase; letter-spacing: -0.01em;
  background: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.prize { display: flex; flex-direction: column; align-items: flex-end; padding: 10px 18px; border: 2px solid var(--lime); border-radius: 14px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); background: var(--lime-dim); padding-inline: 28px; }
.prize b { font: italic 900 30px/1 var(--display); color: var(--lime-2); }
.prize span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); margin-top: 4px; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.stats div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.stats b { display: block; font: italic 800 24px/1.1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats span { color: var(--muted); font-size: 12px; }

.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; align-items: end; margin-bottom: 26px; }
.podium:empty { display: none; }
.pod { position: relative; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 16px; padding: 16px; min-width: 0; text-align: center; }
.pod.p1 { border-color: rgba(143, 227, 31, 0.55); box-shadow: 0 0 40px rgba(143, 227, 31, 0.12); padding-block: 24px; }
.pod .medal { font: italic 900 40px/1 var(--display); color: var(--lime); }
.pod.p2 .medal, .pod.p3 .medal { background: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pod .nm { font-weight: 700; font-size: 17px; margin-top: 6px; overflow-wrap: anywhere; }
.pod .seq { color: var(--muted); font-size: 12px; }
.pod .net { font: italic 800 26px/1.1 var(--display); margin-top: 8px; font-variant-numeric: tabular-nums; }
.pod .meta { color: var(--muted); font-size: 12px; margin-top: 4px; }

.board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
h2 { margin: 0; font: italic 800 22px/1.1 var(--display); text-transform: uppercase; }
.search input { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 9px 12px; font: 14px var(--body); width: min(300px, 70vw); }
.search input:focus { outline: 2px solid var(--lime); outline-offset: 1px; border-color: transparent; }
.table { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.tr { display: grid; grid-template-columns: 54px minmax(140px, 2fr) 70px minmax(110px, 1.3fr) 96px 96px 104px 92px; gap: 10px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tr.th { border-top: 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; padding-block: 10px; background: var(--panel-2); }
.tr .r { text-align: right; }
.tr .pl { font: italic 800 18px/1 var(--display); color: var(--muted); }
.tr.top3 .pl { color: var(--lime); }
.tr .who { min-width: 0; }
.tr .who b { font-weight: 600; overflow-wrap: anywhere; }
.tr .who small { color: var(--muted); margin-left: 6px; }
.wl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wl .bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 107, 94, 0.55); overflow: hidden; min-width: 30px; }
.wl .bar i { display: block; height: 100%; background: var(--lime); }
.wl small { color: var(--muted); white-space: nowrap; font-size: 12px; }
.pos { color: var(--lime-2); } .neg { color: var(--red); }
.tr .net { font: italic 800 17px/1 var(--display); }
.tr.flash { animation: flash 2.4s ease-out; }
@keyframes flash { 0% { background: rgba(143, 227, 31, 0.22); } 100% { background: transparent; } }
.tr.hit { background: rgba(143, 227, 31, 0.08); }
.empty { color: var(--muted); text-align: center; padding: 26px 12px; }

.cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-block: 28px 18px; padding: 20px; border-radius: 16px;
  border: 1px solid rgba(143, 227, 31, 0.35); background: linear-gradient(120deg, rgba(143, 227, 31, 0.10), transparent 60%), var(--panel); }
.cta h3 { margin: 0 0 4px; font: italic 800 20px/1.1 var(--display); text-transform: uppercase; }
.cta p { margin: 0; color: var(--muted); max-width: 52ch; }
.btn { display: inline-block; background: var(--lime); color: #071003; font-weight: 700; text-decoration: none; padding: 12px 20px; border-radius: 12px; }
.btn:hover, .btn:focus-visible { background: var(--lime-2); outline: none; }
footer { color: var(--muted); font-size: 12px; padding-block: 8px 40px; max-width: 70ch; }

@media (max-width: 860px) {
  .tr.th { display: none; }
  .tr { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "pl who net" "pl wl wl" "pl meta meta"; row-gap: 6px; }
  .tr .pl { grid-area: pl; align-self: start; padding-top: 2px; }
  .tr .who { grid-area: who; }
  .tr .net { grid-area: net; text-align: right; }
  .tr .wl { grid-area: wl; }
  .tr .c-trades, .tr .c-profit, .tr .c-loss, .tr .c-best { display: none; }
  .tr .meta { grid-area: meta; display: block; color: var(--muted); font-size: 12px; }
}
@media (min-width: 861px) { .tr .meta { display: none; } }
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .podium { grid-template-columns: 1fr; }
  .podium .p1 { order: -1; }
  .live small { display: none; }
  .prize { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .live i, .tr.flash { animation: none; } }