/* =========================================
           1. 全局与基础布局 (Global & Layout)
           ========================================= */
body {
    font-family: 'Nunito', 'Segoe UI', 'Microsoft Yahei', sans-serif;
    background-color: #fff0f5;
    background-image: radial-gradient(#ffc1e3 20%, transparent 20%),
        radial-gradient(#ffc1e3 20%, transparent 20%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    margin: 0;
    /* 使用 flex 居中整个缩放后的容器 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    user-select: none;
    overflow: hidden; /* 禁止出现滚动条 */
}

/* 删除了无用的 #game-container */

#game-wrapper {
    /* 强制固定尺寸，不响应，只缩放 */
    width: 1640px; 
    height: 770px;
    
    display: flex;
    flex-direction: row; /* 强制横向排列 */
    align-items: flex-start;
    gap: 25px; /* 统一间隙 */
    
    background: rgba(255, 255, 255, 0.95);
    padding: 25px;
    border-radius: 30px;
    border: 5px solid #ffcfdc;
    box-shadow: 0 15px 35px rgba(255, 105, 180, 0.2);
    
    /* 缩放中心点设为正中心，配合JS计算 */
    transform-origin: center center;
    box-sizing: border-box; /* 包含 padding */
    position: relative;
}

/* 左侧图鉴按钮容器 */
.side-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    width: 60px; /* 固定宽度 */
    flex-shrink: 0; /* 禁止被压缩 */
}

/* =========================================
           2. 游戏地图区域 (Game Map)
========================================= */

#game-map-container {
    position: relative;
    /* 强制固定尺寸，与 Phaser Config 里的 width/height 一致 */
    width: 1200px;
    height: 720px;
    flex-shrink: 0; /* 禁止被压缩 */
}
#phaser-game-container {
    position: relative;
    width: 1200px;
    height: 720px;
    border-radius: 20px;
    box-shadow: 
        0 0 0 5px #ff80ab, 
        0 0 20px rgba(255, 182, 193, 0.6);
    overflow: hidden; 
    background-color: transparent; 
    margin: 0;
}
#phaser-game-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* 建造地基 (坑位) - 这是 DOM 元素，保留 */
.build-slot {
    position: absolute;
    width: 38px; /* 恢复为像素，因为父容器是固定的1200x720 */
    height: 38px;
    background-color: rgba(233, 30, 99, 0.15);
    border: 2px dashed rgba(233, 30, 99, 0.4);
    border-radius: 8px;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    box-sizing: border-box;
}
/* 地图控制按钮组 */
.map-controls {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 8px;
    z-index: 1000;
}
.control-btn {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    min-width: 40px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ff80ab;
    color: #880e4f;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 3px 0 rgba(255, 128, 171, 0.3);
    transition: all 0.1s;
}
.control-btn:hover {
    background: #fff0f6;
    transform: translateY(-2px);
}
.control-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 0 rgba(255, 128, 171, 0.3);
}

/* =========================================
           3. 实体样式 (Entities)
           ========================================= */

