/* =============================================================================
   POPUP UI -- the look of every alert and confirm (27 September; popup-ui.js).
   Loaded by the game and the admin page, whose Popups tab draws all of them in
   both looks: edit here, reload the tab, and every popup shows the change.
   Its own colours, so it looks the same on both pages; they are the game's.
   ============================================================================= */
.rfp-overlay, .rfp-demo {
  --rfp-ink: #1C1C19;
  --rfp-paper: #F0EEE8;
  --rfp-rust: #A94C3F;
  --rfp-grab: #B4B2A9;
  --rfp-dim: rgba(28, 28, 25, 0.5);
}

/* ---- The dimmed page behind a live popup ---- */
.rfp-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--rfp-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: rfp-fade 0.16s ease-out;
}
.rfp-overlay-sheet { align-items: flex-end; padding: 0; }
.rfp-overlay.is-leaving { animation: rfp-fade-out 0.16s ease-in forwards; }

/* ---- The popup: desktop card (A) ---- */
.rfp-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  background: var(--rfp-paper);
  color: var(--rfp-ink);
  border: 2px solid var(--rfp-ink);
  border-radius: 16px;
  padding: 24px 24px 20px;
  text-align: left;
  /* A tall popup (the Versus winner's team) scrolls inside itself. */
  max-height: calc(100svh - 40px);
  overflow-y: auto;
}
.rfp-overlay .rfp-card.rfp-card { animation: rfp-rise 0.18s ease-out; }
.rfp-title {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rfp-text {
  margin: 10px 0 22px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 17px;
  line-height: 1.4;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.rfp-actions { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 10px; }
.rfp-btn {
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--rfp-ink);
  border-radius: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rfp-ok { background: var(--rfp-rust); color: var(--rfp-paper); }
.rfp-cancel { background: var(--rfp-paper); color: var(--rfp-ink); }
.rfp-btn:focus-visible { outline: 3px solid var(--rfp-ink); outline-offset: 2px; }
/* The button the popup focuses itself, until a key is pressed (popup-ui.js). */
.rfp-btn.rfp-quiet-focus:focus-visible { outline: none; }

/* ---- The popup: phone sheet (B) ---- */
.rfp-sheet {
  max-width: none;
  border-width: 2px 0 0;
  border-radius: 18px 18px 0 0;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  max-height: 88svh;
}
.rfp-overlay .rfp-sheet.rfp-sheet { animation: rfp-slide 0.22s ease-out; }
.rfp-overlay.is-leaving .rfp-sheet { animation: rfp-slide-out 0.16s ease-in forwards; }
.rfp-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--rfp-grab); margin: 0 auto 14px; }
.rfp-sheet .rfp-title { font-size: 24px; }
.rfp-sheet .rfp-text { font-size: 16px; margin-bottom: 18px; }
.rfp-sheet .rfp-actions { flex-direction: column; gap: 8px; }
.rfp-sheet .rfp-btn { width: 100%; min-height: 48px; }

@keyframes rfp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rfp-fade-out { to { opacity: 0; } }
@keyframes rfp-rise { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rfp-slide { from { transform: translateY(100%); } to { transform: none; } }
@keyframes rfp-slide-out { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  .rfp-overlay, .rfp-overlay .rfp-card, .rfp-overlay .rfp-sheet, .rfp-overlay.is-leaving,
  .rfp-overlay.is-leaving .rfp-sheet { animation: none !important; }
}

/* ---- The admin page's gallery: each popup still, on a dimmed page ---- */
.rfp-demo {
  background: var(--rfp-dim);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.rfp-demo-phone {
  width: 330px;
  min-height: 420px;
  padding: 0;
  align-items: flex-end;
  border: 6px solid var(--rfp-ink);
  border-radius: 28px;
  overflow: hidden;
}