*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  font-size: calc(16px * var(--escala));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--breu);
}

body {
  height: 100%;
  margin: 0;
  background: var(--breu);
  color: var(--c-texto);
  font-family: var(--f-corpo);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-foco);
  outline-offset: 3px;
}

.oculto-leitor {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.sem-js { padding: 24px; font-family: var(--f-narrativa); }

/* Palco: uma tela por vez, sempre do tamanho da janela */
#app {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* Grão de papel e vinheta: camadas fixas e baratas (textura gerada uma vez em canvas) */
#app::before,
#app::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
#app::before {
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(10, 7, 4, .55) 100%);
}
#app::after {
  background-image: var(--tex-grao, none);
  background-size: 160px 160px;
  opacity: .55;
}
:root[data-papel="nao"] #app::after,
:root[data-contraste="alto"] #app::after { display: none; }
:root[data-papel="nao"] #app::before { background: none; }

.tela {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-bottom, 0px));
  opacity: 1;
  transform: none;
  transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.tela.entrando { opacity: 0; transform: translateY(6px); }
.tela.saindo { opacity: 0; pointer-events: none; }

/* Legendas de som (opção de acessibilidade) */
.legendas {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 100;
  max-width: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.legenda {
  padding: 6px 12px;
  background: rgba(20, 16, 11, .9);
  border: 1px solid var(--c-borda);
  border-radius: var(--raio);
  font-family: var(--f-menu);
  font-size: .95rem;
  letter-spacing: .03em;
  color: var(--c-texto);
  transition: opacity var(--dur) var(--curva);
}
.legenda.some { opacity: 0; }