/* Bootcade : landing page.
   Colours come from the Bootcade brand kit (BRAND.md):
     accent      #2563EB electric blue · #7C3AED purple · #06B6D4 cyan
     surfaces    #0B0F14 deep black · #151B24 background (rest interpolated
                 in the same blue-slate hue to keep the original step count)
     text/muted  #F8FAFC / #A1A7B3
     statuses    #41d08a ok · #f0b54a warn · #f85149 missing · #a371f7 unknown
                 (functional colours, not part of the brand palette : left
                 as-is on purpose) */

:root {
  --accent:   #2563eb;
  --accent2:  #7c3aed;
  --accent3:  #06b6d4;
  --bg:       #0b0f14;
  --bg2:      #151b24;
  --surface:  #1b222e;
  --surface2: #232b3a;
  --border:   #2e3849;
  --text:     #f8fafc;
  --muted:    #a1a7b3;
  --ok:       #41d08a;
  --warn:     #f0b54a;
  --bad:      #f85149;
  --info:     #58a6ff;
  --violet:   #a371f7;

  --sunken:    #070a0e;                   /* inputs and code blocks */
  --header-bg: rgba(11, 15, 20, 0.82);
  --shadow:    rgba(0, 0, 0, 0.85);
  --flag-edge: rgba(255, 255, 255, 0.14);
  --tint:      rgba(128, 128, 128, 0.10); /* neutral hover wash */
  --tint-line: rgba(128, 128, 128, 0.20);

  --radius:   12px;
  /* 1120 px datait d'une barre à six liens ; à huit elle débordait de son
     propre conteneur, ce qui la désalignait du contenu : les deux défauts
     n'en faisaient qu'un. 1280 est aussi la largeur de contenu la plus
     courante aujourd'hui sur ce genre de page, et donne aux cartes ~420 px
     au lieu de ~340.

     Ce plafond vaut quelle que soit la taille de l'écran : une barre trop
     large déborde donc AUSSI en 1920, et resserrer seulement en dessous d'un
     seuil de fenêtre ne corrige rien. Le format compact des liens est pour
     cette raison le format par défaut, pas une adaptation. */
  --maxw:     1360px;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Cantarell, "Noto Sans", sans-serif;
}

/* ── Light theme ─────────────────────────────────────────────────────────────
   The application offers System / Dark / Light, so the page does too. The accent
   is unchanged : it is the brand : while the surfaces invert and the status
   colours are darkened enough to stay legible on white.

   Applied either because the visitor's system asks for it and no explicit choice
   was made, or because they picked Light from the header. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f7f8fc; --bg2: #ffffff; --surface: #ffffff; --surface2: #f1f2f8;
    --border: #e0e3ee; --text: #171a24; --muted: #5d6478;
    --ok: #12864f; --warn: #9a6700; --bad: #cf222e; --info: #0969da; --violet: #8250df;
    --accent2: #6455e0;
    --sunken: #f2f3f9; --header-bg: rgba(247, 248, 252, 0.86);
    --shadow: rgba(23, 26, 36, 0.22); --flag-edge: rgba(0, 0, 0, 0.16);
    --tint: rgba(23, 26, 36, 0.05); --tint-line: rgba(23, 26, 36, 0.12);
  }
}
:root[data-theme="light"] {
  --bg: #f7f8fc; --bg2: #ffffff; --surface: #ffffff; --surface2: #f1f2f8;
  --border: #e0e3ee; --text: #171a24; --muted: #5d6478;
  --ok: #12864f; --warn: #9a6700; --bad: #cf222e; --info: #0969da; --violet: #8250df;
  --accent2: #6455e0;
  --sunken: #f2f3f9; --header-bg: rgba(247, 248, 252, 0.86);
  --shadow: rgba(23, 26, 36, 0.22); --flag-edge: rgba(0, 0, 0, 0.16);
  --tint: rgba(23, 26, 36, 0.05); --tint-line: rgba(23, 26, 36, 0.12);
}

/* Keep the browser's own widgets (scrollbars, form controls) in step. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; } }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ── Header ──────────────────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; gap: 16px; height: 62px; }
/* La marque ne se comprime pas : privée de place elle repliait « Arcade
   library for Linux » sur trois lignes, ce qui déformait toute la barre. */
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -0.01em; flex: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand small {
  display: block; font-weight: 500; font-size: 11px;
  color: var(--muted); letter-spacing: 0.02em; margin-top: -3px;
  white-space: nowrap;
}
.nav-links { margin-left: auto; display: flex; gap: 2px; align-items: center; min-width: 0; }
.nav-links a {
  color: var(--muted); font-size: 13.5px; font-weight: 500;
  padding: 7px 9px; border-radius: 8px; text-decoration: none;
  transition: color .15s, background-color .15s;
  /* Un libellé en deux mots : « ROM manager », « Gestion des ROMs » : se
     coupait en deux lignes dès que la barre manquait de place, et cassait
     l'alignement de tous les autres. Il déborde ou il s'efface, il ne se
     replie pas. */
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: var(--surface); text-decoration: none; }

