/* MoonDraw content site — shares the Mini App's palette, extended for editorial pages */
:root{
  --bg1:#140c1f;
  --bg2:#241735;
  --bg3:#2e1c47;
  --gold:#f0cf7c;
  --gold-soft:#e8c268;
  --gold-dim:#a8853f;
  --text:#f4eeff;
  --text-dim:#b8a9d4;
  --card-back:#2c1c44;
  --accent:#8a5cff;
  --paid:#3a2650;
  --line: rgba(255,255,255,0.10);
  --panel: rgba(255,255,255,0.035);
  --radius: 18px;
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(138,92,255,0.22), transparent 60%),
    radial-gradient(ellipse 60% 30% at 15% 100%, rgba(240,207,124,0.07), transparent 60%),
    linear-gradient(180deg, var(--bg1), #0f0916 90%);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  line-height:1.6;
}

/* ---------- Starfield (same trick as the Mini App) ---------- */
#stars{position:fixed; inset:0; z-index:0; pointer-events:none;}
.star{position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; animation:twinkle 3.4s ease-in-out infinite; opacity:0.2;}
@keyframes twinkle{0%,100%{opacity:.15; transform:scale(1);} 50%{opacity:.85; transform:scale(1.5);}}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px; position:relative; z-index:1;}

h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0 0 .5em; letter-spacing:.2px;}
.eyebrow{
  font-family:var(--font-body); font-size:12.5px; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold-dim); font-weight:700; margin-bottom:10px; display:block;
}
.shine{
  background:linear-gradient(90deg,var(--gold-dim),#fff5d6,var(--gold-dim));
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 6s linear infinite;
}
@keyframes shine{0%{background-position:0% center;} 100%{background-position:200% center;}}

p{color:var(--text-dim); margin:0 0 1em;}

/* ---------- Nav ---------- */
header.site-nav{position:relative; z-index:5; padding:22px 0;}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--text);}
.brand .dot{width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold);}
nav.links{display:flex; gap:26px; font-size:14.5px; color:var(--text-dim);}
nav.links a:hover{color:var(--gold-soft);}
.nav-right{display:flex; align-items:center; gap:14px;}
.lang-pick{display:flex; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:100px; padding:3px;}
.lang-pick a{padding:5px 10px; border-radius:100px; font-size:12.5px; font-weight:700; color:var(--text-dim);}
.lang-pick a.active{background:var(--accent); color:#fff;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:100px;
  font-weight:700; font-size:14px; white-space:nowrap;
}
.btn-gold{background:linear-gradient(135deg,var(--gold-soft),var(--gold-dim)); color:#241536; box-shadow:0 8px 24px -8px rgba(240,207,124,.5);}
.btn-ghost{border:1px solid var(--line); color:var(--text);}
@media (max-width:820px){ nav.links{display:none;} }

/* ---------- Hero ---------- */
.hero{padding:60px 0 70px; text-align:center;}
.hero h1{font-size:clamp(32px,5vw,54px); line-height:1.12; margin-bottom:18px;}
.hero .sub{font-size:17px; max-width:560px; margin:0 auto 34px;}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- Section ---------- */
section{padding:54px 0; position:relative; z-index:1;}
.section-head{text-align:center; max-width:640px; margin:0 auto 40px;}
.section-head h2{font-size:clamp(24px,3.4vw,34px);}

/* ---------- Grid cards (hub tiles) ---------- */
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
.tile{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; transition:transform .2s ease, border-color .2s ease;
}
.tile:hover{transform:translateY(-3px); border-color:rgba(240,207,124,.35);}
.tile img{border-radius:10px; margin-bottom:12px; aspect-ratio:1/2; object-fit:cover; width:100%;}
.tile h3{font-size:15.5px; margin-bottom:4px;}
.tile .tag{font-size:12px; color:var(--gold-dim); font-weight:700;}

/* ---------- Card detail page ---------- */
.card-hero{display:grid; grid-template-columns:260px 1fr; gap:44px; align-items:center; padding:40px 0 20px;}
.card-hero img{border-radius:16px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px var(--line);}
.card-hero h1{font-size:clamp(30px,4.4vw,46px); margin-bottom:6px;}
.card-hero .arcana{color:var(--gold-dim); font-weight:700; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:14px; display:block;}
.card-hero .essence{font-size:18px; color:var(--text); font-style:italic; font-family:var(--font-display);}
@media (max-width:700px){ .card-hero{grid-template-columns:1fr; text-align:center; justify-items:center;} .card-hero img{width:200px;} }

.meaning-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:34px 0;}
@media (max-width:700px){ .meaning-grid{grid-template-columns:1fr;} }
.meaning-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px;}
.meaning-card.upright{border-color:rgba(240,207,124,.25);}
.meaning-card h3{font-size:14px; text-transform:uppercase; letter-spacing:1.5px; color:var(--gold-soft); margin-bottom:12px;}
.meaning-card.reversed h3{color:var(--text-dim);}
.meaning-card p{color:var(--text); margin:0;}

