/* ====================================================
   超级地图页样式
   3cq.drawio.svg 全境地图 + 996数据库实时玩家数徽章
   ==================================================== */

/* ============ 顶部 Banner ============ */
.map-banner {
    position: relative;
    height: 220px;
    background: url('../images/pic.jpg') center 40% / cover no-repeat;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    overflow: hidden;
}
.map-banner .banner-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,3,3,0.6) 0%, rgba(139,0,0,0.4) 50%, rgba(10,3,3,0.85) 100%);
}
.map-banner .banner-title {
    position: relative; z-index: 2;
    font-family: "STXingkai", "华文行楷", serif;
    font-size: 58px; color: var(--color-gold-bright);
    text-shadow: 0 0 20px var(--color-fire), 0 0 40px var(--color-blood), 2px 2px 0 #000;
    letter-spacing: 8px; margin-bottom: 10px;
}
.map-banner .banner-sub {
    position: relative; z-index: 2;
    color: var(--color-text); font-size: 17px;
    letter-spacing: 4px;
    text-shadow: 1px 1px 2px #000;
}

/* ============ 地图主区（全宽铺满视口） ============ */
.map-main {
    padding: 24px 16px 40px;
    max-width: none;
}

/* ---- 状态工具条 ---- */
.map-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px 20px;
    margin-bottom: 18px;
}
.map-stats-info {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    color: var(--color-text); font-size: 14px;
}
.map-stats-info .stat-item b {
    color: var(--color-gold-bright);
    font-size: 18px;
    text-shadow: 0 0 8px rgba(255, 107, 26, 0.5);
    margin: 0 2px;
}
.map-stats-info .stat-divider {
    width: 1px; height: 14px;
    background: var(--color-border);
    display: inline-block;
}
.map-toolbar-right {
    display: flex; align-items: center; gap: 12px;
}
.map-zoom-group {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}
.map-zoom-btn {
    background: transparent;
    border: none;
    color: var(--color-text-dim);
    font-size: 13px;
    padding: 7px 14px;
    cursor: pointer;
    transition: all .2s;
    border-right: 1px solid var(--color-border);
}
.map-zoom-btn:last-child { border-right: none; }
.map-zoom-btn:hover { color: var(--color-gold-bright); background: rgba(139, 0, 0, 0.25); }
.map-zoom-btn.active {
    background: linear-gradient(180deg, #8b0000, #5a0000);
    color: var(--color-gold-bright);
}
.map-refresh-btn {
    background: linear-gradient(180deg, #8b0000, #5a0000);
    border: 1px solid var(--color-fire);
    color: var(--color-gold-bright);
    font-size: 13px;
    padding: 7px 18px;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 2px;
    transition: all .2s;
}
.map-refresh-btn:hover {
    box-shadow: 0 0 12px rgba(255, 107, 26, 0.5);
}
.map-refresh-btn:disabled { opacity: 0.5; cursor: wait; }

/* ---- 地图画布 ---- */
.map-canvas {
    position: relative;
    background: #0b0605;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    /* 导航80 + banner220 + main上padding24 + 工具条约100 + 余量 → 首屏尽量占满剩余高度 */
    height: calc(100vh - 470px);
    min-height: 520px;
    overflow: auto;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6);
    /* 暗色底衬，避免 drawio 自适应底色变量在深色模式下泛白 */
}
.map-canvas .map-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-dim);
    font-size: 15px;
    letter-spacing: 3px;
}
/* 内层宽度由 JS 缩放档位控制（fit=100%，其余为像素档位百分比） */
.map-canvas svg {
    display: block;
    width: 100% !important;
    height: auto !important;
    background: var(--ge-adaptive-bg, #12100e);
}
.map-canvas.fit svg { width: 100% !important; }
.map-canvas.z150 svg { width: 150% !important; }
.map-canvas.z200 svg { width: 200% !important; }

/* ---- 全屏模式：整个主区铺满屏幕（Fullscreen API 失败时用伪全屏兜底） ---- */
.map-main:fullscreen,
body.map-pseudo-fs .map-main {
    background: #0b0605;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.map-main:fullscreen .map-toolbar,
body.map-pseudo-fs .map-toolbar {
    flex: none;
    margin-bottom: 12px;
}
.map-main:fullscreen .map-canvas,
body.map-pseudo-fs .map-canvas {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}
.map-main:fullscreen .map-legend,
.map-main:fullscreen .map-footer-tip,
body.map-pseudo-fs .map-legend,
body.map-pseudo-fs .map-footer-tip {
    display: none;
}
/* 伪全屏：盖住导航/Banner/页脚，铺满整个视口 */
body.map-pseudo-fs .top-nav,
body.map-pseudo-fs .map-banner,
body.map-pseudo-fs .site-footer {
    display: none;
}
body.map-pseudo-fs .map-main {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

/* ---- 地图内玩家数徽章（注入 SVG） ---- */
.pc-badge rect {
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 1.5px;
}
.pc-badge rect.cool { fill: #1f7a4d; }
.pc-badge rect.warm { fill: #c96a10; }
.pc-badge rect.hot  { fill: #a31212; }
.pc-badge text.pc-badge-num {
    fill: #ffffff;
    font-family: Tahoma, "Microsoft YaHei", sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-anchor: middle;
    paint-order: stroke;
    stroke: rgba(0,0,0,0.55);
    stroke-width: 3px;
}

/* ---- 图例 ---- */
.map-legend {
    display: flex; align-items: center; flex-wrap: wrap; gap: 18px;
    margin-top: 16px;
    color: var(--color-text-dim);
    font-size: 13px;
}
.map-legend .legend-title { color: var(--color-gold-bright); letter-spacing: 1px; }
.map-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }
.map-legend .dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.6);
}
.map-legend .dot.cool { background: #1f7a4d; }
.map-legend .dot.warm { background: #c96a10; }
.map-legend .dot.hot  { background: #a31212; }
.map-legend .legend-tip { margin-left: auto; }

.map-footer-tip {
    text-align: center; color: var(--color-text-dim);
    margin-top: 24px; font-size: 13px;
}

/* ============ 响应式 ============ */
@media (max-width: 1024px) {
    .map-banner .banner-title { font-size: 40px; }
    .map-toolbar { flex-direction: column; align-items: flex-start; }
    .map-legend .legend-tip { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
    .map-banner .banner-title { font-size: 30px; letter-spacing: 4px; }
    .map-canvas { height: 68vh; }
    .map-zoom-btn { padding: 6px 10px; }
}