/* ============================================================================
   جامِ جم — the candle-lit grimoire. Dark, gold-leafed, parchment, RTL-first.
   ========================================================================== */
:root{
  --bg:#0a0712; --bg2:#120c1f; --bg3:#1b1130;
  --panel:rgba(26,18,42,.78); --panel2:rgba(18,12,30,.92);
  --ink:#e9dcc2; --ink-soft:#c9bca0; --muted:#8a7f9c;
  --gold:#e8c66a; --gold2:#f6e0a0; --gold-deep:#b8902f;
  --rose:#caa3c4; --good:#86c98f; --warn:#e8c66a; --bad:#d98a8a;
  --line:rgba(232,198,106,.22); --line-soft:rgba(232,198,106,.10);
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --serif:"Cormorant Garamond",Georgia,serif;
  --display:"Cinzel",serif; --fa:"Vazirmatn",system-ui,sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 700px at 50% -10%,#1a1030 0%,var(--bg) 60%) fixed,var(--bg);
  color:var(--ink); font-family:var(--serif); font-size:18px; line-height:1.65;
  min-height:100vh; overflow-x:hidden; -webkit-tap-highlight-color:transparent;
}
body[dir=rtl]{font-family:var(--fa); line-height:1.9}
body[data-tg="1"]{background:var(--tg-theme-bg-color,var(--bg))}
#ambiance{position:fixed; inset:0; z-index:0; pointer-events:none}
main{position:relative; z-index:1; max-width:820px; margin:0 auto; padding:0 18px 64px}

/* ---- topbar ---- */
.topbar{position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; background:linear-gradient(var(--bg),rgba(10,7,18,.4) 70%,transparent);
  backdrop-filter:blur(6px)}
.brand{display:flex; align-items:center; gap:10px; cursor:pointer}
.sigil{width:34px; height:34px; filter:drop-shadow(0 0 8px rgba(232,198,106,.4))}
.brand-name{font-family:var(--display); font-weight:600; letter-spacing:.04em; color:var(--gold2); font-size:1.25rem}
body[dir=rtl] .brand-name{font-family:var(--fa)}
.controls{display:flex; gap:8px; align-items:center}
.ghost,.lang-toggle{background:transparent; border:1px solid var(--line); color:var(--ink-soft);
  border-radius:999px; padding:6px 12px; font-family:inherit; font-size:.85rem; cursor:pointer; transition:.2s}
.ghost:hover,.lang-toggle:hover{border-color:var(--gold); color:var(--gold2)}
.lang-toggle .cur{color:var(--gold2)}

/* ---- hero ---- */
.hero{text-align:center; padding:42px 8px 30px}
.hero-sigil img{width:96px; height:96px; filter:drop-shadow(0 0 22px rgba(232,198,106,.35));
  animation:breathe 6s ease-in-out infinite}
.title{font-family:var(--display); font-size:2.7rem; margin:.3em 0 .1em; color:var(--gold2);
  letter-spacing:.06em; text-shadow:0 0 30px rgba(232,198,106,.25)}
body[dir=rtl] .title{font-family:var(--fa); font-weight:700}
.tagline{font-style:italic; color:var(--rose); font-size:1.25rem; margin:.2em auto .6em; max-width:30ch}
.subtitle{color:var(--ink-soft); max-width:46ch; margin:0 auto 1.4em}
.disclaimer{color:var(--muted); font-size:.82rem; margin-top:1.4em; letter-spacing:.02em}

/* ---- buttons ---- */
.btn{background:linear-gradient(180deg,rgba(232,198,106,.12),rgba(232,198,106,.04));
  border:1px solid var(--line); color:var(--ink); border-radius:999px; padding:11px 22px;
  font-family:inherit; font-size:1rem; cursor:pointer; transition:.2s; letter-spacing:.02em}
