/* Site Arandumi: tokens do branding (engine/branding.js -> COR) e peças comuns. docs/13-site.md */
:root {
  --roxo: #6246C7; --amarelo: #FFD447; --turquesa: #27C6BE; --coral: #FF7869;
  --creme: #FFF8E8; --noite: #24304D; --contorno: #16213a;
  --cor-ep: var(--turquesa); --cor-ep-2: var(--roxo);
  --raio: 28px; --sombra: 0 8px 0 var(--contorno);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body {
  background: radial-gradient(circle at 50% 0%, var(--cor-ep-2), var(--noite) 70%);
  color: var(--creme); font-family: "Baloo 2", "Chalkboard SE", system-ui, sans-serif; font-weight: 800;
  user-select: none; -webkit-user-select: none;
}
.botao {
  min-width: 64px; min-height: 64px; padding: 12px 24px; border: 5px solid var(--contorno); border-radius: var(--raio);
  background: var(--amarelo); color: var(--contorno); font: inherit; font-size: clamp(20px, 3vw, 30px);
  box-shadow: var(--sombra); cursor: pointer; touch-action: manipulation; transition: transform .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
}
.botao:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--contorno); }
.botao[disabled] { opacity: .45; }
.cartao {
  background: var(--creme); color: var(--contorno); border: 6px solid var(--contorno); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 16px; text-decoration: none; display: flex; flex-direction: column;
  align-items: center; gap: 8px; min-height: 160px; touch-action: manipulation; font: inherit; cursor: pointer;
}
.cartao svg, .botao svg { width: 72px; height: 72px; }
.voltar { position: fixed; left: 16px; top: 16px; z-index: 10; }
.grade { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); padding: 16px; max-width: 1100px; margin: 0 auto; }
/* botões amarelos (docs/13-site.md "Regras de criança"): parados, respiram como gelatina, cada um no seu tempo; no toque,
   uma tremida de 0,8 s e só depois a ação (site/js/tremida.js). Só mexem em `scale`: o aperto (:active) continua no
   transform. O balão do título da saga, na home, respira devagar. Antes de .pula/.brilha/.balanca: essas ganham. */
