/* =========================================================
   Contos Animados — palco do motor (src/stories/player.js)
   Usado pelo jogo e pela revisão no painel, que não carrega os
   tokens do jogo: toda variável aqui tem um valor de reserva.
   ========================================================= */

.story {
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  min-width: 0;
  font-family: var(--font-display, 'Fredoka', 'Nunito', system-ui, sans-serif);
  color: #f4f6ff;
}

.story__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: #0e2e36;
  container-type: size;
  isolation: isolate;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  user-select: none;
  -webkit-user-select: none;
}
.story__backdrop, .story__props, .story__actors, .story__fx { position: absolute; inset: 0; }
.story__backdrop > svg { width: 100%; height: 100%; display: block; }
.story__props, .story__actors, .story__fx { pointer-events: none; }
/* Esconderijos usam z-index negativo, preso a esta camada (ver Z em player.js). */
.story__actors { isolation: isolate; }
/* Esconderijo: a mesma peça do cenário, redesenhada por cima do pet escondido. */
.story__cover-piece { position: absolute; inset: 0; }
.story__cover-piece > svg { width: 100%; height: 100%; display: block; }

/* ---------- pets ---------- */
.story__actor {
  --x: -16;
  --size: 21;
  position: absolute;
  bottom: 1cqh;
  /* --depth: menor quando está mais ao fundo (escondido); --foot: linha dos pés (fração da altura). */
  width: calc(var(--size) * var(--depth, 1) * 1cqw);
  aspect-ratio: 344 / 412;
  left: calc(var(--x) * 1cqw - var(--size) * var(--depth, 1) * 0.5cqw);
  transition-property: left, bottom, width, filter;
  transition-timing-function: cubic-bezier(0.45, 0.05, 0.4, 1);
  transform-origin: 50% 90%;
}
.story__actor.is-hidden { bottom: calc((1 - var(--foot, 0.99)) * 100cqh); }
.story__actor.is-hiding { filter: brightness(0.9); }
.story__actor.is-hidden .story__actor-art, .story__actor.is-hiding .story__actor-art { animation: story-peek 2.4s ease-in-out infinite; }
@keyframes story-peek { 0%, 100% { transform: translateY(4%) rotate(0); } 45% { transform: translateY(0) rotate(-4deg); } 60% { transform: translateY(0) rotate(3deg); } }
.story__actor-art { width: 100%; height: 100%; transform-origin: 50% 90%; animation: story-breathe 3.8s ease-in-out infinite; }
.story__actor-art > svg { width: 100%; height: 100%; display: block; overflow: visible; transition: transform 0.25s linear; }
.story__actor.is-facing-left .story__actor-art > svg { transform: scaleX(-1); }
.story__actor.is-walking .story__actor-art { animation: story-walk 0.42s ease-in-out infinite; }
.story__actor.is-talking .story__actor-art { animation: story-talk 0.5s ease-in-out infinite; }

@keyframes story-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, 0.975); } }
@keyframes story-walk { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6%) rotate(3deg); } }
@keyframes story-talk { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, 0.97) translateY(-1%); } }

.story__actor.react-happy { animation: story-react-happy 1s ease-in-out; }
.story__actor.react-jump { animation: story-react-jump 1s cubic-bezier(0.22, 1, 0.36, 1); }
.story__actor.react-spin { animation: story-react-spin 1.1s ease-in-out; }
.story__actor.react-dance { animation: story-react-dance 1s ease-in-out 2; }
.story__actor.react-look { animation: story-react-look 1.1s ease-in-out; }
.story__actor.react-sleep { animation: story-react-sleep 1.8s ease-in-out; }
.story__actor.react-sad { animation: story-react-sad 1.1s ease-in-out; }

@keyframes story-react-happy { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-7deg) scale(1.04); } 45% { transform: rotate(6deg) scale(1.04); } 70% { transform: rotate(-3deg); } }
@keyframes story-react-jump { 0%, 100% { transform: none; } 20% { transform: scale(1.1, 0.88); } 50% { transform: translateY(-28%) scale(0.95, 1.06); } 80% { transform: scale(1.05, 0.95); } }
@keyframes story-react-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes story-react-dance { 0%, 100% { transform: none; } 25% { transform: translateY(-10%) rotate(-10deg); } 50% { transform: rotate(10deg) scale(1.04); } 75% { transform: translateY(-8%) rotate(-6deg); } }
@keyframes story-react-look { 0%, 100% { transform: none; } 30%, 70% { transform: rotate(-8deg) translateY(-3%); } }
@keyframes story-react-sleep { 0%, 100% { transform: none; } 25%, 75% { transform: scale(1.05, 0.9); } }
@keyframes story-react-sad { 0%, 100% { transform: none; } 40%, 70% { transform: scale(0.97, 0.94) translateY(2%); } }

/* ---------- fala ----------
   O texto das falas fica na legenda; sobre o pet que fala aparece só o 💬. */
