:root {
  --fly-stick-right: calc(16px + env(safe-area-inset-right, 0px));
  --fly-zoom-left: calc(16px + env(safe-area-inset-left, 0px));
  --fly-pad-bottom: calc(var(--dock, 72px) + 12px);
  --fly-stick-size: 104px;
}
#fly-canvas { position: fixed; left: 50%; top: 50%; width: 256px; height: 256px; margin: -128px 0 0 -128px; pointer-events: none; }
#fly-canvas[hidden], #fly-pad[hidden] { display: none; }
#fly-btn[aria-pressed="false"] { opacity: 1; }
#fly-btn.fly-float { position: fixed; top: 118px; left: 12px; background: var(--paper, #f0e4c4); border: 2px solid var(--edge, #8a6f3e); font-weight: 600; }
/* The pad spans the width but ignores clicks, so only the two controls at its ends block the map. */
#fly-pad { position: fixed; z-index: 20; left: var(--fly-zoom-left); right: var(--fly-stick-right); bottom: calc(var(--fly-pad-bottom) + var(--fly-card-lift, 0px)); display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.fly-zoom, .fly-stick { pointer-events: auto; background: var(--paper, #f0e4c4); border: 2px solid var(--edge, #8a6f3e); box-shadow: var(--shadow); }
.fly-zoom { border-radius: var(--r, 12px); overflow: hidden; }
.fly-zoom { display: flex; flex-direction: column; }
.fly-zoom button { font-weight: 600; border-left: 0; }
.fly-zoom button + button { border-top: 2px solid var(--edge, #8a6f3e); }
.fly-stick { position: relative; display: flex; align-items: center; justify-content: center; width: var(--fly-stick-size); height: var(--fly-stick-size); border-radius: 50%; opacity: .92; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.fly-stick:active { cursor: grabbing; }
.fly-knob { width: 44px; height: 44px; border-radius: 50%; background: #5a4522; border: 2px solid var(--paper, #f0e4c4); pointer-events: none; }
#places:not([hidden]) ~ #fly-pad .fly-zoom { visibility: hidden; }
@media (max-width: 600px) {
  :root { --fly-stick-size: 96px; }
  #places:not([hidden]) ~ #fly-pad { display: none; }
  #card:not([hidden]) ~ #fly-pad { --fly-card-lift: 88px; }
}