/* match type dialog */
#match-dialog, #confirm-dialog { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(10, 0, 3, .75); }
#match-dialog.hidden, #confirm-dialog.hidden { display: none; }
#confirm-dialog { z-index: 20; }
#confirm-title.hidden { display: none; }
#confirm-title + #confirm-text { font-size: 16px; font-weight: 600; opacity: .85; }
#confirm-detail { margin: -8px 0 0; max-width: 320px; text-align: center; font-size: 14px; font-weight: 800; text-decoration: underline; word-break: break-all; }
#confirm-detail.hidden { display: none; }
#confirm-text { max-width: 320px; text-align: center; font-size: 20px; }
#confirm-buttons { display: flex; gap: 14px; }
.dialog-box { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px 32px 28px; border-radius: 22px; background: #1a1115; border: 2px solid var(--accent); box-shadow: 0 0 40px rgba(224, 24, 45, .4); }
.dialog-box h2 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: 1px; }
#match-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.match-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 150px; height: 150px; border: 3px solid rgba(255, 255, 255, .25); border-radius: 18px; background: rgba(255, 255, 255, .07); color: var(--ink); transition: transform .1s, background .1s; }
.match-option b { font-size: 46px; font-weight: 900; line-height: 1; }
.match-option span { font-size: 14px; font-weight: 800; opacity: .8; }
.match-option:hover { transform: translateY(-3px); border-color: var(--accent); background: rgba(224, 24, 45, .25); box-shadow: 0 4px 18px rgba(224, 24, 45, .5); }
@media (max-height: 520px) {
  .match-option { width: 110px; height: 110px; }
  .match-option b { font-size: 34px; }
  #match-options { gap: 10px; }
  .dialog-box { padding: 14px 24px 18px; gap: 10px; }
}