/* Soul Signs — mystic theme, built for older readers on phones:
   big text, big tap targets, high contrast. */

:root{
  --bg1:#0f0820; --bg2:#1d0f3a; --bg3:#2e1558;
  --gold:#e8c872; --gold2:#f6e3a8; --gold-dim:#b8963f;
  --text:#f4ecff; --muted:#cbbde6;
  --card:rgba(40,20,78,.72); --card-b:rgba(232,200,114,.35);
  --radius:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:#0f0820}
body{
  margin:0; min-height:100vh; color:var(--text);
  font:19px/1.6 Lora, Georgia, serif;
  background:radial-gradient(ellipse at 50% 0%, var(--bg3) 0%, var(--bg2) 45%, var(--bg1) 100%) fixed;
  overflow-x:hidden;
}
body.has-sticky{padding-bottom:78px}
a{color:var(--gold2)}
h1,h2,h3,.logo{font-family:Cinzel, Georgia, serif; letter-spacing:.03em}
h1{font-size:1.75rem; line-height:1.25; margin:.4em 0 .3em; color:var(--gold2); text-align:center;
   text-shadow:0 0 18px rgba(232,200,114,.35)}
h2{font-size:1.3rem; color:var(--gold); margin:1.2em 0 .5em}
h3{font-size:1.1rem; color:var(--gold); margin:.2em 0}
p{margin:.6em 0}

/* background layers */
.stars{position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
   radial-gradient(1.5px 1.5px at 20% 30%, #fff8 50%, transparent 51%),
   radial-gradient(1px 1px at 70% 20%, #fff9 50%, transparent 51%),
   radial-gradient(1.5px 1.5px at 40% 80%, #fff6 50%, transparent 51%),
   radial-gradient(1px 1px at 85% 65%, #fff8 50%, transparent 51%),
   radial-gradient(1px 1px at 10% 70%, #fff7 50%, transparent 51%),
   radial-gradient(1.5px 1.5px at 55% 50%, #fff5 50%, transparent 51%),
   radial-gradient(1px 1px at 30% 10%, #fff8 50%, transparent 51%),
   radial-gradient(1px 1px at 90% 90%, #fff6 50%, transparent 51%);
  background-size:300px 300px; animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
.mandala-bg{position:fixed; z-index:-1; pointer-events:none; left:50%; top:50%;
  width:150vmax; height:150vmax; margin:-75vmax 0 0 -75vmax; opacity:.10}
.mandala-bg img{width:100%; height:100%; animation:spin 180s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .mandala-bg img,.stars,.orb,.glow{animation:none!important} }

/* layout */
.site-head{text-align:center; padding:14px 16px 4px}
.logo{font-size:1.25rem; text-decoration:none; color:var(--gold); font-weight:700}
.logo-moon{display:inline-block; transform:rotate(-20deg)}
.wrap{max-width:640px; margin:0 auto; padding:0 16px 24px}
.lead{text-align:center; color:var(--muted); font-size:1.05rem; margin-top:0}
.center{text-align:center}

.card{background:var(--card); border:1px solid var(--card-b); border-radius:var(--radius);
  padding:20px; margin:16px 0; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  box-shadow:0 8px 32px rgba(0,0,0,.35), inset 0 0 30px rgba(232,200,114,.05)}

/* buttons — big and easy to tap */
.btn{display:block; width:100%; padding:17px 20px; margin:12px 0; border-radius:14px;
  font:600 1.1rem/1.3 Lora, Georgia, serif; text-align:center; text-decoration:none; cursor:pointer;
  color:#2a1440; background:linear-gradient(180deg, var(--gold2), var(--gold) 60%, var(--gold-dim));
  border:0; box-shadow:0 4px 18px rgba(232,200,114,.35)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent; color:var(--gold2); border:2px solid var(--gold); box-shadow:none}
.answer{display:flex; align-items:center; gap:14px; text-align:left; color:var(--text);
  background:rgba(255,255,255,.06); border:2px solid var(--card-b); box-shadow:none; font-weight:400}
.answer .icon{font-size:1.6rem; flex:0 0 auto}
.answer:hover,.answer:focus{border-color:var(--gold); background:rgba(232,200,114,.12)}

/* progress */
.progress{height:10px; background:rgba(255,255,255,.1); border-radius:10px; overflow:hidden; margin:6px 0 4px}
.progress span{display:block; height:100%; background:linear-gradient(90deg,var(--gold-dim),var(--gold2)); border-radius:10px}
.step{text-align:center; color:var(--muted); font-size:.95rem}
.question{font-size:1.35rem; text-align:center; line-height:1.4; margin:18px 0 8px; font-weight:600}

/* home grid */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0}
.tile{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:6px; padding:18px 10px; min-height:150px; border-radius:var(--radius); text-decoration:none;
  color:var(--text); background:var(--card); border:1px solid var(--card-b)}
.tile .emoji{font-size:2.4rem; line-height:1}
.tile strong{font-family:Cinzel,Georgia,serif; color:var(--gold2); font-size:1rem; line-height:1.25}
.tile small{color:var(--muted); font-size:.85rem; line-height:1.3}
.tile.big{grid-column:1/-1; min-height:auto; flex-direction:row; justify-content:flex-start; text-align:left; gap:16px; padding:20px}
.tile.big .emoji{font-size:3rem}
.tile.big small{display:block; margin-top:4px}

/* results */
.result-hero{text-align:center; padding-top:8px}
.orb{font-size:4.5rem; line-height:1; display:inline-block; filter:drop-shadow(0 0 22px rgba(232,200,114,.55));
  animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.kicker{color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; margin:10px 0 0}
.traits{list-style:none; padding:0; margin:10px 0}
.traits li{padding:8px 0 8px 32px; position:relative; border-bottom:1px solid rgba(232,200,114,.15)}
.traits li:before{content:"✦"; position:absolute; left:6px; color:var(--gold)}
.traits li:last-child{border:0}
.quote{font-style:italic; text-align:center; color:var(--gold2); font-size:1.1rem; padding:6px 10px}
.bignum{font:700 5rem/1 Cinzel,Georgia,serif; color:var(--gold2); text-align:center;
  text-shadow:0 0 30px rgba(232,200,114,.6)}

/* reveal / calculating */
.reveal{text-align:center; padding:26px 0}
.glow{width:150px; height:150px; margin:10px auto 20px; border-radius:50%;
  background:radial-gradient(circle, #fff6 0%, var(--gold) 25%, rgba(232,200,114,.15) 60%, transparent 70%);
  animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.12); opacity:.7}}
.loading-lines p{opacity:0; animation:fadein .6s forwards}
.loading-lines p:nth-child(2){animation-delay:.9s}
.loading-lines p:nth-child(3){animation-delay:1.8s}
@keyframes fadein{to{opacity:1}}
.hidden-until{opacity:0; pointer-events:none; transition:opacity .6s}
.hidden-until.show{opacity:1; pointer-events:auto}

/* forms */
.date-row{display:grid; grid-template-columns:1fr 1.4fr 1.2fr; gap:10px}
label{display:block; font-size:.9rem; color:var(--muted); margin-bottom:4px}
select{width:100%; padding:14px 10px; font:1.1rem Lora,Georgia,serif; color:var(--text);
  background:rgba(255,255,255,.08); border:2px solid var(--card-b); border-radius:12px; -webkit-appearance:none; appearance:none}
select option{color:#000}
.math{font-family:Cinzel,Georgia,serif; text-align:center; color:var(--muted); font-size:1rem; line-height:2}

/* angel numbers */
.num-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0}
.num-grid a{display:block; padding:18px 4px; text-align:center; text-decoration:none; border-radius:14px;
  font:700 1.5rem Cinzel,Georgia,serif; color:var(--gold2); background:var(--card); border:1px solid var(--card-b)}
.num-grid a.on{background:rgba(232,200,114,.25); border-color:var(--gold)}

/* tarot */
.tarot-card{width:210px; height:340px; margin:14px auto; perspective:1000px}
.tarot-inner{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 1s}
.tarot-card.flipped .tarot-inner{transform:rotateY(180deg)}
.tarot-face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:16px;
  border:3px solid var(--gold); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:14px; text-align:center}
.tarot-back{background:repeating-linear-gradient(45deg,#2b1552 0 10px,#361a66 10px 20px); box-shadow:0 0 30px rgba(232,200,114,.3)}
.tarot-back img{width:80%; opacity:.9}
.tarot-front{transform:rotateY(180deg); background:linear-gradient(180deg,#3a1d6e,#1d0f3a)}
.tarot-front .sym{font-size:4.5rem; line-height:1.1}
.tarot-front .roman{font:700 1rem Cinzel,Georgia,serif; color:var(--muted)}
.tarot-front .name{font:700 1.2rem Cinzel,Georgia,serif; color:var(--gold2); margin-top:8px}
.tarot-front.rev .sym{transform:rotate(180deg)}

/* more readings */
.more a.row{display:flex; align-items:center; gap:14px; padding:14px; margin:10px 0; border-radius:14px;
  text-decoration:none; color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--card-b)}
.more a.row .emoji{font-size:2rem}
.more a.row strong{display:block; color:var(--gold2); font-family:Cinzel,Georgia,serif; font-size:1rem}
.more a.row small{color:var(--muted); font-size:.9rem}

/* share */
.share{text-align:center; margin:18px 0}
.share p{color:var(--muted); font-size:.95rem; margin-bottom:8px}
.btn-share{display:inline-block; padding:12px 22px; margin:4px; border-radius:30px; color:#fff; text-decoration:none; font-weight:600; font-size:1rem}
.btn-share.fb{background:#1877f2}
.btn-share.wa{background:#25d366}

/* ads */
.ad{display:flex; justify-content:center; align-items:center; margin:22px auto; max-width:100%; overflow:hidden; clear:both}
.ad-ph{border:2px dashed rgba(232,200,114,.4); color:var(--muted); font:.8rem system-ui,sans-serif; letter-spacing:.08em; background:rgba(0,0,0,.25)}
.ad-top.ad-ph,.ad-sticky.ad-ph{width:320px; height:50px}
.ad-incontent.ad-ph,.ad-result.ad-ph,.ad-result2.ad-ph{width:300px; height:250px}
.ad-incontent{margin-top:34px} /* extra gap so answers are never mis-tapped */
.sticky-ad{position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; justify-content:center; align-items:center;
  padding:6px 0 calc(6px + env(safe-area-inset-bottom)); background:rgba(15,8,32,.96); border-top:1px solid var(--card-b)}
.sticky-ad .ad{margin:0}
.sticky-close{position:absolute; top:-30px; right:8px; width:30px; height:30px; border-radius:50% 50% 0 0;
  border:1px solid var(--card-b); border-bottom:0; background:rgba(15,8,32,.96); color:var(--gold2); font-size:1.3rem; line-height:1; cursor:pointer}

/* footer */
.site-foot{text-align:center; color:var(--muted); font-size:.85rem; padding:24px 16px 30px; border-top:1px solid rgba(232,200,114,.15); margin-top:20px}
.site-foot nav a{display:inline-block; margin:4px 8px; color:var(--gold)}
.disclaimer{font-style:italic}

@media (min-width:700px){
  body{font-size:20px}
  h1{font-size:2.2rem}
  .grid{grid-template-columns:repeat(3,1fr)}
  .tile.big{grid-column:1/-1}
}