/* ===== CSS 变量：昼夜配色方案 ===== */
/* JS 通过 document.documentElement.style.setProperty() 动态设置这些变量 */
:root {
  /* 白天配色（默认） */
  --bg-color: #87CEEB;
  --fg-color: #1a1a2e;
  --accent-color: #4a90d9;
  --header-bg: #e0e0d8;
  --input-bg: #ffffff;
  --input-border: #cccccc;
  --btn-bg: #4a90d9;
  --btn-color: #ffffff;
  --btn-hover-bg: #3a7bc8;
  --status-bg: #e8e8e0;
  --status-color: #333333;
  --message-bg: #fff3cd;
  --message-color: #856404;
  --list-bg: #ffffff;
  --list-hover-bg: #f0f0f0;
  --list-border: #dddddd;
}

/* 夜晚配色 */
.night-mode {
  --bg-color: #1a1a2e;
  --fg-color: #e0e0e0;
  --accent-color: #7ec8e3;
  --header-bg: #16213e;
  --input-bg: #0f3460;
  --input-border: #1a1a4e;
  --btn-bg: #533483;
  --btn-color: #e0e0e0;
  --btn-hover-bg: #6a42a0;
  --status-bg: #16213e;
  --status-color: #c8c8d0;
  --message-bg: #2c2c4a;
  --message-color: #c8c8d0;
  --list-bg: #16213e;
  --list-hover-bg: #1a1a4e;
  --list-border: #2c2c5a;
}

/* ===== ASCII 画布等宽字体 ===== */
/* 确保 ASCII 艺术画布使用等宽字体渲染，不受 Tailwind 影响 */
#ascii-canvas {
  font-family: 'Courier New', 'Consolas', 'Monaco', 'Liberation Mono', monospace;
  font-size: 14px;
  line-height: 1.15;
  color: var(--fg-color);
  white-space: pre;
  user-select: none;
  will-change: contents;
}

/* ===== 画布容器背景 ===== */
/* 确保画布区域背景跟随天气配色方案 */
#canvas-wrapper {
  background-color: var(--bg-color);
}

/* ===== 工具类 ===== */
/* JS 中通过 classList.add/remove('hidden') 控制元素显隐 */
.hidden {
  display: none !important;
}

/* ===== 闪电闪光效果 ===== */
/* 雷暴动画系统使用的全屏闪光样式 */
.flash {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* ===== 城市候选列表项样式 ===== */
/* li 元素由 JS 动态创建，无法直接添加 Tailwind 类 */
#city-list li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--list-border);
  transition: background-color 0.2s ease;
}

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

#city-list li:hover {
  background-color: var(--list-hover-bg);
}

/* ===== 关键布局后备样式 ===== */
/* 确保即使 Tailwind CDN 加载失败，页面布局仍然正常 */
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family: 'Courier New', Consolas, Monaco, monospace;
  background-color: var(--bg-color);
  color: var(--fg-color);
  transition: background-color 0.5s, color 0.5s;
}

#canvas-wrapper {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}