/* ═══════════════════════════════════════════════
   base.css — CSS custom properties & reset
   Settlers of Catan — Browser Edition
═══════════════════════════════════════════════ */

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

:root {
  /* ── Terrain colors ── */
  --forest:      #2d6a4f;
  --hills:       #c1440e;
  --fields:      #e9c46a;
  --pasture:     #80b918;
  --mountains:   #8d8d8d;
  --desert:      #d4b483;
  --water:       #457b9d;
  --water-deep:  #1d3557;

  /* ── Player colors ── */
  --p0: #e63946;
  --p1: #457b9d;
  --p2: #2a9d8f;
  --p3: #e9c46a;

  /* ── Resource card colors (mirror terrain) ── */
  --res-wood:   #2d6a4f;
  --res-brick:  #c1440e;
  --res-wheat:  #e9c46a;
  --res-sheep:  #80b918;
  --res-ore:    #8d8d8d;

  /* ── UI colors ── */
  --bg:           #111820;
  --panel:        #1c2430;
  --panel-light:  #263040;
  --text:         #f0ede8;
  --text-muted:   #8a9aaa;
  --accent:       #e9c46a;
  --border:       #2e3e54;

  /* ── Sizes ── */
  --hex-size:    60px;
  --panel-width: 280px;
}

/* ── Box-model reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Body ── */
body {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  overflow: hidden;
}

/* ── Utility ── */
.hidden {
  display: none !important;
}

/* ── Scrollbar styling (webkit) ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--bg);
}