:root {
  /* Kabbalah palette — warmer royal-blue + brighter gold + copper highlights */
  --bg-1: #0b0a2e;             /* deep night sky, less black than before */
  --bg-2: #1a1f5c;             /* royal blue */
  --bg-3: #2a2370;             /* lighter royal */
  --purple: #3d1f5c;           /* mystical purple accent */
  --gold: #e8c168;             /* brighter gold */
  --gold-soft: #c79c4b;        /* darker gold for borders */
  --copper: #b8702f;           /* warm copper accent */
  --parchment: #f3e6c4;
  --parchment-deep: #e4d29d;
  --ink: #2a1a07;
  --ink-soft: #5b4a2e;
  --text: #f0eada;             /* warmer cream */
  --text-soft: #b8aa90;
  --rule: rgba(232,193,104,0.28);
}

/* Hebrew Bible / Torah-scroll script (Culmus Project, OFL/GPL — free).
   Two scripts bundled: Ashkenazi (used as primary) and Sefaradi (fallback). */
@font-face {
  font-family: "Stam Ashkenaz CLM";
  src: url("./shared/fonts/stamashkenazclm-webfont.woff") format("woff"),
       url("./shared/fonts/stamashkenazclm-webfont.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Stam Sefarad CLM";
  src: url("./shared/fonts/stamsefaradclm-webfont.woff") format("woff"),
       url("./shared/fonts/stamsefaradclm-webfont.ttf") format("truetype");
  font-display: swap;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; min-height: 100%; }
html { background: var(--bg-1); }

body {
  font-family: "Stam Ashkenaz CLM", "Stam Sefarad CLM", "David", "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  background:
    /* gold halo near the top */
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(232,193,104,0.13), transparent 60%),
    /* purple wash at the bottom */
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(61,31,92,0.4), transparent 60%),
    /* base gradient: royal blue → night */
    radial-gradient(ellipse at 50% 100%, var(--bg-3), var(--bg-1) 70%);
  background-attachment: fixed;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  position: relative;
}

/* Subtle twinkling-star backdrop */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle 1.2px at 12% 22%, rgba(255,255,255,0.7), transparent 100%),
    radial-gradient(circle 1px   at 78% 13%, rgba(232,193,104,0.5), transparent 100%),
    radial-gradient(circle 1.4px at 28% 78%, rgba(255,255,255,0.5), transparent 100%),
    radial-gradient(circle 1px   at 88% 65%, rgba(232,193,104,0.4), transparent 100%),
    radial-gradient(circle 1.2px at 50% 8%,  rgba(255,255,255,0.6), transparent 100%),
    radial-gradient(circle 1px   at 62% 88%, rgba(232,193,104,0.4), transparent 100%),
    radial-gradient(circle 1.2px at 8% 55%,  rgba(255,255,255,0.5), transparent 100%);
  animation: twinkle 8s ease-in-out infinite alternate;
  opacity: .9;
  z-index: 0;
}
@keyframes twinkle {
  from { opacity: .55; }
  to   { opacity: 1; }
}
main { position: relative; z-index: 1; }

main {
  width: 100%;
  max-width: 38rem;
}

section {
  animation: fade-in .45s ease-out both;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

h1 {
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 .25rem;
  color: var(--gold);
  text-shadow: 0 0 36px rgba(212,176,106,0.25);
}

h2 {
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  font-weight: 500;
  text-align: center;
  margin: 0 0 1.2rem;
  color: var(--gold);
}

.subtitle {
  text-align: center;
  color: var(--text-soft);
  margin: 0 0 2rem;
  font-size: 1.05rem;
}

.prose {
  text-align: justify;
  line-height: 1.85;
  font-size: 1.05rem;
  color: var(--text);
  margin: 0 0 1.25rem;
}

.prose.center { text-align: center; }
.prose.subtle { color: var(--text-soft); font-size: .95rem; }

/* Advisory disclosure block on the paywall — informed-consent note about
   localStorage-bound credits. Boxed and slightly dimmer than the price line. */
.prose.disclosure {
  font-size: .85rem;
  line-height: 1.6;
  margin: 1rem auto 0.5rem;
  max-width: 28rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(232, 193, 104, 0.25);
  border-radius: 8px;
  background: rgba(10, 14, 42, 0.4);
  opacity: 0.85;
}

/* Readable secondary version of any .prose block — system Hebrew, smaller, dimmer.
   Pairs with a Stam .prose above it. */
.prose.readable {
  font-family: "David", "Arial Hebrew", "Times New Roman", serif;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--text-soft);
  opacity: 0.8;
  margin-top: -0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dotted var(--rule);
}

