/* The page in the colours of the tables' dot matrix: amber dots on black. */
:root {
  --bg: #0b0806;
  --panel: #0a0503;
  --dot-off: #2a1407;
  --amber: #ff9a2b;
  --amber-dim: #a85f17;
  --text: #ece2d8;
  --muted: #9e9086;
  --line: #2b2019;
  --glow: 0 0 6px rgba(255, 140, 30, 0.55), 0 0 18px rgba(255, 110, 20, 0.25);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--amber); }

/* ---- game play behind the page ------------------------------------------------------- */

.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Dark enough over the video that the page reads as it would without it. */
.bg-shade {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 40%, rgba(11, 8, 6, 0.74), rgba(11, 8, 6, 0.93));
}

/* Behind everything under the banner, a strip as wide as it, down to the foot of the page:
   the game still shows through, softer behind the text. */
.column { position: relative; }
.column::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(888px, calc(100% - 32px));
  transform: translateX(-50%);
  background: rgba(10, 6, 4, 0.55);
  border-left: 1px solid rgba(255, 150, 40, 0.08);
  border-right: 1px solid rgba(255, 150, 40, 0.08);
  transition: opacity 0.4s ease;
}

/* The two pictures on one another, the 1994 one shown up to the line (--pos from the left). */
.compare {
  position: relative;
  margin-top: 22px;
  border: 2px solid #1d120b;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  touch-action: pan-y;
}
.compare img { display: block; width: 100%; height: auto; }
.compare .compare-1994 {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--amber);
  box-shadow: var(--glow);
  pointer-events: none;
}
/* The handle in the middle of the line. */
.compare-line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--amber-dim);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9a2b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E") center / 70% no-repeat,
    rgba(10, 5, 3, 0.85);
}
.compare-label {
  position: absolute;
  top: 10px;
  padding: 3px 8px 1px;
  border-radius: 4px;
  background: rgba(10, 5, 3, 0.75);
  font-size: 14px;
  line-height: 1.3;
  pointer-events: none;
}
.compare-label.left { left: 10px; }
.compare-label.right { right: 10px; }
/* Over all of it, unseen: what is dragged, and what the keyboard moves. */
.compare input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.compare:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Who makes it: the words, and the picture to their right. */
.team { display: grid; grid-template-columns: 1fr 200px; gap: 24px; align-items: start; }
.team p { font-size: 18px; line-height: 1.55; margin: 0 0 0.8em; }
.team p:last-child { margin-bottom: 0; }
.portrait { margin: 0; }
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid #1d120b;
  border-radius: 8px;
}
.portrait figcaption { margin-top: 8px; text-align: center; font-size: 14px; }
@media (max-width: 560px) {
  .team { grid-template-columns: 1fr 130px; gap: 14px; }
  .team p { font-size: 16px; }
  .portrait figcaption { font-size: 11px; }
}

/* Inside the strip, the text keeps clear of its edges; the boards, as wide as the banner, do not. */
main section > :not(.carousel):not(.compare):not(.lead) { margin-left: 16px; margin-right: 16px; }
@media (max-width: 560px) {
  main section > :not(.carousel):not(.compare):not(.lead) { margin-left: 12px; margin-right: 12px; }
  .filters .filter { gap: 6px; }
  .filters .filter button { font-size: 12px; padding: 5px 8px 3px; }
}

/* Left alone (app.js), the page fades back slowly and the game shows through; it comes back
   quickly at the first touch. */
.bg-shade, .masthead, main, .footer { transition: opacity 0.4s ease; }
body.idle .bg-shade { opacity: 0.55; transition-duration: 2.5s; }
body.idle .masthead, body.idle main, body.idle .footer, body.idle .column::before { opacity: 0.45; transition-duration: 2.5s; }
a:hover { color: #ffc070; }

main, .masthead, .footer { max-width: 920px; margin: 0 auto; padding: 0 16px; }

/* ---- the dot matrix ------------------------------------------------------------------- */

/* Unlit dots behind everything, as on the real display. */
.dmd {
  background:
    radial-gradient(circle, var(--dot-off) 0 34%, transparent 40%) 0 0 / 5px 5px,
    var(--panel);
  border: 2px solid #1d120b;
  border-radius: 8px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85), 0 0 0 1px #000, 0 12px 40px rgba(0, 0, 0, 0.5);
}

