/* Cracktro, made today: deep C64 blue, rainbow copper bars between sections, a pixel logo and labels,
   Space Grotesk for reading, hard offset shadows on the controls. Every asset is served from this
   site; the Content-Security-Policy allows nothing else. */

@font-face {
  font-family: "Silkscreen";
  src: url("fonts/Silkscreen-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Silkscreen";
  src: url("fonts/Silkscreen-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --bg: #0a0f2e;
  --line: #2a3572;
  --ink: #f3f0e6;
  --ink-soft: #aab1d4;
  --red: #e0564a;
  --orange: #f09a3a;
  --yellow: #f4e45c;
  --green: #6cc46c;
  --blue: #4f8fe6;
  --sky: #8fc8ff;
  --black: #000000;
  --pixel: "Silkscreen", "Courier New", monospace;
  --text: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  overflow-x: clip;
  color: var(--ink);
  background: var(--bg);
  font: 16px/1.6 var(--text);
}

/* A full-height column whose main part grows, so the footer sits at the bottom on short pages. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  max-width: 64rem;
  padding: 1.5rem 1.25rem 3rem;
}

main { flex: 1 0 auto; }

a { color: var(--sky); text-underline-offset: .2em; }
a:hover { color: var(--yellow); }
::selection { color: var(--black); background: var(--yellow); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ---------- masthead: logo, ticker, about ---------- */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
}

.masthead .name, .masthead .name:hover {
  padding-bottom: 10px;
  color: #ffffff;
  font: 700 2rem/1 var(--pixel);
  letter-spacing: .02em;
  text-decoration: none;
  text-shadow: 2px 2px 0 var(--red), 4px 4px 0 var(--orange), 6px 6px 0 var(--yellow),
               8px 8px 0 var(--green), 10px 10px 0 var(--blue);
}

.masthead .name span + span { margin-left: .45em; }

.ticker {
  flex: 1 1 14rem;
  min-width: 0;
  margin: 0;
  padding: .35rem 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--black);
  border: 2px solid var(--line);
}

/* Two copies side by side, moved left by one copy's width, so the text is there from the first frame
   and the loop has no seam. The second copy is hidden from screen readers. */
.ticker-track {
  display: inline-flex;
  animation: ticker 14s linear infinite;
}

.ticker .meta {
  flex: none;
  padding: 0 1.5rem 0 .6rem;
  color: var(--yellow);
  font: .8rem/1.4 var(--pixel);
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.masthead .nav {
  padding: .5rem .8rem;
  color: var(--ink);
  font: .85rem/1 var(--pixel);
  text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--blue);
}

.masthead .nav:hover { color: var(--black); background: var(--yellow); }

/* ---------- copper bars ---------- */

.copper {
  position: relative;
  height: 22px;
  margin: 1.5rem calc(50% - 50vw) 3rem;
  overflow: hidden;
  background: linear-gradient(180deg,
    var(--red) 0 16%, transparent 16% 20%,
    var(--orange) 20% 36%, transparent 36% 40%,
    var(--yellow) 40% 56%, transparent 56% 60%,
    var(--green) 60% 76%, transparent 76% 80%,
    var(--blue) 80% 96%, transparent 96%);
}

.copper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  mix-blend-mode: overlay;
  animation: shine 7s linear infinite;
}

@keyframes shine {
  from { transform: translateX(-100%); }
  to { transform: translateX(500%); }
}

.copper.thin { height: 10px; margin: 4rem calc(50% - 50vw) 1.5rem; transform: scaleY(-1); }

/* ---------- type ---------- */

h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}

h1.page-title { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); }

.lead { max-width: 34rem; font-size: 1.15rem; }
.note { max-width: 34rem; color: var(--ink-soft); font-size: .9rem; }

/* ---------- front page ---------- */

.front {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2.5rem 4rem;
  align-items: start;
}

.front .intro p:last-child { margin-bottom: 0; }

.record {
  padding: 1.1rem 1.6rem;
  cursor: pointer;
  color: #ffffff;
  background: var(--red);
  font: 700 1.1rem/1 var(--pixel);
  letter-spacing: .04em;
  border: 3px solid var(--black);
  box-shadow: 6px 6px 0 var(--yellow);
  transition: transform .08s, box-shadow .08s;
}

.record:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--yellow); }
.record:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--yellow); }
.record[aria-pressed="true"] { background: #a8261c; animation: pulse 1s steps(2) infinite; }
.record:disabled { opacity: .6; cursor: progress; }

@keyframes pulse {
  50% { box-shadow: 6px 6px 0 var(--red); }
}

.upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 2rem;
  padding: 1rem 1.1rem;
  border: 2px dashed var(--line);
}

.upload label {
  flex-basis: 100%;
  color: var(--ink-soft);
  font: .8rem/1 var(--pixel);
  letter-spacing: .05em;
}

.upload input[type="file"] {
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--ink-soft);
  font: inherit;
  font-size: .9rem;
}

.upload input[type="file"]::file-selector-button {
  margin-right: .75rem;
  padding: .45rem .8rem;
  cursor: pointer;
  color: var(--ink);
  background: transparent;
  font: .8rem/1 var(--pixel);
  border: 2px solid var(--ink-soft);
}

.upload button {
  padding: .6rem 1.1rem;
  cursor: pointer;
  color: var(--black);
  background: var(--sky);
  font: 700 .9rem/1 var(--pixel);
  border: 3px solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
}

.upload button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--black); }

.limits { margin: .9rem 0 0; color: var(--ink-soft); font-size: .85rem; }

.status { color: var(--yellow); }
.status:empty { margin: 0; }
.status.busy::after { content: "█"; margin-left: .3em; animation: blink 1s steps(1) infinite; }

