*{margin:0;padding:0;box-sizing:border-box}
:root{--gold:#C9A84C;--gl:#F5D870;--gp:#FFF8DC;--bg:#06030C;--cr:#FAF3E0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:"Cormorant Garamond",serif;color:var(--cr)}
#bgc,#fxc{position:fixed;inset:0;pointer-events:none;z-index:0}#fxc{z-index:25}

#nav{position:fixed;top:0;left:0;right:0;z-index:300;height:52px;
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;
  background:rgba(6,3,12,0.96);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(201,168,76,0.18)}
.nb{font-family:"Cinzel Decorative",serif;font-size:12px;color:var(--gold);letter-spacing:2px}
.nt{font-family:"Noto Serif Tamil",serif;font-size:9px;color:rgba(201,168,76,0.4);display:block;margin-top:1px}
.nom{font-size:26px;color:var(--gold);cursor:pointer;user-select:none;
  filter:drop-shadow(0 0 8px rgba(201,168,76,.5));animation:omglow 5s ease-in-out infinite}
@keyframes omglow{0%,100%{filter:drop-shadow(0 0 5px rgba(201,168,76,.4))}50%{filter:drop-shadow(0 0 26px rgba(201,168,76,1))}}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-btn{background:rgba(201,168,76,0.08);border:0.5px solid rgba(201,168,76,0.25);
  color:var(--gold);padding:5px 11px;border-radius:16px;cursor:pointer;font-size:10px;
  letter-spacing:1px;transition:all 0.3s;font-family:"Cormorant Garamond",serif;white-space:nowrap}
.nav-btn:hover{background:rgba(201,168,76,0.22)}
.nav-btn.off{color:rgba(250,243,224,0.35);border-color:rgba(201,168,76,0.1)}
.nav-btn.playing{background:rgba(180,30,40,0.2);border-color:rgba(200,80,80,0.4);color:#E09090}

/* Now playing bar */
#now-playing{
  position:fixed;bottom:0;left:0;right:0;z-index:150;
  height:36px;display:flex;align-items:center;gap:12px;padding:0 16px;
  background:rgba(6,3,12,0.95);border-top:1px solid rgba(201,168,76,0.15);
  transition:all 0.4s;
}
.np-icon{font-size:14px;animation:npPulse 2s ease-in-out infinite}
@keyframes npPulse{0%,100%{opacity:0.6}50%{opacity:1}}
.np-text{font-family:"Noto Serif Tamil",serif;font-size:11px;color:var(--gold);opacity:0.8;flex:1;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-wave{display:flex;align-items:center;gap:2px;height:20px}
.np-bar{width:3px;background:var(--gold);border-radius:2px;animation:waveBar 1s ease-in-out infinite}
.np-bar:nth-child(1){animation-delay:0s;height:6px}
.np-bar:nth-child(2){animation-delay:0.15s;height:14px}
.np-bar:nth-child(3){animation-delay:0.3s;height:10px}
.np-bar:nth-child(4){animation-delay:0.45s;height:18px}
.np-bar:nth-child(5){animation-delay:0.6s;height:8px}
.np-bar:nth-child(6){animation-delay:0.75s;height:16px}
.np-bar:nth-child(7){animation-delay:0.9s;height:10px}
@keyframes waveBar{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}
#now-playing.paused .np-bar{animation-play-state:paused;transform:scaleY(0.3)!important}

#wrap{position:fixed;inset:52px 0 36px;display:flex;overflow:hidden}

/* LEFT STAGE */
#stage{flex:0 0 55%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;overflow:hidden}
#stage::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 80% at 50% 55%,#2A1808 0%,#0E0608 60%,#06030C 100%);z-index:0}
#stage::after{content:"";position:absolute;top:0;left:0;right:0;height:60%;
  background:radial-gradient(ellipse 90% 65% at 50% 0%,rgba(201,168,76,0.10) 0%,transparent 70%);pointer-events:none;z-index:1}
.gr{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgba(201,168,76,0.1);
  pointer-events:none;z-index:2;animation:ringP 4s ease-in-out infinite}
@keyframes ringP{0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(1)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.04)}}

