:root {
  --bg: #f5f2ec;            /* warm paper */
  --panel: #ffffff;
  --line: #e6e1d6;          /* warm hairline */
  --line-soft: #efebe2;
  --ink: #20242c;           /* near-black slate */
  --dim: #74706a;           /* warm grey */
  --accent: #b07b3a;        /* muted brass for links/marks */
  --rwkv: #E07A2E; --pixelgen: #3F7FD6; --musecoco: #3E9E5C; --amt: #9A63D6;
  --shadow: 0 1px 2px rgba(40,34,22,.05), 0 6px 20px rgba(40,34,22,.06);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.65 var(--sans);
  background-image: radial-gradient(circle at 1px 1px, rgba(120,110,92,.05) 1px, transparent 0);
  background-size: 22px 22px;
}
.wrap { max-width: 1500px; margin: 0 auto; padding: 0 16px 96px; }

header.hero { padding: 52px 0 26px; }
header.hero .accent-rule {
  height: 3px; width: 84px; border-radius: 3px; margin-bottom: 20px;
  background: linear-gradient(90deg, var(--rwkv), var(--pixelgen) 40%, var(--musecoco) 70%, var(--amt));
}
header.hero .kicker { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
header.hero h1 { font-family: var(--serif); font-weight: 600; font-size: 2.5rem; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 14px; }
header.hero p { color: var(--dim); margin: 0 0 6px; max-width: 74ch; font-size: 15.5px; }
header.hero p.hint { font-size: 14px; }

h2 {
  font-family: var(--serif); font-weight: 600; font-size: 1.55rem; letter-spacing: -0.01em;
  margin: 54px 0 6px; padding-bottom: 0; border: 0;
}
.section-rule { height: 1px; background: var(--line); margin: 10px 0 22px; }
h3.sub { font-family: var(--sans); font-size: .96rem; font-weight: 700; margin: 22px 0 4px; color: var(--ink); letter-spacing: .01em; }
.wrap p { max-width: 80ch; color: #3b3f47; }
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(176,123,58,.35); }
a:hover { border-bottom-color: var(--accent); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 6px 0 2px; color: var(--dim); font-size: 13.5px; }
.legend span.item { display: inline-flex; align-items: center; }
.legend .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 8px; box-shadow: 0 0 0 1px rgba(0,0,0,.04); }
.hint { color: var(--dim); font-size: 13px; }

table.grid { width: 100%; border-collapse: separate; border-spacing: 7px; table-layout: fixed; }
table.grid th.corner { width: 20px; }
table.grid thead th { font: 600 12.5px/1.2 var(--sans); letter-spacing: .02em; color: var(--ink); padding: 2px 2px 12px; border-bottom: 2px solid var(--c, var(--line)); text-align: center; }
table.grid thead th .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: middle; background: var(--c); }
table.grid tbody th { color: var(--dim); font: 600 16px/1 var(--serif); vertical-align: middle; text-align: center; }
table.grid td { vertical-align: top; }

.cell {
  position: relative; width: 100%; aspect-ratio: 16 / 7; border-radius: 12px;
  overflow: hidden; cursor: pointer; background: #fffdf8;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}
.cell:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(40,34,22,.06), 0 12px 30px rgba(40,34,22,.10); border-color: #d9d2c4; }
.cell.playing { border-color: #c9bfa9; box-shadow: 0 2px 4px rgba(40,34,22,.06), 0 10px 26px rgba(40,34,22,.12); }
.cell canvas { display: block; width: 100%; height: 100%; }
.cell .playbadge {
  position: absolute; inset: 0; margin: auto; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.78); border: 1px solid rgba(40,34,22,.10);
  border-radius: 50%; color: #2a2e36; font-size: 15px; padding-left: 3px;
  box-shadow: 0 4px 14px rgba(40,34,22,.14); pointer-events: none; transition: opacity .15s, transform .15s;
}
.cell:hover .playbadge { transform: scale(1.06); }
.cell.playing .playbadge { opacity: 0; }
.missing {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; aspect-ratio: 16 / 7; border: 1px dashed var(--line); border-radius: 12px;
  color: var(--dim); font-size: 11.5px; padding: 8px; background: #faf8f2;
}

table.data {
  border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; margin: 6px 0 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow);
}
table.data th, table.data td { padding: 11px 14px; text-align: center; border-bottom: 1px solid var(--line-soft); }
table.data thead th { background: #faf7f1; font: 600 13px/1.2 var(--sans); color: var(--ink); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: #fbf9f4; }
table.data td.team, table.data th.team { text-align: left; }
table.data sup { color: var(--dim); }
table.data b { color: var(--ink); }

footer { color: var(--dim); font-size: 12.5px; margin-top: 52px; padding-top: 18px; border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  header.hero h1 { font-size: 2rem; }
  table.grid, table.grid thead, table.grid tbody, table.grid tr, table.grid th, table.grid td { display: block; width: auto; }
  table.grid thead { display: none; }
  table.grid tbody th { text-align: left; margin: 18px 0 6px; }
}

/* MP3 controls (rendered audio) */
.cell .mp3bar { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; z-index: 3; opacity: .96; transition: opacity .15s; }
.cell:hover .mp3bar, .cell.mp3playing .mp3bar { opacity: 1; }
.mp3btn {
  font: 600 10px/1 var(--sans); color: #3b3f47; background: rgba(255,255,255,.92);
  border: 1px solid #e0dacd; border-radius: 7px; padding: 4px 7px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; text-decoration: none; box-shadow: 0 1px 3px rgba(40,34,22,.08);
}
.mp3btn .ic { font-size: 9px; line-height: 1; }
.mp3btn:hover { background: #fff; border-color: #cdc4b2; }
.mp3btn.on { background: #2a2e36; color: #fff; border-color: #2a2e36; }
.mp3btn.dl { padding: 4px 6px; font-size: 12px; }
.mp3btn.na { color: #b98; border-color: #eadfca; cursor: default; }
.cell .mp3prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: rgba(40,42,50,.5); z-index: 3; transition: width .1s linear; }