* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
}

/* 16:9 等比例縮放舞台，上下或左右留黑邊 */
#stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  container-type: size;
  overflow: hidden;
  background-color: #1a1a1a;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
  font-size: 1.6cqw;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
}

/* 疊在畫布上的介面根容器 */
#ui-root {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* 各個獨立介面層 */
.ui-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.58);
  pointer-events: auto;
  padding: 3%;
}

.hidden {
  display: none !important;
}

/* 白色描邊粗體字通用效果 */
.stroke-text,
.pvz-title,
.pvz-subtitle,
.pvz-header,
.pvz-result-text,
.pvz-btn,
.progress-label,
.setting-label,
.perk-card-text,
.toast-banner {
  color: #ffffff;
  font-weight: 800;
  text-shadow:
    -2px -2px 0 #1f140a,
     2px -2px 0 #1f140a,
    -2px  2px 0 #1f140a,
     2px  2px 0 #1f140a,
     0px  3px 4px rgba(0, 0, 0, 0.75);
}

/* 仿 PvZ 木頭與石板複合面板 */
.pvz-panel {
  position: relative;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0px,
      rgba(255, 255, 255, 0.03) 12px,
      rgba(0, 0, 0, 0.05) 12px,
      rgba(0, 0, 0, 0.05) 24px
    ),
    linear-gradient(180deg, #9c622e 0%, #7d4b1e 50%, #613813 100%);
  border: 0.45cqw solid #3c220a;
  border-radius: 1.4cqw;
  box-shadow:
    inset 0 0.3cqw 0 rgba(255, 220, 175, 0.45),
    inset 0 -0.4cqw 0 rgba(35, 18, 4, 0.7),
    0 1.2cqw 2.5cqw rgba(0, 0, 0, 0.85),
    0 0 0 0.25cqw #c28547;
  padding: 2.2% 3.4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 90%;
  max-height: 94%;
}

/* 面板四角鉚釘裝飾 */
.screw {
  position: absolute;
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b5bcc4, #596068 70%, #2a2e33 100%);
  border: 1.5px solid #221509;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.screw.tl { top: 0.9cqw; left: 0.9cqw; }
.screw.tr { top: 0.9cqw; right: 0.9cqw; }
.screw.bl { bottom: 0.9cqw; left: 0.9cqw; }
.screw.br { bottom: 0.9cqw; right: 0.9cqw; }

/* 標題與副標題 */
.pvz-title {
  font-size: clamp(20px, 3.3cqw, 46px);
  color: #ffe863;
  letter-spacing: 0.06em;
  margin-bottom: 0.25cqw;
}

.pvz-subtitle {
  font-size: clamp(13px, 1.55cqw, 22px);
  color: #d6f5b0;
  margin-bottom: 1cqw;
}

.pvz-header {
  font-size: clamp(20px, 3cqw, 40px);
  color: #ffea79;
  margin-bottom: 1.6cqw;
  letter-spacing: 0.05em;
}

/* 綠色立體按鈕（最少 44px 高） */
.pvz-btn {
  min-height: 44px;
  padding: 0.7cqw 2cqw;
  font-family: inherit;
  font-size: clamp(15px, 1.6cqw, 23px);
  border-radius: 0.9cqw;
  border: 2.5px solid #1e3f0f;
  background: linear-gradient(180deg, #8be84e 0%, #52b81f 55%, #3b9110 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.6),
    inset 0 -3px 2px rgba(22, 64, 5, 0.6),
    0 5px 0 #215208,
    0 7px 10px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.08s ease, box-shadow 0.08s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  touch-action: manipulation;
}

.pvz-btn:hover {
  filter: brightness(1.14);
}

.pvz-btn:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 2px rgba(0, 0, 0, 0.25),
    0 1px 0 #215208,
    0 2px 4px rgba(0, 0, 0, 0.5);
}

.pvz-btn-lg {
  width: 100%;
  min-height: max(48px, 4.4cqw);
  font-size: clamp(16px, 1.85cqw, 26px);
}

/* 增強版亮綠色強調按鈕 */
.pvz-btn-special {
  background: linear-gradient(180deg, #a2f754 0%, #5fd11b 55%, #419e0c 100%);
  border-color: #1b4208;
}

/* 石板次要按鈕 */
.pvz-btn-stone {
  border-color: #2c3138;
  background: linear-gradient(180deg, #98a3b0 0%, #687380 55%, #4e5761 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.5),
    inset 0 -3px 2px rgba(28, 32, 38, 0.65),
    0 5px 0 #2f353d,
    0 7px 10px rgba(0, 0, 0, 0.6);
}

.pvz-btn-stone:active {
  box-shadow:
    inset 0 2px 2px rgba(0, 0, 0, 0.3),
    0 1px 0 #2f353d,
    0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 讀取面板與進度條 */
.loading-panel {
  width: 58%;
}

.progress-track {
  position: relative;
  width: 100%;
  height: max(32px, 3.2cqw);
  background: linear-gradient(180deg, #2b1a0c 0%, #422813 100%);
  border: 2.5px solid #1e1106;
  border-radius: 1.6cqw;
  overflow: hidden;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8);
}

.progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(180deg, #9df25a 0%, #57bd22 60%, #3d9112 100%);
  border-radius: 1.4cqw;
  transition: width 0.15s ease-out;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.55);
}

.progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 1.4cqw, 20px);
}

/* 主選單面板 */
.menu-panel {
  width: 68%;
}

.menu-content {
  width: 94%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1cqw;
  margin-bottom: 1.2cqw;
}

.menu-mode-section {
  width: 100%;
  background: linear-gradient(180deg, #4b525c 0%, #373d45 100%);
  border: 2.5px solid #23272c;
  border-radius: 0.9cqw;
  padding: 0.85cqw 1.2cqw;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65cqw;
}

.mode-switch-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2cqw;
  width: 100%;
}

.mode-switch-btn {
  flex: 1;
  max-width: 18cqw;
  min-height: 44px;
}

.mode-switch-btn.active {
  border-color: #ffe863;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.75),
    inset 0 -3px 2px rgba(22, 64, 5, 0.6),
    0 4px 0 #215208,
    0 0 10px rgba(255, 232, 99, 0.65);
}

.mode-switch-btn.off {
  background: linear-gradient(180deg, #8f96a0 0%, #606770 55%, #474d54 100%);
  border-color: #292d33;
  color: #d6dde6;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.35),
    0 4px 0 #2b3036,
    0 5px 8px rgba(0, 0, 0, 0.5);
}

.mode-switch-desc {
  color: #f3f6fa;
  font-size: clamp(11px, 1.15cqw, 16px);
  line-height: 1.35;
  text-shadow: 1px 1px 2px #000;
}

.menu-level-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7cqw;
}

.level-section-title {
  font-size: clamp(16px, 2cqw, 28px);
  color: #ffea79;
  letter-spacing: 0.05em;
}

.level-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9cqw 1.2cqw;
}

