/* Arena queue and match invitation. Uses the game's existing palette and emblem. */
.mm-arena-card, #matchmaking-alert {
  --mm-gold: var(--gold-400, #f5c842);
  --mm-ink: #0b162e;
  --mm-copy: #bdc9df;
  color: var(--text-primary, #f0f4ff);
  font-family: var(--font-body, 'Inter', sans-serif);
  border: 1px solid #d5aa484d;
  background: radial-gradient(ellipse at 100% 0, #28497938, transparent 65%), #0e1930;
  box-shadow: 0 12px 36px #0004, inset 0 1px 0 #ffe2a112;
}
.mm-arena-card { padding: 0; overflow: hidden; }
.mm-arena-header { position: relative; isolation: isolate; padding: 26px 26px 22px; border-bottom: 1px solid #d5aa4829; }
.mm-arena-header::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(90deg, #0e1930 25%, #0e1930a8 75%), url('../images/cosmos_emblem.png') right 42% / 205px no-repeat;
  opacity: .8;
}
.mm-arena-card .mm-eyebrow, #matchmaking-alert .mm-eyebrow { display: block; color: #d4b97e; font-size: .64rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.mm-arena-header h2 { margin: 10px 0 7px; color: #f7d88b; font-family: var(--font-display, 'Cinzel', serif); font-size: 1.35rem; line-height: 1.35; }
.mm-arena-header p { margin: 0; color: var(--mm-copy); font-size: .85rem; }
.mm-arena-body { padding: 24px 26px; display: grid; gap: 18px; }
.mm-field label { display: block; margin-bottom: 8px; color: #dfe6f5; font-size: .8rem; font-weight: 600; }
.mm-field .form-input { width: 100%; min-height: 48px; border-color: #7487af45; background-color: #071227a6; }
.mm-arena-card .mm-help, #matchmaking-alert .mm-help { margin: 8px 0 0; color: #a7b6d0; font-size: .73rem; line-height: 1.65; }
.mm-xp-note { display: flex; align-items: center; gap: 12px; padding: 12px; background: #cf9e2910; border: 1px solid #d5aa4826; border-radius: 9px; }
.mm-xp-note span { flex-shrink: 0; color: #f4d489; font-size: .78rem; font-weight: 700; }
.mm-xp-note p { margin: 0; color: #bdc9df; font-size: .73rem; line-height: 1.5; }
.mm-preferences { display: grid; gap: 10px; }
.mm-sound-option { display: flex; align-items: center; gap: 9px; color: #d6dff0; font-size: .8rem; cursor: pointer; }
.mm-sound-option input { width: 16px; height: 16px; accent-color: #e6a817; }
.mm-arena-card .mm-push-button { width: 100%; min-height: 42px; font-size: .75rem; border-color: #7189b13d; }
.mm-preferences #matchmaking-push-status:empty { display: none; }
.mm-card-feedback { display: grid; gap: 10px; color: var(--mm-copy); font-size: .78rem; line-height: 1.6; }
.mm-card-clock { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 9px; background: #071227b3; border: 1px solid #a9bbdb21; }
.mm-card-clock[hidden] { display: none; }
.mm-card-clock time { color: #f5d790; font-size: 1.15rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.mm-card-actions { display: grid; gap: 10px; }
.mm-card-actions .btn { width: 100%; min-height: 48px; }
.mm-error { color: #ffb1ac; font-size: .8rem; line-height: 1.5; }
.mm-error:empty { display: none; }

body.mm-match-open { overflow: hidden; }
.mm-match-backdrop { position: fixed; inset: 0; z-index: 9500; background: #020713c9; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
#matchmaking-alert { position: fixed; box-sizing: border-box; z-index: 9501; border-radius: 18px; }
#matchmaking-alert *, .mm-arena-card * { box-sizing: border-box; }
#matchmaking-alert .btn { min-height: 44px; font-size: .82rem; }
#matchmaking-alert .btn-primary { color: #171007; background: linear-gradient(120deg, #f5d789, #e6ae36 55%, #c88d1c); box-shadow: 0 4px 18px #d8a12b28; border: 1px solid #ffdc8759; }
#matchmaking-alert .btn-ghost { border-color: #8ca3c23d; color: #c3d0e7; }
#matchmaking-alert button:focus-visible, .mm-arena-card button:focus-visible { outline: 2px solid #f9dda0; outline-offset: 4px; }
#matchmaking-alert.mm-alert--queued { right: 24px; bottom: 24px; width: 370px; max-width: calc(100vw - 32px); padding: 18px; }
.mm-queue-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mm-queue-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mm-queue-sigil { width: 39px; height: 39px; flex: 0 0 39px; border: 1px solid #cba34b7a; border-radius: 50%; background: url('../images/cosmos_emblem.png') center / cover; box-shadow: 0 0 18px #e4b54d19; }
.mm-queue-heading strong { display: block; font-size: .8rem; font-weight: 600; color: #e8d8ad; }
.mm-search-state { display: flex; gap: 6px; align-items: center; color: #a5b5d2; font-size: .68rem; margin-top: 5px; }
.mm-search-state i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #e9bb5d; animation: mm-cosmo-pulse 2s ease-in-out infinite; }
.mm-queue-time { text-align: right; }
.mm-queue-time span { display: block; color: #a9b9d4; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.mm-queue-time time { display: block; margin-top: 3px; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #f6db9d; }
.mm-queue-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #bac9e51a; padding-top: 12px; margin-top: 14px; }
.mm-queue-bottom p { margin: 0; color: #afbed8; font-size: .7rem; }
#matchmaking-alert .mm-queue-bottom .btn { padding: 7px 12px; min-height: 36px; font-size: .7rem; }
#matchmaking-alert.mm-alert--confirming, #matchmaking-alert.mm-alert--countdown {
  left: 50%; top: 50%; transform: translate(-50%, -50%); width: 460px;
  max-width: calc(100vw - 28px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 32px; text-align: center; isolation: isolate;
  box-shadow: 0 24px 90px #0009, inset 0 1px 0 #ffe2a120;
}
#matchmaking-alert.mm-alert--confirming::before, #matchmaking-alert.mm-alert--countdown::before {
  content: ''; position: absolute; z-index: -1; top: -170px; left: 50%; transform: translateX(-50%); width: 430px; height: 430px;
  background: url('../images/cosmos_emblem.png') center / contain no-repeat; opacity: .075; pointer-events: none;
}
.mm-dialog-ornament { width: 54px; height: 1px; margin: 16px auto; background: linear-gradient(90deg, transparent, #f0cc75, transparent); }
#matchmaking-alert h2 { font-family: var(--font-display, 'Cinzel', serif); color: #f8dfaa; font-size: 1.6rem; line-height: 1.35; margin: 10px 0 8px; text-transform: none; }
.mm-dialog-intro { color: #bdc9df; font-size: .84rem; line-height: 1.6; margin: 0; }
.mm-confirm-clock { --mm-progress: 100%; position: relative; display: grid; place-items: center; width: 124px; height: 124px; border-radius: 50%; margin: 24px auto 20px; background: conic-gradient(from 0deg, #efca71 var(--mm-progress), #7184a12b 0); box-shadow: 0 0 36px #d7ae3410; }
.mm-confirm-clock::before { content: ''; position: absolute; inset: 3px; border: 6px solid #0c172c; border-radius: inherit; background: radial-gradient(circle, #1c2b46, #0c172c); }
.mm-clock-value { position: relative; display: grid; gap: 1px; }
.mm-clock-value strong { font-family: var(--font-display, 'Cinzel', serif); font-size: 2.8rem; line-height: 1.1; color: #ffe2a0; font-variant-numeric: tabular-nums; }
.mm-clock-value span { color: #aebdd5; font-size: .56rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.mm-ready-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.mm-ready-player { display: grid; gap: 7px; padding: 13px 8px; border: 1px solid #8aa2c529; background: #06112670; border-radius: 9px; }
.mm-ready-player > span { color: #bbc9e0; font-size: .72rem; }
.mm-ready-player b { font-size: .72rem; color: #98aaca; font-weight: 500; }
.mm-ready-player.is-ready { border-color: #cda65265; background: #bd942a10; }
.mm-ready-player.is-ready b { color: #f5d895; }
.mm-dialog-status { min-height: 38px; margin: 10px 0 14px; color: #bdc9df; font-size: .75rem; line-height: 1.6; }
.mm-confirm-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; }
#matchmaking-alert .mm-confirm-actions .btn { width: 100%; min-height: 48px; }
#matchmaking-alert .mm-confirm-note { margin-top: 18px; font-size: .67rem; line-height: 1.65; color: #9aadc9; }
.mm-countdown-number { font-family: var(--font-display, 'Cinzel', serif); font-size: 2.4rem; color: #ffe2a0; margin: 12px 0; font-variant-numeric: tabular-nums; }
.mm-countdown-number span { display: block; color: #aebdd5; font-family: var(--font-body, sans-serif); font-size: .65rem; letter-spacing: .08em; }
.mm-opponent { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 20px 0; padding: 18px 12px; background: #06112680; border: 1px solid #9caec72b; border-radius: 12px; }
.mm-opponent-copy { min-width: 0; text-align: left; color: #b2c0d7; font-size: .75rem; line-height: 1.7; }
.mm-opponent-copy strong { display: block; color: #f7dda7; font-family: var(--font-display, serif); font-size: 1.15rem; overflow-wrap: anywhere; }
.mm-hidden-opponent { padding: 10px 8px; color: #aebed6; font-size: .79rem; line-height: 1.6; }
.mm-hidden-opponent b { display: block; color: #d8e2f5; font-size: .85rem; margin-bottom: 5px; }
#matchmaking-alert.is-urgent .mm-confirm-clock { filter: drop-shadow(0 0 8px #e9aa2b22); }
#matchmaking-alert.is-urgent .mm-clock-value strong { color: #ffd178; }
@keyframes mm-cosmo-pulse { 50% { opacity: .35; box-shadow: 0 0 8px #edc87a; } }
@media (max-width: 520px) {
  body.mm-queue-open { padding-bottom: 180px; }
  .mm-arena-header { padding: 22px 20px 18px; }
  .mm-arena-body { padding: 20px; gap: 16px; }
  #matchmaking-alert.mm-alert--queued { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); max-width: none; padding: 15px; }
  #matchmaking-alert.mm-alert--confirming, #matchmaking-alert.mm-alert--countdown { padding: 26px 22px; border-radius: 16px; }
  #matchmaking-alert h2 { font-size: 1.35rem; }
  .mm-confirm-clock { width: 112px; height: 112px; margin-top: 20px; }
  .mm-clock-value strong { font-size: 2.5rem; }
}
@media (max-width: 350px) {
  .mm-confirm-actions { grid-template-columns: 1fr; }
  .mm-confirm-actions #mm-confirm-accept { grid-row: 1; }
  .mm-xp-note { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { .mm-search-state i { animation: none; } }