/* Paywall overlay — opened by window.Paywall.show().
   The overlay structure intentionally mirrors welcome-overlay.css so the
   visual language is consistent (dark scrim, centered card, soft shadows).
   Card chrome uses the project's themed CSS variables (--panel-solid,
   --ink, --muted, --accent, --line) so it follows the dark/light toggle.
   Hex fallbacks are kept ONLY for browsers that drop the variable; they
   intentionally bias toward dark since that's the default theme. */

.paywall-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Add the iOS notch / Android status-bar height to the top padding so
     the card's close button stays tappable in PWA mode (viewport-fit=cover
     extends content under the status bar). Same pattern as the Final Round
     Report panel. --safe-top-inset / --safe-bottom-inset are set by
     layout-sync and resolve to env() on iOS. */
  padding:
    max(14px, calc(var(--safe-top-inset, env(safe-area-inset-top, 0px)) + 10px))
    10px
    max(12px, calc(var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)) + 8px));
  /* Blur-surround scrim — same visual language as the Final Round Report:
     a light tint + backdrop blur so the app stays visible (softened) behind
     the floating sheet, instead of the old heavy dark scrim. */
  background: rgba(15, 20, 26, 0.35);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.paywall-overlay[hidden] { display: none; }

.paywall-card {
  position: relative;
  width: 100%;
  max-width: min(920px, calc(100vw - 20px));
  /* Round-Report-style floating sheet: never reaches the screen edges and
     caps short of full height; long tier lists scroll INSIDE the sheet. */
  max-height: min(88dvh, calc(
    100dvh -
    max(24px, calc(var(--safe-top-inset, env(safe-area-inset-top, 0px)) + 10px)) -
    max(20px, calc(var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)) + 8px))
  ));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Solid card background — switches via --panel-solid (dark #0c1926 →
     light #ffffff). The previous --surface variable was undefined, so
     the hex fallback always rendered the card dark. */
  background: var(--panel-solid, #0c1926);
  color: var(--ink, #eff8ff);
  border: 1px solid var(--line, rgba(143, 170, 192, 0.22));
  border-radius: 16px;
  padding: 28px 28px 22px;
  margin: auto;
  box-shadow: 0 30px 80px var(--shadow, rgba(0, 0, 0, 0.5));
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.paywall-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.paywall-close-btn:hover,
.paywall-close-btn:focus-visible {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
  outline: none;
}

.paywall-header { display: flex; flex-direction: column; gap: 6px; padding-right: 36px; }
.paywall-title { margin: 0; font-size: 1.4rem; font-weight: 700; }
.paywall-reason { margin: 0; color: var(--muted); font-size: 0.95rem; min-height: 1.2em; }
.paywall-reason:empty { display: none; }

.paywall-current {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}
.paywall-current-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.paywall-current-label { color: var(--muted); }
.paywall-current-sku {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.paywall-current-renewal {
  color: var(--muted);
  font-size: 0.78rem;
}
.paywall-manage-sub-link {
  display: inline-block;
  margin-top: 2px;
  color: var(--accent, #4a9eff);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
}
.paywall-manage-sub-link:hover { color: var(--accent-dk, #2870c0); }

/* Sign-in gate — shown above the tier comparison for anonymous users.
   Tier cards stay visible (so the user knows what they're upgrading to)
   but their Upgrade CTAs swap to "Sign in to upgrade" via .paywall-tier-cta--locked. */
.paywall-signin-gate {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.paywall-signin-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.paywall-signin-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}
.paywall-signin-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.paywall-signin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-weight: 600;
}
.paywall-signin-btn-icon {
  display: inline-flex;
  align-items: center;
  width: 18px;
  height: 18px;
}
/* Apple button keeps its brand colors in both themes per Apple's HIG —
   black with white text and a white logo. The Google button uses the
   default .btn styling so it themes automatically. */
.paywall-signin-btn--apple {
  background: #000;
  color: #fff;
}
.paywall-signin-btn--apple .paywall-signin-btn-icon img {
  filter: invert(1);
}

.paywall-tier-cta--locked {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
}
.paywall-pack-cta--locked {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
}

.paywall-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.paywall-tier-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 12px;
  padding: 16px;
}
.paywall-tier-card--current {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.paywall-tier-header { display: flex; flex-direction: column; gap: 2px; }
.paywall-tier-name { font-size: 1.05rem; font-weight: 700; }
.paywall-tier-price {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent, #4a9eff);
  margin-top: 1px;
}
.paywall-tier-tagline { color: var(--muted); font-size: 0.85rem; }

.paywall-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.paywall-feature {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.9rem;
}
.paywall-feature-label { color: var(--muted); }
.paywall-feature-value { font-weight: 600; }
.paywall-feature--games .paywall-feature-value {
  font-weight: 500;
  text-align: right;
  max-width: 60%;
}

.paywall-tier-cta {
  margin-top: auto;
}
.paywall-tier-cta:disabled {
  opacity: 0.55;
  cursor: default;
}
.paywall-tier-cta--muted {
  background: transparent;
  color: var(--muted);
}

.paywall-packs {
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.paywall-section-title { margin: 0; font-size: 1rem; font-weight: 600; }
.paywall-section-sub { margin: 0; color: var(--muted); font-size: 0.85rem; }

.paywall-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.paywall-pack-card {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.paywall-pack-credits {
  font-size: 1.4rem;
  font-weight: 700;
}
.paywall-pack-credits-unit {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}
.paywall-pack-blurb {
  color: var(--muted);
  font-size: 0.85rem;
}
.paywall-pack-balance {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.paywall-pack-balance:empty { display: none; }

.paywall-footer-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Terms + Privacy on the purchase screen itself (Guideline 3.1.2). */
.paywall-legal-links {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}
.paywall-legal-link {
  color: var(--muted);
  text-decoration: underline;
}

/* Restore Purchases — Apple App Review requirement (Guideline 3.1.1).
   Renders as a discreet link, not a primary CTA — it's the safety net,
   not the main path. */
.paywall-restore-btn {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 0;
  background: none;
  border: none;
  color: var(--accent, #4a9eff);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: inherit;
}
.paywall-restore-btn:hover {
  color: var(--accent-dk, #2870c0);
}
.paywall-restore-btn:active {
  opacity: 0.7;
}

/* Dev / test-mode SKU swapper. Visible only when Debug Tools is on.
   Distinct warning-colored border so it can't be mistaken for a
   production purchase surface during demos. */
.paywall-test-mode {
  border: 1px dashed color-mix(in srgb, var(--warn) 60%, transparent);
  border-radius: 12px;
  padding: 14px;
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.paywall-test-mode[hidden] { display: none; }
.paywall-test-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warn);
}
.paywall-test-sub {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}
.paywall-test-sub code {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.9em;
}
.paywall-test-skus {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.paywall-test-sku-btn {
  font-size: 0.85rem;
  padding: 6px 12px;
}
.paywall-test-reset {
  align-self: flex-start;
  font-size: 0.85rem;
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--muted) 50%, transparent);
  color: var(--muted);
}
.paywall-test-status {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  min-height: 1.2em;
}
.paywall-test-status:empty { display: none; }

@media (max-width: 520px) {
  /* Phones keep the floating-sheet look (the old full-bleed variant went
     edge-to-edge with square corners) — just tighter gutters + padding so
     the tier cards get the width. */
  .paywall-overlay {
    padding:
      max(10px, calc(var(--safe-top-inset, env(safe-area-inset-top, 0px)) + 6px))
      8px
      max(8px, calc(var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)) + 6px));
  }
  .paywall-card {
    max-width: calc(100vw - 16px);
    border-radius: 14px;
    padding: 22px 16px 16px;
    gap: 16px;
  }
}

/* Account menu — Manage Plan entry. The badge shows the current SKU so
   the user can see at a glance whether they're on Free/Plus/Pro before
   tapping in. account-ui.js populates the badge text + hidden state at
   sign-in time and refreshes after a successful purchase event. */
.account-manage-plan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  position: relative;
}
.account-manage-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Float the SKU badge to the right edge so the icon + "Manage Plan"
     label stays visually centered in the button like the sibling menu
     buttons (My Rounds, My Courses). Absolute positioning is the
     cleanest way to keep the centered cluster from being shifted left
     by the badge's width. */
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.account-manage-plan-badge[data-sku="free"] {
  background: color-mix(in srgb, var(--muted) 24%, transparent);
  color: var(--muted);
}
.account-manage-plan-badge[hidden] { display: none; }