/* ---- About screen ---- */
[data-screen="info"] {
  max-width: 36rem;
  margin: 0 auto;
}
.info-intro {
  font-family: "Stam Ashkenaz CLM", "Stam Sefarad CLM", "David", serif;
  font-size: 1.15rem;
  line-height: 1.9;
  text-align: justify;
  color: var(--text);
  margin: 0 0 1.6rem;
}
.info-book {
  font-family: "Stam Ashkenaz CLM", "Stam Sefarad CLM", "David", serif;
  font-size: 1.35rem;
  color: var(--gold);
  font-weight: 400;
  margin: 1.6rem 0 .35rem;
  letter-spacing: .01em;
  text-shadow: 0 0 18px rgba(232,193,104,0.22);
}
.info-body {
  font-family: "David", "Arial Hebrew", "Times New Roman", serif;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--text-soft);
  text-align: justify;
  margin: 0 0 .25rem;
}
.info-prose-tail {
  font-family: "Stam Ashkenaz CLM", "Stam Sefarad CLM", serif;
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 2rem 0 1rem;
  color: var(--gold-soft);
  text-align: center;
  font-style: italic;
}
.info-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--rule) 40%, var(--rule) 60%, transparent 100%);
  margin: 1.5rem 0;
}
.info-credits {
  font-family: "David", "Arial Hebrew", "Times New Roman", serif;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-soft);
  text-align: justify;
  opacity: 0.75;
  margin: 0 0 1rem;
}
.info-author {
  font-family: "David", "Arial Hebrew", "Times New Roman", serif;
  font-size: .85rem;
  color: var(--gold-soft);
  text-align: center;
  margin: 1rem 0 1.5rem;
  letter-spacing: .04em;
  opacity: 0.9;
}

.prayer {
  border-inline-start: 2px solid var(--gold-soft);
  padding-inline-start: 1rem;
  color: #f0e7d3;
  font-style: italic;
}

.count {
  text-align: center;
  color: var(--gold-soft);
  font-size: .95rem;
  margin: 1.5rem 0 .5rem;
}

.epigraph {
  text-align: center;
  font-style: italic;
  color: #8e9bb4;
  margin: 2.5rem 0 0;
  padding: 0 1rem;
  font-size: 1rem;
  line-height: 1.7;
}

.disclaimer {
  text-align: center;
  color: var(--text-soft);
  font-size: .8rem;
  margin: 1.5rem 0 0;
  opacity: .7;
}

/* book grid */
.books {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin: 0;
}

.books .book {
  position: relative;
  min-height: 7.2rem;
  padding: 1.4rem .9rem;
  font-family: inherit;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  color: var(--gold);
  border: 1px solid var(--rule);
  border-radius: 14px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s, box-shadow .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.books .book:hover, .books .book:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 10px 28px rgba(212,176,106,0.18);
  outline: none;
}
.books .book .name {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  word-spacing: 0.05em;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(212,176,106,0.18);
}

/* buttons */
button {
  font-family: inherit;
  font-size: 1.05rem;
  cursor: pointer;
}

