/* =================================================================
   STORYBOOK STYLE: Capoo comic look. Cream walls, flat colours,
   thick hand-drawn outlines, a warm sunbeam through the window.
   Loaded after style.css and overrides its softer gradient look.
   ================================================================= */
:root {
  --line: #3b3a3d;
  --lw: 3.5px;
  --wall-c: #efe6d6;
  --wood-c: #c99a68;
  --wood-d: #a8784b;
  --ink: #4a3b33;
  --ink-soft: #8a7766;
}
body { background: #e7dcc8; color: var(--ink); }

/* ---------- room surfaces ---------- */
.wall {
  background:
    radial-gradient(circle, rgba(120, 100, 80, 0.16) 1.4px, transparent 1.8px) 0 0 / 46px 46px,
    linear-gradient(#e9dfcd, var(--wall-c) 60%);
}
.floor {
  background:
    repeating-linear-gradient(90deg, transparent 0 158px, var(--line) 158px 161px),
    linear-gradient(var(--wood-c), #bf8f5e);
  border-top: var(--lw) solid var(--line);
}
.baseboard {
  background: #d9c7aa;
  border-top: var(--lw) solid var(--line);
  border-bottom: var(--lw) solid var(--line);
  box-shadow: none;
}

/* sunbeam through the window */
.beam {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(rgba(255, 252, 214, 0.8), rgba(255, 246, 190, 0.4) 60%, rgba(255, 246, 190, 0));
  filter: blur(6px);
  animation: beam 8s ease-in-out infinite;
}
@keyframes beam { 50% { opacity: 0.75; } }
.land .beam { left: 155px; top: 160px; width: 520px; height: 620px; clip-path: polygon(0 0, 58% 0, 100% 100%, 26% 100%); }
.port .beam { left: 34px; top: 96px; width: 300px; height: 800px; clip-path: polygon(0 0, 52% 0, 100% 100%, 30% 100%); }

/* wind chime */
.chime { position: absolute; z-index: 4; width: 40px; transform-origin: 50% 0; animation: chime 4s ease-in-out infinite; }
.chime .string { position: absolute; left: 19px; top: 0; width: 2px; height: 34px; background: var(--line); }
.chime .bell {
  position: absolute;
  left: 4px;
  top: 30px;
  width: 32px;
  height: 26px;
  border-radius: 16px 16px 4px 4px;
  background: #e86a5c;
  border: var(--lw) solid var(--line);
}
.chime .tag {
  position: absolute;
  left: 9px;
  top: 64px;
  width: 22px;
  height: 46px;
  background: #fbf8f0;
  border: 3px solid var(--line);
  border-radius: 2px;
}
.chime .tag::before { content: ""; position: absolute; left: 7px; top: -12px; width: 2px; height: 12px; background: var(--line); }
@keyframes chime { 50% { transform: rotate(6deg); } }
.land .chime { left: 80px; top: 118px; }
.port .chime { display: none; }

/* ---------- window: wooden frame, bright day sky ---------- */
.win-sky {
  border: 12px solid var(--wood-c);
  outline: var(--lw) solid var(--line);
  box-shadow: inset 0 0 0 var(--lw) var(--line);
  border-radius: 6px;
  background: linear-gradient(#bfe4f2, #e6f6fb 70%, #fffbe8);
}
.win-sky::before, .win-sky::after { background: var(--wood-c); box-shadow: 0 0 0 3px var(--line); }
.moon, .hills, .rain, .wstars, .curtain, .rod { display: none; }
.sun {
  position: absolute;
  top: 10%;
  left: 12%;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fffef4 30%, rgba(255, 252, 220, 0.6) 55%, transparent 70%);
}
.cloud {
  position: absolute;
  height: 18%;
  border-radius: 999px;
  background: #fff;
  opacity: 0.9;
  animation: cloud 40s linear infinite;
}
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 50%; height: 160%; left: 18%; bottom: 20%; }
.cloud::after { width: 38%; height: 120%; left: 50%; bottom: 25%; }
.cloud.c1 { width: 34%; top: 52%; left: 10%; }
.cloud.c2 { width: 26%; top: 30%; left: 64%; animation-duration: 55s; animation-delay: -20s; }
@keyframes cloud { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
.pane { background: linear-gradient(120deg, rgba(255, 255, 255, 0.3) 0 14%, transparent 14% 30%, rgba(255, 255, 255, 0.18) 30% 34%, transparent 34%); }
.sill { background: var(--wood-c); border: var(--lw) solid var(--line); box-shadow: none; border-radius: 3px; }
.sill-pot { background: #e8e1d3; border: 3px solid var(--line); bottom: 13px; }
.sill-pot::before {
  background:
    radial-gradient(circle at 30% 60%, #8ccb6a 6px, transparent 7px),
    radial-gradient(circle at 70% 55%, #7cbd5d 6px, transparent 7px),
    radial-gradient(circle at 50% 30%, #9ad77a 7px, transparent 8px);
}

/* ---------- wall bits ---------- */
.fairy path { stroke: var(--line); stroke-width: 2; }
.fairy span { border: 2px solid var(--line); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--c) 70%, transparent); }
.fairy span::before { background: var(--line); }

.frame { border: 8px solid var(--wood-c); outline: var(--lw) solid var(--line); box-shadow: inset 0 0 0 3px var(--line); color: #fff; }
.frame.f1 { background: #f6b7c2; }
.frame.f2 { background: #a9d98d; }
.frame.f3 { background: #9fd3ec; }
.clock { border: 6px solid #e86a5c; outline: var(--lw) solid var(--line); background: #fbf8f0; box-shadow: none; }
.clock span { background: var(--line); }

.lamp-shade { background: #fff3c9; }
.lamp-shade-wrap { filter: drop-shadow(3px 0 0 var(--line)) drop-shadow(-3px 0 0 var(--line)) drop-shadow(0 3px 0 var(--line)) drop-shadow(0 -3px 0 var(--line)); }
.lamp-pole { background: var(--line); }
.lamp-base { background: var(--wood-d); border: var(--lw) solid var(--line); box-shadow: none; }
.lamp-glow { background: radial-gradient(circle, rgba(255, 235, 170, 0.5), rgba(255, 230, 160, 0.12) 35%, transparent 60%); }

.monstera .leaf {
  background: linear-gradient(135deg, transparent 48.5%, var(--line) 48.5% 51.5%, transparent 51.5%), #86c96a;
  border: var(--lw) solid var(--line);
  box-shadow: none;
}
.monstera .leaf:nth-child(even) { background: linear-gradient(135deg, transparent 48.5%, var(--line) 48.5% 51.5%, transparent 51.5%), #74b85a; }
.monstera .pot { background: #e9e2d4; border: var(--lw) solid var(--line); box-shadow: inset 0 12px 0 #d8cfbd; }

/* ---------- name sign ---------- */
.sign h1 { color: #fff; -webkit-text-stroke: 7px var(--line); paint-order: stroke fill; text-shadow: 0 5px 0 var(--line); letter-spacing: 0.02em; }
.sign p { color: var(--ink); background: #fbf8f0; display: inline-block; padding: 4px 16px; border-radius: 999px; border: 3px solid var(--line); }

/* ---------- bookcase ---------- */
.case-top { background: var(--wood-c); border: var(--lw) solid var(--line); box-shadow: none; border-radius: 6px; }
.case-body {
  background:
    linear-gradient(90deg, var(--wood-c) 0 14px, transparent 14px calc(100% - 14px), var(--wood-c) calc(100% - 14px)),
    #8a5f3d;
  border-left: var(--lw) solid var(--line);
  border-right: var(--lw) solid var(--line);
}
.case-body::before, .case-body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--lw);
  background: var(--line);
  z-index: 3;
}
.case-body::before { left: 14px; }
.case-body::after { right: 14px; }
.shelf { box-shadow: inset 0 18px 0 -8px rgba(40, 20, 10, 0.25); }
.shelf::after { background: var(--wood-c); border-top: var(--lw) solid var(--line); border-bottom: var(--lw) solid var(--line); box-shadow: none; height: 18px; }
.case-feet span { background: var(--wood-d); border: var(--lw) solid var(--line); border-top: none; }
.bookcase::after { background: rgba(80, 50, 30, 0.25); filter: blur(4px); }
.jar {
  border: 3px solid var(--line);
  background:
    radial-gradient(circle at 30% 70%, #ffd166 3px, transparent 4px),
    radial-gradient(circle at 65% 55%, #f78fa7 3px, transparent 4px),
    radial-gradient(circle at 45% 40%, #8fd3c9 3px, transparent 4px),
    rgba(255, 255, 255, 0.7);
}
.jar::before { background: #e86a5c; border: 2px solid var(--line); }
.mini-plant { background: #e9e2d4; border: 3px solid var(--line); }
.mini-plant i { background: #86c96a; border: 2px solid var(--line); }

.bookend, .candle, .globe, .lying i { border: 3px solid var(--line); box-shadow: none; }
.bookend { background: #f6b7c2; }
.candle { background: #fbf8f0; }
.candle i { border: 2px solid var(--line); background: #ffcf4a; }
.globe { background: #e86a5c; }
.globe::before { border: 3px solid var(--line); bottom: 17px; background: #9fd3ec; }
.lying i:nth-child(1) { background: #9fd3ec; }
.lying i:nth-child(2) { background: #ffe07a; }

/* ---------- books: flat + outlined ---------- */
.spine {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 22%, transparent 22%), var(--c);
  border: var(--lw) solid var(--line);
  border-radius: 7px 7px 4px 4px;
  box-shadow: none;
}
.book.out .spine { box-shadow: 0 0 0 3px #fffbe8, 0 0 20px rgba(255, 230, 150, 0.7); }
.spine .band { background: var(--line); height: 3px; opacity: 0.85; }
.spine .band.low { bottom: 10px; }
.sticker { background: #fbf8f0; border: 3px solid var(--line); box-shadow: none; }
.sticker svg { fill: var(--line); stroke: var(--line); filter: none; }
.spine .title { color: var(--line); text-shadow: none; font-weight: 700; }
.top-pages { border: 2px solid var(--line); border-bottom: none; background: repeating-linear-gradient(90deg, #fbf8f0 0 3px, #d9d0bf 3px 4px); }

.bubble { border: 3px solid var(--line); box-shadow: none; color: var(--ink); background: #fff; }
.bubble::after { background: #fff; border-color: var(--line); border-width: 3px; }

/* ---------- floor: rug, cushion, Capoo nap ---------- */
.rug {
  background: repeating-radial-gradient(ellipse at center, #e3d2b3 0 16px, #efe3cb 16px 32px);
  box-shadow: none;
  border: var(--lw) solid var(--line);
}
.zabuton {
  position: absolute;
  border-radius: 22px;
  background: radial-gradient(circle, #f4f1ea 2.4px, transparent 3px) 0 0 / 18px 18px, #3f6aa8;
  border: var(--lw) solid var(--line);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.12);
}
.land .zabuton { left: 466px; top: 18px; width: 250px; height: 60px; }
.port .zabuton { left: 258px; top: 34px; width: 214px; height: 54px; }
.land .sleeper { left: 482px; top: -46px; width: 216px; }
.port .sleeper { left: 274px; top: -18px; width: 180px; }
.sleeper::after { display: none; }

/* zzz drifting up from the top of his head */
.zzz { right: auto; left: 70%; top: -36px; width: 80px; height: 90px; z-index: 2; }
.zzz span {
  font-family: "Gaegu", sans-serif;
  font-weight: 700;
  color: var(--line);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.zzz span:nth-child(1) { font-size: 24px; }
.zzz span:nth-child(2) { font-size: 31px; }
.zzz span:nth-child(3) { font-size: 38px; }
@keyframes zzz {
  0% { transform: translate(0, 12px) rotate(-8deg) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(44px, -64px) rotate(10deg) scale(1.1); opacity: 0; }
}

.cushion { background: radial-gradient(circle at 50% 46%, var(--line) 3px, transparent 4px), #f6b7c2; border: var(--lw) solid var(--line); box-shadow: none; }
.mug { background: #fbf8f0; border: var(--lw) solid var(--line); box-shadow: inset 0 6px 0 #a9744a; }
.mug::before { border-color: var(--line); }
.mug::after { color: #e86a5c; }
.steam { border-left-color: rgba(59, 58, 61, 0.55); }
.pile span { border: 3px solid var(--line); box-shadow: inset -6px 0 0 #fbf8f0; }
.pile span:nth-child(1) { background: #ffe07a; }
.pile span:nth-child(2) { background: #a9d98d; }
.pile span:nth-child(3) { background: #9fd3ec; }

.hint { color: var(--ink); text-shadow: none; }
.hint span { display: inline-block; padding: 4px 16px; border-radius: 999px; background: #fbf8f0; border: 3px solid var(--line); }
.foot { color: rgba(74, 59, 51, 0.7); }

.dust { mix-blend-mode: normal; }
.vignette { background: radial-gradient(ellipse 80% 75% at 40% 40%, transparent 60%, rgba(120, 90, 60, 0.18)); }

/* ---------- door, buttons, page transition ---------- */
.door { background: radial-gradient(circle at 50% 45%, #fffdf6, #efe6d6 70%); }
.door-title { color: var(--line); }
.door-hint { color: var(--ink-soft); }
.sound-toggle, .pill { border: 3px solid var(--line); background: #fbf8f0; box-shadow: 0 4px 0 var(--line); color: var(--ink); }
.pill:hover, .pill:focus-visible { box-shadow: 0 6px 0 var(--line); }
.pill:active { box-shadow: 0 2px 0 var(--line); }
.wipe { background: radial-gradient(circle at 50% 50%, #fffdf6, #efe6d6 70%); }

/* ---------- reading page: notebook on cream paper ---------- */
.reading {
  background:
    radial-gradient(circle, rgba(120, 100, 80, 0.16) 1.4px, transparent 1.8px) 0 0 / 46px 46px,
    #efe6d6;
}
.open-book { border: var(--lw) solid var(--line); box-shadow: 0 8px 0 var(--line); background: var(--c); }
.bk-page { background: repeating-linear-gradient(transparent 0 33px, rgba(80, 110, 160, 0.14) 33px 34px), #fffdf6; }
.bk-page.left { border: 3px solid var(--line); box-shadow: inset -18px 0 20px -18px rgba(60, 40, 20, 0.35); }
.bk-page.right { border: 3px solid var(--line); border-left: none; box-shadow: inset 18px 0 20px -18px rgba(60, 40, 20, 0.35); }
.bk-page h2, .bk-page h3 { color: var(--line); }
.pg-sticker { border: 3px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.pg-sticker svg { fill: var(--line); stroke: var(--line); }
.entries li, .review, .fact, .fav { border: 3px solid var(--line); background: #fff; }
.fav { border-style: dashed; }
.tag { border: 2px solid var(--line); background: var(--c); color: var(--line); filter: none; font-weight: 600; }
.qa .q { background: #fff; border: 3px solid var(--line); }
.qa .a { background: var(--c); color: var(--line); border: 3px solid var(--line); }
.link-card { border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.link-card:hover, .link-card:focus-visible { box-shadow: 0 7px 0 var(--line); }
.link-card .ic { border: 2.5px solid var(--line); }
.link-card svg { fill: var(--line); }
.blank { border-color: var(--line); }
.doodle .capoo { width: 200px; }

@media (max-width: 760px) {
  .bk-page.right { border: 3px solid var(--line); border-top: none; }
}

/* ---------- hand cursor: outlined to match ---------- */
.hand .o { fill: var(--line); stroke: var(--line); stroke-width: 6; }
.hand .f { fill: #ffe6d6; }
.hand .sleeve { fill: #f6b7c2; stroke: var(--line); stroke-width: 3.5; }
.hand .stripes rect { fill: #fbe3e8; }
.hand .cuff { fill: #ef9fb0; stroke: var(--line); stroke-width: 3.5; }
.hand .knuckle { stroke: #e9b9a3; }

/* bookshelf Capoo a little bigger */
.buddy-hop { left: -42px; width: 84px; bottom: -6px; }
.bubble { bottom: 74px; }

/* footer sits under the hint pill; z's rise in front of everything */
.land .foot { top: 884px; }
.port .foot { top: 1050px; }
.port .hint { top: 1004px; }
.rug-area { z-index: 6; }
.floor-stuff { z-index: 10; }
.zzz { left: 74%; top: -30px; }
@keyframes zzz {
  0% { transform: translate(0, 12px) rotate(-8deg) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(30px, -70px) rotate(10deg) scale(1.1); opacity: 0; }
}