:root {
  --marinho: #14213D;
  --marinho-fundo: #0A1528;
  --dourado: #C9A227;
  --dourado-claro: #EAD27A;
  --creme: #F4EBD9;
  --vinho: #7A1F2B;
  --fonte-titulo: "Lora", Georgia, "Times New Roman", serif;
  /* halo marinho bem escuro, em camadas de 1 a 12 px, para texto marfim sobre qualquer fundo */
  --halo: 0 0 1px rgba(4, 9, 22, 1), 0 0 2px rgba(4, 9, 22, 1), 0 0 3px rgba(4, 9, 22, 1),
          0 1px 4px rgba(4, 9, 22, 0.95), 0 0 5px rgba(4, 9, 22, 0.9), 0 0 6px rgba(4, 9, 22, 0.9),
          0 0 7px rgba(4, 9, 22, 0.85), 0 0 8px rgba(4, 9, 22, 0.85), 0 0 10px rgba(4, 9, 22, 0.8),
          0 0 12px rgba(4, 9, 22, 0.75);
  --ouro-velho: #B8963F;
  --ouro-velho-escuro: #7A6226;
  --fonte-rotulo: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--marinho-fundo);
  color: var(--creme);
}

body {
  font-family: var(--fonte-rotulo);
  -webkit-tap-highlight-color: transparent;
}

#cena { position: fixed; inset: 0; overflow: hidden; }
#palco { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 50% 50%; }
#palco canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
#palco { opacity: 0; transition: opacity 0.8s ease-out; }
.mapa-pronto #palco { opacity: 1; }
.aviso-webgl { display: none; }
.sem-webgl #palco { opacity: 1; }
.sem-webgl .aviso-webgl {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 24px;
  text-align: center;
  font-family: var(--fonte-titulo);
  font-size: 18px;
}

.vinheta-base {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 150px;
  background: linear-gradient(to bottom, rgba(10, 21, 40, 0), rgba(10, 21, 40, 0.78));
  pointer-events: none;
}

/* ---------- Barra de tempo (canaleta de mármore) ---------- */

#barra-tempo {
  position: fixed;
  left: max(28px, 6vw);
  right: max(28px, 6vw);
  bottom: 34px;
  height: 64px;
  user-select: none;
  -webkit-user-select: none;
}

.barra-trilho {
  position: absolute;
  left: 0; right: 0;
  top: 18px;
  height: 32px;
  cursor: pointer;
  touch-action: none;
  outline: none;
  border-radius: 16px;
}
.barra-trilho:focus-visible .barra-linha { box-shadow: 0 0 0 2px rgba(184, 150, 63, 0.6), inset 0 1px 3px rgba(40, 30, 10, 0.45); }

/* A canaleta passa um pouco das pontas: o botão, centrado no início ou no fim, continua encaixado nela. */
.barra-linha {
  position: absolute;
  left: -14px;
  right: -14px;
  top: 8px;
  height: 16px;
  border-radius: 8px;
  border: 1px solid var(--ouro-velho);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='40'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.5 0 0 0 0 0.4 0 0 0 -2.4 1.25'/%3E%3C/filter%3E%3Crect width='600' height='40' filter='url(%23v)'/%3E%3C/svg%3E") 0 0 / 600px 40px,
    linear-gradient(to bottom, #F7F2E6, #E9E1CF 60%, #DCD2BD);
  box-shadow:
    inset 0 2px 3px rgba(40, 30, 10, 0.35),
    inset 0 -1px 1px rgba(255, 255, 255, 0.5),
    0 1px 3px rgba(5, 10, 24, 0.55);
}

/* filete dourado incrustado no trecho já percorrido */
.barra-progresso {
  position: absolute;
  left: 0;
  top: 15px;
  height: 2px;
  width: 0;
  border-radius: 1px;
  background: linear-gradient(to bottom, #D6BC74, var(--ouro-velho-escuro));
  box-shadow: 0 0 0 0.5px rgba(122, 98, 38, 0.6);
}

.barra-embreve {
  position: absolute;
  top: -2px;
  height: 10px;
  border-top: 1px dashed rgba(244, 235, 217, 0.45);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  padding-top: 3px;
  color: rgba(244, 235, 217, 0.75);
  text-shadow: var(--halo);
  pointer-events: none;
  transform: translateY(-6px);
}

/* marcos: cravos azul-marinho com aro dourado fino */
.barra-marco {
  position: absolute;
  top: 16px;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #33456E, var(--marinho) 60%, #0B1428);
  box-shadow: 0 0 0 1px var(--ouro-velho), 0 1px 1px rgba(5, 10, 24, 0.5);
  transition: transform 0.3s, box-shadow 0.3s;
}
.barra-marco.atual {
  transform: scale(1.3);
  box-shadow: 0 0 0 1px #D6BC74, 0 0 6px rgba(214, 188, 116, 0.7);
}
.barra-marco.fase2 { opacity: 0.4; background: #6B7488; box-shadow: 0 0 0 1px rgba(184, 150, 63, 0.5); }

/* dica ao passar o mouse sobre um marco */
.barra-marco::after {
  content: attr(data-dica);
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  padding: 5px 10px;
  font-family: var(--fonte-titulo);
  font-size: 12.5px;
  color: #2E2519;
  background: #F6EFDF;
  border: 1px solid rgba(168, 132, 36, 0.8);
  border-radius: 2px;
  box-shadow: 0 4px 10px rgba(5, 10, 20, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 3;
}
.barra-marco.dica-esquerda::after { left: -6px; transform: translate(0, 4px); }
.barra-marco.dica-direita::after { left: auto; right: -6px; transform: translate(0, 4px); }
@media (hover: hover) {
  .barra-marco:hover::after { opacity: 1; transform: translate(-50%, 0); }
  .barra-marco.dica-esquerda:hover::after,
  .barra-marco.dica-direita:hover::after { transform: translate(0, 0); }
}

/* botão: pequena medalha de ouro velho fosco, encaixada na canaleta */
.barra-botao {
  position: absolute;
  top: 16px;
  left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 2;
}
.barra-pino {
  position: absolute;
  width: 22px; height: 22px;
  left: -11px; top: -11px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 244, 210, 0.55), rgba(255, 244, 210, 0) 45%),
    radial-gradient(circle, #CDB26A 0%, var(--ouro-velho) 58%, var(--ouro-velho-escuro) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(122, 98, 38, 0.85),
    inset 0 0 0 3.5px rgba(214, 188, 116, 0.55),
    0 2px 4px rgba(5, 10, 24, 0.55);
  transition: transform 0.14s ease-out, box-shadow 0.14s ease-out;
}
/* aro gravado no centro da medalha */
.barra-pino::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(110, 85, 30, 0.6);
  box-shadow: 0 1px 0 rgba(255, 240, 200, 0.35);
}
.apertado .barra-pino {
  transform: scale(0.86);
  box-shadow:
    inset 0 0 0 1.5px rgba(122, 98, 38, 0.9),
    inset 0 2px 4px rgba(60, 45, 10, 0.55),
    0 1px 2px rgba(5, 10, 24, 0.5);
}
.barra-pino::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(214, 188, 116, 0.9);
  opacity: 0;
}
.barra-pino.pulso::after { animation: pulso 0.55s ease-out; }
@keyframes pulso {
  from { transform: scale(1); opacity: 0.9; }
  to   { transform: scale(2.1); opacity: 0; }
}

/* ano acima do botão: marfim, com o mesmo halo do título */
.barra-ano {
  position: absolute;
  bottom: 18px;
  left: 0;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--creme);
  text-shadow: var(--halo);
}

