/* ══════════════════════════════════════════════════════════════════
   FoodTopia — telas
   Layout e posicionamento. Cor, material, sombra, curva e tamanho de
   letra saem todos do ds.css: se aparecer um valor de cor aqui, é bug.
   ══════════════════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Regra de id com display: flex vence [hidden]. Sem este !important o loader
   e a tela de conta continuam na tela mesmo com o atributo posto. */
[hidden] { display: none !important; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--cor-massa-3);
  color: var(--cor-tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--txt-md);
  -webkit-text-size-adjust: 100%;
}

/* Só para leitor de tela: sai do desenho sem sair da árvore de acessibilidade. */
.sr-so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#app { position: fixed; inset: 0; z-index: var(--z-mundo); }
#app canvas { display: block; touch-action: none; }

kbd {
  display: inline-block;
  min-width: 2.6em;
  padding: 2px 7px;
  border: var(--traco) solid var(--cor-madeira);
  border-bottom-width: 3px;
  border-radius: var(--raio-sm);
  background: var(--cor-massa);
  color: var(--cor-madeira-escura);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xs);
  font-weight: 600;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   CARREGANDO — uma panela no fogo, não uma barra de progresso de site
   ══════════════════════════════════════════════════════════════════ */

#loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-carregando);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 80% at 50% 12%, rgb(var(--manteiga-canais) / .16), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, var(--cor-noite-clara), var(--cor-noite));
  transition: opacity var(--mov-suave);
}

#loader.hidden { opacity: 0; pointer-events: none; }

.loader-box {
  width: min(360px, 82vw);
  text-align: center;
  color: var(--cor-giz);
}

.loader-panela {
  position: relative;
  width: 84px;
  height: 62px;
  margin: 0 auto var(--e-5);
  border: 3px solid var(--cor-madeira-escura);
  border-radius: 0 0 26px 26px;
  background: var(--mat-latao);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .3);
}

/* alças */
.loader-panela::before,
.loader-panela::after {
  content: '';
  position: absolute;
  top: 8px;
  width: 16px;
  height: 20px;
  border: 3px solid var(--cor-madeira-escura);
  border-radius: 6px;
}
.loader-panela::before { left: -17px; }
.loader-panela::after { right: -17px; }

.loader-vapor {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 9px;
  height: 26px;
  border-radius: var(--raio-pill);
  background: linear-gradient(180deg, rgb(var(--giz-canais) / 0), rgb(var(--giz-canais) / .5));
  opacity: 0;
  animation: vapor 2.4s ease-in-out infinite;
}
.loader-vapor:nth-child(1) { margin-left: -22px; animation-delay: 0s; }
.loader-vapor:nth-child(2) { margin-left: -4px; animation-delay: .5s; }
.loader-vapor:nth-child(3) { margin-left: 14px; animation-delay: 1s; }

@keyframes vapor {
  0% { opacity: 0; transform: translateY(6px) scaleY(.6); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-22px) scaleY(1.3); }
}

.loader-title {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xl);
  font-weight: 600;
  margin-bottom: var(--e-3);
}

#loader .bar {
  height: 14px;
  border: var(--traco) solid var(--cor-madeira-escura);
  border-radius: var(--raio-pill);
  background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5);
  overflow: hidden;
}

#loadBar {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: var(--raio-pill);
  background: linear-gradient(180deg, var(--cor-manteiga-clara), var(--cor-manteiga) 60%, var(--cor-manteiga-escura));
  box-shadow: var(--brilho-topo);
  transition: width var(--mov-suave);
}

.loader-sub {
  margin-top: var(--e-2);
  color: var(--cor-giz-fraco);
  font-size: var(--txt-sm);
}

/* ══════════════════════════════════════════════════════════════════
   CONTA — a placa na porta do restaurante
   ══════════════════════════════════════════════════════════════════ */

.auth-tela {
  position: fixed;
  inset: 0;
  z-index: var(--z-conta);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background:
    radial-gradient(100% 70% at 50% 0%, rgb(var(--manteiga-canais) / .2), rgba(0, 0, 0, 0) 55%),
    var(--mat-azulejo);
  padding:
    calc(var(--e-6) + env(safe-area-inset-top))
    calc(var(--e-4) + env(safe-area-inset-right))
    calc(var(--e-5) + env(safe-area-inset-bottom))
    calc(var(--e-4) + env(safe-area-inset-left));
}