@keyframes gelatina { 0%,100% { scale: 1 1 } 30% { scale: 1.06 0.94 } 50% { scale: 0.97 1.04 } 68% { scale: 1.02 0.98 } 82% { scale: 1 1 } }
@keyframes tremida { 0% { scale: 1 1 } 20% { scale: 1.14 0.86 } 40% { scale: 0.9 1.1 } 60% { scale: 1.06 0.94 } 80% { scale: 0.98 1.02 } 100% { scale: 1 1 } }
@keyframes respira { 0%,100% { scale: 1 1 } 50% { scale: 1.02 0.98 } }
:where(.botao:not(.pais):not([disabled])) { animation: gelatina 2.8s ease-in-out infinite; transform-origin: 50% 100%; }   /* :where: especificidade zero */
.botao:nth-child(2n) { animation-delay: -.7s; }
.botao:nth-child(3n) { animation-delay: -1.5s; }
.botao:nth-child(5n) { animation-delay: -2.1s; }
.botao.treme { animation: tremida .8s ease-out 1; animation-delay: 0s; }
.heroi-balao { animation: respira 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
/* selo roxo da saga no episódio: a respiração do exemplo A que o usuário escolheu (mais visível que a do balão) */
@keyframes respira-selo { 0%,100% { scale: 1 1 } 50% { scale: 1.035 0.965 } }
.selo-saga { animation: respira-selo 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .botao, .botao.treme, .heroi-balao, .selo-saga { animation: none; } }
@keyframes pulo { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
@keyframes brilho { 0%,100% { filter: drop-shadow(0 0 0 var(--amarelo)) } 50% { filter: drop-shadow(0 0 18px var(--amarelo)) } }
@keyframes girar-h { 0%, 78% { transform: rotateY(0) } 100% { transform: rotateY(360deg) } }   /* um giro rápido e uma pausa: o texto fica legível */
@keyframes balanca { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-12px) } 75% { transform: translateX(12px) } }
.pula { animation: pulo 1.6s ease-in-out infinite; }
.brilha { animation: brilho 2s ease-in-out infinite; }
.gira-h { animation: girar-h 7s ease-in-out infinite; transform-style: preserve-3d; }
.balanca { animation: balanca .35s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) {
  .pula, .brilha, .gira-h, .balanca { animation: none !important; }
  .confete { display: none !important; }
  .parallax .camada { transform: none !important; }
}
.ceu-fundo { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: inherit; transform: translateZ(0); }   /* site/js/app.js */
.parallax { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.parallax .camada { position: absolute; left: 0; right: 0; bottom: 0; background-repeat: repeat-x;
  background-size: auto 100%; background-position: 0 bottom; will-change: background-position, transform; }   /* faixa que se repete: sem corte no topo */

/* ---------- casca: cabeçalho, vitrine, cartões do episódio ---------- */
body { position: relative; padding-bottom: 120px; }
main, header, footer { position: relative; z-index: 1; }
.titulo { text-align: center; margin: 8px 16px 0; font-size: clamp(30px, 6vw, 60px); line-height: 1.05;
  text-shadow: 0 5px 0 var(--contorno); }
.sub { text-align: center; margin: 4px 16px 0; font-size: clamp(18px, 3vw, 26px); color: var(--amarelo); }
.faisca { position: absolute; width: 34px; height: 34px; pointer-events: none; z-index: 0; }
.porta { position: relative; overflow: hidden; padding: 0; border-color: var(--contorno); background: var(--cor-ep);
  transition: transform .2s; }
.porta img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-bottom: 6px solid var(--contorno); }
.porta span { padding: 10px 14px 14px; font-size: clamp(20px, 2.6vw, 28px); text-align: center; color: var(--contorno); }
.porta:active, .cartao:active { transform: scale(.97) rotate(-1deg); }
.acoes-topo { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 8px 16px; }
.rodape { position: relative; display: flex; justify-content: center; z-index: 5;   /* no fim da página: fixo, cobria os cartões ao rolar */
  padding: 28px 16px max(28px, calc(env(safe-area-inset-bottom) + 16px)); }   /* longe da borda */
.pais { position: relative; background: var(--creme); font-size: 18px; min-height: 64px;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }   /* iOS: sem menu ao segurar */
.pais.segurando::after { content: ''; position: absolute; inset: -8px; border-radius: inherit;
  background: conic-gradient(var(--amarelo) var(--k, 0%), transparent 0); z-index: -1; animation: encher 3s linear forwards; }
