:root {
  --bg: #0f0c1d;
  --bg2: #161228;
  --panel: #1e1836;
  --ink: #e8e2f5;
  --muted: #9c93b8;
  --gold: #d4af5a;
  --accent: #7b5cd6;
  --danger: #d66a6a;
}

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

body {
  background: radial-gradient(1200px 800px at 50% -200px, #241c44, var(--bg));
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  min-height: 100vh;
}

header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 26px;
}
.brand { font-size: 22px; letter-spacing: 3px; color: var(--gold); }

.coin-badge {
  background: var(--panel); border: 1px solid #2e2650;
  border-radius: 20px; padding: 6px 14px; font-size: 15px;
}
.coin { color: var(--gold); }

main { max-width: 640px; margin: 0 auto; padding: 30px 20px 80px; }

h1 { font-weight: normal; font-size: 34px; text-align: center; margin-bottom: 8px; }
.sub { color: var(--muted); text-align: center; margin-bottom: 26px; font-size: 15px; }

textarea {
  width: 100%; background: var(--panel); color: var(--ink);
  border: 1px solid #2e2650; border-radius: 12px; padding: 14px 16px;
  font-family: inherit; font-size: 16px; resize: vertical;
}
textarea:focus { outline: 1px solid var(--accent); }

button {
  font-family: inherit; cursor: pointer; border: none; border-radius: 12px;
  font-size: 16px;
}

#draw-btn, #again-btn {
  display: block; width: 100%; margin-top: 14px; padding: 14px;
  background: linear-gradient(135deg, var(--accent), #5a3fb0);
  color: white; letter-spacing: 1px;
}
#draw-btn:disabled { opacity: .5; cursor: default; }

.mock-note { margin-top: 10px; font-size: 13px; color: var(--gold); text-align: center; }

#loading { text-align: center; padding: 60px 0; }
.shuffle { font-size: 46px; letter-spacing: 12px; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
#loading-text { color: var(--muted); margin-top: 14px; }

#result { margin-top: 10px; }
#card-image {
  width: 100%; border-radius: 14px; border: 1px solid #2e2650;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.image-note { color: var(--muted); font-size: 13px; margin-top: 6px; text-align: center; }

.reading { background: var(--panel); border: 1px solid #2e2650;
  border-radius: 14px; padding: 22px 24px; margin-top: 18px; line-height: 1.65; }
.cards-drawn { color: var(--gold); margin-bottom: 14px; }
#reading-body p { margin-bottom: 14px; }
#reading-body p:last-child { margin-bottom: 0; }
#reading-body .advice { border-top: 1px solid #2e2650; padding-top: 14px; }

.toast {
  /* Centred by insetting both sides rather than left:50% + translateX. With
     left:50% the box shrink-to-fits against the space from the midpoint to the
     right edge, so it could never grow past about half the screen no matter
     what max-width said. Insetting both sides gives it the whole width to
     shrink against, and margin auto keeps it centred. */
  position: fixed; bottom: 24px; left: 0; right: 0;
  margin-inline: auto; width: fit-content;
  background: var(--danger); color: #fff; padding: 12px 20px;
  border-radius: 10px; font-size: 15px;
  max-width: min(94vw, 560px);
}

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(5,3,12,.75);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--bg2); border: 1px solid #2e2650; border-radius: 16px;
  padding: 28px; width: 100%; max-width: 420px; text-align: center;
}
.modal h2 { font-weight: normal; color: var(--gold); margin-bottom: 8px; }
.modal > p { color: var(--muted); font-size: 15px; margin-bottom: 18px; }

.oauth {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px; margin-bottom: 10px;
  border-radius: 10px; font-size: 15px; background: #fff; color: #111;
}
/* Google's mark is a fixed-size SVG, not a letter. It must not stretch or
   shrink with the button, which is what flex would otherwise do to it. */
