/* ============ TODAY RUNNER — game-terminal theme ============ */
:root {
  --bg: #131126;
  --bg2: #17142e;
  --card: #1e1b3a;
  --card2: #262148;
  --line: rgba(255, 255, 255, 0.07);
  --text: #eeeaff;
  --muted: #8f88b8;
  --faint: #5c5686;
  --hot1: #ff8a00;
  --hot2: #ff2d78;
  --hot3: #a24bff;
  --cyan: #2fd8ff;
  --green: #2fe6a8;
  --red: #ff4d5e;
  --gold: #ffc84a;
  --grad-hot: linear-gradient(135deg, var(--hot1), var(--hot2) 48%, var(--hot3));
  --font-d: 'Chakra Petch', sans-serif;
  --font-m: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-d);
  overflow-x: hidden;
  min-height: 100vh;
}

/* background décor */
.bg-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(162, 75, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(162, 75, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
}
.bg-glow { position: fixed; border-radius: 50%; filter: blur(120px); opacity: .16; pointer-events: none; z-index: 0; }
.bg-glow-1 { width: 640px; height: 640px; background: var(--hot3); top: -260px; left: -160px; }
.bg-glow-2 { width: 560px; height: 560px; background: var(--hot2); bottom: -260px; right: -140px; opacity: .1; }

.hidden { display: none !important; }

/* ============ top bar ============ */
.topbar {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 24px;
  padding: 18px 28px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo {
  width: 46px; height: 46px; object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 0 14px rgba(255, 45, 120, 0.45));
}
.brand-text h1 { font-size: 21px; font-weight: 700; letter-spacing: 2px; line-height: 1; }
.brand-text h1 em { font-style: normal; background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sub { font-size: 9.5px; letter-spacing: 4.5px; color: var(--faint); }

.top-status { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.chain-pills { display: flex; gap: 6px; }
.chain-pill {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 1px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--muted);
}
.chain-pill .cdot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, #666); box-shadow: 0 0 8px var(--c, transparent); }
.chain-pill.off { opacity: .38; }
.chain-pill.off .cdot { box-shadow: none; background: var(--faint); }

@keyframes pulse { 50% { opacity: .35; } }
.chain-pills.offline { opacity: .35; }

/* ============ layout ============ */
.layout {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 320px; gap: 20px;
  padding: 8px 28px 28px; max-width: 1500px; margin: 0 auto;
}

/* ============ champion strip ============ */
.champ-strip {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(100deg, rgba(255, 138, 0, 0.08), rgba(255, 45, 120, 0.07) 45%, rgba(162, 75, 255, 0.08));
  border: 1px solid rgba(255, 200, 74, 0.18);
  border-radius: 18px; padding: 12px 18px; margin-bottom: 16px;
}
.champ-tabs { display: flex; gap: 4px; background: rgba(19, 17, 38, 0.6); border-radius: 10px; padding: 4px; }
.champ-tab {
  font-family: var(--font-d); font-size: 10px; font-weight: 700; letter-spacing: 2px;
  background: transparent; color: var(--muted); border: 0; border-radius: 8px;
  padding: 6px 12px; cursor: pointer;
}
.champ-tab.active { background: var(--grad-hot); color: #fff; box-shadow: 0 0 14px rgba(255, 45, 120, 0.35); }
.champ-body { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.champ-label { font-size: 9.5px; letter-spacing: 2.5px; color: var(--faint); white-space: nowrap; }
.champ-name { font-size: 18px; font-weight: 700; letter-spacing: 1.5px; white-space: nowrap; }
.champ-name .trophy { filter: drop-shadow(0 0 8px rgba(255, 200, 74, 0.7)); }
.champ-chain { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--muted); }
.champ-chain .cdot { width: 8px; height: 8px; border-radius: 3px; background: var(--cc); box-shadow: 0 0 8px var(--cc); }
.champ-mc { font-family: var(--font-m); font-weight: 800; font-size: 16px; color: var(--gold); margin-left: auto; white-space: nowrap; }
.champ-live { font-size: 9px; font-weight: 700; letter-spacing: 2px; color: var(--green); border: 1px solid rgba(47, 230, 168, 0.35); border-radius: 999px; padding: 3px 8px; animation: pulse 2s infinite; }
.champ-none { font-size: 11px; letter-spacing: 2px; color: var(--faint); }

/* ============ pvp tabs ============ */
.pvp-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pvp-tab {
  font-family: var(--font-d); font-weight: 700; letter-spacing: 1.5px; font-size: 12px;
  background: var(--card); color: var(--muted);
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 16px; cursor: pointer;
}
.pvp-tab.active { color: #fff; border-color: rgba(255, 45, 120, 0.5); box-shadow: 0 0 18px rgba(255, 45, 120, 0.18) inset; }
.pvp-tab .st { font-size: 9px; margin-left: 8px; letter-spacing: 2px; }
.pvp-tab .st.live { color: var(--green); }
.pvp-tab .st.forming { color: var(--gold); }

/* ============ arena ============ */
.arena { min-height: 520px; position: relative; }

/* idle */
.idle {
  height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  border: 1px dashed rgba(255, 255, 255, 0.09); border-radius: 26px;
  background: radial-gradient(ellipse at 50% 40%, rgba(162, 75, 255, 0.07), transparent 60%);
}
.radar { position: relative; width: 170px; height: 170px; }
.radar .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(47, 216, 255, 0.22); animation: ringout 3s infinite; }
.radar .ring:nth-child(2) { animation-delay: 1s; }
.radar .ring:nth-child(3) { animation-delay: 2s; }
@keyframes ringout { from { transform: scale(.25); opacity: .9; } to { transform: scale(1.15); opacity: 0; } }
.radar .core {
  position: absolute; inset: 58px; display: grid; place-items: center;
  background: var(--card); border: 1px solid rgba(47, 216, 255, 0.3); border-radius: 50%;
  font-size: 22px; box-shadow: 0 0 30px rgba(47, 216, 255, 0.2);
}
.idle-title { font-size: 26px; font-weight: 700; letter-spacing: 8px; color: var(--text); }
.idle-sub { font-size: 12px; letter-spacing: 2px; color: var(--muted); text-align: center; line-height: 2; }
.idle-sub b { color: var(--cyan); font-weight: 600; }

/* battle header */
.battle-head { display: flex; align-items: baseline; gap: 16px; margin: 4px 2px 18px; flex-wrap: wrap; }
.battle-symbol { font-size: 34px; font-weight: 700; letter-spacing: 3px; }
.battle-symbol i { font-style: normal; background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent; }
.battle-state { font-size: 11px; font-weight: 700; letter-spacing: 3px; padding: 5px 12px; border-radius: 999px; }
.battle-state.live { color: var(--green); border: 1px solid rgba(47, 230, 168, 0.35); background: rgba(47, 230, 168, 0.07); animation: pulse 2s infinite; }
.battle-state.forming { color: var(--gold); border: 1px solid rgba(255, 200, 74, 0.35); background: rgba(255, 200, 74, 0.06); }
.battle-timer { margin-left: auto; font-family: var(--font-m); font-size: 14px; color: var(--muted); letter-spacing: 1px; }
.battle-timer b { color: var(--text); }

/* podium — equal-size grid cells; every card identical, rows wrap responsively */
.podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 330px));
  justify-content: center;
  align-items: stretch;
  gap: 18px; padding-top: 16px;
}

