/* ═══════════════════════════════════════
   NIGHTY NIGHT — Sleepy Time + Brush Teeth  v1
   ═══════════════════════════════════════ */

#nightyScreen{
  display:none;position:fixed;inset:0;z-index:10;
  background:transparent;   /* shares the home-screen backdrop (HUB_BG_SCREENS) */
  align-items:center;justify-content:center;
  overflow-y:auto;   /* 3 stacked picker cards can exceed a short viewport */
}

/* ── Sleepy Time ── */
#sleepyScreen{
  display:none;position:fixed;inset:0;z-index:10;
  background:#0c0a24;
  align-items:center;justify-content:center;
  touch-action:none;
}
/* Fills the screen edge to edge. The art's native ratio (2:3) is far
   squarer than a phone viewport, so a contained/letterboxed box left visible
   navy bars top and bottom no matter how large it was sized — this crops the
   sides instead via background-size:cover so the house always fills the full
   height and width of the screen, same look every mobile game with a portrait
   scene uses. Room percentages in js/nighty.js are relative to this box, so
   they still land correctly; only the outermost side walls lose a slice. */
#slpHouse{
  position:absolute;inset:0;
  background:url('../Images/GameAssets/Nighty/bg_house_night.webp') center/cover no-repeat;
}
#slpRooms{position:absolute;inset:0;}
#slpProgress{
  position:absolute;top:max(16px,env(safe-area-inset-top) + 10px);left:50%;
  transform:translateX(-50%);z-index:15;
  display:flex;gap:8px;pointer-events:none;
}
.slp-progress-dot{
  width:12px;height:12px;border-radius:50%;
  background:rgba(255,255,255,.25);border:1.5px solid rgba(255,255,255,.4);
  transition:background .4s,box-shadow .4s;
}
.slp-progress-dot.lit{
  background:#ffe28a;border-color:#ffe28a;
  box-shadow:0 0 8px rgba(255,226,138,.8);
}
#slpHint{
  position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:15;
  background:rgba(255,255,255,.14);color:#fff;
  font-family:'Baloo 2',cursive;font-weight:700;font-size:.9rem;
  padding:8px 16px;border-radius:20px;
  opacity:0;transition:opacity .6s ease;pointer-events:none;
  white-space:nowrap;
}
.slp-room-spark{
  position:fixed;transform:translate(-50%,-50%);z-index:60;
  font-size:1.4rem;pointer-events:none;
  animation:teethSparklePop .7s ease-out forwards;
}
.slp-room{
  /* No flex centring: the character and bulb are placed on the painted
     furniture/lamp via per-room percentages set in js/nighty.js. */
  position:absolute;border-radius:10px;overflow:hidden;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.slp-dim{
  position:absolute;inset:0;background:rgba(10,10,40,0);
  transition:background 1s ease;border-radius:10px;pointer-events:none;
}
.slp-room.room-dark .slp-dim{background:rgba(10,10,40,.72);}
.slp-char{position:absolute;transform:translate(-50%,-50%);width:clamp(34px,9vw,58px);height:auto;pointer-events:none;z-index:3;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));animation:slpBreathe 3.2s ease-in-out infinite;}
/* Gentle breathing so the animals feel alive rather than pasted on (bug #15). */
@keyframes slpBreathe{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.045);}}
@media(prefers-reduced-motion:reduce){.slp-char{animation:none;}}
.slp-room.room-dark .slp-char{
  animation:slpSleepBob 3s ease-in-out infinite;
  /* The dim overlay sits behind the character (it has no z-index, the
     character has z-index:3), so darkening the room left the animal fully
     bright — a lit room's worth of detail floating in a dark box. Dim the
     character directly too, transitioning at the same 1s pace as .slp-dim. */
  filter:brightness(.42) saturate(.75);
  transition:filter 1s ease;
}
@keyframes slpSleepBob{0%,100%{transform:translate(-50%,-50%) translateY(0);}50%{transform:translate(-50%,-50%) translateY(-4px);}}
.slp-bulb{
  /* Purely a visual cue now — the whole room is the tap target. Sits on the
     lamp painted in that room (left/top set from JS). */
  position:absolute;transform:translate(-50%,-50%);
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.15);border:none;border-radius:50%;
  font-size:1.3rem;pointer-events:none;
  z-index:5;
}
/* Idle nudge: after a pause, still-lit rooms pulse their bulb to invite a tap. */
.slp-room.slp-nudge .slp-bulb{
  background:rgba(255,226,138,.35);
  animation:slpNudge 1.3s ease-in-out infinite;
}
@keyframes slpNudge{
  0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 0 rgba(255,226,138,0);}
  50%{transform:translate(-50%,-50%) scale(1.22);box-shadow:0 0 18px 5px rgba(255,226,138,.75);}
}
#slpFinale{
  display:none;position:absolute;inset:0;z-index:20;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(5,5,20,.55);
}
.slp-moon{font-size:5rem;animation:slpMoonRise 2s ease-out;}
@keyframes slpMoonRise{from{transform:translateY(60px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.slp-goodnight{
  font-family:'Baloo 2',cursive;font-size:1.6rem;font-weight:800;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
#slpFinale.slp-glow .slp-moon{filter:drop-shadow(0 0 24px rgba(255,255,200,.8));}

/* ── Brush Teeth ── */
/* The face art is a fixed 1:1 square, so on a phone's much taller viewport
   it can only ever fill ~90% of the WIDTH (there's a hard ceiling around
   340-380px before it'd need to overflow the screen) — no amount of sizing
   alone closes the vertical dead space above/below it (PLAYTEST_FINDINGS
   §1.6). Rather than a plain gradient sitting empty, drift a few soft
   bubbles through that space so it reads as an intentional underwater/bath
   feel instead of unused margin — cheap in CSS, no new art needed.
   Redesigning the face art itself as a full-bleed portrait scene (like
   Sleepy Time's house) would be the more thorough fix, but needs art
   generation this session doesn't have access to. */
#teethScreen{
  display:none;position:fixed;inset:0;z-index:10;
  background:linear-gradient(160deg,#cde7f5 0%,#a9d4ec 100%);
  align-items:center;justify-content:center;
  touch-action:none;overflow:hidden;
}
#teethScreen::before,#teethScreen::after{
  content:'';position:absolute;left:0;right:0;height:46%;pointer-events:none;z-index:0;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle at 18% 30%,rgba(255,255,255,.55) 0%,rgba(255,255,255,.55) 40%,transparent 42%),
    radial-gradient(circle at 78% 55%,rgba(255,255,255,.4) 0%,rgba(255,255,255,.4) 30%,transparent 32%),
    radial-gradient(circle at 52% 15%,rgba(255,255,255,.35) 0%,rgba(255,255,255,.35) 22%,transparent 24%),
    radial-gradient(circle at 85% 12%,rgba(255,255,255,.3) 0%,rgba(255,255,255,.3) 14%,transparent 16%);
  background-size:100% 100%;
}
#teethScreen::before{top:0;animation:teethBubbleDrift 9s ease-in-out infinite;}
#teethScreen::after{bottom:0;animation:teethBubbleDrift 11s ease-in-out infinite reverse;}
@keyframes teethBubbleDrift{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
#teethHint{
  position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:15;
  background:rgba(255,255,255,.6);color:#00695c;
  font-family:'Baloo 2',cursive;font-weight:700;font-size:.85rem;
  padding:7px 14px;border-radius:18px;
  opacity:0;transition:opacity .6s ease;pointer-events:none;
  white-space:nowrap;
}
#teethMouthWrap{
  position:relative;width:min(88vw,380px);aspect-ratio:1/1;z-index:1;
}
#teethMouthImg{width:100%;height:100%;object-fit:contain;}
#teethSpots{position:absolute;inset:0;}
.tooth-inst{
  position:absolute;width:9.5%;height:auto;
  transform:translate(-50%,-50%);
  transition:filter .5s ease;
  pointer-events:none;
  /* "Dirty" — the shared clean-tooth sprite desaturated and darkened toward
     brown/yellow via CSS, rather than shipping a second dirty-tooth image. */
  filter:sepia(1) saturate(2.2) hue-rotate(-10deg) brightness(.62) contrast(1.05) drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.tooth-inst.spot-clean{filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));}
