/* ============================================================================================================
   Arena PvP (src/ui/pvp-ui.js): elo, ordem de luta com arrastar, modos, histórico, ranking e a luta animada.
   Classes ar-* (as antigas .pvp-* de styles.css ficaram só para partidas abertas em versões antigas).
   Cores dos elos: --t-hi / --t-lo em .ar-<elo>.
   ============================================================================================================ */
.ar-bronze { --t-hi: var(--c-gold); --t-lo: var(--type-dark); } .ar-prata { --t-hi: var(--c-text); --t-lo: var(--x-7d8796); } .ar-ouro { --t-hi: var(--c-shiny); --t-lo: var(--rar-lendario); }
.ar-platina { --t-hi: var(--type-ice); --t-lo: var(--x-2b8f83); } .ar-diamante { --t-hi: var(--type-ice); --t-lo: var(--c-xp-bar); } .ar-mestre { --t-hi: var(--x-e08cff); --t-lo: var(--x-7a2fd1); }
.ar-badge { flex: none; image-rendering: pixelated; display: inline-block; vertical-align: middle; filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--x-000000) 25%, transparent)); }

/* ---------- cabeçalho: elo ---------- */
.ar-rank { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 10px;
  border-radius: var(--r-lg); border: 1px solid var(--edge-t); background: linear-gradient(110deg, color-mix(in srgb, var(--t-hi) 22%, var(--card-t)), var(--card-t) 55%); }
.ar-rank-main { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; row-gap: 4px; min-width: 0; }
.ar-rank-name { font: 400 18px/1 var(--display); color: color-mix(in srgb, var(--t-lo) 70%, var(--text-t)); letter-spacing: .5px; }
.ar-elo { font: 700 16px/1 var(--font); color: var(--text-t); } .ar-elo small { font-size: var(--fs-min); color: var(--muted-t); font-weight: 600; }
.ar-bar { grid-column: 1 / -1; display: block; height: 8px; border-radius: 99px; background: var(--inset); overflow: hidden; }
.ar-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--t-lo), var(--t-hi)); transition: width .4s; }
.ar-next { grid-column: 1 / -1; color: var(--muted-t); font-size: var(--fs-min); }
.ar-rank-stats { display: flex; gap: 12px; font-size: 12px; color: var(--text-2); }
.ar-rank-stats span { display: flex; flex-direction: column; align-items: center; line-height: 1.1; } .ar-rank-stats b { font-size: 16px; color: var(--text-t); }
.ar-online { text-align: right; line-height: 1.35; }

/* ---------- Arena: ordem de luta + modos ---------- */
.ar-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.ar-card { background: var(--panel-t); border: 1px solid var(--edge-t); border-radius: var(--r-lg); padding: 12px 14px; min-width: 0; }
.ar-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; } .ar-h b { font-size: 14px; }
.ar-h2 { margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .6px; font-size: var(--fs-min); }
.ar-lineup { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ar-slot { display: grid; grid-template-columns: 16px 28px 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-md);
  background: var(--card-t); border: 1px solid var(--edge-t); cursor: grab; user-select: none; position: relative; transition: transform .15s ease, box-shadow .15s, border-color .15s; }