.dmd-text {
  font-family: "Doto", ui-monospace, monospace;
  font-weight: 900;
  color: var(--amber);
  text-shadow: var(--glow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.masthead { padding-top: 28px; }

/* The banner, with the dot matrix scrolling the tables' names attached to its foot. */
/* As wide as everything below it, the tables' banners included. */
.hero { width: 100%; }
.hero img { display: block; width: 100%; height: auto; }
.marquee-strip {
  margin-top: -1px;
  padding: 8px 0 6px;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
  border-top: none;
}

.marquee {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-size: clamp(13px, 2.6vw, 18px);
  animation: marquee 28s linear infinite;
}
.marquee .dmd-text { font-weight: 700; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
}

/* ---- sections ---------------------------------------------------------------------------- */

section { padding: 36px 0 12px; }

.lead { font-size: 22px; line-height: 1.45; max-width: 66.7%; margin: 8px auto 1em; text-align: center; }

.features { padding-left: 20px; }
.features li { margin: 8px 0; }
.features li::marker { color: var(--amber); }

.note {
  border-left: 3px solid var(--amber-dim);
  padding: 4px 0 4px 14px;
  color: var(--muted);
}
.note strong { color: var(--text); }

.dmd-title {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 14px 4px;
  font-size: 26px;
  background:
    radial-gradient(circle, var(--dot-off) 0 34%, transparent 40%) 0 0 / 5px 5px,
    var(--panel);
  border: 2px solid #1d120b;
  border-radius: 6px;
}

/* A title drawn rather than set, centred over what it heads. */
.picture-title { margin: 0 0 16px; line-height: 0; text-align: center; }
.picture-title img { display: inline-block; width: 100%; max-width: 640px; height: auto; }
/* Set in the game's own letters, at a whole number of screen pixels to each of theirs. */
.font-title { margin-bottom: 26px; }
/* All at one letter height; a title too wide for a phone is shrunk to fit, in proportion. */
.font-title img { width: auto; height: 42px; max-width: 100%; object-fit: contain; image-rendering: pixelated; }

.muted { color: var(--muted); }
.small { font-size: 14px; }

code, .kbd {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: #1a120d;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* ---- downloads --------------------------------------------------------------------------- */

.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.button {
  display: flex;
  flex-direction: column;
  padding: 7px 12px;
  border: 1px solid #66a8c2;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  /* The banner's blue, lit from above. */
  background: linear-gradient(180deg, rgba(128, 192, 216, 0.42), rgba(70, 132, 160, 0.22));
  line-height: 1.35;
}
.button:hover {
  border-color: #9fd3e6;
  color: var(--text);
  background: linear-gradient(180deg, rgba(150, 210, 232, 0.55), rgba(84, 150, 180, 0.32));
}
.button .platform { font-weight: 600; }
.button .file { font-size: 13px; color: #c9d6dc; }

#download .dmd-title { margin-bottom: 8px; }
#release { margin-top: 0; margin-bottom: 0; }

/* ---- high scores ------------------------------------------------------------------------- */

.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 14px; }

.filter button {
  font-family: "Doto", ui-monospace, monospace;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber-dim);
  background: var(--panel);
  border: 1px solid #2a180c;
  border-radius: 5px;
  padding: 7px 12px 5px;
  cursor: pointer;
}
.filter button { font-size: 13px; padding: 5px 10px 3px; }
.filter button:hover { color: var(--amber); }
.filter button[aria-pressed="true"] {
  color: var(--amber);
  border-color: var(--amber-dim);
  text-shadow: var(--glow);
}

/* One table at a time: its banner from the game, and its scores on the dot matrix below. */
.carousel { position: relative; }
.viewport { overflow: hidden; transition: height 0.4s ease; }
.track { display: flex; align-items: flex-start; transition: transform 0.5s ease; }
.slide { flex: 0 0 100%; min-width: 0; }
.slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1194 / 285;
  border: 2px solid #1d120b;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}
.slide .dmd-board { border-radius: 0 0 8px 8px; }

/* Over the middle of the banner: half its height, which is its width times 285 / 1194 / 2. */
.arrow {
  position: absolute;
  top: calc(min(888px, 100vw - 32px) * 0.1193);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--amber-dim);
  background: rgba(10, 5, 3, 0.82);
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1;
}
/* Drawn rather than typed, so they sit in the middle of the circle whatever the font. */
.arrow svg {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: var(--amber);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(255, 140, 30, 0.6));
}
.arrow:hover { background: rgba(28, 16, 8, 0.95); border-color: var(--amber); }
.arrow.prev { left: 10px; }
.arrow.next { right: 10px; }

