/* ---------------- draft de deadlock ----------------
   Tudo aqui vale so dentro do draft (.draft, .draft-mini, .dj-*). A estrutura
   usa os tokens do Domo; a identidade vem do Tatinuanga Draft (rafcsouza,
   MIT, revisao 47c3f4b).

   Unica excecao a regra "sem cor de marca": os dois times precisam ser
   distinguiveis de relance, entao cada um tem a sua cor, perto da original
   (ambar #c4862e e azul #6688cc) e sempre acompanhada do nome do time. Ban e
   pick usam o vermelho e o verde funcionais do Domo, sempre com texto e
   icone junto.
   ---------------------------------------- */
.draft, .draft-mini, .dj-atividade {
  --dj-time-a: #c98b34;
  --dj-time-b: #7393d4;
  --dj-ban: var(--danger);
  --dj-pick: var(--green);
  --dj-coroa: var(--owner);
  --dj-quadro: 44px;
}
:root[data-theme="light"] .draft,
:root[data-theme="light"] .draft-mini,
:root[data-theme="light"] .dj-atividade {
  --dj-time-a: #8f5b12;
  --dj-time-b: #35589c;
}

.time-a { color: var(--dj-time-a); }
.time-b { color: var(--dj-time-b); }

/* ---------------- camada ----------------
   Cobre a tela inteira e cabe nela sem rolagem: so a grade de herois se
   ajusta ao espaco que sobra (veja ajustarGrade em draft/tela.js). Fica
   abaixo das janelas (100) e dos menus (200). */
.draft {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--chat);
  color: var(--text);
  overflow: hidden;
}
.draft[hidden], .draft-mini[hidden] { display: none; }
.dj-carregando { margin: auto; color: var(--text-muted); }
.dj-apoio { color: var(--text-muted); font-weight: 400; }
.dj-vazio { color: var(--text-muted); font-size: var(--fs-sm); text-align: center; padding: var(--esp-4) 0; }
.dj-rotulo { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: var(--text-muted); margin-right: var(--esp-1); }

.dj-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-4);
  border-bottom: 1px solid var(--divider);
  flex-wrap: wrap;
}
.dj-call { display: inline-flex; gap: 2px; padding-right: var(--esp-2); margin-right: var(--esp-1); border-right: 1px solid var(--divider); }
.dj-call .btn.ligado { color: var(--danger); }
.dj-topo h2 { font-size: var(--fs-title); color: var(--text-bright); outline: none; }
.dj-topo p { font-size: var(--fs-sm); color: var(--text-muted); }
.dj-topo-acoes { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.dj-tempo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-row);
  box-shadow: inset 0 0 0 1px var(--borda);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.dj-tempo select {
  background: transparent;
  color: var(--text-bright);
  border: 0;
  font: inherit;
  cursor: pointer;
}
.dj-tempo select option { background: var(--modal); }

.dj-pausa {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: var(--esp-3) var(--esp-4) 0;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radius);
  background: var(--sidebar);
  box-shadow: inset 0 0 0 1px var(--borda);
  font-size: var(--fs-sm);
  color: var(--text-bright);
}
.dj-pausa > span:first-of-type { flex: 1; }

.dj-corpo { flex: 1; display: flex; gap: var(--esp-3); padding: var(--esp-3); min-height: 0; overflow: hidden; }
.dj-lateral {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-height: 0;
  background: var(--sidebar);
  border-radius: var(--radius);
  padding: var(--esp-3);
}
.dj-espera { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 60px; max-height: 45%; flex-shrink: 0; }
.dj-espectadores { font-size: var(--fs-xs); color: var(--text-muted); }
.dj-chat-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dj-principal { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }

/* ---------------- icones dos jogadores (desenho do original) ---------------- */
.dj-avatar, .dj-vaga {
  position: relative;
  width: var(--dj-quadro);
  height: var(--dj-quadro);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  border: 0;
  padding: 0;
}
.dj-avatar {
  background: var(--avatar);
  color: var(--avatar-texto);
  cursor: default;
  transition: transform var(--t-toque) var(--curva-saida);
}
.dj-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
.dj-avatar.clicavel { cursor: pointer; }
.dj-avatar.clicavel:hover { transform: translateY(-2px); }
.dj-avatar.selecionado { box-shadow: 0 0 0 2px var(--text-bright); }
.dj-avatar.eu { box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-bright) 40%, transparent); }
.dj-avatar.fora { opacity: 0.4; filter: grayscale(1); }
.dj-coroa {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translateX(-50%);
  color: var(--dj-coroa);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
.dj-coroa.apagada { opacity: 0.3; }
.dj-selo {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--dj-coroa);
  color: var(--chat);
  border: 2px solid var(--sidebar);
  box-shadow: var(--shadow-low);
}
.dj-selo svg { width: 12px; height: 12px; }
.dj-selo.pequeno { width: 16px; height: 16px; right: -4px; bottom: -4px; }
.dj-selo.pequeno svg { width: 10px; height: 10px; }
.dj-dica {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 20;
  margin-top: 6px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--text-bright);
  color: var(--chat);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-toque);
}
.dj-dica small { display: block; font-size: 10px; font-weight: 400; opacity: 0.7; }
.dj-avatar:hover .dj-dica, .dj-avatar:focus-visible .dj-dica,
.dj-vaga:hover .dj-dica, .dj-vaga:focus-visible .dj-dica { opacity: 1; }
.dj-vaga {
  border: 1px dashed color-mix(in srgb, var(--borda) 60%, transparent);
  background: color-mix(in srgb, var(--input) 40%, transparent);
  color: var(--text-muted);
  font-size: 20px;
  font-weight: 400;
}
.dj-vaga.clicavel { cursor: pointer; border-color: var(--text-muted); }
.dj-vaga.clicavel:hover { border-color: var(--text-bright); color: var(--text-bright); }

.dj-rosto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--avatar);
  color: var(--avatar-texto);
  font-weight: 800;
  text-transform: uppercase;
}
.dj-rosto img { width: 100%; height: 100%; object-fit: cover; }
.dj-rosto.pequeno { width: 32px; height: 32px; font-size: 12px; }
.dj-rosto.mini { width: 100%; height: 100%; font-size: 9px; border-radius: 0; }

/* linha da sala de espera */
.dj-linha { display: flex; align-items: center; gap: 4px; }
.dj-linha-botao {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-row);
  background: none;
  color: var(--text);
  text-align: left;
}
.dj-linha-botao[data-acao] { cursor: pointer; }
.dj-linha-botao[data-acao]:hover { background: var(--hover); }
.dj-linha-botao.selecionado { background: var(--selected); box-shadow: inset 0 0 0 1px var(--borda); }
.dj-linha-rosto { position: relative; flex-shrink: 0; display: inline-flex; }
.dj-linha-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dj-linha-nome { font-size: var(--fs-sm); font-weight: 700; color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dj-linha-marcas { font-size: 11px; color: var(--text-muted); }
.dj-linha-acao {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--brand);
  color: var(--acao-texto);
  font-size: 11px;
  font-weight: 800;
}
.dj-remover {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-row);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.dj-remover:hover { color: var(--danger); background: var(--hover); }
.dj-ficticio { display: flex; gap: var(--esp-2); margin-top: var(--esp-2); }
.dj-ficticio input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-row);
  background: var(--input);
  color: var(--text-bright);
  font: inherit;
  font-size: var(--fs-sm);
}

