/* ---- 部屋 ---- */
.stage{position:relative;width:100%;aspect-ratio:1000/620;border-radius:20px;
  overflow:hidden;border:3px solid var(--line);background:#E3D9C6;
  box-shadow:0 14px 34px rgba(55,64,47,.16);touch-action:none;user-select:none;
  -webkit-user-select:none}
.stage svg.bgroom{position:absolute;inset:0;width:100%;height:100%;display:block}

/* 部屋の暗さ。あかりを置くと明るくなります */
.dark{position:absolute;inset:0;pointer-events:none;z-index:9000;
  background:linear-gradient(180deg,#141B2C 0%,#1E232B 60%,#242425 100%);
  opacity:var(--dark,.42);transition:opacity .7s ease}
.warm{position:absolute;inset:0;pointer-events:none;z-index:9001;
  background:radial-gradient(62% 58% at 50% 56%, rgba(255,216,152,.30), transparent 72%);
  opacity:var(--warm,0);transition:opacity .7s ease}

/* ---- 置いたもの ---- */
.it{position:absolute;transform:translate(-50%,-100%);cursor:grab;touch-action:none;
  filter:drop-shadow(0 3px 4px rgba(40,30,16,.22))}
.it.drag{cursor:grabbing;filter:drop-shadow(0 14px 16px rgba(40,30,16,.42));z-index:8900!important}
.it.chosen{outline:3px dashed rgba(130,168,92,.95);outline-offset:6px;border-radius:4px}
.it svg,.it img{width:100%;height:auto;display:block;pointer-events:none}
.pool{position:absolute;transform:translate(-50%,-50%);border-radius:50%;
  aspect-ratio:1;pointer-events:none;z-index:9002;
  background:radial-gradient(circle,var(--lc,rgba(255,224,160,.85)) 0%,transparent 66%);
  animation:litBreath 5.5s ease-in-out infinite}
@keyframes litBreath{0%,100%{opacity:.72;transform:translate(-50%,-50%) scale(1)}
                     50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}

/* ---- 動くもの ---- */
.smoke{position:absolute;left:50%;bottom:74%;width:16%;height:60%;pointer-events:none}
.smoke i{position:absolute;bottom:0;left:50%;width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.55);filter:blur(3px);animation:smk 4.2s ease-in-out infinite}
.smoke i:nth-child(2){animation-delay:1.4s}
.smoke i:nth-child(3){animation-delay:2.8s}
@keyframes smk{0%{opacity:0;transform:translate(-50%,0) scale(.5)}
               18%{opacity:.7}
               100%{opacity:0;transform:translate(-160%,-230%) scale(2.4)}}

.fanhead{transform-origin:50% 82%;animation:fanSwing 4.6s ease-in-out infinite}
@keyframes fanSwing{0%,100%{transform:rotate(-17deg)}50%{transform:rotate(17deg)}}
.fanblade{transform-origin:50% 42%;animation:fanSpin .55s linear infinite}
@keyframes fanSpin{to{transform:rotate(360deg)}}

.lavab{animation:lavaUp 7s ease-in-out infinite}
.lavab:nth-of-type(2){animation-duration:9s;animation-delay:-2s}
.lavab:nth-of-type(3){animation-duration:11s;animation-delay:-5s}
@keyframes lavaUp{0%,100%{transform:translateY(0) scale(1)}
                  30%{transform:translateY(-26px) scale(1.18)}
                  55%{transform:translateY(-44px) scale(.85)}
                  80%{transform:translateY(-16px) scale(1.1)}}

.swing{transform-origin:50% 8%;animation:swg 3.4s ease-in-out infinite}
@keyframes swg{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.swing2{transform-origin:50% 8%;animation:swg 3.4s ease-in-out infinite .35s}

@media(prefers-reduced-motion:reduce){
  .smoke i,.fanhead,.fanblade,.lavab,.swing,.swing2,.it .glow{animation:none}
}


/* ---- ポト（部屋で暮らしています）---- */
.rm-over{position:absolute;inset:0;pointer-events:none;z-index:8000}
.poto{position:absolute;left:50%;top:92%;width:11%;
  transform:translate(-50%,-100%);
  transition:left 2s linear, top 2s linear;z-index:8000}
.poto img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 3px 5px rgba(40,30,16,.36))}
.poto.flip img{transform:scaleX(-1)}
.poto.walk img{animation:potoStep .44s ease-in-out infinite}
@keyframes potoStep{0%,100%{transform:translateY(0)}50%{transform:translateY(-7%)}}
.poto.flip.walk img{animation-name:potoStepF}
@keyframes potoStepF{0%,100%{transform:scaleX(-1) translateY(0)}
                     50%{transform:scaleX(-1) translateY(-7%)}}

/* もくもく（思い出しているところ）*/
.think{position:absolute;left:78%;bottom:88%;width:190px;max-width:44vw;
  background:var(--paper);border-radius:16px;padding:10px 13px;
  box-shadow:0 5px 16px rgba(40,32,20,.26);
  opacity:0;transform:translateY(6px) scale(.92);transform-origin:0 100%;
  transition:opacity .4s ease, transform .4s cubic-bezier(.2,1.3,.4,1)}
.think.on{opacity:1;transform:none}
.think p{margin:0;font-size:12px;font-weight:700;line-height:1.6;color:var(--ink)}
.think i{position:absolute;left:10px;border-radius:50%;background:var(--paper);
  box-shadow:0 3px 8px rgba(40,32,20,.2)}
.think i:nth-of-type(1){width:13px;height:13px;bottom:-9px}
.think i:nth-of-type(2){width:7px;height:7px;bottom:-20px;left:4px}

.room.idle .poto img,.room.idle .pool,.room.idle .smoke i,
.room.idle .fanhead,.room.idle .fanblade,.room.idle .lavab,
.room.idle .swing,.room.idle .swing2{animation-play-state:paused}

@media(max-width:640px){
  .poto{width:13%}
  .think{width:150px;padding:8px 10px;border-radius:13px}
  .think p{font-size:10.5px;line-height:1.5}
  .think i:nth-of-type(1){width:10px;height:10px;bottom:-7px}
  .think i:nth-of-type(2){width:6px;height:6px;bottom:-16px}
}
@media(prefers-reduced-motion:reduce){ .poto{transition:none} .poto.walk img{animation:none} }