#imgwrap{position:relative;z-index:5;width:min(310px,80vw);height:min(440px,63vh);display:flex;align-items:flex-end;justify-content:center}
#linga-img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;height:100%;object-fit:contain;object-position:bottom center;z-index:5;transition:filter 1.5s ease;filter:drop-shadow(0 8px 30px rgba(0,0,0,0.8)) drop-shadow(0 0 20px rgba(201,168,76,0.25))}
#pourcanvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:6}
#splashcanvas{position:absolute;bottom:-8px;left:0;width:100%;height:30%;pointer-events:none;z-index:4}
#vessel-anim{position:absolute;top:2%;left:50%;transform:translateX(-60%) rotate(-20deg);font-size:52px;z-index:20;opacity:0;pointer-events:none;filter:drop-shadow(0 4px 16px rgba(0,0,0,0.6));transition:opacity 0.35s}
#vessel-anim.show{opacity:1;animation:vesselPour 0.75s ease-in-out infinite alternate}
@keyframes vesselPour{0%{transform:translateX(-60%) rotate(-18deg) translateY(0)}100%{transform:translateX(-60%) rotate(-52deg) translateY(-10px)}}
.rip{position:absolute;border-radius:50%;border:2px solid;pointer-events:none;z-index:18;animation:ripExp 1s ease-out forwards}
@keyframes ripExp{0%{transform:translate(-50%,-50%) scale(0);opacity:.9}100%{transform:translate(-50%,-50%) scale(5.5);opacity:0}}
.petal{position:absolute;pointer-events:none;z-index:19;border-radius:50% 10%;animation:petalFall linear forwards}
@keyframes petalFall{0%{opacity:.95;transform:rotate(0deg) translateX(0)}100%{opacity:0;transform:rotate(420deg) translateX(44px)}}

#sound-rings{position:absolute;top:50%;left:50%;pointer-events:none;z-index:3}
.s-ring{position:absolute;border-radius:50%;border:1px solid;opacity:0;animation:soundRing 2s ease-out infinite}
@keyframes soundRing{0%{transform:translate(-50%,-50%) scale(0.5);opacity:0.6}100%{transform:translate(-50%,-50%) scale(2.5);opacity:0}}

#dr{display:flex;gap:16px;align-items:flex-end;margin-top:8px;z-index:6;position:relative}
.dl{animation:deepamF 2.6s ease-in-out infinite}
.dl:nth-child(1){animation-delay:.15s}.dl:nth-child(2){animation-delay:.75s;transform-origin:bottom}.dl:nth-child(3){animation-delay:.4s}
@keyframes deepamF{0%,100%{filter:drop-shadow(0 0 8px rgba(255,180,50,.9))}40%{filter:drop-shadow(0 0 22px rgba(255,225,80,1))}70%{filter:drop-shadow(0 0 4px rgba(255,140,30,.4))}}

