/* BRAWL BALA — tokens + responsive grid utilities */
:root {
  --bg-0:#07060B;--bg-1:#0B0915;--bg-2:#100D1C;
  --surface-1:rgba(255,255,255,0.035);--surface-2:rgba(255,255,255,0.06);--surface-3:rgba(255,255,255,0.09);--surface-hi:rgba(255,46,154,0.08);
  --line-1:rgba(255,255,255,0.08);--line-2:rgba(255,255,255,0.14);--line-magenta:rgba(255,46,154,0.55);--line-cyan:rgba(34,211,238,0.45);
  --magenta:#FF2E9A;--magenta-soft:#FF6FBA;--magenta-deep:#B81772;--cyan:#22D3EE;--lime:#A3E635;--gold:#FFCB05;--red:#FB4B6E;--violet:#8B5CF6;
  --text-0:#F4F2FA;--text-1:#C7C3DB;--text-2:#8A85A6;--text-3:#54506E;
  --r-card:20px;--r-card-sm:16px;--r-chip:12px;--r-input:8px;--r-pill:999px;
  --shadow-card:0 1px 0 rgba(255,255,255,0.06) inset,0 20px 50px -20px rgba(0,0,0,0.6);
  --font-display:"Space Grotesk","Geist",system-ui,sans-serif;--font-body:"Inter",system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;
  --content-max:1440px;--gutter:clamp(14px,3vw,36px);
}
*{box-sizing:border-box}
html,body{margin:0;max-width:100%;overflow-x:hidden;background:var(--bg-0);color:var(--text-0);font-family:var(--font-body);font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}button{font-family:inherit}img{display:block;max-width:100%}
.bb-bg{position:relative;min-height:100vh;background:radial-gradient(1200px 700px at 80% -10%,rgba(255,46,154,0.18),transparent 60%),radial-gradient(900px 600px at 0% 10%,rgba(34,211,238,0.10),transparent 60%),radial-gradient(700px 500px at 50% 110%,rgba(139,92,246,0.10),transparent 60%),linear-gradient(180deg,#0A0816 0%,#06050C 100%)}
.bb-bg::before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 30%,rgba(0,0,0,0.5),transparent 70%);pointer-events:none;z-index:0}
.bb-content{position:relative;z-index:1;width:min(100%,var(--content-max));max-width:var(--content-max);margin:0 auto;padding:24px var(--gutter) 80px;overflow-x:clip}
.glass{min-width:0;background:linear-gradient(180deg,rgba(255,255,255,0.045),rgba(255,255,255,0.02));border:1px solid var(--line-1);border-radius:var(--r-card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative;box-shadow:var(--shadow-card)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.glass.hi{background:linear-gradient(180deg,rgba(255,46,154,0.10),rgba(255,46,154,0.02) 60%,rgba(255,255,255,0.02));border-color:var(--line-magenta)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.display{font-family:var(--font-display);font-weight:700;letter-spacing:-0.03em}
.label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:0.14em;font-size:11px;font-weight:600;color:var(--text-2)}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(163,230,53,0.7);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(163,230,53,0.7)}70%{box-shadow:0 0 0 10px rgba(163,230,53,0)}100%{box-shadow:0 0 0 0 rgba(163,230,53,0)}}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:999px}::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:4px}
@keyframes skeleton{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
.skel{background:linear-gradient(90deg,rgba(255,255,255,0.04) 0,rgba(255,255,255,0.10) 50%,rgba(255,255,255,0.04) 100%);background-size:200px 100%;background-repeat:no-repeat;border-radius:8px;animation:skeleton 1.4s infinite linear}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp 320ms ease-out both}
.grid-bento{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:16px;min-width:0}
.grid-bento>*,.grid-stats-4>*,.grid-stats-3>*,.grid-stats-5>*,.grid-regions>*,.grid-regions-extra>*,.grid-team-body>*,.hero-team>*{min-width:0}
.grid-stats-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;min-width:0}
.grid-stats-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;min-width:0}
.grid-stats-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;min-width:0}
.grid-regions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.grid-regions-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.grid-team-body{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;align-items:flex-start}
.grid-filter-bar{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}
.grid-row-rank,.grid-row-rank-head{display:grid;grid-template-columns:50px 50px 1fr 90px 80px 80px 70px 40px;gap:10px;align-items:center}
.grid-mode-strip{display:flex;gap:10px;margin-bottom:22px;overflow-x:auto;padding-bottom:6px}
.ranking-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
.ranking-card{display:grid;gap:10px;padding:12px;overflow:hidden;min-height:132px;opacity:1}
.ranking-card-main{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.ranking-card-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ranking-card-stat{min-width:0;padding:7px 8px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid var(--line-1)}
.ranking-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.team-row{display:grid;grid-template-columns:24px 32px 1fr auto;gap:10px;align-items:center}
.hero-team{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center}
.scrim-row{display:grid;grid-template-columns:28px 32px 1fr auto;gap:10px;align-items:center}
.player-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center}
header.app-header>div{min-width:0}
header.app-header .nav-tabs{max-width:100%;overflow-x:auto;padding-bottom:2px}
.freshness-strip{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.freshness-chip{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;padding:4px 8px;border-radius:8px;background:rgba(255,255,255,0.035);border:1px solid var(--line-1);font-size:10px;color:var(--text-2);white-space:nowrap}
.freshness-chip strong{font-family:var(--font-display);font-size:10px;letter-spacing:0.08em;color:var(--text-1)}
.freshness-chip[data-tone="ok"]{border-color:rgba(163,230,53,0.35);color:var(--lime)}
.freshness-chip[data-tone="warn"]{border-color:rgba(255,203,5,0.42);color:var(--gold)}
.freshness-chip[data-tone="error"]{border-color:rgba(251,75,110,0.48);color:var(--red)}
@media (max-width:860px){
  .bb-content{padding:16px 12px 60px}
  .grid-bento{grid-template-columns:1fr;grid-template-rows:auto}
  .grid-bento>.glass{grid-column:1/-1 !important}
  .grid-bento .glass.hi{grid-row:auto;min-height:auto !important}
  .grid-stats-4,.grid-stats-5{grid-template-columns:repeat(2,1fr)}
  .grid-stats-3{grid-template-columns:1fr}
  .grid-regions,.grid-regions-extra{grid-template-columns:1fr}
  .grid-team-body{grid-template-columns:1fr}
  .grid-filter-bar{grid-template-columns:1fr;gap:10px}
  .ranking-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-row-rank,.grid-row-rank-head{grid-template-columns:40px 44px 1fr auto;gap:8px}
  .grid-row-rank-head>div:nth-child(n+4){display:none}
  .grid-row-rank>*:nth-child(5),.grid-row-rank>*:nth-child(6),.grid-row-rank>*:nth-child(7){display:none}
  .hero-team{grid-template-columns:auto 1fr;gap:14px}
  .hero-team>a:last-child{grid-column:1/-1}
  .display.team-name{font-size:30px !important}
  h1.page-title{font-size:24px !important}
  .top10-row{grid-template-columns:40px 44px 1fr auto !important;gap:10px !important}
  .top10-row>*:nth-child(5),.top10-row>*:nth-child(6),.top10-row>*:nth-child(7){display:none}
  .esports-banner{grid-template-columns:1fr !important;gap:14px !important}
  .esports-banner-stats{justify-content:flex-start !important;gap:24px !important}
  .banner-circuito{font-size:24px !important}
  header.app-header{padding:10px 12px !important;gap:10px !important}
  header.app-header .nav-tabs{margin-left:0 !important;gap:2px}
  header.app-header .nav-tabs a{padding:6px 10px !important;font-size:11px !important}
  header.app-header .updated{display:none}
  .freshness-strip{justify-content:flex-start;width:100%}
}
@media (max-width:520px){
  .label{font-size:10px;letter-spacing:0.1em}
  .grid-stats-4,.grid-stats-5{grid-template-columns:1fr 1fr;gap:10px}
  .ranking-grid{grid-template-columns:1fr}
  .hero-team{grid-template-columns:1fr !important}
  .hero-team>div:first-child{max-width:280px}
  .freshness-chip{font-size:9px;padding:4px 7px}
}