:root {
  /* marca Huddle Arena (marca/MANUAL.md): Ameixa no fundo, Flash nos destaques; Azul e Laranja só dos times */
  --ameixa: #24092f;
  --flash: #ff4f9a;
  --branco: #faf8f5;
  --led: #0b0a0d;
  --azul: #4f7cff;
  --laranja: #ff8a3d;
  --vidro: rgba(36, 9, 47, 0.72);
  --texto: var(--branco);
  --titulo: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-family: Barlow, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--ameixa); color: var(--texto);
  touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#cena { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
.topo {
  position: absolute; left: 0; right: 0;
  top: max(12px, env(safe-area-inset-top));
  /* 3 colunas iguais nas pontas: o placar fica no centro exato da tela, seja qual for a largura dos lados */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start;
  gap: 8px; pointer-events: none;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); /* notch deitado */
}
.topo > * { pointer-events: auto; }
/* os lados se alinham com a faixa do placar (o medalhão vaza 15 px acima dela) */
/* canto esquerdo: sala, pessoas e ping em cima e, embaixo, a marca (abre o menu do jogo) */
.esquerda { justify-self: start; margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
#marca-voltar { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--branco); padding: 4px 12px 4px 6px; border-radius: 999px;
  background: rgba(36, 9, 47, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: italic 900 20px/1 var(--titulo); white-space: nowrap; }
#marca-voltar img { width: 26px; height: 26px; }
#marca-voltar i { font-style: inherit; color: var(--flash); }
#marca-voltar:hover { background: var(--vidro); }
/* no celular (tela estreita ou toque) o nome inteiro invadia o placar: fica só o símbolo + "HA" */
#marca-voltar .nome-curto { display: none; }
@media (max-width: 900px), (pointer: coarse) {
  #marca-voltar .nome-longo { display: none; }
  #marca-voltar .nome-curto { display: inline; }
}
.direita { justify-self: end; margin-top: 18px; }
.chip {
  background: var(--vidro); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
}
.botao:active { transform: scale(0.96); }
.online { display: inline-flex; align-items: center; gap: 5px; opacity: 0.85; font-weight: 500; }
#ping { font-size: 12px; font-weight: 600; opacity: 0.75; font-variant-numeric: tabular-nums; }
#ping:empty { display: none; }
#ping.medio { color: #ffd84d; opacity: 1; } #ping.ruim { color: #ff7a7a; opacity: 1; }
.online i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; display: inline-block; }
#sala-nome { max-width: 26vw; overflow: hidden; text-overflow: ellipsis; }
/* sala, pessoas e ping: informação de canto, discreta; o nome da sala só aparece ao passar o mouse */
#sala-info {
  background: rgba(36, 9, 47, 0.35); padding: 4px 10px; font-size: 12px; gap: 8px;
  opacity: 0.55; transition: opacity 0.2s, background 0.2s;
}
#sala-info:hover { opacity: 1; background: var(--vidro); }
#sala-info:not(:hover) #sala-nome { display: none; }
#sala-info #ping { font-size: 11px; }
#sala-info .online i { width: 6px; height: 6px; }

.centro { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.centro > * { pointer-events: auto; }
.direita { display: flex; align-items: center; gap: 6px; }
/* som e convite: pequenos e translúcidos; com a bola rolando o convite some e o som quase some */
.direita .chip { font-size: 13px; padding: 6px 12px; background: rgba(36, 9, 47, 0.45); }
#btn-som { width: 32px; height: 32px; padding: 0; justify-content: center; font-size: 15px; }
.direita .chip:hover { background: var(--vidro); }
.direita { transition: opacity 0.3s; }
#hud.em-jogo #copiar { display: none; }
#hud.em-jogo .direita { opacity: 0.4; }
#hud.em-jogo .direita:hover { opacity: 1; }
.partida { display: flex; gap: 6px; }
.partida .chip { font-size: 13px; padding: 7px 12px; font-variant-numeric: tabular-nums; }
/* esperando confirmações: quem falta clicar vê o botão chamando; quem já clicou, verde */
#btn-iniciar.chamando { background: #e5484d; animation: chama 1.2s ease-in-out infinite; }
#btn-iniciar.pronto { background: #2fbf71; }
/* placar estilo transmissão: sigla do time | gols | selo | gols | sigla, e a aba do relógio embaixo */
.placar {
  --barra: var(--ameixa); --aba: var(--branco);
  font-family: var(--titulo); font-style: italic; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; padding-top: 15px; /* medalhão vaza para cima */
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.faixa { display: flex; align-items: stretch; height: 42px; }
.sigla {
  display: flex; align-items: center; padding: 0 16px; color: #fff;
  font-size: 22px; font-weight: 800; letter-spacing: 0.04em; font-style: italic;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* faixas diagonais escurecendo rumo ao centro, como na referência */
/* as faixas usam --azul-1..3 / --laranja-1..3: a organização pode trocar a cor dos times (applyTeams) */
.sigla.azul { color: var(--azul-tx, #fff); text-shadow: var(--azul-sombra, 0 1px 2px rgba(0, 0, 0, 0.35)); }
.sigla.laranja { color: var(--laranja-tx, #fff); text-shadow: var(--laranja-sombra, 0 1px 2px rgba(0, 0, 0, 0.35)); }
.sigla.azul {
  border-radius: 7px 0 0 7px; padding-right: 22px;
  background: linear-gradient(112deg, var(--azul-1, #2a55f0) 0 58%, var(--azul-2, #1f3cb8) 58% 70%, var(--azul-3, #142670) 70% 80%, var(--barra) 80%);
}
.sigla.laranja {
  border-radius: 0 7px 7px 0; padding-left: 22px;
  background: linear-gradient(248deg, var(--laranja-1, #ff7a2a) 0 58%, var(--laranja-2, #d4561a) 58% 70%, var(--laranja-3, #7a2c0c) 70% 80%, var(--barra) 80%);
}
.gols {
  background: var(--barra); color: #fff; min-width: 40px; display: grid; place-items: center;
  font-size: 36px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
}
.gols.pulo { animation: pulo 0.6s ease; }
@keyframes pulo { 40% { transform: scale(1.45); color: var(--flash); } }
/* medalhão central (marca/selos/PLACAR.md): anel Ameixa + disco Flash + bola, 76 px, vazando ~17 px
   acima e abaixo da faixa; o anel já vem no SVG */
.selo { background: var(--barra); width: 66px; position: relative; z-index: 1; }
.selo i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; }
.selo img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }
.aba {
  /* o topo fica livre para o medalhão, que vaza ~17 px para dentro da aba */
  margin-top: -2px; min-width: 120px; padding: 17px 14px 6px; border-radius: 0 0 12px 12px;
  background: var(--aba); color: var(--ameixa);
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  font-weight: 800; font-variant-numeric: tabular-nums;
}
#periodo { font-size: 13px; letter-spacing: 0.06em; opacity: 0.8; }
#relogio { font-size: 22px; line-height: 1; }
#relogio:empty { display: none; }
#acrescimo {
  align-self: center; background: #3ddc84; color: #08311a; border-radius: 6px;
  padding: 1px 6px; font-size: 13px; line-height: 1.2;
}
#acrescimo.anuncio { animation: pulo 0.6s ease 2; }
.aba.prorrogacao #relogio { color: var(--flash); }

.barra {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 6px; padding: 8px;
  background: var(--vidro); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 999px; max-width: calc(100vw - 32px);
}
.redondo, .emote {
  width: 44px; height: 44px; border-radius: 50%; font-size: 20px;
  background: rgba(255, 255, 255, 0.12); display: grid; place-items: center; flex: none;
}
.emote { background: transparent; }
.redondo:active, .emote:active { transform: scale(0.9); }
.redondo.desligado { background: #e5484d; }
/* ícones em traço: a variação .off (barra ou X) aparece com o botão desligado/mudo */
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ic .off { display: none; }
.desligado .ic .off, .mudo .ic .off { display: inline; }
.mudo .ic .on { display: none; }
#btn-som .ic, #btn-tela .ic { width: 18px; height: 18px; }
#btn-tela { width: 32px; height: 32px; padding: 0; justify-content: center; }
#turbo .raio { display: none; } /* no PC o turbo mostra o número; o raio é do celular */
.divisor { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.2); margin: 0 2px; flex: none; }

/* ---------- minimapa ---------- */
/* PC: centrado logo acima da barra de baixo */
#minimapa {
  position: absolute; left: 50%; transform: translateX(-50%); width: 180px; aspect-ratio: 3 / 2;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 70px);
  background: rgba(36, 9, 47, 0.12); border-radius: 8px; pointer-events: none; opacity: 0.9;
}
/* ---------- resumo do intervalo e do fim de jogo ---------- */
/* abaixo do placar, sem cobrir a barra; rola por dentro em tela baixa */
#resumo {
  position: fixed; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; padding: 0 16px;
  top: calc(max(12px, env(safe-area-inset-top)) + 104px); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 70px);
  pointer-events: none;
}
#resumo[hidden] { display: none; }
.resumo-cartao {
  pointer-events: auto; width: min(520px, 100%); max-height: 100%; overflow-y: auto; align-self: flex-start;
  background: rgba(36, 9, 47, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 20px; padding: 14px 18px 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(250, 248, 245, 0.08);
  display: flex; flex-direction: column; gap: 10px;
}
.resumo-topo { display: flex; justify-content: center; position: relative; }
.resumo-topo .tag { background: var(--flash); color: var(--ameixa); border-radius: 6px; padding: 2px 12px; font: italic 900 18px var(--titulo); text-transform: uppercase; letter-spacing: 0.04em; }
.resumo-min { position: absolute; right: -6px; top: -4px; width: 32px; height: 32px; border-radius: 50%; background: rgba(250, 248, 245, 0.1); font-size: 16px; }
.resumo-placar { display: flex; align-items: center; justify-content: center; gap: 12px; font: italic 900 46px/1 var(--titulo); font-variant-numeric: tabular-nums; }
.resumo-placar i { font-size: 28px; opacity: 0.6; }
.resumo-placar .sigla { font-size: 20px; padding: 4px 10px; border-radius: 4px; }
.resumo-placar .sigla.azul { background: var(--azul); } .resumo-placar .sigla.laranja { background: var(--laranja); }
.resumo-vencedor { margin: 0; text-align: center; font: italic 900 26px/1.05 var(--titulo); text-transform: uppercase; }
.resumo-gols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.resumo-gols ul { list-style: none; margin: 0; padding: 0 0 0 10px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; border-left: 3px solid var(--azul); }
.resumo-gols ul.t1 { border-color: var(--laranja); }
.resumo-gols li { display: flex; gap: 6px; align-items: baseline; }
.resumo-gols li.vazio { opacity: 0.5; }
.resumo-gols .min { font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0.75; min-width: 34px; }
.resumo-gols small, .resumo-jogadores small, .cmp small { display: block; font-size: 11px; opacity: 0.6; font-weight: 500; }
.resumo-numeros { display: flex; flex-direction: column; gap: 8px; }
.cmp { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; row-gap: 3px; text-align: center; font-size: 13px; }
.cmp b { font-size: 18px; font-variant-numeric: tabular-nums; } .cmp b:first-child { text-align: left; } .cmp b:nth-child(3) { text-align: right; }
.cmp span { opacity: 0.8; }
.cmp small { display: inline; margin-left: 4px; }
.cmp i { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--azul) calc(var(--p) * 100%), var(--laranja) 0); }
.resumo-cartao h3 { margin: 4px 0 0; font: italic 800 16px var(--titulo); text-transform: uppercase; opacity: 0.8; }
.resumo-jogadores { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.resumo-jogadores th { font-weight: 600; opacity: 0.6; font-size: 12px; padding: 0 4px 4px; text-align: center; cursor: help; }
.resumo-jogadores th:first-child, .resumo-jogadores td:first-child { text-align: left; }
.resumo-jogadores td { padding: 5px 4px; text-align: center; border-top: 1px solid rgba(250, 248, 245, 0.08); }
.resumo-jogadores td:first-child { border-left: 3px solid var(--azul); padding-left: 8px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resumo-jogadores tr.t1 td:first-child { border-left-color: var(--laranja); }
.resumo-jogadores tr.eu td { background: rgba(250, 248, 245, 0.07); font-weight: 700; }
.resumo-jogadores td small { display: inline; margin-left: 3px; }
/* botões presos no rodapé do cartão: sempre à vista, mesmo com a lista de jogadores rolando */
.resumo-acoes {
  display: flex; flex-direction: column; gap: 8px; margin: 4px -18px -16px; padding: 10px 18px 14px;
  position: sticky; bottom: -16px; background: rgba(36, 9, 47, 0.97); border-top: 1px solid rgba(250, 248, 245, 0.08);
}
#resumo-ok { font-variant-numeric: tabular-nums; }
#resumo-ok.pronto { background: #2fbf71; color: #fff; }
#som { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 16px; padding: 14px 20px; }

#chutar {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px);
  width: 84px; height: 84px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: conic-gradient(#ffd84d calc(var(--p, 0) * 360deg), var(--vidro) 0);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 5px rgba(20, 24, 38, 0.55); touch-action: none;
}
#chutar span { font-size: 26px; line-height: 1; }
#chutar.alcance { box-shadow: inset 0 0 0 5px rgba(20, 24, 38, 0.55), 0 0 0 3px #3ddc84; }

/* ---------- quem entrou e saiu (canto inferior direito, acima do turbo) ---------- */
#entradas { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px);
  margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; z-index: 26; max-width: min(320px, 60vw); }
#entradas.toque { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 184px); }
#entradas li { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; background: var(--vidro); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 13px; font-weight: 600; color: var(--branco); animation: entra-aviso 0.25s ease-out; transition: opacity 0.4s, transform 0.4s; }
#entradas li::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #3ddc84; }
#entradas li.saiu { color: rgba(250, 248, 245, 0.75); }
#entradas li.saiu::before { background: #ff7a7a; }
#entradas li.sumindo { opacity: 0; transform: translateX(12px); }
@keyframes entra-aviso { from { opacity: 0; transform: translateX(16px); } }

/* ---------- turbo ---------- */
#turbo {
  position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  width: 64px; height: 64px; border-radius: 50%; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  background: conic-gradient(#ff7a1a calc(var(--b, 0) * 360deg), var(--vidro) 0);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 5px rgba(20, 24, 38, 0.55); touch-action: none; pointer-events: none;
}
#turbo b { font-size: 19px; font-variant-numeric: tabular-nums; }
#turbo small { font-size: 10px; font-weight: 600; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.04em; }
#turbo.ativo { box-shadow: inset 0 0 0 5px rgba(20, 24, 38, 0.55), 0 0 0 3px #ffd84d, 0 0 18px #ff7a1a; }
/* no celular vira botão, ao lado do chute */
#turbo.toque {
  pointer-events: auto; right: 112px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 86px);
}

/* ---------- contagem 3-2-1 ---------- */
#contagem {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font: italic 900 130px/1 var(--titulo); pointer-events: none;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}
#contagem.flash { color: var(--flash); }
#contagem.pulsa { animation: conta 0.9s ease-out; }
@keyframes conta { 0% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); } }

