/**
 * ebook-engine.css — Shared styles for interactive books
 * Covers: cover, header, hotspots, celebration, TOC, narration bar
 */

/* ── Reset & Base ── */
*{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#1B2A4A;--orange:#F47920;--cream:#FFFCF5;--blue:#83B6DD;--gold:#E9C46A;--pink:#F8B4D9;--text:#1B2A4A}
body{
  font-family:'Quicksand',sans-serif;
  background:var(--cream);
  color:var(--text);
  overflow:hidden;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none
}

/* ── App / Screen visibility ── */
#app,#cover,#intro-screen,#toc-screen,.header{display:none}
#app.active,#intro-screen.show,#toc-screen.show{display:block}
#cover{
  position:fixed;inset:0;
  background:linear-gradient(135deg,#1B2A4A 0%,#243359 100%);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  z-index:200
}
#cover.hidden{display:none!important}

/* ── Cover ── */
.cover-title{
  font-family:'Quicksand',sans-serif;
  font-weight:700;font-size:clamp(2rem,8vw,4rem);
  color:white;text-align:center;margin-bottom:.5rem
}
.cover-subtitle{font-size:clamp(1rem,4vw,1.5rem);color:var(--blue);margin-bottom:2rem}
.cover-start{
  display:inline-block;background:var(--orange);color:white;
  font-size:1.2rem;font-weight:700;padding:.8rem 2.5rem;
  border-radius:50px;cursor:pointer;border:none;transition:transform .1s
}
.cover-start:active{transform:scale(.95)}
.cover-note{color:rgba(255,255,255,.5);font-size:.85rem;margin-top:1.5rem}

/* ── Intro Screen ── */
#intro-screen{
  position:fixed;inset:0;background:var(--navy);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;z-index:190
}
#intro-screen .intro-text{
  color:white;font-size:clamp(1.2rem,5vw,1.8rem);
  text-align:center;max-width:600px;padding:0 2rem;line-height:1.5
}
.intro-name{color:var(--gold);font-weight:700}

/* ── Scene Wrapper ── */
#scene-wrapper{position:fixed;inset:0;overflow:hidden}
#scene-bg-img{
  position:absolute;width:100%;height:100%;
  object-fit:contain;background:#87CEEB;
  pointer-events:none;display:block
}

/* ── Hotspots ── */
.hotspot{
  position:absolute;cursor:pointer;
  border-radius:8px;transition:opacity .2s;opacity:0
}
.hotspot.found{
  opacity:1!important;
  background:rgba(255,220,100,.3);
  border:3px solid var(--gold)
}

/* ── Luna sparkle ── */
#luna-sparkle{position:fixed;pointer-events:none;z-index:50;display:none}
#luna-sparkle.show{display:block;animation:luna-sparkle .6s ease-out forwards}
@keyframes luna-sparkle{
  0%{transform:scale(0) rotate(0)}
  50%{transform:scale(1.2) rotate(180deg)}
  100%{transform:scale(1) rotate(360deg)}
}

/* ── Found Bar ── */
#found-bar{
  position:fixed;top:1rem;left:50%;transform:translateX(-50%);
  background:var(--navy);color:white;
  padding:.4rem 1.2rem;border-radius:20px;
  font-size:.85rem;z-index:60;display:none;white-space:nowrap
}
#found-bar.show{display:block}

/* ── Luna Hint ── */
#luna-hint{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);
  background:rgba(27,42,74,.85);color:white;
  padding:.5rem 1rem;border-radius:20px;
  font-size:.8rem;z-index:60;display:none;max-width:90%;text-align:center
}
#luna-hint.show{display:block}