.barra-extremos {
  position: absolute;
  left: 0; right: 0;
  top: 48px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(244, 235, 217, 0.8);
  text-shadow: var(--halo);
  pointer-events: none;
}

/* ---------- Rodapé ---------- */

/* assinatura no canto inferior esquerdo, alinhada ao início da barra; fica sempre visível */
#assinatura {
  position: fixed;
  left: max(28px, 6vw);
  bottom: 8px;
  max-width: calc(100vw - 2 * max(28px, 6vw));
  font-family: var(--fonte-rotulo);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: rgba(244, 235, 217, 0.66);
  text-shadow: var(--halo);
  pointer-events: none;
}

/* ---------- Aviso para arrastar (só até a primeira interação com a barra) ---------- */

#aviso-arrastar {
  position: fixed;
  left: 50%;
  bottom: 28px;                      /* logo abaixo da barra, sem encostar; acima da assinatura */
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  font-family: var(--fonte-rotulo);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--creme);
  text-shadow: var(--halo);
  pointer-events: none;
  animation: aviso-piscar 2.6s ease-in-out infinite;
}
#aviso-arrastar.saindo-aviso { animation: none; opacity: 0; transition: opacity 0.4s ease; }
@keyframes aviso-piscar {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
/* enquanto o aviso está visível: o botão da barra pulsa de leve */
body.com-aviso .barra-pino { animation: convite-pino 2.6s ease-in-out infinite; }
body.com-aviso .barra-pino:not(.pulso)::after { animation: convite-aro 2.6s ease-out infinite; }
@keyframes convite-pino {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
@keyframes convite-aro {
  0%   { transform: scale(1); opacity: 0.55; }
  60%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #aviso-arrastar, body.com-aviso .barra-pino, body.com-aviso .barra-pino:not(.pulso)::after { animation: none; }
}

.sem-js {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--fonte-titulo);
  font-size: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .barra-pino.pulso::after { animation-duration: 0.01s; }
  .barra-marco, .barra-marco::after { transition: none; }
}

/* ---------- Painel temporário de ajuste (index.html?ajuste=1) ---------- */

#painel-ajuste {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  width: min(320px, calc(100vw - 32px));
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--creme);
  background: rgba(10, 21, 40, 0.92);
  border: 1px solid rgba(201, 162, 39, 0.5);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
#painel-ajuste strong { display: block; margin-bottom: 8px; font-size: 13px; color: var(--dourado); }
#painel-ajuste label { display: block; margin: 8px 0; }
#painel-ajuste input { display: block; width: 100%; accent-color: var(--dourado); }
#painel-ajuste p { margin: 10px 0 4px; opacity: 0.75; }
#painel-ajuste code { display: block; font-size: 11px; color: var(--dourado-claro); user-select: all; }

/* ---------- Título (alto, à esquerda) ---------- */

