/* Beatline levels: the game's look on the web. Dark ground, one accent (cyan) and red for warnings, JetBrains Mono and
   Orbitron (both SIL OFL, from the game), thin frames with corner brackets, ruler ticks, small readouts like the HUD. */

@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/JetBrainsMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/JetBrainsMono-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url("/static/fonts/Orbitron-Variable.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }

:root {
  --bg: #05070a;
  --panel: #090d12;
  --ink: #e2ecf2;
  --muted: rgba(226, 236, 242, 0.62);
  --line: rgba(190, 198, 206, 0.4);
  --faint: rgba(190, 198, 206, 0.14);
  --accent: #28e8ff;
  --alert: #ff3654;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display: "Orbitron", var(--mono);
  --gutter: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.55 var(--mono);
  letter-spacing: 0.02em;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; padding-bottom: 48px; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover, a:focus-visible { border-bottom-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--bg); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }

h1, h2, h3 { font-weight: 700; margin: 0; }
h1 { font-size: 26px; line-height: 1.2; text-transform: lowercase; margin: 4px 0 8px; }
h1.display { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 6vw, 44px); letter-spacing: 0.04em; text-transform: none; line-height: 1.1; overflow-wrap: anywhere; }
p { margin: 0 0 12px; }

/* Small decoration text, as the HUD's code lines. */
.code { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0; }
.code a { color: inherit; }
.key, .label { font-size: 11.5px; color: var(--muted); font-weight: 400; text-transform: lowercase; }
.label { letter-spacing: 0.1em; margin-bottom: 8px; display: block; }
.label.spaced { margin-top: 28px; }
.note { color: var(--muted); font-size: 12px; }
.lede { color: var(--muted); max-width: 62ch; }

/* The header, the footer, and their rulers. */
.top { padding-top: 14px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); border: 0; }
.brand .mark { width: 14px; height: 14px; border-left: 2px solid var(--accent); border-top: 2px solid var(--accent); box-shadow: 4px 4px 0 -2px var(--faint); }
.brand-name { font-family: var(--display); font-weight: 800; letter-spacing: 0.18em; font-size: 16px; }
.brand-sub { color: var(--muted); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; }
.nav a { color: var(--ink); }
.nav .who { color: var(--accent); }
.ruler {
  height: 8px;
  background:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 40px) left bottom / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, var(--faint) 0 1px, transparent 1px 8px) left bottom / 100% 4px no-repeat;
}
.foot { margin-top: auto; padding-bottom: 24px; }
.foot-row { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 14px; font-size: 12px; }
.foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.foot nav a { color: var(--muted); }
.foot nav a:hover { color: var(--accent); }

.hero { padding: 32px 0 20px; }
.crumbs { padding: 20px 0 10px; }
.foot-note { margin: 24px 0 0; }

/* Frames: a thin line with bracket corners; the top-left one is the accent. */
.frame {
  position: relative;
  padding: 20px;
  margin: 0 0 20px;
  background: linear-gradient(180deg, rgba(40, 232, 255, 0.025), transparent 40%), var(--panel);
  border: 1px solid var(--faint);
}
.frame::before, .frame::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; }
.frame::before { top: -1px; left: -1px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.frame::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--line); border-right: 2px solid var(--line); }
.frame.small { padding: 16px 20px; }

