.living-layer {
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.living-light {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at var(--light-x, 50%) var(--light-y, 35%), var(--living-glow, rgba(255,190,105,.32)), transparent 29%),
    linear-gradient(110deg, transparent 25%, rgba(255,233,188,.08) 45%, transparent 63%);
  transition: opacity .6s ease, background-position 1s ease;
}

.living-layer.lights-off .living-light { opacity: .05; }
.living-layer.lights-off::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: rgba(1,4,11,.33);
}

.living-control {
  position: absolute;
  z-index: 5;
  left: var(--x);
  top: var(--y);
  width: var(--w, 58px);
  height: var(--h, 58px);
  padding: 0;
  border: 0;
  color: #f7cd83;
  background: transparent;
  transform: translate(-50%,-50%);
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
}

.living-control::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgba(5,10,18,.38);
  box-shadow: 0 0 11px currentColor;
  opacity: .72;
  transition: transform .2s ease, opacity .2s ease;
}

.living-control::after {
  content: attr(data-symbol);
  position: absolute;
  left: 50%;
  top: calc(50% + 30px);
  min-width: max-content;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  color: #e9eef7;
  background: rgba(5,9,17,.88);
  font: 700 .62rem/1 system-ui;
  letter-spacing: .04em;
  opacity: 0;
  transform: translate(-50%,5px);
  transition: opacity .18s ease, transform .18s ease;
}

