/* ================================================================
   DUOSCOPE — app da seleção de campeões (selecao.html)
   Usa os tokens e componentes de style.css (glass, ci, crest, btn…).
   ================================================================ */

/* ---------- topo ---------- */
.cs-app .topbar { gap: 16px; }
.app-name {
  padding-left: 16px; border-left: 1px solid var(--line);
  font: 700 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.conn {
  display: inline-flex; align-items: center; gap: 9px; min-width: 0; margin-left: auto;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  font-size: .82rem; color: var(--muted);
}
.conn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn b { color: var(--text); }
.conn i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.conn[data-s="on"] i { background: var(--good); box-shadow: 0 0 10px var(--good); }
.conn[data-s="wait"] i { background: var(--gold); animation: blink 1.2s infinite; }
.conn[data-s="off"] i { background: var(--loss); }
.conn[data-s="demo"] i { background: var(--violet); box-shadow: 0 0 10px var(--violet); }
#demo-btn { white-space: nowrap; }

.cs-main { width: min(1440px, 100% - 32px); margin-inline: auto; padding: 86px 0 48px; }
.cs-app .orb { animation: drift 26s ease-in-out infinite alternate; }
.cs-app .o2 { animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes drift { to { transform: translate(8vw, 6vh) scale(1.12); } }

/* ---------- esperando ---------- */
.idle { display: grid; place-items: center; min-height: calc(100vh - 140px); text-align: center; }
.idle-in { display: grid; justify-items: center; gap: 18px; max-width: 780px; }
.idle .eyebrow { margin: 0; }
.idle h1 { margin: 0; font: 900 clamp(2rem, 5.2vw, 3.8rem)/.98 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.idle h1 span {
  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;
}
.idle-lead { max-width: 60ch; margin: 0; color: var(--muted); }
.idle-conn { width: min(640px, 100%); }
.idle-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.idle-actions .btn-ghost { text-decoration: none; padding: 12px 16px; }
.rules { list-style: none; display: grid; gap: 10px; width: min(680px, 100%); margin: 8px 0 0; padding: 0; text-align: left; }
.rules li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); }
.rules .ico { margin-top: 2px; color: var(--cyan); }
.rules p { margin: 0; font-size: .86rem; color: var(--muted); }
.rules b { color: var(--text); }

.cs-radar { position: relative; display: grid; place-items: center; width: 132px; height: 132px; color: var(--cyan); }
.cs-radar i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(62, 230, 255, .45); animation: radar 3.6s var(--ease) infinite; }
.cs-radar i:nth-child(2) { animation-delay: 1.2s; }
.cs-radar i:nth-child(3) { animation-delay: 2.4s; }
.cs-radar b { position: absolute; inset: 8px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(62, 230, 255, .42), rgba(139, 92, 246, .14) 22%, transparent 32%); animation: spin 3s linear infinite; }
.cs-radar .ico { position: relative; width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(62, 230, 255, .7)); }
@keyframes radar { from { transform: scale(.25); opacity: 1; } to { transform: scale(1); opacity: 0; } }

.conn-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; }
.conn-card > div { min-width: 0; }
.conn-card h3 { margin: 0 0 2px; font: 700 1.02rem var(--display); overflow-wrap: anywhere; }
.conn-card h3 span { color: var(--dim); font-weight: 500; }
.conn-card p { margin: 0; font-size: .84rem; color: var(--muted); }
.conn-card p b { color: var(--good); font-weight: 600; }
.conn-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; box-shadow: 0 0 0 2px rgba(245, 196, 81, .55), 0 8px 26px -8px rgba(245, 196, 81, .6); }
.conn-ic + .cdot { display: none; }
.cdot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dim); }
.cdot.on { background: var(--good); box-shadow: 0 0 12px var(--good); }
.cdot.wait { background: var(--gold); animation: blink 1.2s infinite; }
.cdot.off { background: var(--loss); }
.conn-me { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.conn-mains { display: flex; gap: 3px; }

/* ---------- seleção ---------- */
.cs { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: 18px 22px; align-items: start; }
.cs-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 14px 18px 14px 22px; }
.cs-q { min-width: 0; }
.cs-q .kicker { margin: 0; }
.cs-q h1 { margin: 2px 0 0; font: 800 clamp(1.3rem, 2.4vw, 1.75rem)/1.1 var(--display); letter-spacing: -.02em; }
.cs-turn { margin: 4px 0 0; font-size: .86rem; color: var(--muted); }
.cs-turn:empty { display: none; }
.timer {
  --p: 1;
  position: relative; display: grid; place-items: center; flex: none; width: 64px; height: 64px; margin-left: auto; border-radius: 50%;
  background: conic-gradient(var(--cyan) calc(var(--p) * 360deg), rgba(255, 255, 255, .07) 0);
}
.timer::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #0d0f18; }
.timer span { position: relative; font: 800 1.2rem var(--mono); }
.timer.low { background: conic-gradient(var(--loss) calc(var(--p) * 360deg), rgba(255, 255, 255, .07) 0); }
.timer.low span { color: var(--loss); }

