/* Aster — midnight and candlelight */

/* ---- my account page: a reader's ledger card ---- */
.acct2 { max-width: 760px; margin: 0 auto; }
.acct2 > * + * { margin-top: 18px; }
/* the hairline card the whole page is built from */
.acct2-id, .acct2-purse, .acct2-panel, .acct2-nav {
  background: var(--ink-2);
  border: 1px solid color-mix(in srgb, var(--gold) 15%, transparent);
  border-radius: 16px;
}

/* identity plate */
.acct2-id { display: flex; align-items: center; gap: 18px; padding: 22px 24px; }
.acct2-avatar { width: 60px; height: 60px; flex: none; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); -webkit-mask: url("../img/aster-mark.svg") center/contain no-repeat; mask: url("../img/aster-mark.svg") center/contain no-repeat; }
.acct2-id-main { flex: 1; min-width: 0; }
.acct2-id-main h2 { font-family: var(--display); font-size: 25px; letter-spacing: 1px; color: var(--gold-bright); margin: 0; }
.acct2-since { color: var(--muted); font-size: 14px; margin: 2px 0 0; }
.acct2-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.acct2-meta b { color: var(--text); font-weight: 600; }
.acct2-dot { color: color-mix(in srgb, var(--gold) 45%, transparent); }
.acct2-role { flex: none; align-self: flex-start; }

/* the purse: the page's single focal point */
.acct2-purse {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 28px;
  border-color: color-mix(in srgb, var(--gold) 30%, transparent);
  background:
    radial-gradient(120% 140% at 88% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%),
    var(--ink-2);
}
.acct2-purse-fig { display: flex; flex-direction: column; }
.acct2-tok { font-family: var(--display); font-size: 52px; line-height: 0.95; color: var(--gold-bright); }
.acct2-tok::before { content: "✦"; font-size: 26px; vertical-align: middle; margin-right: 8px; opacity: 0.7; }
.acct2-tok-l { font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.acct2-purse-act { display: flex; flex-direction: column; gap: 10px; flex: none; }
.acct2-purse-act .btn-gold { margin: 0; }
.acct2-ghost { padding: 9px 18px; border-radius: 999px; background: transparent; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold-bright); font-family: var(--serif); font-size: 14px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.acct2-ghost:hover { border-color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 10%, transparent); }

