/* Karmakaryam deity presentation polish — 2026-08-20
 * Final visual layer for devotional artwork. Identity is preserved by avoiding
 * aggressive crops, generated-looking saturation and oversized sharpening.
 */

.kk-deity-artwork{
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 34%,rgba(229,195,119,.1),transparent 56%),
    linear-gradient(180deg,#110e0a,#070605)!important;
  border-color:rgba(222,190,118,.2)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.38),inset 0 1px rgba(255,246,220,.03)!important;
}
.kk-deity-artwork:after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,240,199,.04),inset 0 -30px 52px rgba(0,0,0,.1);
}
.kk-deity-artwork img{
  image-rendering:auto!important;
  backface-visibility:hidden;
  filter:contrast(1.01) saturate(.98) brightness(.995)!important;
  transition:transform .28s ease,filter .28s ease;
}
.kk-deity-artwork[data-hq-source="public-domain-museum"] img{
  filter:contrast(1.015) saturate(.965) brightness(.995)!important;
}
.kk-deity-art-fallback{
  font-size:9px!important;
  font-weight:600!important;
  letter-spacing:.025em!important;
  color:#b5a487!important;
}
.kk-deity-art-fallback-neutral{
  font-family:"Nirmala UI","Noto Serif Devanagari",Georgia,serif!important;
  font-size:30px!important;
  font-weight:500!important;
  color:#d6b15f!important;
}