/* 图片自适应工具类 - 用于图鉴和商店的图标 */
.cat-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
/* 塔的父容器 - 使用像素，父容器固定 */
.tower-wrapper {
    position: absolute;
    width: 36px;  
    height: 36px;
    cursor: pointer;
    transition: transform 0.1s ease-out;
    /* z-index: 20;  <--- 【删除这一行】 */
}
.tower-wrapper:hover {
    transform: scale(1.1);
    z-index: 100; 
}
.tower-wrapper .tower-bg,
.tower-wrapper .tower-img,
.tower-wrapper .tower-badge {
    left: 0 !important;
    top: 0 !important;
    position: absolute;
    transform: translate(-50%, -50%);
}
.tower-bg {
    position: absolute;
    width: 100%; 
    height: 100%;
    border: 2px solid rgba(0, 0, 0, 0.15); 
    border-radius: 15%;
    transform: translate(-50%, -50%); 
    z-index: 5; 
    background-clip: border-box; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    transition: transform 0.1s;
}
.tower-bg.selected-highlight {
    border: 2px solid #2196f3 !important; 
    box-shadow: 0 0 0 6px rgba(33, 150, 243, 0.3);
    transform: translate(-50%, -50%) scale(1.05);
    z-index: 6; 
}
.tower-bg.pulse {
    animation: towerPulse 0.2s ease-out;
}
@keyframes towerPulse {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.15); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
.tower-badge {
    position: absolute;
    width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 10px;
    background: #212121;
    color: #fff;
    text-align: center;
    font-weight: 800;
    font-family: 'Arial', sans-serif;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.8);
    z-index: 50; 
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.tower-wrapper .tower-badge {
    left: auto !important; 
    top: auto !important;
    right: auto;   
    bottom: auto;  
    transform: translate(7px, 7px) !important;
    position: absolute;
}
.tower-img {
    position: absolute;
    width: 32px; 
    height: 32px;
    object-fit: contain;
    transform: translate(-50%, -50%);
    z-index: 15;
    pointer-events: auto;
}
.range-indicator {
    position: absolute;
    border: 2px dashed rgba(33, 150, 243, 0.6);
    background-color: rgba(33, 150, 243, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 12; 
    display: none;
    animation: rangeSpin 40s linear infinite;
    transition: width 0.2s, height 0.2s, left 0.1s, top 0.1s;
}
@keyframes rangeSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* =========================================
           4. UI 面板与按钮 (Right UI Panel & Buttons)
           ========================================= */
#ui-panel {
    width: 280px; /* 固定宽度 */
    flex-shrink: 0; /* 禁止压缩 */
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%; /* 填满高度 */
}
.panel-section {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    border: 2px solid #ffeef2;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}
h2, h3 {
    margin: 0 0 15px 0;
    color: #ec407a;
    font-size: 18px;
    font-weight: 800;
}
#money-display {
    color: #ff9100;
    text-shadow: 1px 1px 0px #fff3e0;
}
.game-btn {
    padding: 12px 15px;
    border: 2px solid #ffc1e3;
    background: white;
    cursor: pointer;
    border-radius: 15px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #880e4f;
    font-weight: bold;
    box-shadow: 0 4px 0 #ffc1e3;
}
.game-btn:hover {
    background: #fff0f6;
    transform: translateY(-3px);
    box-shadow: 0 7px 0 #f8bbd0;
}
.game-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 0 #f8bbd0;
}
.game-btn.active {
    background: #ffeef5;
    border-color: #ff4081;
    box-shadow: 0 4px 0 #ff4081;
}
#start-wave-btn {
    background: linear-gradient(45deg, #ff80ab, #ff4081);
    color: white;
    border: none;
    text-align: center;
    display: block;
    box-shadow: 0 4px 10px rgba(255, 64, 129, 0.4);
    font-size: 16px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
#start-wave-btn:hover {
    background: linear-gradient(45deg, #ff94c2, #ff5c8d);
    transform: scale(1.05);
}
#start-wave-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
#log-console {
    height: 150px;
    overflow-y: auto;
    background: #4a2c35;
    color: #f8bbd0;
    font-family: 'Consolas', monospace;
    font-size: 12px;
    padding: 12px;
    border-radius: 15px;
    border: 2px solid #d81b60;
}
/* =========================================
           5. 塔防详情菜单 (Tower Detail Popup)
           ========================================= */