@property --k { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes encher { to { --k: 100%; } }
.cartao h2 { margin: 4px 0 0; font-size: clamp(22px, 3vw, 32px); }
.cartao .icone-grande { font-size: 64px; line-height: 1; }
.cartao.em-breve { background: #e4dfd3; color: #5b6275; cursor: default; }   /* sólido: o fundo não vaza */
.estrelas-mini { color: var(--amarelo); -webkit-text-stroke: 2px var(--contorno); font-size: 26px; letter-spacing: 2px; }
.estrelas-mini .apagada { color: transparent; }
.lista-jogos { display: grid; gap: 12px; width: 100%; }
.lista-jogos .botao { width: 100%; justify-content: space-between; font-size: clamp(18px, 2.2vw, 24px); text-align: left; }
dialog.video { padding: 0; border: 6px solid var(--contorno); border-radius: var(--raio); background: var(--noite);
  width: min(96vw, 960px); }
dialog.video::backdrop { background: rgba(22,33,58,.8); }
dialog.video iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }
dialog.video .botao { position: absolute; top: 8px; right: 8px; }
.texto-pais { max-width: 760px; margin: 0 auto; padding: 16px; font-weight: 600; font-family: system-ui, sans-serif; line-height: 1.5; }
.texto-pais h1, .texto-pais h2 { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; }
.texto-pais a { color: var(--amarelo); word-break: break-word; }
@media (prefers-reduced-motion: reduce) { .pais.segurando::after { animation-duration: 3s; } }

header { padding: 16px 100px 0; }   /* ⟵ à esquerda e o botão de som à direita */
/* ---------- sagas na home: mapa da trilha (site/js/trilha.js; docs/13-site.md "Sagas no site") ---------- */
#sagas { max-width: 1000px; margin: 0 auto; padding: 8px 24px; display: grid; gap: 44px; }   /* 24 px: número e ✓ saem da porta */
.saga { --porta-w: 45%; position: relative; }
.saga-icone svg { width: 64px; height: 64px; display: block; }   /* álbum */
/* home: topo (logo no canto e figurinhas) e herói da saga (site/js/heroi.js, site/js/planeta.js) */
.topo-home { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 14px 16px 0; min-height: 80px; }
.logo-canto { position: absolute; left: 16px; top: 14px; width: clamp(190px, 24vw, 300px); height: auto; filter: drop-shadow(0 5px 0 var(--contorno)); }   /* a sombra sólida do logo de antes */
.saga-heroi { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; margin: 72px 0 0; }   /* espaço para o Dumi abaixo do logo */
.heroi-mundo { position: relative; z-index: 2; flex: none; width: min(44%, 380px); margin-right: -48px; }
.heroi-mundo .planeta { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 0 rgba(22,33,58,.45)); }
.dumi-planeta { position: absolute; left: 50%; top: -22%; width: 40%; height: auto; margin-left: -20%; filter: drop-shadow(0 5px 0 rgba(22,33,58,.5)); }
.heroi-balao { position: relative; flex: 1; max-width: 600px; padding: 40px 60px 58px 72px; text-align: center; color: var(--noite);
  background: var(--creme); border: 6px solid var(--contorno); border-radius: 46% 54% 44% 56% / 60% 52% 48% 40%; box-shadow: 0 8px 0 var(--contorno); }
.heroi-titulo { margin: 0; font-size: clamp(38px, 6vw, 76px); line-height: .95; color: var(--noite); }
.heroi-sub { margin: 12px 0 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: clamp(17px, 2.4vw, 26px); color: var(--roxo); }
.heroi-sub .risco { width: 20px; height: 7px; border-radius: 4px; background: var(--amarelo); border: 2px solid var(--contorno); transform: rotate(-24deg); }
.heroi-sub .risco:last-child { transform: rotate(24deg); }
.heroi-estrela { position: absolute; right: 22px; top: -30px; width: 66px; transform: rotate(14deg); }
.heroi-estrela svg { display: block; width: 100%; height: auto; }
.explorar { position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%); white-space: nowrap; }
.explorar:active { transform: translateX(-50%) translateY(6px); }
.heroi-ouvir { position: absolute; right: -34px; top: 50%; width: 76px; height: 76px; margin-top: -38px; padding: 0; display: grid; place-items: center;
  background: #4a6ee0; border: 6px solid var(--contorno); border-radius: 50%; box-shadow: 0 6px 0 var(--contorno); cursor: pointer; touch-action: manipulation; }
.heroi-ouvir:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--contorno); }
.heroi-ouvir svg { width: 42px; height: 42px; }
.brilho { position: absolute; width: 44px; pointer-events: none; }
.brilho svg { display: block; width: 100%; height: auto; }
.brilho.b1 { right: 14%; top: -18%; }
.brilho.b2 { right: -26px; top: 4%; transform: rotate(10deg); }   /* acima do botão de som, sem passar da tela */
.trilha { position: relative; margin-top: 76px; }
.saga .caminho { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.saga .caminho path { fill: none; stroke: var(--creme); stroke-width: 10; stroke-dasharray: 2 22; stroke-linecap: round;
  filter: drop-shadow(0 3px 0 var(--contorno)); }
.trilha ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; position: relative; z-index: 1; }
.parada { position: relative; width: var(--porta-w); }
.parada:nth-child(even) { margin-left: auto; }
.parada .porta { width: 100%; }
.parada .num, .parada .ok { position: absolute; top: -22px; width: 48px; height: 48px; border-radius: 50%; place-items: center;
  border: 5px solid var(--contorno); font-size: 26px; box-shadow: 0 4px 0 var(--contorno); }   /* no canto, fora do texto da thumbnail */