.level-btn {
  position: relative;
  width: 100%;
  min-height: 44px;
  padding: 0.65cqw 1cqw;
  font-size: clamp(14px, 1.55cqw, 22px);
}

.level-btn.locked {
  background: linear-gradient(180deg, #7a8088 0%, #52575e 55%, #3d4147 100%);
  border-color: #25282c;
  color: #b8bfc7;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.25),
    0 4px 0 #232629,
    0 5px 8px rgba(0, 0, 0, 0.5);
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.level-btn.locked:hover {
  filter: grayscale(0.35);
}

.level-btn.locked:active {
  transform: none;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.25),
    0 4px 0 #232629,
    0 5px 8px rgba(0, 0, 0, 0.5);
}

.level-lock {
  font-size: 0.95em;
}

.level-check {
  position: absolute;
  top: 0.15cqw;
  right: 0.45cqw;
  font-size: clamp(12px, 1.3cqw, 18px);
  color: #ffe863;
  line-height: 1;
}

.menu-footer {
  width: 88%;
  display: flex;
  justify-content: center;
}

/* 設定與暫停面板 */
.settings-panel,
.pause-panel {
  width: 56%;
}

.settings-body {
  width: 92%;
  background: linear-gradient(180deg, #525963 0%, #3d434c 100%);
  border: 2.5px solid #23272e;
  border-radius: 1cqw;
  padding: 1.4cqw 2cqw;
  margin-bottom: 1.6cqw;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  gap: 0.9cqw;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  gap: 1.2cqw;
}

.setting-label {
  font-size: clamp(14px, 1.55cqw, 22px);
  text-align: left;
}

.setting-toggle-btn {
  min-width: max(96px, 9cqw);
  min-height: 44px;
  padding: 0.4cqw 1.4cqw;
  font-size: clamp(14px, 1.45cqw, 20px);
}

.setting-toggle-btn.off {
  background: linear-gradient(180deg, #8f96a0 0%, #606770 55%, #474d54 100%);
  border-color: #292d33;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.35),
    0 4px 0 #2b3036,
    0 5px 8px rgba(0, 0, 0, 0.5);
}

.setting-label-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15cqw;
  text-align: left;
}

.setting-hint {
  font-size: clamp(11px, 1.1cqw, 15px);
  color: #d6dde6;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85);
  line-height: 1.25;
}

.difficulty-group {
  display: flex;
  align-items: center;
  gap: 0.45cqw;
}

.difficulty-btn {
  min-width: max(36px, 3.2cqw);
  min-height: 44px;
  padding: 0.3cqw 0.7cqw;
  font-size: clamp(13px, 1.4cqw, 19px);
}

.difficulty-btn.off {
  background: linear-gradient(180deg, #8f96a0 0%, #606770 55%, #474d54 100%);
  border-color: #292d33;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.35),
    0 4px 0 #2b3036,
    0 5px 8px rgba(0, 0, 0, 0.5);
}

.volume-wrap {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  width: 52%;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.1cqw;
  min-height: 12px;
  background: #23272d;
  border-radius: 0.6cqw;
  border: 2px solid #16191d;
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: max(26px, 2.2cqw);
  height: max(26px, 2.2cqw);
  border-radius: 50%;
  background: linear-gradient(180deg, #98f558 0%, #4cb317 100%);
  border: 2.5px solid #1b4208;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.volume-slider::-moz-range-thumb {
  width: max(26px, 2.2cqw);
  height: max(26px, 2.2cqw);
  border-radius: 50%;
  background: linear-gradient(180deg, #98f558 0%, #4cb317 100%);
  border: 2.5px solid #1b4208;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.volume-val {
  min-width: 3.4em;
  text-align: right;
  font-size: clamp(13px, 1.4cqw, 19px);
}

.panel-actions,
.pause-actions,
.result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.2cqw;
  width: 100%;
}

/* 三選一詞條面板与直式卡片 */
.perks-panel {
  width: 78%;
}

.perks-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8cqw;
  margin-top: 0.6cqw;
}

.perk-card {
  min-height: max(180px, 28cqw);
  padding: 2cqw 1.4cqw;
  border-radius: 1.1cqw;
  border: 3px solid #2b4d16;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.18), transparent 65%),
    linear-gradient(180deg, #6ab839 0%, #468c1e 55%, #316911 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.55),
    inset 0 -4px 3px rgba(19, 46, 6, 0.7),
    0 6px 0 #1f470a,
    0 10px 18px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: filter 0.14s ease, transform 0.1s ease, box-shadow 0.1s ease;
  touch-action: manipulation;
}

.perk-card:hover {
  filter: brightness(1.14);
  transform: translateY(-3px);
}

.perk-card:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.3),
    0 2px 0 #1f470a,
    0 4px 8px rgba(0, 0, 0, 0.6);
}

.perk-badge {
  width: 3.6cqw;
  height: 3.6cqw;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff282, #e09f1f 80%);
  border: 2px solid #4d2e07;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(16px, 1.8cqw, 26px);
}

.perk-card-text {
  font-size: clamp(14px, 1.6cqw, 22px);
  line-height: 1.45;
  padding: 0.8cqw 0;
  word-break: break-word;
}

.perk-select-hint {
  display: inline-block;
  padding: 0.4cqw 1.2cqw;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 0.6cqw;
  font-size: clamp(12px, 1.25cqw, 17px);
  color: #e8ffcf;
}

/* 結算面板 */
.result-panel {
  width: 54%;
  padding: 3.5% 4%;
}

.pvz-result-text {
  font-size: clamp(24px, 3.6cqw, 50px);
  margin-bottom: 2.4cqw;
  line-height: 1.35;
}

.pvz-result-text.win {
  color: #ffea61;
}

.pvz-result-text.lose {
  color: #ff7b6b;
}

.result-sub-line {
  font-size: clamp(15px, 2cqw, 28px);
  color: #ffe863;
  margin-top: 0.6cqw;
}

/* 畫面上方中央 Toast 提示 */
.toast-banner {
  position: absolute;
  top: 4.5%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #57606b 0%, #394047 100%);
  border: 2.5px solid #1e2226;
  border-radius: 0.9cqw;
  padding: 0.75cqw 2.2cqw;
  font-size: clamp(14px, 1.6cqw, 23px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    0 6px 14px rgba(0, 0, 0, 0.75);
  pointer-events: none;
  z-index: 50;
  white-space: nowrap;
  animation: toastPop 0.18s ease-out;
}

@keyframes toastPop {
  from {
    opacity: 0;
    transform: translate(-50%, -12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* 選卡畫面面板 */
.chooser-panel {
  width: 82%;
  height: 92%;
  padding: 1.8% 2.8%;
  justify-content: space-between;
  gap: 0.85cqw;
}

.chooser-header-row {
  width: 96%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4cqw;
  flex-shrink: 0;
}

.chooser-title {
  margin-bottom: 0;
  font-size: clamp(18px, 2.5cqw, 34px);
}

.chooser-count {
  font-size: clamp(13px, 1.5cqw, 21px);
  color: #d6f5b0;
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid #2b1908;
  border-radius: 0.7cqw;
  padding: 0.25cqw 0.95cqw;
}

/* 上方已選卡槽列 */
.chooser-slots-row {
  width: 96%;
  min-height: max(68px, 11.5cqw);
  background: linear-gradient(180deg, #4b2d12 0%, #38200b 100%);
  border: 2.5px solid #241305;
  border-radius: 0.9cqw;
  padding: 0.65cqw 0.9cqw;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.7cqw;
  overflow-x: auto;
  flex-shrink: 0;
  touch-action: pan-x;
}

.chooser-slot-empty {
  flex: 1 1 0;
  max-width: 9.2cqw;
  min-width: max(56px, 6.8cqw);
  min-height: max(56px, 9.6cqw);
  border: 2px dashed rgba(255, 224, 180, 0.32);
  border-radius: 0.7cqw;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chooser-slot-empty-text {
  font-size: clamp(11px, 1.1cqw, 15px);
  color: rgba(255, 230, 195, 0.42);
  font-weight: 700;
}

/* 下方可選植物網格捲動區 */
.chooser-grid-wrap {
  width: 96%;
  flex: 1 1 auto;
  min-height: 0;
  background: linear-gradient(180deg, #525963 0%, #3d434c 100%);
  border: 2.5px solid #23272e;
  border-radius: 0.9cqw;
  padding: 0.9cqw;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.65);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.chooser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(68px, 8.2cqw), 1fr));
  gap: 0.75cqw;
  align-content: start;
}

/* 植物小卡（已選卡槽與下方卡池共用） */
.chooser-card {
  min-height: max(60px, 9.6cqw);
  padding: 0.4cqw 0.35cqw;
  border-radius: 0.7cqw;
  border: 2.5px solid #2b4d16;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.2), transparent 68%),
    linear-gradient(180deg, #74c441 0%, #4b9420 58%, #346e12 100%);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.55),
    inset 0 -2px 2px rgba(19, 46, 6, 0.65),
    0 3px 0 #1f470a,
    0 4px 8px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.2cqw;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.12s ease, transform 0.08s ease;
  touch-action: manipulation;
}

.chooser-slot-filled {
  flex: 1 1 0;
  max-width: 9.2cqw;
  min-width: max(56px, 6.8cqw);
}

.chooser-card:hover {
  filter: brightness(1.12);
}

.chooser-card:active {
  transform: translateY(2px);
}

.chooser-pool-card.is-selected {
  filter: grayscale(0.75) brightness(0.68);
  opacity: 0.62;
  cursor: default;
  transform: none;
}

.chooser-card-icon {
  width: max(30px, 4.3cqw);
  height: max(30px, 4.3cqw);
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}

.chooser-card-name {
  font-size: clamp(11px, 1.1cqw, 15px);
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chooser-card-cost {
  font-size: clamp(10px, 1.05cqw, 14px);
  color: #ffe863;
  background: rgba(0, 0, 0, 0.36);
  border-radius: 0.45cqw;
  padding: 0.08cqw 0.45cqw;
  line-height: 1.2;
}

.chooser-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4cqw;
  width: 100%;
  flex-shrink: 0;
}

.chooser-start-btn.disabled,
.chooser-start-btn:disabled {
  background: linear-gradient(180deg, #7a8088 0%, #52575e 55%, #3d4147 100%);
  border-color: #25282c;
  color: #b8bfc7;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.25),
    0 4px 0 #232629,
    0 5px 8px rgba(0, 0, 0, 0.5);
  cursor: not-allowed;
  filter: grayscale(0.35);
  transform: none;
}

/* 章節分頁 */
.chapter-tabs { margin-bottom: 6px; gap: 8px; }
.chapter-tab { min-width: 0; padding: 6px 16px; font-size: 18px; }