/* ═══════════════════════════════════════════════
   board.css — SVG hex board styles
   Settlers of Catan — Browser Edition
═══════════════════════════════════════════════ */

/* ── Board container ── */
#board-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #2a6896 0%, #1a4a70 55%, #0f2a45 100%);
}

/* ── SVG element ── */
#board-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* ── Hex tiles ── */
.hex-tile {
  stroke-width: 2;
  cursor: default;
}

.hex-forest    { fill: url(#grad-forest);    stroke: #0a1e0c; stroke-width: 2.5; }
.hex-hills     { fill: url(#grad-hills);     stroke: #5a1804; stroke-width: 2.5; }
.hex-fields    { fill: url(#grad-fields);    stroke: #7a4a00; stroke-width: 2.5; }
.hex-pasture   { fill: url(#grad-pasture);   stroke: #1e5006; stroke-width: 2.5; }
.hex-mountains { fill: url(#grad-mountains); stroke: #1e2e3a; stroke-width: 2.5; }
.hex-desert    { fill: url(#grad-desert);    stroke: #7a5010; stroke-width: 2.5; }
.hex-water     { fill: url(#grad-water);     stroke: #0a2840; stroke-width: 2; }

/* ── Number tokens ── */
.hex-number-circle {
  fill: url(#grad-parchment);
  stroke: #9e7a3a;
  stroke-width: 2;
  filter: url(#token-shadow);
}

.hex-number-text {
  fill: #2d1800;
  font-size: 15px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
  font-family: 'Georgia', 'Times New Roman', serif;
}

/* Red numbers (6 and 8) */
.hex-number-red .hex-number-circle {
  fill: #fff4f4;
  stroke: #c1440e;
  stroke-width: 2.5;
}

.hex-number-red .hex-number-text {
  fill: #c1440e;
}

/* ── Probability pips ── */
.pip-dot {
  fill: #7a5a20;
}

.pip-dot-red {
  fill: #c1440e;
}

/* ── Robber ── */
.robber {
  cursor: pointer;
}

/* ── Port labels ── */
.port-label {
  fill: white;
  font-size: 10px;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}

/* ── Settlements ── */
.settlement {
  stroke-linejoin: round;
}

.settlement[data-player="0"] { fill: var(--p0); }
.settlement[data-player="1"] { fill: var(--p1); }
.settlement[data-player="2"] { fill: var(--p2); }
.settlement[data-player="3"] { fill: var(--p3); }

/* ── Cities ── */
.city {
  stroke: #000000;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.city[data-player="0"] { fill: var(--p0); }
.city[data-player="1"] { fill: var(--p1); }
.city[data-player="2"] { fill: var(--p2); }
.city[data-player="3"] { fill: var(--p3); }

/* ── Roads ── */
/* stroke-width and stroke are set inline by JS (_drawRoad); CSS must not override them */
.road {
  stroke-linecap: round;
}

/* ── Highlight: vertex ── */
.highlight-vertex {
  fill: rgba(255, 220, 50, 0.5);
  stroke: #ffd700;
  stroke-width: 2;
  animation: pulse 1s ease-in-out infinite;
  pointer-events: none;
}

/* ── Highlight: edge ── */
.highlight-edge {
  stroke: #ffd700;
  stroke-width: 8;
  opacity: 0.7;
  stroke-linecap: round;
  animation: pulse 1s ease-in-out infinite;
  pointer-events: none;
}

/* ── Highlight: hex ── */
.highlight-hex {
  fill: rgba(255, 100, 0, 0.3);
  stroke: #ff6400;
  stroke-width: 3;
  animation: pulse 1s ease-in-out infinite;
  pointer-events: none;
}

/* ── Pulse keyframes ── */
@keyframes pulse {
  0%,
  100% { opacity: 0.5; }
  50%  { opacity: 1; }
}

/* ── Water shimmer animation ── */
@keyframes waterShimmer {
  0%, 100% { opacity: 0.88; }
  50%       { opacity: 1;    }
}

#layer-water-hexes {
  animation: waterShimmer 4s ease-in-out infinite;
}

/* ── Hit areas (transparent, interactive) ── */
.vertex-hit,
.edge-hit,
.hex-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 10;
}

.vertex-hit:hover,
.edge-hit:hover,
.hex-hit:hover {
  cursor: pointer;
}