/* ======================================
   आजचे पंचांग —  CSS (सुधारित आवृत्ती)  ====================================== */

/* ======================================
   १. मूळ चौकट (Wrapper) — संपूर्ण पंचांगाची बाहेरील रचना   ====================================== */

.pp-wrap{
  max-width:700px;
  margin:24px auto;
  font-family:'Hind',sans-serif;
  background:#FBF3E7;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 36px rgba(15,61,62,0.18);
  border:1px solid #e6d8c2;
}

/* ======================================
   २. हेडर विभाग — शीर्षक, तारीख, ऋतू
   (दुरुस्ती: font-weight ला "px" युनिट नसतो — फक्त संख्या/शब्द चालतो;
   "300px" ब्राउझर शांतपणे दुर्लक्षित करत होता, आता "300" बरोबर लिहिलं आहे.)   ====================================== */

.pp-head{
  background:linear-gradient(135deg, #6d0005 0%, #a30008 35%, #e40910 100%);
  padding:28px 26px 24px;
  text-align:center;
}
.pp-eyebrow{
  font-family:Georgia,serif;
  font-style:italic;
  font-size:16px;
  letter-spacing:2px;
  color:#fff;
  padding-bottom:12px;
  text-transform:uppercase;
}
.pp-title{
  font-family:'Tiro Devanagari Marathi',serif;
  font-size:34px;
  font-weight:500;             
  color:#F5E6C8;
  margin-top:6px;
}
.pp-date-row{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.pp-date-chip{
  font-family:'Hind',sans-serif;
  font-weight:700;
  font-size:16px;
  color:#0F3D3E;
  background:#E8B339;
  border-radius:6px;
  padding:6px 16px;
}
.pp-date-sub{
  font-family:Georgia,serif;
  font-size:16px;
  color:#cfe3e0;
  margin-top:10px;
}

/* ======================================
   ३. सेक्शन-सामायिक शैली — प्रत्येक विभागाचं लेबल - (हे कुठल्याही एका "कार्ड"चं नाही — तीनही मुख्य विभागांच्या (सूर्य-चंद्र,
   पाच अंगे, विशेष वेळा) शीर्षक-पट्टीसाठी समान वापरलं जातं, त्यामुळे इथे एकदाच.)   ====================================== */

.pp-section{
  padding:20px 24px 8px;
}
.pp-sec-label{
  font-family:Georgia,serif;
  font-style:italic;
  font-size:18px;
  font-weight:bold;
  letter-spacing:1.5px;
  color:#a9683a;
  text-transform:uppercase;
  margin-bottom:12px;
  border-bottom:1px dashed #e6d2ad;
  padding-bottom:6px;
}

/* ======================================
   ४. सामायिक उप-तपशील शैली (Subnote)
   मुख्य मूल्यानंतर कंसातील उप-तपशील (उदा. "(प्रवेश १५ वाजून ११ मिनिटांनंतर)")
   खालच्या ओळीत लहान फॉन्टमध्ये दाखवण्यासाठी — जिथे जिथे असा उप-तपशील
   येईल तिथे ही एकच क्लास वापरायची: <span class="pp-subnote">...</span>   ====================================== */

.pp-subnote{
  display:block;
  font-size:0.74em;
  font-weight:400;
  opacity:.85;
  margin-top:2px;
}

/* ======================================
   ५. सूर्य व चंद्र विभाग — सामायिक मांडणी (Grid)
   (हे दोन्ही कार्डांना धरून ठेवणारा बाहेरील सांगाडा आहे — एका कार्डापुरतं
   मर्यादित नाही, म्हणून वेगळं काढता येत नाही.)   ====================================== */

.pp-sky-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:560px){
  .pp-sky-grid{grid-template-columns:1fr;}  /* मोबाईलवर एकाखाली एक */
}

/* ======================================
   ६. सूर्य कार्ड (संपूर्ण व स्वतंत्र कोड)
   दुरुस्ती: आधी सूर्य-चंद्र दोघांसाठी समान (पांढरा रंग) शैली शेअर होत होती,
   त्यामुळे फिकट रंगाच्या सूर्य कार्डवर पांढरा मजकूर दिसत नव्हता.
   आता इथलं सगळं स्वतः सूर्य कार्डापुरतंच मर्यादित आहे — मजकूर काळ्या रंगात.   ====================================== */

.pp-sun-card{
  position:relative;
  border-radius:14px;
  padding:18px 16px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,0.16);
  transition:transform .3s ease, box-shadow .3s ease;
  background:linear-gradient(160deg,#FFE08A 0%,#FFA94D 38%,#FF6B6B 70%,#E0507A 100%);
}
.pp-sun-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,0.24);
}
.pp-sun-card .rays{
  position:absolute; top:-60px; right:-60px;
  width:200px; height:200px; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,0.32) 0deg 4deg,transparent 4deg 18deg);
}
.pp-sun-card .orb{
  position:absolute; top:-26px; right:-26px;
  width:90px; height:90px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff7d6,#FFD56B 55%,#FF9F45 100%);
  box-shadow:0 0 28px 6px rgba(255,200,80,0.55);
}
.pp-sun-card .pp-sky-body{position:relative; z-index:2;}
.pp-sun-card .pp-sky-label{
  font-family:'Hind',sans-serif;   /* दुरुस्ती: Georgia मध्ये देवनागरी ग्लिफ नाहीत */
  font-style:italic; font-size:18px; color:#000;
  letter-spacing:1px; text-transform:uppercase;
}
.pp-sun-card .pp-sky-row{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px; flex-wrap:wrap; gap:6px;
}
.pp-sun-card .pp-sky-pt{text-align:center; flex:1; min-width:70px;}
.pp-sun-card .pp-sky-pt .e{font-size:18px;}
.pp-sun-card .pp-sky-pt .t{font-family:'Hind',sans-serif; font-weight:700; font-size:16px; color:#000; margin-top:2px;}
.pp-sun-card .pp-sky-pt .l{font-family:'Hind',sans-serif; font-size:16px; color:#000;}
.pp-sun-card .pp-sky-rashi{
  margin-top:10px; text-align:center; font-family:'Hind',sans-serif; font-size:16px; color:#000;
  background:rgba(255,255,255,0.45); border-radius:6px; padding:5px 10px;
  backdrop-filter:blur(2px);
}
.pp-sun-card .pp-sky-rashi b{font-family:'Hind',sans-serif; font-weight:700; color:#000;}


/* ======================================
   ७. चंद्र कार्ड (संपूर्ण व स्वतंत्र कोड)
   दुरुस्ती: "चंद्र" शब्द नीट न दिसण्याचं कारण होतं — लेबलला Georgia फॉन्ट
   दिलं होतं, आणि Georgia मध्ये देवनागरी अक्षरांचे ग्लिफच नाहीत; त्यामुळे
   ब्राउझर परत एका वेगळ्या, विसंगत फॉन्टवर अडकत होता. आता Hind वापरलं आहे.   ====================================== */

.pp-moon-card{
  position:relative;
  border-radius:14px;
  padding:18px 16px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,0.16);
  transition:transform .3s ease, box-shadow .3s ease;
  background:linear-gradient(160deg,#0B1D3A 0%,#16264F 45%,#2B1A4A 100%);
  color:#EAF0FF;
}
.pp-moon-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,0.24);
}
.pp-moon-card .stars{
  position:absolute; inset:0; opacity:.9;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff 90%, transparent),
    radial-gradient(1.2px 1.2px at 28% 64%, #fff 90%, transparent),
    radial-gradient(2px 2px at 42% 18%, #fff 90%, transparent),
    radial-gradient(1.4px 1.4px at 58% 48%, #fff 90%, transparent),
    radial-gradient(1.8px 1.8px at 70% 75%, #fff 90%, transparent),
    radial-gradient(1.3px 1.3px at 82% 30%, #fff 90%, transparent),
    radial-gradient(2px 2px at 90% 60%, #fff 90%, transparent),
    radial-gradient(1.2px 1.2px at 18% 85%, #fff 90%, transparent),
    radial-gradient(1.6px 1.6px at 50% 90%, #fff 90%, transparent),
    radial-gradient(1.3px 1.3px at 65% 12%, #fff 90%, transparent);
}
.pp-moon-card .orb{
  position:absolute; top:-22px; right:-22px;
  width:78px; height:78px; border-radius:50%;
  background:radial-gradient(circle at 38% 38%,#FDF6E3,#E9DDB6 60%,#cfc196 100%);
  box-shadow:0 0 26px 6px rgba(230,225,200,0.35);
}
.pp-moon-card .pp-sky-body{position:relative; z-index:2;}
.pp-moon-card .pp-sky-label{
  font-family:'Hind',sans-serif;   /* दुरुस्ती: Georgia → Hind */
  font-style:italic; font-size:18px; color:#fff;
  letter-spacing:1px; text-transform:uppercase;
}
.pp-moon-card .pp-sky-row{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px; flex-wrap:wrap; gap:6px;
}
.pp-moon-card .pp-sky-pt{text-align:center; flex:1; min-width:70px;}
.pp-moon-card .pp-sky-pt .e{font-size:18px;}
.pp-moon-card .pp-sky-pt .t{font-family:'Hind',sans-serif; font-weight:700; font-size:16px; color:#fff; margin-top:2px;}
.pp-moon-card .pp-sky-pt .l{font-family:'Hind',sans-serif; font-size:16px; color:#fff;}
.pp-moon-card .pp-sky-rashi{
  margin-top:10px; text-align:center; font-family:'Hind',sans-serif; font-size:16px; color:#fff;
  background:rgba(255,255,255,0.22); border-radius:6px; padding:5px 10px;
  backdrop-filter:blur(2px);
}
.pp-moon-card .pp-sky-rashi b{font-family:'Hind',sans-serif; font-weight:700; color:#fff;}


/* ======================================
   ८. पाच अंगे विभाग — सामायिक मांडणी (Grid + तळटीप)   ====================================== */

.pp-limbs4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
@media (max-width:480px){
  .pp-limbs4{grid-template-columns:repeat(2,1fr);}  /* मोबाईलवर २x२ */
}
.pp-limbs-note{
  font-family:Georgia,serif;
  font-style:italic;
  font-size:16px;
  color:#9a9488;
  text-align:center;
  margin-top:8px;
}

/* ======================================
   ९. तिथी कार्ड (संपूर्ण व स्वतंत्र कोड)
   दुरुस्ती: आकडा क्रमांक ("१ ·") काढला; आता इतर चार कार्डांप्रमाणेच
   फक्त लेबल (तिथी) + मूल्य अशी रचना.   ====================================== */

.pp-tithi{
  background:#D9772E;
  border-radius:12px;
  padding:14px 16px;
  text-align:center;
  color:#fff;
  margin-bottom:10px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pp-tithi:hover{transform:scale(1.02);}
.pp-tithi .nm{
  font-family:Georgia,serif; font-style:italic; font-size:16px;
  letter-spacing:.5px; opacity:.9;
}
.pp-tithi .vv{font-family:'Hind',sans-serif; font-weight:700; font-size:17px; margin-top:4px;}

/* ======================================
   १०. वार कार्ड (संपूर्ण व स्वतंत्र कोड)
   दुरुस्ती: आकडा क्रमांक ("२") काढला.   ====================================== */

.pp-limb.pp-l2{
  position:relative; text-align:center; border-radius:10px;
  padding:12px 6px 10px; color:#fff;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  cursor:default;
  background:#0F3D3E;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:78px;
}
.pp-limb.pp-l2:hover{
  transform:translateY(-5px) scale(1.06);
  box-shadow:0 10px 18px rgba(0,0,0,0.25);
}
.pp-limb.pp-l2 .nm{font-family:Georgia,serif; font-style:italic; font-size:16px; letter-spacing:.5px; opacity:.9;}
.pp-limb.pp-l2 .vv{font-family:'Hind',sans-serif; font-weight:700; font-size:16px; margin-top:6px; line-height:1.8;}

/* ======================================
   ११. नक्षत्र कार्ड (संपूर्ण व स्वतंत्र कोड)
   दुरुस्ती: आकडा क्रमांक ("३") काढला.   ====================================== */

.pp-limb.pp-l3{
  position:relative; text-align:center; border-radius:10px;
  padding:12px 6px 10px; color:#fff;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  cursor:default;
  background:#8C2F39;
}
.pp-limb.pp-l3:hover{
  transform:translateY(-5px) scale(1.06);
  box-shadow:0 10px 18px rgba(0,0,0,0.25);
}
.pp-limb.pp-l3 .nm{font-family:Georgia,serif; font-style:italic; font-size:16px; letter-spacing:.5px; opacity:.9;}
.pp-limb.pp-l3 .vv{font-family:'Hind',sans-serif; font-weight:700; font-size:16px; margin-top:6px; line-height:1.8;}


/* ======================================
   १२. योग कार्ड (संपूर्ण व स्वतंत्र कोड)
   दुरुस्ती: आकडा क्रमांक ("४") काढला.   ====================================== */

.pp-limb.pp-l4{
  position:relative; text-align:center; border-radius:10px;
  padding:12px 6px 10px; color:#fff;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  cursor:default;
  background:#2E6B5E;
}
.pp-limb.pp-l4:hover{
  transform:translateY(-5px) scale(1.06);
  box-shadow:0 10px 18px rgba(0,0,0,0.25);
}
.pp-limb.pp-l4 .nm{font-family:Georgia,serif; font-style:italic; font-size:16px; letter-spacing:.5px; opacity:.9;}
.pp-limb.pp-l4 .vv{font-family:'Hind',sans-serif; font-weight:700; font-size:16px; margin-top:6px; line-height:1.8;}

/* ======================================
   १३. करण कार्ड (संपूर्ण व स्वतंत्र कोड)
   दुरुस्ती: आकडा क्रमांक ("५") काढला.   ====================================== */

.pp-limb.pp-l5{
  position:relative; text-align:center; border-radius:10px;
  padding:12px 6px 10px; color:#fff;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  cursor:default;
  background:#B08B2E;
}
.pp-limb.pp-l5:hover{
  transform:translateY(-5px) scale(1.06);
  box-shadow:0 10px 18px rgba(0,0,0,0.25);
}
.pp-limb.pp-l5 .nm{font-family:Georgia,serif; font-style:italic; font-size:16px; letter-spacing:.5px; opacity:.9;}
.pp-limb.pp-l5 .vv{font-family:'Hind',sans-serif; font-weight:700; font-size:16px; margin-top:6px; line-height:1.8;}

/* ======================================
   १४. उप-तपशील ओळ — तिथी, नक्षत्र, योग, करण साठी
   (मुख्य मूल्याखाली लहान अक्षरात कंसातील माहिती)  ====================================== */

.pp-tithi .sub,
.pp-limb .sub{
  display:block;
  font-family:'Hind',sans-serif;
  font-weight:400;
  font-size:13px;
  opacity:.85;
  margin-top:4px;
  line-height:1.3;
}

/* ======================================
   १५. विशेष वेळा विभाग — सामायिक मांडणी (Grid)   ====================================== */

.pp-time-row3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:6px;
}
@media (max-width:480px){
  .pp-time-row3{grid-template-columns:1fr;}  /* मोबाईलवर एकाखाली एक */
}

/* ======================================
   १६. अमृत काळ कार्ड (संपूर्ण व स्वतंत्र कोड)  ====================================== */

.pp-time-card.amrut{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.pp-time-card.amrut:hover{
  transform:translateY(-5px) scale(1.04);
  box-shadow:0 12px 22px rgba(0,0,0,0.16);
}
.pp-time-card.amrut .hd{height:6px; background:linear-gradient(90deg,#2E6B5E,#5FAE9A);}
.pp-time-card.amrut .bd{padding:14px 10px 16px; text-align:center;}
.pp-time-card.amrut .ico{font-size:20px;}
.pp-time-card.amrut .nm{font-family:'Hind',sans-serif; font-weight:600; font-size:18px; color:#0F3D3E; margin-top:6px;}
.pp-time-card.amrut .rng{font-family:Georgia,serif; font-size:12px; color:#7a6a4f; margin-top:6px; line-height:1.45;}

/* ======================================
   १६. वर्ज्य काळ कार्ड (संपूर्ण व स्वतंत्र कोड)  ====================================== */

.pp-time-card.varjya{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.pp-time-card.varjya:hover{
  transform:translateY(-5px) scale(1.04);
  box-shadow:0 12px 22px rgba(0,0,0,0.16);
}
.pp-time-card.varjya .hd{height:6px; background:linear-gradient(90deg,#8C2F39,#C45463);}
.pp-time-card.varjya .bd{padding:14px 10px 16px; text-align:center;}
.pp-time-card.varjya .ico{font-size:20px;}
.pp-time-card.varjya .nm{font-family:'Hind',sans-serif; font-weight:600; font-size:18px; color:#0F3D3E; margin-top:6px;}
.pp-time-card.varjya .rng{font-family:Georgia,serif; font-size:12px; color:#7a6a4f; margin-top:6px; line-height:1.45;}

/* ======================================
   १७. राहू काळ कार्ड (संपूर्ण व स्वतंत्र कोड)   ====================================== */

.pp-time-card.rahu{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.pp-time-card.rahu:hover{
  transform:translateY(-5px) scale(1.04);
  box-shadow:0 12px 22px rgba(0,0,0,0.16);
}
.pp-time-card.rahu .hd{height:6px; background:linear-gradient(90deg,#B08B2E,#E0B854);}
.pp-time-card.rahu .bd{padding:14px 10px 16px; text-align:center;}
.pp-time-card.rahu .ico{font-size:20px;}
.pp-time-card.rahu .nm{font-family:'Hind',sans-serif; font-weight:600; font-size:18px; color:#0F3D3E; margin-top:6px;}
.pp-time-card.rahu .rng{font-family:Georgia,serif; font-size:12px; color:#7a6a4f; margin-top:6px; line-height:1.45;}

/* ======================================
   १८. फूटर विभाग   ====================================== */

.pp-foot{
  background:#0F3D3E;
  padding:18px 22px;
  text-align:center;
  margin-top:6px;
}
.pp-foot .tn{
  font-family:Georgia,serif;
  font-style:italic;
  font-size:18px;
  color:#9fc6c0;
  letter-spacing:.4px;
}