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

html, body { height: 100%; }

body {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Segoe UI', sans-serif;
  background:
    radial-gradient(1200px 500px at 50% -100px, #9fd77e 0%, transparent 60%),
    linear-gradient(#3f7d3a, #2c5c2b 70%);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 6px 16px;
  user-select: none;
  -webkit-user-select: none;
}

/* 尽量铺满屏幕：宽度吃满视口，同时保证画布+HUD 不超出视口高 */
#game-wrap { width: min(98vw, calc((100vh - 170px) * 1.7115)); }

/* ===== 顶部 HUD ===== */
#hud {
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: linear-gradient(#a9793e, #8a5f2e);
  border: 3px solid #5f3f1c;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 6px 8px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25);
}

#sun-board {
  background: #f4e9c8;
  border: 2px solid #5f3f1c;
  border-radius: 10px;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 9px;
}
#sun-board.pulse { animation: sunpulse .32s ease; }
@keyframes sunpulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
#sun-icon { width: 28px; height: 28px; }
#sun-count { font-weight: 700; font-size: 17px; color: #7a5210; }

#seed-bar { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }

.seed {
  position: relative;
  width: 64px;
  height: 74px;
  background: linear-gradient(#f7eed6, #e7d6ae);
  border: 2px solid #5f3f1c;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform .08s;
}
.seed:hover { transform: translateY(-2px); }
.seed canvas { margin-top: 2px; pointer-events: none; width: 58px; height: 56px; object-fit: contain; }
/* 费用改为悬浮小徽章，图标顶满卡片、消灭空白条 */
.seed-cost {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
  color: #ffe27a;
  background: rgba(30, 22, 8, .78);
  border-radius: 8px;
  padding: 0 6px;
  line-height: 15px;
  white-space: nowrap;
}
.seed-cd {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  background: rgba(20, 20, 20, .55);
  display: none;
  pointer-events: none;
}
.seed-key {
  position: absolute;
  top: 2px;
  left: 5px;
  font-size: 10px;
  color: rgba(76, 58, 20, .55);
  font-weight: 700;
}
.seed.selected {
  outline: 3px solid #ffd94f;
  outline-offset: -1px;
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}
.seed.disabled { filter: grayscale(.7); opacity: .75; cursor: not-allowed; }
.seed.deny { animation: shake .3s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

#shovel-slot {
  width: 58px;
  background: linear-gradient(#f7eed6, #e7d6ae);
  border: 2px solid #5f3f1c;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#shovel-slot.selected { outline: 3px solid #ffd94f; outline-offset: -1px; }
#shovel-icon { width: 34px; height: 34px; }

#hud-btns { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
#hud-btns button {
  font-size: 15px;
  width: 42px;
  height: 34px;
  border-radius: 8px;
  border: 2px solid #5f3f1c;
  background: #f4e9c8;
  cursor: pointer;
}
#hud-btns button:hover { background: #fff6da; }

/* ===== 战场 ===== */
#stage {
  position: relative;
  border: 3px solid #5f3f1c;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  background: #6db84e;
}
#lawn {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 890 / 520;
  cursor: pointer;
  touch-action: manipulation;
}

/* 关卡进度条 */
#wave-panel {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 230px;
  background: rgba(20, 30, 15, .55);
  border-radius: 10px;
  padding: 6px 10px 9px;
  color: #eaf5d8;
  pointer-events: none;
}
#wave-label { font-size: 12px; margin-bottom: 4px; opacity: .9; }
#wave-bar { position: relative; height: 12px; background: #1c2718; border-radius: 6px; }
#wave-fill {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: linear-gradient(90deg, #7ec850, #b6e05a);
  transition: width .3s linear;
}
#wave-marker { position: absolute; top: -10px; left: 0; width: 20px; height: 26px; transition: left .3s linear; }
.wave-flag {
  position: absolute;
  top: -8px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #d63c3c;
}

/* 波次公告 */
#announce {
  position: absolute;
  top: 34%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 44px;
  font-weight: 900;
  color: #ff5148;
  text-shadow: 0 0 12px rgba(0, 0, 0, .7), 2px 2px 0 #4d0f0f;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
