:root{
  --rune-bg:#0d0a14;
  --rune-card:#18102a;
  --rune-border:rgba(180,140,60,.22);
  --rune-gold:#d4a843;
  --rune-gold-light:#f0c968;
  --rune-purple:#6b2daf;
  --rune-muted:#9080aa;
  --rune-paper:#fdf8f0;
  --rune-ink:#2c184b;
  --rune-shadow:0 20px 60px rgba(8,4,18,.45);
  --rune-radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Tajawal","Cairo",'Raleway',Tahoma,Arial,sans-serif;
  background:
    radial-gradient(circle at 18% 0%,rgba(107,45,175,.32),transparent 30rem),
    radial-gradient(circle at 88% 88%,rgba(212,168,67,.14),transparent 25rem),
    linear-gradient(180deg,#f2eaf9 0%,#fef9f4 55%,#ede4f7 100%);
  color:var(--rune-ink);
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
main{width:min(1180px,calc(100% - 34px));margin-inline:auto}

/* ━━━ HERO ━━━ */
.rune-hero{
  position:relative;overflow:hidden;
  min-height:340px;margin-top:6px;
  border-radius:0 0 32px 32px;
  display:grid;grid-template-columns:50% 50%;align-items:center;
  background:linear-gradient(135deg,rgba(22,8,44,.96),rgba(60,18,100,.88) 48%,rgba(28,10,50,.92));
  border-bottom:1px solid var(--rune-border);
}
.rune-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%,rgba(212,168,67,.18),transparent 18rem),
    radial-gradient(circle at 78% 60%,rgba(107,45,175,.22),transparent 16rem);
  pointer-events:none;
}
.hero-art-rune{
  position:relative;z-index:1;
  align-self:stretch;display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
}
.hero-art-rune img{
  width:min(520px,100%);height:320px;object-fit:cover;object-position:top center;
  filter:drop-shadow(0 18px 30px rgba(8,4,18,.55));
}
.hero-copy-rune{
  position:relative;z-index:2;
  padding:40px 52px 44px 36px;text-align:center;
}
.hero-copy-rune .eyebrow{
  color:var(--rune-gold);font-size:15px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px;
}
.hero-copy-rune h1{
  margin:0;color:#fff;font-size:clamp(34px,3.8vw,54px);
  font-weight:500;line-height:1.1;
}
.hero-copy-rune h1 .glyph-dec{
  color:var(--rune-gold);font-size:.5em;vertical-align:middle;margin:0 10px;
}
.hero-copy-rune p{
  margin:14px 0 0;color:rgba(255,255,255,.78);
  font-size:clamp(16px,1.6vw,19px);line-height:1.75;
}
.hero-meta-pills{
  display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:22px;
}
.hero-meta-pills span{
  padding:7px 16px;border-radius:999px;
  border:1px solid rgba(212,168,67,.3);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.82);font-size:14px;font-weight:500;
}
.cost-badge{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:18px;padding:9px 20px;border-radius:999px;
  background:rgba(212,168,67,.2);border:1px solid var(--rune-gold);
  color:var(--rune-gold-light);font-size:15px;font-weight:500;
}

/* ━━━ READING CARD ━━━ */
.rune-reading-card{
  margin:28px 0;padding:28px;
  background:rgba(255,255,255,.54);
  border:1px solid rgba(107,45,175,.18);
  border-radius:var(--rune-radius);
  box-shadow:0 14px 40px rgba(48,18,77,.1);
}
.rune-form-inner h2{
  margin:0 0 20px;text-align:center;
  font-size:22px;color:#47206e;font-weight:500;
}

