/* Silly House — theme styles */
.scene.themed { background:linear-gradient(180deg,#F7EEDF 0%, #F2E4CE 58%, #E4D2B4 100%); }

.room { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(96vw,760px); aspect-ratio:1600/915; max-height:calc(100% - 74px);
  border-radius:18px; overflow:hidden; box-shadow:0 10px 26px rgba(30,42,74,.24);
  background:linear-gradient(180deg,#F6E7CF 0%, #F6E7CF 62%, #E3CDA6 63%, #D8BF93 100%); z-index:3; }
.room .scene-bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sillies { position:absolute; inset:0; z-index:4; }

.silly { position:absolute; transform:translate(-50%,-50%); aspect-ratio:1;
  min-width:56px; min-height:56px; background:none; border:none; padding:0;
  filter:drop-shadow(0 4px 8px rgba(30,42,74,.35)); transition:transform .16s; z-index:5; }
.silly img { width:100%; height:100%; object-fit:contain; pointer-events:none; }
.silly:active, .silly.pressing { transform:translate(-50%,-50%) scale(.9); }
.silly.hinting { animation:silly-hint .6s ease-in-out 3; }
@keyframes silly-hint { 0%,100%{transform:translate(-50%,-50%) rotate(0)} 30%{transform:translate(-50%,-50%) rotate(-8deg)} 70%{transform:translate(-50%,-50%) rotate(8deg)} }
.silly.found { pointer-events:none; }
.silly.found::after { content:''; position:absolute; inset:-16%; border:5px solid var(--sage);
  border-radius:50%; box-shadow:0 0 0 3px rgba(255,251,245,.85); animation:ring-in .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes ring-in { 0%{transform:scale(.4); opacity:0} 100%{transform:scale(1); opacity:1} }
.silly.popping { animation:silly-pop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes silly-pop { 0%{transform:translate(-50%,-50%) scale(1)} 45%{transform:translate(-50%,-50%) scale(1.22)} 100%{transform:translate(-50%,-50%) scale(1)} }

.twinkle { position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; pointer-events:none; z-index:6;
  background:radial-gradient(circle, rgba(255,251,245,.95) 0%, rgba(232,195,106,.7) 45%, transparent 70%);
  border-radius:50%; animation:twinkle-out .65s ease-out forwards; }
@keyframes twinkle-out { 0%{transform:scale(.3); opacity:1} 100%{transform:scale(1.6); opacity:0} }

@media (prefers-reduced-motion:reduce) { .silly.hinting, .silly.popping { animation:none } }
@media (max-width:520px) { .silly { min-width:52px; min-height:52px; } }