/* Divine Karma - enhanced UI */
:root{
  --hindu:#f47b20;
  --muslim:#2e8b57;
  --sikh:#1e90ff;
  --christian:#3b82f6;
  --jain:#d4af37;
  --neutral: linear-gradient(90deg,#ff7e5f,#feb47b);
  --card-radius:16px;
}
.dk-container{max-width:720px;margin:14px auto;padding:16px;font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
.dk-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dk-date{font-size:13px;color:#555}
.dk-gradient-title{font-size:22px;margin:0;background:var(--neutral);-webkit-background-clip:text;background-clip:text;color:transparent}
.dk-search-form{display:flex;gap:8px;flex-wrap:wrap}
.dk-input{flex:1;padding:12px;border-radius:10px;border:1px solid #e5e7eb;box-shadow:0 2px 6px rgba(0,0,0,0.04);font-size:16px}
.dk-button{padding:10px 16px;border-radius:10px;border:none;background:linear-gradient(90deg,#6ee7b7,#3b82f6);color:#fff;font-weight:600;cursor:pointer;transition:transform .18s ease}
.dk-button:active{transform:scale(.98)}
.dk-quote-container{margin:10px 0;overflow:hidden}
.dk-animated-quote{display:inline-block;padding:6px 0;font-style:italic;opacity:.9}
.dk-left-to-right{animation:slideLR 12s linear infinite}
.dk-right-to-left{animation:slideRL 12s linear infinite}
@keyframes slideLR{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}}
@keyframes slideRL{0%{transform:translateX(100%)}50%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* Result card */
.dk-result-container{padding:12px}
.dk-result-card{border-radius:var(--card-radius);padding:18px;box-shadow:0 6px 24px rgba(2,6,23,0.06);position:relative;overflow:hidden}
.dk-result-card h2{margin:0 0 8px 0;font-size:20px;letter-spacing:0.4px}
.dk-score-section{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dk-score-value{font-size:36px;font-weight:800}
.dk-score-title{font-size:14px;color:#444}

/* religion color accents */
.dk-religion-hindu .dk-result-card{border-left:8px solid var(--hindu)}
.dk-religion-muslim .dk-result-card{border-left:8px solid var(--muslim)}
.dk-religion-sikh .dk-result-card{border-left:8px solid var(--sikh)}
.dk-religion-christian .dk-result-card{border-left:8px solid var(--christian)}
.dk-religion-jain .dk-result-card{border-left:8px solid var(--jain)}
.dk-religion-universal .dk-result-card{border-left:8px solid #888}

/* tips animation */
.dk-tip-item{padding:10px;border-radius:8px;margin:8px 0;background:#fff;box-shadow:0 4px 12px rgba(11,15,36,0.03);transition:transform .35s ease,opacity .35s ease}
.dk-tip-animated-item{animation:popIn .5s ease both}
@keyframes popIn{0%{transform:translateY(6px) scale(.98);opacity:0}100%{transform:none;opacity:1}}

/* share button */
.dk-share-button{margin-top:12px;padding:10px 12px;border-radius:10px;border:none;background:#111;color:#fff;cursor:pointer}
.dk-share-button[disabled]{opacity:.5;cursor:not-allowed}

/* responsive */
@media(max-width:420px){
  .dk-container{padding:10px}
  .dk-score-value{font-size:30px}
}

/* religion backgrounds */
.dk-religion-hindu .dk-result-card{background-image:url('../images/hindu.svg');background-size:cover;background-position:center;padding:28px;color:#3b2b10}
.dk-religion-muslim .dk-result-card{background-image:url('../images/muslim.svg');background-size:cover;background-position:center;padding:28px;color:#1b382a}
.dk-religion-sikh .dk-result-card{background-image:url('../images/sikh.svg');background-size:cover;background-position:center;padding:28px;color:#08306b}
.dk-religion-christian .dk-result-card{background-image:url('../images/christian.svg');background-size:cover;background-position:center;padding:28px;color:#09214a}
.dk-religion-jain .dk-result-card{background-image:url('../images/jain.svg');background-size:cover;background-position:center;padding:28px;color:#6b4b03}
.dk-religion-universal .dk-result-card{background-image:url('../images/universal.svg');background-size:cover;background-position:center;padding:28px;color:#222}

/* micro interactions: heading word resize and sliding */
.dk-gradient-title span.word-animate{display:inline-block;transition:transform .35s ease,font-size .35s ease}
.dk-gradient-title span.word-animate:hover{transform:translateY(-6px) scale(1.06);font-size:1.06em}
.dk-category{display:inline-block;padding:6px 10px;border-radius:999px;animation:floatX 4s ease-in-out infinite}
@keyframes floatX{0%{transform:translateX(-4px)}50%{transform:translateX(4px)}100%{transform:translateX(-4px)}}

/* result image canvas helper hidden */
#dk-canvas-export{display:none}