.aspect-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:34px;}
@media (max-width:700px){ .aspect-row{grid-template-columns:1fr;} }
.aspect{padding:20px 0; border-top:1px solid var(--line);}
.aspect h4{font-family:var(--font-body); font-size:13px; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-dim); margin:0 0 8px; font-weight:700;}
.aspect p{margin:0; color:var(--text);}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 36px;}
.chip{padding:7px 14px; border-radius:100px; background:var(--card-back); border:1px solid var(--line); font-size:13px; color:var(--gold-soft);}

.advice-box{
  background:linear-gradient(135deg, rgba(138,92,255,.14), rgba(240,207,124,.06));
  border:1px solid rgba(240,207,124,.25); border-radius:var(--radius); padding:26px 28px; margin-bottom:40px;
}
.advice-box .eyebrow{color:var(--gold-soft);}
.advice-box p{color:var(--text); font-size:16px; margin:0;}

.cta-banner{
  text-align:center; padding:44px 30px; border-radius:22px;
  background:linear-gradient(160deg, var(--bg3), var(--bg2));
  border:1px solid var(--line); margin:20px 0 10px;
}
.cta-banner h3{font-size:22px; margin-bottom:10px;}
.cta-banner p{max-width:420px; margin:0 auto 22px;}

/* ---------- Shuffling deck (hero centerpiece) ---------- */
.deck-shuffle-wrap{display:flex; justify-content:center; margin-bottom:26px; animation:deckFloat 5.5s ease-in-out infinite;}
@keyframes deckFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}
.deck-shuffle{position:relative; width:200px; height:288px;}
.deck-shuffle .card{
  position:absolute; inset:0; border-radius:15px;
  background:
    radial-gradient(circle at 50% 36%, rgba(240,207,124,.22), transparent 62%),
    linear-gradient(160deg, var(--card-back), #1a1128);
  border:1px solid rgba(240,207,124,.4);
  box-shadow:0 24px 46px -16px rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center;
  animation:cardFan 4.6s cubic-bezier(.45,0,.2,1) infinite;
  will-change:transform;
}
.deck-shuffle .card::before{
  content:''; width:44px; height:44px; border-radius:50%;
  background:radial-gradient(circle at 34% 34%, var(--gold-soft), var(--gold-dim) 58%, transparent 72%);
  opacity:.5;
}
.deck-shuffle .card::after{
  content:''; position:absolute; inset:8px; border:1px solid rgba(240,207,124,.22); border-radius:10px;
}
@keyframes cardFan{
  0%, 8%{ transform:translate(0,0) rotate(0deg); }
  45%, 55%{ transform:translate(var(--fx), var(--fy)) rotate(var(--fr)); }
  92%,100%{ transform:translate(0,0) rotate(0deg); }
}
.deck-shuffle .card:nth-child(1){ --fx:-74px; --fy:-6px; --fr:-20deg; z-index:1; animation-delay:0s;}
.deck-shuffle .card:nth-child(2){ --fx:-46px; --fy:-20px; --fr:-12deg; z-index:2; animation-delay:.09s;}
.deck-shuffle .card:nth-child(3){ --fx:-16px; --fy:-30px; --fr:-4deg; z-index:3; animation-delay:.18s;}
.deck-shuffle .card:nth-child(4){ --fx:0px; --fy:-34px; --fr:0deg; z-index:4; animation-delay:.27s;}
.deck-shuffle .card:nth-child(5){ --fx:16px; --fy:-30px; --fr:4deg; z-index:5; animation-delay:.36s;}
.deck-shuffle .card:nth-child(6){ --fx:46px; --fy:-20px; --fr:12deg; z-index:6; animation-delay:.45s;}
.deck-shuffle .card:nth-child(7){ --fx:74px; --fy:-6px; --fr:20deg; z-index:7; animation-delay:.54s;}
.deck-shuffle .sparkle{
  position:absolute; border-radius:50%; background:var(--gold-soft); pointer-events:none;
  box-shadow:0 0 8px 2px rgba(240,207,124,.6);
  animation:sparkle 4.6s ease-in-out infinite;
}
@keyframes sparkle{
  0%,80%,100%{opacity:0; transform:scale(.3);}
  45%,55%{opacity:1; transform:scale(1);}
}

/* ---------- Footer ---------- */
footer{padding:50px 0 40px; border-top:1px solid var(--line); margin-top:40px;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:13px; color:var(--text-dim);}
.footer-links{display:flex; gap:20px;}
.footer-links a:hover{color:var(--gold-soft);}