/* ============================================================
   base.css — CSS reset + era color palettes
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: 'Cinzel', 'Georgia', serif;
  color: #fff;
}

/* ----- Game wrapper: absolutely positioned & JS-scaled to fit viewport ----- */
#game-wrapper {
  position: absolute;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
}

/* ----- Era Color Palettes ----- */
/*
  Each era exposes:
    --era-primary    main accent color
    --era-secondary  supporting tone
    --era-bg         dark background tint
    --era-text       readable text color
    --era-highlight  hover / selection highlight
*/

:root {
  /* Era I — Prehistoric */
  --era1-primary:   #8B4513;
  --era1-secondary: #A0522D;
  --era1-bg:        #1a0d00;
  --era1-text:      #D2B48C;
  --era1-highlight: #CD853F;

  /* Era II — Medieval */
  --era2-primary:   #2C3E7A;
  --era2-secondary: #4A5A9A;
  --era2-bg:        #050a1a;
  --era2-text:      #B0C4DE;
  --era2-highlight: #6A7FBE;

  /* Era III — Age of Pirates */
  --era3-primary:   #C47B22;
  --era3-secondary: #E09A40;
  --era3-bg:        #1a1000;
  --era3-text:      #FFD580;
  --era3-highlight: #F0B040;

  /* Era IV — Modern */
  --era4-primary:   #2D5A1B;
  --era4-secondary: #4A8A30;
  --era4-bg:        #061006;
  --era4-text:      #90EE90;
  --era4-highlight: #5AAF3A;

  /* Era V — Future Wars */
  --era5-primary:   #0D1B4B;
  --era5-secondary: #1E3A8A;
  --era5-bg:        #000510;
  --era5-text:      #7DF9FF;
  --era5-highlight: #00BFFF;

  /* Active era (defaults to Era I, overridden by JS) */
  --era-primary:   var(--era1-primary);
  --era-secondary: var(--era1-secondary);
  --era-bg:        var(--era1-bg);
  --era-text:      var(--era1-text);
  --era-highlight: var(--era1-highlight);

  /* Grid constants */
  --cell-size: 40px;
  --grid-cols: 48;
  --grid-rows: 27;
  --canvas-w: 1920px;
  --canvas-h: 1080px;
}

/* ----- Canvas ----- */
#game-canvas {
  display: block;
  width: 1920px;
  height: 1080px;
  background: #0a0a0a;
}