.side-t { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; font: 700 .76rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.side-t small { font: 500 .72rem var(--font); letter-spacing: 0; text-transform: none; color: var(--dim); }
.side-t.blue { color: var(--win); }
.side-t.red { color: var(--loss); }
.allies { display: grid; gap: 10px; }

/* card de aliado */
.ally {
  --art: none;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 46px 66px minmax(0, 1fr) minmax(0, 1.08fr); gap: 14px; align-items: center;
  min-height: 102px; padding: 12px 16px 12px 10px; border-radius: 18px;
  border: 1px solid var(--line); background: rgba(13, 15, 24, .78);
  transition: border-color .3s, box-shadow .3s, transform .2s;
}
.ally[data-open] { cursor: pointer; }
.ally[data-open]:hover { border-color: var(--line2); transform: translateX(2px); }
.ally::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--art) 72% 20% / cover no-repeat; opacity: .14; filter: grayscale(.8);
  transition: opacity .6s, filter .6s;
}
.ally::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(9, 10, 16, .97) 22%, rgba(9, 10, 16, .74) 58%, rgba(9, 10, 16, .38)); }
.ally.locked::before { opacity: .62; filter: none; }
.ally.me { border-color: rgba(245, 196, 81, .55); box-shadow: 0 0 0 1px rgba(245, 196, 81, .18) inset, 0 14px 40px -24px rgba(245, 196, 81, .7); }
.ally.picking { border-color: rgba(62, 230, 255, .6); box-shadow: 0 0 0 1px rgba(62, 230, 255, .25) inset, 0 0 34px -10px rgba(62, 230, 255, .6); }
.ally.just { animation: lock-in 1.1s var(--ease); }
.ally.just::before { animation: art-in 1.1s var(--ease); }
@keyframes lock-in {
  0% { box-shadow: 0 0 0 0 rgba(245, 196, 81, 0); }
  20% { box-shadow: 0 0 0 3px rgba(245, 196, 81, .85), 0 0 70px rgba(245, 196, 81, .55); transform: scale(1.012); }
  100% { box-shadow: 0 0 0 0 rgba(245, 196, 81, 0); transform: none; }
}
@keyframes art-in { from { opacity: .14; transform: scale(1.12); } }

