/* map.css */

body {
    background-color: #f9f9f9;
    display: flex;
    justify-content: center;
    padding-top: 20px;
    font-family: "Microsoft JhengHei", sans-serif;
}

.taiwan_map {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.taiwan_map svg {
    width: 100%;
    height: auto;
}

/* 提示框 */
.taiwan_map .mouse {
    display: none;
    padding: 8px 16px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: #FFF;
    text-align: center;
    position: absolute;
    pointer-events: none;
    z-index: 999;
    white-space: nowrap;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* --- 金門馬祖框框樣式 --- */
.island-box {
    fill: none;
    stroke: #333;
    stroke-width: 2;
    stroke-dasharray: 5, 5;
    /* 虛線效果 */
}

.island-label {
    font-size: 20px;
    fill: #555;
    font-weight: bold;
}

/* --- 核心邏輯：預設全部淺灰 --- */
.map_block {
    fill: #d3d3d3;
    /* 預設淺灰色 */
    stroke: #ffffff;
    stroke-width: 1.5;
    transition: fill 0.3s ease;
    cursor: pointer;
}

/* --- 核心互動：滑鼠移入群組 (<g>) 時，組內所有 path 變色 --- */

/* 北部 (橘色與按鈕統一) */
#region-north:hover .map_block {
    fill: #f4a261;
}

/* 中部 (橘色與按鈕統一) */
#region-central:hover .map_block {
    fill: #f4a261;
}

/* 南部 (橘色與按鈕統一) */
#region-south:hover .map_block {
    fill: #f4a261;
}

/* 東部 (橘色與按鈕統一) */
#region-east:hover .map_block {
    fill: #f4a261;
}

/* 離島 (橘色與按鈕統一) */
#region-islands:hover .map_block {
    fill: #f4a261;
}

/* 單獨滑過某縣市時，稍微加亮一點點，增加層次感 */
.map_block:hover {
    filter: brightness(1.1);
}

/* ========================================= */
/* 🌊 海洋背景 & 🐟 小魚特效 (新增，勿修改上方設定) */
/* ========================================= */

/* 🌊 海洋背景：用 ::before 偉元素承載漸層，不影響容器內任何子元素（SVG、按鈕等） */
.desktop-map-container::before {
    content: '';
    position: absolute;
    inset: 0;
    /* 覆蓋整個容器 */
    pointer-events: none;
    /* 穿透，不擋地圖互動 */
    z-index: 0;
    /* 最底層，不擋地圖和魚 */
    background: radial-gradient(ellipse 55% 65% at 55% 50%,
            rgba(178, 224, 245, 0.70) 0%,
            rgba(195, 232, 247, 0.50) 30%,
            rgba(215, 240, 250, 0.20) 60%,
            transparent 85%);
}

/* 🐟 小魚圖片樣式（使用 fish1~4.png） */
.fish {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: auto;
    pointer-events: none;
    /* 穿透，不能擋住地圖點擊 */
    z-index: 100;
    transform-origin: center center;
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* 魚群隐藏（滑鼠在陸地 .map_block 上時） */
.fish.hidden {
    opacity: 0;
}