/* Little Lambs — warm paper, felt shapes, and controls a two-year-old can hit.
 *
 * Two rules run through all of this:
 *   1. Anything a child must press is at least 96px and never moves between
 *      pages. Small children aim with their whole arm.
 *   2. Anything that could end the session is deliberately awkward. */

:root {
  --paper:      #f4e8d2;
  --paper-deep: #e7d6b6;
  --ink:        #4a3a28;
  --ink-soft:   #6f5b41;
  --wool:       #c4634a;
  --wool-deep:  #a94f39;
  --leaf:       #7ba85f;
  --gold:       #e0b45c;
  --shadow:     rgba(74, 58, 40, .22);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Georgia", "Iowan Old Style", "Palatino", serif;
  -webkit-user-select: none; user-select: none;
  overscroll-behavior: none; touch-action: manipulation;
}

/* The paper the whole book is printed on. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.5), transparent 46%),
    radial-gradient(circle at 78% 82%, rgba(120,90,50,.10), transparent 52%);
}

.screen { position: fixed; inset: 0; display: none; z-index: 1; }
.screen.on { display: block; }

/* ------------------------------------------------------------------- gate */

#gate {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 20px;
  background: linear-gradient(160deg, #f7edd9, #e9d7b4);
  transition: opacity .5s ease, visibility .5s;
}
#gate.gone { opacity: 0; visibility: hidden; pointer-events: none; }

.gate-card {
  max-width: 560px; width: 100%; text-align: center;
  background: #fdf6e6; border-radius: 28px; padding: 34px 30px 26px;
  box-shadow: 0 18px 44px var(--shadow);
  border: 3px solid #e2d0ad;
}
.gate-lamb { font-size: 76px; line-height: 1; }
.gate-card h1 { margin: 6px 0 2px; font-size: clamp(38px, 8vw, 58px); letter-spacing: .01em; }
.gate-card .sub { margin: 0 0 22px; color: var(--ink-soft); font-size: 19px; font-style: italic; }

.big-btn {
  font: inherit; font-size: 27px; padding: 18px 44px; border: 0; cursor: pointer;
  border-radius: 999px; color: #fff8ea; background: var(--wool);
  box-shadow: 0 8px 0 var(--wool-deep), 0 14px 26px var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.big-btn:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--wool-deep); }

.note { margin: 24px 6px 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.note b { color: var(--ink); }
.check { display: block; margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); cursor: pointer; }
.check span { opacity: .75; }

/* ------------------------------------------------------------------- home */

#home { background: linear-gradient(170deg, #f7edd9, #ecdcbb); overflow-y: auto; }
.home-title {
  margin: 4vh 0 2vh; text-align: center; font-size: clamp(28px, 5vw, 44px);
  color: var(--ink-soft); font-weight: normal; font-style: italic;
}
#cards {
  display: flex; gap: clamp(14px, 2.4vw, 30px); justify-content: center;
  align-items: stretch; flex-wrap: wrap; padding: 0 clamp(14px, 3vw, 40px) 4vh;
}
.card {
  flex: 1 1 280px; max-width: 400px; min-width: 240px;
  border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--ink);
  background: #fdf6e6; border-radius: 26px; overflow: hidden;
  box-shadow: 0 12px 28px var(--shadow); border: 3px solid #e2d0ad;
  transition: transform .16s ease, box-shadow .16s ease;
}
.card:active { transform: scale(.97); }
.card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px var(--shadow); }
.card svg { display: block; width: 100%; aspect-ratio: 1000 / 620; }
.card-label { padding: 14px 16px 18px; text-align: center; }
.card-label b { display: block; font-size: clamp(20px, 2.4vw, 27px); font-weight: normal; }
.card-label i { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-soft); }

/* ------------------------------------------------------------------- book */

#book { background: var(--paper-deep); }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Scale and wobble about the piece's own middle, not the SVG's origin. */
#scene .findable { cursor: pointer; transform-box: fill-box; transform-origin: 50% 50%; }
#scene .found { animation: found-pop .7s ease both; }
@keyframes found-pop {
  0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1.08); }
}
#scene .wobble { animation: wobble .45s ease; }
@keyframes wobble {
  0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
.breathe { animation: breathe 5s ease-in-out infinite; transform-origin: 500px 330px; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }

/* The page turn: a piece of felt sliding onto the board. */
#scene.turn-in  { animation: turn-in .42s ease both; }
#scene.turn-back { animation: turn-back .42s ease both; }
@keyframes turn-in   { from { opacity: 0; transform: translateX(5%) scale(1.02); } }
@keyframes turn-back { from { opacity: 0; transform: translateX(-5%) scale(1.02); } }

/* Caption: for the grown-up reading along. The child never needs it. */
#caption {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(10px, 2vh, 20px); width: min(70%, 900px);
  background: rgba(253, 246, 230, .93); border-radius: 18px;
  padding: 11px clamp(16px, 2.4vw, 26px);
  box-shadow: 0 8px 22px var(--shadow); border: 2px solid #e2d0ad;
  pointer-events: none; transition: opacity .3s ease;
}
#caption.hide { opacity: 0; }
#caption-text {
  margin: 0; text-align: center; line-height: 1.36;
  font-size: clamp(16px, 1.95vw, 24px);
}
#caption.jesus #caption-text { font-style: italic; color: #6b4f2c; }
#caption.jesus::before {
  content: ""; position: absolute; inset: -2px; border-radius: 20px;
  border: 3px solid var(--gold); pointer-events: none;
}