#tower-menu {
    display: none;
    position: absolute;
    width: 240px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(233, 30, 99, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    border: 1px solid #ffc1e3;
    padding: 14px;
    z-index: 1000;
    transform-origin: center center;
    animation: popIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.tm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed #ffe0e9;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.tm-title {
    font-size: 16px;
    font-weight: 800;
    color: #880e4f;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tm-title .cat-img {
    width: 30px;
    height: 30px;
}
.tm-close {
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    border: 1px solid transparent;
}
.tm-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 15px;
    background: rgba(255, 240, 245, 0.6);
    padding: 10px;
    border-radius: 10px;
}
.tm-stat-item {
    font-size: 12px;
    color: #5d4037;
    font-weight: 600;
}
.tm-ammo-list {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}
.ammo-option {
    flex: 1;
    background: white;
    border: 2px solid #f0f0f0;
    border-radius: 10px;
    padding: 8px 0;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
}
.ammo-option.active {
    background: #e1f5fe;
    border-color: #039be5;
    color: #0277bd;
}
.tm-actions {
    display: flex;
    gap: 10px;
}
.tm-btn {
    flex: 1;
    border: none;
    border-radius: 12px;
    padding: 8px 0;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.btn-up {
    background: linear-gradient(to bottom, #9ccc65, #7cb342);
    box-shadow: 0 4px 0 #558b2f;
}
.btn-sell {
    background: linear-gradient(to bottom, #ff8a80, #e57373);
    box-shadow: 0 4px 0 #d32f2f;
}
.btn-up:disabled, .btn-up.disabled {
    background: #e0e0e0;
    color: #9e9e9e;
    box-shadow: none;
    cursor: not-allowed;
}
/* =========================================
           6. 图鉴系统 (Handbook Modal)
           ========================================= */
#handbook-btn {
    position: relative;
    width: 60px;
    height: 60px;
    background: #fff;
    border: 3px solid #ff80ab;
    border-radius: 50%;
    font-size: 30px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(255, 64, 129, 0.3);
    transition: transform 0.2s;
    flex-shrink: 0;
}
#handbook-btn:hover {
    transform: scale(1.1) rotate(-10deg);
    background: #fff0f6;
}
#handbook-modal {
    display: none;
    /* 改为 absolute 并覆盖在 wrapper 上，以跟随缩放 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px; /* 匹配 wrapper 圆角 */
    background: rgba(255, 240, 245, 0.6);
    backdrop-filter: blur(5px);
    z-index: 3000;
    justify-content: center;
    align-items: center;
}
.hb-panel {
    width: 700px;
    height: 550px;
    background: white;
    border-radius: 30px;
    border: 5px solid #ffcfdc;
    box-shadow: 0 20px 50px rgba(233, 30, 99, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: popIn 0.3s ease-out;
}
.hb-header {
    background: #fff0f6;
    padding: 15px 20px;
    display: flex;
    gap: 15px;
    border-bottom: 2px dashed #ffcfdc;
}
.hb-tab {
    padding: 8px 20px;
    border-radius: 20px;
    background: white;
    border: 2px solid #ffc1e3;
    color: #880e4f;
    font-weight: bold;
    cursor: pointer;
}
.hb-tab.active {
    background: #ff4081;
    color: white;
    border-color: #ff4081;
    box-shadow: 0 3px 0 #c2185b;
}
.hb-content {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    background: #fff9fa;
}
.hb-list-panel {
    width: 220px;
    background: #fff;
    border-right: 2px dashed #ffcfdc;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.hb-list-item {
    padding: 12px 15px;
    border-bottom: 1px solid #fff0f6;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}
.hb-list-item:hover {
    background-color: #fff0f6;
}
.hb-list-item.active {
    background-color: #ffeef5;
    border-left: 4px solid #ff4081;
    padding-left: 11px;
}
.hb-list-icon {
    width: 40px;
    height: 40px;
    background: #fce4ec;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    flex-shrink: 0;
}
.hb-list-icon .cat-img {
    width: 32px;
    height: 32px;
}
.hb-list-name {
    font-size: 14px;
    font-weight: 800;
    color: #555;
}
.hb-detail-panel {
    flex: 1;
    padding: 25px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hb-detail-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    border-bottom: 2px dashed #ffe0e9;
    padding-bottom: 20px;
}
.hb-detail-big-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 45px;
    border: 3px solid #ffc1e3;
    box-shadow: 0 5px 15px rgba(233, 30, 99, 0.1);
    background: #fff;
}
.hb-detail-big-icon .cat-img {
    width: 60px;
    height: 60px;
}
.hb-detail-stats {
    background: #fff;
    border: 2px solid #ffc1e3;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.02);
}
.hb-detail-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #5d4037;
    background: #fce4ec;
    padding: 15px;
    border-radius: 12px;
    border-left: 5px solid #ec407a;
}
.hb-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.hb-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: bold;
    color: #fff;
    background: #bdbdbd;
}
.badge-aoe { background: #ff9800; }
.badge-slow { background: #29b6f6; }
.badge-fly { background: #7e57c2; }
.badge-high { background: #ef5350; }
.badge-keen { background: #00acc1; }
.badge-stealth { background: #4a148c; }
.hb-stats-container {
    background: #fafafa;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hb-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #5d4037;
}
.hb-bar-bg {
    flex: 1;
    height: 6px;
    background: #eee;
    border-radius: 3px;
    margin: 0 8px;
    overflow: hidden;
}
.hb-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: #ff80ab;
    width: 0%;
}
.hb-val-text {
    width: 30px;
    text-align: right;
    font-weight: bold;
    color: #333;
}

/* =========================================
           5. 塔防详情菜单 (Tower Detail Popup)
           ========================================= */
#tower-menu {
    display: none;
    position: absolute;
    width: 240px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(233, 30, 99, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    border: 1px solid #ffc1e3;
    padding: 14px;
    z-index: 1000;
    transform-origin: center center;
    animation: popIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.tm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed #ffe0e9;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.tm-title {
    font-size: 16px;
    font-weight: 800;
    color: #880e4f;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tm-title .cat-img {
    width: 30px;
    height: 30px;
}

.tm-close {
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    border: 1px solid transparent;
}

/* 属性网格 */
.tm-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 15px;
    background: rgba(255, 240, 245, 0.6);
    padding: 10px;
    border-radius: 10px;
}

.tm-stat-item {
    font-size: 12px;
    color: #5d4037;
    font-weight: 600;
}

/* 弹药选择 */
.tm-ammo-list {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.ammo-option {
    flex: 1;
    background: white;
    border: 2px solid #f0f0f0;
    border-radius: 10px;
    padding: 8px 0;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
}

.ammo-option.active {
    background: #e1f5fe;
    border-color: #039be5;
    color: #0277bd;
}

/* 操作按钮 */
.tm-actions {
    display: flex;
    gap: 10px;
}

.tm-btn {
    flex: 1;
    border: none;
    border-radius: 12px;
    padding: 8px 0;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn-up {
    background: linear-gradient(to bottom, #9ccc65, #7cb342);
    box-shadow: 0 4px 0 #558b2f;
}

.btn-sell {
    background: linear-gradient(to bottom, #ff8a80, #e57373);
    box-shadow: 0 4px 0 #d32f2f;
}

.btn-up:disabled, .btn-up.disabled {
    background: #e0e0e0;
    color: #9e9e9e;
    box-shadow: none;
    cursor: not-allowed;
}

/* =========================================
           6. 图鉴系统 (Handbook Modal)
           ========================================= */
/* 左侧悬浮按钮 */
#handbook-btn {
    position: relative;
    width: 60px;
    height: 60px;
    background: #fff;
    border: 3px solid #ff80ab;
    border-radius: 50%;
    font-size: 30px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(255, 64, 129, 0.3);
    transition: transform 0.2s;
    flex-shrink: 0;
}

#handbook-btn:hover {
    transform: scale(1.1) rotate(-10deg);
    background: #fff0f6;
}

/* 模态框遮罩 */
#handbook-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 240, 245, 0.6);
    backdrop-filter: blur(5px);
    z-index: 3000;
    justify-content: center;
    align-items: center;
}

.hb-panel {
    width: 700px;
    height: 550px;
    background: white;
    border-radius: 30px;
    border: 5px solid #ffcfdc;
    box-shadow: 0 20px 50px rgba(233, 30, 99, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: popIn 0.3s ease-out;
}

.hb-header {
    background: #fff0f6;
    padding: 15px 20px;
    display: flex;
    gap: 15px;
    border-bottom: 2px dashed #ffcfdc;
}

.hb-tab {
    padding: 8px 20px;
    border-radius: 20px;
    background: white;
    border: 2px solid #ffc1e3;
    color: #880e4f;
    font-weight: bold;
    cursor: pointer;
}

.hb-tab.active {
    background: #ff4081;
    color: white;
    border-color: #ff4081;
    box-shadow: 0 3px 0 #c2185b;
}

.hb-content {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    background: #fff9fa;
}

.hb-list-panel {
    width: 220px;
    background: #fff;
    border-right: 2px dashed #ffcfdc;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.hb-list-item {
    padding: 12px 15px;
    border-bottom: 1px solid #fff0f6;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}

.hb-list-item:hover {
    background-color: #fff0f6;
}

.hb-list-item.active {
    background-color: #ffeef5;
    border-left: 4px solid #ff4081;
    padding-left: 11px;
}

.hb-list-icon {
    width: 40px;
    height: 40px;
    background: #fce4ec;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    flex-shrink: 0;
}

.hb-list-icon .cat-img {
    width: 32px;
    height: 32px;
}

.hb-list-name {
    font-size: 14px;
    font-weight: 800;
    color: #555;
}

/* 右侧详细信息区域 */
.hb-detail-panel {
    flex: 1;
    padding: 25px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hb-detail-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    border-bottom: 2px dashed #ffe0e9;
    padding-bottom: 20px;
}

.hb-detail-big-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 45px;
    border: 3px solid #ffc1e3;
    box-shadow: 0 5px 15px rgba(233, 30, 99, 0.1);
    background: #fff;
}

.hb-detail-big-icon .cat-img {
    width: 60px;
    height: 60px;
}

.hb-detail-stats {
    background: #fff;
    border: 2px solid #ffc1e3;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.02);
}

.hb-detail-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #5d4037;
    background: #fce4ec;
    padding: 15px;
    border-radius: 12px;
    border-left: 5px solid #ec407a;
}

/* 特性标签 (Badges) */
.hb-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.hb-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: bold;
    color: #fff;
    background: #bdbdbd;
}

.badge-aoe { background: #ff9800; }
.badge-slow { background: #29b6f6; }
.badge-fly { background: #7e57c2; }
.badge-high { background: #ef5350; }
.badge-keen { background: #00acc1; /* 这种青色很适合狸花猫 */}
.badge-stealth { background: #4a148c; /* 这种深紫色很适合隐匿的小夜鼠 */}

/* 底部：属性条 (Progress Bars) */
.hb-stats-container {
    background: #fafafa;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hb-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #5d4037;
}

.hb-bar-bg {
    flex: 1;
    height: 6px;
    background: #eee;
    border-radius: 3px;
    margin: 0 8px;
    overflow: hidden;
}

.hb-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: #ff80ab;
    width: 0%;
}

.hb-val-text {
    width: 30px;
    text-align: right;
    font-weight: bold;
    color: #333;
}

/* =========================================
           7. 悬浮提示 (Tooltip)
           ========================================= */
#game-tooltip {
    position: absolute; /* 相对于 game-wrapper 定位 */
    display: none;
    background: rgba(30, 30, 30, 0.95);
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-size: 12px;
    z-index: 2000;
    pointer-events: none;
    max-width: 160px;
    width: auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    line-height: 1.5;
}
#game-tooltip h4 {
    margin: 0 0 8px 0;
    color: #ffeb3b;
    font-size: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 4px;
}
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: #ccc;
    margin-bottom: 4px;
    gap: 10px;
}
.stat-row>span:first-child {
    white-space: nowrap;
    flex-shrink: 0;
    color: #aaa;
}
.stat-val {
    font-weight: bold;
    color: white;
    text-align: right;
    line-height: 1.4;
}
/* 商店容器 */
#tower-shop-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-height: 350px;
    overflow-y: auto;
    padding: 5px 5px 5px 0;
}
#tower-shop-list::-webkit-scrollbar {
    width: 6px;
}
#tower-shop-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}
#tower-shop-list::-webkit-scrollbar-thumb {
    background: #ffc1e3;
    border-radius: 3px;
}
.shop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #ffc1e3;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    box-shadow: 0 3px 0 #ffc1e3;
}
.shop-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 0 #f8bbd0;
    border-color: #ff80ab;
}
.shop-card.active {
    background: #ffeef5;
    border-color: #ff4081;
    box-shadow: inset 0 0 0 1px #ff4081;
    transform: translateY(0);
}
.shop-card-icon {
    font-size: 28px;
    margin-bottom: 5px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shop-card-icon .cat-img {
    width: 35px;
    height: 35px;
}
.shop-card-name {
    font-size: 13px;
    font-weight: 800;
    color: #880e4f;
    margin-bottom: 2px;
}
.shop-card-price {
    font-size: 12px;
    color: #d81b60;
    font-weight: bold;
    background: #fff0f6;
    padding: 2px 6px;
    border-radius: 10px;
}
.hb-mechanic-box {
    background: #fff8e1;
    border: 2px dashed #ffb74d;
    border-radius: 12px;
    padding: 12px;
    /*margin-top: 5px;*/
    
}
.hb-mech-title {
    font-size: 13px;
    font-weight: 800;
    color: #e65100;
    margin-bottom: 8px;
}
.hb-mech-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    color: #5d4037;
    line-height: 1.4;
}
.hb-mech-icon {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}
.hb-mech-label {
    font-weight: 800;
    color: #333;
    white-space: nowrap;
}
.hb-level-control {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 0px;
}
.hb-lvl-label {
    font-size: 13px;
    font-weight: 800;
    color: #555;
    white-space: nowrap;
}
.hb-slider-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}
#hb-dynamic-mechanics:empty {
    display: none;
}
input[type=range].hb-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: #ffe0e9;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
input[type=range].hb-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #ff4081;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(255, 64, 129, 0.4);
    transition: transform 0.1s;
    margin-top: -7px;
}
input[type=range].hb-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.hb-current-lvl {
    background: #ff4081;
    color: white;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    min-width: 30px;
    text-align: center;
}
.hb-lvl-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    color: #666;
    transition: all 0.1s;
    font-size: 12px;
}
.hb-lvl-btn:hover {
    background: #f5f5f5;
    color: #333;
}
.hb-lvl-btn.active {
    background: #ff4081;
    color: white;
    border-color: #ff4081;
    box-shadow: 0 2px 5px rgba(255, 64, 129, 0.3);
}
::-webkit-scrollbar {
    width: 8px;  
    height: 8px; 
}
::-webkit-scrollbar-track {
    background: rgba(255, 240, 245, 0.5); 
    border-radius: 4px; 
}
::-webkit-scrollbar-thumb {
    background: #f0e1e9; 
    border-radius: 4px;  
    border: 2px solid transparent; 
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: #ff80ab; 
    border: 0; 
}
#log-console::-webkit-scrollbar-track {
    background: rgba(74, 44, 53, 0.5); 
}