#nevoa {
  position: fixed;
  top: max(16px, 2.4vh);
  left: max(18px, 2.2vw);
  z-index: 5;
  width: min(460px, 62vw);
  pointer-events: none;
  /* halo escuro só nas letras (sem caixa nem fundo): leitura sobre qualquer fundo */
  text-shadow: var(--halo);
}

/* troca sem fila: o antigo e o novo ocupam a mesma célula e se cruzam */
.titulo-fase-area, .titulo-governo { display: grid; }
.titulo-fase-area > *, .titulo-governo > * { grid-area: 1 / 1; }
.saindo { animation: sair 0.2s ease-in forwards; }
@keyframes sair { to { opacity: 0; filter: blur(6px); transform: translateX(10px); } }

.nevoa-fase {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 58px; /* a escala global (--s) reduz em telas menores */
  line-height: 1.02;
  letter-spacing: 0.015em;
  color: var(--creme);
}
.nevoa-letra {
  display: inline-block;
  opacity: 0;
  animation: condensar 0.16s ease-out forwards;
}
@keyframes condensar {
  from { opacity: 0; filter: blur(8px); transform: translateX(-10px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
.nevoa-regime, .nevoa-periodo, .governo-item {
  margin: 0;
  opacity: 0;
  animation: surgir 0.22s ease-out forwards;
}
@keyframes surgir {
  from { opacity: 0; filter: blur(4px); }
  to   { opacity: 1; filter: none; }
}
.nevoa-regime {
  margin-top: 8px;
  max-width: 420px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(244, 235, 217, 0.82);
}
.nevoa-periodo {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dourado);
}

/* linha "Governo" */
.titulo-governo { margin-top: 10px; min-height: 1.2em; }
.titulo-governo.vazia { min-height: 0; margin-top: 0; }
.governo-item { font-size: 13.5px; line-height: 1.45; color: var(--creme); max-width: 440px; }
.governo-rotulo {
  margin-right: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  font-variant: small-caps;
  text-transform: lowercase;
  color: var(--dourado);
}

/* fio dourado fino abaixo do bloco */
.titulo-fio {
  margin-top: 12px;
  width: min(300px, 70%);
  height: 1px;
  background: linear-gradient(to right, rgba(201, 162, 39, 0.9), rgba(201, 162, 39, 0));
  box-shadow: 0 0 1px rgba(5, 10, 24, 0.9), 0 0 6px rgba(5, 10, 24, 0.7);
}

/* ---------- Moeda (alto, à direita) ---------- */

#moeda-area {
  position: fixed;
  top: max(16px, 2.4vh);
  right: max(24px, 2.6vw);
  z-index: 5;
  width: 160px;
  pointer-events: none;
}
.moeda { margin: 0; position: absolute; top: 0; left: 0; width: 100%; }
.moeda.saindo { animation: moeda-sai 0.18s ease-in forwards; }
@keyframes moeda-sai { to { opacity: 0; transform: scale(0.92); } }

.moeda-flutua {
  position: relative;
  perspective: 700px;
  animation: flutuar 7s ease-in-out 0.25s infinite;
}
@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* entrada curta: um giro rápido (até 250 ms) e assenta */
.moeda-disco {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  animation: virar 0.25s cubic-bezier(0.2, 0.8, 0.3, 1) both, girar-sutil 12s ease-in-out 0.25s infinite;
}
@keyframes virar {
  from { opacity: 0.3; transform: rotateY(-100deg) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes girar-sutil {
  0%, 100% { transform: rotateY(0) rotateX(0); }
  30%      { transform: rotateY(8deg) rotateX(2deg); }
  70%      { transform: rotateY(-6deg) rotateX(-1.5deg); }
}

.moeda-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 3px 4px rgba(5, 8, 16, 0.45));
}
.moeda-face svg { display: block; width: 100%; height: 100%; }
.moeda-face.verso { transform: rotateY(180deg); }

/* reflexo de luz passando devagar (discreto: o metal é fosco) */
.moeda-reflexo {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background: linear-gradient(115deg, rgba(255, 252, 240, 0) 40%, rgba(255, 252, 240, 0.2) 50%, rgba(255, 252, 240, 0) 60%);
  background-size: 300% 300%;
  mix-blend-mode: soft-light;
  animation: reflexo 9s ease-in-out 1s infinite;
}
@keyframes reflexo {
  0%   { background-position: 100% 100%; }
  45%  { background-position: 0% 0%; }
  100% { background-position: 0% 0%; }
}

/* sombra sobre o mapa: diminui quando a moeda sobe */
.moeda-sombra {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 92%;
  height: 11%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(5, 8, 16, 0.5), rgba(5, 8, 16, 0));
  filter: blur(3px);
  z-index: -1;
  animation: sombra 7s ease-in-out 0.25s infinite;
}
@keyframes sombra {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50%      { transform: translateY(4px) scale(0.9); opacity: 0.75; }
}

/* etiqueta de museu: parada, centralizada sob a posição de repouso da moeda (só a moeda flutua) */
.moeda-etiqueta {
  position: absolute;
  z-index: -2;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(calc(-50% + var(--desloc, 0px)));
  width: max-content;
  max-width: 230px;
  padding: 7px 12px 8px;
  text-align: center;
  background: #F6EFDF;
  border: 1px solid rgba(168, 132, 36, 0.85);
  outline: 1px solid rgba(246, 239, 223, 0.9);
  border-radius: 1px;
  box-shadow: 0 5px 14px rgba(5, 10, 20, 0.4);
  animation: surgir 0.22s ease-out both;
}
.moeda-etiqueta strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.25;
  color: var(--vinho);
}
.moeda-etiqueta span {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.35;
  color: #4A4136;
}