.auth-placa {
  position: relative;
  width: 100%;
  max-width: 25rem;
  margin: auto;
  padding: var(--e-4);
  border: 3px solid var(--cor-madeira-escura);
  border-radius: var(--raio-lg);
  background: var(--mat-madeira);
  box-shadow: var(--base-4) rgb(var(--sombra-madeira-canais) / .9), var(--contato-forte);
}

/* Os dois ganchos de onde a placa pendura. */
.auth-ganchos {
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 34px;
}

.auth-ganchos i {
  width: 14px;
  height: 14px;
  border: 3px solid var(--cor-madeira-escura);
  border-radius: 50%;
  background: var(--mat-latao);
}

.auth-marca {
  text-align: center;
  padding: var(--e-2) 0 var(--e-4);
}

.auth-marca-nome {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-2xl);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--cor-manteiga);
  text-shadow: 0 2px 0 rgb(var(--sombra-madeira-canais) / .55);
}

.auth-marca-frase {
  margin-top: 2px;
  color: var(--cor-massa-2);
  font-size: var(--txt-sm);
}

.auth-papel {
  border-radius: var(--raio-md);
  background: var(--mat-massa);
  box-shadow: inset 0 2px 8px rgb(var(--madeira-escura-canais) / .25);
  padding: var(--e-5) var(--e-4) var(--e-4);
}

.auth-titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xl);
  font-weight: 600;
  color: var(--cor-madeira-escura);
  text-align: center;
}

.auth-subtitulo {
  margin: var(--e-1) 0 var(--e-5);
  color: var(--cor-tinta-fraca);
  font-size: var(--txt-sm);
  text-align: center;
}

.auth-form { display: grid; gap: var(--e-4); }

.campo { display: grid; gap: 5px; }

.campo-rotulo {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--cor-madeira-escura);
}

.campo-dica {
  color: var(--cor-tinta-fraca);
  font-size: var(--txt-xs);
}

.auth-erro {
  display: flex;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border: var(--traco) solid var(--cor-tomate-escuro);
  border-radius: var(--raio-sm);
  background: rgb(var(--tomate-canais) / .14);
  color: var(--cor-tomate-escuro);
  font-size: var(--txt-sm);
  font-weight: 600;
}

.auth-troca {
  margin-top: var(--e-4);
  text-align: center;
  color: var(--cor-tinta-fraca);
  font-size: var(--txt-sm);
}

.botao-link {
  min-height: var(--toque);
  padding: 0 var(--e-2);
  border: none;
  background: none;
  color: var(--cor-tomate-escuro);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-sm);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.botao-link:hover { color: var(--cor-tomate); }
.botao-link:focus-visible { outline: 3px solid var(--cor-manteiga); outline-offset: 2px; border-radius: var(--raio-sm); }

.auth-idioma {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding-top: var(--e-4);
  color: var(--cor-massa-2);
}

.auth-idioma .ic { width: 18px; height: 18px; }

.seletor {
  min-height: var(--toque);
  padding: 0 var(--e-3);
  border: var(--traco) solid var(--cor-madeira-escura);
  border-radius: var(--raio-sm);
  background: var(--cor-massa);
  color: var(--cor-tinta);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-sm);
  font-weight: 600;
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════
   BANCADA — a faixa de cima: carteira, nível e as chaves da casa
   ══════════════════════════════════════════════════════════════════ */

#hudTopo {
  position: fixed;
  top: env(safe-area-inset-top);
  left: env(safe-area-inset-left);
  right: env(safe-area-inset-right);
  z-index: var(--z-hud);
  padding: var(--e-2);
  pointer-events: none;
  user-select: none;
}

.bancada {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--e-2);
  border: 3px solid var(--cor-madeira-escura);
  border-radius: var(--raio-lg);
  background: var(--mat-madeira);
  box-shadow: var(--base-3) rgb(var(--sombra-madeira-canais) / .85), var(--contato);
  pointer-events: auto;
}

.moeda--cash { background: var(--cor-morango-palida); }