/* particulars: two quiet panels */
.acct2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.acct2-cols > * { margin: 0; }
.acct2-panel { padding: 22px 24px; }
.acct2-h { font-family: var(--display); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 14%, transparent); }
.acct2-dl { display: grid; grid-template-columns: auto 1fr; gap: 11px 16px; margin: 0 0 16px; font-size: 14.5px; }
.acct2-dl dt { color: var(--muted); }
.acct2-dl dd { margin: 0; text-align: right; word-break: break-word; }
.acct2-textbtn { background: none; border: none; padding: 0; color: var(--gold-bright); font-family: var(--serif); font-size: 14px; cursor: pointer; transition: opacity 0.2s; }
.acct2-textbtn:hover { opacity: 0.7; }
.acct2-btn {
  display: inline-block; padding: 9px 20px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: #16101f;
  font-family: var(--display); font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase;
  transition: filter 0.2s, transform 0.2s;
}
.acct2-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.acct2-numbers { display: flex; flex-wrap: wrap; gap: 10px; }
.acct2-num { display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 12px 8px; border-radius: 10px; background: var(--ink-3); }
.acct2-num b { font-family: var(--display); font-size: 24px; color: var(--gold-bright); line-height: 1; }
.acct2-num span { font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.acct2-empty { color: var(--muted); font-style: italic; font-size: 14px; line-height: 1.5; margin: 0; }

/* quiet navigation, hairline-ruled rows */
.acct2-nav { padding: 6px 10px; }
.acct2-navrow { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: 15px 14px; background: none; border: none; border-bottom: 1px solid color-mix(in srgb, var(--gold) 10%, transparent); color: var(--text); font-family: var(--serif); font-size: 15px; cursor: pointer; text-decoration: none; transition: color 0.2s; }
.acct2-nav > :last-child { border-bottom: none; }
.acct2-navrow i { color: color-mix(in srgb, var(--gold) 45%, transparent); font-style: normal; font-size: 13px; transition: color 0.2s, transform 0.4s; }
.acct2-navrow:hover { color: var(--gold-bright); }
.acct2-navrow:hover i { color: var(--gold-bright); transform: rotate(90deg); }

.acct2-foot { text-align: center; padding-top: 4px; }
.acct2-signout { color: var(--muted); }

/* Daylight: paper cards, ink text */
html[data-theme="daylight"] .acct2-id,
html[data-theme="daylight"] .acct2-purse,
html[data-theme="daylight"] .acct2-panel,
html[data-theme="daylight"] .acct2-nav { background: linear-gradient(175deg, #ffffff, #fbf7ee); box-shadow: 0 6px 22px rgba(70,45,110,0.07); border-color: rgba(109,74,143,0.16); }
html[data-theme="daylight"] .acct2-purse { border-color: rgba(184,146,63,0.4); background: radial-gradient(120% 140% at 88% 0%, rgba(212,175,95,0.14), transparent 60%), linear-gradient(175deg, #ffffff, #fbf3e2); }
html[data-theme="daylight"] .acct2-num { background: #f4ecdb; }

@media (max-width: 620px) {
  .acct2-cols { grid-template-columns: 1fr; }
  .acct2-purse { flex-direction: column; align-items: stretch; text-align: center; gap: 18px; }
  .acct2-purse-act { flex-direction: row; }
  .acct2-purse-act .btn-gold, .acct2-ghost { flex: 1; }
  .acct2-id { flex-wrap: wrap; }
}

.admin-reading-row .admin-sub { color: var(--muted); font-size: 12.5px; }
.reading-orphan { color: var(--gold-bright); }
.admin-note { color: var(--muted); font-size: 13px; font-style: italic; margin: -4px 0 10px; }


:root {
  --ink: #0b0817;
  --ink-2: #140f26;
  --ink-3: #1d1636;
  --gold: #d4af5f;
  --gold-bright: #f0cd7e;
  --gold-dim: #8a7340;
  --plum: #6d4a8f;
  --plum-soft: #a58cc4;
  --text: #e8e2f2;
  --muted: #9d94b8;
  --card-w: 96px;
  --card-h: 164px;
  --glow-1: rgba(109, 74, 143, 0.35);
  --glow-2: rgba(72, 44, 108, 0.25);
  --serif: "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  --display: "Cinzel", "Palatino Linotype", Georgia, serif;
}

/* ---------- site themes (same dark room, different candles) ----------
   set on <html> so body.hardcore's own overrides still take precedence.
   every text/ink pair is contrast-checked >= 6.2:1 (WCAG AA+). */
html[data-theme="bloodmoon"] {
  --ink: #170709; --ink-2: #200b10; --ink-3: #2d1118;
  --gold: #d98c5f; --gold-bright: #f2b380; --gold-dim: #8a5a40;
  --plum: #8f4a5a; --plum-soft: #c48c9b;
  --text: #f2e2e4; --muted: #b8949c;
  --glow-1: rgba(143, 74, 90, 0.30); --glow-2: rgba(108, 44, 60, 0.22);
}
html[data-theme="seawitch"] {
  --ink: #06141a; --ink-2: #0a1d24; --ink-3: #102a33;
  --gold: #7fc4b8; --gold-bright: #aee6d8; --gold-dim: #4a7a72;
  --plum: #3f6b8a; --plum-soft: #8cb0c4;
  --text: #e2eef2; --muted: #94adb8;
  --glow-1: rgba(74, 112, 143, 0.28); --glow-2: rgba(44, 86, 108, 0.22);
}
html[data-theme="oldgold"] {
  --ink: #171004; --ink-2: #201808; --ink-3: #2d220e;
  --gold: #d4a94f; --gold-bright: #f0d08e; --gold-dim: #8a7340;
  --plum: #8f6d4a; --plum-soft: #c4a98c;
  --text: #f2ead8; --muted: #b8a894;
  --glow-1: rgba(143, 109, 74, 0.25); --glow-2: rgba(108, 82, 44, 0.20);
}

/* ---------- Daylight: the clean, fast, professional look ----------
   Warm parchment base, deep-plum headings, gold only for accents and banners.
   Kills the starfield, glow blobs and glass-blur, so paint cost drops hard. */
html[data-theme="daylight"] {
  --ink: #ece3d1; --ink-2: #fdfaf4; --ink-3: #ffffff;
  /* gold vars darkened to an AA-legible bronze: on parchment/white the old
     #b8923f gold text failed WCAG (~2.8:1). Gold-SURFACE controls restore
     their bright metal below, so CTAs still read as gold. */
  --gold: #7d5f16; --gold-bright: #7d5f16; --gold-dim: #9c8038;
  --plum: #6d4a8f; --plum-soft: #7d5da5;
  --text: #2c2542; --muted: #6b6180;
  --glow-1: transparent; --glow-2: transparent;
}
/* keep gold buttons/chips visibly gold (bright gradient + dark ink text) */
html[data-theme="daylight"] .btn-gold,
html[data-theme="daylight"] .acct2-cta,
html[data-theme="daylight"] .ra-primary,
html[data-theme="daylight"] .role-tag.role-admin,
html[data-theme="daylight"] .plan-reco,
html[data-theme="daylight"] .free-chip,
html[data-theme="daylight"] .layout-toggle .lens-btn.active,
html[data-theme="daylight"] .deck-switch .lens-btn.active {
  background: linear-gradient(160deg, #e6c268, #c99e3c); color: #241b34;
}
html[data-theme="daylight"] .prog-step.active i {
  background: #c99e3c; color: #241b34; border-color: #c99e3c;
}
/* aster-bloom masks are decorative fills: keep them bright metal */
html[data-theme="daylight"] .acct2-avatar,
html[data-theme="daylight"] .ff-star {
  background: linear-gradient(135deg, #e6c268, #c99e3c);
}
html[data-theme="daylight"] #stars,
html[data-theme="daylight"] #atmo { display: none; }
html[data-theme="daylight"] .nav-btn,
html[data-theme="daylight"] .reading-panel,
html[data-theme="daylight"] .modal-card,
html[data-theme="daylight"] .themes-panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* headings and wordmark go plum (the theme colour); gold is for accents */
html[data-theme="daylight"] .brand h1,
html[data-theme="daylight"] .hero-title,
html[data-theme="daylight"] .step-title,
html[data-theme="daylight"] .spread-card h3,
html[data-theme="daylight"] .reader-head b,
html[data-theme="daylight"] .auth-title,
html[data-theme="daylight"] .themes-title { color: #3a2a5c; text-shadow: none; }
/* nav pills: white glass, plum text, gold active */
html[data-theme="daylight"] .nav-btn { background: none; color: #5a5270; border: none; border-bottom: 2px solid transparent; }
html[data-theme="daylight"] .nav-btn:hover { color: #3a2a5c; }
html[data-theme="daylight"] .nav-btn.active { color: #3a2a5c; border-bottom-color: var(--gold); background: none; }
html[data-theme="daylight"] .acct-btn { background: rgba(255,255,255,0.78); border: 1px solid rgba(109,74,143,0.32); border-radius: 20px; color: #3a2a5c; }
html[data-theme="daylight"] .btn-gold,
html[data-theme="daylight"] .layout-toggle .lens-btn.active,
html[data-theme="daylight"] .deck-switch .lens-btn.active { color: #2c2542; }
/* cards and glass: white surface, soft plum shadow instead of hard black */
html[data-theme="daylight"] .spread-card { background: #fdfaf4; box-shadow: 0 4px 16px rgba(70,45,110,0.06); }
html[data-theme="daylight"] .spread-card:hover { box-shadow: 0 12px 28px rgba(70,45,110,0.13); }
html[data-theme="daylight"] .spread-card .geo .g-slot { background: linear-gradient(160deg, #7d5da5, #4e3670); box-shadow: 0 2px 6px rgba(70,45,110,0.22); }
html[data-theme="daylight"] .reading-panel,
html[data-theme="daylight"] .modal-card,
html[data-theme="daylight"] .themes-panel { background: linear-gradient(175deg, #ffffff, #fbf7ee); box-shadow: 0 10px 30px rgba(70,45,110,0.10); border-color: rgba(109,74,143,0.16); }
/* per-card section headings stay a deep gold accent, readable on white */
html[data-theme="daylight"] .reading-text h3 { color: #7d5f16; border-bottom-color: rgba(184,146,63,0.25); }
html[data-theme="daylight"] .reading-panel::before { opacity: 0.5; }
html[data-theme="daylight"] .q-chip { background: #fff; border-color: rgba(125,93,165,0.30); }
html[data-theme="daylight"] .hero-hand img { box-shadow: 0 10px 26px rgba(70,45,110,0.18); }
html[data-theme="daylight"] .horo-card img { box-shadow: 0 8px 20px rgba(70,45,110,0.16); }
/* remaining panels that hardcode a dark fill */
html[data-theme="daylight"] .horoscope-panel { background: #fdfaf4; border-color: rgba(109,74,143,0.16); box-shadow: 0 4px 16px rgba(70,45,110,0.06); }
html[data-theme="daylight"] .acct-pack { background: #fff; }
html[data-theme="daylight"] .set-form input,
html[data-theme="daylight"] .auth-form input,
html[data-theme="daylight"] .fu-input input { background: #fff; }
/* new surfaces adopt the same white-glass panel treatment as the reading panel */
html[data-theme="daylight"] .reader-client,
html[data-theme="daylight"] .fan-focus,
html[data-theme="daylight"] .horo-mine,
html[data-theme="daylight"] .admin-card { background: linear-gradient(175deg, #ffffff, #fbf7ee); box-shadow: 0 6px 20px rgba(70,45,110,0.08); border-color: rgba(109,74,143,0.16); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="daylight"] .hm-form input { background: #fff; }
html[data-theme="daylight"] .ff-question { color: #7d5f16; }

.foot-honest { font-family: var(--display); font-size: 12.5px; letter-spacing: 1px; color: var(--gold); }
.totp-key { font-family: monospace; font-size: 15px; letter-spacing: 1px; color: var(--gold-bright); background: var(--ink-3); padding: 8px 12px; border-radius: 8px; word-break: break-all; user-select: all; }

/* the purse as a page */
.purse-costs { max-width: 640px; margin: 0; }
.purse-foot { display: flex; justify-content: center; align-items: baseline; gap: 22px; }
.purse-foot .acct2-textbtn { text-decoration: none; }
#view-purse .acct2-purse .acct2-tok-l #acct-plan { color: var(--gold); }
#view-purse .acct-packs { margin-top: 4px; }
.signin-fail { color: #d9645f; font-weight: 600; }
.count-free { color: var(--gold-bright) !important; border-color: var(--gold) !important; font-weight: 600; }
.char-note { margin-top: 4px; }

/* Card of the Day: the free daily card, distinct from the paid spreads */
.daily-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 6px 0 28px; padding: 18px 22px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  background: radial-gradient(130% 150% at 85% 0%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 60%), var(--ink-2);
}
.daily-card-eyebrow { font-family: var(--display); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); display: block; }
.daily-card-line { color: var(--text); font-style: italic; margin: 4px 0 0; }
.daily-card .btn-gold { margin: 0; flex: none; }
html[data-theme="daylight"] .daily-card { background: radial-gradient(130% 150% at 85% 0%, rgba(212,175,95,0.16), transparent 60%), linear-gradient(175deg, #ffffff, #fbf3e2); box-shadow: 0 6px 20px rgba(70,45,110,0.07); border-color: rgba(184,146,63,0.4); }

/* out-of-tokens overlay: fade in over the reading */
#topup-overlay .modal-card { animation: fadeInUp 0.35s ease; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.topup-balance { font-family: var(--display); color: var(--gold-bright); margin: 2px 0 12px; }
@media (prefers-reduced-motion: reduce) { #topup-overlay .modal-card { animation: none; } }

/* gentle guidance under each section of the question step */
.guide-hint { font-size: 13.5px; color: var(--muted); font-style: italic; line-height: 1.45; margin: 4px 0 10px; }
.guide-chips { margin: 12px 0 14px; }
.guide-full { margin: 0; }
.lens-row .guide-full { order: 10; flex-basis: 100%; }

/* keyboard focus: a visible gold ring, only for keyboard users */
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
/* accessibility: keyboard skip link + a visible focus ring on the light theme */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 999; background: var(--ink); color: var(--gold-bright); padding: 10px 16px; border-radius: 0 0 10px 0; font-family: var(--serif); }
.skip-link:focus { left: 0; }
html[data-theme="daylight"] :focus-visible,
html:not([data-theme]) :focus-visible { outline-color: #7a5a12; }
html[data-theme="daylight"] .spread-card:focus-visible, html[data-theme="daylight"] .fan-card:focus-visible { outline-color: #7a5a12; }

.spread-card:focus-visible, .fan-card:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

/* design spells: the small magics */
.free-chip {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 10px;
  font-size: 11.5px; letter-spacing: 0.5px; vertical-align: 1px;
  color: var(--ink); background: linear-gradient(160deg, var(--gold-bright), var(--gold));
}
#reveal { position: relative; touch-action: manipulation; }
.reading-text strong.counsel-line {
  background: linear-gradient(90deg, var(--gold-bright), var(--gold)) no-repeat left bottom / 0% 2px;
  padding-bottom: 3px;
  animation: drawRule 0.9s ease 0.5s forwards;
}
@keyframes drawRule { to { background-size: 100% 2px; } }
#acct-btn { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .reading-text strong.counsel-line { animation: none; background-size: 100% 2px; }
}
html[data-theme="daylight"] .back-link { background: rgba(255,255,255,0.72); border-color: rgba(109,74,143,0.22); color: #5a5270; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="daylight"] .back-link:hover { color: #3a2a5c; border-color: var(--gold); background: rgba(255,255,255,0.92); }
html[data-theme="daylight"] .rc-fields input,
html[data-theme="daylight"] .admin-form input,
html[data-theme="daylight"] .admin-form select { background: #fff; }
html[data-theme="daylight"] .admin-row { border-bottom-color: rgba(109,74,143,0.12); }
html[data-theme="daylight"] .admin-h { color: #7d5f16; }
.set-hint { font-size: 13px; color: var(--muted); font-style: italic; margin: 0 0 8px; }
.dob-label { font-size: 13px; color: var(--muted); margin-top: 2px; }
.pn-preview { flex-basis: 100%; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--gold-bright); }
.acct-profile { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--muted); margin: 2px 0 10px; }
.token-legend { font-size: 14px; color: var(--gold); margin-top: -18px; }

/* daily stars: your sign from your date of birth, or set it right there */
.horo-mine {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center;
  max-width: 560px; margin: 0 auto 22px; padding: 12px 20px;
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); border-radius: 16px;
  background: color-mix(in srgb, var(--ink-2) 40%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hm-line { font-family: var(--serif); font-size: 15.5px; color: var(--text); }
.hm-line b { color: var(--gold-bright); }
.hm-line i { color: var(--muted); font-size: 13.5px; }
.hm-form { display: flex; gap: 8px; align-items: center; }
.hm-form input { padding: 8px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); background: var(--ink-2); color: var(--text); font-family: var(--serif); font-size: 15px; }
.acct-danger-h { color: #c0564e; }
.del-btn { font-family: var(--serif); font-size: 15px; letter-spacing: 0.3px; color: #e0837c; background: transparent; border: 1px solid rgba(192,86,78,0.5); border-radius: 20px; padding: 8px 18px; cursor: pointer; transition: all 0.2s; }
.del-btn:hover { background: rgba(192,86,78,0.14); border-color: #c0564e; color: #f0a09a; }
.share-msg { font-size: 13.5px; font-style: italic; color: var(--plum-soft); }

/* end-of-reading action bar */
.reading-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }
.ra-btn {
  font-family: var(--serif); font-size: 15px; letter-spacing: 0.5px;
  color: var(--gold-bright); background: transparent;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 20px;
  padding: 8px 18px; cursor: pointer; transition: all 0.2s;
}
.ra-btn:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.ra-btn:disabled { opacity: 0.5; pointer-events: none; }
.ra-primary { color: var(--ink); background: linear-gradient(160deg, var(--gold-bright), var(--gold)); border-color: var(--gold); font-weight: 600; }
.ra-primary:hover { background: linear-gradient(160deg, var(--gold-bright), var(--gold-bright)); }

/* admin: the keeper's desk */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 920px; margin: 0 auto; }
.admin-card {
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); border-radius: 16px; padding: 22px;
  background: linear-gradient(175deg, color-mix(in srgb, var(--ink-3) 62%, transparent), color-mix(in srgb, var(--ink-2) 72%, transparent));
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 14%, transparent), 0 14px 34px rgba(0, 0, 0, 0.4);
}
.admin-card-wide { grid-column: 1 / -1; }
.admin-h { font-family: var(--display); color: var(--gold-bright); letter-spacing: 1.5px; font-size: 18px; margin-bottom: 14px; }
.admin-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--text); border-bottom: 1px solid color-mix(in srgb, var(--gold) 12%, transparent); padding-bottom: 7px; }
.admin-empty { color: var(--muted); font-style: italic; }
/* support agent: the triage/draft panel folds out under a message row */
.admin-msg-row { flex-wrap: wrap; }
.admin-msg-btns { display: flex; gap: 6px; flex: none; }
.admin-triage { flex-basis: 100%; margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--gold) 6%, var(--ink-2)); border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); display: flex; flex-direction: column; gap: 8px; animation: fadeInUp 0.3s ease; }
.triage-dx { font-size: 13.5px; color: var(--text); line-height: 1.5; }
.triage-badge { display: inline-block; font-family: var(--display); letter-spacing: 0.5px; font-size: 10.5px; text-transform: uppercase; border-radius: 7px; padding: 2px 8px; margin-right: 8px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold-bright); white-space: nowrap; }
.triage-badge.triage-medium { color: var(--plum-soft); border-color: rgba(165, 140, 196, 0.4); }
.triage-badge.triage-low { color: var(--muted); border-color: color-mix(in srgb, var(--muted) 40%, transparent); }
.triage-ctx { font-size: 12.5px; color: var(--muted); }
.triage-draft-label { font-size: 12px; color: var(--muted); }
.triage-draft { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); background: var(--ink-2); color: var(--text); font-family: var(--serif); font-size: 14px; line-height: 1.5; resize: vertical; box-sizing: border-box; }
.triage-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.triage-note { font-size: 12px; color: var(--muted); font-style: italic; }
.admin-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-form input, .admin-form select { padding: 9px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); background: var(--ink-2); color: var(--text); font-family: var(--serif); font-size: 15px; }
.admin-form input { flex: 1 1 130px; }
.admin-msg { font-size: 13.5px; font-style: italic; margin-top: 8px; min-height: 18px; }
.admin-tags { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.role-tag { font-family: var(--display); letter-spacing: 1px; font-size: 11px; text-transform: uppercase; border-radius: 8px; padding: 2px 8px; }
.role-tag.role-seeker { color: var(--muted); border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent); }
.role-tag.role-reader { color: var(--gold-bright); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); }
.role-tag.role-admin { color: var(--ink); background: linear-gradient(160deg, var(--gold-bright), var(--gold)); }
@media (max-width: 640px) { .admin-grid { grid-template-columns: 1fr; } }

/* printable reading report: a keepsake sheet, not a printout of a webpage */
.report-print { display: none; }
@media print {
  @page { margin: 16mm 18mm; }
  body.printing > *:not(.report-print) { display: none !important; }
  body.printing .report-print {
    display: block; color: #2c2542; background: #fff;
    font-family: "Cormorant Garamond", Georgia, serif; font-size: 15.5px; line-height: 1.6;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  /* header: centred bloom, letterspaced wordmark, occasion line */
  .report-print .rp-head { text-align: center; margin-bottom: 6mm; }
  .report-print .rp-mark { width: 52px; height: 52px; margin: 0 auto 8px; background: linear-gradient(135deg, #d4af5f, #b8923f); -webkit-mask: url("../img/aster-mark.svg") center/contain no-repeat; mask: url("../img/aster-mark.svg") center/contain no-repeat; }
  .report-print .rp-brand { font-family: "Cinzel", Georgia, serif; font-size: 26px; letter-spacing: 6px; color: #3a2a5c; }
  .report-print .rp-sub { color: #6b6180; font-size: 13.5px; font-style: italic; margin-top: 2px; }
  /* the gold rule with a centred bloom mark */
  .report-print .rp-rule { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 5mm 0; }
  .report-print .rp-rule::before, .report-print .rp-rule::after { content: ""; flex: 1; height: 1.5px; background: #b8923f; }
  .report-print .rp-rule .rp-rule-mark { flex: none; width: 20px; height: 20px; background: linear-gradient(135deg, #d4af5f, #b8923f); -webkit-mask: url("../img/aster-mark.svg") center/contain no-repeat; mask: url("../img/aster-mark.svg") center/contain no-repeat; }
  .report-print .rp-rule-mid { margin-top: 8mm; }
  /* the question as a display quote */
  .report-print .rp-q { text-align: center; font-size: 19px; font-style: italic; color: #3a2a5c; margin: 2mm 10mm 1mm; }
  .report-print .rp-meta { text-align: center; font-family: "Cinzel", Georgia, serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #7d5f16; margin-bottom: 6mm; }
  /* the cards, as cards */
  .report-print .rp-spread { display: flex; justify-content: center; gap: 7mm; flex-wrap: wrap; margin: 0 0 7mm; break-inside: avoid; }
  .report-print .rp-card { width: 26mm; text-align: center; margin: 0; }
  .report-print .rp-card img { width: 100%; border-radius: 2mm; border: 1px solid #d8c28a; box-shadow: 0 1mm 3mm rgba(70, 45, 110, 0.18); }
  .report-print .rp-card img.rev { transform: rotate(180deg); }
  .report-print .rp-card figcaption { font-size: 11.5px; line-height: 1.35; margin-top: 2mm; color: #2c2542; }
  .report-print .rp-card .rp-pos { display: block; font-family: "Cinzel", Georgia, serif; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: #7d5f16; margin-bottom: 1px; }
  .report-print .rp-card figcaption i { display: block; color: #6b6180; font-size: 10.5px; }
  /* the reading: drop cap, gold position headings */
  .report-print .rp-reading { text-align: justify; }
  .report-print .rp-reading > p:first-of-type::first-letter { font-family: "Cinzel", Georgia, serif; font-size: 40px; line-height: 0.85; color: #7d5f16; float: left; padding: 2px 6px 0 0; }
  .report-print .rp-reading h3 { font-family: "Cinzel", Georgia, serif; font-size: 14px; letter-spacing: 1.5px; color: #7d5f16; border-bottom: 1px solid #ecdfc0; padding-bottom: 2px; margin: 6mm 0 2.5mm; break-after: avoid; }
  .report-print .rp-reading p, .report-print .rp-fu p { margin-bottom: 2.5mm; }
  .report-print .rp-reading ul, .report-print .rp-fu ul { margin: 0 0 2.5mm 6mm; }
  .report-print strong { color: #7d5f16; }
  /* follow-up questions: thumbnail + exchange */
  .report-print .rp-h { text-align: center; font-family: "Cinzel", Georgia, serif; font-size: 15px; letter-spacing: 2px; color: #3a2a5c; margin: 0 0 5mm; }
  .report-print .rp-fu { display: flex; gap: 5mm; align-items: flex-start; margin-bottom: 5mm; break-inside: avoid; }
  .report-print .rp-fu-img { width: 18mm; flex: none; border-radius: 1.5mm; border: 1px solid #d8c28a; }
  .report-print .rp-fu-img.rev { transform: rotate(180deg); }
  .report-print .rp-fu-q { font-style: italic; color: #6b6180; margin-bottom: 1mm; }
  .report-print .rp-fu h4 { font-family: "Cinzel", Georgia, serif; font-size: 13px; letter-spacing: 1px; color: #7d5f16; margin-bottom: 1.5mm; }
  /* footer */
  .report-print .rp-foot { margin-top: 8mm; }
  .report-print .rp-foot p { text-align: center; color: #6b6180; font-size: 12px; font-style: italic; }
}
.acct-plan-featured { position: relative; border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.plan-anchor { display: block; margin-top: 4px; font-size: 12.5px; color: var(--gold); font-style: italic; }

/* hardcore mode: the candle is snuffed, the room goes cold */
body.hardcore {
  --gold: #9aa7b4;
  --gold-bright: #c4d0dc;
  --gold-dim: #5c6672;
  --plum: #3e4a58;
  --plum-soft: #8494a6;
}
body.hardcore { background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(60, 74, 92, 0.3), transparent 60%), #0a0d12; }
body.hardcore #stars .star { animation-play-state: paused; opacity: 0.12; }
body.hardcore .glow { opacity: 0.25; }
body.hardcore .bloom .petal { fill: #a0b2c4; }
body.hardcore .bloom-pip { fill: #c4d0dc; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--ink); }
body {
  font-family: var(--serif);
  color: var(--text);
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--glow-1), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, var(--glow-2), transparent 60%),
    var(--ink);
  overflow-x: hidden;
}

#stars {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
#stars .star {
  position: absolute; border-radius: 50%;
  background: #fff;
  animation: twinkle var(--tw, 4s) ease-in-out infinite;
  opacity: 0.6;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.8; }
}

/* atmosphere: slow-breathing glow blobs behind everything */
#atmo { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.glow {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5;
  animation: breathe 16s ease-in-out infinite;
  transition: opacity 1.2s;
}
.glow-a { width: 44vw; height: 44vw; left: -12vw; top: -14vw; background: radial-gradient(circle, rgba(109, 74, 143, 0.5), transparent 70%); }
.glow-b { width: 36vw; height: 36vw; right: -10vw; top: 30vh; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%); animation-delay: -6s; }
.glow-c { width: 40vw; height: 40vw; left: 28vw; bottom: -20vw; background: radial-gradient(circle, rgba(72, 44, 108, 0.45), transparent 70%); animation-delay: -11s; }
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3vh) scale(1.07); }
}

#app { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 20px 60px; }

/* ---------- header ---------- */
header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding: 26px 4px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand .moon {
  font-size: 40px; color: var(--gold-bright);
  text-shadow: 0 0 22px color-mix(in srgb, var(--gold-bright) 70%, transparent);
}
.brand-mark {
  width: 42px; height: 42px; flex-shrink: 0; display: block;
  filter: drop-shadow(0 0 10px rgba(240, 205, 126, 0.32));
}
html[data-theme="daylight"] .brand-mark { filter: drop-shadow(0 1px 2px rgba(120, 90, 160, 0.22)); }
.brand h1 {
  font-family: var(--display);
  font-size: 30px; letter-spacing: 3px; font-weight: 600;
  color: var(--gold-bright); text-transform: uppercase;
}
.brand .sub { color: var(--muted); font-style: italic; letter-spacing: 1px; }

nav { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-btn {
  font-family: var(--serif); font-size: 16px; letter-spacing: 0.5px;
  background: none; color: var(--muted);
  border: none; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 6px 10px; cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.nav-btn:hover { color: var(--gold-bright); border-color: var(--gold); }
.nav-btn.active {
  color: var(--gold-bright); background: none;
  border-bottom-color: var(--gold); font-weight: 600;
}

/* ---------- hero: the opening hand ---------- */
.hero { text-align: center; padding: 40px 0 34px; }
.hero-hand { position: relative; height: 210px; margin-bottom: 26px; perspective: 900px; }
.hero-hand img {
  position: absolute; left: 50%; bottom: 0; width: 118px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.65);
  transform-origin: 50% 120%;
  transform: translateX(-50%) rotate(calc((var(--i) - 2) * 11deg)) translateY(calc((var(--i) - 2) * (var(--i) - 2) * 4px));
  transition: transform 0.35s, box-shadow 0.35s;
  animation: heroRise 0.9s cubic-bezier(0.2, 0.8, 0.25, 1) both;
  animation-delay: calc(var(--i) * 0.09s);
}
.hero-hand img:hover {
  transform: translateX(-50%) rotate(calc((var(--i) - 2) * 11deg)) translateY(-22px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.7), 0 0 24px color-mix(in srgb, var(--gold-bright) 25%, transparent);
  z-index: 9;
}
@keyframes heroRise {
  from { opacity: 0; transform: translateX(-50%) rotate(0deg) translateY(70px); }
}
.hero-title {
  font-family: var(--display); font-size: 48px; font-weight: 600; letter-spacing: 0.5px;
  color: var(--gold-bright); text-shadow: 0 0 34px color-mix(in srgb, var(--gold-bright) 35%, transparent);
}
.hero-sub { color: var(--muted); font-style: italic; font-size: 18.5px; line-height: 1.6; margin-top: 12px; }

/* ---------- progress rail ---------- */
.progress {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 22px 0 0; flex-wrap: wrap;
}
.prog-step {
  color: var(--muted); font-size: 13.5px; letter-spacing: 2px; text-transform: uppercase;
  opacity: 0.55; transition: all 0.3s; display: flex; align-items: center; gap: 8px;
}
.prog-step i {
  font-style: normal; font-family: var(--display); font-size: 12px;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold);
}
.prog-step.active { color: var(--gold-bright); opacity: 1; }
.prog-step.active i { background: var(--gold); color: var(--ink); border-color: var(--gold); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 50%, transparent); }
.prog-step.done { opacity: 0.85; }
.prog-step.done i { color: var(--gold-bright); border-color: var(--gold); }
.prog-sep { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 50%, transparent), transparent); }

/* ---------- steps / layout ---------- */
.view.hidden, .step.hidden, .hidden { display: none !important; }
.step { padding: 34px 0 10px; animation: rise 0.5s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.step-title { font-family: var(--display); font-size: 27px; font-weight: 600; color: var(--gold); letter-spacing: 1px; text-align: center; }
.step-hint { text-align: center; color: var(--muted); font-style: italic; margin: 8px 0 26px; font-size: 17px; }
.muted { color: var(--muted); }

.back-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--serif); font-size: 14.5px; letter-spacing: 0.5px; color: var(--plum-soft);
  background: color-mix(in srgb, var(--ink-2) 42%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); border-radius: 20px;
  padding: 7px 16px; cursor: pointer; margin-bottom: 16px; transition: all 0.2s;
}
.back-link:hover { color: var(--gold-bright); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }

/* ---------- spread grid ---------- */
.spread-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
}
.spread-card {
  /* grow to fill a row, but cap so a short final row stays card-width and centres
     (via the grid's justify-content) instead of stretching across the gap */
  flex: 1 1 240px; max-width: 320px;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, var(--ink-3), var(--ink-2));
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); border-radius: 14px;
  padding: 22px 20px; cursor: pointer; transition: all 0.25s; position: relative; overflow: hidden;
}
.spread-card::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, color-mix(in srgb, var(--gold-bright) 12%, transparent), transparent 70%);
  opacity: 0; transition: opacity 0.25s;
}
.spread-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
.spread-card:hover::after { opacity: 1; }
.spread-card h3 { font-family: var(--display); color: var(--gold-bright); font-size: 17.5px; letter-spacing: 1px; margin-bottom: 6px; }
/* cost badge sits on its own line above the title (cards are too narrow for a
   top-right float without long titles running under it) */
.spread-card .count {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; white-space: nowrap;
  color: var(--plum-soft); font-size: 13px; letter-spacing: 1px;
  border: 1px solid rgba(165, 140, 196, 0.4); border-radius: 12px; padding: 2px 4px 2px 10px;
}
/* the price is the number that decides a purchase: give it its own gold weight */
.spread-card .count-cost {
  color: var(--gold-bright); font-weight: 600; letter-spacing: 0.5px;
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  border-radius: 9px; padding: 1px 8px;
}
.spread-card p { color: var(--muted); font-style: italic; font-size: 15px; line-height: 1.45; }
/* position-true miniature of the spread's geometry, laid on a table edge
   (height is set inline per spread, so multi-row layouts get vertical room) */
.spread-card .geo { position: relative; height: 92px; margin-top: auto; padding-top: 16px; }
.spread-card .geo::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 2px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 45%, transparent), transparent);
}
.spread-card .geo .g-slot {
  position: absolute; width: 28px; height: 44px; border-radius: 4px;
  background: linear-gradient(160deg, var(--plum), var(--ink-3));
  border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s, border-color 0.3s;
}
.spread-card .geo .g-slot::before {
  /* the card-back pip, so the miniature reads as a deck not a dot */
  content: ""; position: absolute; inset: 4px; border-radius: 2.5px;
  border: 1px solid color-mix(in srgb, var(--gold-bright) 38%, transparent);
}
.spread-card .geo .g-slot.rot { transform: rotate(90deg); }
.spread-card:hover .geo .g-slot { border-color: var(--gold); transform: translateY(-2px); }
.spread-card:hover .geo .g-slot.rot { transform: rotate(90deg) translateX(-2px); }

/* ---------- question step ---------- */
.question-box { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.question-box label { color: var(--gold); letter-spacing: 1px; font-size: 17px; }
.question-box textarea {
  font-family: var(--serif); font-size: 18px; color: var(--text);
  background: var(--ink-2); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 10px;
  padding: 14px 16px; resize: vertical; outline: none;
}
.question-box textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 12%, transparent); }

.q-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: -8px; }
.q-chip {
  font-family: var(--serif); font-size: 14px; font-style: italic;
  color: var(--plum-soft); background: rgba(29, 22, 54, 0.5);
  border: 1px solid rgba(165, 140, 196, 0.28); border-radius: 15px;
  padding: 5px 14px; cursor: pointer; transition: all 0.2s;
}
.q-chip:hover { color: var(--gold-bright); border-color: var(--gold); transform: translateY(-1px); }

.lens-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lens-label { color: var(--muted); font-style: italic; }
.lens-btns, .lib-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.lib-filters { justify-content: center; margin-bottom: 22px; }
.deck-switch { display: flex; gap: 10px; align-items: center; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
.deck-switch .lens-btn.active { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.lens-btn {
  font-family: var(--serif); font-size: 15px; letter-spacing: 0.5px;
  background: transparent; color: var(--muted);
  border: 1px solid rgba(165, 140, 196, 0.35); border-radius: 16px;
  padding: 6px 16px; cursor: pointer; transition: all 0.2s;
}
.lens-btn:hover { color: var(--text); border-color: var(--plum-soft); }
.lens-btn.active { color: var(--ink); background: var(--plum-soft); border-color: var(--plum-soft); font-weight: 600; }

.settings-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* reader mode: reading for a client */
.reader-client { margin: 6px 0 8px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--ink-2) 45%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rc-head { font-family: var(--display); color: var(--gold-bright); letter-spacing: 1.5px; font-size: 15px; margin-bottom: 10px; }
.rc-sub { display: block; font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 13px; letter-spacing: 0; margin-top: 2px; }
.rc-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.rc-fields input { flex: 1 1 200px; padding: 9px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); background: var(--ink-2); color: var(--text); font-family: var(--serif); font-size: 15px; }
.rc-fields input:focus { border-color: var(--gold); outline: none; }

/* card-pick focus: the question echoed + rotating guidance, with a slow-spinning mark */
.fan-focus {
  display: flex; align-items: center; gap: 14px; justify-content: flex-start;
  max-width: 560px; margin: 4px auto 24px; padding: 14px 20px; text-align: left;
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); border-radius: 16px;
  background: color-mix(in srgb, var(--ink-2) 40%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ff-star {
  flex: none; width: 30px; height: 30px; transform-origin: 50% 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-mask: url("../img/aster-mark.svg") center / contain no-repeat;
  mask: url("../img/aster-mark.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gold-bright) 45%, transparent));
  animation: asterSpin 6s ease-in-out infinite;
}
.ff-body { min-width: 0; }
.ff-question { font-family: var(--display); color: var(--gold-bright); font-size: 15px; letter-spacing: 0.5px; margin-bottom: 3px; }
.ff-guide { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 15.5px; line-height: 1.4; }
.ff-in { animation: ffFade 0.7s ease; }
@keyframes ffFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ff-star { animation: none; } .ff-in { animation: none; } }

/* focus mode: dim the chrome, still the background, spotlight the cards */
.focus-toggle {
  font-family: var(--serif); font-size: 14px; letter-spacing: 0.5px; color: var(--gold-bright);
  background: transparent; border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: 20px; padding: 6px 16px; cursor: pointer; transition: all 0.2s; margin-left: 6px;
}
.focus-toggle:hover, .focus-toggle[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
/* a dark wash over the whole background colour (behind the content) */
body.focus-mode::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: rgba(4, 2, 12, 0.62); transition: opacity 0.45s ease; }
html[data-theme="daylight"] body.focus-mode::before { background: rgba(38, 24, 66, 0.30); }
body.focus-mode header, body.focus-mode nav { filter: blur(4px); opacity: 0.22; pointer-events: none; transition: opacity 0.45s ease, filter 0.45s ease; }
body.focus-mode #stars .star, body.focus-mode .glow { animation-play-state: paused !important; }
body.focus-mode #stars, body.focus-mode #atmo { opacity: 0.08; transition: opacity 0.45s ease; }
/* strip the step chrome: keep only the cards, the guidance, the back + focus buttons */
body.focus-mode #step-fan .step-title,
body.focus-mode #step-fan #fan-hint,
body.focus-mode #layout-toggle .lens-label,
body.focus-mode #layout-toggle [data-layout] { display: none; }
body.focus-mode #layout-toggle { justify-content: center; margin-bottom: 4px; }
body.focus-mode #step-fan .fan-focus { border-color: color-mix(in srgb, var(--gold) 46%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--gold-bright) 14%, transparent); }
.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text); font-size: 16px; }
.toggle input { display: none; }
.toggle .track {
  width: 42px; height: 22px; border-radius: 11px; background: var(--ink-3);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); position: relative; transition: background 0.2s;
}
.toggle .track::after {
  content: ""; position: absolute; top: 2px; left: 3px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--muted); transition: all 0.2s;
}
.toggle input:checked + .track { background: var(--gold-dim); }
.toggle input:checked + .track::after { left: 22px; background: var(--gold-bright); }

.theme-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.theme-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); border-radius: 20px; background: transparent;
  color: var(--muted); font-family: var(--serif); font-size: 14.5px; letter-spacing: 0.5px;
  cursor: pointer; transition: all 0.25s;
}
.theme-chip:hover { border-color: var(--gold); color: var(--gold-bright); }
.theme-chip.active { border-color: var(--gold); color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.theme-chip .sw { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); transition: box-shadow 0.2s, border-color 0.2s; }
.theme-chip.active .sw { border-color: var(--gold-bright); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent); }
.rev-chance { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 15px; }
.rev-chance input[type="range"] { accent-color: var(--gold); width: 120px; }
.rev-chance.disabled { opacity: 0.35; pointer-events: none; }

.btn-gold {
  font-family: var(--serif); font-size: 19px; letter-spacing: 1px; font-weight: 600;
  color: var(--ink); background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  border: none; border-radius: 14px; padding: 13px 34px; cursor: pointer;
  align-self: center; transition: all 0.25s;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--gold) 25%, transparent);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 32px color-mix(in srgb, var(--gold) 40%, transparent); }
.btn-gold:disabled { opacity: 0.4; pointer-events: none; }

/* the other door: sign-up/sign-in flip as a first-class action, not a whisper */
.auth-alt {
  font-family: var(--serif); font-size: 16.5px; letter-spacing: 0.6px; font-weight: 600;
  color: var(--gold-bright); background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 14px;
  padding: 11px 30px; cursor: pointer; align-self: center; transition: all 0.25s;
}
.auth-alt:hover { border-color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 10%, transparent); transform: translateY(-1px); }
html[data-theme="daylight"] .auth-alt { color: #6d4a8f; border-color: rgba(109,74,143,0.45); }
html[data-theme="daylight"] .auth-alt:hover { border-color: #6d4a8f; background: rgba(109,74,143,0.07); }

/* ---------- picking the cards: fan or row ---------- */
.layout-toggle { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 0 0 6px; flex-wrap: wrap; }
.layout-toggle .lens-btn.active { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* each card composes its own transform from CSS vars, so lifting on hover
   never clobbers the fan angle: transform = rotate(--rot) translate(--lift) */
.fan {
  position: relative; height: 300px; margin: 14px auto 0; max-width: 1000px;
}
.fan::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: 4px; height: 26px;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.fan-card {
  position: absolute;
  width: var(--card-w); height: var(--card-h);
  --rot: 0deg; --lift: 0px;
  transform-origin: 50% 92%;
  transform: rotate(var(--rot)) translateY(var(--lift));
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.25, 1), filter 0.25s;
  will-change: transform;
}
.fan-card.dealing { animation: dealIn 0.5s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
@keyframes dealIn {
  from { opacity: 0; transform: translate(-46%, 40px) rotate(0deg) scale(0.9); }
}
.fan-card .backface { width: 100%; height: 100%; transition: filter 0.25s, box-shadow 0.25s; }
.fan-card:hover { --lift: -26px; z-index: 200 !important; }
.fan-card:hover .backface { filter: brightness(1.32); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.7); }
.fan-card.picked { pointer-events: none; z-index: 150 !important; --lift: -44px; }
.fan-card.picked .backface {
  filter: brightness(1.5) drop-shadow(0 0 18px color-mix(in srgb, var(--gold-bright) 90%, transparent));
}

/* row layout: a straight, evenly-spaced, horizontally-scrollable line.
   easier to pick precisely; cards sit upright. */
.fan.row {
  display: flex; flex-wrap: nowrap; height: auto; overflow-x: auto; overflow-y: visible;
  gap: 10px; padding: 40px 12px 24px; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; justify-content: flex-start;
}
.fan.row::after { display: none; }
.fan.row .fan-card {
  position: static; flex: 0 0 auto; --rot: 0deg;
  transform-origin: 50% 100%; scroll-snap-align: center;
}
.fan.row .fan-card:hover { --lift: -18px; }
.fan.row .fan-card.picked { --lift: -14px; }

.fan-status { position: relative; z-index: 250; text-align: center; color: var(--muted); font-style: italic; margin-top: 20px; font-size: 17px; }
.fan-status #fan-count { color: var(--gold-bright); font-weight: 600; }
.fan-status #fan-count { color: var(--gold-bright); font-weight: 600; }

.backface {
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  background: url("../cards/back.svg?v=2") center / cover no-repeat, #1a1338;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  position: relative;
}

/* ---------- the board ---------- */
.board {
  display: grid; gap: 18px; justify-content: center; align-items: start;
  margin: 8px auto 26px; padding: 26px 18px;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(109, 74, 143, 0.14), transparent 75%);
  border-radius: 20px;
}
.slot { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.slot .pos-name { color: var(--gold); font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; text-align: center; }
.slot .card-name { color: var(--plum-soft); font-style: italic; font-size: 14px; text-align: center; min-height: 18px; }

.flip {
  width: calc(var(--card-w) * 1.25); height: calc(var(--card-h) * 1.25);
  perspective: 900px; cursor: pointer;
}
.flip-inner {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.4, 0.1, 0.2, 1);
}
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip .backface, .flip .face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 8px;
}
.flip .face {
  transform: rotateY(180deg);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  background: #000;
}
.flip .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flip .face.reversed img { transform: rotate(180deg); }
.slot .rev-tag {
  background: var(--plum); color: #fff; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  border-radius: 10px; padding: 2px 9px; margin-top: -2px; opacity: 0; transition: opacity 0.3s 0.6s;
}
.slot.revealed .rev-tag { opacity: 1; }
.slot .crossing { transform: rotate(90deg) translateX(-8px); }

.reveal-wrap { text-align: center; margin: 6px 0 20px; }

/* ---------- reading panel ---------- */
.reading-panel {
  max-width: 760px; margin: 0 auto;
  background: linear-gradient(175deg, rgba(29, 22, 54, 0.62), rgba(20, 15, 38, 0.72));
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); border-radius: 16px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 14%, transparent), 0 18px 44px rgba(0, 0, 0, 0.45);
  padding: 26px 30px; animation: rise 0.5s ease;
}
.reading-panel::before {
  content: "─────  ✦  ─────";
  display: block; text-align: center; color: var(--gold-dim);
  letter-spacing: 4px; font-size: 13px; margin-bottom: 18px;
}
.reader-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.reader-orb {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-size: 20px; color: var(--gold-bright); overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #3a2c66, #171130);
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--gold-bright) 80%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 25%, transparent);
}
.reader-orb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reader-head b { color: var(--gold-bright); letter-spacing: 2px; font-size: 18px; }
.source-tag { display: block; color: var(--muted); font-size: 13.5px; font-style: italic; }

/* yes/no verdict: the drawn card's answer, big and gold at the top of the reading */
.reading-verdict { font-family: var(--display); text-align: center; font-weight: 600; letter-spacing: 1px; line-height: 1; font-size: 60px; margin: 2px 0 18px; color: var(--gold-bright); text-shadow: 0 0 42px color-mix(in srgb, var(--gold-bright) 40%, transparent); }
.reading-verdict.verdict-no { color: var(--gold); text-shadow: 0 0 34px color-mix(in srgb, var(--gold) 32%, transparent); }
.reading-verdict.verdict-maybe { color: var(--gold-dim); text-shadow: none; }
.reading-text { font-size: 18.5px; line-height: 1.7; }
/* an in-reading divider: gold hairlines flanking a mini aster bloom, matching the report */
.rd-rule { display: flex; align-items: center; justify-content: center; gap: 12px; width: 62%; margin: 22px auto; }
.rd-rule::before, .rd-rule::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--gold) 55%, transparent); }
.rd-rule-mark { flex: none; width: 24px; height: 24px; display: block; }
.reading-text > p:first-of-type::first-letter {
  font-family: var(--display); float: left; font-size: 52px; line-height: 0.85;
  color: var(--gold-bright); padding: 4px 8px 0 0;
  text-shadow: 0 0 18px color-mix(in srgb, var(--gold-bright) 40%, transparent);
}
body.hardcore .reading-text > p:first-of-type::first-letter { float: none; font-size: inherit; font-family: inherit; padding: 0; text-shadow: none; color: inherit; }
.reading-text h3 {
  font-family: var(--display); color: var(--gold); font-size: 16.5px; letter-spacing: 1.5px; margin: 22px 0 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); padding-bottom: 5px;
}
.reading-sig {
  margin-top: 22px; text-align: right; color: var(--plum-soft); font-style: italic; font-size: 16px;
}
.reading-sig b { font-family: var(--display); color: var(--gold); font-style: normal; letter-spacing: 1.5px; font-weight: 600; }
.reading-text p { margin: 10px 0; }
.reading-text ul { margin: 10px 0 10px 4px; list-style: none; }
.reading-text li { margin: 7px 0; padding-left: 20px; position: relative; }
.reading-text li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); font-size: 12px; top: 4px; }
.reading-text strong { color: var(--gold-bright); }
.reading-text em { color: var(--plum-soft); }

/* ---------- follow-up cards + clarifiers ---------- */
.deeper-wrap { margin-top: 26px; border-top: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); padding-top: 22px; }

.clarifier {
  display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px;
  animation: rise 0.5s ease;
}
.clarifier img {
  width: 92px; border-radius: 7px; flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}
.clarifier img.reversed { transform: rotate(180deg); }
.clarifier h4 { font-family: var(--display); color: var(--gold); font-size: 15.5px; letter-spacing: 1.2px; margin-bottom: 6px; }
.clarifier p { font-size: 17px; line-height: 1.6; }
.clarifier .fu-answer-text p { margin-bottom: 8px; }
.clarifier .fu-answer-text p:last-child { margin-bottom: 0; }
.clarifier .fu-answer-text ul { margin: 6px 0 8px 18px; }
.clarifier .fu-answer-text li { font-size: 17px; line-height: 1.55; }

/* follow-up thread */
.followup { margin-top: 22px; }
.fu-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.fu-thread .msg { max-width: 82%; }
.fu-input { display: flex; gap: 10px; }
.fu-input input {
  flex: 1; font-family: var(--serif); font-size: 16.5px; color: var(--text);
  background: rgba(11, 8, 23, 0.55); border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); border-radius: 20px;
  padding: 10px 16px; outline: none;
}
.fu-input input:focus { border-color: var(--gold); }
.fu-btn { padding: 9px 22px; font-size: 15px; letter-spacing: 1px; }
.fu-hint { color: var(--text); font-size: 14.5px; text-align: center; margin-top: 10px; }
.fu-hint.char-note { color: var(--muted); font-size: 13px; font-style: italic; }
.fu-cost { color: var(--gold-bright); font-weight: 600; font-style: normal; white-space: nowrap; }

.loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 0; }
.loading p { color: var(--muted); font-style: italic; }
.loading-hint { margin-top: 2px; font-size: 13px; opacity: 0.82; animation: fadeInUp 0.4s ease; }
.reveal-error { color: var(--text); font-style: italic; margin-bottom: 16px; }
#reveal-retry { margin: 0 auto; display: block; }
.reveal-recovered { color: var(--gold-bright); font-style: italic; font-size: 14px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); }
/* the reading loader: the aster head turns slowly while the querent waits, and
   one petal lights for each twelfth of the reading that has actually arrived */