/* ---------- replay do gol ---------- */
#btn-replay {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(var(--topo-h, 108px) + 10px); background: var(--flash); color: var(--ameixa); font-size: 15px;
  animation: chama 1.2s ease-in-out infinite;
}
@keyframes chama { 50% { box-shadow: 0 0 0 6px rgba(255, 79, 154, 0.35); } }
#replay { position: fixed; inset: 0; pointer-events: none; }
#replay::before, #replay::after { /* tarjas de cinema */
  content: ""; position: absolute; left: 0; right: 0; height: 9vh; background: #000;
}
#replay::before { top: 0; } #replay::after { bottom: 0; }
.faixa-replay {
  position: absolute; left: 16px; top: calc(9vh + 14px); z-index: 1;
  display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.faixa-replay .tag { background: var(--flash); color: var(--ameixa); border-radius: 6px; padding: 2px 10px; letter-spacing: 0.06em; font: italic 900 18px var(--titulo); }
.acoes-replay {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(9vh + 14px); z-index: 1;
  display: flex; gap: 8px; pointer-events: auto; flex-wrap: wrap; justify-content: center; width: max-content; max-width: calc(100vw - 32px);
}
body.em-replay #hud, body.em-replay #joystick, body.em-replay #resumo, body.em-replay #toast { display: none; }

/* ---------- frases rápidas ---------- */
#frases {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 72px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px;
  background: var(--vidro); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 18px; width: min(340px, calc(100vw - 32px)); z-index: 2;
}
/* emotes do celular: painel aberto pelo 👋 da barra lateral */
#emotes {
  position: absolute; display: flex; gap: 2px; padding: 6px; z-index: 2;
  background: var(--vidro); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 18px;
}
#emotes .emote { width: 46px; height: 46px; font-size: 24px; }
#btn-emotes { display: none; } /* no PC os emotes ficam direto na barra */
#frases button {
  background: rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 10px 12px;
  font-weight: 600; font-size: 14px; text-align: left; display: flex; gap: 8px; align-items: center;
}
#frases button:active { transform: scale(0.96); }
#frases button.foco { background: rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 0 2px #fff; }
#frases kbd { font: inherit; font-size: 11px; opacity: 0.6; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 5px; padding: 0 5px; }
#feed {
  position: absolute; left: max(16px, env(safe-area-inset-left)); top: calc(max(12px, env(safe-area-inset-top)) + 54px);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; pointer-events: none;
}
#feed div {
  background: var(--vidro); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 12px; padding: 6px 12px; font-size: 13px; transition: opacity 0.5s;
  border-left: 4px solid var(--cor, #fff); max-width: 60vw;
}
#feed div b { font-weight: 700; margin-right: 6px; }

/* ---------- joystick ---------- */
#joystick {
  position: fixed; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); border: 2px solid rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
#manche {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; top: max(22%, calc(var(--topo-h, 0px) + 12px)); transform: translate(-50%, -10px) scale(0.9);
  background: var(--vidro); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 12px 20px; border-radius: 16px; font-weight: 700; font-size: 18px; text-align: center;
  opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; max-width: calc(100vw - 32px); white-space: pre-line;
}
#toast.visivel { opacity: 1; transform: translate(-50%, 0) scale(1); }
#toast.gol { font: italic 800 30px/1.15 var(--titulo); text-transform: uppercase; background: rgba(36, 9, 47, 0.86); }
#toast .grito { display: block; color: var(--flash); font-weight: 900; font-size: 52px; line-height: 1; }