[data-submit], [data-go="input"], [data-go="reveal"], [data-go="home"]:not(.ghost), [data-newq], .dialog-card button {
  background: linear-gradient(180deg, #e3c179, var(--gold-soft));
  color: #1a1303;
  border: 1px solid #8a6a30;
  border-radius: 10px;
  padding: .7rem 1.6rem;
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .12s, box-shadow .15s, filter .15s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
}

[data-submit]:hover, [data-go="input"]:hover, [data-newq]:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

button.ghost, .info-btn {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: .55rem 1.3rem;
  font-weight: 400;
}
button.ghost:hover, .info-btn:hover {
  border-color: var(--gold-soft);
  color: var(--gold);
}

.info-btn {
  display: block;
  margin: 2rem auto 0;
  font-size: .95rem;
}

.actions {
  display: flex;
  gap: .8rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* input screen */
[data-input] {
  display: block;
  margin: 1.5rem auto 1rem;
  width: 7rem;
  padding: 1rem;
  font-size: 2.4rem;
  font-family: inherit;
  text-align: center;
  background: rgba(255,255,255,0.04);
  color: var(--gold);
  border: 1px solid var(--rule);
  border-radius: 12px;
  -moz-appearance: textfield;
}
[data-input]::-webkit-outer-spin-button,
[data-input]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
[data-input]:focus { outline: 2px solid var(--gold); outline-offset: 3px; border-color: var(--gold); }

[data-screen="input"] [data-submit] { display: block; margin: .25rem auto 1rem; min-width: 12rem; }
[data-screen="input"] .ghost { display: block; margin: 0 auto; }

/* reveal screen */
.reveal-wait {
  text-align: center;
  padding: 3.5rem 1rem 2rem;
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* Shofar visual — anchors the processing/waiting state visually.
   Same SVG in every language, so the visual layout is identical regardless of
   how long the "Checking…" text renders below it. Animation breathes in sync
   with the .amen pulse rhythm. */
.shofar-container {
  width: clamp(140px, 30vw, 180px);
  color: var(--gold);
  margin: 0 auto;
  line-height: 0;             /* prevent inline-baseline spacing */
}
.shofar {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: 20% 80%;  /* pivot near the mouthpiece — natural "blowing" feel */
  animation: shofar-breath 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(212,176,106,0.30));
}
@keyframes shofar-breath {
  0%, 100% { transform: scale(0.985) rotate(-0.5deg); opacity: 0.88; }
  50%      { transform: scale(1.045) rotate(0.3deg);  opacity: 1;    }
}

.reveal-wait .amen {
  font-size: clamp(3rem, 9vw, 4.5rem);
  color: var(--gold);
  font-weight: 700;
  margin: 0;
  text-shadow: 0 0 30px rgba(212,176,106,0.4);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .7; transform: scale(1.04); }
}
.reveal-wait .checking { color: var(--text-soft); margin: 0; font-size: 1.05rem; }

.progress {
  width: min(60%, 14rem);
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.progress::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: progress-sweep 3.5s linear forwards;
}
@keyframes progress-sweep {
  /* Logical-property form so the sweep moves in the reading direction:
     LTR (en/es/ru) → left-to-right; RTL (he/ar) → right-to-left. */
  from { inset-inline-start: -40%; }
  to   { inset-inline-start: 100%; }
}

.reveal-answer { animation: scroll-open .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes scroll-open {
  0%   { opacity: 0; transform: scaleY(0.18); transform-origin: top; filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { transform: scaleY(1); }
}

.goral {
  text-align: center;
  color: var(--gold);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 .8rem;
  letter-spacing: .02em;
}

/* Parchment frame — wraps the Stam answer AND the readable secondary. */
.fortune-card {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.4), transparent 60%),
    linear-gradient(180deg, var(--parchment), var(--parchment-deep));
  color: var(--ink);
  padding: 2.2rem 1.6rem;
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.06),
    0 24px 50px rgba(0,0,0,0.5),
    inset 0 0 80px rgba(139,89,32,0.18);
  position: relative;
}
.fortune-card::before, .fortune-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; height: 6px;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), transparent);
}
.fortune-card::before { top: 0; }
.fortune-card::after  { bottom: 0; transform: scaleY(-1); }

/* Stam (primary) — large, dramatic. Default fonts are Hebrew calligraphic;
   per-lang overrides below switch to Latin/Cyrillic/Arabic serif when the
   primary holds a translation rather than the Hebrew original. */
.fortune-text {
  color: var(--ink);
  font-family: "Stam Ashkenaz CLM", "Stam Sefarad CLM", "David", "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 2.1;
  letter-spacing: 0.01em;
  text-align: justify;
  text-justify: inter-word;
  margin: 0;
}