.ar-slot:hover { border-color: var(--accent); } .ar-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ar-slot.locked { cursor: default; } .ar-slot.locked .ar-grip { opacity: .2; }
.ar-lineup.sorting .ar-slot { transition: transform .15s ease; }
.ar-slot.dragging { z-index: 2; cursor: grabbing; transition: none; box-shadow: 0 10px 24px color-mix(in srgb, var(--x-000000) 28%, transparent); border-color: var(--accent); background: var(--panel-t); }
.ar-grip { color: var(--faint); font-size: 14px; letter-spacing: -2px; text-align: center; touch-action: none; cursor: grab; line-height: 1; padding: 6px 0; }
.ar-n { font: 400 15px/1 var(--display); color: var(--gold-text); text-align: center; }
.ar-slot canvas { width: 44px; height: 44px; image-rendering: pixelated; border-radius: 8px; }
.ar-main { min-width: 0; display: flex; flex-direction: column; } .ar-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.ar-main small { color: var(--muted-t); font-size: var(--fs-min); }
.ar-x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--edge-2); background: transparent; color: var(--muted-t); cursor: pointer; font-size: 13px; }
.ar-x:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); } .ar-x:disabled { opacity: .3; cursor: default; }
.ar-add { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 4px; border-radius: 99px; border: 1px dashed var(--edge-2); background: var(--card-t); color: var(--text-t); cursor: pointer; font: inherit; font-size: 12px; }
.ar-chip:hover { border-style: solid; border-color: var(--accent); } .ar-chip canvas { width: 24px; height: 24px; image-rendering: pixelated; } .ar-chip small { color: var(--muted-t); }
.ar-reset { margin-top: 10px; }
.ar-modes { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 8px; }
.ar-mode { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--card-t); border: 1px solid var(--edge-t); }
.ar-mode-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--pill-t); }
.ar-mode-ico .ui-ico, .ar-mode-ico img { width: 24px; height: 24px; margin: 0; }
.ar-mode-ranked { border-color: color-mix(in srgb, var(--accent) 55%, var(--edge-t)); } .ar-mode-ranked .ar-mode-ico { background: color-mix(in srgb, var(--accent) 30%, var(--pill-t)); }
.ar-mode-bot .ar-mode-ico { background: color-mix(in srgb, var(--x-8f7bff) 30%, var(--pill-t)); }
.ar-mode-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ar-mode-txt b { font-size: 14px; } .ar-mode-txt small { color: var(--text-2); font-size: 12px; line-height: 1.35; }
.ar-mode .btn { white-space: nowrap; }
.ar-queue { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px; margin: 6px 0 8px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--green-text) 10%, var(--card-t)); border: 1px solid color-mix(in srgb, var(--green-text) 40%, var(--edge-t)); }
.ar-queue > div:nth-child(2) { display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .ar-queue .btn { grid-column: 1 / -1; justify-self: start; }
.ar-radar { width: 52px; height: 52px; border-radius: 50%; position: relative; background: radial-gradient(circle, color-mix(in srgb, var(--green-text) 35%, transparent) 2px, transparent 3px), var(--inset); border: 1px solid var(--edge-2); overflow: hidden; }
.ar-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--green-text); opacity: 0; animation: ar-ping 2s ease-out infinite; }
.ar-radar i + i { animation-delay: 1s; }
@keyframes ar-ping { from { transform: scale(.2); opacity: .9; } to { transform: scale(1.2); opacity: 0; } }

/* ---------- histórico ---------- */
.ar-hist-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ar-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.ar-filter { padding: 4px 11px; border-radius: 99px; border: 1px solid var(--edge-2); background: var(--card-t); color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; }
.ar-filter.active { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 600; }
.ar-history { display: flex; flex-direction: column; gap: 8px; }
.ar-empty { padding: 24px 0; }
.ar-match { --res: var(--muted-t); border-radius: var(--r-md); background: var(--card-t); border: 1px solid var(--edge-t); border-left: 4px solid var(--res); padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.ar-match.won { --res: var(--green-text); } .ar-match.lost { --res: var(--danger); } .ar-match.open { box-shadow: var(--shadow-panel); }
.ar-match header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ar-res { color: var(--res); font: 400 15px/1 var(--display); }
.ar-mode-tag { font-size: var(--fs-min); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 99px; background: var(--pill-t); color: var(--text-2); }
.ar-mode-tag.ranked { background: color-mix(in srgb, var(--accent) 35%, var(--pill-t)); color: var(--text-t); } .ar-mode-tag.bot { background: color-mix(in srgb, var(--x-8f7bff) 30%, var(--pill-t)); color: var(--text-t); }
.ar-vs { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .ar-when { margin-left: auto; }
.ar-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.ar-side { display: flex; gap: 3px; flex-wrap: wrap; } .ar-side.foe { justify-content: flex-end; }
.ar-pip { width: 30px; height: 30px; border-radius: 8px; background: var(--inset); display: grid; place-items: center; position: relative; }
.ar-pip canvas { width: 28px; height: 28px; image-rendering: pixelated; }
.ar-pip.ko canvas { filter: grayscale(1); opacity: .35; } .ar-pip.ko::after { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; background: var(--danger); transform: rotate(-35deg); border-radius: 2px; }
.ar-pip.mvp { box-shadow: 0 0 0 2px var(--accent); }
.ar-score { font: 400 18px/1 var(--display); color: var(--text-t); white-space: nowrap; } .ar-score i { font-style: normal; color: var(--muted-t); font-size: 13px; margin: 0 2px; }
.ar-match footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ar-spacer { flex: 1; }
.ar-delta { font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 99px; } .ar-delta.up { color: var(--green-text); background: var(--green-soft); } .ar-delta.down { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.ar-reward { font-size: 12px; font-weight: 600; color: var(--gold-text); display: inline-flex; align-items: center; gap: 3px; }
.ar-detail { border-top: 1px dashed var(--edge-2); padding-top: 8px; }
.ar-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ar-row { display: grid; grid-template-columns: 24px minmax(70px, 1fr) minmax(40px, 1.2fr) auto auto; align-items: center; gap: 6px; font-size: 12px; padding: 2px 0; }
.ar-row canvas { width: 24px; height: 24px; image-rendering: pixelated; } .ar-row-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-row em { font-style: normal; font-size: var(--fs-min); font-weight: 800; color: var(--on-accent); background: var(--accent); border-radius: 4px; padding: 0 4px; margin-left: 2px; }
.ar-row small { color: var(--muted-t); min-width: 30px; text-align: right; }
.ar-dmg { display: block; height: 6px; border-radius: 99px; background: var(--inset); overflow: hidden; } .ar-dmg i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--c-ink-light))); }
.ar-row.mvp .ar-row-name { font-weight: 700; }

