/* Base comum: reset leve, superfícies do navegador e utilidades. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--f-body);
  color: var(--c-ink);
  background: var(--portal-sky);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body[data-theme='juju'] { background: var(--j-sky); }
body[data-theme='han'] { background: var(--h-field); }
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

::selection { background: var(--c-select); color: var(--c-ink); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

a {
  color: var(--c-link);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px;
}

/* Barra de rolagem do tema */
* { scrollbar-width: thin; scrollbar-color: var(--c-accent-soft, #f4a6c2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--c-accent-soft, #f4a6c2);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

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

.multiline { white-space: pre-line; }

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* Botão sem aparência de navegador */
.bare {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
}

/* Tudo que se aperta responde ao toque */
.pressable {
  transition: transform 160ms var(--ease-out);
}
.pressable:active { transform: scale(0.97); }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  background: #fff;
  color: #2a2230;
  border-radius: 10px;
  transform: translateY(-160%);
  opacity: 0;
  pointer-events: none;
  transition: transform 200ms var(--ease-out), opacity 150ms ease;
}
/* Só aparece quando recebe foco pelo teclado (Tab). Fora disso fica invisível
   mesmo em capturas de tela, mas continua acessível para leitores de tela. */
.skip-link:focus-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* Camadas do palco: universo atual e o que chega por cima */
#stage { position: relative; isolation: isolate; }

.universe-layer { position: relative; min-height: 100dvh; }

.universe-layer.is-incoming {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  z-index: 60;
  will-change: clip-path;
}

.burn-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 61;
  pointer-events: none;
}

noscript p {
  max-width: 34rem;
  margin: 20vh auto;
  padding: 24px;
  background: #fff;
  border-radius: 16px;
  font-family: 'Varela Round', system-ui, sans-serif;
  color: #3a2d34;
}