/*
  Gerry's Tall Trouble — 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 outdoor obstacle
  clearing backdrop and the gate-tile look.
*/

#gameStage{
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, #fff 30%, transparent), transparent 42%),
    linear-gradient(180deg, #9FD8F5 0%, #BFE9D0 55%, #E8DDA8 100%);
}
#gameStage::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:14%; z-index:1;
  background:linear-gradient(to top, color-mix(in srgb, #3E9B58 70%, black 8%), transparent);
  pointer-events:none;
}

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

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

.gate-tile-wrap{ width:clamp(70px,15vw,116px); height:clamp(92px,19vw,150px); }
.gate-tile{ display:block; }
.gate-tile svg{ width:100%; height:100%; display:block; overflow:visible; }

@media (max-width:600px){
  #gerryChar{ width:108px; height:108px; }
}