/* ============================================================
   pra Rafaela ✦ — style.css
   Um site-cartinha em capítulos, tema céu estrelado.
   Paleta: navy profundo · roxo · rosa · dourado
   ============================================================ */

:root {
  --navy-deep:   #120826;
  --navy:        #1c0f38;
  --navy-soft:   #2a1652;
  --purple:      #8a4fff;
  --purple-glow: #b98cff;
  --pink:        #ff8fd8;
  --pink-soft:   #ffd6f1;
  --gold:        #ffd76e;
  --white:       #fdf7ff;
  --ink-soft:    rgba(253, 247, 255, 0.82);
  --shadow-glow: 0 10px 34px rgba(138, 79, 255, 0.35);
  --shadow-pink: 0 10px 30px rgba(255, 143, 216, 0.25);

  --vh: 1vh;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: var(--white);
  background: radial-gradient(ellipse at top, #2a1652 0%, #1c0f38 45%, #120826 100%);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(185, 140, 255, 0.25), transparent 42%),
    radial-gradient(circle at 82% 88%, rgba(255, 143, 216, 0.18), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   FUNDO ANIMADO — parallax pixel stars
   ============================================================ */
#stars, #stars2, #stars3 {
  position: fixed;
  top: 0; left: 0;
  width: 1px;
  background: transparent;
  z-index: 0;
  pointer-events: none;
}
#stars  { height: 1px; animation: animStar 60s  linear infinite; }
#stars2 { height: 2px; animation: animStar 120s linear infinite; }
#stars3 { height: 3px; animation: animStar 180s linear infinite; }

#stars::after, #stars2::after, #stars3::after {
  content: " ";
  position: absolute;
  top: 2000px;
  background: transparent;
}
#stars::after  { width: 1px; height: 1px; box-shadow: inherit; }
#stars2::after { width: 2px; height: 2px; box-shadow: inherit; }
#stars3::after { width: 3px; height: 3px; box-shadow: inherit; }

@keyframes animStar {
  from { transform: translateY(0); }
  to   { transform: translateY(-2000px); }
}

/* ============================================================
   ESTRELAS CADENTES
   ============================================================ */
.shooting-stars {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.shooting-star {
  position: absolute;
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
  border-radius: 999px;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
  animation: shoot 1.6s ease-in forwards;
}
@keyframes shoot {
  0%   { transform: translate(0, 0) rotate(-32deg); opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translate(-320px, 220px) rotate(-32deg); opacity: 0; }
}

/* ============================================================
   CORAÇÕEZINHAS FLUTUANTES
   ============================================================ */
.hearts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.heart {
  position: absolute;
  bottom: -40px;
  font-size: 20px;
  opacity: 0.85;
  animation: floatUp linear infinite;
  filter: drop-shadow(0 0 6px rgba(185, 140, 255, 0.5));
  will-change: transform, opacity;
}
@keyframes floatUp {
  0%   { transform: translateY(0) rotate(0)    scale(0.8); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translateY(-50vh) rotate(15deg)  scale(1); }
  100% { transform: translateY(-110vh) rotate(-10deg) scale(0.9); opacity: 0; }
}

/* ============================================================
   BARRA DE PROGRESSO
   ============================================================ */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 14px) + 12px) 16px 10px;
  pointer-events: none;
}
.progress-dot {
  flex: 1;
  max-width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  position: relative;
}
.progress-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--purple-glow), var(--pink));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.progress-dot.done::after   { transform: scaleX(1); }
.progress-dot.current::after{ transform: scaleX(1); }
.progress-dot.current {
  background: rgba(255, 255, 255, 0.28);
}

/* ============================================================
   TELAS / CAPÍTULOS
   ============================================================ */
main#app {
  position: relative;
  z-index: 2;
}

.screen {
  display: none;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 16px) + 16px) 22px calc(env(safe-area-inset-bottom, 16px) + 20px);
}
.screen.active { display: flex; }

