/* ⏳ The run waits for what it will show and sound (js/loadgate.js,
   2026-09-28). A card over whatever screen the launch came from, or over the
   held run: the piece's title, a bar, and what is still coming. Above the
   in-play controls (40) and a duel's overlays (44), under the tour and the
   toasts (60). Its own stylesheet, per the standing rule for a new feature. */
#loadgate {
  position: fixed; inset: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(4, 5, 10, .5);
  opacity: 0; transition: opacity .15s ease;
  color: #e8ecf5;
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
#loadgate.on { opacity: 1; }

.lg-card {
  width: min(100%, 400px);
  text-align: center;
  padding: 18px 20px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #171a28, #10121c);
  border: 1px solid rgba(120,140,190,.28);
  box-shadow: 0 22px 60px rgba(0,0,0,.6);
}
.lg-title {
  font-size: 18px; font-weight: 800; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lg-bar {
  margin-top: 14px; height: 10px; border-radius: 6px; overflow: hidden;
  background: rgba(255,255,255,.1);
}
.lg-fill {
  height: 100%; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, #34d3ff, #7dffb2);
  transition: width .12s linear;
}
.lg-row {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 8px; font-size: 13px; font-weight: 600; color: #aab3d6;
}
.lg-pct { font-variant-numeric: tabular-nums; }
.lg-trouble { margin-top: 14px; font-size: 14px; color: #ffc46a; }
.lg-trouble p { margin: 0 0 4px; }
.lg-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lg-btns .small-btn { margin: 6px 0 0; padding: 8px 18px; font-size: 14px; }
.lg-cancel {
  margin-top: 12px; padding: 4px 10px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: #8f98c0; text-decoration: underline;
}
.lg-cancel:hover { color: #c8cff0; }