.parada .num { left: -22px; display: grid; background: var(--cor-saga); color: var(--creme); }
.parada .ok { right: -22px; display: none; background: #7BD389; color: var(--contorno); }
.parada.cumprida .ok { display: grid; }
.dumi-aqui { position: absolute; top: 28%; right: -88px; width: 72px; height: auto; animation: quica 1.1s ease-in-out infinite;
  filter: drop-shadow(0 4px 0 rgba(22,33,58,.6)); }
.parada:nth-child(even) .dumi-aqui { right: auto; left: -88px; }
@keyframes quica { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.medalha-lugar { position: relative; z-index: 3; margin-top: 40px; }
.medalha-fim { position: relative; z-index: 1; display: block; margin: 0 auto; width: 150px; min-height: 64px; padding: 0;
  border: 0; background: none; cursor: pointer; touch-action: manipulation; }
.medalha-fim svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 0 rgba(22,33,58,.5)); }
/* medalha ainda não ganha: balão de como ganhar, nascendo em cima dela (site/js/medalha-dica.js) */
.medalha-dica { position: absolute; left: 50%; bottom: calc(100% + 22px); width: min(520px, calc(100vw - 32px)); padding: 26px 22px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: var(--noite);
  background: var(--creme); border: 6px solid var(--contorno); border-radius: var(--raio); box-shadow: var(--sombra);
  transform: translateX(-50%); transform-origin: 50% 100%; animation: dica-entra .28s ease-out; scroll-margin-top: 44px; }   /* o ✕ sobra em cima */
.medalha-dica::after { content: ''; position: absolute; left: 50%; bottom: -22px; width: 30px; height: 30px; margin-left: -15px;
  background: var(--creme); border: solid var(--contorno); border-width: 0 6px 6px 0; transform: rotate(45deg); }
