/* =================================================================
   HAND-DRAWN PASS (loaded last): wobbly "boiling" outlines,
   handwriting fonts, taller bookcase + books, pop-up Capoo,
   and the lights-out easter egg.
   ================================================================= */
:root { --line: #3f3a39; --lw: 3px; }

/* Every drawn thing gets a slightly wobbly, imperfect line */
.window, .frames, .clock, .lamp, .monstera, .chime, .case-top, .case-body, .case-feet,
.decor, .book .spine, .rug, .zabuton, .floor-stuff, .switch, .sign p, .hint span,
.open-book, .pill, .sound-toggle, .bubble, .jar, .mini-plant {
  filter: url(#sketch);
}
/* The pulled-out book's line "boils" like an animated comic */
.book.out .spine, .book.picked .spine { animation: boilBook 0.54s steps(1, end) infinite; }
@keyframes boilBook {
  0% { filter: url(#boil1); }
  33% { filter: url(#boil2); }
  66% { filter: url(#boil3); }
}

/* Paper-texture wall + grainy wood floor */
.wall {
  background:
    radial-gradient(circle, rgba(120, 100, 80, 0.13) 1.3px, transparent 1.9px) 0 0 / 52px 52px,
    url("/paper.svg"),
    linear-gradient(#ebe1cf, #f1e9da 60%);
}
.floor {
  background:
    repeating-linear-gradient(90deg, transparent 0 158px, rgba(63, 58, 57, 0.85) 158px 160.5px),
    url("/grain.svg"),
    linear-gradient(#cf9f6b, #bf8d5b);
}

/* ---------- handwriting fonts ---------- */
body { font-family: "Mali", system-ui, sans-serif; }
.sign h1, .sign p, .hint, .foot, .bubble, .pill, .door-title, .door-hint, .spine .title,
.bk-page h2, .bk-page h3, .pg-num, .blank, .fav strong, .tag, .zzz span, .doodle p {
  font-family: "Gaegu", sans-serif;
}
.sign h1 { font-weight: 700; font-size: 76px; -webkit-text-stroke: 8px var(--line); paint-order: stroke fill; text-shadow: 0 4px 0 var(--line); }
.sign p { font-size: 25px; font-weight: 700; padding: 1px 18px; }
.spine .title { font-size: 22px; font-weight: 700; letter-spacing: 0.03em; }
.bubble { font-size: 22px; font-weight: 700; padding: 3px 14px; }
.hint { font-size: 23px; font-weight: 700; }
.foot { font-size: 18px; font-weight: 700; }
.pill { font-size: 22px; font-weight: 700; }
.pill.small { font-size: 20px; }
.door-title { font-size: clamp(2.8rem, 7vw, 3.6rem); font-weight: 700; }
.door-hint { font-size: 20px; font-weight: 700; }
.bk-page h2 { font-size: 54px; }
.bk-page h3 { font-size: 32px; }
.tag { font-size: 18px; font-weight: 700; }
.zzz span { font-weight: 700; }

/* ---------- taller bookcase + taller books ---------- */
.land .shelf-wrap { top: 30px; }
.port .shelf-wrap { top: 200px; }
.sign { margin-bottom: 64px; }
.bookcase { width: 500px; }
.shelf { height: 262px; padding-bottom: 18px; gap: 12px; }
.book { width: 54px; height: calc(var(--h) * 218px); }
.books { gap: 6px; }
.sticker { width: 34px; height: 34px; margin: 12px 0 10px; }
.sticker svg { width: 19px; height: 19px; }
.spine .band.low { bottom: 14px; }
.bookend { height: 58px; }
.candle { height: 38px; }

.stage.land { --floor: 716px; }
.land .rug-area { top: 780px; }
.land .floor-stuff { top: 800px; }
.land .hint { top: 868px; }
.land .foot { top: 902px; }
.land .monstera { top: 540px; }
.land .lamp { top: 360px; }

.stage.port { --floor: 930px; }
.port .rug-area { top: 972px; }
.port .floor-stuff { top: 1006px; }
.port .hint { top: 1090px; }
.port .foot { top: 1128px; }

/* ---------- Capoo resting on top of the bookcase ---------- */
.rester {
  position: absolute;
  z-index: 5;
  right: 6px;
  top: -66px;
  width: 116px;
  transform-origin: 50% 100%;
  transition: transform 0.28s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.2s;
  animation: snooze 3.6s ease-in-out infinite;
}
.rester.away { transform: translateY(18px) scaleY(0.4); opacity: 0; animation: none; }
.rester.blink .f-open .cp-eye { transform: scaleY(0.12); }

/* ---------- Capoo popping up from BEHIND the bookcase ---------- */
.peeker {
  --x: 250px;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 2px;
  width: 0;
  height: 0;
  pointer-events: none;
  transform: translateX(var(--x));
}
/* The head lives in a box clipped at the top edge of the bookcase,
   so it really rises up from behind it. */
.peek-clip {
  position: absolute;
  left: -60px;
  bottom: 0;
  width: 120px;
  height: 120px;
  overflow: hidden;
}
.peek-head {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 120px;
  transform: translateY(105%);
  transition: transform 0.2s cubic-bezier(0.5, 0, 0.75, 0);
}
.peeker.up .peek-head { transform: translateY(0); transition: transform 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
.peek-paws {
  position: absolute;
  z-index: 6;
  left: -60px;
  top: -12px;
  width: 120px;
  opacity: 0;
  transform: translateY(10px) scaleY(0.6);
  transform-origin: 50% 100%;
  transition: opacity 0.1s, transform 0.15s;
}
.peeker.up .peek-paws {
  opacity: 1;
  transform: none;
  transition: opacity 0.12s 0.14s, transform 0.32s cubic-bezier(0.2, 1.8, 0.4, 1) 0.14s;
}
.peeker.wiggle .peek-head { animation: wiggle 0.65s ease-in-out; }
.peeker .bubble { bottom: 112px; z-index: 7; }
.peeker:not(.up) .bubble { opacity: 0; }
.case-top { z-index: 4; }

/* ---------- wall light switch ---------- */
.switch {
  position: absolute;
  z-index: 8;
  width: 38px;
  height: 58px;
  padding: 0;
  border-radius: 8px;
  background: #fbf8f0;
  border: var(--lw) solid var(--line);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.15s;
}
.switch .toggle {
  width: 14px;
  height: 26px;
  border-radius: 4px;
  border: 2.5px solid var(--line);
  background: linear-gradient(#fff 0 50%, #e2d6c3 50%);
}
body.dark .switch .toggle { background: linear-gradient(#e2d6c3 0 50%, #fff 50%); }
.switch:hover { transform: rotate(-4deg) scale(1.05); }
.land .switch { left: 1090px; top: 430px; }
.port .switch { left: 478px; top: 226px; width: 32px; height: 50px; }

/* ---------- lights out ---------- */
.night {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background: #0b0a12;
  transition: opacity 0.3s steps(3, end);
}
body.dark .night { opacity: 0.95; }
body.dark .switch { z-index: 45; box-shadow: 0 0 0 3px rgba(255, 240, 200, 0.15); }
body.dark .sound-toggle { z-index: 45; }

.eyes { position: fixed; inset: 0; z-index: 44; pointer-events: none; }
.eyes .eye {
  position: absolute;
  width: calc(var(--s) * 26px);
  height: calc(var(--s) * 34px);
  margin: calc(var(--s) * -17px) 0 0 calc(var(--s) * -13px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #ffffff 0 34%, #fff6c0 50%, #ffe066 68%);
  box-shadow: 0 0 calc(var(--s) * 10px) #fff3a0, 0 0 calc(var(--s) * 28px) rgba(255, 230, 110, 0.55);
  transform: scale(0);
  animation: eyesPop 0.45s cubic-bezier(0.2, 1.9, 0.4, 1) forwards, eyesBlink 4s ease-in-out infinite;
}
@keyframes eyesPop {
  0% { transform: scale(0); }
  60% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
@keyframes eyesBlink {
  0%, 90%, 100% { scale: 1 1; }
  94% { scale: 1 0.08; }
}

@media (prefers-reduced-motion: reduce) {
  .capoo, .book .spine { animation: none !important; }
}

/* ---------- layout pass 2: more height so the taller bookcase fits ---------- */
.land .shelf-wrap { top: 76px; }
.stage.land { --floor: 760px; }
.land .rug-area { top: 826px; }
.land .floor-stuff { top: 846px; }
.land .hint { top: 924px; }
.land .foot { top: 958px; }
.land .monstera { top: 584px; }
.land .lamp { top: 404px; }
.land .beam { height: 700px; }

.port .shelf-wrap { top: 262px; }
.stage.port { --floor: 990px; }
.port .rug-area { top: 1036px; }
.port .floor-stuff { top: 1068px; }
.port .hint { top: 1150px; }
.port .foot { top: 1190px; }
.port .beam { height: 900px; }

/* speech bubble beside his head instead of above it */
.peeker .bubble {
  left: 56px;
  bottom: 54px;
  transform: translateY(6px) scale(0.7);
  transform-origin: 0% 100%;
}
.peeker .bubble.show { transform: none; }
.peeker .bubble::after {
  left: -9px;
  bottom: 10px;
  margin-left: 0;
  border: none;
  border-left: 3px solid var(--line);
  border-bottom: 3px solid var(--line);
}
.peeker.bl .bubble { left: auto; right: 56px; transform-origin: 100% 100%; }
.peeker.bl .bubble::after {
  left: auto;
  right: -9px;
  border-left: none;
  border-bottom: none;
  border-right: 3px solid var(--line);
  border-top: 3px solid var(--line);
}

/* ---------- layout pass 3 ---------- */
.sign { margin-bottom: 108px; }
.land .shelf-wrap { top: 40px; }
.port .shelf-wrap { top: 214px; }
.peeker .bubble { bottom: 70px; }
.port .hint { font-size: 20px; padding: 0 56px; }
.port .hint span { padding: 2px 12px; }
.sleeper[data-face="sleep"] .capoo .f-open { display: none; }