/*
  Dodo's Magnetic Mess — scene-specific styling.
  Shared chrome (topbar, speech bubble, character states, living
  background decor, tile float/correct/wrong animations) lives in
  games/shared/game-shell.css — this file covers the playroom backdrop,
  the metal-object tile look, and the decorative magnet anchor.
*/

#gameStage{
  background:
    radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--gold) 45%, transparent), transparent 42%),
    radial-gradient(circle at 12% 90%, color-mix(in srgb, var(--purple) 35%, transparent), transparent 46%),
    linear-gradient(165deg, #EFE6FF 0%, #DCEBFF 55%, #FFF3DA 100%);
}

.env-shelf{ opacity:0.7; }
.env-rug{ transform:translateX(-50%); }

#dodoChar{
  left:4%; top:8%; width:min(20vw,128px); height:min(20vw,128px);
}
#dodoChar .speech-bubble-game{
  left:100%; top:50%; margin-left:14px; right:auto; bottom:auto;
  transform-origin:left center; transform:translateY(-50%) scale(0.92);
}
#dodoChar .speech-bubble-game.is-visible{ transform:translateY(-50%) scale(1); }
#dodoChar .speech-bubble-game::after{ content:none; }

/* Decorative magnet the objects visually "belong" to — pulses when a
   correct pick sticks, purely cosmetic (pointer-events:none). */
.magnet-anchor{
  position:absolute; right:5%; top:9%; z-index:9; pointer-events:none;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,0.2));
  animation:magnet-idle 2.6s ease-in-out infinite;
}
.magnet-emoji{ display:block; font-size:clamp(2.4rem,6vw,3.6rem); line-height:1; }
@keyframes magnet-idle{ 0%,100%{ transform:rotate(-4deg);} 50%{ transform:rotate(4deg);} }
.magnet-anchor.is-catching{ animation:magnet-catch 0.6s ease; }
@keyframes magnet-catch{
  0%{ transform:scale(1) rotate(-4deg);} 40%{ transform:scale(1.35) rotate(6deg);}
  70%{ transform:scale(0.95) rotate(-3deg);} 100%{ transform:scale(1) rotate(-4deg);}
}

#objectField{ position:absolute; inset:0; z-index:4; }

.metal-tile-wrap{ width:clamp(66px,13vw,102px); height:clamp(66px,13vw,102px); }
.metal-tile{
  border-radius:22px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg,#E3E8EF,#AEB8C4);
  box-shadow:0 10px 0 rgba(0,0,0,0.16), 0 14px 24px -8px rgba(0,0,0,0.3), inset 0 -4px 0 rgba(0,0,0,0.1), inset 0 2px 0 rgba(255,255,255,0.6);
  font-size:clamp(1.9rem,5vw,2.7rem);
}

@media (max-width:600px){
  #dodoChar{ width:104px; height:104px; }
  .magnet-anchor{ right:4%; top:6%; }
}