.btn:hover{border-color:var(--gold); color:var(--gold2); box-shadow:0 0 18px rgba(232,198,106,.18)}
.btn.primary{background:linear-gradient(180deg,#e8c66a,#b8902f); color:#1a1024; border-color:transparent; font-weight:600}
.btn.primary:hover{box-shadow:0 0 26px rgba(232,198,106,.4)}
.btn:disabled{opacity:.5; cursor:default}

/* ---- sections ---- */
.section{margin:28px 0}
.section-title{font-family:var(--display); color:var(--gold2); text-align:center; font-size:1.5rem; letter-spacing:.05em; margin:.4em 0}
body[dir=rtl] .section-title{font-family:var(--fa); font-weight:700}
.group-title{font-family:var(--display); color:var(--gold); font-size:1.05rem; letter-spacing:.08em;
  text-transform:uppercase; margin:26px 4px 12px; opacity:.85; border-bottom:1px solid var(--line-soft); padding-bottom:6px}
body[dir=rtl] .group-title{font-family:var(--fa); text-transform:none; font-weight:700}

/* ---- oracle cards ---- */
.oracle-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.o-card{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 14px; cursor:pointer; transition:.22s; overflow:hidden; text-align:center}
.o-card::before{content:""; position:absolute; inset:0; background:radial-gradient(80px 60px at 50% 0,rgba(232,198,106,.10),transparent); opacity:0; transition:.22s}
.o-card:hover{transform:translateY(-3px); border-color:var(--gold); box-shadow:var(--shadow)}
.o-card:hover::before{opacity:1}
.o-card .glyph{font-size:1.7rem; color:var(--gold2); display:block; margin-bottom:6px}
.o-card h3{margin:.2em 0; font-size:1.12rem; color:var(--ink); font-family:var(--display); font-weight:500}
body[dir=rtl] .o-card h3{font-family:var(--fa); font-weight:700}
.o-card p{margin:0; font-size:.82rem; color:var(--muted); line-height:1.5}
.o-card .lore-tag{position:absolute; top:8px; inset-inline-end:8px; font-size:.6rem; color:var(--rose);
  border:1px solid var(--line-soft); border-radius:999px; padding:1px 6px}

/* ---- stage (reading panel) ---- */
.stage{position:fixed; inset:0; z-index:40; background:rgba(5,4,12,.86); backdrop-filter:blur(7px);
  display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:30px 14px}
.stage.hidden,.modal.hidden,.hidden{display:none!important}
.stage-inner{position:relative; width:100%; max-width:640px; background:linear-gradient(180deg,var(--bg3),var(--panel2));
  border:1px solid var(--line); border-radius:18px; padding:26px 22px 30px; box-shadow:var(--shadow);
  animation:fadeUp .35s ease}
.stage-close,.modal-close{position:absolute; top:12px; inset-inline-end:14px; background:transparent; border:none;
  color:var(--muted); font-size:1.3rem; cursor:pointer; line-height:1}
.stage-close:hover,.modal-close:hover{color:var(--gold2)}
.stage h2{font-family:var(--display); color:var(--gold2); margin:.1em 0 .3em; font-size:1.5rem}
body[dir=rtl] .stage h2{font-family:var(--fa)}
.lead{color:var(--ink-soft); margin:.2em 0 1em; font-size:.96rem}

/* ---- forms ---- */
.field{margin:12px 0}
.field label{display:block; color:var(--gold); font-size:.85rem; margin-bottom:5px; letter-spacing:.02em}
.field input,.field textarea{width:100%; background:rgba(10,7,18,.7); border:1px solid var(--line);
  color:var(--ink); border-radius:10px; padding:11px 13px; font-family:inherit; font-size:1rem}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 12px rgba(232,198,106,.15)}
.field textarea{min-height:80px; resize:vertical}
.row{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; align-items:center}
.row .btn{flex:0 1 auto}

/* ---- result / reading ---- */
.result{margin-top:18px; padding:18px; background:rgba(10,7,18,.5); border:1px solid var(--line-soft);
  border-radius:12px; animation:fadeUp .4s ease}
.result h4{color:var(--gold2); margin:.2em 0 .6em; font-family:var(--display); font-weight:500; display:flex; gap:8px; align-items:center}
body[dir=rtl] .result h4{font-family:var(--fa)}
.reading{white-space:pre-wrap; line-height:1.95; color:var(--ink); font-size:1.06rem}
.reading.fa{font-size:1.12rem}
.badge-ai{font-size:.62rem; border:1px solid var(--line); color:var(--gold); border-radius:999px; padding:1px 8px; letter-spacing:.05em}
.spin{display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--gold2);
  border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; margin-inline-end:8px}
.tone-good{color:var(--good)} .tone-ominous{color:var(--bad)} .tone-ambiguous{color:var(--warn)}

/* ---- رمل figures (dot grid) ---- */
.raml-wrap{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:10px 0}
.raml-fig{text-align:center; min-width:64px}
.raml-fig .rows{display:inline-flex; flex-direction:column; gap:7px; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; background:rgba(10,7,18,.4)}
.raml-fig .rrow{display:flex; gap:8px; justify-content:center; min-height:9px}
.raml-fig .dot{width:8px; height:8px; border-radius:50%; background:var(--gold2); box-shadow:0 0 6px rgba(232,198,106,.5);
  animation:dotRaise .5s ease both}
