/* BlackScreens site. Palette matches the app's dark and light themes. */

:root {
  /* Dark first, light supported. Without this the browser draws its own furniture, the
     scrollbars and the inside of a <dialog>, in light colours over a dark page. */
  color-scheme: dark light;

  --bg: #12141a;
  --bg-alt: #0d0f14;
  --surface: #1a1d25;
  --surface-alt: #20242e;
  --line: #2b303b;
  --line-strong: #3a4150;
  --text: #e7eaf1;
  --muted: #98a1b2;
  --accent: #4c8dff;
  --accent-text: #ffffff;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);

  --radius: 10px;
  --wrap: 1080px;
  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f5f8;
    --bg-alt: #e9ecf1;
    --surface: #ffffff;
    --surface-alt: #f8f9fb;
    --line: #dde1e8;
    --line-strong: #c3c9d4;
    --text: #181b22;
    --muted: #5c6473;
    --accent: #2563eb;
    --accent-text: #ffffff;
    --shadow: 0 18px 40px rgba(24, 27, 34, 0.12);
  }
}

* { box-sizing: border-box; }

/* Several elements below set display, which would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

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

code, kbd {
  font-family: var(--mono);
  font-size: 0.86em;
}

code {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1em 0.4em;
}

kbd {
  background: var(--surface-alt);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.1em 0.45em;
  color: var(--text);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.wrap.narrow { max-width: 760px; }

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px 16px;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.brand-mark {
  width: 30px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-mark rect:nth-of-type(2) { fill: var(--accent); stroke: var(--accent); }

.site-nav {
  display: flex;
  gap: 22px;
  font-size: 15px;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
}

.site-nav a:hover { color: var(--text); }

.site-nav .repo-link { color: var(--text); }

/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding: 72px 0 84px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -40% 20% auto -10%;
  height: 520px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

.eyebrow {
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 650;
  color: var(--accent);
}

.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.lede {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 18px;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.button:hover { border-color: var(--accent); }

.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.button.primary:hover { opacity: 0.9; }

.fineprint {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.hero-figure { margin: 0; }

.hero-figure svg {
  width: 100%;
  height: auto;
  display: block;
}

.hero-figure figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.screen rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; }
.screen path { stroke: var(--line-strong); stroke-width: 2; fill: none; stroke-linecap: round; }
.screen.off rect { fill: #05070b; }
.screen.on rect:first-of-type { stroke: var(--accent); }
/* CSS beats the fill attribute on the element, so the gradient has to be named here too. */
.screen.on rect.fill { fill: url(#game); stroke: none; }

.labels text {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-anchor: middle;
}

/* Icons. One hidden sprite at the top of the page, referenced with <use>. */

.sprite { display: none; }

/* The two brand marks come from Bootstrap Icons, loaded in the head. They inherit colour and sit
   on the text baseline, so they follow the theme without any rules per icon. */
.bi {
  line-height: 1;
  flex: none;
}

.button .bi { font-size: 1.05em; }

/* On a link the icon is inline rather than a flex child, so it needs its own spacing. */
.repo-link .bi,
.release-all .bi,
.site-footer .bi {
  margin-right: 7px;
  font-size: 0.95em;
  vertical-align: -1px;
}

.lede-icon {
  margin-right: 9px;
  vertical-align: -1px;
}

.card-icon,
.download-icon {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.card-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 12px;
  display: block;
}

.download-icon {
  width: 26px;
  height: 26px;
  margin-top: 2px;
}

/* Sections */

.section { padding: 76px 0; }

.section.alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section h2 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.4vw, 34px);
  letter-spacing: -0.02em;
  font-weight: 680;
}

.section-lede {
  margin: 0 0 34px;
  color: var(--muted);
  max-width: 68ch;
}

.section h2 + .grid,
.section h2 + .shots { margin-top: 34px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 650;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
}

/* Screenshots */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 26px;
}

.shots figure {
  margin: 0;
}

.shots img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface);
}

.shots figcaption,
.tray-shot figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14.5px;
}

.tray-shot {
  margin: 34px 0 0;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.tray-shot img {
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.tray-shot figcaption { margin-top: 0; }

/* Zooming a screenshot. The button is added by the script, so with no JavaScript the shots stay
   plain images rather than dead controls. */

.zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius);
}

.tray-shot .zoom { width: auto; }

/* An img is inline by default, so wrapping one in a button would leave a line box gap under it. */
.zoom img { display: block; }

.zoom:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 96vh;
  color: var(--text);
  overflow: visible;
}

.lightbox::backdrop { background: rgba(5, 7, 11, 0.82); }

/* The dialog takes focus when it opens, so it must not draw a ring of its own. */
.lightbox:focus { outline: none; }

/* Wraps the picture only, so the step buttons sit against its edges and centre on it rather than
   on the caption underneath. */
.lightbox-frame {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.lightbox img {
  display: block;
  width: auto;
  height: auto;
  /* Leaves room either side for the step buttons to sit off the picture. */
  max-width: min(1400px, 84vw);
  max-height: 82vh;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface);
}

.lightbox-step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  padding: 0 0 4px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-step.prev { left: -56px; }
.lightbox-step.next { right: -56px; }

.lightbox-step:hover { border-color: var(--accent); }

.lightbox-step:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lightbox-count {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.lightbox-caption {
  margin: 14px auto 0;
  max-width: 70ch;
  color: var(--muted);
  font-size: 14.5px;
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover { border-color: var(--accent); }

.lightbox-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* On a narrow screen there is no room beside the picture, so the buttons move onto it and the
   corner one comes inside the edge. */
@media (max-width: 760px) {
  .lightbox-close {
    top: 6px;
    right: 6px;
  }

  .lightbox-step.prev { left: 8px; }
  .lightbox-step.next { right: 8px; }
}

/* How it works */

.section p { max-width: 72ch; }

.checklist {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.checklist li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* Downloads */

.downloads {
  display: grid;
  gap: 14px;
  margin-bottom: 34px;
}

.download {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  text-decoration: none;
  color: var(--text);
}

.download-text { min-width: 0; }

.download:hover { border-color: var(--accent); }

.download-name {
  display: block;
  font-weight: 650;
  margin-bottom: 4px;
}

.download-detail {
  display: block;
  color: var(--muted);
  font-size: 15px;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 30px 0 44px;
  color: var(--muted);
  font-size: 15px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-inner p { margin: 0; }

.site-footer nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Small screens */

@media (max-width: 880px) {
  .hero { padding: 52px 0 60px; }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .section { padding: 56px 0; }

  .site-nav { gap: 16px; font-size: 14px; }

  .site-nav a[href="#how"],
  .site-nav a[href="#screens"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Latest release, pulled from the GitHub API at page load */

.release-line {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
}

.release-line::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fb950;
  flex: none;
}

.asset-size {
  color: var(--muted);
  font-weight: 500;
}

.release-notes {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 22px;
}

.release-notes h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 650;
}

.release-body {
  color: var(--muted);
  font-size: 15.5px;
}

.release-body h4 {
  margin: 16px 0 6px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
}

.release-body h4:first-child { margin-top: 0; }

.release-body p { margin: 0 0 10px; }

.release-body ul {
  margin: 0 0 10px;
  padding-left: 20px;
}

.release-body li { margin-bottom: 4px; }

.release-body a { word-break: break-word; }

.release-all {
  display: inline-block;
  margin-top: 6px;
  font-size: 15px;
}