/* ============ THE BAD TIME MACHINE ============ */
:root{
  --bg:#120d14;
  --panel:#1d1522;
  --panel2:#241a2b;
  --line:#3a2b3f;
  --cream:#f3e6c8;
  --cream-dim:#b3a488;
  --amber:#ffb454;
  --red:#ff5a3c;
  --era:#c9a227;
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(255,180,84,.08), transparent 60%),
    var(--bg);
  color:var(--cream);
  font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  overflow-x:hidden;
}
/* CRT scanlines */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  opacity:.45;
}

/* ---------- marquee ---------- */
.marquee{ text-align:center; padding:26px 16px 6px; }
.bulbs{
  height:12px;margin:0 auto 14px;max-width:760px;
  background-image:radial-gradient(circle at center, var(--amber) 0 2.5px, rgba(255,180,84,.15) 3px, transparent 4px);
  background-size:24px 12px;background-position:0 center;
  animation:chase .9s steps(2) infinite;
}
@keyframes chase{ to{ background-position:24px center; } }
.marquee h1{
  font-family:Bungee,cursive;
  font-size:clamp(30px, 6vw, 58px);
  letter-spacing:.04em;
  margin:0;
  color:var(--cream);
  text-shadow:0 0 18px rgba(255,180,84,.35), 0 3px 0 #7a3b1f, 0 6px 0 #3a1c0e, 0 9px 18px rgba(0,0,0,.7);
}
.marquee h1 .bad{
  color:var(--red);
  text-shadow:0 0 18px rgba(255,90,60,.5), 0 3px 0 #5c1a0e, 0 6px 0 #330c05, 0 9px 18px rgba(0,0,0,.7);
}
.marquee-sub{
  font-family:"VT323",monospace;
  font-size:clamp(15px,2.4vw,20px);
  color:var(--amber);
  letter-spacing:.18em;
  margin:8px 0 0;
}

/* ---------- timeline bar ---------- */
.timeline{ max-width:1060px;margin:16px auto 4px;padding:0 24px; }
.tl-track{ position:relative; height:66px; }
.tl-axis{ position:relative; height:100%; margin:0 28px; }
.tl-rail{
  position:absolute; left:0; right:0; top:28px; height:6px; border-radius:3px;
  background:var(--panel2);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.tl-fill{
  position:absolute; left:0; top:28px; height:6px; border-radius:3px; width:0%;
  background:linear-gradient(90deg, var(--red), var(--era));
  box-shadow:0 0 10px rgba(255,180,84,.5);
  transition:width .45s cubic-bezier(.4,0,.2,1);
}
.tl-head{
  position:absolute; top:6px; left:0%; transform:translateX(-50%);
  transition:left .45s cubic-bezier(.4,0,.2,1); text-align:center;
}
.tl-year{
  display:inline-block; font-family:Bungee,cursive; font-size:13px; color:#17110f;
  background:var(--era); padding:2px 8px; border-radius:4px;
  box-shadow:0 2px 0 rgba(0,0,0,.5); transition:background .3s;
}
.tl-head::after{
  content:""; display:block; width:2px; height:12px; margin:2px auto 0;
  background:var(--era); transition:background .3s;
}
.ticks{ position:absolute; inset:0; }
.tick{
  position:absolute; top:28px; transform:translate(-50%,-50%);
  background:none;border:0;cursor:pointer; padding:8px 5px;
}
.tick-dot{
  display:block; width:12px;height:12px;border-radius:50%;
  background:var(--panel2); border:2px solid var(--line); transition:all .2s;
}
.tick:hover .tick-dot{ border-color:var(--amber); }
.tick.on .tick-dot{ background:var(--era); border-color:var(--cream); box-shadow:0 0 10px var(--era); }
.tick-lab{
  position:absolute; top:17px; left:50%; transform:translateX(-50%);
  font-size:11px; color:var(--cream-dim); white-space:nowrap;
}
.tick.on .tick-lab{ color:var(--cream); }

/* ---------- deck: vinyl + sleeve ---------- */
.deck{
  max-width:1060px; margin:6px auto 0; padding:0 20px;
  display:flex; gap:36px; align-items:center; justify-content:center; flex-wrap:wrap;
}
.vinyl-wrap{ text-align:center; }
.vinyl{
  width:250px;height:250px;border-radius:50%; position:relative; margin:0 auto;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.10), transparent 42%),
    repeating-radial-gradient(circle at center, #16111a 0 1.5px, #211a27 1.5px 3.5px);
  box-shadow:0 0 0 5px #0b080d, 0 0 0 6px #2c2233, 0 22px 44px rgba(0,0,0,.65);
  animation:spin 9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.vinyl-label{
  position:absolute; inset:31%; border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--era); color:#17110f;
  box-shadow:inset 0 0 12px rgba(0,0,0,.35);
  transition:background .4s;
}
.vinyl-label .vl-dec{ font-family:Bungee,cursive; font-size:20px; letter-spacing:.02em; }
.vinyl-label .vl-co{ font-size:8.5px; letter-spacing:.22em; opacity:.75; }
.vinyl-label::after{
  content:""; position:absolute; width:10px;height:10px;border-radius:50%;
  background:#0b080d; box-shadow:0 0 0 3px rgba(0,0,0,.25);
}
.now-playing{
  margin:14px auto 0; max-width:340px;
  font-family:"VT323",monospace; font-size:19px; color:var(--amber);
  min-height:46px; letter-spacing:.06em;
}

