:root {
  --glass-bg: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --text-dim: rgba(255,255,255,.45);
  --gold: #d4a843;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { background:#0a0a0a; scroll-behavior:smooth; }
body { font-family:'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif; color:var(--text); }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.sr-only:focus { position:absolute; width:auto; height:auto; padding:8px 16px; margin:0; clip:auto; z-index:100; }

.bg-video {
  position: fixed;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  transform: translate(-50%,-50%);
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.blobs { position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:.25; animation:blobFloat 12s ease-in-out infinite alternate; }
.blob-1 { width:350px; height:350px; background:radial-gradient(circle,#6c5ce7,transparent 70%); top:-80px; left:-60px; animation-duration:14s; }
.blob-2 { width:300px; height:300px; background:radial-gradient(circle,#e8622c,transparent 70%); bottom:-60px; right:-40px; animation-duration:10s; animation-delay:-4s; }
.blob-3 { width:250px; height:250px; background:radial-gradient(circle,#d4a843,transparent 70%); top:40%; left:50%; transform:translateX(-50%); animation-duration:16s; animation-delay:-8s; }

@keyframes blobFloat {
  0%   { transform:translate(0,0) scale(1); }
  33%  { transform:translate(30px,-40px) scale(1.1); }
  66%  { transform:translate(-20px,30px) scale(.95); }
  100% { transform:translate(15px,-15px) scale(1.05); }
}

.hero-overlay {
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.78), transparent 42%, rgba(0,0,0,.38));
}

#rain-canvas { position:fixed; inset:0; z-index:15; pointer-events:none; opacity:0; transition:opacity .8s ease-in-out; }
#rain-canvas.active { opacity:1; }

#lightning-flash {
  position:fixed; inset:0; width:100vw; height:100vh;
  pointer-events:none; z-index:18;
  background:rgba(200,220,255,.92);
  opacity:0; mix-blend-mode:screen;
  transition:opacity .05s ease-out;
}

#yt-player-mount { position:fixed; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

.hero {
  position:relative; z-index:10;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:72px 16px 28px;
  overflow:hidden; user-select:none;
}

.top-bar {
  position:absolute; top:12px; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  max-width:1200px; margin:0 auto; padding:0 12px;
}
.online-pill, .header-pill {
  height:36px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(10,10,10,.65);
  border:1px solid rgba(255,255,255,.22);
  border-radius:9999px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 4px 16px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.15);
  color:var(--text);
  font-size:11.5px; font-weight:600;
  padding:0 14px;
  white-space:nowrap;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  text-decoration:none;
}
.header-pill:hover { background:rgba(255,255,255,.18); border-color:rgba(212,168,67,.5); color:#fff; transform:translateY(-1px); }
.top-nav { display:flex; align-items:center; gap:8px; }
.nav-btn { cursor:pointer; font-family:inherit; }
.online-dot { width:8px; height:8px; border-radius:50%; background:#34d399; animation:pulse-dot 2s infinite; box-shadow:0 0 8px rgba(52,211,153,.8); }
@keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.online-num { font-family:ui-monospace,monospace; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.online-label { font-size:10px; font-weight:400; color:rgba(255,255,255,.6); }

.hero-logo { text-align:center; margin-top:24px; filter:drop-shadow(0 12px 35px rgba(0,0,0,.95)); }
.hindi-logo {
  font-family:'Yatra One',serif;
  font-weight:400;
  font-size:clamp(4.5rem, 16vw, 9.5rem);
  line-height:.95;
  letter-spacing:.02em;
  color:#fff;
  text-shadow:0 12px 35px rgba(0,0,0,.95);
}
.tagline {
  margin-top:10px;
  font-size:11px; letter-spacing:.35em; text-transform:uppercase;
  color:var(--gold);
  text-shadow:0 2px 10px rgba(0,0,0,.85);
}

.player-stack {
  position:relative;
  width:100%; max-width:600px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  margin-top:auto;
  margin-bottom:auto;
}

.toggles { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }

.mood-select-wrap { position:relative; display:inline-block; }
.mood-select {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  height:36px; line-height:34px;
  background:rgba(10,10,10,.55);
  border:1px solid var(--glass-border);
  color:var(--text);
  font-size:11.5px; font-weight:600; font-family:inherit;
  padding:0 32px 0 16px;
  border-radius:9999px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.15);
  transition:all .2s cubic-bezier(.4,0,.2,1);
}
.mood-select:hover { border-color:rgba(212,168,67,.5); background:rgba(255,255,255,.18); transform:translateY(-1px); }
.mood-select:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.mood-select option { background:#141210; color:#fff; }
.mood-select-arrow {
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  width:11px; height:11px; color:var(--gold); pointer-events:none;
}

body.scene-bhojpuri .hero-overlay { background:linear-gradient(to top, rgba(38,6,26,.82), transparent 44%, rgba(88,12,52,.38)); }
body.scene-bhojpuri .blob-1 { background:radial-gradient(circle,#ff2d95,transparent 70%); }
body.scene-bhojpuri .blob-2 { background:radial-gradient(circle,#ffb02e,transparent 70%); }
body.scene-bhojpuri .blob-3 { background:radial-gradient(circle,#25c7a3,transparent 70%); }
body.scene-bhojpuri .tagline { color:#ff5fb2; }

body.scene-roadtrip .hero-overlay { background:linear-gradient(to top, rgba(46,18,2,.82), transparent 45%, rgba(140,62,8,.36)); }
body.scene-roadtrip .blob-1 { background:radial-gradient(circle,#ff7a18,transparent 70%); }
body.scene-roadtrip .blob-2 { background:radial-gradient(circle,#ffc300,transparent 70%); }
body.scene-roadtrip .blob-3 { background:radial-gradient(circle,#ff4d00,transparent 70%); }
body.scene-roadtrip .tagline { color:#ffa53c; }
.glass-pill {
  background:rgba(10,10,10,.55);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
}
.toggle-btn { display:flex; align-items:center; gap:5px; padding:7px 13px; border-radius:9999px; color:var(--text-dim); font-size:12px; font-family:inherit; cursor:pointer; transition:all .3s ease; user-select:none; }
.toggle-btn:hover { border-color:rgba(255,255,255,.25); color:var(--text); background:rgba(255,255,255,.1); }
.toggle-btn.active { background:rgba(212,168,67,.12); border-color:rgba(212,168,67,.35); color:var(--gold); box-shadow:0 0 20px rgba(212,168,67,.1); }
.toggle-icon { font-size:14px; line-height:1; }
.liked-heart { color:var(--gold); }
.toggle-badge { font-size:9px; padding:1px 6px; border-radius:999px; background:rgba(52,211,153,.2); color:#34d399; font-weight:600; }
.toggle-btn.active .toggle-badge { background:rgba(52,211,153,.3); }

.music-player {
  display:flex; align-items:center; gap:12px;
  width:100%; max-width:580px;
  background:rgba(10,10,10,.65);
  border:1px solid rgba(255,255,255,.22);
  border-radius:24px;
  padding:12px 18px;
  box-shadow:0 25px 50px rgba(0,0,0,.9), inset 0 1px 1px rgba(255,255,255,.2);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
}

.cover-frame {
  width:48px; height:48px; border-radius:50%;
  position:relative; flex-shrink:0;
  border:1px solid rgba(255,255,255,.25);
  background:#1c1917;
  overflow:visible;
}
.cover-img {
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; display:block; background-color:#1c1917;
}
.cover-frame.spin .cover-img { animation:discSpin 3.2s linear infinite; }
@keyframes discSpin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.cover-hole {
  position:absolute; top:50%; left:50%;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  background:#0a0a0a; border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  pointer-events:none;
}

.track-block { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.track-name {
  font-size:13px; font-weight:700; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.station { font-size:10px; color:rgba(255,255,255,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.progress-row {
  display:flex; align-items:center; gap:8px; margin-top:4px;
  font-size:10px; font-family:ui-monospace,monospace; color:rgba(255,255,255,.6);
}
.music-time { font-variant-numeric:tabular-nums; min-width:26px; }
.music-bar { flex:1; height:5px; background:rgba(255,255,255,.2); border-radius:999px; overflow:hidden; cursor:pointer; position:relative; }
.music-bar-fill { height:100%; width:0%; background:var(--gold); border-radius:999px; transition:width .2s linear; box-shadow:0 0 8px rgba(212,168,67,.5); }

.player-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }

.volume-wrap { display:flex; align-items:center; gap:4px; }
#volume-slider {
  width:54px; height:4px;
  accent-color:var(--gold);
  cursor:pointer;
  background:rgba(255,255,255,.2);
  border-radius:999px;
  appearance:none; -webkit-appearance:none;
  outline:none;
}
#volume-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:11px; height:11px; border-radius:50%;
  background:var(--gold); border:none;
  box-shadow:0 0 6px rgba(212,168,67,.6);
  cursor:pointer;
}
#volume-slider::-moz-range-thumb {
  width:11px; height:11px; border-radius:50%;
  background:var(--gold); border:none; cursor:pointer;
}
.icon-button {
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.9);
  width:32px; height:32px; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.icon-button:hover { color:#fff; background:rgba(255,255,255,.25); transform:scale(1.08); }
.icon-button:active { transform:scale(.92); }
.icon-button svg { width:16px; height:16px; fill:currentColor; }
.play-button {
  background:var(--gold); color:#000;
  width:40px; height:40px;
  border-color:rgba(255,255,255,.4);
  box-shadow:0 0 20px rgba(212,168,67,.5);
}
.play-button:hover { background:#e8c44e; color:#000; transform:scale(1.1); }
.play-button svg { width:18px; height:18px; }

.icon-button:focus-visible, .toggle-btn:focus-visible, .music-bar:focus-visible, .header-pill:focus-visible {
  outline:2px solid var(--gold); outline-offset:2px;
}

.mini-footer {
  font-size:9px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.45); font-family:ui-monospace,monospace;
}

.scroll-cue {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:none; flex-direction:column; align-items:center; gap:2px;
  color:rgba(255,255,255,.55); text-decoration:none;
  font-size:10px; letter-spacing:.25em; text-transform:uppercase;
  animation:bob 2.2s ease-in-out infinite;
}
.scroll-cue svg { width:14px; height:14px; }
.scroll-cue:hover { color:var(--gold); }
@keyframes bob { 0%,100%{transform:translate(-50%,0); opacity:.55;} 50%{transform:translate(-50%,6px); opacity:1;} }
@media (min-width:640px){ .scroll-cue { display:flex; } }

.about-section { position:relative; z-index:3; background:rgba(10,10,10,.95); border-top:1px solid rgba(255,255,255,.05); padding:60px 20px; }
.about-inner { max-width:700px; margin:0 auto; text-align:center; }
.about-label { font-size:11px; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; font-weight:600; margin-bottom:12px; }
.about-heading { font-size:28px; font-weight:700; color:var(--text); margin-bottom:20px; line-height:1.2; }
.about-text { font-size:14px; color:var(--text-dim); line-height:1.75; max-width:600px; margin:0 auto; }
.about-text strong { color:var(--text); font-weight:600; }

.about-stats { display:flex; justify-content:center; margin-top:34px; }
.stat { padding:0 30px; text-align:center; position:relative; }
.stat + .stat::before {
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  height:34px; width:1px; background:rgba(255,255,255,.12);
}
.stat-num {
  display:block; font-size:27px; font-weight:700; color:var(--gold);
  font-family:'Space Grotesk',sans-serif; letter-spacing:-.02em; line-height:1.15;
}
.stat-label { font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-dim); }

.about-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; max-width:760px; margin:44px auto 0; }
.about-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:26px 24px; text-align:left;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.about-card:hover {
  border-color:rgba(212,168,67,.35);
  background:rgba(212,168,67,.05);
  transform:translateY(-3px);
}
.about-card-icon {
  width:40px; height:40px; border-radius:11px;
  background:rgba(212,168,67,.1); border:1px solid rgba(212,168,67,.28);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); margin-bottom:14px;
}
.about-card-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.about-card h3 { font-size:15px; font-weight:600; color:var(--text); margin-bottom:6px; }
.about-card p { font-size:13px; color:var(--text-dim); line-height:1.5; }

.faq-section { position:relative; z-index:3; background:rgba(10,10,10,.95); border-top:1px solid rgba(255,255,255,.05); padding:60px 20px; }
.faq-inner { max-width:600px; margin:0 auto; text-align:center; }
.faq-list { margin-top:32px; text-align:left; }
.faq-item { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px 20px; margin-bottom:8px; }
.faq-item[open] { border-color:rgba(212,168,67,.2); }
.faq-item[open] .faq-chevron { transform:rotate(180deg); }
.faq-summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; color:var(--text); font-size:14px; font-weight:500; list-style:none; }
.faq-summary::-webkit-details-marker { display:none; }
.faq-chevron { font-size:12px; color:var(--gold); transition:transform .2s ease; }
.faq-answer { font-size:13px; color:var(--text-dim); line-height:1.6; margin-top:12px; }

.site-footer { position:relative; z-index:3; background:rgba(10,10,10,.98); border-top:1px solid rgba(255,255,255,.05); padding:40px 20px; text-align:center; }
.footer-brand { font-family:'Yatra One',serif; font-size:24px; color:rgba(212,168,67,.6); margin-bottom:4px; }
.footer-sub { font-size:12px; color:var(--text-dim); }
.footer-disclaimer { font-size:11px; color:rgba(255,255,255,.3); max-width:500px; margin:16px auto 0; line-height:1.5; }

#install-prompt-card { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:50; max-width:380px; width:calc(100% - 32px); }
#install-prompt-card.hidden { display:none; }
.install-card-inner { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:16px; background:rgba(15,8,5,.95); backdrop-filter:blur(20px); border:1px solid rgba(212,168,67,.3); box-shadow:0 15px 40px rgba(0,0,0,.8); }
.install-card-text { flex:1; min-width:0; }
.install-card-title { font-size:14px; font-weight:700; color:var(--text); }
.install-card-sub { font-size:11px; color:var(--text-dim); }
.install-btn { flex-shrink:0; padding:8px 16px; border-radius:20px; background:var(--gold); color:#000; font-size:12px; font-weight:700; border:none; cursor:pointer; transition:all .2s; }
.install-btn:hover { background:#e8c44e; transform:scale(1.05); }
.install-close { flex-shrink:0; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.1); border:none; color:rgba(255,255,255,.6); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.install-close:hover { background:rgba(255,255,255,.2); }

#install-help { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px; }
#install-help.hidden { display:none; }
.install-help-card { position:relative; max-width:340px; width:100%; padding:24px 22px 20px; border-radius:18px; background:rgba(15,8,5,.97); border:1px solid rgba(212,168,67,.35); box-shadow:0 20px 60px rgba(0,0,0,.8); }
.install-help-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:14px; padding-right:24px; }
.install-help-steps { margin:0; padding-left:20px; font-size:13px; color:var(--text-dim); line-height:2; text-align:left; }
.install-help-card .install-close { position:absolute; top:12px; right:12px; }

@media(max-width:560px) {
  #btn-install .nav-label { display:none; }
  #btn-install { padding-left:10px; padding-right:10px; }
}

#sound-pill {
  position:fixed; bottom:84px; left:50%; transform:translateX(-50%);
  z-index:45; display:flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:9999px;
  background:var(--gold); color:#000;
  font-size:12px; font-weight:700; font-family:inherit;
  border:none; cursor:pointer;
  box-shadow:0 10px 30px rgba(212,168,67,.45);
  animation:pulse-gold 1.6s ease-in-out infinite;
}
#sound-pill.hidden { display:none; }
@keyframes pulse-gold {
  0%,100% { transform:translateX(-50%) scale(1); }
  50% { transform:translateX(-50%) scale(1.06); }
}

.rain-level-wrap {
  display:none; align-items:center; gap:6px;
  padding:6px 12px;
  background:rgba(10,10,10,.55);
  border:1px solid var(--glass-border);
  border-radius:9999px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.rain-level-wrap.visible { display:flex; }
.rain-level-icon { font-size:12px; line-height:1; }
#rain-level { width:90px; accent-color:var(--gold); height:4px; cursor:pointer; }

#heart-layer { position:fixed; inset:0; pointer-events:none; z-index:70; overflow:hidden; }
.float-heart {
  position:absolute; transform:translate(-50%,-50%);
  animation:float-heart-up var(--dur,1.6s) ease-out forwards;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}
@keyframes float-heart-up {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.4); }
  15% { opacity:1; transform:translate(calc(-50% + var(--dx,0px)*.2), -70%) scale(1.15); }
  100% { opacity:0; transform:translate(calc(-50% + var(--dx,0px)), calc(-50% - 130px)) scale(.85); }
}

.list-panel {
  width:100%; max-width:580px;
  background:rgba(10,10,10,.85);
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:0 25px 50px rgba(0,0,0,.9), inset 0 1px 1px rgba(255,255,255,.15);
  padding:12px 14px;
}
.list-panel.hidden { display:none; }

@media (min-width:1100px) {
  .list-panel {
    position:absolute;
    left:calc(100% + 16px);
    top:50%;
    transform:translateY(-50%);
    width:min(320px, calc((100vw - 600px)/2 - 32px));
    max-width:none;
  }
}
.list-head { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.list-tab {
  background:rgba(255,255,255,.08); border:1px solid transparent;
  color:var(--text-dim); font-size:11.5px; font-weight:600;
  padding:5px 12px; border-radius:9999px; cursor:pointer; transition:all .2s;
  font-family:inherit;
}
.list-tab:hover { color:var(--text); }
.list-tab.active { background:rgba(212,168,67,.15); border-color:rgba(212,168,67,.4); color:var(--gold); }
.list-close {
  margin-left:auto; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.1); border:none; color:rgba(255,255,255,.6);
  font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.list-close:hover { background:rgba(255,255,255,.2); color:#fff; }
.list-items { list-style:none; max-height:240px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.list-item {
  display:flex; align-items:center; gap:10px;
  padding:6px 8px; border-radius:12px; cursor:pointer;
  transition:background .2s;
}
.list-item:hover { background:rgba(255,255,255,.07); }
.list-thumb { width:44px; height:33px; border-radius:8px; object-fit:cover; flex-shrink:0; background:#1c1917; }
.list-meta { flex:1; min-width:0; }
.list-title { font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-sub { font-size:10px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-remove {
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.08); border:none; color:rgba(255,255,255,.5);
  font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.list-remove:hover { background:rgba(239,68,68,.25); color:#fca5a5; }
.list-empty { text-align:center; color:var(--text-dim); font-size:12px; padding:16px 0; list-style:none; }

#toast {
  position:fixed; bottom:88px; left:50%; transform:translateX(-50%) translateY(8px);
  z-index:55; max-width:calc(100% - 40px);
  background:rgba(10,10,10,.92);
  border:1px solid rgba(212,168,67,.35);
  border-radius:9999px;
  padding:9px 18px;
  font-size:12px; font-weight:600; color:var(--text);
  box-shadow:0 10px 30px rgba(0,0,0,.7);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

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

@media (max-width:560px) {
  .music-player { flex-wrap:wrap; row-gap:10px; }
  .track-block { flex:1 1 0; min-width:0; }
  .player-actions { width:100%; justify-content:center; }
}

@media (max-width:480px) {
  .hero { padding:64px 12px 22px; }
  .top-link { display:none; }
  .online-pill { padding:0 10px; }
  .music-player { gap:10px; padding:12px 14px; border-radius:20px; }
  .track-name { font-size:12px; }
  .blob-1 { width:220px; height:220px; }
  .blob-2 { width:200px; height:200px; }
  .blob-3 { width:160px; height:160px; }
  .toggles { gap:6px; }
  .toggle-btn { padding:6px 10px; font-size:11px; }
}

/* ===== Mobile performance mode: kill expensive GPU effects ===== */
@media (max-width:768px){
  .blob{ display:none !important; }
  *, *::before, *::after{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .bg-video{ filter:none !important; }
}