/* Pixelschrift, liegt selbst im Repo (keine Anfrage an fremde Server) */
@font-face {
  font-family: "Press Start 2P";
  src: url("fonts/press-start-2p.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* Seite */
  --bg: #16182a;
  --bg-2: #1e2138;
  --text: #e8e6df;
  --muted: #a3a6bf;
  --line: #2f3352;
  /* Game Boy, Farben wie im Über-Fenster der App */
  --shell: #cbc6bc;
  --shell-dark: #a9a499;
  --bezel: #5d5e70;
  --navy: #2b2f7a;
  --berry: #9a2257;
  --dpad: #2a2a2e;
  /* LCD-Grün, wird per JS beim Farbwechsel angepasst */
  --lcd-0: #9bbc0f;
  --lcd-3: #0f380f;
  --pixel: "Press Start 2P", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 1px 1px, #ffffff0d 1px, transparent 0) 0 0 / 16px 16px,
    var(--bg);
  color: var(--text);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--lcd-0); }
code { background: #ffffff14; padding: .1em .35em; border-radius: 4px; font-size: .92em; }
kbd {
  font: 11px var(--pixel); background: var(--bg-2); border: 1px solid var(--line);
  border-bottom-width: 3px; border-radius: 4px; padding: 3px 6px; margin: 0 2px;
}
.small { font-size: .85em; }
.muted { color: var(--muted); }

/* ---------- Kopfzeile ---------- */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px clamp(16px, 4vw, 48px);
  background: #16182acc; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 16px var(--pixel); }
.top nav { display: flex; gap: clamp(10px, 2.5vw, 28px); flex-wrap: wrap; }
.top nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.top nav a:hover { color: var(--text); }

/* ---------- Startbereich ---------- */
.hero {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center;
  gap: clamp(24px, 5vw, 72px);
  max-width: 1180px; margin: 0 auto; padding: clamp(32px, 7vw, 88px) clamp(16px, 4vw, 48px) 48px;
}
.kicker { font: 11px var(--pixel); color: var(--lcd-0); letter-spacing: 1px; margin: 0 0 18px; }
h1 { font: clamp(22px, 2.9vw, 34px)/1.5 var(--pixel); margin: 0 0 22px; text-shadow: 4px 4px 0 var(--navy); }
.lead { font-size: 1.12em; color: #cfd0dc; max-width: 34em; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 12px; }
.btn {
  display: inline-flex; flex-direction: column; justify-content: center;
  padding: 14px 22px; border-radius: 10px; text-decoration: none;
  transition: transform .08s, box-shadow .08s;
}
.btn-primary { background: var(--lcd-0); color: var(--lcd-3); box-shadow: 0 5px 0 var(--lcd-3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--lcd-3); }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--lcd-3); }
.btn-label { font: 14px var(--pixel); }
.btn-sub { font-size: 13px; margin-top: 6px; opacity: .8; }
.btn-ghost { color: var(--text); border: 2px solid var(--line); font-size: 15px; }
.btn-ghost:hover { border-color: var(--muted); }
.version { color: var(--muted); font-size: 14px; min-height: 1.6em; }
.gb-hint { grid-column: 2; text-align: center; color: var(--muted); font-size: 14px; margin: -18px 0 0; }

