/* Dark Kosmos — strona gry. Kolory jak w papierowym menu gry (PaperPalette). */
:root {
  --space: #121a33;
  --space-deep: #0b1024;
  --cream: #fff5d6;
  --ink: #1b1b24;
  --yellow: #ffc938;
  --blue: #59c7e0;
  --red: #db4740;
  --muted: #c9cde0;
}

* { box-sizing: border-box; }

html { background: var(--space-deep); }

body {
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 8%, #fff6 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 32%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 44%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 66%, #fff5 50%, transparent 51%),
    radial-gradient(2px 2px at 8% 78%, #fff4 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 88%, #fff6 50%, transparent 51%),
    linear-gradient(var(--space), var(--space-deep));
  background-attachment: fixed;
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }

a { color: var(--yellow); }
a:hover { color: #ffe08a; }

header.site {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 24px;
}
header.site .brand img { height: 44px; width: auto; display: block; }
nav.langs a {
  display: inline-block; padding: 4px 10px; margin-left: 4px; border-radius: 6px;
  background: var(--cream); color: var(--ink); font-weight: 800; font-size: 14px;
  text-decoration: none; letter-spacing: .06em;
}
nav.langs a:hover { background: var(--yellow); }

.hero { text-align: center; margin: 12px 0 32px; }
.hero .logo { width: min(560px, 100%); height: auto; transform: rotate(-3deg); }
.hero .ufo { width: 120px; height: auto; image-rendering: pixelated; margin-top: 8px; }
.hero p.tagline { font-size: 20px; font-weight: 700; margin: 8px 0 0; }

.card {
  background: var(--cream); color: var(--ink); border-radius: 10px;
  padding: 20px 22px; margin: 22px 0;
  box-shadow: 5px 7px 0 #0007;
}
.card:nth-of-type(odd) { transform: rotate(-.4deg); }
.card:nth-of-type(even) { transform: rotate(.35deg); }
.card a { color: #b3261e; }
.card h2 {
  margin: 0 0 8px; font-size: 22px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
}
.card h3 { margin: 18px 0 4px; font-size: 17px; }
.card p { margin: 6px 0; }
.card ul { margin: 6px 0; padding-left: 22px; }
.card .updated { color: #555; font-size: 14px; }

.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.button {
  display: inline-block; padding: 10px 16px; border-radius: 8px; font-weight: 800;
  text-decoration: none; background: var(--yellow); color: var(--ink) !important;
  box-shadow: 3px 4px 0 #0006;
}
.button.blue { background: var(--blue); }

.shots { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 28px 0; }
.shots img {
  width: min(220px, 44vw); height: auto; border-radius: 18px; border: 3px solid var(--cream);
  box-shadow: 5px 7px 0 #0008;
}

footer { color: var(--muted); font-size: 14px; text-align: center; margin-top: 40px; }
footer a { color: var(--muted); }