.story__bubble {
  position: absolute;
  bottom: 88%;
  left: 52%;
  display: grid;
  place-items: center;
  width: max-content;
  padding: 0.5cqw 1.2cqw;
  border-radius: 999px;
  background: #fff;
  color: #1b2a3a;
  border: 0.3cqw solid #1b2a3a;
  box-shadow: 0 1cqw 2cqw -1cqw rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(1cqh) scale(0.8);
  transform-origin: 0 100%;
  transition: opacity 0.2s linear, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
}
.story__bubble.is-right { left: auto; right: 52%; transform-origin: 100% 100%; }
.story__bubble-icon { font-size: clamp(0.85rem, 3.4cqw, 1.7rem); line-height: 1; }
.story__bubble.is-visible { opacity: 1; transform: none; animation: story-bubble-bob 1.2s ease-in-out infinite; }
@keyframes story-bubble-bob { 50% { transform: translateY(-0.6cqh); } }

/* ---------- legenda ----------
   Na base do vídeo, como num player: narração e falas, uma linha por vez,
   com o nome de quem fala. Cada palavra acende quando a voz chega nela
   (`karaoke.js`). Sobe quando os controles aparecem. */
.story__caption {
  --lift: 0px;
  position: absolute;
  left: 50%;
  bottom: calc(3.2cqh + var(--lift));
  z-index: 7;
  box-sizing: border-box;
  width: max-content;
  max-width: 86cqw;
  margin: 0;
  padding: 0.6cqw 1.8cqw 0.8cqw;
  border-radius: 1.4cqw;
  background: rgba(8, 10, 22, 0.72);
  color: rgba(244, 246, 255, 0.62);
  font-size: clamp(0.9rem, 2.9cqw, 1.75rem);
  line-height: 1.32;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translate(-50%, 0.8cqh);
  transition: opacity 0.2s linear, transform 0.25s ease, bottom 0.25s ease;
  pointer-events: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.story__caption.is-visible { opacity: 1; transform: translate(-50%, 0); }
.story.no-captions .story__caption { display: none; }
.story__caption-name {
  display: block;
  width: fit-content;
  margin: 0 auto 0.2em;
  padding: 0 0.6em;
  border-radius: 999px;
  background: #fde68a;
  color: #3b2300;
  font-size: 0.72em;
  line-height: 1.5;
  text-shadow: none;
}
.story__word { transition: color 0.12s linear, background-color 0.12s linear; border-radius: 0.25em; }
.story__word.is-spoken { color: #fff; }
.story__word.is-current { padding: 0 0.1em; margin: 0 -0.1em; color: #1b1300; background: #fde047; text-shadow: none; }
.story__caption.is-speech .story__word.is-current { background: #c4b5fd; color: #1e0b4b; }
/* Momento musical: a letra em destaque rosa e o palco com luz de show. */
.story__caption.is-song .story__caption-name { background: #f9a8d4; color: #4a0430; }
.story__caption.is-song .story__word.is-current { background: #f9a8d4; color: #4a0430; }
.story.is-singing .story__backdrop { filter: saturate(1.25) brightness(1.05); transition: filter 0.8s ease; }
.story.is-singing .story__fx::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(249, 168, 212, 0.28), transparent 60%);
  animation: story-spotlight 2.4s ease-in-out infinite;
}
@keyframes story-spotlight { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .story.is-singing .story__fx::before { animation: none; } }
/* Com os controles à vista, a legenda sobe para não ficar embaixo deles. */
.story.has-controls:not(.is-idle) .story__caption,
.story.has-controls:not(.is-playing) .story__caption { --lift: var(--controls-h, 64px); }
.story.is-compact .story__caption { max-width: 94cqw; padding: 4px 10px 5px; font-size: clamp(0.82rem, 3.9cqw, 1rem); border-radius: 10px; }

/* ---------- objetos ---------- */
.story__prop {
  --x: 50;
  position: absolute;
  bottom: 3cqh;
  width: 9cqw;
  height: 9cqw;
  left: calc(var(--x) * 1cqw - 4.5cqw);
  animation: story-prop-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  filter: drop-shadow(0 0.6cqw 0 rgba(0, 0, 0, 0.25));
  z-index: 0;
}
.story__prop > svg { width: 100%; height: 100%; display: block; }
.story__prop.is-still { animation: none; }
.story__prop.is-leaving { animation: story-prop-out 0.4s ease-in both; }
@keyframes story-prop-in { 0% { transform: scale(0) translateY(-30%); opacity: 0; } 70% { transform: scale(1.18); opacity: 1; } 100% { transform: none; } }
@keyframes story-prop-out { to { transform: scale(0); opacity: 0; } }

/* ---------- efeitos ---------- */
.story__burst { position: absolute; inset: 0; }
.story__particle {
  position: absolute;
  left: calc(var(--px) * 1%);
  top: 58%;
  font-size: 4cqw;
  line-height: 1;
  text-shadow: 0 0 1.2cqw rgba(255, 255, 255, 0.6);
  animation: story-float 1.8s ease-out var(--delay) both;
}
.story__burst--rain .story__particle, .story__burst--confetti .story__particle { top: -8%; animation-name: story-fall; animation-timing-function: linear; }
.story__burst--rain .story__particle { font-size: 3cqw; text-shadow: none; }
.story__burst--wind .story__particle { top: calc(30% + var(--drift) * 4%); left: -8%; animation-name: story-wind; }
.story__burst--bubbles .story__particle { color: #e0f2fe !important; }
.story__aurora {
  position: absolute;
  inset: -10% -10% 40%;
  background: linear-gradient(100deg, transparent 10%, rgba(168, 85, 247, 0.45), rgba(96, 165, 250, 0.4), rgba(74, 222, 128, 0.35), transparent 90%);
  filter: blur(2cqw);
  animation: story-aurora 2.2s ease-in-out both;
}
@keyframes story-float { 0% { transform: translate(0, 0) scale(0.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(calc(var(--drift) * 1cqw), -38cqh) scale(1.15) rotate(20deg); opacity: 0; } }
@keyframes story-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(calc(var(--drift) * 1cqw), 110cqh) rotate(240deg); opacity: 0.9; } }
@keyframes story-wind { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(118cqw) translateY(calc(var(--drift) * 1cqh)); opacity: 0; } }
@keyframes story-aurora { 0% { opacity: 0; transform: translateX(-10%); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(10%); } }

/* ---------- troca de cena, cartões e início ---------- */
.story__curtain { position: absolute; inset: 0; z-index: 8; background: #0b1020; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.story__curtain.is-closed { opacity: 1; }

.story__card {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.4cqh;
  padding: 4cqw;
  text-align: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(124, 58, 237, 0.92), rgba(30, 27, 75, 0.96));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.story__card.is-visible { opacity: 1; visibility: visible; transition: opacity 0.4s ease; }
.story__card-kicker { font-size: clamp(0.7rem, 2.2cqw, 1.2rem); color: #fde68a; letter-spacing: 0.06em; }
.story__card-title { font-size: clamp(1.2rem, 6cqw, 3.6rem); line-height: 1.05; text-shadow: 0 0.6cqw 0 rgba(0, 0, 0, 0.3); }
.story__card-byline { font-size: clamp(0.75rem, 2.4cqw, 1.3rem); color: #e9d5ff; }
.story__card-cast { display: flex; gap: 1cqw; margin-top: 1cqh; }
.story__card-face { width: 13cqw; aspect-ratio: 344 / 412; animation: story-breathe 3s ease-in-out infinite; }
.story__card-face > svg { width: 100%; height: 100%; overflow: visible; }

.story__start {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8cqw;
  min-width: max(56px, 11cqw);
  min-height: max(56px, 11cqw);
  padding: 1.4cqh 3.2cqw;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #a78bfa, #7c3aed);
  color: #fff;
  font: inherit;
  font-size: clamp(1rem, 3.4cqw, 1.9rem);
  font-weight: 700;
  box-shadow: 0 1.4cqw 3cqw -1cqw rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  transform: translate(-50%, -50%);
  cursor: pointer;
  animation: story-pulse 1.8s ease-in-out infinite;
}
.story__start[hidden] { display: none; }
.story__start:focus-visible { outline: 3px solid #3ddc97; outline-offset: 3px; }
.story__start-icon { display: grid; width: 1.15em; height: 1.15em; }
.story__start-icon svg { width: 100%; height: 100%; }
.story__start-label:empty { display: none; }
/* Pausado: só o círculo com ▶, como nos players. */
.story__start.is-round { padding: 0; width: max(56px, 11cqw); animation: none; background: rgba(8, 10, 22, 0.62); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
.story__start.is-round .story__start-icon { width: 46%; height: 46%; }
.story__start.is-loading { animation: none; cursor: progress; background: rgba(8, 10, 22, 0.72); font-size: clamp(0.85rem, 2.6cqw, 1.3rem); }
.story__start.is-loading .story__start-icon { animation: story-spin 1s linear infinite; }
.story__start.is-loading .story__start-icon svg { display: none; }
.story__start.is-loading .story__start-icon::before { content: ''; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; }
@keyframes story-spin { to { transform: rotate(360deg); } }
@keyframes story-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.05); } }

/* Aviso de som desligado (toque liga o som). */
.story__notice {
  position: absolute; top: 12%; left: 50%; z-index: 12; transform: translateX(-50%);
  max-width: 88%; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(8, 10, 22, 0.82); color: #fff; font: inherit; font-size: clamp(0.8rem, 2.4cqw, 1.05rem); font-weight: 700;
  box-shadow: 0 0 0 2px #fde047, 0 6px 18px rgba(0, 0, 0, 0.5);
  animation: story-notice 0.3s ease-out;
}
.story__notice[hidden] { display: none; }
@keyframes story-notice { from { opacity: 0; transform: translate(-50%, -8px); } }

/* ---------- controles (por cima do vídeo, como num player) ---------- */
.story { --controls-h: 64px; }
.story:focus { outline: none; }
.story:focus-visible .story__stage { box-shadow: 0 0 0 3px #3ddc97; }
.story__top, .story__controls {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 11;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.story__top {
  top: 0;
  display: grid;
  gap: 2px;
  padding: 10px 14px 26px;
  background: linear-gradient(180deg, rgba(5, 7, 15, 0.72), transparent);
  pointer-events: none;
}
.story__top-title { font-size: clamp(0.9rem, 2.4cqw, 1.3rem); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story__top-scene { font-size: clamp(0.72rem, 1.8cqw, 0.95rem); color: rgba(244, 246, 255, 0.78); }
.story__top-scene:empty { display: none; }
.story__controls {
  bottom: 0;
  display: grid;
  gap: 2px;
  padding: 18px 10px 6px;
  background: linear-gradient(0deg, rgba(5, 7, 15, 0.82) 0%, rgba(5, 7, 15, 0.5) 60%, transparent);
}
/* Tocando e sem mexer: controles somem (e o cursor também). */
.story.is-idle .story__top, .story.is-idle .story__controls { opacity: 0; pointer-events: none; }
.story.is-idle .story__controls { transform: translateY(6px); }
.story.is-idle .story__stage { cursor: none; }
/* Antes de começar, só o título e o botão de assistir. */
.story:not(.is-playing):not(.is-paused):not(.is-finished) .story__controls { opacity: 0; pointer-events: none; }

.story__row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.story__group { display: flex; align-items: center; gap: 2px; min-width: 0; }
.story__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.12s ease;
}
.story__btn svg { width: 100%; height: 100%; display: block; }
.story__btn:hover { background: rgba(255, 255, 255, 0.14); }
.story__btn:active { transform: scale(0.92); }
.story__btn--play { width: 44px; height: 44px; }
.story__btn--cc { opacity: 0.6; }
.story__btn--cc { position: relative; }
.story__btn--cc.is-on { opacity: 1; }
.story__btn--cc.is-on::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 3px; height: 3px; border-radius: 2px; background: #fde047; }
.story__btn.is-off { color: #fda4af; }
.story__btn:focus-visible, .story__tick:focus-visible, .story__track:focus-visible { outline: 3px solid #3ddc97; outline-offset: 2px; }
.story__clock { flex: none; margin-left: 6px; font-size: 0.82rem; font-variant-numeric: tabular-nums; color: rgba(244, 246, 255, 0.9); white-space: nowrap; }

/* Barra de progresso: toque ou arraste; as marcas são as cenas (capítulos). */
.story__track {
  position: relative;
  height: 22px;
  margin: 0 8px;
  cursor: pointer;
  touch-action: none;
}
.story__track::before, .story__fill { position: absolute; left: 0; top: 50%; height: 5px; border-radius: 999px; transform: translateY(-50%); transition: height 0.15s ease; }
.story__track::before { content: ''; right: 0; background: rgba(255, 255, 255, 0.28); }
.story__fill { width: 0; background: linear-gradient(90deg, #3ddc97, #a78bfa); }
.story__track:hover::before, .story__track:hover .story__fill, .story.is-scrubbing .story__track::before, .story.is-scrubbing .story__fill { height: 8px; }
.story__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transform: translateY(-50%);
  pointer-events: none;
}
.story__tick {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}
.story__tick.story__tick--song::after { width: 9px; height: 9px; border-radius: 50%; background: #f472b6; }
.story__tick::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 9px; border-radius: 2px; background: rgba(5, 7, 15, 0.85); transform: translate(-50%, -50%); }

/* Celular: botões menores, sem o "ver desde o começo" (a barra já volta). */
.story.is-compact { --controls-h: 58px; }
.story.is-compact .story__controls { padding: 14px 4px 2px; }
.story.is-compact .story__btn { width: 36px; height: 36px; padding: 8px; }
.story.is-compact .story__btn--play { width: 40px; height: 40px; }
.story.is-compact .story__btn--restart { display: none; }
.story.is-compact .story__clock { margin-left: 2px; font-size: 0.74rem; }
.story.is-compact .story__top { padding: 6px 10px 18px; }

/* ---------- tela cheia ----------
   O conto cobre a viewport inteira e o vídeo ocupa o que couber em 16:9
   (largura explícita: com largura automática o palco encolhia para 0 × 0,
   porque tudo lá dentro é absoluto). Legenda e controles já estão dentro do
   vídeo, então nada mais precisa de espaço. --fs-w/--fs-h são a largura e a
   altura que o conto ocupa; giradas no celular em pé (ver abaixo). */
.story.is-fullscreen {
  --fs-w: 100vw;
  --fs-h: 100vh;
  --fs-h: 100dvh;
  --fs-pad: 0px;
  --fs-stage-w: min(100%, calc(var(--fs-h) * 16 / 9));
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-sizing: border-box;
  width: var(--fs-w);
  height: var(--fs-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #000;
}
.story.is-fullscreen .story__stage { flex: none; width: var(--fs-stage-w); max-height: 100%; margin: 0; border-radius: 0; box-shadow: none; }
/* O antigo botão de sair da tela cheia: agora é o mesmo botão da barra. */
.story__exit { display: none !important; }
/* Celular em pé: a tela cheia é horizontal. Onde o navegador não trava a
   orientação (iPhone), o conto gira 90° e ocupa a tela deitado. Se o aparelho
   já estiver deitado (ou a trava funcionou), nada gira. */
@media (orientation: portrait) {
  .story.is-fullscreen.is-landscape-phone {
    --fs-w: 100vh;
    --fs-w: 100dvh;
    --fs-h: 100vw;
    transform-origin: top left;
    transform: translateX(100vw) rotate(90deg);
    /* Girado, a esquerda do conto é o topo do aparelho (entalhe) e a
       direita é a base (barra de gestos). */
    padding: 0 env(safe-area-inset-bottom) 0 env(safe-area-inset-top);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story__actor-art, .story__actor, .story__start, .story__card-face, .story__prop, .story__bubble { animation: none !important; }
  .story__actor { transition-duration: 0s !important; }
  .story__particle { animation-duration: 0.01s !important; }
}

/* =========================================================
   Tela "Contos Animados" do jogo (src/ui/stories-screen.js)
   ========================================================= */
.pet-link--stories { --tone: var(--brand-violet, #8b5cf6); }
.pet-link--tv { --tone: #ec4899; }
.pet-link--stories.has-news .pet-link__icon { animation: tales-ping 1.6s ease-in-out infinite; }
.pet-link--stories.has-news .pet-link__meta { color: var(--coin-premium, #c084fc); font-weight: 700; }
.pet-link--stories .pet-link__icon { position: relative; }
.pet-link__badge {
  position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: #fde047; color: #1b2a3a; font-family: var(--font-display, sans-serif); font-size: 0.7rem; font-weight: 700;
  box-shadow: 0 0 0 2px var(--bg-deep, #0b1020);
}
@keyframes tales-ping { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14) rotate(-6deg); } }

.screen--tales { display: flex; flex-direction: column; gap: var(--s-3, 12px); }
.tales-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3, 12px); min-width: 0; }
.tales-player { min-width: 0; }
.tales-loading { text-align: center; padding: 24px; }
.tales-empty { display: grid; justify-items: center; gap: 8px; padding: 22px 16px; text-align: center; border-radius: var(--r-lg, 20px); }
.tales-empty__icon { font-size: 2.4rem; }
.tales-piggy { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: var(--r-md, 14px); }

/* ---------- estante ---------- */
.tales-shelf { display: grid; gap: var(--s-3, 12px); }
.tales-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--s-3, 12px); }
.tales-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding: 0;
  border-radius: var(--r-lg, 20px);
  color: inherit;
  font: inherit;
  text-align: left;
}
button.tales-card__cover { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; transition: transform 0.18s ease; }
button.tales-card__cover:active { transform: scale(0.98); }
button.tales-card__cover:focus-visible { outline: 3px solid var(--brand-mint, #3ddc97); outline-offset: -3px; }
.tales-card__cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
/* Etiqueta: dublado com IA ou vozes automáticas do aparelho. */
.tales-dub {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; color: #fff; white-space: nowrap;
}
.tales-dub--ai { background: rgba(124, 58, 237, 0.92); box-shadow: 0 0 0 1px rgba(233, 213, 255, 0.5); }
.tales-dub--device { background: rgba(15, 23, 42, 0.78); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.tales-dub--music { background: rgba(219, 39, 119, 0.92); box-shadow: 0 0 0 1px rgba(251, 207, 232, 0.55); }
.tales-card__tags { position: absolute; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: calc(100% - 16px); }
.tales-player__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.tales-narrator { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 4px; }
.tales-card__voices { margin-top: 6px; justify-self: start; }

.tales-card__cover > svg { width: 100%; height: 100%; display: block; }

/* Fichas (narradora/narrador). */
.tales-chip {
  min-height: 38px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.2));
  background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; font-size: 0.88rem; cursor: pointer; text-align: left;
}
.tales-chip.is-on { background: var(--grad-premium, #7c3aed); border-color: transparent; color: #fff; }
.tales-chip:focus-visible { outline: 3px solid var(--brand-mint, #3ddc97); outline-offset: 2px; }

/* ---------- pedir: em etapas (Pet → Cenário → História → Finalizar) ---------- */
.tales-wizard {
  --tales-accent: var(--kid-pink, #ec4899);
  --tales-done: var(--brand-violet, #8b5cf6);
  --tales-pick: var(--brand-violet, #8b5cf6);
  --tales-ok: var(--brand-mint, #22c55e);
  --tales-card: color-mix(in srgb, var(--glass-surface-strong, #fff) 92%, transparent);
  display: grid; gap: 14px; min-width: 0; scroll-margin-top: 80px;
}
.tales-wizard button { font: inherit; color: inherit; }
.tales-wizard button:focus-visible, .tales-wizard input:focus-visible + *, .tales-text:focus-visible { outline: 3px solid var(--tales-ok); outline-offset: 2px; }

/* As etapas: bolinhas numeradas ligadas por tracinhos. */
.tales-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 2px 0 0; padding: 0; list-style: none; }
.tales-steps__item { position: relative; display: grid; justify-items: center; }
.tales-steps__item + .tales-steps__item::before {
  content: ''; position: absolute; top: 15px; right: calc(50% + 20px); left: calc(-50% + 20px);
  border-top: 2px dashed color-mix(in srgb, var(--tales-done) 55%, transparent);
}
.tales-steps__button { display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; }
.tales-steps__button:disabled { cursor: default; }
.tales-steps__dot {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 0.92rem;
  border: 2px solid color-mix(in srgb, var(--tales-done) 45%, transparent); background: var(--tales-card); color: var(--tales-done);
}
.tales-steps__label { font-size: 0.78rem; color: var(--text-secondary); }
.tales-steps__item.is-done .tales-steps__dot { background: var(--tales-done); border-color: var(--tales-done); color: #fff; }
.tales-steps__item.is-current .tales-steps__dot { background: var(--tales-accent); border-color: var(--tales-accent); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--tales-accent) 25%, transparent); }
.tales-steps__item.is-current .tales-steps__label { color: var(--tales-accent); font-weight: 700; }

/* Resumo: pet escolhido | cenário. */
.tales-summary { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-lg, 22px); }
.tales-summary__half { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.tales-summary__pet { flex: none; width: 54px; aspect-ratio: 344 / 412; }
.tales-summary__pet > svg { width: 100%; height: 100%; overflow: visible; }
.tales-summary__scene { flex: none; width: 70px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; }
.tales-summary__scene > svg { width: 100%; height: 100%; display: block; }
.tales-summary__text { display: grid; min-width: 0; }
.tales-summary__text small { font-size: 0.74rem; color: var(--text-secondary); }
.tales-summary__text strong { font-family: var(--font-display, sans-serif); font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tales-summary__line { width: 1px; height: 46px; background: var(--glass-border); }

/* Blocos numerados de cada etapa. */
.tales-section { display: grid; gap: 12px; padding: 14px; border-radius: var(--r-lg, 22px); min-width: 0; }
.tales-section__head { display: flex; align-items: flex-start; gap: 10px; }
.tales-section__n {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -2px; border-radius: 50%;
  background: var(--tales-accent); color: #fff; font-family: var(--font-display, sans-serif); font-weight: 700;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--tales-accent) 60%, #000 10%);
}
.tales-section__title { margin: 0; font-family: var(--font-display, sans-serif); font-size: 1.12rem; line-height: 1.2; }
.tales-section__sub { margin: 2px 0 0; font-size: 0.82rem; color: var(--text-secondary); }

/* Selo de escolhido no canto dos cartões. */
.tales-check {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--tales-pick) 40%, transparent); background: var(--tales-card); color: #fff; font-size: 0.78rem; font-weight: 800;
  opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease;
}
.tales-check.is-on { opacity: 1; transform: none; background: var(--tales-pick); border-color: var(--tales-pick); }

/* Cartões escolhíveis (pets, cenários, jeitos). */
.tales-pet, .tales-place, .tales-tone {
  position: relative; border: 2px solid var(--glass-border); background: var(--tales-card); border-radius: 18px; cursor: pointer;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--tales-pick) 14%, transparent);
  transition: transform 0.12s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.tales-pet:active, .tales-place:active, .tales-tone:active { transform: scale(0.97); }
.tales-pet.is-on, .tales-place.is-on, .tales-tone.is-on {
  border-color: var(--tales-pick); background: color-mix(in srgb, var(--tales-pick) 16%, var(--tales-card));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--tales-pick) 45%, transparent);
}

.tales-pets { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.tales-pet { display: grid; justify-items: center; gap: 4px; padding: 10px 6px 8px; }
.tales-pet__art { width: 70px; aspect-ratio: 344 / 412; }
.tales-pet__art > svg { width: 100%; height: 100%; overflow: visible; }
.tales-pet__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display, sans-serif); font-size: 0.9rem; }

.tales-places { display: grid; gap: 8px; }
.tales-places__group { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); }
.tales-places__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.tales-place { display: grid; gap: 6px; padding: 5px 5px 8px; }
.tales-place__art { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 13px; }
.tales-place__art > svg { width: 100%; height: 100%; display: block; }
.tales-place__name { font-family: var(--font-display, sans-serif); font-size: 0.86rem; text-align: center; }

.tales-tones { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.tales-tone { grid-column: span 2; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 92px; padding: 10px 6px; }
.tales-tone:nth-child(4) { grid-column: 1 / span 3; }
.tales-tone:nth-child(5) { grid-column: 4 / span 3; }
.tales-tone__icon { font-size: 2rem; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12)); }
.tales-tone__label { font-family: var(--font-display, sans-serif); font-size: 0.95rem; }

/* Ideias do lugar: miniatura, texto e o "✓" verde da escolhida. */
.tales-ideas { display: grid; gap: 8px; }
.tales-idea {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px;
  border: 2px solid var(--glass-border); border-radius: 16px; background: var(--tales-card); text-align: left; cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tales-idea.is-on { border-color: var(--tales-ok); background: color-mix(in srgb, var(--tales-ok) 14%, var(--tales-card)); }
.tales-idea__art { display: grid; place-items: center; width: 64px; height: 48px; border-radius: 12px; font-size: 1.7rem; }
.tales-idea__art--0 { background: linear-gradient(135deg, #c4b5fd, #f0abfc); }
.tales-idea__art--1 { background: linear-gradient(135deg, #fde68a, #fdba74); }
.tales-idea__art--2 { background: linear-gradient(135deg, #a7f3d0, #93c5fd); }
.tales-idea__art--3 { background: linear-gradient(135deg, #fbcfe8, #c4b5fd); }
.tales-idea__art--4 { background: linear-gradient(135deg, #bae6fd, #e0e7ff); }
.tales-idea__art--5 { background: linear-gradient(135deg, #e9d5ff, #fecaca); }
.tales-idea__text { font-size: 0.92rem; line-height: 1.3; }
.tales-radio {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--text-secondary) 45%, transparent);
  color: #fff; font-size: 0.85rem; font-weight: 800;
}
.tales-radio.is-on { border-radius: 50%; background: var(--tales-ok); border-color: var(--tales-ok); }
.tales-own { position: relative; display: block; }
.tales-own__icon { position: absolute; top: 12px; left: 12px; font-size: 1rem; opacity: 0.6; pointer-events: none; }
.tales-text {
  display: block; width: 100%; min-height: 76px; resize: vertical; padding: 12px 12px 24px 40px; border-radius: 16px;
  border: 2px solid var(--glass-border); background: var(--tales-card); color: inherit; font: inherit; font-size: 0.95rem; line-height: 1.35;
}
.tales-count { position: absolute; right: 12px; bottom: 8px; font-size: 0.74rem; color: var(--text-secondary); pointer-events: none; }
.tales-hint { margin: 0; font-size: 0.78rem; color: var(--text-secondary); }

/* Extras: dublagem e música, lado a lado. */
.tales-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.tales-extra {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; padding: 10px;
  border: 2px solid var(--glass-border); border-radius: 18px; background: var(--tales-card); cursor: pointer;
}
.tales-extra:has(.tales-extra__check:checked) { border-color: var(--tales-pick); background: color-mix(in srgb, var(--tales-pick) 14%, var(--tales-card)); }
.tales-extra:has(:focus-visible) { outline: 3px solid var(--tales-ok); outline-offset: 2px; }
.tales-extra__check { width: 22px; height: 22px; margin: 0; accent-color: var(--tales-pick); }
.tales-extra__icon { font-size: 1.6rem; }
.tales-extra__body { display: grid; gap: 2px; min-width: 0; }
.tales-extra__body strong { font-family: var(--font-display, sans-serif); font-size: 0.9rem; line-height: 1.15; }
.tales-extra__price { font-family: var(--font-display, sans-serif); font-weight: 700; color: var(--coin-premium, #a855f7); white-space: nowrap; }
.tales-extras__note { display: grid; gap: 6px; }
.tales-extras__note .tales-chip { min-height: 34px; padding: 4px 12px; font-size: 0.85rem; }
.tales-extras__note p { margin: 0; }

/* Total e botões de baixo. */
.tales-total { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; padding: 12px 14px; border-radius: 999px; text-align: center; }
.tales-total strong { font-family: var(--font-display, sans-serif); font-size: 1.08rem; }
.tales-total__value { color: var(--coin-premium, #a855f7); }
.tales-total__note { font-size: 0.82rem; font-weight: 700; color: var(--tales-done); }
.tales-actions { display: flex; gap: 10px; align-items: stretch; }
.tales-actions .tales-next { flex: 1; }
.tales-next, .tales-back { min-height: 52px; border-radius: 999px; font-family: var(--font-display, sans-serif); font-size: 1.05rem; }
.tales-cta { font-size: 1.15rem; }
.tales-next:disabled { opacity: 0.55; cursor: not-allowed; }

/* Finalizar. */
.tales-finish { display: grid; gap: 14px; }
.tales-reading, .tales-oops { justify-items: center; text-align: center; padding: 28px 16px; }
.tales-reading__icon { font-size: 2.6rem; animation: tales-ping 1.6s ease-in-out infinite; }
.tales-oops .tales-reading__icon { animation: none; }
.tales-preview__synopsis { line-height: 1.4; }
.tales-preview__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tales-tag { padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: color-mix(in srgb, var(--tales-done) 14%, var(--tales-card)); }
.tales-tag--ai { background: rgba(124, 58, 237, 0.92); color: #fff; }
.tales-tag--music { background: rgba(219, 39, 119, 0.92); color: #fff; }
.tales-bill { gap: 8px; }
.tales-bill__row { display: flex; justify-content: space-between; gap: 12px; }
.tales-bill__total { padding-top: 8px; border-top: 1px dashed var(--glass-border); font-family: var(--font-display, sans-serif); font-size: 1.05rem; }
.tales-rules { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--text-secondary); }

@media (max-width: 380px) {
  .tales-section { padding: 12px 10px; }
  .tales-tones { gap: 8px; }
  .tales-tone { min-height: 82px; }
  .tales-idea { gap: 10px; }
  .tales-idea__art { width: 54px; height: 42px; font-size: 1.45rem; }
  .tales-summary__scene { width: 58px; }
}
@media (prefers-reduced-motion: reduce) { .tales-reading__icon { animation: none; } }

.tales-preview { display: grid; gap: 8px; }
.tales-preview__art { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; }
.tales-preview__art > svg { width: 100%; height: 100%; display: block; }
.tales-preview__title { font-family: var(--font-display, sans-serif); font-size: 1.2rem; }
.tales-preview p { margin: 0; }
.tales-preview__price { font-family: var(--font-display, sans-serif); font-size: 1.05rem; color: var(--coin-premium, #c084fc); }

/* Tela cheia do conto é um modo da página: barra de cima e menu somem, e a
   tela para de animar — o `transform` da animação de entrada prendia o
   `position: fixed` do conto dentro dela. */
body.is-story-fullscreen { overflow: hidden; }
body.is-story-fullscreen .topbar,
body.is-story-fullscreen .nav,
body.is-story-fullscreen .notification-button,
body.is-story-fullscreen .status-dock { display: none !important; }
body.is-story-fullscreen .screen { animation: none; transform: none; }

/* ---------- atalho para a Laluno TV (página pública dos contos) ---------- */
.tales-tv { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-md, 14px); color: inherit; text-decoration: none; }
.tales-tv__icon { font-size: 1.8rem; }
.tales-tv > span:nth-child(2) { display: grid; flex: 1; gap: 2px; }
.tales-tv__go { font-size: 1.6rem; opacity: 0.6; }
.tales-player__tv { text-decoration: none; }

/* ---------- tamanho do conto: slide de 30 s a 5 min ---------- */
.tales-length { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-md, 14px); }
.tales-length__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.tales-length__value { font-family: var(--font-display, sans-serif); font-size: 1.15rem; }
.tales-length__price { font-family: var(--font-display, sans-serif); font-weight: 700; color: var(--coin-premium, #a855f7); }
.tales-length__slider {
  --fill: 0%;
  width: 100%; height: 34px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.tales-length__slider::-webkit-slider-runnable-track {
  height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-mint, #3ddc97), var(--brand-violet, #8b5cf6)) 0 0 / var(--fill) 100% no-repeat, var(--glass-surface-strong, rgba(255,255,255,.14));
}
.tales-length__slider::-moz-range-track { height: 12px; border-radius: 999px; background: var(--glass-surface-strong, rgba(255,255,255,.14)); }
.tales-length__slider::-moz-range-progress { height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--brand-mint, #3ddc97), var(--brand-violet, #8b5cf6)); }
.tales-length__slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; margin-top: -9px; border-radius: 50%;
  background: #fff; border: 4px solid var(--brand-violet, #8b5cf6); box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
}
.tales-length__slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--brand-violet, #8b5cf6); }
.tales-length__slider:focus-visible { outline: 3px solid var(--brand-mint, #3ddc97); outline-offset: 4px; border-radius: 999px; }
.tales-length__ticks { display: flex; justify-content: space-between; padding: 0 11px; margin-top: -6px; font-size: 0.72rem; color: var(--text-muted); }
.tales-length__ticks span { position: relative; width: 0; display: flex; justify-content: center; white-space: nowrap; }
.tales-length__ticks span::before { content: ''; position: absolute; top: -6px; width: 2px; height: 6px; border-radius: 2px; background: currentColor; opacity: .6; }
.tales-length__ticks span.is-half::before { height: 4px; opacity: .35; }
.tales-length__ticks span { padding-top: 2px; }
.tales-length__bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tales-length__band {
  min-height: 36px; border: 1px solid var(--glass-border, rgba(255,255,255,.18)); border-radius: 999px; background: transparent; color: inherit;
  font-weight: 700; cursor: pointer;
}
.tales-length__band.is-on { border-color: transparent; background: linear-gradient(135deg, var(--brand-mint, #3ddc97), var(--brand-violet, #8b5cf6)); color: var(--text-on-accent, #07110c); }