/* gbe site: sober pixel-art look based on the DMG console and screen. */

:root {
  --bg: #e6e4dc;        /* console shell */
  --surface: #f4f3ee;
  --ink: #1f2a1f;
  --muted: #5a6356;
  --line: #1f2a1f;
  --shadow: #b9b6a8;
  --accent: #306230;    /* DMG screen shades */
  --accent-ink: #e6f0c8;
  --screen-0: #9bbc0f;
  --screen-3: #0f380f;
  --bezel: #5b5d6b;
  --bezel-color: #4b3a78; /* Game Boy Color, grape */
  --led: #c8102e;
  --pixel: "Press Start 2P", monospace;
  --text: "IBM Plex Mono", ui-monospace, monospace;
  --px: 4px;            /* border / shadow step */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141814;
    --surface: #1c221c;
    --ink: #dfe8d2;
    --muted: #97a38e;
    --line: #dfe8d2;
    --shadow: #0a0d0a;
    --accent: #8bac0f;
    --accent-ink: #0f380f;
    --bezel: #3d3f4a;
    --bezel-color: #3a2d5e;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

code { font-family: var(--text); font-size: 0.92em; }

.wrap { max-width: 1040px; margin: 0 auto; padding-inline: 16px; }

section { padding-block: 64px 8px; }

h1, h2, h3 { font-family: var(--pixel); font-weight: 400; line-height: 1.4; margin: 0; }
h2 { font-size: 18px; margin-bottom: 24px; }
h2::before { content: "▶ "; color: var(--accent); }
h3 { font-size: 12px; margin-bottom: 12px; }

.section-lead { color: var(--muted); margin: -8px 0 24px; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  border-bottom: var(--px) solid var(--line);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; flex-wrap: wrap; }
.brand { font-family: var(--pixel); font-size: 16px; color: var(--ink); text-decoration: none; }
nav { display: flex; gap: 20px; flex-wrap: wrap; }
nav a { color: var(--ink); text-decoration: none; font-size: 14px; }
nav a:hover { color: var(--accent); }
.menu-toggle { display: none; }

/* Hero */
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding-top: 64px; }
.kicker { font-family: var(--pixel); font-size: 10px; color: var(--muted); margin: 0 0 16px; letter-spacing: 1px; text-transform: uppercase; }
.hero h1 { font-size: 56px; margin-bottom: 20px; }
.lead { font-size: 17px; margin: 0 0 28px; max-width: 34em; }
.actions { display: flex; gap: 16px; flex-wrap: wrap; }

.consoles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.console { margin: 0; }
.console-color { margin-top: 48px; } /* staggered, so both screens read as a pair */
.console-color .bezel { background: var(--bezel-color); }
.console-color .screen { border-color: #111; background: #111; }
.bezel {
  position: relative;
  background: var(--bezel);
  padding: 18px 22px 22px;
  border-radius: 10px 10px 48px 10px; /* the DMG's rounded bottom-right corner */
  box-shadow: var(--px) var(--px) 0 var(--shadow);
}
.led { position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; background: var(--led); }
.screen { display: block; width: 100%; height: auto; border: var(--px) solid var(--screen-3); background: var(--screen-0); }
.pixelated { image-rendering: pixelated; }
.console figcaption { font-family: var(--pixel); font-size: 8px; color: var(--muted); text-align: center; margin-top: 12px; letter-spacing: 1px; }

/* Hero carousel (set up by the script): the consoles are stacked in one
   cell, the active one slides in while the other slides out, then its
   screen lights up in four steps, like the four shades of the DMG LCD. */
/* overflow-x: clip keeps the sliding consoles inside the column (no page
   scroll on phones); the padding leaves room for the bezel shadow. */
.consoles.is-carousel { grid-template-columns: 1fr; max-width: 420px; width: 100%; margin-inline: auto; overflow-x: clip; padding-right: var(--px); touch-action: pan-y; }
/* The outgoing console leaves quickly, the incoming one follows. */
.is-carousel .console {
  grid-area: 1 / 1;
  margin-top: 0;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s, opacity 0.3s 0.1s;
}
.is-carousel .console:not(.is-active) {
  opacity: 0; visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.8, 0.3), opacity 0.25s, visibility 0s 0.35s;
}
.is-carousel .console.to-left, .is-carousel .console.from-left { transform: translateX(-30%); }
.is-carousel .console.to-right, .is-carousel .console.from-right { transform: translateX(30%); }
.is-carousel .console.from-left, .is-carousel .console.from-right { transition: none; }
.is-carousel .console.is-active .screen { animation: lcd-on 0.6s steps(4, jump-none) 0.4s both; }
@keyframes lcd-on {
  from { filter: brightness(1.9) contrast(0.35); }
  to { filter: none; }
}