/* ── Header ── */
.header{
  position:fixed;top:0;left:0;right:0;height:52px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;z-index:100;
  border-bottom:2px solid rgba(27,42,74,.08)
}
.lang-btns{display:flex;gap:.3rem}
.lang-btn{
  background:none;border:2px solid var(--blue);color:var(--navy);
  padding:.2rem .6rem;border-radius:20px;
  font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s
}
.lang-btn.active{background:var(--navy);color:white;border-color:var(--navy)}
.lang-btn:active{transform:scale(.93)}
.header-right{display:flex;gap:.5rem;align-items:center}
#toc-btn,#lang-toggle{
  background:none;border:none;color:var(--navy);
  font-size:1.2rem;cursor:pointer;padding:.3rem;border-radius:8px
}
#toc-btn:active,#lang-toggle:active{background:rgba(27,42,74,.08)}
#scene-counter{font-size:.8rem;color:var(--text-mid);font-weight:600}

/* ── Narration Bar ── */
#narr-bar{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
  border-top:2px solid rgba(27,42,74,.1);
  padding:1rem 1.5rem;z-index:100
}
.narr-text{
  font-size:clamp(.9rem,3.5vw,1.05rem);line-height:1.5;
  color:var(--text);text-align:center;min-height:3.5em
}
.word{transition:color .1s}
.word.active{color:var(--orange);font-weight:600}

/* ── Next / Home Buttons ── */
#next-btn{
  position:fixed;right:1.5rem;bottom:5rem;
  background:var(--orange);color:white;border:none;
  padding:.6rem 1.2rem;border-radius:25px;
  font-size:.9rem;font-weight:700;cursor:pointer;
  display:none;z-index:100;box-shadow:0 4px 16px rgba(244,121,32,.3)
}
#next-btn.show{display:block}
#home-btn{
  position:fixed;left:1rem;bottom:5rem;
  background:var(--navy);color:white;border:none;
  padding:.5rem 1rem;border-radius:20px;
  font-size:.8rem;cursor:pointer;display:none;z-index:100
}
#home-btn.show{display:block}

/* ── TOC Screen ── */
#toc-screen{
  position:fixed;inset:0;
  background:rgba(27,42,74,.97);z-index:180;overflow-y:auto
}
.toc-inner{max-width:500px;margin:0 auto;padding:2rem 1.5rem}
.toc-title{color:white;font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:1.5rem}
.toc-book-row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.toc-scene-btn{
  background:white;color:var(--navy);border:none;
  padding:.6rem 1rem;border-radius:12px;
  font-size:.85rem;font-weight:600;cursor:pointer;
  min-width:60px;text-align:center;transition:transform .1s
}
.toc-scene-btn:active{transform:scale(.93)}
.toc-scene-btn.locked{background:rgba(255,255,255,.3);color:rgba(255,255,255,.4);cursor:default}
.toc-scene-btn.current{background:var(--orange);color:white}
.close-toc{
  background:white;color:var(--navy);border:none;
  padding:.7rem 2rem;border-radius:30px;
  font-size:1rem;font-weight:700;cursor:pointer;
  display:block;margin:1.5rem auto 0;width:100%;max-width:300px
}

/* ── Celebration Overlay ── */
#celebration-overlay{
  position:fixed;inset:0;
  background:rgba(27,42,74,.92);z-index:300;
  display:none;flex-direction:column;
  align-items:center;justify-content:center
}
#celebration-overlay.show{display:flex}
.celeb-title{color:white;font-size:clamp(2rem,8vw,3.5rem);font-weight:700;text-align:center;margin-bottom:1rem}
.celeb-animal{font-size:clamp(4rem,15vw,6rem);margin:1rem 0}
.celeb-sub{color:var(--gold);font-size:clamp(1.2rem,4vw,1.6rem);text-align:center}
.celeb-next{
  display:inline-block;background:var(--orange);color:white;
  padding:.8rem 2rem;border-radius:50px;
  font-size:1.1rem;font-weight:700;cursor:pointer;
  margin-top:2rem;border:none
}
.celeb-next:active{transform:scale(.95)}

/* ── The End ── */
.the-end-title{color:white;font-size:clamp(2.5rem,10vw,4rem);font-weight:700;text-align:center;margin-bottom:.5rem}
.the-end-sub{color:var(--blue);font-size:1.3rem;text-align:center;max-width:400px;line-height:1.5}