/* system & spread selectors */
.selector-group{
  margin-bottom:22px;
}
.selector-label{
  display:block;margin-bottom:8px;
  font-size:14px;font-weight:500;color:#5a3085;letter-spacing:.04em;text-transform:uppercase;
}
.pill-group{
  display:flex;flex-wrap:wrap;gap:10px;
}
.pill-group label{
  cursor:pointer;
}
.pill-group input[type="radio"]{display:none;}
.pill-group span{
  display:inline-block;padding:10px 20px;
  border-radius:999px;border:1.5px solid rgba(107,45,175,.25);
  background:rgba(255,255,255,.62);
  color:#3d1c6e;font-size:15px;font-weight:500;
  transition:all .18s;
}
.pill-group input[type="radio"]:checked + span{
  background:linear-gradient(135deg,#5a1ca0,#3b0d72);
  color:#fff;border-color:transparent;
  box-shadow:0 6px 18px rgba(68,23,105,.22);
}

/* question + mic */
.question-wrap{
  position:relative;margin-top:6px;
  border:1px solid rgba(107,45,175,.22);border-radius:16px;
  background:rgba(255,255,255,.65);overflow:hidden;
}
.question-wrap textarea{
  width:100%;min-height:86px;padding:16px 56px 14px 16px;
  border:0;resize:none;outline:none;background:transparent;
  color:var(--rune-ink);font-family:inherit;font-size:16px;line-height:1.6;
}
.mic-btn{
  position:absolute;top:14px;inset-inline-end:12px;
  width:40px;height:40px;border-radius:50%;border:0;
  background:rgba(107,45,175,.12);color:#6b2daf;
  font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .18s;
}
.mic-btn:hover{background:rgba(107,45,175,.22);}
.mic-btn.listening{background:#e53e3e;color:#fff;animation:mic-pulse 1.2s ease-in-out infinite;}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,62,62,.4);}50%{box-shadow:0 0 0 10px rgba(229,62,62,0);}}

/* cast button */
.cast-btn{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;padding:16px 28px;margin-top:22px;
  border-radius:14px;border:0;cursor:pointer;
  background:linear-gradient(135deg,#5a1ca0,#2b0b48);
  color:#fff;font-size:17px;font-weight:500;
  box-shadow:0 12px 28px rgba(55,16,93,.28);
  transition:transform .2s ease,filter .2s ease;
}
.cast-btn:hover{transform:translateY(-2px);filter:brightness(1.08);}
.cast-btn .btn-rune{color:var(--rune-gold);font-size:22px;}
.cast-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}

/* balance row */
.balance-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:14px;padding:10px 16px;
  border-radius:12px;background:rgba(107,45,175,.07);
  border:1px solid rgba(107,45,175,.14);
}
.balance-row .coin-cost{
  display:flex;align-items:center;gap:7px;
  font-weight:500;font-size:16px;color:#3d1c6e;
}
.balance-row .my-balance{
  font-size:13px;color:var(--rune-muted);
}
.insufficient-msg{
  margin-top:10px;text-align:center;font-size:13px;color:#b91c1c;
}
.insufficient-msg a{color:#4c1882;font-weight:500;text-decoration:underline;}

/* account aside */
.rune-aside{
  border-radius:18px;padding:20px;
  background:linear-gradient(180deg,rgba(103,56,151,.15),rgba(255,255,255,.52));
  border:1px solid rgba(107,45,175,.18);
  box-shadow:0 16px 30px rgba(68,23,105,.1);
}
.aside-top{
  display:grid;grid-template-columns:64px 1fr 28px;gap:10px;align-items:center;
}
.aside-top img{width:64px;border-radius:50%;box-shadow:0 0 0 3px var(--rune-gold);}
.aside-top strong{font-size:16px;font-weight:500;}
.aside-top p{margin:4px 0 0;color:#705d83;line-height:1.4;font-size:13px;}
.aside-ok{
  display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:#78c862;color:#fff;font-weight:500;
}
.aside-ul{
  margin:18px 0;padding:16px;list-style:none;
  border-radius:14px;background:rgba(255,255,255,.58);
}
.aside-ul li{
  display:flex;align-items:center;gap:8px;
  padding:9px 0;border-bottom:1px solid rgba(107,45,175,.12);
  font-weight:500;font-size:14px;color:#2d1649;
}
.aside-ul li:last-child{border:0;}
.aside-cta{
  display:flex;justify-content:center;padding:13px;border-radius:12px;
  color:#fff;background:linear-gradient(135deg,#4c1882,#2b0b48);
  font-weight:500;box-shadow:0 10px 20px rgba(55,16,93,.2);
}
.aside-login-area{text-align:center;padding:20px 10px;}
.aside-login-area img{width:55px;margin:0 auto 14px;}
.aside-login-area p{color:#4d3767;font-size:14px;line-height:1.6;margin:0 0 16px;}

/* ━━━ CASTING STAGE ━━━ */
.casting-stage{
  display:none;margin-top:28px;
  border-radius:var(--rune-radius);overflow:hidden;
  background:linear-gradient(135deg,#130a22,#1e0d36);
  border:1px solid var(--rune-border);
  box-shadow:var(--rune-shadow);
  padding:24px;text-align:center;
}
.casting-stage.active{display:block;}
.casting-label{
  color:var(--rune-gold);font-size:17px;font-weight:500;
  letter-spacing:.04em;margin-bottom:18px;
}
.cloth{
  position:relative;
  width:100%;height:200px;
  border-radius:18px;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 8px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 8px),
    linear-gradient(135deg,#1a1208,#0f0b05);
  border:1px solid rgba(180,140,60,.18);
  overflow:hidden;
}
.rune-stone-anim{
  position:absolute;
  width:46px;height:56px;border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#2a1f0e;border:1.5px solid #5a4020;
  transform:translateY(-160px);opacity:0;
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .3s ease;
}
.rune-stone-anim.reversed{background:#1a1a2e;border-color:#3a3060;}
.rune-stone-anim.landed{transform:translateY(0);opacity:1;}
.stone-glyph{font-size:24px;color:#d4a843;}
.rune-stone-anim.reversed .stone-glyph{transform:rotate(180deg);color:#9b7ec8;}

/* ━━━ RESULT PANEL ━━━ */
.rune-result{
  margin-top:28px;
  border-radius:var(--rune-radius);overflow:hidden;
  background:linear-gradient(135deg,#130a22,#1e0d36);
  border:2px solid rgba(212,168,67,.45);
  box-shadow:var(--rune-shadow);
  padding:28px;
}
.rune-result-header{
  text-align:center;margin-bottom:24px;
}
.rune-result-header .oracle-title{
  color:var(--rune-gold-light);font-size:24px;font-weight:500;
  letter-spacing:.03em;margin:0;
}
.drawn-runes-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:18px;
  margin-bottom:28px;
}
.rune-card-result{
  width:clamp(100px,18vw,140px);
  padding:16px 12px;
  border-radius:16px;text-align:center;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(212,168,67,.28);
}
.rune-card-result.reversed{
  background:rgba(107,45,175,.12);
  border-color:rgba(155,126,200,.35);
}
.rune-card-glyph{
  font-size:38px;color:#d4a843;margin-bottom:6px;display:block;
}
.rune-card-result.reversed .rune-card-glyph{
  color:#9b7ec8;transform:rotate(180deg);display:inline-block;
}
.rune-card-pos{
  font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:4px;
}
.rune-card-name{
  font-size:14px;font-weight:500;color:rgba(255,255,255,.88);margin-bottom:2px;
}
.rune-rev-badge{
  display:inline-block;font-size:10px;font-weight:500;
  padding:2px 8px;border-radius:999px;
  background:rgba(155,126,200,.3);color:#c8a8e8;
  border:1px solid rgba(155,126,200,.3);margin-top:4px;
}
.divider-rune{
  width:80%;height:1px;margin:20px auto;
  background:linear-gradient(90deg,transparent,var(--rune-gold),transparent);
  position:relative;
}
.divider-rune::after{
  content:"ᚦ";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  padding:0 10px;background:#130a22;color:var(--rune-gold);font-size:14px;
}
.interpretation-text{
  color:rgba(255,255,255,.86);font-size:17px;line-height:1.85;
  white-space:pre-line;
}
.rune-actions{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;
}
.rune-actions a{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 12px;border-radius:12px;
  color:#fff;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);
  font-size:15px;font-weight:500;
  transition:background .18s;
}
.rune-actions a:hover{background:rgba(255,255,255,.18);}
.rune-actions a img{width:28px;}
.rune-actions a.primary-action{
  background:linear-gradient(135deg,var(--rune-gold),#b37a15);
  color:#1a0e2e;border:0;
}

/* ━━━ HISTORY ━━━ */
.rune-history{
  margin-top:18px;padding:16px;
  border:1px solid rgba(107,45,175,.16);border-radius:18px;
  background:rgba(255,255,255,.55);
}
.history-head{
  display:flex;align-items:center;justify-content:center;
  position:relative;margin-bottom:14px;
}
.history-head h2{margin:0;font-size:20px;color:#47206e;font-weight:500;}
.history-head a{
  position:absolute;inset-inline-end:0;
  padding:5px 16px;border-radius:999px;
  background:#f4ecfb;color:#4a2475;font-weight:500;font-size:13px;
}
.history-items{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.history-item{
  padding:12px;border:1px solid rgba(107,45,175,.15);border-radius:13px;
  background:rgba(255,255,255,.62);
  display:grid;grid-template-columns:1fr;gap:5px;
}
.history-item span{font-weight:500;font-size:14px;color:#2d1649;}
.history-item small{color:#6b5c80;font-size:12px;line-height:1.4;}
.history-item a{
  display:block;text-align:center;padding:6px;border-radius:8px;
  background:linear-gradient(135deg,#4c1882,#2b0b48);color:#fff;
  font-size:13px;font-weight:500;margin-top:4px;
}

/* ━━━ STEPS ━━━ */
.rune-steps{margin-top:26px;}
.rune-steps h2{margin:0 0 18px;text-align:center;font-size:22px;color:#47206e;font-weight:500;}
.steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.step-item{
  position:relative;padding:18px;
  border:1px solid rgba(107,45,175,.15);border-radius:18px;
  background:rgba(255,255,255,.58);
  box-shadow:0 10px 28px rgba(48,18,77,.08);
  display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:center;
}
.step-item img{width:72px;height:72px;object-fit:contain;}
.step-item h3{margin:0 0 4px;font-size:17px;color:#3d1c6e;font-weight:500;}
.step-item p{margin:0;color:#705d85;font-size:14px;line-height:1.5;}
.step-num{
  position:absolute;top:-13px;inset-inline-start:16px;
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#5a1ca0,#3b0d72);
  color:#fff;font-weight:500;font-size:17px;
  display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(55,16,93,.22);
}
.moon-banner{
  margin:20px 0 10px;border-radius:22px;overflow:hidden;
  box-shadow:0 18px 45px rgba(48,18,77,.22);
}
.moon-banner img{width:100%;height:auto;}

/* ━━━ RESPONSIVE ━━━ */
@media (max-width:980px){
  .rune-hero{grid-template-columns:1fr;}
  .hero-art-rune{min-height:220px;}
  .hero-art-rune img{height:220px;width:100%;}
  .hero-copy-rune{padding:26px 30px 32px;}
  .rune-reading-card{grid-template-columns:1fr !important;}
  .steps-row{grid-template-columns:1fr;}
  .history-items{grid-template-columns:repeat(2,1fr);}
  .rune-actions{grid-template-columns:1fr;}
}
@media (max-width:600px){
  main{width:calc(100% - 22px);}
  .rune-hero{border-radius:0 0 22px 22px;}
  .hero-copy-rune{padding:20px 18px 26px;}
  .hero-copy-rune h1{font-size:32px;}
  .drawn-runes-grid{gap:12px;}
  .rune-card-result{width:clamp(80px,28vw,120px);padding:12px 8px;}
  .rune-card-glyph{font-size:30px;}
  .rune-actions{grid-template-columns:1fr;}
  .history-items{grid-template-columns:1fr;}
}