/* ---------------- times ---------------- */
.dj-times { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4); flex-shrink: 0; }
.dj-lado { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.dj-bans { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.dj-time {
  --cor-time: var(--dj-time-a);
  position: relative;
  padding: 10px 14px 12px;
  border-radius: var(--radius-lg);
  background: var(--sidebar);
  box-shadow: inset 0 0 0 1px var(--divider);
  overflow: visible;
}
.dj-time.time-b { --cor-time: var(--dj-time-b); }
.dj-time::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--cor-time);
}
.dj-time.ativo { box-shadow: inset 0 0 0 1px var(--cor-time), 0 0 24px -6px var(--cor-time); }
.dj-time-cabeca { display: flex; align-items: center; gap: var(--esp-2); min-height: 30px; }
.dj-time-cabeca h3 { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cor-time); }
.dj-time-conta { font-size: 11px; color: var(--text-muted); }
.dj-time-vagas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dj-desfazer {
  margin-top: 8px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.dj-desfazer:hover { color: var(--text-bright); text-decoration: underline; }
.dj-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.dj-heroi-mini {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: cover;
  object-position: 50% 20%;
  background: var(--input);
}
.dj-heroi-mini.vazio { border: 1px dashed var(--divider); background: color-mix(in srgb, var(--input) 40%, transparent); }
.dj-heroi-mini.banido { box-shadow: 0 0 0 1px var(--dj-ban); }

/* ---------------- linha do tempo ---------------- */
.dj-linha-do-tempo {
  flex-shrink: 0;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--sidebar);
  box-shadow: inset 0 0 0 1px var(--divider);
  padding: 8px 12px;
}
.dj-ldt-trilho { display: flex; align-items: stretch; gap: 12px; width: max-content; margin: 0 auto; }
.dj-ldt-times {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 0 2px;
  text-align: right;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dj-ldt-titulo { margin-bottom: 4px; font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.dj-ldt-titulo span { font-weight: 400; letter-spacing: 0; text-transform: none; }
.dj-ldt-colunas { position: relative; display: flex; }
.dj-ldt-colunas::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--divider); }
.dj-ldt-coluna { position: relative; display: flex; flex-direction: column; gap: 8px; margin-left: 2px; }
.dj-ldt-coluna:first-child { margin-left: 0; }
.dj-ldt-coluna.novo-turno { margin-left: 8px; }
.dj-ldt-divisor { width: 1px; align-self: stretch; background: var(--divider); }
.dj-ldt-vaga {
  position: relative;
  width: var(--dj-ldt, 24px);
  height: var(--dj-ldt, 24px);
  border-radius: 6px;
  overflow: hidden;
  background: var(--input);
}
.dj-ldt-vaga.nada { background: none; }
.dj-ldt-vaga.incerta { transform: translateY(calc(var(--dj-ldt, 24px) / 2 + 4px)); border: 1px dashed var(--divider); background: var(--sidebar); }
.dj-ldt-vaga.proximo { border: 1px dashed color-mix(in srgb, var(--cor-vaga) 60%, transparent); background: var(--sidebar); }
.dj-ldt-vaga.time-a { --cor-vaga: var(--dj-time-a); }
.dj-ldt-vaga.time-b { --cor-vaga: var(--dj-time-b); }
.dj-ldt-vaga.feito { border-bottom: 2px solid var(--cor-vaga); }
.dj-ldt-vaga.feito.tipo-ban { border-bottom-color: var(--dj-ban); }
.dj-ldt-vaga.pulado { opacity: 0.25; background: var(--sidebar); border: 1px dashed var(--divider); }
.dj-ldt-vaga.atual {
  border: 2px solid var(--cor-acao, var(--dj-pick));
  background: var(--sidebar);
  animation: dj-pulso 1.2s ease-in-out infinite;
}
.dj-ldt-vaga.atual.tipo-ban { --cor-acao: var(--dj-ban); }
.dj-ldt-vaga img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.dj-ldt-vaga.tipo-ban img { opacity: 0.6; filter: grayscale(1); }
.dj-ldt-x { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dj-ban); font-weight: 900; font-size: 13px; }
.dj-ldt-auto { position: absolute; top: 0; right: 0; display: flex; padding: 1px; border-bottom-left-radius: 4px; background: rgba(0, 0, 0, 0.8); color: var(--yellow); }
@keyframes dj-pulso {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 10px 1px var(--cor-acao, var(--dj-pick)); }
}