.dots { display: flex; justify-content: center; gap: 10px; margin: 14px 0 4px; }
.dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--amber-dim);
  background: var(--dot-off);
  cursor: pointer;
}
.dots button[aria-selected="true"] { background: var(--amber); box-shadow: var(--glow); }

@media (prefers-reduced-motion: reduce) {
  .track, .viewport { transition: none; }
}

.dmd-board { padding: 14px 18px; min-height: 120px; }

.board { list-style: none; margin: 0; padding: 0; }

.board li {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 16px;
  padding: 8px 0;
  line-height: 1.25;
  border-bottom: 1px dashed #2a160a;
}
.board li:last-child { border-bottom: none; }

.board .rank, .board .who, .board .score {
  font-family: "Doto", ui-monospace, monospace;
  font-weight: 900;
  color: var(--amber);
  text-shadow: var(--glow);
  font-size: 22px;
  letter-spacing: 0.05em;
}
.board .rank { color: var(--amber-dim); text-shadow: none; }
.board .tag { font-size: 15px; color: var(--amber-dim); text-shadow: none; margin-left: 6px; }
.board .score { text-align: right; font-variant-numeric: tabular-nums; }
.board .meta {
  grid-column: 2 / 4;
  font-family: "Doto", ui-monospace, monospace;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber-dim);
}
.board .meta span { white-space: nowrap; }
.board .replay {
  margin-left: 10px;
  color: var(--amber-dim);
  border: 1px solid #3a210d;
  border-radius: 4px;
  padding: 1px 7px 0;
  text-decoration: none;
  white-space: nowrap;
}
.board .replay:hover { color: var(--amber); border-color: var(--amber-dim); text-shadow: var(--glow); }

.board-empty { font-size: 26px; text-align: center; margin: 28px 0; }

.how { margin-top: 18px; color: var(--muted); font-size: 15px; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .arrow { width: 34px; height: 34px; }
  .arrow.prev { left: 6px; }
  .arrow.next { right: 6px; }
  .lead { font-size: 19px; }
  .board li { grid-template-columns: 1.8em minmax(0, 1fr) auto; }
  .board .rank, .board .who, .board .score { font-size: 18px; }
}

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

.footer { padding: 40px 16px 48px; border-top: 1px solid var(--line); margin-top: 36px; text-align: center; }
.footer p { margin: 6px 0; }
.stars {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px 0;
  border: 1px solid #3a210d;
  border-radius: 4px;
  background: var(--panel);
  color: var(--amber);
  font-family: "Doto", ui-monospace, monospace;
  font-weight: 900;
  text-decoration: none;
  text-shadow: var(--glow);
}
.stars:hover { border-color: var(--amber-dim); color: var(--amber); }