@font-face {
  font-family: "Press Start 2P";
  src: url("/assets/press_start_2p.ttf") format("truetype");
  font-display: swap;
}

:root {
  --deep-night: #14101f;
  --night-surface: #201a33;
  --night-surface-high: #2a2140;
  --gold: #f2c94c;
  --pale-gold: #fff3c4;
  --mystic-purple: #8b7ec8;
  --mystic-light: #b9a8f0;
  --material-brown: #d4a26a;
  --blood-red: #e05563;
  --text-primary: #ede8f5;
  --text-muted: #9b92b8;
  --health-green: #6fcf97;
  --border-subtle: rgba(242, 201, 76, 0.25);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: radial-gradient(circle at 50% -10%, #241c3d 0%, var(--deep-night) 55%);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

.pixel {
  font-family: "Press Start 2P", monospace;
  line-height: 1.7;
}

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

img {
  max-width: 100%;
}

.wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Nav --- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.nav-brand img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--gold);
}

.nav-brand span {
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  color: var(--text-primary);
}

.nav-links {
  display: flex;
  gap: 20px;
  font-size: 14px;
}

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--gold);
}

/* --- Card / panel, same shape language as the game's building cards --- */
.panel {
  background: var(--night-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 28px;
}

.panel + .panel {
  margin-top: 20px;
}

/* --- Footer --- */
footer {
  margin-top: 60px;
  padding: 30px 0 50px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

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

/* --- Legal page typography --- */
.legal h1 {
  font-family: "Press Start 2P", monospace;
  font-size: 18px;
  color: var(--gold);
  line-height: 1.6;
  margin-bottom: 8px;
}

.legal .updated {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 32px;
}

.legal h2 {
  color: var(--pale-gold);
  font-size: 18px;
  margin-top: 36px;
  border-left: 3px solid var(--gold);
  padding-left: 12px;
}

.legal p, .legal li {
  color: var(--text-primary);
}

.legal ul {
  padding-left: 22px;
}

.legal strong {
  color: var(--gold);
}

@media (max-width: 600px) {
  .nav-links { gap: 12px; font-size: 12px; }
  .panel { padding: 20px; }
}