.selo-nivel {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 128px;
  padding: var(--e-1) var(--e-3) var(--e-1) var(--e-1);
  border: var(--traco) solid var(--cor-madeira-escura);
  border-radius: var(--raio-pill);
  background: var(--cor-massa);
  box-shadow: var(--base-3) rgb(var(--madeira-escura-canais) / .55), var(--brilho-topo-fraco);
}

.selo-nivel__chapeu { width: 30px; height: 30px; flex: none; }

.selo-nivel__corpo { flex: 1; display: grid; gap: 3px; min-width: 0; }

.selo-nivel__linha {
  display: flex;
  align-items: baseline;
  gap: var(--e-1);
  font-family: var(--fonte-titulo);
  line-height: 1;
}

.selo-nivel__rotulo {
  color: var(--cor-tinta-fraca);
  font-size: var(--txt-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.selo-nivel__linha b {
  color: var(--cor-tinta);
  font-size: var(--txt-lg);
  font-variant-numeric: tabular-nums;
}

.bancada__acoes { display: flex; gap: 6px; }

.hud-nome {
  width: fit-content;
  max-width: min(60vw, 260px);
  margin: 6px auto 0;
  padding: 3px var(--e-3);
  border-radius: var(--raio-pill);
  background: rgb(var(--lousa-canais) / .55);
  backdrop-filter: blur(6px);
  color: var(--cor-giz);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xs);
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   PAINÉIS FLUTUANTES
   ══════════════════════════════════════════════════════════════════ */

.painel-flutuante {
  position: fixed;
  z-index: var(--z-painel);
  top: calc(var(--e-7) + env(safe-area-inset-top) + 34px);
  left: 50%;
  transform: translateX(-50%);
  width: min(400px, calc(100vw - var(--e-5)));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.painel-topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
}

.painel-topo-linha .painel__titulo { margin: 0; }

.painel-nota {
  margin: var(--e-2) 0;
  color: var(--cor-tinta-fraca);
  font-size: var(--txt-sm);
  line-height: 1.5;
}

.painel--lousa .painel-nota { color: var(--cor-giz-fraco); }

.lista-controles {
  list-style: none;
  display: grid;
  gap: 5px;
  margin: var(--e-3) 0;
}

.lista-controles li {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--txt-sm);
  color: var(--cor-tinta);
}

.painel-rodape {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

.tira-estado {
  flex: 1;
  padding: var(--e-2);
  border: var(--traco) dashed var(--cor-madeira);
  border-radius: var(--raio-sm);
  background: rgb(var(--madeira-canais) / .1);
  color: var(--cor-madeira-escura);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

/* ── desempenho ── */

#perf { color: var(--cor-giz); }

.perf-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-2);
  margin-top: var(--e-2);
}

.fps { display: flex; align-items: baseline; gap: 5px; }

.fps b {
  font-family: var(--fonte-titulo);
  font-size: 30px;
  font-weight: 700;
  color: var(--cor-manteiga);
  font-variant-numeric: tabular-nums;
}

.fps .unit { color: var(--cor-giz-fraco); font-size: var(--txt-xs); }

.fps-side {
  text-align: right;
  color: var(--cor-giz-fraco);
  font-size: var(--txt-xs);
  line-height: 1.45;
}

#fpsGraph {
  width: 100%;
  height: 38px;
  margin: var(--e-2) 0;
  border-radius: var(--raio-sm);
  background: rgba(0, 0, 0, .25);
}

.quality { display: flex; gap: 5px; }
.quality .placa { flex: 1; }
/* Forma e alvo vêm do `.interruptor` no ds.css; aqui só a cor do texto. */
.auto {
  color: var(--cor-giz-fraco);
  font-size: var(--txt-xs);
}

#perfDetails {
  display: grid;
  gap: 2px;
  padding-top: var(--e-2);
  border-top: 1px solid rgb(var(--giz-canais) / .15);
}

#perfDetails .row {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  color: var(--cor-giz-fraco);
  font-size: var(--txt-xs);
}

#perfDetails .row b { color: var(--cor-giz); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════
   CONEXÃO
   ══════════════════════════════════════════════════════════════════ */

