:root{
    --bg:#e3f2e9;           /* 浅绿色背景，仿晨光森林 */
    --card:#ffffff;          /* 卡片仍然白色，但更柔和 */
    --muted:#5a6b4f;         /* 暗绿色文字，更自然 */
    --accent:#3b7a57;        /* 主森林绿，生机盎然 */
    --accent-2:#4aa3d8;      /* 湖泊蓝，清爽明亮 */
    --forest:#2e5932;        /* 深森林绿，用于树木、植被 */
    --road:#d4b37f;           /* 土路色，温暖自然 */
    --house:#e48b5d;          /* 农舍色，温馨明亮 */
    --glass: rgba(255,255,255,0.6);  /* 半透明效果保持 */
    --max-width:1200px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
    background: linear-gradient(180deg,var(--bg),#d8ede1);
    color:#1b2c1f;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding:20px;
    display:flex;
    justify-content:center;

}

.container{
    width:100%;
    max-width:var(--max-width);
    background:transparent;
}

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:12px;
    flex-wrap:wrap;
}

.logo-title {
    display: flex;
    align-items: center;
    gap:8px;
}

.logo {
    flex-shrink: 0; /* 防止缩小 */
}

.title-text h1 {
    margin:0;
    font-size:20px;
    letter-spacing:0.4px;
}

.title-text small {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
    margin-top: 2px;
    letter-spacing: 0.2px;
}

header h1{
    margin:0;
    font-size:20px;
    letter-spacing:0.4px;
}
header h1 small {
    display: block;            /* 单独占一行 */
    font-size: 14px;           /* 比主标题小 */
    font-weight: 400;          /* 正常字体，不加粗 */
    color: var(--muted);       /* 使用暗绿色 */
    margin-top: 2px;           /* 和主标题有一点间距 */
    letter-spacing: 0.2px;     /* 副标题稍微紧凑 */
}

nav[aria-label="主导航"]{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}
nav[aria-label="主导航"] a{
    text-decoration:none;
    color:var(--muted);
    padding:6px 10px;
    border-radius:6px;
    font-size:14px;
}
nav[aria-label="主导航"] a:hover{color:var(--accent)}

/* 主体布局 */
main{
    display:grid;
    grid-template-columns: 1fr 320px;
    gap:16px;
}

/* 固定高度 */
.map-card,
.panel{
    height:600px; /* 固定高度，可调整 */
    border-radius:14px;
}

/* 地图卡片 */
.map-card{
    background:var(--card);
    box-shadow: 0 6px 18px rgba(25,40,50,0.06);
    padding:12px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    position:relative;
}

/* 地图区域 */
.svg-wrap{
    width:100%;
    flex:1;
    border-radius:10px;
    overflow:hidden;
    touch-action: none;
    background: linear-gradient(180deg, #a3d9c1 0%, #e3f2e9 100%);
    display:flex;
    align-items: center;     /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

/* 右侧控制面板 */
.panel{
    background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85));
    box-shadow: 0 6px 18px rgba(20,30,40,0.04);
    padding:12px;
    display:flex;
    flex-direction:column;
    overflow-y:auto; /* 面板内容过长整体滚动 */
}

/* 控制面板内容 */
.panel h3{margin:6px 0 10px 0;font-size:16px}
.controls{display:flex;flex-direction:column;gap:8px}

/* 按钮 */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:8px 10px;
    border-radius:8px;
    border:0;
    cursor:pointer;
    font-size:14px;
    background:var(--accent);
    color:white;
}
.btn.secondary{background:transparent;color:var(--accent);border:1px solid rgba(59,122,87,0.2)}
.btn.danger{background:#c64f3f}
.small{padding:6px 8px;font-size:13px}

/* 图例 */
.legend{margin-top:12px;background:var(--glass);padding:10px;border-radius:8px;font-size:13px;color:var(--muted)}
.legend-item{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.swatch{width:18px;height:12px;border-radius:3px;flex:0 0 18px}

/* 底部信息区 */
footer{
    margin-top:14px;
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
}
footer a{color:var(--muted);text-decoration:none}
footer p{margin:6px 0}

/* 货铺信息列表：全部展示，不滚动 */
.shop-info {
    max-height: none; /* 不限制高度 */
    overflow: visible; /* 不滚动 */
    background: var(--glass);
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--muted);



}

/* 货铺条目 */
.shop-info .shop-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 6px;
    margin-bottom: 4px;
    background: rgba(59,122,87,0.1);
    border-radius: 4px;
    font-weight: 500;
}
.shop-info .shop-item.purchased {
    background: rgba(59,122,87,0.3);
    color: var(--accent-2);
}

/* 表格样式 */
.shop-table {
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
}
.shop-table th, .shop-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    text-align: center;
}
.shop-table th {
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
}
.shop-table tr:nth-child(even) {
    background-color: #f9f9f9;
}
.shop-table tr:hover {
    background-color: #f1f7f2;
}

/* 总资产显示 */
.total-money {
    margin-top: 0px;
    padding: 0px 12px;
    background: var(--glass);
    color: var(--accent);
    font-size: 18px;
    font-weight: 700;
    border-radius: 8px;
    text-align: center;


}

/* ===== 捕获列表区域 ===== */
#capturedList {
    list-style: none;
    padding: 8px;
    margin: 0;
    background: var(--glass);
    border-radius: 8px;
    font-size: 14px;

    max-height: 200px;       /* 限制高度，可根据右侧面板调整 */
    overflow-y: auto;        /* 超出高度显示滚动条 */
}

/* 捕获列表的单个生物 */
#capturedList li {
    color: var(--forest);      /* 深森林绿 */
    padding: 4px 0;
    border-bottom: 1px solid rgba(59, 122, 87, 0.15);
}

#capturedList li:last-child {
    border-bottom: none;
}

/* 整个事件层：覆盖地图 */
#eventLayer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    pointer-events: none;   /* 本层无交互 → 让视频能点击 */
}

/* 右上角关闭按钮（大叉） */
#closeEvent.close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3000;
    pointer-events: auto;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    background: rgba(0,0,0,0.55);
    color: white;
    backdrop-filter: blur(6px);
    transition: 0.2s;
}

#closeEvent:hover {
    background: rgba(0,0,0,0.75);
}

/* 底部按钮区 */
.event-buttons {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: auto;
}

/* 按钮样式与森林 UI 保持一致 */
.event-btn {
    padding: 12px 20px;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    color: white;
    letter-spacing: 0.4px;
}

.event-btn.dark {
    background: rgba(0,0,0,0.6);
}
.event-btn.info {
    background: rgba(52, 152, 219, 0.75); /* 蓝色半透明 */
}
.event-btn.danger {
    background: rgba(200,60,60,0.75);
}

.event-btn:hover {
    opacity: 0.9;
}
#eventLayer {
    display: none;   /* 默认隐藏 */
}


/* 响应式：移动端单列 */
@media (max-width:900px){
    main{grid-template-columns:1fr}
    .svg-wrap{height:60vh; min-height:320px}
}

/* 小图标 */
.tool-row{display:flex;gap:8px;flex-wrap:wrap}
.file-input{display:none}
.meta{font-size:13px;color:var(--muted);margin-top:8px}