/* ═══════════════════════════════════════════════════════════════
   UC-MODALS — Modal de búsqueda de partida (compartido home + sala)
   Se carga en base.html. Markup: templates/partials/_matchmaking_modal.html
   ═══════════════════════════════════════════════════════════════ */
/* ============================================================
   MODAL DE MATCHMAKING — según referente 2026-07-20
   ============================================================ */
#matchmakingModal .modal-dialog { max-width: 440px; }
#matchmakingModal .modal-content {
    background: #0d0e1f;
    border: 1px solid var(--uc-line-strong);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 40px 90px -28px rgba(0, 0, 0, .92);
}

/* Header violeta */
.uc-mm-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0 !important;
    padding: 14px 16px !important;
    background:
        radial-gradient(300px 40px at 30% 0%, rgb(255 255 255 / 16%), transparent 70%),
        linear-gradient(120deg, #6d4bd6 0%, #5a37c4 55%, #3d2597 100%);
}
.uc-mm-header-ico {
    display: grid; place-items: center;
    width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
}
.uc-mm-header-ico svg { width: 19px; height: 19px; }
.uc-mm-header-text { flex: 1; min-width: 0; }
.uc-mm-header .modal-title {
    margin: 0;
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.15;
}
.uc-mm-header-sub { margin: 1px 0 0; color: rgba(255, 255, 255, .72); font-size: .8rem; }
.uc-mm-close {
    display: grid; place-items: center;
    width: 36px; height: 36px; flex: 0 0 36px;
    border-radius: 10px;
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}
.uc-mm-close:hover { background: rgba(255, 255, 255, .22); }
.uc-mm-close svg { width: 18px; height: 18px; }

