html,body{height:100%;margin:0;font-family:Arial,Helvetica,sans-serif;background:#0b1220;color:#fff}
body:not(.app-shell){overflow:hidden}
#game-container{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden}
#overlay-message{font-size:16px}
.btn{padding:6px 10px;border-radius:4px;border:none}

#cannon-wrapper {
  position: absolute;
  /* Position will be updated dynamically by JavaScript based on physics */
  bottom: 40px; /* Initial value, will be updated on resize */
  /* The physics cannon's x is 110. We center the wrapper around this. */
  left: 9px; /* 110 - (202px / 2) */
  width: 202px;
  height: 202px;
  pointer-events: none;
  transition: bottom 0.2s ease-out; /* Smooth transition when resizing */
}

#cannon-barrel-img {
  /* Pivot point calculated from the 'pivot' id in cannon.svg (cx=256, cy=300 on a 512x512 viewbox) */
  transform-origin: 50% 58.6%;
  z-index: 10;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
}

#cannon-base-img {
  z-index: 20; /* The base should be on top of the barrel's joint. */
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
}