/* ---------------- herois ---------------- */
.dj-herois {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--sidebar);
  box-shadow: inset 0 0 0 1px var(--divider);
}
.dj-herois.sua-vez { --cor-vez: var(--dj-pick); animation: dj-vez 1.6s ease-in-out infinite; }
.dj-herois.sua-vez.ban { --cor-vez: var(--dj-ban); }
@keyframes dj-vez {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--cor-vez), 0 0 18px -6px var(--cor-vez); }
  50% { box-shadow: inset 0 0 0 2px var(--cor-vez), 0 0 36px -4px var(--cor-vez); }
}
.dj-vez {
  position: relative;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--divider);
}
.dj-vez-texto { font-size: var(--fs-title); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-bright); }
.dj-vez-pilula {
  --cor-time: var(--text-bright);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--cor-time);
  color: var(--cor-time);
  font-size: var(--fs-title);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dj-vez-pilula b { color: var(--text-bright); font-weight: 800; }
.dj-vez-pilula.time-a { --cor-time: var(--dj-time-a); }
.dj-vez-pilula.time-b { --cor-time: var(--dj-time-b); }
.dj-vez-pilula.minha.pick, .dj-vez-pilula.minha.ban {
  box-shadow: var(--shadow-low);
  background: var(--dj-pick);
  color: #ffffff;
  animation: dj-respira 1.6s ease-in-out infinite;
}
.dj-vez-pilula.minha.ban { background: var(--dj-ban); }
@keyframes dj-respira { 50% { opacity: 0.75; } }
.dj-acao-icone { display: inline-flex; }
.dj-acao-icone.pick { color: var(--dj-pick); }
.dj-acao-icone.ban { color: var(--dj-ban); }
.dj-relogio {
  width: 56px;
  padding: 6px 8px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--divider);
  text-align: center;
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.dj-relogio.urgente { box-shadow: inset 0 0 0 1px var(--dj-ban); color: var(--dj-ban); }
.dj-barra { position: absolute; inset: auto 0 -1px; height: 6px; overflow: hidden; background: color-mix(in srgb, var(--input) 60%, transparent); }
.dj-barra > span { display: block; height: 100%; background: var(--dj-pick); transition: width 300ms linear, background-color 300ms; }
.sua-vez.ban .dj-barra > span { background: var(--dj-ban); }
.dj-barra.urgente > span { background: var(--dj-ban); animation: dj-respira 1s ease-in-out infinite; }
.dj-link { border: 0; background: none; color: var(--text-muted); font-size: var(--fs-xs); text-decoration: underline; cursor: pointer; }
.dj-link:hover { color: var(--text-bright); }