.living-control:hover::before,
.living-control:focus-visible::before { transform: scale(1.5); opacity: 1; }
.living-control:hover::after,
.living-control:focus-visible::after { opacity: 1; transform: translate(-50%,0); }
.living-control.is-active { color: #82eff0; }
.living-control.is-active::before { background: currentColor; box-shadow: 0 0 24px currentColor; }
.living-control[data-kind="door"].is-active { transform: translate(-50%,-50%) perspective(300px) rotateY(-18deg); }
.living-control[data-kind="drawer"].is-active { transform: translate(-50%,calc(-50% + 13px)); }
.living-control[data-kind="turn"].is-active { transform: translate(-50%,-50%) rotate(90deg); }
.living-control[data-kind="drag"] { cursor: grab; }
.living-control[data-kind="drag"].is-dragging { cursor: grabbing; transition: none; }

.living-prop {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}

.living-prop.pendulum {
  left: 50%;
  top: 25%;
  width: 2px;
  height: 25%;
  transform-origin: top;
  background: linear-gradient(#b58a4f,#e3c17e);
  animation: living-pendulum 2s ease-in-out infinite alternate;
}
.living-prop.pendulum::after { content:""; position:absolute; left:50%; bottom:-10px; width:18px; height:18px; border-radius:50%; background:#cda75f; transform:translateX(-50%); box-shadow:0 0 17px rgba(234,190,104,.4); }
.living-prop.curtain { inset: 0 auto 0 0; width: 18%; background: linear-gradient(90deg,rgba(32,18,35,.82),rgba(71,40,65,.38),transparent); transform-origin:left; }
.living-layer.object-curtain-open .curtain { transform: scaleX(.35); }
.living-prop.steam { left:67%; top:35%; width:30px; height:70px; opacity:.35; filter:blur(5px); background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:living-steam 3s ease-in-out infinite; }
.living-layer.lights-off .steam { opacity:.12; }

.house-cat {
  position: absolute;
  z-index: 8;
  left: var(--cat-x);
  top: var(--cat-y);
  width: 58px;
  height: 42px;
  padding: 0;
  border: 0;
  color: #0c1017;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.5));
  animation: cat-arrive .8s ease both;
}
.house-cat::before { content:""; position:absolute; left:8px; bottom:3px; width:36px; height:24px; border-radius:55% 45% 42% 40%; background:currentColor; }
.house-cat::after { content:""; position:absolute; left:5px; top:3px; width:23px; height:23px; background:currentColor; clip-path:polygon(0 0,35% 22%,75% 0,100% 100%,10% 100%); }
.house-cat i { position:absolute; right:3px; top:5px; width:22px; height:28px; border:4px solid currentColor; border-left:0; border-bottom:0; border-radius:0 100% 0 0; transform:rotate(-25deg); }
.house-cat.is-noticed { color:#18202d; transform:translateX(20px); }

.living-message {
  position: fixed;
  z-index: 121;
  left: 50%;
  bottom: max(28px,env(safe-area-inset-bottom));
  width: min(510px,calc(100vw - 30px));
  padding: 13px 17px;
  border: 1px solid rgba(255,217,146,.28);
  border-radius: 999px;
  color: #f2eadb;
  background: rgba(5,10,19,.93);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  font: 700 .76rem/1.4 system-ui;
  text-align: center;
  opacity: 0;
  transform: translate(-50%,30px);
  pointer-events: none;
  transition: opacity .25s ease,transform .25s ease;
}
.living-message.is-visible { opacity:1; transform:translate(-50%,0); }

.walk-transition {
  position: fixed;
  z-index: 139;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at center,transparent 0 15%,rgba(1,4,10,.4) 48%,#02050b 76%);
  opacity: 0;
  pointer-events: none;
}
.walk-transition.is-walking { animation: walk-through .95s ease both; }
.walk-transition::before,
.walk-transition::after { content:""; position:absolute; top:0; width:51%; height:100%; background:#050810; }
.walk-transition::before { left:0; transform-origin:left; }
.walk-transition::after { right:0; transform-origin:right; }
.walk-transition.is-walking::before { animation:door-left .95s ease both; }
.walk-transition.is-walking::after { animation:door-right .95s ease both; }

.living-layer.world-complete .living-light { opacity:.58; }
.living-layer.world-complete.lights-off .living-light { opacity:.05; }
.living-layer.world-complete::before { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; box-shadow:inset 0 0 70px rgba(101,230,205,.08); }
.secret-cabinet { color:#eb8fff; }
.secret-cabinet::before { border-radius:4px; box-shadow:0 0 19px currentColor,inset 0 0 9px currentColor; }
.secret-cabinet.is-active::before { animation:secret-cabinet-on 1.2s steps(2) infinite; }

body.house-time-dawn { --living-glow:rgba(255,167,102,.25); }
body.house-time-day { --living-glow:rgba(255,239,187,.22); }
body.house-time-evening { --living-glow:rgba(255,146,80,.28); }
body.house-time-night { --living-glow:rgba(96,151,255,.18); }

@keyframes living-pendulum { from{transform:rotate(-7deg)} to{transform:rotate(7deg)} }
@keyframes living-steam { 0%{transform:translateY(12px) scaleX(.6);opacity:0} 35%{opacity:.35} 100%{transform:translateY(-30px) scaleX(1.2);opacity:0} }
@keyframes cat-arrive { from{opacity:0;transform:translateX(-25px)} }
@keyframes walk-through { 0%,100%{opacity:0} 35%,62%{opacity:1} }
@keyframes door-left { 0%,30%{transform:translateX(0)} 70%,100%{transform:translateX(-100%)} }
@keyframes door-right { 0%,30%{transform:translateX(0)} 70%,100%{transform:translateX(100%)} }
@keyframes secret-cabinet-on { 50%{color:#73efff;filter:brightness(1.4)} }

@media (max-width:700px) {
  .living-control { width:52px;height:52px; }
  .living-control::before { inset:17px; }
  .living-control::after { display:none; }
  .house-cat { transform:scale(.85); }
}

@media (prefers-reduced-motion:reduce) {
  .living-prop,.house-cat,.walk-transition,.walk-transition::before,.walk-transition::after { animation:none!important;transition:none!important; }
  .living-control { transition:none; }
}

/* Consistent room-object markers and collision-resistant labels. */
.living-control {
  width:48px;
  height:48px;
  outline:0;
}
.living-control::before {
  inset:19px;
  box-shadow:0 0 9px currentColor;
}
.living-control::after {
  top:calc(50% + 21px);
  max-width:min(180px,calc(100vw - 24px));
  padding:5px 8px;
  overflow:hidden;
  font-size:.56rem;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.living-control:hover::before,
.living-control:focus-visible::before { transform:scale(1.65); }
.living-control:focus-visible::before { outline:2px solid #fff;outline-offset:6px; }
.living-message { width:min(480px,calc(100vw - 24px));padding:11px 15px;font-size:.72rem; }

@media (max-width:700px) {
  .living-control { width:46px;height:46px; }
  .living-control::before { inset:18px; }
}