.window-life {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  display: none;
  left: 34%; top: 5%; width: 39%; height: 39%;
}
.environment-window .window-life, .environment-night .window-life { display: block; }
.window-visitor { position: absolute; pointer-events: auto; border: 0; background: transparent; width: 64px; height: 64px; min-width: 44px; min-height: 44px; padding: 0; cursor: pointer; touch-action: manipulation; }
.window-visitor[hidden] { display: none; }
.window-visitor:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; border-radius: 6px; }
.window-sprite { display: block; width: 100%; height: 100%; background-image: url("assets/window-visitors.png"); background-size: 300% 100%; image-rendering: pixelated; }
.window-bird { left: calc(65% - 32px); bottom: 0; animation: window-bird-arrival 1.6s ease-out both; }
.window-bird .window-sprite { position: relative; top: 14px; background-position: 100% 0; animation: window-wingbeat .32s steps(3, end) infinite; }
.window-bird.is-landed .window-sprite { background-position: 0 0; animation: window-bird-hop 5.7s steps(6, end) infinite; }
.window-bird.is-leaving { pointer-events: none; animation: window-bird-departure 1.6s ease-in both; }
.window-bird.is-leaving .window-sprite { background-position: 100% 0; animation: window-wingbeat .28s steps(3, end) infinite; }
.window-leaf { left: 0; top: 0; width: 52px; height: 52px; animation: window-leaf-drift var(--visit-duration, 18s) linear both; }
.window-leaf .window-sprite { background-position: 50% 0; }
.window-silhouette { left: 0; top: var(--pass-height, 25%); width: 54px; height: 54px; opacity: .7; animation: window-bird-pass var(--visit-duration, 10s) linear both; }
.window-silhouette .window-sprite { background-position: 100% 0; animation: window-wingbeat .6s ease-in-out infinite; }
.cat-tree.scene-settle img { animation: scene-tree-settle .8s steps(7, end); transform-origin: 50% 90%; }
.cat-wrap:not(.motion-ready).watching-window .sprite-stack { transform-origin: 50% 75%; transform: rotate(var(--watch-turn, -2deg)); transition: transform .3s; }
.cat-wrap:not(.motion-ready).greeting-sniff .sprite-stack { animation: greeting-sniff 1.6s steps(6, end) 2; }
.cat-wrap:not(.motion-ready).greeting-bounce .sprite-stack { animation: greeting-bounce 1s steps(8, end) 2; }
.cat-wrap:not(.motion-ready).greeting-perk .sprite-stack { animation: greeting-perk 1.2s steps(6, end) 2; }
.cat-wrap:not(.motion-ready).greeting-blink .cat-sprite-open { animation: greeting-open 2.6s steps(1, end) 2; }
.cat-wrap:not(.motion-ready).greeting-blink .cat-sprite-blink { animation: greeting-blink 2.6s steps(1, end) 2; }
.kevin-rig { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: none; z-index: 2; pointer-events: none; }
.rig-part, .rig-head-group, .rig-eyes-group { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; transition: transform .22s steps(5, end); }
.rig-head-group { transform-origin: 50% 64%; }
.rig-earLeft { transform-origin: 33% 34%; }
.rig-earRight { transform-origin: 68% 34%; }
.rig-pawLeft { transform-origin: 41% 88%; }
.rig-pawRight { transform-origin: 57% 88%; }
.rig-tail { transform-origin: 72% 89%; }
.rig-blinking .rig-eyes-group { opacity: 0; }
.cat-wrap.motion-ready:not(.walking):not(.jumping):not(.pouncing):not(.sleeping):not(.action-active) .kevin-rig { display: block; }
.cat-wrap.motion-ready:not(.walking):not(.jumping):not(.pouncing):not(.sleeping):not(.action-active) .cat-sprite-open,
.cat-wrap.motion-ready:not(.walking):not(.jumping):not(.pouncing):not(.sleeping):not(.action-active) .cat-sprite-blink { opacity: 0 !important; }
.mystery-launch { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 12px; margin-top: 10px; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); text-align: left; cursor: pointer; }
.mystery-launch svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; }
.mystery-launch span { display: grid; gap: 5px; }
.mystery-launch strong { font: 700 16px/1.3 var(--ui); }
.mystery-launch small { font: 700 14px/1.3 var(--pixel); color: var(--muted); }
.mystery-launch:focus-visible, .mystery-dialog button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.mystery-dialog { width: min(620px, calc(100% - 24px)); max-height: 90dvh; padding: 0; overflow-y: auto; background: var(--cream); }
.mystery-content { padding: 24px; font: 16px/1.6 var(--ui); color: var(--ink); }
.mystery-content h2 { font-size: clamp(24px, 5vw, 30px); line-height: 1.25; margin: 8px 0 14px; }
.mystery-content h3 { font-size: 18px; margin: 24px 0 12px; }
.mystery-date { font: 700 14px/1.4 var(--pixel); color: var(--muted); }
.mystery-progress { font-weight: 700; margin-top: 22px; }
.mystery-clues { padding: 0; list-style: none; display: grid; gap: 12px; }
.mystery-clues li { padding: 14px; background: var(--paper); border: 1px solid var(--line); }
.mystery-clues p { margin: 8px 0 0; }
.mystery-clues button { background: transparent; border: 0; padding: 0 6px; margin-left: -6px; color: var(--ink); font: 700 16px/1.4 var(--ui); cursor: pointer; min-height: 44px; }
.mystery-clues button:disabled { opacity: 1; cursor: default; }
.mystery-choices { display: grid; gap: 8px; }
.mystery-choices button { min-height: 48px; background: var(--paper); color: var(--ink); border: 2px solid var(--line); padding: 10px 14px; text-align: left; font: 700 16px/1.4 var(--ui); cursor: pointer; }
.mystery-choices button:disabled { cursor: default; opacity: .65; }
.mystery-choices button.correct-choice { opacity: 1; border-color: var(--green); background: var(--paper-deep); }
.mystery-help { font-size: 14px; color: var(--muted); }
.mystery-reveal { border-left: 4px solid var(--amber); padding: 12px 16px; background: var(--paper); font-weight: 700; }
#mysteryStatus { min-height: 1.6em; }
#mysteryStatus[role="alert"] { color: var(--red); font-weight: 700; }
@keyframes window-bird-arrival { from { transform: translate(calc(var(--window-width) * -.8), calc(var(--window-height) * -1)) scale(.7); } 75% { transform: translate(-8px, -12px) scale(.95); } to { transform: translate(0, 0) scale(1); } }
@keyframes window-bird-departure { 0% { transform: translate(0, 0); } 18% { transform: translate(-4px, -12px) rotate(-6deg); } 100% { transform: translate(calc(var(--window-width) * -1), calc(-1 * var(--window-height) - 64px)) rotate(-12deg) scale(.65); } }
@keyframes window-wingbeat { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.72); } }
@keyframes window-bird-hop { 0%, 65%, 100% { transform: translateY(0); } 75% { transform: translateY(-7px); } 85% { transform: translateY(0); } 92% { transform: translateY(-4px); } }
@keyframes window-leaf-drift { 0% { transform: translate(0, -60px) rotate(-25deg); } 28% { transform: translate(calc(var(--window-width) * .4), calc(var(--window-height) * .15)) rotate(35deg); } 55% { transform: translate(calc(var(--window-width) * .2), calc(var(--window-height) * .5)) rotate(-15deg); } 80% { transform: translate(calc(var(--window-width) * .55), calc(var(--window-height) * .8)) rotate(40deg); } 100% { transform: translate(calc(var(--window-width) * .4), calc(var(--window-height) + 60px)) rotate(65deg); } }
@keyframes window-bird-pass { from { transform: translateX(calc(var(--window-width) + 54px)); } to { transform: translateX(-64px); } }
@keyframes greeting-sniff { 0%, 100% { transform: translateY(0); } 35%, 65% { transform: translateY(4px) rotate(-2deg); } }
@keyframes greeting-bounce { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-12px); } 70% { transform: translateY(0); } }
@keyframes greeting-perk { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(3deg); } }
@keyframes greeting-open { 0%, 30%, 70%, 100% { opacity: 1; } 35%, 65% { opacity: 0; } }
@keyframes greeting-blink { 0%, 30%, 70%, 100% { opacity: 0; } 35%, 65% { opacity: 1; } }
@keyframes scene-tree-settle { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(1px) rotate(.6deg); } 70% { transform: translateY(0) rotate(-.4deg); } }
@media(max-width: 600px) { .mystery-content { padding: 18px; } .window-visitor { width: 52px; height: 52px; } .window-bird .window-sprite { top: 11px; } }
@media(prefers-reduced-motion: reduce) { .window-visitor, .window-sprite, .cat-wrap[class*="greeting-"] .sprite-stack, .cat-wrap.greeting-blink .cat-sprite-open, .cat-wrap.greeting-blink .cat-sprite-blink { animation: none !important; } .rig-part, .rig-head-group, .rig-eyes-group { transition: none; transform: none !important; } .cat-wrap.watching-window .sprite-stack { transform: none; transition: none; } .window-leaf { left: 36%; top: 25%; } .window-silhouette { left: 20%; } .window-bird.is-leaving { opacity: 0; transition: opacity .4s; } }

