/* A leaf held in a small glass compass, above Tools and clear of the nearby row. */
.touch-stick { display: none; --stick-leaf: #cfdfab; --stick-ink: #294e35; }
body[data-form=shiny] .touch-stick { --stick-leaf: #f3c3dc; --stick-ink: #733d59; }
@media (any-pointer: coarse) {
  body[data-compact=true][data-mode=explore].live-3d .touch-stick {
    /* Stay in the same viewport slot when a panel changes the scene layout. */
    position: fixed;
    z-index: 18;
    left: calc(20px + var(--safe-left, 0px));
    top: calc(100svh - 174px - var(--safe-bottom, 0px));
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    padding: 0;
    border: 1px solid #d2dfb266;
    border-radius: 50%;
    color: var(--stick-leaf);
    background: #14392bbd;
    box-shadow: inset 0 0 0 9px #cfdfab08, 0 6px 20px #02181040;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  .touch-stick::before { content: ''; position: absolute; inset: 12px; border: 1px dotted currentColor; border-radius: 50%; opacity: .35; }
  .touch-stick-leaf {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 50% 8% 50% 50%;
    background: var(--stick-leaf); color: var(--stick-ink);
    box-shadow: 0 3px 9px #02181066;
    transform: translate(var(--stick-x, 0px), var(--stick-y, 0px));
    pointer-events: none;
  }
  .touch-stick-leaf svg { width: 24px; height: 24px; }
  .touch-stick.is-held { border-color: var(--stick-leaf); background: #14392bf0; }
  .touch-stick:focus-visible { outline: 2px solid var(--stick-leaf); outline-offset: 4px; }
  body.travelling .touch-stick, body.forest-unavailable .touch-stick,
  body:has(dialog[open], #tutorial-overlay, #forest-kit[open]) .touch-stick { visibility: hidden; pointer-events: none; }
}
@media (any-pointer: coarse) and (orientation: portrait) {
  /* Reserve a stable control band. Content yields to the thumb, even during a drag. */
  body[data-compact=true] .context-actions { bottom: calc(190px + var(--safe-bottom, 0px)); }
  body[data-compact=true] .forest-notice { bottom: calc(190px + var(--safe-bottom, 0px)); }
  body[data-compact=true].context-actions-visible .forest-notice { bottom: calc(258px + var(--safe-bottom, 0px)); }
  body[data-compact=true].quick-camera-lift .quick-camera-dock { bottom: calc(87px + var(--safe-bottom, 0px)); }
}
@media (any-pointer: coarse) and (orientation: landscape) {
  body[data-compact=true] .context-actions { max-width: calc(100% - 256px - var(--safe-left, 0px) - var(--safe-right, 0px)); }
}