/* ===========================================================================
   Aditi's Sa Ra Ga Ma Pa
   Values lifted verbatim from "Aditis Sa Ra Ga Ma Pa.dc.html".
   =========================================================================== */

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #1c1610; color: #3a2e22;
  font-family: Nunito, system-ui, sans-serif;
}
a { color: #f3d79a; text-decoration: none; }
a:hover { color: #ffe9b8; }

@keyframes haze { 0%,100% { opacity: .16; transform: translateX(-4%); } 50% { opacity: .36; transform: translateX(4%); } }
@keyframes eq   { 0%,100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }
@keyframes bob  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes spin { to { transform: rotate(360deg); } }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255,232,184,.3); border-radius: 4px; }

.stage { position: fixed; inset: 0; overflow: hidden; }

/* ── background ─────────────────────────────────────────── */
.bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
}
.haze {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 78% 18%, rgba(255,226,160,.34), rgba(255,226,160,0) 55%);
  animation: haze 18s ease-in-out infinite;
}
.grad-side {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(96deg, rgba(20,15,9,.7) 0%, rgba(20,15,9,.4) 30%, rgba(20,15,9,.05) 58%, rgba(20,15,9,.3) 100%);
}
.grad-vert {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,15,9,.4) 0%, rgba(20,15,9,0) 26%, rgba(20,15,9,.5) 100%);
}

/* ── brand ──────────────────────────────────────────────── */
.brand {
  position: absolute; top: 30px; left: 40px;
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
}
.brand-name {
  font-family: Caveat, cursive; font-size: 50px; line-height: .85;
  color: #ffe9b8; text-shadow: 0 3px 18px rgba(20,14,6,.7);
}
.swaras { display: flex; gap: 5px; padding-bottom: 2px; }
.sw {
  font-family: Caveat, cursive; font-size: 28px; line-height: 1;
  color: #fff8ea; background: rgba(30,22,12,.4);
  border: 1px dashed rgba(255,232,184,.45);
  padding: 0 11px 4px;
  animation: bob 5.5s ease-in-out infinite;
}
.sw-a { border-radius: 10px 16px 10px 16px; }
.sw-b { border-radius: 16px 10px 16px 10px; }
.swaras .sw:nth-child(2) { animation-delay: .4s; }
.swaras .sw:nth-child(3) { animation-delay: .8s; }
.swaras .sw:nth-child(4) { animation-delay: 1.2s; }
.swaras .sw:nth-child(5) { animation-delay: 1.6s; }

