/* NULLBYTE -- celebrate (campaign) modal styles.
 *
 * SCOPED ON PURPOSE. Every rule here sits behind .nb-celebrate-bg or
 * .nb-celebrate, classes that ONLY celebrate.js ever applies. app.js's
 * modal() hardcodes .modal-bg/.modal for every modal in the game, so styling
 * those directly would repaint the daily login, the wear prompt, every
 * confirm dialog and every purchase flow. Nothing in this file may target a
 * bare .modal, .modal-title, .modal-body or .btn.
 *
 * The base look still comes from styles.css -- this only layers a campaign
 * accent on top, so the modal cannot end up looking like it belongs to a
 * different game.
 */

/* Accent border + glow so a campaign reads as an event, not a system dialog. */
.nb-celebrate {
  border-color: var(--amber) !important;
  box-shadow: 0 0 24px rgba(255, 176, 0, 0.18);
}

.nb-celebrate .modal-title {
  color: var(--amber);
  letter-spacing: 1px;
}

/* Campaign copy is player-facing marketing text and is usually longer than a
   system dialog's one line, so it gets a little more room to breathe. */
.nb-celebrate .modal-body {
  font-size: 14px;
  line-height: 1.6;
  padding-top: 2px;
}

/* The CTA is the whole point of the modal -- make it the obvious target and
   let "don't show again" sit back as the quiet option. */
.nb-celebrate .modal-actions .btn-primary {
  background: var(--amber);
  border-color: var(--amber);
  color: #0b0b0b;
  font-weight: 700;
}

.nb-celebrate .modal-actions .btn:not(.btn-primary) {
  color: var(--fg-faint);
}

/* On a narrow phone the two buttons crowd each other, and the dismiss label
   is long. Stack them so the CTA always gets a full-width tap target. */
@media (max-width: 420px) {
  .nb-celebrate .modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .nb-celebrate .modal-actions .btn {
    width: 100%;
  }
}