/* ============================================================
   Aaj Ka Panna (/aaj-ka-panna) — liquid design: morphing blobs, animated waves, gradient glass cards,
   liquid-fill buttons, wave-filled poll bars. Loaded by app/views/daily/digest.php only.
   Animations use transform/opacity only and stop under prefers-reduced-motion.
   ============================================================ */
@keyframes pn-morph { 0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; } 33% { border-radius: 58% 42% 38% 62% / 52% 61% 39% 48%; } 66% { border-radius: 37% 63% 51% 49% / 60% 38% 62% 40%; } }
@keyframes pn-drift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(28px, -22px, 0) rotate(12deg) scale(1.08); } }
@keyframes pn-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-5deg); } }
@keyframes pn-wave-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pn-shine { from { background-position: 0 0; } to { background-position: 80px 0; } }
@keyframes pn-pop { 0% { opacity: 0; transform: translateY(8px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes pn-grow { from { width: 0; } to { width: var(--w, 0%); } }
@keyframes pn-spin { to { transform: rotate(360deg); } }

/* ---------- hero ---------- */
.pn-hero { position: relative; overflow: hidden; padding: 38px 0 92px; background: linear-gradient(135deg, #0a2342 0%, #1d3557 45%, #6b2fa0 100%); isolation: isolate; }
[data-theme="dark"] .pn-hero { background: linear-gradient(135deg, #060d1a 0%, #0f1117 55%, #1a0530 100%); }
[data-theme="sepia"] .pn-hero { background: linear-gradient(135deg, #3d1a06 0%, #5c2e10 55%, #7a4828 100%); }
[data-theme="ocean"] .pn-hero { background: linear-gradient(135deg, #020e1c 0%, #051e38 55%, #0a3060 100%); }
[data-theme="sage"] .pn-hero { background: linear-gradient(135deg, #0a1f0d 0%, #1a3a1e 55%, #2d5a32 100%); }
.pn-blob { position: absolute; z-index: -1; pointer-events: none; will-change: transform, border-radius; animation: pn-morph 14s ease-in-out infinite, pn-drift 18s ease-in-out infinite; }
.pn-blob-1 { width: 340px; height: 340px; left: -90px; top: -110px; background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.65), rgba(96,165,250,0) 70%); }
.pn-blob-2 { width: 420px; height: 420px; right: -120px; top: -150px; background: radial-gradient(circle at 60% 40%, rgba(236,72,153,.55), rgba(236,72,153,0) 70%); animation-duration: 17s, 22s; animation-delay: -4s, -6s; }
.pn-blob-3 { width: 300px; height: 300px; left: 38%; bottom: -150px; background: radial-gradient(circle at 50% 50%, rgba(250,204,21,.38), rgba(250,204,21,0) 70%); animation-duration: 12s, 16s; animation-delay: -2s, -9s; }
.pn-date { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; font-size: .85rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.pn-date .bi { color: #fda4af; animation: pn-float 3s ease-in-out infinite; }
.pn-title { margin: 14px 0 8px; font-weight: 800; font-size: clamp(2rem, 6vw, 3.2rem); letter-spacing: .5px; background: linear-gradient(90deg, #fff, #fde68a, #fbcfe8, #fff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: pn-shine-title 7s linear infinite; }
@keyframes pn-shine-title { to { background-position: 200% center; } }
.pn-sub { margin: 0 auto 18px; max-width: 640px; color: rgba(255,255,255,.82); font-size: 1.02rem; }
.pn-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pn-chips a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: .88rem; color: #fff; text-decoration: none; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(6px); transition: transform .2s, background .2s, box-shadow .2s; }
.pn-chips a:hover { transform: translateY(-3px); background: rgba(255,255,255,.24); box-shadow: 0 10px 22px -10px rgba(0,0,0,.6); }
.pn-wave { position: absolute; left: 0; bottom: -1px; width: 200%; height: 84px; z-index: 0; pointer-events: none; will-change: transform; }
.pn-wave path { fill: var(--body-bg, #fff); }
.pn-wave-1 { opacity: .45; animation: pn-wave-move 22s linear infinite; }
.pn-wave-2 { height: 64px; animation: pn-wave-move 14s linear infinite reverse; }

/* ---------- cards ---------- */
.pn-card { position: relative; overflow: hidden; border: 1px solid var(--border, #e2e8f0); border-radius: 26px !important; background: var(--card-bg, #fff); box-shadow: 0 14px 34px -22px rgba(15,23,42,.45); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; isolation: isolate; }
.pn-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--c), var(--c2)); z-index: 2; }
.pn-card:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -24px color-mix(in srgb, var(--c) 70%, #0f172a); }
.pn-drop { position: absolute; z-index: -1; right: -70px; top: -70px; width: 220px; height: 220px; background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%); animation: pn-morph 12s ease-in-out infinite, pn-drift 20s ease-in-out infinite; will-change: transform; }
.pn-card::after { content: ""; position: absolute; z-index: -1; left: -60px; bottom: -80px; width: 200px; height: 200px; background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--c2) 22%, transparent), transparent 70%); animation: pn-morph 15s ease-in-out infinite reverse; }
.pn-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px 8px; }
.pn-ico { flex: 0 0 auto; width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 17px; color: #fff; font-size: 1.5rem; background: linear-gradient(135deg, var(--c), var(--c2)); box-shadow: 0 12px 22px -10px var(--c); animation: pn-float 4s ease-in-out infinite; }
.pn-kicker { font-size: .74rem; font-weight: 700; letter-spacing: .3px; color: var(--text-muted, #64748b); }
.pn-h { font-size: 1.12rem; font-weight: 800; line-height: 1.25; color: var(--text, #0f172a); }
.pn-votes { margin-left: auto; padding: 4px 12px; border-radius: 999px; font-size: .74rem; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.pn-body { flex: 1 1 auto; padding: 10px 24px 24px; }
.pn-muted { color: var(--text-muted, #64748b); font-size: .9rem; }
.pn-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .86rem; font-weight: 700; color: var(--c); text-decoration: none; }
.pn-link .bi-arrow-right { transition: transform .2s; }
.pn-link:hover { text-decoration: underline; }
.pn-link:hover .bi-arrow-right { transform: translateX(4px); }
.pn-link-all { display: flex; margin-top: 14px; }

/* cartoon */
.pn-frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 20px; padding: 4px; background: linear-gradient(135deg, var(--c), var(--c2)); }
.pn-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 17px; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.pn-card:hover .pn-frame img { transform: scale(1.05); }
.pn-caption { margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; font-size: .92rem; font-weight: 600; color: var(--text, #0f172a); background: color-mix(in srgb, var(--c) 10%, transparent); }

/* quiz */
.pn-quiz-badge { display: inline-flex; align-items: baseline; gap: 8px; align-self: flex-start; margin: 4px 0 12px; padding: 10px 20px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, var(--c), var(--c2)); box-shadow: 0 14px 24px -14px var(--c); }
.pn-quiz-num { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.pn-quiz-lbl { font-size: .85rem; font-weight: 700; opacity: .9; }
.pn-quiz-title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; line-height: 1.4; color: var(--text, #0f172a); }

.pn-steps { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pn-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; font-weight: 700; font-size: .93rem; color: var(--text, #0f172a); background: color-mix(in srgb, var(--c) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--c) 35%, transparent); transition: transform .2s; }
.pn-steps li:hover { transform: translateX(4px); }
.pn-steps li span { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: .8rem; background: linear-gradient(135deg, var(--c), var(--c2)); }

/* liquid-fill button */
.pn-btn { white-space: nowrap; position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; padding: 11px 26px; border: 0; border-radius: 999px; font-weight: 800; font-size: .95rem; color: #fff; text-decoration: none; cursor: pointer; background: linear-gradient(135deg, var(--c, #6366f1), var(--c2, #a855f7)); box-shadow: 0 14px 24px -14px var(--c, #6366f1); transition: transform .2s, box-shadow .2s; }
.pn-btn::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 105%; width: 240%; aspect-ratio: 1; background: rgba(255,255,255,.28); transform: translateX(-50%); transition: top .55s cubic-bezier(.2,.8,.2,1); animation: pn-morph 6s ease-in-out infinite; }
.pn-btn:hover, .pn-btn:focus-visible { color: #fff; transform: translateY(-2px); outline: none; }
.pn-btn:hover::before, .pn-btn:focus-visible::before { top: -70%; }
.pn-btn:disabled { opacity: .7; cursor: default; }
.pn-btn-light { --c: #fff; --c2: #fef3c7; color: #0f766e; background: #fff; box-shadow: 0 14px 26px -14px rgba(0,0,0,.5); }
.pn-btn-light::before { background: rgba(20,184,166,.2); }
.pn-btn-light:hover { color: #0f766e; }

/* poll */
.pn-q { margin: 0 0 14px; font-size: 1.04rem; font-weight: 700; line-height: 1.55; color: var(--text, #0f172a); }
.pn-opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pn-opt { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px; border-radius: 16px; border: 2px solid var(--border, #e2e8f0); background: color-mix(in srgb, var(--c) 4%, transparent); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.pn-opt:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); transform: translateX(3px); }
.pn-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pn-opt-dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--text-muted, #94a3b8); position: relative; transition: border-color .2s, background .2s; }
.pn-opt-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.pn-opt-txt { font-weight: 600; font-size: .95rem; color: var(--text, #0f172a); }
.pn-opt:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.pn-opt:has(input:checked) .pn-opt-dot { border-color: var(--c); background: var(--c); }
.pn-opt:has(input:checked) .pn-opt-dot::after { transform: scale(1); }
.pn-opt:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--c) 40%, transparent); }
.pn-msg { margin: -2px 0 12px; padding: 8px 12px; border-radius: 12px; font-size: .85rem; font-weight: 600; color: #b91c1c; background: rgba(220,38,38,.1); }
.pn-msg[hidden] { display: none; }
.pn-bar { margin-bottom: 14px; }
.pn-bar-row { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: .92rem; font-weight: 600; color: var(--text, #0f172a); }
.pn-bar-row b { color: var(--c); }
.pn-track { height: 14px; border-radius: 999px; overflow: hidden; background: rgba(100,116,139,.16); }
.pn-fill { position: relative; width: var(--w, 0%); height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c), var(--c2)); animation: pn-grow 1.1s cubic-bezier(.2,.8,.2,1) both; overflow: hidden; }
.pn-fill::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.28) 0 14px, transparent 14px 40px); background-size: 80px 100%; animation: pn-shine 1.6s linear infinite; }
.pn-bar-top .pn-fill { background: linear-gradient(90deg, #22c55e, #14b8a6); }
.pn-bar-top .pn-bar-row b { color: #16a34a; }
.pn-done { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; font-size: .88rem; font-weight: 700; color: #16a34a; }
.pn-voted { --c: #22c55e; --c2: #14b8a6; }

/* joke + paheli */
.pn-bubble { margin-bottom: 14px; padding: 16px 18px; border-radius: 22px 22px 22px 6px; background: color-mix(in srgb, var(--c) 9%, transparent); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); }
.pn-bubble-alt { border-radius: 22px 22px 6px 22px; background: color-mix(in srgb, var(--c2) 9%, transparent); border-color: color-mix(in srgb, var(--c2) 24%, transparent); }
.pn-tag { margin: 0 0 6px; font-size: .8rem; font-weight: 800; color: var(--c); }
.pn-bubble-alt .pn-tag { color: var(--c2); }
.pn-text { margin: 0 0 10px; font-size: .98rem; line-height: 1.65; font-weight: 600; color: var(--text, #0f172a); }
.pn-reveal { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 6px 14px; border-radius: 999px; font-size: .84rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--c), var(--c2)); cursor: pointer; user-select: none; box-shadow: 0 10px 18px -12px var(--c); transition: transform .2s; }
.pn-reveal:hover, .pn-reveal:focus-visible { transform: translateY(-2px); outline: none; }
.pn-reveal .bi { transition: transform .2s; }
.pn-reveal:hover .bi { transform: translateY(2px); }
.pn-answer { margin: 6px 0 8px; padding: 10px 14px; border-radius: 14px; font-size: .95rem; font-weight: 700; line-height: 1.6; color: var(--text, #0f172a); background: color-mix(in srgb, var(--c) 14%, transparent); animation: pn-pop .45s cubic-bezier(.2,.8,.2,1) both; }

/* checkup banner */
.pn-checkup { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: 28px; color: #fff; background: linear-gradient(120deg, #0f766e, #0ea5e9, #6366f1, #0f766e); background-size: 300% 300%; animation: pn-grad 12s ease-in-out infinite; box-shadow: 0 22px 44px -26px #0ea5e9; }
@keyframes pn-grad { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.pn-blob-c1 { width: 240px; height: 240px; right: -70px; top: -90px; background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.4), rgba(255,255,255,0) 70%); }
.pn-blob-c2 { width: 200px; height: 200px; left: 25%; bottom: -110px; background: radial-gradient(circle at 50% 50%, rgba(253,224,71,.4), rgba(253,224,71,0) 70%); animation-delay: -5s, -8s; }
.pn-checkup-ico { flex: 0 0 auto; width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; border-radius: 20px; font-size: 1.8rem; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35); animation: pn-float 3.6s ease-in-out infinite; }
.pn-checkup-ico .bi { animation: pn-beat 1.4s ease-in-out infinite; }
@keyframes pn-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.14); } }
.pn-checkup-txt { flex: 1 1 auto; min-width: 0; }
.pn-checkup-tag { display: inline-block; margin-bottom: 6px; padding: 3px 12px; border-radius: 999px; font-size: .74rem; font-weight: 800; background: rgba(255,255,255,.2); }
.pn-checkup-h { margin: 0 0 4px; font-size: 1.25rem; font-weight: 800; color: #fff; }
.pn-checkup-txt p { margin: 0; font-size: .92rem; opacity: .92; }
@media (min-width: 768px) { .pn-checkup { flex-direction: row; align-items: center; } }

.pn-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; font-size: .9rem; font-weight: 600; color: var(--text-muted, #64748b); }
.pn-foot .bi { display: inline-block; animation: pn-spin 6s linear infinite; }

/* phones: the deck (mobile-app.js) shows cards one by one — keep them tidy */
@media (max-width: 767.98px) {
  .pn-hero { padding: 26px 0 78px; }
  .pn-wave { height: 60px; }
  .pn-head { padding: 18px 18px 6px; }
  .pn-body { padding: 8px 18px 20px; }
  .pn-card:hover { transform: none; }
  .pn-checkup { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pn-blob, .pn-drop, .pn-card::after, .pn-wave-1, .pn-wave-2, .pn-ico, .pn-title, .pn-date .bi, .pn-fill, .pn-fill::after, .pn-btn::before, .pn-checkup, .pn-checkup-ico, .pn-checkup-ico .bi, .pn-foot .bi, .pn-answer { animation: none !important; }
  .pn-card, .pn-btn, .pn-chips a, .pn-opt { transition: none; }
}
@media print { .pn-hero { background: none; color: #000; padding: 10px 0; } .pn-blob, .pn-wave, .pn-drop, .pn-chips { display: none; } .pn-title { -webkit-text-fill-color: #000; color: #000; background: none; } .pn-card { box-shadow: none; } }
/* the banner button never shrinks or clips its label (long labels, e.g. Money Rules) */
.pn-checkup > .pn-btn, .pn-checkup > div > .pn-btn { flex: 0 0 auto; }
@media (max-width: 767px) { .pn-checkup > .pn-btn { align-self: flex-start; } }

/* Money Journey banner (Aaj Ka Panna) */

/* One colour per banner bar: Checkup = teal/sky/indigo (default), Game = green, Money Journey = violet/pink/amber, Money Rules = orange/red/magenta */
.pn-checkup.pn-c-game { background: linear-gradient(120deg, #15803d, #16a34a, #0d9488, #0891b2, #15803d); background-size: 300% 300%; box-shadow: 0 22px 44px -26px #16a34a; }
.pn-checkup.pn-c-game .pn-blob-c2 { background: radial-gradient(circle at 50% 50%, rgba(190,242,100,.45), rgba(190,242,100,0) 70%); }
.pn-checkup.pn-c-game .pn-btn-light { color: #15803d; } 
.pn-checkup.pn-c-game .pn-btn-light::before { background: rgba(22,163,74,.2); } 
.pn-checkup.pn-c-game .pn-btn-light:hover { color: #15803d; } 

/* ---- "Did you know?" card (config/did-you-know.php) ---- */
.pn-fact .pn-head { flex-wrap: wrap; }
.pn-fact-tag { margin-left: auto; padding: .2rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); }
.pn-fact-text { font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.7; font-weight: 500; margin: .25rem 0 1rem; }
.pn-fact-in { animation: pn-fact-in .45s cubic-bezier(.2,.8,.2,1); }
@keyframes pn-fact-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pn-fact-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.pn-btn-sm { padding: .45rem 1rem; font-size: .88rem; }
.pn-fact-count { display: block; margin-top: .6rem; opacity: .6; }
@media (prefers-reduced-motion: reduce) { .pn-fact-in { animation: none; } }