/* Halloway: The Call — shell stylesheet: the root palette, base reset, button
 * base classes referenced by easter-shared.css, and toast styles. Hunt-world
 * styling stays in the per-hunt CSS files and easter-shared.css (the shared
 * hunt stylesheet) — this file is part of the shell layer and must never be
 * required by a hunt engine.
 *
 * Part I's further sections return re-parameterized with the surfaces that
 * own them. Shared shell-page chrome lives here; room-specific wrappers,
 * account phases, and hunt surfaces port their own details per
 * docs/THE_CALL_BOOTSTRAP.md.
 */

:root {
  color-scheme: dark;
  /* The house palette carries upstairs from Part I (the family look): a
     near-black stage, maroon for every "red," a quiet dusty-rose ink where a
     brighter accent once shouted, and borders pulled almost all the way back
     so the chrome reads as backlit hairlines, not boxes. The Call's own
     register may retune these with its cover treatment. */
  --bg: #07060c;
  --fg: #f2f5ff;
  --fg-secondary: #c8d0e7;
  --muted: #9aa3c7;
  --accent: #8d2337;
  --accent-2: #b27e84;
  --moss: #7fae84;
  --card: rgba(13, 11, 20, 0.82);
  --border: rgba(255, 255, 255, 0.08);
}

* {
  box-sizing: border-box;
}

a,
button,
[role="button"] {
  touch-action: manipulation;
}

/* Phone/iPad-first touch hardening. The Call is a handheld, tap-driven app —
 * not a scrollable web page — so the generic browser gestures that can strand a
 * player are turned off here: the text-selection caret + blue handles, the iOS
 * long-press callout, the grey tap flash, image drag-out, and the rubber-band /
 * pull-to-refresh overscroll. Pinch-zoom is gated per page by the viewport meta
 * and double-tap-zoom by `manipulation` below — which still preserves pinch
 * where the viewport allows it. Anything that genuinely needs selection (a form
 * field, or a room that wants its verse copied out) opts back in with a more
 * specific rule, so this baseline never blocks a solve. The puzzle engines' own
 * drag targets set their own (more specific) touch-action, so they keep
 * winning too. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

img,
svg,
picture {
  -webkit-user-drag: none;
}

/* The exceptions: real text entry stays editable/selectable. A room that
 * wants selectable verse adds its own class here with its PR. */
input,
textarea,
[contenteditable="true"],
[contenteditable="true"] * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Button base classes — referenced by easter-shared.css (auth modal) and
   available to shell surfaces. */
.btn-primary,
.btn-secondary {
  display: inline-block;
  border-radius: 10px;
  padding: 0.62rem 1.1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn-primary {
  background: var(--accent);
  border: 1px solid transparent;
  color: #fff;
}
.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  filter: brightness(1.08);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--fg-secondary);
}

/* Toasts — same class contract as the shim's showToast(). */
.toast-container {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0));
  right: 1rem;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  max-width: calc(100vw - 2rem);
}
.toast {
  background: rgba(13, 11, 20, 0.95);
  color: var(--fg);
  border: 1px solid rgba(178, 126, 132, 0.32);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  line-height: 1.35;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.toast--visible {
  opacity: 1;
  transform: translateY(0);
}
.toast--error {
  border-color: rgba(141, 35, 55, 0.65);
  color: #ffd4cb;
}

/* -- Shell pages (Library, Coat Room, account/legal, UAT) -----------------
   Shared V1 chrome: a keyed brand, back-door header, constrained document
   column, framed sections, notes, prose, and footnotes. The pages tune their
   room-specific scenes locally, but the wrapper should not fork. */

body.shell-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: calc(4.5rem + env(safe-area-inset-top, 0)) 1.25rem
    calc(2.5rem + env(safe-area-inset-bottom, 0));
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(28, 20, 38, 0.5), transparent 68%),
    var(--bg);
  text-align: left;
}

.shell-brand,
.shell-head,
.shell-main {
  position: relative;
  z-index: 1;
}

.shell-brand {
  width: min(100%, var(--shell-width, 40rem));
  margin: 0 0 1rem;
  display: inline-block;
  color: var(--muted);
  font-size: 1rem;
  text-decoration: none;
}

.shell-brand:hover,
.shell-brand:focus-visible {
  color: var(--fg-secondary);
}

.shell-head {
  width: min(100%, var(--shell-width, 40rem));
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.6rem;
}

