/*
  Milo's Gravity Machine — scene-specific styling.
  Shared chrome (topbar, speech bubble, character states, living
  background decor, the base tappable-object button) lives in
  games/shared/game-shell.css — this file covers Milo's workshop
  backdrop, the "zero gravity" look during play, the drifting-item
  tile design, the toolbox catch-target, and the Big Reset lever.

  Note: unlike the other games' objects (which float with a shared
  CSS @keyframes loop), .gravity-item is positioned with `transform`
  set directly by gravity-machine.js every frame, so it can be frozen
  and redirected toward the toolbox the instant it's tapped. No
  @keyframes animates `transform` on .gravity-item for that reason —
  a CSS animation and JS both driving the same property would fight.
*/

#gameStage{
  background:
    radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--gold) 40%, transparent), transparent 44%),
    radial-gradient(circle at 8% 92%, color-mix(in srgb, var(--blue) 32%, transparent), transparent 48%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 34px),
    linear-gradient(165deg, #E4EEFF 0%, #CFE3FF 55%, #FFEFCF 100%);
  transition:background-color .6s ease;
}

/* ---------- "zero gravity" atmosphere while play is active ----------
   A faint cool overlay plus a couple of slow-tumbling decorative
   parts (a stray gear, a stray screw) so the workshop reads as
   mid-malfunction without ever crowding the tappable items. */
#gameStage.zero-g::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 70%);
}
#gameStage.settling::before{ opacity:0.4; transition:opacity .6s ease; }
#gameStage.gravity-restored::before{ opacity:0; transition:opacity .6s ease; }

.workshop-gear{ font-size:clamp(1.6rem,4vw,2.4rem); opacity:0.5; }
.gravity-restored .workshop-gear,
.settling .workshop-gear{ animation-play-state:paused; opacity:0.3; transition:opacity .6s ease; }

#miloChar{
  left:4%; top:15%; width:min(29vw,182px); height:min(29vw,182px); z-index:10;
}
#miloChar .speech-bubble-game{
  left:100%; top:50%; margin-left:14px; right:auto; bottom:auto;
  /* An explicit width (rather than leaving this "auto") matters here:
     with left:100% on a narrow positioned parent, the browser's
     shrink-to-fit calculation for an auto-width box has ~0px of
     "available" space to work with and collapses to one word per
     line on anything longer than a couple of words. A real width
     sidesteps that calculation entirely and wraps normally. */
  width:min(62vw,260px);
  transform-origin:left center; transform:translateY(-50%) scale(0.92);
}
#miloChar .speech-bubble-game.is-visible{ transform:translateY(-50%) scale(1); }
#miloChar .speech-bubble-game::after{ content:none; }

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

/* ---------- the drifting workshop items ---------- */
.gravity-item-wrap{ width:clamp(64px,12.5vw,98px); height:clamp(64px,12.5vw,98px); }
.gravity-item{
  border-radius:20px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg,#FFFFFF,#D7E6FA);
  box-shadow:0 10px 0 rgba(0,0,0,0.14), 0 14px 22px -8px rgba(0,0,0,0.28), inset 0 -4px 0 rgba(0,0,0,0.08), inset 0 2px 0 rgba(255,255,255,0.8);
  font-size:clamp(1.8rem,4.8vw,2.6rem);
  will-change:transform;
}

/* ---------- the toolbox: a purely decorative catch-target ----------
   Never interactive — gravity-machine.js only reads its position to
   aim the "caught" tween and the confetti burst. */
.toolbox{
  position:absolute; left:50%; bottom:3%; transform:translateX(-50%);
  width:clamp(64px,13vw,92px); height:clamp(46px,9vw,64px); z-index:6; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(1.8rem,4.6vw,2.4rem);
  filter:drop-shadow(0 8px 10px rgba(0,0,0,0.22));
}

/* ---------- the Big Reset lever ---------- */
.big-reset-lever{
  position:absolute; right:6%; bottom:6%; z-index:12;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  opacity:0; transform:translateY(16px) scale(0.9); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.big-reset-lever.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.big-reset-lever .lever-label{
  background:var(--surface); border:2px solid var(--line); border-radius:999px;
  padding:4px 12px; font-weight:800; font-size:0.8rem; box-shadow:0 3px 0 var(--line);
}
.lever-btn{
  width:min(26vw,110px); height:min(26vw,110px); border-radius:50%; border:none; cursor:pointer;
  background:radial-gradient(circle at 35% 30%, #FF7A6B, var(--coral));
  box-shadow:0 10px 0 color-mix(in srgb, var(--coral) 60%, black), 0 16px 26px -8px rgba(0,0,0,0.4);
  font-size:clamp(2.2rem,7vw,3.2rem); display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  animation:lever-beckon 1.6s ease-in-out infinite;
}
.lever-btn:focus-visible{ outline:3px solid var(--blue); outline-offset:4px; }
.lever-btn:disabled{ cursor:default; animation:none; opacity:0.85; }
@keyframes lever-beckon{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.big-reset-lever.is-pulled .lever-btn{ animation:lever-pulled .5s ease forwards; }
@keyframes lever-pulled{
  0%{ transform:scale(1) rotate(0deg); } 40%{ transform:scale(0.86) rotate(-14deg); }
  70%{ transform:scale(1.08) rotate(6deg); } 100%{ transform:scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion:reduce){
  .lever-btn{ animation:none; }
  .big-reset-lever.is-pulled .lever-btn{ animation:none; }
}

@media (max-width:600px){
  #miloChar{ width:148px; height:148px; }
  /* At this size Milo's fixed 104px width leaves much less room to his
     right than the desktop min(20vw,128px) box did, so the bubble's
     default width (sized for the wider box) was running past the
     stage's right edge and getting clipped by its overflow:hidden.
     A smaller cap keeps it inside the stage on every phone width from
     320px up. */
  #miloChar .speech-bubble-game{ width:min(50vw,180px); }
  .big-reset-lever{ right:4%; bottom:4%; }
  .toolbox{ bottom:2%; }
}