/* moeda */
.dj-moeda { width: var(--dj-quadro); height: var(--dj-quadro); perspective: 400px; }
.dj-moeda-giro { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.dj-moeda-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  backface-visibility: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.dj-moeda-face.time-a { background: var(--dj-time-a); border: 2px solid color-mix(in srgb, var(--dj-time-a) 60%, #000000); }
.dj-moeda-face.time-b { background: var(--dj-time-b); border: 2px solid color-mix(in srgb, var(--dj-time-b) 60%, #000000); }
.dj-moeda-face.verso { transform: rotateY(180deg); }

/* grade */
.dj-grade {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  justify-content: center;
  align-content: center;
  gap: 6px;
  padding: 10px;
}
/* cartao pequeno demais para o nome: ele fica so na descricao */
.dj-grade.pequena .dj-heroi-nome, .dj-grade.pequena .dj-heroi-dica { display: none; }
.dj-heroi {
  --cor-vez: var(--dj-pick);
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--divider);
  border-radius: 8px;
  background: var(--input);
  cursor: default;
  transition: transform 200ms var(--curva-saida), box-shadow 200ms, border-color 200ms;
}
.sua-vez.ban .dj-heroi { --cor-vez: var(--dj-ban); }
.dj-heroi img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 200ms; }
.dj-heroi:hover { z-index: 1; transform: scale(1.1); border-color: var(--cor-heroi); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7); }
.dj-heroi:hover img, .dj-heroi.marcado img, .dj-heroi.feito img { filter: none; }
.dj-heroi.clicavel { cursor: pointer; }
.dj-heroi.clicavel:hover { border-color: var(--cor-vez); outline: 2px solid var(--cor-vez); outline-offset: -2px; }
.dj-heroi.marcado { z-index: 1; transform: scale(1.1); border-color: var(--cor-vez); outline: 3px solid var(--cor-vez); outline-offset: -2px; }
.dj-heroi.feito { border-color: var(--cor-heroi); }
.dj-heroi.feito:hover { transform: none; box-shadow: none; }
.dj-heroi.feito.pick.time-a { outline: 2px solid var(--dj-time-a); outline-offset: -2px; }
.dj-heroi.feito.pick.time-b { outline: 2px solid var(--dj-time-b); outline-offset: -2px; }
.dj-heroi.feito.ban img { opacity: 0.6; }
.dj-heroi-nome {
  position: absolute;
  inset: auto 0 0;
  padding: 16px 4px 4px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}
.dj-heroi-hover, .dj-heroi-selo, .dj-heroi-ban {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 4px;
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}
.dj-heroi-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 150ms;
}
.dj-heroi:hover .dj-heroi-hover, .dj-heroi:focus-visible .dj-heroi-hover { opacity: 1; }
.dj-heroi-hover.pick, .dj-heroi-confirma.pick .dj-heroi-selo { background: var(--dj-pick); }
.dj-heroi-hover.ban, .dj-heroi-confirma.ban .dj-heroi-selo { background: var(--dj-ban); }
.dj-heroi-confirma {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.3);
}
.dj-heroi-dica { padding: 0 4px; color: #ffffff; font-size: 9px; font-weight: 700; text-shadow: 0 1px 2px #000000; }
.dj-heroi-cancelar {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: 10px;
}
.dj-heroi-ban { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--dj-ban); }

/* ajuda */
.dj-ajuda { display: flex; flex-direction: column; gap: var(--esp-3); padding-left: 18px; color: var(--text); line-height: 1.5; }
.dj-ajuda b { color: var(--text-bright); }

/* ---------------- minimizado ---------------- */
.draft-mini {
  position: fixed;
  right: var(--esp-4);
  bottom: var(--esp-4);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 8px 8px 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--modal);
  box-shadow: var(--shadow-high);
  color: var(--text-bright);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.draft-mini.sua-vez { box-shadow: var(--shadow-high), 0 0 0 2px var(--dj-pick); }

/* ---------------- atividade na call ---------------- */
.dj-na-atividade { display: inline-flex; margin-left: auto; color: var(--owner); }
.voice-tile.dj-atividade {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: default;
  text-align: center;
  box-shadow: inset 0 0 0 1px var(--borda);
}
.dj-atividade-arte {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--input);
  color: var(--dj-coroa);
}
.dj-atividade-titulo { font-weight: 800; color: var(--text-bright); }
.dj-atividade-apoio { font-size: var(--fs-xs); color: var(--text-muted); }
.dj-atividade-rostos { display: flex; align-items: center; }
.dj-atividade-rosto { margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--sidebar); }
.dj-atividade-rosto:first-child { margin-left: 0; }
.dj-atividade-mais { margin-left: 6px; font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------------- telas menores ---------------- */
/* a linha do tempo tem 26 casas: elas encolhem antes de a linha precisar rolar */
@media (max-width: 1400px) { .draft { --dj-ldt: 20px; } }
@media (max-width: 1100px) {
  .draft { --dj-ldt: 16px; }
  .dj-lateral { width: 200px; }
  .dj-ldt-times { display: none; }
}
/* no celular nao ha como caber tudo: o corpo rola e a grade ganha altura propria */
@media (max-width: 640px) {
  .dj-times { grid-template-columns: 1fr; }
  .dj-corpo { flex-direction: column; overflow-y: auto; padding: var(--esp-2); gap: var(--esp-2); }
  /* a vez e o timer primeiro; espera e chat descem */
  .dj-principal { order: 1; flex: none; }
  .dj-lateral { order: 2; width: auto; height: 320px; flex-shrink: 0; overflow: hidden; }
  .dj-herois { min-height: 70vh; flex-shrink: 0; }
  .dj-vez { position: sticky; top: 0; z-index: 2; background: var(--sidebar); }
  .dj-vez-pilula, .dj-vez-texto { font-size: var(--fs-ui); }
  .dj-grade { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .dj-herois.sua-vez, .dj-ldt-vaga.atual, .dj-vez-pilula.minha, .dj-barra.urgente > span { animation: none; }
  .dj-heroi, .dj-avatar, .dj-barra > span { transition: none; }
  .dj-heroi:hover, .dj-heroi.marcado, .dj-avatar.clicavel:hover { transform: none; }
}

/* ---------------- conteudo, chat e ajustes de som ---------------- */
.dj-conteudo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dj-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--divider); padding-top: var(--esp-2); }
.dj-chat-abas { display: flex; gap: 4px; }
.dj-chat-abas button {
  flex: 1;
  height: 28px;
  border: 0;
  border-radius: var(--radius-row);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}