/* Lower row flipped so its flat (gum) edge sits against the lower gumline
   and the rounded biting edge points up toward the upper teeth — see the
   comment in js/nighty.js's _teethReset(). */
.tooth-inst.tooth-lower{transform:translate(-50%,-50%) rotate(180deg);}
#teethSparkleLayer{position:absolute;inset:0;pointer-events:none;}
.teeth-sparkle{
  position:absolute;transform:translate(-50%,-50%);
  font-size:1.6rem;animation:teethSparklePop .7s ease-out forwards;
}
@keyframes teethSparklePop{0%{transform:translate(-50%,-50%) scale(.4);opacity:1;}100%{transform:translate(-50%,-50%) scale(1.4);opacity:0;}}
#teethTube{
  position:absolute;left:8%;top:8%;width:14%;min-width:56px;
  touch-action:none;cursor:grab;z-index:15;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));
}
#teethBrush{
  position:absolute;left:8%;top:78%;width:22%;min-width:90px;
  touch-action:none;cursor:grab;z-index:16;
}
#teethBrush img{width:100%;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));}
#teethPaste{
  display:none;position:absolute;top:2%;left:58%;width:30%;height:14px;
  background:linear-gradient(90deg,#fff,#e0f7fa);
  border-radius:8px;
}
#teethDone{
  display:none;position:absolute;inset:0;z-index:25;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:rgba(255,255,255,.5);
}
.teeth-done-emoji{font-size:4rem;}
.teeth-done-text{
  font-family:'Baloo 2',cursive;font-size:1.5rem;font-weight:800;color:#00695c;
}

