/* =========================================================================
   YEAR IN MUSIC — WRAPPED
   Token system
========================================================================= */
:root{
  --bg:            #07070b;
  --bg-alt:        #0d0d14;
  --bg-elev:       #131320;

  --glass:         rgba(255,255,255,.045);
  --glass-strong:  rgba(255,255,255,.08);
  --border:        rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.18);

  --text:          #f5f4f8;
  --muted:         #a6a2b3;
  --muted-2:       #726e80;

  --green:  #1db954;
  --green-2:#3fe08a;
  --purple: #7c3aed;
  --pink:   #ec4899;
  --pink-2: #f0a3c8;

  --gradient-main: linear-gradient(120deg, var(--green) 0%, var(--purple) 55%, var(--pink) 100%);
  --gradient-soft: linear-gradient(135deg, rgba(29,185,84,.16), rgba(124,58,237,.16) 55%, rgba(236,72,153,.16) 100%);

  --ease-spring: cubic-bezier(.22,1,.36,1);

  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;

  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --container: 1080px;
}

/* =========================================================================
   RESET & BASE
========================================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ol,ul,figure{ margin:0; }
ol,ul{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
input{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
svg{ display:block; fill:currentColor; }
code{ font-family:var(--font-mono); }

::selection{ background:var(--purple); color:#fff; }

:focus-visible{
  outline:2px solid var(--green-2);
  outline-offset:3px;
  border-radius:6px;
}

/* =========================================================================
   SHARED PRIMITIVES
========================================================================= */
.grad-text{
  background:var(--gradient-main);
  background-size:220% 220%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shimmer 6s ease-in-out infinite;
}

.glass{
  background:var(--glass);
  border:1px solid var(--border);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--green-2);
  margin:0 0 .6rem;
}

.btn{
  --btn-h: 54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  height:var(--btn-h);
  padding:0 1.6rem;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:600;
  font-size:.98rem;
  cursor:pointer;
  transition:transform .45s var(--ease-spring), box-shadow .45s var(--ease-spring), background .3s ease, border-color .3s ease;
}
.btn:active{ transform:scale(.97); }
.btn-block{ width:100%; }
.btn-lg{ --btn-h:58px; font-size:1.02rem; }

.btn-primary{
  background:var(--gradient-main);
  background-size:160% 160%;
  color:#08080b;
  box-shadow:0 10px 30px -8px rgba(124,58,237,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  animation:breathe-glow 3.4s ease-in-out infinite;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px -8px rgba(236,72,153,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
  background-position:100% 0;
}
.btn-primary .arrow{ transition:transform .4s var(--ease-spring); display:inline-block; }
.btn-primary:hover .arrow{ transform:translateX(4px); }

.btn-ghost{
  background:var(--glass);
  border-color:var(--border-strong);
  color:var(--text);
}
.btn-ghost:hover{
  background:var(--glass-strong);
  border-color:rgba(255,255,255,.3);
  transform:translateY(-1px);
}



.screen{
  position:relative;
  min-height:100svh;
  padding:5rem 1.25rem;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}

.bg-wash{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 50% at 18% 10%, rgba(29,185,84,.14), transparent 60%),
    radial-gradient(55% 45% at 85% 15%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgba(236,72,153,.10), transparent 60%),
    var(--bg);
  animation:hue-drift 16s ease-in-out infinite alternate;
}

/* floating musical note particles — decorative, ambient motion */
.notes-field{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.note{
  position:absolute;
  bottom:-10%;
  font-size:1.6rem;
  color:rgba(255,255,255,.16);
  filter:blur(.2px);
  animation:float-up linear infinite;
}
.note.n1{ left:8%;  font-size:1.4rem; color:rgba(29,185,84,.35);  animation-duration:14s; animation-delay:0s; }
.note.n2{ left:22%; font-size:2rem;   color:rgba(124,58,237,.35); animation-duration:19s; animation-delay:3s; }
.note.n3{ left:45%; font-size:1.2rem; color:rgba(236,72,153,.3);  animation-duration:16s; animation-delay:1.5s; }
.note.n4{ left:66%; font-size:1.8rem; color:rgba(29,185,84,.28);  animation-duration:21s; animation-delay:5s; }
.note.n5{ left:80%; font-size:1.3rem; color:rgba(236,72,153,.32); animation-duration:15s; animation-delay:2.5s; }
.note.n6{ left:92%; font-size:1.7rem; color:rgba(124,58,237,.3);  animation-duration:18s; animation-delay:7s; }

/* decorative equalizer bars — "now playing" flourish */
.eq-bars{
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:22px;
}
.eq-bars span{
  width:4px;
  border-radius:3px;
  background:var(--gradient-main);
  animation:eq-bounce 1s ease-in-out infinite;
}
.eq-bars span:nth-child(1){ height:40%; animation-delay:-.9s; }
.eq-bars span:nth-child(2){ height:70%; animation-delay:-.6s; }
.eq-bars span:nth-child(3){ height:100%; animation-delay:-.3s; }
.eq-bars span:nth-child(4){ height:55%; animation-delay:-.75s; }
.eq-bars span:nth-child(5){ height:85%; animation-delay:-.15s; }
.eq-bars--mini{ height:15px; gap:3px; opacity:.8; }
.eq-bars--mini span{ width:3px; }

/* =========================================================================
   SETUP SCREEN
========================================================================= */
.setup-card{
  width:100%;
  max-width:520px;
  border-radius:var(--r-xl);
  padding:2.25rem 1.75rem 2.5rem;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
}

.setup-head{ margin-bottom:1.75rem; }
.setup-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.6rem, 5vw, 2.2rem);
  line-height:1.15;
  margin:0 0 .6rem;
}
.setup-sub{ color:var(--muted); font-size:.96rem; max-width:42ch; }

