/* scenes/steercanopy.js: steer the canopy down to the island */
.gscene-steercanopy .gscene-stage { height: clamp(440px, 70vh, 640px); cursor: crosshair; outline-offset: -3px;
  background: linear-gradient(180deg, #16305e 0%, #3f6aa8 45%, #8fb3dd 75%, #f0c99a 100%); }
.steer-hud { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.steer-hud dl { margin: 0; display: flex; gap: 6px; }
.steer-hud dl > div { padding: 6px 10px; border-radius: 12px; background: rgba(10, 15, 28, 0.62); border: 1px solid var(--line); text-align: right; min-width: 64px; }
.steer-hud dt { font: 800 0.62rem var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.steer-hud dd { margin: 0; font: 900 1.05rem var(--display); color: #fff; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.steer-arrow { display: inline-block; font-style: normal; color: var(--gold); transition: transform 0.15s linear; }
.steer-state { padding: 4px 12px; border-radius: 99px; font: 800 0.8rem var(--display); color: #0a0f1c; background: var(--gold); }
.steer-state:empty { display: none; }
.steer-state[data-state="spiral"], .steer-state[data-state="stall"] { background: var(--red); color: #fff; }
.steer-state[data-state="auto"] { background: rgba(255, 255, 255, 0.85); }
.steer-result { position: absolute; left: 50%; top: 42%; z-index: 4; margin: 0; padding: 12px 22px; border-radius: 18px; transform: translate(-50%, -50%) scale(0.85);
  font: 900 clamp(1.2rem, 3.4vw, 1.9rem) var(--display); color: #fff; background: rgba(10, 15, 28, 0.78); border: 2px solid var(--grass);
  opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; text-align: center; max-width: 86%; }
.steer-result.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.steer-result[data-kind="hurt"] { border-color: var(--torch); }
.steer-result[data-kind="missed"] { border-color: var(--red); }
.steer-pad { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 14px 12px 14px;
  background: linear-gradient(180deg, transparent, rgba(8, 11, 22, 0.7) 50%); }
.steer-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: 44px; border-radius: 14px; cursor: pointer; touch-action: none;
  font: 800 0.9rem var(--display); color: #fff; background: rgba(28, 38, 64, 0.88); border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); transition: transform 0.08s, background 0.12s; -webkit-user-select: none; user-select: none; }
.steer-btn kbd { font: 900 0.72rem var(--display); padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25); }
.steer-btn.on { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); background: #2f6fd6; }
.steer-both.on { background: #c9532c; }
@media (max-width: 720px) {
  .steer-pad { gap: 6px; padding: 10px 8px; }
  .steer-btn { padding: 8px 10px; font-size: 0.8rem; }
  .steer-btn kbd { display: none; }
  .steer-hud dl > div { min-width: 0; padding: 5px 8px; }
  .steer-hud dd { font-size: 0.92rem; }
}