/* ---------- ranking ---------- */
.ar-board { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ar-brow { display: grid; grid-template-columns: 34px 26px minmax(0, 1fr) auto 90px; align-items: center; gap: 10px; padding: 7px 12px; border-radius: var(--r-md); background: var(--card-t); border: 1px solid var(--edge-t); }
.ar-brow.top { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, var(--card-t)), var(--card-t) 60%); }
.ar-brow.me { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ar-pos { text-align: center; font-weight: 700; color: var(--muted-t); } .ar-pos .ui-ico { width: 22px; height: 22px; margin: 0; }
.ar-bname { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; } .ar-bname b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ar-bname small { color: var(--muted-t); font-size: var(--fs-min); }
.ar-belo { font-size: 15px; } .ar-bwl { text-align: right; font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; line-height: 1.15; } .ar-bwl small { color: var(--muted-t); }

/* ---------- luta ---------- */
.ar-replay { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.ar-scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.ar-fighter { background: var(--card-t); border: 1px solid var(--edge-t); border-radius: var(--r-lg); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ar-fighter.me { border-left: 4px solid var(--green-text); } .ar-fighter.foe { border-right: 4px solid var(--danger); text-align: right; }
.ar-who { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; } .ar-fighter.foe .ar-who { flex-direction: row-reverse; }
.ar-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ar-who small { color: var(--green-text); font-size: var(--fs-min); font-weight: 700; text-transform: uppercase; }
.ar-active { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; } .ar-fighter.foe .ar-active { grid-template-columns: minmax(0, 1fr) 44px; }
.ar-fighter.foe .ar-active canvas { order: 2; }
.ar-active canvas { width: 44px; height: 44px; image-rendering: pixelated; background: var(--inset); border-radius: 10px; }
.ar-active > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; } .ar-active small { color: var(--muted-t); font-size: var(--fs-min); }
.ar-hp { display: block; height: 9px; border-radius: 99px; background: var(--inset); overflow: hidden; } .ar-fighter.foe .ar-hp { transform: scaleX(-1); }
.ar-hp i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--hp-a), var(--hp-b)); transition: width .18s linear; }
.ar-hp i.mid { background: linear-gradient(90deg, var(--c-warn), var(--c-shiny)); } .ar-hp i.low { background: linear-gradient(90deg, var(--type-fighting), var(--rar-mitico)); }
.ar-pips { display: flex; gap: 3px; flex-wrap: wrap; } .ar-fighter.foe .ar-pips { justify-content: flex-end; }
.ar-pips .ar-pip { width: 26px; height: 26px; } .ar-pips .ar-pip canvas { width: 24px; height: 24px; }
.ar-pips .ar-pip.active { box-shadow: 0 0 0 2px var(--accent); }
.ar-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ar-vsbig { font: 400 26px/1 var(--display); color: var(--gold-text); text-shadow: 0 2px 0 color-mix(in srgb, var(--x-000000) 20%, transparent); } .ar-clock { font-variant-numeric: tabular-nums; color: var(--muted-t); font-size: 12px; }
.ar-stage { position: relative; align-self: center; width: min(440px, 100%, max(240px, calc(100vh - 360px))); }
.ar-stage #pvp-arena { width: 100%; height: auto; aspect-ratio: 1; display: block; image-rendering: pixelated; border-radius: var(--r-lg); border: 1px solid var(--edge-3); }
.ar-end { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--x-000000) 45%, transparent); border-radius: var(--r-lg); animation: confirm-fade .2s ease-out; padding: 10px; }
.ar-end-card { width: min(320px, 100%); background: var(--panel-t); border: 1px solid var(--edge-3); border-top: 4px solid var(--muted-t); border-radius: var(--r-lg); padding: 14px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; box-shadow: var(--shadow-screen); animation: confirm-pop .2s ease-out; }
.ar-end-card.won { border-top-color: var(--green-text); } .ar-end-card.lost { border-top-color: var(--danger); }
.ar-end-title { font: 400 24px/1 var(--display); } .ar-end-card.won .ar-end-title { color: var(--green-text); } .ar-end-card.lost .ar-end-title { color: var(--danger); }
.ar-mvp { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-md); background: var(--card-t); text-align: left; }
.ar-mvp canvas { width: 40px; height: 40px; image-rendering: pixelated; } .ar-mvp span { display: flex; flex-direction: column; line-height: 1.2; font-size: 13px; }
.ar-mvp em { font-style: normal; font-size: var(--fs-min); font-weight: 800; color: var(--on-accent); background: var(--accent); border-radius: 4px; padding: 0 5px; align-self: flex-start; }
.ar-mvp small { color: var(--muted-t); font-size: var(--fs-min); }
.ar-end-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.ar-end-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.ar-controls { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ar-controls .speed { display: inline-flex; gap: 4px; }

/* ---------- Torneio semanal (classes tn-*) ---------- */
.ar-mode-tag.tourney { background: color-mix(in srgb, var(--gold-text) 30%, var(--pill-t)); color: var(--text-t); }
.tn-rules { margin: 6px 0; padding-left: 18px; color: var(--text-2); line-height: 1.5; }
.tn-ok { color: var(--green-text); } .tn-warn { color: var(--danger); } .tn-live { color: var(--danger); letter-spacing: .5px; }
.tn-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.tn-mon { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--r-md);
  border: 1px solid var(--edge-t); background: var(--card-t); color: var(--text-t); font: inherit; text-align: left; cursor: pointer; }
