/* Matchmaking overlay — a calm modal that floats above the page that launched it (today only
   La Esquina, via esquina.js). The page beneath stays visible (dimmed) and untouched; only a
   match or a cancel dismisses it.

   Palette follows the app's navy language (css/home.css's #lobby block, mirrored in
   css/esquina.css): navy surfaces, the cool off-white text, the blue-grey muted tone and the
   one gold whisper for the title. */

.mm-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(4, 11, 30, .66);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .2s ease;
}
.mm-overlay.is-in { opacity: 1; }
.mm-overlay.is-out { opacity: 0; }

.mm-panel {
  width: min(360px, 100%); text-align: center;
  padding: 26px 26px 22px; border-radius: 20px;
  background: linear-gradient(165deg, #17376e, #0b2352);
  border: 1px solid rgba(151, 182, 255, .16);
  box-shadow: 0 30px 70px rgba(4, 11, 30, .6), inset 0 1px 0 rgba(151, 182, 255, .14);
  color: #eaf1ff;
  transform: translateY(8px); transition: transform .2s ease;
}
.mm-overlay.is-in .mm-panel { transform: translateY(0); }

.mm-loader { display: flex; justify-content: center; margin-bottom: 16px; }
.mm-loader.hidden { display: none; }
.mm-title { margin: 0; font-size: 19px; font-weight: 800; color: #d9b46a; }
.mm-sub { margin: 8px 0 0; font-size: 14px; color: #9db0d6; line-height: 1.5; }
/* The remaining-seconds line during the short wait for another human. Quieter than .mm-sub,
   which carries the sentence that explains what the number means. */
.mm-count { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: #6f83aa; }
.mm-count.hidden { display: none; }

.mm-cancel {
  margin-top: 20px; cursor: pointer; font: inherit; font-weight: 800; font-size: 15px;
  color: #eaf1ff; padding: 11px 26px; border-radius: 12px;
  background: #112a5e; border: 1px solid rgba(151, 182, 255, .16);
  transition: background .15s ease, border-color .15s ease;
}
.mm-cancel:hover { background: #17376e; border-color: rgba(151, 182, 255, .34); }
.mm-cancel:focus-visible { outline: 2px solid #7fa8ff; outline-offset: 2px; }
.mm-cancel.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mm-overlay, .mm-panel { transition: none; }
}