/* ==========================================================================
   pvz-pinyin / styles.css - 植物大战僵尸：邪修学拼音大冒险 样式表
   经典卡通草坪设计、动态灯牌、过山车坡道、植物卡牌与战斗控制台
   ========================================================================== */

:root {
  --pvz-green-dark: #2e7d32;
  --pvz-green-light: #4caf50;
  --pvz-green-grass1: #48a334;
  --pvz-green-grass2: #57b73f;
  --pvz-sun-yellow: #ffeb3b;
  --pvz-sun-border: #f57f17;
  --pvz-wood-dark: #4e342e;
  --pvz-wood-medium: #795548;
  --pvz-wood-light: #8d6e63;
  --pvz-fire-orange: #ff5722;
  --pvz-ice-blue: #00e5ff;
  --pvz-card-bg: #fffde7;
  --pvz-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--pvz-font-family);
  background-color: #1b2612;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(76, 175, 80, 0.25) 0%, transparent 60%),
    linear-gradient(180deg, #182310 0%, #0d1508 100%);
  color: #f1f8e9;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  user-select: none;
}

/* 顶部导航栏 */
.top-header {
  background: linear-gradient(180deg, #3e2723 0%, #27140e 100%);
  border-bottom: 4px solid #5d4037;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  z-index: 100;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-icon {
  font-size: 34px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.brand-title-wrap h1 {
  font-size: 22px;
  font-weight: 800;
  color: #ffeb3b;
  text-shadow: 2px 2px 0 #3e2723, -1px -1px 0 #3e2723, 1px -1px 0 #3e2723, -1px 1px 0 #3e2723, 0 3px 6px rgba(0,0,0,0.8);
  letter-spacing: 0.5px;
}

.brand-sub {
  font-size: 12px;
  color: #c8e6c9;
  font-weight: 600;
  margin-top: 2px;
}

/* 模式切换 Tab 组 */
.nav-tabs {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.35);
  padding: 4px;
  border-radius: 10px;
  border: 2px solid #5d4037;
}

.tab-btn {
  background: transparent;
  border: none;
  color: #cfd8dc;
  font-size: 15px;
  font-weight: bold;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.tab-btn.active {
  background: linear-gradient(180deg, #81c784 0%, #388e3c 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border: 1px solid #a5d6a7;
}

/* 右侧阳光数值与功能按键 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sun-counter {
  background: #3e2723;
  border: 3px solid #ffeb3b;
  border-radius: 24px;
  padding: 4px 16px 4px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 900;
  color: #ffeb3b;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
}

.btn-icon {
  background: #4e342e;
  border: 2px solid #8d6e63;
  color: #ffffff;
  font-size: 16px;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: #6d4c41;
  border-color: #ffb74d;
  transform: translateY(-1px);
}

.btn-export {
  background: linear-gradient(180deg, #ff9800 0%, #e65100 100%);
  border: 2px solid #ffe082;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: all 0.2s ease;
}

.btn-export:hover {
  background: linear-gradient(180deg, #ffa726 0%, #f57c00 100%);
  transform: translateY(-1px);
}

/* 主内容容器 */
.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.view-section {
  display: none;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.view-section.active {
  display: flex;
}

/* ==========================================================================
   模块一：声韵合体火炬靶场
   ========================================================================== */
.target-stage-card {
  background: #271a14;
  border: 4px solid #5d4037;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 靶场顶部控制与口诀动态跑马灯 */
.stage-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #3e2723;
  border-radius: 10px;
  padding: 10px 16px;
  border: 2px solid #6d4c41;
}

.rhyme-marquee {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1b120c;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid #ffd54f;
  color: #fff9c4;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(255, 213, 79, 0.3);
}

.stage-mode-switch {
  display: flex;
  gap: 8px;
}

.mode-btn {
  background: #5d4037;
  color: #eceff1;
  border: 1px solid #8d6e63;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-btn.active {
  background: #ff5722;
  border-color: #ffcc80;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 87, 34, 0.5);
}

/* Canvas 核心靶场舞台画布 */
.canvas-wrapper {
  position: relative;
  width: 100%;
  background: #1e2e14;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid #33691e;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

#target-canvas {
  display: block;
  width: 100%;
  height: 380px;
  background: #48a334;
}

/* 靶场底部交互台：声母托盘、四声调过山车坡道、操作按钮 */
.stage-control-panel {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
}

.selector-box {
  background: #3e2723;
  border: 2px solid #5d4037;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.box-title {
  font-size: 14px;
  font-weight: 800;
  color: #ffeb3b;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.initial-pill-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
}

.initial-btn {
  background: #27140e;
  border: 1.5px solid #8d6e63;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  padding: 6px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.initial-btn:hover {
  background: #4e342e;
  border-color: #ffd54f;
  transform: scale(1.08);
}

.initial-btn.active {
  background: #ff9800;
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 152, 0, 0.8);
}

/* 四声调过山车坡道 */
.coaster-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coaster-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: #1e120b;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #6d4c41;
}

.tone-card {
  background: #4e342e;
  border: 2px solid #8d6e63;
  border-radius: 8px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tone-card:hover {
  border-color: #ffeb3b;
  transform: translateY(-2px);
}

.tone-card.active {
  background: linear-gradient(180deg, #ff7043 0%, #d84315 100%);
  border-color: #ffe082;
  box-shadow: 0 0 10px rgba(255, 112, 67, 0.7);
}

.tone-mark {
  font-size: 22px;
  font-weight: 900;
  color: #ffeb3b;
}

.tone-name {
  font-size: 11px;
  color: #eceff1;
  font-weight: bold;
}

.tone-slope-icon {
  font-size: 16px;
}

/* 按钮操作组 */
.shoot-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.btn-shoot-fire {
  flex: 2;
  background: linear-gradient(180deg, #ff5722 0%, #bf360c 100%);
  border: 2px solid #ffab91;
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(255, 87, 34, 0.5);
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-shoot-fire:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255, 87, 34, 0.7);
}

.btn-shoot-fire:active {
  transform: translateY(1px);
}

.btn-shoot-slow {
  flex: 1;
  background: linear-gradient(180deg, #26a69a 0%, #00695c 100%);
  border: 2px solid #80cbc4;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-shoot-slow:hover {
  transform: translateY(-2px);
}

/* ==========================================================================
   模块二：草坪塔防闯关大作战
   ========================================================================== */
.defense-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
}

.level-sidebar {
  background: #271a14;
  border: 3px solid #5d4037;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.level-card {
  background: #3e2723;
  border: 2px solid #5d4037;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.level-card:hover {
  border-color: #ffd54f;
  transform: translateX(4px);
}

.level-card.active {
  background: #4e342e;
  border-color: #4caf50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.level-name {
  font-size: 14px;
  font-weight: 800;
  color: #ffeb3b;
}

.level-stars {
  color: #ffd700;
  font-size: 12px;
}

.level-desc {
  font-size: 11px;
  color: #b0bec5;
  line-height: 1.4;
}

/* 塔防主草坪区 */
.battlefield-card {
  background: #271a14;
  border: 4px solid #5d4037;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.battle-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #3e2723;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #6d4c41;
}

.status-pill {
  font-size: 13px;
  font-weight: bold;
  color: #eceff1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.battle-canvas-wrapper {
  width: 100%;
  background: #1e2e14;
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid #2e7d32;
}

#battle-canvas {
  display: block;
  width: 100%;
  height: 420px;
  background: #48a334;
}

/* 塔防植物卡牌槽 */
.seed-bank-bar {
  background: #3e2723;
  border: 2px solid #5d4037;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
}

.seed-card {
  background: #fff9c4;
  color: #3e2723;
  border: 2px solid #b71c1c;
  border-radius: 8px;
  width: 68px;
  height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.seed-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.seed-card.selected {
  outline: 3px solid #00e5ff;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.8);
}

.seed-cost {
  font-size: 11px;
  font-weight: 900;
  color: #e65100;
}

.seed-pinyin {
  font-size: 18px;
  font-weight: 900;
  color: #1b5e20;
}

.seed-plant {
  font-size: 10px;
  font-weight: bold;
}

/* ==========================================================================
   模块三：拼音植物图鉴手册
   ========================================================================== */
.handbook-card {
  background: #271a14;
  border: 4px solid #5d4037;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.handbook-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-btn {
  background: #3e2723;
  border: 1px solid #8d6e63;
  color: #cfd8dc;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-btn.active {
  background: #4caf50;
  border-color: #ffffff;
  color: #ffffff;
}

.pinyin-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 6px;
}

.handbook-item-card {
  background: #3e2723;
  border: 2px solid #5d4037;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.handbook-item-card:hover {
  border-color: #ffd54f;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-letter {
  font-size: 26px;
  font-weight: 900;
  color: #ffeb3b;
}

.card-speaker {
  font-size: 18px;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.card-rhyme {
  font-size: 12px;
  color: #c8e6c9;
  line-height: 1.4;
  font-weight: 600;
}

.card-plant-tag {
  background: #2e7d32;
  color: #ffffff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  align-self: flex-start;
}

/* 结算弹窗 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay.active {
  display: flex;
}

.modal-box {
  background: #271a14;
  border: 4px solid #ffeb3b;
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 480px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-title {
  font-size: 26px;
  font-weight: 900;
  color: #ffeb3b;
}

.modal-content {
  font-size: 16px;
  color: #f1f8e9;
  line-height: 1.6;
}

.modal-btn {
  background: linear-gradient(180deg, #4caf50 0%, #2e7d32 100%);
  border: 2px solid #a5d6a7;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
  align-self: center;
  transition: all 0.2s ease;
}

.modal-btn:hover {
  transform: translateY(-2px);
}