/* One stylesheet for both languages. The palette is the terminal's own (VdtPalette in the app's
   Theme.kt), so the page and the screenshots on it read as one thing. Dark by default, like the app. */

:root {
  --bg: #121315;
  --panel: #1c1e21;
  --surface: #2a2d31;
  --border: #41464d;
  --text: #e6e7e9;
  --text-2: #a9aeb5;
  --green: #63c06a;
  --brand: #256e2b;
  --on-brand: #ffffff;
  --radius: 10px;
  --max: 1120px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f4f6;
    --panel: #ffffff;
    --surface: #e5e7eb;
    --border: #d1d5db;
    --text: #333333;
    --text-2: #5c5c5c;
    --green: #256e2b;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

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

/* The app's green header bar. */
header.bar { background: var(--brand); color: var(--on-brand); }
header.bar .wrap { display: flex; align-items: center; gap: 12px; min-height: 56px; }
header.bar .name { font-weight: 800; letter-spacing: 0.02em; color: inherit; text-decoration: none; display: flex; align-items: center; gap: 10px; }
header.bar .name img { width: 32px; height: 32px; border-radius: 6px; }
header.bar nav { margin-left: auto; display: flex; gap: 16px; font-size: 14px; font-weight: 600; }
header.bar nav a { color: inherit; text-decoration: none; }
header.bar nav a:hover { text-decoration: underline; }

.hero { padding: 56px 0 32px; text-align: center; }
.hero h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.15; margin: 0 0 16px; }
.hero p.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--text-2); max-width: 760px; margin: 0 auto 28px; }
.hero .facts { font-size: 14px; color: var(--text-2); margin-top: 16px; }

.buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 8px; font-weight: 700;
  text-decoration: none; border: 2px solid var(--brand);
}
.btn.primary { background: var(--brand); color: var(--on-brand); }
.btn.secondary { color: var(--text); border-color: var(--border); }
.btn:hover { filter: brightness(1.12); }

.shot { border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; background: var(--panel); }
.hero .shot { margin-top: 40px; }

section { padding: 56px 0; }
section h2 { font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 12px; }
section > .wrap > p.intro { color: var(--text-2); max-width: 760px; margin: 0 0 32px; }

/* Text beside a screenshot, alternating sides; stacked on a phone. */
.feature { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; align-items: center; margin-bottom: 48px; }
.feature:nth-child(even) { grid-template-columns: 1.6fr 1fr; }
.feature:nth-child(even) .text { order: 2; }
.feature h3 { font-size: 22px; margin: 0 0 8px; }
.feature p { color: var(--text-2); margin: 0; }
.feature .shot.portrait { max-width: 280px; justify-self: center; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.gallery figure { margin: 0; }
.gallery figcaption { font-size: 14px; color: var(--text-2); margin-top: 8px; }
.gallery figcaption b { color: var(--text); }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; counter-reset: step; }
.steps .panel h3 { margin: 0 0 8px; font-size: 18px; }
.steps .panel h3::before {
  counter-increment: step; content: counter(step);
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px;
  border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 15px;
}
.steps .panel p { margin: 0; color: var(--text-2); }

/* Supported mods: one card per area of the game, so twelve names read as three short lists. */
.mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: start; }
.mod-group h3 {
  margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green);
}
.mod-group ul { list-style: none; margin: 0; padding: 0; }
.mod-group li { padding: 12px 0; border-top: 1px solid var(--border); }
.mod-group li:first-child { border-top: 0; }
.mod-group li b { font-weight: 700; }
.mod-group .what { display: block; font-size: 14px; color: var(--text-2); }
.tag {
  display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 100px; vertical-align: 2px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--text-2); border: 1px solid var(--border);
}

code { background: var(--surface); padding: 2px 6px; border-radius: 4px; font-size: 0.92em; overflow-wrap: anywhere; }

footer { border-top: 1px solid var(--border); padding: 32px 0 48px; font-size: 14px; color: var(--text-2); }
footer p { margin: 0 0 8px; }

@media (max-width: 760px) {
  header.bar nav a.optional { display: none; }
  .feature, .feature:nth-child(even) { grid-template-columns: 1fr; gap: 16px; }
  .feature:nth-child(even) .text { order: 0; }
  section { padding: 40px 0; }
}

/* A linked mod name: the arrow, not only the colour, says it leads somewhere. */
.mod-group li a { color: var(--text); text-decoration: none; }
.mod-group li a:hover { text-decoration: underline; }
.ext { width: 0.8em; height: 0.8em; margin-left: 5px; vertical-align: -1px; fill: var(--text-2); }
.mod-group li a:hover .ext { fill: var(--green); }