/* ============================================================
   Dil Toota Aashiq — styles
   Palette: midnight ink, crimson rose, candle amber, violet haze
   ============================================================ */
:root {
  --bg: #0b0610;
  --bg-2: #140a1c;
  --ink: #f5e9ee;
  --muted: #b79ab0;
  --rose: #ff4d6d;
  --rose-deep: #c9184a;
  --amber: #f5a524;
  --violet: #6d4aff;
  --glass: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  --radius: 18px;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-hindi: 'Yatra One', 'Noto Sans Devanagari', serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(255, 77, 109, 0.4); }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small-text { font-size: 0.85rem; }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--rose); color: #fff; padding: 8px 14px; border-radius: 8px;
}
.skip-link:focus { left: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------------- Background ---------------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-gradient {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(109, 74, 255, 0.28), transparent 60%),
    radial-gradient(900px 600px at 10% 20%, rgba(201, 24, 74, 0.30), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(245, 165, 36, 0.12), transparent 60%),
    linear-gradient(180deg, #120818 0%, var(--bg) 55%, #06030a 100%);
}
/* ---- Detailed moon: craters, terminator shading, halo ---- */
.bg-moon {
  position: absolute; top: 9vh; right: 12vw; width: 150px; height: 150px; border-radius: 50%;
  background:
    /* craters (dark pits with a lit rim) */
    radial-gradient(circle at 62% 34%, rgba(150,120,72,0.55) 0 6px, rgba(255,248,225,0.5) 7px 8px, transparent 9px),
    radial-gradient(circle at 41% 58%, rgba(150,120,72,0.50) 0 11px, rgba(255,248,225,0.4) 12px 13px, transparent 14px),
    radial-gradient(circle at 72% 66%, rgba(150,120,72,0.45) 0 7px, transparent 9px),
    radial-gradient(circle at 33% 33%, rgba(150,120,72,0.40) 0 5px, transparent 7px),
    radial-gradient(circle at 54% 78%, rgba(150,120,72,0.35) 0 4px, transparent 6px),
    radial-gradient(circle at 78% 46%, rgba(150,120,72,0.30) 0 3px, transparent 5px),
    radial-gradient(circle at 22% 50%, rgba(150,120,72,0.30) 0 4px, transparent 6px),
    /* mare (subtle darker patches) */
    radial-gradient(ellipse at 60% 62%, rgba(150,120,72,0.18), transparent 45%),
    /* terminator shading — darker toward lower-right */
    radial-gradient(circle at 36% 32%, transparent 40%, rgba(120,88,44,0.35) 100%),
    /* base sphere */
    radial-gradient(circle at 36% 32%, #fff7e6 0%, #f3ddac 45%, #e2c184 72%, #cba765 100%);
  box-shadow: inset -12px -12px 26px rgba(110,80,38,0.45), inset 6px 6px 16px rgba(255,250,230,0.35);
  animation: moonDrift 40s ease-in-out infinite alternate;
}
.moon-glow { /* soft halo, kept separate so it doesn't clip the craters */
  position: absolute; inset: -40px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(245,225,175,0.30) 0%, rgba(245,205,150,0.12) 45%, transparent 70%);
}
@keyframes moonDrift { from { transform: translateY(0); } to { transform: translateY(18px); } }

/* ---- Starfield ---- */
.stars { position: absolute; inset: 0; }
.stars i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff;
  opacity: 0.8; animation: twinkle 3.5s ease-in-out infinite;
}
.stars i.big { width: 3px; height: 3px; box-shadow: 0 0 6px 1px rgba(255,255,255,0.7); }
.stars i.gold { background: #ffe9b8; box-shadow: 0 0 6px 1px rgba(255,220,150,0.6); }
@keyframes twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.95; } }
.bg-city {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32vh;
  background:
    linear-gradient(to top, rgba(6,3,10,1), rgba(6,3,10,0.7) 40%, transparent),
    repeating-linear-gradient(90deg,
      transparent 0 18px, rgba(20, 10, 30, 0.9) 18px 26px, transparent 26px 40px,
      rgba(16, 8, 26, 0.9) 40px 56px, transparent 56px 74px, rgba(22, 12, 34, 0.9) 74px 82px);
  mask-image: linear-gradient(to top, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 55%, transparent 100%);
  opacity: 0.9;
}
.bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.55) 100%);
}
.rain-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
body.raining .rain-canvas { opacity: 1; }

/* Drifting night clouds — crisp SVG silhouettes (built from overlapping
   puffs), varied shapes & sizes, NO blur. JS injects the SVG. */
