@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&display=swap");

:root {
  --c-chrome: #2a1a4a;
  --c-chrome-2: #3d2a6b;
  --c-panel: #f4e9c1;
  --c-ink: #241a12;
  --c-gold: #f2b134;
  --c-success: #3fa34d;
  --c-danger: #d1495b;
  --font-title: "Press Start 2P", monospace;
  --font-body: "Silkscreen", monospace;
}

body {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--c-ink);
  background: var(--c-chrome);
  image-rendering: pixelated;
  margin: 0;
}

h1, h2 { font-family: var(--font-title); color: var(--c-panel); font-size: 20px; }
.rpg-panel h1, .rpg-panel h2 { color: var(--c-ink); }
.container { width: 100%; max-width: 640px; margin: 0 auto; padding: 16px; box-sizing: border-box; }
/* Mobile-first: base styles above target small screens; enhance upward only. */
@media (min-width: 768px) {
  .container { max-width: 720px; padding: 24px; }
  h1 { font-size: 24px; }
}