.carousel-nav { grid-area: 2 / 1; display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; }
.carousel-nav[hidden] { display: none; }
.carousel-nav button { cursor: pointer; border: 3px solid var(--line); background: var(--surface); color: var(--ink); padding: 0; }
.carousel-arrow { display: grid; place-items: center; width: 36px; height: 36px; box-shadow: 3px 3px 0 var(--shadow); }
/* A pixel triangle drawn in CSS: the ◀ ▶ glyphs are missing from the pixel
   font, and a fallback font would not center them. 2 px steps, 12x22 px. */
.carousel-arrow::before {
  content: ""; width: 12px; height: 22px; background: currentColor;
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 8px 6px, 8px 8px, 10px 8px, 10px 10px, 12px 10px,
    12px 12px, 10px 12px, 10px 14px, 8px 14px, 8px 16px, 6px 16px, 6px 18px, 4px 18px, 4px 20px, 2px 20px, 2px 22px, 0 22px);
  margin-left: 3px; /* the triangle's weight sits on its flat side */
}
.carousel-arrow[data-step="-1"]::before { transform: scaleX(-1); margin: 0 3px 0 0; }
.carousel-arrow:active { transform: translate(3px, 3px); box-shadow: none; }
.carousel-dot { position: relative; width: 40px; height: 14px; overflow: hidden; }
.carousel-dot::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); }
/* The fill takes 5 s; its end shows the next console. */
.carousel-dot.is-active::after { animation: carousel-fill 5s linear forwards; }
.is-paused .carousel-dot.is-active::after { animation-play-state: paused; }
.carousel-dot.is-active { background: var(--accent-ink); }
@keyframes carousel-fill { to { width: 100%; } }

/* No sliding, no light-up and no automatic change: the buttons still work. */
@media (prefers-reduced-motion: reduce) {
  .is-carousel .console, .is-carousel .console:not(.is-active) { transition: none; }
  .is-carousel .console.is-active .screen { animation: none; }
  .carousel-dot.is-active::after { animation: none; width: 100%; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px;
  font: 600 14px var(--text);
  color: var(--ink); background: var(--surface);
  border: var(--px) solid var(--line);
  box-shadow: var(--px) var(--px) 0 var(--line);
  text-decoration: none;
  transition: transform 60ms steps(1), box-shadow 60ms steps(1);
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--line); }
.btn:active { transform: translate(var(--px), var(--px)); box-shadow: none; }
.btn:focus-visible, nav a:focus-visible, .menu-toggle:focus-visible { outline: var(--px) dashed var(--accent); outline-offset: 3px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-block { display: flex; width: 100%; }
.size { font-weight: 400; opacity: 0.75; }

/* The detailed sections of the features, under their title. */
.toc { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: -8px 0 24px; font-size: 15px; }
.toc span { color: var(--muted); }
/* Links of the page, not of the top menu (nav a). */
.toc a, .toc a:hover { color: var(--accent); text-decoration: underline; font-size: 15px; }

/* Cards */
.grid { display: grid; gap: 24px; }
.features { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--surface);
  border: var(--px) solid var(--line);
  box-shadow: var(--px) var(--px) 0 var(--shadow);
  padding: 20px;
}
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.credits h3 a { color: inherit; }

