/* VSim — styled after the VCC / vlr community look: zinc darks, red accent, dense data modules. */
:root {
  --background: #09090b;
  --foreground: #fafafa;
  --card: #18181b;
  --card-2: #141416;
  --card-hover: #1f1f23;
  --secondary: #27272a;
  --muted: #27272a;
  --muted-foreground: #a1a1aa;
  --dim: #71717a;
  --accent: #3f3f46;
  --border: #27272a;
  --border-strong: #3f3f46;
  --primary: #ef4444;
  --primary-hover: #dc2626;
  --secondary-accent: #ef233c;
  --win: #22c55e;
  --loss: #ef4444;
  --gold: #eab308;
  --silver: #d4d4d8;
  --bronze: #f97316;
  --radius: 8px;
  --radius-sm: 6px;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted-foreground); }
.dim { color: var(--dim); }
.hidden { display: none !important; }
.w { color: var(--win) !important; }
.l { color: var(--loss) !important; }
::selection { background: var(--primary); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 10px; border: 2px solid var(--background); }

/* ================= Header ================= */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(9, 9, 11, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 24px;
  height: 52px; display: flex; align-items: center; justify-content: space-between; position: relative;
}
.logo { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.logo svg { height: 18px; width: auto; display: block; }
.logo:hover svg { color: var(--primary); }
.logo span b { color: var(--primary); }
.nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 24px; height: 100%; }
.nav a {
  position: relative; display: flex; align-items: center; height: 100%;
  font-size: 14px; font-weight: 500; color: var(--muted-foreground); transition: color .15s;
}
.nav a:hover { color: rgba(250, 250, 250, .8); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--foreground); transform: scaleX(0); transition: transform .2s;
}
.nav a:hover::after { transform: scaleX(1); }
.nav a.active { color: var(--foreground); }
.nav a.active::after { background: var(--secondary-accent); transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 4px; }
.icon-btn {
  background: transparent; border: 0; padding: 6px; border-radius: 4px;
  color: var(--foreground); display: grid; place-items: center;
}
.icon-btn:hover { background: var(--accent); }
.icon-btn svg { width: 20px; height: 20px; }
.menu-btn { display: none; }
.mobile-nav { display: none; border-top: 1px solid var(--border); padding: 4px 16px 10px; }
.mobile-nav a { display: block; padding: 11px 2px; color: var(--muted-foreground); font-weight: 500; border-bottom: 1px solid var(--border); }
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav a.active { color: var(--foreground); }
.mobile-nav.open { display: block; }