.mode-toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.4rem;
  padding:.35rem;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  margin-bottom:1.75rem;
}
.mode-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  height:46px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-weight:600;
  font-size:.88rem;
  cursor:pointer;
  transition:background .4s var(--ease-spring), color .3s ease, box-shadow .4s var(--ease-spring);
}
.mode-icon{ width:16px; height:16px; opacity:.8; flex:none; }
.mode-btn.is-active{
  background:var(--gradient-main);
  color:#08080b;
  box-shadow:0 8px 24px -8px rgba(124,58,237,.6);
}
.mode-btn.is-active .mode-icon{ opacity:1; }
.mode-btn:not(.is-active):hover{ color:var(--text); background:rgba(255,255,255,.06); }

.mode-panel{ display:none; }
.mode-panel.is-active{
  display:block;
  animation:fade-up .5s var(--ease-spring) both;
}

.steps{ display:flex; flex-direction:column; gap:1rem; margin-bottom:1.75rem; }
.step{ display:flex; gap:.85rem; align-items:flex-start; }
.step-num{
  flex:none;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--glass-strong);
  border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--green-2);
}
.step-title{ font-weight:600; font-size:.92rem; margin:0 0 .15rem; }
.step-copy{ color:var(--muted); font-size:.85rem; line-height:1.5; }

.field-label{
  display:block;
  font-size:.78rem;
  color:var(--muted);
  margin:0 0 .5rem;
  letter-spacing:.02em;
}

.code-field{
  display:flex;
  align-items:stretch;
  gap:.5rem;
  margin-bottom:1.4rem;
}
.code-input{
  flex:1;
  min-width:0;
  height:48px;
  padding:0 .9rem;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:rgba(0,0,0,.35);
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:.82rem;
}
.copy-btn{
  flex:none;
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:0 .9rem;
  border-radius:var(--r-sm);
  border:1px solid var(--border-strong);
  background:var(--glass-strong);
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:background .3s ease, transform .4s var(--ease-spring);
}
.copy-btn svg{ width:15px; height:15px; }
.copy-btn:hover{ background:rgba(255,255,255,.14); transform:translateY(-1px); }