/* RIGHT PANEL */
#panel{flex:1;display:flex;flex-direction:column;background:rgba(8,4,14,0.98);border-left:1px solid rgba(201,168,76,0.12);padding:11px 12px 8px;overflow:hidden}
.pe{font-size:9px;letter-spacing:5px;color:var(--gold);opacity:.55;text-transform:uppercase;margin-bottom:3px;text-align:center}
.pm{font-family:"Cinzel Decorative",serif;font-size:clamp(11px,1.6vw,17px);background:linear-gradient(135deg,var(--gp),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center}
.pt{font-family:"Noto Serif Tamil",serif;font-size:10px;color:var(--gl);opacity:.6;text-align:center;margin-bottom:7px}
#cp{background:rgba(201,168,76,0.04);border:.5px solid rgba(201,168,76,0.18);border-radius:4px;padding:9px 11px;margin-bottom:7px;flex-shrink:0;position:relative;overflow:hidden;min-height:76px;transition:border-color .5s,box-shadow .5s}
#cp::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent)}
#ct{display:flex;align-items:center;gap:9px}
#cv{font-size:30px;display:inline-block}
#cv.p{animation:cvP .75s ease-in-out infinite alternate}
@keyframes cvP{0%{transform:rotate(-10deg)}100%{transform:rotate(-44deg) translateY(-6px)}}
#ce{font-family:"Cinzel Decorative",serif;font-size:10px;color:var(--gl)}
#cta{font-family:"Noto Serif Tamil",serif;font-size:11px;color:rgba(250,243,224,.5);margin-top:2px}
#cm{font-size:9px;font-style:italic;color:rgba(250,243,224,.35);margin-top:4px;line-height:1.5}
#cb2{font-size:9px;color:rgba(250,243,224,.44);line-height:1.6;margin-top:2px}
#cbar{position:absolute;bottom:0;left:0;height:2.5px;background:var(--gold);width:0%;transition:width .1s linear}

#grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:1;overflow-y:auto;min-height:0}
#grid::-webkit-scrollbar{width:2px}#grid::-webkit-scrollbar-thumb{background:rgba(201,168,76,0.2)}
.si{background:rgba(201,168,76,0.03);border:.5px solid rgba(201,168,76,0.1);border-radius:3px;padding:6px 4px 5px;text-align:center;cursor:pointer;transition:all .25s;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.si:hover{border-color:rgba(201,168,76,.42);background:rgba(201,168,76,.09);transform:translateY(-2px)}
.si.active{border-color:var(--gold);background:rgba(201,168,76,.13);box-shadow:0 0 14px rgba(201,168,76,.2)}
.si.done{border-color:rgba(201,168,76,.25);background:rgba(201,168,76,.05)}
.si.done::after{content:"✓";position:absolute;top:2px;right:4px;font-size:7px;color:var(--gold);opacity:.7}
.sn{font-size:7px;letter-spacing:1px;color:rgba(201,168,76,.3)}
.sv{font-size:19px;line-height:1}
.si.active .sv{animation:svT .75s ease-in-out infinite alternate}
@keyframes svT{0%{transform:rotate(-7deg)}100%{transform:rotate(-36deg) translateY(-3px)}}
.se{font-size:7px;color:var(--gl);line-height:1.2;font-family:"Cinzel Decorative",serif}
.sta{font-family:"Noto Serif Tamil",serif;font-size:7px;color:rgba(250,243,224,.3)}

#ctrl{display:flex;gap:4px;margin-top:6px;align-items:center;flex-shrink:0}
.cb{flex:1;padding:7px 2px;background:rgba(201,168,76,.07);border:.5px solid rgba(201,168,76,.2);color:var(--gold);font-family:"Cormorant Garamond",serif;font-size:10px;letter-spacing:1px;cursor:pointer;border-radius:3px;transition:all .25s;text-transform:uppercase}
.cb:hover{background:rgba(201,168,76,.18);border-color:rgba(201,168,76,.6)}
.cb.on{background:rgba(180,30,40,.15);border-color:rgba(180,80,80,.4);color:#E09090}
#bel{background:none;border:.5px solid rgba(201,168,76,.18);color:var(--gold);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .25s;flex-shrink:0}
#bel:hover{background:rgba(201,168,76,.1)}
.bellR{animation:bellRng .6s ease-in-out}
@keyframes bellRng{0%,100%{transform:rotate(0)}20%{transform:rotate(18deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(9deg)}80%{transform:rotate(-5deg)}}
#spw{display:flex;gap:3px;flex-shrink:0}
.sb{padding:5px 6px;background:rgba(201,168,76,.04);border:.5px solid rgba(201,168,76,.1);color:rgba(201,168,76,.4);font-size:9px;cursor:pointer;border-radius:2px;transition:all .2s}
.sb.a{background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.4);color:var(--gold)}
#crw{display:flex;gap:4px;margin-top:5px;flex-shrink:0}
.cc{flex:1;text-align:center;background:rgba(201,168,76,.04);border:.5px solid rgba(201,168,76,.08);border-radius:3px;padding:5px 2px}
.cn{font-family:"Cinzel Decorative",serif;font-size:14px;color:var(--gold);display:block}
.cl{font-size:7px;letter-spacing:1px;color:rgba(250,243,224,.28);text-transform:uppercase}

#mf{position:fixed;bottom:46px;left:50%;transform:translateX(-50%);font-family:"Noto Serif Tamil",serif;font-size:12px;color:var(--gl);letter-spacing:2px;text-shadow:0 0 18px rgba(201,168,76,.6);pointer-events:none;z-index:200;opacity:0;transition:opacity .4s;white-space:nowrap;background:rgba(6,3,12,0.88);padding:5px 18px;border-radius:20px;border:.5px solid rgba(201,168,76,.24)}
#mf.s{opacity:1}

@media(max-width:680px){
  #wrap{flex-direction:column}#stage{flex:none;height:50vh}#panel{flex:none;height:50vh}
  #imgwrap{width:min(250px,80vw);height:min(340px,44vh)}
}