/* CENAS (src/scenes.js): a cena do chefe e o cartão de capítulo.
   Decisão: duas faixas de tinta chapada (o alto e a fala) e o cenário da zona apagado no meio, com duas figuras só.
   Quem fala fica aceso, o outro recua. Sem degradê, sem brilho: a luz é o claro do papel contra o escuro da tinta. */

/* ---------- [cena] ---------- */
#scene{position:fixed;inset:0;z-index:80;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--bg0);color:var(--text);cursor:pointer;outline:0;-webkit-tap-highlight-color:transparent;user-select:none}
#scene[hidden]{display:none}
.scene-bg{position:absolute;inset:0;background:center/cover no-repeat;opacity:.34}
.scene-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:6px 16px;background:var(--bg0);border-bottom:1px solid var(--line2)}
.scene-kicker{font:600 12px var(--ui);letter-spacing:.06em;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scene .scene-skip{flex:none;min-width:76px;min-height:36px;cursor:pointer}
.scene-stage{position:relative;display:flex;align-items:flex-end;justify-content:space-between;width:min(760px,94%);margin:0 auto;min-height:0}
.scene-fig{flex:none;width:168px;height:168px;margin:0;display:grid;place-items:center;overflow:hidden;background:var(--bg2);border:2px solid var(--line2);border-bottom:0;border-radius:3px 3px 0 0;opacity:.38;transform:translateY(14px);transition:opacity .25s,transform .25s}
.scene-fig.on{opacity:1;transform:none;border-color:var(--sc)}
.scene-fig img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.scene-mark{display:grid;place-items:center;width:62%;aspect-ratio:1;border:2px solid var(--sc);border-radius:50%}
.scene-mark .gl{width:58%;height:58%;stroke-width:1.5;color:var(--sc)}
.scene-line{position:relative;width:min(760px,94%);min-height:118px;margin:0 auto 20px;padding:14px 56px 16px 18px;background:var(--bg1);border:1px solid var(--line2);border-top:2px solid var(--sc);border-radius:0 0 3px 3px;box-sizing:border-box}
.scene-name{display:block;font:19px var(--display);letter-spacing:.02em;color:var(--sc)}
.scene-name small{margin-left:6px;font:600 11px var(--ui);letter-spacing:.02em;color:var(--muted)}
.scene-line p{margin:6px 0 0;font:16px/1.5 var(--ui);animation:scene-say .28s ease-out}
.scene-step{position:absolute;right:14px;top:14px;font:600 11px var(--ui);color:var(--muted);letter-spacing:.06em}
.scene-next{position:absolute;right:16px;bottom:12px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--gold);animation:pulse 1.4s infinite}
.scene-next.last{border:0;width:9px;height:9px;background:var(--gold)}
@keyframes scene-say{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* ---------- [selo] círculo de tinta com a lua dentro: a sombra sai um pedaço a cada selo ---------- */
.scene-seal{position:absolute;left:50%;bottom:10px;width:132px;margin:0;transform:translateX(-50%);text-align:center}
.scene-seal svg{display:block;width:100%;height:auto;stroke:none;stroke-width:0}
.scene-ring{fill:none;stroke:var(--washi);stroke-width:4;stroke-linecap:round;stroke-dasharray:93 7;transform:rotate(-58deg);transform-origin:60px 60px}
.scene-ghost{fill:none;stroke:var(--washi);stroke-width:1;opacity:.28}
.scene-moon{fill:var(--washi)}
.scene-shade{transform:translateX(var(--to))}
.scene-seal.arrive .scene-shade{animation:scene-shade 1.3s .25s cubic-bezier(.3,.1,.2,1) both}
.scene-seal figcaption{margin-top:4px;font:600 11px var(--ui);letter-spacing:.06em;color:var(--muted)}
@keyframes scene-shade{from{transform:translateX(var(--from))}to{transform:translateX(var(--to))}}

/* ---------- [cartão de capítulo] 2 segundos, sem toque ---------- */
/* A tela inteira escurece num tom só e o juramento fica sozinho, um pouco acima do meio e alinhado à esquerda do bloco. */
#chapter-card{position:fixed;inset:0;z-index:59;display:grid;place-content:center;padding:0 16px 12vh;background:rgba(16,15,24,.9);pointer-events:none;animation:chapter-card 2s both}
#chapter-card[hidden]{display:none}
#chapter-card div{max-width:calc(100vw - 32px);box-sizing:border-box;padding:4px 0 6px 20px;border-left:3px solid var(--shu)}
#chapter-card small{display:block;font:600 13px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#chapter-card b{display:block;margin-top:4px;font:700 34px/1.2 var(--display);color:var(--washi)}
@keyframes chapter-card{0%{opacity:0}12%,84%{opacity:1}100%{opacity:0}}

/* ---------- [rever] Enciclopédia → Lore ---------- */
.scene-row.locked{opacity:.62}
.scene-row .action{margin-top:6px}

@media(max-width:560px){
  .scene-top{padding:4px 12px}
  #scene .scene-skip{min-height:44px;min-width:84px}
  .scene-fig{width:112px;height:112px}
  .scene-seal{width:104px;bottom:6px}
  .scene-line{min-height:150px;margin-bottom:14px;padding:12px 40px 18px 14px}
  .scene-line p{font-size:15px}
  .scene-step{right:12px;top:12px}
  #chapter-card b{font-size:26px}
}
@media(max-height:480px){
  .scene-fig{width:104px;height:104px}
  .scene-seal{width:92px}
  .scene-line{min-height:96px;margin-bottom:8px}
}
@media(prefers-reduced-motion:reduce){
  .scene-fig{transition:none}
  .scene-line p,.scene-next,.scene-seal.arrive .scene-shade{animation:none}
  #chapter-card{animation:none}
}