/* Body */
.uc-mm-body { padding: 0 20px 18px !important; color: var(--uc-ink); }
/* Banner full-bleed: rompe el padding del body, altura acotada y fade inferior */
.uc-mm-banner {
    margin: 0 -20px 4px;
    line-height: 0;
}
.uc-mm-banner img,
.uc-mm-banner video {
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: center 44%;
    display: block;
    -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
}
.uc-mm-title { text-align: center; font-weight: 900; font-size: 1.35rem; margin-top: 0; color: #ffffff; }
/* solo en el estado "buscando" el título se funde con la base del banner */
#modal_matchmaking_searching .uc-mm-title { margin-top: -28px; }
.uc-mm-subtitle { text-align: center; color: var(--uc-ink-faint); font-size: .84rem; margin: 3px 0 16px; }

/* Stat cards */
.uc-mm-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.uc-mm-stat {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px 12px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(124, 92, 255, .13), rgba(124, 92, 255, .02));
    border: 1px solid rgba(147, 130, 255, .3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.uc-mm-stat-green {
    background: linear-gradient(160deg, rgba(46, 230, 168, .13), rgba(46, 230, 168, .02));
    border-color: rgba(46, 230, 168, .4);
}
.uc-mm-stat-top { display: flex; align-items: center; gap: 11px; }
.uc-mm-stat-ico {
    display: grid; place-items: center;
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 22px;
    background: linear-gradient(140deg, #8b5cf6, #5b3bd6);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -6px rgb(0 0 0 / 85%);
}
.uc-mm-stat-green .uc-mm-stat-ico {
    border-radius: 50%;
    background: linear-gradient(140deg, #46eeb2, #1eb583);
}
.uc-mm-stat-ico svg { width: 17px; height: 17px; }
.uc-mm-stat b {
    font-weight: 900;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    color: var(--uc-ink);
    line-height: 1;
}
.uc-mm-stat b small { font-size: .58em; font-weight: 700; color: var(--uc-ink-dim); margin-left: 2px; }
.uc-mm-stat-green b { color: var(--uc-green); }
.uc-mm-stat-lbl { font-size: 1rem; color: var(--uc-ink-faint); font-weight: 600; }

/* Frase / tip */
.uc-mm-phrase {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 13px;
    background: var(--uc-bg2);
    border: 1px solid var(--uc-line);
    border-left: 3px solid var(--uc-accent);
    color: var(--uc-ink);
    font-size: .86rem;
}
.uc-mm-phrase-ico {
    display: grid; place-items: center;
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 50%;
    background: var(--uc-accent-soft);
    color: var(--uc-accent-2);
}
.uc-mm-phrase-ico svg { width: 17px; height: 17px; }

/* Estado encontrado */
.uc-mm-found-check {
    width: 72px; height: 72px;
    margin: 20px auto 16px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--uc-green);
    background: rgba(46, 230, 168, .1);
    border: 2px solid rgba(46, 230, 168, .4);
}
.uc-mm-found-check svg { width: 36px; height: 36px; }
.uc-mm-opp {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; margin: 4px 0 8px;
}
.uc-mm-opp-name { font-size: 1.25rem; font-weight: 800; color: var(--uc-ink); }
.uc-mm-opp-rating {
    padding: 4px 12px; border-radius: 999px;
    background: var(--uc-accent-soft); border: 1px solid var(--uc-line-strong);
    font-weight: 800; font-variant-numeric: tabular-nums; color: var(--uc-ink);
}
.uc-mm-redirect { text-align: center; color: var(--uc-ink-faint); font-size: .9rem; margin: 0; }

/* Footer */
.uc-mm-footer {
    border: 0 !important;
    padding: 12px 20px 20px !important;
    justify-content: center !important;
}
.uc-mm-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 300px;
    padding: 12px 24px;
    border-radius: 14px;
    border: 1px solid rgba(255, 90, 110, .5);
    background:
        radial-gradient(220px 20px at 50% 0%, rgb(255 255 255 / 22%), transparent 70%),
        linear-gradient(180deg, #ff4d6d, #e0344f);
    color: #fff;
    font-weight: 800;
    font-size: 1.02rem;
    cursor: pointer;
    box-shadow: inset 0 -8px 16px rgba(120, 10, 40, .35), 0 10px 24px -10px rgba(224, 52, 79, .6);
    transition: filter .15s ease, transform .15s ease;
}
.uc-mm-cancel:hover { filter: brightness(1.08); transform: translateY(-1px); }
.uc-mm-cancel svg { width: 18px; height: 18px; }
.uc-mm-close svg, .uc-mm-cancel svg { pointer-events: none; }

@media (max-width: 560px) {
    .uc-mm-stats { grid-template-columns: 1fr; }
}

/* ═══════ Proporción estética de TODOS los modales en móvil ═══════
   Aire a los lados y arriba/abajo, ancho y alto acotados (scroll interno
   si el contenido es alto). Aplica a matchmaking, game-over, etc. */
@media (max-width: 560px) {
  .modal-dialog {
    max-width: min(430px, calc(100vw - 34px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: max(20px, calc(env(safe-area-inset-top) + 10px)) !important;
    margin-bottom: 20px !important;
  }
  .modal-content { max-height: calc(100dvh - 46px); }
  .modal-body { overflow-y: auto; overflow-x: hidden; }
  /* Matchmaking: compacto para que el modal no sea enorme (banner + stats en fila) */
  .uc-mm-banner video, .uc-mm-banner img { height: 104px !important; }
  .uc-mm-body { padding-top: 12px !important; padding-bottom: 14px !important; }
  .uc-mm-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .uc-mm-stat { padding: 11px 6px !important; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
  .uc-mm-stat-top { flex-direction: column !important; align-items: center !important; gap: 5px !important; }
  .uc-mm-stat-ico { width: 32px !important; height: 32px !important; flex: none !important; }
  .uc-mm-stat-ico svg { width: 15px !important; height: 15px !important; }
  .uc-mm-stat-lbl { margin-top: 2px !important; font-size: 11px !important; }
}