.dj-chat-abas button[aria-selected="true"] { background: var(--selected); color: var(--text-bright); }
.dj-chat-abas button:disabled { opacity: 0.5; cursor: not-allowed; }
.dj-chat-novas { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--brand); color: var(--acao-texto); font-size: 10px; }
.dj-chat-novas[hidden] { display: none; }
.dj-chat-lista { flex: 1; min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.dj-msg { display: flex; flex-direction: column; gap: 2px; }
.dj-msg-autor { font-size: var(--fs-xs); font-weight: 800; color: var(--text-bright); }
.dj-msg-texto { color: var(--text); overflow-wrap: anywhere; }
.dj-msg-imagem { max-width: 100%; max-height: 140px; border-radius: var(--radius-row); object-fit: contain; align-self: flex-start; background: var(--input); }
.dj-chat-form { display: flex; align-items: center; gap: 4px; }
.dj-chat-form input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-row);
  background: var(--input);
  color: var(--text-bright);
  font: inherit;
  font-size: var(--fs-sm);
}
.dj-chat-anexo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-row); color: var(--text-muted); cursor: pointer; }
.dj-chat-anexo:hover { background: var(--hover); color: var(--text-bright); }
.dj-sons {
  position: absolute;
  top: 52px;
  right: var(--esp-4);
  z-index: 5;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border-radius: var(--radius);
  background: var(--modal);
  box-shadow: var(--shadow-high);
}
.dj-sons[hidden] { display: none; }
.dj-sons-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); font-size: var(--fs-sm); color: var(--text-bright); }
.dj-sons-linha input[type="range"] { width: 120px; accent-color: var(--brand); }
.dj-sons .dj-apoio { font-size: var(--fs-xs); }

/* ---------------- resultado, placar, ranking e historico ---------------- */
.dj-resultado {
  position: absolute;
  inset: 56px 0 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-4);
  overflow-y: auto;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: color-mix(in srgb, var(--sidebar) 96%, transparent);
}
.dj-resultado-fechar { position: absolute; top: 8px; right: 8px; }
.dj-resultado-mostrar { position: absolute; right: 12px; bottom: 12px; z-index: 3; }
.dj-resultado-titulo { font-size: var(--fs-title); font-weight: 800; color: var(--text-bright); }
.dj-resultado-form, .dj-importar { display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; }
.dj-resultado-form input, .dj-importar input {
  height: 40px;
  min-width: 220px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-row);
  background: var(--input);
  color: var(--text-bright);
  font: inherit;
}
.dj-importar p { width: 100%; color: var(--text-muted); }
.dj-resultado-acoes { display: flex; gap: var(--esp-2); }