.oauth .gmark { flex: 0 0 18px; display: block; }
.oauth.facebook { background: #1877f2; color: #fff; }
.oauth.apple { background: #000; color: #fff; border: 1px solid #333; }

.fine { font-size: 12px; color: var(--muted); margin-top: 8px; }
.signed-in { color: var(--muted); font-size: 14px; margin-bottom: 12px; }

.packages { display: grid; gap: 10px; }
.package {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--panel); border: 1px solid #2e2650; border-radius: 10px;
  padding: 14px 16px; color: var(--ink); font-size: 16px;
}
.package:hover { border-color: var(--accent); }
.package .price { color: var(--gold); }

.linkish { background: none; color: var(--muted); margin-top: 14px; font-size: 14px; text-decoration: underline; }

.hidden { display: none !important; }

.coin-badge { cursor: pointer; }
.coin-badge:hover { border-color: var(--gold); }
.package.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
#confirm-buy {
  width: 100%; margin-top: 12px; padding: 13px;
  background: linear-gradient(135deg, var(--gold), #b08d3e); color: #1a1430;
  font-size: 16px;
}

/* ---- UI typography: serif stays for headings + reading prose, sans for chrome ---- */
:root { --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.sub, .fine, .signed-in, .mock-note, .image-note, .toast, .coin-badge,
#loading-text, .cards-drawn, button, textarea::placeholder { font-family: var(--sans); }
.sub { font-size: 14px; }
.brand { font-family: Georgia, serif; }

/* ---- lightbox ---- */
#card-image { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 10000; cursor: zoom-out;
  background: rgba(5,3,12,.94);
  display: flex; align-items: center; justify-content: center;
}
.lightbox img {
  max-width: 96vw; max-height: 94vh; object-fit: contain;
  border-radius: 8px; box-shadow: 0 20px 80px rgba(0,0,0,.8);
}

/* ---- mobile ---- */
@media (max-width: 600px) {
  header { padding: 12px 14px; }
  .brand { font-size: 18px; }
  main { padding: 16px 12px 70px; }
  h1 { font-size: 26px; }
  .modal { padding: 20px 16px; }
  .shuffle { font-size: 36px; letter-spacing: 8px; }
  .reading { padding: 16px; }
}

/* notch / safe areas: paint the whole canvas, never white */
html { background: #0f0c1d; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
header { padding-top: calc(18px + env(safe-area-inset-top)); }

/* coins modal marketing */
#modal-sub { white-space: pre-line; }
.package { position: relative; }
.package.popular { border-color: var(--accent); }
.pk { display: flex; align-items: center; gap: 8px; }
.badge {
  font-family: var(--sans); font-size: 11px; color: #1a1430;
  background: var(--gold); border-radius: 8px; padding: 2px 8px;
}
.pop {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: #fff; background: var(--accent);
  border-radius: 8px; padding: 2px 9px;
}
.packages { margin-top: 6px; }

/* reading sections: card name as a small title above its paragraph */
.card-title {
  font-weight: normal; font-size: 19px; color: var(--gold);
  margin: 16px 0 6px;
}
.card-title:first-child { margin-top: 0; }
#reading-body p { margin-bottom: 10px; }
.advice-block { border: 0; }
h3.advice-block { border-top: 1px solid #2e2650; padding-top: 14px; margin-top: 20px; }

/* ---- header controls: profile + coins (2026-07-26 redesign) ----
   Old logo design for reference: Georgia serif, letter-spacing 3px.  */
.brand {
  font-family: "Bodoni 72", Didot, "Palatino", Georgia, serif;
  letter-spacing: 1px; font-size: 23px;
}
.hdr-controls { display: flex; align-items: center; gap: 10px; }
.profile { position: relative; }
.profile-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--panel); border: 1px solid #2e2650;
  color: var(--muted); display: flex; align-items: center; justify-content: center;
}
.profile-btn.on { color: var(--accent); border-color: var(--accent); }
.profile-pop {
  position: absolute; right: 0; top: 42px; z-index: 500;
  background: var(--bg2); border: 1px solid #2e2650; border-radius: 12px;
  padding: 12px 14px; min-width: 220px; text-align: left;
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.profile-pop .row { display: flex; align-items: center; gap: 10px; }
.profile-pop button {
  padding: 7px 12px; border-radius: 8px; font-size: 13px;
  background: var(--accent); color: #fff;
}
.profile-pop button.ghost { background: var(--panel); color: var(--muted);
  border: 1px solid #2e2650; }
.profile-pop .who { color: var(--muted); margin-bottom: 8px; word-break: break-all; }

/* realistic coin icon (replaces the flat ◉ glyph) */
.coinic {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffefb3, #e9c96a 40%, #c39a3f 70%, #8a6a2f);
  border: 1px solid #8a6a2f; vertical-align: -2px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.65), inset 0 -1px 2px rgba(0,0,0,.35),
              0 1px 2px rgba(0,0,0,.4);
}
.coinic::after {
  content: ""; display: block; margin: 3px auto; width: 7px; height: 7px;
  border-radius: 50%; border: 1px solid rgba(138,106,47,.75);
}

/* question input: never resizable below a usable height */
textarea { min-height: 50px; }

/* ---- logo v3: Copperplate engraved caps (v2: Bodoni72/Didot spacing 1px;
   v1: Georgia serif spacing 3px) ---- */
a.brand, .brand {
  font-family: Copperplate, "Copperplate Gothic Light", Didot, Georgia, serif;
  letter-spacing: 2px; font-size: 21px; text-decoration: none;
  color: var(--gold); cursor: pointer;
}

/* ---- coin v2: reeded edge (ridges) + embossed inner disc ---- */
.coinic {
  position: relative; width: 16px; height: 16px; border: none;
  background:
    radial-gradient(circle at 35% 28%, #ffefb3, #e9c96a 42%, #c39a3f 72%, #8a6a2f),
    repeating-conic-gradient(#8a6a2f 0deg 8deg, #ffe9a8 8deg 16deg);
  background-blend-mode: normal;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.6), inset 0 -1px 2px rgba(0,0,0,.4),
              0 1px 2px rgba(0,0,0,.45);
}
.coinic { background:
    repeating-conic-gradient(#7c5f2a 0deg 7deg, #e9c96a 7deg 14deg); }
.coinic::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffefb3, #e9c96a 45%, #c39a3f 80%, #9a7635);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 0 -1px 1px rgba(0,0,0,.35);
}
.coinic::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; z-index: 1;
  border: 1px solid rgba(122,92,40,.55);
}

/* logo: star vertically centered with the Copperplate text */
a.brand { display: inline-flex; align-items: center; gap: 7px; }
a.brand .star { font-size: 15px; line-height: 1; transform: translateY(-1px); }

/* coin svg replaces .coinic (v2 CSS coin retired) */
.coinsvg { vertical-align: -3px; }
.coinic { display: none; }

/* profile popover: fit the whole email on one line when the screen allows */
.profile-pop { width: max-content; max-width: min(92vw, 520px); }
.profile-pop .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 480px; }

/* folded question above the reading */
.q-fold {
  background: var(--panel); border: 1px solid #2e2650; border-radius: 12px;
  padding: 10px 14px; margin-bottom: 12px; font-family: var(--sans);
}
.q-fold summary {
  cursor: pointer; color: var(--muted); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.q-fold[open] summary { white-space: normal; color: var(--gold); }
.q-fold p { margin-top: 8px; font-size: 14px; line-height: 1.5; }

/* FAQ */
#faq { max-width: 640px; margin: 44px auto 0; padding-top: 8px;
  border-top: 1px solid #241d40; }
#faq h2 { font-weight: normal; color: var(--muted); font-size: 15px;
  letter-spacing: 1px; margin-bottom: 10px; font-family: var(--sans); }
#faq details { background: var(--panel); border: 1px solid #2e2650;
  border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
#faq summary { cursor: pointer; font-size: 14px; font-family: var(--sans); }
#faq p { color: var(--muted); font-size: 13.5px; line-height: 1.6;
  margin-top: 8px; }

/* most-popular ribbon: near the right edge of the pack row */
.pop { left: auto; right: 12px; transform: none; }

/* logo v3.1: Copperplate sits low in its box; lift the wordmark to meet
   the star's optical center */
a.brand .star { transform: none; font-size: 14px; }
a.brand span:last-child { transform: translateY(-1.5px); }


/* logout hover: red */
.profile-pop button.ghost:hover { background: #c62828; color: #fff;
  border-color: #c62828; }
.coinsvg.stack { vertical-align: -6px; }

/* most-popular: nudged toward the gap between the extra badge and price */
.pop { right: 52px; }

/* a screened-out question is guidance, not a failure: calmer than the red toast.
   pre-line keeps the message's own line breaks (one thought per line). */
.toast.notice { background: var(--panel); border: 1px solid var(--gold);
  color: var(--ink); line-height: 1.6; text-align: center;
  /* The screening message carries its own line breaks, so it needs more room
     than the one-line error toast before those lines wrap a second time. */
  max-width: min(94vw, 620px);
  white-space: pre-line; }

/* The coins line inside a notice: present, but demoted out of the way of the
   sentence the reader actually has to act on. */
.toast.notice .foot { display: block; margin-top: 9px; font-size: 13px;
  color: var(--muted); }

/* ---- a table of face-down cards under everything ----
   Tiled as a background LAYER on body (a ::before with z-index:-1 would be
   painted under body's own gradient and never show). Opacity lives inside the
   SVG so the gradient underneath keeps its full strength. Repeating tile means
   it fills any width without stretching and never adds a scrollbar. */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='182' viewBox='0 0 128 182'%3E%3Cg fill='none' stroke='%23e8e2f5' stroke-opacity='.055'%3E%3Crect x='12' y='16' width='104' height='150' rx='9' stroke-width='2'/%3E%3Crect x='20' y='24' width='88' height='134' rx='5' stroke-width='1.2'/%3E%3Cpath d='M20 46H108M20 136H108' stroke-width='1'/%3E%3Cpath d='M64 52 86 91 64 130 42 91Z' stroke-width='1'/%3E%3Cpath d='M64 68 75 91 64 114 53 91Z' stroke-width='1'/%3E%3Ccircle cx='64' cy='91' r='4.5' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1200px 800px at 50% -200px, #241c44, var(--bg));
  background-repeat: repeat, no-repeat;
  background-size: 128px 182px, auto;
  background-position: center top, center top;
  background-attachment: scroll, fixed;
}
@media (max-width: 600px) {
  body { background-size: 96px 136px, auto; }
}