/* =====================================================================
   Gegnersuche (app/matchmaking.js, matchmaking-view.js). Gleiche Familie wie
   die Rueckfrage zur laufenden Partie (running-game.css .rgp): links deine
   Raute (Profilbild), rechts die Raute, in der ein Gegner beschworen wird.
   Suchen: die drei Koenige ziehen schemenhaft vorbei, ein Licht laeuft um den
   Rand. Treffer (.is-found): der Gegner erscheint, eine Raute laeuft aus.
   Teal = Gegner (wie .run-dia.opp), Gold = du / Ranked.
   ===================================================================== */

@property --mm-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@keyframes mmFade { from { opacity: 0; } }
@keyframes mmOut { to { opacity: 0; } }
@keyframes mmRise { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes mmFromLeft { from { opacity: 0; transform: translateX(-12px); } }
@keyframes mmFromRight { from { opacity: 0; transform: translateX(12px); } }
@keyframes mmVsIn { from { opacity: 0; transform: rotate(45deg) scale(.6); } }
@keyframes mmTurn { to { --mm-turn: 360deg; } }
/* Drei Bilder, je ein Drittel versetzt: jedes taucht auf, steht, vergeht. */
@keyframes mmSeek {
  0%, 40%, 100% { opacity: 0; }
  10%, 28% { opacity: .38; }
}
@keyframes mmFoeIn { from { opacity: 0; transform: scale(1.16); filter: brightness(1.9); } }
@keyframes mmHit {
  from { opacity: .95; scale: 1; }
  to { opacity: 0; scale: 1.75; }
}
@keyframes mmVsPop { 45% { transform: rotate(45deg) scale(1.2); } }
@keyframes mmSwap { from { opacity: 0; transform: translateY(5px); } }
/* Treffer: der Abbrechen-Knopf fuellt sich in Teal, bis das Brett kommt. */
@keyframes mmGo { from { transform: scaleX(0); } }

.mmOverlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  place-items: center;
  padding: 20px 12px;
  overflow-y: auto;
  background: rgba(7, 8, 11, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.mmOverlay.show { display: grid; animation: mmFade .22s ease both; }
.mmOverlay.is-leaving { animation: mmOut .24s ease both; pointer-events: none; }

.mmPanel {
  position: relative;
  width: min(400px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 34px 28px 26px;
  text-align: center;
  background:
    linear-gradient(90deg, transparent, rgba(77, 208, 196, .55) 30%, rgba(216, 177, 90, .55) 70%, transparent) top / 100% 1px no-repeat,
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(77, 208, 196, .07), transparent 60%),
    linear-gradient(180deg, rgba(20, 23, 31, .97) 0%, rgba(9, 11, 15, .98) 100%);
  border: 1px solid rgba(216, 177, 90, .3);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(216, 177, 90, .07);
  animation: mmRise .32s cubic-bezier(.2, .8, .3, 1) both;
}
.mmPanel::before,
.mmPanel::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--mp-gold-2);
  pointer-events: none;
}
.mmPanel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.mmPanel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.mmClose { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; transition: opacity .2s ease; }

/* ---------- Du gegen ? ----------------------------------------------- */
.mmDuo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 76px;
  margin: 0 0 20px;
}
.mmDuo .run-dia { width: 76px; height: 76px; --rim: 2px; }
.mmDuo .run-dia.you { animation: mmFromLeft .5s cubic-bezier(.22, .8, .24, 1) .08s both; }
.mmOpp { position: relative; display: block; animation: mmFromRight .5s cubic-bezier(.22, .8, .24, 1) .08s both; }
/* Suchlicht: ein Teal-Bogen laeuft um den Rand der Gegner-Raute. */
.mmDuo .run-dia.opp {
  background: conic-gradient(from var(--mm-turn), rgba(77, 208, 196, .14) 0deg 230deg, rgba(77, 208, 196, .9) 320deg, rgba(77, 208, 196, .14) 360deg);
  animation: mmTurn 3.2s linear infinite;
}
.mmInit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mp-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--mp-gold-1);
}
.mmDuo .run-dia > img.mmSeek {
  opacity: 0;
  filter: grayscale(1) brightness(.85) contrast(1.05);
  animation: mmSeek 6.6s ease-in-out infinite;
}
.mmDuo .run-dia > img.mmSeek:nth-of-type(2) { animation-delay: -4.4s; }
.mmDuo .run-dia > img.mmSeek:nth-of-type(3) { animation-delay: -2.2s; }
.mmFoe {
  position: absolute;
  inset: var(--rim);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  opacity: 0;
}
.mmFoe > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.mmFoe > .mmInit { color: var(--mp-teal-1); }
/* Auslaufende Raute beim Treffer (gleiche Form wie die Gegner-Raute). */
.mmHit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70.7%;
  height: 70.7%;
  translate: -50% -50%;
  rotate: 45deg;
  border: 1px solid var(--mp-teal-1);
  opacity: 0;
  pointer-events: none;
}

