/* ============================================================================
   The Terms screen a player agrees to (html/terms/partial/overlay.html) — the
   public Terms and Privacy pages are legal.css. The screen's card is the shared
   asset-modal skin (.regen-card, asset_modal.css); this file adds the full-page
   overlay, the scrolling text and the actions. Loaded on EVERY page (base.html)
   because the screen can open on any of them.
   ============================================================================ */

/* The overlay: covers the whole page, above the header, every modal (100) and the Top Up overlay
   (130) — nothing else can be reached until the player agrees or logs out. Not a .modal on purpose:
   modal.js must never close it (no backdrop click, no Escape). */
.terms-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(5, 4, 15, .92);
  backdrop-filter: blur(4px);
}

/* A tall card: the head stays put, the Terms scroll inside, the buttons stay in reach. */
.terms-card {
  width: 760px;
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  transform: none;
}
.terms-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.terms-intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: 19px;
  color: var(--color-text);
}
.terms-link { color: var(--color-cyan); }
/* The answers: the form fills the card like the body does, so the scroll area between the intro
   and the buttons takes whatever room is left. */
.terms-form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.terms-scroll {
  flex: 1;
  min-height: 160px;
  overflow-y: auto;
  padding: 0 10px 0 0;
}
.terms-error {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-pink-light);
}

/* The actions: LOG OUT and I AGREE, on the right. */
.terms-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- the SHORT VERSION box (terms/partial/summary.html) — on this screen AND at the top of the
   Terms and Privacy pages (legal.css styles the rest of those pages), so it lives here, where it is
   loaded everywhere. A dashed box, so it reads as a summary, not the rules. ---- */
.terms-summary {
  margin: 4px 0 8px;
  padding: 14px 18px 4px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-dim);
  background: var(--color-well);
  border: 2px dashed var(--color-line-2);
}
.terms-summary p { margin: 0 0 12px; }
.terms-summary ul { margin: 0 0 12px; padding-left: 22px; }
.terms-summary li { margin: 0 0 6px; }
.terms-summary a { color: var(--color-cyan); }
.terms-summary-title {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--color-gold);
}

/* Phones: the screen takes the whole page. */
@media (max-width: 560px) {
  .terms-overlay { padding: 0; }
  .terms-card { max-height: 100dvh; height: 100dvh; border-width: 3px; }
}