@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Courier+Prime:ital@0;1&display=swap');

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

:root {
  --parchment: #c8a97a;
  --parchment-dark: #8b6340;
  --aged-white: #f5ead8;
}

body {
  background: #110a04;
  background-image:
    radial-gradient(ellipse at 20% 30%, #2a1508 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, #180c03 0%, transparent 55%);
  height: 100dvh;
  position: relative;
  font-family: 'Courier Prime', monospace;
  overflow: hidden;
  user-select: none;
}

#canvas-wrap {
  position: relative;
  cursor: grab;
  width: 100vw;
  height: 100dvh;
}
#canvas-wrap:active { cursor: grabbing; }
#canvas-wrap canvas { display: block; border-radius: 4px; width: 100%; height: 100%; }

#hud {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.52rem;
  letter-spacing: 0.13em;
  color: rgba(200,169,122,0.28);
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 900px), (max-height: 760px) {
  #hud { display: none; }
}