.clouds { position: absolute; inset: 0; overflow: hidden; }
.cloud {
  position: absolute; left: -46vw; height: auto; max-width: 44vw;
  animation: cloudDrift linear infinite;
  will-change: transform;
}
.cloud svg { display: block; width: 100%; height: 100%; }
.cloud .puff { fill: #e6ebf5; }          /* moonlit cloud body */
.cloud .puff-shade { fill: #b9c2d6; }     /* subtle underside */
.cloud.far  { opacity: 0.6; }
.cloud.near { opacity: 0.9; }
@keyframes cloudDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(184vw); }
}
body.raining .cloud .puff { fill: #cfd6e4; }

/* ---- Room scene: boy at the window + billowing curtains ---- */
.room { position: absolute; inset: 0; overflow: hidden; }

/* Curtains hang from the top at both edges and billow in the wind */
.curtain {
  position: absolute; top: 0; height: 82vh; width: 15vw; min-width: 90px; max-width: 230px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.15), transparent 30%, transparent 70%, rgba(0,0,0,0.35)),
    repeating-linear-gradient(90deg, #0a060f 0 12px, #170b1d 12px 26px, #0a060f 26px 34px);
  box-shadow: inset 0 12px 20px rgba(0,0,0,0.6);
  will-change: clip-path, transform;
}
.curtain-l { left: 0; transform-origin: top left; animation: billowL 7s ease-in-out infinite; }
.curtain-r { right: 0; transform: scaleX(-1); transform-origin: top right; animation: billowL 7s ease-in-out infinite; animation-delay: -3.5s; }
@keyframes billowL {
  0%, 100% { clip-path: polygon(0% 0%, 100% 0%, 80% 12%, 100% 24%, 82% 38%, 100% 52%, 80% 66%, 100% 80%, 84% 92%, 70% 100%, 0% 100%); }
  50%      { clip-path: polygon(0% 0%, 100% 0%, 94% 12%, 82% 24%, 96% 38%, 84% 52%, 96% 66%, 82% 80%, 96% 92%, 82% 100%, 0% 100%); }
}
/* soft sheer inner edge that lifts with the wind */
.curtain::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(255,255,255,0.05));
  animation: curtainLift 7s ease-in-out infinite;
}
@keyframes curtainLift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8px); } }

/* Boy silhouette (back view), lower-left, looking out */
.boy {
  position: absolute; left: 2%; bottom: 0; width: min(300px, 40vw); height: auto;
  /* faint moonlight rim on the right/top edges to lift the silhouette off the sky */
  filter: drop-shadow(3px -2px 1px rgba(245,222,175,0.30)) drop-shadow(6px 0 2px rgba(245,222,175,0.13)) drop-shadow(0 0 30px rgba(0,0,0,0.5));
}
.boy svg { display: block; width: 100%; height: auto; }
.boy-fill path, .boy-fill circle { fill: #06030b; }
.boy .fold { fill: none; stroke: rgba(245,222,175,0.20); stroke-width: 2.2; stroke-linecap: round; }
.boy .hair .strand { fill: #06030b; transform-box: fill-box; transform-origin: bottom center; animation: hairSway 3.2s ease-in-out infinite; }
.boy .hair .s1 { animation-delay: -0.2s; }
.boy .hair .s2 { animation-delay: -0.9s; animation-duration: 3.6s; }
.boy .hair .s3 { animation-delay: -1.5s; animation-duration: 2.8s; }
.boy .hair .s4 { animation-delay: -0.6s; animation-duration: 3.9s; }
.boy .hair .s5 { animation-delay: -1.1s; animation-duration: 3.3s; }
@keyframes hairSway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(10deg); } }

