/* ============================================================
   /aajako-rashifal/  —  premium astrology, mobile-first.
   Standalone: does NOT load main.css, so anything shared
   (.sr-only, reset) must be defined here.
   ============================================================ */

:root{
  --ink:#0b0718;          /* page base */
  --ink-2:#140d2b;        /* section alt */
  --panel:#1b1338;        /* cards / panels */
  --panel-2:#241a4a;      /* raised */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --gold:#e8b84b;
  --gold-2:#f7d98a;
  --gold-deep:#8a6a1c;
  --violet:#8b5cf6;
  --text:#efeaff;
  --muted:#a99fc9;
  --radius:14px;
  --wrap:940px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-2);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}

h1,h2,h3,h4{margin:0 0 .5em;line-height:1.25;font-weight:700}
h1{font-family:"Playfair Display",Georgia,serif;font-size:clamp(2rem,8vw,3.2rem);letter-spacing:-.01em}
h2{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.5rem,5vw,2.1rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:8px;left:8px;z-index:100;background:var(--gold);
  color:#2b1d00;padding:8px 14px;border-radius:8px;font-weight:700;
  transform:translateY(-200%);transition:transform .15s}
.skip-link:focus{transform:translateY(0);text-decoration:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}

.rf-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:18px}
.rf-center{text-align:center}

/* ---------- header ---------- */
.rf-header{position:sticky;top:0;z-index:40;background:rgba(11,7,24,.86);
  backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line)}
.rf-header__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.rf-brand img{height:32px;width:auto}
.rf-nav{display:flex;gap:16px;font-size:.92rem}
.rf-nav a{color:var(--muted)}
.rf-nav a:hover{color:var(--gold-2)}

/* ---------- hero ---------- */
.rf-hero{position:relative;overflow:hidden;padding:52px 0 44px;
  background:
    radial-gradient(circle at 78% 12%, rgba(139,92,246,.30), transparent 46%),
    radial-gradient(circle at 14% 82%, rgba(232,184,75,.14), transparent 44%),
    linear-gradient(180deg,#160e33,var(--ink));
  text-align:center}
/* Star field is two repeating radial-gradients, so it costs no image request. */
.rf-stars{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 78% 14%, #fff, transparent),
    radial-gradient(1px 1px at 32% 68%, #fff, transparent),
    radial-gradient(1px 1px at 62% 44%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 88% 72%, #fff, transparent),
    radial-gradient(1px 1px at 46% 12%, #fff, transparent),
    radial-gradient(1px 1px at 22% 88%, #fff, transparent);
  animation:twinkle 5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.32}to{opacity:.6}}
@media (prefers-reduced-motion:reduce){.rf-stars{animation:none}}
.rf-hero__in{position:relative}
.rf-kicker{margin:0 0 6px;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);font-weight:700}
.rf-lead{max-width:620px;margin:0 auto 10px;color:#d9d1f5;font-size:1.02rem}
.rf-disc{max-width:620px;margin:0 auto;color:var(--muted);font-size:.83rem;font-style:italic}

/* ---------- buttons ---------- */
.rf-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.rf-cta--center{justify-content:center}
.rf-hero .rf-cta{justify-content:center}
.rf-btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 22px;border-radius:999px;font-weight:700;
  border:1px solid transparent;transition:transform .12s,box-shadow .15s,background .15s}
.rf-btn:hover{text-decoration:none;transform:translateY(-1px)}
.rf-btn:active{transform:translateY(0)}
.rf-btn--gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#2b1d00;
  box-shadow:0 6px 18px rgba(232,184,75,.26)}
.rf-btn--gold:hover{color:#2b1d00}
.rf-btn--ghost{background:transparent;color:var(--gold-2);border-color:var(--line-2)}
.rf-btn--ghost:hover{background:rgba(255,255,255,.05);color:var(--gold-2)}

/* ---------- sections ---------- */
.rf-sec{padding:46px 0;border-top:1px solid var(--line)}
.rf-sec--alt{background:var(--ink-2)}
.rf-sec--flat{padding:26px 0}
.rf-sub{color:var(--muted);margin:0 0 20px;max-width:640px}
.rf-center .rf-sub{margin-inline:auto}

/* ---------- zodiac selector ---------- */
.zs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:560px){.zs-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:820px){.zs-grid{grid-template-columns:repeat(6,1fr)}}
.zs-item{display:flex;flex-direction:column;align-items:center;gap:2px;
  min-height:96px;padding:12px 6px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  transition:border-color .15s,background .15s,transform .12s}
.zs-item:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-2px)}
.zs-item[aria-pressed="true"]{border-color:var(--gold);
  background:linear-gradient(180deg,rgba(232,184,75,.16),rgba(232,184,75,.05));
  box-shadow:0 0 0 1px var(--gold) inset}
