/* #TunesDay review. Theme: a 1986-ish neon odometer, for "years ending in six". */
:root {
  --bg: #0b0814;
  --panel: #161126;
  --ink: #f3eefc;
  --muted: #b9aed3;
  --pink: #ff4fa3;
  --cyan: #38e1ff;
  --green: #4dff88;
  --red: #ff5c5c;
  --gold: #ffd24d;
}
* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0; color: var(--ink); line-height: 1.5;
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  background:
    linear-gradient(180deg, rgba(255,79,163,.18), transparent 340px),
    repeating-linear-gradient(0deg, rgba(56,225,255,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(56,225,255,.05) 0 1px, transparent 1px 40px),
    var(--bg);
}
header, main, footer { max-width: 980px; margin: 0 auto; padding: 0 1.25rem; }
header { padding-top: 2.5rem; text-align: center; }
.kicker { color: var(--cyan); letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; margin: 0; }
h1 {
  font-size: clamp(2.2rem, 6vw, 4rem); margin: .3rem 0 1rem; line-height: 1.05;
  background: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.odometer { display: inline-flex; gap: .35rem; margin-bottom: 1rem; }
.odometer span {
  font: 700 2.6rem/1 "SF Mono", Menlo, Consolas, monospace;
  width: 3.2rem; padding: .5rem 0; border-radius: 8px;
  background: linear-gradient(#222 0 49%, #111 51%); color: #ddd; box-shadow: inset 0 0 0 2px #333;
}
.odometer .six { color: var(--green); text-shadow: 0 0 14px var(--green); box-shadow: inset 0 0 0 2px var(--green); }
.intro { max-width: 640px; margin: 0 auto 2rem; color: var(--muted); font-size: 1.1rem; }
h2 { color: var(--pink); font-size: 1.6rem; margin: 2.5rem 0 1rem; border-bottom: 2px solid rgba(255,79,163,.35); padding-bottom: .3rem; }
h3 { color: var(--cyan); margin: 1.5rem 0 .5rem; }
.small { color: var(--muted); font-size: .9rem; font-weight: 400; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.card { background: var(--panel); border-radius: 14px; padding: 1.2rem 1.4rem; border: 2px solid; }
.card p { margin: .2rem 0; }
.card .label { text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; }
.card .who { font-size: 1.6rem; font-weight: 700; }
.card .what { font-style: italic; color: var(--muted); }
.winner { border-color: var(--gold); box-shadow: 0 0 24px rgba(255,210,77,.25); }
.winner .label { color: var(--gold); }
.loser { border-color: var(--red); }
.loser .label { color: var(--red); }
ul.plain, ul.missed { padding-left: 1.2rem; }
ul.plain li, ul.missed li { margin: .5rem 0; }
.picks { list-style: none; padding: 0; margin: 0; }
.pick { display: grid; grid-template-columns: 2.6rem 4rem 1fr; gap: 1rem; align-items: start;
  background: var(--panel); border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: .8rem; }
.num { font: 700 1.1rem "SF Mono", Menlo, monospace; color: var(--muted); padding-top: .9rem; }
.grade { font: 800 1.7rem/4rem "SF Mono", Menlo, monospace; text-align: center; border-radius: 10px; color: #0b0814; }
.g-a { background: var(--green); }
.g-b { background: var(--cyan); }
.g-c { background: var(--gold); }
.g-d, .g-e, .g-f { background: var(--red); }
.pick h3 { color: var(--ink); margin: .1rem 0 .2rem; font-size: 1.2rem; }
.artist { color: var(--muted); font-weight: 400; font-size: .95em; }
.meta { margin: 0 0 .4rem; color: var(--muted); font-size: .9rem; }
.pick p { margin: .3rem 0 0; }
.year { font-family: "SF Mono", Menlo, monospace; }
.hit { color: var(--green); }
.miss { color: var(--red); text-decoration: underline wavy; }
.tag { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; border-radius: 99px; padding: 0 .55rem; margin-left: .3rem; }
.tag.win { background: var(--gold); color: #000; }
.tag.lose { background: var(--red); color: #000; }
.tag.copied { border: 1px solid var(--pink); color: var(--pink); }
.hint { color: var(--muted); }
.mt { font-weight: 700; }
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 12px; overflow: hidden; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .7rem; border-bottom: 1px solid rgba(255,255,255,.06); }
th { color: var(--cyan); font-weight: 600; }
.n { text-align: right; font-family: "SF Mono", Menlo, monospace; }
.bar { display: inline-block; height: .6rem; border-radius: 99px; background: linear-gradient(90deg, var(--pink), var(--cyan)); min-width: .6rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
footer { color: var(--muted); font-size: .85rem; padding: 2rem 1.25rem 3rem; text-align: center; }
@media (max-width: 560px) {
  .pick { grid-template-columns: 3.2rem 1fr; }
  .num { display: none; }
  .grade { font-size: 1.3rem; line-height: 3.2rem; }
}
/* bar widths as classes, not inline style (CSP style-src 'self') */
.w0{width:4%}
.w10{width:10%}
.w20{width:20%}
.w30{width:30%}
.w40{width:40%}
.w50{width:50%}
.w60{width:60%}
.w70{width:70%}
.w80{width:80%}
.w90{width:90%}
.w100{width:100%}
.corrections { max-width: 980px; margin: 0 auto; padding: 0 1.25rem; }
.tag.guest { border: 1px solid var(--cyan); color: var(--cyan); }