:root{
  --mtg-bg: rgba(0,0,0,.55);
  --mtg-card-bg: #101114;
  --mtg-card-border: rgba(255,255,255,.08);
  --mtg-text: #f5f7fa;
  --mtg-muted: #a9b0bb;
  --mtg-primary: #15a6ff;
  --mtg-primary-ink: #ffffff;
  --mtg-shadow: 0 10px 30px rgba(0,0,0,.35);
}
html[data-theme="light"] :root, :root.light{
  --mtg-bg: rgba(0,0,0,.35);
  --mtg-card-bg: #ffffff;
  --mtg-card-border: rgba(16,17,20,.08);
  --mtg-text: #0b0c0e;
  --mtg-muted: #4b5563;
  --mtg-primary: #0ea5e9;
  --mtg-primary-ink: #ffffff;
  --mtg-shadow: 0 10px 25px rgba(2,6,23,.15);
}

.mtg-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none; /* hidden by default: anti-flicker */
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(1200px 600px at 50% -10%, rgba(21,166,255,.18), transparent 60%),
              var(--mtg-bg);
  backdrop-filter: blur(6px);
}

.mtg-veil{ position:absolute; inset:0; }

.mtg-card{
  position: relative;
  width: min(92vw, 440px);
  background: var(--mtg-card-bg);
  color: var(--mtg-text);
  border: 1px solid var(--mtg-card-border);
  border-radius: 18px;
  box-shadow: var(--mtg-shadow);
  padding: 22px 18px 18px;
  text-align: center;
  transform: translateY(12px);
  opacity: 0;
  animation: mtg-pop .3s ease forwards;
}

@keyframes mtg-pop{ to { transform: translateY(0); opacity: 1; } }

.mtg-icon{
  width: 56px;
  height: 56px;
  margin: 6px auto 8px;
  display:flex;align-items:center;justify-content:center;
  color: var(--mtg-primary);
  background: color-mix(in oklab, var(--mtg-primary) 14%, transparent);
  border-radius: 14px;
}

.mtg-title{ font-size: 18px; line-height: 1.25; margin: 6px 0 8px; letter-spacing: .2px; font-weight: 700; }
.mtg-desc{ font-size: 14px; color: var(--mtg-muted); margin: 0 6px 14px; }

.mtg-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 2px; }

.mtg-btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; width: 100%; height: 44px; padding: 0 14px;
  font-size: 15px; border-radius: 12px; border: 1px solid var(--mtg-card-border);
  background: transparent; color: var(--mtg-text);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.mtg-btn--primary{
  background: linear-gradient(180deg, color-mix(in oklab, var(--mtg-primary) 86%, #fff 0%), var(--mtg-primary));
  color: var(--mtg-primary-ink);
  border: none; box-shadow: 0 6px 18px color-mix(in oklab, var(--mtg-primary) 22%, transparent);
}
.mtg-btn--ghost:hover{ background: rgba(255,255,255,.04); }
html[data-theme="light"] .mtg-btn--ghost:hover{ background: rgba(2,6,23,.04); }

.mtg-hint{ margin: 10px 0 0; font-size: 12px; color: var(--mtg-muted); }
.mtg-footnote{ margin-top: 6px; }
.mtg-reason{ font-size: 11px; opacity:.7 }

.mtg-spinner{ width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; display:none; animation: mtg-spin 1s linear infinite; }
.mtg-spinner.is-busy{ display:inline-block; }
@keyframes mtg-spin{ to { transform: rotate(360deg); } }

@media (max-height: 540px){
  .mtg-card{ padding: 16px 14px; }
  .mtg-title{ font-size: 17px; }
  .mtg-desc{ font-size: 13px; }
}