.text-input{
  width:100%;
  height:50px;
  padding:0 1rem;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  margin-bottom:1.6rem;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.text-input::placeholder{ color:var(--muted-2); }
.text-input:focus{
  outline:none;
  border-color:var(--purple);
  box-shadow:0 0 0 4px rgba(124,58,237,.22);
}

.dropzone{
  border:1.5px dashed var(--border-strong);
  border-radius:var(--r-md);
  padding:2.2rem 1.4rem;
  text-align:center;
  margin-bottom:1.6rem;
  background:rgba(255,255,255,.02);
  transition:border-color .3s ease, background .3s ease;
  cursor:pointer;
}
.dropzone:hover{
  border-color:var(--green-2);
  background:rgba(29,185,84,.05);
}
.dropzone-icon{
  width:34px; height:34px;
  margin:0 auto .9rem;
  color:var(--green-2);
}
.dropzone-title{ font-weight:600; margin-bottom:.35rem; }
.dropzone-copy{ color:var(--muted); font-size:.86rem; margin-bottom:.5rem; }
.dropzone-copy code{ color:var(--pink-2); font-size:.82rem; }
.dropzone-hint{ color:var(--muted-2); font-size:.76rem; }

/* =========================================================================
   LOADING SCREEN
========================================================================= */
.loading-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.4rem;
  text-align:center;
}
.spinner{
  width:64px; height:64px;
  border-radius:50%;
  background:conic-gradient(from 0deg, var(--green), var(--purple), var(--pink), var(--green));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
  animation:spin 1.1s linear infinite;
  filter:drop-shadow(0 0 18px rgba(124,58,237,.55));
}
.loading-status{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.15rem;
  animation:pulse-fade 2.2s ease-in-out infinite;
}
.loading-sub{ color:var(--muted-2); font-size:.85rem; }

/* =========================================================================
   PLAYER / RECAP SCREEN
========================================================================= */
.player-screen{
  display:block;
  padding:0;
  min-height:100svh;
  background:var(--bg);
}

.player-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.55;
  will-change:transform;
}
.blob-a{
  width:52vw; height:52vw;
  max-width:640px; max-height:640px;
  top:-10%; left:-12%;
  background:radial-gradient(circle at 30% 30%, var(--green), transparent 70%);
  animation:drift-a 26s ease-in-out infinite;
}
.blob-b{
  width:46vw; height:46vw;
  max-width:560px; max-height:560px;
  top:20%; right:-14%;
  background:radial-gradient(circle at 60% 40%, var(--purple), transparent 70%);
  animation:drift-b 32s ease-in-out infinite;
}
.blob-c{
  width:50vw; height:50vw;
  max-width:600px; max-height:600px;
  bottom:-16%; left:20%;
  background:radial-gradient(circle at 50% 50%, var(--pink), transparent 70%);
  animation:drift-c 30s ease-in-out infinite;
}
.blob-d{
  width:36vw; height:36vw;
  max-width:420px; max-height:420px;
  top:55%; left:-10%;
  background:radial-gradient(circle at 40% 40%, var(--green-2), transparent 70%);
  animation:drift-b 24s ease-in-out infinite reverse;
  opacity:.4;
}
.blob-e{
  width:40vw; height:40vw;
  max-width:460px; max-height:460px;
  top:5%; right:20%;
  background:radial-gradient(circle at 50% 50%, var(--pink-2), transparent 70%);
  animation:drift-c 22s ease-in-out infinite reverse;
  opacity:.35;
}
.grain{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.5) .6px, transparent .6px);
  background-size:3px 3px;
  opacity:.03;
}

.player-chrome{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 1.4rem;
  background:linear-gradient(to bottom, rgba(7,7,11,.85), rgba(7,7,11,0));
}
.restart-link{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.82rem;
  font-weight:600;
  color:var(--muted);
  transition:color .3s ease;
}
.restart-link svg{ width:15px; height:15px; }
.restart-link:hover{ color:var(--text); }

.progress-dots{
  display:flex;
  align-items:center;
  gap:5px;
  flex:1;
  justify-content:center;
  max-width:320px;
}
.dot{
  flex:1;
  height:4px;
  min-width:8px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  transition:background .3s ease, box-shadow .3s ease;
}
.dot.is-done{ background:rgba(255,255,255,.5); }
.dot.is-active{
  background:var(--gradient-main);
  height:6px;
  box-shadow:0 0 12px rgba(124,58,237,.7);
}

.nav-cluster{ display:flex; gap:.5rem; }
.nav-btn{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--border-strong);
  background:rgba(255,255,255,.06);
  font-size:1.15rem;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, transform .4s var(--ease-spring);
}
.nav-btn:hover{ background:rgba(255,255,255,.16); transform:translateY(-1px); }

.slides-stack{ position:relative; z-index:1; }

