/* Arcade – Styling für den eigenen Bestätigungsdialog (arcade-modal.js).
   Nutzt die CSS-Variablen des jeweiligen Spiels (--accent etc.) mit Fallback. */

.am-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(6, 6, 14, 0.74); backdrop-filter: blur(4px);
  animation: am-fade 0.16s ease;
}

.am-dialog {
  width: 100%; max-width: 360px; text-align: center;
  background: linear-gradient(180deg, var(--bg-2, #14142c), var(--bg, #0a0a14));
  color: var(--fg, #e8e8ff);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px; padding: 1.4rem 1.3rem;
  box-shadow: 0 24px 70px -20px #000, 0 0 50px -22px var(--accent, #00e5ff);
  animation: am-pop 0.16s ease;
}

.am-title {
  margin: 0 0 0.4rem; font-size: 1.1rem; font-weight: 800;
  color: var(--accent, #00e5ff);
}
.am-message { margin: 0 0 1.2rem; color: var(--fg, #e8e8ff); font-weight: 600; line-height: 1.45; }

.am-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.am-btn {
  font: inherit; font-weight: 700; color: var(--fg, #e8e8ff);
  background: var(--board-bg, rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px; padding: 0.55rem 1.1rem; cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.am-btn:hover { border-color: var(--accent, #00e5ff); }
.am-btn:active { transform: translateY(1px); }
.am-confirm {
  border-color: transparent;
  background: linear-gradient(90deg, var(--accent, #00e5ff), var(--accent-2, #ff00e5));
  color: #04161a;
  box-shadow: 0 8px 24px -10px var(--accent, #00e5ff);
}
.am-confirm.am-danger {
  background: linear-gradient(90deg, #ff7a59, #ff4c5e); color: #2a0c06;
  box-shadow: 0 8px 24px -10px #ff5e5e;
}

@keyframes am-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes am-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .am-backdrop, .am-dialog { animation: none; }
}