/* css/board.css - 게임 보드 스타일 */

#board-container {
    background: rgba(0, 100, 180, 0.3);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
}

#board-svg {
    display: block;
}

/* 타일 스타일 */
.tile {
    cursor: pointer;
    transition: all 0.2s ease;
}

.tile:hover {
    filter: brightness(1.1);
}

.tile.valid-location {
    cursor: pointer;
    animation: tileGlow 1s ease-in-out infinite;
}

@keyframes tileGlow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.3);
    }
}

/* 정점 스타일 */
.vertex {
    cursor: pointer;
    transition: all 0.2s ease;
}

.vertex:hover {
    fill: rgba(255, 255, 255, 0.3) !important;
}

.vertex.valid-location {
    cursor: pointer;
    animation: vertexPulse 0.8s ease-in-out infinite;
}

@keyframes vertexPulse {
    0%, 100% {
        r: 10;
    }
    50% {
        r: 14;
    }
}

/* 간선 스타일 */
.edge {
    cursor: pointer;
    transition: all 0.2s ease;
}

.edge:hover {
    stroke: rgba(255, 255, 255, 0.4) !important;
}

.edge.valid-location {
    cursor: pointer;
    animation: edgePulse 0.8s ease-in-out infinite;
}

@keyframes edgePulse {
    0%, 100% {
        stroke-width: 12;
        stroke-opacity: 0.6;
    }
    50% {
        stroke-width: 16;
        stroke-opacity: 1;
    }
}

/* 건물 스타일 */
[data-road-edge] {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

/* 숫자 토큰 스타일 */
#numbers-layer circle {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

#numbers-layer text {
    pointer-events: none;
    user-select: none;
}

/* 도둑 스타일 */
#robber-layer text {
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* 항구 스타일 */
#ports-layer text {
    pointer-events: none;
    user-select: none;
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;
}

/* 정착지 및 도시 스타일 */
#buildings-layer polygon,
#buildings-layer rect {
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
    transition: transform 0.2s ease;
}

#buildings-layer polygon:hover,
#buildings-layer rect:hover {
    transform: scale(1.1);
}

/* 타일 타입별 색상 참조 (SVG에서 직접 설정됨) */
/*
  숲(FOREST): #228b22
  목초지(PASTURE): #90ee90
  밭(FIELD): #f4a460
  언덕(HILL): #cd853f
  산(MOUNTAIN): #808080
  사막(DESERT): #f5f5dc
*/

/* 플레이어 색상 참조 (SVG에서 직접 설정됨) */
/*
  플레이어 0: #e74c3c (빨강)
  플레이어 1: #3498db (파랑)
  플레이어 2: #f39c12 (주황)
  플레이어 3: #2ecc71 (녹색)
*/