/* Comunidade Dotti. Tokens do DESIGN.md do site (tema escuro); disposição copiada do Gather. */
:root {
  color-scheme: dark;
  --void: #0f1012;
  --sup: #141619;
  --sup2: #1b1e22;
  --sup3: #24272c;
  --sup4: #2d3137;
  --linha: rgba(235, 238, 243, .105);
  --linha2: rgba(235, 238, 243, .19);
  --texto: #f7f8fa;
  --texto2: #bac0c8;
  --texto3: #a8afb8;
  --marca: #ff2020;
  --marca-2: #d60000;
  --marca-txt: #ff6868;
  --ok: #00c245;
  --ocupado: #f97316;
  --ausente: #f97316;
  --amarelo: #f3bf6b;
  --erro: #ff746a;
  --risco: #f0524a; /* o traço vermelho do microfone e da câmera desligados (o do Gather é #d03232) */
  --vidro: rgba(20, 22, 25, .9);
  --sombra: 0 10px 30px rgba(0, 0, 0, .45);
  --corpo: "Geist", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --mic-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M4 4l16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --som-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --icone-tela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4.5' width='18' height='12.5' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 20h8' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--void); color: var(--texto); font: 14px/1.5 var(--corpo); overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--marca-txt); outline-offset: 2px; }
kbd { font-family: var(--mono); font-size: 11px; padding: 1px 5px; border-radius: 4px; background: var(--sup4); color: var(--texto2); }

.btn-marca { background: var(--marca-2); color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 650; cursor: pointer; }
.btn-marca:hover { background: #b80000; }
.btn-marca:disabled { opacity: .6; cursor: progress; }
.btn-sec { background: var(--sup3); border: 1px solid var(--linha2); border-radius: 10px; padding: 8px 12px; font-weight: 550; cursor: pointer; }
.btn-sec:hover { background: var(--sup4); }
.icone { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 0; background: transparent; cursor: pointer; color: var(--texto2); }
.icone:hover { background: var(--sup3); color: var(--texto); }

.ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); display: inline-block; flex: none; }
.ponto-ocupado { background: var(--ocupado); }
.ponto-ausente { background: transparent; box-shadow: inset 0 0 0 2px var(--ausente); }
.rosto { image-rendering: pixelated; display: block; }

/* ---------- Entrada ---------- */
/* O recado do arranque da origem própria (F14, cliente/arranque.js): a página sem o jogo, no mesmo chão
   da entrada (o fundo quadriculado, o cartão), com o texto curto e, fora do site, o link para ele. */
