/* ============================================================================
   Modals — remote-loaded dialogs (see static/js/modal.js + routes/modal).
   A modal is fetched on demand and appended to <body>; `.modal` is the
   full-screen frosted backdrop, `.modal-dialog` is the arcade panel centred on
   top. It opens with a small pop (the `.is-open` class) and is removed from the
   DOM on close. It sits above every decorative layer (scanlines are z-index 90).
   ============================================================================ */

/* Full-screen frosted backdrop. Clicking it (outside the dialog) closes the
   modal, so — unlike the purely decorative fixed layers — it DOES capture clicks.
   It is visible the moment it is inserted (its visibility never depends on a JS
   class or a CSS transition, so a modal opened while the tab is hidden is still
   there when the user returns); only the dialog animates in. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: var(--header-glass);
  backdrop-filter: blur(4px);
}

/* The dialog panel: a chunky arcade card — thick line border and a hard ledge
   shadow, the same treatment the arcade panels and .btn system use. It starts slightly low/small
   and lifts into place on open (a transform-only pop — it stays visible the whole
   time, even if the open transition is paused in a background tab). */
.modal-dialog {
  width: 100%;
  max-width: 440px;
  background: var(--color-panel-2);
  border: 3px solid var(--color-line-2);
  box-shadow: 0 10px 0 var(--drop-soft);
  padding: 26px 24px;
  transform: translateY(10px) scale(.98);
  transition: transform .18s ease;
}
.modal.is-open .modal-dialog { transform: none; }

/* Title in the pixel display font, body in the readable body font. */
.modal-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  text-shadow: 2px 2px 0 var(--color-shadow-ink);
}
.modal-body {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-dim);
}

/* The close "X" — one shared arcade button for EVERY modal (regen / add-asset / account / auth).
   It's a real `.btn`, so it borrows the same chunky look as the ASSETS "+": thick ink border and a
   hard ledge that lifts on hover and sinks on press. This class only squares it off and holds the
   bulky pixel-X glyph (partial/icon/close.html) — a touch smaller than the "+". Use it alongside a
   `.btn` colour variant on the same element, e.g. `class="btn btn-pink modal-close"`, so each modal
   keeps its own accent (pink / green / cyan). */
.modal-close {
  flex: none;
  padding: 6px;
}
.modal-close svg { width: 18px; height: 18px; display: block; }

/* Action row: buttons pushed to the right (they reuse the global .btn system). */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Head row for a modal whose only top chrome is the shared ✕ — tucks it into the
   top-right corner (pulled slightly into the panel padding so it doesn't fatten
   the layout). */
.modal-head {
  display: flex;
  justify-content: flex-end;
  margin: -10px -8px 0 0;
}

/* Centered variant: title, body, and the action row all sit on the centerline
   (used by the out-of-coins modal, whose one gold button is the whole story). */
.modal-center { text-align: center; }
.modal-center .modal-actions { justify-content: center; }

/* Small screens: tighten the panel and shrink the display-font title. */
@media (max-width: 560px) {
  .modal-dialog { padding: 20px 18px; }
  .modal-title { font-size: 12px; }
  .modal-body { font-size: 16px; }
}