.shell-back {
  grid-column: 1;
  color: var(--fg-secondary);
  text-decoration: none;
}

.shell-back:hover,
.shell-back:focus-visible {
  color: var(--fg);
}

.shell-door-back {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(16, 13, 22, 0.58);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

body.shell-page .shell-door-back,
.gallery-door-back,
.attic-door-back {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 0.6rem);
  left: calc(env(safe-area-inset-left, 0px) + 0.6rem);
  z-index: 100;
}

.shell-door-back::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 0.32rem;
  height: 0.32rem;
  border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.shell-door-back:hover,
.shell-door-back:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 11px 24px rgba(0, 0, 0, 0.38);
  outline: none;
}

.shell-door-back:hover::after,
.shell-door-back:focus-visible::after {
  opacity: 0.85;
  transform: translate(-65%, -50%) rotate(45deg);
}

.shell-door-back svg {
  width: 1.35rem;
  height: 1.8rem;
}

.shell-title {
  grid-column: 2;
  margin: 0;
  color: #efe9ff;
  font-size: 1.4rem;
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
}

.shell-main {
  width: min(100%, var(--shell-width, 40rem));
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.shell-section {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 1.2rem 1.3rem;
}

.shell-section-title {
  margin: 0 0 0.6rem;
  color: var(--fg);
  font-size: 1rem;
  letter-spacing: 0;
}

body.shell-center-titles .shell-head {
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
}

body.shell-center-titles .shell-head::after {
  content: "";
  grid-column: 3;
}

body.shell-center-titles .shell-title {
  grid-column: 2;
  text-align: center;
}

body.shell-center-titles .shell-section-title {
  text-align: center;
}

.shell-note,
.shell-prose p {
  margin: 0 0 0.7rem;
  color: var(--fg-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.shell-note:last-child,
.shell-prose p:last-child {
  margin-bottom: 0;
}

.shell-note a,
.shell-prose a {
  color: var(--accent-2);
}

.shell-prose code {
  border-radius: 5px;
  padding: 0.05rem 0.35rem;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.85em;
}

.shell-lede {
  margin: 0;
  color: var(--fg);
  font-size: 1rem;
  line-height: 1.55;
}

.shell-version {
  color: var(--muted);
  font-size: 0.85rem;
}

.shell-footnote {
  width: min(100%, var(--shell-width, 40rem));
  margin: 1.6rem 0 0;
  color: rgba(154, 163, 199, 0.55);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.shell-footnote a {
  color: var(--accent-2);
  text-underline-offset: 3px;
}

/* ── The paywall overlay (paywall.js, on the hunt pages) ─────────────────
   Ported with the first door (the Tinker); mechanism verbatim from Part I,
   tints re-minted per hunt above. */
/* ── The paywall overlay (paywall.js, on the hunt pages) ───────────────── */

/* Per-hunt accents so the curtain matches the world behind it. */
.paywall {
  --pw-accent: #cdd3ea;
  --pw-glow: rgba(205, 211, 234, 0.16);
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem
    max(1.25rem, env(safe-area-inset-bottom));
  background: rgba(4, 4, 9, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-y: auto;
  animation: paywall-fade 220ms ease;
}
@keyframes paywall-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Per-hunt tints — each door registers its accent with its PR. */
.paywall.unlock--tinker {
  --pw-accent: #f2b04a;
  --pw-glow: rgba(242, 176, 74, 0.18);
}
.paywall.unlock--maiden {
  --pw-accent: #dfe6f2;
  --pw-glow: rgba(223, 230, 242, 0.14);
}
.paywall.unlock--limner {
  --pw-accent: #c76f5a;
  --pw-glow: rgba(199, 111, 90, 0.18);
}
body.paywall-open {
  overflow: hidden;
}

/* Light leaking from the room you just earned. paywall.js feeds --pw-tilt-x/y
   from device tilt, so the warm seam behind the card drifts as if a door were
   ajar just out of frame; it sits behind the card and stills under reduced
   motion (the subscription reports a flat 0). */
.paywall-keyhole {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    32% 22% at calc(50% + var(--pw-tilt-x, 0) * 16%) calc(40% + var(--pw-tilt-y, 0) * 12%),
    color-mix(in srgb, var(--pw-accent) 32%, transparent),
    transparent 60%
  );
  transition: background 160ms ease;
}

.paywall-card {
  width: min(100%, 27rem);
  border: 1px solid color-mix(in srgb, var(--pw-accent) 38%, transparent);
  border-radius: 16px;
  padding: 1.6rem 1.5rem;
  background:
    radial-gradient(130% 90% at 50% 0%, var(--pw-glow), transparent 62%),
    rgba(12, 10, 20, 0.96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.paywall-eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pw-accent);
}
.paywall-card h2 {
  margin: 0 0 0.4rem;
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  color: #f4f1ff;
}
.paywall-tagline {
  margin: 0 0 1rem;
  color: var(--fg-secondary);
  font-size: 0.92rem;
  line-height: 1.45;
}
.paywall-value {
  margin: -0.38rem 0 0.95rem;
  color: color-mix(in srgb, var(--pw-accent) 78%, #fff);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
/* A glimpse of the room behind the price — a cropped level shot, or the
   ghost-keyhole mark where a hunt has no poster. */
.paywall-poster {
  position: relative;
  margin: 0 0 1.3rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pw-accent) 32%, transparent);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
}
.paywall-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.paywall-poster--locked-preview img {
  opacity: 0.38;
  filter: brightness(0.58) saturate(0.72) blur(2.1px);
  transform: scale(1.035);
}
.paywall-poster--locked-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 34%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.86), transparent 62%),
    rgba(0, 0, 0, 0.24);
}
.paywall-preview-lock {
  position: absolute;
  z-index: 1;
  top: 0.68rem;
  left: 0.68rem;
  width: 2.2rem;
  height: 2.2rem;
  color: #f8e7b7;
  border: 1px solid color-mix(in srgb, var(--pw-accent) 54%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.14), transparent 56%),
    rgba(4, 4, 9, 0.72);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.22), 0 0 20px var(--pw-glow);
}
.paywall-preview-lock::before,
.paywall-preview-lock::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.paywall-preview-lock::before {
  top: 0.42rem;
  width: 0.88rem;
  height: 0.72rem;
  border: 0.16rem solid currentColor;
  border-bottom: 0;
  border-radius: 0.55rem 0.55rem 0 0;
}
.paywall-preview-lock::after {
  bottom: 0.42rem;
  width: 1.12rem;
  height: 0.86rem;
  border-radius: 0.2rem;
  background: currentColor;
  box-shadow: inset 0 -0.26rem 0 rgba(0, 0, 0, 0.16);
}
.paywall-preview-caption {
  position: absolute;
  z-index: 1;
  right: 0.9rem;
  bottom: 0.72rem;
  left: 0.9rem;
  display: grid;
  gap: 0.12rem;
  text-align: left;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72);
}
.paywall-preview-kicker,
.paywall-preview-state {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.paywall-preview-kicker {
  color: var(--pw-accent);
}
.paywall-preview-title {
  color: #fffaf0;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.12;
}
.paywall-preview-state {
  color: color-mix(in srgb, var(--pw-accent) 76%, #fff);
}
.paywall-poster--ghost {
  display: grid;
  place-items: center;
  padding: 0.8rem;
  background:
    radial-gradient(70% 70% at 50% 38%, var(--pw-glow), transparent 70%),
    rgba(0, 0, 0, 0.3);
}
/* The ghost sets its own --ghost-accent default, so the per-hunt recolour and
   the frame sizing must land on the element itself, not the figure. */
.paywall-poster--ghost halloway-ghost {
  --ghost-accent: var(--pw-accent);
  --ghost-size: 7rem;
}
.paywall-offers {
  display: grid;
  gap: 0.6rem;
}
.paywall-unlock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--pw-accent) 40%, transparent);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
    rgba(255, 255, 255, 0.03);
  color: var(--fg);
  font: inherit;
  text-align: left;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.paywall-unlock-label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.98rem;
  font-weight: 700;
}
.paywall-unlock-note {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pw-accent);
}
.paywall-unlock-price {
  flex: none;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}
