/* lo-fi: noite chuvosa com luzes de cidade desfocadas atras da janela */
body[data-theme="lofi"] {
  background: linear-gradient(180deg, #0a1226 0%, #14202e 40%, #1c2438 100%);
  overflow: hidden;
  position: relative;
}

/* glow ambar no canto, simulando poste de rua */
body[data-theme="lofi"]::before {
  content: "";
  position: fixed; left: -10vw; bottom: -10vh;
  width: 60vw; height: 60vh;
  background: radial-gradient(circle, rgba(255, 178, 102, .25), transparent 60%);
  pointer-events: none;
  filter: blur(40px);
}
body[data-theme="lofi"]::after {
  content: "";
  position: fixed; right: -10vw; top: -5vh;
  width: 50vw; height: 50vh;
  background: radial-gradient(circle, rgba(120, 160, 255, .18), transparent 60%);
  pointer-events: none;
  filter: blur(50px);
}

/* luzes de cidade ao fundo (bokeh) */
body[data-theme="lofi"] .lofi-bokeh {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: .55;
  animation: bokeh-flicker 4s ease-in-out infinite;
}
@keyframes bokeh-flicker {
  0%, 100% { opacity: .35; }
  50%      { opacity: .7; }
}

/* riscos de chuva escorrendo (efeito janela molhada) */
body[data-theme="lofi"] .lofi-rain {
  position: absolute;
  width: 1.5px;
  background: linear-gradient(transparent, rgba(200, 220, 255, .55));
  animation: rain-drip linear infinite;
  filter: blur(.5px);
}
@keyframes rain-drip {
  from { transform: translateY(-30vh); opacity: 0; }
  10%  { opacity: 1; }
  to   { transform: translateY(110vh); opacity: 0; }
}

/* gota individual escorrendo na "janela" */
body[data-theme="lofi"] .lofi-drop {
  position: absolute;
  width: 6px; height: 6px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.8), rgba(180,200,240,.4));
  border-radius: 50%;
  filter: blur(1px);
  animation: drop-slide ease-in infinite;
}
@keyframes drop-slide {
  0%   { transform: translateY(-5vh) scale(1); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(110vh) scale(.6); opacity: 0; }
}

/* grao de filme suave */
body[data-theme="lofi"] .lofi-grain {
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 3px 3px;
  animation: grain-shift .12s steps(4) infinite;
  opacity: .4;
  mix-blend-mode: overlay;
}
@keyframes grain-shift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-1px,1px); }
  50%  { transform: translate(1px,-1px); }
  75%  { transform: translate(-1px,-1px); }
  100% { transform: translate(0,0); }
}

/* vinil discreto */
body[data-theme="lofi"] .lofi-vinyl {
  position: fixed;
  bottom: 16px; right: 16px;
  width: 72px; height: 72px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ff8c5a 0 12px, #1a0e0a 13px 16px, #0a0606 17px 100%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 2px, rgba(255,255,255,.04) 2px 3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 calc(15px + 25px * var(--bass, 0)) rgba(255, 140, 90, .35);
  animation: vinyl-spin calc(4s - 2s * var(--bass, 0)) linear infinite;
  pointer-events: none;
  z-index: 5;
  opacity: .85;
}
@keyframes vinyl-spin { to { transform: rotate(360deg); } }

/* card sem backdrop-filter (caro) */
body[data-theme="lofi"] .profile-card {
  background: rgba(20, 30, 50, .92);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow:
    0 8px 32px rgba(0,0,0,.5),
    0 0 calc(15px + 25px * var(--bass, 0)) rgba(255, 178, 102, .25);
  transform: scale(calc(1 + 0.02 * var(--beat, 0)));
  transition: transform .12s ease;
}
body[data-theme="lofi"] .profile-card h1 {
  color: #ffe8c4;
  text-shadow: 0 0 calc(6px * var(--bass, 0)) rgba(255, 178, 102, .8);
}
body[data-theme="lofi"] .profile-card .uname { color: #c0c8da; }