/* ---------- CAPA ---------- */
.cover {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.cover-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: fadeUp 1s ease both;
}
.cover-star {
  font-size: 46px;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(255, 215, 110, 0.85), 0 0 40px rgba(185, 140, 255, 0.5);
  animation: sparkle 2.6s ease-in-out infinite;
  margin-bottom: 10px;
}
.cover-title {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(42px, 12vw, 64px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 24px rgba(185, 140, 255, 0.6), 0 0 46px rgba(255, 143, 216, 0.4);
  margin-bottom: 14px;
}
.cover-sub {
  font-size: 15.5px;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 30ch;
  margin-bottom: 34px;
}
.cover-resume {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.resume-text {
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- BOTÕES ---------- */
.btn-primary, .btn-secondary, .btn-ghost, .btn-continue, .btn-next, .btn-restart {
  font-family: 'Poppins', sans-serif;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 50px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: #fff;
  font-size: 15.5px;
  font-weight: 500;
  padding: 15px 38px;
  border-radius: 999px;
  box-shadow: var(--shadow-glow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  padding: 12px 26px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: auto;
  padding: 6px 10px;
}

.btn-continue, .btn-next, .btn-restart {
  width: 100%;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 15px 20px;
  border-radius: 18px;
  box-shadow: var(--shadow-glow);
  transition: transform 0.2s ease, opacity 0.3s ease;
  animation: fadeUp 0.5s ease both;
}
.btn-continue:active, .btn-next:active, .btn-restart:active { transform: scale(0.98); }
.btn-next { background: linear-gradient(135deg, #6a3fd8, var(--purple-glow)); }
.btn-restart { background: linear-gradient(135deg, var(--gold), var(--pink)); color: #2a1652; font-weight: 600; }

/* ============================================================
   CONTEÚDO DO CAPÍTULO
   ============================================================ */
.chapter-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 18px;
}

.chapter-label {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--purple-glow);
  text-align: center;
  font-weight: 500;
}

.chapter-title {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(32px, 9vw, 44px);
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 6px;
  text-shadow: 0 0 20px rgba(185, 140, 255, 0.45);
}

.reveal-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.step {
  font-size: 16px;
  color: var(--white);
  font-weight: 300;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 18px 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(16px);
  display: none;
}
.step.visible {
  display: block;
  animation: fadeUp 0.6s ease forwards;
}

/* palavra por palavra */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  animation: wordIn 0.45s ease forwards;
}

@keyframes wordIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sparkle {
  0%, 100% { transform: scale(1)   rotate(0);   opacity: 1; }
  50%      { transform: scale(1.25) rotate(180deg); opacity: 0.65; }
}

.chapter-actions {
  padding-top: 12px;
}

/* ============================================================
   CAPÍTULO DA ESTRELA
   ============================================================ */
.star-map-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  background: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  backdrop-filter: none !important;
}

.map-caption {
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
}
.map-caption span {
  color: var(--purple-glow);
  opacity: 0.9;
}

.star-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(185, 140, 255, 0.35);
  box-shadow: var(--shadow-glow);
  background: radial-gradient(circle at 50% 40%, #241143, #0d0620 78%);
}

#starMap {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  touch-action: manipulation;
}

.star-hint {
  position: absolute;
  left: 62%;
  top: 38%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.star-hint-ring {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  animation: pingRing 1.8s ease-out infinite;
}
@keyframes pingRing {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.1); opacity: 0; }
}
.star-hint-text {
  font-size: 11.5px;
  color: var(--gold);
  background: rgba(18, 8, 38, 0.75);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  transform: translateY(26px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.star-hint.tapped { display: none; }

.star-certificate {
  width: 100%;
  position: relative;
  background: linear-gradient(160deg, rgba(138, 79, 255, 0.22), rgba(255, 143, 216, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 22px;
  padding: 24px 20px;
  text-align: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.star-certificate[hidden] { display: none; }
.star-certificate.visible {
  animation: certReveal 0.7s cubic-bezier(0.22, 1.3, 0.36, 1) both;
}
@keyframes certReveal {
  from { opacity: 0; transform: scale(0.82) rotateX(12deg); }
  to   { opacity: 1; transform: scale(1) rotateX(0); }
}
.cert-glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(255, 215, 110, 0.35), transparent 60%);
  animation: certGlow 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes certGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.15); }
}
.cert-icon {
  position: relative;
  display: inline-block;
  font-size: 30px;
  filter: drop-shadow(0 0 12px rgba(255, 215, 110, 0.8));
  margin-bottom: 6px;
}
.cert-name {
  position: relative;
  font-family: 'Dancing Script', cursive;
  font-size: 30px;
  color: #fff;
  margin-bottom: 14px;
  text-shadow: 0 0 16px rgba(185, 140, 255, 0.6);
}
.cert-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cert-list > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cert-list dt {
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--purple-glow);
}
.cert-list dd {
  font-size: 13.5px;
  color: var(--white);
  font-weight: 400;
}

/* ============================================================
   CAPÍTULO FINAL
   ============================================================ */
.final-block {
  text-align: center;
  background: linear-gradient(160deg, rgba(255, 215, 110, 0.14), rgba(255, 143, 216, 0.1)) !important;
  border-color: rgba(255, 215, 110, 0.35) !important;
}
.final-sushi {
  font-size: 16.5px;
  margin-bottom: 14px;
}
.final-sushi::before { content: "🍣  "; }
.final-effort {
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ============================================================
   RESPONSIVO / IPHONE
   ============================================================ */
@media (max-width: 380px) {
  .screen { padding-left: 18px; padding-right: 18px; }
  .step { font-size: 15px; padding: 16px; }
  .cover-title { font-size: 40px; }
}

@media (min-width: 640px) {
  .screen { padding-top: 60px; }
}

@supports (height: 100dvh) {
  .screen { min-height: 100dvh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}