/* =========================================
   8. 全局美化滚动条 (Global Scrollbar Styling)
   ========================================= */
/* 1. 设置滚动条的整体尺寸 */
::-webkit-scrollbar {
    width: 8px;  /* 竖向滚动条的宽度 */
    height: 8px; /* 横向滚动条的高度 */
}
/* 2. 设置滚动条轨道的背景 (底色) */
::-webkit-scrollbar-track {
    background: rgba(255, 240, 245, 0.5); /* 极淡的粉色，半透明 */
    border-radius: 4px; /* 轨道也搞成圆角 */
}
/* 3. 设置滑块 (也就是你能拖动的那条) */
::-webkit-scrollbar-thumb {
    background: #f0e1e9; /* 默认显示浅粉色 */
    border-radius: 4px;  /* 圆润的滑块 */
    border: 2px solid transparent; /* 增加透明边框可以让滑块看起来变细一点，有悬浮感 */
    background-clip: content-box;
}
/* 4. 鼠标悬停在滑块上时的颜色 */
::-webkit-scrollbar-thumb:hover {
    background: #ff80ab; /* 悬停变深，交互感更强 */
    border: 0; /* 悬停时填满，变粗一点点 */
}
/* 5. 针对深色背景的控制台做个微调 (可选) */
/* 因为控制台背景是深褐色的，浅粉色滑块会很明显，正好符合 UI */
#log-console::-webkit-scrollbar-track {
    background: rgba(74, 44, 53, 0.5); /* 轨道深一点，融入背景 */
}