/* Latin / Cyrillic primary — when the page is in en/es/ru, the primary article
   holds the translated answer and needs a non-Stam serif. The secondary article
   (Hebrew original, .readable) keeps the Hebrew font stack via its lang="he". */
html[lang="en"] .fortune-text:not(.readable),
html[lang="es"] .fortune-text:not(.readable),
html[lang="ru"] .fortune-text:not(.readable) {
  font-family: "Cormorant Garamond", "EB Garamond", "Georgia", "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1.8;
  letter-spacing: 0;
  text-align: justify;
}

/* Arabic primary — uses a traditional Naskh-style face. Hebrew secondary still
   gets the Hebrew stack via its lang="he" attribute (set in JS). */
html[lang="ar"] .fortune-text:not(.readable) {
  font-family: "Amiri", "Scheherazade New", "Traditional Arabic", "Times New Roman", serif;
  font-size: 1.4rem;
  line-height: 1.9;
  letter-spacing: 0;
  text-align: justify;
}

/* Thai primary — Thai script reads best in a clean sans-serif with adequate
   line-height for the diacritic stacks above/below baseline. No justify —
   Thai doesn't use spaces between words within a clause, so justification
   would create awkward gaps. */
html[lang="th"] .fortune-text:not(.readable) {
  font-family: "Sarabun", "IBM Plex Sans Thai", "Noto Sans Thai", "Thonburi", "Tahoma", sans-serif;
  font-size: 1.18rem;
  line-height: 2.0;
  letter-spacing: 0;
  text-align: start;
}

/* Readable (secondary) — smaller, dimmer, system Hebrew. Always Hebrew, even
   when the page is LTR, because the secondary holds the Hebrew original. */
.fortune-text.readable {
  font-family: "David", "Arial Hebrew", "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin: 0;
  opacity: 0.85;
}
/* When the secondary appears inside an LTR page (non-HE active lang), it has
   lang="he" dir="rtl" set in JS — make sure it visually reads right-to-left
   regardless of the surrounding page direction. */
.fortune-text.readable[lang="he"] {
  direction: rtl;
  text-align: justify;
  unicode-bidi: isolate;
}

/* "Translation is approximate" disclaimer — only visible in non-HE modes. */
.translation-note {
  margin: 0.6rem 0 0;
  text-align: center;
  color: var(--text-soft);
  font-size: 0.78rem;
  font-style: italic;
  opacity: 0.8;
}
.translation-note[hidden] { display: none; }

/* Show / hide original Hebrew toggle — small, subtle text-button. */
.show-original-btn {
  display: block;
  margin: 0.7rem auto 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.35rem 0.9rem;
  color: var(--gold-soft);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.show-original-btn:hover,
.show-original-btn:focus { color: var(--gold); border-color: var(--gold-soft); }
.show-original-btn[hidden] { display: none; }

/* Decorative divider between the two */
.fortune-divider {
  border: 0;
  height: 1px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(184,112,47,0.35) 30%,
      rgba(184,112,47,0.55) 50%,
      rgba(184,112,47,0.35) 70%,
      transparent 100%);
  margin: 1.2rem 0 1rem;
  position: relative;
}
.fortune-divider::before {
  content: '✦';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--parchment);
  padding: 0 0.5rem;
  color: var(--copper);
  font-size: 0.85rem;
}