.slide{
  min-height:calc(100svh - 78px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:3rem 1.5rem;
  max-width:720px;
  margin:0 auto;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.slide-eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--green-2);
  margin-bottom:.9rem;
}
.slide-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.4rem, 4.4vw, 1.9rem);
  margin-bottom:2.2rem;
}
.slide-sub{ color:var(--muted); font-size:1.02rem; max-width:40ch; margin:0 auto; }

/* --- Intro & Outro --- */
.slide-headline, .outro-headline{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.6rem, 11vw, 5.2rem);
  line-height:1.02;
  margin-bottom:1.1rem;
  letter-spacing:-.01em;
}
.slide-outro .btn{ margin-top:2rem; }

/* --- Ranked list (Artists / Songs) --- */
.ranked-list{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  width:100%;
  text-align:left;
}
.ranked-item{
  display:grid;
  grid-template-columns:auto auto minmax(0, 1fr) minmax(70px, 110px);
  align-items:center;
  gap:1rem;
  padding:.8rem 1rem;
  border-radius:var(--r-md);
  background:var(--glass);
  border:1px solid var(--border);
  width:100%;
  color:inherit;
}
.rank-num{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.6rem;
  width:2.4ch;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.35);
}
.rank-art{
  width:52px; height:52px;
  border-radius:12px;
  background:var(--tile);
  flex:none;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.6);
}
.rank-copy{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.rank-name{ font-weight:700; font-size:1rem; }
.rank-meta{ color:var(--muted); font-size:.8rem; }
.rank-meter{
  display:block;
  height:7px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
  position:relative;
}
.rank-meter-fill{
  display:block;
  width:var(--w);
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--c), rgba(255,255,255,.9));
  box-shadow:0 0 12px color-mix(in srgb, var(--c) 65%, transparent);
}
.has-link{ text-decoration:none; }
.has-link:hover .rank-name, .has-link:hover .recent-title{ text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }

.ranked-item.rank-1{
  background:var(--gradient-soft);
  border-color:rgba(124,58,237,.4);
  box-shadow:0 0 30px -12px rgba(124,58,237,.6);
  transition:transform .5s var(--ease-spring), box-shadow .5s var(--ease-spring);
}
.ranked-item.rank-1:hover{
  transform:perspective(700px) rotateX(2deg) translateY(-3px) scale(1.015);
  box-shadow:0 20px 44px -14px rgba(124,58,237,.75);
}
.ranked-item.rank-1 .rank-num{
  font-size:2.1rem;
  color:transparent;
  background:var(--gradient-main);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-stroke:0;
}
.ranked-item.rank-1 .rank-art{ width:64px; height:64px; }
.ranked-item.rank-1 .rank-name{ font-size:1.15rem; }

/* --- Genres --- */
.genres-layout{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
  width:100%;
}
.donut{
  width:190px; height:190px;
  border-radius:50%;
  flex:none;
  background:conic-gradient(
    var(--green) 0% 38%,
    var(--purple) 38% 62%,
    var(--pink) 62% 81%,
    var(--pink-2) 81% 93%,
    var(--green-2) 93% 100%
  );
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 40px -10px rgba(124,58,237,.5);
  position:relative;
  animation:donut-pulse 4.5s ease-in-out infinite;
}
.donut-hole{
  width:66%; height:66%;
  border-radius:50%;
  background:#0b0b12;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.08);
}
.donut-pct{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; }
.donut-label{ color:var(--muted); font-size:.72rem; }

