/* board.css — hex board styling. Terrain imagery now comes from
   /static/img/terrains_hexes.webp; this file handles outlines,
   number/port/robber overlay styles, and road/vertex hit targets. */

#board {
  display: block;
  max-width: 100%;
  max-height: 100%;
  user-select: none;
  background: transparent;
}

/* A subtle darkening outline around each hex, drawn on top of the
   sprite image so adjacent tiles look crisp. */
.hex-outline {
  fill: none;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 1.5;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Hexes whose number matches the latest dice roll pulse for a few
   seconds so everyone can see at a glance where production happened.
   Roads build on top of the outline, so an outline-only highlight
   gets easily occluded; we also fill the hex interior with a
   translucent gold so the whole tile glows from the inside. */
.hex-outline.producing {
  fill: rgba(255, 180, 0, 0.22);
  stroke: #ffb400;
  stroke-width: 6;
  filter: drop-shadow(0 0 10px rgba(255, 180, 0, 0.95));
  animation: producing-pulse 1.1s ease-in-out infinite;
}
@keyframes producing-pulse {
  0%, 100% { fill-opacity: 0.15; stroke-width: 5; }
  50%      { fill-opacity: 0.35; stroke-width: 8; }
}
@media (prefers-reduced-motion: reduce) {
  .hex-outline.producing {
    animation: none !important;
    fill: rgba(255, 180, 0, 0.28) !important;
    stroke-width: 6 !important;
  }
}

/* Port markers: a soft drop shadow sells them as little boats on the
   water. */
.ports image {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

/* Thin dock line connecting each port marker back to its coastal
   vertex. */
.port-dock {
  stroke: rgba(60, 40, 20, 0.75);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

/* Numbers: the sprite ships with its own disc art, so we just size
   and shadow it. */
.numbers image {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* Roads: plain SVG strokes. Settlements/cities: sprite images.
   The drop shadow gives the 3D pieces grounding; roads get a subtle
   drop shadow via the stroke itself. */
.road {
  fill: none;
}
.road[data-pid] {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.settlement, .city {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
.vertex-hit[data-vertex], .edge-hit[data-edge] {
  cursor: pointer;
}

/* Robber: drop shadow sells the pawn standing on the hex. */
image[aria-label="robber"] {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

/* Hit targets for build mode. */
.vertex-hit, .edge-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}
.legal-target {
  animation: catan-pulse 1.2s ease-in-out infinite;
}
@keyframes catan-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}