.raml-fig .cap{font-size:.72rem; color:var(--gold); margin-top:6px; display:block}
.raml-fig .latin{font-size:.62rem; color:var(--muted)}
.raml-fig.judge .rows{border-color:var(--gold); box-shadow:0 0 16px rgba(232,198,106,.25)}

/* ---- اوفاق magic square ---- */
.wafq{display:inline-grid; gap:4px; margin:8px auto; padding:8px; background:rgba(10,7,18,.5);
  border:1px solid var(--line); border-radius:10px}
.wafq .cell{min-width:38px; min-height:38px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(232,198,106,.08),transparent); border:1px solid var(--line-soft);
  border-radius:6px; color:var(--gold2); font-size:.95rem; font-variant-numeric:tabular-nums}
.center-note{text-align:center; color:var(--ink-soft); font-size:.9rem; margin-top:8px}

/* ---- cards (tarot/lenormand/runes) ---- */
.draw{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:6px 0}
.tcard{flex:1 1 130px; max-width:170px; background:linear-gradient(180deg,#1d1330,#140c22);
  border:1px solid var(--line); border-radius:12px; padding:14px 10px; text-align:center;
  animation:cardFlip .5s ease both}
.tcard.rev{border-color:var(--bad)}
.tcard .pos{font-size:.7rem; color:var(--gold); letter-spacing:.04em; margin-bottom:6px}
.tcard .glyph,.tcard .rune-glyph{font-size:2rem; color:var(--gold2); display:block; margin:4px 0}
.tcard .nm{color:var(--ink); font-weight:600; margin:4px 0}
.tcard .mn{font-size:.82rem; color:var(--muted); line-height:1.5}
.tcard .ornt{font-size:.68rem; color:var(--rose); margin-top:5px}

/* ---- visions (scrying / coffee) ---- */
.vision{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft)}
.vision .vi{color:var(--gold2); font-size:1.2rem}
.vision:last-child{border-bottom:none}

/* hexagram */
.hex-lines{display:inline-flex; flex-direction:column-reverse; gap:6px; margin:6px auto}
.hex-lines .ln{display:flex; gap:8px; justify-content:center}
.hex-lines .seg{width:34px; height:7px; background:var(--gold2); border-radius:2px}
.hex-lines .ln.changing .seg{background:var(--rose); box-shadow:0 0 8px var(--rose)}

/* ---- about ---- */
.about-body{color:var(--ink-soft); font-size:.98rem}
.about-body h3{color:var(--gold); font-family:var(--display); font-weight:500}
body[dir=rtl] .about-body h3{font-family:var(--fa)}
.about-body code{background:rgba(232,198,106,.12); padding:1px 6px; border-radius:5px; color:var(--gold2)}
.footer{text-align:center; margin:40px 0 10px; color:var(--muted)}
.footer .small{font-size:.78rem; max-width:60ch; margin:0 auto}

/* ---- AI modal ---- */
.modal{position:fixed; inset:0; z-index:60; background:rgba(5,4,12,.86); backdrop-filter:blur(7px);
  display:flex; align-items:center; justify-content:center; padding:18px}
.modal-card{position:relative; width:100%; max-width:440px; background:linear-gradient(180deg,var(--bg3),var(--panel2));
  border:1px solid var(--line); border-radius:16px; padding:26px 22px; box-shadow:var(--shadow); animation:fadeUp .3s ease}
.modal-card h3{font-family:var(--display); color:var(--gold2); margin:.1em 0 .4em}
body[dir=rtl] .modal-card h3{font-family:var(--fa)}
.modal-card label{display:block; color:var(--gold); font-size:.82rem; margin:10px 0 4px}
.modal-card input{width:100%; background:rgba(10,7,18,.7); border:1px solid var(--line); color:var(--ink);
  border-radius:9px; padding:10px 12px; font-family:inherit}
.muted{color:var(--muted); font-size:.88rem}
.modal-actions{display:flex; gap:10px; align-items:center; margin-top:16px; flex-wrap:wrap}
.ai-status{font-size:.82rem; color:var(--muted)} .ai-status.ok{color:var(--good)}

/* ---- animations ---- */
@keyframes breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.05);opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dotRaise{from{opacity:0;transform:translateY(-6px) scale(.5)}to{opacity:1;transform:none}}
@keyframes cardFlip{from{opacity:0;transform:rotateY(80deg)}to{opacity:1;transform:none}}

/* ---- responsive ---- */
@media (max-width:420px){
  body{font-size:17px}
  .title{font-size:2.1rem}
  .oracle-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px}
  .stage-inner{padding:22px 16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
}