.a-pos { display: grid; justify-items: center; gap: 5px; color: var(--muted); }
.ally.me .a-pos { color: var(--gold); }
.pos-ico { width: 24px; height: 24px; fill: currentColor; }
.a-pos small { font: 700 .56rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.a-pos .sp { display: flex; gap: 2px; }
.a-pos .ci.xs { --s: 19px; border-radius: 5px; }
.a-champ { position: relative; }
.ci.lg { --s: 66px; border-radius: 18px; }
.ally:not(.locked) .a-champ .ci img { filter: grayscale(.55) brightness(.85); }
.ci.none::before { color: var(--dim); }
.a-lock { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #0a0b10; box-shadow: 0 0 0 3px #0b0c14; }
.a-lock .ico { width: 13px; height: 13px; stroke-width: 2.4; }
.a-lock.now { right: -2px; bottom: -2px; width: 14px; height: 14px; background: var(--cyan); box-shadow: 0 0 0 3px #0b0c14, 0 0 14px var(--cyan); animation: beat 1s var(--ease) infinite; }

.a-who, .a-on { display: grid; gap: 4px; min-width: 0; }
.a-name { margin: 0; font: 700 1rem var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-name > span { color: var(--dim); font-weight: 500; }
.a-name .ico { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; color: var(--muted); }
.ally.hidden .a-name { color: var(--muted); }
.you, .riv { margin-left: 8px; padding: 2px 7px; border-radius: 999px; font: 800 .58rem var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; vertical-align: 2px; }
.you { background: var(--gold); color: #0a0b10; }
.riv { background: var(--loss); color: #fff; }
.a-rank { display: flex; align-items: center; gap: 7px; margin: 0; min-width: 0; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.a-rank > span:not(.crest) { overflow: hidden; text-overflow: ellipsis; }
.a-rank small { color: var(--dim); font-size: .72rem; }
.a-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-size: .76rem; color: var(--dim); }
.a-sub .ci.xs { --s: 18px; }
.a-form { display: inline-flex; gap: 3px; }
.a-form i { width: 7px; height: 7px; border-radius: 50%; background: var(--loss); opacity: .85; }
.a-form i.w { background: var(--win); }
.a-t { margin: 0; font: 700 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-t b { color: var(--text); letter-spacing: .02em; }
.ally.locked .a-t { color: var(--gold); }
.a-big { margin: 0; font-size: .86rem; color: var(--muted); }
.a-big b { font: 700 1.08rem var(--mono); }
.preds { display: flex; gap: 10px; }
.preds span { display: grid; justify-items: center; gap: 3px; }
.preds b { font: 700 .72rem var(--mono); color: var(--muted); }
.preds span:first-child b { color: var(--gold); }

.sk {
  display: block; flex: none; width: 100%; height: 9px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .05) 20%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, .05) 80%); background-size: 220% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* inimigos */
.foes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.foe {
  --art: none;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 9 / 15; padding: 8px;
  border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 77, 109, .07), rgba(13, 15, 24, .9));
}
.foe::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--art) center 15% / cover no-repeat; }
.foe::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(8, 9, 14, .55) 55%, rgba(8, 9, 14, .97) 88%); }
.foe.just::before { animation: foe-in 1.1s var(--ease); }
@keyframes foe-in { from { opacity: 0; transform: scale(1.15); filter: brightness(2); } }
.foe .q { position: absolute; inset: 0 0 30%; display: grid; place-items: center; font: 900 2.4rem var(--display); color: rgba(255, 255, 255, .07); }
.foe.picking { border-color: rgba(255, 77, 109, .65); box-shadow: 0 0 26px -6px rgba(255, 77, 109, .65); }
.foe.picking .q { color: rgba(255, 77, 109, .4); animation: blink 1.1s infinite; }
.f-info { display: grid; gap: 2px; min-width: 0; }
.f-info b { font: 700 .84rem var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-info small { font-size: .64rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmg { justify-self: start; margin-top: 3px; padding: 1px 7px; border-radius: 999px; font: 700 .56rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.dmg.ad { color: #ffb36b; background: rgba(255, 140, 60, .16); }
.dmg.ap { color: #aab4ff; background: rgba(120, 140, 255, .18); }
.dmg.mix { color: #dcc6ff; background: rgba(170, 120, 255, .16); }
.rec { margin: 3px 0 0; font-size: .62rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec b { color: var(--text); font-family: var(--mono); }

/* bans, composição, banco */
.cs-bans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 16px; margin-bottom: 14px; }
.cs-bans small { display: block; margin-bottom: 6px; font: 700 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.cs-bans .row { display: flex; flex-wrap: wrap; gap: 5px; }
.cs-bans > div:last-child { text-align: right; }
.cs-bans > div:last-child .row { justify-content: flex-end; }
.ci.ban { filter: grayscale(1) brightness(.75); }
.ci.ban::after { content: ''; position: absolute; left: -10%; right: -10%; top: 50%; height: 2px; background: var(--loss); transform: rotate(-45deg); box-shadow: 0 0 6px rgba(255, 77, 109, .8); }

.comp { display: grid; gap: 12px; padding: 16px 18px; }
.comp .card-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.comp .card-t small { font: 500 .72rem var(--font); letter-spacing: 0; text-transform: none; color: var(--dim); }
.dbar { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 4px 12px; align-items: center; font-size: .8rem; }
.dbar > span { font-weight: 600; }
.dbar.blue > span { color: var(--win); }
.dbar.red > span { color: var(--loss); }
.dbar small { grid-column: 2; font-size: .7rem; color: var(--dim); }
.bar2 { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.bar2 i { display: block; height: 100%; transition: width .7s var(--ease); }
.bar2 .ad { background: linear-gradient(90deg, #ff8a3d, #ffb36b); }
.bar2 .ap { background: linear-gradient(90deg, #8f9bff, #b49cff); }
.classes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.classes small { min-width: 70px; font-size: .72rem; color: var(--dim); }
.classes span { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-size: .72rem; color: var(--muted); }
.classes b { color: var(--text); font-family: var(--mono); }
.cs-tips { list-style: none; display: grid; gap: 8px; margin: 2px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.cs-tips li { display: flex; gap: 10px; align-items: flex-start; }
.cs-tips .ico { margin-top: 1px; color: var(--gold); }
.cs-tips p { margin: 0; font-size: .82rem; color: var(--muted); }
.cs-note { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 14px 16px; font-size: .86rem; color: var(--muted); }
.cs-note .ico { color: var(--cyan); }
.cs-note.bad .ico { color: var(--loss); }
.bench { padding: 14px 16px; margin-bottom: 14px; }
.bench .card-t { margin-bottom: 10px; }
.bench-row { display: flex; flex-wrap: wrap; gap: 10px; }
.bench-row span { display: grid; justify-items: center; gap: 4px; max-width: 84px; text-align: center; }
.bench-row small { font-size: .64rem; color: var(--muted); }

/* ---------- partida ---------- */
.gm { display: grid; gap: 18px; }
.gm-head { display: flex; align-items: center; gap: 16px; padding: 14px 20px; }
.gm-head .kicker { margin: 0; }
.gm-head h1 { margin: 2px 0 0; font: 800 1.5rem var(--display); letter-spacing: -.02em; }
.gm-clock { display: grid; justify-items: end; margin: 0 0 0 auto; }
.gm-clock b { font: 800 1.4rem var(--mono); }
.gm-clock small { font-size: .7rem; color: var(--dim); }
.gm-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gm-team { display: grid; gap: 8px; align-content: start; }
.gm-lobby { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.gp {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 26px; gap: 12px; align-items: center; width: 100%;
  padding: 10px 14px 10px 10px; border-radius: 16px; border: 1px solid var(--line); text-align: left;
  background: rgba(13, 15, 24, .75); transition: border-color .25s, transform .2s;
}
.gp.s-ally, .gp.s-me { background: linear-gradient(90deg, rgba(79, 157, 255, .1), rgba(13, 15, 24, .75)); }
.gp.s-foe { background: linear-gradient(90deg, rgba(255, 77, 109, .1), rgba(13, 15, 24, .75)); }
.gp:hover { border-color: var(--cyan); transform: translateX(3px); }
.gp.s-me { border-color: rgba(245, 196, 81, .55); }
.gp.rival { border-color: rgba(255, 77, 109, .55); box-shadow: 0 0 30px -14px rgba(255, 77, 109, .8); }
.gp-who { display: grid; gap: 3px; min-width: 0; }
.gp.anon { cursor: default; }
.gp.anon:hover { border-color: var(--line); transform: none; }
.gp.anon .gp-who > b { color: var(--muted); font-weight: 600; }
.gp-who .ico { width: 15px; height: 15px; vertical-align: -2px; }
.gp-who > b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-who > b small { color: var(--dim); font-weight: 500; font-size: .8rem; }
.gp-rank { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .76rem; color: var(--muted); white-space: nowrap; }
.gp-rank i { font-style: normal; font-weight: 700; }
.gp-rank small { color: var(--dim); }
.gp-m { display: grid; justify-items: end; }
.gp-m b { font: 700 .95rem var(--mono); }
.gp-m small { font-size: .66rem; color: var(--dim); white-space: nowrap; }
.gp-pos { color: var(--muted); }
.gp-pos .pos-ico { width: 22px; height: 22px; }

.rival-p { --art: none; position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 14px; padding: 22px 24px; }
.rival-p::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--art) 75% 20% / cover no-repeat; opacity: .35; }
.rival-p::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(9, 10, 16, .97) 35%, rgba(9, 10, 16, .62)); }
.rival-p .kicker { margin: 0; color: var(--loss); }
.rival-p h3 { margin: 4px 0; font: 800 1.5rem var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.rival-p h3 span { color: var(--dim); font-weight: 500; }
.rival-p h3 small { font: 600 .9rem var(--font); color: var(--muted); }
.rv-stats { margin: 0; color: var(--muted); font-size: .88rem; }
.rv-stats b { font: 700 1.05rem var(--mono); }
.rv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rv-cols .card-t { margin-bottom: 8px; }
.rv-i { display: flex; gap: 10px; margin: 0 0 8px; font-size: .84rem; color: var(--muted); }
.rv-i b { color: var(--text); }
.rv-i .ico { flex: none; margin-top: 2px; }
.rival-p .btn { justify-self: start; }
.gm-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .82rem; color: var(--dim); }
.gm-wait { display: flex; align-items: center; gap: 16px; padding: 22px; color: var(--muted); }
.gm-wait p { margin: 0; }
.spin-ring {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: conic-gradient(var(--cyan), var(--violet), var(--gold), transparent 75%);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 57%); mask: radial-gradient(circle, transparent 55%, #000 57%);
  animation: spin 1s linear infinite;
}

/* ---------- raio-X (painel lateral) ---------- */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(430px, 100%);
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(10, 11, 18, .97); border-left: 1px solid var(--line2); box-shadow: -40px 0 80px -20px rgba(0, 0, 0, .8);
  backdrop-filter: blur(18px); transform: translateX(104%); transition: transform .45s var(--ease);
}
.drawer.on { transform: none; }
.drawer[hidden] { display: none; }
.dx-art { height: 190px; background: #10121c center 18% / cover no-repeat; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.dx-x { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line2); background: rgba(6, 7, 12, .75); }
.dx-x:hover { border-color: var(--cyan); }
.dx-body { position: relative; display: grid; gap: 12px; margin-top: -54px; padding: 0 24px 28px; }
.dx-body > p, .dx-body h3 { margin: 0; }
.dx-body h3 { font: 800 1.55rem/1.1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.dx-body h3 span { color: var(--dim); font-weight: 500; }
.dx-rank { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .84rem; color: var(--muted); }
.dx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dx-stats div { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.dx-stats b { font: 700 1.2rem var(--mono); }
.dx-stats span { font-size: .72rem; color: var(--muted); }
.dx-body .card-t { margin: 6px 0 0; }
.dx-build { display: grid; gap: 8px; }
.dx-build span { display: flex; align-items: center; gap: 8px; }
.dx-build small { display: grid; font-size: .8rem; color: var(--text); }
.dx-build small i { font-style: normal; font-size: .68rem; color: var(--dim); }
.dx-build .items { flex-wrap: wrap; }
.dx-list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.dx-list li { display: flex; gap: 10px; align-items: flex-start; }
.dx-list .ico { flex: none; margin-top: 2px; color: var(--muted); }
.dx-list b { font-size: .88rem; }
.dx-list p { margin: 2px 0 0; font-size: .8rem; color: var(--muted); }
.dx-mains { display: flex; flex-wrap: wrap; gap: 10px; }
.dx-mains span { display: grid; justify-items: center; gap: 3px; }
.dx-mains small { font: 600 .66rem var(--mono); color: var(--muted); }
.dx-wait { display: flex; align-items: center; gap: 12px; }
.dx-body .btn.big { justify-content: center; margin-top: 6px; text-decoration: none; }

/* ---------- etiquetas e "Para você" ---------- */
.a-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; }
.a-tags .tg { padding: 2px 7px; font-size: .64rem; }
.cs-you { grid-column: 1 / -1; }
.cs-you:empty { display: none; }
.for-you { padding: 14px 16px; border-color: rgba(245, 196, 81, .3); }
.for-you .card-t { margin: 0 0 8px; }
.for-you .card-t small { font: 500 .72rem var(--font); letter-spacing: 0; text-transform: none; color: var(--dim); }
.for-you ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.for-you li { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; color: var(--muted); }
.for-you li > .ci, .for-you li > .ico { flex: none; margin-top: 1px; }
.for-you li > .ico { color: var(--loss); }
.for-you b { color: var(--text); font-family: var(--mono); font-weight: 700; }
.for-you b.bad { color: var(--loss); }
.for-you span .ci { --s: 18px; vertical-align: -4px; }
.for-you small { color: var(--dim); }
.gp-m .good { color: var(--good); }

/* ---------- painel do Companion (?overlay=1): coluna estreita grudada no cliente ---------- */
body.overlay { background: #090a10; }
body.overlay .bg { display: none; }
body.overlay .topbar { padding: 8px 12px; gap: 10px; }
body.overlay .topbar .brand svg { width: 22px; height: 22px; }
body.overlay .conn { padding: 5px 10px; font-size: .74rem; }
body.overlay #demo-btn { padding: 4px 8px; font-size: .72rem; }
body.overlay .cs-main { width: 100%; padding: 58px 10px 16px; }
body.overlay .cs { gap: 10px; }
body.overlay .cs-head { gap: 10px; padding: 10px 12px; }
body.overlay .cs-q h1 { font-size: 1.05rem; }
body.overlay .cs-turn { font-size: .78rem; }
body.overlay .timer { width: 46px; height: 46px; }
body.overlay .timer span { font-size: .9rem; }
body.overlay .allies { gap: 6px; }
body.overlay .ally { grid-template-columns: 30px 46px minmax(0, 1fr); gap: 8px; min-height: 0; padding: 8px 10px 8px 6px; border-radius: 14px; }
body.overlay .ci.lg { --s: 46px; border-radius: 13px; }
body.overlay .a-pos small, body.overlay .a-pos .sp { display: none; }
body.overlay .a-on { grid-column: 2 / -1; }
body.overlay .a-name { font-size: .9rem; }
body.overlay .side-t { margin-bottom: 6px; font-size: .68rem; }
body.overlay .foe { aspect-ratio: 9 / 14; }
body.overlay .rec { display: block; font-size: .58rem; }
body.overlay .idle { min-height: 0; padding: 20px 0; }
body.overlay .idle h1 { font-size: 1.3rem; }
body.overlay .idle-lead, body.overlay .rules, body.overlay .cs-radar { display: none; }
body.overlay .drawer { width: 100%; }
body.overlay .dx-body { padding: 0 16px 20px; }

/* ---------- telas menores ---------- */
@media (max-width: 1180px) {
  .cs { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app-name { display: none; }
  .cs-main { padding-top: 76px; }
  .cs-head { flex-wrap: wrap; padding: 14px 16px; }
  .ally { grid-template-columns: 40px 54px minmax(0, 1fr); gap: 10px; padding: 10px 12px 10px 8px; }
  .ci.lg { --s: 54px; border-radius: 15px; }
  .a-on { grid-column: 2 / -1; }
  .foes { gap: 6px; }
  .foe { aspect-ratio: 9 / 16; padding: 6px; }
  .f-info small, .rec { display: none; }
  .cs-bans { grid-template-columns: 1fr; }
  .cs-bans > div:last-child { text-align: left; }
  .cs-bans > div:last-child .row { justify-content: flex-start; }
  .gm-teams, .rv-cols { grid-template-columns: 1fr; }
  .gp { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .gp-pos { display: none; }
  .conn-card { flex-wrap: wrap; }
  .conn-me { margin-left: 0; }
}
@media (max-width: 420px) {
  .cs-app .topbar { gap: 10px; }
  .brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-app .orb, .cs-radar i, .cs-radar b, .idle h1 span, .sk, .spin-ring, .a-lock.now, .foe.picking .q, .conn i, .cdot { animation: none !important; }
  .ally.just, .ally.just::before, .foe.just::before { animation: none !important; }
  .drawer, .ally, .gp { transition: none; }
}