/* Aviso de conexão se lê no topo, junto do dinheiro e do nível — não no
   rodapé, onde o manche e o botão de conversa disputam espaço. Foi para lá
   na Fase 2 só porque o painel de desempenho nascia aberto ocupando a
   direita; agora ele é um botão, e a pílula volta para o lugar certo. */
.rede-estado {
  width: fit-content;
  max-width: min(80vw, 320px);
  margin: 6px auto 0;
  padding: 5px var(--e-3);
  border: var(--traco) solid var(--cor-madeira-escura);
  border-radius: var(--raio-pill);
  background: rgb(var(--lousa-canais) / .88);
  backdrop-filter: blur(8px);
  color: var(--cor-giz);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xs);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

.rede-estado.ok { color: var(--cor-hortela-clara); border-color: var(--cor-hortela-escura); }
.rede-estado.atencao { color: var(--cor-manteiga); border-color: var(--cor-manteiga-escura); }

.conexao-tela {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(var(--e-5) + env(safe-area-inset-top))
    calc(var(--e-5) + env(safe-area-inset-right))
    calc(var(--e-5) + env(safe-area-inset-bottom))
    calc(var(--e-5) + env(safe-area-inset-left));
  background: rgb(var(--noite-canais) / .74);
  backdrop-filter: blur(7px);
}

.conexao-card { width: min(390px, 100%); }
.conexao-card .painel__papel { text-align: center; padding: var(--e-5) var(--e-4); }

.conexao-icone {
  width: 42px;
  height: 42px;
  margin-bottom: var(--e-2);
  color: var(--cor-madeira);
}

.conexao-titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xl);
  font-weight: 700;
  color: var(--cor-madeira-escura);
}

.conexao-texto {
  margin: var(--e-2) 0 var(--e-5);
  color: var(--cor-tinta-fraca);
  font-size: var(--txt-sm);
  line-height: 1.55;
}

/* ══════════════════════════════════════════════════════════════════
   CONVERSA — quadro-negro do salão
   ══════════════════════════════════════════════════════════════════ */

.chat-abrir {
  position: fixed;
  left: calc(var(--e-4) + env(safe-area-inset-left));
  bottom: calc(var(--e-4) + env(safe-area-inset-bottom));
  z-index: var(--z-painel);
}

.chat-abrir.tem-novidade::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cor-manteiga);
  box-shadow: 0 0 0 3px rgb(var(--manteiga-canais) / .3);
  animation: ds-quicar 1.6s ease-in-out infinite;
}

.chat-painel {
  position: fixed;
  left: calc(var(--e-4) + env(safe-area-inset-left));
  bottom: calc(var(--e-4) + env(safe-area-inset-bottom));
  z-index: var(--z-painel);
  display: flex;
  flex-direction: column;
  width: clamp(300px, 40vw, 430px);
  max-width: calc(100vw - var(--e-5));
  height: clamp(200px, 36vh, 340px);
  padding: var(--e-3);
}

.chat-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding-bottom: var(--e-2);
  border-bottom: 1px dashed rgb(var(--giz-canais) / .22);
}

.chat-topo .painel__titulo { margin: 0; font-size: var(--txt-md); }

.chat-mensagens {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--e-2) 0;
  font-size: var(--txt-md);
  line-height: 1.5;
  color: var(--cor-giz);
}

.chat-vazio {
  color: var(--cor-giz-fraco);
  font-style: italic;
  padding: var(--e-1) 0;
}

.chat-linha {
  padding: 3px 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.chat-linha.chat-sistema {
  color: var(--cor-giz-fraco);
  font-size: .92em;
  font-style: italic;
}

.chat-escopo-marca {
  display: inline-block;
  margin-right: 5px;
  padding: 1px 6px;
  border-radius: var(--raio-sm);
  background: rgb(var(--azulejo-canais) / .2);
  color: var(--cor-azulejo);
  font-family: var(--fonte-titulo);
  font-size: .74em;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.chat-escopo-marca.local {
  background: rgb(var(--manteiga-canais) / .2);
  color: var(--cor-manteiga);
}

.chat-autor {
  margin-right: 5px;
  color: var(--cor-manteiga);
  font-family: var(--fonte-titulo);
  font-weight: 600;
}

.chat-form {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding-top: var(--e-2);
  border-top: 1px dashed rgb(var(--giz-canais) / .22);
}

/* Na linha de envio nada encolhe abaixo do alvo de toque. */
.chat-form .placa { min-height: var(--toque); }

.chat-escopo { flex: none; min-width: 76px; }
.chat-escopo.local {
  /* tons vêm de `.placa--cash` no ds.css */
}

.chat-input { flex: 1; min-width: 0; }
.chat-enviar { flex: none; width: 46px; padding: 0; }

/* ══════════════════════════════════════════════════════════════════
   TOQUE — manche e botões (R1)
   ══════════════════════════════════════════════════════════════════ */

.toque {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-toque);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding:
    0
    calc(var(--e-4) + env(safe-area-inset-right))
    calc(var(--e-5) + env(safe-area-inset-bottom))
    calc(var(--e-4) + env(safe-area-inset-left));
  pointer-events: none;
}

.toque > * { pointer-events: auto; }

.toque__manche {
  position: relative;
  width: 132px;
  height: 132px;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.manche__base {
  position: absolute;
  inset: 0;
  border: 3px solid var(--cor-madeira-escura);
  border-radius: 50%;
  background:
    radial-gradient(60% 60% at 50% 38%, rgba(255, 255, 255, .22), rgba(0, 0, 0, 0) 70%),
    var(--mat-madeira);
  box-shadow: inset 0 4px 10px rgb(var(--sombra-madeira-canais) / .45), var(--contato);
  opacity: .82;
  transition: opacity var(--mov-rapido);
}

.toque__manche.esta-ativo .manche__base { opacity: 1; }

/* As quatro setas gravadas na base — dizem para que serve sem uma palavra. */
.manche__seta {
  position: absolute;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  opacity: .5;
}
.manche__seta--n { top: 9px; left: 50%; margin-left: -7px; border-bottom-color: var(--cor-massa); }
.manche__seta--s { bottom: 9px; left: 50%; margin-left: -7px; border-top-color: var(--cor-massa); }
.manche__seta--l { right: 9px; top: 50%; margin-top: -7px; border-left-color: var(--cor-massa); }
.manche__seta--o { left: 9px; top: 50%; margin-top: -7px; border-right-color: var(--cor-massa); }

.manche__pino {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border: 3px solid var(--cor-madeira-escura);
  border-radius: 50%;
  background: var(--mat-latao);
  box-shadow: var(--base-4) rgb(var(--sombra-madeira-canais) / .8), var(--brilho-topo);
  transition: transform var(--mov-rapido);
}

.toque__manche.esta-ativo .manche__pino { transition: none; }

.toque__botoes {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: end;
  justify-items: center;
  gap: var(--e-3);
}

.toque__botao { width: 58px; min-width: 58px; height: 58px; }
.toque__botao .ic { width: 26px; height: 26px; }

.toque__botao--grande {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 74px;
  min-width: 74px;
  height: 74px;
}
.toque__botao--grande .ic { width: 32px; height: 32px; }

#toqueDancar { grid-column: 1; grid-row: 1; }
#toqueCorrer { grid-column: 1; grid-row: 2; }

/* Com controles de toque na tela, o chat sobe para não brigar com o manche. */
body.tem-toque .chat-abrir {
  left: auto;
  right: calc(var(--e-4) + env(safe-area-inset-right));
  bottom: calc(160px + env(safe-area-inset-bottom));
}

/* Painel aberto tem a atenção toda: o que flutua no rodapé sai de cena e
   volta quando ele fecha. */
body.painel-aberto .chat-abrir,
body.painel-aberto .toque {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mov-rapido);
}

/* A conversa também é uma gaveta de rodapé: a pílula de conexão ficaria em
   cima do quadro-negro. Ela volta assim que o chat fecha, e enquanto isso as
   entradas e saídas aparecem no próprio chat. */
/* ══════════════════════════════════════════════════════════════════
   TELA PEQUENA
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   PROVADOR — o guarda-roupa do restaurante.
   No PC fica de lado, para a personagem continuar no meio da tela; no
   celular vira gaveta de rodapé, e o enquadramento da câmera sobe para
   compensar (a conta está no `main.js`, em `aplicarEnquadramento`).
   ══════════════════════════════════════════════════════════════════ */

.provador {
  top: calc(var(--e-7) + env(safe-area-inset-top) + 34px);
  left: auto;
  right: max(var(--e-4), env(safe-area-inset-right));
  transform: none;
  width: min(420px, 40vw);
  max-height: min(76vh, 680px);
  /* Quem rola é o corpo, não o painel: as abas e o rodapé ficam parados. */
  overflow: hidden;
}

.provador__papel {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  max-height: inherit;
}

.provador-abas {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 0 6px;
  scrollbar-width: thin;
}

.aba-provador {
  flex: none;
  flex-direction: column;
  gap: 1px;
  min-width: var(--toque);
  padding: 5px 7px;
}

.aba-provador__nome {
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
}

.provador-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.provador-secao + .provador-secao { margin-top: var(--e-4); }

.provador-secao__titulo {
  margin-bottom: var(--e-2);
  color: var(--cor-tinta-fraca);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.provador-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--e-2);
}