.tn-mon:hover:not(:disabled) { border-color: var(--accent); } .tn-mon.on { border-color: var(--gold-text); background: color-mix(in srgb, var(--gold-text) 12%, var(--card-t)); }
.tn-mon:disabled { opacity: .45; cursor: not-allowed; } .tn-mon canvas { width: 36px; height: 36px; image-rendering: pixelated; }
.tn-mon span { min-width: 0; display: flex; flex-direction: column; } .tn-mon b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-mon small { color: var(--muted-t); font-size: var(--fs-min); }
.tn-n { position: absolute; top: -6px; left: -4px; font: 400 12px/1 var(--display); color: var(--gold-text); background: var(--panel-t); border-radius: 99px; padding: 2px 5px; border: 1px solid var(--gold-text); }
.tn-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.tn-ents { display: flex; flex-wrap: wrap; gap: 6px; }
.tn-ent { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 3px; border-radius: 99px; background: var(--card-t); border: 1px solid var(--edge-t); font-size: 12px; }
.tn-ent.me { border-color: var(--gold-text); }
.tn-bracket { margin-top: 14px; }
.tn-cols { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.tn-col { flex: 1 0 170px; display: flex; flex-direction: column; justify-content: space-around; gap: 8px; }
.tn-m { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: var(--r-md); background: var(--card-t); border: 1px solid var(--edge-t); }
.tn-m.bye { opacity: .6; } .tn-m > small, .tn-watch { align-self: flex-end; }
.tn-p { display: flex; gap: 6px; align-items: baseline; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-p small { color: var(--muted-t); min-width: 16px; text-align: right; } .tn-p.win { font-weight: 700; color: var(--green-text); } .tn-p.lose { color: var(--muted-t); text-decoration: line-through; }
.tn-p.me { text-decoration-color: var(--danger); } .tn-p.me::after { content: '●'; color: var(--gold-text); font-size: 12px; } .tn-p.tbd { color: var(--faint); font-style: italic; }
.tn-podium { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.tn-place { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-md); background: var(--card-t); border: 1px solid var(--edge-t); }
.tn-place.p1 { border-color: var(--gold-text); } .tn-place small { color: var(--green-text); font-weight: 700; }

/* ---------- telas menores ---------- */
@media (max-width: 860px) {
  .ar-grid, .ar-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .ar-rank { grid-template-columns: auto minmax(0, 1fr); } .ar-rank-stats, .ar-online { grid-column: 1 / -1; } .ar-online { text-align: left; }
}
@media (max-width: 560px) {
  .ar-scoreboard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ar-mid { grid-column: 1 / -1; grid-row: 1; flex-direction: row; gap: 10px; }
  .ar-teams { grid-template-columns: minmax(0, 1fr); } .ar-side.foe { justify-content: flex-start; } .ar-score { justify-self: center; }
  .ar-mode { grid-template-columns: 36px minmax(0, 1fr); } .ar-mode .btn { grid-column: 1 / -1; }
  .ar-brow { grid-template-columns: 28px 26px minmax(0, 1fr) auto; } .ar-bwl { display: none; }
}

/* ---------- luta em grupo (2026-11-03): tabuleiro, fila automática, últimas partidas, aviso no alto, ranking em páginas, reprodução ---------- */
.ar-cells-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 10px; }
.ar-cells-tag { font-size: var(--fs-min); color: var(--text-3, var(--c-text-3)); text-transform: uppercase; letter-spacing: .08em; }
/* tabuleiro em cima do ginásio (tools/draw-pvp-gym.mjs): --t = 1 sqm; a arte mostra as fileiras 5,2 a 13 e as casas ficam nas colunas 2–7, fileiras 9–11 */
.ar-gymboard { --t: 44px; position: relative; width: calc(var(--t) * 10); height: calc(var(--t) * 7.8); border-radius: var(--r-md); border: 1px solid var(--edge-2); overflow: hidden;
  background: var(--gymboard-bg) url(../../assets/pvp/gym-team.png) 0 calc(var(--t) * -5.2) / calc(var(--t) * 10) calc(var(--t) * 13) no-repeat; image-rendering: pixelated; }
.art-hd .ar-gymboard { background-image: url(../../assets/hd/pvp/gym-team.png); image-rendering: auto; }
.ar-cells { position: absolute; left: calc(var(--t) * 2); top: calc(var(--t) * 3.8); display: grid; grid-template-columns: repeat(var(--cols), var(--t)); }
.ar-cell { position: relative; width: var(--t); height: var(--t); border-radius: 4px; border: 1px dashed var(--gymboard-line); background: var(--gymboard-cell); display: grid; place-items: center; cursor: pointer; padding: 0; }
.ar-cell:nth-child(-n+6) { border-style: solid; }
.ar-cell:hover:not(:disabled) { background: var(--gymboard-hover); }
.ar-cell.on { border-style: solid; border-color: var(--accent); background: radial-gradient(ellipse at 50% 78%, var(--gymboard-shade) 0 30%, transparent 32%); }
.ar-cell canvas { width: calc(var(--t) - 4px); height: calc(var(--t) - 4px); image-rendering: pixelated; }
.ar-cell.pick { outline: 2px solid var(--green-text); outline-offset: 1px; }
.ar-cell:disabled { cursor: default; opacity: .75; }
/* funções do PvP em grupo (src/core/pvp-roles.js): selo na casa do tabuleiro, na ordem de luta e na legenda */
.ar-role { position: absolute; right: 2px; top: 0; font-style: normal; font-size: var(--fs-min); line-height: 1; }
.ar-role-ico { font-style: normal; font-weight: 700; }
.ar-role-support { color: var(--green-text); }
.ar-role-tank { color: var(--gold-text); }
.ar-role-ranged { color: var(--blue-text); }
.ar-role-melee { color: var(--red-text); }
.ar-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin: 6px 0 8px; }
.ar-roles > span { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: baseline; padding: 6px 8px; border-radius: 6px; background: var(--inset); border: 1px solid var(--edge-2); }
.ar-roles small { grid-column: 1 / -1; font-size: var(--fs-min); opacity: .8; }
.ar-auto { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--card-t); border: 1px solid var(--edge-t); display: flex; flex-direction: column; gap: 6px; }
.ar-auto-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ar-vip { font-size: var(--fs-min); font-weight: 700; padding: 1px 6px; border-radius: 99px; color: var(--accent); border: 1px solid var(--accent); }
.ar-seg { display: flex; gap: 4px; }
.ar-seg-b { flex: 1; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--edge-2); background: var(--inset); color: inherit; cursor: pointer; font: inherit; font-size: var(--fs-min); }
.ar-seg-b.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--inset)); font-weight: 700; }
.ar-last { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ar-last li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; background: var(--card-t); border-left: 3px solid var(--edge-2); }
.ar-last li.won { border-left-color: var(--green-text); } .ar-last li.lost { border-left-color: var(--danger); }
.ar-last .ar-l { text-align: center; } .ar-last li.won .ar-l { color: var(--green-text); } .ar-last li.lost .ar-l { color: var(--danger); }
.ar-lname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0; }
.ar-mine { margin-top: 6px; }
.pvp-chip { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 99px;
  background: var(--card-t); border: 1px solid var(--accent); box-shadow: 0 4px 18px color-mix(in srgb, var(--c-void, var(--inset)) 70%, transparent); font-size: var(--fs-min); }
