/* ===== 袖珍世界 - 全屏暗色主题 ===== */
* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100%; height:100%;
  overflow:hidden;
  background:#1a1a2e;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
  color:#e0e0e0;
  user-select:none;
  -webkit-user-select:none;
}

#game-container {
  width:100%; height:100%;
  position:relative;
}

#game-container canvas {
  display:block;
}

/* ===== 顶部工具栏 ===== */
#toolbar {
  position:absolute;
  top:8px; left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  padding:6px 10px;
  background:rgba(15, 15, 35, 0.92);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.1);
  z-index:100;
  backdrop-filter:blur(8px);
}

.tool-btn {
  width:40px; height:40px;
  border:2px solid transparent;
  border-radius:8px;
  background:rgba(255,255,255,0.06);
  color:#ccc;
  font-size:18px;
  cursor:pointer;
  transition:all 0.15s;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.tool-btn:hover {
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.3);
}

.tool-btn.active {
  background:rgba(59,130,246,0.3);
  border-color:#3b82f6;
  color:#fff;
  box-shadow:0 0 10px rgba(59,130,246,0.4);
}

.tool-btn .tooltip {
  display:none;
  position:absolute;
  top:48px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  background:rgba(0,0,0,0.85);
  color:#ccc;
  font-size:11px;
  padding:3px 8px;
  border-radius:4px;
  pointer-events:none;
}

.tool-btn:hover .tooltip { display:block; }

/* 分隔线 */
.tool-sep {
  width:1px;
  background:rgba(255,255,255,0.12);
  margin:4px 2px;
}

/* ===== 时间控制按钮组 ===== */
.time-group {
  display:flex;
  gap:3px;
  background:rgba(255,255,255,0.04);
  border-radius:8px;
  padding:2px;
  margin-left:4px;
}

.time-btn {
  padding:4px 12px;
  border:none;
  border-radius:6px;
  background:transparent;
  color:#999;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.15s;
}

.time-btn:hover { background:rgba(255,255,255,0.08); color:#ccc; }
.time-btn.active {
  background:rgba(59,130,246,0.35);
  color:#fff;
}

/* ===== 底部信息面板 ===== */
#info-panel {
  position:absolute;
  bottom:8px; left:8px;
  background:rgba(15, 15, 35, 0.92);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.1);
  padding:10px 14px;
  z-index:100;
  min-width:220px;
  backdrop-filter:blur(8px);
  font-size:12px;
}

#info-panel .title {
  font-size:13px;
  font-weight:700;
  color:#3b82f6;
  margin-bottom:6px;
  letter-spacing:1px;
}

#info-panel .stat-row {
  display:flex;
  justify-content:space-between;
  padding:2px 0;
  color:#aaa;
}

#info-panel .stat-row .val {
  color:#e0e0e0;
  font-weight:600;
}

#info-panel .stat-row.war { color:#ef4444; }
#info-panel .stat-row.war .val { color:#ef4444; }

/* ===== 小地图 ===== */
#minimap {
  position:absolute;
  bottom:8px; right:8px;
  width:180px; height:135px;
  background:rgba(15, 15, 35, 0.85);
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.15);
  z-index:100;
  overflow:hidden;
}

#minimap canvas {
  width:100%; height:100%;
  display:block;
}

/* ===== 城镇标签（世界画布上） ===== */
.town-label {
  position:absolute;
  background:rgba(0,0,0,0.7);
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:2px 6px;
  border-radius:3px;
  pointer-events:none;
  transform:translate(-50%, -50%);
  white-space:nowrap;
  border:1px solid rgba(255,255,255,0.15);
  letter-spacing:0.5px;
}

/* ===== 选中标记动画 ===== */
@keyframes pulse-select {
  0%, 100% { box-shadow: 0 0 4px rgba(255,255,0,0.5); }
  50% { box-shadow: 0 0 12px rgba(255,255,0,0.8); }
}

/* ===== 快捷提示 ===== */
#hint {
  position:absolute;
  bottom:160px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.7);
  color:#aaa;
  font-size:11px;
  padding:4px 12px;
  border-radius:12px;
  z-index:100;
  transition:opacity 0.5s;
  pointer-events:none;
}

/* ===== 响应式适配 ===== */
@media (max-width: 768px) {
  #toolbar {
    gap:3px;
    padding:4px 6px;
  }
  .tool-btn {
    width:34px; height:34px;
    font-size:15px;
  }
  .time-btn {
    padding:3px 8px;
    font-size:11px;
  }
  #info-panel {
    min-width:160px;
    font-size:11px;
    padding:8px 10px;
  }
  #minimap {
    width:120px; height:90px;
  }
}

@media (max-width: 500px) {
  #toolbar {
    top:4px;
    gap:2px;
    padding:3px 4px;
    border-radius:8px;
  }
  .tool-btn {
    width:30px; height:30px;
    font-size:13px;
    border-radius:6px;
  }
  .time-btn {
    padding:2px 6px;
    font-size:10px;
  }
  .tool-sep { margin:3px 1px; }
  #info-panel {
    bottom:4px; left:4px;
    min-width:140px;
    font-size:10px;
    padding:6px 8px;
  }
  #minimap {
    bottom:4px; right:4px;
    width:90px; height:68px;
    border-radius:6px;
  }
  #hint { bottom:100px; font-size:10px; }
}