@font-face { font-family: "Lilita One"; src: url("fonts/LilitaOne-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0b0f24;
  --card: #161b3a;
  --text: #c9d2ff;
  --muted: #8e97c8;
  --gold: #ffc83d;
  --cyan: #29e3ff;
  --pink: #ff3fa4;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--cyan); }
img { display: block; max-width: 100%; height: auto; }
.display { font-family: "Lilita One", system-ui, sans-serif; font-weight: 400; letter-spacing: 0.02em; }

/* Studio header over the starfield */
.hero {
  background: linear-gradient(180deg, rgba(11,15,36,0.35), var(--bg) 92%), url("img/space.jpg") center / cover;
  padding: 72px 16px 56px;
  text-align: center;
}
.hero h1 { margin: 0; font-size: clamp(2.4rem, 8vw, 4.2rem); line-height: 1.05; color: var(--gold); text-shadow: 0 4px 0 #8a5a10, 0 0 32px rgba(255,200,61,0.35); }
.hero p { margin: 14px 0 0; color: var(--text); font-size: 1.05rem; }

main { max-width: 960px; margin: 0 auto; padding: 0 16px 48px; }

/* The game card */
.game {
  display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 36px; align-items: center;
  background: linear-gradient(135deg, var(--card), #1d1446);
  border: 1px solid rgba(201,210,255,0.14); border-radius: 22px;
  padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.game .art { border-radius: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 12px 36px rgba(41,227,255,0.18); }
.game .title { display: flex; align-items: center; gap: 16px; }
.game .icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
.game h2 { margin: 0; font-size: 3rem; line-height: 1; color: #fff; }
.game .kind { margin: 2px 0 0; color: var(--gold); font-size: 0.95rem; }
.game ul { padding-left: 1.2em; margin: 16px 0 22px; }
.game li { margin: 4px 0; }
.badge {
  display: inline-block; padding: 10px 20px; border-radius: 999px;
  background: var(--gold); color: #1a1033; font-family: "Lilita One", system-ui, sans-serif; font-size: 1.1rem; letter-spacing: 0.03em;
  box-shadow: 0 4px 0 #8a5a10;
}

.contact { text-align: center; margin-top: 56px; }
.contact h2 { color: var(--gold); font-size: 1.8rem; margin: 0 0 6px; }

footer { border-top: 1px solid rgba(201,210,255,0.1); padding: 22px 16px 32px; text-align: center; color: var(--muted); font-size: 0.9rem; }
footer a { color: var(--muted); }
footer span { margin: 0 8px; }

/* Privacy policy page */
.doc { max-width: 720px; padding-top: 40px; }
.doc h1 { color: var(--gold); font-size: 2.4rem; margin: 8px 0 4px; }
.doc h2 { color: var(--gold); font-size: 1.35rem; margin: 34px 0 6px; }
.small { font-size: 0.9rem; color: var(--muted); }
.back { font-size: 0.95rem; text-decoration: none; }

@media (max-width: 720px) {
  .game { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 22px; }
  .game .art { width: 100%; max-width: 340px; margin: 0 auto; }
  .game h2 { font-size: 2.5rem; }
}