.pvp-chip .ar-radar.mini { width: 18px; height: 18px; }
.pvp-chip-res { font-weight: 700; } .pvp-chip-res.won { color: var(--green-text); } .pvp-chip-res.lost { color: var(--danger); }
.ar-team .ar-tbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ar-team .ar-clock { margin-left: auto; font-variant-numeric: tabular-nums; }
.ar-tgrid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.ar-team .ar-stage { position: relative; width: min(480px, 100%); justify-self: center; }
.ar-team #pvp-arena { width: 100%; height: auto; aspect-ratio: 10 / 13; }
.ar-feed { position: absolute; top: 6px; right: 6px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; max-width: 70%; }
.ar-feed-l { font-size: var(--fs-min); padding: 2px 8px; border-radius: 4px; background: color-mix(in srgb, var(--inset) 85%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-feed-l .me { color: var(--green-text); } .ar-feed-l .foe { color: var(--danger); }
.ar-tpanel { display: flex; flex-direction: column; gap: 10px; }
.ar-tside { padding: 8px; border-radius: var(--r-md); background: var(--card-t); border: 1px solid var(--edge-t); display: flex; flex-direction: column; gap: 4px; }
.ar-tside.me { border-color: color-mix(in srgb, var(--green-text) 45%, var(--edge-t)); } .ar-tside.foe { border-color: color-mix(in srgb, var(--danger) 45%, var(--edge-t)); }
.ar-tside .ar-who { display: flex; align-items: center; gap: 6px; } .ar-alive { margin-left: auto; font-weight: 700; }
.ar-trow { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; align-items: center; }
.ar-trow span { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; font-size: var(--fs-min); }
.ar-trow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-trow .ar-hp { grid-column: 1 / -1; }
.ar-trow.ko { opacity: .4; filter: grayscale(1); }
@media (max-width: 760px) { .ar-tgrid { grid-template-columns: 1fr; } .ar-gymboard { --t: min(38px, calc((100vw - 48px) / 10)); } }
.ar-mode-txt .ar-warn { display: block; color: var(--danger); margin-top: 2px; } /* Ranqueada sem os 6 na ordem (2026-11-03) */
/* selo da função fora da Arena (role-badge.js): chip na ficha da Pokédex, ícone na grade da Pokédex e na vitrine da Ficha do Treinador */
.role-ico { font-style: normal; font-weight: 700; line-height: 1; text-shadow: 0 0 2px var(--x-000000); }
.chip.role-chip { background: var(--inset); border: 1px solid currentColor; font-weight: 700; }
.dex-cell .dex-role { position: absolute; left: 3px; bottom: 2px; font-size: var(--fs-min); }
.dex-cell .dex-role ~ .dex-mega-seal { left: 15px; }
.ts-mon { position: relative; } .ts-mon .ts-role { position: absolute; right: 6px; top: 5px; font-size: 13px; }