.arranque-recado {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; overflow: auto;
  background-color: var(--void);
  background-image: linear-gradient(rgba(235, 238, 243, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(235, 238, 243, .035) 1px, transparent 1px);
  background-size: 32px 32px;
}
/* Com as duas classes: o .cartao (420 px) vem depois no arquivo e ganhava; o cartão do site tem 380 px (correção 3). */
.cartao.arranque-cartao { width: min(380px, 100%); justify-items: start; }
.arranque-cartao p { margin: 0; color: var(--texto2, #c4c8cf); line-height: 1.45; }
/* O único controle desta página: alvo de toque de 44 px no celular (F14, correção 1). */
.arranque-cartao .btn-sec { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; color: inherit; text-decoration: none; }
.entrada {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; overflow: auto;
  background-color: var(--void);
  background-image: linear-gradient(rgba(235, 238, 243, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(235, 238, 243, .035) 1px, transparent 1px);
  background-size: 32px 32px;
}
.cartao { width: min(420px, 100%); background: var(--sup); border: 1px solid var(--linha2); border-radius: 16px; padding: 28px; display: grid; gap: 14px; }
.cartao h1 { font-size: 1.35rem; font-weight: 650; letter-spacing: -.02em; margin: 0; }
.cartao-entrada { width: min(720px, 100%); grid-template-columns: 220px 1fr; gap: 28px; align-items: center; }
.entrada-avatar { display: grid; gap: 14px; justify-items: center; background: radial-gradient(circle at 50% 42%, #2b3d2b, #17201a 70%); border: 1px solid var(--linha); border-radius: 14px; padding: 22px 12px 16px; }
.entrada-avatar canvas { width: 160px; height: 240px; image-rendering: pixelated; }
.entrada-campos { display: grid; gap: 14px; }
/* A lista de servidores (antes do personagem). */
.cartao-servidores { width: min(760px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.lista-servidores { display: grid; gap: 14px; }
.servidores-secao { display: grid; gap: 8px; }
.servidores-secao .grupo-rot { margin: 0; }
.servidores-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.servidor-cartao { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--linha2); border-radius: 12px; background: var(--sup2); color: var(--texto); font: inherit; cursor: pointer; transition: border-color .12s, background .12s; min-width: 0; }
.servidor-cartao:hover, .servidor-cartao:focus-visible { border-color: var(--marca); background: var(--sup3); }
.servidor-cartao.central { padding: 16px 18px; background: linear-gradient(135deg, rgba(95, 77, 197, .22), var(--sup2) 60%); }
.servidor-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.servidor-nome { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.servidor-cartao.central .servidor-nome { font-size: 18px; }
/* O cartão de quem pode gerir (o dono e a equipe) leva o "Apagar" no canto: um botão AO LADO do cartão, por cima
   dele, e o cartão abre espaço à direita para o nome não passar por baixo. */
.servidor-item { position: relative; display: grid; min-width: 0; }
.servidor-item > .servidor-cartao { padding-right: 76px; }
.servidor-apagar { position: absolute; top: 8px; right: 8px; padding: 4px 9px; border: 1px solid rgba(255, 116, 106, .45); border-radius: 8px; background: var(--sup2); color: var(--erro); font: inherit; font-size: 12px; cursor: pointer; }
.servidor-apagar:hover, .servidor-apagar:focus-visible { background: var(--sup3); border-color: var(--erro); }
.servidor-explica { font-size: 13px; color: var(--texto2); }
.form-link { display: flex; gap: 6px; }
.form-link input { flex: 1; min-width: 0; background: var(--sup2); border: 1px solid var(--linha2); border-radius: 9px; color: var(--texto); padding: 9px 11px; font: inherit; }
.btn-criar-servidor { justify-self: start; }
.criar-servidor { display: grid; gap: 8px; padding-top: 4px; }
/* O servidor escolhido, em cima do personagem. */
.servidor-escolhido { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 8px; row-gap: 2px; padding: 10px 12px; border: 1px solid var(--linha2); border-radius: 12px; background: var(--sup2); }
.servidor-escolhido-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto3); }
/* Revisão final da Comunidade Dotti v2, rodada 2 (lente de design): os rótulos das telas de antes de entrar em caixa
   normal, como o site (eram COMUNIDADE DOTTI, SERVIDORES PÚBLICOS, MEUS SERVIDORES e SERVIDOR). O resto do escritório
   (o painel, a lista de pessoas) fica como é. */
#servidores .olho, .servidores-secao .grupo-rot, .servidor-escolhido-rot { text-transform: none; letter-spacing: .01em; }
#servidores .olho { font-family: inherit; font-size: 12.5px; font-weight: 600; }
.servidores-secao .grupo-rot { font-size: 12.5px; }
.servidor-escolhido strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.servidor-escolhido .detalhe { grid-column: 1 / -1; }
.link-btn { border: 0; background: none; color: var(--marca-txt); font: inherit; font-size: 13px; cursor: pointer; padding: 2px 4px; }
.link-btn:hover { text-decoration: underline; }
.olho { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--marca-txt); }
.sub { margin: 0; color: var(--texto2); }
.campo { display: grid; gap: 6px; font-weight: 550; }
.campo input { background: var(--sup2); border: 1px solid var(--linha2); border-radius: 9px; color: var(--texto); padding: 10px 12px; font: inherit; }
.dica { margin: 0; font-size: 12.5px; color: var(--texto3); }
.erro { margin: 0; color: var(--erro); font-size: 13px; }
/* Microfone, câmera e som antes de entrar (cliente/aparelhos.js): a prévia à esquerda, as
   escolhas à direita, e a barra verde do microfone embaixo do microfone. */
.aparelhos-entrada { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 10px 12px; padding: 12px; border: 1px solid var(--linha2); border-radius: 12px; background: var(--sup2); }
.aparelhos-previa { position: relative; width: 148px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0b0c0e; display: grid; place-items: center; align-self: start; }
/* Como num espelho, como em toda chamada (só a prévia; os outros veem do jeito certo). */
.aparelhos-previa video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.aparelhos-sem { font-size: 11.5px; color: var(--texto3); text-align: center; padding: 0 6px; }
.aparelhos-campos { display: grid; gap: 6px; min-width: 0; }
/* O rótulo em cima: o nome do aparelho ("Padrão do sistema (Microfone (Realtek...))") precisa
   da largura toda para ser lido. */
.campo-aparelho { display: grid; gap: 3px; font-size: 11.5px; color: var(--texto3); min-width: 0; }
.campo-aparelho select { min-width: 0; width: 100%; background: var(--sup); border: 1px solid var(--linha2); border-radius: 8px; color: var(--texto); padding: 5px 8px; font: inherit; font-size: 12.5px; }
.aparelhos-campos .nivel-entrada { flex: none; margin-bottom: 2px; }
.aparelhos-botoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.aparelhos-botoes .btn-sec { padding: 6px 10px; font-size: 12.5px; }
.aparelhos-entrada .dica { grid-column: 1 / -1; }
.aparelhos-entrada .dica:empty { display: none; }
@media (max-width: 640px) {
  .cartao-entrada { grid-template-columns: 1fr; }
  .aparelhos-entrada { grid-template-columns: 1fr; }
  .aparelhos-previa { width: 100%; max-width: 240px; }
}

/* ---------- Escritório ---------- */
.app { display: grid; grid-template-columns: 56px 300px minmax(0, 1fr); height: 100dvh; }
.app.sem-lateral { grid-template-columns: 56px 0 minmax(0, 1fr); }
.app.sem-lateral .lateral { display: none; }
/* Cada um na sua coluna: com a lateral escondida (display: none) o palco caía na coluna
   do meio, de largura 0, e o mapa sumia. */
.trilho { grid-column: 1; grid-row: 1; }
.lateral { grid-column: 2; grid-row: 1; }
.palco-jogo { grid-column: 3; grid-row: 1; }

.trilho { background: var(--sup); border-right: 1px solid var(--linha); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; }
.logo { width: 32px; height: 32px; border-radius: 9px; background: var(--marca); display: grid; place-items: center; font-weight: 700; color: #fff; margin-bottom: 10px; text-decoration: none; }
/* Com site para abrir, o "D" é o "Continuar no Dotti Studio". */
a.logo[href] { cursor: pointer; }
a.logo[href]:hover { background: var(--marca-2); }
.trilho-btn { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: var(--texto3); display: grid; place-items: center; cursor: pointer; }
.trilho-btn:hover { background: var(--sup3); color: var(--texto); }
.trilho-btn.ativo { background: var(--sup3); color: var(--texto); }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--marca-2); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }
.trilho-btn .badge { position: absolute; top: 1px; right: 0; border: 2px solid var(--sup); }

.lateral { background: var(--sup); border-right: 1px solid var(--linha); display: flex; min-width: 0; min-height: 0; }
.vista { display: flex; flex-direction: column; min-height: 0; width: 100%; }
.lateral-topo { padding: 16px 16px 10px; }
.lateral-topo h1 { font-size: 15px; margin: 0; font-weight: 650; letter-spacing: -.01em; }
.fase { font-size: 12px; color: var(--texto3); }
.busca { padding: 0 12px 8px; }
.busca input { width: 100%; background: var(--sup2); border: 1px solid var(--linha); border-radius: 9px; color: var(--texto); padding: 8px 10px; font: inherit; }
.lista { flex: 1; overflow-y: auto; padding: 0 8px 8px; min-height: 0; }
.grupo-rot { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--texto3); margin: 12px 8px 4px; }
.pessoas { list-style: none; margin: 0; padding: 0; }
.pessoa { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.pessoa:hover:not(:disabled) { background: var(--sup2); }
.pessoa:disabled { cursor: default; opacity: 1; }
.pessoa-face, .conversa-face { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--sup3); display: grid; place-items: center; flex: none; overflow: visible; }
.pessoa-face .rosto, .conversa-face .rosto { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; image-rendering: auto; }
.pessoa-face .ponto { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid var(--sup); }
.pessoa-texto, .conversa-texto { display: grid; min-width: 0; flex: 1; }
.pessoa-nome, .conversa-nome { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pessoa-estado, .conversa-previa { font-size: 12px; color: var(--texto3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pessoa-mao { font-size: 16px; }
.ajuda { margin: 0; padding: 10px 16px 14px; font-size: 12px; color: var(--texto3); border-top: 1px solid var(--linha); }
.vazio { color: var(--texto3); font-size: 13px; padding: 12px 8px; margin: 0; }

/* Chat */
.chat-lista, .chat-conversa { display: flex; flex-direction: column; min-height: 0; flex: 1; }
/* "Perto de você": o cabeçalho fixo da única conversa (rodada 1 da F8), no molde das outras abas. */
.chat-topo { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.chat-topo .conversa-face { width: 28px; height: 28px; font-size: 14px; }
.chat-topo h1 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversa { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.conversa:hover { background: var(--sup2); }
.conversa-perto { background: rgba(62, 201, 122, .14); font-size: 16px; }
.chat-cabeca { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 6px; border-bottom: 1px solid var(--linha); }
.chat-cabecalho { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-titulo-texto { display: grid; min-width: 0; }
.chat-titulo-texto strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-titulo-texto span { font-size: 12px; color: var(--texto3); }
.mensagens { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.msg { max-width: 92%; align-self: flex-start; margin-top: 8px; }
.msg.junta { margin-top: 0; }
.msg.minha { align-self: flex-end; text-align: right; }
.msg-cabeca { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--texto3); margin-bottom: 2px; }
.msg.minha .msg-cabeca { justify-content: flex-end; }
.msg-cabeca strong { color: var(--texto2); font-weight: 600; }
.msg-texto { margin: 0; display: inline-block; text-align: left; background: var(--sup3); padding: 7px 11px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.minha .msg-texto { background: #5c1a1a; }
.chat-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--linha); }
.chat-form input { flex: 1; min-width: 0; background: var(--sup2); border: 1px solid var(--linha2); border-radius: 10px; color: var(--texto); padding: 9px 11px; font: inherit; }
.chat-form .enviar { background: var(--marca-2); color: #fff; }
.chat-form .enviar:hover { background: #b80000; color: #fff; }

/* Palco do mapa. O fundo é o da grama (COR_DA_GRAMA em cliente/arte/mundo.js), o mesmo do
   Phaser: enquanto o mapa carrega, e na borda dele, não aparece outro verde. */
.palco-jogo { position: relative; overflow: hidden; background: #46644f; min-width: 0; container: palco / inline-size; }
.jogo { position: absolute; inset: 0; }
.jogo canvas { display: block; }

.cantinho { position: absolute; left: 12px; bottom: 14px; display: grid; gap: 6px; justify-items: start; pointer-events: none; }
.area-atual { display: flex; align-items: center; gap: 10px; background: var(--vidro); border: 1px solid var(--linha); border-radius: 12px; padding: 7px 12px 7px 10px; box-shadow: var(--sombra); max-width: 320px; pointer-events: none; }
.area-atual strong { display: block; font-size: 13px; }
/* F15, rodada 1: com o cartão de uma pessoa aberto, o aviso da área sai (a borda do cartão o cortava ao meio). */
body.com-cartao-pessoa .area-atual { visibility: hidden; }
.area-atual #area-tipo { display: block; font-size: 11.5px; color: var(--texto3); }
.area-icone { width: 10px; height: 10px; border-radius: 3px; background: var(--ok); flex: none; }
.area-atual.privada .area-icone { background: var(--amarelo); }
/* Sala de porta fechada (reunião particular na Praça) */
.area-atual.fechada { border-color: rgba(243, 191, 107, .45); }
.area-atual.fechada .area-icone { background: var(--marca); }
/* Botão da porta: só a equipe Dotti, dentro de uma sala da Praça. O cantinho não pega
   clique (é o mapa por baixo); o botão pega. */
.porta-da-sala { pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; background: var(--vidro); border: 1px solid var(--linha2); border-radius: 12px; padding: 7px 12px 7px 10px; box-shadow: var(--sombra); font-size: 13px; font-weight: 600; cursor: pointer; }
.porta-da-sala:hover { background: var(--sup3); }
.porta-da-sala .so-fechada { display: none; }
.porta-da-sala.fechada { border-color: rgba(243, 191, 107, .55); color: var(--amarelo); }
.porta-da-sala.fechada .so-aberta { display: none; }
.porta-da-sala.fechada .so-fechada { display: block; }

/* A plaquinha do status (Ocupado, Ausente), no canto do mapa, com o "Ficar Ativo". */
.status-aviso { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: min(360px, calc(100cqw - 24px)); background: var(--vidro); border: 1px solid rgba(249, 115, 22, .5); border-radius: 12px; padding: 7px 8px 7px 12px; box-shadow: var(--sombra); }
.status-aviso-texto { display: grid; min-width: 0; }
.status-aviso-texto strong { font-size: 13px; color: var(--ocupado); }
.status-aviso-texto span { font-size: 11.5px; color: var(--texto3); }
.status-aviso .btn-sec { padding: 5px 10px; font-size: 12px; flex: none; }

.medicao { display: flex; gap: 10px; font: 11px var(--mono); color: var(--texto3); background: rgba(15, 16, 18, .7); border-radius: 8px; padding: 5px 9px; pointer-events: none; }
.medicao b { color: var(--texto); font-weight: 500; }
.medicao b.ruim { color: var(--erro); }

/* Faixa de vídeos (em cima, no meio, como no Gather) */
/* Uma fileira só, como no Gather: quem não cabe vai para a página seguinte (setas). */
.faixa { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px; padding: 2px; z-index: 5; }
.faixa-trilho { display: flex; gap: 4px; }
.faixa-seta { flex: none; width: 28px; height: 56px; border: 0; border-radius: 10px; background: rgba(10, 11, 13, .78); color: var(--texto); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: var(--sombra); }
.faixa-seta:disabled { opacity: .35; cursor: default; }
.bloco.fora-da-pagina { display: none; }
.faixa[data-tamanho="grande"] .bloco { width: 235px; height: 132px; }
.faixa[data-tamanho="pequeno"] .bloco { width: 144px; height: 81px; }
.faixa[data-tamanho="grande"] .bloco-tela { width: 290px; }
.faixa[data-tamanho="pequeno"] .bloco-tela { width: 180px; }
.bloco { position: relative; margin: 0; width: 176px; height: 99px; flex: none; border-radius: 12px; overflow: hidden; background: var(--sup2); box-shadow: var(--sombra); outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .12s; }
.bloco.falando { outline-color: var(--ok); }
.bloco-fundo { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--cor, #3d7bf0) 55%, #1b1e22), #16181c 85%); }
/* O rosto vem em 64x64 (pixels de 3x). Em 64 px cada pixel fica inteiro; abaixo disso a redução é suave, porque "pixelated" num fator quebrado deixa pixels de larguras diferentes. */
.bloco-rosto { width: 64px; height: 64px; }
/* O rosto sobe acima da etiqueta do nome (que fica no canto de baixo): sem isso ela cobria o queixo. */
.bloco-fundo { padding-bottom: 22px; }
.faixa[data-tamanho="pequeno"] .bloco-rosto { width: 48px; height: 48px; image-rendering: auto; }
.bloco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.bloco figcaption { position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 12px); background: rgba(10, 11, 13, .72); border-radius: 7px; padding: 2px 7px 2px 5px; font-size: 12px; font-weight: 550; }
.bloco-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloco-mic, .bloco-icone-tela { width: 13px; height: 13px; flex: none; background: var(--texto); mask: var(--mic) center / contain no-repeat; -webkit-mask: var(--mic) center / contain no-repeat; }
/* Microfone mudo: o risco vermelho, como no Gather e no botão da barra (era laranja, a cor do
   Ocupado, e confundia "mudo" com "Ocupado"). */
.bloco.sem-mic .bloco-mic, .quadro.sem-mic .bloco-mic { background: var(--risco); mask-image: var(--mic-off); -webkit-mask-image: var(--mic-off); }
.bloco-icone-tela { mask-image: var(--icone-tela); -webkit-mask-image: var(--icone-tela); }
.bloco-tela { width: 220px; height: 124px; }
.bloco-tela video { object-fit: contain; }
/* O quadro da faixa é um botão: clicar abre os vídeos grandes (cliente/grade.js). O "Ampliar"
   aparece ao passar o mouse e no foco do teclado; o anel de foco é uma sombra, porque o contorno
   é o anel verde de quem fala. */
.faixa .bloco { cursor: zoom-in; }
.faixa .bloco:focus-visible { box-shadow: 0 0 0 2px var(--texto), var(--sombra); outline-offset: -2px; }
.bloco-dica { position: absolute; top: 6px; right: 6px; border-radius: 7px; padding: 2px 8px; font-size: 12px; font-weight: 550; background: rgba(10, 11, 13, .8); opacity: 0; transition: opacity .12s; pointer-events: none; }
.faixa .bloco:hover .bloco-dica, .faixa .bloco:focus-visible .bloco-dica { opacity: 1; }
/* Na janelinha da doca, ampliar é um botão PRÓPRIO, sempre à vista, no canto do destaque: o
   quadro inteiro como botão tirava a pessoa do site num clique solto (cliente/janela.js). */
.janela-ampliar { position: absolute; top: 6px; right: 6px; z-index: 2; border: 0; border-radius: 7px; padding: 3px 9px; font: 600 12px/1.4 var(--corpo); background: rgba(10, 11, 13, .82); color: var(--texto); cursor: zoom-in; }
.janela-ampliar:hover { background: rgba(36, 39, 44, .95); }
.janela-ampliar:focus-visible { outline: 2px solid var(--texto); outline-offset: 1px; }
/* O botão da grade ao lado das setas da faixa. */
.faixa-grade { display: grid; place-items: center; width: 32px; }
.faixa-grade:hover { background: rgba(36, 39, 44, .92); }

/* ---------- A tela grande dos vídeos: a grade por cima do mapa (cliente/grade.js) ---------- */
/* Como o MapMeetingView do Gather: os vídeos grandes e o mapa à vista atrás. O fundo escurece só
   um pouco e não pega clique: no vão entre os quadros o mapa continua vivo (duplo clique anda, o
   clique num boneco abre o cartão). Fica abaixo da barra de baixo (10), que continua por cima,
   e acima da faixa (5), que some enquanto a grade está aberta. --reserva é a altura da barra,
   medida (no celular ela vira duas linhas). Sem desfoque no fundo: com o mapa desenhando atrás a
   cada quadro, o desfoque custaria a GPU do vídeo. */
.palco-jogo.com-grade .faixa { display: none; }
.grade { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: rgba(10, 11, 13, .42); --reserva: 76px; }
.grade.cheia { background: #08090a; pointer-events: auto; }
.grade-topo { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 14px; background: var(--vidro); border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra); pointer-events: auto; }
.grade-cabeca { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.grade-cabeca strong { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grade-sub { font-size: 12px; color: var(--texto3); white-space: nowrap; }
.grade-paginas { display: flex; align-items: center; gap: 2px; font: 12px var(--mono); color: var(--texto2); white-space: nowrap; }
.grade-modos { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--sup2); }
.grade-icone { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--texto2); cursor: pointer; font-size: 20px; line-height: 1; }
.grade-icone:hover:not(:disabled) { background: var(--sup3); color: var(--texto); }
.grade-icone:disabled { opacity: .35; cursor: default; }
.grade-modos .grade-icone[aria-pressed="true"] { background: var(--sup4); color: var(--texto); }
#grade-cheia .so-ligado { display: none; }
#grade-cheia[aria-pressed="true"] .so-ligado { display: block; }
#grade-cheia[aria-pressed="true"] .so-desligado { display: none; }
/* A área dos quadros: entre o cabeçalho e a barra de baixo. */
.grade-corpo { position: absolute; left: 12px; right: 12px; top: 68px; bottom: var(--reserva); display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; }
.palco-jogo.com-anuncio .grade-topo { top: 96px; }
.palco-jogo.com-anuncio .grade-corpo { top: 152px; }
.grade-quadros { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 8px; min-width: 0; min-height: 0; }
.grade-foco { display: none; }
/* Cada quadro: a câmera (ou o rosto do avatar e o porquê de não ter vídeo), o nome com o
   microfone e o anel verde de quem fala, mais grosso que o da faixa. O tamanho vem do JS
   (grade-regras.js, disposicao). */
.quadro { position: relative; flex: none; margin: 0; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--sup2); color: var(--texto); font: inherit; text-align: left; box-shadow: var(--sombra); cursor: zoom-in; pointer-events: auto; outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .12s, width .18s ease, height .18s ease; }
.quadro.falando { outline-color: var(--ok); }
.quadro.no-palco { outline-color: var(--marca); }
.quadro.fora-da-pagina { display: none; }
.quadro[aria-pressed="true"] { cursor: zoom-out; }
.quadro:focus-visible { box-shadow: 0 0 0 2px var(--texto), var(--sombra); }
.quadro.entrando { animation: quadro-entra .2s ease-out; }
@keyframes quadro-entra { from { opacity: 0; transform: scale(.96); } }
.quadro .bloco-fundo { grid-auto-flow: row; align-content: center; justify-items: center; gap: 8px; padding-bottom: 30px; }
/* O tamanho do rosto e se cabe a frase de baixo vêm da ALTURA do quadro (grade-regras.js,
   rostoDoQuadro): quadro baixo cortava o rosto em cima e a frase passava por cima do nome. */
.quadro-rosto { width: 64px; height: 64px; }
.quadro[data-rosto="128"] .quadro-rosto { width: 128px; height: 128px; }
.quadro[data-rosto="48"] .quadro-rosto { width: 48px; height: 48px; image-rendering: auto; }
.quadro[data-rosto="32"] .quadro-rosto { width: 32px; height: 32px; image-rendering: auto; }
.quadro-sem-camera { font-size: 12.5px; font-weight: 550; color: var(--texto2); text-align: center; padding: 0 8px; }
.quadro[data-texto="false"] .quadro-sem-camera { display: none; }
.quadro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
/* A tela compartilhada e o quadro em foco mostram o quadro inteiro (sem cortar as bordas). */
.quadro-tela video, .grade-foco .quadro video { object-fit: contain; }
.quadro-legenda { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); background: rgba(10, 11, 13, .72); border-radius: 8px; padding: 3px 9px 3px 7px; font-size: 13px; font-weight: 550; }
.quadro-legenda .bloco-mic, .quadro-legenda .bloco-icone-tela { width: 14px; height: 14px; }
.quadro-dica { position: absolute; top: 8px; right: 8px; border-radius: 8px; padding: 3px 9px; font-size: 12px; font-weight: 550; background: rgba(10, 11, 13, .8); opacity: 0; transition: opacity .12s; pointer-events: none; }
.quadro:hover .quadro-dica, .quadro:focus-visible .quadro-dica { opacity: 1; }
/* Com um quadro em foco: ele grande e os outros numa tira (ao lado no computador, como a coluna
   do Gather; embaixo no celular), que rola quando não cabe. */
.grade-corpo.com-foco[data-lado="esquerda"] { flex-direction: row; }
.grade-corpo.com-foco[data-lado="baixo"] { flex-direction: column-reverse; }
.grade-corpo.com-foco .grade-foco { display: grid; place-items: center; flex: 1; min-width: 0; min-height: 0; align-self: stretch; }
.grade-corpo.com-foco .grade-quadros { flex-wrap: nowrap; justify-content: safe center; align-content: normal; overflow: auto; pointer-events: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.grade-corpo.com-foco[data-lado="esquerda"] .grade-quadros { flex-direction: column; flex: none; max-height: 100%; }
.grade-corpo.com-foco[data-lado="baixo"] .grade-quadros { flex-direction: row; flex: none; max-width: 100%; }
.grade-corpo.com-foco .grade-quadros:empty { display: none; }
.grade-corpo.com-foco .grade-quadros .quadro-legenda { font-size: 11.5px; padding: 2px 7px 2px 5px; left: 5px; bottom: 5px; }
.grade-corpo.com-foco .grade-quadros .bloco-fundo { padding-bottom: 22px; }
/* Com a grade aberta, o cartão da área e a medição saem do canto (o cabeçalho já diz onde você
   está) e o zoom do mapa também: eles ficavam embaixo dos quadros, cortados. O aviso do status
   ("Ficar Ativo") e a porta da sala continuam, por cima dos quadros. */
.palco-jogo.com-grade .cantinho { z-index: 9; }
.palco-jogo.com-grade .area-atual, .palco-jogo.com-grade .medicao, .palco-jogo.com-grade .zoom { display: none; }

.zoom { position: absolute; right: 12px; bottom: 84px; display: grid; gap: 4px; }
.zoom button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--linha); background: var(--vidro); color: var(--texto); font-size: 18px; cursor: pointer; }
.zoom button:hover { background: var(--sup3); }

/* Barra de baixo */
.barra { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 6px; padding: 6px; background: var(--vidro); border: 1px solid var(--linha); border-radius: 16px; box-shadow: var(--sombra); z-index: 10; }
.barra-grupo { position: relative; display: flex; }
.barra-sep { width: 1px; height: 28px; background: var(--linha2); margin: 0 2px; }
.eu { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 10px 0 6px; border-radius: 11px; border: 0; background: transparent; cursor: pointer; }
.eu:hover { background: var(--sup3); }
.eu-face { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--sup4); }
.eu-face .rosto { width: 32px; height: 32px; border-radius: 50%; image-rendering: auto; }
.eu-face .ponto { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 2px solid var(--sup); }
.eu-texto { display: grid; text-align: left; line-height: 1.2; }
.eu-texto strong { font-size: 13px; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eu-texto span { font-size: 11.5px; color: var(--texto3); }
.ctrl { width: 44px; height: 44px; border-radius: 11px; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--sup3); color: var(--texto); }
.ctrl:hover { background: var(--sup4); }
/* Microfone e câmera nas cores do Gather (2026-10-09, o dono: "o microfone precisa mudar de
   cor se estou falando ou não"). Desligado: cinza, com o risco vermelho. Ligado: verde, e no
   microfone a barra de dentro sobe com a voz (--nivel, 0 a 1, escrito por cliente/main.js) e
   um anel verde cresce junto. Antes ligado era cinza e desligado laranja: o ligado não
   chamava atenção nenhuma e nada mostrava se o microfone captava. */
#btn-mic, #btn-cam, .ctrl-midia { background: var(--sup3); color: var(--texto2); }
#btn-mic:hover, #btn-cam:hover, .ctrl-midia:hover { background: var(--sup4); color: var(--texto); }
.ctrl .risco { stroke: var(--risco); }
#btn-mic.ligado, #btn-cam.ligado, .ctrl-midia.ligado { background: rgba(0, 194, 69, .14); color: var(--ok); }
#btn-mic.ligado:hover, #btn-cam.ligado:hover, .ctrl-midia.ligado:hover { background: rgba(0, 194, 69, .22); }
#btn-mic.ligado, #janela-mic.ligado { box-shadow: 0 0 0 calc(var(--nivel, 0) * 3px) rgba(0, 194, 69, .45); transition: box-shadow .1s linear, background .12s; }
.mic-nivel { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--nivel, 0)); transition: transform .1s linear; }
/* A setinha ao lado (escolher o aparelho): o botão e ela são uma peça só. */
.grupo-midia { align-items: stretch; }
.grupo-midia > .ctrl { border-radius: 11px 0 0 11px; }
.ctrl-mais { width: 20px; height: 44px; border: 0; border-left: 1px solid rgba(0, 0, 0, .28); border-radius: 0 11px 11px 0; display: grid; place-items: center; cursor: pointer; background: var(--sup3); color: var(--texto3); padding: 0; }
.ctrl-mais:hover, .ctrl-mais[aria-expanded="true"] { background: var(--sup4); color: var(--texto); }
.ctrl.ligado + .ctrl-mais { background: rgba(0, 194, 69, .14); color: var(--ok); }
.ctrl.ligado + .ctrl-mais:hover, .ctrl.ligado + .ctrl-mais[aria-expanded="true"] { background: rgba(0, 194, 69, .22); }
.ctrl.travado + .ctrl-mais { opacity: .45; }
/* O menu da setinha: os aparelhos, a barra "Seu nível" e "Tocar um som". */
.pop-aparelhos { width: 304px; max-width: calc(100vw - 24px); max-height: min(60vh, 460px); overflow-y: auto; display: grid; gap: 2px; }
.aparelho { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; column-gap: 8px; text-align: left; border: 0; background: transparent; border-radius: 9px; padding: 7px 9px; cursor: pointer; }
.aparelho:hover { background: var(--sup3); }
.aparelho[aria-checked="true"] { background: var(--sup2); }
.aparelho-marca { color: var(--ok); font-weight: 700; }
.aparelho-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-nivel { display: flex; align-items: center; gap: 10px; padding: 6px 9px 4px; font-size: 11.5px; color: var(--texto3); }
.pop-nivel-barra, .nivel-entrada { display: block; position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--sup3); overflow: hidden; }
.pop-nivel-barra::after, .nivel-entrada > span { content: ""; position: absolute; inset: 0; background: var(--ok); transform-origin: left; transform: scaleX(var(--nivel, 0)); transition: transform .1s linear; }
.pop-testar { justify-self: start; margin: 4px 9px 2px; padding: 5px 10px; font-size: 12.5px; }
.pop-dica { margin: 4px 9px 2px; font-size: 11.5px; color: var(--texto3); }
.pop-aparelhos hr { border: 0; border-top: 1px solid var(--linha); margin: 4px 0; width: 100%; }
/* Os avisos que ficam (o microfone que não manda som, a voz de alguém que não chega): acima do
   lugar dos avisos comuns, um em cima do outro quando os dois valem. A coluna não pega clique;
   os avisos, sim. */
.alertas { position: absolute; left: 50%; bottom: 132px; transform: translateX(-50%); width: max-content; max-width: min(600px, calc(100% - 24px)); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 16; pointer-events: none; }
.mic-alerta { max-width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; background: #2a1414; border: 1px solid rgba(255, 116, 106, .5); border-radius: 14px; box-shadow: var(--sombra); pointer-events: auto; }
.mic-alerta[hidden] { display: none; }
.mic-alerta p { margin: 0; font-size: 13px; font-weight: 550; min-width: 0; }
.mic-alerta-icone { width: 16px; height: 16px; flex: none; background: var(--erro); mask: var(--mic-off) center / contain no-repeat; -webkit-mask: var(--mic-off) center / contain no-repeat; }
.voz-alerta-icone { mask-image: var(--som-off); -webkit-mask-image: var(--som-off); }
.mic-alerta-acoes { display: flex; gap: 6px; flex: none; }
.mic-alerta-acoes button { padding: 6px 10px; font-size: 12.5px; }
.mic-alerta .icone { width: 28px; height: 28px; flex: none; }
.ctrl .so-ligado { display: none; }
.ctrl.ligado .so-ligado { display: block; }
.ctrl.ligado .so-desligado { display: none; }
#btn-tela.ligado, .ctrl-tela.ligado { background: rgba(62, 201, 122, .2); color: var(--ok); }
/* Travado pelo status (Ocupado: microfone; Ausente: microfone, câmera, tela, reações e chat
   de perto). Continua clicável: o clique explica o porquê. */
.ctrl.travado { opacity: .45; cursor: not-allowed; }
.ctrl.sair { background: var(--marca-2); color: #fff; }
.ctrl.sair:hover { background: #b80000; }

.popover { position: absolute; bottom: calc(100% + 12px); left: 0; background: var(--sup); border: 1px solid var(--linha2); border-radius: 14px; box-shadow: var(--sombra); padding: 8px; z-index: 30; }
.menu-eu { width: 264px; display: grid; gap: 2px; }
.menu-eu button { display: grid; grid-template-columns: 16px 1fr; align-items: center; column-gap: 8px; text-align: left; border: 0; background: transparent; border-radius: 9px; padding: 7px 9px; cursor: pointer; }
.menu-eu button small { grid-column: 2; font-size: 11.5px; color: var(--texto3); }
.menu-eu button:hover { background: var(--sup3); }
.menu-eu button[aria-checked="true"] { background: var(--sup2); }
.menu-eu #btn-editar-avatar, .menu-eu #btn-meu-perfil, .menu-eu #btn-menu-site { grid-template-columns: 1fr; font-weight: 550; }
.menu-eu hr { border: 0; border-top: 1px solid var(--linha); margin: 4px 0; width: 100%; }
.pop-rot { margin: 2px 9px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto3); font-weight: 600; }
.pop-reacoes { left: 50%; transform: translateX(-50%); width: max-content; display: grid; gap: 6px; }
.reacoes { display: flex; gap: 2px; }
.reacoes button { position: relative; width: 42px; height: 42px; border: 0; border-radius: 10px; background: transparent; font-size: 22px; cursor: pointer; }
.reacoes button:hover { background: var(--sup3); }
.reacoes kbd { position: absolute; right: 2px; bottom: 1px; font-size: 9px; padding: 0 3px; }
.btn-mao { border: 0; border-radius: 10px; background: var(--sup3); padding: 8px; cursor: pointer; font-weight: 550; display: flex; justify-content: center; gap: 8px; align-items: center; }
.btn-mao.ligado { background: rgba(243, 191, 107, .2); color: var(--amarelo); }

/* z-index 60: no celular a lista de pessoas é uma gaveta por cima do mapa (z-index 50), e o
   cartão aberto a partir dela ficava por baixo dela. Abaixo só da tela de saída (100). */
.cartao-pessoa { position: fixed; z-index: 60; width: min(288px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; background: var(--sup); border: 1px solid var(--linha2); border-radius: 14px; box-shadow: var(--sombra); padding: 12px; display: grid; gap: 10px; }
.cartao-topo { display: flex; gap: 10px; align-items: center; }
.rosto-grande { width: 48px; height: 48px; border-radius: 50%; background: var(--sup3); image-rendering: auto; }
.cartao-info { display: grid; min-width: 0; }
.cartao-info strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-estado { font-size: 12px; color: var(--texto3); display: flex; align-items: center; gap: 4px; }
.cartao-perto { font-size: 12px; color: var(--ok); }
/* 2 ou 3 botões (o "Mensagem" só existe com a ponte): sempre preenchem a linha (rodada 1 da F8). */
.cartao-acoes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.cartao-acoes .btn-sec { padding: 7px 4px; font-size: 12.5px; }

.som-bloqueado { position: absolute; left: 50%; top: 130px; transform: translateX(-50%); width: max-content; background: var(--amarelo); color: #1a1408; border: 0; border-radius: 10px; padding: 9px 14px; font-weight: 650; cursor: pointer; box-shadow: var(--sombra); z-index: 15; }
.aviso { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); width: max-content; margin: 0; max-width: min(520px, calc(100% - 32px)); background: var(--sup); border: 1px solid var(--linha2); border-radius: 11px; padding: 9px 14px; box-shadow: var(--sombra); z-index: 15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aviso[data-tipo="erro"] { border-color: rgba(255, 116, 106, .5); color: var(--erro); }
.aviso[data-tipo="mensagem"] { border-color: rgba(62, 201, 122, .45); }
.aviso.clicavel { cursor: pointer; }

.caiu { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0, 0, 0, .7); padding: 16px; }

/* Editor do avatar */
.editor { width: min(900px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--linha2); border-radius: 18px; background: var(--sup); color: var(--texto); box-shadow: var(--sombra); overflow: hidden; }
.editor::backdrop { background: rgba(0, 0, 0, .6); }
.editor-corpo { display: grid; grid-template-columns: 250px 1fr; height: min(620px, calc(100dvh - 34px)); }
.editor-lado { background: var(--sup2); border-right: 1px solid var(--linha); padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.editor-lado h2 { margin: 0; font-size: 16px; align-self: flex-start; }
.editor-palco { width: 100%; flex: 1; display: grid; place-items: center; border-radius: 14px; background: radial-gradient(circle at 50% 45%, #2e4a2f, #172019 72%); min-height: 260px; }
.editor-palco canvas { width: 160px; height: 240px; image-rendering: pixelated; }
.editor-girar { display: flex; gap: 8px; }
.editor-girar .icone { font-size: 18px; background: var(--sup3); }
.editor-principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.editor-abas { display: flex; gap: 4px; padding: 14px 16px 0; border-bottom: 1px solid var(--linha); overflow-x: auto; }
.editor-aba { border: 0; background: transparent; padding: 9px 12px; border-radius: 9px 9px 0 0; cursor: pointer; color: var(--texto3); font-weight: 550; border-bottom: 2px solid transparent; white-space: nowrap; }
.editor-aba:hover { color: var(--texto); }
.editor-aba[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--marca); }
.editor-conteudo { flex: 1; overflow-y: auto; padding: 16px; display: grid; align-content: start; gap: 18px; }
.editor-bloco h3 { margin: 0 0 8px; font-size: 13px; color: var(--texto2); font-weight: 600; }
.editor-dica { margin: -4px 0 10px; font-size: 12px; color: var(--texto3); }
.editor-aviso { margin: 0; font-size: 12.5px; color: var(--amarelo); background: rgba(243, 191, 107, .1); border-radius: 9px; padding: 8px 10px; }
.editor-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.editor-grade.cabecas { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.editor-opcao { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 12px; border: 1px solid var(--linha); background: var(--sup2); cursor: pointer; font-size: 11.5px; color: var(--texto2); }
.editor-opcao:hover { border-color: var(--linha2); background: var(--sup3); }
.editor-opcao[aria-pressed="true"] { border-color: var(--marca); background: rgba(255, 32, 32, .1); color: var(--texto); }
.editor-opcao canvas { image-rendering: pixelated; }
.editor-opcao span { line-height: 1.2; text-align: center; }
.editor-cores { display: flex; flex-wrap: wrap; gap: 8px; }
.editor-cor { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; background: var(--cor); cursor: pointer; box-shadow: inset 0 0 0 2px var(--sup); }
.editor-cor[aria-pressed="true"] { border-color: var(--texto); }
.editor-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linha); }
@media (max-width: 720px) {
  .editor-corpo { grid-template-columns: 1fr; height: calc(100dvh - 34px); }
  .editor-lado { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .editor-palco { min-height: 0; flex: none; width: auto; padding: 8px; }
  .editor-palco canvas { width: 80px; height: 120px; }
}

/* Palco estreito: o canto sobe para não ficar embaixo da barra. */
@container palco (max-width: 1020px) {
  .cantinho { bottom: 76px; }
  /* O canto subiu (a área e a medição ficam até ~175 px do chão): o aviso do microfone vai acima. */
  .alertas { bottom: 184px; }
  /* E o aviso passageiro também: com o palco estreito (a gaveta do Chat do site ao lado) ele, centrado, caía em
     cima do cartão da sala e cortava a frase dele (verificador da F13, print e3). Vai acima do canto, e os
     alertas que ficam sobem uma altura de aviso. */
  .aviso { bottom: 184px; }
  .alertas { bottom: 236px; }
}
/* Celular: a barra de baixo tinha ~450 px numa linha só, num palco de ~320 (tela de 375), e o
   "Sair" e o "Continuar no Dotti Studio" ficavam fora da tela. Botões um pouco menores e,
   onde nem assim cabe, duas linhas; o que fica em cima da barra sobe junto. */
@container palco (max-width: 520px) {
  .barra { gap: 4px; padding: 5px; }
  .barra .ctrl { width: 40px; height: 40px; border-radius: 10px; }
  .barra .grupo-midia > .ctrl { border-radius: 10px 0 0 10px; }
  .barra .ctrl-mais { height: 40px; width: 18px; border-radius: 0 10px 10px 0; }
  .barra .eu { height: 40px; padding: 0 6px 0 4px; }
  .barra-sep { display: none; }
}
/* A grade no celular: o cabeçalho sem a contagem, os quadros encostados nas bordas. */
@container palco (max-width: 520px) {
  .grade-topo { top: 8px; padding-left: 10px; gap: 4px; }
  .grade-sub { display: none; }
  .grade-corpo { left: 6px; right: 6px; top: 58px; }
}
/* O ponto em que a barra quebra em duas linhas (rodada 3 da F8): era 420, e entre ~421 e ~447 px de palco a
   barra ficava numa linha só sem caber — o conteúdo passava até 18 px da pílula e o "Sair" ficava cortado pela
   borda (medido com a gaveta do Chat do site ao lado, a 1168 px de janela, e com o painel Pessoas reaberto, a
   ~1470). O mínimo da barra numa linha, com o nome encolhido até as reticências, é ~418 px, mais os 24 da
   margem (`max-width: calc(100% - 24px)`): 442; 460 deixa folga para fonte e nome. O site estima a faixa pela
   mesma conta (web/static/escritorio.js, PALCO_DA_BARRA_EM_2_LINHAS). */
@container palco (max-width: 460px) {
  .barra { flex-wrap: wrap; justify-content: center; }
  /* A barra em duas linhas mede 96 px com o topo a 110 do pé: o cartão da sala, o zoom e o aviso a 122, e a
     pílula do megafone a 120, ficam 12 e 10 px acima dela (eram 2 px e 2 px por dentro; F13, pendência da F8 §13);
     os alertas sobem junto (+10). O site estima a mesma faixa (web/static/escritorio.js). */
  .cantinho, .zoom { bottom: 122px; }
  .megafone-pill { bottom: 120px; }
  /* O aviso acima do canto (o cartão da sala a 122 sobe até ~221 com o aviso de status), e os alertas acima dele. */
  .aviso { bottom: 230px; }
  .alertas { bottom: 282px; }
  .mic-alerta { flex-wrap: wrap; }
}
/* Logo depois da quebra o nome de quem está na barra virava "Admi…": com o palco até ~500 px, só o rosto. */
@container palco (max-width: 500px) {
  .eu-texto { display: none; }
}
/* Com a gaveta do Chat do site AO LADO e sem lugar para o painel como coluna (cliente/main.js,
   lateralSobreOMapa), o painel que a pessoa reabre vem POR CIMA do mapa, como até 860 px (F13). */
.app.lateral-sobre, .app.lateral-sobre.sem-lateral { grid-template-columns: 56px 0 minmax(0, 1fr); }
.app.lateral-sobre .lateral { display: none; }
.app.lateral-sobre.lateral-aberta .lateral { display: flex; position: fixed; left: 56px; top: 0; bottom: 0; width: min(300px, calc(100% - 56px)); z-index: 50; box-shadow: var(--sombra); }
/* Por cima do mapa, o painel PARA acima da barra de baixo (em duas linhas, o topo dela fica a 110 px do pé): o
   microfone, a câmera e o Sair nunca ficam por baixo dele (verificador da F13, print e8 a 1168). */
.app.lateral-sobre.lateral-aberta .lateral { bottom: 122px; border-bottom-right-radius: 14px; }
/* E o cartão da sala, embaixo do painel, sai enquanto ele está aberto por cima: o pé do painel (122) e o topo do
   cartão (~124) se encostavam, e o cartão parecia sair de baixo do painel; ele só repetia a sala que a lista
   Pessoas já diz (verificador da F13, rodada 2, prints r1/e8 a 1280 e 1340). Fechado o painel, ele volta. */
.app.lateral-sobre.lateral-aberta .area-atual { display: none; }
@media (max-width: 860px) {
  .app, .app.sem-lateral { grid-template-columns: 56px 0 minmax(0, 1fr); }
  .lateral { display: none; }
  .app.lateral-aberta .lateral { display: flex; position: fixed; left: 56px; top: 0; bottom: 0; width: min(300px, calc(100% - 56px)); z-index: 50; box-shadow: var(--sombra); }
  .eu-texto { display: none; }
  .medicao { display: none; }
}

/* ---------- Espaços e Moderação ---------- */
.painel { display: grid; align-content: start; gap: 6px; padding-bottom: 16px; overflow-x: hidden; }
.painel > *, .bloco-painel > * { min-width: 0; }
.bloco-painel { display: grid; gap: 8px; padding: 4px 8px 12px; border-bottom: 1px solid var(--linha); }
.bloco-painel:last-child { border-bottom: 0; }
.bloco-painel .grupo-rot { margin: 8px 0 0; }
.detalhe { margin: 0; font-size: 12px; color: var(--texto3); }
.espaco-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.espaco-nome strong { font-size: 15px; }
.etiquetas { display: inline-flex; gap: 4px; }
.etiqueta { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--sup3); color: var(--texto2); }
.etiqueta.publico { background: rgba(0, 194, 69, .14); color: #5fe08f; }
.etiqueta.particular { background: rgba(243, 191, 107, .16); color: var(--amarelo); }
.etiqueta.trancado { background: rgba(255, 116, 106, .16); color: var(--erro); }
.etiqueta.senha { background: rgba(120, 160, 255, .16); color: #9db8ff; }
.etiqueta.aqui { background: var(--sup4); }
.etiqueta.invisivel { background: rgba(186, 192, 200, .14); color: var(--texto2); border: 1px dashed var(--linha2); flex: none; }
.link-convite { display: flex; gap: 6px; }
.link-convite input { flex: 1; min-width: 0; background: var(--sup2); border: 1px solid var(--linha2); border-radius: 9px; color: var(--texto2); padding: 7px 9px; font: 12px var(--mono); }
.acoes-painel { display: flex; flex-wrap: wrap; gap: 6px; }
.acoes-painel .btn-sec, .acoes-painel .btn-marca, .item-espaco .btn-sec { padding: 6px 10px; font-size: 12.5px; text-decoration: none; display: inline-flex; align-items: center; }
.btn-sec.perigo, .btn-marca.perigo { color: var(--erro); border-color: rgba(255, 116, 106, .45); }
.btn-marca.perigo { background: #8f1d1d; color: #fff; }
.btn-sec.ligado { background: rgba(255, 32, 32, .16); border-color: var(--marca); color: var(--marca-txt); }
.form-criar { display: grid; gap: 8px; }
.form-criar input { background: var(--sup2); border: 1px solid var(--linha2); border-radius: 9px; color: var(--texto); padding: 9px 11px; font: inherit; }
.escolha-visibilidade { display: grid; gap: 6px; }
.opcao-visibilidade { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--linha2); border-radius: 10px; cursor: pointer; }
.opcao-visibilidade small { grid-column: 2; font-size: 12px; color: var(--texto3); }
.opcao-visibilidade:has(input:checked) { border-color: var(--marca); background: rgba(255, 32, 32, .07); }
.campo-criar { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--linha2); border-radius: 10px; }
.campo-criar > * { min-width: 0; }
.campo-criar-rotulo { font-size: 13px; color: var(--texto2); }
.campo-criar-rotulo strong { color: var(--texto); }
.campo-criar input[type="range"] { width: 100%; accent-color: var(--marca); padding: 0; border: 0; background: none; }
.linha-senha { display: flex; gap: 6px; }
.linha-senha input { flex: 1; min-width: 0; width: 0; } /* sem width 0 o campo empurra o botão para fora do painel */
.linha-senha .btn-sec { padding: 6px 10px; font-size: 12.5px; }
.dica-campo { font-weight: 400; font-size: 12px; color: var(--texto3); }
.lista-espacos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.item-espaco { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px; border-radius: 10px; background: var(--sup2); }
.item-espaco-texto { display: grid; flex: 1 1 100%; min-width: 0; } /* texto numa linha, botões na de baixo: o painel é estreito */
.item-espaco-texto strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selo { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: rgba(214, 0, 0, .18); color: var(--marca-txt); white-space: nowrap; flex: none; }
.selo[data-papel="suporte"] { background: rgba(66, 87, 218, .2); color: #9fb0ff; }
.selo[data-papel="professor"] { background: rgba(243, 191, 107, .18); color: var(--amarelo); }
/* F15, rodada 1 (decisão 44): o moderador do escritório não é equipe — contorno neutro, nunca o vermelho da Equipe Dotti. */
.selo[data-papel="moderador"] { background: transparent; box-shadow: inset 0 0 0 1px var(--linha2); color: var(--texto2); }
.pessoa-voce { flex: none; margin-left: -2px; font-weight: 550; }
.pessoa-linha-nome { display: flex; align-items: center; gap: 6px; min-width: 0; }
.form-anuncio { display: grid; gap: 6px; }
.form-anuncio textarea, .dialogo textarea, .dialogo select { background: var(--sup2); border: 1px solid var(--linha2); border-radius: 9px; color: var(--texto); padding: 8px 10px; font: inherit; resize: vertical; }
.linha-anuncio { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.linha-anuncio .btn-marca { padding: 7px 14px; }
.check { font-size: 12.5px; color: var(--texto2); display: inline-flex; align-items: center; gap: 4px; }
.lista-moderacao { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.item-moderacao { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; }
.item-moderacao:hover { background: var(--sup2); }
.item-moderacao-nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-moderacao-midia { font-size: 12px; }
.item-denuncia { display: grid; gap: 3px; padding: 8px; border-radius: 10px; background: var(--sup2); }
.item-denuncia .btn-sec { justify-self: start; padding: 5px 10px; font-size: 12.5px; }
.motivo { margin: 0; font-size: 13px; color: var(--texto2); white-space: pre-wrap; }
.lista-registro { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; }
.lista-registro li { display: grid; gap: 1px; }
.registro-quando { font: 11px var(--mono); color: var(--texto3); }
.registro-detalhe { color: var(--texto3); font-size: 12px; overflow-wrap: anywhere; }
.trilho-btn[hidden] { display: none; }
/* Aba Moderação: as portas das salas da Praça (as fechadas primeiro, marcadas na borda) */
.lista-portas { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; max-height: 340px; overflow-y: auto; }
.item-porta { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: var(--sup2); }
.item-porta.fechada { box-shadow: inset 3px 0 0 var(--amarelo); }
.item-porta-info { flex: 1; min-width: 0; display: grid; gap: 1px; }
.item-porta-info strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-porta-info .detalhe { font-size: 11.5px; }
.item-porta-acoes { display: flex; gap: 4px; flex: none; }
.item-porta-acoes .btn-sec { padding: 4px 9px; font-size: 12px; }

/* Cartão de pessoa: moderação e denúncia */
.cartao-rotulo { margin: 2px 0 -4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto3); font-weight: 600; }
.cartao-moderacao { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.cartao-moderacao .btn-sec { padding: 6px 4px; font-size: 12px; }
.cartao-moderacao .btn-sec.largo { grid-column: 1 / -1; padding: 6px 12px; }
.cartao-denunciar { justify-self: start; border: 0; background: transparent; color: var(--texto3); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; }
/* F15, correção 3: no celular o cartão de pessoa rola por dentro (max-height) e a última linha parecia cortada, sem
   sinal de que havia mais embaixo ("Denunciar"). Com mais conteúdo abaixo (`tem-mais`, interface.js), a borda de baixo
   esmaece — o conteúdo "continua"; no fim, volta ao normal. (Uma sombra no fundo não serviria: os botões, opacos,
   ficam por cima do fundo do cartão e a escondem.) E um respiro embaixo, para o "Denunciar" não colar na borda. */
/* F16 (F15 §17, baixa): o respiro do foco cobre a faixa esmaecida (44 px) e mais 8: o controle focado pelo Tab (o
   "Tornar moderador(a)" a 375) para INTEIRO acima dela, com o anel; no fim da rolagem a máscara sai (tem-mais). */
.cartao-pessoa { scroll-padding-bottom: 52px; }
.cartao-pessoa.tem-mais {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), rgba(0, 0, 0, .15));
  mask-image: linear-gradient(#000 calc(100% - 44px), rgba(0, 0, 0, .15));
}
.cartao-denunciar:hover { color: var(--erro); }

/* Anúncio, chamado e megafone */
.anuncio { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px 10px 14px; background: #2a1414; border: 1px solid rgba(255, 32, 32, .5); border-radius: 14px; box-shadow: var(--sombra); z-index: 12; }
.anuncio-icone { font-size: 22px; line-height: 1.2; }
.anuncio-texto { flex: 1; min-width: 0; }
.anuncio-texto strong { font-size: 12px; color: var(--marca-txt); }
.anuncio-texto p { margin: 2px 0 0; overflow-wrap: anywhere; }
.palco-jogo.com-anuncio .faixa { top: 96px; }
.chamado { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100% - 24px)); display: grid; gap: 12px; padding: 18px; background: var(--sup); border: 1px solid var(--linha2); border-radius: 16px; box-shadow: var(--sombra); z-index: 25; text-align: center; }
.chamado p { margin: 0; font-weight: 600; }
.chamado-botoes { display: flex; justify-content: center; gap: 8px; }
.megafone-pill { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; background: #4a1111; border: 1px solid var(--marca); border-radius: 999px; z-index: 11; font-weight: 600; font-size: 13px; }
.megafone-pill .btn-sec { padding: 5px 10px; font-size: 12px; border-radius: 999px; }
.bloco.no-palco { outline-color: var(--marca); }

/* Diálogo de confirmação */
.dialogo { width: min(420px, calc(100% - 32px)); padding: 0; border: 1px solid var(--linha2); border-radius: 16px; background: var(--sup); color: var(--texto); box-shadow: var(--sombra); }
.dialogo::backdrop { background: rgba(0, 0, 0, .6); }
.dialogo-corpo { display: grid; gap: 12px; padding: 20px; }
.dialogo-corpo h2 { margin: 0; font-size: 17px; }
.dialogo-botoes { display: flex; justify-content: flex-end; gap: 8px; }
.caiu-botoes { display: flex; gap: 8px; justify-content: flex-end; }
.caiu-botoes a { text-decoration: none; display: inline-flex; align-items: center; }
.link-praca { color: var(--marca-txt); margin-left: 6px; }
/* "Abrir o Dotti Studio" na lista de servidores, quando o único caminho é o site. */
.ir-ao-site { justify-self: start; text-decoration: none; display: inline-flex; align-items: center; }

/* ---------- Patente (estudo pesquisa/tiers-patentes-2026-10-08.md) ---------- */
/* A insígnia é pixel art: a imagem vem em densidade 2 (32 px para 16, 128 px para 64), e
   "pixelated" reduz 2 para 1 pegando um pixel de cada bloco 2x2 igual. Nada borra. */
.insignia { image-rendering: pixelated; display: block; flex: none; }
.insignia-lista { width: 16px; height: 16px; }
.insignia-64 { width: 64px; height: 64px; }
/* Sem patente ainda: o escudo neutro, apagado, é o lugar que o primeiro vídeo preenche. */
.insignia-vazia, .perfil-entrada[data-tipo="sem"] .insignia { opacity: .45; }

/* Avisos das telas de antes de entrar (passe vencido, sessão que venceu). */
.aviso-entrada { margin: 0; padding: 9px 12px; border-radius: 10px; background: rgba(243, 191, 107, .1); border: 1px solid rgba(243, 191, 107, .35); color: var(--amarelo); font-size: 13px; }

/* Tela do personagem com a conta do Dotti: o nome é o do perfil e não se edita. */
.campo input[readonly] { background: var(--sup); border-style: dashed; color: var(--texto2); cursor: default; }
.campo input[readonly]:focus-visible { outline-color: var(--linha2); }
.perfil-entrada { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border: 1px solid var(--linha2); border-radius: 12px; background: var(--sup2); min-width: 0; }
.perfil-entrada-texto { display: grid; gap: 2px; min-width: 0; }
.perfil-entrada-texto strong { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.perfil-entrada-texto span { font-size: 12.5px; color: var(--texto3); }
/* Rodada 2 (lente de design): a EQUIPE sem patente com o MESMO desenho do cartão de patente — o emblema de 64 px no
   lugar da insígnia (a ★ do crachá da equipe), e não uma caixa só com "Equipe", da altura do campo do nome logo acima
   (parecia um segundo campo vazio). */
.perfil-entrada[data-tipo="equipe"]::before {
  content: "★" / "";
  flex: none; width: 64px; height: 64px; display: grid; place-items: center;
  border-radius: 14px; background: rgba(255, 32, 32, .12); box-shadow: inset 0 0 0 1px rgba(255, 32, 32, .28);
  color: var(--marca-txt); font-size: 28px; line-height: 1;
}

/* Cartão de pessoa: a patente, carregada pelo perfil_ver. */
.perfil-patente { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--linha); min-width: 0; }
.perfil-patente p { margin: 0; }
.perfil-aviso { font-size: 12.5px; color: var(--texto3); }
.perfil-simples { display: grid; gap: 1px; font-size: 13px; }
.perfil-simples span { font-size: 12px; color: var(--texto3); }
.perfil-cabeca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.perfil-cabeca-texto { display: grid; gap: 1px; min-width: 0; }
.perfil-patente-nome { font-size: 12px; color: var(--texto2); letter-spacing: .02em; }
.perfil-patente-nome strong { color: var(--texto); letter-spacing: .08em; }
.perfil-nivel { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.perfil-detalhe { font-size: 12px; color: var(--texto3); }
.perfil-numeros { display: grid; gap: 3px; }
.perfil-linha { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--texto2); }
/* O pontilhado entre o rótulo e o número, como numa ficha. */
.perfil-linha span { flex: 1; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.perfil-linha span::after { content: ""; flex: 1; min-width: 12px; border-bottom: 1px dotted var(--linha2); transform: translateY(-3px); }
.perfil-linha b { font: 500 12.5px var(--mono); color: var(--texto); font-variant-numeric: tabular-nums; }
.conquistas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.conquista { height: 28px; border-radius: 8px; display: grid; place-items: center; font: 600 11px var(--mono); border: 1px dashed var(--linha2); color: var(--texto3); opacity: .55; cursor: default; white-space: nowrap; overflow: hidden; }
.conquista.ganha { opacity: 1; border-style: solid; }
.conquista.ganha[data-grupo="videos"] { background: rgba(195, 202, 211, .14); border-color: rgba(195, 202, 211, .42); color: var(--texto); }
.conquista.ganha[data-grupo="dias"] { background: rgba(0, 194, 69, .13); border-color: rgba(0, 194, 69, .45); color: #5fe08f; }
.conquista.ganha[data-grupo="canal"] { background: rgba(255, 32, 32, .13); border-color: rgba(255, 32, 32, .5); color: var(--marca-txt); }

/* ---------- A doca: o site do Dotti por cima, a chamada na janelinha (cliente/doca.js) ---------- */
/* O mapa fica atrás com o tamanho dele (o Phaser quebra num palco 0x0): só some da vista. */
.app.na-doca { visibility: hidden; }
/* Acima do cartão de pessoa (60) e abaixo da tela de saída (100) e dos diálogos. */
.doca { position: fixed; inset: 0; z-index: 70; background: var(--void); }
.doca-site { display: block; width: 100%; height: 100%; border: 0; background: var(--void); }
/* No meio do arrasto o quadro do site não pega o ponteiro (ele "roubaria" o movimento). */
body.arrastando-janela { user-select: none; cursor: grabbing; }
body.arrastando-janela .doca-site { pointer-events: none; }

/* A janelinha. Largura fixa (no celular, a tela menos 16 px); a posição vem do JS (left/top).
   Nunca mais alta que a janela do navegador: num celular deitado (375 px de altura) ela passava
   da tela e levava "Voltar" e "Sair" para fora do alcance. O que encolhe é o palco (os vídeos),
   que rola; a barra de cima, o aviso e os botões ficam sempre à vista. */
.janela { position: fixed; left: 16px; top: 16px; z-index: 90; width: min(320px, calc(100vw - 16px)); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); display: flex; flex-direction: column; gap: 8px; padding: 8px; overflow: hidden; background: var(--sup); border: 1px solid var(--linha2); border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); color: var(--texto); font: 14px/1.4 var(--corpo); }
.janela > * { flex: none; }
.janela > .janela-palco { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.janela-topo { display: flex; align-items: center; gap: 6px; min-height: 32px; cursor: grab; touch-action: none; user-select: none; }
.janela.arrastando .janela-topo { cursor: grabbing; }
.janela-alca { width: 22px; height: 32px; display: grid; place-items: center; flex: none; color: var(--texto3); border-radius: 8px; }
.janela-alca:hover { color: var(--texto); }
.janela-cabeca { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.janela-cabeca strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Fora de Ativo, a etiqueta do status é o botão de voltar ("Ocupado · Ficar Ativo"). */
.janela-status { flex: none; font: 700 11px/1.5 var(--corpo); padding: 1px 7px; border: 0; border-radius: 6px; background: rgba(249, 115, 22, .16); color: var(--ocupado); white-space: nowrap; cursor: pointer; }
.janela-status:hover { background: rgba(249, 115, 22, .28); }
.janela-icone { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--texto2); cursor: pointer; }
.janela-icone:hover { background: var(--sup3); color: var(--texto); }
.janela.encolhida .janela-icone svg { transform: rotate(180deg); }
.janela-palco { display: grid; gap: 6px; }
/* O destaque: quem fala, grande (16:9). Reaproveita o quadro da faixa do mapa (.bloco). */
.janela .janela-destaque { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.janela-vazia { margin: 0; padding: 18px 12px; text-align: center; font-size: 12.5px; color: var(--texto3); background: var(--sup2); border-radius: 12px; }
.janela-miniaturas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.janela-mini { position: relative; flex: none; width: 64px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 9px; overflow: hidden; background: var(--sup2); color: var(--texto); outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .12s; }
.janela-mini .bloco-fundo { padding-bottom: 0; }
.janela-mini .rosto { width: 32px; height: 32px; image-rendering: auto; }
.janela-mini video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.janela-mini.falando { outline-color: var(--ok); }
.janela-mini-tela { cursor: zoom-in; }
.janela-mini-tela video { object-fit: contain; }
.janela-mini-rotulo { position: absolute; left: 3px; bottom: 3px; font-size: 10px; font-weight: 600; background: rgba(10, 11, 13, .75); border-radius: 5px; padding: 0 4px; }
.janela-aviso { margin: 0; font-size: 12.5px; line-height: 1.35; padding: 7px 10px; border-radius: 10px; background: var(--sup2); border: 1px solid var(--linha2); }
.janela-aviso[data-tipo="erro"] { color: var(--erro); border-color: rgba(255, 116, 106, .45); }
.janela-aviso[data-tipo="mensagem"] { border-color: rgba(62, 201, 122, .45); }
.janela-aviso.clicavel { cursor: pointer; }
.janela-aviso.clicavel:hover { background: var(--sup3); }
.janela-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.janela .ctrl { width: 40px; height: 40px; border-radius: 10px; }
/* A setinha do microfone e da câmera também na janelinha (cliente/aparelhos.js). O menu dela não
   flutua: entra no lugar dos vídeos e a janelinha cresce para ele (embutida no site, o quadro tem
   320 px, e um menu solto por cima, como o da barra de baixo, sairia cortado). */
.janela .grupo-midia > .ctrl { border-radius: 10px 0 0 10px; }
.janela .ctrl-mais { width: 18px; height: 40px; border-radius: 0 10px 10px 0; }
.janela > .janela-aparelhos { flex: 0 1 auto; min-height: 0; width: auto; max-width: none; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 4px; border-radius: 12px; background: var(--sup2); }
.janela.escolhendo .janela-palco { display: none; }
/* Aberta: "Voltar para a Comunidade" ocupa a linha de baixo inteira. Encolhida: vira ícone. */
/* O roxo do seu crachá (a cor da Comunidade): o vermelho fica só para o "Sair", ao lado, e as
   duas saídas opostas não se confundem. */
.janela-voltar { order: 10; flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; font-size: 13.5px; background: #5f4dc5; }
.janela-voltar:hover { background: #4f3fb0; }
#janela-sair { margin-left: auto; }
.janela.encolhida .janela-palco { display: none; }
.janela.encolhida .janela-voltar { order: 0; flex: none; width: 40px; height: 40px; padding: 0; }
.janela.encolhida .janela-voltar span { display: none; }
/* O navegador ainda abrindo o microfone, a câmera ou a tela: o botão mostra que está ocupado
   (o segundo clique não abre outra captura). Vale para a barra do mapa e para a janelinha. */
.ctrl[aria-busy="true"] { cursor: progress; opacity: .7; }
.janela-fim { display: grid; gap: 10px; }
.janela-fim-acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* ---------- Embutida no site: o Escritório virtual do Dotti Studio (cliente/embutida.js) ---------- */
/* O palco do mapa nunca mede 0x0, nem com o quadro escondido pelo site (a conferência da conta
   esconde tudo com display: none): o Phaser quebra num palco sem tamanho. */
html.embutida .jogo { min-width: 64px; min-height: 64px; }
/* Modo mini: o quadro tem o tamanho da janelinha. O mapa fica atrás, dormindo e invisível, no
   tamanho que tinha no modo cheio (o JS escreve a largura e a altura), para voltar sem pular. */
.app.congelado { position: fixed; left: 0; top: 0; }
html.embutida-mini, html.embutida-mini body { background: var(--sup); }
/* A janelinha ocupa o quadro inteiro: o lugar, os cantos e a sombra são do site. Nunca mais alta
   que o quadro: o palco dos vídeos rola, a barra de cima e os botões ficam. */
.janela.embutida { position: relative; left: auto; top: auto; width: 100%; max-height: 100vh; max-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
/* Embutida, o "D" do trilho sai: o site em volta já tem o dele (a marca), e dois "D" vermelhos lado
   a lado fazendo coisas diferentes confundiam (revisão de 2026-10-09). O "Minimizar" fica na barra
   e no menu do seu avatar. */
html.embutida #logo-site { display: none; }
@media (prefers-reduced-motion: reduce) {
  .janela-mini { transition: none; }
  .quadro { transition: none; }
  .quadro.entrando { animation: none; }
}

/* ---------- a ponte com o Chat do site (Comunidade Dotti v2, F8) ---------- */
/* A gaveta do Chat do SITE aberta por cima do quadro (cliente/main.js, --gaveta-do-site): o mapa,
   a barra de baixo e o zoom recentram no que sobra, e nada do escritório fica embaixo dela. */
html.embutida.com-gaveta-site .app { box-sizing: border-box; padding-right: var(--gaveta-do-site, 0px); }
/* "Guardar como grupo", AO LADO de "Na sua conversa · N" (fora do título: rodada 1 da F8): um botão
   quieto, do tamanho do rótulo; no celular e no toque, 44 px de alvo. */
/* Sem lugar para os dois numa linha (o painel estreito do celular), o botão desce para a linha de baixo: o
   título nunca vira "NA SUA CONVERS…". */
.grupo-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 12px 8px 4px; min-width: 0; }
.grupo-cabeca > .grupo-rot { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grupo-guardar { margin-left: auto; flex: none; border: 1px solid var(--linha2); background: transparent; color: var(--texto2); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: 7px; padding: 2px 7px; cursor: pointer; white-space: nowrap; }
.grupo-guardar:hover { background: var(--sup3); color: var(--texto); }
.grupo-guardar:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
@media (max-width: 767px), (pointer: coarse) {
  .grupo-guardar { min-height: 44px; padding: 0 12px; font-size: 12px; }
  /* As ações do cartão de pessoa ("Mensagem" é a porta da ponte no celular): 44 px de alvo, como o botão do
     grupo ao lado (rodada 2 da F8: eram 35). */
  .cartao-acoes .btn-sec { min-height: 44px; }
  /* Rodada 3 da F8: o resto do mesmo fluxo no toque — os botões do diálogo ("Grupo no Chat": Cancelar e
     "Criar grupo"; eram 41), a seção Moderação do cartão (eram 32) e "Denunciar" (um link de 18 px: o alvo
     cresce por recheio, sem mudar o desenho). */
  .dialogo-botoes button { min-height: 44px; }
  .cartao-moderacao .btn-sec { min-height: 44px; }
  .cartao-denunciar { min-height: 44px; padding: 0 8px; margin-left: -8px; }
}
/* A dica do teclado no pé da aba Pessoas: no toque não há setas nem WASD (rodada 2 da F8). */
@media (pointer: coarse) {
  .ajuda-teclas { display: none; }
}
/* Revisão final da Comunidade Dotti v2, rodada 3 (lente de design): a ENTRADA (a lista de servidores e "Seu personagem")
   no toque, como a F8 já fez com o que fica dentro da sala — a decisão 39 abre o escritório a todo aluno, e muitos usam
   o celular. Botões, campos e escolhas de aparelho com 44 px (eram 31 a 41); o "Trocar" (um link de 24) chega aos 44 com
   10 px de margem negativa em cima e embaixo, sem mudar a altura do cartão do servidor, e fica por cima da linha de
   baixo que alcança.
   Rádio e régua (o formulário de criar) ficam como são: altura não é o alvo deles. */
@media (pointer: coarse) {
  :is(#servidores, #entrada) :is(button, select, input:not([type="radio"], [type="checkbox"], [type="range"])) { min-height: 44px; }
  #btn-trocar-servidor { position: relative; margin-block: -10px; }
}
/* Rodada 3: o "Nenhum outro servidor ainda." começa na borda do cartão da Praça logo acima, e o "Nenhum ainda." de uma
   seção na do rótulo dela (o recuo de 8 do vazio de sempre os deixava tortos, só nesta lista). */
#lista-servidores .vazio { padding-inline: 0; }
/* As não lidas de "Perto de você" no botão da barra, quando o Chat do trilho é o do site. */
#btn-chat-perto { position: relative; }
.badge-ctrl { position: absolute; top: -4px; right: -4px; border: 2px solid var(--sup); }