@media (prefers-reduced-motion: reduce) {
  .moeda-flutua, .moeda-sombra, .moeda-reflexo { animation: none; }
  .moeda-disco { animation: surgir 0.2s ease-out both; }
}

@media (prefers-reduced-motion: reduce) {
  #palco { transition-duration: 0.2s; }
}

/* ---------- Nuvens do drone ---------- */

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

/* ---------- Acontecimentos no mapa ---------- */

#acontecimentos { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.acontecimento { position: absolute; left: 0; top: 0; }
.alfinete {
  position: absolute;
  left: -7px;
  top: -21px;
  width: 14px;
  height: 21px;
  opacity: 0;
  transition: opacity 0.45s ease-out;
  will-change: transform;
}
.alfinete svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 2px rgba(5, 8, 16, 0.55)); }
.alfinete path { fill: #C9A227; stroke: #6E5208; stroke-width: 0.8; }
.alfinete circle { fill: #F6EFDF; }
.cartao {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  max-width: 230px;
  padding: 6px 10px 7px;
  font-family: var(--fonte-titulo);
  font-size: 13px;
  line-height: 1.35;
  color: #2E2519;
  background: rgba(246, 239, 223, 0.95);
  border: 1px solid rgba(168, 132, 36, 0.7);
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(5, 10, 20, 0.35);
  opacity: 0;
  transition: opacity 0.45s ease-out;
  will-change: transform;
}
.cartao-rotulo {
  display: block;
  margin-bottom: 1px;
  font-family: var(--fonte-rotulo);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8A6A12;
}
.cartao-texto { display: block; }
.acontecimento.visivel .alfinete, .acontecimento.visivel .cartao { opacity: 1; }

/* ---------- Pergaminho ---------- */

#pergaminhos { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.pergaminho {
  position: absolute;
  width: min(360px, calc(100vw - 36px));
  --meia: 120px;
}

.perg-flutua { position: relative; }
.pergaminho.aberto .perg-flutua { animation: perg-flutuar 8s ease-in-out 0.9s infinite; }
@keyframes perg-flutuar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35%      { transform: translateY(-4px) rotate(0.5deg); }
  70%      { transform: translateY(-1px) rotate(-0.4deg); }
}