@media (max-width: 640px) {
  .boy { width: 44vw; left: 0; opacity: 0.9; }
  .curtain { height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
  .curtain, .curtain::after, .boy .hair .strand { animation: none; }
}

/* ---- Wind-blown leaves ---- */
.leaves { position: absolute; inset: 0; }
.leaf {
  position: absolute; top: 0; left: 0; width: 12px; height: 12px; opacity: 0;
  border-radius: 0 100% 0 100%;
  background: linear-gradient(135deg, #6a4326, #3a2413 60%, #241408);
  box-shadow: inset 1px -1px 1px rgba(0,0,0,0.4);
  will-change: transform; animation: leafFly linear infinite;
}
.leaf::before { /* midrib */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, transparent 44%, rgba(255,230,190,0.25) 50%, transparent 56%);
}
@keyframes leafFly {
  0%   { transform: translate(-8vw, 0) rotate(0deg) scale(var(--s,1)); opacity: 0; }
  8%   { opacity: var(--o, 0.8); }
  25%  { transform: translate(24vw, -28px) rotate(150deg) scale(var(--s,1)); }
  50%  { transform: translate(54vw, 16px) rotate(260deg) scale(var(--s,1)); }
  75%  { transform: translate(84vw, -18px) rotate(380deg) scale(var(--s,1)); }
  92%  { opacity: var(--o, 0.8); }
  100% { transform: translate(114vw, 8px) rotate(500deg) scale(var(--s,1)); opacity: 0; }
}

/* ---- Lightning flash ---- */
.lightning {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background:
    radial-gradient(120% 90% at 72% -15%, rgba(214,228,255,0.95), rgba(150,180,255,0.28) 38%, transparent 68%),
    linear-gradient(180deg, rgba(190,210,255,0.25), transparent 55%);
}
.lightning.flash { animation: bolt 0.9s ease-out; }
@keyframes bolt {
  0% { opacity: 0; } 4% { opacity: 0.9; } 9% { opacity: 0.08; }
  13% { opacity: 0.75; } 20% { opacity: 0; } 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .leaf { animation: none; opacity: 0; }
  .lightning.flash { animation: none; }
}

/* ---------------- Top bar ---------------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(to bottom, rgba(11, 6, 16, 0.75), transparent);
  backdrop-filter: blur(2px);
}
.topbar-left, .topbar-nav { margin-top: 1px; }
/* stack Support us + Share vertically in the top-right corner */
.topbar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pill-share { color: var(--muted); }
.pill-share:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.pill-share svg { display: block; }
.topbar-nav { display: flex; gap: 6px; }
.topbar-nav a {
  text-decoration: none; font-weight: 600; font-size: 0.9rem; padding: 8px 14px; border-radius: 999px;
  color: var(--muted); transition: color .2s, background .2s;
}
.topbar-nav a:hover { color: #fff; background: var(--glass); }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass);
  backdrop-filter: blur(10px); font-weight: 600; font-size: 0.85rem; color: #fff;
}
.pill-support:hover { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(255, 77, 109, 0.15); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.6; } }
@media (max-width: 520px) {
  .topbar-nav { display: none; }
  .pill-label { display: none; }
}

/* ---------------- Hero ---------------- */
.hero { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 96px 16px 60px; }
.hero-inner { width: 100%; max-width: 720px; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--amber); margin: 0 auto 18px; font-weight: 600; padding: 6px 16px; border-radius: 999px;
  background: rgba(245, 165, 36, 0.08); border: 1px solid rgba(245, 165, 36, 0.28);
}
.eyebrow .tune { color: var(--rose); letter-spacing: 0.05em; font-size: 0.8rem; }
.brand { margin: 0; line-height: 1; display: grid; gap: 4px; }
.brand-hindi {
  font-family: var(--font-hindi); font-weight: 400; font-size: clamp(3rem, 10vw, 5.6rem); color: #fff;
  text-shadow: 0 0 30px rgba(255, 77, 109, 0.55), 0 0 80px rgba(201, 24, 74, 0.35), 0 4px 0 rgba(0,0,0,0.35);
  animation: flicker 7s infinite;
}
.brand-hindi.small { font-size: 1.8rem; text-shadow: 0 0 16px rgba(255, 77, 109, 0.45); animation: none; }
@keyframes flicker {
  0%, 93%, 100% { opacity: 1; }
  94% { opacity: 0.82; }
  95% { opacity: 1; }
  97% { opacity: 0.9; }
  98% { opacity: 1; }
}
.brand-en {
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  color: var(--muted); letter-spacing: 0.06em; text-shadow: 0 1px 8px rgba(6,3,10,0.8);
}
.tagline { max-width: 560px; margin: 18px auto 22px; color: var(--muted); line-height: 1.6; font-size: 1rem; }

/* Live audio waveform under the title */
.waveline {
  display: flex; align-items: center; justify-content: center; gap: 3px; height: 46px; margin: 20px auto 6px; max-width: 560px;
}
.waveline i {
  width: 3px; min-height: 3px; border-radius: 999px; transform-origin: center;
  background: linear-gradient(180deg, var(--amber), var(--rose));
  animation: wave 1.5s ease-in-out infinite; opacity: 0.55;
  box-shadow: 0 0 6px rgba(255, 77, 109, 0.25);
}
@keyframes wave { 0%, 100% { transform: scaleY(0.28); } 50% { transform: scaleY(1); } }
/* When a track is playing, the visualizer comes alive */
body.is-playing .waveline i { opacity: 0.95; animation-duration: 0.75s; box-shadow: 0 0 10px rgba(255, 77, 109, 0.5); }

/* Hero couplet (tagline reimagined as a sher) */
.couplet {
  position: relative; max-width: 600px; margin: 6px auto 24px; color: #f1dbe4;
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.15rem, 3vw, 1.6rem); line-height: 1.55;
  text-shadow: 0 1px 3px rgba(6,3,10,0.85), 0 2px 16px rgba(6,3,10,0.7);
}
.couplet .note { display: block; color: var(--amber); font-style: normal; font-size: 1.2rem; margin-bottom: 6px; text-shadow: 0 0 12px rgba(245, 165, 36, 0.6); }