.bloom { width: 84px; height: 84px; }
.bloom svg { width: 100%; height: 100%; overflow: visible; }
.bloom-petals { transform-box: view-box; transform-origin: 50% 50%; animation: bloomTurn 14s linear infinite; }
.bloom .petal { fill: var(--gold); opacity: 0.12; transition: opacity 0.55s ease, filter 0.55s ease; }
.bloom .petal.lit { opacity: 0.95; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gold-bright) 70%, transparent)); }
.bloom-core { fill: color-mix(in srgb, var(--gold) 55%, var(--ink)); }
.bloom-pip { fill: var(--gold-bright); transform-box: view-box; transform-origin: 50% 50%; animation: bloomBreathe 2.6s ease-in-out infinite; }
@keyframes bloomTurn { to { transform: rotate(360deg); } }
@keyframes bloomBreathe { 0%, 100% { opacity: 0.55; transform: scale(0.86); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes asterSpin {
  0%   { transform: rotate(0deg) scale(0.9); }
  50%  { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .bloom-petals, .bloom-pip { animation: none; }
}

/* ---------- horoscope ---------- */
.sign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; max-width: 860px; margin: 0 auto; }
.sign-btn {
  font-family: var(--serif); background: var(--ink-2); color: var(--text);
  border: 1px solid rgba(165, 140, 196, 0.3); border-radius: 12px;
  padding: 12px 8px; cursor: pointer; transition: all 0.2s; text-align: center;
}
.sign-btn .glyph { display: block; font-size: 26px; color: var(--gold); margin-bottom: 4px; }
.sign-btn .dates { display: block; font-size: 13px; color: var(--muted); }
.sign-btn:hover, .sign-btn.active { border-color: var(--gold); transform: translateY(-2px); }
.sign-btn.active { background: var(--ink-3); box-shadow: 0 0 0 1px var(--gold); }

.horoscope-panel {
  max-width: 760px; margin: 30px auto 0;
  background: linear-gradient(175deg, rgba(29, 22, 54, 0.62), rgba(20, 15, 38, 0.72));
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); border-radius: 16px; padding: 26px 30px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 14%, transparent), 0 18px 44px rgba(0, 0, 0, 0.45);
  animation: rise 0.5s ease;
}
.horo-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.horo-glyph { font-size: 44px; color: var(--gold-bright); text-shadow: 0 0 18px color-mix(in srgb, var(--gold-bright) 60%, transparent); }
.horo-head h3 { color: var(--gold-bright); font-size: 26px; letter-spacing: 2px; }
.horo-body { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.horo-card { text-align: center; }
.horo-card img {
  width: 150px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}
.horo-card img.reversed { transform: rotate(180deg); }
.horo-card-name { color: var(--plum-soft); font-style: italic; margin-top: 8px; font-size: 15px; }
.horo-text-wrap { flex: 1; min-width: 260px; }
.horo-text { font-size: 18px; line-height: 1.65; }
.horo-charms { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 18px; color: var(--muted); font-size: 15px; }
.horo-charms b { color: var(--gold-bright); }

/* ---------- message bubbles (used by the reading follow-up thread) ---------- */
.msg { max-width: 78%; padding: 11px 16px; border-radius: 14px; font-size: 17px; line-height: 1.5; }
.msg.you { align-self: flex-end; background: var(--plum); color: #fff; border-bottom-right-radius: 4px; }
.msg.mistique { align-self: flex-start; background: var(--ink-3); border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); border-bottom-left-radius: 4px; }
.msg.thinking { color: var(--muted); font-style: italic; }

/* ---------- account / paywall ---------- */
.acct-btn { border: 1px solid color-mix(in srgb, var(--gold-bright) 55%, transparent); border-radius: 20px; padding: 7px 16px; background: rgba(29, 22, 54, 0.45); color: var(--gold-bright); }
.acct-btn .tok-chip { font-weight: 600; }

.auth-card, .acct-card { max-width: 430px; }
.auth-title { font-family: var(--display); color: var(--gold-bright); font-size: 22px; letter-spacing: 2px; margin-bottom: 8px; }
.auth-sub { color: var(--muted); font-style: italic; font-size: 15px; line-height: 1.5; margin-bottom: 16px; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-form input {
  font-family: var(--serif); font-size: 16.5px; color: var(--text);
  background: rgba(11, 8, 23, 0.55); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: 10px; padding: 11px 14px; outline: none;
}
.auth-form input:focus { border-color: var(--gold); }
.auth-social { margin-bottom: 4px; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; box-sizing: border-box; text-decoration: none;
  font-family: var(--serif); font-size: 16.5px; color: var(--text);
  background: rgba(255, 255, 255, 0.06); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 10px; padding: 11px 16px; transition: all 0.2s;
}
.social-btn:hover { border-color: var(--gold); background: rgba(255, 255, 255, 0.1); }
.social-btn .g-mark {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: #4285f4; font-weight: 700; font-family: sans-serif; font-size: 14px;
}
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 14px 0 10px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--gold) 20%, transparent); }