/* Find-it prompt: sits at the top so it never covers the picture's floor,
   where small objects like to hide. */
#prompt {
  position: absolute; top: clamp(12px, 2.5vh, 26px); left: 50%;
  transform: translateX(-50%) translateY(-140%);
  background: var(--leaf); color: #fbfff5;
  padding: 14px clamp(20px, 3vw, 34px); border-radius: 999px;
  box-shadow: 0 8px 22px var(--shadow);
  transition: transform .4s cubic-bezier(.2,1.3,.4,1), opacity .25s ease;
  pointer-events: none; max-width: 84%; opacity: 0;
}
#prompt.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#prompt-text { margin: 0; font-size: clamp(19px, 2.4vw, 28px); text-align: center; }

/* --------------------------------------------------------------- controls */

.nav, .round {
  position: absolute; border: 0; cursor: pointer; color: #fff8ea;
  background: var(--wool); box-shadow: 0 7px 0 var(--wool-deep), 0 12px 22px var(--shadow);
  display: grid; place-items: center; padding: 0;
  transition: transform .12s ease, box-shadow .12s ease, opacity .25s ease;
}
.nav:active, .round:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--wool-deep); }
.nav { width: clamp(96px, 12vw, 132px); height: clamp(96px, 12vw, 132px); border-radius: 50%; }
.nav svg { width: 54%; height: 54%; }
#next { right: clamp(16px, 3vw, 40px); top: 50%; margin-top: -6vh; }
#back {
  left: clamp(16px, 3vw, 40px); top: 50%; margin-top: -6vh;
  background: #c3ab84; box-shadow: 0 7px 0 #a48f6c, 0 12px 22px var(--shadow);
  transform: scale(.78); opacity: .85;
}
#back:active { transform: scale(.78) translateY(5px); }

.round {
  width: clamp(66px, 7vw, 84px); height: clamp(66px, 7vw, 84px); border-radius: 50%;
  font-size: clamp(30px, 3.4vw, 40px); line-height: 1;
  background: var(--gold); box-shadow: 0 6px 0 #bf9440, 0 10px 20px var(--shadow);
}
.round:active { box-shadow: 0 2px 0 #bf9440; }
.round svg { width: 52%; height: 52%; }
#again { left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vh, 34px); }
#home-btn { right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vh, 34px); background: #fdf6e6; }

.nav.off, .round.off { opacity: 0; pointer-events: none; }

/* How far through the story we are: a row of little wool dots. */
#progress {
  position: absolute; top: clamp(10px, 2vh, 20px); left: 50%;
  transform: translateX(-50%); display: flex; gap: 7px; pointer-events: none;
}
#progress i {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(74, 58, 40, .22); transition: background .3s, transform .3s;
}
#progress i.done { background: rgba(74, 58, 40, .42); }
#progress i.now { background: var(--wool); transform: scale(1.5); }

/* -------------------------------------------------------------- sparkles */

#sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.spark {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: var(--gold);
  animation: spark 1s ease-out forwards;
}
@keyframes spark {
  from { transform: scale(.3); opacity: 1; }
  to   { transform: scale(2.4) translateY(-40px); opacity: 0; }
}

/* ----------------------------------------------------------------- escape
   Invisible, corner-anchored, and slow on purpose. A toddler resting a palm
   here for a moment must not end the session; a grown-up who knows about it
   gets out in three seconds without a puzzle to solve. */

#escape {
  position: fixed; top: 0; left: 0; width: 96px; height: 96px;
  z-index: 60; cursor: pointer;
}
#escape-ring {
  position: absolute; inset: 14px; border-radius: 50%;
  border: 5px solid var(--wool); opacity: 0;
  transform: scale(.5); transition: opacity .2s ease;
}
#escape.holding #escape-ring { opacity: .9; animation: hold 3s linear forwards; }
@keyframes hold {
  from { transform: scale(.4); } to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Phones held upright. The picture is fitted whole into the top of the page
   (see fitScene) and everything else stacks below it, so nothing lands on top
   of anything else: arrows, then the caption, then the two round buttons. */
@media (orientation: portrait) and (max-width: 820px) {
  #book { background: linear-gradient(170deg, #f2e5cb, #e7d6b6); }
  /* A picture band a little taller than it is wide: full height of the board,
     trimmed at the sides. Filling a phone-shaped hole would crop away all but
     the middle fifth of the scene. */
  #scene { height: calc(100vw * 0.9); bottom: auto; }
  #next, #back { top: auto; bottom: 290px; margin-top: 0; }
  #next { right: 14px; } #back { left: 14px; }
  #caption { bottom: 118px; width: 94%; }
  #caption-text { font-size: 19px; }
  #again, #home-btn { bottom: 20px; }
  #prompt { top: 10px; }
}