1→/**
     2→ * 地图 UI 样式
     3→ * 处理地图容器、节点、玩家精灵的显示
     4→ */
     5→
     6→/* 地图容器 */
     7→.map-container {
     8→    position: relative;
     9→    width: 1200px;
    10→    height: 800px;
    11→    margin: 20px auto;
    12→    overflow: hidden;
    13→    background: #1a1a2e;
    14→    border: 3px solid #ffd700;
    15→    border-radius: 10px;
    16→    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    17→}
    18→
    19→/* 地图背景 */
    20→.map-background {
    21→    position: absolute;
    22→    width: 100%;
    23→    height: 100%;
    24→    background-size: cover;
    25→    background-position: center;
    26→    opacity: 0.6;
    27→}
    28→
    29→/* 节点容器 */
    30→.map-nodes-container {
    31→    position: absolute;
    32→    width: 100%;
    33→    height: 100%;
    34→    top: 0;
    35→    left: 0;
    36→}
    37→
    38→/* 地图节点 - 默认亮起，可交互 */
    39→.map-node {
    40→    position: absolute;
    41→    width: 40px;
    42→    height: 40px;
    43→    border-radius: 50%;
    44→    display: flex;
    45→    justify-content: center;
    46→    align-items: center;
    47→    font-size: 20px;
    48→    cursor: pointer;
    49→    transition: all 0.2s;
    50→    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    51→    background: rgba(255, 255, 255, 0.95);
    52→    border: 3px solid rgba(0, 0, 0, 0.5);
    53→    z-index: 5;
    54→}
    55→
    56→/* 悬停效果 - 仅对未完成节点有效 */
    57→.map-node:not(.completed):hover {
    58→    transform: scale(1.15);
    59→    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    60→    border-color: #ffd700;
    61→    z-index: 10;
    62→}
    63→
    64→/* 已完成/已触发节点 - 消失 */
    65→.map-node.completed {
    66→    opacity: 0;
    67→    pointer-events: none; /* 禁止点击 */
    68→    visibility: hidden;
    69→}
    70→
    71→/* 传送门 */
    72→.map-node.portal {
    73→    background: linear-gradient(135deg, #9c27b0 0%, #7c4dff 100%);
    74→    border: 3px solid #4a148c;
    75→    animation: pulse 2s infinite;
    76→}
    77→
    78→@keyframes pulse {
    79→    0%, 100% {
    80→        box-shadow: 0 0 10px rgba(156, 39, 176, 0.6);
    81→    }
    82→    50% {
    83→        box-shadow: 0 0 20px rgba(156, 39, 176, 1);
    84→    }
    85→}
    86→
    87→/* 节点图标 */
    88→.node-icon {
    89→    font-size: 28px;
    90→}
    91→
    92→/* 节点标签（编号） */
    93→.node-label {
    94→    position: absolute;
    95→    bottom: -22px;
    96→    left: 50%;
    97→    transform: translateX(-50%);
    98→    font-size: 12px;
    99→    font-weight: bold;
   100→    background: rgba(0, 0, 0, 0.85);
   101→    color: #ffd700;
   102→    padding: 3px 8px;
   103→    border-radius: 12px;
   104→    white-space: nowrap;
   105→    border: 1px solid rgba(255, 215, 0, 0.5);
   106→    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   107→    pointer-events: none;
   108→    z-index: 5;
   109→}
   110→
   111→/* 为固定节点添加特殊编号样式 */
   112→.map-node.fixed .node-label {
   113→    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9) 0%, rgba(255, 140, 0, 0.9) 100%);
   114→    color: #000;
   115→    border: 2px solid #fff;
   116→}
   117→
   118→/* 为随机节点添加特殊编号样式 - 修复：不再半透明 */
   119→.map-node.random .node-label {
   120→    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
   121→    color: #fff;
   122→    border: 2px solid #a5d6a7;
   123→}
   124→
   125→/* 玩家精灵 */
   126→.map-player-sprite {
   127→    position: absolute;
   128→    width: 40px;
   129→    height: 40px;
   130→    font-size: 20px;
   131→    display: flex;
   132→    justify-content: center;
   133→    align-items: center;
   134→    z-index: 100;
   135→    transition: left 0.3s, top 0.3s;
   136→    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
   137→}
   138→
   139→/* 返回按钮 */
   140→.map-back-btn {
   141→    position: absolute;
   142→    top: 10px;
   143→    left: 10px;
   144→    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   145→    border: none;
   146→    color: white;
   147→    padding: 10px 20px;
   148→    border-radius: 5px;
   149→    cursor: pointer;
   150→    font-size: 14px;
   151→    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   152→    z-index: 1000;
   153→}
   154→
   155→.map-back-btn:hover {
   156→    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
   157→    transform: translateY(-2px);
   158→}
   159→
   160→/* 传送门特效 */
   161→.portal-icon {
   162→    font-size: 36px;
   163→}
   164→
   165→.portal-effect {
   166→    position: absolute;
   167→    width: 100%;
   168→    height: 100%;
   169→    background: radial-gradient(circle, rgba(156, 39, 176, 0.3) 0%, transparent 70%);
   170→    animation: portalGlow 2s infinite;
   171→}
   172→
   173→@keyframes portalGlow {
   174→    0%, 100% {
   175→        opacity: 0.3;
   176→    }
   177→    50% {
   178→        opacity: 0.6;
   179→    }
   180→}
   181→
   182→/* 地图功能按钮栏 */
   183→.map-function-bar {
   184→    display: flex;
   185→    flex-wrap: wrap;
   186→    gap: 10px;
   187→    justify-content: center;
   188→    padding: 10px 20px;
   189→    background: rgba(0, 0, 0, 0.3);
   190→    border-bottom: 2px solid #444;
   191→}
   192→
   193→.map-func-btn {
   194→    display: flex;
   195→    align-items: center;
   196→    gap: 8px;
   197→    padding: 10px 20px;
   198→    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   199→    border: 2px solid rgba(255, 255, 255, 0.2);
   200→    border-radius: 8px;
   201→    color: white;
   202→    font-size: 16px;
   203→    cursor: pointer;
   204→    transition: all 0.2s;
   205→    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   206→    flex: 1;
   207→    min-width: 120px;
   208→}
   209→
   210→.map-func-btn:hover {
   211→    transform: translateY(-2px);
   212→    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
   213→}
   214→
   215→.map-func-btn .btn-text {
   216→    font-size: 14px;
   217→    font-weight: normal;
   218→}

/* ========================================
   商店图标样式 (Shop Icon)
   ======================================== */
.shop-icon {
    position: absolute;
    width: 30px;
    height: 30px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000 !important; /* 确保在最上层 */
    animation: shopBounce 2s infinite;
    background: rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    border: 2px solid #ffd700;
    transition: all 0.3s;
    pointer-events: auto !important; /* 确保可以接收点击事件 */
}

@keyframes shopBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.shop-icon:hover {
    transform: scale(1.2);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}