/* ── Counting Sheep ──
   A sleeping child dreams: sheep jump over them, one after another, each
   announced with a spoken number and a numeral badge as it passes. Purely a
   watch-and-listen bedtime visual — deliberately NOT a tap game (Jason's
   call): nothing to tap, no prize at the end, it just loops. */
#sheepScreen{
  display:none;position:fixed;inset:0;z-index:10;
  align-items:center;justify-content:center;
  touch-action:none;overflow:hidden;
}
#sheepMeadow{
  position:absolute;inset:0;
  background:linear-gradient(180deg,#0a0f2c 0%,#182860 42%,#20355e 54%,#1c3a2c 60%,#0d2216 100%);
}
/* Starfield — fixed positions so it's cheap (one paint, no per-star element). */
#sheepMeadow::before{
  content:'';position:absolute;inset:0;bottom:42%;pointer-events:none;
  background-image:
    radial-gradient(2.5px 2.5px at 8% 20%,rgba(255,255,255,.9),transparent 60%),
    radial-gradient(2px 2px at 18% 45%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(2.5px 2.5px at 30% 15%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(2px 2px at 42% 38%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(3px 3px at 60% 22%,rgba(255,255,255,.9),transparent 60%),
    radial-gradient(2px 2px at 72% 12%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(2.5px 2.5px at 85% 30%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(2px 2px at 93% 50%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(2px 2px at 50% 8%,rgba(255,255,255,.7),transparent 60%);
  animation:sheepTwinkle 3.6s ease-in-out infinite;
}
@keyframes sheepTwinkle{0%,100%{opacity:1;}50%{opacity:.55;}}
@media(prefers-reduced-motion:reduce){#sheepMeadow::before{animation:none;}}
#sheepMeadow::after{
  content:'🌙';position:absolute;top:6%;right:9%;font-size:clamp(2.4rem,9vw,3.6rem);
  filter:drop-shadow(0 0 18px rgba(255,241,180,.55));pointer-events:none;
}
#sheepHint{
  position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:15;
  background:rgba(255,255,255,.14);color:#fff;
  font-family:'Baloo 2',cursive;font-weight:700;font-size:.9rem;
  padding:8px 16px;border-radius:20px;
  opacity:0;transition:opacity .6s ease;pointer-events:none;
  white-space:nowrap;
}
#sheepHint.show{opacity:1;}
/* Sleeping child, lower in the scene — what the sheep are jumping "for". */
#sheepBed{
  position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);
  width:min(70vw,340px);height:auto;z-index:2;pointer-events:none;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));
  transition:opacity .5s ease;
}
/* "Zzz" — shown once the 10th sheep lands and the child is fully asleep,
   hidden again when the next child comes on. Positioned near the pillow —
   all three bed variants put the child's head on the left side of the
   image, which sits roughly here relative to the centered bed. */
