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

:root {
  --px: 2px;
  --bg-dark: #1a1209;
  --bg-mid:  #2a1f10;
  --bg-light:#3d2e18;
  --ink:     #f0e6c8;
  --ink2:    #c8b48a;
  --ink3:    #8a7355;
  --gold:    #f0c040;
  --gold2:   #a07820;
  --blood:   #c03020;
  --clergy:  #9060c0;
  --noble:   #4090d0;
  --people:  #40b060;
  --panel-bg:#16120a;
  --panel-border: #5a4020;
  --px-border: 2px solid var(--panel-border);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: #0a0806;
  overflow: hidden;
}

#game {
  width: 100vw;
  height: 100vh;
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  position: relative;
  image-rendering: pixelated;
  font-family: 'Press Start 2P', monospace;
}

/* Pixel font sizing helpers */
.px-sm { font-size: 7px; }
.px-md { font-size: 8px; }
.hidden { display: none !important; }

/* Colors */
.clergy-color { color: var(--clergy); }
.noble-color  { color: var(--noble); }
.people-color { color: var(--people); }