/* ---------- Game Boy aus CSS ---------- */
.gameboy {
  --u: min(1px, calc((100vw - 32px) / 360)); /* Skalierung auf kleinen Bildschirmen */
  position: relative; justify-self: center;
  width: calc(360 * var(--u)); height: calc(590 * var(--u));
  background: linear-gradient(160deg, #d7d2c8, var(--shell) 40%, var(--shell-dark));
  border-radius: calc(14 * var(--u)) calc(14 * var(--u)) calc(70 * var(--u)) calc(14 * var(--u));
  box-shadow: inset 0 -6px 0 #0000001f, inset 0 2px 0 #ffffff80, 0 30px 60px #00000080;
  transform: rotate(-4deg);
  transition: transform .4s;
  user-select: none;
}
.gameboy:hover { transform: rotate(0); }
.gb-bezel {
  position: absolute; left: calc(22 * var(--u)); top: calc(30 * var(--u));
  width: calc(316 * var(--u)); height: calc(260 * var(--u));
  background: var(--bezel);
  border-radius: calc(10 * var(--u)) calc(10 * var(--u)) calc(40 * var(--u)) calc(10 * var(--u));
}
.gb-bezel-title {
  position: absolute; top: calc(8 * var(--u)); left: calc(12 * var(--u)); right: calc(12 * var(--u));
  display: flex; align-items: center; gap: 6px;
  font: 700 calc(7 * var(--u)) system-ui, sans-serif; color: #cfd0dc; letter-spacing: .5px;
}
.gb-bezel-title::before, .gb-bezel-title::after {
  content: ""; flex: 1; height: calc(5 * var(--u));
  border-top: calc(2 * var(--u)) solid var(--berry); border-bottom: calc(2 * var(--u)) solid var(--navy);
}
.gb-power {
  position: absolute; left: calc(6 * var(--u)); top: calc(96 * var(--u));
  font: calc(6 * var(--u)) system-ui, sans-serif; color: #cfd0dc; text-align: center;
}
.gb-power i {
  display: block; width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin: 0 auto 3px;
  border-radius: 50%; background: #3b1820;
}
.gb-power.on i { background: #ff2a3a; box-shadow: 0 0 8px #ff2a3a; }
#lcd {
  position: absolute; left: calc(48 * var(--u)); top: calc(26 * var(--u));
  width: calc(220 * var(--u)); height: calc(198 * var(--u)); /* 160x144 im Verhältnis */
  image-rendering: pixelated; background: var(--lcd-0);
  box-shadow: inset 0 0 0 2px #00000030;
}
.gb-logo {
  position: absolute; left: calc(24 * var(--u)); top: calc(302 * var(--u));
  font: italic 800 calc(22 * var(--u)) system-ui, sans-serif; color: var(--navy);
}
.gb-logo small { font-size: calc(10 * var(--u)); font-weight: 500; margin-left: 6px; }
.gb-controls button, .gb-start button { cursor: pointer; border: 0; padding: 0; }
.dpad {
  position: absolute; left: calc(26 * var(--u)); top: calc(372 * var(--u));
  display: grid; grid-template: repeat(3, calc(34 * var(--u))) / repeat(3, calc(34 * var(--u)));
  filter: drop-shadow(0 3px 0 #00000040);
}
.dpad > * { background: var(--dpad); }
.dpad .d-up { grid-area: 1 / 2; border-radius: 4px 4px 0 0; }
.dpad .d-left { grid-area: 2 / 1; border-radius: 4px 0 0 4px; }
.dpad .d-mid { grid-area: 2 / 2; }
.dpad .d-right { grid-area: 2 / 3; border-radius: 0 4px 4px 0; }
.dpad .d-down { grid-area: 3 / 2; border-radius: 0 0 4px 4px; }
.dpad button.pressed, .dpad button:active { background: #000; }
.ab { position: absolute; left: calc(220 * var(--u)); top: calc(378 * var(--u)); width: calc(130 * var(--u)); height: calc(110 * var(--u)); }
.ab button {
  position: absolute; width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: 50%;
  background: var(--berry); box-shadow: 0 4px 0 #5c1233;
}
.ab button.pressed, .ab button:active { transform: translateY(3px); box-shadow: 0 1px 0 #5c1233; }
.ab .btn-b { left: 0; top: calc(30 * var(--u)); }
.ab .btn-a { left: calc(70 * var(--u)); top: 0; }
.ab span { position: absolute; font: 700 calc(12 * var(--u)) system-ui, sans-serif; color: var(--navy); }
.lbl-b { left: calc(22 * var(--u)); top: calc(90 * var(--u)); }
.lbl-a { left: calc(92 * var(--u)); top: calc(60 * var(--u)); }
.gb-start { position: absolute; left: calc(118 * var(--u)); top: calc(506 * var(--u)); display: flex; gap: calc(22 * var(--u)); }
.gb-start div { display: flex; flex-direction: column; align-items: center; transform: rotate(-25deg); }
.gb-start button { width: calc(42 * var(--u)); height: calc(12 * var(--u)); border-radius: 8px; background: #8b8a97; }
.gb-start button.pressed, .gb-start button:active { background: #5d5c69; }
.gb-start span { font: 700 calc(9 * var(--u)) system-ui, sans-serif; color: var(--navy); margin-top: 6px; }
.gb-speaker { position: absolute; right: calc(28 * var(--u)); bottom: calc(26 * var(--u)); display: flex; gap: calc(8 * var(--u)); transform: rotate(-28deg); }
.gb-speaker i { width: calc(6 * var(--u)); height: calc(56 * var(--u)); border-radius: 4px; background: #8f8a80; box-shadow: inset 0 2px 2px #00000040; }

/* ---------- Abschnitte ---------- */
.section { max-width: 1180px; margin: 0 auto; padding: 56px clamp(16px, 4vw, 48px); }
h2 { font: clamp(16px, 2.2vw, 22px)/1.5 var(--pixel); margin: 0 0 28px; }
h2 .px { color: var(--lcd-0); margin-right: 12px; }
h3 { font: 12px/1.6 var(--pixel); margin: 10px 0 8px; }

.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.features article {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 22px;
  transition: transform .15s, border-color .15s;
}
.features article:hover { transform: translateY(-4px); border-color: var(--lcd-0); }
.features p { margin: 0; color: var(--muted); font-size: 15px; }
.ico {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--lcd-0); color: var(--lcd-3); border-radius: 8px; font-size: 22px;
  box-shadow: 0 4px 0 var(--lcd-3);
}

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.gallery figure { margin: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gallery img { display: block; width: 100%; height: 300px; object-fit: contain; background: #0e1020; padding: 12px; }
.gallery figcaption { padding: 12px 16px; font: 10px var(--pixel); color: var(--muted); }

.downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 8px 0 16px; }
.dl {
  display: grid; gap: 4px; padding: 20px 22px; border-radius: 12px; text-decoration: none; color: var(--text);
  background: var(--bg-2); border: 2px solid var(--line); position: relative;
  transition: transform .1s, border-color .1s;
}
.dl:hover { transform: translateY(-3px); border-color: var(--lcd-0); }
.dl-os { font: 12px var(--pixel); }
.dl-detail { color: var(--muted); font-size: 14px; }
.dl-size { font-size: 13px; color: var(--lcd-0); }
.dl.mine { border-color: var(--lcd-0); }
.dl.mine::after {
  content: "DEIN SYSTEM"; position: absolute; top: -10px; right: 14px;
  font: 8px var(--pixel); background: var(--lcd-0); color: var(--lcd-3); padding: 4px 6px; border-radius: 4px;
}

.howto { display: grid; gap: 12px; }
.howto details { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px 20px; }
.howto summary { cursor: pointer; padding: 14px 0; font: 12px var(--pixel); }
.howto ol { margin: 0 0 16px; padding-left: 22px; color: #cfd0dc; }
.howto li { margin: 6px 0; }

.foot { border-top: 1px solid var(--line); padding: 28px clamp(16px, 4vw, 48px) 40px; text-align: center; color: var(--muted); font-size: 14px; }
.foot p { max-width: 900px; margin: 6px auto; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .lead { margin: 0 auto; }
  .cta { justify-content: center; }
  .gameboy { transform: none; }
  .gb-hint { grid-column: 1; margin: 0; }
  .top nav a:not([href="#download"]) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .gameboy { transform: none; }
}