/* The whole-house bundle is the headline offer. */
.paywall-unlock--all {
  border-color: color-mix(in srgb, var(--pw-accent) 60%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--pw-accent) 22%, #0a0712);
}
/* The pay-the-difference upgrade: the cheapest way to the whole house, so it
   reads a touch warmer than the full bundle to mark it as the standout deal. */
.paywall-unlock--upgrade {
  border-color: color-mix(in srgb, var(--pw-accent) 80%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--pw-accent) 32%, #0a0712);
}
.paywall-unlock:hover,
.paywall-unlock:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--pw-accent) 70%, transparent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 3px var(--pw-glow);
  outline: none;
}
.paywall-unlock:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}
.paywall-restore {
  margin: 0.8rem auto 0;
  border: 0;
  background: transparent;
  color: var(--fg-secondary);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}
.paywall-restore:hover,
.paywall-restore:focus-visible {
  color: #fff;
  outline: none;
}
.paywall-restore:disabled {
  opacity: 0.6;
  cursor: default;
}
.paywall-meta {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}
.paywall-first-purchase {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.48rem;
  padding: 2rem;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--pw-accent) 28%, transparent), transparent 46%),
    rgba(5, 4, 9, 0.97);
  color: #fffaf0;
  text-align: center;
  animation: paywall-first-purchase-in 360ms ease-out both;
}
.paywall-first-purchase-key {
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid color-mix(in srgb, var(--pw-accent) 72%, #fff);
  border-radius: 50%;
  box-shadow: 0 0 34px var(--pw-glow);
  animation: paywall-first-purchase-turn 900ms ease-in-out both;
}
.paywall-first-purchase p,
.paywall-first-purchase small {
  margin: 0;
}
.paywall-first-purchase p {
  color: var(--pw-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
}
.paywall-first-purchase small {
  max-width: 18rem;
  color: var(--fg-secondary);
  line-height: 1.5;
}
@keyframes paywall-first-purchase-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes paywall-first-purchase-turn {
  0% { opacity: 0; transform: rotate(-18deg) scale(0.72); }
  55% { opacity: 1; transform: rotate(9deg) scale(1.04); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .paywall-first-purchase,
  .paywall-first-purchase-key {
    animation: none;
  }
}
/* The gated-browser offer: no buy button, just a note that the door unlocks in
   the app. Reads like a framed card so the curtain still feels deliberate. */
.paywall-gate {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--pw-accent) 35%, transparent);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
    rgba(255, 255, 255, 0.03);
  color: var(--fg-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}
.paywall-mobile {
  display: grid;
  justify-items: center;
  gap: 0.48rem;
  margin: 0.82rem 0 0;
  padding: 0.72rem 0.85rem 0.82rem;
  border: 1px solid color-mix(in srgb, var(--pw-accent) 34%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pw-accent) 10%, transparent), transparent),
    rgba(255, 255, 255, 0.035);
}
.paywall-mobile-title {
  margin: 0;
  color: var(--pw-accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.paywall-mobile-copy {
  margin: 0;
  color: var(--fg-secondary);
  font-size: 0.76rem;
  line-height: 1.45;
}
.paywall-mobile-copy a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--pw-accent) 70%, transparent);
  text-underline-offset: 0.16em;
}
.paywall-store-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.64rem;
}
.paywall-store-link {
  display: inline-block;
  border-radius: 0.45rem;
  -webkit-tap-highlight-color: transparent;
}
.paywall-store-link.is-pending {
  cursor: default;
  opacity: 0.72;
}
.paywall-store-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pw-accent) 80%, #fff);
  outline-offset: 4px;
}
.paywall-store-badge {
  display: block;
  width: auto;
  height: clamp(2.28rem, 10.4vw, 2.74rem);
  max-width: 58vw;
}
.paywall-store-badge.store-badge {
  display: block;
  width: 8.7rem;
  min-width: 8.7rem;
  height: 2.68rem;
  padding: 0.38rem 0.72rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--pw-accent) 38%, transparent);
  border-radius: 0.58rem;
  background: rgba(4, 4, 9, 0.58);
  color: #fffaf0;
  line-height: 1.08;
  text-align: left;
}
.paywall-store-badge .store-badge-eyebrow {
  display: block;
  color: color-mix(in srgb, var(--pw-accent) 75%, #fff);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.paywall-store-badge .store-badge-name {
  display: block;
  margin-top: 0.08rem;
  font-size: 0.8rem;
}
html.halloway-native .paywall-mobile {
  display: none;
}
.paywall-nav {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.paywall-nav a {
  color: var(--fg-secondary);
  text-decoration: none;
}
.paywall-nav a:hover,
.paywall-nav a:focus-visible {
  color: var(--fg);
  text-decoration: underline;
}
.paywall-legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.paywall-legal a {
  color: var(--muted);
  text-decoration: underline;
}
.paywall-legal a:hover,
.paywall-legal a:focus-visible {
  color: var(--fg);
}