/* ================= Layout ================= */
main { flex: 1; width: 100%; }
.container { max-width: 1440px; margin: 0 auto; padding: 24px 32px 64px; }
.layout-3 { display: grid; grid-template-columns: 256px minmax(0, 1fr) 248px; gap: 24px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-lg { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 8px; }
.row-wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.label {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  color: var(--muted-foreground); margin: 0 0 8px; display: flex; align-items: center; gap: 8px;
}
.label.lg { font-size: 13px; }
.h-title { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.h-sub { color: var(--muted-foreground); margin: 4px 0 0; font-size: 13px; }
.divider-label {
  display: flex; align-items: center; gap: 16px; margin: 22px 0 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.divider-label::before, .divider-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.today {
  background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 3px;
}

/* ================= Cards ================= */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.card-pad { padding: 16px; }
.module { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.module-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}
.module-head .spacer { flex: 1; }
.empty { padding: 44px 16px; text-align: center; color: var(--muted-foreground); }
.empty h3 { color: var(--foreground); margin: 0 0 6px; font-size: 16px; }
.empty p { margin: 0 0 14px; }

/* ================= Buttons & inputs ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card); color: var(--foreground);
  font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .15s, border-color .15s, opacity .15s;
}
.btn:hover { background: var(--secondary); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }
.btn-red { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-red:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted-foreground); }
.btn-ghost:hover { background: var(--secondary); color: var(--foreground); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 42px; padding: 0 22px; font-size: 14px; }
.btn-xl { height: 50px; padding: 0 30px; font-size: 15px; font-weight: 700; }
.btn-block { width: 100%; }
.btn-danger:hover { color: var(--loss); }

.input, .select, .textarea {
  height: 36px; padding: 0 11px; border-radius: var(--radius-sm); width: 100%;
  border: 1px solid var(--border); background: var(--background); outline: none; font-size: 13px;
}
.textarea { height: auto; padding: 9px 11px; resize: vertical; }
.select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23a1a1aa' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.input:focus, .select:focus, .textarea:focus { border-color: #71717a; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground); }

/* Week-strip style selector (VCC home) */
.strip { display: grid; grid-template-columns: 1fr 1fr 1fr 50px; gap: 8px; margin-bottom: 18px; }
.strip > * {
  height: 50px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: 12px; color: var(--muted-foreground); font-weight: 500; transition: background .15s;
}
.strip > *:hover { background: var(--card-hover); }
.strip > * b { color: var(--foreground); font-weight: 600; font-size: 12px; }
.strip > .on { background: var(--primary); border-color: var(--primary); color: #fff; }
.strip > .on b { color: #fff; }
.strip > .on:hover { background: var(--primary-hover); }
.strip svg { width: 20px; height: 20px; color: var(--foreground); }

/* Big uppercase tab row (VCC: ALL / LIVE / UPCOMING / RESULTS) */
.tabrow { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; margin-bottom: 18px; }
.tabrow button {
  background: none; border: 0; height: 40px; position: relative;
  font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted-foreground);
}
.tabrow button:hover { color: var(--foreground); }
.tabrow button.on { color: var(--primary); }
.tabrow button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--primary); }

/* Small pill tabs (event page / filters) */
.pilltabs { display: flex; gap: 8px; flex-wrap: wrap; }
.pilltabs button, .pilltabs a {
  height: 30px; padding: 0 14px; border-radius: 4px; border: 1px solid var(--border); background: var(--card);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--foreground);
  display: inline-flex; align-items: center;
}
.pilltabs button:hover { background: var(--secondary); }
.pilltabs .on { background: var(--primary) !important; border-color: var(--primary); color: #fff; }

/* Segmented control (Stats/Performance, Total/Attack/Defense) */
.seg { display: inline-flex; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
.seg button { background: transparent; border: 0; height: 26px; padding: 0 11px; border-radius: 4px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.seg button:hover { color: var(--foreground); }
.seg button.on { background: var(--primary); color: #fff; }

/* Underline tabs (map tabs) */
.utabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.utabs button {
  background: none; border: 0; padding: 12px 14px; position: relative; white-space: nowrap;
  font-size: 13px; color: var(--muted-foreground); font-weight: 500; display: flex; align-items: baseline; gap: 6px;
}
.utabs button small { font-size: 10px; color: var(--dim); font-variant-numeric: tabular-nums; }
.utabs button:hover { color: var(--foreground); }
.utabs button.on { color: var(--foreground); font-weight: 600; }
.utabs button.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--primary); }

/* ================= Logos, flags, agents ================= */
.logo-img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.logo-img.xs { width: 18px; height: 18px; }
.logo-img.sm { width: 24px; height: 24px; }
.logo-img.md { width: 36px; height: 36px; }
.logo-img.lg { width: 56px; height: 56px; }
.logo-img.xl { width: 80px; height: 80px; }
.logo-ph {
  --c: #52525b; display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 6px;
  background: color-mix(in srgb, var(--c) 28%, #18181b); border: 1px solid color-mix(in srgb, var(--c) 60%, #27272a);
  font-family: var(--font-display); font-weight: 800; color: #fff; letter-spacing: -.02em;
}
.flag { width: 16px; height: 11px; object-fit: cover; border-radius: 1px; flex-shrink: 0; display: inline-block; vertical-align: -1px; }
.rg-ico { width: 13px; height: 13px; flex-shrink: 0; display: inline-block; vertical-align: -2px; color: var(--dim); }
.agents { display: flex; gap: 3px; }
.agent {
  --rc: #71717a; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-grid; place-items: center; font-size: 8.5px; font-weight: 800; letter-spacing: -.02em; color: #fff;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--rc) 85%, #fff 15%), color-mix(in srgb, var(--rc) 55%, #000));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  text-transform: uppercase;
}
.agent.lg { width: 28px; height: 28px; font-size: 10px; }
.agent-more { font-size: 10px; color: var(--muted-foreground); align-self: center; margin-left: 2px; }
.team-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.team-name > span { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--secondary); color: var(--muted-foreground); white-space: nowrap;
}
.pill.red { background: rgba(239, 68, 68, .15); color: #f87171; }
.pill.green { background: rgba(34, 197, 94, .13); color: #4ade80; }
.pill.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* ================= Match cards (VCC feed) ================= */
.day-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--muted-foreground); margin: 16px 0 8px; }
.day-label:first-child { margin-top: 0; }
.mcard { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; transition: border-color .15s, background .15s; }
a.mcard:hover, .mcard.clickable:hover { border-color: var(--border-strong); background: #1b1b1f; }
.mcard-top { display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 16px 12px; }
.mcard-team { display: flex; align-items: center; gap: 12px; min-width: 0; font-weight: 700; font-size: 15px; }
.mcard-team span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard-team.left { justify-content: flex-end; text-align: right; }
.mcard-team.lose span { color: var(--muted-foreground); }
.mcard-score { display: flex; justify-content: center; align-items: center; gap: 9px; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mcard-score .sep { color: var(--dim); font-weight: 400; }
.mcard-score .vs { color: var(--dim); font-weight: 400; font-size: 18px; }
.mcard-foot {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 8px 16px; font-size: 12.5px; color: var(--muted-foreground); font-weight: 600; background: rgba(255, 255, 255, .015);
}
.mcard-foot .ev { display: flex; align-items: center; gap: 8px; min-width: 0; text-transform: uppercase; }
.mcard-foot .ev span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard-foot .time { color: var(--foreground); font-weight: 700; font-size: 13px; }
.mcard-foot .time small { color: var(--muted-foreground); font-size: 10.5px; font-weight: 600; margin-left: 2px; }
.mcard-foot .stage { text-align: right; }

/* Event glyph */
.ev-glyph { --c: #ef4444; width: 18px; height: 18px; flex-shrink: 0; color: var(--c); }
.ev-glyph.lg { width: 48px; height: 48px; }
.ev-glyph.xl { width: 68px; height: 68px; }

/* Sidebar lists (VCC "Recent discussion") */
.side-list { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.side-list > a, .side-list > div {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 37px;
  border-bottom: 1px solid var(--border); font-size: 13.5px; font-weight: 500;
}
.side-list > *:last-child { border-bottom: 0; }
.side-list > a:hover { background: var(--card-hover); }
.side-list .name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-list .val { color: var(--primary); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.side-list .rk { width: 16px; color: var(--dim); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Article-style cards (VCC "Recent articles") */
.acard { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 10px; transition: border-color .15s; }
.acard:hover { border-color: var(--border-strong); }
.acard-art {
  position: relative; height: 112px; display: flex; align-items: center; justify-content: center; gap: 18px; overflow: hidden;
  background: linear-gradient(115deg, color-mix(in srgb, var(--ca) 55%, #09090b) 0 50%, color-mix(in srgb, var(--cb) 55%, #09090b) 50% 100%);
}
.acard-art::before {
  content: ""; position: absolute; inset: 0; opacity: .25;
  background: repeating-linear-gradient(115deg, transparent 0 14px, rgba(255, 255, 255, .06) 14px 15px);
}
.acard-art img, .acard-art .logo-ph { position: relative; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .55)); }
.acard-art .vs { position: relative; font-family: var(--font-display); font-weight: 900; font-size: 15px; color: #fff; opacity: .85; font-style: italic; }
.acard-body { padding: 10px 12px 11px; }
.acard-body h4 { margin: 0 0 3px; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.acard-body p { margin: 0 0 6px; font-size: 12px; color: var(--muted-foreground); line-height: 1.35; }
.acard-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted-foreground); }
.acard.compact .acard-body { padding: 10px 12px; }

/* ================= Event list rows ================= */
.erow {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .15s, background .15s;
}
.erow:hover { border-color: var(--border-strong); background: #1b1b1f; }
.erow h3 { margin: 0; font-size: 15px; font-weight: 700; }
.erow .date { font-size: 13px; color: var(--muted-foreground); margin-top: 3px; }
.erow .right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; font-size: 12.5px; color: var(--muted-foreground); }
.erow .right .rg { display: flex; align-items: center; gap: 6px; }

/* ================= Event page ================= */
.ev-head { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.ev-head-top { display: flex; align-items: center; gap: 18px; padding: 18px 20px; }
.ev-head-top h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-family: var(--font-display); }
.ev-head-top p { margin: 3px 0 0; color: var(--muted-foreground); font-size: 13.5px; }
.ev-info { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); }
.ev-info > div { padding: 12px 20px; border-right: 1px solid var(--border); }
.ev-info > div:last-child { border-right: 0; }
.ev-info span { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 3px; letter-spacing: .02em; }
.ev-info b { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.ev-champ { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--border); background: linear-gradient(90deg, rgba(234, 179, 8, .12), transparent 60%); }
.ev-champ small { display: block; font-size: 11px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.ev-champ b { font-size: 18px; font-weight: 800; }

/* Group standings */
.gtable { width: 100%; border-collapse: collapse; }
.gtable th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; padding: 12px 12px; border-bottom: 1px solid var(--border); }
.gtable td { padding: 0 12px; height: 46px; border-bottom: 1px solid var(--border); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.gtable tr:last-child td { border-bottom: 0; }
.gtable td:first-child, .gtable th:first-child { padding-left: 12px; }
.gtable tbody tr { box-shadow: inset 3px 0 0 transparent; }
.gtable tbody tr.adv { box-shadow: inset 3px 0 0 var(--win); }
.gtable tbody tr.out { box-shadow: inset 3px 0 0 var(--loss); }
.gtable tbody tr:hover { background: rgba(255, 255, 255, .02); }
.gtable .team-name span { font-weight: 600; }
.gtable .pos { width: 34px; color: var(--muted-foreground); font-size: 12px; }

/* Brackets */
.bracket-wrap { overflow-x: auto; padding-bottom: 8px; }
.bracket { display: flex; gap: 0; min-width: max-content; }
.b-col { display: flex; flex-direction: column; width: 236px; margin-right: 34px; }
.b-col:last-child { margin-right: 0; }
.b-col h4 { margin: 0 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted-foreground); letter-spacing: .04em; display: flex; justify-content: space-between; }
.b-col h4 small { font-weight: 600; color: var(--dim); }
.b-matches { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 16px; }
.b-match { position: relative; display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
a.b-match:hover { border-color: var(--border-strong); }
.b-match::after { content: ""; position: absolute; right: -35px; top: 50%; width: 34px; height: 1px; background: var(--border-strong); }
.b-col:last-child .b-match::after, .b-match.no-line::after { display: none; }
.b-slot { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px; font-size: 13px; font-weight: 600; }
.b-slot + .b-slot { border-top: 1px solid var(--border); }
.b-slot .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-slot .sc { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 14px; text-align: right; }
.b-slot.win .sc { color: var(--win); }
.b-slot.lose { color: var(--muted-foreground); }
.b-slot.lose img { opacity: .55; }
.b-slot.tbd { color: var(--dim); font-weight: 500; font-style: italic; }
.b-match .b-act { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.b-match.final { border-color: rgba(234, 179, 8, .5); }
.b-section { margin-bottom: 26px; }
.b-section > .label { margin-bottom: 12px; }

/* ================= Match page ================= */
.mh { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; }
.mh-top { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px 0; font-size: 12.5px; }
.mh-top b { display: block; font-size: 13px; }
.mh-top span { color: var(--muted-foreground); }
.mh-top .r { text-align: right; color: var(--muted-foreground); }
.mh-main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 4px 16px 20px; gap: 16px; }
.mh-team { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; min-width: 0; }
.mh-team b { font-size: 17px; font-weight: 700; }
.mh-team.lose b { color: var(--muted-foreground); }
.mh-team .logo-img { width: 72px; height: 72px; }
.mh-score { text-align: center; min-width: 170px; }
.mh-score small { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; color: var(--muted-foreground); letter-spacing: .03em; }
.mh-score .big { font-family: var(--font-display); font-size: 50px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; display: flex; align-items: center; justify-content: center; gap: 14px; font-variant-numeric: tabular-nums; }
.mh-score .big .sep { font-size: 24px; color: var(--dim); font-weight: 600; }
.mh-score .big .lo { color: var(--dim); }
.mh-bottom { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 20px; padding: 12px 16px 16px; border-top: 1px solid var(--border); }
.mh-bottom h5 { margin: 0 0 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--muted-foreground); display: flex; justify-content: space-between; letter-spacing: .02em; }
.mh-bottom h5 small { font-weight: 500; text-transform: none; }
.pred { position: relative; height: 28px; border-radius: 4px; background: var(--background); overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.pred i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--secondary); }
.pred.fav i { background: rgba(239, 68, 68, .28); }
.pred span, .pred b { position: relative; }
.mvp-box { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: var(--background); border-radius: 6px; }
.mvp-box .big { font-size: 22px; font-weight: 800; font-family: var(--font-display); margin-left: auto; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12.5px; }
.kv span { color: var(--muted-foreground); }
.kv b { font-weight: 600; text-align: right; }

/* Map veto strip */
.veto { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.veto-tile { position: relative; border-right: 1px solid var(--background); min-width: 0; }
.veto-tile:last-child { border-right: 0; }
.veto-tile .vh { background: var(--secondary-accent); color: #fff; text-align: center; padding: 5px 4px; font-size: 9.5px; font-weight: 800; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; }
.veto-tile .vh.dec { background: #b91c1c; }
.veto-tile .vimg { position: relative; height: 112px; display: grid; place-items: center; overflow: hidden; }
.veto-tile .vimg .mapname { position: relative; font-family: var(--font-display); font-size: 21px; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.veto-tile.ban .vimg { filter: grayscale(.85) brightness(.55); }
.veto-tile.ban .vimg .mapname { opacity: .7; }
.ban-mark { position: absolute; left: 50%; top: calc(50% + 11px); width: 74px; height: 74px; transform: translate(-50%, -50%); border: 6px solid #e11d2e; border-radius: 50%; z-index: 2; }
.ban-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 100%; background: #e11d2e; transform: translate(-50%, -50%) rotate(-45deg); }
.veto-tile .vf { background: #0c0c0e; text-align: center; padding: 5px 4px; font-size: 9.5px; font-weight: 800; line-height: 1.2; text-transform: uppercase; min-height: 33px; }
.veto-tile .vf span { display: block; color: var(--muted-foreground); font-weight: 700; }

/* Map art (original generated tiles) */
.mapart { position: absolute; inset: 0; background: var(--g, linear-gradient(135deg, #333, #111)); }
.mapart::before { content: ""; position: absolute; inset: 0; background: var(--p, none); opacity: .55; mix-blend-mode: overlay; }
.mapart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .55)); }

/* Stats tables */
.tbl-wrap { overflow-x: auto; }
table.st { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.st th {
  text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase; color: var(--muted-foreground);
  padding: 9px 10px; white-space: nowrap; letter-spacing: .02em; user-select: none;
}
table.st th.sortable { cursor: pointer; }
table.st th.sortable:hover { color: var(--foreground); }
table.st th.sorted { color: var(--foreground); }
table.st td { padding: 0 10px; height: 40px; white-space: nowrap; font-variant-numeric: tabular-nums; border-top: 1px solid rgba(39, 39, 42, .6); }
table.st td.pl { font-weight: 600; }
table.st tr:hover td { background: rgba(255, 255, 255, .015); }
.team-bar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.team-bar.win { background: rgba(34, 197, 94, .07); color: #4ade80; border-top: 1px solid rgba(34, 197, 94, .18); border-bottom: 1px solid rgba(34, 197, 94, .18); }
.team-bar.lose { background: rgba(239, 68, 68, .08); color: #f87171; border-top: 1px solid rgba(239, 68, 68, .18); border-bottom: 1px solid rgba(239, 68, 68, .18); }
.pos-v { color: var(--win); }
.neg-v { color: var(--loss); }
.mvp-tag { font-size: 9px; font-weight: 800; color: #111; background: var(--gold); padding: 1px 4px; border-radius: 3px; letter-spacing: .04em; }

/* Heatmap cells */
td.heat { color: #fff; text-align: center; background: hsl(var(--h) 52% 33%); font-weight: 500; }
table.st.heat-off td.heat { background: transparent; }
table.st th.c, table.st td.c { text-align: center; }
.rank-n { color: var(--dim); font-size: 12px; width: 36px; }

/* Round timeline */
.rounds { display: flex; align-items: stretch; gap: 3px; padding: 14px 16px; overflow-x: auto; }
.rounds .lbl { display: flex; flex-direction: column; justify-content: space-between; gap: 3px; margin-right: 8px; padding-bottom: 15px; }
.rounds .lbl div { height: 24px; display: flex; align-items: center; }
.rounds .col { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.rounds .col small { font-size: 9.5px; color: var(--dim); font-variant-numeric: tabular-nums; height: 12px; }
.sq { width: 24px; height: 24px; border-radius: 4px; background: rgba(255, 255, 255, .035); display: grid; place-items: center; }
.sq svg { width: 13px; height: 13px; }
.sq.won.atk { background: rgba(239, 68, 68, .18); color: #f87171; }
.sq.won.def { background: rgba(34, 197, 94, .16); color: #4ade80; }
.sq.pop { animation: pop .22s ease-out; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
.rounds .half { width: 1px; background: var(--border-strong); margin: 0 7px 15px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted-foreground); padding: 0 16px 12px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend .sq { width: 18px; height: 18px; }
.legend .sq svg { width: 11px; height: 11px; }

/* Map summary header inside map tab */
.map-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.map-sum .side { display: flex; align-items: center; gap: 12px; min-width: 0; }
.map-sum .side.r { justify-content: flex-end; text-align: right; }
.map-sum .sc { font-family: var(--font-display); font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.map-sum .halves { font-size: 12px; color: var(--muted-foreground); display: flex; gap: 8px; }
.map-sum .halves .t { color: #f87171; } .map-sum .halves .ct { color: #4ade80; }
.map-sum .mid { text-align: center; }
.map-sum .mid b { display: block; font-size: 18px; font-weight: 800; }
.map-sum .mid span { font-size: 12px; color: var(--muted-foreground); }

/* Lineups module (VCC) */
.lineups { display: grid; grid-template-columns: 1fr 1.25fr 1fr; }
.lu-team { display: flex; flex-direction: column; }
.lu-team .hd { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--border); height: 44px; }
.lu-team.r .hd { justify-content: flex-end; }
.lu-row { display: flex; align-items: center; gap: 9px; padding: 0 12px; height: 34px; font-size: 13px; font-weight: 500; border-bottom: 1px solid rgba(39, 39, 42, .6); cursor: pointer; }
.lu-row:last-child { border-bottom: 0; }
.lu-row:hover { background: rgba(255, 255, 255, .02); }
.lu-row.on { background: rgba(255, 255, 255, .05); font-weight: 700; }
.lu-row .v { margin-left: auto; color: var(--dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.lu-team.r .lu-row { flex-direction: row-reverse; }
.lu-team.r .lu-row .v { margin-left: 0; margin-right: auto; }
.lu-mid { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.lu-mid .hd { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; height: 44px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; padding: 0 12px; }
.lu-mid .hd .vs { text-align: center; font-size: 10px; color: var(--dim); font-weight: 600; line-height: 1.2; }
.lu-mid .hd .a { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.lu-mid .hd .b { display: flex; align-items: center; gap: 6px; }
.lu-cmp { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; height: 34px; padding: 0 12px; font-size: 13.5px; font-variant-numeric: tabular-nums; border-bottom: 1px solid rgba(39, 39, 42, .6); }
.lu-cmp:last-child { border-bottom: 0; }
.lu-cmp .a { text-align: right; color: var(--dim); }
.lu-cmp .b { color: var(--dim); }
.lu-cmp .best { color: var(--foreground); font-weight: 800; }
.lu-cmp .k { text-align: center; font-size: 10px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }

/* Map stats module */
.mapstats { display: grid; grid-template-columns: 300px 1fr; }
.mapstats .radar-box { padding: 14px; border-right: 1px solid var(--border); }
.radar svg { width: 100%; height: auto; display: block; }
.radar-legend { display: flex; gap: 14px; justify-content: center; font-size: 11px; color: var(--muted-foreground); margin-top: 6px; }
.radar-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ms-list { padding: 10px 16px 14px; }
.ms-head { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; font-size: 12px; font-weight: 700; padding: 4px 0 10px; }
.ms-head .r { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.ms-head .l { display: flex; align-items: center; gap: 6px; }
.ms-row { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; gap: 12px; margin-bottom: 6px; }
.ms-row .a { text-align: right; }
.ms-row b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ms-row small { display: block; font-size: 10.5px; color: var(--dim); }
.ms-row .lo b { color: var(--dim); }
.ms-chip { position: relative; height: 34px; border-radius: 5px; overflow: hidden; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ms-chip span { position: relative; z-index: 1; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.ms-chip .mapart::after { background: rgba(0, 0, 0, .45); }
.ms-chip.inpool { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }

/* ================= Simulator page ================= */
.sim-head .mh-team { gap: 8px; }
.picker-btn {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 12px; border-radius: 6px;
  background: var(--background); border: 1px solid var(--border); font-size: 13px; font-weight: 600; min-width: 210px; justify-content: space-between;
}
.picker-btn:hover { border-color: var(--border-strong); }
.picker-btn svg { width: 14px; height: 14px; color: var(--muted-foreground); }
.mh-team .picker-btn .logo-img { width: 20px; height: 20px; }
.ovr-badge { display: inline-flex; align-items: baseline; gap: 4px; font-size: 11px; color: var(--muted-foreground); font-weight: 600; }
.ovr-badge b { font-size: 15px; color: var(--foreground); font-weight: 800; }
.vs-big { font-family: var(--font-display); font-size: 30px; font-weight: 900; color: var(--dim); font-style: italic; }
.sim-opts { display: grid; grid-template-columns: repeat(4, auto) 1fr; gap: 22px; align-items: end; padding: 14px 16px; }
.map-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.map-chip {
  position: relative; overflow: hidden; height: 34px; min-width: 92px; padding: 0 12px; border-radius: 5px; border: 1px solid var(--border);
  background: var(--background); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-foreground);
}
.map-chip .mapart { opacity: 0; transition: opacity .15s; }
.map-chip span { position: relative; z-index: 1; }
.map-chip.on { color: #fff; border-color: rgba(255, 255, 255, .2); }
.map-chip.on .mapart { opacity: 1; }
.map-chip.on span { text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }

/* Popover team picker */
.popover {
  position: absolute; z-index: 80; width: 330px; max-height: 420px; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); overflow: hidden;
}
.popover .input { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; height: 40px; background: var(--card); }
.popover .list { overflow-y: auto; padding: 4px; }
.popover .grp { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--dim); padding: 8px 8px 4px; letter-spacing: .05em; }
.popover .opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 5px; background: none; border: 0; text-align: left; font-size: 13px; font-weight: 600; }
.popover .opt:hover, .popover .opt.hl { background: var(--secondary); }
.popover .opt .ovr-badge { margin-left: auto; }

/* Search overlay */
.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.search-box { width: min(560px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.search-box .input { height: 50px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; font-size: 15px; background: var(--card); padding: 0 16px; }
.search-box .list { max-height: 380px; overflow-y: auto; padding: 6px; }
.search-box .opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 13.5px; font-weight: 600; }
.search-box .opt:hover, .search-box .opt.hl { background: var(--secondary); }
.search-box .opt small { margin-left: auto; color: var(--dim); font-weight: 500; font-size: 12px; }

/* Live playback */
.live-wrap .rounds { min-height: 72px; }

/* ================= Teams ================= */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tcard { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 12px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: center; transition: border-color .15s, background .15s; }
.tcard:hover { border-color: var(--border-strong); background: #1b1b1f; }
.tcard b { font-size: 13.5px; font-weight: 700; }
.tcard .logo-img { width: 64px; height: 64px; }
.tcard .meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted-foreground); }

.team-hero { display: flex; align-items: center; gap: 20px; padding: 20px; position: relative; overflow: hidden; }
.team-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 200px at 0% 50%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%); pointer-events: none; }
.team-hero > * { position: relative; }
.team-hero h1 { margin: 0; font-size: 28px; font-weight: 800; font-family: var(--font-display); letter-spacing: -.02em; }
.team-hero .sub { display: flex; align-items: center; gap: 10px; color: var(--muted-foreground); font-size: 13px; margin-top: 4px; }
.player-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.pcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.pcard-top { padding: 14px 14px 10px; position: relative; }
.pcard-top .pl-name { font-size: 16px; }
.pcard-top .real { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-top .role { position: absolute; right: 12px; top: 13px; }
.pcard-ovr { display: flex; align-items: baseline; gap: 6px; padding: 0 14px 10px; }
.pcard-ovr b { font-size: 30px; font-weight: 800; font-family: var(--font-display); line-height: 1; }
.pcard-ovr span { font-size: 11px; color: var(--muted-foreground); font-weight: 600; text-transform: uppercase; }
.pcard-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); }
.pcard-stats div { padding: 7px 8px; text-align: center; border-right: 1px solid var(--border); }
.pcard-stats div:nth-child(3n) { border-right: 0; }
.pcard-stats div:nth-child(n+4) { border-top: 1px solid var(--border); }
.pcard-stats small { display: block; font-size: 9.5px; color: var(--dim); font-weight: 600; text-transform: uppercase; }
.pcard-stats b { font-size: 13px; font-variant-numeric: tabular-nums; }
.pcard-agents { display: flex; gap: 4px; padding: 9px 14px; border-top: 1px solid var(--border); align-items: center; }
.pcard-agents small { margin-left: auto; font-size: 10.5px; color: var(--dim); }

/* Team editor */
.player-edit { display: grid; grid-template-columns: 1.3fr 76px 1fr 1fr 44px; gap: 8px; align-items: center; }
.player-edit input[type=range] { width: 100%; accent-color: var(--primary); }
.logo-drop { width: 96px; height: 96px; border-radius: 10px; border: 1px dashed var(--border-strong); display: grid; place-items: center; background: var(--background); cursor: pointer; overflow: hidden; flex-shrink: 0; }
.logo-drop:hover { border-color: #71717a; }
.logo-drop img { width: 80px; height: 80px; object-fit: contain; }
.color-input { width: 44px; height: 36px; padding: 3px; border: 1px solid var(--border); border-radius: 6px; background: var(--background); cursor: pointer; }

/* Event create */
.team-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 6px; }
.tpick { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--background); font-size: 12.5px; font-weight: 600; text-align: left; }
.tpick:hover { border-color: var(--border-strong); }
.tpick.on { border-color: var(--primary); background: rgba(239, 68, 68, .08); }
.tpick .seed { margin-left: auto; font-size: 11px; color: var(--primary); font-weight: 800; }
.tpick span.nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmt-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fmt { padding: 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--background); text-align: left; }
.fmt b { display: block; font-size: 13px; margin-bottom: 3px; }
.fmt span { font-size: 11.5px; color: var(--muted-foreground); }
.fmt.on { border-color: var(--primary); background: rgba(239, 68, 68, .08); }
.preset-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ================= Stats page ================= */
.filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.filters .actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.tbl-tools { display: flex; align-items: center; gap: 18px; padding: 10px 14px; font-size: 13px; }
.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.check input { width: 15px; height: 15px; accent-color: var(--win); }

/* ================= Records ================= */
.podium { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; margin: 6px 0 30px; }
.pod { position: relative; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.pod-art { position: relative; height: 188px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 14px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tc) 40%, #18181b), #121214 75%); }
.pod-art .wm { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 82px; height: 82px; object-fit: contain; opacity: .9; filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .6)); }
.pod-art .nm { position: relative; display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
.pod-art .rt { position: relative; font-size: 24px; font-weight: 400; color: #e4e4e7; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
.pod-art .sub { position: relative; font-size: 10.5px; color: var(--muted-foreground); }
.pod-place { text-align: center; padding: 14px 0; font-size: 10px; font-weight: 700; color: var(--dim); letter-spacing: .1em; background: #121214; border-top: 1px solid var(--border); }
.pod.p1 { border-color: rgba(234, 179, 8, .55); }
.pod.p1 .pod-art { height: 214px; }
.pod.p1 .pod-art .wm { width: 104px; height: 104px; }
.pod.p1 .pod-place { color: var(--gold); padding: 24px 0; background: linear-gradient(180deg, rgba(234, 179, 8, .12), #121214); border-top-color: rgba(234, 179, 8, .4); }
.pod.p2 .pod-art { height: 198px; }
.pod.p3 { border-color: rgba(249, 115, 22, .45); }
.pod.p3 .pod-art { height: 198px; }
.pod.p3 .pod-place { color: var(--bronze); background: linear-gradient(180deg, rgba(249, 115, 22, .1), #121214); border-top-color: rgba(249, 115, 22, .35); }
.rec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rec { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.rec-h { padding: 12px 14px 10px; border-bottom: 1px solid var(--border); }
.rec-h b { display: block; font-size: 14px; }
.rec-h span { font-size: 12px; color: var(--muted-foreground); }
.rec-row { display: grid; grid-template-columns: 34px 30px 1fr auto; align-items: center; gap: 8px; padding: 0 14px; height: 48px; border-bottom: 1px solid rgba(39, 39, 42, .6); }
.rec-row:last-child { border-bottom: 0; }
.rec-row:hover { background: rgba(255, 255, 255, .015); }
.rec-row .rk { font-size: 12px; font-weight: 700; color: var(--muted-foreground); }
.rec-row .rk.r1 { color: var(--gold); } .rec-row .rk.r3 { color: var(--bronze); }
.rec-row .who { min-width: 0; }
.rec-row .who b { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rec-row .who small { display: block; font-size: 11px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-row .v { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.seg-wide { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--background); margin-bottom: 16px; }
.seg-wide button { height: 34px; border: 0; background: transparent; font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
.seg-wide button:hover { color: var(--foreground); }
.seg-wide button.on { background: var(--primary); color: #fff; font-weight: 600; }
.mini-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--card); }
.mini-seg button { border: 0; background: transparent; height: 26px; padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.mini-seg button.on { background: var(--primary); color: #fff; font-weight: 600; }

/* ================= Footer & toast ================= */
.footer { border-top: 1px solid var(--border); margin-top: 24px; }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 18px 32px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted-foreground); }
.footer-inner a:hover { color: var(--foreground); }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(16px); opacity: 0; background: #fafafa; color: #09090b; padding: 9px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; transition: all .2s; z-index: 120; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ================= Responsive ================= */
@media (max-width: 1200px) {
  .layout-3 { grid-template-columns: minmax(0, 1fr) 248px; }
  .layout-3 > .col-left { display: none; }
  .player-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fmt-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .layout-3 { grid-template-columns: minmax(0, 1fr); }
  .layout-3 > .col-right { order: 2; }
  .lineups { grid-template-columns: 1fr; }
  .lu-mid { border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); order: -1; }
  .mapstats { grid-template-columns: 1fr; }
  .mapstats .radar-box { border-right: 0; border-bottom: 1px solid var(--border); max-width: 360px; margin: 0 auto; width: 100%; }
  .mh-bottom { grid-template-columns: 1fr; }
  .podium { grid-template-columns: repeat(3, 1fr); }
  .podium .pod:nth-child(1), .podium .pod:nth-child(5) { display: none; }
  .sim-opts { grid-template-columns: repeat(2, auto); }
  .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .header-inner, .container, .footer-inner { padding-left: 16px; padding-right: 16px; }
  .strip { grid-template-columns: 1fr 1fr 1fr; }
  .strip > :last-child { display: none; }
  .tabrow button { font-size: 11.5px; }
  .mcard-top { gap: 8px; padding: 12px 10px 10px; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); }
  .mcard-team { font-size: 13px; gap: 8px; }
  .mcard-foot { grid-template-columns: 1fr auto; padding: 7px 10px; }
  .mcard-foot .stage { display: none; }
  .mh-score { min-width: 0; }
  .mh-score .big { font-size: 36px; gap: 8px; }
  .mh-team .logo-img { width: 48px; height: 48px; }
  .mh-team b { font-size: 14px; }
  .veto { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); }
  .veto-tile .vimg { height: 80px; }
  .veto-tile .vimg .mapname { font-size: 14px; }
  .ban-mark { width: 52px; height: 52px; border-width: 5px; }
  .ev-info { grid-template-columns: 1fr 1fr; }
  .ev-info > div:nth-child(2) { border-right: 0; }
  .ev-info > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .ev-head-top h1 { font-size: 21px; }
  .player-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-grid, .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fmt-cards { grid-template-columns: 1fr; }
  .player-edit { grid-template-columns: 1fr 1fr; }
  .sim-opts { grid-template-columns: 1fr; }
  .picker-btn { min-width: 0; width: 100%; }
  .map-sum .sc { font-size: 24px; }
  .erow { gap: 12px; }
  .erow .ev-glyph.lg { width: 38px; height: 38px; }
}

/* Black-on-transparent logos (VLR light-theme assets) are flipped to white on the dark UI. */
img.inv { filter: brightness(0) invert(1); }

/* ================= Game art: agents, maps, weapons ================= */
.agent-ic { width: 24px; height: 24px; border-radius: 5px; object-fit: cover; flex-shrink: 0; display: inline-block; vertical-align: middle;
  background: color-mix(in srgb, var(--rc, #a1a1aa) 24%, #1f1f23); }
.agent-ic.sm { width: 18px; height: 18px; border-radius: 4px; }
.agent-ic.lg { width: 30px; height: 30px; border-radius: 6px; }
.agent-ic.xl { width: 40px; height: 40px; border-radius: 7px; }
.mapart.img { background: var(--img) center / cover no-repeat, var(--g, #222); }
.mapart.img::before { display: none; }
.veto-tile .mapart.img::after { background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .5)); }
.map-chip .mapart.img::after, .ms-chip .mapart.img::after { background: rgba(0, 0, 0, .42); }
.wpn { height: 16px; width: auto; display: inline-block; vertical-align: middle; opacity: .92; }
.wpn.lg { height: 22px; }
.hs-ic { width: 13px; height: 13px; color: #fbbf24; flex-shrink: 0; }

/* Map summary banner on the match page */
.has-img { position: relative; isolation: isolate; }
.has-img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--img) center 40% / cover no-repeat; opacity: .5; }
.has-img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--card) 12%, rgba(24, 24, 27, .55) 50%, var(--card) 88%); }
.map-sum.has-img .mid b { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.map-sum.has-img .mid span { color: #d4d4d8; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }

/* Clickable rounds */
.rounds .col.pick { cursor: pointer; border-radius: 6px; padding: 2px; margin: -2px; }
.rounds .col.pick:hover .sq { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.rounds .col.sel { background: rgba(255, 255, 255, .07); }
.rounds .col.sel small { color: var(--foreground); font-weight: 700; }

/* Round detail */
.rinfo { border-top: 1px solid var(--border); }
.rinfo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; font-size: 13px; color: var(--muted-foreground); border-bottom: 1px solid var(--border); background: var(--card-2); }
.rinfo-head b { color: var(--foreground); }
.rinfo-head .nav { display: flex; gap: 4px; margin-left: auto; }
.rinfo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); }
.rteam { padding: 10px 14px; min-width: 0; }
.rteam + .rfeed { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.rteam .hd { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.rteam .hd .buy { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted-foreground); background: var(--secondary); border-radius: 4px; padding: 2px 7px; }
.rteam .hd .buy.F { color: #4ade80; } .rteam .hd .buy.E { color: #f87171; } .rteam .hd .buy.S, .rteam .hd .buy.B { color: #fbbf24; }
.rteam.r .hd { flex-direction: row-reverse; }
.rteam.r .hd .buy { margin-left: 0; margin-right: auto; }
.rp { display: flex; align-items: center; gap: 8px; height: 32px; font-size: 13px; font-weight: 600; min-width: 0; }
.rp .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp .wpn { margin-left: auto; }
.rp .kc { width: 22px; text-align: right; font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.rp.dead { opacity: .45; }
.rp.dead .nm { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .35); }
.rteam.r .rp { flex-direction: row-reverse; }
.rteam.r .rp .wpn { margin-left: 0; margin-right: auto; transform: scaleX(-1); }
.rteam.r .rp .kc { text-align: left; }
.rfeed { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kf { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 5px; background: rgba(255, 255, 255, .03); font-size: 12.5px; font-weight: 600; }
.kf .kk, .kf .vv { display: flex; align-items: center; gap: 6px; min-width: 0; }
.kf .kk { justify-content: flex-end; }
.kf .kk span, .kf .vv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf .gun { display: flex; align-items: center; gap: 4px; }
.kf .atk { color: #f87171; } .kf .def { color: #4ade80; }
.kf.first { box-shadow: inset 2px 0 0 #fbbf24; }
.kf .agent-ic { width: 20px; height: 20px; border-radius: 4px; }
.kf.pop { animation: pop .22s ease-out; }
.rinfo .note { padding: 18px 16px; color: var(--muted-foreground); font-size: 13px; }

/* Live view */
.lv-bottom { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); border-top: 1px solid var(--border); }
.lv-bottom > div { padding: 12px 16px; min-width: 0; }
.lv-bottom > div + div { border-left: 1px solid var(--border); }
.lv-bottom h6 { margin: 0 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); display: flex; gap: 8px; }
.lv-bottom .hl-list { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted-foreground); }
.lv-bottom .hl-list b { color: var(--foreground); }
#lvKills { display: flex; flex-direction: column; gap: 4px; min-height: 120px; }

/* Weapons view */
.wpn-split { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); }
.wpn-split > div { padding: 12px 16px; min-width: 0; }
.wpn-split > div + div { border-left: 1px solid var(--border); }
.wrow { display: grid; grid-template-columns: 96px 70px minmax(0, 1fr) 34px 44px; align-items: center; gap: 10px; height: 30px; font-size: 12.5px; }
.wrow .ic { display: flex; justify-content: center; }
.wrow .nm { color: var(--muted-foreground); font-weight: 600; }
.wrow .bar { height: 6px; border-radius: 3px; background: var(--background); overflow: hidden; }
.wrow .bar i { display: block; height: 100%; background: var(--c, #a1a1aa); border-radius: 3px; }
.wrow b { text-align: right; font-variant-numeric: tabular-nums; }
.wrow .hsp { text-align: right; color: var(--dim); font-size: 11.5px; }
td .wpn { height: 15px; }
.top-w { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 900px) {
  .rinfo-grid { grid-template-columns: 1fr 1fr; }
  .rinfo-grid .rfeed { grid-column: 1 / -1; grid-row: 2; border: 0; border-top: 1px solid var(--border); }
  .lv-bottom, .wpn-split { grid-template-columns: 1fr; }
  .lv-bottom > div + div, .wpn-split > div + div { border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 760px) {
  .rp { font-size: 12px; gap: 6px; }
  .wrow { grid-template-columns: 76px minmax(0, 1fr) 30px 40px; }
  .wrow .nm { display: none; }
}
.rec-h b { display: flex; align-items: center; gap: 7px; }
.rec-h b .wpn { height: 14px; }
.lu-row .agent-ic { margin-right: -2px; }
.footer .legal { flex-basis: 100%; font-size: 11.5px; color: var(--dim); }
.kf-div { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding: 6px 2px 2px; }
#lvKills { min-height: 0; height: 330px; overflow: hidden; justify-content: flex-end; }
.wrow .ic { height: 22px; align-items: center; }
.wrow .ic .wpn, .rp .wpn, .top-w .wpn { height: auto; max-height: 100%; max-width: 100%; }
.wrow .ic .wpn { max-height: 22px; }
.rp .wpn { max-height: 15px; max-width: 74px; }
.top-w .wpn { max-height: 15px; max-width: 70px; }
.kf .gun .wpn { height: auto; max-height: 15px; max-width: 76px; }
.ev-img{object-fit:contain;background:none}
.nav-more { position: relative; display: flex; align-items: center; }
.nav-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; height: 100%; color: var(--muted-foreground); font-size: 14px; font-weight: 500; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary svg { width: 14px; height: 14px; transition: transform .15s; }
.nav-more[open] summary svg { transform: rotate(180deg); }
.nav-more summary:hover, .nav-more.active summary, .nav-more[open] summary { color: var(--foreground); }
.nav-menu { position: absolute; top: calc(100% - 6px); left: 50%; transform: translateX(-50%); min-width: 160px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--card, #18181b); border: 1px solid var(--border, #27272a); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); z-index: 50; }
.nav .nav-menu a { height: auto; padding: 8px 10px; border-radius: 6px; }
.nav .nav-menu a::after { display: none; }
.nav .nav-menu a:hover, .nav .nav-menu a.active { background: rgba(250, 250, 250, .06); color: var(--foreground); }