@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #121110;
  --panel: #1c1a17;
  --line: #34302a;
  --text: #ece4d8;
  --muted: #a89c8b;
  --accent: #e0892f;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

main { flex: 1; }

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

h1, h2, h3 {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

h1 { font-size: 40px; margin: 0 0 8px; text-transform: uppercase; }
h2 { font-size: 28px; margin: 40px 0 12px; text-transform: uppercase; }
h3 { font-size: 21px; margin: 28px 0 6px; }

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

/* Header and footer */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.top img { display: block; width: 140px; }

.top nav a {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}

footer {
  padding: 24px 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  margin-bottom: 8px;
}

footer a { color: var(--muted); }

/* Home page */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 64px 16px 56px;
  text-align: center;
  background: linear-gradient(rgba(18, 17, 16, 0.35), var(--bg)), url("/img/hero.webp") center / cover no-repeat;
}

.hero .logo { width: min(560px, 90vw); }

.hero p {
  max-width: 36em;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Store buttons: an <a class="store"> without href shows its "coming soon" card, with one the
   store's badge. Apple's and Google's badges are their official files in each language, shown
   unaltered and only once the game is in that store (Google's are cropped to the badge's edge,
   so they line up with Apple's); Steam has no official badge, so it gets a text one in the same
   shape. All badges show at the same height (Google's must not be smaller than the others). */

.stores {
  --badge-h: 54px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 22px;
  max-width: 900px;
}

.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.platform {
  font-size: 14px;
  color: var(--muted);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.store {
  display: block;
  color: var(--text);
  text-decoration: none;
  border-radius: 9px;
}

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

.store .soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  height: var(--badge-h);
  padding: 0 18px;
  line-height: 1.15;
  background: rgba(18, 17, 16, 0.85);
  border: 1px dashed #6b6257;
  border-radius: 9px;
}

.store .soon strong {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.store .soon small {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.store .badge { display: none; }
.store[href] .soon { display: none; }

.store[href] .badge {
  display: block;
  width: auto;
  max-width: none;
  height: var(--badge-h);
}

.store[href] .badge.steam {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 24px;
  line-height: 1.1;
  color: #fff;
  background: #000;
  border: 1px solid #a6a6a6;
  border-radius: 9px;
}

.badge.steam small { font-size: 12px; }
.badge.steam strong { font-size: 25px; letter-spacing: 0.01em; }

footer .tm {
  max-width: 52em;
  margin: 12px auto 0;
  font-size: 12px;
  opacity: 0.8;
}

.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px 24px;
}

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

.features div {
  padding: 4px 20px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.features p { margin: 0; color: var(--muted); }

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 0;
}

.shots figure { margin: 0; }
.shots img { display: block; border: 1px solid var(--line); }

.shots figcaption {
  padding-top: 6px;
  color: var(--muted);
  font-size: 15px;
}

/* Text pages (support, privacy, Impressum) */

.page {
  max-width: 44em;
  margin: 0 auto;
  padding: 40px 16px 48px;
}

.page { hyphens: auto; }

/* Long links, paths and German words must not push the page wider than a phone. */
.page a, .page code, .page h1 { overflow-wrap: anywhere; }
.page a, .page code { hyphens: none; } /* no hyphen inside an address or a path */

@media (max-width: 480px) {
  h1 { font-size: 32px; }
}

.page .meta { color: var(--muted); margin-top: 0; }

.page .lead {
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.page ul { padding-left: 1.3em; }
.page li { margin-bottom: 6px; }

.page address { font-style: normal; }

code {
  font-size: 0.9em;
  padding: 1px 5px;
  background: var(--panel);
  border: 1px solid var(--line);
}

/* Page not found */

.lost {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 64px 16px;
  text-align: center;
}

/* Language switch: a <details> list, so it works without scripts. */

.top-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.top-home {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
}

.lang { position: relative; }

.lang summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--text);
  background: rgba(18, 17, 16, 0.8);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.lang summary::-webkit-details-marker { display: none; }

.lang summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin: -3px 2px 0 4px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
}

.lang[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }

.lang svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
}

.lang summary:hover,
.lang summary:focus-visible { border-color: var(--accent); outline: none; }

.lang ul {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 3;
  min-width: 150px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.lang li a {
  display: block;
  padding: 7px 16px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.lang li a:hover,
.lang li a:focus-visible { background: var(--line); outline: none; }

.lang li a[aria-current] { color: var(--accent); }

/* Korean and Chinese: Barlow has no Hangul or hanzi, so their text uses the system's fonts,
   and Korean breaks lines only between words. */

:lang(ko) body, body:lang(ko) {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  word-break: keep-all;
}

:lang(zh) body, body:lang(zh) {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

:lang(ko) h1, :lang(ko) h2, :lang(ko) h3,
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 {
  font-family: "Barlow Condensed", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

.lost img { width: min(420px, 80vw); }