/* ==========================================================================
   css/fly.css — HM02 Fly (DECISIONS 308)
   --------------------------------------------------------------------------
   The "Fly" button in the view bars of the Town Map and the location view,
   the Fly map modal (the towns you have visited per region, one big button
   each) and the fly-over: a sky flash with a pixel bird sweeping up across
   the screen (~800 ms, gone under prefers-reduced-motion), like the take-off
   of Fly in the games. js/ui/fly.js adds this file when index.html has no
   <link> for it. Colours come from the tokens in css/base.css.
   ========================================================================== */

/* The button in the view bar ---------------------------------------------- */
.fly-btn { position: relative; }
.fly-btn.locked { opacity: 0.7; cursor: help; }
/* The small lock rides on the feather's corner, so a phone (label hidden) still sees it is closed. */
.fly-btn .fly-btn-lock { margin-left: -3px; vertical-align: 4px; }

/* The Fly map modal ----------------------------------------------------------- */
.fly-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.fly-intro-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(90, 169, 255, 0.18);
  color: #a7cdff;
}
.fly-intro-title { font-weight: 700; }
.fly-lock {
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(245, 180, 0, 0.12);
  border: 1px solid rgba(245, 180, 0, 0.35);
  color: #ffd97a;
  font-weight: 600;
}
.fly-lock svg, .fly-region-lock svg { vertical-align: -2px; }

.fly-region + .fly-region { margin-top: 14px; }
.fly-region-title {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.fly-region-title .muted { text-transform: none; letter-spacing: 0; font-weight: 600; }
.fly-region-lock { margin: -4px 0 8px; }

.fly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.fly-town {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 9px 12px;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: var(--panel-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.fly-town:hover:not(:disabled) {
  background: var(--panel-3);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.fly-town:focus-visible { outline: none; box-shadow: var(--focus); }
.fly-town:disabled { cursor: not-allowed; opacity: 0.5; }
/* Where you stand: marked in the accent, readable although it cannot be picked. */
.fly-town.here { opacity: 1; background: var(--accent-soft); border-color: var(--accent); cursor: default; }
.fly-town-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(90, 169, 255, 0.18);
  color: #a7cdff;
}
.fly-town.gym .fly-town-icon { background: rgba(186, 104, 200, 0.25); color: #e1b3ec; }
.fly-town.here .fly-town-icon { background: rgba(214, 69, 69, 0.28); color: var(--accent-light); }
.fly-town-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.fly-town-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fly-town-sub { font-size: 0.75rem; color: var(--muted); }
.fly-town.here .fly-town-sub { color: var(--accent-light); font-weight: 600; }
.fly-town-pin { margin-left: auto; color: var(--accent-light); display: inline-flex; }
/* Waiting for the server: the town's icon bobs like a bird about to take off. */
.fly-town.loading .fly-town-icon { animation: fly-bob 0.5s ease-in-out infinite alternate; }
@keyframes fly-bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* Phones: the modal takes the full width, one town per row. */
@media (max-width: 480px) {
  .modal-backdrop:has(> .modal.fly-modal) { padding: 8px; }
  .modal.fly-modal { max-width: none; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .fly-grid { grid-template-columns: 1fr; }
  .fly-intro .tag { display: none; }
}

/* The fly-over ---------------------------------------------------------------- */
.fly-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;          /* over the modal (1000) and the toasts (1100); gone after ~800 ms */
  overflow: hidden;
  pointer-events: none;
}
.fly-sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(214, 238, 255, 0.6), rgba(143, 211, 244, 0.28) 60%, rgba(143, 211, 244, 0) 100%);
  animation: fly-sky 0.8s ease both;
}
.fly-bird {
  position: absolute;
  left: 0;
  top: 0;
  color: #0e1424;
  filter: drop-shadow(0 8px 0 rgba(14, 20, 36, 0.22));
  animation: fly-cross 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) both;
}
.fly-bird svg { display: block; fill: currentColor; }
/* Two frames, wings up and wings down, swapped every 90 ms. */
.fly-frame-up, .fly-frame-down { animation: fly-flap 0.18s linear infinite; }
.fly-frame-down { animation-delay: -0.09s; }

@keyframes fly-sky {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}
/* In from the lower left, up over the middle, out at the top right. */
@keyframes fly-cross {
  0% { transform: translate(-140px, 72vh) scale(0.8) rotate(-6deg); }
  50% { transform: translate(calc(50vw - 52px), 36vh) scale(1.2) rotate(-10deg); }
  100% { transform: translate(calc(100vw + 40px), 2vh) scale(0.7) rotate(-14deg); }
}
@keyframes fly-flap {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fly-overlay { display: none; }
  .fly-town { transition: none; }
  .fly-town.loading .fly-town-icon { animation: none; }
}