*{box-sizing:border-box;margin:0;padding:0;}
:root{
  /* Backgrounds — base matched to PNG graphics (~#070c1a) */
  --bg-deep:#070c1a;
  --bg-dark:#0d1530;
  --bg-panel:#16224a;   /* distinctly lighter than bg-deep */
  --bg-mid:#10193a;

  /* Borders — much more visible than before */
  --border:#2e508c;

  /* Primary color (text, labels) — bright blue-white */
  --gold:#edf7ff;
  --gold-dim:#6a9ec4;
  --gold-faint:#304e6e;

  /* Neon palette */
  --neon:#00c8ff;        /* electric cyan — matches logo "BE:KI" */
  --neon-pink:#ff1090;   /* hot pink — matches logo "Jukebox" */
  --green:#39ff14;       /* neon lime green */
  --green-bg:#051000;
  --red:#ff4060;         /* neon red */
  --red-bg:#1a000e;
  --blue:#bf5fff;        /* neon purple */
  --blue-bg:#0f0020;
  --orange:#ff9b40;      /* neon orange */
  --orange-bg:#180c00;
}

html,body{
  height:100%;
  background:var(--bg-deep);
  color:var(--gold);
  font-family:'Trebuchet MS',Arial,sans-serif;
}

/* Subtle CRT scanline overlay — adds depth, purely visual */
body::after{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:repeating-linear-gradient(
    0deg,transparent,transparent 2px,rgba(0,200,255,.012) 2px,rgba(0,200,255,.012) 3px
  );
}

button{cursor:pointer;}
input{font-family:sans-serif;}

/* ── Screens ──────────────────────────────────────────────── */
.screen{display:none;height:100vh;flex-direction:column;}
.screen.active{display:flex;}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary{
  background:transparent;
  border:2px solid var(--neon-pink);
  border-radius:6px;
  color:var(--neon-pink);
  font-family:'Trebuchet MS',Arial,sans-serif;
  font-size:14px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  padding:11px 28px;cursor:pointer;
  box-shadow:0 0 12px rgba(255,16,144,.5),inset 0 0 12px rgba(255,16,144,.12);
  transition:box-shadow .2s,background .2s;
}
.btn-primary:hover{
  background:rgba(255,16,144,.1);
  box-shadow:0 0 22px rgba(255,16,144,.8),inset 0 0 22px rgba(255,16,144,.2);
}
.btn-primary:disabled{opacity:.3;cursor:default;box-shadow:none;}

.btn-ghost{
  background:transparent;
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--gold-dim);
  font-family:sans-serif;font-size:13px;
  padding:8px 18px;
  transition:border-color .15s,color .15s;
}
.btn-ghost:hover{border-color:var(--neon);color:var(--neon);}

.btn-tab{
  background:var(--bg-panel);border:1px solid var(--border);border-radius:6px;
  padding:6px 14px;color:var(--gold-dim);font-family:sans-serif;font-size:12px;
}
.btn-tab.active{border-color:var(--neon);color:var(--neon);box-shadow:0 0 8px rgba(0,200,255,.4);}

/* ── Timeline ─────────────────────────────────────────────── */
.timeline-wrap{flex:1;display:flex;flex-direction:column;gap:6px;overflow:hidden;padding:14px 20px;}
.tl-label{
  color:var(--gold-faint);font-size:10px;font-family:sans-serif;text-align:center;
  text-transform:uppercase;letter-spacing:.1em;
}
.timeline{flex:1;position:relative;display:flex;align-items:center;overflow-x:auto;}
.tl-line{
  position:absolute;left:0;right:0;height:1px;top:50%;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--neon)60,transparent);
}
.tl-inner{
  display:flex;align-items:center;position:relative;z-index:1;
  min-width:100%;justify-content:space-around;gap:2px;padding:4px;
}
.tl-slot{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;}
.tl-card{
  width:84px;height:68px;border-radius:4px;padding:4px 3px 3px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;
  border:1px solid rgba(255,255,255,.08);overflow:hidden;
}
.tl-year{font-size:15px;font-weight:700;font-family:sans-serif;flex-shrink:0;}
.tl-grp{font-size:8px;font-family:sans-serif;opacity:.6;}
.tl-title{font-size:8px;font-weight:600;font-family:sans-serif;text-align:center;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;}
.tl-tartist{font-size:7px;font-family:sans-serif;opacity:.6;text-align:center;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;}
.tl-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--bg-deep);border:1px solid var(--neon);
  box-shadow:0 0 4px var(--neon);
}
.drop-zone{
  width:64px;height:48px;border:1.5px dashed var(--border);border-radius:4px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.drop-zone:hover,.drop-zone.drop-active{
  border-color:var(--neon);box-shadow:0 0 10px rgba(0,200,255,.6);
}
.drop-zone.drop-active{background:rgba(0,200,255,.08);}
.drop-lbl{color:var(--gold-faint);font-size:11px;font-family:sans-serif;pointer-events:none;}
.drop-zone.drop-active .drop-lbl{color:var(--neon);}
.decade-markers{display:flex;justify-content:space-between;padding:0 2px;}
.decade-markers span{color:var(--gold-faint);font-size:10px;font-family:sans-serif;}

/* ── Animations ───────────────────────────────────────────── */
@keyframes revealPop{
  0%{transform:scale(.7);opacity:0;}60%{transform:scale(1.1);}100%{transform:scale(1);opacity:1;}
}
.reveal-card{animation:revealPop .35s ease-out;}

@keyframes shake{
  0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}
}
.wrong-shake{animation:shake .35s ease-out;}

@keyframes neonPulse{0%,100%{opacity:1;}50%{opacity:.55;}}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}