/* =====================================================================
   Componentes compartilhados. Cada um veste o tema pelo data-theme.
   ===================================================================== */

/* ---------- imagens e espaços reservados ---------- */
.smart-img { display: block; width: 100%; height: 100%; }
.smart-img img { width: 100%; height: 100%; object-fit: cover; }
.img-loading { display: block; width: 100%; height: 100%; background: var(--c-soft); }
.char-art .img-loading { background: transparent; }
.smart-img.is-loaded img { animation: pop-in 420ms var(--ease-out) both; }

.ph-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 12px;
  text-align: center;
  color: var(--c-ink-soft);
  background-color: var(--c-soft);
  background-image: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(255, 255, 255, 0.55) 10px 20px);
  border: 2px dashed var(--c-line);
  border-radius: inherit;
}
.ph-photo__icon { width: 26px; height: 26px; opacity: 0.8; }
.ph-photo__label { font-size: 0.86rem; line-height: 1.25; font-weight: 600; max-width: 18ch; }
.ph-photo__file { font-size: 0.7rem; opacity: 0.85; word-break: break-all; }

.ph-char {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 6px;
  border-radius: 50%;
  background: var(--c-paper);
  border: 2px dashed var(--c-line);
  color: var(--c-ink);
  text-align: center;
  line-height: 1.05;
}
.ph-char__name { font-family: var(--f-hand); font-size: max(12px, 1.05em); font-weight: 700; }
.ph-char__hint { font-size: max(9px, 0.62em); color: var(--c-ink-soft); }
.sticker--xs .ph-char__hint,
.sticker--s .ph-char__hint,
.intro__char .ph-char__hint { display: none; }

/* ---------- adesivos de personagem ---------- */
.sticker {
  --size: 84px;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  rotate: var(--rot, 0deg);
  filter: drop-shadow(0 4px 6px rgba(40, 20, 40, 0.22));
  font-size: 13px;
}
.sticker--xs { --size: 52px; font-size: 10px; }
.sticker--s { --size: 70px; font-size: 12px; }
.sticker--m { --size: 92px; font-size: 14px; }
.sticker .smart-img img { object-fit: contain; }
.sticker .ph-char { border-style: solid; border-width: 3px; border-color: #fff; outline: 2px dashed var(--c-line); outline-offset: -7px; }

.sticker.is-secret { cursor: pointer; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .sticker.is-secret:hover { transform: translateY(-3px) scale(1.06); }
}
.sticker.is-secret:active { transform: scale(0.95); }
.sticker.is-peeking { animation: peek 6s var(--ease-in-out) infinite; }
.sticker.is-peeking:hover,
.sticker.is-peeking:focus-visible { animation-play-state: paused; transform: none; }
.sticker.is-found::after,
.secret-star.is-found::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-accent);
  border: 2px solid #fff;
}
:where(.sticker.is-secret) { position: relative; }
.is-bursting { animation: found-burst 520ms var(--ease-spring); }

/* ---------- estrelinhas secretas ---------- */
.secret-star {
  position: absolute;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--star-color, #f6d65e);
  --shape-line: rgba(120, 90, 20, 0.35);
}
.secret-star .shape { width: 24px; height: 24px; animation: twinkle 3.6s ease-in-out infinite; }
.secret-star:nth-of-type(2n) .shape { animation-delay: -1.4s; }
.secret-star.is-found { color: var(--star-found, #f39ac0); }
.secret-star--flower { color: var(--flower-color, #f7b5cf); --flower-heart: #fde58a; }
.secret-star--flower.is-found { color: #9fd0f2; }
@media (hover: hover) and (pointer: fine) {
  .secret-star:hover .shape { animation-play-state: paused; transform: scale(1.18); transition: transform 160ms var(--ease-out); }
}

/* ---------- balão de mensagem ---------- */
.bubble {
  position: absolute;
  z-index: 200;
  width: min(320px, calc(100vw - 24px));
  padding: 18px 44px 18px 18px;
  background: var(--c-paper);
  color: var(--c-ink);
  border-radius: var(--radius-soft, 18px);
  box-shadow: var(--shadow-lift, 0 16px 30px -12px rgba(0, 0, 0, 0.4));
  border: 2px solid var(--c-accent-soft);
  transform-origin: var(--tip-x, 50%) top;
  animation: bubble-in 220ms var(--ease-out) both;
}
.bubble[data-side='above'] { transform-origin: var(--tip-x, 50%) bottom; }
.bubble::before {
  content: '';
  position: absolute;
  left: calc(var(--tip-x, 50%) - 8px);
  top: -9px;
  width: 16px;
  height: 16px;
  background: inherit;
  border-left: 2px solid var(--c-accent-soft);
  border-top: 2px solid var(--c-accent-soft);
  rotate: 45deg;
}
.bubble[data-side='above']::before { top: auto; bottom: -9px; rotate: 225deg; }
.bubble.is-sheet {
  position: fixed;
  left: 12px !important;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  top: auto !important;
  width: auto;
  transform-origin: 50% 100%;
}
.bubble.is-sheet::before { display: none; }
.bubble.is-leaving { animation: bubble-out 160ms var(--ease-out) both; }
.bubble__text { font-family: var(--f-hand); font-size: 1.45rem; line-height: 1.3; }
[data-theme='han'] .bubble__text { font-size: 1.6rem; line-height: 1.2; }
.bubble__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--c-ink-soft);
}
.bubble__close:hover { color: var(--c-accent); }

@keyframes bubble-in { from { opacity: 0; transform: scale(0.94) translateY(4px); } }
@keyframes bubble-out { to { opacity: 0; transform: scale(0.96); } }

/* ---------- janelas (dialog) ---------- */
.dlg {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--c-ink);
  max-width: 100vw;
  max-height: 100dvh;
  overflow: visible;
  animation: dlg-in 280ms var(--ease-out) both;
}
.dlg::backdrop {
  background: rgba(40, 26, 44, 0.48);
  animation: fade-in 280ms ease both;
}
.dlg[data-theme='juju']::backdrop { background: rgba(60, 96, 130, 0.42); }
.dlg[data-theme='han']::backdrop { background: rgba(28, 23, 29, 0.55); }
.dlg.is-closing { animation: dlg-out 200ms var(--ease-out) both; }
.dlg.is-closing::backdrop { animation: fade-out 200ms ease both; }
@keyframes dlg-in { from { opacity: 0; transform: scale(0.96) translateY(10px); } }
@keyframes dlg-out { to { opacity: 0; transform: scale(0.97); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ---------- botões de texto comuns ---------- */
.letter__close,
.poke-scene__close,
.chest__close,
.rbx-area__back,
.leave-btn,
.farewell__go,
.farewell__stay,
.viewer__flip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 0.95rem;
  background: var(--c-accent-soft);
  color: var(--c-ink);
  border: 2px solid transparent;
  transition: background-color 180ms ease, border-color 180ms ease, transform 160ms var(--ease-out);
}
.letter__close:hover,
.poke-scene__close:hover,
.chest__close:hover,
.rbx-area__back:hover,
.leave-btn:hover,
.farewell__stay:hover,
.viewer__flip:hover { border-color: var(--c-accent); }
.farewell__go {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

/* ---------- cartas ---------- */
.letters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 22px 18px;
  padding: 10px 4px 4px;
}

.envelope {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 6px 4px;
  text-align: center;
  rotate: var(--tilt, 0deg);
  transition: transform 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .envelope:hover { transform: translateY(-4px) rotate(calc(var(--tilt, 0deg) * -1)); }
  .envelope:hover .envelope__flap { transform: rotateX(28deg); }
}
.envelope:active { transform: scale(0.97); }

.envelope__art {
  position: relative;
  display: block;
  width: 132px;
  aspect-ratio: 1.45;
  perspective: 500px;
  filter: drop-shadow(0 8px 10px rgba(40, 20, 40, 0.18));
}
.envelope__body {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: var(--env-body);
  border: 2px solid var(--env-line);
}
.envelope__body::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--env-line) 50%, transparent calc(50% + 1px)) left bottom / 50% 62% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), var(--env-line) 50%, transparent calc(50% + 1px)) right bottom / 50% 62% no-repeat;
  opacity: 0.55;
}
.envelope__flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 62%;
  background: var(--env-flap);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  transition: transform 260ms var(--ease-out);
}
.envelope__seal {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 30px;
  height: 30px;
  translate: -50% -50%;
  color: var(--env-seal);
}
.envelope__seal--bow { width: 44px; height: 28px; }
.envelope__lock {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  color: var(--c-ink);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 6px;
}
.envelope__lock .icon { width: 28px; height: 28px; }
.envelope.is-locked .envelope__lock { display: grid; }
.envelope.is-locked .envelope__art { filter: grayscale(0.6) drop-shadow(0 8px 10px rgba(40, 20, 40, 0.12)); }
.envelope__label { font-family: var(--f-hand); font-size: 1.35rem; line-height: 1.1; color: var(--c-ink); max-width: 14ch; }
[data-theme='han'] .envelope__label { font-size: 1.5rem; }
.envelope__tag {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-soft);
  color: var(--c-ink-soft);
}
.envelope.is-shaking { animation: shake 420ms var(--ease-out); }
@keyframes shake {
  20% { transform: translateX(-5px) rotate(-2deg); }
  45% { transform: translateX(5px) rotate(2deg); }
  70% { transform: translateX(-3px); }
}

[data-theme='han'] .envelope,
.letter[data-theme='han'] {
  --env-body: #221b24;
  --env-flap: #2e2531;
  --env-line: #f0b9cd;
  --env-seal: #f5c6d6;
  --shape-line: #a8436c;
}
[data-theme='juju'] .envelope,
.letter[data-theme='juju'] {
  --env-body: #fde3ec;
  --env-flap: #cfe9fa;
  --env-line: #e891b3;
  --env-seal: #f07fa8;
}

/* carta aberta */
.letter { width: 100vw; height: 100dvh; max-height: none; display: grid; place-items: center; }
.letter__stage {
  position: relative;
  width: min(680px, 94vw);
  height: min(86dvh, 820px);
}
.letter__env {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: min(420px, 82vw);
  aspect-ratio: 1.5;
  translate: -50% 0;
  transition: transform 520ms var(--ease-in-out), opacity 420ms ease;
}
.letter__env--back { background: var(--env-body); border: 2px solid var(--env-line); border-radius: 8px; z-index: 1; }
.letter__env--front {
  z-index: 3;
  perspective: 700px;
  pointer-events: none;
}
.letter__env--front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--env-body);
  border: 2px solid var(--env-line);
  border-radius: 8px;
  clip-path: polygon(0 32%, 50% 66%, 100% 32%, 100% 100%, 0 100%);
}
.letter__flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 66%;
  background: var(--env-flap);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  transition: transform 420ms var(--ease-in-out);
  z-index: 2;
}
.letter .envelope__seal { top: 62%; width: 48px; height: 48px; z-index: 3; transition: opacity 200ms ease; }
.letter .envelope__seal--bow { width: 70px; height: 44px; }

.letter__paper {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(28px, 6vw, 56px) clamp(22px, 6vw, 60px) 28px;
  border-radius: 10px;
  color: var(--c-ink);
  box-shadow: var(--shadow-lift);
  transform: translateY(58%) scale(0.62);
  opacity: 0;
  transition: transform 560ms var(--ease-out), opacity 360ms ease;
}
.letter.is-unsealing .letter__flap { transform: rotateX(180deg); }
.letter.is-unsealing .envelope__seal { opacity: 0; }
.letter.is-unsealing .letter__flap { z-index: 0; }
.letter.is-rising .letter__paper { opacity: 1; transform: translateY(18%) scale(0.72); }
.letter.is-open .letter__paper { transform: none; opacity: 1; z-index: 4; }
.letter.is-open .letter__env { transform: translateY(40%); opacity: 0; }

.letter__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.1; margin-bottom: 18px; }
.letter__text { font-family: var(--f-hand); font-size: clamp(1.4rem, 3.6vw, 1.75rem); line-height: 1.45; max-width: 36ch; }
.letter__foot { margin-top: 28px; display: flex; justify-content: flex-end; }

.letter[data-theme='han'] .letter__paper {
  background-color: #fffdfd;
  background-image: repeating-linear-gradient(to bottom, transparent 0 41px, rgba(185, 138, 161, 0.28) 41px 42px);
  background-position: 0 30px;
  border: 2px solid #1c171d;
  outline: 6px solid #fff;
  outline-offset: -12px;
}
.letter[data-theme='han'] .letter__paper::before {
  content: '';
  position: sticky;
  display: block;
  top: 0;
  height: 14px;
  margin: -14px -8px 14px;
  background: radial-gradient(circle at 8px 0, #1c171d 5px, transparent 5.5px) 0 0 / 16px 14px repeat-x;
}
.letter[data-theme='han'] .letter__title { font-family: 'Grenze Gotisch', serif; color: #1c171d; }
.letter[data-theme='han'] .letter__text { font-size: clamp(1.6rem, 4.2vw, 2rem); line-height: 1.32; }

.letter[data-theme='juju'] .letter__paper {
  background-color: #fff7fa;
  background-image:
    linear-gradient(rgba(143, 198, 232, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 198, 232, 0.28) 1px, transparent 1px);
  background-size: 22px 22px;
  border: 3px solid #f4a6c2;
}
.letter[data-theme='juju'] .letter__title { color: var(--j-pink-deep); }

/* envelope minúsculo escondido */
.tiny-envelope {
  position: absolute;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  opacity: 0.85;
  transition: transform 200ms var(--ease-out), opacity 200ms ease;
}
.tiny-envelope:hover { opacity: 1; transform: rotate(-8deg) scale(1.15); }
.tiny-envelope__art {
  position: relative;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  background: var(--tiny-body, #221b24);
  border: 1.5px solid var(--tiny-line, #f0b9cd);
}
.tiny-envelope__art::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 60%;
  background: var(--tiny-line, #f0b9cd);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tiny-envelope.is-found { opacity: 0.5; }

/* ---------- fotografias ---------- */
.scrapbook {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 30px 22px;
  padding: 18px 8px 10px;
  align-items: start;
}

.photo {
  position: relative;
  display: flex;
  flex-direction: column;
  rotate: var(--rot, 0deg);
  transition: transform 260ms var(--ease-out), filter 260ms ease;
  filter: drop-shadow(0 8px 10px rgba(40, 24, 40, 0.18));
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .photo:hover {
    transform: scale(1.04) rotate(calc(var(--rot, 0deg) * -0.6));
    filter: drop-shadow(0 16px 18px rgba(40, 24, 40, 0.28));
    z-index: 2;
  }
}
.photo:active { transform: scale(0.98); }
.photo__frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-soft); }
.photo__caption {
  font-family: var(--f-hand);
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--c-ink);
  padding: 10px 4px 2px;
}
[data-theme='han'] .photo__caption { font-size: 1.45rem; }

.photo--inteira .photo__frame { background: #f6f2f4; }
.photo--inteira .photo__media img { object-fit: contain; }
.photo--polaroid { background: #fff; padding: 10px 10px 14px; border-radius: 3px; }
.photo--polaroid .photo__frame { aspect-ratio: 1; }
.photo--polaroid .photo__caption { text-align: center; }

.photo--fita { background: #fff; padding: 8px; }
.photo--fita .photo__frame { aspect-ratio: 4 / 3; }

.photo--tachinha { background: #fff; padding: 9px 9px 12px; border-radius: 2px; }
.photo--tachinha .photo__frame { aspect-ratio: 3 / 4; }

.photo--quadro {
  padding: 12px;
  background: var(--frame-color, #fff);
  border: 5px solid var(--frame-edge, #e7d3dc);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px #fff;
}
.photo--quadro .photo__frame { aspect-ratio: 1; border-radius: 3px; }

.photo--publicacao {
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 12px;
  padding: 10px;
  rotate: 0deg;
}
.photo--publicacao .photo__frame { aspect-ratio: 4 / 3; border-radius: 8px; }
.photo__post-head { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--c-ink-soft); padding: 0 2px 8px; }
.photo__post-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--c-accent-soft); border: 2px solid var(--c-line); }

.photo--destaque { background: #fff; padding: 12px 12px 16px; border-radius: 4px; grid-column: span 2; }
.photo--destaque .photo__frame { aspect-ratio: 16 / 10; }

.tape {
  position: absolute;
  z-index: 2;
  width: 74px;
  height: 22px;
  background: var(--tape, rgba(251, 202, 219, 0.78));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.tape--l { left: -14px; top: 6px; rotate: -32deg; }
.tape--r { right: -14px; top: 6px; rotate: 32deg; }
.tape--top { left: 50%; top: -10px; translate: -50% 0; rotate: -3deg; }

.pin {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -8px;
  width: 18px;
  height: 18px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--pin, #e65a8a);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.25), inset -3px -3px 0 rgba(0, 0, 0, 0.15), inset 3px 3px 0 rgba(255, 255, 255, 0.45);
}
.photo__verso-mark { position: absolute; right: 8px; bottom: 8px; color: var(--c-accent); }

/* visualização ampliada */
.viewer-dlg { width: 100vw; height: 100dvh; max-height: none; }
.viewer {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 64px clamp(8px, 3vw, 32px) 40px;
}
.viewer__figure { display: grid; justify-items: center; gap: 14px; }
.viewer__card {
  position: relative;
  width: min(560px, 78vw, 62dvh);
  aspect-ratio: 4 / 5;
  background: #fff;
  padding: 14px;
  border-radius: 6px;
  box-shadow: var(--shadow-lift);
  transform-style: preserve-3d;
  transition: transform 520ms var(--ease-in-out);
}
.viewer__card.is-flipped { transform: rotateY(180deg); }
.viewer__front,
.viewer__back { position: absolute; inset: 14px; backface-visibility: hidden; overflow: hidden; border-radius: 3px; }
.viewer__front .smart-img img { object-fit: contain; background: #faf7f8; }
.viewer__back {
  transform: rotateY(180deg);
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--c-soft);
  font-family: var(--f-hand);
  font-size: 1.6rem;
  text-align: center;
}
.viewer__caption {
  font-family: var(--f-hand);
  font-size: 1.8rem;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.viewer__count { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #fff; font-size: 0.9rem; }
.viewer__nav,
.viewer__close {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-ink);
}
.viewer__close { position: absolute; top: 12px; right: 12px; }
.viewer__nav[hidden] { display: none; }
@media (max-width: 640px) {
  .viewer { grid-template-columns: 1fr; padding-top: 72px; }
  .viewer__nav { position: absolute; bottom: 44px; }
  .viewer__nav:first-of-type { left: 16px; }
  .viewer__nav:last-of-type { right: 16px; }
}

/* ---------- contador de segredos ---------- */
.counter {
  padding: 14px 16px;
  border-radius: var(--radius-box);
  background: var(--c-paper);
  border: 1.5px dashed var(--c-line);
}
.counter__label { font-size: 0.9rem; color: var(--c-ink-soft); }
.counter__num { font-family: var(--f-display); font-size: 1.6rem; line-height: 1.2; }
.counter__num strong { font-weight: inherit; color: var(--c-accent); font-size: 2rem; }
.counter__stars { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; }
.counter__stars .shape { width: 16px; height: 16px; color: #e8e2ea; --shape-line: rgba(0, 0, 0, 0.12); }
.counter__stars .shape.is-on { color: #f6c84a; --shape-line: rgba(140, 100, 10, 0.4); }
.counter.is-complete { border-style: solid; border-color: var(--c-accent); }

.time-counter { font-size: 0.95rem; color: var(--c-ink-soft); }
.time-counter__label { margin-right: 6px; }
.time-counter__num { font-family: var(--f-display); font-size: 1.4rem; color: var(--c-accent); }

/* ---------- Pokébola ---------- */
.pokeball {
  --ball-top: #e2574c;
  --ball-bottom: #ffffff;
  --ball-line: #2a2129;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  transition: transform 200ms var(--ease-out);
}
[data-theme='han'] .pokeball,
.poke-scene--han { --ball-top: #1f1a21; --ball-bottom: #fbe3ec; --ball-line: #1c171d; }
[data-theme='han'] .pokeball .pokeball-svg__top path:first-child,
.poke-scene--han .pokeball-svg__top path:first-child { stroke: #f0b9cd; }
[data-theme='juju'] .pokeball,
.poke-scene--juju { --ball-top: #f7a8c6; --ball-bottom: #e4f4fd; --ball-line: #4a3846; }
.pokeball svg { width: 100%; height: 100%; overflow: visible; }
@media (hover: hover) and (pointer: fine) {
  .pokeball:hover { transform: rotate(-12deg) scale(1.06); }
}
.pokeball:active { transform: scale(0.95); }
.pokeball.is-wobbling { animation: wobble 260ms ease-in-out 2; }
@keyframes wobble { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }

.pokeball--shy { --peek-x: 0; --peek-y: 46%; animation: shy-peek 7s var(--ease-in-out) infinite; }
@keyframes shy-peek {
  0%, 62%, 100% { transform: translateY(46%) rotate(-8deg); }
  70%, 84% { transform: translateY(12%) rotate(6deg); }
}
.pokeball--shy:hover,
.pokeball--shy:focus-visible { animation-play-state: paused; transform: translateY(10%); }

.poke-dlg { width: min(460px, 94vw); }
.poke-dlg .poke-scene { max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; }
.poke-scene {
  position: relative;
  padding: 28px 22px 22px;
  border-radius: 24px;
  background: var(--c-paper);
  box-shadow: var(--shadow-lift);
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.poke-scene--han { border: 2px solid #1c171d; outline: 5px solid #f5d3df; outline-offset: -11px; }
.poke-scene--juju { border: 3px solid #f4a6c2; background: #fffafc; }
.poke-scene__stage { position: relative; width: 100%; height: 240px; flex: none; }
.poke-scene__ball { position: absolute; left: 50%; bottom: 8px; width: 108px; height: 108px; translate: -50% 0; z-index: 2; }
.poke-scene__ball svg { width: 100%; height: 100%; overflow: visible; }
.poke-scene__ball .pokeball-svg__top { transform-box: fill-box; transform-origin: 6% 100%; transition: transform 380ms var(--ease-spring); }
.poke-scene.is-open .pokeball-svg__top { transform: rotate(-58deg) translate(-4px, -10px); }
.poke-scene__flash {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 246, 214, 0.9) 30%, transparent 68%);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}
.poke-scene.is-open .poke-scene__flash { animation: flash 620ms ease-out both; }
.poke-scene__mimikyu {
  position: absolute;
  left: 50%;
  bottom: 60px;
  width: 150px;
  height: 150px;
  translate: -50% 0;
  z-index: 1;
  opacity: 0;
  transform: translateY(70px) scale(0.9);
  transition: transform 520ms var(--ease-spring), opacity 300ms ease;
}
.poke-scene__art { display: block; width: 100%; height: 100%; transition: transform 640ms var(--ease-in-out); font-size: 15px; }
.poke-scene__art .smart-img img { object-fit: contain; }
.poke-scene.is-out .poke-scene__mimikyu { opacity: 1; transform: none; }
.poke-scene--juju.is-out .poke-scene__mimikyu { animation: bob 1.6s ease-in-out 520ms infinite; }
.poke-scene__mimikyu:disabled { cursor: default; }
.poke-scene__msg {
  width: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--c-soft);
  font-family: var(--f-hand);
  font-size: 1.4rem;
  line-height: 1.25;
  animation: pop-in 420ms var(--ease-out) both;
}
.poke-scene__msg[hidden] { display: none; }
[data-theme='han'] .poke-scene__msg { font-size: 1.6rem; background: #fff; border: 2px dashed #b98aa1; }
/* Han: a fantasia levanta e a mensagem aparece por baixo */
.poke-scene--han.is-lifted .poke-scene__art { transform: translateY(-46px) rotate(-14deg) scale(0.88); }
.poke-scene--han.is-out:not(.is-lifted) .poke-scene__mimikyu { cursor: pointer; }
/* Juju: o Mimikyu quica e o recado aparece embaixo */
.poke-scene--juju.is-told .poke-scene__ball { opacity: 0; transition: opacity 300ms ease; }
.poke-scene__hint { font-size: 0.95rem; color: var(--c-ink-soft); }

/* ---------- baú do Minecraft ---------- */
.chest { display: grid; justify-items: center; gap: 12px; padding: 6px 0 4px; }
.chest__box { position: relative; width: 112px; height: 112px; display: block; image-rendering: pixelated; }
.chest__lid,
.chest__base { position: absolute; left: 8px; right: 8px; display: block; }
.chest__lid { top: 34px; height: 30px; z-index: 2; transform-origin: 50% 0; transition: transform 380ms var(--ease-spring); }
.chest__base { top: 63px; height: 45px; z-index: 1; }
.chest__lid svg,
.chest__base svg { width: 100%; height: 100%; display: block; }
.chest__item {
  position: absolute;
  left: 50%;
  top: 52px;
  width: 48px;
  height: 48px;
  translate: -50% 0;
  z-index: 1;
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  transition: transform 520ms var(--ease-spring) 120ms, opacity 240ms ease 120ms;
}
.chest__item svg { width: 100%; height: 100%; }

@media (hover: hover) and (pointer: fine) {
  .chest[data-state='closed'] .chest__box:hover .chest__lid { transform: translateY(-4px); }
}
.chest__box:active { transform: scale(0.97); }
.chest[data-state='open'] .chest__lid { transform: translateY(-14px) perspective(200px) rotateX(64deg); }
.chest[data-state='open'] .chest__item { opacity: 1; transform: translateY(-46px) scale(1); z-index: 3; animation: bob 2.4s ease-in-out 700ms infinite; }
.chest__msg {
  position: relative;
  width: min(290px, 100%);
  padding: 30px 18px 18px;
  border-radius: 14px;
  text-align: center;
  font-family: var(--f-hand);
  font-size: 1.35rem;
  line-height: 1.25;
  animation: pop-in 360ms var(--ease-out) both;
}
.chest__msg[hidden] { display: none; }
.chest__msg-gem { position: absolute; left: 50%; top: -22px; width: 40px; height: 40px; translate: -50% 0; }
.chest__msg-gem svg { width: 100%; height: 100%; }
.chest__msg--diamond {
  background: #e3fbf8;
  border: 3px solid #22c4b8;
  color: #0e3f3c;
  box-shadow: 0 10px 22px -12px rgba(28, 23, 29, 0.35), inset 0 0 0 3px #fff;
  clip-path: polygon(10% 0, 90% 0, 100% 12%, 100% 88%, 90% 100%, 10% 100%, 0 88%, 0 12%);
}
.chest__msg--flower { background: #fff2f7; border: 3px solid #f4a6c2; color: var(--j-ink); }
.chest__close[hidden] { display: none; }
.chest__photo { width: min(170px, 70%); padding-top: 4px; animation: pop-in 420ms var(--ease-out) 120ms both; }
.chest__photo[hidden] { display: none; }

/* ---------- portal do Roblox ---------- */
.rbx-portal { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.rbx-portal__frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  background: #3b3f46;
  border-radius: 10px;
  box-shadow: inset 0 0 0 6px #5a5f69, inset 0 0 0 10px #2a2d33, 0 8px 14px -6px rgba(0, 0, 0, 0.45);
  transition: transform 200ms var(--ease-out);
}
.rbx-portal__frame::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 4px;
  background: var(--rbx-inner, #9fd4f0);
}
.rbx-portal__swirl { position: relative; width: 52px; height: 52px; color: #fff; animation: spin-slow 5s linear infinite; }
.rbx-portal__swirl svg { width: 100%; height: 100%; }
.rbx-portal__label { font-size: 0.9rem; font-weight: 600; color: var(--c-ink); }
@media (hover: hover) and (pointer: fine) {
  .rbx-portal:hover .rbx-portal__frame { transform: translateY(-3px) rotate(-3deg); }
  .rbx-portal:hover .rbx-portal__swirl { animation-duration: 1.2s; }
}
.rbx-portal:active .rbx-portal__frame { transform: scale(0.95); }
.rbx-portal.is-charging .rbx-portal__swirl { animation-duration: 0.4s; }
[data-theme='han'] .rbx-portal { --rbx-inner: #f5d3df; }
[data-theme='han'] .rbx-portal__swirl { color: #1c171d; }

.teleport { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.teleport__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); }
.teleport__block { background: var(--tp-a, #9fd4f0); opacity: 0; animation: block-in 360ms var(--ease-out) forwards; }
.teleport__block:nth-child(3n) { background: var(--tp-b, #fbcadb); }
.teleport__block:nth-child(5n) { background: var(--tp-c, #fff1a6); }
.teleport[data-theme='han'] { --tp-a: #1c171d; --tp-b: #f5d3df; --tp-c: #c3dbf1; }
@keyframes block-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.teleport__swirl { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; color: #fff; animation: spin-slow 0.8s linear infinite; }
.teleport__swirl svg { width: 100%; height: 100%; }
.teleport.is-leaving { animation: fade-out 400ms ease forwards; }

.rbx-dlg { width: min(860px, 96vw); max-height: 92dvh; }
.rbx-area {
  max-height: 92dvh;
  overflow-y: auto;
  padding: clamp(22px, 4vw, 40px);
  border-radius: 20px;
  background: var(--c-paper);
  display: grid;
  gap: 22px;
}
.rbx-area__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; }
.rbx-area__photos { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; padding: 10px 6px; }
.rbx-area__photos .photo--destaque { grid-column: auto; }
/* Uma foto só: ocupa a área e fica centralizada (sem coluna vazia ao lado) */
.rbx-area__photos:has(> .photo:only-child) { grid-template-columns: minmax(0, 420px); justify-content: center; }
.rbx-area__msg { font-family: var(--f-hand); font-size: 1.5rem; line-height: 1.3; }
.rbx-area__back { justify-self: start; }
@media (max-width: 640px) { .rbx-area__photos { grid-template-columns: 1fr; } }

/* ---------- player de música ---------- */
.player {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-box);
  background: var(--player-bg, var(--c-paper));
  border: 1.5px solid var(--c-line);
}
.player__top { display: flex; align-items: center; gap: 12px; }
.player__disc {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-ink);
}
.player.is-playing .player__disc { animation: spin-slow 6s linear infinite; }
.player__info { min-width: 0; flex: 1; }
.player__title { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.15; }
.player__artist { font-size: 0.88rem; color: var(--c-ink-soft); }
.player__eq { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.player__eq span { width: 4px; height: 100%; border-radius: 2px; background: var(--c-accent); transform: scaleY(0.25); transform-origin: bottom; }
.player.is-playing .player__eq span { animation: eq 900ms ease-in-out infinite; }
.player.is-playing .player__eq span:nth-child(2) { animation-delay: -300ms; animation-duration: 760ms; }
.player.is-playing .player__eq span:nth-child(3) { animation-delay: -520ms; animation-duration: 1020ms; }
.player.is-playing .player__eq span:nth-child(4) { animation-delay: -140ms; animation-duration: 840ms; }
.player__controls { display: flex; align-items: center; gap: 12px; }
.player__play {
  width: var(--tap);
  height: var(--tap);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-accent-ink);
}
.player__play:disabled { background: var(--c-line); color: #fff; cursor: not-allowed; }
.player__vol { display: flex; align-items: center; gap: 8px; flex: 1; color: var(--c-ink-soft); }
.player__volume { flex: 1; accent-color: var(--c-accent); min-width: 0; height: 24px; }
.player__volume:disabled { opacity: 0.5; }
.player__status { font-size: 0.85rem; color: var(--c-ink-soft); }
.player--none .player__status { color: var(--c-ink); }
.player__embed { width: 100%; height: 80px; border: 0; border-radius: 12px; }
/* Telinha do YouTube: nunca menor que 200×200 (regra do YouTube) */
.player__tv { margin: 0 -10px; padding: 6px; border-radius: 14px; background: var(--tv-frame, #2c2430); }
.player__tv-screen { width: 100%; min-width: 200px; height: 200px; border-radius: 8px; overflow: hidden; background: #000; }
.player__tv-screen iframe { display: block; width: 100%; height: 100%; border: 0; }
.player--han .player__tv { --tv-frame: #1c171d; box-shadow: inset 0 0 0 2px #f0b9cd; }
.player--juju .player__tv { --tv-frame: #f4a6c2; width: min(372px, 100%); margin-left: auto; margin-right: auto; }

/* ---------- navegação ---------- */
.switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 6px 18px 6px 8px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: #fff;
  background: var(--switch-bg);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.45);
}
.switch-btn--to-juju { --switch-bg: #2a62a8; }
.switch-btn--to-han { --switch-bg: #2c2430; }
.switch-btn__portal {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #ffd8e6;
}
.switch-btn__portal .shape { width: 20px; height: 20px; transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .switch-btn:hover .switch-btn__portal .shape { transform: rotate(90deg) scale(1.15); }
}
.switch-btn--to-han .switch-btn__portal { color: #f5c6d6; }
.switch-btn--to-juju .switch-btn__portal { color: #fff1a6; }

.farewell-dlg { width: min(480px, 94vw); }
.farewell {
  position: relative;
  padding: 36px 26px 24px;
  border-radius: 22px;
  background: var(--c-paper);
  text-align: center;
  display: grid;
  gap: 18px;
  justify-items: center;
}
.farewell__mark { width: 56px; height: 40px; color: var(--c-accent-soft); }
.farewell[data-theme] .farewell__mark,
.dlg[data-theme='juju'] .farewell__mark { width: 44px; height: 44px; color: #f7b5cf; }
.farewell__text { font-family: var(--f-hand); font-size: 1.55rem; line-height: 1.3; }
.dlg[data-theme='han'] .farewell__text { font-size: 1.75rem; }
.farewell__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- abas ---------- */
.tabs__list { display: flex; gap: 8px; border-bottom: 2px solid var(--c-line); padding: 0 6px; }
.tabs__tab {
  position: relative;
  min-height: var(--tap);
  padding: 8px 18px;
  border: 2px solid var(--c-line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: var(--tab-bg, #f6f1f4);
  color: var(--c-ink);
  margin-bottom: -2px;
  font-size: 1.05rem;
  transition: background-color 180ms ease, color 180ms ease;
}
.tabs__tab[aria-selected='true'] { background: var(--tab-active, var(--c-accent-soft)); border-bottom: 2px solid var(--tab-active, var(--c-accent-soft)); }
.tabs__tab:hover { background: var(--tab-active, var(--c-accent-soft)); }
.tabs__panel { padding-top: 18px; }
.tabs__panel:focus-visible { outline-offset: 6px; }

/* ---------- bloqueio durante a queimadura ---------- */
.burn-blocker { position: fixed; inset: 0; z-index: 62; cursor: progress; }