.auth-consent { display: flex; gap: 9px; align-items: flex-start; color: var(--muted); font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.auth-consent input { margin-top: 3px; accent-color: var(--gold); flex-shrink: 0; }
.auth-consent a { color: var(--plum-soft); }
.auth-error { color: #d88; font-size: 14.5px; min-height: 18px; margin: 0; }
.auth-form .btn-gold { align-self: stretch; }
.auth-form .back-link { align-self: center; }

.acct-balance { font-family: var(--display); font-size: 34px; color: var(--gold-bright); margin: 6px 0 2px; }
.acct-balance .tok { font-size: 16px; color: var(--muted); font-family: var(--serif); letter-spacing: 1px; }
.acct-plan { font-size: 13px; color: var(--plum-soft); font-family: var(--serif); font-style: italic; margin-left: 8px; }
.acct-costs { color: var(--muted); font-size: 13.5px; font-style: italic; margin-bottom: 6px; }
.acct-h4 { font-family: var(--display); color: var(--gold); font-size: 14px; letter-spacing: 1.5px; margin: 16px 0 8px; }
/* top-up tiers: horizontal rows, the price is the dominant number the user
   is deciding on, the value sits beside it, the row itself is the button */
.acct-packs { display: flex; flex-direction: column; gap: 10px; }
.acct-pack {
  font-family: var(--serif); text-align: left; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: minmax(120px, 0.9fr) 1fr auto 18px; align-items: center; gap: 16px;
  background: linear-gradient(170deg, var(--ink-3), var(--ink-2)); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); border-radius: 14px; padding: 16px 20px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.acct-pack:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); }
.acct-pack-fig { display: flex; flex-direction: column; gap: 2px; }
.acct-pack-fig b { font-family: var(--display); font-size: 27px; font-weight: 600; color: var(--gold-bright); letter-spacing: 0.5px; line-height: 1; }
.acct-pack-fig b i { font-style: normal; font-size: 14px; color: var(--muted); font-family: var(--serif); }
.acct-pack-fig span { font-size: 14px; color: var(--text); }
.acct-pack-worth { font-family: var(--serif); font-size: 15px; color: var(--text); margin: 0; }
.acct-pack-price { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 999px; padding: 6px 16px; text-align: center; letter-spacing: 0.5px; white-space: nowrap; }
.acct-plan-featured .acct-pack-price { color: var(--gold-bright); border-color: color-mix(in srgb, var(--gold) 65%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); }
/* the "Recommended" ribbon: absolute so it sits above the card without taking a
   grid cell (grid ignores out-of-flow children) */
.plan-reco { position: absolute; top: -9px; left: 18px; font-family: var(--display); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); background: linear-gradient(160deg, var(--gold-bright), var(--gold)); border-radius: 8px; padding: 3px 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
/* "how it works": the context panel, a hairline-ruled note, not small print */
.howitworks { background: var(--ink-2); border: 1px solid color-mix(in srgb, var(--gold) 15%, transparent); border-left: 3px solid color-mix(in srgb, var(--gold) 50%, transparent); border-radius: 16px; padding: 18px 22px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.howitworks-row { font-size: 15px; line-height: 1.4; color: var(--text); margin: 0; }
.howitworks-row b { color: var(--gold-bright); font-weight: 600; }
.acct-msg { color: var(--gold-bright); font-size: 14px; font-style: italic; margin: 6px 0 2px; }
.acct-msg:empty { display: none; }
.tc-actions { display: flex; gap: 12px; justify-content: flex-end; align-items: center; margin-top: 20px; }
@media (max-width: 700px) {
  .acct-pack { grid-template-columns: 1fr auto; gap: 10px 14px; }
  .acct-pack-worth { grid-column: 1 / -1; order: 3; }
}
.acct-note { color: var(--muted); font-size: 13.5px; margin-top: 8px; }
.acct-history { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; margin-top: 4px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold) 35%, transparent) transparent; }
.acct-history::-webkit-scrollbar { width: 6px; }
.acct-history::-webkit-scrollbar-track { background: transparent; }
.acct-history::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--gold) 32%, transparent); border-radius: 3px; }
.acct-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); padding: 3px 0; }
.acct-row .pos { color: #9fb872; }
.acct-row .neg { color: var(--plum-soft); }
/* the ledger: a real wallet history, a leading credit/debit dot, coloured amounts, aligned numbers */
/* modern transaction list: reason + date stacked left, mono tabular amount right,
   hover rows, no dots or gold dividers */
.ledger-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 10px; transition: background 0.15s; }
.ledger-row:hover { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.ledger-reason { font-family: var(--serif); font-size: 15px; color: var(--text); line-height: 1.3; }
.ledger-when { display: block; font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; font-size: 11px; letter-spacing: 0.4px; color: var(--muted); margin-top: 2px; }
.ledger-amt { font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; letter-spacing: 0.3px; white-space: nowrap; }
.ledger-amt.pos { color: #6f9a52; }
.ledger-amt.neg { color: var(--plum-soft); }
.ledger-empty { color: var(--muted); font-style: italic; font-size: 14px; padding: 8px 0; }
#acct-logout { margin-top: 14px; }
.acct-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.acct-foot .back-link { margin: 0; }

/* settings */
.set-toggle { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 16px; margin-bottom: 8px; }
.set-form { display: flex; flex-direction: column; gap: 9px; }
.set-form input {
  font-family: var(--serif); font-size: 16px; color: var(--text);
  background: rgba(11, 8, 23, 0.55); border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 10px; padding: 10px 14px; outline: none;
}
.set-form input:focus { border-color: var(--gold); }
.set-btn { align-self: flex-start; padding: 9px 20px; font-size: 15px; margin-top: 4px; }
.set-msg { font-size: 13.5px; font-style: italic; color: var(--plum-soft); min-height: 16px; margin: 4px 0 0; }
.set-msg.err { color: #d88; }
.set-msg.ok { color: #9fb872; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 30px);
  z-index: 60; max-width: 90vw;
  background: linear-gradient(160deg, rgba(29, 22, 54, 0.96), rgba(20, 15, 38, 0.98));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); border-radius: 14px;
  padding: 13px 22px; color: var(--gold-bright); font-family: var(--serif); font-size: 16.5px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.4s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* reading feedback: subtle stars every time, a warmer prompt the first time
   a querent tries a new spread. Never nags twice. */
.rate-box { text-align: center; margin: 18px 0 6px; }
.rate-box.first { background: var(--ink-2); border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent); border-radius: 14px; padding: 16px 18px; }
.rate-prompt { font-family: var(--serif); font-size: 14.5px; color: var(--muted); margin: 0 0 6px; font-style: italic; }
.rate-box.first .rate-prompt { font-size: 16px; color: var(--text); font-style: normal; }
.rate-stars { display: inline-flex; gap: 4px; }
.rate-stars .star {
  background: none; border: none; cursor: pointer; padding: 2px 3px;
  font-size: 24px; line-height: 1; color: color-mix(in srgb, var(--gold) 28%, transparent);
  transition: color 0.12s, transform 0.12s;
}
.rate-stars .star:hover, .rate-stars .star.lit { color: var(--gold-bright); }
.rate-stars .star:hover { transform: scale(1.12); }
.rate-stars.done .star { cursor: default; }
.rate-thanks { font-family: var(--serif); font-size: 13.5px; color: var(--gold-bright); margin: 8px 0 0; }

/* the card each section speaks for, floated beside its part of the reading */
.rd-sec-card {
  float: left; width: 64px; margin: 4px 16px 8px 0;
  border-radius: 6px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); cursor: default;
}
.rd-sec-card.reversed { transform: rotate(180deg); }
.reading-text h3 { clear: left; }
.reading-text .rd-rule { clear: both; }
.reading-sig { clear: both; }
@media (max-width: 700px) { .rd-sec-card { width: 52px; margin-right: 12px; } }

/* reopen a journal reading at the table */
.j-reopen { margin: 4px 0 14px; font-size: 15px; padding: 9px 22px; }

/* live purse chip beside the reading actions: token context where questions cost */
.ra-balance {
  margin-left: auto; align-self: center;
  font-family: var(--serif); font-size: 14.5px; letter-spacing: 0.5px;
  color: var(--gold-bright);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 20px; padding: 5px 14px; white-space: nowrap;
}

/* lives INSIDE the gold reveal button: inherit its text colour (correct in
   every theme) on a subtly darkened chip, or it vanishes into the gold */
.cost-badge {
  display: inline-block; font-size: 11.5px; letter-spacing: 1px; color: inherit;
  background: rgba(20, 12, 40, 0.14);
  border: 1px solid rgba(20, 12, 40, 0.25); border-radius: 10px; padding: 1px 8px; margin-left: 8px;
  vertical-align: 1.5px;
}

/* ---------- journal ---------- */
.themes-panel {
  max-width: 820px; margin: 0 auto 30px;
  background: linear-gradient(175deg, rgba(29, 22, 54, 0.62), rgba(20, 15, 38, 0.72));
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); border-radius: 16px; padding: 24px 28px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 14%, transparent), 0 18px 44px rgba(0, 0, 0, 0.45);
}
.themes-title { font-family: var(--display); color: var(--gold-bright); font-size: 18px; letter-spacing: 1.5px; margin-bottom: 12px; }
.reflection p { font-size: 17.5px; line-height: 1.65; font-style: italic; color: var(--text); }
.theme-chips { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.theme-chip {
  display: flex; align-items: center; gap: 9px;
  background: rgba(11, 8, 23, 0.5); border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  border-radius: 12px; padding: 7px 13px 7px 7px; cursor: pointer; transition: border-color 0.2s;
}
.theme-chip:hover { border-color: var(--gold); }
.theme-chip img { width: 30px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.theme-chip b { color: var(--gold-bright); font-weight: 600; font-size: 14.5px; display: block; }
.theme-chip span { color: var(--muted); font-size: 13.5px; }
.theme-stat { color: var(--muted); font-size: 14px; font-style: italic; }
.theme-stat b { color: var(--plum-soft); }

.journal-empty { text-align: center; color: var(--muted); font-style: italic; padding: 30px 0; }
.journal-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.j-entry {
  background: linear-gradient(172deg, var(--ink-3), var(--ink-2));
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); border-radius: 12px;
  padding: 16px 18px; cursor: pointer; transition: border-color 0.2s;
}
.j-entry:hover { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.j-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.j-head .j-spread { font-family: var(--display); color: var(--gold); font-size: 15px; letter-spacing: 1px; }
.j-head .j-date { color: var(--muted); font-size: 13.5px; }
.j-head .j-persona { color: var(--plum-soft); font-size: 13.5px; font-style: italic; }
.j-head .j-del {
  margin-left: auto; background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 14px; opacity: 0.6;
}
.j-head .j-del:hover { color: #d88; opacity: 1; }
.j-question { font-style: italic; color: var(--text); margin: 6px 0 8px; font-size: 16.5px; }
.j-cards { display: flex; gap: 5px; flex-wrap: wrap; }
.j-cards img { width: 30px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.j-cards img.reversed { transform: rotate(180deg); }
.j-cards .j-more { color: var(--muted); font-size: 12.5px; align-self: center; }
.j-detail { margin-top: 14px; border-top: 1px solid color-mix(in srgb, var(--gold) 15%, transparent); padding-top: 14px; }
.j-detail .reading-text { font-size: 16.5px; }
.j-detail .j-clar { margin-top: 10px; color: var(--plum-soft); font-size: 15.5px; }
.j-detail .j-fu { margin-top: 8px; font-size: 15px; color: var(--muted); }
.j-detail .j-fu b { color: var(--text); font-weight: 500; }

/* ---------- library ---------- */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }
.lib-card { cursor: pointer; text-align: center; transition: transform 0.2s; }
.lib-card:hover { transform: translateY(-4px); }
.lib-card img {
  width: 100%; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.lib-card p { color: var(--muted); font-size: 13.5px; margin-top: 6px; }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(6, 4, 14, 0.82); backdrop-filter: blur(4px);
}
.modal-card {
  position: relative; max-width: 700px; width: calc(100% - 40px); max-height: 86vh; overflow-y: auto;
  background: linear-gradient(175deg, rgba(29, 22, 54, 0.78), rgba(20, 15, 38, 0.85));
  backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius: 16px; padding: 28px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 16%, transparent), 0 24px 60px rgba(0, 0, 0, 0.6);
}
.modal-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  color: var(--muted); font-size: 18px; cursor: pointer;
}
.modal-close:hover { color: var(--gold-bright); }
.modal-body { display: flex; gap: 24px; flex-wrap: wrap; }
.modal-body img { width: 190px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); align-self: flex-start; }
.modal-info { flex: 1; min-width: 260px; }
.modal-info h3 { color: var(--gold-bright); font-size: 26px; letter-spacing: 1.5px; }
.modal-info h4 { color: var(--gold); margin: 16px 0 4px; letter-spacing: 1px; }
.modal-desc { font-style: italic; color: var(--plum-soft); margin-top: 8px; }
.modal-info .kw { color: var(--muted); font-size: 14.5px; font-style: italic; margin-bottom: 4px; }
.modal-info p { line-height: 1.55; }

/* follow-up card picker: a compact spread the querent draws from */
.fu-pick-card { max-width: 780px; text-align: center; }
.fu-pick-title { color: var(--gold-bright); font-size: 22px; letter-spacing: 1px; margin-bottom: 6px; }
.fu-pick-sub { font-style: italic; margin-bottom: 4px; min-height: 1.2em; }
.fu-fan { height: 240px; margin: 10px auto 0; max-width: 640px; }
.fu-pick-note { margin-top: 14px; font-style: italic; }

footer { text-align: center; color: var(--muted); font-style: italic; margin-top: 50px; font-size: 14.5px; opacity: 0.7; }
footer a { color: var(--plum-soft); text-decoration: none; }
.foot-meta { font-size: 13px; margin-top: 4px; }
.foot-todo { color: #c0564e; font-style: italic; }
footer a:hover { color: var(--gold-bright); }

/* ---------- the séance table: persona picker ---------- */
.reader-row { display: flex; flex-direction: column; gap: 12px; }
.persona-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.persona-card {
  --aura: var(--gold);
  position: relative; text-align: left; cursor: pointer;
  font-family: var(--serif); color: var(--text);
  background: linear-gradient(172deg, var(--ink-3), var(--ink-2));
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); border-radius: 12px;
  /* reserve a strip at the foot for the "reads for you" chip on every card,
     so selecting one causes no layout shift and the chip never sits over the portrait */
  padding: 14px 14px 30px; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.persona-card .p-glyph {
  position: relative;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  font-size: 18px; color: var(--aura); margin-bottom: 8px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.1), transparent 55%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--aura) 16%, transparent), transparent 72%),
    var(--ink);
  border: 1px solid color-mix(in srgb, var(--aura) 65%, transparent);
  text-shadow: 0 0 12px var(--aura);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--aura) 18%, transparent);
}
.persona-card .p-glyph img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.persona-card .p-glyph::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--aura) 40%, transparent);
  transition: transform 1.2s ease;
}
.persona-card .p-glyph::after {
  content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--aura); top: -7px; left: 50%; margin-left: -2.5px;
  box-shadow: 0 0 8px var(--aura); opacity: 0;
  transition: opacity 0.3s;
}
.persona-card:hover .p-glyph::before, .persona-card.active .p-glyph::before { transform: rotate(120deg); }
.persona-card.active .p-glyph::after { opacity: 1; }
.persona-card .p-name { font-family: var(--display); font-size: 19px; letter-spacing: 0.5px; color: var(--gold-bright); display: block; }
.persona-card .p-tag { font-size: 13.5px; color: var(--muted); font-style: italic; line-height: 1.35; display: block; margin-top: 3px; }
.persona-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--aura) 60%, transparent); }
.persona-card.active {
  border-color: var(--aura);
  box-shadow: 0 0 0 1px var(--aura), 0 10px 26px color-mix(in srgb, var(--aura) 22%, transparent);
  transform: translateY(-3px);
}
.persona-card.active::after {
  content: "reads for you"; position: absolute; bottom: 9px; left: 14px;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #16101f; background: var(--aura); padding: 3px 9px; border-radius: 8px;
}

/* hardcore toggle styling */
.hardcore-row { gap: 14px; }
.hardcore-toggle .hc-label { font-family: var(--display); letter-spacing: 1.5px; font-size: 14.5px; }
.hardcore-toggle input:checked + .track { background: #3e4a58; }
.hardcore-toggle input:checked + .track::after { background: #c4d0dc; }
.hc-hint { color: var(--muted); font-style: italic; font-size: 14px; opacity: 0.8; }
body.hardcore .hc-hint { color: var(--gold-bright); opacity: 1; }

/* accessibility: honour reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- mobile ---------- */
@media (max-width: 700px) {
  :root { --card-w: 58px; --card-h: 99px; }
  #app { padding: 0 12px 40px; }

  header { padding: 16px 2px 12px; justify-content: center; text-align: center; }
  .brand { justify-content: center; }
  .brand .moon { font-size: 30px; }
  .brand h1 { font-size: 24px; letter-spacing: 4px; }
  .brand .sub { font-size: 13px; }
  nav { width: 100%; justify-content: center; gap: 6px; }
  /* 44px minimum touch target on mobile (WCAG 2.5.8 / platform guidelines) */
  .nav-btn { font-size: 14px; padding: 7px 13px; min-height: 44px; }
  footer a { display: inline-block; padding: 14px 10px; }

  .progress { gap: 8px; padding-top: 16px; }
  .prog-step { font-size: 0; gap: 0; }        /* numbers only on small screens */
  .prog-step i { font-size: 12px; width: 26px; height: 26px; }
  .prog-sep { width: 16px; }

  .hero { padding: 22px 0 20px; }
  .hero-hand { height: 150px; margin-bottom: 18px; }
  .hero-hand img { width: 84px; }
  .hero-title { font-size: 31px; letter-spacing: 0.5px; }
  .hero-sub { font-size: 15.5px; }

  .step { padding: 22px 0 8px; }
  .step-title { font-size: 21px; }
  .step-hint { font-size: 15px; margin-bottom: 18px; }

  .spread-grid { gap: 10px; }
  .spread-card { flex-basis: calc(50% - 5px); max-width: none; padding: 14px 12px; }
  .spread-card h3 { font-size: 14.5px; }
  .spread-card .count { font-size: 12px; padding: 1px 8px; margin-bottom: 8px; }
  .spread-card p { font-size: 13px; }
  .spread-card .geo .g-slot { width: 20px; height: 32px; }

  .question-box { gap: 14px; }
  .question-box textarea { font-size: 16px; }
  .settings-row { gap: 12px; }
  .rev-chance input[type="range"] { width: 90px; }
  .persona-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .persona-card { padding: 11px 11px 28px; }
  .persona-card .p-glyph { width: 42px; height: 42px; font-size: 19px; margin-bottom: 7px; }
  .persona-card .p-name { font-size: 13.5px; }
  .persona-card .p-tag { font-size: 12px; }
  .persona-card.active::after { font-size: 9px; bottom: 8px; left: 11px; }
  .hc-hint { font-size: 12.5px; }
  .btn-gold { font-size: 16.5px; padding: 12px 26px; }

  .fan { height: 190px; margin-top: 10px; }
  .fan-status { margin-top: 18px; font-size: 15px; }

  /* board scrolls sideways for wide spreads instead of crushing the cards */
  .board {
    gap: 10px 8px; padding: 18px 10px;
    overflow-x: auto; justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .slot .pos-name { font-size: 12px; letter-spacing: 0.8px; }
  .slot .card-name { font-size: 12px; }
  .slot .rev-tag { font-size: 10px; }
  .flip { width: calc(var(--card-w) * 1.28); height: calc(var(--card-h) * 1.28); }

  .reading-panel { padding: 18px 16px; }
  .reading-text { font-size: 16.5px; }
  .reading-text > p:first-of-type::first-letter { font-size: 40px; }

  .sign-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .sign-btn { padding: 9px 4px; font-size: 14px; }
  .sign-btn .glyph { font-size: 21px; }
  .sign-btn .dates { font-size: 12px; }
  .horoscope-panel { padding: 18px 16px; }
  .horo-body { gap: 16px; }
  .horo-card { margin: 0 auto; }
  .horo-text { font-size: 16.5px; }

  .msg { max-width: 88%; font-size: 15.5px; }

  .lib-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .modal-card { padding: 18px 16px; }
  .modal-body { gap: 14px; }
  .modal-body img { width: 130px; margin: 0 auto; }

  .glow { filter: blur(60px); }
}

/* touch devices: no hover states to rely on, calmer atmosphere */
@media (pointer: coarse) {
  .glow { animation-duration: 24s; }
  .fan-card, .lib-card, .spread-card, .persona-card { -webkit-tap-highlight-color: transparent; }
  /* fingers need 44px: lens pills (and their layout/deck-switch cousins) are 31px for mice */
  .lens-btn { min-height: 44px; padding-top: 9px; padding-bottom: 9px; }
  .ra-btn, .acct2-textbtn, .back-link { min-height: 44px; }
  .acct2-textbtn { display: inline-flex; align-items: center; }
  /* polish-audit run 3: the stragglers that escaped the 44px net */
  .q-chip { min-height: 44px; padding-top: 9px; padding-bottom: 9px; }
  .focus-toggle, .acct-btn, .del-btn { min-height: 44px; }
  .modal-close { padding: 12px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .j-del { padding: 12px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* 16px stops iOS Safari auto-zooming the field on focus */
  .hm-form input, .rc-fields input { font-size: 16px; }
}

/* subscription option shown in the top-up moment */
.acct-pack-plan { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.acct-pack-plan .acct-pack-fig b i { font-style: italic; opacity: .7; font-size: .8em; }

/* the finished reading arrives as one piece, not word by word */
.reading-in { animation: readingIn 0.9s ease both; }
@keyframes readingIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reading-in { animation: none; } }