.mmVs {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--mp-gold-3);
  transform: rotate(45deg);
  animation: mmVsIn .45s cubic-bezier(.22, .8, .24, 1) .22s both;
}
.mmVs > span {
  transform: rotate(-45deg);
  font-family: var(--mp-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--mp-gold-1);
}

/* ---------- Text ------------------------------------------------------ */
.mmTitle {
  margin: 0 0 8px;
  font-family: var(--mp-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.2;
  color: var(--mp-bone);
  text-wrap: balance;
}
.mmMeta,
.mmFoeName {
  margin: 0;
  min-height: 18px;
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--mp-ink);
}
.mmMeta #mmMode.is-ranked { color: var(--mp-gold-1); }
.mmDot { margin: 0 7px; color: var(--mp-ink-dim); }
.mmFoeName {
  font-family: var(--mp-serif);
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--mp-teal-1);
}
.mmFoeName[hidden] { display: none; }
.mmTime {
  margin: 14px 0 0;
  font-family: var(--mp-mono);
  font-size: 13px;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--mp-ink-dim);
  transition: opacity .25s ease;
}

.mmCancel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin-top: 22px;
  padding: 12px 18px;
  font-family: var(--mp-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mp-ink);
  background: transparent;
  border: 1px solid rgba(216, 177, 90, .22);
  cursor: var(--mp-cur-pointer);
  transition: color .2s ease, border-color .2s ease, opacity .25s ease;
}
.mmCancel:hover { color: var(--mp-bone); border-color: rgba(216, 177, 90, .5); }
.mmCancel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(77, 208, 196, .04), rgba(77, 208, 196, .2));
  box-shadow: inset -1px 0 0 var(--mp-teal-1);
  transform-origin: left center;
  opacity: 0;
}
.mmCancel:focus-visible,
.mmClose:focus-visible { outline: 1px solid var(--mp-teal-1); outline-offset: 3px; }

/* ---------- Treffer ---------------------------------------------------- */
.mmPanel.is-found .run-dia.opp { background: var(--mp-teal-1); animation: none; }
.mmPanel.is-found .run-dia > img.mmSeek { animation: none; opacity: 0; transition: opacity .2s ease; }
.mmPanel.is-found .mmFoe { opacity: 1; animation: mmFoeIn .55s cubic-bezier(.2, .8, .3, 1) both; }
.mmPanel.is-found .mmHit { animation: mmHit .8s cubic-bezier(.2, .7, .3, 1) .06s both; }
.mmPanel.is-found .mmVs { animation: mmVsPop .5s cubic-bezier(.3, .7, .3, 1) .04s; }
.mmPanel.is-found .mmTitle,
.mmPanel.is-found .mmFoeName { animation: mmSwap .3s ease both; }
.mmPanel.is-found .mmMeta:has(~ .mmFoeName:not([hidden])) { display: none; }
.mmPanel.is-found .mmTime { opacity: .35; }
.mmPanel.is-found .mmClose { opacity: 0; visibility: hidden; pointer-events: none; }
.mmPanel.is-found .mmCancel {
  color: transparent;
  border-color: rgba(77, 208, 196, .35);
  pointer-events: none;
}
.mmPanel.is-found .mmCancel::after { opacity: 1; animation: mmGo .65s cubic-bezier(.4, 0, .2, 1) both; }

@media (max-width: 480px) {
  .mmPanel { padding: 30px 20px 22px; }
  .mmTitle { font-size: 19px; letter-spacing: 1px; }
  .mmDuo { gap: 14px; min-height: 66px; }
  .mmDuo .run-dia { width: 66px; height: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .mmOverlay.show, .mmOverlay.is-leaving, .mmPanel, .mmDuo .run-dia.you, .mmOpp, .mmVs,
  .mmPanel.is-found .mmFoe, .mmPanel.is-found .mmHit, .mmPanel.is-found .mmVs,
  .mmPanel.is-found .mmTitle, .mmPanel.is-found .mmFoeName, .mmPanel.is-found .mmCancel::after { animation: none; }
  .mmDuo .run-dia.opp { animation: none; background: rgba(77, 208, 196, .55); }
  .mmDuo .run-dia > img.mmSeek { animation: none; }
  .mmDuo .run-dia > img.mmSeek:first-of-type { opacity: .38; }
  .mmPanel.is-found .run-dia > img.mmSeek:first-of-type { opacity: 0; }
}