/* ── Paywall (Logigates Plus) ────────────────────────────────────────────────
   Rendered inside the shared overlay sheet; leans on existing tokens and the
   .pill / .eyebrow / .linkish primitives, adding only what's specific to the
   plan list and perk rows. */

.pw-reason {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  border-radius: var(--radius); background: var(--accent-dim); color: var(--text);
  font-size: var(--text-sm);
}
.pw-reason svg { width: 18px; height: 18px; flex: none; stroke: var(--accent); }

.pw-lede { color: var(--mute); margin: var(--space-2) 0 var(--space-5); line-height: 1.5; }
.pw-meta { color: var(--mute); font-size: var(--text-sm); margin-top: var(--space-3); }

.pw-perks { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-4); }
.pw-perks li { display: flex; gap: var(--space-3); align-items: flex-start; }
.pw-ic { flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.pw-ic svg { width: 18px; height: 18px; stroke: var(--accent); }
.pw-perks strong { display: block; color: var(--text); font-weight: 500; }
.pw-perks span span, .pw-perks li span:last-child { color: var(--mute); font-size: var(--text-sm); line-height: 1.45; }

.pw-plans { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.pw-plan {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); border-radius: var(--radius);
  border: var(--hairline) solid var(--line); background: var(--surface);
  color: var(--text); cursor: pointer; transition: var(--t); width: 100%;
}
.pw-plan:hover { border-color: var(--accent); }
.pw-plan:disabled { opacity: 0.5; pointer-events: none; }
.pw-plan-name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-weight: 500; }
.pw-plan-name small { color: var(--mute); font-weight: 400; font-size: var(--text-sm); }
.pw-price { font-family: var(--font-mono); color: var(--accent); font-weight: 500; }

.pw-restore { display: block; margin: 0 auto var(--space-3); }
.pw-web { color: var(--mute); text-align: center; padding: var(--space-4); line-height: 1.5; }
.pw-fine { color: var(--mute); font-size: 12px; line-height: 1.5; margin-top: var(--space-4); }
.pw-foot { margin-top: var(--space-4); text-align: center; }
.pw-actions { display: flex; justify-content: center; margin-top: var(--space-5); }

/* The "Logigates Plus" row inside the Settings sheet. */
.set-plus {
  display: flex; align-items: center; gap: var(--space-4); width: 100%;
  padding: var(--space-4); border-radius: var(--radius); cursor: pointer;
  border: var(--hairline) solid var(--line); background: var(--accent-dim);
  color: var(--text); text-align: left; transition: var(--t);
}
.set-plus:hover { border-color: var(--accent); }
.set-plus-mark { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surface); }
.set-plus-mark svg { width: 18px; height: 18px; stroke: var(--accent); }
.set-plus-copy { flex: 1; }
.set-plus-copy p { color: var(--mute); font-size: var(--text-sm); margin: 2px 0 0; }
.set-plus-go { flex: none; color: var(--mute); }
.set-plus-go svg { width: 18px; height: 18px; }

.aw-fig { width: 52px; height: 52px; margin: var(--space-2) auto var(--space-3); display: grid; place-items: center; }
.aw-fig svg { width: 30px; height: 30px; stroke: var(--accent); fill: none; }
.aw-title { margin: 0 0 var(--space-2); }
.aw-body { color: var(--mute); line-height: 1.5; margin: 0 auto var(--space-4); max-width: 32ch; }
.aw-bal { font-family: var(--font-mono); color: var(--mute); font-size: var(--text-sm); margin-bottom: var(--space-4); }

/* ── the play meter (adchrome.js) ────────────────────────────────────────────
   A reverse ring top-right that empties 10 → 0 as puzzles are opened and refills
   on a watched ad. Rides in the shared gameChrome cluster + the hub header, so it
@keyframes cm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* hub brand header: push the meter to the far right */
.sb-brand-sp { flex: 1; }

/* three creative gradients — theme-tinted so they read in light and dark */

/* ── the web banner (persistent, menus only) ────────────────────────────────── */
/* keep the fixed banner from hiding the last row of content */

/* ── the full-screen house interstitial (the web "reward ad") ────────────────── */