#sheepZzz{
  display:none;position:absolute;left:37%;top:48%;z-index:5;pointer-events:none;
}
#sheepZzz.show{display:block;}
.sheep-zzz-letter{
  position:absolute;left:0;top:0;
  font-family:'Baloo 2',cursive;font-weight:800;color:rgba(255,255,255,.85);
  text-shadow:0 2px 6px rgba(0,0,0,.4);
  opacity:0;
  animation:sheepZzzFloat 2.6s ease-in-out infinite;
}
.sheep-zzz-letter:nth-child(1){font-size:1.05rem;animation-delay:0s;}
.sheep-zzz-letter:nth-child(2){font-size:1.4rem;left:15px;top:-12px;animation-delay:.7s;}
.sheep-zzz-letter:nth-child(3){font-size:1.8rem;left:32px;top:-28px;animation-delay:1.4s;}
@keyframes sheepZzzFloat{
  0%{opacity:0;transform:translateY(0) scale(.6);}
  15%{opacity:1;}
  80%{opacity:1;}
  100%{opacity:0;transform:translateY(-38px) scale(1.15);}
}
@media(prefers-reduced-motion:reduce){.sheep-zzz-letter{animation:none;opacity:.8;}}
#sheepFlock{position:absolute;inset:0;z-index:4;}
/* Each sheep makes one continuous pass above the sleeping child — enter one
   side, arc up mid-flight (transform, layered on the left transition below
   so they combine rather than conflict), exit/fade the other side. Nothing
   to tap; the whole thing runs on its own timer.
   scaleX(-1): the sheep_jump art faces/leads with its head to the LEFT, but
   sheep travel left-to-right here — without the flip they visually appeared
   to be running backwards. Baked into both the base transform and every
   step of the hop-arc keyframes below, since a CSS animation's `transform`
   property replaces the base value rather than combining with it.
   .sheep-inst is a <div> wrapper, NOT an <img> — the numeral badge is
   appended as a child of it, and <img> is a void/replaced element that
   silently refuses to lay out or paint any child content (it just
   collapses to 0x0 and vanishes, even though it stays in the DOM and
   reports correct computed styles — a real bug found 2026-08-15: the badge
   had been invisible since it was first added, despite every DOM-level
   check appearing to confirm it was there). The actual sheep art now lives
   on an inner <img class="sheep-inst-img">. */
.sheep-inst{
  position:absolute;width:clamp(84px,20vw,130px);height:auto;
  transform:translate(-50%,-50%) scaleX(-1);
  pointer-events:none;
  /* Duration must match SHEEP_PASS_MS in js/sheep.js. */
  transition:left 2.8s linear,opacity .4s ease;
}
.sheep-inst-img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
}
.sheep-inst.hopping{
  animation:sheepHopArc 2.8s ease-in-out;
}
@keyframes sheepHopArc{
  0%,100%{transform:translate(-50%,-50%) scaleX(-1) translateY(0);}
  50%{transform:translate(-50%,-50%) scaleX(-1) translateY(-78px);}
}
@media(prefers-reduced-motion:reduce){.sheep-inst.hopping{animation:none;}}
/* Numeral badge — worn on the sheep for its whole pass (not just a flash),
   appearing right as it enters and its number is spoken. Paired with a
   real, visible countable sheep (never shown alone) — same "digit +
   countable thing together" idea as Match's numbers category. */
/* left (not right) + scaleX(-1): the parent .sheep-inst is itself mirrored
   (see above), which flips both this badge's position AND its own content.
   left:-8px lands back on the visual right after the parent's flip; the
   scaleX(-1) here cancels the parent's flip for the digit glyph itself so
   "3" doesn't render as a mirrored "Ɛ".
   transform is set here on the BASE rule, not just inside the sheepNumPop
   keyframes below — a CSS animation's transform reverts to the element's
   base value once it finishes (no animation-fill-mode:forwards was set),
   so without this the digit was correctly un-mirrored only for the .4s
   pop-in, then flipped backwards again for the rest of the sheep's pass. */
.sheep-num-badge{
  position:absolute;top:-8px;left:-8px;z-index:4;
  min-width:34px;height:34px;padding:0 6px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',cursive;font-weight:800;font-size:1.2rem;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  box-shadow:0 2px 6px rgba(0,0,0,.4),0 0 0 3px rgba(255,255,255,.85);
  transform:scaleX(-1);
  animation:sheepNumPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sheepNumPop{0%{transform:scaleX(-1) scale(0);}70%{transform:scaleX(-1) scale(1.25);}100%{transform:scaleX(-1) scale(1);}}
@media(prefers-reduced-motion:reduce){.sheep-num-badge{animation:none;}}
.sheep-reveal-spark{
  position:fixed;transform:translate(-50%,-50%);z-index:60;
  font-size:1.3rem;pointer-events:none;
  animation:teethSparklePop .7s ease-out forwards;
}
/* Room dims as the count climbs — bright at the start of a round, fully
   dark ("asleep") by the 10th sheep, then resets bright when the next
   child comes on. Sits above the bed/starfield (z-index 2) so the whole
   backdrop darkens, but below the flock (z-index 4) so the sheep themselves
   stay clearly visible throughout — it's the room falling asleep, not the
   dream. Set once per sheep via _shpUpdateDim() in js/sheep.js. */
#sheepDim{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:#05050f;opacity:0;
  transition:opacity 1.3s ease;
}