.genre-chips{ display:flex; flex-direction:column; gap:.85rem; width:100%; text-align:left; }
.genre-chip-row{ display:flex; align-items:center; gap:.55rem; margin-bottom:.35rem; font-size:.88rem; }
.genre-dot{ width:9px; height:9px; border-radius:50%; background:var(--c); flex:none; }
.genre-name{ font-weight:600; flex:1; }
.genre-pct{ color:var(--muted); font-family:var(--font-mono); font-size:.78rem; }
.genre-bar{ height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.genre-bar-fill{
  display:block; height:100%; border-radius:999px;
  background:var(--c);
  width:var(--w);
  transform-origin:left;
  animation:grow-bar 1.4s var(--ease-spring) both;
  box-shadow:0 0 10px var(--c);
}

/* --- Your Vibe --- */
.vibe-list{ display:flex; flex-direction:column; gap:1.3rem; width:100%; text-align:left; }
.vibe-row{ display:grid; grid-template-columns:1fr; gap:.5rem; }
.vibe-label{ font-size:.86rem; color:var(--muted); font-weight:600; }
.vibe-bar{ height:10px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.vibe-fill{
  display:block; height:100%; border-radius:999px;
  width:var(--w);
  background:linear-gradient(90deg, var(--c1), var(--c2));
  box-shadow:0 0 16px -2px var(--c2);
  transform-origin:left;
  animation:grow-bar 1.6s var(--ease-spring) both;
}
.vibe-val{ align-self:flex-end; font-family:var(--font-mono); font-size:.78rem; color:var(--muted-2); }

/* --- Certified Bangers --- */
.bangers-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  width:100%;
}
.banger-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  padding:1.6rem 1.2rem 1.8rem;
  border-radius:var(--r-lg);
  background:var(--glass);
  border:1px solid var(--border);
  cursor:pointer;
  overflow:hidden;
  transition:transform .5s var(--ease-spring), box-shadow .5s var(--ease-spring), border-color .5s var(--ease-spring);
}
.banger-card::before{
  content:'';
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.14), transparent);
  transform:skewX(-20deg);
  transition:left .8s var(--ease-spring);
  pointer-events:none;
}
.banger-card:hover::before, .banger-card:focus-visible::before{ left:120%; }
.banger-label{
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lc);
  border:1px solid color-mix(in srgb, var(--lc) 50%, transparent);
  padding:.25rem .6rem;
  border-radius:999px;
  background:color-mix(in srgb, var(--lc) 14%, transparent);
}
.banger-art{
  width:88px; height:88px;
  border-radius:16px;
  background:var(--art);
  margin:.4rem 0;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.6);
}
.banger-song{ font-weight:700; font-size:1rem; }
.banger-stat{
  font-family:var(--font-display);
  font-weight:900;
  font-size:2.4rem;
  background:var(--gradient-main);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.banger-stat small{ font-size:1.1rem; }
.banger-desc{ color:var(--muted); font-size:.8rem; max-width:26ch; }

.banger-card:hover, .banger-card:focus-visible{
  transform:translateY(-8px);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 24px 50px -16px rgba(124,58,237,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
}

/* --- Recently played --- */
.recent-list{ display:flex; flex-direction:column; width:100%; text-align:left; }
.recent-row{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:.75rem .5rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .3s ease;
  border-radius:10px;
  width:100%;
  color:inherit;
}
.recent-row:hover{ background:rgba(255,255,255,.035); }
.recent-thumb{
  width:42px; height:42px;
  border-radius:9px;
  background:var(--tile);
  flex:none;
}
.recent-copy{ display:flex; flex-direction:column; min-width:0; flex:1; gap:.1rem; }
.recent-title{ font-weight:600; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-artist{ color:var(--muted); font-size:.78rem; }
.recent-time{ flex:none; color:var(--muted-2); font-size:.76rem; font-family:var(--font-mono); }

.ranked-item.has-link {
  text-decoration:none;
}
.recent-row.has-link {
  display:flex;
  text-decoration:none;
}

/* =========================================================================
   ERROR SCREEN
========================================================================= */
.error-card{
  width:100%;
  max-width:420px;
  border-radius:var(--r-xl);
  padding:2.5rem 2rem;
  text-align:center;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
}
.error-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px; height:52px;
  margin:0 auto 1.4rem;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(236,72,153,.25), rgba(124,58,237,.25));
  border:1px solid rgba(236,72,153,.4);
  color:var(--pink);
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.3rem;
  box-shadow:0 0 30px -6px rgba(236,72,153,.5);
}
.error-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.3rem;
  margin-bottom:.75rem;
}
.error-copy{ color:var(--muted); font-size:.92rem; margin-bottom:1.8rem; }

/* =========================================================================
   ANIMATIONS
========================================================================= */
@keyframes spin{ to{ transform:rotate(360deg); } }

@keyframes breathe-glow{
  0%,100%{ box-shadow:0 10px 30px -8px rgba(124,58,237,.55), 0 0 0 1px rgba(255,255,255,.06) inset; }
  50%{ box-shadow:0 10px 44px -6px rgba(236,72,153,.65), 0 0 0 1px rgba(255,255,255,.1) inset; }
}