/* dialog */
.dialog {
  position: fixed;
  inset: 0;
  background: rgba(5,7,32,0.7);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 50;
  animation: fade-in .2s;
  padding: 1rem;
}
.dialog-card {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 1.75rem 1.5rem 1.5rem;
  max-width: 24rem;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.dialog-card h3 { color: var(--gold); margin: 0 0 .6rem; font-weight: 700; font-size: 1.35rem; }
.dialog-card p  { margin: 0 0 1.5rem; color: #d8d2c2; font-size: 1.05rem; line-height: 1.6; }

/* ---- save-link popup (post-purchase) ----
   Wider than the generic dialog so the wallet URL fits on one line on phones. */
.save-card { max-width: 28rem; }
.save-card .save-flourish {
  color: var(--gold); font-size: 1.4rem; margin: 0 0 .25rem;
  letter-spacing: .4em; line-height: 1;
}
.save-card h3 { margin-bottom: .25rem; }
.save-card .save-sub {
  margin: 0 0 1rem; color: var(--gold); font-size: 1rem;
}
.save-card .save-body {
  margin: 0 0 1rem; color: #d8d2c2; font-size: .98rem; line-height: 1.6;
}
.save-link-input {
  width: 100%;
  box-sizing: border-box;
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .85rem;
  padding: .65rem .8rem;
  border: 1px solid rgba(232, 193, 104, 0.4);
  border-radius: 8px;
  background: rgba(5, 7, 32, 0.7);
  color: #e9e3d4;
  margin-bottom: .9rem;
  user-select: all;
}
.save-link-input:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.save-card .save-warning {
  margin: 0 0 1.2rem;
  padding: .6rem .8rem;
  font-size: .85rem;
  line-height: 1.55;
  color: #f3d8a2;
  background: rgba(120, 60, 0, 0.18);
  border: 1px solid rgba(232, 193, 104, 0.3);
  border-radius: 8px;
}
.save-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.save-actions button { flex: 1 1 8rem; min-width: 7rem; }

@media (max-width: 420px) {
  body { padding: 1rem .75rem; }
  .books { gap: .7rem; }
  .books .book { padding: 1.05rem .55rem; min-height: 6.4rem; }
  .books .book .name { font-size: 1rem; line-height: 1.35; }
  .fortune-card { padding: 1.6rem 1.2rem; }
  .fortune-text          { font-size: 1.1rem; line-height: 2; }
  .fortune-text.readable { font-size: 0.9rem; line-height: 1.65; }
}

/* ---- auth bar (top of page, only when signed in) ---- */
.auth-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(5,7,32,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  padding: .55rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .85rem;
  color: var(--text-soft);
  z-index: 20;
}
.auth-bar .auth-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-bar .auth-meta[hidden] { display: none; }
.auth-bar:has(.auth-meta[hidden]):has(.lang-picker[hidden]) { display: none; }
.text-link {
  background: none; border: none; padding: 0;
  color: var(--gold-soft); font-family: inherit; font-size: inherit;
  cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.text-link:hover { color: var(--gold); }
body:has(.auth-bar:not([hidden]):not(:empty)) main { padding-top: 2.5rem; }

/* ---- language picker (top-right of auth bar) ---- */
.lang-picker {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .2rem .5rem;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  outline: none;
  margin-inline-start: auto;     /* push to the trailing edge in both RTL & LTR */
}
.lang-picker:hover, .lang-picker:focus { color: var(--gold-soft); border-color: var(--gold-soft); }
.lang-picker option { background: #0a0e2a; color: var(--text-soft); }

/* ---- boot screen ---- */
.boot-msg {
  text-align: center;
  color: var(--text-soft);
  font-size: 1.1rem;
  margin: 4rem 0;
}

/* ---- sign-in / check-email ---- */
[data-screen="signin"] form { margin: 1.5rem 0; }
[data-screen="signin"] [data-signin-email] {
  display: block;
  width: 100%;
  padding: .9rem 1rem;
  font-size: 1.05rem;
  font-family: inherit;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 10px;
  margin-bottom: .75rem;
  direction: ltr;
  text-align: left;
}
[data-screen="signin"] [data-signin-email]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--gold);
}
[data-screen="signin"] [data-signin-submit] {
  display: block;
  width: 100%;
  padding: .85rem 1.6rem;
  font-size: 1.1rem;
  font-weight: 700;
  background: linear-gradient(180deg, #e3c179, var(--gold-soft));
  color: #1a1303;
  border: 1px solid #8a6a30;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: filter .15s, transform .12s;
}
[data-screen="signin"] [data-signin-submit]:hover { filter: brightness(1.05); }
[data-screen="signin"] [data-signin-submit]:active { transform: translateY(1px); }
[data-screen="signin"] [data-signin-submit]:disabled { opacity: .6; cursor: wait; }

[data-screen="check-email"] strong { color: var(--gold); direction: ltr; unicode-bidi: isolate; }

/* ---- paywall ---- */
[data-screen="paywall"] .price {
  text-align: center;
  font-size: clamp(3rem, 9vw, 4.5rem);
  font-weight: 900;
  color: var(--gold);
  margin: 1.5rem 0 .25rem;
  letter-spacing: -.01em;
  text-shadow: 0 0 30px rgba(212,176,106,0.3);
}
[data-screen="paywall"] [data-buy] {
  font-size: 1.2rem;
  padding: .9rem 2rem;
  min-width: 14rem;
}

/* ---- splash (first-load gate; satisfies autoplay gesture for the chime) ---- */
[data-screen="splash"] {
  text-align: center;
  padding: 2.5rem 1rem 3rem;
  animation: splash-fade .9s ease-out both;
}
@keyframes splash-fade {
  from { opacity: 0; transform: scale(.97); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Hamsa centerpiece — traditional protective turquoise/teal body with a gold eye.
   Mediterranean/Mizrahi Jewish color tradition for the kheiḥamsa. */
.hamsa-container {
  display: flex;
  justify-content: center;
  margin: 0 auto 1.6rem;
  animation: hamsa-float 7s ease-in-out infinite;
}
.hamsa {
  width: clamp(200px, 46vw, 320px);
  height: auto;
  color: #3ec5d6;                  /* traditional protective turquoise (currentColor → strokes) */
  filter:
    drop-shadow(0 0 38px rgba(62,197,214,0.55))
    drop-shadow(0 0 6px rgba(62,197,214,0.45))
    drop-shadow(0 0 16px rgba(232,193,104,0.18));  /* soft gold halo for warmth */
  animation: hamsa-glow 5s ease-in-out infinite alternate;
}
/* Gold eye (matches the rest of the palette and ties to the splash gold) */
.hamsa-eye-outline { stroke: var(--gold); }
.hamsa-eye-pupil   { fill:   var(--gold); }
/* Decorative palm dots in gold for warmth */
.hamsa-accent      { fill:   var(--gold); }

@keyframes hamsa-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes hamsa-glow {
  from {
    filter:
      drop-shadow(0 0 22px rgba(62,197,214,0.4))
      drop-shadow(0 0 4px rgba(62,197,214,0.35))
      drop-shadow(0 0 12px rgba(232,193,104,0.14));
  }
  to {
    filter:
      drop-shadow(0 0 48px rgba(62,197,214,0.75))
      drop-shadow(0 0 8px rgba(62,197,214,0.6))
      drop-shadow(0 0 22px rgba(232,193,104,0.26));
  }
}

[data-screen="splash"] h1 {
  margin-bottom: .8rem;
  text-shadow: 0 0 60px rgba(232,193,104,0.5);
  animation: title-glow 3s ease-in-out infinite alternate;
}
@keyframes title-glow {
  from { text-shadow: 0 0 30px rgba(232,193,104,0.3); }
  to   { text-shadow: 0 0 64px rgba(232,193,104,0.65); }
}

/* Star-of-David ornament under the enter button */
.splash-ornament {
  margin: 2rem auto 0;
  display: flex;
  justify-content: center;
  opacity: 0.55;
}
.splash-ornament svg {
  width: clamp(100px, 26vw, 160px);
  height: auto;
  color: var(--gold-soft);
}
[data-screen="splash"] .prose.subtle {
  margin-bottom: 2.2rem;
  font-size: 1.15rem;
  letter-spacing: .04em;
  color: var(--text);   /* slightly brighter than default --text-soft for "welcoming" feel */
  opacity: 0.85;
}
.splash-enter {
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  padding: 1rem 3rem;
  background: linear-gradient(180deg, #e3c179, var(--gold-soft));
  color: #1a1303;
  border: 1px solid #8a6a30;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: .04em;
  transition: transform .15s, filter .15s, box-shadow .2s;
  box-shadow:
    0 4px 16px rgba(212,176,106,0.35),
    0 0 0 1px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.splash-enter:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 8px 24px rgba(212,176,106,0.5), 0 0 0 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.3); }
.splash-enter:active { transform: translateY(0); }