/* Deity chooser: stronger visual hierarchy, quieter copy, no face-cropping. */
.kk-deity-grid{gap:14px!important}
.kk-deity-card{
  min-height:278px!important;
  padding:11px 11px 13px!important;
  gap:11px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006))!important;
  box-shadow:0 10px 30px rgba(0,0,0,.2)!important;
}
.kk-deity-card:focus-visible{
  outline:2px solid color-mix(in srgb,var(--kk-mandir-accent,#d6b15f) 70%,white)!important;
  outline-offset:3px!important;
}
.kk-deity-symbol{height:174px!important;border-radius:16px!important}
.kk-deity-art-card{border-radius:16px!important}
.kk-deity-art-card img{
  object-fit:contain!important;
  object-position:center!important;
  background:#090706!important;
  transform:none!important;
}
.kk-deity-copy{
  display:grid!important;
  gap:4px!important;
  text-align:left!important;
  width:100%!important;
}
.kk-deity-copy strong{
  font-size:12.5px!important;
  line-height:1.28!important;
  letter-spacing:.01em!important;
  color:#f2eadc!important;
}
.kk-deity-copy small{
  font-size:9.75px!important;
  line-height:1.48!important;
  color:#aba291!important;
  text-wrap:balance!important;
}
.kk-deity-cta{
  font-size:9px!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  color:#8f846f!important;
}

/* Profile and selector rail: never crop identifying iconography. */
.kk-mandir-profile-stage{
  grid-template-columns:196px minmax(0,1fr)!important;
  min-height:318px!important;
  gap:22px!important;
  align-items:center!important;
}
.kk-mandir-symbol{
  width:176px!important;
  max-width:176px!important;
  height:224px!important;
  border-radius:21px!important;
}
.kk-puja-stage-copy .kk-card-title{
  font-size:clamp(25px,3.1vw,38px)!important;
  letter-spacing:-.025em!important;
  line-height:1.03!important;
}
.kk-puja-stage-copy .kk-muted{
  max-width:58ch!important;
  line-height:1.58!important;
}
.kk-deity-art-profile img,
.kk-deity-art-rail img{
  object-fit:contain!important;
  object-position:center!important;
  background:#090706!important;
}
.kk-mandir-deity-mark{background:#090706!important}
.kk-mandir-deity-button strong{line-height:1.25!important}
.kk-mandir-deity-button small{line-height:1.4!important;color:#9f9688!important}

/* Virtual Mandir: give the deity enough visual presence without stretching. */
.kk-mandir-idol{
  width:min(29vw,270px)!important;
  height:338px!important;
  margin-bottom:92px!important;
  padding:7px!important;
  border-radius:22px!important;
  box-shadow:0 22px 56px rgba(0,0,0,.48),0 0 44px color-mix(in srgb,var(--kk-mandir-accent,#d6b15f) 9%,transparent)!important;
}
.kk-mandir-idol:before{border-radius:16px!important}
.kk-deity-art-mandir{border-radius:15px!important}
.kk-deity-art-mandir img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#090706!important;
  transform:none!important;
}
.kk-deity-art-mandir[data-deity-artwork="shiva"] img{
  object-fit:contain!important;
  object-position:center!important;
  filter:contrast(1.01) saturate(.94)!important;
}

/* Selected cards feel devotional, not game-like. */
.kk-deity-card[data-active="true"]{
  border-color:color-mix(in srgb,var(--kk-mandir-accent,#d6b15f) 48%,transparent)!important;
  box-shadow:0 17px 40px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--kk-mandir-accent,#d6b15f) 15%,transparent)!important;
}
.kk-deity-card:hover{
  border-color:color-mix(in srgb,var(--kk-mandir-accent,#d6b15f) 30%,transparent)!important;
  transform:translateY(-1px)!important;
}
.kk-deity-card:hover .kk-deity-art-card img{transform:scale(1.006)!important}

@media(max-width:760px){
  .kk-deity-grid{gap:11px!important}
  .kk-deity-card{min-height:254px!important}
  .kk-deity-symbol{height:160px!important}
  .kk-mandir-profile-stage{grid-template-columns:140px minmax(0,1fr)!important;min-height:266px!important;gap:16px!important}
  .kk-mandir-symbol{width:128px!important;max-width:128px!important;height:168px!important}
  .kk-mandir-idol{width:min(68vw,250px)!important;height:312px!important;margin-bottom:78px!important}
}

@media(max-width:480px){
  .kk-mandir-profile-stage{grid-template-columns:1fr!important;text-align:center!important;padding-inline:14px!important}
  .kk-mandir-symbol{width:min(58vw,180px)!important;max-width:180px!important;height:220px!important;margin-inline:auto!important}
  .kk-puja-stage-copy .kk-muted{margin-inline:auto!important}
  .kk-deity-card{min-height:242px!important;border-radius:18px!important}
  .kk-deity-symbol{height:152px!important}
}

@media(prefers-reduced-motion:reduce){
  .kk-deity-artwork img{transition:none!important}
  .kk-deity-card{transition:none!important}
  .kk-deity-card:hover{transform:none!important}
  .kk-deity-card:hover .kk-deity-art-card img{transform:none!important}
}

/* Virtual Puja usability hotfix — 2026-08-23.
 * The earlier shrine-first two-column pass pushed both the ritual action bar and
 * Temple sound controls below the first desktop viewport. Keep the sanctum
 * immersive, but put the controls where the user can actually operate them.
 * Use the Mandir page container so split-view/embedded hosts behave according
 * to their real content width instead of the outer browser viewport. */
@container kk-mandir-page (min-width:761px){
  .kk-mandir-workspace{
    display:grid!important;
    grid-template-columns:minmax(132px,156px) minmax(0,1fr) minmax(232px,278px)!important;
    grid-template-areas:"deity center side"!important;
    align-items:start!important;
    gap:10px!important;
    min-width:0!important;
  }
  .kk-mandir-deity-rail{grid-area:deity!important}
  .kk-mandir-center{
    grid-area:center!important;
    display:grid!important;
    grid-template-areas:"mandir-stage"!important;
    position:relative!important;
    min-width:0!important;
  }
  .kk-mandir-side{
    grid-area:side!important;
    position:sticky!important;
    top:78px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    max-height:calc(100vh - 96px)!important;
    min-width:0!important;
    overflow:auto!important;
    padding-right:2px!important;
  }
  .kk-mandir-side>.kk-mandir-panel:nth-child(3){order:-1!important}
  .kk-mandir-stage-cinematic{
    grid-area:mandir-stage!important;
    min-height:clamp(430px,calc(100vh - 185px),560px)!important;
    padding-bottom:116px!important;
  }
  .kk-mandir-actionbar{
    grid-area:mandir-stage!important;
    align-self:end!important;
    position:relative!important;
    z-index:15!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin:0 14px 14px!important;
    background:rgba(9,8,7,.9)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }
  .kk-mandir-offering-tray{bottom:108px!important}
  .kk-mandir-idol{
    height:min(42vh,318px)!important;
    margin-bottom:138px!important;
  }
}

@media(min-width:761px) and (max-height:760px){
  .kk-mandir-stage-cinematic{min-height:clamp(390px,calc(100vh - 150px),510px)!important}
  .kk-mandir-idol{height:min(38vh,280px)!important;margin-bottom:132px!important}
}

/* The action bar must never depend on the parent container being wider than a
 * breakpoint to stay inside the sanctum. Overlay it by default. Container-aware
 * layouts keep that action visible in desktop, split-view and modern mobile hosts. */
.kk-mandir-center{
  display:grid!important;
  grid-template-areas:"mandir-stage"!important;
}
.kk-mandir-stage-cinematic{grid-area:mandir-stage!important}
.kk-mandir-actionbar{
  grid-area:mandir-stage!important;
  align-self:end!important;
  position:relative!important;
  z-index:15!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  margin:0 14px 14px!important;
  background:rgba(9,8,7,.9)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
.kk-mandir-side>.kk-mandir-panel:nth-child(3){order:-1!important}

@container kk-mandir-page (max-width:760px){
  .kk-mandir-center{display:grid!important;grid-template-areas:"mandir-stage"!important}
  .kk-mandir-stage-cinematic,.kk-mandir-actionbar{grid-area:mandir-stage!important}
  .kk-mandir-actionbar{align-self:end!important;position:relative!important;margin:0 10px 10px!important;width:calc(100% - 20px)!important;max-width:calc(100% - 20px)!important}
}

/* Legacy browsers without container-query support retain a conventional phone stack. */
@supports not (container-type:inline-size){
  @media(max-width:760px){
    .kk-mandir-center{display:block!important;grid-template-areas:none!important}
    .kk-mandir-stage-cinematic,.kk-mandir-actionbar{grid-area:auto!important}
    .kk-mandir-actionbar{position:static!important;margin:0!important}
  }
}