/* ================================================================
   DUOSCOPE — estilos
   As animações por rolagem (scroll-driven / "scrollmation") ficam no
   bloco .sda no final. Sem suporte, o app.js usa IntersectionObserver
   (.io) e, com "reduzir movimento", tudo fica estático (.still).
   ================================================================ */

/* Propriedades registradas: permitem animar números, anéis e contadores */
@property --w { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --f { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --rp { syntax: '<number>'; inherits: false; initial-value: 0; }

:root {
  --bg: #06070c;
  --bg2: #0b0d16;
  --line: rgba(255, 255, 255, .08);
  --line2: rgba(255, 255, 255, .15);
  --text: #e9ecf5;
  --muted: #8a90a6;
  --dim: #5b6178;
  --cyan: #3ee6ff;
  --violet: #8b5cf6;
  --gold: #f5c451;
  --pink: #ff4fa3;
  --win: #4f9dff;
  --loss: #ff4d6d;
  --good: #39e5a0;
  --grad: linear-gradient(110deg, var(--cyan), var(--violet) 50%, var(--gold));
  --r: 22px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Unbounded', 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100vh;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
b, strong { font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.hot { color: var(--gold); }
.good { color: var(--good); }
.mid { color: #cfd3e1; }
.bad { color: var(--loss); }
::selection { background: rgba(139, 92, 246, .45); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }

/* ---------- fundo ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(139, 92, 246, .18), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
.orb { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .9; }
.o1 { left: -30vmax; top: -20vmax; background: radial-gradient(circle, rgba(62, 230, 255, .16), transparent 62%); }
.o2 { right: -35vmax; top: 30vh; background: radial-gradient(circle, rgba(139, 92, 246, .2), transparent 62%); }
.o3 { left: 10vw; bottom: -45vmax; background: radial-gradient(circle, rgba(245, 196, 81, .12), transparent 62%); }
.grain {
  position: absolute; inset: -50%; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.progress {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 100;
  background: var(--grad); transform-origin: 0 50%; transform: scaleX(0);
  box-shadow: 0 0 18px rgba(62, 230, 255, .6);
}

/* ---------- topo ---------- */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; gap: 24px;
  padding: 12px clamp(16px, 3vw, 36px);
  background: rgba(6, 7, 12, .72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.02rem var(--display); letter-spacing: .04em; }
.brand b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav { display: flex; gap: 2px; margin-inline: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  position: relative; padding: 8px 12px; border-radius: 999px; text-decoration: none;
  font-size: .86rem; font-weight: 500; color: var(--muted); white-space: nowrap;
  transition: color .25s, background .25s;
}
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.nav a.on { color: var(--text); background: rgba(255, 255, 255, .07); }
.nav a.on::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 3px; height: 2px; border-radius: 2px; background: var(--grad); }
.mode {
  font: 700 .7rem var(--mono); letter-spacing: .08em; padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(245, 196, 81, .4); color: var(--gold); background: rgba(245, 196, 81, .08); white-space: nowrap;
}
.mode.real { border-color: rgba(57, 229, 160, .45); color: var(--good); background: rgba(57, 229, 160, .08); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding: 110px 16px 80px; overflow: hidden;
}
.floor {
  position: absolute; left: -50%; right: -50%; bottom: -12vh; height: 62vh;
  background-image:
    linear-gradient(rgba(62, 230, 255, .28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, .28) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}
.hero-inner { position: relative; max-width: 980px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line2);
  background: rgba(255, 255, 255, .04); font-size: .82rem; color: var(--muted);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 12px var(--good); animation: blink 2s infinite; }
.hero-title { margin: 0; font: 900 clamp(2.5rem, 8.4vw, 7.2rem)/.95 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.hero-title span { display: block; }
.hero-title .l2 {
  background: linear-gradient(110deg, var(--cyan), var(--violet) 25%, var(--gold) 50%, var(--violet) 75%, var(--cyan)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 8s linear infinite;
  filter: drop-shadow(0 10px 40px rgba(139, 92, 246, .35));
}
.hero-sub { max-width: 620px; margin: 26px auto 34px; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.12rem); }

.search {
  display: flex; align-items: stretch; gap: 0; margin: 0 auto; max-width: 620px;
  padding: 6px; border-radius: 20px;
  background: rgba(14, 16, 26, .8); border: 1px solid var(--line2);
  box-shadow: 0 20px 60px -20px rgba(139, 92, 246, .5), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  backdrop-filter: blur(12px);
  transition: border-color .3s, box-shadow .3s;
}
.search:focus-within { border-color: rgba(62, 230, 255, .6); box-shadow: 0 20px 70px -20px rgba(62, 230, 255, .55); }
.search select, .search input { background: none; border: 0; color: var(--text); font: 500 1rem var(--font); outline: none; }
.search select { padding: 0 10px 0 14px; font-weight: 700; color: var(--gold); border-right: 1px solid var(--line); cursor: pointer; }
.search select option { background: #11131d; color: var(--text); }
.search input { flex: 1; min-width: 0; padding: 14px 16px; }
.search input::placeholder { color: var(--dim); }
.search button {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; border: 0; border-radius: 14px;
  background: var(--grad); background-size: 160% 100%; color: #090a10; font-weight: 800;
  transition: background-position .5s var(--ease), transform .2s;
}
.search button:hover { background-position: 100% 0; }
.search button:active { transform: scale(.97); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; font-size: .85rem; }
.chip {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03);
  font-size: .82rem; color: var(--muted); transition: all .25s;
}
.chip:hover { color: var(--text); border-color: var(--cyan); background: rgba(62, 230, 255, .08); }
.scroll-hint { position: absolute; bottom: 28px; left: 50%; translate: -50% 0; width: 26px; height: 42px; border: 2px solid var(--line2); border-radius: 14px; }
.scroll-hint span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--cyan); animation: wheel 1.8s var(--ease) infinite; }

/* ---------- blocos comuns ---------- */
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.sec { position: relative; padding: clamp(70px, 11vh, 130px) 0; }
.sec-head { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: baseline; margin-bottom: 34px; }
.sec-num { font: 700 .9rem var(--mono); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-title { margin: 0; font: 800 clamp(1.8rem, 4.6vw, 3.4rem)/1.05 var(--display); letter-spacing: -.03em; }
.sec-title span { display: inline-block; }
.sec-lead { grid-column: 2; margin: 12px 0 0; max-width: 62ch; color: var(--muted); }
.card-t { margin: 0 0 16px; font: 700 .78rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kicker { margin: 0 0 6px; font: 700 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }

.glass {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 60px -32px rgba(0, 0, 0, .7);
  backdrop-filter: blur(14px);
}
.glass::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(62, 230, 255, .09), transparent 45%);
  opacity: 0; transition: opacity .35s;
}
.glass:hover::before { opacity: 1; }
.empty { display: flex; align-items: center; gap: 16px; padding: 26px; color: var(--muted); }
.empty .ico { width: 34px; height: 34px; flex: none; }
.empty p { margin: 0; }

.tag { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line2); font-size: .8rem; color: var(--muted); background: rgba(255, 255, 255, .03); }
.tag.grad { color: #0a0b10; font-weight: 700; border: 0; background: var(--grad); }
.sim, .real { margin-left: 6px; padding: 2px 8px; border-radius: 999px; font: 700 .64rem var(--mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.sim { color: var(--gold); background: rgba(245, 196, 81, .1); border: 1px solid rgba(245, 196, 81, .3); }
.real { color: var(--good); background: rgba(57, 229, 160, .1); border: 1px solid rgba(57, 229, 160, .3); }

.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.btn, .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; font-weight: 600; font-size: .86rem;
  transition: all .25s;
}
.btn { padding: 10px 16px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .05); }
.btn:hover { border-color: var(--cyan); background: rgba(62, 230, 255, .1); }
.btn-ghost { padding: 6px 10px; border: 1px solid var(--line); background: none; color: var(--muted); }
.btn-ghost:hover { color: var(--text); border-color: var(--line2); }

/* anel de porcentagem */
.ring {
  --rp: var(--p);
  --size: 84px;
  position: relative; display: grid; place-items: center; flex: none;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: conic-gradient(from -90deg, var(--cyan), var(--violet) calc(var(--rp) * 180deg), var(--gold) calc(var(--rp) * 360deg), rgba(255, 255, 255, .07) 0);
  transition: --rp .7s var(--ease);
}
.ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #0d0f18; }
.ring > * { position: relative; }
.ring > span:not(.av) { font: 700 1.05rem var(--mono); }
.ring small { position: absolute; bottom: 18px; font-size: .6rem; color: var(--muted); }
.ring > span:has(+ small) { translate: 0 -5px; }
.ring.sm { --size: 58px; }
.ring.sm::before { inset: 5px; }
.ring.sm > span { font-size: .8rem; }
.ring.big { --size: 128px; }
.ring.big::before { inset: 8px; }

/* emblema de elo */
.crest { --tc: #5b6178; position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; }
.crest svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--tc) 55%, transparent)); }
.crest .o { fill: var(--tc); }
.crest .i { fill: #0b0d16; stroke: color-mix(in srgb, var(--tc) 60%, #fff); stroke-width: 2; }
.crest b { position: relative; font: 800 .8rem var(--display); color: var(--tc); }
.crest.sm { width: 24px; height: 24px; }
.crest.sm b { font-size: .55rem; }
.crest.xl { width: 92px; height: 92px; }
.crest.xl b { font-size: 1.9rem; }
[data-tier="IRON"] { --tc: #8d8580; }
[data-tier="BRONZE"] { --tc: #c07a4a; }
[data-tier="SILVER"] { --tc: #a9bccb; }
[data-tier="GOLD"] { --tc: #f0c35b; }
[data-tier="PLATINUM"] { --tc: #3fc9b4; }
[data-tier="EMERALD"] { --tc: #2fd27a; }
[data-tier="DIAMOND"] { --tc: #7aa9ff; }
[data-tier="MASTER"] { --tc: #c06bff; }
[data-tier="GRANDMASTER"] { --tc: #ff5468; }
[data-tier="CHALLENGER"] { --tc: #ffe08a; }
.rank-name { margin: 0; font: 800 1.3rem var(--display); color: var(--tc, var(--text)); }

/* avatares e ícones */
.av {
  --s: 36px;
  display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 12px;
  background: linear-gradient(135deg, hsl(var(--h, 200) 85% 62%), hsl(calc(var(--h, 200) + 70) 75% 48%));
  color: #0a0b12; font: 800 calc(var(--s) * .34) var(--display); letter-spacing: -.02em;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset;
}
.av.lg { --s: 48px; border-radius: 15px; }
.av.xl { --s: 76px; border-radius: 22px; }
.av.ghost { background: rgba(255, 255, 255, .05); border: 1px dashed var(--line2); color: var(--muted); }
.av.ghost .ico { width: 55%; height: 55%; }
.ci {
  --s: 40px;
  position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden;
  width: var(--s); height: var(--s); border-radius: 11px;
  background: linear-gradient(135deg, #232842, #141725); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset;
}
.ci::before { content: attr(data-i); font: 700 calc(var(--s) * .32) var(--display); color: var(--muted); }
.ci img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.ci.xs { --s: 24px; border-radius: 7px; }
.ci.sm { --s: 32px; border-radius: 9px; }
.ci.md { --s: 46px; border-radius: 13px; }

/* ---------- perfil ---------- */
.profile { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; padding: 30px; }
.p-id { display: flex; align-items: center; gap: 22px; min-width: 0; }
.p-icon { position: relative; flex: none; }
.p-icon img { position: absolute; inset: 0; width: 76px; height: 76px; border-radius: 22px; box-shadow: 0 0 0 2px rgba(245, 196, 81, .6), 0 10px 40px -10px rgba(245, 196, 81, .5); }
.lvl { position: absolute; left: 50%; bottom: -10px; translate: -50% 0; padding: 2px 8px; border-radius: 999px; background: #0d0f18; border: 1px solid rgba(245, 196, 81, .6); font: 700 .7rem var(--mono); color: var(--gold); }
.p-who { min-width: 0; }
.p-region { margin: 0; font: 700 .74rem var(--mono); letter-spacing: .1em; color: var(--muted); }
.p-name { margin: 4px 0 12px; font: 800 clamp(1.5rem, 3.6vw, 2.5rem)/1.05 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.p-name span, .pt-name span, .f-who h3 span { color: var(--dim); font-weight: 500; }
.p-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.p-rank { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.p-rank-txt p { margin: 0; }
.p-rank-txt .muted { font-size: .84rem; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.kpi { padding: 18px 20px; }
.kpi p { margin: 0; }
.k-l { font-size: .8rem; color: var(--muted); }
.k-v { margin: 4px 0 2px !important; font: 700 clamp(1.5rem, 2.6vw, 2rem) var(--mono); letter-spacing: -.03em; }
.k-s { font-size: .76rem; color: var(--dim); }

/* ---------- lista de probabilidades ---------- */
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plist li {
  display: grid; grid-template-columns: 36px minmax(0, 1.1fr) minmax(0, 1.6fr) 58px; gap: 12px; align-items: center;
  padding: 8px 10px; border-radius: 14px; border: 1px solid transparent; transition: background .3s, border-color .3s;
}
.plist li.lead { background: rgba(245, 196, 81, .07); border-color: rgba(245, 196, 81, .25); }
.plist li.solo { border: 1px dashed var(--line); }
.plist li.solo.lead { border-style: solid; }
.pn { display: grid; min-width: 0; }
.pn b, .pn small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn small { color: var(--dim); font-size: .74rem; }
.bar { position: relative; display: block; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 100%); border-radius: inherit; background: var(--grad); background-size: 300px 100%; transform-origin: left; transition: width .7s var(--ease); }
.plist .bar i { width: calc(var(--v) * 100%); }
.pv { text-align: right; font: 700 .95rem var(--mono); }
.lead .pv { color: var(--gold); }



/* ---------- ao vivo ---------- */
.live-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 22px; margin-bottom: 18px; }
.live-head p { margin: 0; }
.lh-r { margin-left: auto !important; color: var(--muted); }
.lh-r b { color: var(--gold); font-family: var(--mono); }
.pulse { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--loss); }
.pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--loss); animation: ping 1.6s var(--ease) infinite; }
.teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.team { display: grid; gap: 8px; }
.team h3 { margin: 0 0 4px; font: 700 .78rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.team.blue h3 { color: var(--win); }
.team.red h3 { color: var(--loss); }
.vs { font: 900 2rem var(--display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lrow {
  --pm: transparent;
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) 76px 98px; gap: 12px; align-items: center;
  padding: 10px 14px 10px 16px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03); overflow: hidden;
}
.lrow::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pm); box-shadow: 0 0 16px var(--pm); }
.team.blue .lrow { background: linear-gradient(90deg, rgba(79, 157, 255, .08), rgba(255, 255, 255, .02)); }
.team.red .lrow { background: linear-gradient(90deg, rgba(255, 77, 109, .08), rgba(255, 255, 255, .02)); }
.lrow.me { border-color: rgba(245, 196, 81, .55); box-shadow: 0 0 0 1px rgba(245, 196, 81, .2) inset, 0 10px 40px -20px rgba(245, 196, 81, .6); }
.lrow[data-pm=A] { --pm: var(--gold); }
.lrow[data-pm=B] { --pm: var(--pink); }
.lrow[data-pm=C] { --pm: var(--cyan); }
.l-name { display: grid; min-width: 0; }
.l-name b, .l-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-name span { font-size: .74rem; color: var(--dim); }
.l-rank { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .78rem; color: var(--muted); }
.l-rank > span:not(.crest) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-wr { display: grid; text-align: right; }
.l-wr b { font-family: var(--mono); }
.l-wr small, .l-pm small { font-size: .66rem; color: var(--dim); }
.l-pm { display: grid; justify-items: end; gap: 2px; }
.pm { padding: 2px 8px; border-radius: 999px; font: 700 .64rem var(--mono); text-transform: uppercase; color: #0a0b10; background: var(--pm); white-space: nowrap; }
.live-note { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: var(--muted); }
.live-note .ico { color: var(--gold); }
.live-note b { color: var(--text); }
.sec-num.live-num { padding: 3px 9px; border-radius: 6px; background: var(--loss); color: #fff; -webkit-background-clip: border-box; background-clip: border-box; font-size: .72rem; letter-spacing: .1em; box-shadow: 0 0 18px rgba(255, 77, 109, .55); }

/* ---------- letreiro ---------- */
.marquee { padding: 30px 0; overflow: hidden; border-block: 1px solid var(--line); background: rgba(255, 255, 255, .015); }
.marquee-track { display: flex; gap: .5em; width: max-content; font: 900 clamp(3rem, 10vw, 8.5rem)/1 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.marquee-track span { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22); }
.marquee-track span:nth-child(4n+1) { -webkit-text-stroke: 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.marquee-track span:nth-child(2n) { -webkit-text-stroke: 0; color: var(--violet); font-size: .5em; align-self: center; }

/* ---------- estilo ---------- */
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.radar-card { padding: 16px; view-timeline: --radar block; }
.radar { width: 100%; height: auto; display: block; overflow: visible; }
.radar .rg { fill: none; stroke: rgba(255, 255, 255, .09); }
.radar .sp { stroke: rgba(255, 255, 255, .07); }
.radar .ra { fill: url(#rgrad); fill-opacity: .28; stroke: url(#rgrad); stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 18px rgba(139, 92, 246, .55)); }
.radar .rd { fill: #fff; stroke: var(--violet); stroke-width: 2; }
.radar .rl { fill: var(--muted); font: 600 13px var(--font); }
.radar .rv { fill: var(--text); font: 700 15px var(--mono); }
.arch { margin: 0 0 12px; font: 900 clamp(2rem, 4.4vw, 3.4rem)/1 var(--display); letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.arch-desc { margin: 0 0 24px; color: var(--muted); font-size: 1.02rem; max-width: 46ch; }
.arch-top { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 14px; background: rgba(57, 229, 160, .07); border: 1px solid rgba(57, 229, 160, .25); color: var(--muted); font-size: .9rem; }
.arch-top .ico { color: var(--good); margin-top: 1px; }
.arch-top b { color: var(--text); }
.mix { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.mix > .glass { padding: 22px; }
.stack-bar { display: flex; gap: 3px; height: 14px; border-radius: 8px; overflow: hidden; }
.stack-bar span { min-width: 4px; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; font-size: .82rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend b { color: var(--text); font-family: var(--mono); font-weight: 600; }
.r-TOP { background: #ff8a4c; } .r-JUNGLE { background: #39e5a0; } .r-MID { background: #3ee6ff; } .r-ADC { background: #f5c451; } .r-SUPPORT { background: #c084fc; }
.q-0 { background: var(--cyan); } .q-1 { background: var(--violet); } .q-2 { background: var(--gold); } .q-3 { background: var(--pink); } .q-4 { background: var(--good); } .q-5 { background: var(--dim); }
#phases { margin-top: 34px; }

/* ---------- pool de campeões ---------- */
.pool { position: relative; padding: clamp(70px, 11vh, 130px) 0; }
.pool-sticky { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.pool-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.pool-head .sec-head { margin: 0; }
.pool-meter { width: min(240px, 40vw); height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-bottom: 14px; }
.pool-meter span { display: block; height: 100%; background: var(--grad); transform-origin: left; }
.pool-bgword { position: absolute; top: 50%; left: 0; translate: 0 -50%; font: 900 clamp(6rem, 20vw, 18rem)/1 var(--display); letter-spacing: -.05em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .06); pointer-events: none; }
.pool-viewport { overflow-x: auto; padding: 10px max(16px, calc((100vw - 1200px) / 2)) 24px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.pool-track { display: flex; gap: 20px; width: max-content; }
.pcard {
  position: relative; flex: none; width: 290px; height: min(62vh, 520px); min-height: 400px;
  border-radius: 26px; overflow: hidden; scroll-snap-align: start;
  border: 1px solid var(--line2); background: #10121c;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
  transition: transform .5s var(--ease), border-color .3s;
}
.pcard:hover { transform: translateY(-8px) rotate(-.6deg); border-color: rgba(245, 196, 81, .5); }
.p-art { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, #262b48, #0f111b); }
.p-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: transform .8s var(--ease); }
.pcard:hover .p-art img { transform: scale(1.06); }
.p-ini { font: 900 4rem var(--display); color: rgba(255, 255, 255, .08); }
.p-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 7, 12, 0) 25%, rgba(6, 7, 12, .75) 55%, rgba(6, 7, 12, .97) 82%); }
.p-body { position: absolute; inset: auto 0 0; padding: 22px; }
.p-no { position: absolute; z-index: 1; top: 14px; left: 18px; font: 900 3.2rem var(--display); color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55); }
.pcard h3 { margin: 0; font: 800 1.5rem var(--display); }
.p-sub { margin: 2px 0 14px; font-size: .8rem; color: var(--muted); }
.p-wr { display: flex; align-items: center; gap: 12px; font-size: .84rem; color: var(--muted); }
.p-dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 0; }
.p-dl div { padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.p-dl dt { font-size: .66rem; color: var(--muted); }
.p-dl dd { margin: 0; font: 700 .95rem var(--mono); }
.p-dl.col { grid-template-columns: 1fr; }
.pcard.summary { background: radial-gradient(120% 80% at 0% 0%, rgba(139, 92, 246, .35), transparent 60%), radial-gradient(100% 80% at 100% 100%, rgba(62, 230, 255, .25), transparent 60%), #0f111b; }
.pcard.summary .p-body { inset: auto 0 0; }
.pcard.summary h3 { font-size: 2rem; }

/* ---------- ritmo ---------- */
.heat { padding: 22px; }
.heat-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; align-items: baseline; }
.heat-top .muted { font-size: .78rem; }
.heat-grid { display: grid; grid-template-columns: 36px repeat(24, minmax(0, 1fr)); gap: 4px; }
.hx, .hy { font: 500 .66rem var(--mono); color: var(--dim); }
.hy { align-self: center; }
.hc {
  aspect-ratio: 1.3; border-radius: 5px;
  background: linear-gradient(135deg, rgba(62, 230, 255, calc(.04 + var(--a) * .9)), rgba(139, 92, 246, calc(.04 + var(--a) * .9)));
  box-shadow: 0 0 calc(var(--a) * 18px) rgba(62, 230, 255, calc(var(--a) * .5));
  transition: transform .2s;
}
.hc:hover { transform: scale(1.35); outline: 1px solid #fff; z-index: 1; }
.rh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.rh-grid > .glass { padding: 22px; }
.vbars { display: flex; gap: 10px; height: 200px; }
.vb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.vb b { font: 700 .85rem var(--mono); }
.vb .col {
  position: relative; flex: 1; width: 100%; max-width: 64px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(to top, transparent calc(50% - .5px), rgba(255, 255, 255, .22) calc(50% - .5px), rgba(255, 255, 255, .22) calc(50% + .5px), transparent calc(50% + .5px)), rgba(255, 255, 255, .04);
}
.vb .col i { position: absolute; inset: auto 0 0; height: calc(var(--v) * 100%); border-radius: 10px; background: linear-gradient(to top, var(--violet), var(--cyan)); transform-origin: bottom; }
.vl { font-size: .8rem; font-weight: 600; }
.vb small { font-size: .66rem; color: var(--dim); }
.half { display: none; }
.react { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.react > div { display: grid; gap: 4px; padding: 14px 6px; border-radius: 14px; background: rgba(0, 0, 0, .22); }
.react span { font-size: .74rem; color: var(--muted); }
.react b { font: 700 1.6rem var(--mono); }
.react small { font-size: .66rem; color: var(--dim); }
.tilt-meter { position: relative; height: 10px; margin-top: 26px; border-radius: 10px; background: linear-gradient(90deg, var(--good), var(--gold), var(--loss)); }
.tilt-meter span { position: absolute; top: 50%; left: calc(var(--t) * 100%); width: 20px; height: 20px; translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(0, 0, 0, .5), 0 0 20px #fff; }
.tilt-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: .74rem; color: var(--muted); }
.sess-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sess-grid > div { display: grid; gap: 2px; padding: 16px; border-radius: 14px; background: rgba(0, 0, 0, .22); }
.sess-grid b { font: 700 1.9rem var(--mono); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sess-grid > div > span { font-size: .78rem; color: var(--muted); }

/* ---------- elo ---------- */
.lp-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: center; padding: 26px; view-timeline: --lp block; }
.lp-side { display: grid; justify-items: start; gap: 12px; }
.lp-stats { display: grid; gap: 8px; width: 100%; }
.lp-stats div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); font-size: .84rem; }
.lp-stats span { color: var(--muted); }
.lp-stats b { font-family: var(--mono); text-align: right; }
.lp-chart { min-width: 0; }
.lpc { width: 100%; height: auto; display: block; overflow: visible; }
.lpc .gl { stroke: rgba(255, 255, 255, .08); stroke-dasharray: 4 6; }
.lpc .gt { fill: var(--dim); font: 500 12px var(--mono); }
.lp-area { fill: url(#lpa); }
.lp-line { fill: none; stroke: url(#lpl); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(139, 92, 246, .7)); }
.lp-pt { stroke: #0b0d16; stroke-width: 1.5; }
.lp-pt.w { fill: var(--win); }
.lp-pt.l { fill: var(--loss); }
.lp-now { fill: var(--gold); stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: beat 1.6s var(--ease) infinite; }
.form { padding: 22px; margin-top: 18px; }
.form .muted { margin: 14px 0 0; font-size: .86rem; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font: 800 .78rem var(--mono); }
.pill.w { background: rgba(79, 157, 255, .16); color: var(--win); border: 1px solid rgba(79, 157, 255, .35); }
.pill.l { background: rgba(255, 77, 109, .14); color: var(--loss); border: 1px solid rgba(255, 77, 109, .3); }

/* ---------- histórico ---------- */
.mlist { display: grid; gap: 8px; }
.match { border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); overflow: hidden; transition: border-color .25s; }
.match.w { --mc: var(--win); background: linear-gradient(90deg, rgba(79, 157, 255, .09), rgba(255, 255, 255, .015) 40%); }
.match.l { --mc: var(--loss); background: linear-gradient(90deg, rgba(255, 77, 109, .08), rgba(255, 255, 255, .015) 40%); }
.match:hover, .match[open] { border-color: var(--line2); }
.match summary {
  position: relative; list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 118px 56px 46px 120px minmax(0, 1fr) 150px; gap: 14px; align-items: center;
  padding: 12px 18px 12px 22px;
}
.match summary::-webkit-details-marker { display: none; }
.match summary::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--mc); }
.m-res, .m-kda, .m-stats { display: grid; }
.m-res b { color: var(--mc); }
.m-res small, .m-kda small, .m-stats small { font-size: .74rem; color: var(--muted); }
.m-champ { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.m-champ small { font-size: .66rem; color: var(--dim); }
.m-kda b { font-family: var(--mono); }
.m-kda em { font-style: normal; color: var(--loss); }
.multi { color: var(--gold); font-weight: 700; }
.m-team { display: flex; gap: 4px; }
.m-team .fr .ci { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(245, 196, 81, .6); }
.m-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 4px 22px 18px; }
.side { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.side li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .2); font-size: .84rem; }
.side li > span:not(.ci) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side li small { color: var(--dim); font-size: .7rem; }
.side li.hd { background: none; font: 700 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.side.ally li.hd { color: var(--win); }
.side.enemy li.hd { color: var(--loss); }
.side li.fr { box-shadow: 0 0 0 1px rgba(245, 196, 81, .5) inset; }
.side li.fr > span:not(.ci)::after { content: ' · parceiro'; color: var(--gold); font-size: .72rem; }
.side li.me { background: rgba(245, 196, 81, .1); font-weight: 700; }
.more { display: flex; margin: 18px auto 0; }

/* ---------- rodapé, loader, toast ---------- */
.foot { padding: 50px 0 60px; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; }
.foot p { margin: 0 0 8px; }
.legal { font-size: .74rem; color: var(--dim); max-width: 90ch; }
.loader { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 18px; background: rgba(6, 7, 12, .7); backdrop-filter: blur(10px); }
.loader[hidden] { display: none; }
.loader .ring { --size: 64px; --rp: .35; background: conic-gradient(var(--cyan), var(--violet), var(--gold), transparent 75%); animation: spin 1s linear infinite; transition: none; }
.loader p { margin: 0; color: var(--muted); font: 600 .9rem var(--mono); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 95; max-width: min(560px, calc(100% - 32px)); padding: 12px 18px; border-radius: 14px; translate: -50% 160%; background: #151827; border: 1px solid var(--line2); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .7); font-size: .88rem; transition: translate .45s var(--ease); }
.toast.on { translate: -50% 0; }

/* ---------- keyframes ---------- */
@keyframes blink { 50% { opacity: .35; } }
@keyframes sheen { to { background-position: 200% 0; } }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@keyframes ping { 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes beat { 50% { transform: scale(1.5); } }
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- responsivo ---------- */
@media (max-width: 1000px) {
  .profile, .style-grid, .lp-wrap { grid-template-columns: 1fr; }
  .p-rank { justify-content: flex-start; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .teams { grid-template-columns: 1fr; }
  .vs { justify-self: center; }
  .rh-grid, .mix { grid-template-columns: 1fr; }
  .lp-side { grid-template-columns: auto 1fr; align-items: center; }
  .lp-stats { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .mode { margin-left: auto; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-lead { grid-column: 1; }
  .search { flex-wrap: wrap; }
  .search select { border-right: 0; padding: 10px 14px; }
  .search input { flex-basis: 60%; }
  .search button { flex: 1 1 100%; justify-content: center; padding: 12px; }
  .p-id { flex-direction: column; align-items: flex-start; }
  .plist li { grid-template-columns: 32px minmax(0, 1fr) 56px; }
  .plist li .bar { grid-column: 2 / 4; grid-row: 2; }
  .lrow { grid-template-columns: auto minmax(0, 1fr) 70px; }
  .l-rank, .l-pm small { display: none; }
  .l-pm { grid-column: 2 / 4; justify-items: start; }
  .heat-grid { gap: 2px; grid-template-columns: 28px repeat(24, minmax(0, 1fr)); }
  .hc { border-radius: 3px; }
  .hx { font-size: .5rem; }
  .match summary { grid-template-columns: 92px 50px 1fr; gap: 10px; }
  .m-stats, .m-items, .m-lo { display: none; }
  .m-detail { grid-template-columns: 1fr; }
  .pcard { width: 250px; }
}

/* ---------- fallback com IntersectionObserver ---------- */
.io .sd, .io .pcard { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.io .sd.in, .io .pcard.in { opacity: 1; transform: none; }
.still .ring { transition: none; }

/* ================================================================
   SCROLL-DRIVEN ANIMATIONS
   animation-timeline: scroll() → progresso da página
   animation-timeline: view()   → progresso do elemento cruzando a tela
   view-timeline nomeado        → SVGs e trilhos acompanhando um pai
   ================================================================ */
@supports (animation-timeline: view()) {

  /* barra de progresso da leitura */
  .sda .progress { animation: grow-x linear both; animation-timeline: scroll(root block); }

  /* topo: transparente no início, vidro fosco ao rolar */
  .sda .topbar { animation: header-solid linear both; animation-timeline: scroll(root); animation-range: 0 220px; }

  /* hero: título afunda, desfoca e some; o piso 3D inclina e corre */
  .sda .hero-inner { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 0 95vh; }
  .sda .floor {
    animation: floor-run 3.5s linear infinite, floor-tilt linear both;
    animation-timeline: auto, scroll(root);
    animation-range: normal, 0 100vh;
  }
  .sda .scroll-hint { animation: fade-out linear both; animation-timeline: scroll(root); animation-range: 0 22vh; }

  /* orbes do fundo com parallax pela página inteira */
  .sda .o1 { animation: orb-1 linear both; animation-timeline: scroll(root); }
  .sda .o2 { animation: orb-2 linear both; animation-timeline: scroll(root); }
  .sda .o3 { animation: orb-3 linear both; animation-timeline: scroll(root); }

  /* entrada genérica dos blocos */
  .sda .sd { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
  .sda .kpi { animation-range: entry calc(var(--i) * 2%) cover calc(18% + var(--i) * 2.5%); }

  /* títulos de seção: cortina revelando o texto */
  .sda .sec-title span { animation: wipe linear both; animation-timeline: view(); animation-range: entry 20% cover 38%; }
  .sda .sec-num { animation: slide-num linear both; animation-timeline: view(); animation-range: entry 10% cover 32%; }

  /* números que contam conforme a rolagem */
  .sda .num {
    animation: count linear both; animation-timeline: view(); animation-range: entry 5% cover 40%;
    counter-reset: w var(--w) f var(--f);
  }
  .sda .num .v { display: none; }
  .sda .num::after { content: counter(w) attr(data-sfx); }
  .sda .num[data-dec="1"]::after { content: counter(w) "," counter(f) attr(data-sfx); }
  .sda .num[data-dec="2"]::after { content: counter(w) "," counter(f, decimal-leading-zero) attr(data-sfx); }

  /* anéis enchendo */
  .sda .ring:not(.big) { animation: ring-fill linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }

  /* barras crescendo */
  .sda .bar i, .sda .f-share > span::after {
    animation: grow-x linear both; animation-timeline: view(); animation-range: entry 20% cover 42%;
  }
  .sda .vb .col i { animation: grow-y linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }

  /* cartões de parceiros virando em 3D */

  /* partida ao vivo: times entram pelas laterais */
  .sda .team.blue .lrow { animation: from-left linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
  .sda .team.red .lrow { animation: from-right linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
  .sda .vs { animation: vs-pop linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }

  /* letreiro anda com a rolagem */
  .sda .marquee-track { animation: marquee linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }

  /* radar: o polígono abre girando a partir do centro (timeline do cartão) */
  .sda .radar-shape { transform-box: view-box; transform-origin: 200px 200px; animation: radar-in linear both; animation-timeline: --radar; animation-range: entry 25% cover 50%; }
  .sda .radar .rg { animation: fade-in linear both; animation-timeline: --radar; animation-range: entry 0% cover 30%; }

  /* heatmap: onda da esquerda para a direita */
  .sda .hc { animation: pop linear both; animation-timeline: view(); animation-range: entry calc(var(--d) * 50%) cover calc(18% + var(--d) * 22%); }

  /* gráfico de PDL se desenha */
  .sda .lp-line { stroke-dasharray: 1; animation: draw linear both; animation-timeline: --lp; animation-range: entry 35% cover 62%; }
  .sda .lp-area, .sda .lp-pt { animation: fade-in linear both; animation-timeline: --lp; animation-range: entry 60% cover 66%; }
  .sda .pill { animation: pop linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 2.5%) cover calc(15% + var(--i) * 2%); }

  /* histórico */
  .sda .match { animation: rise-sm linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }

  /* pool: seção alta + trilho grudado; rolar para baixo move os cartões para o lado */
  .sda .pool { padding: 0; view-timeline: --pool block; }
  .sda .pool:not(.flat) .pool-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding-top: 60px; }
  .sda .pool:not(.flat) .pool-viewport { overflow: visible; scroll-snap-type: none; }
  .sda .pool:not(.flat) .pool-track { animation: pool-x linear both; animation-timeline: --pool; animation-range: contain 0% contain 100%; }
  .sda .pool:not(.flat) .pool-bgword { animation: pool-word linear both; animation-timeline: --pool; animation-range: contain 0% contain 100%; }
  .sda .pool:not(.flat) .pool-meter span { animation: grow-x linear both; animation-timeline: --pool; animation-range: contain 0% contain 100%; }
  .sda .pool.flat { padding: clamp(70px, 11vh, 130px) 0; }
  .sda .pcard .p-art img { animation: art-zoom linear both; animation-timeline: --pool; animation-range: contain 0% contain 100%; }
}

@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes header-solid {
  from { background: rgba(6, 7, 12, 0); border-bottom-color: transparent; backdrop-filter: blur(0) saturate(100%); }
}
@keyframes hero-out { to { transform: translateY(-14vh) scale(.86); opacity: 0; filter: blur(12px); } }
@keyframes floor-run { to { background-position: 0 64px, 0 0; } }
@keyframes floor-tilt { to { transform: perspective(520px) rotateX(80deg) translateY(-10vh); opacity: .2; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes orb-1 { to { transform: translate(30vw, 80vh) scale(1.3); } }
@keyframes orb-2 { to { transform: translate(-25vw, -60vh) scale(.8); } }
@keyframes orb-3 { from { transform: translate(-10vw, 40vh); } to { transform: translate(20vw, -70vh) scale(1.2); } }
@keyframes rise { from { opacity: 0; transform: translateY(70px) scale(.96); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rise-sm { from { opacity: 0; transform: translateY(24px); } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); transform: translateX(-3%); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes slide-num { from { opacity: 0; transform: translateY(100%); } }
@keyframes count { from { --w: 0; --f: 0; } to { --w: var(--tw); --f: var(--tf); } }
@keyframes ring-fill { from { --rp: 0; } }
@keyframes flip-in { from { opacity: 0; transform: translateY(110px) rotate(var(--tilt, -4deg)) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes from-left { from { opacity: 0; transform: translateX(-80px); } }
@keyframes from-right { from { opacity: 0; transform: translateX(80px); } }
@keyframes vs-pop { from { opacity: 0; transform: scale(3) rotate(-20deg); } }
@keyframes marquee { from { transform: translateX(4%); } to { transform: translateX(-46%); } }
@keyframes radar-in { from { transform: scale(0) rotate(-60deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.2); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pool-x { from { transform: translateX(0); } to { transform: translateX(var(--pool-dist, 0px)); } }
@keyframes pool-word { from { transform: translateX(20vw); } to { transform: translateX(-60%); } }
@keyframes art-zoom { from { transform: scale(1.18); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================================================================
   RAIO-X DO JOGADOR — componentes da análise
   ================================================================ */
.ci.rune { border-radius: 50%; background: radial-gradient(circle, #1d2135, #0d0f18); }
.ci.it { border-radius: 8px; }
.kv-txt { font: 800 clamp(1.1rem, 1.8vw, 1.4rem) var(--display); letter-spacing: -.01em; }
.st { margin-left: 6px; padding: 2px 8px; border-radius: 999px; font: 700 .64rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line2); vertical-align: middle; }
.st.on { color: #fff; background: var(--loss); border-color: transparent; box-shadow: 0 0 16px rgba(255, 77, 109, .6); }
.st-btn { background: none; cursor: pointer; transition: color .2s, border-color .2s; }
.st-btn:hover { color: var(--cyan); border-color: var(--cyan); }
.p-tags .tag .ci { margin-right: 6px; }

/* faixa "em partida" */
.live-banner {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 14px 20px; border-radius: 18px; text-decoration: none;
  background: linear-gradient(90deg, rgba(255, 77, 109, .22), rgba(139, 92, 246, .14) 60%, rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 77, 109, .45); box-shadow: 0 20px 60px -30px rgba(255, 77, 109, .8);
}
.live-banner b { font: 800 .9rem var(--display); letter-spacing: .04em; }
.live-banner > span:not(.pulse):not(.ci) { color: var(--muted); font-size: .9rem; }
.live-banner .go { margin-left: auto; color: var(--text) !important; font-weight: 700; }

/* runas, feitiços e build */
.loadout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.lo { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.lo.wide { grid-column: 1 / -1; }
.lo-l { font: 700 .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lo-v { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lo-t { display: grid; min-width: 0; }
.lo-t b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-t small { font-size: .74rem; color: var(--muted); }
.build { flex-wrap: wrap; gap: 6px; }
.bi { display: grid; justify-items: center; gap: 2px; }
.bi small { font: 600 .64rem var(--mono); color: var(--dim); }
.arr { font-style: normal; color: var(--dim); font-size: 1.2rem; align-self: flex-start; margin-top: 10px; }

/* plano de jogo */
.plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan li { display: flex; gap: 12px; align-items: flex-start; }
.plan .ico { margin-top: 2px; color: var(--cyan); }
.plan p { margin: 0; color: var(--muted); font-size: .92rem; }
.plan b { color: var(--text); }

/* ao vivo: destaque do campeão escolhido */
.spot {
  position: relative; display: grid; grid-template-columns: 1.15fr 1fr; margin-bottom: 22px;
  border-radius: 26px; overflow: hidden; border: 1px solid rgba(255, 77, 109, .35); background: #0c0e17;
  box-shadow: 0 40px 90px -40px rgba(255, 77, 109, .55);
}
.spot-art { position: absolute; inset: 0; overflow: hidden; }
.spot-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: .5; }
.spot-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 9, 15, .55) 0%, rgba(8, 9, 15, .85) 50%, rgba(8, 9, 15, .97) 70%); }
.spot-body, .spot-plan { position: relative; padding: 30px; }
.spot-plan { background: rgba(8, 9, 15, .55); backdrop-filter: blur(10px); border-left: 1px solid var(--line); }
.spot-name { margin: 0; font: 900 clamp(2.2rem, 5vw, 3.8rem)/1 var(--display); letter-spacing: -.03em; text-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.spot-sub { margin: 8px 0 0; color: #cfd3e1; }
.warn { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--gold); font-size: .86rem; }
.spot-duo { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.spot-duo .ico { color: var(--gold); }
.spot-duo b { color: var(--text); }
.team-sum { margin: -2px 0 6px; font-size: .8rem; color: var(--muted); }
.team-sum b { color: var(--text); }
.ally-tag { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(245, 196, 81, .15); color: var(--gold); font-size: .62rem; }
.lrow.opp { border-color: rgba(255, 255, 255, .35); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset; }
.pm.opp-tag { background: #fff; }

/* próximo pick */
.pick-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px; align-items: start; }
.pick-main { overflow: hidden; }
.pm-art { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; }
.pm-art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 20%; opacity: .32; }
.pm-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 11, 18, .2), rgba(10, 11, 18, .92) 45%); }
.pm-body { padding: 26px; }
.role-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.role-chips button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .3); font-size: .8rem; font-weight: 600; color: var(--muted); transition: all .25s; }
.role-chips button:hover { color: var(--text); }
.role-chips button[aria-pressed=true] { color: #0a0b10; border-color: transparent; background: var(--grad); }
.roles-line { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 22px; font-size: .84rem; font-weight: 600; }
.roles-line small { font: 500 .74rem var(--mono); color: var(--muted); }
.roles-line .dim { color: var(--muted); font-weight: 500; }
.pm-name { margin: 0; font: 900 clamp(2.4rem, 5.6vw, 4.4rem)/1 var(--display); letter-spacing: -.035em; background: linear-gradient(180deg, #fff, #c9cde0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pm-p { margin: 10px 0 0; color: var(--muted); }
.pm-p b { font: 700 1.2rem var(--mono); color: var(--gold); }
.pick-side { display: grid; gap: 20px; }
.pick-side > .glass { padding: 22px; }
.card-t small { margin-left: 6px; font-family: var(--font); text-transform: none; letter-spacing: 0; color: var(--dim); }
.plist.picks li { grid-template-columns: 32px minmax(0, 1.2fr) minmax(0, 1fr) 46px 28px; }
.ban-btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--dim); transition: all .2s; }
.ban-btn:hover { color: var(--loss); border-color: rgba(255, 77, 109, .4); background: rgba(255, 77, 109, .1); }
.bans { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; font-size: .8rem; }
.ban-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 999px; border: 1px solid rgba(255, 77, 109, .4); background: rgba(255, 77, 109, .08); font-size: .78rem; }
.ban-chip .ci { filter: grayscale(1); }
.ban-chip .ico { width: 14px; height: 14px; }
.impact { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(57, 229, 160, .07); border: 1px solid rgba(57, 229, 160, .25); font-size: .84rem; color: var(--muted); }
.impact .ico { color: var(--good); }
.impact b { font-family: var(--mono); }
.loyal-line { margin: 12px 0 0; }
.pick-collapsed { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 22px; }
.pick-collapsed > .ico { color: var(--loss); }
.pick-collapsed p { flex: 1; margin: 0; color: var(--muted); }
.pick-collapsed b { color: var(--text); }

/* bans recomendados (clicar bane no simulador) */
.bans-rec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 20px; }
.ban-card { overflow: hidden; min-height: 210px; display: flex; align-items: flex-end; width: 100%; padding: 0; text-align: left; color: inherit; transition: border-color .25s, box-shadow .25s; }
.ban-card:hover { border-color: rgba(255, 77, 109, .5); }
.ban-card[aria-pressed=true] { border-color: var(--loss); box-shadow: 0 0 0 1px var(--loss) inset, 0 20px 50px -24px rgba(255, 77, 109, .8); }
.ban-card[aria-pressed=true] .bc-art img { filter: grayscale(1); opacity: .3; }
.ban-card[aria-pressed=true] .bc-no::after { content: ' · BANIDO'; }
.bc-art { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; }
.bc-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; opacity: .55; filter: saturate(.7); transition: filter .3s, opacity .3s; }
.bc-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 15%, rgba(10, 11, 18, .95) 75%); }
.bc-body { display: grid; justify-items: start; padding: 20px; width: 100%; }
.bc-no { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--loss); font: 800 .66rem var(--mono); letter-spacing: .1em; color: #fff; }
.bc-name { margin: 10px 0 4px; font: 800 1.4rem var(--display); }
.bc-p { margin: 0 0 12px; font-size: .8rem; color: var(--muted); }
.threat { display: block; width: 100%; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.threat span { display: block; height: 100%; width: calc(var(--v) * 100%); background: linear-gradient(90deg, var(--gold), var(--loss)); transform-origin: left; }

/* etiquetas (DS.tagsFor): verde = brecha para explorar, dourado = respeite */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tg { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; border: 1px solid var(--line2); color: var(--muted); background: rgba(255, 255, 255, .04); }
.tg-weak { color: var(--good); border-color: rgba(57, 229, 160, .4); background: rgba(57, 229, 160, .08); }
.tg-strong { color: var(--gold); border-color: rgba(245, 196, 81, .45); background: rgba(245, 196, 81, .08); }
.tg-info { color: #9fd8ff; border-color: rgba(62, 230, 255, .3); background: rgba(62, 230, 255, .06); }
.tg-weak.risk { color: var(--loss); border-color: rgba(255, 77, 109, .4); background: rgba(255, 77, 109, .08); }
.tag.tg-strong { font-weight: 700; }

/* momento agora */
.moment { padding: 22px; margin-bottom: 18px; border-color: rgba(62, 230, 255, .22); }
.moment .plan p { font-size: .95rem; }
.sw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.sw-grid > .glass { padding: 22px; }
.good-t { color: var(--gold); }
.bad-t { color: var(--good); }
.tips, .mu, .mates, .pings, .metrics { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tip { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); }
.tip .ico { width: 22px; height: 22px; margin-top: 2px; }
.tip.str .ico { color: var(--gold); }
.tip.weak .ico { color: var(--good); }
.tip b { display: block; margin-bottom: 2px; }
.tip p { margin: 0; font-size: .86rem; color: var(--muted); }
.mu li, .mates li { display: flex; align-items: center; gap: 12px; }
.mu .pn, .mates .pn { flex: 1; }
.mu li > b, .mates li > b { font-family: var(--mono); }

/* fases */
.phase-line { position: relative; height: 2px; margin: 0 6% 26px; background: rgba(255, 255, 255, .08); border-radius: 2px; }
.phase-line span { position: absolute; inset: 0; background: var(--grad); transform-origin: left; box-shadow: 0 0 14px rgba(62, 230, 255, .6); }
.phase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.phase { padding: 22px; }
.phase.best { border-color: rgba(245, 196, 81, .45); box-shadow: 0 30px 70px -40px rgba(245, 196, 81, .7); }
.phase header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.phase h3 { margin: 0 0 8px; font: 800 1.35rem var(--display); }
.ph-tag { padding: 3px 10px; border-radius: 999px; font: 700 .66rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.ph-tag.t-good { background: rgba(57, 229, 160, .14); color: var(--good); }
.ph-tag.t-mid { background: rgba(255, 255, 255, .07); color: var(--muted); }
.ph-tag.t-bad { background: rgba(255, 77, 109, .14); color: var(--loss); }
.metrics li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: .84rem; color: var(--muted); }
.metrics b { font-family: var(--mono); color: var(--text); }
.meter { grid-column: 1 / -1; position: relative; display: block; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--grad); background-size: 300px 100%; transform-origin: left; }

/* pool clicável */
.pcard[data-champ] { cursor: pointer; }
.p-more { display: inline-block; margin-top: 12px; font-size: .78rem; font-weight: 700; color: var(--gold); opacity: 0; transform: translateY(6px); transition: all .35s var(--ease); }
.pcard:hover .p-more, .pcard:focus-visible .p-more { opacity: 1; transform: none; }

/* raio-x por campeão (o card escolhido no pool fica marcado) */
.pcard[aria-pressed=true] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 40px 80px -40px rgba(245, 196, 81, .55); }
.pcard[aria-pressed=true] .p-more { opacity: 1; transform: none; }
.xr-sec { padding-top: 10px; }
.xr-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 700 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.xr-kicker .ico { color: var(--gold); }
.xr { overflow: hidden; padding: 0; }
.xr-art { position: absolute; inset: 0 0 auto; height: 320px; z-index: -1; overflow: hidden; border-radius: var(--r) var(--r) 0 0; }
.xr-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; opacity: .45; }
.xr-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 11, 18, .1), #0d0f19 96%); }
.xr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 120px 28px 24px; }
.xr-head h3 { margin: 0; font: 900 clamp(2rem, 4.6vw, 3.4rem)/1 var(--display); letter-spacing: -.03em; }
.xr-head .muted { margin: 6px 0 0; }
.xr-head .ring small { bottom: 26px; }
.xr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 28px 28px; }
.xr-box { padding: 18px; border-radius: 16px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.xr-box.wide { grid-column: 1 / -1; }
.opt { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: .88rem; }
.opt > span:not(.ci) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt b { font-family: var(--mono); font-size: .82rem; color: var(--muted); }
.opt.sub { opacity: .8; font-size: .8rem; }
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; }
.itm { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; font-size: .86rem; }
.itm .ci { grid-row: span 2; }
.itm > span:not(.ci):not(.meter) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itm .meter { grid-column: 2; }
.itm b { grid-column: 3; grid-row: 1 / span 2; font-family: var(--mono); font-size: .82rem; color: var(--muted); }
.xs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.xs { display: grid; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); }
.xs span { font-size: .74rem; color: var(--muted); }
.xs b { font: 700 1.2rem var(--mono); }
.xs small { font-size: .7rem; }

/* hábitos */
.kpis.five { grid-template-columns: repeat(5, 1fr); margin: 0 0 18px; }
.hb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.hb-grid > .glass { padding: 22px; }
.hb-grid .vbars { height: 170px; }

/* com quem joga (resumo dentro de Hábitos) */
.partners { padding: 22px; margin-top: 18px; }
.partners .muted b { color: var(--text); }
.mates { margin-bottom: 14px; }
.mates li { padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .2); }
.partners > .muted.small + .muted.small { margin-top: 4px; }
.mates .mate-share { color: var(--cyan); font-size: 1.05rem; }
.mates small b { font-family: var(--mono); }
.mates .pn { display: grid; gap: 2px; }
.mate-carry { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.mate-carry i { padding: 1px 8px; border-radius: 999px; font: 600 .7rem var(--font); font-style: normal; }
.mc-by { background: rgba(57, 229, 160, .12); color: var(--good); }
.mc-over { background: rgba(245, 196, 81, .12); color: var(--gold); }
/* carregado ou carregando (partidas com amigos) */
.carry { display: grid; gap: 8px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); }
.carry-carried { border-color: rgba(57, 229, 160, .45); }
.carry-carrying { border-color: rgba(245, 196, 81, .5); }
.carry-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0; }
.carry-h b { font: 800 .95rem var(--display); }
.carry-carried .carry-h b { color: var(--good); }
.carry-carrying .carry-h b { color: var(--gold); }
.carry-h span { font-size: .74rem; color: var(--muted); }
.carry-bars { display: grid; gap: 6px; }
.carry-bars div { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .78rem; color: var(--muted); }
.carry-bars i { display: block; height: 8px; border-radius: 6px; background: linear-gradient(90deg, var(--violet) var(--cw), rgba(255, 255, 255, .06) var(--cw)); }
.carry-bars b { font: 700 .76rem var(--mono); color: var(--text); }
.carry p { margin: 0; }
a.tag { text-decoration: none; }
.badge { padding: 3px 8px; border-radius: 999px; font: 700 .6rem var(--mono); text-transform: uppercase; white-space: nowrap; }
.st-main { color: #0a0b10; background: var(--gold); }
.st-new { color: var(--cyan); background: rgba(62, 230, 255, .1); border: 1px solid rgba(62, 230, 255, .35); }
.st-gone { color: var(--muted); background: rgba(255, 255, 255, .05); border: 1px dashed var(--line2); }
.st-casual { color: #c4b5fd; background: rgba(139, 92, 246, .12); border: 1px solid rgba(139, 92, 246, .3); }

/* histórico */
.m-lo { display: grid; grid-template-columns: repeat(2, 22px); gap: 2px; }
.m-lo .ci { --s: 22px; }
.m-lo .ci.rune { grid-column: 1 / -1; justify-self: center; }
.m-items { display: flex; flex-wrap: wrap; gap: 3px; }

/* vitrine */
.vault-sec { padding-top: 40px; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(139, 92, 246, .06)); }
.vault-idle { display: flex; align-items: center; gap: 26px; padding: 30px; overflow: hidden; }
.vault-idle h3 { margin: 0 0 6px; font: 800 1.6rem var(--display); }
.vault-idle p { margin: 0; max-width: 60ch; }
.vault-idle .btn { margin-left: auto; flex: none; }
.btn.big { padding: 14px 22px; font-size: .95rem; border: 0; color: #0a0b10; background: var(--grad); background-size: 160% 100%; box-shadow: 0 16px 40px -14px rgba(139, 92, 246, .8); }
.btn.big:hover { background-position: 100% 0; }
.vi-orbs { position: relative; width: 84px; height: 84px; flex: none; }
.vi-orbs span { position: absolute; inset: 0; border-radius: 30%; border: 2px solid rgba(245, 196, 81, .6); animation: spin 9s linear infinite; }
.vi-orbs span:nth-child(2) { inset: 12px; border-color: rgba(139, 92, 246, .7); animation-duration: 6s; animation-direction: reverse; }
.vi-orbs span:nth-child(3) { inset: 26px; border-radius: 50%; border: 0; background: var(--grad); box-shadow: 0 0 30px rgba(245, 196, 81, .7); animation: beat 2.4s var(--ease) infinite; }
.vi-orbs.clash span { border-color: rgba(255, 77, 109, .6); }
.vi-orbs.clash span:nth-child(2) { border-color: rgba(245, 196, 81, .75); }
.extras { display: grid; gap: 18px; }
.vault-loading, .skins-loading { display: grid; justify-items: center; gap: 12px; padding: 40px; color: var(--muted); }
.ring.spin { --rp: .3; --size: 54px; background: conic-gradient(var(--cyan), var(--violet), var(--gold), transparent 75%); animation: spin 1s linear infinite; transition: none; }
.ring.spin.sm { --size: 36px; }
.vault { padding: 26px; }
.vault-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.vault-head h3 { margin: 0; font: 700 1.1rem var(--display); color: var(--muted); }
.vault-head h3 b { display: block; font-size: 2rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-cards { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.m-card { position: relative; aspect-ratio: 3 / 5; padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line2); background: linear-gradient(160deg, #262b48, #0f111b); text-align: left; transition: transform .4s var(--ease), border-color .3s, box-shadow .3s; }
.m-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.m-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(6, 7, 12, .95)); }
.m-card:hover { transform: translateY(-6px); }
.m-card[aria-pressed=true] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 20px 40px -16px rgba(245, 196, 81, .7); }
.m-lvl { position: absolute; z-index: 1; top: 8px; right: 8px; min-width: 28px; padding: 3px 7px; border-radius: 8px; background: rgba(6, 7, 12, .8); border: 1px solid rgba(245, 196, 81, .6); font: 800 .78rem var(--mono); color: var(--gold); text-align: center; }
.m-info { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 10px; display: grid; }
.m-info b { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-info small { font-size: .68rem; color: var(--muted); }
.skins-head { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 12px; }
.skins-head h4 { margin: 0; font: 800 1.3rem var(--display); }
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.skin { --rc: rgba(255, 255, 255, .15); position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid var(--rc); background: linear-gradient(160deg, #262b48, #0f111b); }
.skin img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.skin:hover img { transform: scale(1.06); }
.skin::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(6, 7, 12, .9)); pointer-events: none; }
.skin figcaption { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 10px; display: grid; gap: 4px; }
.skin figcaption b { font-size: .9rem; }
.skin figcaption span { display: flex; flex-wrap: wrap; gap: 4px; }
.skin i { font-style: normal; padding: 2px 7px; border-radius: 6px; font: 700 .6rem var(--mono); text-transform: uppercase; letter-spacing: .05em; background: rgba(255, 255, 255, .1); color: var(--muted); }
.skin .rar { background: var(--rc); color: #0a0b10; }
.skin .leg { background: rgba(255, 255, 255, .9); color: #0a0b10; }
.skin.r7, .skin.r6 { --rc: #ff7ad9; box-shadow: 0 0 30px -6px #ff7ad9; }
.skin.r5 { --rc: #ffb340; box-shadow: 0 0 30px -6px #ffb340; }
.skin.r4 { --rc: #c084fc; box-shadow: 0 0 26px -8px #c084fc; }
.skin.r3 { --rc: #f5c451; }
.skin.r2 { --rc: #3ee6ff; }
.skin.r1 .rar { background: rgba(255, 255, 255, .12); color: var(--muted); }
.vault-note { margin: 18px 0 0; }

@media (max-width: 1000px) {
  .spot, .pick-grid, .hb-grid, .sw-grid { grid-template-columns: 1fr; }
  .spot-plan { border-left: 0; border-top: 1px solid var(--line); }
  .bans-rec, .phase-grid { grid-template-columns: 1fr; }
  .ban-card { min-height: 170px; }
  .kpis.five { grid-template-columns: repeat(2, 1fr); }
  .m-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .loadout { grid-template-columns: 1fr; }
  .plist.picks li { grid-template-columns: 30px minmax(0, 1fr) 46px 28px; }
  .plist.picks li .bar { grid-column: 2 / 4; grid-row: 2; }
  .vault-idle { flex-direction: column; align-items: flex-start; }
  .vault-idle .btn { margin-left: 0; }
  .live-banner { flex-wrap: wrap; }
  .live-banner .go { margin-left: 0; }
  .xr-head { padding: 90px 18px 18px; flex-wrap: wrap; }
  .xr-grid { padding: 0 14px 14px; }
  .spot-body, .spot-plan { padding: 22px; }
}

@supports (animation-timeline: view()) {
  .sda .ban-card { animation: flip-in linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 4%) cover calc(30% + var(--i) * 4%); }
  .sda .ban-card:nth-child(1) { --tilt: -4deg; }
  .sda .ban-card:nth-child(2) { --tilt: 0deg; }
  .sda .ban-card:nth-child(3) { --tilt: 4deg; }
  .sda .threat span, .sda .meter i { animation: grow-x linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  .sda .phase-line span { animation: grow-x linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
  .sda .phase { animation-range: entry calc(var(--i) * 6%) cover calc(25% + var(--i) * 6%); }
  .sda .spot-art img { animation: art-zoom linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .sda .xr-art img { animation: art-zoom linear both; animation-timeline: view(); animation-range: entry 0% exit 50%; }
  .sda .pm-art img { animation: pm-pan linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .sda .tip { animation: from-left linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  .sda .skin { animation: rise-sm linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
}
@keyframes pm-pan { from { transform: scale(1.15) translateY(-4%); } to { transform: scale(1.02) translateY(3%); } }

.lobby-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.team.lobby h3 { color: var(--gold); }
@media (max-width: 1000px) { .lobby-grid { grid-template-columns: 1fr; } }

/* abas de fila no caminho do elo */
.elo-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.elo-tabs button { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); text-align: left; transition: all .25s; }
.elo-tabs button span { display: grid; }
.elo-tabs button b { font: 700 .95rem var(--display); }
.elo-tabs button small { font-size: .74rem; color: var(--muted); }
.elo-tabs button:hover { border-color: var(--line2); }
.elo-tabs button[aria-selected=true] { border-color: rgba(245, 196, 81, .55); background: rgba(245, 196, 81, .08); box-shadow: 0 16px 40px -24px rgba(245, 196, 81, .7); }
.flex-line { display: flex; align-items: center; gap: 6px; margin-top: 6px !important; font-size: .8rem; color: var(--muted); }
.flex-line b { color: var(--text); }

/* clash */
.clash-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: center; padding: 28px; margin-bottom: 18px; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, rgba(245, 196, 81, .14), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)); }
.cl-team { display: flex; gap: 20px; align-items: center; min-width: 0; }
.cl-badge { position: relative; display: grid; place-items: center; flex: none; width: 96px; height: 96px; }
.cl-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #11131d; stroke: var(--gold); stroke-width: 3; filter: drop-shadow(0 8px 26px rgba(245, 196, 81, .45)); }
.cl-badge b { position: relative; font: 900 1.3rem var(--display); color: var(--gold); letter-spacing: .02em; }
.cl-badge.off svg { stroke: var(--line2); filter: none; }
.cl-badge.off b { color: var(--dim); }
.cl-name { margin: 0 0 4px; font: 900 clamp(1.5rem, 3.4vw, 2.4rem)/1.05 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.cl-team .muted { margin: 0; font-size: .86rem; }
.cl-team .muted b { color: var(--text); }
.cl-players { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cl-players > span { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 6px 12px 6px 6px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.cl-players .av { --s: 30px; grid-row: span 2; border-radius: 9px; }
.cl-players b { font-size: .82rem; }
.cl-players small { font-size: .68rem; color: var(--muted); }
.cl-players .me { border-color: rgba(245, 196, 81, .55); }
.cl-trophies { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cl-trophies > div { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.cl-trophies b { font: 800 1.6rem var(--mono); }
.cl-trophies span { font-size: .74rem; color: var(--muted); }
.cl-trophies .trophy { grid-row: span 2; align-content: center; justify-items: center; text-align: center; }
.cl-trophies .trophy .ico { width: 40px; height: 40px; color: var(--dim); }
.cl-trophies .trophy b { font-size: 2.6rem; }
.cl-trophies .trophy.gold { border-color: rgba(245, 196, 81, .55); background: radial-gradient(circle at 50% 30%, rgba(245, 196, 81, .22), rgba(0, 0, 0, .25) 70%); }
.cl-trophies .trophy.gold .ico, .cl-trophies .trophy.gold b { color: var(--gold); filter: drop-shadow(0 0 14px rgba(245, 196, 81, .7)); }
.clash-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; margin-bottom: 18px; }
.clash-grid > .glass { padding: 22px; }
.tours { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tours li { display: grid; grid-template-columns: 116px auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); }
.tours li.win { border-color: rgba(245, 196, 81, .5); background: linear-gradient(90deg, rgba(245, 196, 81, .14), rgba(0, 0, 0, .2) 60%); }
.t-date { font: 600 .78rem var(--mono); color: var(--muted); }
.t-seq, .t-champs { display: flex; gap: 4px; }
.t-seq .pill { width: 28px; height: 28px; font-size: .7rem; }
.t-place { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .84rem; color: var(--muted); white-space: nowrap; }
.t-place.gold { color: var(--gold); }
.t-place.silver { color: #cfd8e6; }
.t-place .ico { width: 18px; height: 18px; }
.cl-role { margin: 14px 0 0; }
.cl-role b { color: var(--text); font-weight: 600; }
.cmp { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cmp li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .2); font-size: .86rem; color: var(--muted); }
.cmp b { font: 700 1rem var(--mono); }
.cmp small { min-width: 92px; text-align: right; font-size: .74rem; color: var(--dim); }
.clash-note { margin: 4px 0 0; max-width: 90ch; }
@media (max-width: 1000px) {
  .clash-hero, .clash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cl-team { flex-direction: column; align-items: flex-start; }
  .tours li { grid-template-columns: auto 1fr; }
  .t-champs { display: none; }
  .t-place { grid-column: 1 / -1; }
}
@supports (animation-timeline: view()) {
  .sda .tours li { animation: from-left linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
  .sda .cl-trophies .trophy.gold .ico { animation: vs-pop linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
}

/* ================================================================
   LINHA DO TEMPO, COMPARAR, RAIO-X RÁPIDO, FAVORITOS, CARD, RUNAS
   ================================================================ */

/* perfil: favoritar / exportar */
.p-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.p-actions .btn-ghost[aria-pressed=true] { color: var(--gold); border-color: rgba(245, 196, 81, .5); background: rgba(245, 196, 81, .08); }
.p-actions .btn-ghost[aria-pressed=true] .ico { fill: var(--gold); }
/* anotação sobre o jogador (só no PC do servidor) */
.note-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(245, 196, 81, .08); border: 1px solid rgba(245, 196, 81, .3); font-size: .86rem; color: var(--text); max-width: 52ch; }
.note .ico { flex: none; margin-top: 2px; color: var(--gold); }
.note-form { display: grid; gap: 8px; width: 100%; max-width: 520px; }
.note-form textarea { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); color: var(--text); font: 500 .9rem var(--font); resize: vertical; outline: none; }
.note-form textarea:focus { border-color: var(--cyan); }
.note-form > div { display: flex; gap: 8px; }

/* atalhos: favoritos e recentes */
#quick { margin-top: 10px; }
#quick:empty { display: none; }
.chip.qk { display: inline-flex; align-items: center; gap: 6px; }
.chip.qk .crest { width: 16px; height: 16px; }
.chip.qk .crest b { display: none; }

/* página de runas completa */
.rpage { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.rp-col { --tc: #c8aa6e; display: grid; align-content: start; gap: 8px; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 14%, transparent), rgba(0, 0, 0, .2)); border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent); }
.rp-col.shards { --tc: #8a90a6; }
.rp-tree { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 700 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tc); }
.rp-rune { display: flex; align-items: center; gap: 10px; font-size: .84rem; min-width: 0; }
.rp-rune small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cfd3e1; font-size: .82rem; }
.rp-rune.key small { font-weight: 700; color: var(--text); }
.rp-rune.key .ci { box-shadow: 0 0 0 2px var(--tc), 0 0 18px color-mix(in srgb, var(--tc) 60%, transparent); }
.rp-rune.shard .ci { --s: 26px; }
.alt-page { margin-top: 12px; }
.alt-page summary { cursor: pointer; font-size: .82rem; color: var(--muted); margin-bottom: 10px; }

/* elo: real × estimado */
.lp-mode { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 8px; }
.lp-mode button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .3); font-size: .76rem; font-weight: 600; color: var(--muted); }
.lp-mode button[aria-pressed=true] { color: #0a0b10; background: var(--grad); border-color: transparent; }

/* linha do tempo */
.tl-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; margin-bottom: 18px; }
.tl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.tl-grid > .glass, .tl-grid2 > .glass, .tl-side > .glass { padding: 22px; }
.tl-side { display: grid; gap: 18px; align-content: start; }
.tl-map-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.tl-map-head .card-t { margin: 0; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.seg button { padding: 6px 12px; border: 0; border-radius: 999px; background: none; font-size: .78rem; font-weight: 600; color: var(--muted); }
.seg button[aria-pressed=true] { color: #0a0b10; background: var(--grad); }
.tl-map { position: relative; aspect-ratio: 1; max-width: 560px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #0b1a17; border: 1px solid var(--line2); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); view-timeline: --tlmap block; }
.tl-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) brightness(.7); }
.tl-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tl-map circle { transform-box: fill-box; transform-origin: center; }
.tl-map .k { fill: #3ee6ff; stroke: #fff; stroke-width: .25; filter: drop-shadow(0 0 1.4px #3ee6ff); }
.tl-map .d { fill: #ff4d6d; stroke: #fff; stroke-width: .25; filter: drop-shadow(0 0 1.4px #ff4d6d); }
.tl-map[data-show=deaths] .k, .tl-map[data-show=kills] .d { display: none; }
.tl-legend { justify-content: center; margin-top: 12px; }
.tl-legend i { width: 10px; height: 10px; border-radius: 50%; }
.lk { background: #3ee6ff; }
.ld { background: #ff4d6d; }
.zones { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.zones li { display: grid; grid-template-columns: 120px 1fr 44px; gap: 10px; align-items: center; font-size: .84rem; color: var(--muted); }
.zones .meter { grid-column: auto; height: 8px; }
.zones .meter i { background: linear-gradient(90deg, #ff8a4c, var(--loss)); }
.zones.k .meter i { background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.zones b { text-align: right; font-family: var(--mono); color: var(--text); }
.lead { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead-col { padding: 16px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); }
.lead-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .86rem; color: var(--muted); }
.lead-row b { font: 700 1.1rem var(--mono); }
.lead-ahead { margin: 10px 0 0; font-size: .8rem; color: var(--muted); }
.tline { position: relative; height: 120px; margin: 10px 8px 6px; }
.tbar { position: absolute; left: 0; right: 0; top: 54px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); }
.tbar span { position: absolute; inset: 0; border-radius: inherit; background: var(--grad); transform-origin: left; }
.tm { position: absolute; left: var(--x); top: 34px; translate: -50% 0; display: grid; justify-items: center; gap: 6px; }
.tm small { font-size: .64rem; line-height: 1.2; text-align: center; color: var(--muted); white-space: nowrap; }
.tm-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #11131d; border: 2px solid var(--gold); font: 800 .8rem var(--mono); color: var(--gold); }
.tm .ci { box-shadow: 0 0 0 2px #0d0f18, 0 0 0 3px var(--violet); }
.tscale { position: absolute; left: 0; right: 0; top: 0; }
.tscale span { position: absolute; left: var(--x); translate: -50% 0; font: 600 .66rem var(--mono); color: var(--dim); }
.tl-items { margin-top: 12px; }
.skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.skills li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .2); }
.sk-start { display: flex; gap: 3px; }
.sk-start i, .sk-max b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; font: 800 .78rem var(--mono); font-style: normal; color: #0a0b10; }
.sk-max { display: flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--muted); }
.sk-max em { font-style: normal; color: var(--dim); }
.k1 { background: #3ee6ff; } .k2 { background: #a78bfa; } .k3 { background: #f5c451; } .k4 { background: #ff4d6d; }
.jg-start { display: grid; gap: 8px; }
.jg-start div { display: grid; grid-template-columns: 120px 1fr 44px; gap: 10px; align-items: center; font-size: .84rem; color: var(--muted); }
.jg-start .meter { grid-column: auto; height: 8px; }
.jg-start b { text-align: right; font-family: var(--mono); color: var(--text); }
.jg-gank { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.jg-gank div { display: grid; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.jg-gank b { font: 700 1.4rem var(--mono); }
.jg-gank span { font-size: .74rem; color: var(--muted); }
.tl-fact { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); font-size: .84rem; color: var(--muted); }
.tl-fact .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--cyan); }
.tl-fact b { color: var(--text); }
.tl-fact.warn-fact .ico { color: var(--loss); }
.tm-dot.lv6 { border-color: var(--cyan); color: var(--cyan); }
.tl-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.tl-foot p { margin: 0; }

/* comparar */
.cmp-form { display: grid; grid-template-columns: 1fr minmax(200px, 320px) auto; gap: 16px; align-items: center; padding: 20px 24px; margin-bottom: 18px; }
.cmp-form p { margin: 0; }
.cmp-form input { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); color: var(--text); font: 500 1rem var(--font); outline: none; }
.cmp-form input:focus { border-color: var(--cyan); }
.cmp-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding: 20px 26px; margin-bottom: 18px; }
.cmp-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cmp-who.b { flex-direction: row-reverse; text-align: right; }
.cmp-who > div { display: grid; min-width: 0; }
.cmp-who b { font: 800 1.3rem var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-who b span { color: var(--dim); font-weight: 500; font-size: .9rem; }
.cmp-who small { font-size: .78rem; color: var(--muted); }
.cmp-who.a .av { box-shadow: 0 0 0 2px var(--cyan); }
.cmp-who.b .av { box-shadow: 0 0 0 2px var(--pink); }
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.cmp-grid > .glass { padding: 22px; }
.cmp-radar .legend { justify-content: center; }
.legend .la { background: var(--cyan); }
.legend .lb { background: var(--pink); }
.radar .ra2 { fill: var(--pink); fill-opacity: .18; stroke: var(--pink); stroke-width: 2.5; stroke-dasharray: 6 4; }
.radar .rd2 { fill: #fff; stroke: var(--pink); stroke-width: 2; }
.radar .rv2 { fill: var(--pink); }
.duel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.duel li { display: grid; grid-template-columns: 64px 1fr auto 1fr 64px; gap: 10px; align-items: center; font-size: .82rem; }
.duel b { font: 700 .95rem var(--mono); color: var(--muted); }
.duel li > b:last-child { text-align: right; }
.duel b.win { color: var(--text); }
.duel .dl { min-width: 104px; text-align: center; color: var(--muted); }
.duel .bar { height: 8px; }
.duel .bar.l { transform: scaleX(-1); }
.duel .bar.l i { background: linear-gradient(90deg, var(--cyan), #2bb3d4); }
.duel .bar.r i { background: linear-gradient(90deg, var(--pink), #c2408a); }
.h2h { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.h2h div { display: grid; gap: 2px; padding: 16px; border-radius: 14px; background: rgba(0, 0, 0, .22); }
.h2h b { font: 800 2rem var(--mono); }
.h2h span { font-size: .8rem; color: var(--muted); }
.h2h small { font-size: .74rem; color: var(--text); }
.common { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.common li { display: grid; grid-template-columns: 1fr auto minmax(80px, auto) 1fr; gap: 10px; align-items: center; }
.common .cn { font-weight: 600; font-size: .86rem; }
.common .cv { font: 600 .8rem var(--mono); color: var(--muted); }
.common .cv.r { text-align: right; }
.common .cv.win { color: var(--good); }
.common-t { margin-top: 22px; }
.cmp-who .who { margin-right: 6px; padding: 1px 7px; border-radius: 999px; font: 700 .62rem var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: #0a0b10; }
.cmp-who.a .who { background: var(--cyan); }
.cmp-who.b .who { background: var(--pink); }
.cmp-self { display: flex; align-items: center; gap: 8px; margin: 0; }
.vs-picks li { flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .2); }
.vp-mine { display: flex; flex-wrap: wrap; gap: 8px; }
.vp-mine > span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 999px; background: rgba(255, 255, 255, .05); }
.vp-mine b { font: 700 .76rem var(--mono); }

/* ao vivo: jogadores clicáveis */
.lrow.peekable { cursor: pointer; transition: border-color .2s, transform .2s; }
.lrow.peekable:hover, .lrow.peekable:focus-visible { border-color: var(--line2); transform: translateX(3px); }
.lrow.anon .l-name b { color: var(--muted); font-weight: 600; }
.peek-hint { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; }

/* diálogo: raio-x rápido e card exportado */
.peek { width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid var(--line2); border-radius: 24px; background: #0d0f18; color: var(--text); overflow: auto; box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .9); }
.peek::backdrop { background: rgba(6, 7, 12, .72); backdrop-filter: blur(8px); }
.peek[open] { animation: peek-in .35s var(--ease); }
.peek-art { position: relative; height: 170px; overflow: hidden; }
.peek-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: .7; }
.peek-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, #0d0f18); }
.peek-body { position: relative; display: grid; gap: 12px; padding: 0 26px 26px; }
.peek-body:only-child { padding-top: 30px; justify-items: center; }
.peek-x { position: absolute; top: -150px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line2); background: rgba(6, 7, 12, .7); }
.peek-body:only-child .peek-x, .card-out .peek-x { top: 14px; }
.peek h3 { margin: -18px 0 0; font: 900 1.8rem var(--display); }
.peek h3 span { color: var(--dim); font-weight: 500; font-size: 1rem; }
.peek-body > p { margin: 0; }
.peek-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.peek-stats div { display: grid; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.peek-stats b { font: 700 1.2rem var(--mono); }
.peek-stats span { font-size: .74rem; color: var(--muted); }
.peek .card-t { margin: 4px 0 0; }
.peek-mains { display: flex; flex-wrap: wrap; gap: 10px; }
.peek-mains span { display: grid; justify-items: center; gap: 2px; }
.peek-mains small { font: 600 .66rem var(--mono); color: var(--muted); }
.peek-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.peek-sw p { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: .86rem; }
.peek-body .btn.big { justify-content: center; }
.card-out { padding-top: 26px; }
.card-out h3 { margin: 0; font-size: 1.2rem; }
.card-out img { width: 100%; border-radius: 14px; border: 1px solid var(--line2); }
.peek:has(.card-out) { width: min(860px, calc(100% - 32px)); }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.card-actions a { text-decoration: none; }
@keyframes peek-in { from { opacity: 0; transform: translateY(24px) scale(.96); } }

/* histórico: rodapé com "carregar mais" */
.hist-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; }
.hist-foot .more { margin: 0; }

@media (max-width: 1000px) {
  .tl-grid, .tl-grid2, .cmp-grid, .rpage { grid-template-columns: 1fr; }
  .cmp-form { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cmp-head { grid-template-columns: 1fr; text-align: left; }
  .cmp-who.b { flex-direction: row; text-align: left; }
  .cmp-head .vs { justify-self: start; font-size: 1.4rem; }
  .duel li { grid-template-columns: 52px 1fr 52px; }
  .duel .bar { display: none; }
  .skills li { grid-template-columns: auto minmax(0, 1fr); }
  .sk-start, .sk-max { grid-column: 1 / -1; }
  .lead, .h2h, .peek-sw { grid-template-columns: 1fr; }
  .zones li, .jg-start div { grid-template-columns: 96px 1fr 40px; }
}

@supports (animation-timeline: view()) {
  .sda .tl-map circle { animation: pop linear both; animation-timeline: --tlmap; animation-range: entry calc(30% + var(--i) * .8%) cover calc(45% + var(--i) * .8%); }
  .sda .tbar span { animation: grow-x linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
  .sda .tm { animation: rise-sm linear both; animation-timeline: view(); animation-range: entry 40% cover 55%; }
  .sda .duel .bar i { animation: grow-x linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
  .sda .skills li { animation: from-left linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
}

/* botão de exportar card (destacado) e janela do card */
.btn-card {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 0; border-radius: 12px;
  background: var(--grad); background-size: 160% 100%; color: #0a0b10; font-weight: 800; font-size: .84rem;
  box-shadow: 0 10px 30px -12px rgba(139, 92, 246, .85); transition: background-position .5s var(--ease), transform .2s;
}
.btn-card:hover { background-position: 100% 0; transform: translateY(-1px); }
.btn-card .ico { stroke-width: 2.2; }
.peek:has(.card-out) { width: min(1060px, calc(100% - 32px)); }
.card-out h3 small { margin-left: 8px; font: 600 .74rem var(--mono); color: var(--muted); }
.card-wait { justify-items: center; padding: 60px 20px !important; }

.hist-gap { display: flex; align-items: center; gap: 8px; flex-basis: 100%; justify-content: center; font-size: .8rem; color: var(--gold); }

/* ---------- link para o app da seleção (topo) ---------- */
.app-link {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(62, 230, 255, .35); background: rgba(62, 230, 255, .07); color: var(--cyan);
  font: 700 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background .25s, border-color .25s;
}
.app-link:hover { background: rgba(62, 230, 255, .14); border-color: var(--cyan); }
.app-link i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
@media (max-width: 760px) {
  .app-link { margin-left: auto; }
  .app-link ~ .mode { margin-left: 0; }
}
@media (max-width: 420px) {
  .app-link span { display: none; }
}