:root {
  /* ---------------------------------------------------------------- paleta
     Amarelo sobre grafite. UMA cor de marca, usada em poucos lugares.

     A versão anterior era grafite puro, e o resultado foi a sensação de
     interface desligada - a mesma do modo preto-e-branco que o celular liga na
     hora de dormir. O olho precisa de um ponto de descanso, e num site de vídeo
     ele não pode vir do conteúdo: o conteúdo é a tela de outra pessoa, que hoje
     é um jogo e amanhã é uma planilha.

     Onde o amarelo aparece: o nome, o botão principal e o que está selecionado.
     Em mais nada. Espalhar a cor de marca por toda a interface é o que faz um
     produto parecer amador - e tira dela justamente o poder de dizer "clique
     aqui". Fora isso, o sistema é grafite, e as outras cores são ESTADO:
     verde no ar, laranja aviso, vermelho erro. */
  --bg:#0e0f12; --panel:#16181d; --surface:#1e2127; --border:#2b2f36;
  --control-border:#4b525c; --text:#e9ebee; --muted:#969ca6;

  /* O AMARELO e a marca. Grafite sozinho ficou sem ponto de descanso para o
     olho - a sensacao e a do modo preto-e-branco do celular, de interface
     desligada. Uma cor forte e so uma resolve isso: ela aparece no nome, no
     botao principal e na selecao, e em mais nada. */
  --accent:#ffcc33; --accent-hover:#ffd75e; --on-accent:#17140a; --selected:#2a2413;

  /* AVISO precisou sair do ambar. Com a marca amarela, aviso amarelo deixa de
     ser aviso: vira decoracao, e a pessoa aprende a ignorar. Laranja mantem a
     leitura de alerta sem competir com o amarelo da marca. */
  --warn:#f08a4b; --warn-bg:#2e1d12;
  --danger:#ef8a8a; --danger-bg:#2c1b1f;

  /* Verde e ESTADO, nao marca: e o "no ar" de qualquer equipamento de video.
     Nunca aparece fora disso. */
  --live:#5ecf98; --success-bg:#15251d;

  /* Azul para o foco, e agora com um motivo a mais: e a complementar do
     amarelo, entao o anel nunca se confunde com o estado selecionado. */
  --focus:#7fa8d4;
  --text-xs:.8125rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.25rem; --text-title:1.75rem;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --shadow-panel:0 12px 36px rgb(0 0 0 / 24%); --shadow-overlay:0 24px 64px rgb(0 0 0 / 42%);
}
* { box-sizing:border-box; }
body {
  /* 100dvh e a altura VISIVEL de verdade no celular: 100vh ignora a barra do
     navegador e o teclado, e era por isso que o campo de mensagem sumia atras
     do teclado. O 100vh fica como reserva para navegador antigo. */
  margin:0; height:100vh; height:100dvh;
  overflow:hidden; display:flex; flex-direction:column;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--text);
}
.hidden { display:none !important; }

