/* packages/ui-shell/modal.css
 *
 * Unified modal styles for the entire app — used by all 5 netplay
 * games and the hub.
 *
 * Apply by linking this CSS in the page and using this markup:
 *   <div class="modal" id="modal" role="dialog" aria-modal="true"
 *        aria-labelledby="modalTitle" aria-describedby="modalDesc">
 *     <div class="modal-card">
 *       <h2 id="modalTitle">…</h2>
 *       <p id="modalDesc">…</p>
 *       <div class="actions">…</div>
 *     </div>
 *   </div>
 *
 * Toggle with `.modal.show` on the outer element.
 *
 * The `position: fixed; inset: 0;` here is protected by the
 * `body.app-shell > *:not(.modal)` rule in shell.css — do NOT
 * put `position: relative` on .modal in any per-game CSS file,
 * or it will be pulled back into the document flow and the
 * modal will appear at the bottom of the page.
 */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  /* The modal is NOT a child of .app-shell > * in the same way
     the other layout elements are, so it sits above them via
     z-index. No extra rule needed. */
}

.modal.show { display: flex; }

.modal-card {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 24px 32px;
  text-align: center;
  min-width: 280px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  /* Pop in: small scale + fade on show. */
  animation: modal-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-pop {
  0%   { transform: scale(0.92) translateY(8px); opacity: 0; }
  100% { transform: scale(1)    translateY(0);   opacity: 1; }
}

.modal-card h2 {
  font-size: 18px;
  color: var(--gold-bright);
  letter-spacing: 4px;
  margin-bottom: 8px;
}

.modal-card p {
  color: var(--text-2);
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.6;
}

.modal-card .actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* The hub has a slightly wider modal (settings have more
   form fields). Allow the .modal-card to be larger in the
   hub context by giving it a max-width instead of always
   min-width. */
.modal-card { max-width: 480px; }

/* Variant: form-style modals (hub's settings) use .setting
   children instead of just title + p + actions. We don't
   define .setting here — that's the hub's concern. The
   shared rules above already cover the .modal-card chrome. */