.quick-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 18px; }
.glass-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--glass); backdrop-filter: blur(10px);
  font-weight: 600; font-size: 0.88rem; transition: transform .15s, border-color .2s, background .2s;
}
.glass-btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); }
.glass-btn[aria-pressed="true"] { border-color: #7dd3fc; background: rgba(125, 211, 252, 0.12); }
.glass-btn .badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 0.72rem; display: grid; place-items: center; }
.glass-btn .toggle-state { font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.12); letter-spacing: 0.08em; }
.glass-btn[aria-pressed="true"] .toggle-state { background: #7dd3fc; color: #06202c; }

.install-card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  margin: 0 auto 18px; max-width: 460px; padding: 12px 14px; border-radius: 14px;
  background: rgba(245, 165, 36, 0.1); border: 1px solid rgba(245, 165, 36, 0.35);
}
.install-card > div { flex: 1; display: grid; }
.install-card small { color: var(--muted); }

.btn-solid {
  display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: 999px;
  border: none; background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 24px rgba(201, 24, 74, 0.35); transition: transform .15s, box-shadow .2s;
}
.btn-solid:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(201, 24, 74, 0.45); }
.icon-x { background: transparent; border: none; font-size: 1.5rem; line-height: 1; color: var(--muted); padding: 4px 8px; }
.icon-x:hover { color: #fff; }
.link-btn { background: none; border: none; color: var(--muted); text-decoration: underline; font-size: 0.85rem; }
.link-btn:hover { color: #fff; }

/* ---------------- Cassette deck player ---------------- */
:root {
  --wood-1: #3a2214; --wood-2: #56321c; --wood-3: #2a170d;
  --metal-1: #3a3238; --metal-2: #211b24;
  --cream: #efe3c6; --brass: #d4a24c;
}
.deck {
  --p: 0; /* tape progress 0..1, set by JS */
  position: relative; text-align: left; margin: 0 auto; max-width: 600px; padding: 16px 18px 12px; border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(255,255,255,0.10), transparent 55%),
    repeating-linear-gradient(90deg, var(--wood-1) 0 7px, var(--wood-2) 7px 10px, var(--wood-1) 10px 19px, var(--wood-3) 19px 22px),
    var(--wood-1);
  box-shadow:
    inset 0 2px 0 rgba(255, 220, 170, 0.18), inset 0 -3px 0 rgba(0,0,0,0.55), inset 0 0 0 1px rgba(0,0,0,0.5),
    0 30px 60px rgba(0,0,0,0.65), 0 0 0 6px rgba(0,0,0,0.25);
}
.deck::before { /* wood sheen */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,0.06), transparent 35%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0.35));
}
.screw {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #cfc6b4, #6f675c 60%, #2b2622 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.7);
}
.screw::after { content: ""; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 1px; background: rgba(0,0,0,0.65); transform: translateX(-50%) rotate(35deg); }
.screw.tl { top: 8px; left: 8px; } .screw.tr { top: 8px; right: 8px; } .screw.bl { bottom: 8px; left: 8px; } .screw.br { bottom: 8px; right: 8px; }