@keyframes blink {
  50% { opacity: 0; }
}

.error {
  padding: .6rem .8rem;
  color: #ffc2ba;
  background: rgba(224, 86, 74, .14);
  border-left: 4px solid var(--red);
}

/* ---------- results ---------- */

table.results { width: 100%; margin: .5rem 0 1.5rem; border-collapse: collapse; }

.results th {
  padding: 0 1rem .6rem 0;
  color: var(--ink-soft);
  font: .75rem/1 var(--pixel);
  letter-spacing: .06em;
  text-align: left;
  border-bottom: 2px solid var(--line);
}

.results td { padding: .9rem 1rem 0 0; vertical-align: baseline; }
.results .n { color: var(--ink-soft); font: .8rem/1 var(--pixel); }
.results .tune { font-size: 1.1rem; font-weight: 700; }

.results tr.detail td {
  padding: .2rem 1rem .9rem 0;
  color: var(--ink-soft);
  font-size: .9rem;
  border-bottom: 1px dashed var(--line);
}

.chip {
  display: inline-block;
  padding: .3rem .45rem .25rem;
  color: var(--black);
  background: var(--ink-soft);
  font: .7rem/1 var(--pixel);
  letter-spacing: .04em;
}

.results tr.confirmed .chip { background: var(--green); }
.results tr.weak .chip { background: var(--orange); }
.results tr.unconfirmed .chip { color: var(--ink-soft); background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.results tr.row.unconfirmed .tune { color: var(--ink-soft); font-weight: 500; }

.links a { margin-left: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.links a:hover { text-decoration: underline; }

.legend { max-width: 44rem; color: var(--ink-soft); font-size: .9rem; }
.legend b { color: var(--ink); }
.again { margin-top: 1.75rem; }

/* ---------- about ---------- */

table.stats { margin: .75rem 0 1rem; border-collapse: collapse; }
.stats th { padding: .3rem 2rem .3rem 0; font-weight: 600; text-align: left; }
.stats td { padding: .3rem 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.donate, .donate:hover {
  display: inline-block;
  padding: .75rem 1.2rem;
  color: var(--black);
  background: var(--yellow);
  font: 700 .95rem/1 var(--pixel);
  text-decoration: none;
  border: 3px solid var(--black);
  box-shadow: 5px 5px 0 var(--black);
}

.donate:hover { background: var(--sky); }
.donate:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--black); }


.about { max-width: 44rem; }
.about h2 { margin: 2.5rem 0 .6rem; font: 700 1rem/1.2 var(--pixel); letter-spacing: .05em; }
.about h2:nth-of-type(4n+1) { color: var(--yellow); }
.about h2:nth-of-type(4n+2) { color: var(--green); }
.about h2:nth-of-type(4n+3) { color: var(--sky); }
.about h2:nth-of-type(4n+4) { color: var(--orange); }
.about ul { padding-left: 1.2rem; }
.about li::marker { color: var(--yellow); }

/* ---------- footer ---------- */

.site-footer { color: var(--ink-soft); font-size: .85rem; }

.footer-row { display: grid; gap: 1.1rem; }
.footer-row p { margin: 0; }

.support-line a { font: .8rem/1.6 var(--pixel); }

/* Out of the way until a keyboard reaches it. */
.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 2;
  padding: .6rem .9rem;
  color: var(--black);
  background: var(--yellow);
  font: 700 .85rem/1 var(--pixel);
  text-decoration: none;
}

.badges { display: flex; flex-wrap: wrap; gap: .5rem; }

.badge {
  display: inline-flex;
  height: 31px;
  min-width: 88px;
  font: .6rem/1 var(--pixel);
  border: 1px solid var(--black);
  box-shadow: 3px 3px 0 var(--black);
}

.badge b, .badge i {
  display: flex;
  align-items: center;
  padding: 0 .45rem;
  font-style: normal;
  font-weight: 700;
}

.badge b { color: #ffffff; background: var(--black); }
.badge i { flex: 1; justify-content: center; color: var(--black); }
.badge.yellow i { background: var(--yellow); }
.badge.green i { background: var(--green); }
.badge.sky i { background: var(--sky); }

/* ---------- motion and small screens ---------- */

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker .meta[aria-hidden="true"] { display: none; }
  .copper::after { display: none; }
  .record[aria-pressed="true"], .status.busy::after { animation: none; }
  .record, .upload button { transition: none; }
}

@media (max-width: 52rem) {
  .front { grid-template-columns: minmax(0, 1fr); }
}

/* Narrow screens: the logo is centred on a row of its own, the ticker and about share the row below,
   and the badges keep their size and flow centred. */
@media (max-width: 40rem) {
  .masthead .name, .masthead .name:hover {
    display: flex;
    justify-content: center;
    flex-basis: 100%;
    font-size: clamp(1.2rem, 5.2vw, 1.8rem);
  }
  .ticker { order: 0; flex: 1 1 0; }
  .badges { justify-content: center; }
}

@media (max-width: 36rem) {
  html { font-size: 15px; }
  body { padding: 1rem .9rem 2rem; }
  .copper { margin-bottom: 2rem; }
  /* One result per block: six columns never fit a phone. Each cell says what it is. */
  .results, .results tbody, .results tr, .results td { display: block; }
  .results thead { display: none; }
  .results tr.row { margin-top: 1.25rem; }
  .results tr.row td { padding: .15rem 0; }
  .results td.tune { font-size: 1.15rem; }
  .results td.file { word-break: break-all; }
  .results td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-soft); }
  .results tr.detail td:first-child { display: none; }
  .results tr.detail td { padding: .35rem 0 1rem; }
  .links { display: block; margin-top: .25rem; }
  .links a:first-child { margin-left: 0; }
}