/* ---------- entrada ---------- */
.overlay {
  /* flex + margin auto no cartão: centraliza e, se não couber (tela baixa), rola sem cortar o topo */
  position: fixed; inset: 0; display: flex; overflow-y: auto; padding: clamp(8px, 2vh, 16px);
  background: linear-gradient(160deg, rgba(36, 9, 47, 0.78), rgba(11, 10, 13, 0.9));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cartao {
  margin: auto; width: min(380px, 100%); background: var(--ameixa); color: var(--branco); border-radius: 24px;
  padding: clamp(14px, 3vh, 28px) 24px clamp(12px, 2.4vh, 20px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(250, 248, 245, 0.08);
  /* tudo encolhe com a altura da tela (vh) para o cartão caber sem rolar; ajustaEntrada() no main.js
     ainda reduz o zoom se mesmo assim não couber */
  --gap: clamp(6px, 1.6vh, 14px);
  display: flex; flex-direction: column; gap: var(--gap);
}
.cartao .col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
/* tela baixa e larga: marca e nome à esquerda, opções e botões à direita */
/* (só o cartão de entrada, que tem as duas colunas; Início, assistente e convite seguem em coluna única) */
@media (min-width: 700px) and (max-height: 660px) {
  #form-entrada { width: min(760px, 100%); flex-direction: row; gap: 28px; }
  #form-entrada .col { flex: 1; }
  .col-marca { justify-content: center; }
}
/* idioma: bandeiras pequenas centralizadas embaixo da página, fora do cartão; a escolhida ganha o anel Flash */
.idiomas {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; gap: 8px; z-index: 1;
}
/* reserva a faixa de baixo para as bandeiras, que ficam centralizadas fora do cartão */
#inicio, #salas, #criar { padding-bottom: calc(max(14px, env(safe-area-inset-bottom)) + 44px); }
/* Início, Salas e Nova sala: bordas generosas em volta do cartão, que acompanha a largura da janela */
#inicio, #salas, #criar { padding-left: clamp(8px, 6vw, 96px); padding-right: clamp(8px, 6vw, 96px); padding-top: clamp(8px, 4vh, 40px); }
.idiomas button {
  width: 21px; height: 15px; padding: 0; border-radius: 3px; overflow: hidden; background: none;
  opacity: 0.5; filter: saturate(0.7); transition: opacity 0.15s, box-shadow 0.15s;
}
.idiomas button:hover { opacity: 0.85; }
.idiomas button.ativo { opacity: 1; filter: none; box-shadow: 0 0 0 1.5px var(--ameixa), 0 0 0 3px var(--flash); }
.idiomas img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* rodapé (Instagram | ©): no canto de baixo à direita, na linha das bandeiras */
.rodape-site {
  position: fixed; right: clamp(12px, 2vw, 28px); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 1;
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(250, 248, 245, 0.5);
}
.rodape-site a { display: flex; color: inherit; transition: color 0.15s; }
.rodape-site a:hover, .rodape-site a:focus-visible { color: var(--flash); outline: none; }
.rodape-site svg { width: 17px; height: 17px; }
.logo { width: clamp(36px, 8vh, 72px); height: clamp(36px, 8vh, 72px); margin: 0 auto -4px; display: block; }
/* wordmark: Barlow Condensed 900 itálico, a barra em Flash */
.marca { margin: 0; text-align: center; font: italic 900 clamp(30px, 5.2vh, 44px)/1 var(--titulo); letter-spacing: 0.01em; }
.marca span { color: var(--flash); }
.sub { margin: -4px 0 0; text-align: center; color: rgba(250, 248, 245, 0.7); font-size: clamp(13px, 1.8vh, 14px); line-height: 1.35; }
.cartao label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: rgba(250, 248, 245, 0.7); }
.cartao input {
  font: inherit; font-size: 16px; color: var(--branco); padding: clamp(8px, 1.4vh, 12px) 14px; border-radius: 12px;
  background: rgba(250, 248, 245, 0.06); border: 1.5px solid rgba(250, 248, 245, 0.16);
  outline: none; user-select: text; -webkit-user-select: text;
}
.cartao input::placeholder { color: rgba(250, 248, 245, 0.4); }
.cartao input:focus { border-color: var(--flash); }
.cores { display: flex; justify-content: center; gap: 10px; }
.cores button { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15); }
.cores button.ativo { box-shadow: 0 0 0 3px var(--ameixa), 0 0 0 5px var(--branco); }
.times { display: flex; background: rgba(250, 248, 245, 0.07); border-radius: 12px; padding: 3px; }
.times button { flex: 1; padding: clamp(6px, 1.1vh, 9px) 4px; border-radius: 9px; background: transparent; color: rgba(250, 248, 245, 0.65); font-weight: 600; font-size: 14px; }
.times button.ativo { background: var(--branco); color: var(--ameixa); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.times button.azul.ativo { background: var(--azul); color: var(--azul-tx, #fff); }
.times button.laranja.ativo { background: var(--laranja); color: var(--laranja-tx, #fff); }
.bots { display: flex; flex-direction: column; gap: 8px; }
#formatos button, #niveis button { font-size: 13px; }
#modo-dica { margin-top: -6px; }
.acoes { display: flex; flex-direction: column; gap: clamp(6px, 1vh, 8px); }
/* botão primário da marca: Flash com texto Ameixa, cantos de 6 px (Azul/Laranja só nos times) */
.primario, .secundario { padding: clamp(9px, 1.5vh, 13px); border-radius: 6px; font-weight: 700; font-size: 16px; }
.primario { background: var(--flash); color: var(--ameixa); }
.secundario { background: rgba(250, 248, 245, 0.1); color: var(--branco); }
.primario:disabled, .secundario:disabled { opacity: 0.6; cursor: wait; }
.mini { margin: 0; text-align: center; font-size: 12px; color: rgba(250, 248, 245, 0.5); }

#caixa-video { position: fixed; left: 0; top: 0; width: 2px; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; }
#caixa-video video { width: 2px; height: 2px; }

@media (max-width: 520px) {
  .chip { padding: 7px 11px; font-size: 13px; }
  #copiar { font-size: 0; gap: 0; }
  #copiar::before { content: "🔗"; font-size: 16px; }
  .redondo, .emote { width: 40px; height: 40px; font-size: 18px; }
  .barra { gap: 2px; }
  .topo { align-items: flex-start; }
  .direita { flex-direction: column; align-items: flex-end; }
  .direita { margin-top: 14px; }
  .partida .chip { font-size: 12px; padding: 6px 10px; }
  /* chip da sala em pé (pessoas em cima, ping embaixo), espelhando os botões da direita */
  #sala-info { flex-direction: column; gap: 2px; border-radius: 12px; padding: 5px 8px; }
  /* o histórico de frases desce para baixo do placar, sem cobri-lo */
  #feed { top: calc(var(--topo-h, 120px) + 8px); }
}
/* placar compacto: tela estreita (celular em pé) ou baixa (celular deitado) */
@media (max-width: 520px), (max-height: 500px) {
  .faixa { height: 34px; }
  .sigla { font-size: 15px; padding: 0 10px; }
  .sigla.azul { padding-right: 14px; } .sigla.laranja { padding-left: 14px; }
  .gols { font-size: 26px; min-width: 30px; }
  .selo { width: 50px; } .selo i { width: 60px; height: 60px; }
  .aba { min-width: 96px; padding: 14px 10px 5px; }
  .placar { padding-top: 12px; }
  #relogio { font-size: 16px; }
}
@media (max-width: 520px) {
  /* tela estreita sem toque: o medidor de turbo sobe para não cobrir a barra */
  #turbo:not(.toque) { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 70px); }
}
@media (max-width: 420px) {
  #sala-nome { display: none; } /* o placar precisa do espaço; fica só o contador de pessoas */
}
@media (max-width: 400px) {
  .redondo, .emote { width: 37px; height: 37px; font-size: 17px; }
  .barra { padding: 6px; }
  #contagem { font-size: 96px; }
}

/* ---------- celular (toque) ---------- */
/* barra vira coluna colada na borda direita, em cima do chute; turbo na diagonal à esquerda */
@media (pointer: coarse) {
  :root {
    --lado: max(16px, env(safe-area-inset-right)); --fundo: max(16px, env(safe-area-inset-bottom));
    --chute: 84px; --bt: 38px; --coluna: calc(var(--bt) + 8px);
  }
  /* 🔊, 🔗 e tela cheia: botões redondos do tamanho do polegar */
  #btn-som, #copiar, #btn-tela { width: 40px; height: 40px; padding: 0; justify-content: center; }
  #btn-som .ic, #btn-tela .ic { width: 20px; height: 20px; }
  #copiar { font-size: 0; gap: 0; }
  #copiar::before { /* ícone de link em traço, no mesmo estilo dos outros */
    content: ""; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3.2-3.2a4.5 4.5 0 0 0-6.4-6.4L12 5.6M14 10a4.5 4.5 0 0 0-6.4 0l-3.2 3.2a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3.2-3.2a4.5 4.5 0 0 0-6.4-6.4L12 5.6M14 10a4.5 4.5 0 0 0-6.4 0l-3.2 3.2a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .barra {
    left: auto; transform: none; flex-direction: column; gap: 4px; padding: 4px; border-radius: 14px 0 0 14px;
    right: env(safe-area-inset-right); /* encostada na borda (no deitado, logo depois do notch) */
    bottom: calc(var(--fundo) + var(--chute) + 14px); max-width: none;
  }
  .barra .emote, .barra .divisor { display: none; }
  .barra .redondo { width: var(--bt); height: var(--bt); border-radius: 10px; background: rgba(250, 248, 245, 0.12); font-size: 18px; }
  .barra .redondo .ic { width: 19px; height: 19px; }
  .barra .redondo.desligado { background: #e5484d; }
  #btn-emotes { display: grid; }
  /* painéis de frases e de emotes abrem à esquerda da barra, acima do turbo */
  #frases, #emotes {
    left: auto; transform: none;
    right: calc(env(safe-area-inset-right) + var(--coluna) + 10px);
    bottom: calc(var(--fundo) + var(--chute) + 24px);
  }
  #frases { width: min(320px, calc(100vw - 130px)); }

  /* chute (visual de sempre) no canto, turbo na diagonal, onde o polegar alcança */
  #chutar { bottom: var(--fundo); width: var(--chute); height: var(--chute); }
  /* turbo logo acima do chute, um pouco para a esquerda (encostado na coluna) */
  #turbo.toque { right: calc(env(safe-area-inset-right) + var(--coluna) + 6px); bottom: calc(var(--fundo) + var(--chute) + 2px); }
  /* minimapa no centro de baixo, ao lado do chute */
  #minimapa { width: min(150px, calc(100vw - 2 * (var(--lado) + var(--chute) + 12px))); bottom: var(--fundo); }

}
/* botões de 40 px centrados na faixa do placar compacto */
@media (pointer: coarse) and (max-width: 520px), (pointer: coarse) and (max-height: 500px) {
  .direita { margin-top: 9px; }
}
/* deitado (tela baixa): a coluna encolhe para não encostar nos botões do topo */
@media (pointer: coarse) and (max-height: 500px) {
  :root { --bt: 34px; --chute: 76px; }
  .barra { gap: 3px; }
  .barra .redondo { font-size: 16px; }
  .barra .redondo .ic { width: 17px; height: 17px; }
  #minimapa { width: 160px; }
}
/* celular: avisos e gritos de ponto menores e embaixo, entre o joystick e o botão de ação (no meio cobriam o jogo) */
@media (pointer: coarse) {
  #toast {
    top: auto; bottom: calc(var(--fundo) + 4px); transform: translate(-50%, 10px) scale(0.9);
    padding: 6px 12px; border-radius: 12px; font-size: 13px;
    max-width: min(360px, calc(100vw - 2 * (var(--lado) + var(--chute) + 12px)));
  }
  #toast.gol { font-size: 16px; }
  #toast .grito { font-size: 26px; }
}
/* celular: o "Rever e salvar sua cesta" sai do meio do campo e vai, pequeno, para o canto de baixo à esquerda */
@media (pointer: coarse) {
  #btn-replay {
    left: max(16px, env(safe-area-inset-left)); transform: none; top: auto; bottom: var(--fundo);
    font-size: 12px; padding: 6px 11px; gap: 6px;
  }
}
/* celular: placar menor, para não tapar o jogo (o computador fica como está) */
@media (pointer: coarse) { .placar { zoom: 0.8; } }
@media (pointer: coarse) and (max-height: 500px) { .placar { zoom: 0.68; } }
@media (pointer: coarse) and (max-height: 340px) {
  :root { --bt: 30px; --chute: 72px; }
}

/* ============================================================ telas de sala (ui/ e arena/org.js, lobby.js) */
/* o cartão de entrada não aparece mais: Início, Salas e Nova sala escolhem tudo e a arena entra sozinha */
html:not(.convite) #entrada { display: none !important; }
/* link de convite: o cartão pede só o nome e o time (a posição e a cor vêm do que estava guardado) */
html.convite #entrada .sub, html.convite #cores, html.convite #funcoes, html.convite #modos, html.convite #opcoes-bots,
html.convite #modo-dica, html.convite #entrada button[data-cam="1"] { display: none !important; }
html.convite #entrada .cartao { width: min(380px, 100%); flex-direction: column; }
html:not(.convite) .so-convite { display: none !important; }
.login-convite { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.fixa { display: none !important; }
#sala-label { white-space: pre-line; }
.botao-link { display: block; text-align: center; text-decoration: none; }
.titulo-modal { margin: 0; text-align: center; font: italic 900 clamp(24px, 4vh, 32px)/1.05 var(--titulo); text-transform: uppercase; }
.rotulo { margin: 4px 0 -2px; font-size: 13px; font-weight: 700; color: rgba(250, 248, 245, 0.7); }
.rotulo small { font-weight: 500; opacity: 0.7; }
.erro { margin: 0; text-align: center; color: #ff8a8a; font-size: 14px; font-weight: 600; }
.acoes.lado { flex-direction: row; }
.acoes.lado > * { flex: 1; }
.link-acao { background: none; color: var(--flash); font-weight: 700; font-size: 14px; padding: 4px; text-decoration: underline; text-underline-offset: 3px; }
.link-acao.perigo, .perigo { color: #ff8a8a; }
.cartao.largo { width: min(540px, 100%); }
.cartao { position: relative; }
.voltar-inicio { align-self: flex-start; color: rgba(250, 248, 245, 0.6); font-size: 13px; text-decoration: none; font-weight: 600; }
.voltar-inicio:hover { color: var(--branco); }
.times button:disabled { opacity: 0.35; cursor: not-allowed; }
.assistente .times button, .gaveta .times button { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Início */
.cartao.inicio .acoes { gap: 10px; }
.cartao.inicio .acoes > * { font-size: 17px; padding: 14px; }
.linha-codigo { display: flex; gap: 8px; }
.linha-codigo input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.linha-codigo .primario { padding: 0 18px; }
.minhas-salas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.minhas-salas .mini { width: 100%; }
.minhas-salas .chip { text-decoration: none; color: var(--branco); font-size: 13px; }

/* assistente */
.passos { display: flex; gap: 6px; justify-content: center; }
.passos i { width: 28px; height: 4px; border-radius: 2px; background: rgba(250, 248, 245, 0.15); }
.passos i.feito { background: var(--flash); }
.opcoes-grandes { display: flex; flex-direction: column; gap: 8px; }
.opcao { text-align: left; padding: 12px 14px; border-radius: 12px; background: rgba(250, 248, 245, 0.06); box-shadow: inset 0 0 0 1.5px rgba(250, 248, 245, 0.1); display: flex; flex-direction: column; gap: 2px; }
.opcao b { font-size: 16px; }
.opcao small { font-size: 13px; opacity: 0.65; }
.opcao.ativo { box-shadow: inset 0 0 0 2px var(--flash); background: rgba(255, 79, 154, 0.1); }
.opcao[data-mode="em-breve"] { opacity: 0.45; cursor: not-allowed; }

/* janelas (convite, histórico, avisos) */
.modal { z-index: 60; }
.fechar-modal { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(250, 248, 245, 0.1); font-size: 15px; }
.modal .cartao { max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal .sub { margin: 0; text-align: center; color: rgba(250, 248, 245, 0.75); font-size: 15px; }

/* convite */
.convite { display: flex; flex-direction: column; gap: 10px; }
.convite-topo { display: flex; gap: 16px; align-items: center; }
.qr { width: 132px; height: 132px; flex: none; background: #fff; border-radius: 12px; overflow: hidden; }
.qr:empty { background: rgba(250, 248, 245, 0.08); }
.qr svg { width: 100%; height: 100%; display: block; }
.codigo-grande { margin: 0; white-space: nowrap; font: italic 900 clamp(24px, 6.5vw, 34px)/1 var(--titulo); letter-spacing: 0.04em; color: var(--flash); user-select: all; -webkit-user-select: all; }
.convite-topo .mini { text-align: left; }
.linha-link { display: flex; gap: 8px; }
.linha-link input { flex: 1; min-width: 0; font-size: 13px !important; }
.linha-link button { padding: 0 16px; }
.novo-convite { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(250, 248, 245, 0.05); }
.lista-convites summary { cursor: pointer; font-size: 13px; font-weight: 600; opacity: 0.75; }
.lista-convites ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.lista-convites li { display: flex; align-items: center; gap: 8px; }
.lista-convites li span { flex: 1; opacity: 0.7; }
.lista-convites li.vencido { opacity: 0.45; }
.admin-link { padding: 12px; border-radius: 12px; background: rgba(255, 79, 154, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 79, 154, 0.3); display: flex; flex-direction: column; gap: 6px; }
.admin-link .mini { text-align: left; }
.caixa-convite { margin-top: 4px; }

/* histórico */
.rankings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ranking h3, .modal h3 { margin: 4px 0; font: italic 800 16px var(--titulo); text-transform: uppercase; opacity: 0.85; }
.ranking ol { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.ranking li span { display: inline-block; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ranking li b { float: right; }
.lista-jogos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-jogos li { padding: 8px 10px; border-radius: 10px; background: rgba(250, 248, 245, 0.05); font-size: 13px; }
.jogo-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jogo-linha .quando { opacity: 0.6; min-width: 120px; }
.placar-mini { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.placar-mini .sigla { font-size: 11px; padding: 2px 6px; border-radius: 3px; font-style: normal; }
.placar-mini .sigla.azul { background: var(--azul); } .placar-mini .sigla.laranja { background: var(--laranja); }
.gols-linha, .mvp-linha { margin: 4px 0 0; opacity: 0.85; }
.gols-linha .t0 { color: color-mix(in srgb, var(--azul) 70%, #fff); } .gols-linha .t1 { color: color-mix(in srgb, var(--laranja) 70%, #fff); }
@media (max-width: 520px) { .rankings { grid-template-columns: 1fr; } }

/* gaveta do organizador */
#btn-org { position: relative; font-size: 15px; padding: 6px 10px; }
#btn-org.ativo { background: var(--flash); color: var(--ameixa); }
#btn-org .contador { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--flash); color: var(--ameixa); font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
.gaveta {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(340px, 100vw); z-index: 40; overflow-y: auto;
  background: rgba(36, 9, 47, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4), inset 1px 0 0 rgba(250, 248, 245, 0.08);
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 24px 16px;
  display: flex; flex-direction: column; gap: 14px; user-select: none;
}
.gaveta-topo { display: flex; justify-content: space-between; align-items: center; font: italic 900 20px var(--titulo); text-transform: uppercase; }
.gaveta-topo button { width: 32px; height: 32px; border-radius: 50%; background: rgba(250, 248, 245, 0.1); }
.gaveta section { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(250, 248, 245, 0.08); }
.gaveta h3 { margin: 0; font: italic 800 15px var(--titulo); text-transform: uppercase; letter-spacing: 0.03em; display: flex; justify-content: space-between; }
.gaveta h3 small { font: 600 12px Barlow, sans-serif; text-transform: none; opacity: 0.6; }
.gaveta .botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.gaveta .botoes > * { flex: 1 1 auto; padding: 9px 12px; font-size: 14px; }
.gaveta .times button { font-size: 13px; }
.gaveta ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.gaveta li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; }
.bola { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
.gaveta .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gaveta .nome small { opacity: 0.55; }
.acoes-pessoa { display: flex; gap: 3px; }
.acoes-pessoa button, .pedidos button { width: 30px; height: 30px; border-radius: 8px; background: rgba(250, 248, 245, 0.08); font-size: 14px; }
.acoes-pessoa button:hover { background: rgba(250, 248, 245, 0.18); }
.acoes-pessoa button:disabled { opacity: 0.3; cursor: not-allowed; }
.pedidos .ok { background: #2fbf71; color: #fff; } .pedidos .nao { background: #e5484d; color: #fff; }
.interruptor { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--flash); }
@media (max-width: 520px) { .gaveta { width: 100vw; } }

/* partida pausada */
#pausa {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none;
  background: rgba(36, 9, 47, 0.88); border-radius: 18px; padding: 14px 28px; text-align: center;
  display: flex; flex-direction: column; gap: 2px; box-shadow: inset 0 0 0 2px var(--flash);
}
#pausa b { font: italic 900 40px/1 var(--titulo); color: var(--flash); }
#pausa span { font-size: 14px; font-weight: 600; opacity: 0.85; }

/* sala de espera (por cima da arena, com o 3D ao fundo) */
#lobby {
  position: fixed; inset: 0; z-index: 20; display: flex; overflow-y: auto; padding: 16px;
  padding-top: calc(max(12px, env(safe-area-inset-top)) + 100px);
  background: linear-gradient(180deg, rgba(11, 10, 13, 0.1), rgba(11, 10, 13, 0.55));
}
/* o topo do HUD (placar, 👑, som) fica clicável por cima da sala de espera */
body.em-espera #hud { z-index: 25; }
body.em-espera .barra, body.em-espera #minimapa, body.em-espera #joystick, body.em-espera #chutar,
body.em-espera #turbo, body.em-espera #partida { display: none !important; }
/* prancheta tática: os times em cada metade do campo, as vagas com a câmera de quem está nelas */
.lobby-cartao {
  margin: 0 auto auto; width: min(1180px, 100%);
  background: rgba(22, 10, 31, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 22px; padding: clamp(14px, 2.4vh, 26px) clamp(14px, 2.4vw, 30px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(250, 248, 245, 0.06);
  display: flex; flex-direction: column; gap: clamp(12px, 2vh, 20px);
}
.lobby-cartao svg { width: 1em; height: 1em; flex: none; }
.prancheta-topo { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.prancheta-topo h2 { margin: 0; min-width: 0; font: italic 900 clamp(26px, 4.4vh, 40px)/1 var(--titulo); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prancheta-topo small { color: var(--apagado); font-size: 15px; }
.convite-topo-chip { margin-left: auto; align-self: center; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 12px; background: var(--painel); font-weight: 600; letter-spacing: 0.06em; }
button.convite-topo-chip { padding: 10px 16px; letter-spacing: 0; }
.convite-topo-chip .primario { padding: 8px 14px; border-radius: 8px; font-size: 15px; letter-spacing: 0; }
.prancheta-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 330px); gap: 20px; }
.prancheta { position: relative; min-height: clamp(320px, 56vh, 560px); border-radius: 18px; overflow: hidden; color: rgba(250, 248, 245, 0.85); display: grid; grid-template-columns: 1fr 1fr; touch-action: none; }
.metade { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 10%, transparent 10% 20%), color-mix(in srgb, var(--cor0) 22%, #3f7a50); }
.metade + .metade { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 10%, transparent 10% 20%), color-mix(in srgb, var(--cor1) 22%, #5d7a3f); }
/* piso da modalidade (court.surface da ficha), com o tom do time em cada metade */
.prancheta[data-superficie="madeira"] .metade { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 5%, transparent 5% 10%), color-mix(in srgb, var(--cor0) 18%, #c98b4f); }
.prancheta[data-superficie="madeira"] .metade + .metade { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 5%, transparent 5% 10%), color-mix(in srgb, var(--cor1) 18%, #c98b4f); }
.prancheta[data-superficie="quadra"] .metade { background: color-mix(in srgb, var(--cor0) 22%, #3a4a6b); }
.prancheta[data-superficie="quadra"] .metade + .metade { background: color-mix(in srgb, var(--cor1) 22%, #3a4a6b); }
.prancheta[data-superficie="tabuleiro"] .metade { background: color-mix(in srgb, var(--cor0) 22%, #3b1f45); }
.prancheta[data-superficie="tabuleiro"] .metade + .metade { background: color-mix(in srgb, var(--cor1) 22%, #3b1f45); }
.prancheta .linhas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; pointer-events: none; }
.circulo-central { position: absolute; left: 50%; top: 50%; width: 16%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(250, 248, 245, 0.85); pointer-events: none; }
.circulo-central.com-ponto::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: currentColor; }
.placa-time { position: absolute; top: 9%; left: 5%; padding: 6px 16px; background: var(--cor); color: var(--tx, #fff); font: italic 900 clamp(22px, 3.6vh, 34px)/1 var(--titulo); text-transform: uppercase; }
.placa-time.t1 { left: auto; right: 5%; }
.lobby-cartao .vaga { --time: var(--cor0); }
.lobby-cartao .vaga.t1 { --time: var(--cor1); }
.vaga[data-arrasta] { cursor: grab; touch-action: none; user-select: none; }
.vaga[data-arrasta] video { pointer-events: none; }
.vaga.arrastando { z-index: 5; cursor: grabbing; transition: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); }
.vaga-cam { position: relative; width: clamp(64px, 12vh, 112px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--cor);
  box-shadow: 0 0 0 4px var(--time), 0 8px 20px rgba(0, 0, 0, 0.3); font: italic 900 clamp(24px, 4.4vh, 40px)/1 var(--titulo); color: var(--tx, #fff); }
.vaga.eu .vaga-cam { box-shadow: 0 0 0 4px var(--time), 0 0 0 7px var(--branco), 0 8px 20px rgba(0, 0, 0, 0.3); }
.vaga.selecionada { z-index: 4; }
.vaga.selecionada .vaga-cam { box-shadow: 0 0 0 4px var(--time), 0 0 0 8px var(--flash), 0 8px 20px rgba(0, 0, 0, 0.3); transform: scale(1.08); }
.cartao-ajustes .ajustes-lobby { display: grid; gap: 8px; margin-top: 12px; text-align: left; }
.cartao-ajustes .times button { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vaga.fantasma { opacity: 0.8; }
.vaga.fantasma .vaga-cam { box-shadow: 0 0 0 4px var(--time), 0 8px 20px rgba(0, 0, 0, 0.3); animation: pisca 2s ease-in-out infinite; }
.vaga-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vaga-cam video.espelho { transform: scaleX(-1); }
.pronto-selo { position: absolute; top: 0; right: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #2fbf71; color: #fff; font-size: 15px; box-shadow: 0 0 0 3px rgba(22, 10, 31, 0.9); }
.vaga .tirar { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--fundo-tela); color: var(--branco); font-size: 11px; display: grid; place-items: center; }
.prancheta-ferramentas { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px; border-radius: 12px; background: rgba(22, 10, 31, 0.92); }
.prancheta-ferramentas button { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; background: none; color: var(--branco); font-weight: 700; font-size: 15px; white-space: nowrap; }
.prancheta-ferramentas button:hover { background: var(--painel-2); }
.prancheta-lado { display: flex; flex-direction: column; gap: 12px; padding: clamp(14px, 2.2vh, 22px); border-radius: 18px; background: var(--painel); min-width: 0; }
.prancheta-lado .rotulo { margin: 4px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(250, 248, 245, 0.75); }
.prancheta-lado .rotulo small { text-transform: none; letter-spacing: 0; }
.linha-chave { display: flex; align-items: center; gap: 12px; background: none; color: var(--branco); font-size: 17px; font-weight: 600; padding: 2px 0; text-align: left; }
.linha-chave span { flex: 1; }
.linha-chave > i { position: relative; width: 52px; height: 30px; flex: none; border-radius: 999px; background: var(--painel-2); transition: background 0.15s; }
.linha-chave > i::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #9c8aa8; transition: transform 0.15s, background 0.15s; }
.linha-chave > i.on { background: var(--flash); }
.linha-chave > i.on::after { transform: translateX(22px); background: var(--branco); }
.medidor { height: 5px; border-radius: 3px; background: rgba(250, 248, 245, 0.1); overflow: hidden; }
.medidor i { display: block; height: 100%; width: 0; background: #3ddc84; transition: width 0.08s; }
.seg.posicao { grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--painel-2); }
.seg.posicao button { display: flex; align-items: center; justify-content: center; gap: 8px; background: none; font-size: 15px; }
.seg.posicao button.ativo { background: var(--branco); color: var(--ameixa); }
.lista-prontos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 30vh; }
.lista-prontos li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; }
.lista-prontos li > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-prontos li > i { width: 30px; height: 30px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(250, 248, 245, 0.35); display: grid; place-items: center; font-size: 16px; }
.lista-prontos li > i.ok { background: #2fbf71; box-shadow: none; color: #fff; }
.prancheta-lado .mini { margin-top: auto; text-align: left; font-size: 13px; line-height: 1.5; }
.prancheta-rodape { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }
.prancheta-rodape .mini { margin-right: auto; text-align: left; }
.prancheta-rodape .secundario, .prancheta-rodape .contorno { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-radius: 12px; font-size: 17px; font-weight: 700; background: var(--painel); }
.prancheta-rodape .contorno.marcado { background: #2fbf71; border-color: #2fbf71; color: #fff; }
.prancheta-rodape .botao-kickoff { align-self: auto; width: min(380px, 100%); padding: 14px; }
@media (max-width: 860px) {
  .prancheta-corpo { grid-template-columns: 1fr; }
  .prancheta { min-height: 0; aspect-ratio: 100 / 70; }
  .prancheta-ferramentas { bottom: 3%; }
  .prancheta-ferramentas button { padding: 8px; font-size: 13px; }
  .prancheta-rodape > * { flex: 1 1 auto; justify-content: center; }
  .prancheta-rodape .botao-kickoff { width: 100%; }
  .convite-topo-chip { margin-left: 0; }
}
@media (max-width: 600px) {
  .prancheta-ferramentas button { padding: 9px 12px; }
  .prancheta-ferramentas button span { display: none; } /* só o ícone; o nome fica no title */
}
.lobby-rodape .botoes button { padding: 10px 16px; }
.lobby-cartao input {
  font: inherit; font-size: 15px; color: var(--branco); padding: 8px 12px; border-radius: 10px; width: 100%;
  background: rgba(250, 248, 245, 0.06); border: 1.5px solid rgba(250, 248, 245, 0.16); outline: none; user-select: text; -webkit-user-select: text;
}
.lobby-cartao input:focus { border-color: var(--flash); }
/* Personalizar times, "cara a cara": os brasões no centro e o ajuste de cada time embaixo */
.cartao.cartao-times { width: min(1060px, 100%); padding: clamp(18px, 3.4vh, 38px) clamp(18px, 3vw, 38px); gap: clamp(14px, 2.4vh, 24px); background: #200c2b; }
.cartao-times .titulo-modal { text-align: left; }
.cartao-times svg { width: 1em; height: 1em; flex: none; }
.cara-a-cara { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(12px, 2vh, 22px) 18px; align-items: center; }
.vs { font: italic 900 clamp(34px, 6vh, 52px)/1 var(--titulo); color: rgba(250, 248, 245, 0.45); }
.brasao { display: flex; flex-direction: column; align-items: center; }
.brasao-circulo { width: clamp(120px, 22vh, 210px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--cor);
  box-shadow: 0 0 0 8px #200c2b, 0 0 0 11px var(--cor); font: italic 900 clamp(46px, 8vh, 84px)/1 var(--titulo); color: var(--tx, var(--branco)); }
.brasao-nome { margin-top: -18px; position: relative; max-width: 100%; padding: 8px 30px 6px 26px; background: var(--cor); color: var(--branco); font: italic 900 clamp(26px, 4.4vh, 40px)/1 var(--titulo);
  text-transform: uppercase; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx, var(--branco)); }
.ajuste-time { grid-row: 2; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 16px; background: rgba(0, 0, 0, 0.18); }
.ajuste-time + .ajuste-time { grid-column: 3; }
.cara-a-cara .ajuste-time:first-of-type { grid-column: 1 / 3; }
.nome-linha { display: flex; gap: 8px; }
.nome-linha input { flex: 1; min-width: 0; }
.dado { width: 52px; flex: none; border-radius: 10px; background: var(--painel-2); font-size: 22px; }
.dado:hover { background: #3c1a52; }
.ajuste-time input { font: inherit; font-size: 17px; font-weight: 600; color: var(--branco); padding: 14px 18px; border-radius: 10px; background: var(--painel-2); border: 1.5px solid transparent; outline: none; user-select: text; -webkit-user-select: text; }
.ajuste-time input:focus { border-color: var(--cor); }
.paleta, .simbolos { display: flex; flex-wrap: wrap; gap: 8px; }
.paleta button { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2); }
.paleta button.ativo { box-shadow: 0 0 0 3px #200c2b, 0 0 0 5px var(--branco); }
.paleta button:disabled { opacity: 0.2; cursor: not-allowed; }
.simbolos button { width: 34px; height: 34px; border-radius: 8px; background: none; font-size: 20px; color: rgba(250, 248, 245, 0.7); display: grid; place-items: center; filter: grayscale(0.6); opacity: 0.75; }
.simbolos button:hover { opacity: 1; filter: none; }
.simbolos button.ativo { opacity: 1; filter: none; box-shadow: inset 0 0 0 2px var(--cor); background: rgba(250, 248, 245, 0.06); }
.cara-rodape { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cara-rodape .secundario { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-radius: 12px; background: var(--painel-2); font-size: 17px; }
.cara-rodape .link-acao { color: var(--apagado); text-decoration: none; font-weight: 600; font-size: 16px; }
.cara-rodape .botao-kickoff { margin-left: auto; width: min(330px, 100%); padding: 16px; font-size: clamp(26px, 4vh, 34px); }
@media (max-width: 700px) {
  .cara-a-cara { grid-template-columns: 1fr auto 1fr; }
  .cara-a-cara .ajuste-time:first-of-type, .ajuste-time + .ajuste-time { grid-column: 1 / -1; grid-row: auto; }
  .cara-rodape .botao-kickoff { width: 100%; }
}
@media (max-width: 640px) {
  #lobby { padding-top: calc(max(12px, env(safe-area-inset-top)) + 80px); }
}

.contagem-fila { font: italic 900 26px/1 var(--titulo); color: var(--flash); font-variant-numeric: tabular-nums; }

/* ============================================================ Início, Salas e Nova sala */
/* (as três telas no estilo de transmissão: títulos em Barlow Condensed itálico, placas inclinadas, Flash nos destaques) */
:root { --fundo-tela: #160a1f; --painel: #210d2c; --painel-2: #2e1440; --linha: rgba(250, 248, 245, 0.1); --apagado: rgba(250, 248, 245, 0.6); }
.avatar {
  --tam: 40px; width: var(--tam); height: var(--tam); border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  background: var(--cor); color: #fff; font: italic 900 calc(var(--tam) * 0.42)/1 var(--titulo); letter-spacing: 0.02em; /* a cor do texto vem de avatarHtml */
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.18), 0 0 0 3px var(--ameixa), 0 0 0 5px rgba(250, 248, 245, 0.85);
}
.avatar.mini { --tam: 34px; box-shadow: none; }
.rotulo-linha { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(250, 248, 245, 0.55); }
.rotulo-linha::before, .rotulo-linha::after { content: ''; flex: 1; height: 1px; background: rgba(250, 248, 245, 0.15); }
.botoes-login { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.botoes-login button:disabled { opacity: 0.45; cursor: not-allowed; }

/* cartão grande das três telas */
.tela {
  margin: auto; width: min(1180px, 100%); display: flex; flex-direction: column; gap: clamp(12px, 2.2vh, 22px);
  background: var(--fundo-tela); border-radius: 24px; padding: clamp(16px, 3vh, 34px) clamp(16px, 3vw, 40px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(250, 248, 245, 0.06);
}
.tela svg { width: 1em; height: 1em; flex: none; }
.tela .qr svg { width: 100%; height: 100%; }
.tela .erro { text-align: left; font-size: 13px; }
.tela input:focus { outline: none; border-color: var(--flash); }
.painel { display: flex; flex-direction: column; gap: 10px; padding: clamp(14px, 2.4vh, 24px); border-radius: 18px; background: var(--painel); min-width: 0; }
.titulo-painel { margin: 0; font: italic 900 clamp(20px, 2.8vh, 26px)/1 var(--titulo); text-transform: uppercase; letter-spacing: 0.01em; }
.titulo-painel em { color: var(--flash); font-style: inherit; }
.painel p { margin: 0; color: var(--apagado); font-size: 14px; line-height: 1.5; }
.painel .rotulo { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--apagado); }
.painel hr { width: 100%; border: 0; border-top: 1px solid var(--linha); margin: 4px 0; }
.contorno { background: transparent; color: var(--branco); border: 2px solid var(--flash); border-radius: 10px; padding: 12px; font-weight: 700; font-size: 16px; }
.contorno:disabled { border-color: rgba(250, 248, 245, 0.25); color: var(--apagado); cursor: default; }
.claro { background: var(--branco); color: var(--ameixa); border-radius: 10px; font-weight: 700; padding: 0 18px; }
.linha-codigo { display: flex; gap: 8px; }
.linha-codigo input { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--branco); padding: 12px 14px; border-radius: 10px;
  background: var(--painel-2); border: 1.5px solid transparent; text-transform: uppercase; letter-spacing: 0.08em; user-select: text; -webkit-user-select: text; }
.linha-codigo input::placeholder { color: rgba(250, 248, 245, 0.35); }

/* topo de Salas e Nova sala: voltar redondo, título grande, quem joga */
.tela-cabeca { display: flex; align-items: center; gap: 16px; min-width: 0; }
.voltar-redondo { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--painel-2); color: var(--branco); font-size: 22px; }
.voltar-redondo:hover { background: #3c1a52; }
.titulo-tela { margin: 0; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font: italic 900 clamp(30px, 5vh, 46px)/1 var(--titulo); text-transform: uppercase; letter-spacing: 0.01em; overflow: hidden; }
.lapis-titulo { background: none; color: var(--apagado); font-size: 20px; padding: 6px; display: grid; }
.lapis-titulo:hover { color: var(--branco); }
.renomear input { width: 100%; font: inherit; color: var(--branco); text-transform: uppercase; background: var(--painel-2); border: 1.5px solid var(--flash); border-radius: 10px; padding: 2px 12px; user-select: text; -webkit-user-select: text; }
.eu-chip { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--branco); font-weight: 600; font-size: 16px; min-width: 0; }
.eu-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Início: escalação de TV */
.escalacao { position: relative; overflow: hidden; padding-top: 0; min-height: min(780px, 100%); }
.escalacao-topo { display: flex; justify-content: space-between; align-items: center; margin: 0 calc(-1 * clamp(16px, 3vw, 40px)); padding-right: clamp(16px, 3vw, 40px); padding-top: clamp(20px, 4vh, 40px); }
.marca-tag { display: flex; height: 54px; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.25)); }
.marca-tag-icone { width: 84px; display: grid; place-items: center; background: var(--branco); }
.marca-tag-icone img { width: 30px; height: 30px; }
.marca-tag-nome { display: flex; align-items: center; padding: 0 30px 0 22px; margin-left: -8px; background: var(--flash); color: var(--ameixa);
  font: italic 900 30px/1 var(--titulo); white-space: nowrap; clip-path: polygon(10px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.marca-tag-nome i { font-style: inherit; }
/* Início no celular: as bandeiras sobem para o cabeçalho, acima do "Pré-jogo", em vez de ficarem fixas
   embaixo (lá cobriam o botão Jogar agora); no computador continuam embaixo, centralizadas */
.topo-status { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
@media (max-width: 760px) {
  .idiomas.idiomas-topo { position: static; transform: none; }
  #inicio, #salas, #criar { padding-left: clamp(8px, 2vh, 16px); padding-right: clamp(8px, 2vh, 16px); padding-top: clamp(8px, 2vh, 16px); }
  #inicio { padding-bottom: 0; }
  /* celular: o rodapé desce para o fim da página, embaixo do cartão (fixo, cobria o conteúdo que rola) */
  #inicio, #salas, #criar { flex-wrap: wrap; }
  .rodape-site { position: static; width: 100%; justify-content: center; padding: 14px 0 max(12px, env(safe-area-inset-bottom)); }
}
.ao-vivo { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(250, 248, 245, 0.75); }
.ao-vivo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--flash); animation: pisca 1.6s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: 0.3; } }
/* servidor (região) no Início: só aparece em produção, com mais de uma região */
.regioes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.regioes:empty { display: none; }
.regioes-rotulo { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(250, 248, 245, 0.6); }
.regioes button {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: rgba(250, 248, 245, 0.08); color: rgba(250, 248, 245, 0.75); font-size: 12px; font-weight: 700;
}
.regioes button.ativo { background: rgba(250, 248, 245, 0.18); color: #faf8f5; box-shadow: 0 0 0 1.5px var(--flash); }
.regioes img { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; }
.regioes small { font-weight: 600; opacity: 0.7; }
/* no celular o seletor de servidor some: ficava logo abaixo das bandeiras de idioma e era confundido com elas
   (a região mais perto continua sendo escolhida sozinha) */
@media (max-width: 760px) { .regioes { display: none; } }
.escalacao-corpo { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) clamp(200px, 24vw, 300px); align-items: center; gap: clamp(20px, 4vw, 56px); padding: 8px 0; }
.retrato { position: relative; width: clamp(150px, min(32vh, 24vw), 360px); aspect-ratio: 1; }
.retrato-anel { width: 100%; height: 100%; border-radius: 50%; padding: 4.5%; background: var(--cor); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.avatar.retrato-bola { --tam: 100%; width: 100%; height: 100%; font-size: clamp(48px, min(11vh, 8vw), 120px); color: var(--branco) !important; background: color-mix(in srgb, var(--cor) 32%, #2a1236);
  box-shadow: inset 0 0 0 2px rgba(250, 248, 245, 0.18); color: var(--branco); }
.camisa { position: absolute; top: 3%; right: 1%; width: 24%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--branco); color: var(--ameixa);
  font: italic 900 clamp(26px, 4.6vh, 44px)/1 var(--titulo); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.escalacao-info { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.sobretitulo { margin: 0; color: var(--flash); font: italic 900 22px/1 var(--titulo); text-transform: uppercase; letter-spacing: 0.02em; }
.placa-nome { position: relative; display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 14px 42px 12px 28px; background: var(--branco); color: var(--ameixa);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.placa-nome input { min-width: 0; width: 100%; max-width: 13ch; field-sizing: content; font: italic 900 clamp(40px, min(8.5vh, 6.4vw), 84px)/0.95 var(--titulo); text-transform: uppercase; color: inherit; background: none; border: 0; padding: 0;
  user-select: text; -webkit-user-select: text; }
.placa-nome input::placeholder { color: rgba(36, 9, 47, 0.3); }
.lapis-nome { position: absolute; right: 22px; bottom: 16px; width: 20px !important; height: 20px !important; color: #b9a7c4; cursor: pointer; }
.posicoes { display: flex; margin-top: -14px; margin-left: 6px; }
.posicoes button { display: flex; align-items: center; gap: 10px; padding: 12px 24px 10px 20px; background: var(--painel-2); color: rgba(250, 248, 245, 0.75);
  font: italic 900 24px/1 var(--titulo); text-transform: uppercase; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); margin-right: -4px; }
.posicoes button.ativo { background: var(--flash); color: var(--ameixa); }
.posicoes svg { font-size: 22px; }
.posicoes.modalidades { flex-wrap: wrap; row-gap: 6px; }
.posicoes.modalidades button { font-size: 20px; padding: 10px 16px 8px 14px; gap: 8px; }
.posicoes.modalidades svg { width: 22px; height: 22px; flex: none; }
.posicoes button:disabled { opacity: 0.45; cursor: default; }
.posicoes button small { font: 600 10px/1 Barlow, sans-serif; text-transform: lowercase; opacity: 0.9; }
.cor-bola { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; color: rgba(250, 248, 245, 0.75); }
.cor-bola > span { white-space: nowrap; }
.cor-bola .cores { gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.cor-bola .cores button.ativo { box-shadow: 0 0 0 2px var(--fundo-tela), 0 0 0 4px var(--branco); }
.painel-conta { align-self: center; padding: 20px; border-radius: 18px; background: var(--painel); }
.painel-conta-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(250, 248, 245, 0.7); }
.painel-conta ul { list-style: none; margin: 0; padding: 0; }
.painel-conta li { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--linha); font-weight: 600; color: rgba(250, 248, 245, 0.92); }
.painel-conta li span:last-child { color: var(--apagado); }
.barra-acoes { align-self: center; width: min(780px, 100%); display: grid; grid-template-columns: auto 1fr auto; border-radius: 14px; overflow: hidden; background: var(--painel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.barra-salas { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 26px; background: var(--painel-2); color: var(--flash); text-decoration: none;
  font: italic 900 clamp(22px, 3.2vh, 28px)/1 var(--titulo); text-transform: uppercase; box-shadow: inset -2px 0 0 rgba(255, 79, 154, 0.35); }
.barra-salas svg { font-size: 0.75em; }
/* "Salas" com a explicação embaixo: o que tem lá (salas abertas e criar a sua) */
.barra-salas-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.barra-salas-texto small { font: normal 600 12px/1.2 Barlow, system-ui, sans-serif; text-transform: none;
  color: rgba(250, 248, 245, 0.7); white-space: nowrap; }
.barra-salas:hover { background: #3c1a52; color: var(--branco); }
.barra-codigo { display: flex; align-items: center; gap: 8px; padding: 12px; min-width: 0; }
.barra-codigo input { flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--branco); padding: 11px 12px; border-radius: 8px; background: var(--painel-2); border: 1.5px solid transparent;
  text-transform: uppercase; letter-spacing: 0.06em; user-select: text; -webkit-user-select: text; }
.barra-codigo input::placeholder { color: rgba(250, 248, 245, 0.35); text-transform: none; letter-spacing: normal; }
/* a pergunta em cima do campo explica o que é o código (sozinho, "HUD-____" não dizia nada) */
.barra-codigo-campo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.barra-codigo-campo span { font-size: 12px; font-weight: 700; color: rgba(250, 248, 245, 0.7); padding-left: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-codigo { align-items: flex-end; }
.barra-codigo button { background: none; color: var(--branco); font-weight: 700; padding: 8px; }
.barra-jogar { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 20px 40px; background: var(--flash); color: var(--ameixa);
  font: italic 900 clamp(26px, 4vh, 34px)/1 var(--titulo); text-transform: uppercase; }
.barra-jogar svg { font-size: 0.6em; }
.barra-jogar:hover, .faixa-rapido:hover, .botao-kickoff:hover:not(:disabled) { filter: brightness(1.06); }

/* ---------- Salas: lista primeiro (as abas ficam presas a .abas para não mexer na aba do relógio do placar) */
.abas { display: flex; flex-wrap: wrap; gap: 10px; }
.abas .aba { display: flex; align-items: center; gap: 10px; padding: 11px 22px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 2px var(--painel-2);
  color: rgba(250, 248, 245, 0.55); font: italic 900 22px/1 var(--titulo); text-transform: uppercase; }
.abas .aba svg { font-size: 22px; }
.abas .aba small { font: 600 12px/1 Barlow, sans-serif; text-transform: none; padding: 4px 8px; border-radius: 999px; background: var(--painel-2); }
.abas .aba.ativo { background: var(--flash); color: var(--ameixa); box-shadow: none; }
.abas .aba:disabled { cursor: default; }
.lista-corpo { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 32vw, 380px); gap: clamp(12px, 2.6vh, 22px); min-height: clamp(240px, 44vh, 520px); }
.painel-salas header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.painel-salas header small { color: var(--apagado); font-size: 13px; }
.salas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.sala-linha { display: grid; grid-template-columns: minmax(0, 1fr) 70px 120px 70px 120px; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--painel-2); }
.sala-linha.cheia { opacity: 0.55; }
.sala-nome { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sala-nome b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sala-nome small { color: var(--apagado); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sala-formato { font: italic 900 24px/1 var(--titulo); }
.sala-gente { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.bolas { display: flex; }
.bolas i { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px var(--painel-2); margin-right: -8px; }
.bolas:not(:empty) { margin-right: 8px; }
.sala-tempo { color: var(--apagado); font-size: 14px; }
.sala-linha .primario, .sala-linha .contorno { padding: 11px 10px; border-radius: 10px; font-size: 16px; }
.vazio { margin: auto 0 !important; text-align: center; padding: 30px 10px; }
.lista-lado { display: flex; flex-direction: column; gap: clamp(10px, 2.2vh, 22px); min-width: 0; }
.crie { flex: 1; }
.crie .contorno { margin-top: auto; background: var(--painel-2); }
.treino-linha { display: grid; grid-template-columns: 76px 1fr auto; gap: 8px; }
.painel-treino select { font: inherit; font-size: 14px; font-weight: 600; color: var(--branco); padding: 9px 8px; border-radius: 8px; background: var(--painel-2); border: 0; cursor: pointer; min-width: 0; }
.painel-treino select option { background: var(--ameixa); }
.painel-treino .secundario { padding: 9px 14px; border-radius: 8px; font-size: 14px; }
.faixa-rapido { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px; border-radius: 16px; background: var(--flash); color: var(--ameixa); text-align: left; }
.faixa-rapido span { font-weight: 600; font-size: 16px; }
.faixa-rapido b { display: flex; align-items: center; gap: 12px; flex: none; font: italic 900 clamp(26px, 4vh, 34px)/1 var(--titulo); text-transform: uppercase; }
.faixa-rapido b svg { font-size: 0.6em; }

/* ---------- Nova sala: campo com as vagas */
.nova-corpo { display: grid; grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) minmax(230px, 300px); gap: 20px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg.formatos { grid-template-columns: repeat(2, 1fr); }
.seg button { padding: 12px 6px; border-radius: 10px; background: var(--painel-2); color: rgba(250, 248, 245, 0.75); font-weight: 700; font-size: 16px; }
.seg.formatos button { font: italic 900 24px/1 var(--titulo); }
.seg.niveis button { font-size: 13px; padding: 9px 4px; }
.seg.niveis button:disabled { opacity: 0.35; cursor: default; }
.seg button.ativo { background: var(--branco); color: var(--ameixa); }
.seg.formatos button.ativo { background: var(--flash); }
.chave { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.chave b { display: block; font-size: 15px; }
.chave small { display: block; font-size: 13px; color: var(--apagado); margin-top: 2px; }
.chave input { position: absolute; opacity: 0; pointer-events: none; }
.chave i { position: relative; width: 50px; height: 30px; flex: none; border-radius: 999px; background: var(--painel-2); transition: background 0.15s; }
.chave i::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #9c8aa8; transition: transform 0.15s, background 0.15s; }
.chave input:checked + i { background: var(--flash); }
.chave input:checked + i::after { transform: translateX(20px); background: var(--branco); }
.chave input:focus-visible + i { box-shadow: 0 0 0 2px var(--branco); }
.campo-vagas { position: relative; min-height: 340px; border-radius: 18px; overflow: hidden; color: rgba(250, 248, 245, 0.88);
  background: repeating-linear-gradient(90deg, #4c8a4a 0 11.1%, #44803f 11.1% 22.2%); }
/* piso da modalidade (court.surface da ficha): madeira do basquete, quadra lisa da Zona */
.campo-vagas[data-superficie="madeira"] { background: repeating-linear-gradient(0deg, #c98b4f 0 5%, #d39857 5% 10%, #cd9152 10% 15%); }
.campo-vagas[data-superficie="quadra"] { background: #3a4a6b; }
.campo-vagas[data-superficie="tabuleiro"] { background: #3b1f45; }
.campo-vagas .linhas { position: absolute; inset: 5%; width: 90% !important; height: 90% !important; }
.placar-mini { position: absolute; z-index: 1; top: 5%; left: 50%; transform: translate(-50%, -50%); display: flex; border-radius: 6px; overflow: hidden; white-space: nowrap;
  font: italic 900 20px/1 var(--titulo); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); }
.placar-mini > * { padding: 8px 14px; }
.placar-mini .t0 { background: var(--azul); color: #fff; }
.placar-mini span { background: var(--fundo-tela); color: var(--branco); }
.placar-mini .t1 { background: var(--laranja); color: var(--ameixa); }
.vaga { --time: var(--azul); position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; color: var(--branco); padding: 0; }
.vaga.t1 { --time: var(--laranja); }
.vaga > i, .avatar.vaga-bola { width: clamp(52px, 9vh, 86px); height: clamp(52px, 9vh, 86px); border-radius: 50%; display: grid; place-items: center; font-style: normal; }
.vaga > i { background: rgba(20, 50, 30, 0.55); box-shadow: inset 0 0 0 3px var(--time); font-size: clamp(22px, 3.4vh, 30px); font-weight: 600; }
.vaga.bot > i { font-size: clamp(24px, 4vh, 34px); }
button.vaga:hover > i { background: rgba(20, 50, 30, 0.8); }
.avatar.vaga-bola { --tam: clamp(52px, 9vh, 86px); box-shadow: 0 0 0 3px var(--time); font-size: clamp(24px, 4vh, 36px); }
.vaga > span:not(.avatar) { padding: 3px 9px; border-radius: 5px; background: rgba(22, 10, 31, 0.85); font-size: 13px; font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vagas #convite-nova { flex: 1; display: flex; flex-direction: column; }
.convite.compacto { flex: 1; gap: 12px; }
.codigo-caixa { padding: 16px; border-radius: 12px; background: var(--painel-2); text-align: center; }
.codigo-caixa .rotulo { margin-bottom: 6px; }
.painel .compacto .codigo-grande { font-size: clamp(34px, 5.4vh, 50px); color: var(--flash); line-height: 1; }
.compacto .primario { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 10px; font-size: 17px; }
.compacto .secundario { padding: 13px; border-radius: 10px; background: var(--painel-2); }
.qr-linha { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.qr-linha .qr { width: 96px; height: 96px; border-radius: 8px; }
.qr-linha p { font-size: 13px; }
.botao-kickoff { align-self: center; width: min(480px, 100%); display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px; border-radius: 14px;
  background: var(--flash); color: var(--ameixa); font: italic 900 clamp(30px, 4.6vh, 40px)/1 var(--titulo); text-transform: uppercase; box-shadow: 0 7px 0 #b8326d; margin-bottom: 7px; }
.botao-kickoff svg { font-size: 0.55em; }
.botao-kickoff:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 3px 0 #b8326d; }
.botao-kickoff:disabled { opacity: 0.6; cursor: wait; }

/* telas médias: o lado da conta/convite desce */
@media (max-width: 1080px) {
  .nova-corpo { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
  .nova-corpo .vagas { grid-column: 1 / -1; }
  .qr-linha { margin-top: 0; }
  .sala-linha { grid-template-columns: minmax(0, 1fr) 54px 110px 100px; }
  .sala-tempo { display: none; }
}
/* janela estreita (sem ser celular): a conta desce para baixo do nome, em largura cheia */
@media (max-width: 900px) {
  .escalacao-corpo { grid-template-columns: auto minmax(0, 1fr); }
  .painel-conta { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .tela { border-radius: 18px; }
  .escalacao { min-height: 0; }
  .marca-tag { height: 42px; }
  .marca-tag-icone { width: 56px; }
  .marca-tag-nome { font-size: 22px; padding: 0 20px 0 16px; }
  .ao-vivo { font-size: 12px; }
  .escalacao-corpo { gap: 18px; }
  .retrato { width: min(170px, 46vw); }
  .placa-nome { padding: 10px 36px 8px 22px; }
  .placa-nome input { font-size: 48px; }
  .posicoes button { font-size: 19px; padding: 10px 16px 8px 14px; }
  .posicoes.modalidades button { font-size: 15px; padding: 8px 12px 6px 10px; gap: 6px; }
  .posicoes.modalidades svg { width: 18px; height: 18px; }
  .posicoes.modalidades button small { display: none; }
  /* no celular a barra de jogar vem logo depois do nome; o que é da conta fica por último */
  .escalacao-corpo { display: contents; }
  .retrato { order: 1; } .escalacao-info { order: 2; } .barra-acoes { order: 3; } .painel-conta { order: 4; align-self: stretch; }
  .escalacao-corpo, .lista-corpo, .nova-corpo { grid-template-columns: 1fr; }
  .retrato { align-self: center; }
  .escalacao-info { align-items: stretch; }
  .placa-nome input { max-width: none; }
  /* uma linha para cada: Salas, o código (com a pergunta em cima, que não cabe ao lado de Salas) e Jogar */
  .barra-acoes { grid-template-columns: 1fr; }
  .barra-salas { padding: 14px; box-shadow: inset 0 -2px 0 rgba(255, 79, 154, 0.35); }
  .barra-jogar { grid-column: 1 / -1; padding: 16px; }
  .eu-chip span:last-child { display: none; }
  .titulo-tela { font-size: 30px; }
  .abas .aba { padding: 9px 14px; font-size: 18px; }
  .sala-linha { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .sala-formato, .sala-gente { grid-row: 2; }
  .sala-gente { justify-self: end; }
  .sala-linha button { grid-row: 1; grid-column: 2; padding: 9px 16px !important; }
  .faixa-rapido { flex-direction: column; align-items: stretch; text-align: center; padding: 16px; }
  .faixa-rapido b { justify-content: center; }
  .campo-vagas { min-height: 0; aspect-ratio: 100 / 70; }
  .vaga > span:not(.avatar) { font-size: 11px; }
}

/* menu do jogo (HUDDLE/ARENA no canto do HUD; arena/menu.js): placar no topo, cartões em duas colunas */
.modal .cartao.menu { max-height: none; overflow: visible; }
.cartao.menu { width: min(1000px, 100%); padding: 24px 28px 22px; border-radius: 28px; }
.cartao.menu .fechar-modal { right: 24px; top: 24px; width: 44px; height: 44px; font-size: 18px; }
.menu-jogo { display: flex; flex-direction: column; gap: 18px; }
.menu-topo { display: flex; align-items: center; gap: 18px; padding-right: 56px; }
.menu-topo .titulo-modal { font-size: 40px; text-align: left; }
.menu-placar { display: flex; align-items: center; gap: 10px; }
.menu-placar img { width: 26px; height: 26px; }
.menu-placar > i { font-style: normal; opacity: 0.5; }
.menu-sigla { padding: 6px 12px; border-radius: 6px; font: italic 900 22px/1 var(--titulo); text-transform: uppercase; white-space: nowrap; }
.menu-sigla b { font-weight: 900; }
.menu-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: stretch; }
.menu-coluna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.menu-bloco { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 18px; background: rgba(250, 248, 245, 0.035); min-width: 0; }
.menu-bloco h3 { margin: 0; color: var(--flash); font: italic 900 24px/1 var(--titulo); text-transform: uppercase; }
.menu-bloco-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.menu-bloco-topo small { font-size: 13px; color: rgba(250, 248, 245, 0.5); text-align: right; }
.menu-jogo .rotulo { margin: 4px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(250, 248, 245, 0.7); }
.menu-perfil { display: flex; align-items: center; gap: 14px; }
.menu-perfil .avatar { --tam: 64px; box-shadow: none; }
.menu-jogo .linha-nome { flex: 1; min-width: 0; display: flex; align-items: center; border-radius: 12px; background: rgba(250, 248, 245, 0.07); }
.menu-jogo .linha-nome:focus-within { box-shadow: inset 0 0 0 2px var(--flash); }
.cartao .menu-jogo .linha-nome input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 18px; padding: 16px; }
.menu-jogo .linha-nome button { padding: 0 16px; background: none; color: var(--flash); font-size: 14px; font-weight: 700; white-space: nowrap; }
.menu-jogo .cores { display: flex; justify-content: flex-start; flex-wrap: wrap; }
.menu-jogo .cores { gap: 8px; }
.menu-jogo .cores button { width: 36px; height: 36px; }
.menu-idiomas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: rgba(250, 248, 245, 0.06); }
.menu-idiomas button { padding: 12px 6px; border-radius: 9px; background: none; color: rgba(250, 248, 245, 0.75); font-size: 16px; font-weight: 600; }
.menu-idiomas button.ativo { background: var(--branco); color: var(--ameixa); font-weight: 700; }
.menu-controles { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.menu-controles > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; }
.menu-controles dt { flex-wrap: wrap; }
.menu-controles dt { display: flex; gap: 4px; }
.menu-controles dd { margin: 0; font-size: 15px; line-height: 1.35; color: rgba(250, 248, 245, 0.9); }
.menu-controles .nota, .menu-controles.toque > div { grid-template-columns: minmax(0, 1fr); }
.menu-controles .nota dd { font-size: 13px; color: rgba(250, 248, 245, 0.6); }
.menu-jogo kbd { display: inline-block; padding: 5px 9px; border-radius: 6px; background: rgba(250, 248, 245, 0.1); font: 700 13px/1.2 Barlow, sans-serif; white-space: nowrap; }
.menu-replays .acoes { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.menu-replays .contorno { padding: 13px; border-radius: 12px; border-color: rgba(250, 248, 245, 0.18); }
.menu-replays .contorno:hover { border-color: rgba(250, 248, 245, 0.4); }
.mais-lances { align-self: center; background: none; color: rgba(250, 248, 245, 0.75); font-size: 14px; font-weight: 600; padding: 6px 10px; }
.menu-lances { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.vazio-lances { margin: 8px 0; }
.menu-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-rodape .secundario { padding: 16px 24px; border-radius: 12px; }
.menu-voltar { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: min(400px, 60%); padding: 16px 28px; border-radius: 14px;
  font: italic 900 28px/1 var(--titulo); text-transform: uppercase; box-shadow: 0 5px 0 color-mix(in srgb, var(--flash) 60%, #000); }
.menu-voltar kbd { font-style: normal; background: rgba(36, 9, 47, 0.18); color: var(--ameixa); }
.lista-gols { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 302px; overflow-y: auto; } /* 4 lances; os anteriores rolam aqui */
.lista-gols li { display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 14px; border-radius: 14px; background: rgba(250, 248, 245, 0.05); font-size: 15px; }
.lista-gols .gol-placar { display: flex; flex: none; border-radius: 5px; overflow: hidden; font: italic 900 20px/1 var(--titulo); font-variant-numeric: tabular-nums; }
.lista-gols .gol-placar span { min-width: 32px; padding: 6px 7px; text-align: center; }
.lista-gols .titulo-gol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.lista-gols .titulo-gol small { color: rgba(250, 248, 245, 0.5); font-size: 13px; }
.lista-gols button { padding: 10px 16px; border-radius: 10px; font-size: 15px; white-space: nowrap; }
.lista-gols button.secundario { background: rgba(250, 248, 245, 0.06); }
@media (max-width: 760px) {
  .cartao.menu { padding: 20px 16px 16px; }
  .cartao.menu .fechar-modal { right: 14px; top: 16px; width: 38px; height: 38px; }
  .menu-topo { flex-wrap: wrap; gap: 10px 14px; padding-right: 44px; }
  .menu-topo .titulo-modal { font-size: 32px; }
  .menu-sigla { font-size: 18px; padding: 5px 9px; }
  .menu-colunas { grid-template-columns: minmax(0, 1fr); }
  .menu-bloco { padding: 16px; }
  .menu-bloco-topo { flex-direction: column; gap: 6px; }
  .menu-bloco-topo small { text-align: left; }
  .menu-perfil .avatar { --tam: 52px; }
  .menu-controles > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lista-gols { max-height: 262px; gap: 8px; }
  .lista-gols li { gap: 10px; padding: 10px; font-size: 14px; }
  .lista-gols .gol-placar { font-size: 17px; }
  .lista-gols .gol-placar span { min-width: 26px; padding: 5px; }
  .lista-gols button { padding: 9px 12px; font-size: 14px; }
  .menu-rodape { flex-direction: column-reverse; align-items: stretch; }
  .menu-voltar { min-width: 0; font-size: 24px; }
}