/* 全局样式 */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; font-family:sans-serif; }

/* 地图容器 */
#map { width:100%; height:100%; }

/* 顶部状态栏 */
#statusBar {
  position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:1000;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(10px); padding:8px 16px;
  border-radius:20px; display:flex; gap:15px; font-size:12px; color:#fff;
}
.status-connected { color:#4CAF50; }    /* WebSocket 已连接 */
.status-disconnected { color:#f44336; } /* WebSocket 断开 */

/* 底部信息面板 */
#infoPanel {
  position:fixed; bottom:30px; left:50%; transform:translateX(-50%); z-index:1000;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(10px); padding:15px 20px;
  border-radius:12px; min-width:260px; color:#fff; display:none;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
}
.info-title { font-size:14px; font-weight:bold; color:#64B5F6; margin-bottom:8px; text-align:center; }
.info-row { display:flex; justify-content:space-between; padding:4px 0; font-size:14px; }
.info-label { color:#aaa; }
.info-value { color:#fff; font-family:monospace; }

/* Toast 提示 */
.toast-message {
  position:fixed; top:80px; left:50%; transform:translateX(-50%); z-index:2000;
  background:rgba(0,0,0,0.8); color:#fff; padding:10px 20px; border-radius:20px;
  font-size:14px; animation:fadeIn 0.3s;
}
@keyframes fadeIn { from{opacity:0;transform:translateX(-50%) translateY(-10px);} }

/* 聚合图标容器（移除默认样式） */
.custom-cluster { background:transparent!important; border:none!important; }

/* 棋子包裹器 */
.chess-marker-wrapper { text-align:center; cursor:pointer; transition:transform 0.2s; }
.chess-marker-wrapper:hover { transform:scale(1.2); }

/* 弹出窗口 */
.popup-content { padding:5px; min-width:160px; }
.popup-content h4 { margin:0 0 8px; display:flex; align-items:center; gap:8px; }
.popup-content h4 img { width:24px; height:24px; }
.popup-content p { margin:3px 0; font-size:12px; color:#666; }

/* Leaflet 控件样式 */
.leaflet-control-zoom { border:none!important; box-shadow:0 2px 10px rgba(0,0,0,0.2)!important; }
.leaflet-control-zoom a { border-radius:8px!important; margin-bottom:4px!important; }