/* fighter card */
.fighter {
  position: relative;
  background: linear-gradient(165deg, var(--card2), var(--card) 55%);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px 18px 14px;
  overflow: hidden;
  will-change: transform;
  transition: box-shadow .4s ease, border-color .4s ease, filter .6s ease, margin .5s ease, max-width .5s ease;
}
.fighter.enter { animation: cardin .55s cubic-bezier(.22,.9,.24,1); }
@keyframes cardin { from { opacity: 0; transform: translateY(26px) scale(.94); } }
.fighter::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--cc, var(--faint));
  opacity: .9;
}
.fighter.lead {
  border-color: rgba(255, 200, 74, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 200, 74, 0.2), 0 18px 60px -18px rgba(255, 138, 0, 0.35), 0 0 45px -10px rgba(255, 45, 120, 0.25);
}
.fighter.lead::before { background: var(--grad-hot); height: 4px; }
.fighter.dead { filter: grayscale(.85) brightness(.75); }

.crown {
  display: none;
  position: absolute; top: 12px; right: 14px; font-size: 20px;
  filter: drop-shadow(0 0 8px rgba(255, 200, 74, 0.8));
  animation: bob 2.4s ease-in-out infinite;
}
.fighter.lead .crown { display: block; }
@keyframes bob { 50% { transform: translateY(-4px); } }