button {
  font:inherit; font-size:13px; padding:7px 13px; border-radius:7px; cursor:pointer;
  background:var(--surface); color:var(--text); border:1px solid var(--border);
}
button:hover:not(:disabled) { background:var(--selected); }
button:disabled { opacity:.35; cursor:default; }
button.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
button.primary:hover:not(:disabled) { background:var(--accent-hover); }
button.danger { background:transparent; border-color:var(--danger); color:var(--danger); }
button.danger:hover:not(:disabled) { background:var(--danger-bg); }
input, select {
  font:inherit; font-size:13px; padding:7px 9px; border-radius:7px;
  background:var(--surface); color:var(--text); border:1px solid var(--border);
}
label.field { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.pill {
  display:inline-flex; align-items:center; gap:6px; font-size:12px;
  padding:4px 10px; border-radius:999px; background:var(--bg);
  border:1px solid var(--border); color:var(--muted);
}
/* Enquanto o WebRTC descobre quanto a rede aguenta, a imagem ainda vai subir.
   Dizer o degrau nesse momento seria mentira; a pílula avisa que está no meio
   do processo, o que explica os primeiros segundos ruins em vez de deixar a
   pessoa achar que ficou assim. */
.pill.preparando { border-color:var(--warn); color:var(--warn); }
/* Rodapé do lobby: privacidade à esquerda, idioma à direita. O seletor fica
   discreto de propósito - quem precisa dele procura, e quem não precisa não
   deve tropeçar nele antes de entrar numa sala. */
.rodape-lobby { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.idioma select {
  font-size:var(--text-xs); padding:4px 8px; background:transparent;
  border-color:transparent; color:var(--muted);
}
.idioma select:hover { border-color:var(--border); color:var(--text); }

.dot { width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none; }
.dot.ok { background:var(--live); } .dot.warn { background:var(--warn); } .dot.bad { background:var(--danger); }

/* ---------------- lobby ---------------- */
.lobby {
  position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:20px; overflow:auto;
}
.lobby .card {
  width:min(560px,96vw); background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:24px; display:flex; flex-direction:column; gap:16px;
}
/* O nome é onde a marca mora. É a primeira coisa que a pessoa vê e a única
   que não muda de tela para tela. */
.lobby h1 { margin:0; font-size:19px; color:var(--accent); }
.lobby h2 { margin:0; font-size:13px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.lobby p { margin:0; font-size:13px; color:var(--muted); line-height:1.55; }
.lobby label { font-size:12px; color:var(--muted); display:block; margin-bottom:5px; }
.lobby input, .lobby select { width:100%; }
.row { display:flex; gap:10px; }
.row > * { flex:1; }
.divider { height:1px; background:var(--border); }

.roomlist { display:flex; flex-direction:column; gap:6px; max-height:220px; overflow:auto; }
.roomrow {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--bg); border:1px solid var(--border); border-radius:9px; cursor:pointer;
}
.roomrow:hover { border-color:var(--control-border); }
.roomrow.sel { border-color:var(--accent); background:var(--selected); }
.roomrow .nm { font-weight:600; font-size:14px; }
.roomrow .ct { margin-left:auto; font-size:12px; color:var(--muted); }
.roomrow.cheia { opacity:.45; cursor:default; }
.empty-rooms { font-size:13px; color:var(--muted); padding:14px; text-align:center; }
.err { color:var(--danger); font-size:13px; }

/* ---------------- app ---------------- */
header {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 16px; border-bottom:1px solid var(--border); background:var(--panel);
}
.brand { font-weight:600; font-size:15px; color:var(--accent); }
.spacer { flex:1; }
.group { display:flex; align-items:center; gap:6px; }

.body { flex:1; min-height:0; display:flex; }
.stage { flex:1; min-width:0; padding:10px; display:flex; }

.grid { flex:1; min-height:0; display:grid; gap:10px; grid-template-columns:1fr; }
.grid.n2 { grid-template-columns:1fr 1fr; }
.grid.n3, .grid.n4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }

.player {
  position:relative; min-width:0; min-height:0; background:#000;
  border-radius:10px; overflow:hidden; border:1px solid var(--border);
}
.player video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.tag {
  position:absolute; top:9px; left:9px; z-index:2; display:flex; align-items:center; gap:6px;
  font-size:11px; padding:4px 9px; border-radius:6px;
  background:rgba(0,0,0,.65); color:#fff; backdrop-filter:blur(4px);
}
.tag .live-dot { width:6px; height:6px; border-radius:50%; background:var(--live); }
.warnbadge {
  position:absolute; top:9px; right:9px; z-index:3; font-size:11px;
  padding:5px 10px; border-radius:6px; background:rgba(120,53,15,.92); color:#fde68a;
}
.controls {
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:8px; padding:20px 10px 8px;
  background:linear-gradient(transparent, rgba(0,0,0,.85));
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
/* Aqui o ':hover' no contêiner CONTINUA certo, ao contrário do .focusbar: o
   .player é um tile pequeno da grade, nunca ocupa a tela inteira, e ninguém
   posta 'show-controls' nele - o hover é o único jeito de mostrar estes. */
.player:hover .controls, .player.show-controls .controls { opacity:1; pointer-events:auto; }
.controls .right { margin-left:auto; display:flex; align-items:center; gap:2px; }
.ctrl { background:transparent; border:none; padding:5px; border-radius:6px; color:#fff;
        display:inline-flex; align-items:center; cursor:pointer; }
.ctrl:hover { background:rgba(255,255,255,.16); }
.ctrl svg { width:18px; height:18px; fill:currentColor; display:block; }
.vol { width:70px; accent-color:#fff; cursor:pointer; }
.stat { font-size:10px; color:rgba(255,255,255,.8); font-variant-numeric:tabular-nums; }
.tap {
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; cursor:pointer;
  background:rgba(0,0,0,.6); color:#fff; font-size:13px;
}
.tap svg { width:38px; height:38px; fill:#fff; }

.empty {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--muted); text-align:center;
}
.empty svg { width:50px; height:50px; fill:#333a48; }
.empty h3 { margin:0; font-size:15px; color:#b9bfcc; }
.empty p { margin:0; font-size:13px; max-width:400px; line-height:1.5; }

/* ---------------- chat ---------------- */
.side {
  width:290px; flex:none; border-left:1px solid var(--border); background:var(--panel);
  display:flex; flex-direction:column;
}
.side h3 { margin:0; padding:11px 14px; font-size:12px; color:var(--muted);
           text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); }
.members { padding:8px 14px; display:flex; flex-wrap:wrap; gap:5px; border-bottom:1px solid var(--border); }
.member { font-size:11px; padding:3px 8px; border-radius:999px; background:var(--bg); border:1px solid var(--border); }
.member.owner::after { content:" ★"; color:var(--warn); }
.msgs { flex:1; overflow:auto; padding:10px 14px; display:flex; flex-direction:column; gap:9px; }
.msg { font-size:13px; line-height:1.45; }
.msg .who { font-weight:600; font-size:12px; }
.msg.sys { color:var(--muted); font-size:12px; font-style:italic; }
.chatbox { display:flex; gap:6px; padding:10px; border-top:1px solid var(--border); }
.chatbox input { flex:1; }

/* ---------------- gaveta ---------------- */
.drawer { border-top:1px solid var(--border); background:var(--panel); }
.drawer summary { padding:7px 16px; font-size:12px; color:var(--muted); cursor:pointer;
                  user-select:none; list-style:none; }
.drawer summary::-webkit-details-marker { display:none; }
.drawer summary::before { content:"▸ "; }
.drawer[open] summary::before { content:"▾ "; }
#status { font-family:ui-monospace,Consolas,monospace; font-size:11px; white-space:pre-wrap;
          padding:0 16px 10px; margin:0; max-height:140px; overflow:auto; color:#9aa2b4; }

/* ---------------- banner ---------------- */
.banner {
  display:flex; align-items:flex-start; gap:12px; padding:11px 16px;
  background:#2a2010; border-bottom:1px solid #4a3a15; font-size:13px; line-height:1.5;
}
.banner svg { width:18px; height:18px; fill:var(--warn); flex:none; margin-top:1px; }
.banner b { color:#fbbf24; }
.banner code { background:var(--bg); padding:2px 6px; border-radius:4px;
               font-family:ui-monospace,Consolas,monospace; font-size:12px; }
.banner .acts { margin-left:auto; display:flex; gap:6px; flex:none; }


/* ================= palco: foco + faixa ================= */
.stage { flex:1; min-width:0; padding:10px; display:flex; flex-direction:column; gap:10px; }

.focus {
  flex:1; min-height:0; position:relative;
  background:#000; border-radius:12px; overflow:hidden; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.focus.vazio { background:#12151c; }
.focus video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }

/* ---- grade (modos coach, eSports, supervisão, monitoria) ----
   Várias transmissões lado a lado. O número de colunas vem de uma CLASSE, não
   de um style inline: a CSP do projeto não permite atributo style, e essa
   restrição é justamente o que mantém a política utilizável. */
.focus.grade { display:grid; gap:6px; padding:6px; align-items:stretch; }
.focus.grade video {
  position:relative; inset:auto; width:100%; height:100%; min-width:0; min-height:0;
  border-radius:8px; cursor:zoom-in; border:1px solid var(--border);
}
.focus.grade video:hover { border-color:var(--accent); }
/* desenho e "vazio" não fazem sentido enquanto a grade está montada */
.focus.grade .tela-desenho, .focus.grade .empty { display:none; }
.focus.grade.g1 { grid-template-columns:1fr; }
.focus.grade.g2 { grid-template-columns:repeat(2,1fr); }
.focus.grade.g3 { grid-template-columns:repeat(2,1fr); }
.focus.grade.g4 { grid-template-columns:repeat(2,1fr); }
.focus.grade.g5 { grid-template-columns:repeat(3,1fr); }
.focus.grade.g6 { grid-template-columns:repeat(3,1fr); }

/* ---- faixa de participantes (estilo Discord) ---- */
.strip { flex:none; display:flex; gap:10px; height:132px; overflow-x:auto; padding-bottom:2px; }
.tile {
  position:relative; flex:0 0 208px; border-radius:10px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; background:var(--surface);
  display:flex; align-items:center; justify-content:center; transition:border-color .15s;
}
.tile:hover { border-color:var(--control-border); }
.tile.focado { border-color:var(--accent); }
.tile.offline { opacity:.5; cursor:default; }
.tile video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.avatar {
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:22px; font-weight:600; color:#fff; user-select:none;
}
.tile .nome {
  position:absolute; left:8px; bottom:7px; z-index:2; max-width:calc(100% - 70px);
  font-size:12px; padding:3px 8px; border-radius:6px; color:#fff;
  background:rgba(0,0,0,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tile .badge {
  position:absolute; right:8px; bottom:7px; z-index:2;
  font-size:10px; font-weight:600; letter-spacing:.04em;
  padding:3px 7px; border-radius:5px; background:var(--danger); color:#fff;
}
.tile .badge.assistindo { background:var(--accent); }
.tile .badge.mudo { background:var(--surface); }
/* Sem vaga não é "sala cheia": é o limite da MÁQUINA de quem transmite. O tile
   continua clicável de propósito - o clique entra na fila em vez de não fazer
   nada, que é o que transformaria um limite honesto em bug aparente. */
.tile .badge.cheio { background:#4a3a15; color:#fbbf24; }
.tile.lotado { opacity:.62; }
.tile.lotado:hover { border-color:var(--warn); opacity:.85; }

/* ---- barra do video em foco ---- */
.focusbar {
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:10px; padding:22px 12px 10px;
  background:linear-gradient(transparent, rgba(0,0,0,.88));
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
/* Quem manda é a classe .show-controls, posta pelo mousemove com temporizador.
   O ':hover' no CONTÊINER que existia aqui deixava a barra permanente em tela
   cheia: o .focus ocupa a tela inteira, então o ponteiro está sempre sobre ele
   e o hover nunca deixa de valer. Fora da tela cheia o problema não aparecia
   porque quase sempre o mouse está em outro lugar da página.

   O ':hover' na PRÓPRIA barra continua, e é diferente: só alcança quando ela já
   está visível (escondida ela é pointer-events:none), e serve para o ponteiro
   parado em cima da engrenagem não ver o menu sumir debaixo dele. */
.focus.show-controls .focusbar, .focusbar:hover { opacity:1; pointer-events:auto; }
.focusbar .right { margin-left:auto; display:flex; align-items:center; gap:4px; }
.focusbar .quem { font-size:12px; color:#fff; display:flex; align-items:center; gap:6px; }
/* O veredito de qualidade: uma frase sobre uma pessoa ou uma rede específica,
   nunca sobre "a conexão". É o que evita que a imagem ruim vire culpa do app. */
.focusbar .veredito {
  font-size:11px; color:#fbbf24; max-width:46ch; line-height:1.35;
  white-space:normal;
}
.focusbar .quem .live-dot { width:6px; height:6px; border-radius:50%; background:var(--live); }

/* ================= modal ================= */
dialog.modal {
  position:fixed; inset:0; width:min(480px, calc(100% - 24px));
  max-height:calc(100dvh - 24px); margin:auto; padding:0; overflow:auto;
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-overlay);
}
dialog.modal:not([open]) { display:none; }
dialog.modal[open] { display:block; }
dialog.modal::backdrop { background:rgb(0 0 0 / 68%); }
.modal .card {
  width:min(440px,94vw); background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:16px;
}
.modal h2 { margin:0; font-size:17px; text-align:center; }
.modal .section { display:flex; flex-direction:column; gap:7px; }
.modal .lbl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.modal .note { font-size:12px; color:var(--muted); line-height:1.55; background:var(--bg);
               border:1px solid var(--border); border-radius:8px; padding:10px; }
.modal .note b { color:#c7cdd9; }
.chips { display:flex; gap:7px; }
.chip { flex:1; padding:9px 0; border-radius:8px; background:var(--bg); border:1px solid var(--border); }
.chip.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:2px; }

.aviso {
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--muted); background:rgba(10,12,16,.75); pointer-events:none;
}

.focusbar .pedir {
  font-size:11px; padding:4px 7px; border-radius:6px;
  background:rgba(0,0,0,.5); color:#fff; border:1px solid rgba(255,255,255,.25);
}

.aviso-sala {
  font-size:12px; line-height:1.5; color:#fbbf24;
  background:#2a2010; border:1px solid #4a3a15; border-radius:8px; padding:9px 11px;
}
.roomrow .sem-senha {
  font-size:10px; padding:2px 7px; border-radius:5px;
  background:#3a2a10; color:#fbbf24; border:1px solid #5a4520;
}

.link-priv {
  font-size:12px; color:var(--muted); text-decoration:none; text-align:center;
  border-top:1px solid var(--border); padding-top:12px; margin-top:2px;
}
.link-priv:hover { color:var(--accent); text-decoration:underline; }
#privModal .card { width:min(520px,94vw); max-height:88vh; overflow:auto; }
#privModal .note b { color:#c7cdd9; }

.aviso-sala.nivel-aberto { color:#fbbf24; background:#2a2010; border-color:#4a3a15; }
.aviso-sala.nivel-fraco  { color:#fca5a5; background:#2a1616; border-color:#5b2626; }
.aviso-sala.nivel-ok     { color:var(--live); background:var(--success-bg); border-color:#20402f; }

/* ---------------- painel de convites / membros ---------------- */
.card.painel { width:min(600px,95vw); max-height:90vh; overflow:auto; }
.abas { display:flex; gap:6px; border-bottom:1px solid var(--border); padding-bottom:10px; }
.aba {
  font-size:13px; padding:6px 14px; border-radius:7px;
  background:transparent; border:1px solid transparent; color:var(--muted);
}
.aba.on { background:var(--surface); border-color:var(--border); color:var(--text); }

.lista { display:flex; flex-direction:column; gap:6px; max-height:260px; overflow:auto; }
.lista .vazio { font-size:13px; color:var(--muted); padding:14px; text-align:center; }
.lista .item {
  display:flex; align-items:center; gap:10px; padding:9px 11px;
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
}
.lista .item.inativo { opacity:.5; }
.lista .info { flex:1; min-width:0; }
.lista .titulo { font-size:13px; font-weight:600; }
.lista .sub { font-size:11px; color:var(--muted); margin-top:2px;
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lista .item button { font-size:11px; padding:4px 10px; flex:none; }

.link-novo {
  background:#0f2318; border:1px solid #1e4630; border-radius:8px; padding:11px;
  display:flex; flex-direction:column; gap:6px;
}
.link-novo input { width:100%; font-family:ui-monospace,Consolas,monospace; font-size:11px; }
.note-min { font-size:11px; color:var(--muted); line-height:1.5; margin-top:7px; }
.note-min b { color:#c7cdd9; }


/* ================= lobby ================= */
.lobby .card { gap:18px; }
.lobby-topo { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.lobby-topo h1 { margin:0; font-size:24px; letter-spacing:-.01em; }
/* Símbolo e nome andam juntos e na mesma cor: o SVG usa currentColor, então
   recolorir a marca é mudar a cor do h1 - não há uma segunda cor para esquecer
   de atualizar. O tamanho vem de 1em, então ele acompanha a tipografia
   sozinho em qualquer breakpoint. */
.marca-titulo { display:flex; align-items:center; gap:.4em; }
.simbolo { width:1em; height:1em; flex:none; display:block; }
.tagline { margin:0; font-size:13px; color:var(--muted); line-height:1.55; max-width:44ch; }
.nowrap { white-space:nowrap; }

.campo { display:flex; flex-direction:column; gap:6px; }
.campo-rotulo { font-size:12px; color:var(--muted); }
.campo input, .campo select { width:100%; }
.opcional { font-size:11px; color:#5f6674; }
.dica { font-size:11px; color:#6b7280; line-height:1.5; }

/* abas */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); }
.tab {
  flex:1; padding:10px 14px; font-size:13px; font-weight:500;
  background:transparent; border:none; border-bottom:2px solid transparent;
  border-radius:7px 7px 0 0; color:var(--muted);
}
.tab:hover:not(.on) { background:#1a1e26; color:var(--text); }
.tab.on { color:var(--text); border-bottom-color:var(--accent); background:transparent; }
.tab-painel { display:flex; flex-direction:column; gap:14px; }

/* ---- opções da sala: divulgação progressiva ----
   Quem só quer chamar um amigo vê dois campos e um botão. Tudo que já tem um
   padrão bom mora aqui dentro, fechado. O resumo na própria linha existe para
   que "fechado" não signifique "escondido": o estado atual continua legível
   sem abrir nada. */
.opcoes { border:1px solid var(--border); border-radius:9px; background:#12151c; }
.opcoes > summary {
  list-style:none; cursor:pointer; padding:10px 12px; border-radius:9px;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:13px;
}
.opcoes > summary::-webkit-details-marker { display:none; }
.opcoes > summary::before { content:"▸"; color:var(--muted); font-size:10px; }
.opcoes[open] > summary::before { content:"▾"; }
.opcoes > summary:hover { background:#171a21; }
.opcoes-titulo { color:var(--text); }
.opcoes-resumo { color:var(--muted); font-size:12px; margin-left:auto; }
/* aberto, o resumo vira ruído: os próprios campos já dizem tudo */
.opcoes[open] .opcoes-resumo { display:none; }
.opcoes-corpo {
  display:flex; flex-direction:column; gap:13px;
  padding:13px 12px; border-top:1px solid var(--border);
}

.vazio-salas { text-align:center; padding:22px 12px; color:var(--muted); }
.vazio-salas p { margin:0 0 6px; font-size:13px; }
.vazio-salas p:last-child { margin:0; }

button.grande { padding:11px 20px; font-weight:600; width:100%; }

/* bloco do dono: aparece so no primeiro acesso */
.dono {
  border:1px solid #3a3520; border-radius:9px; background:#1c1a12; padding:13px;
  display:flex; flex-direction:column; gap:4px;
}
.dono-topo { font-size:11px; font-weight:600; color:#fbbf24;
             text-transform:uppercase; letter-spacing:.05em; }
.dono code { background:var(--bg); padding:1px 5px; border-radius:4px;
             font-family:ui-monospace,Consolas,monospace; font-size:11px; }
.note-min { font-size:12px; color:var(--muted); line-height:1.55; margin:0 0 4px; }
.note-min b { color:#c7cdd9; }

/* foco de teclado visivel em tudo */
button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, a:focus-visible, .roomrow:focus-visible, .tab:focus-visible {
  /* 2px em vez de 3, e encostado em vez de 3px afastado: o anel continua
     obvio, mas para de invadir o texto vizinho. */
  outline:2px solid var(--focus); outline-offset:2px;
}
input:focus, select:focus { border-color:var(--control-border); }

/* ================================================================ lobby estreito */
/* O objetivo aqui e o botao de acao caber na tela SEM rolagem. Numa tela de
   360x780 o formulario passava de 900px de altura: a pessoa preenchia tudo e
   precisava rolar para achar "Criar sala", o que parece que o botao sumiu.
   Todo o ganho vem de apertar espacamento e texto auxiliar - nada e removido. */
@media (max-width:560px) {
  .lobby { padding:10px; align-items:flex-start; }
  .lobby .card { padding:16px; gap:11px; width:100%; }

  /* marca menor: ela ja cumpriu o papel quando a pessoa chegou */
  .lobby-topo { gap:5px; }
  .lobby-topo h1 { font-size:20px; }
  .tagline { font-size:12px; line-height:1.4; }
  /* a segunda frase e util no desktop e supérflua num celular apertado */
  .tagline .nowrap { display:none; }

  .campo { gap:4px; }
  .campo-rotulo { font-size:11px; }
  .tab-painel { gap:10px; }
  .opcoes > summary { padding:8px 10px; font-size:12px; }
  .opcoes-resumo { font-size:11px; width:100%; margin-left:0; }
  .opcoes-corpo { gap:10px; padding:10px; }
  .tab { padding:9px 4px; font-size:13px; }

  /* as opcoes de sala eram o bloco mais alto do formulario */
  .tipo-sala .opt { padding:7px 9px; gap:7px; }
  .tipo-sala .opt-txt b { font-size:12px; }
  .tipo-sala .opt-txt small { font-size:10px; line-height:1.35; }

  .dica { font-size:10px; line-height:1.4; }
  .aviso-sala { font-size:11px; padding:7px 9px; }
  button.grande { padding:12px 20px; }

  /* 16px no campo de texto evita o zoom automatico do iOS ao focar */
  .lobby input, .lobby select { font-size:16px; padding:9px 10px; }

  .link-priv { font-size:11px; }

  /* A caixa verde repete PALAVRA POR PALAVRA o texto do radio logo acima
     ("não aparece na lista, só entra quem receber o link"). No desktop ela e
     confirmacao ao vivo enquanto a pessoa digita a senha; aqui e so altura
     desperdicada. Some quando esta tudo certo - os AVISOS continuam. */
  .aviso-sala.nivel-ok { display:none; }
  /* a explicacao do limite de 4 e boa, mas nao vale rolagem numa tela desta */
  #inpRoomMax + .dica { display:none; }

  /* ---- convite ---- */
  /* Quem chega por link ve so isto, entao pode respirar mais que o formulario. */
  .convite { padding:14px 12px; gap:8px; }
  .convite-sala { font-size:16px; }
}

/* ---- telas muito baixas (celular deitado) ---- */
/* Aqui o problema nao e largura, e ALTURA: 380px de altura com um formulario
   de 600 vira rolagem pura. Corta o que e decorativo. */
@media (max-height:520px) {
  .lobby { align-items:flex-start; padding:8px; }
  .lobby .card { gap:9px; padding:14px; }
  .lobby-topo h1 { font-size:17px; }
  .tagline { display:none; }
  .tipo-sala .opt-txt small { display:none; }
  .dica { display:none; }
}

@media (max-width:520px) { .row { flex-direction:column; } }

/* ================= sala: cabecalho ================= */
header { gap:14px; align-items:center; }
.sala-info { display:flex; flex-direction:column; gap:3px; min-width:0; margin-right:auto; }
.sala-nome { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; }
.sala-estado { font-size:12px; color:var(--muted); white-space:nowrap;
               overflow:hidden; text-overflow:ellipsis; max-width:52ch; }

.acoes { display:flex; align-items:center; gap:8px; }
.acoes-menores { display:flex; align-items:center; gap:2px; }

/* botoes secundarios: presentes, sem competir com a acao principal */
button.quieto {
  background:transparent; border-color:transparent; color:var(--muted); font-size:12px;
}
button.quieto:hover:not(:disabled) { background:var(--surface); color:var(--text); }
button.icone { padding:5px 9px; line-height:1; }
button.parar { background:transparent; border-color:#5b2626; color:#f87171; }
button.parar:hover { background:#2a1616; }

/* ================= sala: conversa ================= */
.side { width:300px; }
.side-topo {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px 10px 16px; font-size:12px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border);
}
.msgs { gap:2px; padding:14px; }
.msg { font-size:14px; line-height:1.5; display:flex; flex-direction:column; gap:3px; }
.msg + .msg { margin-top:8px; }
.msg.seguida { margin-top:2px; }
.msg .who { font-size:12px; font-weight:600; }
.msg .balao {
  background:#1c2029; border-radius:4px 12px 12px 12px; padding:7px 11px;
  align-self:flex-start; max-width:92%; word-break:break-word;
}
.msg.minha { align-items:flex-end; }

.msg.minha .balao { background:#1e3a2c; border-radius:12px 4px 12px 12px; align-self:flex-end; }
.msg.sys {
  color:var(--muted); font-size:12px; font-style:normal; text-align:center;
  padding:5px 0; margin-top:8px;
}
.chatbox { padding:12px; gap:8px; }
.chatbox input { font-size:14px; padding:9px 12px; border-radius:9px; }

.abrir-chat {
  position:fixed; right:16px; bottom:52px; z-index:20;
  width:42px; height:42px; border-radius:50%; font-size:17px;
  background:var(--panel); border:1px solid var(--border);
}
.abrir-chat:hover { background:var(--surface); }

/* ================= modal: presets ================= */
.presets { display:flex; gap:8px; }
.preset {
  flex:1; display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  padding:11px; border-radius:9px; background:var(--bg); border:1px solid var(--border);
  text-align:left;
}
.preset:hover:not(.on) { border-color:var(--control-border); }
.preset.on { border-color:var(--accent); background:var(--selected); }
.preset-nome { font-size:13px; font-weight:600; color:var(--text); }
.preset-det { font-size:11px; color:#8b93a3; font-variant-numeric:tabular-nums; }
.preset-uso { font-size:11px; color:#6b7280; line-height:1.4; }
.modal .dica { display:block; margin-top:5px; }
.modal .dica b { color:#c7cdd9; }

@media (max-width:900px) {
  .side { width:260px; }
  .sala-estado { max-width:30ch; }
}
/* ================================================================ estreito */
/* Regra que organiza tudo abaixo: a TRANSMISSAO e o que a pessoa veio ver.
   Tudo o mais - cabecalho, faixa de participantes, conversa - cede espaco.
   Antes o chat ocupava 45vh fixos e o video ficava com as sobras.

   O corte e 900px, nao 720: um tablet em retrato tem 768 e em paisagem 1024,
   e nos dois a conversa fixa na lateral comia um terco da tela. Acima de 900
   sobra espaco para os dois lado a lado. */
@media (max-width:900px) {
  /* ---- cabecalho compacto ---- */
  /* Ele quebrava em quatro linhas e comia um terco da tela. Agora: nome e
     estado numa linha so, com reticencias, e os botoes em linha unica. */
  header { gap:6px 8px; padding:7px 10px; }
  .sala-nome { font-size:14px; }
  .sala-nome #roomTitle { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:34vw; }
  .sala-estado { font-size:11px; max-width:none; }
  .selo { font-size:9px; padding:1px 5px; }
  .acoes button, .acoes-menores button { font-size:12px; padding:6px 10px; }
  .acoes-menores { order:3; margin-left:auto; }

  /* ---- o video manda ---- */
  .body { flex-direction:column; position:relative; }
  .stage { flex:1; min-height:0; padding:6px; gap:6px; }

  /* faixa menor: ela existe para trocar de transmissao, nao para ocupar tela */
  .strip { height:74px; gap:6px; }
  .tile { flex:0 0 118px; }
  .tile .avatar { width:34px; height:34px; font-size:15px; }
  .tile .nome { font-size:10px; left:5px; bottom:4px; max-width:calc(100% - 54px); }
  .tile .badge { font-size:9px; right:5px; bottom:4px; padding:2px 5px; }

  /* ---- conversa recolhida ---- */
  /* Fica fixa no rodape mostrando SO a caixa de escrever, como num aplicativo
     de mensagem. Nao empurra o video: flutua sobre a borda de baixo dele. */
  .side {
    position:absolute; left:0; right:0; bottom:0; z-index:12;
    width:auto; height:auto; flex:none;
    border-left:none; border-top:1px solid var(--border);
    background:var(--panel);
    transition:transform .18s ease;
  }
  .side .msgs {
    height:0; padding:0 12px; opacity:0; overflow:hidden;
    transition:height .18s ease, opacity .18s ease, padding .18s ease;
  }
  .side-topo { cursor:pointer; padding:5px 12px; font-size:10px; }
  .side-topo #btnFecharChat { display:none; }

  /* aberta: ocupa metade da tela por cima do video, e volta a sumir depois */
  .side.aberta .msgs { height:44vh; padding:10px 12px; opacity:1; }
  .side.aberta .side-topo #btnFecharChat { display:inline-flex; }

  .chatbox { padding:8px 10px; gap:6px; }
  .chatbox input { font-size:16px; }   /* 16px evita o zoom automatico do iOS */

  /* Espaco reservado para a barra da conversa. O valor vem de medicao, nao de
     chute: cabecalho da conversa + caixa de escrever dao ~90px. Reservar menos
     fazia a barra cobrir a faixa de participantes. */
  .stage { padding-bottom:96px; }

  /* O registro tecnico e ferramenta de quem desenvolve. Numa tela de celular ele
     empurrava a barra da conversa para cima do rodape - alem de ser ruido para
     quem so quer assistir. */
  .drawer { display:none; }

  /* aviso de mensagem nova enquanto esta recolhida */
  .conta-novas { display:none; }
  .side.tem-novas .conta-novas {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:17px; height:17px; padding:0 5px; margin-left:6px;
    border-radius:999px; background:var(--accent); color:var(--on-accent);
    font-size:10px; font-weight:600;
  }

  .presets { flex-direction:column; }
  .preset { flex-direction:row; align-items:baseline; gap:8px; }

  /* painel de estatisticas menor, senao cobre o video inteiro */
  .nerd { font-size:10px; padding:8px 9px; max-width:calc(100% - 16px); }

  /* ---- controles tocaveis ---- */
  /* Os botoes eram dimensionados para ponteiro de mouse: 18px de icone com 5px
     de folga da um alvo de ~28px, abaixo dos 44px que se recomenda para o dedo.
     No celular isso vira "o botao nao funciona" quando na verdade e mira. */
  .focusbar { padding:26px 8px 10px; gap:6px; flex-wrap:wrap; }
  .focusbar .ctrl { padding:10px; }
  .focusbar .ctrl svg { width:22px; height:22px; }
  .focusbar .ctrl.lapis { font-size:19px; }
  .focusbar .ctrl.nerd-btn { font-size:17px; }
  .focusbar .ctrl.parar, .focusbar .ctrl.limpar { font-size:12px; padding:9px 11px; }
  /* O slider some no celular, mas o BOTAO de mudo fica: e o controle que a
     pessoa mais usa, e o volume do aparelho nao silencia so esta transmissao. */
  .focusbar .vol { display:none; }
  .focusbar .som { font-size:17px; }
  .focusbar .quem { font-size:11px; }
  .focusbar .stat { display:none; }

  /* no toque nao ha hover: o realce vira o estado de pressionado */
  .ctrl:hover { background:transparent; }
  .ctrl:active { background:rgba(255,255,255,.24); }
}

/* ---- telas bem estreitas (celular em pe) ---- */
@media (max-width:420px) {
  .acoes button { font-size:12px; padding:6px 9px; }
  .sala-estado { display:none; }          /* o essencial ja esta nos selos */
  .strip { height:62px; }
  .tile { flex:0 0 98px; }
  .side.aberta .msgs { height:38vh; }
}

/* tipo de sala: privada (padrao) ou publica */
.tipo-sala { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.tipo-sala legend { padding:0; margin-bottom:2px; }
.tipo-sala .opt {
  display:flex; align-items:flex-start; gap:9px; padding:9px 11px; cursor:pointer;
  background:var(--bg); border:1px solid var(--border); border-radius:9px;
}
.tipo-sala .opt:has(input:checked) { border-color:var(--accent); background:var(--selected); }
/* O radio herdava '.lobby input { width:100% }' (linha 49): inchava, empurrava
   o texto para fora da caixa e ele quebrava letra a letra. Precisa desfazer as
   tres coisas - largura, preenchimento e moldura - que valem para campos de
   texto e nao para um botao de radio. */
.tipo-sala .opt input[type="radio"] {
  width:auto; min-width:0; flex:0 0 auto; margin:1px 0 0;
  padding:0; background:none; border:0; border-radius:0;
  accent-color:var(--accent); cursor:pointer;
}
/* min-width:0 deixa o texto quebrar por palavra dentro do flex, nao estourar */
.tipo-sala .opt-txt { flex:1 1 auto; min-width:0; }
.tipo-sala .opt-txt { display:flex; flex-direction:column; gap:2px; }
.tipo-sala .opt-txt b { font-size:13px; font-weight:600; }
.tipo-sala .opt-txt small { font-size:11px; color:var(--muted); line-height:1.45; }

/* selos ao lado do nome da sala: dizem o tipo e se voce e o dono */
.selo {
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 7px; border-radius:999px; background:var(--surface); color:var(--muted);
  border:1px solid var(--border); white-space:nowrap;
}
.selo.dono { background:#13291f; color:#7dd3a8; border-color:#1f4433; }
.selo.modo { background:#1b1f2e; color:#9db4f0; border-color:#2b3550; }

/* Era um style= inline. Movido para ca por causa da CSP: sem atributo style no
   markup, a politica pode usar style-src 'self' sem 'unsafe-inline'. */
.diag { margin-left:10px; font-size:11px; padding:3px 9px; }

/* Paleta dos avatares. Estava no JS e era aplicada por style.background, que a
   CSP bloqueia como estilo inline. Aqui vira classe e a politica segue estrita. */
.cor-0 { background:#5865f2; }
.cor-1 { background:#3ba55d; }
.cor-2 { background:#faa81a; }
.cor-3 { background:#ed4245; }
.cor-4 { background:#eb459e; }
.cor-5 { background:#9b59b6; }
.cor-6 { background:#1abc9c; }

/* Era style= dentro de um template de innerHTML no app.js. A CSP trata atributo
   style como estilo inline e bloqueia, mesmo vindo de innerHTML. */
.focusbar .ctrl.parar { font-size:12px; padding:5px 10px; }

/* ---------------------------------------------------------------- desenho */
/* A tela cobre a area de video inteira, mas so recebe clique quando o lapis
   esta ligado - senao ela roubaria os cliques dos controles e do proprio video. */
.tela-desenho {
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  pointer-events:none; touch-action:none;
}
.tela-desenho.ativa { pointer-events:auto; cursor:crosshair; }
.focusbar .ctrl.lapis { font-size:15px; line-height:1; }
.focusbar .ctrl.on { background:var(--accent); color:var(--on-accent); }
.focusbar .ctrl.limpar { font-size:12px; padding:5px 10px; }

/* ---------------------------------------------------------------- convite */
/* Quem chega por link nao escolhe aba: veio para UMA sala. */
.convite {
  display:flex; flex-direction:column; gap:10px; text-align:center;
  padding:16px; border-radius:12px;
  background:var(--selected); border:1px solid var(--border);
}
.convite-rotulo { font-size:12px; color:var(--muted); }
.convite-sala {
  font-size:18px; font-weight:600; word-break:break-word;
  padding-bottom:4px;
}
.convite-ignorar { font-size:12px; }

/* botao de remover alguem da sala: so o dono ve */
.member { display:inline-flex; align-items:center; gap:5px; }

/* ---------------------------------------------------------------- nerd */
/* Painel de estatisticas. z-index abaixo da barra de controles (3) e acima do
   video e do desenho, e sem pointer-events para nao roubar clique nenhum. */
.nerd {
  position:absolute; top:10px; left:10px; z-index:2; pointer-events:none;
  max-width:min(340px, calc(100% - 20px)); max-height:calc(100% - 70px); overflow:hidden;
  padding:10px 12px; border-radius:9px;
  background:rgba(10,12,16,.82); backdrop-filter:blur(6px);
  border:1px solid var(--border);
  font:11px/1.5 ui-monospace, Consolas, monospace; color:#c7cdd9;
}
.nerd-linha { display:flex; justify-content:space-between; gap:14px; }
.nerd-linha span:last-child { color:#fff; white-space:nowrap; }
.nerd-linha.titulo {
  color:var(--muted); font-size:10px; letter-spacing:.06em;
  margin-top:6px; padding-top:5px; border-top:1px solid #232a36;
}
.nerd-linha.titulo:first-child { margin-top:0; padding-top:0; border-top:0; }
.focusbar .ctrl.nerd-btn { font-size:13px; }

/* Cor do NOME no chat: mesma paleta do avatar e do traço, para a pessoa ser
   reconhecível pelos três ao mesmo tempo. As classes .cor-N pintam fundo
   (avatar); estas pintam texto. */
.cor-txt-0 { color:#8b95f5; }
.cor-txt-1 { color:#5fc182; }
.cor-txt-2 { color:#fbbc4d; }
.cor-txt-3 { color:#f2686b; }
.cor-txt-4 { color:#f06fb6; }
.cor-txt-5 { color:#b378cf; }
.cor-txt-6 { color:#45cfb4; }

/* tirar um espectador da PRÓPRIA transmissão — só quem transmite vê */
#cfgModal .card { max-height:88vh; overflow:auto; }

/* ================================================================ imersivo */
/* Celular deitado assistindo: o vídeo toma tudo e o resto sai da frente.
   Isto é CSS puro de propósito — não depende da API de tela cheia, que exige
   gesto do usuário e recusa ser chamada num evento de rotação. Quando a tela
   cheia de verdade funciona, ela entra POR CIMA disto; quando não, o resultado
   visual é praticamente o mesmo. */
body.imersivo header,
body.imersivo .strip,
body.imersivo .drawer { display:none; }

body.imersivo .stage { padding:0; gap:0; }
body.imersivo .focus { border-radius:0; border:0; }

/* a conversa vira só um botão flutuante: continua alcançável, sai do caminho */
body.imersivo .side {
  left:auto; right:8px; bottom:8px; width:auto;
  background:transparent; border:0;
}
body.imersivo .side .side-topo {
  background:rgba(10,12,16,.8); border:1px solid var(--border);
  border-radius:999px; padding:7px 12px;
}
body.imersivo .side .chatbox { display:none; }
body.imersivo .side.aberta {
  left:0; right:0; bottom:0; background:var(--panel); border-top:1px solid var(--border);
}
body.imersivo .side.aberta .side-topo { border-radius:0; border:0; background:transparent; }
body.imersivo .side.aberta .chatbox { display:flex; }

/* a barra de controles sobe um pouco, para o dedo não esbarrar na borda */
body.imersivo .focusbar { padding-bottom:14px; }

/* ações no tile: remover da sala (×) e tirar da transmissão (⏏) */
/* Ficam num canto próprio e param o clique de subir, senão remover alguém
   também trocaria o foco para a transmissão dela. */
.tile-acoes {
  position:absolute; top:6px; right:6px; z-index:3;
  display:flex; gap:4px; opacity:0; transition:opacity .15s ease;
}
.tile:hover .tile-acoes, .tile:focus-within .tile-acoes { opacity:1; }
.tacao {
  width:24px; height:24px; padding:0; line-height:1; font-size:13px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:6px;
  background:rgba(10,12,16,.82); color:#fff;
}
/* Cor PERMANENTE, não só no hover. Cinzas e idênticos, os dois só se
   distinguiam pelo tooltip, que aparece meio segundo depois de o ponteiro
   parar - tempo em que a pessoa já clicou. Verde mexe na transmissão,
   vermelho tira da sala: dá para acertar sem ler nada. */
.tacao.tirar { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.tacao.expulsar { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, transparent); }
.tacao.tirar:hover { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.tacao.expulsar:hover { background:var(--danger); border-color:var(--danger); color:#2a0d14; }
/* em tela de toque não há hover: os botões ficam sempre visíveis */
@media (hover: none) {
  .tile-acoes { opacity:1; }
  .tacao { width:28px; height:28px; }
}

/* ---------------------------------------------------------------- escolhas */
/* Presets do modal: dois grupos, mesma aparência, montados das mesmas tabelas
   que a escada de qualidade usa. */
.escolhas { display:flex; gap:7px; flex-wrap:wrap; }
.escolha {
  flex:1 1 108px; min-width:0; padding:9px 10px; text-align:left;
  display:flex; flex-direction:column; gap:2px;
  background:var(--bg); border:1px solid var(--border); border-radius:9px;
}
.escolha:hover { border-color:var(--control-border); }
.escolha.on { border-color:var(--accent); background:var(--selected); }
.escolha-nome { font-size:13px; font-weight:600; }
.escolha-uso { font-size:10px; color:var(--muted); }
/* O preço da escolha em pessoas. Fica mais forte que a dica porque é o dado que
   muda a decisão — "Alta" não diz que custa metade dos espectadores. */
.escolha-custo {
  font-size:10px; color:var(--accent); font-weight:600;
  margin-top:2px; line-height:1.3;
}
.escolha.on .escolha-custo { color:#cfe3ff; }

/* ---------------------------------------------------------------- menu ⚙ */
/* Vive dentro da barra de controles: aparece e some junto com ela, sem
   posicionamento próprio e sem ficar órfão por cima do vídeo. */
.menu {
  position:absolute; right:10px; bottom:52px; z-index:4;
  min-width:210px; padding:6px; border-radius:10px;
  background:rgba(14,17,23,.96); border:1px solid var(--border);
  backdrop-filter:blur(8px); display:flex; flex-direction:column; gap:2px;
}
.menu-linha {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:7px 9px; font-size:12px; color:#c7cdd9;
}
.menu-linha select { font-size:12px; padding:4px 6px; }
.menu-linha .vol { width:96px; }
.menu-item {
  text-align:left; padding:8px 9px; font-size:12px; border-radius:7px;
  background:transparent; border:0; color:#c7cdd9;
}
.menu-item:hover { background:rgba(255,255,255,.1); color:#fff; }
.ctrl.engrenagem.on { background:rgba(255,255,255,.18); }

@media (max-width:900px) {
  /* no toque o menu precisa caber e ter alvo grande */
  .menu { left:10px; right:10px; min-width:0; bottom:58px; }
  .menu-item, .menu-linha { padding:11px 10px; font-size:13px; }
  .menu-linha .vol { width:120px; }
  /* a barra volta a ser simples: nome, lápis, engrenagem, tela cheia */
  .focusbar .vol, .focusbar .pedir { display:revert; }
}

/* som na barra do vídeo: botão de mudo + slider, lado a lado */
.focusbar .som { font-size:15px; line-height:1; }
.focusbar .som.mudo { color:#f2686b; }
.focusbar .vol { width:76px; }

/* Sistema visual e acessibilidade: aplicado também aos controles já existentes. */
button, input:not([type="radio"]):not([type="range"]), select {
  min-height:40px; font-size:var(--text-sm); border-radius:var(--radius-sm);
}
input:not([type="radio"]):not([type="range"]), select {
  background:var(--surface); border-color:var(--control-border);
}
input::placeholder { color:var(--muted); opacity:1; }
button.primary { color:var(--on-accent); font-weight:700; }
button.primary:hover:not(:disabled) { background:var(--accent-hover); border-color:var(--accent-hover); }
button:disabled { opacity:.6; }
:where(button, a, input, select, summary, [tabindex]):focus-visible {
  outline:2px solid var(--focus); outline-offset:2px;
}
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.dica, .opcional, .preset-uso { color:var(--muted); }
.err { color:var(--danger); font-size:var(--text-sm); }
button.parar, button.danger { color:var(--danger); border-color:var(--danger); }
button.parar:hover, button.danger:hover { background:var(--danger-bg); }
.aviso-sala.nivel-fraco { color:var(--danger); background:var(--danger-bg); }
.aviso-sala.nivel-ok { color:var(--live); background:var(--success-bg); }
.aviso-sala.nivel-aberto { color:var(--warn); background:var(--warn-bg); }
.roomrow.sel, .escolha.on, .preset.on, .tipo-sala .opt:has(input:checked) {
  background:var(--selected); border-color:var(--accent);
}
.escolha.on .escolha-custo { color:var(--accent); }
.tile .badge { background:var(--success-bg); color:var(--live); }
.tile .badge.assistindo, .chip.on, .focusbar .ctrl.on, .side.tem-novas .conta-novas {
  background:var(--accent); color:var(--on-accent);
}
.tile .badge.mudo { background:var(--surface); color:var(--muted); }
.tile .badge.cheio { background:var(--warn-bg); color:var(--warn); }
.tacao.tirar:hover { color:var(--on-accent); }
.tile.offline, .tile.lotado { opacity:1; }
.tile-assistir {
  position:absolute; inset:0; z-index:1; padding:0; border:0;
  background:transparent; border-radius:inherit;
}
.tile-assistir:hover:not(:disabled) { background:rgb(255 255 255 / 5%); }
.tile-assistir:focus-visible, .focus.grade video:focus-visible { outline-offset:-4px; }
.tile .nome, .tile .badge, .tile .avatar { pointer-events:none; }
/* Nome à esquerda, estado à direita, os dois na mesma linha rente ao fundo.
   Empilhados um sobre o outro eles ocupavam um terço da altura do tile e
   competiam pela leitura; lado a lado cada um tem o seu canto e a foto volta a
   ser a coisa maior. */
.tile .nome { left:8px; right:auto; bottom:6px; max-width:calc(100% - 106px); }
.tile .badge { left:auto; right:8px; bottom:6px; }
.tile .avatar { margin-bottom:16px; }
.focus:focus-within .focusbar, .player:focus-within .controls { opacity:1; pointer-events:auto; }
.roomrow { width:100%; text-align:left; }
.roomrow .nm { min-width:0; overflow-wrap:anywhere; }
.roomrow .ct { flex-shrink:0; }

.lobby { background:var(--bg); }
.lobby .card {
  width:min(560px,100%); padding:var(--space-8); gap:var(--space-6);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-panel);
  margin-block:auto;
}
.lobby-topo { padding:0 0 20px; background:transparent; }
.lobby-topo h1 { font-size:var(--text-title); letter-spacing:-.03em; }
.lobby p, .modal .note, .modal .dica { font-size:var(--text-sm); line-height:1.55; }
.lobby .campo-rotulo, .modal .campo-rotulo, .modal .lbl { font-size:var(--text-sm); color:var(--text); }
.lobby .convite {
  padding:20px; gap:12px; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-inline-start:4px solid var(--accent);
}
.lobby .convite-sala {
  color:var(--text); font-size:var(--text-lg); text-transform:none;
  letter-spacing:normal; overflow-wrap:anywhere;
}
#acoesConvite { display:flex; flex-direction:column; gap:8px; }
.lobby input:not([type="radio"]), .lobby select { font-size:var(--text-base); min-height:44px; }
.lobby .nowrap { white-space:normal; }
.lobby .dica, .tipo-sala .opt-txt small { font-size:var(--text-xs); }
.modal .escolha-uso, .modal .escolha-custo { font-size:var(--text-xs); }
dialog.modal .card, #cfgModal .card, #privModal .card {
  width:100%; max-height:none; margin:0; border:0; overflow:visible;
}
dialog.modal .modal-actions {
  position:sticky; bottom:0; padding-block:12px; background:var(--panel);
  flex-wrap:wrap; z-index:1;
}
.chatbox input { min-width:0; }
.side-topo { padding:4px 12px; }
#btnAlternarConversa { display:flex; align-items:center; gap:8px; text-align:left; }
#novasChatOculto {
  position:absolute; top:-5px; right:-5px; min-width:22px; padding:3px;
  border-radius:999px; background:var(--accent); color:var(--on-accent); font-size:12px;
}
.msgs:empty::before {
  content:"A conversa começa aqui. Envie uma mensagem para a sala.";
  color:var(--muted); font-size:var(--text-sm); line-height:1.5;
}

button, .roomrow, .escolha {
  transition:background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
button:active:not(:disabled) { filter:brightness(.92); }
@media (pointer:coarse) {
  button, input:not([type="radio"]):not([type="range"]), select { min-height:44px; }
  button.icone, .focusbar .ctrl, .tacao { min-width:44px; min-height:44px; }
  .tile-acoes { top:2px; right:2px; gap:2px; }
  .tile { flex-basis:150px; }
  .strip { height:96px; }
}
@media (max-width:900px) {
  .body { overflow:hidden; }
  .side { position:static; width:100%; flex:0 0 auto; padding-bottom:env(safe-area-inset-bottom); }
  .side .msgs { flex:none; }
  .side.aberta .msgs { height:min(24dvh,220px); overflow-y:auto; }
  .side:not(.aberta) .chatbox, .side:not(.aberta) .members { display:none; }
  body:not(.imersivo) .side .members { display:none; }
  .stage { padding-bottom:6px; overflow:auto; }
  .strip { flex-shrink:0; height:108px; }
  .tile { flex-basis:168px; }
  .tile .nome { font-size:12px; }
  .tile .badge { font-size:10px; }
  .drawer { display:block; flex-shrink:0; }
  .side-topo { padding:2px 10px; }
  .side-topo #btnFecharChat { display:inline-flex; }
  body.imersivo .side { position:absolute; }
  body.imersivo .stage { overflow:hidden; }
  body.imersivo .side:not(.aberta) .members { display:none; }
  body.imersivo .drawer { display:none; }
}
@media (max-width:600px) {
  .lobby { padding:16px; align-items:flex-start; }
  .lobby .card { padding:20px; gap:20px; }
  .lobby .tagline, .lobby .dica, .tipo-sala .opt-txt small { display:block; }
}
@media (max-width:600px) and (orientation:portrait) {
  body:not(.imersivo) .focus:not(.grade):not(:fullscreen) {
    flex:0 0 auto; width:100%; height:auto; min-height:200px; aspect-ratio:16 / 9;
  }
  .body:has(.side.aberta:not(.hidden)) .focus:not(.grade):not(:fullscreen) {
    min-height:120px; max-height:26dvh; flex:1 1 120px; aspect-ratio:auto;
  }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}