#announce.small { font-size: 30px; color: #ffd94f; text-shadow: 0 0 10px rgba(0, 0, 0, .7), 2px 2px 0 #6b4a00; }
#announce.show { animation: ann 2.4s ease forwards; }
@keyframes ann {
  0% { opacity: 0; transform: scale(.4); }
  12% { opacity: 1; transform: scale(1.12); }
  22% { transform: scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.05); }
}

/* ===== 遮罩层 ===== */
#overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 25, 10, .55);
  backdrop-filter: blur(2px);
  z-index: 5;
}
#overlay.show { display: flex; }

.panel {
  background: linear-gradient(#fffbe8, #f1e4bd);
  border: 4px solid #7a5218;
  border-radius: 18px;
  padding: 26px 34px;
  text-align: center;
  max-width: 86%;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.panel.hidden { display: none; }
.panel h1 {
  font-size: 40px;
  color: #3d7a1e;
  letter-spacing: 2px;
  text-shadow: 1px 2px 0 rgba(0, 0, 0, .12);
}
.panel h1.lose { color: #c0392b; font-size: 33px; }
.panel h1.win { color: #c98a00; }
.panel .sub { color: #8a6b35; margin: 6px 0 12px; font-size: 16px; }
.help {
  list-style: none;
  text-align: left;
  font-size: 14px;
  color: #5b4a26;
  margin: 8px auto 16px;
  max-width: 420px;
}
.help li { margin: 5px 0; }
#menu-art { display: flex; gap: 10px; justify-content: center; margin: 6px 0 10px; }
#menu-art canvas {
  background: rgba(126, 200, 80, .35);
  border-radius: 12px;
  border: 2px solid rgba(95, 120, 60, .4);
}
.btn-primary {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(#8fd457, #5da832);
  border: 3px solid #3f7a1e;
  border-radius: 12px;
  padding: 10px 38px;
  cursor: pointer;
  box-shadow: 0 4px 0 #35641a;
  transition: transform .06s;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #35641a; }
.btn-primary:disabled { filter: grayscale(.6); opacity: .6; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 #35641a; }
.stats { font-size: 16px; color: #5b4a26; margin: 10px 0 16px; }
.unlock-msg { font-size: 15px; font-weight: 700; color: #2e7d32; background: rgba(143, 212, 87, .18); border: 1px dashed #7cae4f; border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; }

/* ===== 选关 + 出战植物 ===== */
#panel-select { max-width: 96%; max-height: 97%; overflow-y: auto; padding: 14px 18px 14px; }
#panel-select .select-title { font-size: 23px; margin-bottom: 8px; }

#level-cards { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.level-card {
  flex: 1 1 130px;
  min-width: 130px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: left;
  background: linear-gradient(#fdf6dd, #f3e6bd);
  border: 2px solid #b89a5e;
  border-radius: 12px;
  padding: 5px 8px;
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.level-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, .18); }
.level-card.sel { outline: 3px solid #ffd94f; outline-offset: -1px; border-color: #7a5218; }
.level-card.locked { filter: grayscale(.75); opacity: .7; cursor: not-allowed; }
.level-card.deny { animation: shake .3s; }
.lv-mode { font-size: 22px; }
.lv-name { font-size: 13px; font-weight: 700; color: #4c3a14; }
.lv-desc { font-size: 11px; color: #8a6b35; margin-top: 2px; line-height: 1.3; }
.lv-lock { font-size: 11px; color: #a05a20; }
.lv-clear { font-size: 11px; color: #2e7d32; }

.pick-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #5b4a26;
  margin: 2px 0 8px;
}
#pick-count { font-weight: 700; color: #4c3a14; }
#pick-hint { flex: 1; text-align: left; color: #9a7d46; }
#pick-hint.flash { animation: shake .35s; color: #c0392b; }
#btn-autopick {
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid #8a6b35;
  background: #f7eed6;
  color: #5b4a26;
  cursor: pointer;
}
#btn-autopick:hover { background: #fff6da; }

#pick-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 672px;
  margin: 0 auto 10px;
}
.pick-card {
  position: relative;
  width: 61px;
  background: linear-gradient(#f7eed6, #e7d6ae);
  border: 2px solid #8a6b35;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2px;
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.pick-card:hover { transform: translateY(-2px); }
.pick-card canvas { pointer-events: none; width: 40px; height: 38px; }
.pick-name { font-size: 10px; font-weight: 700; color: #4c3a14; line-height: 1.15; margin-top: 1px; }
/* 选卡格的费用保持原整条样式（不受种子卡悬浮徽章影响） */
.pick-card .seed-cost {
  position: static;
  transform: none;
  width: 100%;
  border-radius: 0;
  border-top: 1px solid rgba(95, 63, 28, .3);
  background: rgba(255, 255, 255, .6);
  color: #4c3a14;
  padding: 1px 0;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
}
.pick-card.picked {
  outline: 3px solid #ffd94f;
  outline-offset: -1px;
  border-color: #7a5218;
  background: linear-gradient(#fffbe0, #f2e3a8);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.pick-card.picked::after {
  content: '✓';
  position: absolute;
  top: 2px;
  right: 5px;
  font-size: 13px;
  font-weight: 900;
  color: #2e7d32;
}

.sel-btns { display: flex; gap: 14px; justify-content: center; align-items: center; }
#btn-back {
  font-size: 15px;
  padding: 9px 22px;
  border-radius: 12px;
  border: 2px solid #8a6b35;
  background: #f4e9c8;
  color: #5b4a26;
  cursor: pointer;
}
#btn-back:hover { background: #fff6da; }

#tips { text-align: center; color: rgba(255, 255, 255, .75); font-size: 13px; margin-top: 10px; }

@media (max-width: 700px) {
  #hud { flex-wrap: wrap; }
  .panel h1 { font-size: 30px; }
  #announce { font-size: 30px; }
}

/* ===== 移动端自适应 ===== */
@media (max-width: 900px) {
  body { overscroll-behavior: none; }
  #lawn { touch-action: none; }
  /* HUD 强制单行，卡片弹性压缩——保证高度稳定，fitWrap 才能收敛 */
  #hud { flex-wrap: nowrap; padding: 4px 5px; gap: 4px; }
  #seed-bar { flex-wrap: nowrap; }
  .seed { flex: 1 1 0; min-width: 36px; width: auto; height: 56px; }
  .seed canvas { width: calc(100% - 6px); height: calc(100% - 16px); object-fit: contain; margin-top: 1px; }
  .seed-cost { font-size: 10px; padding: 0 5px; line-height: 13px; bottom: 1px; }
  .seed-key { display: none; }
  #shovel-slot { width: 40px; }
  #shovel-icon { width: 26px; height: 26px; }
  #sun-board { padding: 2px 7px; gap: 4px; }
  #sun-icon { width: 22px; height: 22px; }
  #sun-count { font-size: 14px; }
  #hud-btns button { width: 30px; height: 24px; font-size: 11px; }
  #wave-panel { width: 140px; padding: 4px 8px 7px; }
  #announce { font-size: 28px; }
  .panel { max-height: 94%; overflow-y: auto; }
  .panel h1 { font-size: 28px; }
  .help { font-size: 13px; }
}

/* 竖屏手机：整体旋转 90°，自动横屏布局（无需手动转手机；宽度由 game.js fitWrap() 按实测 HUD 高度设定） */
@media (max-width: 900px) and (orientation: portrait) {
  html, body { height: 100%; overflow: hidden; }
  body { padding: 0; align-items: stretch; }
  #tips { display: none; }
  #game-wrap {
    position: fixed;
    top: 0;
    left: 0;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: 0 0;
  }
}

/* 横屏手机/矮窗口：宽度同样由 fitWrap() 设定 */
@media (max-width: 900px) and (orientation: landscape) {
  body { padding: 6px 4px 8px; }
  #tips { display: none; }
}