@keyframes shimmer{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

@keyframes hue-drift{
  0%{ filter:hue-rotate(0deg); }
  100%{ filter:hue-rotate(10deg); }
}

@keyframes float-up{
  0%{ transform:translateY(0) rotate(0deg); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ transform:translateY(-115vh) rotate(25deg); opacity:0; }
}

@keyframes eq-bounce{
  0%,100%{ transform:scaleY(.4); }
  50%{ transform:scaleY(1); }
}

@keyframes donut-pulse{
  0%,100%{ box-shadow:0 0 40px -10px rgba(124,58,237,.5); }
  50%{ box-shadow:0 0 56px -6px rgba(236,72,153,.6); }
}

@keyframes pulse-fade{
  0%,100%{ opacity:1; }
  50%{ opacity:.55; }
}

@keyframes fade-up{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes grow-bar{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

@keyframes drift-a{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(6%, 8%) scale(1.08); }
}
@keyframes drift-b{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-8%, 6%) scale(1.1); }
}
@keyframes drift-c{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(5%, -7%) scale(1.06); }
}

/* =========================================================================
   RESPONSIVE
========================================================================= */
@media (min-width: 640px){
  .bangers-grid{ grid-template-columns:repeat(3, 1fr); }
  .vibe-row{ grid-template-columns:160px 1fr 40px; align-items:center; }
  .vibe-val{ align-self:center; text-align:right; }
}

@media (min-width: 860px){
  .genres-layout{ flex-direction:row; align-items:center; text-align:left; gap:3rem; }
  .genre-chips{ flex:1; }
  .setup-card{ padding:3rem 3rem 3.25rem; }
}

@media (max-width: 420px){
  .ranked-item{ grid-template-columns:auto auto 1fr; gap:.7rem; padding:.65rem .75rem; }
  .rank-art{ width:44px; height:44px; }
  .ranked-item.rank-1 .rank-art{ width:56px; height:56px; }
  .donut{ width:150px; height:150px; }
}

/* =========================================================================
   REDUCED MOTION
========================================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* =========================================================================
   APP WIRING — player state + JS-generated slide markup
========================================================================= */
.hidden{ display:none !important; }

.slides-stack{ position:relative; z-index:1; }

.slide{ display:none !important; }
.slide.active{
  display:flex !important;
  max-height:calc(100svh - 78px);
  overflow-y:auto;
  animation:slide-in .55s var(--ease-spring);
}
.slide-inner{ width:100%; margin:auto; }

.genre-bar-fill, .vibe-fill{ animation:none; }
.slide.active .genre-bar-fill{ animation:grow-bar 1.4s var(--ease-spring) both; }
.slide.active .vibe-fill{ animation:grow-bar 1.6s var(--ease-spring) both; }

.slide.active .donut{ animation:none; }

.rank-art, .recent-thumb, .banger-art{
  background-size:cover;
  background-position:center;
}

.genre-chip{
  list-style:none;
  padding:.7rem .9rem;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--glass);
  cursor:pointer;
  transition:transform .4s var(--ease-spring), border-color .4s ease, opacity .4s ease;
}
.genre-chip:hover, .genre-chip:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.28);
  outline:none;
}
.genre-chip.dim{ opacity:.35; }

.banger-card.dim{ opacity:.35; transform:scale(.97); }

.donut{ transition:box-shadow .3s ease; }
.donut-pop{ animation:donut-pop .5s var(--ease-spring); }

.confetti-canvas{
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  z-index:50;
  pointer-events:none;
}

.slide-outro{ gap:.4rem; }

.auto-note{
  display:none;
  margin-bottom:1.5rem;
  padding:.85rem 1rem;
  border-radius:var(--r-md);
  border:1px solid rgba(29,185,84,.3);
  background:rgba(29,185,84,.08);
  color:var(--green-2);
  font-size:.9rem;
  font-weight:600;
  text-align:left;
}
body.auto-config .auto-note{ display:block; }
body.auto-config .manual-config{ display:none; }

@keyframes slide-in{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes donut-pop{
  0%{ transform:scale(.92); }
  60%{ transform:scale(1.05); }
  100%{ transform:scale(1); }
}