/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

:root {
  --saffron: #ff9933;
  --india-green: #138808;
  --spicy-red: #d62828;
  --warm-cream: #fff8e7;
  --deep-brown: #3e2723;
  --sun: #ffc72c;
  --pink: #ff5c8a;
}

body {
  font-family: 'Quicksand', system-ui, sans-serif;
  background: #111;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

#app, #stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#stage:focus { outline: none; }

#slides { position: absolute; inset: 0; }

/* ---------- Slide base ---------- */
.slide {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #000;
  animation: fadein 0.4s ease;
}
.slide.active { display: flex; }

@keyframes fadein {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- Photo slide ---------- */
.slide.photo {
  background: #0a0a0a;
}
.slide.photo .frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.slide.photo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 4px rgba(255,255,255,.06);
  background: #000;
}
.slide.photo .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 24px 28px;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 2.6vw, 32px);
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.85) 35%, rgba(0,0,0,0));
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
  line-height: 1.25;
}

/* ---------- Title / chapter / end slides ---------- */
.slide.title, .slide.chapter, .slide.end {
  background: linear-gradient(135deg, var(--saffron), var(--spicy-red) 60%, var(--pink));
  text-align: center;
  padding: 6vw;
}
.slide.chapter {
  background: linear-gradient(135deg, var(--india-green), #0a5c05);
}
.slide.end {
  background: linear-gradient(135deg, var(--sun), var(--saffron) 60%, var(--spicy-red));
}

.slide .big-emoji {
  font-size: clamp(80px, 18vw, 220px);
  line-height: 1;
  margin-bottom: 18px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.3));
  animation: bounce 1.6s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-14px) rotate(3deg); }
}

.slide .title-text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 8vw, 96px);
  line-height: 1.05;
  text-shadow: 0 4px 0 rgba(0,0,0,.18), 0 8px 30px rgba(0,0,0,.25);
  margin-bottom: 14px;
}

.slide .subtitle-text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 3.2vw, 38px);
  opacity: .95;
  text-shadow: 0 2px 0 rgba(0,0,0,.15);
}

.slide.title .byline {
  margin-top: 28px;
  display: inline-block;
  background: rgba(255,255,255,.95);
  color: var(--deep-brown);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 2.6vw, 26px);
  padding: 10px 24px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* Chili confetti for title/end */
.slide.title::before, .slide.title::after,
.slide.end::before,   .slide.end::after {
  content: "🌶️🍛🥭🌿🧄🧅🍅🫓🥥🍯";
  position: absolute;
  font-size: clamp(24px, 5vw, 44px);
  letter-spacing: 8px;
  opacity: .55;
  white-space: nowrap;
}
.slide.title::before, .slide.end::before { top: 4vh; left: 50%; transform: translateX(-50%); }
.slide.title::after,  .slide.end::after  { bottom: 4vh; left: 50%; transform: translateX(-50%); }

/* ---------- Nav buttons ---------- */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: background .15s, transform .15s;
  z-index: 10;
}
.nav:hover { background: rgba(255,255,255,.25); transform: translateY(-50%) scale(1.06); }
.nav:active { transform: translateY(-50%) scale(.95); }
.nav:disabled { opacity: 0.25; cursor: default; }
#prev { left: 16px; }
#next { right: 16px; }

/* ---------- Top bar ---------- */
#topbar {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
  pointer-events: none;
}
.pill {
  background: rgba(0,0,0,.55);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 1.6vw, 16px);
  padding: 7px 16px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* On title/chapter slides, hide chapter pill (it's redundant) */
.slide.title ~ #topbar #chapter-pill,
.slide.chapter ~ #topbar #chapter-pill,
.slide.end ~ #topbar #chapter-pill { display: none; }

/* ---------- Progress bar ---------- */
#progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255,255,255,.1);
  z-index: 10;
}
#bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--saffron), var(--sun), var(--india-green));
  transition: width .25s ease;
}

/* ---------- Corner buttons ---------- */
#fs, #help, #music, #subs {
  position: absolute;
  bottom: 14px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .15s;
}
#fs { right: 14px; }
#help { right: 60px; }
#music { right: 106px; }
#subs { right: 152px; }
#subs.muted { opacity: 0.45; }
#music.muted { opacity: 0.45; }
#music.pulse { animation: musicPulse 1.4s ease-in-out infinite; }
@keyframes musicPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,153,51,.5); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(255,153,51,0); }
}
#fs:hover, #help:hover, #music:hover, #subs:hover { background: rgba(255,255,255,.25); }

/* Subtitle / caption toggle */
body.no-subs .slide.photo .caption { display: none; }

#bgm { display: none; }

/* ---------- Hint overlay ---------- */
#hint {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}
#hint.show { display: flex; }
.hint-content {
  background: var(--warm-cream);
  color: var(--deep-brown);
  border-radius: 20px;
  padding: 28px 32px;
  max-width: 380px;
  font-size: 16px;
  line-height: 1.7;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.hint-content h2 {
  font-family: 'Fredoka', sans-serif;
  margin-bottom: 14px;
  color: var(--spicy-red);
}
.hint-content b {
  display: inline-block;
  min-width: 110px;
  font-family: 'Fredoka', sans-serif;
  color: var(--india-green);
}
.btn {
  background: var(--spicy-red);
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.2);
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.2); }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 600px) {
  .nav { width: 48px; height: 48px; font-size: 28px; }
  #prev { left: 8px; }
  #next { right: 8px; }
  .slide.photo .frame { padding: 2vh 2vw 16vh; }
  .slide.photo .caption { padding: 12px 16px 22px; }
  #fs { right: 10px; }
  #help { right: 56px; }
  #music { right: 102px; }
  #subs { right: 148px; }
}

/* Make sure chapter slides bury the pill background since they have their own */
.slide.chapter ~ #topbar .pill,
.slide.title ~ #topbar .pill,
.slide.end ~ #topbar .pill {
  background: rgba(0,0,0,.25);
}