:root {
  --fundo: #0b0810;
  --texto: #f1e9d8;
  --suave: #b6a98f;
  --destaque: #d9a441;
  --erro: #ff7b6b;
  color-scheme: dark;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

#palco {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  left: env(safe-area-inset-left, 0px);
  background: #000;
}

#tela {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: default;
}

#entradaTexto {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 8px 12px;
  border: 1px solid #b4945c;
  border-radius: 6px;
  background: #142a32;
  color: #fff;
  font: 20px system-ui, sans-serif;
  user-select: text;
  -webkit-user-select: text;
}

#editorTexto {
  position: fixed;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: max(8px, env(safe-area-inset-left, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  max-width: 720px;
  margin: 0 auto;
  z-index: 30;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: #0c171ff5;
  border: 1px solid #95753e;
  border-radius: 10px;
  box-shadow: 0 4px 20px #0009;
}
#editorTexto[hidden] { display: none; }
#editorTexto button {
  min-height: 48px;
  padding: 8px 12px;
  background: #173f3c;
  color: #fff;
  border: 1px solid #95753e;
  border-radius: 6px;
  font: 16px system-ui, sans-serif;
  touch-action: manipulation;
}
@media (max-width: 540px) {
  #editorTexto { grid-template-columns: minmax(80px, 1fr) auto auto; }
  #rotuloTexto { grid-column: 1 / -1; }
}

#botaoTeclado {
  position: fixed;
  left: max(10px, env(safe-area-inset-left, 0px));
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  z-index: 5;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #95753e;
  border-radius: 8px;
  background: #142a32;
  color: var(--texto);
  font: 16px system-ui, sans-serif;
  touch-action: manipulation;
}

#botaoTeclado[hidden] { display: none; }

html[data-controles="toque"] #palco {
  bottom: auto;
  height: calc(var(--altura-jogo, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

#orientacao {
  position: fixed;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: max(8px, env(safe-area-inset-left, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #95753e;
  border-radius: 10px;
  background: #0c171ff5;
  font-size: 14px;
  z-index: 6;
}
#orientacao[hidden] { display: none; }
#fecharOrientacao {
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--texto);
  background: #173f3c;
  border: 1px solid #95753e;
  border-radius: 6px;
  font: inherit;
  touch-action: manipulation;
}

html[data-controles="toque"] #modo button { min-width: 44px; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  #carga, #cargaBarra { transition: none; }
}

#carga {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #1b1422 0%, var(--fundo) 70%);
  z-index: 10;
  transition: opacity .4s ease;
}

#carga.sumindo {
  opacity: 0;
  pointer-events: none;
}

#carga .caixa {
  width: min(460px, 86vw);
  text-align: center;
}

#carga .logo {
  max-width: 70%;
  margin-bottom: 18px;
}

#cargaTexto {
  font-size: 17px;
  margin-bottom: 12px;
  min-height: 1.3em;
}

.barra {
  height: 8px;
  border-radius: 4px;
  background: #2a2230;
  overflow: hidden;
}

#cargaBarra {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #a8742a, var(--destaque));
  transition: width .2s linear;
}

#cargaBarra.indeterminada {
  width: 30% !important;
  animation: vai 1.2s ease-in-out infinite;
}

@keyframes vai {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

#cargaDetalhe {
  margin-top: 10px;
  font-size: 13px;
  color: var(--suave);
  min-height: 1.2em;
  white-space: pre-line;
}

#carga.erro #cargaTexto {
  color: var(--erro);
}

#cargaAcoes button, #modo button {
  margin-top: 14px;
  background: #2d2433;
  color: var(--texto);
  border: 1px solid #4a3d52;
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 15px;
  cursor: pointer;
}

#aviso {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  transform: translateX(-50%);
  background: rgba(20, 12, 24, .92);
  border: 1px solid #5a4460;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  z-index: 20;
  max-width: 90vw;
}

#modo {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: rgba(20, 12, 24, .92);
  border: 1px solid #5a4460;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  z-index: 20;
}

#modo button {
  margin: 0 0 0 6px;
  padding: 6px 10px;
  font-size: 14px;
}

#modo button[aria-pressed="true"] {
  border-color: var(--destaque);
  color: var(--destaque);
}