.sleeve{ perspective:1400px; width:min(470px, 100%); }
.era-card{
  position:relative; overflow:hidden; border-radius:10px;
  background:linear-gradient(160deg, var(--panel2), var(--panel) 55%);
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  padding:22px 22px 18px; min-height:430px;
  transform-style:preserve-3d; backface-visibility:hidden;
  will-change:transform,opacity;
}
/* discography flip — forward: old exits left, new enters from right */
.flip-out-left { animation:outL .26s ease-in forwards; }
.flip-in-right { animation:inR  .34s cubic-bezier(.2,.8,.3,1) forwards; }
.flip-out-right{ animation:outR .26s ease-in forwards; }
.flip-in-left  { animation:inL  .34s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes outL{ to{ transform:translateX(-115%) rotateY(-30deg); opacity:0; } }
@keyframes outR{ to{ transform:translateX( 115%) rotateY( 30deg); opacity:0; } }
@keyframes inR { from{ transform:translateX( 115%) rotateY( 30deg); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes inL { from{ transform:translateX(-115%) rotateY(-30deg); opacity:0; } to{ transform:none; opacity:1; } }

.era-card header{
  display:flex; flex-direction:column; gap:6px;
  border-bottom:1px dashed var(--line); padding-bottom:12px;
}
.side{
  align-self:flex-start; font-family:Bungee,cursive; font-size:11px; letter-spacing:.12em;
  color:#17110f; background:var(--era); padding:3px 10px; border-radius:4px; transition:background .4s;
}
.era-title{
  font-family:Bungee,cursive; font-size:clamp(19px,2.6vw,25px); line-height:1.15;
  margin:2px 0 0; color:var(--cream); text-shadow:0 0 14px rgba(255,180,84,.25);
}
.era-gen{ margin:2px 0 0; font-size:11.5px; letter-spacing:.08em; color:var(--cream-dim); }

.era-text{ margin:14px 0 0; font-size:14.5px; line-height:1.55; color:var(--cream); font-style:italic; }
.ms-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.ms-tag{
  font-size:10px; letter-spacing:.14em; padding:4px 9px; border-radius:3px;
  background:rgba(255,180,84,.12); border:1px solid rgba(255,180,84,.4); color:var(--amber);
}
.ms-tag.plain{ background:rgba(255,255,255,.05); border-color:var(--line); color:var(--cream-dim); }
.ms-check{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.ms-row{ display:grid; grid-template-columns:110px 1fr 34px; gap:10px; align-items:center; }
.ms-label{ font-size:10px; letter-spacing:.14em; color:var(--cream-dim); }
.ms-bar{ height:7px; border-radius:4px; background:var(--panel); box-shadow:inset 0 1px 2px rgba(0,0,0,.6); overflow:hidden; }
.ms-bar i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg, var(--era), var(--red)); transition:background .4s; }
.ms-val{ font-family:Bungee,cursive; font-size:11px; text-align:right; color:var(--cream); }
.bti-side{ flex:1; display:flex; flex-direction:column; gap:6px; }
.era-foot{ font-size:10px; letter-spacing:.12em; color:var(--cream-dim); text-align:right; }

.bti{
  margin-top:18px; display:flex; align-items:center; gap:16px;
  border-top:1px dashed var(--line); padding-top:14px;
}
.bti-num{
  font-family:Bungee,cursive; font-size:44px; line-height:1;
  color:var(--era); text-shadow:0 0 16px rgba(255,180,84,.35); transition:color .4s;
}
.bti-cap{ font-size:10px; letter-spacing:.22em; color:var(--cream-dim); display:block; margin-top:4px; }
.bti-bar{
  flex:1; height:10px; border-radius:5px; background:var(--panel);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6); overflow:hidden;
}
.bti-bar i{
  display:block; height:100%; width:0%; border-radius:5px;
  background:linear-gradient(90deg, var(--amber), var(--red));
  transition:width .6s cubic-bezier(.2,.8,.3,1);
}

/* ---------- controls ---------- */
.controls{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; padding:26px 16px 0; }
.btn{
  font-family:Bungee,cursive; font-size:13px; letter-spacing:.06em;
  color:var(--cream); background:linear-gradient(180deg,#2a2033,#1a1320);
  border:1px solid var(--line); border-bottom-width:3px; border-radius:8px;
  padding:12px 18px; cursor:pointer;
  transition:transform .08s, box-shadow .2s, border-color .2s;
}
.btn:hover{ border-color:var(--amber); box-shadow:0 0 14px rgba(255,180,84,.25); }
.btn:active{ transform:translateY(2px); border-bottom-width:1px; }
.btn.coin{ color:#17110f; background:linear-gradient(180deg,#ffc97e,var(--amber)); border-color:#8a5a1e; }
.btn.coin:hover{ box-shadow:0 0 18px rgba(255,180,84,.5); }
.btn.ghost{ font-size:11px; padding:10px 14px; color:var(--cream-dim); }
.hint{
  text-align:center; font-family:"VT323",monospace; font-size:16px;
  color:var(--cream-dim); letter-spacing:.12em; margin:8px 0 0;
}

/* ---------- leaderboard ---------- */
.leaderboard{ max-width:840px; margin:34px auto 10px; padding:0 20px; }
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:22px 24px; box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.leaderboard h3{
  font-family:Bungee,cursive; font-size:clamp(17px,2.6vw,22px);
  margin:0 0 4px; text-align:center; letter-spacing:.04em;
}
.lb-note{ text-align:center; font-size:11px; color:var(--cream-dim); margin:0 0 16px; letter-spacing:.06em; }
#lbList{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.lb-row{
  display:grid; grid-template-columns:26px 160px 1fr 60px; gap:10px;
  align-items:center; padding:8px 10px; border-radius:8px; border:1px solid transparent;
}
.lb-row.winner{
  border-color:var(--amber); background:rgba(255,180,84,.07);
  box-shadow:inset 0 0 16px rgba(255,180,84,.12);
}
.lb-rank{ font-family:Bungee,cursive; color:var(--cream-dim); }
.lb-name{ font-size:12.5px; letter-spacing:.04em; }
.lb-name small{ display:block; color:var(--cream-dim); font-size:10px; letter-spacing:.08em; }
.lb-bar{
  height:14px; border-radius:7px; background:#0f0b12; overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7);
}
.lb-fill{
  display:block; height:100%; border-radius:7px; width:0%;
  background:linear-gradient(90deg,#6b4a1f,var(--amber));
  transition:width .9s cubic-bezier(.2,.8,.3,1);
}
.lb-row.winner .lb-fill{ background:linear-gradient(90deg,var(--amber),var(--red)); }
.lb-val{ font-family:Bungee,cursive; font-size:14px; text-align:right; color:var(--cream); }
.lb-row.winner .lb-val{ color:var(--amber); }
#verdict{
  margin:16px 0 0; text-align:center;
  font-family:"VT323",monospace; font-size:20px; color:var(--red); letter-spacing:.08em;
}

/* ---------- milestone hall of shame ---------- */
.hall{ max-width:840px; margin:34px auto 0; padding:0 20px; }
.hall h3{ font-family:Bungee,cursive; text-align:center; font-size:18px; letter-spacing:.08em; color:var(--amber); margin:0 0 4px; }
.hall-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; }
.hall-row{
  border:1px solid var(--line); background:var(--panel); border-radius:8px;
  padding:14px 14px 12px; display:flex; flex-direction:column; gap:6px;
}
.hall-row.hot{ border-color:var(--red); box-shadow:0 0 14px rgba(217,72,56,.3); }
.hall-cat{ font-size:10px; letter-spacing:.16em; color:var(--cream-dim); }
.hall-dec{ font-family:Bungee,cursive; font-size:20px; color:var(--cream); }
.hall-row.hot .hall-dec{ color:var(--red); }
.hall-val{ font-family:Bungee,cursive; font-size:13px; color:var(--amber); }
.hall-gens{ font-size:9.5px; letter-spacing:.1em; color:var(--cream-dim); }

/* ---------- footer ---------- */
.foot{
  text-align:center; padding:26px 16px 34px; font-size:11px;
  color:var(--cream-dim); letter-spacing:.1em;
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}
.foot .dot{ color:var(--red); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .deck{ gap:20px; }
  .vinyl{ width:190px; height:190px; }
  .vinyl-label .vl-dec{ font-size:16px; }
  .era-card{ min-height:0; }
  .lb-row{ grid-template-columns:22px 1fr 60px; }
  .lb-bar{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce){
  .vinyl{ animation:none; }
  .bulbs{ animation:none; }
  .tl-fill,.tl-head{ transition:none; }
}