/* ═══════════════════════════════════════
   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;
}

/* ── 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 ── */
#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;
}
#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(78vw,340px);aspect-ratio:1/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));}
#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;
}