.dj-placar { display: flex; flex-direction: column; gap: var(--esp-2); }
.dj-placar-topo { font-size: var(--fs-sm); color: var(--text-muted); }
.dj-placar-times { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); }
.dj-placar-time { --cor-time: var(--dj-time-a); border-radius: var(--radius); background: var(--chat); box-shadow: inset 0 3px 0 var(--cor-time); padding: var(--esp-2); overflow-x: auto; }
.dj-placar-time.time-b { --cor-time: var(--dj-time-b); }
.dj-placar-time header { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 4px 8px; }
.dj-placar-time h4 { color: var(--cor-time); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.dj-placar-time header span { font-size: var(--fs-xs); color: var(--text-muted); }
.dj-placar-time header b { color: var(--text-bright); }
.dj-placar table, .dj-rk { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.dj-placar th, .dj-rk th { text-align: left; font-weight: 700; color: var(--text-muted); padding: 4px; }
.dj-placar td, .dj-rk td { padding: 4px; border-top: 1px solid var(--divider); color: var(--text); vertical-align: middle; }
.dj-placar .num, .dj-rk .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dj-placar-heroi { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.dj-placar-heroi span { display: flex; flex-direction: column; min-width: 0; }
.dj-placar-heroi b { color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dj-placar-heroi small { color: var(--text-muted); }
.dj-placar-mvp { color: var(--owner); display: inline-flex; }
.dj-placar-itens { display: flex; flex-wrap: wrap; gap: 2px; min-width: 120px; }
.dj-placar-item { width: 18px; height: 18px; border-radius: 4px; background: var(--input); }

.dj-janela { display: flex; flex-direction: column; gap: var(--esp-3); }
.dj-janela-corpo { display: flex; flex-direction: column; gap: var(--esp-3); max-height: 70vh; overflow-y: auto; }
.dj-janela .dj-chat-abas { max-width: 420px; }
.dj-janela .time-a { color: #c98b34; }
.dj-janela .time-b { color: #7393d4; }
:root[data-theme="light"] .dj-janela .time-a { color: #8f5b12; }
:root[data-theme="light"] .dj-janela .time-b { color: #35589c; }
.dj-rk-linha { cursor: pointer; }
.dj-rk-linha:hover td, .dj-rk-linha:focus-visible td { background: var(--hover); }
.dj-rk-jogador { display: flex; align-items: center; gap: 8px; color: var(--text-bright); font-weight: 700; }
.dj-rk-jogador small { color: var(--text-muted); font-weight: 400; }
.dj-rk-var { margin-left: 4px; font-size: 10px; color: var(--text-muted); }
.dj-rk-var.sobe { color: var(--green); }
.dj-rk-var.cai { color: var(--danger); }
.dj-rk-forma { display: inline-flex; gap: 2px; }
.dj-rk-forma span { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 9px; font-weight: 800; color: #ffffff; }
.dj-rk-forma .v { background: var(--green); }
.dj-rk-forma .d { background: var(--danger); }
.dj-rk-perfil { display: flex; flex-direction: column; gap: 6px; padding: 8px 4px; color: var(--text); }
.dj-rk-perfil-titulo { font-weight: 800; color: var(--text-bright); }
.dj-rk-herois { display: flex; flex-wrap: wrap; gap: 8px; }
.dj-rk-herois span { display: inline-flex; align-items: center; gap: 6px; }
.dj-rk-premios { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--esp-2); }
.dj-rk-premio { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2); border-radius: var(--radius-row); background: var(--sidebar); }
.dj-rk-premio span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dj-rk-premio b { color: var(--text-bright); }
.dj-rk-premio small { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dj-rk-premio-icone { display: inline-flex; color: var(--owner); }
.dj-rk-par { font-size: var(--fs-sm); color: var(--text); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.dj-rk-par b { color: var(--text-bright); }
.dj-hist { list-style: none; display: flex; flex-direction: column; gap: 4px; padding: 0; }
.dj-hist-item {
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr 0.6fr 0.5fr 1fr;
  gap: var(--esp-2);
  align-items: center;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-row);
  background: var(--sidebar);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
}
.dj-hist-item:hover { background: var(--active); }
.dj-hist-paginas { display: flex; align-items: center; justify-content: center; gap: var(--esp-3); font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 900px) { .dj-placar-times { grid-template-columns: 1fr; } }