.f-chain { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.f-chain .cdot { width: 9px; height: 9px; border-radius: 3px; background: var(--cc); box-shadow: 0 0 10px var(--cc); }
.f-chain .cname { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; color: var(--muted); }
.f-chain .f-link {
  font-size: 12px; color: var(--faint); text-decoration: none;
  padding: 0 3px; border-radius: 6px; transition: color .2s, text-shadow .2s;
}
.f-chain .f-link:hover { color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }
.f-chain .rank { margin-left: auto; font-family: var(--font-m); font-size: 11px; font-weight: 800; color: var(--faint); letter-spacing: 1px; }
.f-chain .rank.r1 { color: var(--gold); }

.f-name {
  display: block; font-size: 12px; color: var(--muted); letter-spacing: .5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none; transition: color .2s;
}
.f-name:hover { color: var(--cyan); }
.f-mc { font-family: var(--font-m); font-weight: 800; font-size: 30px; letter-spacing: -0.5px; margin: 2px 0 2px; transition: font-size .5s ease; }
.f-mc .cur { color: var(--faint); font-size: .55em; font-weight: 700; vertical-align: 14%; margin-right: 2px; }
.f-delta { font-family: var(--font-m); font-size: 11.5px; font-weight: 700; }
.f-delta.up { color: var(--green); }
.f-delta.dn { color: var(--red); }

.spark { display: block; width: 100%; height: 54px; margin: 10px 0 8px; }

.f-stats { display: flex; border-top: 1px solid var(--line); padding-top: 10px; gap: 6px; }
.f-stat { flex: 1; min-width: 0; }
.f-stat .k { font-size: 8.5px; letter-spacing: 1.6px; color: var(--faint); }
.f-stat .v { font-family: var(--font-m); font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.f-stat .v.bad { color: var(--red); }

.f-pending {
  margin-top: 10px; text-align: center; font-size: 10px; letter-spacing: 2px;
  color: var(--gold); border: 1px dashed rgba(255, 200, 74, 0.35); border-radius: 10px; padding: 7px;
}

/* trades under each card */
.f-trades { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
.f-trades .t-head { font-size: 8.5px; letter-spacing: 2px; color: var(--faint); margin-bottom: 5px; }
.t-row {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-m); font-size: 10.5px; padding: 2.5px 0;
  border-radius: 6px;
}
.t-row.enter { animation: tradein .6s cubic-bezier(.22,.9,.24,1); }
@keyframes tradein {
  from { opacity: 0; transform: translateX(-14px); background: rgba(255, 255, 255, 0.1); }
  60% { background: rgba(255, 255, 255, 0.07); }
  to { background: transparent; }
}
.t-row .t-kind { font-weight: 800; width: 34px; letter-spacing: 1px; }
.t-row.buy .t-kind { color: var(--green); }
.t-row.sell .t-kind { color: var(--red); }
.t-row .t-usd { font-weight: 700; color: var(--text); }
.t-row.big .t-usd { color: var(--gold); text-shadow: 0 0 10px rgba(255, 200, 74, 0.4); }
.t-row .t-time { margin-left: auto; color: var(--faint); font-size: 9.5px; }
.t-empty { font-size: 9.5px; color: var(--faint); letter-spacing: 1.5px; padding: 3px 0; }

/* rugged stamp */
.rug-stamp {
  display: none;
  position: absolute; top: 42%; left: 50%;
  transform: translate(-50%, -50%) rotate(-14deg);
  font-size: 26px; font-weight: 700; letter-spacing: 6px; color: var(--red);
  border: 3px solid var(--red); border-radius: 10px; padding: 6px 18px;
  background: rgba(19, 17, 38, 0.55);
  text-shadow: 0 0 18px rgba(255, 77, 94, 0.8);
  box-shadow: 0 0 30px rgba(255, 77, 94, 0.25), inset 0 0 20px rgba(255, 77, 94, 0.15);
  z-index: 3; pointer-events: none;
}
.fighter.dead .rug-stamp { display: block; animation: stampin .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes stampin { from { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(2.6); } }

/* placeholder slot — waiting for the next chain to join the battle */
.waiting-slot {
  min-height: 250px;
  border: 1px dashed rgba(255, 255, 255, 0.12); border-radius: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--faint);
  background: rgba(255, 255, 255, 0.012);
  transition: border-color .3s;
}
.waiting-slot:hover { border-color: rgba(47, 216, 255, 0.3); }
.waiting-slot .q { font-size: 28px; animation: pulse 1.8s infinite; opacity: .5; }
.waiting-slot .t { font-size: 9.5px; letter-spacing: 2.5px; text-align: center; line-height: 2; }
.waiting-slot.enter { animation: cardin .55s cubic-bezier(.22,.9,.24,1); }

/* animated tabs & chips — a .glider pill slides to the active button */
.pvp-tabs, .champ-tabs, .day-chips { position: relative; }
.pvp-tab, .champ-tab, .day-chip {
  position: relative; z-index: 1;
  transition: color .25s ease, border-color .25s ease, transform .18s cubic-bezier(.2,1.4,.4,1);
}
.pvp-tab:hover, .day-chip:hover { transform: translateY(-1px); color: var(--text); }
.champ-tab:hover { color: var(--text); }
.pvp-tab:active, .champ-tab:active, .day-chip:active { transform: scale(.94); }

.glider {
  position: absolute; top: 0; left: 0; z-index: 0;
  opacity: 0; pointer-events: none; box-sizing: border-box;
  transition: transform .38s cubic-bezier(.3,.9,.3,1), width .38s cubic-bezier(.3,.9,.3,1), height .38s, opacity .25s;
}
.pvp-tabs .glider {
  border-radius: 12px;
  background: rgba(255, 45, 120, 0.1);
  border: 1px solid rgba(255, 45, 120, 0.5);
  box-shadow: 0 0 18px rgba(255, 45, 120, 0.18) inset, 0 0 16px rgba(255, 45, 120, 0.12);
}
.champ-tabs .glider {
  border-radius: 8px;
  background: var(--grad-hot);
  box-shadow: 0 0 14px rgba(255, 45, 120, 0.35);
}
.day-chips .glider {
  border-radius: 999px;
  background: rgba(47, 216, 255, 0.07);
  border: 1px solid rgba(47, 216, 255, 0.5);
  box-shadow: 0 0 12px rgba(47, 216, 255, 0.14) inset;
}
/* active buttons go transparent — the glider is their background */
.pvp-tab.active { background: transparent; border-color: transparent; box-shadow: none; color: #fff; }
.champ-tab.active { background: transparent; box-shadow: none; color: #fff; }
.day-chip.active { background: transparent; border-color: transparent; box-shadow: none; color: #fff; }

/* ============ history strip ============ */
.history-strip { margin-top: 26px; }
.strip-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.strip-title { font-size: 10px; font-weight: 700; letter-spacing: 3px; color: var(--faint); }
.day-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.day-chip {
  font-family: var(--font-m); font-size: 9.5px; font-weight: 700; letter-spacing: 1px;
  background: var(--card); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px; cursor: pointer;
}
.day-chip.active { color: #fff; border-color: rgba(47, 216, 255, 0.5); box-shadow: 0 0 12px rgba(47, 216, 255, 0.15) inset; }
.history-items { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.hist-card {
  min-width: 200px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px;
}
.hist-card .h-rows { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.hist-card .h-row { display: flex; align-items: center; gap: 7px; font-family: var(--font-m); font-size: 10px; color: var(--muted); }
.hist-card .h-row .cdot2 { width: 7px; height: 7px; border-radius: 2px; background: var(--rc); flex: none; }
.hist-card .h-row .h-amt { margin-left: auto; font-weight: 700; color: var(--text); }
.hist-card .h-row.rekt .h-amt { color: var(--red); }
.hist-card .h-sym { font-weight: 700; font-size: 14px; letter-spacing: 1px; }
.hist-card .h-win { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 11px; color: var(--muted); }
.hist-card .h-win .cdot { width: 8px; height: 8px; border-radius: 3px; background: var(--cc); }
.hist-card .h-mc { font-family: var(--font-m); font-size: 12px; font-weight: 700; color: var(--gold); margin-top: 3px; }
.hist-card .h-rekt { color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: 1px; margin-top: 6px; }

/* ============ side panel ============ */
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  display: flex; flex-direction: column; overflow: hidden;
}
.feed-panel { height: calc(100vh - 130px); min-height: 420px; position: sticky; top: 16px; }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--line);
}
.panel-title { font-size: 11px; font-weight: 700; letter-spacing: 3px; color: var(--text); }
.panel-sub { font-size: 10px; color: var(--faint); font-family: var(--font-m); }

.feed { overflow-y: auto; padding: 8px 10px; flex: 1; scrollbar-width: thin; scrollbar-color: var(--card2) transparent; }
.feed-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 12px;
  text-decoration: none; color: inherit;
  will-change: transform;
  transition: background .2s;
}
.feed-row[href]:hover { background: rgba(47, 216, 255, 0.06); cursor: pointer; }
.feed-row.enter { animation: freshin .7s cubic-bezier(.22,.9,.24,1); }
@keyframes freshin {
  from { opacity: 0; transform: translateY(-16px); background: rgba(47, 216, 255, 0.16); }
  to { background: transparent; }
}
.feed-row .cdot { width: 9px; height: 9px; border-radius: 3px; background: var(--cc); box-shadow: 0 0 8px var(--cc); flex: none; }
.feed-row .f-info { min-width: 0; flex: 1; }
.feed-row .f-sym { font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.feed-row .f-src { font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-row .f-time { font-family: var(--font-m); font-size: 10px; color: var(--faint); flex: none; }
.feed-row .f-battle { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--hot2); border: 1px solid rgba(255,45,120,.4); padding: 2px 7px; border-radius: 999px; flex: none; }
.feed-empty { color: var(--faint); font-size: 11px; letter-spacing: 1.5px; text-align: center; padding: 40px 10px; line-height: 2.2; }

/* demo badge */
.demo-badge {
  position: fixed; bottom: 18px; left: 18px; z-index: 50;
  font-size: 10px; font-weight: 700; letter-spacing: 3px; color: #131126;
  background: var(--gold); border-radius: 8px; padding: 6px 12px;
  box-shadow: 0 0 24px rgba(255, 200, 74, 0.4);
}

/* responsive */
@media (max-width: 1080px) {
  .layout { grid-template-columns: 1fr; }
  .feed-panel { height: 380px; position: static; }
  .podium { grid-template-columns: 1fr; padding-top: 0; }
  .topbar { flex-wrap: wrap; gap: 12px; }
  .top-status { margin-left: 0; }
  .champ-strip { flex-wrap: wrap; }
  .champ-mc { margin-left: 0; }
}