/* ── account ────────────────────────────────────────────── */
.account {
  position: absolute; top: 34px; right: 40px;
  display: flex; align-items: center; gap: 10px;
}
.who { font-size: 11px; color: rgba(240,226,200,.6); letter-spacing: .06em; }
.connect {
  cursor: pointer; font-family: Nunito, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #ffe9b8; background: rgba(30,22,12,.42);
  border: 1px dashed rgba(255,232,184,.4); border-radius: 999px;
  padding: 9px 15px; backdrop-filter: blur(7px);
  transition: background .2s ease;
}
.connect:hover { background: rgba(255,232,184,.16); }
.connect.is-on { border-style: solid; border-color: rgba(122,220,140,.5); color: #bfe6c6; }

/* ── mood panel ─────────────────────────────────────────── */
.panel {
  position: absolute; top: 108px; left: 40px; bottom: 148px;
  width: 268px; transition: width .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; gap: 10px;
}
.panel:not(.is-open) { width: 40px; }
.panel-toggle {
  cursor: pointer; font-family: Caveat, cursive; font-size: 26px;
  color: #ffe9b8; background: rgba(30,22,12,.42);
  border: 1px solid rgba(255,232,184,.28); backdrop-filter: blur(7px);
  border-radius: 14px; padding: 7px 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex: none; align-self: flex-start;
  box-shadow: 0 6px 18px rgba(12,8,4,.3);
  transition: background .2s ease;
}
.panel-toggle:hover { background: rgba(30,22,12,.62); }
.panel:not(.is-open) .panel-toggle { padding: 6px 8px; }
.panel:not(.is-open) .panel-label { display: none; }
.panel-label { white-space: nowrap; }
.panel-glyph { font-size: 15px; font-family: Nunito, sans-serif; opacity: .75; }

.panel-body {
  display: flex; flex-direction: column; gap: 9px;
  overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px;
}
.panel:not(.is-open) .panel-body { display: none; }
.mood-list { display: flex; flex-direction: column; gap: 9px; }

.mood {
  cursor: pointer; font-family: inherit; text-align: left;
  display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 14px;
  border: 1px solid rgba(255,232,184,.24);
  background: rgba(30,22,12,.4); backdrop-filter: blur(7px);
  transition: transform .2s ease, background .2s ease;
}
.mood:hover { transform: translateX(5px); }
.mood.is-active { background: rgba(255,240,210,.9); border-color: rgba(255,255,255,.7); }
.mood-dot {
  width: 26px; height: 26px; border-radius: 50%;
  box-shadow: inset 0 -5px 10px rgba(0,0,0,.22);
}
.mood-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mood-label {
  font-family: Caveat, cursive; font-size: 24px; line-height: 1.05;
  color: #fff3d9; white-space: nowrap;
}
.mood-note {
  font-size: 11px; line-height: 1.35; color: rgba(240,226,200,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mood.is-active .mood-label { color: #2e2318; }
.mood.is-active .mood-note  { color: #7d6a51; }

.surprise {
  cursor: pointer; margin-top: 2px;
  font-family: Nunito, sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: #ffe9b8; background: transparent;
  border: 1px dashed rgba(255,232,184,.4); border-radius: 999px; padding: 9px 14px;
  flex: none;
}
.surprise:hover { background: rgba(255,232,184,.14); }

/* ── dock ───────────────────────────────────────────────── */
.dock {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  width: min(470px, calc(100vw - 96px));
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}

.queue {
  display: none; flex-direction: column; width: 100%;
  max-height: 232px; overflow-y: auto;
  border-radius: 18px; padding: 8px; box-sizing: border-box;
  background: rgba(28,20,12,.82); border: 1px solid rgba(255,232,184,.2);
  backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgba(12,8,4,.5);
}
.queue.is-open { display: flex; }
.row {
  cursor: pointer; display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px;
  background: transparent; transition: background .16s ease;
}
.row:hover { background: rgba(255,232,184,.12); }
.row.is-cur { background: rgba(255,232,184,.14); }
.row-left { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.row-title {
  font-size: 13px; font-weight: 400; color: #f0e2c8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row.is-cur .row-title { font-weight: 700; color: #ffe9b8; }
.row-artist {
  font-size: 11px; color: rgba(240,226,200,.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-time { font-size: 11px; color: rgba(240,226,200,.45); font-variant-numeric: tabular-nums; }

.bar {
  width: 100%; box-sizing: border-box; border-radius: 999px;
  padding: 8px 14px 8px 8px;
  background: rgba(28,20,12,.8); border: 1px solid rgba(255,232,184,.22);
  backdrop-filter: blur(14px); box-shadow: 0 16px 38px rgba(12,8,4,.5);
  display: grid; grid-template-columns: auto auto 1fr auto auto;
  align-items: center; gap: 11px;
}
.art {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg,#e3c68b,#b07c46);
  background-size: cover; background-position: center;
}
.art-dot {
  width: 13px; height: 13px; border-radius: 50%;
  border: 4px solid rgba(28,20,12,.85); box-sizing: border-box;
}
.art-dot.is-spinning { animation: spin 3.2s linear infinite; }
.art.has-cover .art-dot { display: none; }

.play {
  cursor: pointer; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: #ffe9b8; color: #241a0e; font-size: 11px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.play:hover { background: #fff8ea; }

.meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.titles { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.now-title {
  font-size: 12.5px; font-weight: 700; color: #fff8ea;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.now-artist {
  font-size: 10.5px; color: rgba(240,226,200,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seek {
  cursor: pointer; display: block; height: 3px; border-radius: 3px;
  background: rgba(255,232,184,.22); position: relative;
}
.seek-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  border-radius: 3px; background: linear-gradient(90deg,#f3d79a,#e0a05e);
}
.elapsed {
  font-size: 10.5px; color: rgba(240,226,200,.5);
  font-variant-numeric: tabular-nums; flex: none;
}
.ctrls { display: flex; align-items: center; gap: 7px; flex: none; }
.mini {
  cursor: pointer; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(255,232,184,.28); background: transparent;
  color: #f0e2c8; font-size: 9px;
  display: flex; align-items: center; justify-content: center;
}
.mini:hover { background: rgba(255,232,184,.16); }
#qbtn.is-on { background: rgba(255,232,184,.2); }

.status {
  display: flex; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: rgba(240,226,200,.6);
}
.eq { display: none; align-items: flex-end; gap: 2px; height: 9px; }
.eq.is-on { display: flex; }
.eq i { display: block; width: 2px; height: 100%; background: #f3d79a; border-radius: 2px; animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .2s; }
.eq i:nth-child(3) { background: #e0a05e; animation-delay: .4s; }
.hint { text-transform: none; letter-spacing: .02em; font-weight: 400; color: rgba(240,226,200,.45); }

/* ── setup ──────────────────────────────────────────────── */
.setup {
  display: none; position: fixed; inset: 0; z-index: 50;
  background: rgba(12,8,4,.72); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 24px;
}
.setup.is-open { display: flex; }
.setup-card {
  width: min(520px, 100%); box-sizing: border-box;
  background: rgba(28,20,12,.96); border: 1px solid rgba(255,232,184,.24);
  border-radius: 20px; padding: 26px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6); color: #f0e2c8;
}
.setup-card h2 { font-family: Caveat, cursive; font-size: 34px; margin: 0 0 10px; color: #ffe9b8; font-weight: 600; }
.setup-card p { font-size: 12.5px; line-height: 1.6; margin: 0 0 12px; color: rgba(240,226,200,.8); }
.setup-card code {
  display: block; font-size: 12px; padding: 9px 12px; border-radius: 9px;
  background: rgba(255,232,184,.1); color: #ffe9b8; margin-bottom: 14px;
  user-select: all; word-break: break-all;
}
.setup-card input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px;
  padding: 11px 13px; border-radius: 11px; color: #fff8ea;
  background: rgba(255,232,184,.08); border: 1px solid rgba(255,232,184,.26);
}
.setup-card input:focus { outline: none; border-color: rgba(255,232,184,.6); }
.setup-actions { display: flex; gap: 9px; margin-top: 14px; }
.setup-go {
  cursor: pointer; font-family: Nunito, sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  background: #ffe9b8; color: #241a0e; border: none;
  border-radius: 999px; padding: 11px 18px;
}
.setup-go:hover { background: #fff8ea; }
.setup-x {
  cursor: pointer; font-family: Nunito, sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  background: transparent; color: rgba(240,226,200,.7);
  border: 1px dashed rgba(255,232,184,.35); border-radius: 999px; padding: 11px 18px;
}
.fineprint { font-size: 11px !important; color: rgba(240,226,200,.5) !important; margin: 14px 0 0 !important; }

/* ── small screens ──────────────────────────────────────── */
@media (max-width: 720px) {
  .brand { top: 20px; left: 20px; gap: 8px; }
  .brand-name { font-size: 38px; }
  .sw { font-size: 22px; padding: 0 8px 3px; }
  .account { top: 24px; right: 20px; }
  .who { display: none; }
  .panel { left: 20px; top: 92px; bottom: 190px; width: 214px; }
  .dock { width: calc(100vw - 40px); bottom: 20px; }
}

/* ===========================================================================
   PER-MOOD LIGHTING
   One video, re-lit. Each mood grades the footage (filter) and layers a
   colour wash plus its own effect. Everything cross-fades over ~1.1s.
   =========================================================================== */

.bg   { transition: filter 1.1s ease; }
.wash, .beams, .strobe, .rain, .scan, .vignette {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.1s ease;
}
.wash     { mix-blend-mode: soft-light; }
.vignette { box-shadow: inset 0 0 240px 70px rgba(8,5,2,.9); }

@keyframes beamspin { to { transform: rotate(360deg); } }
@keyframes pulse    { 0%,100% { opacity: .30; } 50% { opacity: .78; } }
@keyframes flicker  { 0%,92%,100% { opacity: 0; } 94%,97% { opacity: .12; } }
@keyframes fall     { to { transform: translateY(25%); } }
@keyframes breathe  { 0%,100% { opacity: .26; } 50% { opacity: .46; } }

/* ── slow english — soft, cool, dimmed ─────────────────────── */
.stage[data-mood="slow-english"] .bg {
  filter: saturate(.62) brightness(.80) contrast(1.04);
}
.stage[data-mood="slow-english"] .wash {
  opacity: 1;
  background: linear-gradient(200deg, rgba(143,166,196,.55), rgba(95,119,148,.35) 60%, rgba(40,52,70,.5));
  animation: breathe 11s ease-in-out infinite;
}
.stage[data-mood="slow-english"] .vignette { opacity: .55; }

/* ── hindi indie — warm terrace gold ───────────────────────── */
.stage[data-mood="hindi-indie"] .bg {
  filter: saturate(1.08) brightness(.97) contrast(1.02) sepia(.14);
}
.stage[data-mood="hindi-indie"] .wash {
  opacity: 1;
  background: radial-gradient(90% 70% at 72% 26%, rgba(255,214,140,.6), rgba(190,130,66,.28) 55%, rgba(60,38,16,.3));
  animation: breathe 13s ease-in-out infinite;
}
.stage[data-mood="hindi-indie"] .vignette { opacity: .3; }

/* ── dance bollywood — disco floor ─────────────────────────── */
.stage[data-mood="dance-bollywood"] .bg {
  filter: saturate(1.5) contrast(1.18) brightness(.82);
}
.stage[data-mood="dance-bollywood"] .wash {
  /* Beat-driven: --beat is 1 on the hit and decays to 0 before the next. */
  opacity: calc(.3 + var(--beat, 0) * .62);
  background: linear-gradient(115deg, rgba(255,60,140,.55), rgba(90,40,200,.4) 45%, rgba(0,200,220,.45));
  transition: none;
}
.stage[data-mood="dance-bollywood"] .beams {
  opacity: calc(.45 + var(--beat, 0) * .55);
  mix-blend-mode: screen;
  transform: scale(calc(1 + var(--beat, 0) * .05));
  transition: none;
}
.beams i {
  position: absolute; left: 50%; top: 50%;
  width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax;
  border-radius: 50%;
  animation: beamspin 14s linear infinite;
}
.beams i:nth-child(1) {
  background: conic-gradient(from 0deg, rgba(255,70,150,.42) 0 7%, transparent 7% 25%,
              rgba(255,70,150,.42) 25% 32%, transparent 32% 50%,
              rgba(255,70,150,.42) 50% 57%, transparent 57% 100%);
}
.beams i:nth-child(2) {
  background: conic-gradient(from 40deg, rgba(0,220,255,.38) 0 6%, transparent 6% 33%,
              rgba(0,220,255,.38) 33% 39%, transparent 39% 66%,
              rgba(0,220,255,.38) 66% 72%, transparent 72% 100%);
  animation-duration: 19s; animation-direction: reverse;
}
.beams i:nth-child(3) {
  background: conic-gradient(from 80deg, rgba(255,215,90,.34) 0 5%, transparent 5% 45%,
              rgba(255,215,90,.34) 45% 50%, transparent 50% 100%);
  animation-duration: 25s;
}
/* Strobe hits only beat 1 of each bar, so it punctuates instead of seizuring. */
.stage[data-mood="dance-bollywood"] .strobe {
  opacity: calc(var(--downbeat, 0) * .3);
  background: #fff; mix-blend-mode: overlay; transition: none;
}
.stage[data-mood="dance-bollywood"] .vignette { opacity: .45; }

/* ── go 90s — VHS tape ─────────────────────────────────────── */
.stage[data-mood="go-90s"] .bg {
  filter: sepia(.4) saturate(1.25) contrast(1.12) brightness(.88) hue-rotate(-8deg);
}
.stage[data-mood="go-90s"] .wash {
  opacity: 1;
  background: linear-gradient(180deg, rgba(190,220,150,.35), rgba(230,190,110,.3) 50%, rgba(120,90,40,.4));
}
.stage[data-mood="go-90s"] .scan {
  opacity: .55;
  background: repeating-linear-gradient(180deg,
              rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
}
.stage[data-mood="go-90s"] .vignette { opacity: .6; }

/* ── srk dard vibe — dim, rain, ache ───────────────────────── */
.stage[data-mood="srk-dard"] .bg {
  filter: saturate(.34) brightness(.5) contrast(1.14);
}
.stage[data-mood="srk-dard"] .wash {
  opacity: 1;
  background: linear-gradient(190deg, rgba(60,95,150,.6), rgba(24,38,66,.55) 55%, rgba(10,14,26,.7));
}
.stage[data-mood="srk-dard"] .rain {
  opacity: .5; height: 200%; top: -100%;
  background: repeating-linear-gradient(96deg,
              transparent 0 22px,
              rgba(198,222,255,.5) 22px 23px,
              transparent 23px 46px);
  animation: fall 1.05s linear infinite;
}
.stage[data-mood="srk-dard"] .vignette { opacity: .95; }

@media (prefers-reduced-motion: reduce) {
  .beams i, .strobe, .rain, .wash { animation: none !important; }
}

/* ── redirect-URI helper ────────────────────────────────── */
.uri-btn { padding: 9px 12px; letter-spacing: 0; }
.uri-box {
  display: none; position: absolute; top: 78px; right: 40px; z-index: 20;
  width: min(400px, calc(100vw - 80px)); box-sizing: border-box;
  background: rgba(28,20,12,.95); border: 1px solid rgba(255,232,184,.26);
  border-radius: 16px; padding: 16px 18px; color: #f0e2c8;
  box-shadow: 0 18px 44px rgba(12,8,4,.55); backdrop-filter: blur(14px);
}
.uri-box.is-open { display: block; }
.uri-box p { font-size: 11.5px; line-height: 1.55; margin: 0 0 9px; color: rgba(240,226,200,.8); }
.uri-box code {
  display: block; font-size: 12px; padding: 9px 11px; border-radius: 8px;
  background: rgba(255,232,184,.12); color: #ffe9b8; user-select: all;
  word-break: break-all; margin-bottom: 9px;
}
.uri-where { font-size: 10.5px !important; color: rgba(240,226,200,.55) !important; margin: 0 !important; }
@media (max-width: 720px) { .uri-box { right: 20px; top: 66px; } }