/* Keep the case file separate from the habitat's compact chat controls. */
.mystery-launch { width: calc(100% - 32px); margin: 16px; padding: 14px 16px; justify-content: space-between; border-width: 1px; border-radius: 8px; }
.mystery-launch span { flex: 1; }
.mystery-launch .case-label { display: block; margin-bottom: 4px; font: 700 13px/1.4 var(--ui); letter-spacing: .07em; color: var(--muted); }
.mystery-launch .case-action { font: 700 14px/1.3 var(--ui); white-space: nowrap; }
.cat-wrap.motion-ready[data-meal] .kevin-rig { display: none !important; }
.cat-wrap.motion-ready:not(.walking):not(.jumping):not(.pouncing):not(.sleeping):not(.action-active) .cat-sprite { animation: none !important; }
.mystery-dialog [hidden] { display: none !important; }
@media(max-width: 480px) { .mystery-launch { width: calc(100% - 24px); margin: 12px; gap: 10px; } .mystery-launch .case-action { display: none; } }
.mystery-dialog .dialog-head { position: sticky; top: 0; z-index: 2; background: var(--green); }

/* Scene interactions stay on the artwork, without persistent control markers. */
.room-hotspot, .room-hotspot:hover { width: 64px; height: 54px; background: transparent; border: 0; box-shadow: none; text-shadow: none; outline: none; }
.room-hotspot:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; background: transparent; opacity: 1; }
.tree-tap-hint { display: none; }
#petStage > .kevin-thought { z-index: 15; width: max-content; max-width: min(290px, calc(100% - 24px)); font: 600 16px/1.4 var(--ui); padding: 10px 13px; }
#petStage > .kevin-thought::before { left: var(--tail-x, 27px); }
#petStage > .kevin-thought::after { left: calc(var(--tail-x, 27px) + 2px); }
.environment-cubicle .window-life, .environment-archive .window-life { display: block; }
.window-plant, .window-papers { left: var(--patch-x); top: var(--patch-y); width: var(--patch-width); height: var(--patch-height); min-width: 44px; min-height: 44px; }
.window-plant .window-sprite, .window-papers .window-sprite { width: var(--patch-width); height: var(--patch-height); background-image: var(--patch-image); background-size: var(--patch-size); background-position: var(--patch-position); background-repeat: no-repeat; }
.window-plant .window-sprite { transform-origin: 50% 90%; animation: office-plant-rustle 3s ease-in-out infinite; }
.window-papers .window-sprite { transform-origin: 50% 100%; animation: office-paper-shift 3.4s ease-in-out infinite; }
.environment-cubicle .window-leaf, .environment-archive .window-leaf { left: 42%; top: 18%; animation-name: office-leaf-drift; }
@keyframes office-plant-rustle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 65% { transform: rotate(4deg); } }
@keyframes office-paper-shift { 0%,100% { transform: translate(0,0); } 30% { transform: translate(5px,-2px) rotate(2deg); } 65% { transform: translate(-3px,0) rotate(-1deg); } }
@keyframes office-leaf-drift { 0% { opacity: 0; transform: translate(0,0) rotate(-25deg); } 8% { opacity: 1; } 30% { transform: translate(36px,80px) rotate(30deg); } 65% { opacity: 1; transform: translate(-18px,170px) rotate(-20deg); } 94% { opacity: 1; } 100% { opacity: 0; transform: translate(28px,240px) rotate(55deg); } }