/* Faceplate */
.faceplate {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-radius: 8px;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 3px), linear-gradient(180deg, #4a4149, #2a242c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.5);
}
.brand-plate { display: flex; align-items: center; gap: 10px; min-width: 0; }
.plate-logo {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.1em; color: #1a1216;
  background: linear-gradient(180deg, #f0d08a, #b8822e); padding: 2px 8px; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.6);
}
.plate-name { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #d9cfd6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate-name em { font-style: normal; color: #8e8290; }
.status { display: flex; align-items: center; gap: 8px; flex: none; }
.led { width: 9px; height: 9px; border-radius: 50%; background: #5a1a22; box-shadow: inset 0 0 2px rgba(0,0,0,0.7); transition: background .3s, box-shadow .3s; }
.deck.playing .led { background: #ff3b4e; box-shadow: 0 0 10px #ff3b4e, 0 0 20px rgba(255,59,78,0.6); animation: ledPulse 1.4s ease-in-out infinite; }
@keyframes ledPulse { 50% { box-shadow: 0 0 6px #ff3b4e, 0 0 12px rgba(255,59,78,0.4); } }
.now-label { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); font-weight: 700; }
@media (max-width: 480px) { .plate-name em { display: none; } }

/* Cassette window */
.window {
  position: relative; margin-top: 12px; padding: 12px; border-radius: 10px;
  background: linear-gradient(180deg, #15101a, #0c0810);
  box-shadow: inset 0 4px 14px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(255,255,255,0.06), 0 1px 0 rgba(255,255,255,0.08);
}
.window::after { /* glass glare */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.10), transparent 40%, transparent 70%, rgba(255,255,255,0.04));
}
.cassette {
  position: relative; border-radius: 8px; padding: 10px 12px 8px;
  background: linear-gradient(180deg, #2b2430, #1a151d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 0 0 1px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.6);
}
.label {
  position: relative; border-radius: 4px; padding: 8px 10px 6px; background: var(--cream); color: #2a1d16;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.4);
  background-image: repeating-linear-gradient(180deg, transparent 0 17px, rgba(0,0,0,0.05) 17px 18px);
}
.label-stripe { position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, var(--rose-deep), var(--amber)); }
.now-title {
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.2rem; line-height: 1.2; margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.now-sub { font-size: 0.74rem; color: #5d4a3e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-side { margin-top: 4px; font-size: 0.58rem; letter-spacing: 0.18em; color: #8a7260; }

.reels { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 10px 26px 4px; }
.reel { position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; }
.reel .tape {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle, #5a4034 0 1px, #2b1d17 1px 2.5px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 0 0 1px rgba(0,0,0,0.6);
  transition: transform .4s linear;
}
/* supply reel empties, take-up reel fills as --p goes 0→1 */
.reel-l .tape { transform: scale(calc(1 - var(--p) * 0.42)); }
.reel-r .tape { transform: scale(calc(0.58 + var(--p) * 0.42)); }
.reel .hub {
  position: relative; width: 24px; height: 24px; border-radius: 50%;
  background: #e9e1d2; box-shadow: inset 0 0 0 3px #c9bda8, 0 0 0 2px #0d0a0c;
  background-image: conic-gradient(from 0deg, #8a7f70 0 12deg, transparent 12deg 60deg, #8a7f70 60deg 72deg, transparent 72deg 120deg, #8a7f70 120deg 132deg, transparent 132deg 180deg, #8a7f70 180deg 192deg, transparent 192deg 240deg, #8a7f70 240deg 252deg, transparent 252deg 300deg, #8a7f70 300deg 312deg, transparent 312deg 360deg);
  animation: spin 2.2s linear infinite; animation-play-state: paused;
}
.reel-r .hub { animation-duration: 1.6s; }
.deck.playing .reel .hub { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }
.tape-path { position: absolute; left: 80px; right: 80px; bottom: 12px; height: 2px; background: linear-gradient(90deg, transparent, #3a2c2a 15%, #3a2c2a 85%, transparent); }
.cassette-foot { display: flex; justify-content: center; gap: 18px; margin-top: 2px; }
.cassette-foot i { width: 10px; height: 6px; border-radius: 2px; background: #0a0709; box-shadow: inset 0 1px 2px rgba(0,0,0,0.9); }

/* VU meter + counter */
.meter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.vu { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; flex: 1; min-width: 0; }
.vu-label { font-size: 0.6rem; font-weight: 700; color: #9c8f98; }
.vu-bars { display: flex; gap: 3px; height: 10px; }
.vu-bars i {
  flex: 1; border-radius: 1px; background: #2a2230; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
  transform-origin: bottom; animation: vuBar 1.1s ease-in-out infinite; animation-play-state: paused; opacity: 0.35;
}
.vu-bars i:nth-child(-n+8) { --on: #f5a524; } .vu-bars i:nth-child(n+9) { --on: #ff3b4e; }
.deck:not(.playing) .vu-bars i { animation: none; }
.deck.playing .vu-bars i { animation-play-state: running; }
.vu-bars i:nth-child(1){animation-delay:-.1s}.vu-bars i:nth-child(2){animation-delay:-.7s}.vu-bars i:nth-child(3){animation-delay:-.3s}.vu-bars i:nth-child(4){animation-delay:-.9s}
.vu-bars i:nth-child(5){animation-delay:-.5s}.vu-bars i:nth-child(6){animation-delay:-.2s}.vu-bars i:nth-child(7){animation-delay:-.8s}.vu-bars i:nth-child(8){animation-delay:-.4s}
.vu-bars i:nth-child(9){animation-delay:-.6s;animation-duration:1.6s}.vu-bars i:nth-child(10){animation-delay:-1s;animation-duration:1.9s}.vu-bars i:nth-child(11){animation-delay:-.35s;animation-duration:2.3s}.vu-bars i:nth-child(12){animation-delay:-.15s;animation-duration:2.8s}
@keyframes vuBar { 0%,100% { background: var(--on); opacity: .95; box-shadow: 0 0 6px var(--on); } 45% { background: #2a2230; opacity: .35; box-shadow: none; } 70% { background: var(--on); opacity: .8; } }
.counter {
  flex: none; font-family: 'Space Grotesk', monospace; font-variant-numeric: tabular-nums; font-size: 0.82rem; letter-spacing: 0.08em; color: #f3ead5;
  background: #0a0709; padding: 4px 10px; border-radius: 4px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.08);
}
.counter small { color: #6d6068; margin: 0 6px; }

/* Tape position / seek */
.progress { position: relative; height: 8px; border-radius: 999px; margin: 12px 2px 14px; cursor: pointer; background: #130e15; box-shadow: inset 0 2px 4px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.08); }
.progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--brass), var(--rose)); box-shadow: 0 0 8px rgba(255, 77, 109, 0.35); }
.progress-knob {
  position: absolute; top: 50%; left: 0%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fff2c8, var(--brass) 60%, #7a561e 100%); box-shadow: 0 2px 4px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(0,0,0,0.3);
}

/* Mechanical keys */
.keys { display: flex; align-items: stretch; gap: 8px; }
.key {
  flex: none; min-width: 58px; height: 48px; padding: 0 10px; border-radius: 6px; border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: #e9dfd2; font-size: 0.56rem; letter-spacing: 0.18em; font-weight: 700;
  background: linear-gradient(180deg, #5a4f58 0%, #3a3138 45%, #2a232c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -3px 0 rgba(0,0,0,0.55), 0 4px 0 #15101a, 0 6px 10px rgba(0,0,0,0.6);
  transition: transform .08s, box-shadow .08s;
}
.key svg { width: 18px; height: 18px; fill: #f3ead5; }
.key:hover { filter: brightness(1.1); }
.key:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.5), 0 1px 0 #15101a, 0 2px 4px rgba(0,0,0,0.6); }
.key-play { min-width: 76px; background: linear-gradient(180deg, #ff7a90 0%, #d8264f 45%, #9d1238 100%); color: #fff3f5; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -3px 0 rgba(0,0,0,0.45), 0 4px 0 #5a0a20, 0 6px 14px rgba(201, 24, 74, 0.5); }
.key-play svg { fill: #fff; width: 22px; height: 22px; }
.deck.playing .key-play { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(0,0,0,0.45), 0 2px 0 #5a0a20, 0 3px 8px rgba(201, 24, 74, 0.5); }
.key-play.attention { animation: tapPulse 1s ease-in-out infinite; }
@keyframes tapPulse { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 0 #5a0a20, 0 6px 14px rgba(201,24,74,0.5); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 0 #5a0a20, 0 0 0 6px rgba(255,77,109,0.35), 0 6px 20px rgba(201,24,74,0.8); } }
.key-sm { min-width: 40px; height: 40px; }
.key-sm svg { width: 16px; height: 16px; }
.volume { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.vol-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: -1px; }

/* Rotary volume knob */
.knob { display: flex; flex-direction: column; align-items: center; gap: 4px; user-select: none; -webkit-user-select: none; touch-action: none; outline: none; }
.knob-dial { position: relative; width: 50px; height: 50px; display: grid; place-items: center; }
.knob-dial::before { /* tick ring (280° sweep, matching the knob's travel) */
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  background: repeating-conic-gradient(from 220deg, rgba(201,162,75,0.55) 0 1.6deg, transparent 1.6deg 25deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}
.knob-face {
  --ang: -140deg;
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #6c6169, #332c35 55%, #1b161c 100%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.28), inset 0 -4px 7px rgba(0,0,0,0.75), 0 3px 6px rgba(0,0,0,0.6);
  transform: rotate(var(--ang)); transition: transform .1s ease-out; cursor: ns-resize;
}
.knob-face::after { /* subtle grip dimples */
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.05) 0 6deg, transparent 6deg 18deg);
}
.knob-indicator {
  position: absolute; top: 3px; left: 50%; width: 3px; height: 13px; border-radius: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, #ffd27a, var(--rose)); box-shadow: 0 0 7px rgba(255,77,109,0.85);
}
.knob:focus-visible .knob-face { box-shadow: inset 0 2px 3px rgba(255,255,255,0.28), inset 0 -4px 7px rgba(0,0,0,0.75), 0 0 0 3px rgba(255,77,109,0.4); }
.knob.muted .knob-indicator { background: #6d6068; box-shadow: none; }
.knob-label { font-size: 0.55rem; letter-spacing: 0.2em; color: #9c8f98; font-weight: 700; }
.grille {
  flex: none; width: 42px; border-radius: 6px; align-self: stretch;
  background: radial-gradient(circle, #0a0709 1.2px, transparent 1.4px) 0 0 / 6px 6px, #2a232c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.6);
}
@media (max-width: 560px) {
  .deck { padding: 14px 12px 10px; }
  .grille { display: none; }
  .key { min-width: 50px; }
  .key-play { min-width: 64px; }
  .reels { padding: 10px 10px 4px; }
}
@media (max-width: 400px) {
  .keys { flex-wrap: wrap; justify-content: center; }
  .volume { margin: 6px auto 0; }
}

.yt-wrap { position: fixed; left: -9999px; bottom: 0; width: 356px; height: 200px; overflow: hidden; opacity: 0.01; pointer-events: none; }
.player-note { margin: 10px 0 0; font-size: 0.72rem; color: var(--muted); text-align: center; }
.player-note a { color: var(--muted); }

.shayari-ticker {
  margin: 26px auto 0; max-width: 560px; min-height: 56px; font-family: var(--font-display); font-style: italic;
  font-size: 1.25rem; line-height: 1.5; color: #f1dbe4; transition: opacity .6s ease;
}
.shayari-ticker.fade { opacity: 0; }
.quote-mark { color: var(--rose); font-size: 1.6rem; }

.scroll-hint { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 36px; text-decoration: none; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; }
.scroll-hint i { width: 1px; height: 34px; background: linear-gradient(var(--rose), transparent); animation: drop 1.6s ease-in-out infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------------- Sections ---------------- */
.section { position: relative; z-index: 1; padding: 90px 18px; }
.section-alt { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04), rgba(255,255,255,0.02)); }
.container { max-width: 1040px; margin: 0 auto; }
.container.narrow { max-width: 760px; }
.kicker { font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--amber); font-weight: 700; margin: 0 0 10px; }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin: 0 0 16px; line-height: 1.15; }
.lead { color: var(--muted); line-height: 1.75; font-size: 1.02rem; max-width: 820px; margin: 0 0 36px; }
.lead strong { color: #fff; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.card { padding: 24px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-border); transition: transform .2s, border-color .2s; }
.card:hover { transform: translateY(-3px); border-color: rgba(255, 77, 109, 0.45); }
.card-icon { font-size: 1.8rem; margin-bottom: 10px; }
.card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.card p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 0.95rem; }

/* ---------------- About: rustic "old money" estate ---------------- */
:root { --gold: #c9a24b; --gold-lite: #e8cf8f; --oxblood: #2a1414; --ivory: #efe6d2; }
/* Section stays transparent so the shared night sky + clouds show through,
   matching the sections above and below. Only the gold frame remains. */
.estate {
  position: relative; text-align: center; padding: 46px 32px 50px;
  border: 1px solid rgba(201, 162, 75, 0.35);
  box-shadow: inset 0 0 0 1px rgba(201,162,75,0.10);
  background: transparent;
  border-radius: 4px;
}
.estate::before, .estate::after { /* engraved corner frame */
  content: ""; position: absolute; width: 26px; height: 26px; border: 1px solid var(--gold); opacity: 0.6;
}
.estate::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.estate::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.crest {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 14px;
  font-family: var(--font-display); font-style: italic; letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.8rem; color: var(--gold-lite);
}
.crest .rule { display: inline-block; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.crest .rule:last-child { background: linear-gradient(90deg, var(--gold), transparent); }

.estate-title {
  font-family: var(--font-display); font-weight: 600; color: var(--ivory);
  text-shadow: 0 1px 0 rgba(0,0,0,0.5); margin: 0 0 6px;
}
.fleuron { color: var(--gold); font-size: 1.5rem; line-height: 1; margin: 6px 0 22px; text-shadow: 0 0 14px rgba(201,162,75,0.4); }

.estate-lead {
  max-width: 760px; margin: 0 auto; text-align: left; color: #d8c9b4; font-size: 1.05rem; line-height: 1.85;
  font-family: var(--font-display);
}
.estate-lead strong { color: var(--ivory); font-weight: 600; }
.estate-lead::first-letter { /* gilded drop cap */
  float: left; font-family: var(--font-display); font-weight: 600; font-size: 3.6em; line-height: 0.72;
  padding: 6px 12px 0 0; color: var(--gold);
  background: linear-gradient(180deg, var(--gold-lite), var(--gold) 55%, #8a6a2a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.estate-divider { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 34px auto 30px; color: var(--gold); font-size: 1.2rem; max-width: 520px; }
.estate-divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,162,75,0.6), transparent); }

.estate-cards { gap: 20px; }
.estate-card {
  position: relative; text-align: center; padding: 40px 24px 26px;
  background: linear-gradient(180deg, rgba(42,22,20,0.6), rgba(20,10,12,0.6));
  border: 1px solid rgba(201, 162, 75, 0.28); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(201,162,75,0.15), 0 14px 30px rgba(0,0,0,0.5);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.estate-card:hover { transform: translateY(-3px); border-color: rgba(201,162,75,0.6); box-shadow: inset 0 1px 0 rgba(201,162,75,0.25), 0 18px 40px rgba(0,0,0,0.6); }
.estate-card .card-no {
  position: absolute; top: 12px; right: 16px; font-family: var(--font-display); font-style: italic; font-size: 1rem; letter-spacing: 0.1em; color: var(--gold); opacity: 0.75;
}
.estate-card .seal {
  width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem;
  background: radial-gradient(circle at 35% 30%, rgba(232,207,143,0.18), rgba(20,10,12,0.6));
  border: 1px solid var(--gold); box-shadow: 0 0 0 4px rgba(201,162,75,0.10), inset 0 0 10px rgba(0,0,0,0.5);
  filter: saturate(0.85);
}
.estate-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.03em; color: var(--ivory); margin: 0 0 4px; }
.estate-card h3::after { content: ""; display: block; width: 40px; height: 1px; margin: 10px auto 12px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.estate-card p { color: #c8b9a4; font-size: 0.96rem; line-height: 1.7; }
@media (max-width: 560px) { .estate { padding: 34px 18px 40px; } .estate-lead { font-size: 1rem; } }

.shayari-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; transition: opacity .3s ease; }
.shayari-grid.swap { opacity: 0; }
.shayari-actions { display: flex; justify-content: center; margin-top: 26px; }
.shayari-actions .glass-btn { height: 44px; padding: 0 22px; }
.shayari-actions #shayariCount { color: var(--muted); font-weight: 500; }
.shayari-card {
  position: relative; padding: 22px 22px 44px; border-radius: 14px; background: rgba(0,0,0,0.25); border: 1px solid var(--glass-border);
  font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.55; color: #f3e1e8;
}
.shayari-card::before { content: "“"; position: absolute; top: 6px; left: 14px; font-size: 2.6rem; color: rgba(255, 77, 109, 0.5); font-style: normal; }
.shayari-card .poet, .shayari-ticker .poet {
  display: block; margin-top: 8px; font-family: var(--font-body); font-style: normal; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber);
}
.shayari-ticker .poet { margin-top: 6px; font-size: 0.7rem; }
.shayari-card button {
  position: absolute; right: 12px; bottom: 10px; font-family: var(--font-body); font-style: normal; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--glass-border); color: var(--muted); padding: 5px 10px; border-radius: 999px;
}
.shayari-card button:hover { color: #fff; border-color: var(--rose); }

.faq details { border-bottom: 1px solid var(--glass-border); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; font-weight: 600; position: relative; font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--rose); font-size: 1.4rem; transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq p { margin: 0 0 16px; color: var(--muted); line-height: 1.7; }

/* ---------------- Footer ---------------- */
.footer { position: relative; z-index: 1; padding: 60px 18px 40px; text-align: center; border-top: 1px solid var(--glass-border); background: rgba(0,0,0,0.35); }
.footer-brand { display: grid; gap: 4px; margin-bottom: 16px; }
.footer-links { display: flex; justify-content: center; gap: 18px; margin-bottom: 22px; font-size: 0.9rem; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: #fff; }
.disclaimer { max-width: 680px; margin: 0 auto 12px; font-size: 0.78rem; color: var(--muted); line-height: 1.6; }

/* ---------------- Modal ---------------- */
.modal { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 18px; background: rgba(5, 2, 8, 0.8); backdrop-filter: blur(6px); }
.modal.open { display: grid; }
.modal-card {
  position: relative; width: 100%; max-width: 420px; padding: 30px 24px 22px; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, #1c0f24, #120818); border: 1px solid rgba(255, 77, 109, 0.45); box-shadow: 0 0 0 6px rgba(255, 77, 109, 0.08), var(--shadow);
  display: grid; gap: 12px; justify-items: center;
}
.modal-card .icon-x { position: absolute; top: 8px; right: 10px; }
.modal-heart { font-size: 2.2rem; }
.modal-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.modal-card p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.qr-box { width: 200px; min-height: 60px; border-radius: 12px; background: #fff; padding: 8px; display: grid; place-items: center; }
.qr-box img { max-width: 100%; display: block; border-radius: 6px; }
.qr-box p { color: #333; font-size: 0.8rem; padding: 6px; }
.qr-box code { background: #eee; padding: 1px 4px; border-radius: 4px; }

/* ---------------- Chat panel ---------------- */
.chat {
  position: fixed; z-index: 50; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 100px));
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  background: rgba(14, 8, 20, 0.92); border: 1px solid var(--glass-border); backdrop-filter: blur(18px); box-shadow: var(--shadow);
  transform: translateY(20px) scale(0.98); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease;
}
.chat.open { transform: none; opacity: 1; pointer-events: auto; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--glass-border); }
.chat-head small { display: block; color: var(--muted); font-size: 0.75rem; }
.chat-body { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; background: rgba(255,255,255,0.07); font-size: 0.9rem; line-height: 1.45; align-self: flex-start; }
.msg.me { align-self: flex-end; background: rgba(201, 24, 74, 0.35); }
.msg .meta { display: flex; gap: 8px; font-size: 0.7rem; color: var(--muted); margin-bottom: 2px; }
.msg .meta b { color: var(--amber); font-weight: 600; }
.chat-composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--glass-border); }
.chat-composer input, .namecap-row input {
  flex: 1; min-width: 0; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--glass-border); background: rgba(255,255,255,0.06); color: #fff; outline: none;
}
.chat-composer input:focus, .namecap-row input:focus { border-color: var(--rose); }
.chat-namecap { padding: 14px; border-top: 1px solid var(--glass-border); }
.chat-namecap p { margin: 0 0 4px; }
.chat-namecap blockquote { margin: 6px 0 10px; padding: 8px 12px; border-left: 3px solid var(--rose); background: rgba(255,255,255,0.05); border-radius: 0 8px 8px 0; font-size: 0.88rem; color: #f1dbe4; }
.namecap-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }