/* DOOM no celular: escuro, verde do orbe e ouro do trono (mesma paleta da presenca do PC) */
:root {
  --fundo: #05080a;
  --fundo-2: #0b1114;
  --linha: #1b2a2e;
  --texto: #e6f1ee;
  --texto-2: #8fa6a0;
  --verde: #3ee6b5;
  --verde-escuro: #0f3b31;
  --ouro: #e8c468;
  --erro: #ff7a6b;
  --raio: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

#orbe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
}
.marca { font-weight: 700; letter-spacing: .32em; font-size: 13px; color: var(--verde); }
.estadoTopo { flex: 1; font-size: 12px; color: var(--texto-2); letter-spacing: .08em; text-transform: uppercase; }
.topo .so-dentro { display: none; }
body[data-tela="dentro"] .topo .so-dentro { display: inline-flex; }

.icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 1px solid var(--linha);
}
.icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#btPainel svg { fill: currentColor; stroke: none; }
.icone[aria-pressed="false"] { opacity: .45; }

.tela {
  position: fixed; inset: 0; z-index: 2;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: calc(env(safe-area-inset-top) + 64px) 16px calc(env(safe-area-inset-bottom) + 24px);
  text-align: center;
}
body[data-tela="carregando"] .tela[data-de="carregando"],
body[data-tela="fechado"] .tela[data-de="fechado"],
body[data-tela="cadastro"] .tela[data-de="cadastro"],
body[data-tela="cadastro-chave"] .tela[data-de="cadastro-chave"],
body[data-tela="camera"] .tela[data-de="camera"],
body[data-tela="entrar"] .tela[data-de="entrar"],
body[data-tela="dentro"] .tela[data-de="dentro"] { display: flex; }

/* fora da conversa: o orbe em cima, o texto e os botoes na metade de baixo */
.tela[data-de="entrar"], .tela[data-de="cadastro"], .tela[data-de="cadastro-chave"], .tela[data-de="fechado"] { justify-content: flex-end; padding-bottom: calc(env(safe-area-inset-bottom) + 14vh); }
h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: .02em; }
.legenda { margin: 0; max-width: 34ch; color: var(--texto-2); font-size: 15px; }
.mensagem { margin: 0; min-height: 1.4em; max-width: 36ch; color: var(--texto-2); font-size: 14px; }
.mensagem.erro { color: var(--erro); }

.pilha { display: flex; flex-direction: column; gap: 10px; width: min(100%, 320px); text-align: left; }
.pilha label { font-size: 13px; color: var(--texto-2); }
input[type="text"], #convite {
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: var(--fundo-2); border: 1px solid var(--linha); border-radius: var(--raio);
  outline: none;
}
#convite { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; text-align: center; font-size: 20px; }
input:focus { border-color: var(--verde); }

.botao {
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  background: var(--verde); color: #02140f; border: 0; font-weight: 650; letter-spacing: .02em;
}
.botao.grande { min-width: 200px; min-height: 56px; font-size: 18px; }
.botao.secundario { background: transparent; color: var(--texto); border: 1px solid var(--linha); }
.botao:disabled { opacity: .5; }

/* camera */
.moldura { position: relative; width: min(72vw, 300px); aspect-ratio: 1; }
.moldura video {
  position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: cover; border-radius: 50%;
  transform: scaleX(-1); background: var(--fundo-2);
}
.anel { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 2.2; }
.anel .trilho { stroke: var(--linha); }
.anel .progresso { stroke: var(--verde); stroke-linecap: round; stroke-dasharray: 301.6; stroke-dashoffset: 301.6; transition: stroke-dashoffset .35s ease; }
body.recusado .anel .progresso { stroke: var(--erro); }
.seta { position: absolute; top: 50%; width: 0; height: 0; opacity: 0; transition: opacity .2s; border: 14px solid transparent; }
.seta.esquerda { left: -14px; transform: translateY(-50%); border-right-color: var(--ouro); opacity: 1; }
.seta.direita { right: -14px; transform: translateY(-50%); border-left-color: var(--ouro); opacity: 1; }
.seta.cima { left: 50%; top: -14px; transform: translateX(-50%); border-bottom-color: var(--ouro); opacity: 1; }
.instrucao { margin: 4px 0 0; font-size: 20px; font-weight: 600; min-height: 1.5em; }

/* dentro */
.tela[data-de="dentro"] { justify-content: flex-end; gap: 0; padding-bottom: 0; text-align: left; }
.conversa {
  list-style: none; margin: 0; padding: 0 0 8px; width: 100%; max-width: 640px;
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 10px;
  mask-image: linear-gradient(to bottom, transparent 0, #000 64px);
}
.conversa li:first-child { margin-top: auto; }   /* poucas mensagens: ficam perto da caixa de texto, como todo chat */
.conversa li { max-width: 86%; padding: 10px 14px; border-radius: var(--raio); font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.conversa li.wilker { align-self: flex-end; background: var(--verde-escuro); border: 1px solid #1d5a4b; }
.conversa li.doom { align-self: flex-start; background: rgba(11, 17, 20, .82); border: 1px solid var(--linha); }
.conversa li.doom.pensando { color: var(--texto-2); }
.conversa li.erro { border-color: #5a2a24; color: var(--erro); }
.conversa .onde { display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.base {
  width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 10px;
  padding: 8px 0 calc(env(safe-area-inset-bottom) + 14px);
}
.ouvindo { margin: 0; min-height: 1.3em; font-size: 14px; color: var(--ouro); text-align: center; }
.linhaTexto { display: flex; gap: 8px; }
.linhaTexto input { flex: 1; min-width: 0; }
.enviar { width: 48px; height: 48px; flex: none; }
.enviar svg { fill: currentColor; stroke: none; }
.linhaFalar { display: flex; align-items: center; justify-content: space-between; }
.espaco { width: 44px; }
.falar {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 64px; padding: 0 30px; border-radius: 999px;
  background: var(--verde); color: #02140f; border: 0; font-weight: 700; font-size: 18px; letter-spacing: .04em;
  box-shadow: 0 0 0 0 rgba(62, 230, 181, .5);
}
.falar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.falar.gravando { background: var(--ouro); animation: pulso 1.2s ease-out infinite; }
.falar:disabled { opacity: .55; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(232, 196, 104, .55); } 100% { box-shadow: 0 0 0 22px rgba(232, 196, 104, 0); } }

/* painel */
.painel { position: fixed; inset: 0; z-index: 5; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; }
.painel[hidden] { display: none; }
.folha {
  width: 100%; max-height: 82vh; overflow-y: auto; background: var(--fundo-2);
  border-top: 1px solid var(--linha); border-radius: 20px 20px 0 0;
  padding: 14px 16px calc(env(safe-area-inset-bottom) + 18px);
}
.cabecaFolha { display: flex; align-items: center; justify-content: space-between; }
.cabecaFolha h2 { margin: 0; font-size: 18px; }
.cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.cartao { padding: 10px 12px; border: 1px solid var(--linha); border-radius: 12px; }
.cartao b { display: block; font-size: 17px; font-weight: 650; overflow-wrap: anywhere; }
.cartao span { font-size: 12px; color: var(--texto-2); }
.grupo h3 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro); }
.grupo ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.grupo li { font-size: 14px; padding: 8px 10px; border-left: 2px solid var(--verde-escuro); background: rgba(255, 255, 255, .02); }
.grupo li small { display: block; color: var(--texto-2); font-size: 12px; }

/* deck (fase 6) */
.estadoPc { margin: 8px 0 0; font-size: 13px; color: var(--texto-2); }
.estadoPc.online { color: var(--verde); }
.teclas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tecla {
  min-height: 64px; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--linha); background: rgba(255, 255, 255, .02);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; text-align: center;
}
.tecla b { font-size: 15px; font-weight: 650; }
.tecla:active { background: var(--verde-escuro); border-color: var(--verde); }
.tecla:disabled { opacity: .35; }
.tecla.perigo b { color: var(--ouro); }
.leitura { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 12px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; }
.leitura h4 { margin: 0 0 6px; font-size: 13px; color: var(--ouro); letter-spacing: .06em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) { .falar.gravando { animation: none; } }