/* Drone Dash (fly.html, docs/96): what it has that Cara Runs (css/run.css) does not. */

#fly-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

/* the gates flown: one big number at the top, the distance under it */
.fhud__gates { position: absolute; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; pointer-events: none; }
.fhud__gates b { font: 900 clamp(2.6rem, 9vw, 4.2rem)/1 var(--font-display); letter-spacing: 0.04em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 22px rgba(0, 0, 0, 0.35); }
.fhud__gates b.is-pop { animation: fpop 0.28s ease-out; }
.fhud__gates small { font: 700 0.9rem/1 var(--font-body); color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums; }
/* the power-ups' badges go under the gate count (Cara Runs has them where this count is) */
#fly-powers { top: calc(max(14px, env(safe-area-inset-top)) + clamp(4.2rem, 11vw, 5.6rem)); }
@keyframes fpop { 0% { transform: scale(1.35); color: #ffe7a8; } 100% { transform: scale(1); } }

/* waiting for the first tap: the hint sits a little higher and breathes */
.rhud__hint.is-ready { bottom: 26%; font: 900 clamp(1.3rem, 4.4vw, 1.9rem)/1.15 var(--font-display); letter-spacing: 0.05em; color: #fff; animation: fready 0.9s ease-in-out infinite alternate; }
@keyframes fready { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.06); } }

.rhud__banner.is-ring { background: linear-gradient(90deg, rgba(200, 140, 20, 0.85), rgba(255, 220, 110, 0.85)); color: #3a2200; text-shadow: none; }
.rhud__banner.is-gates { background: rgba(8, 20, 14, 0.72); border: 1px solid rgba(255, 210, 150, 0.35); }

/* the hangar's drones: a swatch of each one's colours in place of a face */
.ritem__swatch { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 1.6rem; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); }

/* a narrow screen: the count to the top left (where Cara Runs keeps its score), clear of the buttons on the right */
@media (max-width: 560px) {
  .fhud__gates { left: max(16px, env(safe-area-inset-left)); transform: none; justify-items: start; }
  #fly-powers { left: max(16px, env(safe-area-inset-left)); transform: none; }
}

@media (prefers-reduced-motion: reduce) { .fhud__gates b.is-pop, .rhud__hint.is-ready { animation: none; } }