/* papel envelhecido: base em tons quentes; a textura (fibras, manchas, dobras, bordas) vem do SVG */
.perg-papel {
  position: relative;
  margin: 0 8px;
  padding: 19px 25px 17px;
  pointer-events: auto;
  color: #3B2A18;
  background:
    radial-gradient(ellipse at 50% 45%, #F3E7C9 0%, #EDDDB8 60%, #E2CC9D 100%);
  box-shadow: inset 0 0 26px rgba(110, 72, 28, 0.32);
  clip-path: inset(50% 0 50% 0);
  /* bordas um pouco gastas (contorno levemente irregular) */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='r' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.08' numOctaves='2' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='4' y='4' width='392' height='392' fill='white' filter='url(%23r)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='r' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.08' numOctaves='2' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='4' y='4' width='392' height='392' fill='white' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
}
.perg-textura {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.perg-papel > :not(.perg-textura) { position: relative; }

.perg-titulo {
  margin: 0 22px 8px 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: var(--vinho);
}
.perg-texto {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 15px;
  line-height: 1.55;
  color: #34240F;
}
.perg-lembretes {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid rgba(150, 118, 48, 0.5);
}
.perg-lembretes p {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: #56412A;
}
.perg-lembretes p + p { margin-top: 6px; }

.perg-fechar {
  position: absolute !important;
  top: 9px;
  right: 10px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(122, 98, 38, 0.4);
  border-radius: 50%;
  background: rgba(243, 231, 201, 0.55);
  color: #6B5232;
  font: 16px/1 var(--fonte-titulo);
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s, background 0.2s;
}
.perg-fechar:hover, .perg-fechar:focus-visible { opacity: 1; background: rgba(243, 231, 201, 1); outline: none; }

/* rolos de madeira: veio visível, sombreado cilíndrico, pontas mais escuras */
.perg-rolo {
  position: relative;
  height: 15px;
  margin: 0 3px;
  border-radius: 7px;
  background:
    linear-gradient(to bottom, rgba(25, 12, 4, 0.5), rgba(255, 222, 170, 0.16) 38%, rgba(255, 222, 170, 0) 55%, rgba(25, 12, 4, 0.55)),
    linear-gradient(to right, rgba(30, 15, 5, 0.6), rgba(30, 15, 5, 0) 10%, rgba(30, 15, 5, 0) 90%, rgba(30, 15, 5, 0.6)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='16'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.55' numOctaves='3' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.13 0 0 0 0 0.05 0 0 0 1.4 -0.45'/%3E%3C/filter%3E%3Crect width='320' height='16' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 320px 15px,
    #7C5029;
  box-shadow: 0 3px 5px rgba(35, 20, 8, 0.35);
  z-index: 1;
}
/* ponteiras em metal envelhecido (o mesmo ouro velho fosco da moeda e da barra) */
.perg-rolo::before, .perg-rolo::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 10px;
  height: 21px;
  border-radius: 4px 4px 4px 4px / 5px 5px 5px 5px;
  background:
    radial-gradient(ellipse at 40% 28%, rgba(255, 242, 205, 0.4), rgba(255, 242, 205, 0) 55%),
    linear-gradient(to bottom, #5F4C22, #9C7E36 30%, #C2A75E 48%, var(--ouro-velho) 62%, #5F4C22);
  box-shadow: inset 0 0 0 1px rgba(80, 62, 22, 0.45), 0 1px 2px rgba(35, 20, 8, 0.4);
}
.perg-rolo::before { left: -8px; }
.perg-rolo::after { right: -8px; }
.perg-rolo.topo { margin-bottom: -6px; transform: translateY(var(--meia)); }
.perg-rolo.base { margin-top: -6px; transform: translateY(calc(-1 * var(--meia))); }

/* sombra no mapa: suave e difusa, como de um objeto real flutuando */
.perg-sombra {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 26px;
  bottom: -22px;
  border-radius: 24px;
  background: rgba(8, 12, 24, 0.3);
  filter: blur(22px);
  opacity: 0;
  transition: opacity 0.7s ease-out 0.3s;
}
.pergaminho.aberto .perg-sombra { opacity: 1; animation: perg-sombra 8s ease-in-out 0.9s infinite; }
@keyframes perg-sombra {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  35%      { transform: translate(2px, 4px) scale(0.97); opacity: 0.82; }
  70%      { transform: translate(1px, 1px) scale(0.99); opacity: 0.95; }
}

/* desenrolar: os rolos se afastam a partir do meio e revelam o papel */
.pergaminho.aberto .perg-papel { clip-path: inset(0 0 0 0); transition: clip-path 0.9s cubic-bezier(0.3, 0.7, 0.2, 1); }
.pergaminho.aberto .perg-rolo { transform: none; transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1); }
.pergaminho:not(.aberto):not(.fechando) .perg-rolo,
.pergaminho:not(.aberto):not(.fechando) .perg-papel { transition: none; }
/* enrolar ao fechar */
.pergaminho.fechando .perg-papel { clip-path: inset(50% 0 50% 0); transition: clip-path 0.45s ease-in; }
.pergaminho.fechando .perg-rolo.topo { transform: translateY(var(--meia)); transition: transform 0.45s ease-in; }
.pergaminho.fechando .perg-rolo.base { transform: translateY(calc(-1 * var(--meia))); transition: transform 0.45s ease-in; }
.pergaminho.fechando { opacity: 0; transition: opacity 0.2s ease-in 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .pergaminho.aberto .perg-flutua, .pergaminho.aberto .perg-sombra { animation: none; }
  .pergaminho.aberto .perg-papel, .pergaminho.aberto .perg-rolo { transition-duration: 0.25s; }
}

/* modo compacto: só quando não há espaço livre do território para o tamanho normal */
.pergaminho.compacto .perg-papel { padding: 14px 20px 13px; }
.pergaminho.compacto .perg-titulo { font-size: 17.5px; margin-bottom: 6px; }
.pergaminho.compacto .perg-texto { font-size: 14px; line-height: 1.45; }
.pergaminho.compacto .perg-lembretes { margin-top: 8px; padding-top: 6px; }

/* ---------- Estante das fontes do direito (canto inferior esquerdo) ---------- */

#fontes {
  position: fixed;
  left: max(14px, calc(6vw - 14px));
  bottom: 108px;
  z-index: 4;
  width: 356px;
  height: 22vh;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 0 6px;
  pointer-events: none;
}

/* prateleira de madeira sob as três pilhas: tampo claro em cima e a frente, onde fica a plaquinha */
.estante-tabua {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  height: 17px;
  border-radius: 2px;
  background:
    linear-gradient(to bottom, rgba(255, 222, 170, 0.26) 0, rgba(255, 222, 170, 0.12) 2.5px, rgba(25, 12, 4, 0.28) 3px, rgba(25, 12, 4, 0) 6px, rgba(25, 12, 4, 0) 60%, rgba(25, 12, 4, 0.42)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='18'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.32' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.13 0 0 0 0 0.05 0 0 0 1.4 -0.45'/%3E%3C/filter%3E%3Crect width='360' height='18' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 360px 17px,
    #6E4524;
  box-shadow: 0 4px 8px rgba(5, 10, 20, 0.45);
}
/* plaquinha de ouro velho colada na frente da prateleira, com o nome gravado */
.estante-placa {
  position: absolute;
  left: 50%;
  top: 2px;
  height: 13px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 0 10px 0 10.5px;
  white-space: nowrap;
  font: 700 9.4px/1 var(--fonte-titulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #241703;
  text-shadow: 0 0.7px 0 rgba(255, 240, 196, 0.55), 0 -0.5px 0 rgba(20, 12, 2, 0.45);
  border-radius: 1px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.9' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.24 0 0 0 0 0.1 0 0 0 0.9 -0.35'/%3E%3C/filter%3E%3Crect width='120' height='12' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, #D2B874, var(--ouro-velho) 55%, #8E7432);
  box-shadow:
    inset 0 0 0 0.6px rgba(110, 88, 34, 0.9),
    inset 0 0.8px 0 rgba(255, 240, 200, 0.4),
    0 1px 1.5px rgba(10, 5, 0, 0.55);
}
/* pregos nas pontas */
.estante-placa::before, .estante-placa::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2.4px;
  height: 2.4px;
  margin-top: -1.2px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #E6D29A, #7A6226);
  box-shadow: 0 0.4px 0.6px rgba(20, 12, 2, 0.6);
}
.estante-placa::before { left: 3.5px; }
.estante-placa::after { right: 3.5px; }

.pilha {
  position: relative;
  width: 104px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.pilha-objetos {
  display: flex;
  flex-direction: column-reverse;   /* a primeira fonte fica embaixo */
  align-items: center;
  margin-bottom: 35px;               /* apoiada na prateleira */
}
.pilha-rotulo {
  position: absolute;
  bottom: 2px;
  left: -6px;
  right: -6px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: rgba(244, 235, 217, 0.85);
  text-shadow: var(--halo);
  white-space: nowrap;
}

.fonte-peca {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  margin-top: -1px;
  transform: translateX(var(--dx)) rotate(var(--rot));
  filter: drop-shadow(0 2px 2px rgba(10, 8, 6, 0.45));
  outline: none;
}
.fonte-peca:focus-visible { filter: drop-shadow(0 0 3px rgba(214, 188, 116, 0.9)); }
.fonte-svg svg { display: block; }
.fonte-peca.caindo { animation: cair 0.6s cubic-bezier(0.3, 0.6, 0.35, 1) both; }
.fonte-peca.caindo-rapido { animation: surgir 0.2s ease-out both; }
.fonte-peca.saindo-pilha { animation: sair-pilha 0.22s ease-in forwards; }
@keyframes cair {
  from { opacity: 0; transform: translate(var(--dx), -42px) rotate(calc(var(--rot) * 4)); }
  55%  { opacity: 1; }
  80%  { transform: translate(var(--dx), 1.5px) rotate(var(--rot)); }
  to   { opacity: 1; transform: translateX(var(--dx)) rotate(var(--rot)); }
}
@keyframes sair-pilha { to { opacity: 0; transform: translate(var(--dx), -14px) rotate(var(--rot)); } }

/* gravações dos juristas: discretas */
.grav-pedra, .grav-bronze, .tinta { font-family: var(--fonte-titulo); font-weight: 600; letter-spacing: 0.02em; }
.grav-pedra { fill: #4E473C; fill-opacity: 0.62; }
.grav-bronze { fill: #2E2210; fill-opacity: 0.6; }
.tinta { font-style: italic; font-weight: 500; fill: #4A3418; fill-opacity: 0.68; }

/* nome da fonte que acabou de entrar (~2 s) */
.pilha-anuncio {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translate(-50%, 4px);
  width: max-content;
  max-width: 180px;
  padding: 4px 9px 5px;
  font-family: var(--fonte-titulo);
  font-size: 12.5px;
  line-height: 1.3;
  text-align: center;
  color: var(--vinho);
  background: #F6EFDF;
  border: 1px solid rgba(168, 132, 36, 0.8);
  border-radius: 1px;
  box-shadow: 0 4px 10px rgba(5, 10, 20, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
.pilha-anuncio.visivel { opacity: 1; transform: translate(-50%, 0); }
.pilha-anuncio:empty { display: none; }

/* cartão de leitura (mesmo estilo da etiqueta da moeda) */
.fonte-cartao {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: max-content;
  max-width: 300px;
  padding: 9px 13px 10px;
  background: #F6EFDF;
  border: 1px solid rgba(168, 132, 36, 0.85);
  outline: 1px solid rgba(246, 239, 223, 0.9);
  border-radius: 1px;
  box-shadow: 0 6px 16px rgba(5, 10, 20, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}
.fonte-cartao.visivel { opacity: 1; }
.fonte-cartao strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  color: var(--vinho);
}
.fonte-cartao .fonte-explicacao { margin: 5px 0 0; font-size: 12px; line-height: 1.45; color: #3E352A; }

.fonte-cartao .fonte-convite {
  margin: 7px 0 0;
  padding-top: 6px;
  border-top: 1px solid rgba(168, 132, 36, 0.45);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--vinho);
}

/* lacre de novidade: juristas novos que o aluno ainda não viu no quadro */
.fonte-peca.com-lacre { z-index: 1; }
.fonte-lacre {
  position: absolute;
  top: -3px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #A8384A, var(--vinho) 55%, #4E1019);
  box-shadow: 0 0 0 1.2px #C2A75E, 0 0 0 1.8px rgba(90, 70, 20, 0.6), 0 1px 2px rgba(10, 5, 2, 0.6);
  pointer-events: none;
  animation: surgir 0.3s ease-out both;
}

/* ---------- Quadro "Saiba mais" de uma fonte ---------- */

.fq-fundo {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(5, 10, 22, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.fq-fundo.visivel { opacity: 1; }
.fq {
  /* em telas menores, encolhe com a tela, sem ficar ilegível */
  --sq: max(var(--s), 0.82);
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 31;
  width: 620px;
  max-width: calc((100vw - 32px) / var(--sq));
  max-height: calc((100vh - 40px) / var(--sq));
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 250, 236, 0.7), rgba(255, 250, 236, 0) 70%),
    linear-gradient(to bottom, #F7F0E0, #EFE4CB);
  border: 1px solid rgba(168, 132, 36, 0.85);
  outline: 1px solid rgba(246, 239, 223, 0.9);
  border-radius: 2px;
  box-shadow: inset 0 0 0 5px #F6EFDF, inset 0 0 0 6px rgba(184, 150, 63, 0.55), 0 18px 48px rgba(3, 7, 16, 0.55);
  color: #2E2519;
  opacity: 0;
  transform: translate(-50%, -48%) scale(var(--sq));
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.fq.visivel { opacity: 1; transform: translate(-50%, -50%) scale(var(--sq)); }
.fq:focus { outline: 1px solid rgba(246, 239, 223, 0.9); }
.fq-rolagem {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 36px 26px;
  scrollbar-width: thin;
  scrollbar-color: rgba(122, 98, 38, 0.6) transparent;
  outline: none;
}
.fq-rolagem:focus-visible { box-shadow: inset 0 0 0 2px rgba(184, 150, 63, 0.6); }
.fq-cabeca {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 30px 14px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(168, 132, 36, 0.55);
}
.fq-objeto { flex: none; width: 78px; filter: drop-shadow(0 2px 2px rgba(10, 8, 6, 0.35)); }
.fq-objeto svg { display: block; width: 100%; height: auto; }
.fq-cabeca h2 {
  margin: 0;
  font: 600 23px/1.25 var(--fonte-titulo);
  color: var(--vinho);
}
.fq section { margin-top: 15px; }
.fq h3 {
  margin: 0 0 4px;
  font: 600 12px/1.3 var(--fonte-titulo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A6A2A;
}
.fq section p { margin: 0; font: 400 15.5px/1.6 var(--fonte-titulo); color: #2E2519; }
.fq-juristas ul { margin: 0; padding: 0; list-style: none; }
.fq-juristas li { font: 400 15px/1.55 var(--fonte-titulo); color: #3A3024; }
.fq-juristas li + li { margin-top: 5px; }
.fq-juristas li b { font-weight: 600; color: #3B2A18; }
.fq-futuros {
  margin: 18px 0 0;
  font: italic 400 13.5px/1.5 var(--fonte-titulo);
  color: rgba(70, 58, 42, 0.78);
}
.fq-fechar {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 1;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(168, 132, 36, 0.6);
  border-radius: 50%;
  background: rgba(246, 239, 223, 0.9);
  color: var(--vinho);
  font: 400 21px/1 var(--fonte-titulo);
  cursor: pointer;
}
.fq-fechar:hover, .fq-fechar:focus-visible { background: #EADFC4; outline: 2px solid var(--dourado); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .fq, .fq-fundo { transition-duration: 0.01s; }
  .fonte-lacre { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fonte-peca.caindo { animation: surgir 0.2s ease-out both; }
}

/* ---------- Camadas ---------- */

/* ligar e desligar com transição suave (~250 ms); oculta não recebe cliques nem foco */
#nevoa, #moeda-area, #pergaminhos, #fontes { transition: opacity 0.25s ease, visibility 0s linear 0s; }
body.sem-titulo #nevoa,
body.sem-moeda #moeda-area,
body.sem-pergaminho #pergaminhos,
body.sem-fontes #fontes {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

/* flâmula "Exibir": presa na borda direita da tela, na altura do fim da barra; a palavra fica embaixo */
#camadas-botao {
  position: fixed;
  right: 0;
  bottom: 102px;                     /* acima do "em breve" da barra, sem encostar */
  z-index: 6;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#camadas-botao:focus { outline: none; }
.flamula {
  display: block;
  width: 64px;
  height: 35px;
  overflow: visible;
  transform-origin: 100% 50%;
  filter: drop-shadow(-2px 3px 3px rgba(5, 10, 20, 0.5)) drop-shadow(0 0 1px rgba(5, 10, 20, 0.35));
}
#camadas-botao:focus-visible .flamula {
  filter: drop-shadow(0 0 2px rgba(234, 210, 122, 0.95)) drop-shadow(-2px 3px 3px rgba(5, 10, 20, 0.5));
}
.flamula.balancando { animation: flamular 1.5s ease-in-out; }
@keyframes flamular {
  0%   { transform: none; }
  16%  { transform: rotate(-2.4deg) skewY(1.4deg) scaleX(0.985); }
  38%  { transform: rotate(1.7deg) skewY(-1deg); }
  60%  { transform: rotate(-1deg) skewY(0.6deg); }
  80%  { transform: rotate(0.4deg) skewY(-0.2deg); }
  100% { transform: none; }
}
.flamula-rotulo {
  font: 500 11px/1.25 var(--fonte-rotulo);
  letter-spacing: 0.08em;
  color: var(--creme);
  text-shadow: var(--halo);
  white-space: nowrap;
}

/* painel: gaveta que sai da borda direita, logo acima da flâmula */
#camadas-painel {
  position: fixed;
  right: 0;
  bottom: 160px;                     /* definido pelo script (logo acima da flâmula) */
  z-index: 21;
  width: 228px;
  padding: 9px 14px 8px 12px;
  background: #F6EFDF;
  border: 1px solid rgba(168, 132, 36, 0.85);
  border-right: 0;
  border-radius: 2px 0 0 2px;
  box-shadow: -6px 8px 22px rgba(5, 10, 20, 0.45);
  color: #2E2519;
  opacity: 0;
  transform: translateX(calc(100% + 16px));
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
}
#camadas-painel.aberto { opacity: 1; transform: none; }
#camadas-painel[hidden] { display: none; }
.camadas-titulo {
  margin: 0 0 7px;
  font: italic 600 14px var(--fonte-titulo);
  color: var(--vinho);
}
.camadas-atalhos { display: flex; gap: 6px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid rgba(168, 132, 36, 0.4); }
.camadas-atalhos button {
  flex: 1;
  padding: 5px 6px;
  font: 500 11.5px var(--fonte-rotulo);
  color: var(--vinho);
  background: transparent;
  border: 1px solid rgba(168, 132, 36, 0.6);
  border-radius: 2px;
  cursor: pointer;
}
.camadas-atalhos button:hover, .camadas-atalhos button:focus-visible { background: rgba(201, 162, 39, 0.14); outline: none; }
#camadas-painel ul { list-style: none; margin: 0; padding: 0; }
#camadas-painel [role=switch] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 2px;
  font: 400 13px var(--fonte-titulo);
  color: #2E2519;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
#camadas-painel [role=switch]:focus-visible { outline: 2px solid var(--dourado); outline-offset: 1px; border-radius: 2px; }
.camadas-icone { width: 9px; height: 13px; margin-left: 7px; vertical-align: -1px; overflow: visible; filter: drop-shadow(0 1px 1px rgba(40, 30, 10, 0.35)); }
.camadas-icone path { fill: #C9A227; stroke: #6E5208; stroke-width: 0.9; }
.camadas-icone circle { fill: #F6EFDF; }
.camadas-chave {
  position: relative;
  flex: none;
  width: 30px;
  height: 16px;
  border-radius: 8px;
  background: #CFC6B2;
  box-shadow: inset 0 1px 2px rgba(40, 30, 10, 0.35);
  transition: background 0.25s ease;
}
.camadas-chave i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F4EEDD, #BDB39C);
  box-shadow: 0 1px 2px rgba(40, 30, 10, 0.4);
  transition: transform 0.25s ease, background 0.25s ease;
}
[role=switch][aria-checked=true] .camadas-chave { background: linear-gradient(to bottom, #C2A75E, var(--ouro-velho)); }
[role=switch][aria-checked=true] .camadas-chave i { transform: translateX(14px); background: radial-gradient(circle at 35% 30%, #FFF8E6, #E6D9B8); }

@media (prefers-reduced-motion: reduce) {
  #nevoa, #moeda-area, #pergaminhos, #fontes, #camadas-painel, .camadas-chave, .camadas-chave i { transition-duration: 0.01s; }
  .flamula.balancando { animation: none; }
}

/* pergaminho aberto que muda de lugar (outra camada ligou ou desligou): desliza */
.pergaminho.aberto { transition: left 0.35s ease, top 0.35s ease; }
.pergaminho.saltando { transition: none !important; }
.pergaminho.reaparecendo { animation: perg-reaparecer 0.3s ease-out; }
@keyframes perg-reaparecer { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Escala global da interface (telas menores que 1920 × 1080) ---------- */
/* --s vem de js/escala.js (1 em 1920 × 1080). Cada elemento encolhe a partir do seu canto. */
:root { --s: 1; }
#nevoa { scale: var(--s); transform-origin: 0 0; }
#moeda-area { scale: var(--s); transform-origin: 100% 0; }
#fontes { scale: var(--s); transform-origin: 0 100%; height: calc(22vh / var(--s)); }
#camadas-botao { scale: calc(var(--s) * 1.3); transform-origin: 100% 100%; }
#camadas-painel { scale: var(--s); transform-origin: 100% 100%; }
#aviso-arrastar { font-size: calc(13px * max(var(--s), 0.85)); }
.pergaminho { transform-origin: 0 0; }   /* a escala do pergaminho é definida pelo script */
.barra-ano { font-size: calc(15px * var(--s)); }
.barra-extremos { font-size: calc(11px * max(var(--s), 0.85)); }
/* alfinete encolhe em torno da ponta; cartões a partir do canto (o script compõe a escala) */
.alfinete { transform-origin: 7px 21px; }
.cartao, .fonte-cartao { transform-origin: 0 0; }

/* pergaminho em último caso: o texto rola dentro dele em vez de invadir o mapa */
.pergaminho.rolando .perg-papel { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(122, 98, 38, 0.6) transparent; }
.pergaminho.rolando .perg-papel::-webkit-scrollbar { width: 6px; }
.pergaminho.rolando .perg-papel::-webkit-scrollbar-thumb { background: rgba(122, 98, 38, 0.55); border-radius: 3px; }

/* onde cada pergaminho é medido (uma vez), fora da vista */
.perg-medidor { position: fixed; left: 0; top: 0; visibility: hidden; pointer-events: none; z-index: -1; }
.perg-medidor .pergaminho { position: absolute; left: 0; top: 0; }