.provador-grade--largo {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.provador-cores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4) var(--e-3);
  padding: var(--e-2) 0;
}

.provador-rodape {
  display: flex;
  gap: var(--e-2);
  padding-top: var(--e-2);
  border-top: var(--traco) dashed rgb(var(--madeira-canais) / .35);
}

.provador-rodape .placa { flex: 1; justify-content: center; }

@media (max-width: 760px) {
  /* Em 375 px as moedas e os botões já tomam a linha inteira; a barra de XP
     ficava com 24 px e virava um pontinho. Duas linhas: carteira e chaves em
     cima, nível ocupando a largura toda embaixo. */
  .bancada {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    border-radius: var(--raio-md);
  }

  .bancada__acoes { margin-left: auto; }

  .moeda {
    min-height: 30px;
    padding: 0 var(--e-2) 0 2px;
    font-size: var(--txt-md);
  }
  .moeda__icone { width: 22px; height: 22px; }

  .selo-nivel { order: 3; flex: 1 0 100%; min-width: 0; padding-right: var(--e-3); }
  .selo-nivel__chapeu { width: 26px; height: 26px; }
  .selo-nivel__rotulo { display: none; }

  .painel-flutuante {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    max-height: 72vh;
    border-radius: var(--raio-lg) var(--raio-lg) 0 0;
    border-bottom: none;
    animation: ds-subir-rodape var(--mov-suave);
  }

  /* O chat vira faixa de rodapé: painel estreito ao lado do polegar é inútil. */
  .chat-painel {
    left: env(safe-area-inset-left);
    right: env(safe-area-inset-right);
    bottom: env(safe-area-inset-bottom);
    width: auto;
    max-width: none;
    height: min(48vh, 320px);
    border-radius: var(--raio-lg) var(--raio-lg) 0 0;
    border-bottom: none;
  }

  /* Gaveta mais baixa que a dos outros painéis: a personagem tem de caber na
     metade de cima, senão o jogador escolhe roupa sem ver o resultado. */
  .provador {
    top: auto;
    right: 0;
    max-height: 52vh;
  }

  .provador-grade { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }

  body.tem-toque .chat-abrir { bottom: calc(150px + env(safe-area-inset-bottom)); }
  body.tem-toque .rede-estado { bottom: calc(200px + env(safe-area-inset-bottom)); }

  .toque__manche { width: 118px; height: 118px; }
  .manche__pino { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
}

/* Paisagem de celular: a cidade não pode sumir atrás da interface. */
@media (max-height: 560px) {
  .chat-painel { height: min(58vh, 220px); }
  .provador { max-height: 76vh; }
  .roda__anel { --roda-raio: 92px; }
  .roda__item { width: 56px; height: 56px; }
  .painel-flutuante { max-height: 82vh; }
  .toque { padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom)); }
  .toque__manche { width: 104px; height: 104px; }
  .manche__pino { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  .toque__botao { width: 50px; min-width: 50px; height: 50px; }
  .toque__botao--grande { width: 62px; min-width: 62px; height: 62px; }
  body.tem-toque .chat-abrir { bottom: calc(126px + env(safe-area-inset-bottom)); }
  body.tem-toque .rede-estado { bottom: calc(174px + env(safe-area-inset-bottom)); }
}