/* room-life: sound chip, petting, laser pointer, shelf */

/* corner controls: found counter + sound chip */
.corner-controls{position:fixed;z-index:12;left:16px;bottom:14px;display:flex;align-items:center;gap:8px;transition:opacity .25s}
.corner-controls .found-counter{position:static}
.sound-chip{display:flex;align-items:center;justify-content:center;width:28px;height:26px;padding:0;border-radius:14px;border:1px solid #ddd9c8;background:#fffcf2ed;color:#354831;box-shadow:0 1px 8px #3a331213;transition:transform .2s var(--ease)}
.sound-chip:hover{transform:translateY(-2px)}
.sound-chip svg{width:16px;height:16px;display:block}
.sound-chip[aria-pressed="true"] .sound-mute,.sound-chip[aria-pressed="false"] .sound-waves{display:none}
.sound-chip[aria-pressed="false"]{color:#7b8374}
.evening .sound-chip{background:#22342fe8;color:#efe8d4;border-color:#3d5249}
.evening .sound-chip[aria-pressed="false"]{color:#a9b3a6}
.using-mac .corner-controls{opacity:0;pointer-events:none}
.nested .corner-controls{display:none}
@media(max-width:700px){.corner-controls{left:12px;bottom:12px}}

/* hotspots */
.pencil-target{left:95.3%;top:43.5%;width:3.6%;height:10.5%}
.books-target{left:89.4%;top:38%;width:6.4%;height:16%}
.pencil-target .object-label{left:auto;right:0;transform:none}

/* hold to pet */
.pet{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pet.is-purring .pet-art{animation:purrTremble .13s linear infinite}
@keyframes purrTremble{0%{transform:translate(.6px,0)}25%{transform:translate(-.6px,.5px)}50%{transform:translate(.5px,-.4px)}75%{transform:translate(-.5px,0)}100%{transform:translate(.6px,0)}}
.purr-fx{position:absolute;z-index:7;pointer-events:none;transform:translateX(-50%);font:italic 13px Georgia,serif;color:#6f4b2c;text-shadow:0 0 4px #fffaf0;animation:purrRise 1.7s ease-out forwards}
.evening .purr-fx{color:#f3e8cd;text-shadow:0 0 4px #1a2a2a}
@keyframes purrRise{0%{opacity:0;margin-top:0}20%{opacity:.95}100%{opacity:0;margin-top:-52px}}

/* laser pointer */
.laser-dot{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#ff4a3a;box-shadow:0 0 6px 2px #ff3b2ccc,0 0 16px 6px #ff3b2c66;pointer-events:none;z-index:8;opacity:0;transition:opacity .15s}
.laser-dot.is-visible{opacity:1}
.laser-on .desk-scene,.laser-on .desk-scene *{cursor:none}
.laser-on .desk-scene{touch-action:none}
.laser-off{position:fixed;z-index:13;top:calc(var(--header) + 12px);left:50%;translate:-50% 0;display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:14px;border:1px solid #ddd9c8;background:#fffcf2ed;color:#304332;font-size:12px;box-shadow:0 1px 8px #3a331226;cursor:pointer;animation:laserOffIn .3s var(--ease)}
.laser-off[hidden]{display:none}
.laser-off kbd{font:600 10px/1 ui-sans-serif,system-ui,sans-serif;padding:3px 5px;border-radius:4px;border:1px solid #ddd9c8;background:#f3eee0;color:#6b6656}
.evening .laser-off{background:#22342fe8;color:#efe8d4;border-color:#3d5249}
.evening .laser-off kbd{background:#2c4038;border-color:#3d5249;color:#c9cdbf}
@media(hover:none){.laser-off kbd{display:none}}
@keyframes laserOffIn{from{opacity:0;translate:-50% -6px}}
.little-bit.lb-ride{translate:var(--lb-x,0) var(--lb-y,0);scale:var(--lb-flip,1) 1;transition:translate .6s var(--ease)}
/* Mirror the name back so it reads the right way round when he faces left. */
.little-bit.lb-ride .pet-name{scale:var(--lb-flip,1) 1;transform-origin:0 50%}
.laser-on .little-bit.is-playing{animation:none}
.little-bit.is-pouncing{animation:lbPounce .55s var(--ease)}
@keyframes lbPounce{0%{transform:none}30%{transform:translateY(-14%) scale(.96,1.06)}60%{transform:translateY(2%) scale(1.06,.94)}100%{transform:none}}

@media(prefers-reduced-motion:reduce){
  .pet.is-purring .pet-art{animation:none}
  .purr-fx{animation:none;display:none}
  .little-bit.lb-ride{transition:none}
  .little-bit.is-pouncing{animation:none}
}

/* open book: favorite books. Text sizes follow the book's width (cqw). */
.open-book{position:fixed;inset:0;z-index:30;display:grid;place-items:center;align-content:center;gap:14px;padding:16px;background:#2a221766;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:bookFade .3s ease}
.open-book[hidden]{display:none}
.open-book-art{position:relative;container-type:inline-size;width:min(760px,94vw,calc((100svh - 110px) * 1.544));aspect-ratio:1390/900;background:url(assets/props/open-book.webp) center/100% 100% no-repeat;filter:drop-shadow(0 18px 30px #1c140a55);animation:bookOpen .45s var(--ease)}
.open-book-page{position:absolute;top:13%;height:74%;width:34%;display:flex;flex-direction:column;justify-content:center;gap:.7em;text-align:center;color:#3b3226;font-family:Georgia,serif}
.open-book-page.left{left:9.5%}
.open-book-page.right{left:56.5%}
.open-book p{margin:0}
.ob-kicker{font:600 max(9px,1.35cqw)/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8a7656}
.ob-title{font-size:3.6cqw;line-height:1.15;font-style:italic;color:#2c3f33}
.ob-note{font-size:2.1cqw;line-height:1.45;font-style:italic}
.ob-list{list-style:none;margin:0;padding:0;display:grid;gap:.5em;font-size:1.95cqw;line-height:1.3}
.ob-list a{color:#2c3f33;text-decoration:underline;text-decoration-color:#2c3f3340;text-decoration-thickness:1px;text-underline-offset:.2em}
.ob-list a:hover{color:#6f4b2c;text-decoration-color:currentColor}
.open-book-actions{display:flex;gap:10px}
.open-book-actions button{padding:8px 15px;border-radius:14px;border:1px solid #ddd9c8;background:#fffcf2;color:#304332;font-size:13px;box-shadow:0 2px 10px #1c140a33}
.open-book-actions button:hover{background:#fff}
/* Portrait phones: the book turns sideways so the pages stack, top and bottom. */
@media(max-width:640px) and (orientation:portrait){
  .open-book-art{width:min(94vw,420px,calc((100svh - 110px) * 900 / 1390));aspect-ratio:900/1390;background:none}
  .open-book-art:before{content:'';position:absolute;left:50%;top:50%;width:calc(100cqw * 1390 / 900);height:100cqw;translate:-50% -50%;rotate:90deg;background:url(assets/props/open-book.webp) center/100% 100% no-repeat}
  .open-book-page{left:13%;width:74%;height:36%}
  .open-book-page.left{left:13%;top:8%}
  .open-book-page.right{left:13%;top:56%}
  .ob-kicker{font-size:2.6cqw}
  .ob-title{font-size:6.2cqw}
  .ob-note{font-size:3.9cqw}
  .ob-list{font-size:3.55cqw;gap:.15em}
}
@keyframes bookFade{from{opacity:0}}
@keyframes bookOpen{from{opacity:0;scale:.94;translate:0 12px}}
@media(prefers-reduced-motion:reduce){.open-book,.open-book-art,.laser-off{animation:none}}