/* Readouts: "key: value", the key quiet and the value bold. */
.stats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; }
.readout { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.readout dt { color: var(--muted); }
.readout dt::after { content: ":"; }
.readout dd { margin: 0; font-weight: 700; }
.stats.big { margin: 16px 0; gap: 10px 32px; }
.stats.big .readout { flex-direction: column; gap: 0; font-size: 13px; }
.stats.big .readout dd { font-size: 18px; color: var(--ink); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tag, .chip span { display: inline-block; border: 1px solid var(--line); padding: 1px 8px; font-size: 11px; letter-spacing: 0.06em; text-transform: lowercase; color: var(--ink); }
.byline { color: var(--muted); margin-bottom: 14px; }
.description { max-width: 70ch; white-space: pre-line; overflow-wrap: anywhere; }
.big-dash { font-family: var(--display); font-weight: 800; font-size: 32px; margin: 4px 0 8px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 20px; }
.grid2 .frame { margin: 0; }
.sections { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 20px; }
.sections .val { font-weight: 700; }

/* Buttons and fields. */
.button {
  display: inline-block;
  font: 700 12.5px var(--mono);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  padding: 8px 16px;
  cursor: pointer;
  min-height: 38px;
}
.button:hover, .button:focus-visible { border-color: var(--accent); color: var(--accent); }
.button.primary { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(40, 232, 255, 0.25); }
.button.primary:hover { background: rgba(40, 232, 255, 0.1); }
.button.ghost { border-color: var(--faint); color: var(--muted); }
.actions { display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.actions form { margin: 0; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
input[type="search"], input[type="text"], input[type="password"], input[type="number"], select {
  font: 400 14px var(--mono);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 10px;
  min-height: 38px;
  width: 100%;
}
input::placeholder { color: rgba(226, 236, 242, 0.35); }
input:focus-visible, select:focus-visible { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 1px var(--accent); }
select { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.stack { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.stack .field { width: 100%; }

.search { padding: 16px 20px; }
.search-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.search-row .grow { flex: 1 1 240px; }
.search-row select { min-width: 150px; }
.filters { margin-top: 14px; }
.filters summary { cursor: pointer; font-size: 12px; color: var(--muted); text-transform: lowercase; letter-spacing: 0.1em; list-style: none; }
.filters summary::before { content: "+ "; color: var(--accent); }
.filters[open] summary::before { content: "- "; }
.filters fieldset { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.tagset { display: flex; flex-wrap: wrap; gap: 8px; }
.tagset legend { width: 100%; padding: 0; margin-bottom: 8px; float: left; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip input:checked + span { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(40, 232, 255, 0.3); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ranges { display: flex; gap: 8px 32px; flex-wrap: wrap; }
.ranges fieldset { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ranges legend { width: 100%; padding: 0; margin-bottom: 6px; }
.ranges input { width: 110px; }
.dash { color: var(--muted); }

/* The list: cells like the game's level select. */
.count { margin: 8px 0; }
.cells { display: grid; gap: 12px; }
@media (min-width: 900px) { .cells { grid-template-columns: 1fr 1fr; } }
.cell {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "code song" "name name" "by by" "stats stats" "tags tags";
  gap: 2px 16px;
  color: var(--ink);
  border: 1px solid var(--faint);
  border-left: 2px solid var(--line);
  padding: 12px 16px 12px 16px;
  background: var(--panel);
}
.cell:hover, .cell:focus-visible { border-color: var(--line); border-left-color: var(--accent); background: linear-gradient(90deg, rgba(40, 232, 255, 0.06), transparent 60%), var(--panel); }
.cell-code { grid-area: code; }
.cell-song { grid-area: song; text-align: right; }
.cell-name { grid-area: name; font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.cell-by { grid-area: by; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.cell .stats { grid-area: stats; }
.cell .tags { grid-area: tags; margin: 8px 0 0; }
.match { display: grid; gap: 4px; }
.match-kind { padding-left: 2px; }
.pager { display: flex; justify-content: space-between; gap: 12px; margin: 20px 0 0; }

/* Alerts are red, and only warnings are. */
.alert { border: 1px solid var(--alert); border-left-width: 3px; color: var(--alert); padding: 10px 14px; margin: 14px 0; background: rgba(255, 54, 84, 0.06); }

/* Legal pages: the frame and the headings, with sentence-case body text set for reading. */
.draft { border: 1px dashed var(--alert); color: var(--ink); padding: 12px 16px; margin: 0 0 20px; font-size: 13px; background: rgba(255, 54, 84, 0.05); }
.draft strong { color: var(--alert); letter-spacing: 0.06em; }
.prose { max-width: 78ch; font-size: 15px; line-height: 1.7; }
.prose h2 { font-size: 15px; letter-spacing: 0.08em; margin: 26px 0 8px; text-transform: lowercase; color: var(--accent); }
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 12px; }
.prose li { margin-bottom: 6px; }
.prose .code { text-transform: none; letter-spacing: 0.04em; font-size: 13px; color: var(--ink); }

.rows { margin: 0 0 12px; }
.rows div { display: grid; grid-template-columns: 14em 1fr; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--faint); }
.rows dt { color: var(--muted); }
.rows dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .rows div { grid-template-columns: 1fr; gap: 0; } }

/* Forms with several fields, notices and tables. */
textarea { font: 400 14px/1.5 var(--mono); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 0; padding: 8px 10px; width: 100%; resize: vertical; }
textarea:focus-visible { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 1px var(--accent); }
input[type="email"] { font: 400 14px var(--mono); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 0; padding: 8px 10px; min-height: 38px; width: 100%; }
input[type="email"]:focus-visible { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 1px var(--accent); }
.stack.wide { max-width: 720px; width: 100%; }
.choice { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; border: 0; padding: 0; margin: 0; flex-direction: column; }
label.choice { flex-direction: row; }
label.choice input, fieldset.choice input { margin-top: 4px; }
fieldset.choice label { display: flex; gap: 8px; align-items: baseline; }
.trap { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.badge { color: var(--accent); border: 1px solid var(--accent); padding: 0 6px; font-size: 11px; margin-left: 8px; }
.notices { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.notice { border-left: 2px solid var(--faint); padding: 2px 0 2px 12px; }
.notice.unread { border-left-color: var(--accent); }
.notice h3 { font-size: 14px; margin: 2px 0; }
.notice .body { white-space: pre-line; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; margin: 4px 0 0; }
.plain { list-style: none; padding: 0; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.case { border-top: 1px solid var(--faint); padding-top: 10px; margin-top: 10px; }
.case:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.ok { color: var(--accent); border: 1px solid var(--accent); padding: 8px 12px; }
.facts { margin: 0; display: grid; gap: 6px; }
.facts div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.facts dt { color: var(--muted); font-size: 12px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.pre { white-space: pre-line; overflow-wrap: anywhere; }
table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.grid th { text-align: left; color: var(--muted); font-weight: 400; border-bottom: 1px solid var(--line); padding: 4px 8px 4px 0; }
table.grid td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--faint); vertical-align: top; overflow-wrap: anywhere; }
.filters-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-link { border: 1px solid var(--line); padding: 1px 10px; font-size: 12px; color: var(--ink); }
.chip-link.on { border-color: var(--accent); color: var(--accent); }

/* Phones: a smaller gutter, tighter frames, one column. */
@media (max-width: 640px) {
  :root { --gutter: 14px; }
  body { font-size: 14px; }
  .frame, .frame.small, .search { padding: 14px; }
  .stats.big { gap: 12px 24px; }
  .cell { grid-template-columns: 1fr; grid-template-areas: "code" "name" "by" "stats" "tags" "song"; }
  .cell-song { text-align: left; margin-top: 6px; }
  .search-row .button { width: 100%; }
  .facts div { grid-template-columns: 1fr; gap: 0; }
  table.grid { display: block; overflow-x: auto; }
  .search-row select, .ranges input { width: 100%; }
  .ranges fieldset { width: 100%; }
  .ranges input { flex: 1; }
  .pager .button { min-width: 120px; text-align: center; }
  .brand-sub { display: none; }
  .hero { padding-top: 22px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cell, .button, .chip span { transition: border-color 0.12s, background 0.12s, color 0.12s; }
}