.zs-sym{font-size:1.7rem;line-height:1;color:var(--gold-2)}
.zs-name{font-size:.86rem;font-weight:700}
.zs-date{font-size:.66rem;color:var(--muted);text-align:center;line-height:1.3}

/* ---------- period tabs (sticky, spec S34) ---------- */
.rf-tabs{position:sticky;top:52px;z-index:30;display:flex;gap:6px;padding:8px;
  margin:0 0 18px;border-radius:999px;background:rgba(20,13,43,.94);
  backdrop-filter:blur(8px);border:1px solid var(--line)}
.rf-tab{flex:1;min-height:44px;border:0;border-radius:999px;background:transparent;
  color:var(--muted);font-weight:700;font-size:.92rem;transition:color .15s,background .15s}
.rf-tab.is-on{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#2b1d00}

.hs-empty{color:var(--muted);text-align:center;padding:26px 0;font-style:italic}

/* ---------- horoscope panel ---------- */
.hs-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px;animation:fade .28s ease}
.hs-panel[hidden]{display:none}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hs-panel{animation:none}}
.hs-panel__head{display:flex;align-items:center;gap:14px;margin-bottom:16px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.hs-panel__sym{font-size:2.4rem;line-height:1;color:var(--gold-2)}
.hs-panel__h{margin:0;font-size:1.25rem}
.hs-panel__sub{margin:0;font-size:.8rem;color:var(--muted)}
.hs-field{margin-bottom:14px}
.hs-field__h{margin:0 0 4px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:700}
.hs-field p{margin:0;color:#ded7f7}
.hs-meta{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:14px 0 0;
  border-top:1px solid var(--line)}
.hs-meta li{flex:1 1 120px;background:var(--ink-2);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px}
.hs-meta span{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hs-meta b{font-size:1.05rem;color:var(--gold-2)}
.hs-stars{letter-spacing:.1em}

/* ---------- lucky card ---------- */
.lc-deck{display:flex;gap:12px;justify-content:center;margin:22px 0 12px;perspective:1000px}
.lc-card{width:clamp(88px,26vw,124px);aspect-ratio:2/3;border-radius:12px;padding:0;
  border:2px solid var(--gold-deep);background:linear-gradient(160deg,#2a1d55,#170f36);
  position:relative;transition:transform .2s,box-shadow .2s,border-color .2s}
.lc-card:hover:not(.is-out){transform:translateY(-8px);border-color:var(--gold);
  box-shadow:0 12px 28px rgba(139,92,246,.35)}
.lc-face{position:absolute;inset:7px;border-radius:8px;border:1px solid rgba(232,184,75,.42);
  background:
    radial-gradient(circle at 50% 50%, rgba(232,184,75,.20), transparent 62%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px)}
.lc-face::after{content:"\2726";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:1.8rem;color:var(--gold-2);opacity:.85}
.lc-card.is-picked{animation:flip .95s cubic-bezier(.3,.8,.3,1) forwards}
.lc-card.is-out{opacity:.28;transform:scale(.92);pointer-events:none}
@keyframes flip{
  0%{transform:translateY(0) rotateY(0)}
  45%{transform:translateY(-16px) rotateY(90deg)}
  100%{transform:translateY(-6px) rotateY(360deg);box-shadow:0 0 34px rgba(232,184,75,.55)}
}
@media (prefers-reduced-motion:reduce){
  .lc-card.is-picked{animation:none;box-shadow:0 0 24px rgba(232,184,75,.5)}
}
.lc-hint{text-align:center;color:var(--muted);font-size:.9rem;margin:0 0 2px}
.lc-micro{text-align:center;color:var(--muted);font-size:.74rem;opacity:.75;margin:0}

.lc-result{margin-top:20px;background:var(--panel);border:1px solid var(--gold-deep);
  border-radius:var(--radius);padding:22px 18px;text-align:center;animation:fade .4s ease}
.lc-result[hidden],.lc-offer[hidden]{display:none}
.lc-kicker{margin:0 0 2px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:700}
.lc-name{font-family:"Playfair Display",Georgia,serif;margin:0 0 2px;font-size:1.6rem;color:var(--gold-2)}
.lc-theme{margin:0 0 12px;font-size:.85rem;color:var(--muted);font-style:italic}
.lc-msg{margin:0 auto 16px;max-width:520px;color:#ded7f7}
.lc-dl{display:grid;gap:10px;margin:0;text-align:left}
@media (min-width:560px){.lc-dl{grid-template-columns:1fr 1fr}}
.lc-dl>div{background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:12px}
.lc-dl dt{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lc-dl dd{margin:2px 0 0;font-weight:700;color:var(--gold-2)}
.lc-offer{margin-top:16px;background:linear-gradient(160deg,rgba(139,92,246,.16),rgba(232,184,75,.07));
  border:1px solid var(--line-2);border-radius:var(--radius);padding:20px 18px;text-align:center}
.lc-offer__name{font-size:1.2rem;margin:0 0 4px}

/* ---------- accordion (all 12) ---------- */
.acc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:10px;overflow:hidden}
.acc__sum{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;
  list-style:none;min-height:56px}
.acc__sum::-webkit-details-marker{display:none}
.acc__sum::after{content:"+";margin-left:auto;color:var(--gold);font-size:1.4rem;line-height:1}
.acc[open] .acc__sum::after{content:"\2212"}
.acc__sym{font-size:1.5rem;color:var(--gold-2);line-height:1}
.acc__name{font-weight:700}
.acc__date{font-size:.72rem;color:var(--muted);margin-left:8px}
.acc__body{padding:0 16px 16px;border-top:1px solid var(--line)}
.acc-period{padding-top:14px}
.acc-period__h{margin:0 0 6px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:700}
.acc__body p{margin:0 0 8px;color:#ded7f7;font-size:.95rem}
.acc__body b{color:var(--gold-2);font-weight:700}
.acc__meta{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--muted)}

/* ---------- table ---------- */
.rf-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--radius)}
.rf-table{width:100%;border-collapse:collapse;min-width:340px}
.rf-table th,.rf-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);
  font-size:.92rem}
.rf-table thead th{background:var(--panel-2);color:var(--gold);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase}
.rf-table tbody th{font-weight:600;color:var(--text)}
.rf-table tbody tr:last-child th,.rf-table tbody tr:last-child td{border-bottom:0}

/* ---------- legal / footer ---------- */
.rf-legal{color:var(--muted);font-size:.8rem;margin:0}
.rf-footer{padding:24px 0 34px;border-top:1px solid var(--line);background:var(--ink-2)}
.rf-footer p{margin:0;color:var(--muted);font-size:.85rem;text-align:center}

/* ---------- float widgets (bottom-right) ---------- */
.rf-float{
  position:fixed;right:14px;bottom:14px;z-index:45;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  /* iOS home-indicator safe area */
  padding-bottom:env(safe-area-inset-bottom,0);
}
.rf-float__btn{
  display:block;padding:0;border:0;background:transparent;line-height:0;
  transition:transform .15s,filter .15s;
  -webkit-tap-highlight-color:transparent;
}
.rf-float__btn:hover{transform:translateY(-3px) scale(1.04);filter:brightness(1.06)}
.rf-float__btn:active{transform:translateY(0) scale(.98)}
.rf-float__btn img{width:100%;height:auto;display:block}

/* Register art is portrait, so width drives it and height follows. */
.rf-float__btn--reg{width:76px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
/* Support button is two layers: the orb spins, the character does not.
   Compositing them into one image (the first attempt) meant rotating the
   button rotated the person too, which looked broken. */
.rf-float__btn--cs{
  position:relative;width:68px;aspect-ratio:1;
  filter:drop-shadow(0 4px 12px rgba(139,92,246,.45));
}
.cs-orb{
  position:absolute;inset:0;
  background:url("../img/orb.webp") center/contain no-repeat;
  animation:orbSpin 9s linear infinite;
  will-change:transform;
}
.cs-figure{
  position:absolute;inset:0;width:100%;height:100%;
  /* above the spinning ring, and unaffected by its transform */
  z-index:1;
}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cs-orb{animation:none}}

.rf-float__btn--top{
  width:44px;height:44px;border-radius:50%;
  background:rgba(27,19,56,.92);border:1px solid var(--line-2);color:var(--gold-2);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .2s,transform .2s,background .15s;
}
.rf-float__btn--top svg{width:20px;height:20px}
.rf-float__btn--top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.rf-float__btn--top:hover{background:var(--panel-2)}

@media (max-width:400px){
  .rf-float{right:10px;bottom:10px;gap:6px}
  .rf-float__btn--reg{width:64px}
  .rf-float__btn--cs{width:58px}
  .rf-float__btn--top{width:40px;height:40px}
}

/* The sticky period tabs must clear the float column on narrow screens. */
@media (max-width:520px){
  .rf-tabs{margin-right:0}
}

@media (prefers-reduced-motion:reduce){
  .rf-float__btn,.rf-float__btn--top{transition:none}
}

/* ---------- language switcher ---------- */
.rf-lang{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  min-height:36px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);
  color:var(--gold-2);font-size:.85rem;font-weight:700;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.rf-lang:hover{background:rgba(255,255,255,.12);border-color:var(--gold);text-decoration:none}
@media (max-width:480px){
  .rf-nav{gap:10px;font-size:.82rem}
  .rf-lang{padding:0 9px;font-size:.78rem}
  .rf-brand img{height:26px}
}

/* ---------- Devanagari ----------
   Nepali needs a font with real Devanagari coverage — Inter has none, so the
   browser would fall back per-glyph and the page would look inconsistent.
   Line-height is raised because Devanagari matras sit above and below the
   baseline and clip at the Latin value. */
html[lang="ne"] body,
html[lang="ne"] .rf-lang{
  font-family:"Noto Sans Devanagari",Inter,system-ui,sans-serif;
  line-height:1.85;
}
html[lang="ne"] h1,
html[lang="ne"] h2,
html[lang="ne"] .lc-name{
  font-family:"Noto Sans Devanagari",Georgia,serif;
  line-height:1.45;
}
html[lang="ne"] .rf-kicker,
html[lang="ne"] .hs-field__h,
html[lang="ne"] .acc-period__h,
html[lang="ne"] .lc-kicker,
html[lang="ne"] .hs-meta span,
html[lang="ne"] .lc-dl dt,
html[lang="ne"] .rf-table thead th{
  /* uppercase + wide tracking is a Latin device; it mangles Devanagari */
  text-transform:none;letter-spacing:.02em;
}
html[lang="ne"] .zs-date{font-size:.62rem;line-height:1.5}
html[lang="ne"] .zs-item{min-height:104px}