#petStage > .kevin-thought.tail-up::before { top: -10px; bottom: auto; border-width: 0 10px 10px 0; border-color: transparent transparent var(--green) transparent; }
#petStage > .kevin-thought.tail-up::after { top: -6px; bottom: auto; border-width: 0 7px 7px 0; border-color: transparent transparent var(--paper) transparent; }

/* Quiet sky light for the night shift. The full target stays easy to tap. */
.window-starlight { left: 38%; top: 9%; width: 48px; height: 48px; }
.window-starlight .window-sprite { background: radial-gradient(circle, #fffbea 0 2px, #d8eaffb0 3px, #b8d5ff30 7px, transparent 12px); animation: night-starlight 3.6s ease-in-out infinite; }
.window-meteor { left: 0; top: 8%; width: 48px; height: 48px; animation: night-meteor var(--visit-duration, 4s) linear both; }
.window-meteor .window-sprite { background: radial-gradient(circle at 65% 65%, #fffbea 0 2px, #d4e8ff90 3px, transparent 7px); }
.window-meteor .window-sprite::after { content: ''; position: absolute; width: 32px; height: 2px; left: 0; top: 8px; background: linear-gradient(90deg, transparent, #e1eeffbb); transform: rotate(42deg); transform-origin: left center; }
@keyframes night-starlight { 0%,100% { opacity: .45; } 45% { opacity: 1; } 65% { opacity: .65; } }
@keyframes night-meteor { 0% { opacity: 0; transform: translate(-36px,-30px); } 12%,80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--window-width), calc(var(--window-height) * .55)); } }
@media(prefers-reduced-motion: reduce) { .window-meteor { left: 40%; top: 14%; } .window-meteor .window-sprite::after { display: none; } }