/* Shared layout for the whats_wrong family (WW01).
 * Themes supply only their own palette via a per-game stylesheet. */
.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); 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; } }

/* --- intro panel box (base-branch gap) -------------------------------------
 * engine2.css ships only the <=620px override for .intro-panel and never gives
 * the panel a box, so on a phone  is applied to a
 * STATIC block and drags the whole panel — Play button included — off the left
 * edge of the screen. Restoring the intended absolutely-positioned card here
 * keeps the fix inside this family instead of editing shared engine2.css.
 * Upstream engine2.css should carry this; flagged for the base branch. */
.intro-panel { position:absolute; z-index:5; right:4%; bottom:6%;
  width:min(420px, calc(100vw - 24px));
  background:rgba(255,251,245,.92); border-radius:22px; padding:18px 20px 16px;
  text-align:center; box-shadow:0 10px 30px rgba(30,42,74,.18); }
.intro-panel h1 { font-size:clamp(1.7rem,5.6vw,2.5rem); color:var(--navy); margin:0; }