/*
  ============================================================
  ASTRACANA · PAST PRESENT FUTURE — STYLES
  Card text lives in cards-data.js (shared by all tools).
  ============================================================
*/
.astr-ppf{
  --bg:#1B1235; --bg-soft:#2A1E4D; --gold:#D4AF37; --gold-dim:#9a7f2a;
  --ink:#FAF6EF; --ink-dim:#C9BFAE; --card-back:#241743;
  font-family: Georgia, 'Times New Roman', serif; color: var(--ink);
  display:flex; flex-direction:column; align-items:center;
  padding:32px 20px 52px; text-align:center;
  /* dark panel so ivory text is readable on any theme background */
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-soft) 0%, var(--bg) 55%, #14102a 100%);
  border:1px solid rgba(212,175,55,.28); border-radius:20px;
  box-shadow:0 24px 60px rgba(20,12,40,.22); margin:8px 0 24px;
}
.astr-ppf *{ box-sizing:border-box; margin:0; padding:0; }
.astr-ppf .astr-title{ font-size:clamp(1.8rem,5vw,2.6rem); letter-spacing:.04em; font-weight:normal; }
.astr-ppf .astr-star{ color:var(--gold); }
.astr-ppf .astr-subtitle{ margin-top:10px; color:var(--ink-dim); font-style:italic; max-width:560px; line-height:1.6; }
.astr-ppf .astr-ask{ margin-top:26px; width:min(480px,100%); }
.astr-ppf .astr-ask label{ display:block; margin-bottom:8px; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); }
.astr-ppf .astr-ask label span{ text-transform:none; letter-spacing:0; font-style:italic; }
.astr-ppf .astr-ask input{
  width:100%; padding:13px 18px; border-radius:999px; border:1px solid var(--gold-dim);
  background:rgba(255,255,255,.04); color:var(--ink); font-family:inherit; font-size:1rem; text-align:center;
}
.astr-ppf .astr-ask input::placeholder{ color:var(--ink-dim); opacity:.6; }
.astr-ppf .astr-ask input:focus{ outline:none; border-color:var(--gold); }
.astr-ppf .astr-btn-row{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.astr-ppf .astr-btn{
  font-family:inherit; font-size:.95rem; letter-spacing:.08em; padding:13px 30px;
  border-radius:999px; cursor:pointer; border:1px solid var(--gold);
  background:transparent; color:var(--gold); transition:all .25s;
}
.astr-ppf .astr-btn:hover{ background:var(--gold); color:var(--bg); }
.astr-ppf .astr-btn.astr-primary{ background:var(--gold); color:var(--bg); }
.astr-ppf .astr-btn.astr-primary:hover{ filter:brightness(1.1); }
/* ---------- spread ---------- */
.astr-ppf .astr-spread{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px;
  margin-top:34px; width:100%; max-width:900px;
}
.astr-ppf .astr-slot{ display:flex; flex-direction:column; align-items:center; }
.astr-ppf .astr-pos{
  font-size:.8rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px;
}
.astr-ppf .astr-card{
  width:100%; max-width:220px; aspect-ratio:5/8.2; position:relative;
  transform-style:preserve-3d; transition:transform .8s cubic-bezier(.2,.7,.3,1.2);
}
.astr-ppf .astr-card.astr-flipped{ transform:rotateY(180deg); }
.astr-ppf .astr-card.astr-reversed .astr-card-inner{ transform:rotate(180deg); }
.astr-ppf .astr-face{
  position:absolute; inset:0; border-radius:12px; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:16px; text-align:center; border:1px solid var(--gold-dim);
}
.astr-ppf .astr-back{ background:radial-gradient(circle at 50% 42%, rgba(212,175,55,.14), transparent 60%), var(--card-back); }
.astr-ppf .astr-back .astr-sigil{ font-size:2.4rem; color:var(--gold); }
.astr-ppf .astr-front{ background:linear-gradient(165deg, var(--bg-soft), #17102e); transform:rotateY(180deg); }
.astr-ppf .astr-card-inner{ display:flex; flex-direction:column; align-items:center; width:100%; transition:transform .3s; }
.astr-ppf .astr-card-name{ color:var(--gold); font-size:1.05rem; letter-spacing:.04em; line-height:1.3; }
.astr-ppf .astr-orientation{ margin-top:8px; font-size:.65rem; letter-spacing:.25em; text-transform:uppercase; color:var(--ink-dim); }
.astr-ppf .astr-divider{ width:44px; height:1px; background:var(--gold-dim); margin:12px auto; }
.astr-ppf .astr-keywords{ font-style:italic; color:var(--ink); line-height:1.6; font-size:.88rem; }
.astr-ppf .astr-reflect{
  margin-top:14px; color:var(--ink-dim); font-size:.92rem; line-height:1.7;
  max-width:260px; opacity:0; transition:opacity .5s;
}
.astr-ppf .astr-reflect.astr-show{ opacity:1; }
.astr-ppf .astr-note{ margin-top:26px; color:var(--ink-dim); font-size:.85rem; font-style:italic; max-width:520px; line-height:1.7; }
@media (max-width:640px){
  .astr-ppf .astr-spread{ grid-template-columns:1fr; max-width:300px; }
}
@media (max-width:480px){ .astr-ppf{ padding:16px 4px 40px; } }