/* ==========================================================================
   theboys.css  --  The Boys' Song A Day front door (theboys.html only)
   Layered on top of css/neon-mesa.css. Everything music-specific lives
   here: the .sky.music header (waveform ridge + equalizer instead of the
   grid floor), the album wall, the CSS/SVG cover art and the status pills.
   Page accent is magenta (body[data-accent="magenta"]).

   Status pills: each .album carries data-status="soon|live|wrapping|done".
   The colour comes from the rules below; the text comes from the inline
   script in theboys.html. Flip a contest by editing that one word.
   ========================================================================== */

/* ---------- header: waveform ridge ---------- */
.sky.music{
  background:linear-gradient(180deg,#0a0420 0%,#3a0a4a 34%,#8a1060 60%,#ff2a6a 84%,#ff9e3d 100%);
}
.sky.music .ridge{
  filter:drop-shadow(0 0 4px #ff00ff) drop-shadow(0 0 12px #ff00ff);
}
.wave{stroke:#ff00ff;stroke-linejoin:round;stroke-linecap:round}
/* phones: the sun sits top-right, so keep the tagline to one short line */
@media (max-width:600px){.tag-more{display:none}}

/* ---------- equalizer (replaces .grid-floor) ---------- */
.eq{
  display:flex;align-items:flex-end;justify-content:space-between;gap:3px;
  height:34px;padding:0 18px;background:#020b14;
  border-top:2px solid #ff00ff;box-shadow:0 -6px 18px #ff00ff55;
  overflow:hidden;
}
.eq i{
  flex:1 1 0;display:block;min-width:4px;
  /* --h is a percentage of the strip height, set inline per bar */
  height:calc(var(--h) * 1%);
  background:linear-gradient(180deg,#00f2ff 0%,#ff00ff 100%);
  box-shadow:0 0 6px #ff00ff88;
  border-radius:2px 2px 0 0;
  transform-origin:bottom;
  animation:eq-bounce 2s ease-in-out infinite alternate;
}
/* Stagger so the bars do not move in lockstep. */
.eq i:nth-child(3n+1){animation-delay:-.4s}
.eq i:nth-child(3n+2){animation-delay:-1.1s}
.eq i:nth-child(4n){animation-duration:2.4s}
.eq i:nth-child(5n){animation-duration:1.7s}
@keyframes eq-bounce{
  from{transform:scaleY(.35)}
  to{transform:scaleY(1)}
}

/* ---------- intro line ---------- */
.lede{font-size:20px;color:var(--muted);margin:4px 0 20px}

/* ---------- album wall ---------- */
.wall{display:grid;gap:20px;margin:0 0 24px}
.album{
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:start;
  padding:18px;border:1px solid var(--accent);border-radius:10px;
  background:rgba(8,12,20,.95);box-shadow:0 0 14px var(--accent-glow);
}
.album .meta h2{font-size:24px;color:#fff;text-shadow:0 0 8px var(--accent),0 0 20px var(--accent-glow);margin:0 0 4px}
.album .month{font:700 16px 'Orbitron',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ffd166;text-shadow:0 0 6px #ff6a00;margin:0 0 10px}
.album .rules{margin:0 0 10px;font-weight:600}
.album .note{margin:10px 0 14px;color:var(--muted)}
.album .btn{min-width:180px}

/* ---------- cover art (pure CSS/SVG, no images) ---------- */
.cover{
  width:200px;height:200px;border-radius:8px;overflow:hidden;position:relative;
  border:2px solid var(--accent);box-shadow:0 0 16px var(--accent-glow),inset 0 0 30px #00000088;
  background:#0a1220;
}
/* vinyl disc: concentric rings with a label in the middle */
.cover.vinyl{
  background:
    radial-gradient(circle at 50% 50%,#ff00ff 0 9%,#020b14 9% 12%,#2a3240 12% 13%,#0d0d12 13% 15%,#2a3240 15% 16%,#0d0d12 16% 18%,#2a3240 18% 19%,#0d0d12 19% 22%,#2a3240 22% 23%,#0d0d12 23% 26%,#2a3240 26% 27%,#0d0d12 27% 30%,#2a3240 30% 31%,#0d0d12 31% 34%,#2a3240 34% 35%,#0d0d12 35% 38%,#2a3240 38% 39%,#0d0d12 39% 42%,#2a3240 42% 43%,#0d0d12 43% 46%,#2a3240 46% 47%,#0d0d12 47% 48%,#00f2ff 48% 49%,transparent 49%),
    linear-gradient(135deg,#1b0a2a,#020b14);
}
.cover.vinyl b{
  position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:#020b14;border:2px solid #00f2ff;box-shadow:0 0 8px #00f2ff;
}
.cover.vinyl::after{
  content:"";position:absolute;inset:0;border-radius:8px;
  background:linear-gradient(115deg,transparent 40%,#ffffff14 48%,transparent 56%);
}
/* letter tiles: 3x3 grid of Orbitron letters */
.cover.tiles{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px;padding:10px;
  background:linear-gradient(160deg,#2a0a3a,#020b14);
}
.cover.tiles span{
  display:flex;align-items:center;justify-content:center;
  font:900 30px 'Orbitron',sans-serif;color:#00f2ff;text-shadow:0 0 8px #00f2ff;
  background:#0a1220;border:1px solid #00f2ff88;border-radius:4px;
}
.cover.tiles span:nth-child(even){color:#ffd166;text-shadow:0 0 8px #ff6a00;border-color:#ffd16688}
.cover.tiles span:nth-child(5){color:#ff00ff;text-shadow:0 0 8px #ff00ff;border-color:#ff00ff88}
/* chain: three linked ovals */
.cover.chain{background:radial-gradient(circle at 70% 30%,#3a0a4a,#020b14 70%)}
.cover.chain svg{display:block;width:100%;height:100%}
.cover.chain ellipse{fill:none;stroke:#00f2ff;stroke-width:9;filter:drop-shadow(0 0 6px #00f2ff)}
.cover.chain ellipse:nth-child(2){stroke:#ff00ff;filter:drop-shadow(0 0 6px #ff00ff)}

/* ---------- status pills ---------- */
.pill.status{font-size:16px;padding:4px 12px}
.album[data-status="soon"] .pill.status{color:#9fb3c8;border-color:#9fb3c8;background:#9fb3c822}
.album[data-status="live"] .pill.status{color:#39ff14;border-color:#39ff14;background:#39ff1422;box-shadow:0 0 10px #39ff1466}
.album[data-status="wrapping"] .pill.status{color:#ff9e3d;border-color:#ff9e3d;background:#ff9e3d22;box-shadow:0 0 10px #ff9e3d66}
.album[data-status="done"] .pill.status{color:#00f2ff;border-color:#00f2ff;background:#00f2ff22}
/* finished contests sit back a little; live/wrapping glow */
.album[data-status="done"]{opacity:.9}
.album[data-status="live"]{box-shadow:0 0 22px #39ff1466;border-color:#39ff14}
.album[data-status="wrapping"]{box-shadow:0 0 22px #ff9e3d66;border-color:#ff9e3d}

/* disabled link-button (November until it opens) */
.btn.disabled,.btn[aria-disabled="true"]{
  opacity:.5;cursor:default;pointer-events:none;box-shadow:none;
  color:#9fb3c8;border-color:#9fb3c8;background:transparent;
}

/* ---------- how it works + roster ---------- */
.how{margin:0 0 16px;padding-left:1.4em}
.how li{margin:0 0 8px}
.roster-row{display:flex;flex-wrap:wrap;gap:10px}
.pill.roster{font-size:16px;padding:8px 16px;color:#ffd166;border-color:#ffd166;background:#ffd16622}

/* ---------- responsive ---------- */
@media (max-width:700px){
  .album{grid-template-columns:1fr;justify-items:center;text-align:center}
  .album .meta{width:100%}
  .album .btn{width:100%}
  .roster-row{justify-content:center}
  .eq{gap:2px;padding:0 10px}
}
@media (max-width:600px){
  .eq{height:28px}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){
  .eq i{animation:none;transform:none}
}