@keyframes dica-entra { from { opacity: 0; transform: translateX(-50%) scale(.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
.dica-titulo { margin: 0; padding: 0 40px; font-size: clamp(22px, 3.2vw, 30px); line-height: 1.1; color: var(--roxo); }
.dica-texto { margin: 0; font-size: clamp(18px, 2.4vw, 22px); line-height: 1.25; }
/* .trilha .dica-trilha: o balão mora dentro da .trilha, cuja lista de portas é grade com espaço grande */
.trilha .dica-trilha { position: relative; list-style: none; margin: 4px 0; padding: 0; display: flex; justify-content: center; gap: 18px; }
.dica-trilha::before { content: ''; position: absolute; left: 24px; right: 24px; top: 50%; border-top: 5px dotted var(--contorno); }
.dica-trilha li { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 24px;
  background: var(--cor-saga); color: var(--creme); border: 4px solid var(--contorno); }
.dica-trilha .feita { background: #7BD389; color: var(--contorno); }
.dica-trilha .aqui { background: var(--amarelo); }
.dica-trilha .aqui img { width: 54px; height: auto; margin-top: -14px; animation: quica 1.1s ease-in-out infinite; }
.dica-fechar { position: absolute; right: -12px; top: -24px; width: 64px; height: 64px; padding: 0; border-radius: 50%;
  border: 5px solid var(--contorno); background: var(--coral); color: var(--creme); font: inherit; font-size: 28px;
  box-shadow: 0 4px 0 var(--contorno); cursor: pointer; touch-action: manipulation; }
.dica-fechar:active { transform: translateY(4px); box-shadow: 0 0 0 var(--contorno); }
@media (max-width: 600px) {
  #sagas { padding: 8px 36px; }   /* o número e o ✓ saem 22 px da porta: sobra margem até a borda do celular */
  .saga { --porta-w: 74%; }
  .topo-home { flex-direction: column; gap: 12px; padding: 14px 16px 0; }   /* logo grande numa linha, figurinhas embaixo */
  .logo-canto { position: static; width: min(66vw, 260px); }
  .brilho.b2 { display: none; }
  .saga-heroi { flex-direction: column; margin-top: 64px; }
  .heroi-mundo { width: 64%; margin: 0 0 -30px; }
  .heroi-balao { width: 100%; padding: 46px 40px 58px; }
  .heroi-ouvir { right: -14px; top: 18px; margin-top: 0; width: 64px; height: 64px; }
  .heroi-ouvir svg { width: 34px; height: 34px; }
  .dumi-aqui { width: 56px; right: -68px; }
  .parada:nth-child(even) .dumi-aqui { left: -68px; }
}
/* home ao carregar: a pergunta se liga o som (site/js/pergunta-som.js) */
.pergunta-som { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; }
.pergunta-fundo { position: absolute; inset: 0; background: rgba(22,33,58,.6); }
.pergunta-caixa:focus { outline: none; }
.pergunta-caixa { position: relative; width: min(460px, 100%); padding: 74px 22px 26px; text-align: center; color: var(--noite);
  background: var(--creme); border: 6px solid var(--contorno); border-radius: 36px; box-shadow: 0 10px 0 var(--contorno); animation: dica-entra-meio .3s ease-out; }
@keyframes dica-entra-meio { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.pergunta-dumi { position: absolute; left: 50%; top: -58px; width: 120px; height: auto; margin-left: -60px; filter: drop-shadow(0 5px 0 rgba(22,33,58,.5)); }
.pergunta-caixa h2 { margin: 0; font-size: clamp(28px, 6vw, 40px); line-height: 1.05; color: var(--roxo); }
.pergunta-caixa p { margin: 8px 0 20px; font-size: clamp(18px, 4vw, 22px); }
.pergunta-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.pergunta-acoes .botao { min-width: 150px; min-height: 76px; font-size: clamp(24px, 5vw, 30px); }
.pergunta-acoes [data-nao] { background: var(--coral); color: var(--creme); }   /* como o ✕ do balão da medalha */
.pergunta-icone { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #4a6ee0; border: 4px solid var(--contorno); }
.pergunta-icone svg { width: 32px; height: 32px; }
@media (prefers-reduced-motion: reduce) { .pergunta-caixa { animation: none; } }
/* medalha ganha: balão da festa com começar de novo (site/js/medalha-festa.js), no lugar do balão de como ganhar */
.medalha-festa { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.festa-medalha { width: 120px; }
.festa-medalha svg { display: block; width: 100%; height: auto; }
.festa-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (prefers-reduced-motion: reduce) { .dumi-aqui, .medalha-dica, .dica-trilha .aqui img { animation: none; } }

/* botão de som (site/js/som.js, docs/13-site.md "Botão de som"): o alto-falante azul, ligado com as ondas e desligado com
   a barra; desligado ele pulsa até a criança tocar. No canto de todas as telas menos a home (lá é o do balão do herói) */
@keyframes pulsar { 0%, 100% { transform: scale(1); box-shadow: 0 6px 0 var(--contorno); } 50% { transform: scale(1.12); box-shadow: 0 6px 0 var(--contorno), 0 0 0 10px rgba(255,212,71,.45); } }
:where(.som) { width: 76px; height: 76px; padding: 0; display: grid; place-items: center; background: #4a6ee0; border: 6px solid var(--contorno);
  border-radius: 50%; box-shadow: 0 6px 0 var(--contorno); cursor: pointer; touch-action: manipulation; }
:where(.som):active { transform: translateY(5px); box-shadow: 0 1px 0 var(--contorno); }
:where(.som) svg { width: 42px; height: 42px; }   /* :where: o .heroi-ouvir da home manda no tamanho e no lugar */
.som[aria-pressed="true"] .som-off, .som[aria-pressed="false"] .som-on { display: none; }
.som[aria-pressed="false"] { animation: pulsar 1s ease-in-out infinite; }
.som-canto { position: fixed; top: 16px; right: 16px; z-index: 10; }
body.pg-home .som-canto { display: none; }
@media (prefers-reduced-motion: reduce) { .som[aria-pressed="false"] { animation: none; outline: 6px solid var(--amarelo); } }

/* dia e noite pelo relógio do aparelho (site/js/periodo.js): céu claro com sol, ou escuro com lua e estrelas */
html[data-periodo="dia"] body { background: linear-gradient(180deg, var(--ceu-dia, #74c3ff) 0%, #dff3ff 80%); }
html[data-periodo="noite"] body { background: radial-gradient(circle at 50% 0%, #4a3f9a, var(--noite) 72%); }
html[data-periodo="noite"] .parallax .camada:not(.ceu) { filter: brightness(.6) saturate(.85); }
.sub { text-shadow: 0 3px 0 var(--contorno); }
.parallax .astro { position: absolute; top: 7%; right: 9%; width: clamp(64px, 10vw, 124px); aspect-ratio: 1; border-radius: 50%;
  border: 6px solid var(--contorno); }
.parallax .astro.sol { background: var(--amarelo); box-shadow: 0 0 0 16px rgba(255,212,71,.3), 0 0 70px 30px rgba(255,236,150,.45);
  animation: brilho 4s ease-in-out infinite; }
.parallax .astro.lua { background: var(--creme); box-shadow: inset -20px -10px 0 #ddd6c6, 0 0 60px 12px rgba(255,248,232,.22); }
@media (prefers-reduced-motion: reduce) { .parallax .astro { animation: none; } }
/* celular: sol/lua menor, no canto de cima, e logo um pouco menor, para o astro não cobrir o logo */
@media (max-width: 600px) {
  .parallax .astro { top: 8px; right: 8px; width: 48px; border-width: 4px; }
  .parallax .astro.sol { box-shadow: 0 0 0 8px rgba(255,212,71,.3), 0 0 30px 12px rgba(255,236,150,.45); }
  .parallax .astro.lua { box-shadow: inset -9px -5px 0 #ddd6c6, 0 0 30px 8px rgba(255,248,232,.22); }
}

/* ---------- saga fora da home: selo, próxima parada, medalha ganha (site/js/saga-ui.js) ---------- */
.saga-selo, .saga-prox { position: relative; z-index: 1; display: flex; justify-content: center; padding: 6px 16px; }
.saga-prox { padding: 8px 16px 24px; }
.selo-saga { display: inline-flex; align-items: center; gap: 10px; min-height: 64px; max-width: 100%; padding: 6px 18px 6px 8px;
  background: var(--cor-saga); color: var(--creme); border: 5px solid var(--contorno); border-radius: 999px;
  box-shadow: 0 5px 0 var(--contorno); font: inherit; font-size: clamp(16px, 2.4vw, 22px); cursor: pointer; touch-action: manipulation; }
.selo-saga svg { width: 44px; height: 44px; flex: none; }
.selo-saga:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--contorno); }
.saga-prox .proxima { max-width: 100%; text-align: center; }
.parada-ok { display: inline-block; background: #7BD389; color: var(--contorno); border: 5px solid var(--contorno); border-radius: 999px;
  padding: 4px 16px; box-shadow: 0 4px 0 var(--contorno); font-size: clamp(20px, 3vw, 28px); }
.medalha-nova { width: min(160px, 40vw); margin: 8px auto; }
.medalha-nova svg { width: 100%; height: auto; display: block; }

/* ---------- álbum e pais por saga ---------- */
.saga-album { display: grid; gap: 16px; }
.saga-album-topo { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--cor-saga); color: var(--creme);
  border: 6px solid var(--contorno); border-radius: var(--raio); box-shadow: var(--sombra); }
.saga-album-topo h2 { flex: 1; min-width: 0; margin: 0; font-size: clamp(22px, 3.4vw, 34px); line-height: 1.1; text-shadow: 0 3px 0 var(--contorno); }
.saga-album-topo small { display: block; font-size: clamp(16px, 2.2vw, 20px); text-shadow: none; }
.saga-album-topo .medalha-fim { width: 96px; margin: 0; flex: none; }
.saga-pais { border-left: 8px solid var(--amarelo); padding-left: 14px; margin-bottom: 24px; }
.saga-pais .pergunta { font-style: italic; }

/* ---------- fundo do episódio: cenário real em camadas (site/js/fundo.js; docs/13-site.md "Fundo do episódio") ---------- */
.fundo-cena { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fundo-cena .camada-cena { position: absolute; inset: -8%; background: center bottom / cover no-repeat; will-change: transform; }
.fundo-cena .estrelas-cena { position: absolute; left: 0; right: 0; top: 0; height: 55%; background: 0 0 / auto 100% repeat-x; }
.fundo-cena.noite .camada-cena { filter: brightness(.6) saturate(.85); }

/* ---------- botão da próxima parada com o Dumi (site/js/saga-ui.js) ---------- */
.proxima.com-dumi { position: relative; padding-left: 78px; gap: 12px; }
.dumi-botao { position: absolute; left: -8px; bottom: 4px; width: 74px; height: auto; pointer-events: none; transform-origin: 50% 100%;
  filter: drop-shadow(0 3px 0 rgba(22,33,58,.45)); animation: dumi-anda .6s ease-in-out infinite; }
@keyframes dumi-anda { 0%, 50%, 100% { transform: translateY(0) rotate(5deg); } 25% { transform: translateY(-7px) rotate(9deg); } 75% { transform: translateY(-7px) rotate(1deg); } }
.dumi-botao.aceno { animation: dumi-acena 1.4s ease-in-out infinite; }
@keyframes dumi-acena { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.pegadas { display: inline-flex; gap: 6px; }
.pegadas i { width: 10px; height: 10px; border-radius: 50%; background: var(--creme); border: 2px solid var(--contorno); opacity: .35; animation: pegada 1.2s infinite; }
.pegadas i:nth-child(2) { animation-delay: .2s; }
.pegadas i:nth-child(3) { animation-delay: .4s; }
@keyframes pegada { 0%, 60%, 100% { opacity: .35; transform: scale(1); } 20% { opacity: 1; transform: scale(1.35); } }
.proxima-seta { display: inline-block; animation: seta-empurra 1.2s ease-in-out infinite; }
@keyframes seta-empurra { 0%, 70%, 100% { transform: translateX(0); } 85% { transform: translateX(7px); } }
.medalha-mini { position: relative; width: 46px; flex: none; perspective: 200px; }
.medalha-mini svg { display: block; width: 100%; height: auto; animation: moeda 3s ease-in-out infinite; }
@keyframes moeda { 0%, 70%, 100% { transform: rotateY(0); } 85% { transform: rotateY(360deg); } }
.brilhinho { position: absolute; font-style: normal; font-size: 16px; color: var(--amarelo); -webkit-text-stroke: 1px var(--contorno); animation: pisca 1.6s infinite; }
.brilhinho.b1 { left: -10px; top: -6px; }
.brilhinho.b2 { right: -10px; bottom: 0; animation-delay: .8s; }
@keyframes pisca { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .dumi-botao, .pegadas i, .proxima-seta, .medalha-mini svg, .brilhinho { animation: none !important; }
}