/* Theme toggle : cycles System → Light → Dark, mirroring the app's three options.
   Only the icon matching the current mode is shown. */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.theme-btn:hover { border-color: var(--accent); color: var(--text); }
.theme-btn svg { width: 16px; height: 16px; display: none; }
.theme-btn[data-mode="system"] .ico-sys,
.theme-btn[data-mode="light"]  .ico-light,
.theme-btn[data-mode="dark"]   .ico-dark { display: block; }

/* Language picker.
   A native <select> is unusable here: browsers hand its drop-down to the operating
   system, which paints a light-themed list no CSS can reach. This is a plain
   button plus list, so it follows the dark theme like everything else. */
.lang-picker { position: relative; margin-left: 4px; }

.lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: border-color .15s, background-color .15s;
}
.lang-btn:hover { border-color: var(--accent); }
.lang-btn .chev { width: 12px; height: 12px; opacity: .6; transition: transform .15s; }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.flag {
  display: inline-flex; width: 18px; height: 13px; flex: none;
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--flag-edge);
}
.flag svg { width: 100%; height: 100%; display: block; }

.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  margin: 0; padding: 5px; list-style: none;
  min-width: 176px; max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 18px 40px -14px var(--shadow);
}
.lang-menu[hidden] { display: none; }
.lang-menu li { margin: 0; }
.lang-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 7px;
  font-size: 14px; color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: background-color .12s, color .12s;
}
.lang-menu a:hover, .lang-menu a:focus {
  background: rgba(124,107,255,0.16); color: var(--text); text-decoration: none; outline: none;
}
.lang-menu a[aria-current="true"] {
  background: rgba(124,107,255,0.26); color: var(--accent2); font-weight: 600;
}

/* ── FinalBurn Neo attribution band ──────────────────────────────────────── */
/* Logo top-left, text to its right taking the rest of the width, link
   buttons on their own full row underneath : aligned with the text, not
   the logo, via the same grid column. */