/* Palettes */
.palettes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.palettes li { display: flex; flex-direction: column; gap: 8px; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); height: 40px; border: var(--px) solid var(--line); }
.palette-name { font-size: 13px; color: var(--muted); }
.palette-shots { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.palette-shots figure { margin: 0; }
.palette-shots img { display: block; width: 100%; height: auto; border: var(--px) solid var(--line); }
.palette-shots figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* Display filters: details shown at their own size, since scaling them
   would blur the LCD grid. */
.lcd-shots { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.lcd-shots figure { margin: 0; }
.lcd-shots img { display: block; width: 100%; max-width: 480px; height: auto; border: var(--px) solid var(--line); }
.lcd-shots figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
#ecran .palette-shots { margin-top: 0; }
#ecran .note { margin-top: 24px; }

/* The Game Boy Camera: the picture given to the camera, and its viewfinder. */
/* Both at the 10:9 of the screen: the picture, 8:7 as the sensor, loses a
   sliver of its top and bottom. */
.camera-shots { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.camera-shots figure { margin: 0; }
.camera-shots img { display: block; width: 100%; height: auto; aspect-ratio: 10 / 9; object-fit: cover; border: var(--px) solid var(--line); }
.camera-shots figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* Screenshots */
.shots { grid-template-columns: repeat(3, 1fr); }
.shots-head { margin-top: 32px; }
.shots figure { margin: 0; }
.shots img { display: block; width: 100%; height: auto; border: var(--px) solid var(--line); }
.shots figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* Drop screen, in the quick start */
/* The width of a column of .shots (3 columns, 24px apart), centered. */
.drop-shot { width: calc((100% - 48px) / 3); margin: 0 auto 24px; }
.drop-shot img { display: block; width: 100%; height: auto; border: var(--px) solid var(--line); }
.drop-shot figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* Downloads */
.downloads { grid-template-columns: repeat(3, 1fr); }
.download ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.download.current { border-color: var(--accent); }
.download.current h3::after { content: " · votre système"; color: var(--accent); font-size: 8px; }
.note { font-size: 13px; color: var(--muted); }
.subhead { margin-top: 40px; }
.terminal {
  background: var(--screen-3); color: var(--screen-0);
  padding: 16px 20px; margin: 0 0 24px;
  border: var(--px) solid var(--line);
  overflow-x: auto;
}
.terminal code { display: block; }
.terminal code::before { content: "$ "; opacity: 0.6; }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--shadow); }
th { font-family: var(--pixel); font-size: 10px; font-weight: 400; border-bottom: var(--px) solid var(--line); }
.keys { margin-bottom: 12px; }
.keys th:first-child { width: 36%; }

/* Release notes (HTML rendered by GitHub) */
.release { margin-bottom: 24px; }
.older-releases { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.older-releases time { font-size: 13px; color: var(--muted); margin-left: 8px; }
.release-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.release-head h3 { margin: 0; font-size: 14px; }
.release-head h3 a { color: var(--ink); text-decoration: none; }
.release-head time { color: var(--muted); font-size: 14px; }
.tag { font-size: 12px; border: 2px solid var(--muted); padding: 0 6px; color: var(--muted); }
.release-title { font-weight: 600; margin: 8px 0 0; }
.release-body { font-size: 15px; }
.release-body h1, .release-body h2, .release-body h3 { font-family: var(--text); font-weight: 600; font-size: 16px; margin: 24px 0 8px; }
.release-body h2::before { content: none; }
.release-body ul { padding-left: 22px; }
.release-body li { margin: 4px 0; }
.release-body p { color: var(--ink); margin: 12px 0; }
.release-body pre { background: var(--bg); padding: 12px 16px; overflow-x: auto; border: 2px solid var(--shadow); }
.release-body table { margin: 12px 0; }
.release-body .markdown-heading { display: block; }
.release-body .anchor { display: none; }

/* Footer */
.footer { margin-top: 72px; padding: 24px 0 40px; border-top: var(--px) solid var(--line); font-size: 14px; }
.footer p { margin: 4px 0; }

/* Responsive */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .hero h1 { font-size: 40px; }
  .features, .downloads { grid-template-columns: 1fr 1fr; }
  .palettes { grid-template-columns: repeat(3, 1fr); }
  .palette-shots { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* Without JavaScript, the menu wraps on several lines, which would eat the
     small screen if the bar stayed on top. */
  .topbar { position: static; }
  html { scroll-padding-top: 0; }
  nav { gap: 12px; }
  nav a { font-size: 13px; }
  /* With JavaScript, it folds behind the Menu button, in a thin bar. */
  .topbar.has-menu { position: sticky; }
  html:has(.has-menu) { scroll-padding-top: 64px; }
  .has-menu .topbar-inner { min-height: 48px; }
  .has-menu .menu-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    font: 600 13px var(--text);
    color: var(--ink); background: var(--surface);
    border: var(--px) solid var(--line);
    box-shadow: var(--px) var(--px) 0 var(--line);
    cursor: pointer;
  }
  .menu-toggle::before { /* three pixel lines */
    content: ""; width: 14px; height: 10px;
    background: linear-gradient(var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 6px, transparent 6px 8px, var(--ink) 8px 10px);
  }
  .has-menu nav { display: none; flex-basis: 100%; flex-direction: column; gap: 0; padding-bottom: 8px; }
  .has-menu.is-open nav { display: flex; }
  .has-menu.is-open .topbar-inner { padding-top: 5px; } /* keep the first row where it was */
  .has-menu nav a { font-size: 15px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--line) 25%, transparent); }
  .features, .shots, .downloads, .lcd-shots, .camera-shots { grid-template-columns: 1fr; }
  .drop-shot { width: 100%; }
  .palettes { grid-template-columns: repeat(2, 1fr); }
  .bezel { padding: 12px 14px 16px; }
  .console-color { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}