.fbneo { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; row-gap: 14px; align-items: start; }
.fbneo img { border-radius: 16px; grid-row: 1; grid-column: 1; }
.fbneo-txt { grid-row: 1; grid-column: 2; min-width: 0; }
.fbneo-txt h3 { margin: 0 0 6px; font-size: 1.12rem; letter-spacing: -0.012em; }
.fbneo-txt p  { margin: 0; color: var(--muted); font-size: 0.95rem; text-align: justify; text-justify: inter-word; }
.fbneo-txt p + p { margin-top: 10px; }
.fbneo-links { grid-row: 2; grid-column: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fbneo .btn { flex: none; }
@media (max-width: 620px) {
  .fbneo { grid-template-columns: 1fr; gap: 16px; }
  .fbneo img { grid-column: 1; }
  .fbneo-txt, .fbneo-links { grid-column: 1; }
  .fbneo .btn { width: 100%; justify-content: center; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 10px;
  font-weight: 600; font-size: 15px; text-decoration: none;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.btn-accent {
  background-image: linear-gradient(to bottom, var(--accent2), var(--accent));
  border: none; color: #fff;
  box-shadow: 0 8px 22px -8px rgba(124, 107, 255, 0.75);
}
.btn-accent:hover { background-image: linear-gradient(to bottom, var(--accent2), var(--accent2)); }
.btn svg { width: 17px; height: 17px; flex: none; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 88px 0 72px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -50% 0 auto 50%;
  width: 1100px; height: 700px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(124,107,255,0.20), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px; border-radius: 999px;
  background: rgba(124, 107, 255, 0.13);
  border: 1px solid rgba(124, 107, 255, 0.38);
  color: var(--accent2); font-size: 13px; font-weight: 600;
}
.hero h1 {
  font-size: clamp(2.3rem, 6vw, 3.9rem);
  line-height: 1.06; letter-spacing: -0.03em;
  margin: 22px 0 0; font-weight: 800;
}
.hero h1 .grad {
  background: linear-gradient(120deg, var(--accent2), var(--accent) 55%, var(--info));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead {
  font-size: clamp(1.05rem, 2vw, 1.24rem);
  color: var(--muted); max-width: 640px; margin: 20px 0 0;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-meta {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 20px;
  color: var(--muted); font-size: 13.5px;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ok); flex: none; }

/* ── Section furniture ───────────────────────────────────────────────────── */
section { padding: 88px 0; }
.section-head { max-width: 680px; margin-bottom: 42px; }
.eyebrow {
  color: var(--accent2); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.section-head h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.35rem); letter-spacing: -0.022em;
  margin: 10px 0 0; font-weight: 750;
}
.section-head p { color: var(--muted); margin: 14px 0 0; font-size: 1.03rem; }
.alt { background: var(--bg2); border-block: 1px solid var(--border); }

/* ── Feature cards ───────────────────────────────────────────────────────── */
.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -20px rgba(124, 107, 255, 0.85);
}
.card .ico {
  width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 15px;
  background: linear-gradient(135deg, rgba(154,140,255,0.26), rgba(124,107,255,0.12));
  border: 1px solid rgba(124, 107, 255, 0.30);
  font-size: 21px;
}
.card h3 { margin: 0 0 8px; font-size: 1.13rem; letter-spacing: -0.012em; }
.card p  { margin: 0; color: var(--muted); font-size: 0.955rem; }
.card ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 0.93rem; }
.card ul li { margin: 5px 0; }

/* ── App mock-up: a faithful HTML rendering of the real interface ────────── */
.mock {
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--bg); box-shadow: 0 24px 60px -34px var(--shadow);
  font-size: 13px;
}
.mock-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: var(--bg2); border-bottom: 1px solid var(--border);
}
.mock-dots { display: flex; gap: 6px; }
.mock-dots i { width: 11px; height: 11px; border-radius: 999px; background: var(--border); }
.mock-dots i:first-child { background: #f0655a; }
.mock-dots i:nth-child(2) { background: var(--warn); }
.mock-dots i:nth-child(3) { background: var(--ok); }
.mock-title { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.mock-search {
  margin-left: auto; background: var(--sunken); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 14px; color: var(--muted); font-size: 12px; min-width: 190px;
}
.mock-body { display: grid; grid-template-columns: 208px 1fr; min-height: 348px; }
.mock-side { background: var(--bg2); border-right: 1px solid var(--border); padding: 9px 8px; }
.mock-side div {
  padding: 6px 10px; border-radius: 8px; color: var(--muted); font-size: 12.5px;
  display: flex; align-items: center; gap: 8px;
}
.mock-side div.on { background: rgba(124,107,255,0.30); color: var(--accent2); font-weight: 600; }
.mock-main { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.mock-row {
  display: grid; grid-template-columns: 34px 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 7px 11px; border-radius: 10px; border: 1px solid transparent;
}
.mock-row:hover { background: var(--tint); }
.mock-row.sel {
  background: rgba(124,107,255,0.16); border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.mock-art {
  width: 34px; height: 26px; border-radius: 6px;
  background: linear-gradient(135deg, rgba(124,107,255,0.42), rgba(124,107,255,0.14));
}
.mock-name { font-weight: 600; font-size: 12.8px; }
.mock-name small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.mock-sys { color: var(--muted); font-size: 11.5px; }
.pill {
  border-radius: 999px; padding: 1px 10px; font-size: 11px;
  border: 1px solid; white-space: nowrap; font-weight: 600;
}
.pill-ok   { color: var(--ok);   border-color: rgba(65,208,138,0.45); background: rgba(65,208,138,0.12); }
.pill-warn { color: var(--warn); border-color: rgba(240,181,74,0.45); background: rgba(240,181,74,0.12); }
.pill-bad  { color: var(--bad);  border-color: rgba(248,81,73,0.45);  background: rgba(248,81,73,0.12); }
.mock-status {
  display: flex; gap: 16px; padding: 7px 14px; background: var(--bg2);
  border-top: 1px solid var(--border); color: var(--muted); font-size: 11.5px;
}

/* Audit mock-up */
.mock-stats { display: flex; flex-wrap: wrap; gap: 7px; padding: 11px 12px 3px; }
.chip { border-radius: 6px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; color: #0d1117; }
.tree { padding: 6px 12px 12px; font-family: var(--mono); font-size: 11.8px; }
.tree div { padding: 3px 0; color: var(--muted); }
.tree .g { color: var(--text); }
.tree .child { padding-left: 26px; }
.tree .s-bad  { color: var(--bad); font-weight: 700; }
.tree .s-warn { color: var(--warn); font-weight: 700; }
.tree .s-ok   { color: var(--ok); font-weight: 700; }

/* ── Download cards ──────────────────────────────────────────────────────── */
.dl-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.dl {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.dl:hover { border-color: var(--accent); transform: translateY(-2px); }
.dl.featured { border-color: rgba(124,107,255,0.55); background: linear-gradient(180deg, rgba(124,107,255,0.09), var(--surface)); }
.dl .tag {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent2);
  background: rgba(124,107,255,0.15); border: 1px solid rgba(124,107,255,0.35);
  border-radius: 999px; padding: 2px 9px; margin-bottom: 12px;
}
.dl h3 { margin: 0 0 6px; font-size: 1.16rem; }
.dl p  { margin: 0 0 18px; color: var(--muted); font-size: 0.925rem; flex: 1; }
.dl .btn { justify-content: center; }
/* File size, filled in from the GitHub API. Stays empty (and invisible) when the
   release data cannot be fetched. */
.dl-size {
  display: block; text-align: center; margin-top: 9px;
  color: var(--muted); font-size: 0.82rem; min-height: 1em;
}
#rel-badge { margin-left: 8px; }

.note {
  margin-top: 26px; padding: 16px 20px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); font-size: 0.92rem;
}
.note code {
  font-family: var(--mono); font-size: 0.87em; color: var(--accent2);
  background: rgba(124,107,255,0.12); padding: 1.5px 6px; border-radius: 5px;
}

/* ── Code block ──────────────────────────────────────────────────────────── */
pre {
  background: var(--sunken); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; overflow-x: auto; font-family: var(--mono);
  font-size: 13px; line-height: 1.7; color: var(--text); margin: 0;
}
pre .c { color: var(--muted); }
pre .p { color: var(--accent2); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--border); background: var(--bg2); padding: 40px 0; }
.foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; color: var(--muted); font-size: 14px; }
.foot .links { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* La barre porte huit liens plus trois commandes, et les libellés traduits
   sont plus longs qu'en anglais (« Fonctionnalités », « Télécharger »).
   L'étranglement commence donc bien avant le point de rupture historique de
   860 px : on resserre d'abord, on n'efface qu'ensuite, et en commençant par
   les entrées dont la section reste atteignable en faisant défiler la page. */
/* Le sous-titre part en premier : c'est de l'ornement, il vaut environ
   170 px en français, et le supprimer garde tous les liens. Retirer un lien
   avant lui sacrifierait une fonction pour préserver une décoration. */
@media (max-width: 1300px) {
  .brand small { display: none; }
}
/* Puis les liens, du moins utile au plus utile, et seulement quand la place
   manque vraiment : chaque section reste atteignable en faisant défiler la
   page, aucun contenu n'est perdu. Les seuils sont réglés sur le français,
   dont les libellés sont les plus longs des huit langues. */
@media (max-width: 1120px) {
  .nav-links a[href="#build"] { display: none; }
}
@media (max-width: 1020px) {
  .nav-links a[href="#steamos"] { display: none; }
}
@media (max-width: 940px) {
  .nav-links a[href="#download"] { display: none; }
}

@media (max-width: 860px) {
  .mock-body { grid-template-columns: 1fr; }
  .mock-side { display: none; }
  .nav-links a:not(.btn) { display: none; }
  .hero { padding: 60px 0 52px; }
  section { padding: 58px 0; }
}
/* The header gets crowded once the language picker joins the brand and the GitHub
   button, so the least useful pieces step aside rather than wrap. */
@media (max-width: 700px) {
  .brand small { display: none; }
  .brand span { white-space: nowrap; }
}
@media (max-width: 470px) {
  #lang-name { display: none; }          /* flag alone still identifies the language */
  .lang-btn { padding: 6px 8px; gap: 5px; }
}

@media (max-width: 520px) {
  .mock-row { grid-template-columns: 30px 1fr auto; }
  .mock-sys { display: none; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ── ROM management checklist ─────────────────────────────────────────────── */
.checklist {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: grid; gap: 10px 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.98rem; color: var(--text);
}
.checklist li::before {
  content: "✓"; flex: none; margin-top: 1px;
  width: 18px; height: 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #0d1117;
  background: var(--ok);
}