:root {
  font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
  color: #e5edf8;
  background: #09111f;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(20, 184, 166, 0.18), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(99, 102, 241, 0.2), transparent 28%),
    linear-gradient(135deg, #07111f, #111827 48%, #07121b);
}

.shell {
  width: min(1280px, calc(100vw - 20px));
  margin: 0 auto;
  padding: 0 0 16px;
}

.topbar {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 0;
}

.compact-topbar {
  align-items: center;
  min-height: min(156px, calc((100vw - 20px) * 0.121875));
}

.title-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: min(1280px, calc(100vw - 20px));
  height: min(156px, calc((100vw - 20px) * 0.121875));
  isolation: isolate;
  overflow: visible;
  clip-path: inset(-420px 0 -420px 0);
}

.title-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * min(34px, calc((100vw - 20px) * 0.0265625)));
  width: 100%;
  height: min(320px, calc((100vw - 20px) * 0.25));
  transform: translateX(-50%);
  background: url("./assets/ui/title/title_banner_bg.png?v=20260529-portal-both-fixed-v26") center bottom / 100% auto no-repeat;
  z-index: 0;
  pointer-events: none;
}

.title-runner {
  --runner-x: 0px;
  --runner-y: calc(min(18px, calc((100vw - 20px) * 0.0140625)) - min(22px, calc((100vw - 20px) * 0.0171875)));
  --runner-frame-x: 0;
  --runner-frame-y: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: min(191px, calc((100vw - 20px) * 0.14921875));
  height: min(154px, calc((100vw - 20px) * 0.1203125));
  transform: translate(var(--runner-x), var(--runner-y));
  background-image: url("./assets/ui/title/title_runner_walk.png?v=20260529-portal-both-fixed-v26");
  background-size: 600% 600%;
  background-position: calc(var(--runner-frame-x) * 20%) calc(var(--runner-frame-y) * 20%);
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 1;
}

.title-runner::after {
  content: "";
  position: absolute;
  left: 23%;
  bottom: 4%;
  width: 54%;
  height: 10%;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  filter: blur(4px);
  transform: translateY(18%);
  z-index: -1;
  pointer-events: none;
}

.title-runner.is-visible {
  opacity: 1;
}

.title-runner.is-action {
  background-image: url("./assets/ui/title/title_runner_action.png?v=20260529-portal-both-fixed-v26");
}

.game-title-logo {
  position: relative;
  z-index: 2;
  display: block;
  width: min(840px, calc((100vw - 20px) * 0.65625));
  height: min(173px, calc((100vw - 20px) * 0.13515625));
  object-fit: contain;
  transform: translateY(min(35px, calc((100vw - 20px) * 0.02734375)));
  filter: drop-shadow(0 min(10px, calc((100vw - 20px) * 0.0078125)) min(18px, calc((100vw - 20px) * 0.0140625)) rgba(0, 0, 0, 0.42));
}

h1 {
  margin: 0;
  font-size: clamp(22px, 2.7vw, 34px);
  line-height: 1;
  letter-spacing: 0.02em;
}

.help-button {
  position: absolute;
  left: calc(50% + min(200px, calc((100vw - 20px) * 0.15625)));
  top: min(34px, calc((100vw - 20px) * 0.0265625));
  right: auto;
  bottom: auto;
  width: min(45px, calc((100vw - 20px) * 0.03515625));
  height: min(45px, calc((100vw - 20px) * 0.03515625));
  padding: 0;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: url("./assets/ui/buttons/image037.png?v=20260529-portal-both-fixed-v26") center / contain no-repeat;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
  transform: translateX(-50%);
  animation: helpButtonFloat 1.8s ease-in-out infinite;
  z-index: 3;
}

.help-button:hover {
  transform: translateX(-50%);
  animation-play-state: running;
}

@keyframes helpButtonFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(calc(-1 * min(10px, calc((100vw - 20px) * 0.0078125)))); }
}

.help-dialog {
  width: min(520px, calc(100vw - 40px));
  border: 1px solid rgba(94, 234, 212, 0.35);
  border-radius: 20px;
  padding: 0;
  color: #e5edf8;
  background: rgba(8, 13, 25, 0.96);
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.58);
}

.help-dialog::backdrop {
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(3px);
}

.help-modal {
  position: relative;
  padding: 22px 24px 24px;
}

.help-modal h2 {
  margin-bottom: 12px;
  color: #67e8f9;
}

.help-modal p,
.help-modal li {
  color: #c8d5e6;
  line-height: 1.65;
}

.dialog-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  color: #dffcff;
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 18px;
}

code {
  padding: 2px 6px;
  border-radius: 7px;
  background: rgba(148, 163, 184, 0.16);
  color: #a7f3d0;
}

.game-card {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 24px;
  padding: 8px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(8, 13, 25, 0.82);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.44);
}

.battlefield {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 18px;
  background: #0f172a;
}

.level-select-panel {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(8, 13, 25, 0.22);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
  color: #dffcff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.level-select-panel span {
  color: #bae6fd;
  text-shadow: 0 1px 4px rgba(2, 6, 23, 0.8);
  white-space: nowrap;
}

.level-select-panel select {
  min-width: 72px;
  width: 86px;
  height: 28px;
  padding: 0 22px 0 8px;
  border-radius: 10px;
  border: 1px solid rgba(94, 234, 212, 0.30);
  color: #e0f2fe;
  background: rgba(15, 23, 42, 0.72);
  outline: none;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.level-select-panel select:hover,
.level-select-panel select:focus {
  border-color: rgba(103, 232, 249, 0.72);
  box-shadow: 0 0 0 2px rgba(103, 232, 249, 0.12);
}

.level-select-panel.is-hidden {
  display: none;
}

.hud {
  display: none;
}

.hud span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.hud b {
  color: #fde68a;
  font-size: 16px;
}

.command-deck {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 430px;
  gap: 0;
  align-items: stretch;
  justify-content: center;
  max-width: calc(100% - 320px);
  padding: 0;
  border-radius: 20px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: translateX(-50%);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.command-deck.is-hidden,
.command-deck.is-drag-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(14px);
}

.panel {
  position: relative;
  border-radius: 20px;
  width: 430px;
  min-height: 178px;
  padding: 18px 22px 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}

.panel::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.32));
  pointer-events: none;
}

.shop-panel {
  padding-left: 22px;
  padding-right: 22px;
  display: flex;
  flex-direction: column;
}

.shop-panel .shop {
  flex: 1;
}

.shop-panel::before {
  background-image: none;
}

.inventory-panel {
  padding-right: 20px;
}

.inventory-panel::before {
  background-image: none;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 14px 0 8px;
}

.shop-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

.inventory-actions {
  display: none;
}

.gold-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 98px;
  height: 27px;
  padding: 0 9px 0 55px;
  border-radius: 0;
  color: #fff7ed;
  background: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 2px 3px rgba(75, 35, 6, 0.9), 0 0 5px rgba(0, 0, 0, 0.55);
}

.coin-count {
  transform: translateY(1px);
}

.gold-badge b {
  color: #fde68a;
  font-size: 16px;
}

h2 {
  margin: 0;
  font-size: 18px;
  color: #f8fafc;
  text-shadow: 0 2px 4px rgba(40, 25, 12, 0.75), 0 0 8px rgba(15, 23, 42, 0.65);
}

button {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  color: #06111f;
  background: #5eead4;
  cursor: pointer;
}

button:hover { transform: translateY(-1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.game-art-button:disabled,
.deck-toggle:disabled,
.ghost:disabled,
.small-danger:disabled { transform: none; }

.ghost,
.small-danger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 141px;
  height: 57px;
  padding: 0 12px;
  color: #fff7ed;
  background: linear-gradient(180deg, rgba(244, 205, 126, 0.95), rgba(142, 85, 34, 0.95));
  border: 0;
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 2px 3px rgba(50, 24, 8, 0.85), 0 0 5px rgba(0, 0, 0, 0.52);
}

.action-label {
  line-height: 1;
}

.action-cost {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #fff2a6;
  line-height: 1;
}

.mini-coin {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, #fff7a8 0 12%, transparent 13%),
    radial-gradient(circle at 50% 52%, #ffd84d 0 42%, #f5a70a 62%, #b86603 100%);
  border: 1px solid rgba(112, 57, 0, 0.35);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.55), 0 1px 2px rgba(0,0,0,0.45);
}

.ghost:disabled,
.small-danger:disabled {
  opacity: 0.55;
}

.primary {
  width: 100%;
  background: linear-gradient(135deg, #34d399, #67e8f9);
  font-size: 17px;
}

.start-wave-float {
  position: absolute;
  right: -34px;
  bottom: 5px;
  width: 249px;
  height: 99px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  background-position: right center;
  box-shadow: none;
  z-index: 6;
  transform-origin: 50% 50%;
}

.danger {
  color: #fee2e2;
  background: transparent;
  border: 0;
}

.small-danger {
  width: 141px;
  height: 57px;
  padding: 0 12px;
  font-size: 15px;
}

.shop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 86px;
  gap: 9px;
  min-height: 86px;
  align-content: center;
  align-items: center;
}

.shop-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px auto;
  gap: 4px;
  justify-items: center;
  align-items: center;
  align-self: center;
  padding: 7px 6px;
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.34);
  border: 1px solid rgba(148, 163, 184, 0.14);
  cursor: pointer;
  min-height: 86px;
  text-align: center;
}

.shop-card:hover { border-color: rgba(94, 234, 212, 0.5); }

.shop-card.selected {
  border-color: rgba(250, 204, 21, 0.86);
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.22), 0 0 18px rgba(250, 204, 21, 0.25);
}

.shop-card-empty {
  cursor: default;
  opacity: 0.38;
  background: rgba(2, 6, 23, 0.18);
  border-style: dashed;
}

.shop-card-empty:hover {
  border-color: rgba(148, 163, 184, 0.14);
}

.icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-weight: 900;
  color: #06111f;
  user-select: none;
}

.tower-icon {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tower-color) 28%, transparent), transparent 58%),
    rgba(2, 6, 23, 0.32);
  border: 1px solid color-mix(in srgb, var(--tower-color) 42%, transparent);
}

.tower-icon img {
  display: block;
  max-width: 118%;
  max-height: 128%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.42));
  pointer-events: none;
}

.shop-icon {
  width: 48px;
  height: 48px;
}

.inventory-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

.inventory-icon img {
  max-width: 126%;
  max-height: 136%;
}

.shop-card h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.15;
}

.shop-card p {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  width: 230px;
  margin: 0;
  padding: 9px 10px;
  color: #e5edf8;
  font-size: 12px;
  line-height: 1.45;
  border-radius: 12px;
  border: 1px solid rgba(103, 232, 249, 0.34);
  background: rgba(2, 6, 23, 0.92);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.15s ease 1s, transform 0.15s ease 1s, visibility 0.15s ease 1s;
}

.shop-card:hover p,
.shop-card:focus-within p {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cost {
  color: #fde68a;
  font-weight: 900;
}

.inventory {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 7px;
  justify-content: stretch;
  align-items: start;
  padding-top: 6px;
}

.slot {
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  min-width: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.32);
  background: rgba(2, 6, 23, 0.45);
  cursor: grab;
  padding: 4px 0 0;
  color: inherit;
  touch-action: none;
}

.slot .tower-icon {
  transform: translateY(3px);
}
.slot:focus-visible {
  outline: 0;
}

.slot.selected {
  outline: 3px solid #5eead4;
  outline-offset: 2px;
}

.slot.drag-over,
.slot.drag-return-preview {
  outline: 3px solid #facc15;
  outline-offset: 2px;
  border-color: #facc15;
}

.slot.drag-return-preview {
  background: rgba(250, 204, 21, 0.16);
}

.slot.drag-return-preview .tower-icon {
  opacity: 0.62;
  filter: saturate(1.25) drop-shadow(0 0 10px rgba(250, 204, 21, 0.72));
}

canvas:focus,
canvas:focus-visible {
  outline: 0;
}

canvas.drag-over {
  outline: none;
  border-color: transparent;
}

.slot.locked {
  cursor: not-allowed;
  opacity: 0.72;
}

.slot .level {
  position: absolute;
  right: 4px;
  bottom: 3px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.message {
  min-height: 0;
  margin: 9px 0 0;
  color: #b9c8dc;
  line-height: 1.45;
  font-size: 13px;
}

.inventory-message {
  display: none;
}

body.dragging .slot,
body.dragging canvas {
  transition: outline-color 0.12s ease, border-color 0.12s ease;
}

@media (max-width: 1180px) {
  .topbar { flex-direction: column; }
  .command-deck {
    grid-template-columns: minmax(220px, 280px) minmax(320px, 1fr);
    max-width: calc(100% - 160px);
  }
}

@media (max-width: 760px) {
  .help-button { top: 12px; }
  .start-wave-float {
    right: 10px;
    bottom: 10px;
    min-width: 112px;
    padding: 9px 12px;
    font-size: 14px;
  }
  .command-deck {
    left: 50%;
    right: auto;
    bottom: 0;
    grid-template-columns: minmax(300px, 430px);
    max-width: calc(100% - 24px);
    transform: translateX(-50%);
  }
  .shop-panel {
    border-right: 0;
    border-bottom: 0;
    padding: 18px 22px 18px;
  }
  .shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.drag-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 280px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #ecfeff;
  background: rgba(6, 24, 44, 0.92);
  border: 1px solid rgba(94, 234, 212, 0.55);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
  font: 900 13px/1.35 "Microsoft YaHei", sans-serif;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0);
  transition: opacity 0.08s ease;
}

.drag-tooltip.is-bad {
  color: #fee2e2;
  border-color: rgba(248, 113, 113, 0.72);
  background: rgba(69, 10, 10, 0.92);
}

.drag-ghost {
  position: fixed;
  z-index: 2147483647;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.78;
  background: transparent !important;
  border: 0 !important;
  overflow: visible;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}

.drag-ghost img {
  max-width: 150%;
  max-height: 160%;
}

.drag-ghost .level {
  position: absolute;
  right: -2px;
  bottom: -2px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.shop-build-ghost {
  width: 62px;
  height: 62px;
  opacity: 0.58;
  z-index: 2147483647;
}

.shop-build-ghost img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: none;
  max-height: none;
}

.game-art-button {
  appearance: none;
  -webkit-appearance: none;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 0 !important;
  outline: 0;
  border-radius: 0;
  box-shadow: none !important;
  font-size: 0;
  line-height: 0;
  overflow: visible;
  mix-blend-mode: normal;
  transition: transform 0.12s ease, filter 0.12s ease;
  cursor: pointer;
}

.game-art-button:hover:not(:disabled) {
  filter: brightness(1.16) saturate(1.08) drop-shadow(0 0 10px rgba(255, 244, 179, 0.55)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.28));
}

.game-art-button:active:not(:disabled) {
  transform: scale(0.9);
  filter: brightness(0.96) drop-shadow(0 4px 7px rgba(0, 0, 0, 0.22));
}

.game-art-button.button-start:hover:not(:disabled),
.game-art-button.button-pause:hover:not(:disabled) {
  filter: brightness(1.16) saturate(1.08) drop-shadow(0 0 10px rgba(255, 244, 179, 0.55)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.28));
}

.game-art-button.button-start:active:not(:disabled),
.game-art-button.button-pause:active:not(:disabled) {
  transform: scale(0.9);
}

.button-next-wave {
  background-image: url('./assets/ui/buttons/button_start_battle_new.png?v=20260604-ruby-start-pause-v1');
}

.button-pause,
.button-start {
  background-size: contain;
}

.button-restart {
  background-image: url('./assets/ui/buttons/button_restart_level.png?v=20260601-fail-restart-old-v1');
}

.button-restart.is-quick-restart {
  background-image: url('./assets/ui/buttons/3.png?v=20260601-ui-icons-v1');
}

.button-pause {
  background-image: url('./assets/ui/buttons/button_pause_new.png?v=20260604-ruby-start-pause-v1');
}

.button-start {
  background-image: url('./assets/ui/buttons/button_start_battle_new.png?v=20260604-ruby-start-pause-v1');
}

.restart-float {
  position: absolute;
  right: 50%;
  top: calc(50% + 74px);
  transform: translateX(50%);
  transform-origin: 50% 50%;
  width: 276px;
  height: 106px;
  min-height: 0;
  padding: 0;
  font-size: 0;
  z-index: 8;
  box-shadow: none;
}

.restart-float:hover:not(:disabled) {
  transform: translateX(50%);
  filter: brightness(1.16) saturate(1.08) drop-shadow(0 0 10px rgba(255, 244, 179, 0.55)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.28));
}

.restart-float:active:not(:disabled) {
  transform: translateX(50%) scale(0.9);
}

.restart-float.is-quick-restart {
  right: 94px;
  top: 10px;
  bottom: auto;
  transform: none;
  width: 44px;
  height: 44px;
  z-index: 20;
}

.restart-float.is-quick-restart:hover:not(:disabled) {
  transform: scale(1.05);
}

.restart-float.is-quick-restart:active:not(:disabled) {
  transform: scale(0.9);
}

body.is-fullscreen .restart-float.is-quick-restart {
  top: max(8px, env(safe-area-inset-top));
  right: calc(max(8px, env(safe-area-inset-right)) + 84px);
}

.deck-toggle,
.deck-expand,
.deck-collapse {
  display: none !important;
}

.deck-toggle:hover {
  filter: brightness(1.12) drop-shadow(0 0 8px rgba(255, 244, 179, 0.4));
  transform: none;
}

.deck-toggle:active {
  transform: scale(0.94);
}

.deck-collapse {
  right: -42px;
  top: 50%;
  transform: translateY(-50%);
}

.deck-collapse:hover {
  transform: translateY(-50%);
}

.deck-collapse:active {
  transform: translateY(-50%) scale(0.94);
}

.deck-expand {
  left: 0;
  bottom: 64px;
  width: 50px;
  height: 86px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(244, 205, 126, 0.95), rgba(142, 85, 34, 0.95));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(0);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

.battlefield.deck-collapsed .deck-expand {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.command-deck.is-collapsed {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%);
}

.command-deck.is-collapsed.is-hidden,
.command-deck.is-collapsed.is-drag-hidden {
  transform: translateX(-50%) translateY(14px);
}




/* 20260602: app-frame unified stage - 1280x876 windowed, 1280x720 fullscreen */
:root {
  --logic-w: 1280;
  --title-h: 156;
  --game-h: 720;
}

body {
  overflow: hidden;
}

.shell {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.app-frame {
  position: relative;
  width: min(100vw, calc(100vh * 1280 / 876));
  height: min(100vh, calc(100vw * 876 / 1280));
  width: min(100vw, calc(100dvh * 1280 / 876));
  height: min(100dvh, calc(100vw * 876 / 1280));
  display: grid;
  grid-template-rows: calc(100% * 156 / 876) 1fr;
  overflow: visible;
}

.topbar,
.compact-topbar,
.title-wrap {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  clip-path: none !important;
}

.title-wrap::before {
  left: 50% !important;
  bottom: calc(-100% * 34 / 156) !important;
  width: 100% !important;
  height: calc(100% * 320 / 156) !important;
  transform: translateX(-50%) !important;
  background-size: 100% auto !important;
}

.title-runner {
  width: calc(100% * 191 / 1280) !important;
  height: calc(100% * 154 / 156) !important;
  top: 0 !important;
  --runner-y: calc(-100% * 8 / 156) !important;
}

.game-title-logo {
  width: calc(100% * 840 / 1280) !important;
  height: calc(100% * 173 / 156) !important;
  transform: translateY(calc(100% * 35 / 156)) !important;
}

.help-button {
  left: calc(50% + (100% * 200 / 1280)) !important;
  top: calc(100% * 46 / 156) !important;
  width: calc(100% * 45 / 1280) !important;
  height: calc(100% * 45 / 156) !important;
}

.game-card {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.battlefield {
  --stage-scale: 1;
  --ui-bottom: 6px;
  --ui-edge: 12px;
  position: relative;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 9;
  border-radius: 0 !important;
  overflow: hidden;
}

canvas {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}

body.is-fullscreen,
body.is-mobile-game-fullscreen {
  background: #050b16;
}

body.is-fullscreen .app-frame,
body.is-mobile-game-fullscreen .app-frame {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));
  grid-template-rows: 1fr;
}

body.is-fullscreen .topbar,
body.is-fullscreen .compact-topbar,
body.is-mobile-game-fullscreen .topbar,
body.is-mobile-game-fullscreen .compact-topbar {
  display: none !important;
}

.fullscreen-button {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 40;
  width: 31px;
  height: 31px;
  display: block;
  padding: 0;
  border: 0;
  color: transparent;
  background: url('./assets/ui/buttons/1.png?v=20260601-ui-icons-v1') center / contain no-repeat;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  touch-action: none;
}
body.is-fullscreen .fullscreen-button,
body.is-mobile-game-fullscreen .fullscreen-button {
  background-image: url('./assets/ui/buttons/2.png?v=20260601-ui-icons-v1');
}
.fullscreen-button:hover { transform: scale(1.05); filter: brightness(1.12); }
.fullscreen-button:active { transform: scale(0.92); }

.restart-float.is-quick-restart {
  position: absolute;
  right: 45px;
  top: 10px;
  bottom: auto;
  width: 31px;
  height: 31px;
  padding: 0;
  transform: none;
  z-index: 39;
  background-image: url('./assets/ui/buttons/3.png?v=20260601-ui-icons-v1');
}
.restart-float.is-quick-restart:hover:not(:disabled) { transform: scale(1.05); }
.restart-float.is-quick-restart:active:not(:disabled) { transform: scale(0.9); }

.level-select-panel {
  left: 10px !important;
  right: auto !important;
  top: 10px !important;
}
.level-select-panel.is-hidden { display: none; }

.command-deck {
  position: absolute;
  left: 50% !important;
  bottom: var(--ui-bottom) !important;
  z-index: 4;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: 430px !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateX(-50%) scale(var(--stage-scale)) !important;
  transform-origin: 50% 100% !important;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.command-deck.is-hidden,
.command-deck.is-drag-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.command-deck .shop-strip,
.command-deck .shop-card { pointer-events: auto; }

.shop-strip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: auto;
  padding: 0 30px 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.shop-strip::before {
  content: "";
  position: absolute;
  left: -119px;
  right: -119px;
  bottom: -25px;
  top: -24px;
  z-index: -1;
  display: block;
  background: transparent;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.32));
}
.shop-strip .shop {
  display: flex !important;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  min-height: 72px;
  transform: translateY(6px);
}
.shop-strip .shop-card {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 96px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: center;
  overflow: visible;
  touch-action: none;
  user-select: none;
}
.shop-strip .shop-card:hover { transform: translateY(-3px); }
.shop-strip .shop-card.selected { filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.55)); }
.shop-strip .shop-card-empty { display: none; }
.shop-strip .shop-icon {
  width: 64px;
  height: 64px;
  margin-top: 23px;
  border-radius: 14px;
  background: url("./assets/ui/panels/shop_icon_panel.png?v=20260604-shop-icon-panel") center / contain no-repeat;
  border-color: transparent;
}
.shop-strip .shop-icon img {
  width: 94%;
  height: 94%;
  object-fit: contain;
}
.shop-strip .shop-card h3 { display: none; }
.shop-strip .shop-item-label {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 72px;
  color: #fff7ed;
  font: 900 12px/1 "Microsoft YaHei", sans-serif;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92);
}
.shop-message { display: none !important; }

.gold-hud {
  position: absolute;
  left: var(--ui-edge);
  bottom: var(--ui-bottom);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 286px;
  min-width: 286px;
  height: 137px;
  padding: 12px 29px 12px 52px;
  color: #fff7ed;
  background: transparent;
  font: 900 22px/1 "Microsoft YaHei", sans-serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.38));
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  transform: scale(calc(var(--stage-scale) * 0.86));
  transform-origin: 0 100%;
}
.shop-strip .mini-coin,
.tower-action-menu .mini-coin,
.gold-hud .coin-icon {
  display: inline-block;
  background: url("./assets/ui/panels/coin_icon.png") center / contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.shop-strip .mini-coin,
.tower-action-menu .mini-coin {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
}
.gold-hud .coin-icon {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
}
.gold-hud .coin-times { opacity: 0.92; }

.start-wave-float {
  position: absolute;
  /* 20260605: 右侧开战按钮按底部整体 UI 背板圆形槽位对齐。 */
  right: var(--ui-edge) !important;
  bottom: calc(var(--ui-bottom) + 14px) !important;
  width: calc(249px * var(--stage-scale) * 0.98) !important;
  height: calc(99px * var(--stage-scale) * 0.98) !important;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  box-shadow: none;
  z-index: 6;
  transform: none !important;
  transform-origin: 50% 50% !important;
  clip-path: none;
  overflow: visible;
}
.start-wave-float:hover:not(:disabled) { transform: scale(1.05) !important; }
.start-wave-float:active:not(:disabled) { transform: scale(0.9) !important; }

.tower-action-menu {
  position: absolute;
  z-index: 12;
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-items: center;
  row-gap: 1.3px;
  width: 187px;
  height: 230px;
  padding: 47px 16px 45px 28px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.42));
  overflow: visible;
  transform-origin: left center;
}
.tower-action-menu::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 179px;
  height: 108px;
  z-index: -1;
  background: url("./assets/ui/panels/tower_action_menu_panel.png?v=20260605-action-panel-ratio-fresh") center / contain no-repeat;
  transform: translate(-50%, -50%) rotate(90deg) scale(1.25);
  transform-origin: center center;
  pointer-events: none;
}
.tower-action-menu:not([hidden]) {
  animation: towerActionMenuPop 0.22s cubic-bezier(0.18, 1.08, 0.32, 1) both;
}
@keyframes towerActionMenuPop {
  0% {
    opacity: 0;
    transform: translateX(calc(-7px * var(--stage-scale))) scaleX(0.26) scaleY(0.88);
  }
  58% {
    opacity: 1;
    transform: translateX(calc(1px * var(--stage-scale))) scaleX(1.025) scaleY(1.005);
  }
  78% {
    transform: translateX(0) scaleX(0.96) scaleY(1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.tower-action-menu[hidden] { display: none; }
.tower-menu-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  width: 94px;
  height: 47px;
  padding: 0 11px 0 43px;
  border: 0;
  border-radius: 10px;
  color: #fff7ed;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  font: 900 17px/1 "Microsoft YaHei", sans-serif;
  white-space: nowrap;
  flex-wrap: nowrap;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.92), 0 4px 5px rgba(0, 0, 0, 0.72);
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.58));
  overflow: visible;
}
.tower-menu-btn.sell {
  background-image: url("./assets/ui/buttons/button_tower_sell.png?v=20260605-tower-sell");
}
.tower-menu-btn.upgrade {
  background-image: url("./assets/ui/buttons/button_tower_upgrade.png?v=20260605-tower-upgrade");
}
.tower-menu-btn .mini-coin {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
}
.tower-menu-price {
  display: inline-block;
  min-width: 15px;
  text-align: left;
}
.tower-menu-btn:hover:not(:disabled) { transform: scale(1); }
.tower-menu-btn:active:not(:disabled) { transform: scale(0.92); }
.tower-menu-btn:disabled { opacity: 0.48; cursor: not-allowed; }

.shop-cancel-zone {
  position: absolute;
  left: 50%;
  bottom: calc(15px * var(--stage-scale));
  z-index: 18;
  width: min(672px, calc(100% - 180px));
  height: 73px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(250, 230, 138, 0.34);
  border-radius: 18px 18px 0 0;
  color: rgba(255, 236, 154, 0.72);
  background: rgba(250, 204, 21, 0.075);
  box-shadow: inset 0 0 18px rgba(250, 204, 21, 0.055), 0 -5px 16px rgba(0, 0, 0, 0.12);
  font: 900 20px/1 "Microsoft YaHei", sans-serif;
  text-shadow: 0 2px 4px rgba(96, 55, 0, 0.52), 0 4px 10px rgba(0, 0, 0, 0.62);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(24px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}
.shop-cancel-zone.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.shop-cancel-zone.is-over {
  color: rgba(94, 234, 212, 0.58);
  border-color: rgba(94, 234, 212, 0.50);
  background: rgba(20, 184, 166, 0.10);
}

.rotate-tip { display: none; }
button, canvas, .battlefield, .shop-card, .gold-hud, .tower-action-menu, .game-card {
  -webkit-tap-highlight-color: transparent;
}

@media (pointer: coarse) {
  html, body {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }
  body { position: fixed; inset: 0; }
  .shell, .battlefield, canvas, .shop-card, .gold-hud, .tower-menu-btn,
  .start-wave-float, .restart-float, .help-button, .level-select-panel, .help-dialog {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
}

@media (pointer: coarse) and (orientation: portrait) {
  .rotate-tip {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 99999;
    place-items: center;
    padding: 24px;
    color: #fff7ed;
    background: radial-gradient(circle at 50% 35%, rgba(45, 74, 122, 0.96), rgba(5, 12, 24, 0.98));
    font: 900 22px/1.45 "Microsoft YaHei", sans-serif;
    text-align: center;
    letter-spacing: 0.08em;
  }
}


/* 20260602: use real visualViewport size for app-frame, avoids Android/iOS browser bar half-screen bugs */
:root {
  --app-vw: 100vw;
  --app-vh: 100vh;
}

.shell {
  width: var(--app-vw) !important;
  height: var(--app-vh) !important;
}

.app-frame {
  width: min(var(--app-vw), calc(var(--app-vh) * 1280 / 876)) !important;
  height: min(var(--app-vh), calc(var(--app-vw) * 876 / 1280)) !important;
  grid-template-rows: calc(100% * 156 / 876) calc(100% * 720 / 876) !important;
  align-self: center !important;
  justify-self: center !important;
}

body.is-fullscreen .app-frame,
body.is-mobile-game-fullscreen .app-frame {
  width: min(var(--app-vw), calc(var(--app-vh) * 16 / 9)) !important;
  height: min(var(--app-vh), calc(var(--app-vw) * 9 / 16)) !important;
  grid-template-rows: 1fr !important;
}

/* keep title contents in one 1280x156 logic banner, crop only horizontal overflow without scrollbars */
.topbar,
.compact-topbar,
.title-wrap {
  overflow: visible !important;
  clip-path: inset(-260px 0 -260px 0) !important;
}
.title-wrap {
  transform: translateY(calc(-100% * 4 / 156));
}
.title-wrap::before {
  bottom: calc(-100% * 2 / 156) !important;
}
.game-title-logo {
  transform: translateY(calc(100% * 8 / 156)) !important;
}
.title-runner {
  --runner-y: calc(-100% * 28 / 156) !important;
}

@media (pointer: coarse) and (orientation: landscape) {
  .title-wrap {
    transform: translateY(calc(100% * 2 / 156));
  }
  .title-wrap::before {
    bottom: calc(-100% * 8 / 156) !important;
  }
  .title-runner {
    --runner-y: calc(-100% * 22 / 156) !important;
  }
  .battlefield {
    --ui-bottom: 2px;
  }
  .start-wave-float {
    bottom: calc(var(--ui-bottom) + 6px) !important;
  }
}

/* 战斗系统重构：商店/升级金币状态提示 */
.shop-card.cant-afford {
  filter: none;
  opacity: 1;
}
.shop-card.cant-afford .shop-item-cost,
.shop-card.cant-afford .shop-item-name {
  color: #e88f8f;
  text-shadow: 0 calc(2px * var(--stage-scale)) calc(2px * var(--stage-scale)) rgba(102, 27, 27, 0.86),
               0 calc(4px * var(--stage-scale)) calc(6px * var(--stage-scale)) rgba(0, 0, 0, 0.68);
}
.command-deck.is-locked .shop-card {
  cursor: default;
}
.command-deck.is-locked .shop-card:hover .shop-icon img,
.command-deck.is-locked .shop-card:active .shop-icon img,
.command-deck.is-locked .shop-card.info-active .shop-icon img {
  transform: translateX(-50%) !important;
}
.tower-menu-btn.upgrade.can-upgrade {
  color: #dcfce7;
  text-shadow: 0 1px 2px rgba(20, 83, 45, 0.9);
}
.tower-menu-btn.upgrade.cant-upgrade {
  color: #fecaca;
  text-shadow: 0 1px 2px rgba(127, 29, 29, 0.9);
}

/* 战斗倍速与波次结算面板 */
.battle-speed-button {
  position: absolute;
  left: 50%;
  top: calc(28px * var(--stage-scale));
  z-index: 40;
  width: calc(130px * var(--stage-scale));
  height: calc(46px * var(--stage-scale));
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: url("./assets/ui/buttons/button_speed_x1.png?v=20260605-speed-buttons-new") center / contain no-repeat;
  filter: drop-shadow(0 calc(9px * var(--stage-scale)) calc(13px * var(--stage-scale)) rgba(245, 158, 11, 0.48));
  transform: translateX(-50%) scale(0.95);
  transform-origin: center;
  font-size: 0;
  color: transparent;
  overflow: visible;
  pointer-events: auto;
  display: block;
}
.battle-speed-button.is-x2 {
  background-image: url("./assets/ui/buttons/button_speed_x2.png?v=20260605-speed-buttons-new");
  filter: drop-shadow(0 calc(9px * var(--stage-scale)) calc(13px * var(--stage-scale)) rgba(196, 181, 253, 0.58));
}
.battle-speed-button:hover { transform: translateX(-50%) scale(1); }
.battle-speed-button:active { transform: translateX(-50%) scale(0.92); }
.battle-speed-button.is-test-speed {
  filter: drop-shadow(0 0 min(14px, calc(var(--stage-unit) * 14)) rgba(168, 85, 247, 0.56));
}
.wave-settle-panel {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  pointer-events: auto;
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(3px);
}
.wave-settle-panel[hidden] { display: none; }
.wave-settle-panel:not([hidden]) .wave-settle-card {
  transform-origin: center center;
  will-change: transform, opacity;
  animation: waveSettlePop 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes waveSettlePop {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(24px * var(--stage-scale)), 0) scale(0.62);
  }
  38% {
    opacity: 1;
    transform: translate3d(0, calc(-7px * var(--stage-scale)), 0) scale(1.075);
  }
  58% {
    transform: translate3d(0, calc(3px * var(--stage-scale)), 0) scale(0.985);
  }
  76% {
    transform: translate3d(0, calc(-2px * var(--stage-scale)), 0) scale(1.018);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
.wave-settle-card {
  width: min(calc(447px * var(--stage-scale)), 49.9%);
  aspect-ratio: 3 / 4;
  padding: min(calc(142px * var(--stage-scale)), 12.8%) min(calc(86px * var(--stage-scale)), 8.2%) min(calc(74px * var(--stage-scale)), 7.2%);
  border: 0;
  border-radius: 0;
  background: url("./assets/ui/panels/battle_settlement_panel.png?v=20260605-battle-settle-panel-png") center / contain no-repeat;
  box-shadow: none;
  color: #f8fafc;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  filter: drop-shadow(0 calc(16px * var(--stage-scale)) calc(28px * var(--stage-scale)) rgba(0,0,0,0.42));
}
.wave-settle-title {
  display: none;
}
.wave-settle-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  min-height: 0;
  padding: min(calc(4px * var(--stage-scale)), 4px) 0 min(calc(8px * var(--stage-scale)), 8px);
}

.settle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: min(calc(7px * var(--stage-scale)), 7px);
  padding: 5px 0;
  font-size: min(calc(17px * var(--stage-scale)), 17px);
  line-height: 1.22;
  color: #ffec9f;
  text-shadow: 0 1px 0 rgba(111, 58, 7, 1), 0 -1px 0 rgba(255,255,255,0.24), 0 3px 1px rgba(0,0,0,1), 0 0 3px rgba(0,0,0,0.96);
}
.settle-row strong {
  color: #ffe16f;
  text-shadow: 0 1px 0 rgba(111, 58, 7, 1), 0 -1px 0 rgba(255,255,255,0.24), 0 3px 1px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,0.98);
}
.settle-row.total {
  margin-top: 5px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,0.22);
  font-size: min(calc(18px * var(--stage-scale)), 18px);
  font-weight: 900;
}
.settle-tip {
  display: none;
}
.wave-settle-close {
  display: block;
  margin: 6px auto min(calc(18px * var(--stage-scale)), 18px);
  width: min(calc(171px * var(--stage-scale)), 171px);
  height: min(calc(73px * var(--stage-scale)), 73px);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: url("./assets/ui/buttons/button_settlement_confirm.png?v=20260605-confirm-button") center / contain no-repeat;
  color: transparent;
  font-size: 0;
  transform: scale(0.95);
  transform-origin: center;
  box-shadow: none;
  filter: drop-shadow(0 min(calc(6px * var(--stage-scale)), 6px) min(calc(5px * var(--stage-scale)), 5px) rgba(0,0,0,0.62)) drop-shadow(0 min(calc(13px * var(--stage-scale)), 13px) min(calc(12px * var(--stage-scale)), 12px) rgba(0,0,0,0.38));
}
.wave-settle-close:hover { transform: scale(1); }
.wave-settle-close:active { transform: scale(0.92); }


/* 20260604: 底部整体 UI 容器，金币/商店/开始按钮统一跟随同一背景板缩放 */
.bottom-unified-ui {
  position: absolute;
  left: 50%;
  bottom: var(--ui-bottom);
  z-index: 7;
  width: calc(1219px * var(--stage-scale));
  height: calc(187px * var(--stage-scale));
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  background: url("./assets/ui/panels/bottom_unified_panel.png?v=20260604-unified-bottom-ui") center / 100% 100% no-repeat;
  filter: drop-shadow(0 calc(10px * var(--stage-scale)) calc(18px * var(--stage-scale)) rgba(0, 0, 0, 0.36));
  pointer-events: none;
  overflow: visible;
}
.bottom-unified-ui .command-deck {
  left: 50% !important;
  bottom: calc(15px * var(--stage-scale)) !important;
  width: 66% !important;
  height: calc(133px * var(--stage-scale)) !important;
  transform: translateX(-50%) !important;
  transform-origin: 50% 100% !important;
  z-index: 2;
  opacity: 1;
  visibility: visible;
}
.bottom-unified-ui .command-deck.is-drag-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.bottom-unified-ui .shop-strip {
  width: 100%;
  height: 100%;
  padding: 0 !important;
}
.bottom-unified-ui .shop-strip::before {
  display: none !important;
}
.bottom-unified-ui .shop-strip .shop {
  width: 100%;
  min-height: 0;
  height: 100%;
  justify-content: space-evenly;
  align-items: flex-end;
  gap: 0;
  transform: none !important;
}
.bottom-unified-ui .shop-strip .shop-card {
  width: calc(110px * var(--stage-scale));
  height: calc(142px * var(--stage-scale));
  overflow: visible;
  pointer-events: none;
}
.bottom-unified-ui .shop-strip .shop-icon {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: calc(8px * var(--stage-scale));
  width: calc(99px * var(--stage-scale));
  height: calc(99px * var(--stage-scale));
  margin-top: 0;
  transform: translateX(-50%);
  border-radius: calc(14px * var(--stage-scale));
  overflow: visible;
}
.bottom-unified-ui .shop-strip .shop-icon img {
  position: absolute;
  left: 50%;
  bottom: calc(16px * var(--stage-scale));
  width: 86%;
  height: 86%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  z-index: 2;
  filter: drop-shadow(0 calc(5px * var(--stage-scale)) calc(5px * var(--stage-scale)) rgba(0, 0, 0, 0.42));
}
.bottom-unified-ui .shop-strip .shop-item-label {
  bottom: calc(15px * var(--stage-scale));
  min-width: calc(106px * var(--stage-scale));
  gap: calc(5px * var(--stage-scale));
  font-size: calc(17px * var(--stage-scale));
  z-index: 3;
  filter: drop-shadow(0 calc(4px * var(--stage-scale)) calc(4px * var(--stage-scale)) rgba(0, 0, 0, 0.72));
}
.bottom-unified-ui .shop-strip .mini-coin {
  width: calc(20px * var(--stage-scale)) !important;
  height: calc(20px * var(--stage-scale)) !important;
  flex-basis: calc(20px * var(--stage-scale)) !important;
  filter: drop-shadow(0 calc(3px * var(--stage-scale)) calc(3px * var(--stage-scale)) rgba(0, 0, 0, 0.65));
}
.bottom-unified-ui .gold-hud {
  left: calc((var(--gold-cx, 78px) - var(--gold-icon, 106px) / 2) * var(--stage-scale)) !important;
  bottom: calc((var(--gold-cy, 94px) - var(--gold-icon, 106px) / 2) * var(--stage-scale)) !important;
  width: calc(var(--gold-icon, 106px) * var(--stage-scale)) !important;
  min-width: 0 !important;
  height: calc(var(--gold-icon, 106px) * var(--stage-scale)) !important;
  padding: 0 !important;
  gap: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: transparent !important;
  filter: none !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
  z-index: 3;
  font-size: calc(18px * var(--stage-scale));
}
.bottom-unified-ui .gold-hud .coin-icon {
  width: calc(var(--gold-icon, 106px) * var(--stage-scale)) !important;
  height: calc(var(--gold-icon, 106px) * var(--stage-scale)) !important;
  flex-basis: calc(var(--gold-icon, 106px) * var(--stage-scale)) !important;
  filter: drop-shadow(0 calc(7px * var(--stage-scale)) calc(8px * var(--stage-scale)) rgba(0, 0, 0, 0.58));
}
.bottom-unified-ui .start-wave-float {
  right: calc((var(--start-cx, 98px) - var(--start-size, 138px) / 2) * var(--stage-scale)) !important;
  bottom: calc((var(--start-cy, 90px) - var(--start-size, 138px) / 2) * var(--stage-scale)) !important;
  width: calc(var(--start-size, 138px) * var(--stage-scale)) !important;
  height: calc(var(--start-size, 138px) * var(--stage-scale)) !important;
  z-index: 3;
  transform: scale(0.988) !important;
  transform-origin: 50% 50% !important;
}
.bottom-unified-ui .start-wave-float:hover:not(:disabled) { transform: scale(1) !important; }
.bottom-unified-ui .start-wave-float:active:not(:disabled) { transform: scale(0.92) !important; }
body.is-fullscreen .bottom-unified-ui .start-wave-float { bottom: calc((var(--start-cy, 90px) - var(--start-size, 138px) / 2) * var(--stage-scale)) !important; }
body.ui-anchor-debug .bottom-unified-ui .gold-hud,
body.ui-anchor-debug .bottom-unified-ui .start-wave-float {
  outline: calc(1px * var(--stage-scale)) dashed rgba(250, 204, 21, 0.82);
  outline-offset: calc(2px * var(--stage-scale));
}
.bottom-unified-ui:has(.command-deck.is-drag-hidden) {
  pointer-events: none;
}
.bottom-unified-ui .gold-hud,
.bottom-unified-ui .shop-card,
.bottom-unified-ui .start-wave-float {
  pointer-events: auto;
}
@media (pointer: coarse) and (orientation: landscape) {
  .bottom-unified-ui {
    bottom: calc(var(--ui-bottom) + 6px);
  }
}


/* 20260604: 商店道具悬浮/点击只让建筑自身动画，属性固定面板 */
.shop-card p,
.shop-card:hover p,
.shop-card:focus-within p {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.bottom-unified-ui .shop-strip .shop-card:hover {
  transform: none !important;
}
.bottom-unified-ui .shop-strip .shop-icon {
  filter: drop-shadow(0 calc(7px * var(--stage-scale)) calc(7px * var(--stage-scale)) rgba(0, 0, 0, 0.58));
}
.bottom-unified-ui .shop-strip .shop-icon img {
  transform-origin: 50% 65%;
  transition: transform 0.14s ease, filter 0.14s ease;
  filter: drop-shadow(0 calc(8px * var(--stage-scale)) calc(7px * var(--stage-scale)) rgba(0, 0, 0, 0.68));
}
.bottom-unified-ui .shop-strip .shop-card:hover .shop-icon img,
.bottom-unified-ui .shop-strip .shop-card:active .shop-icon img,
.bottom-unified-ui .shop-strip .shop-card.info-active .shop-icon img {
  transform: translateX(-50%) scale(1.25);
  filter: drop-shadow(0 calc(10px * var(--stage-scale)) calc(9px * var(--stage-scale)) rgba(0, 0, 0, 0.76));
}
.bottom-unified-ui .shop-strip .shop-item-label {
  text-shadow: 0 calc(2px * var(--stage-scale)) calc(2px * var(--stage-scale)) rgba(0, 0, 0, 0.95),
               0 calc(5px * var(--stage-scale)) calc(7px * var(--stage-scale)) rgba(0, 0, 0, 0.82);
  filter: drop-shadow(0 calc(6px * var(--stage-scale)) calc(5px * var(--stage-scale)) rgba(0, 0, 0, 0.82));
}
.bottom-unified-ui .shop-strip .mini-coin {
  filter: drop-shadow(0 calc(5px * var(--stage-scale)) calc(4px * var(--stage-scale)) rgba(0, 0, 0, 0.78)) !important;
}
.shop-info-panel {
  --panel-w: calc(464px * var(--stage-scale));
  --panel-h: calc(307px * var(--stage-scale));
  --inner-left: calc(78px * var(--stage-scale));
  --inner-top: calc(42px * var(--stage-scale));
  --inner-right: calc(52px * var(--stage-scale));
  --inner-bottom: calc(64px * var(--stage-scale));
  position: absolute;
  left: 50%;
  bottom: calc(var(--ui-bottom) + calc(187px * var(--stage-scale)) - calc(44px * var(--stage-scale)));
  z-index: 13;
  width: var(--panel-w);
  height: var(--panel-h);
  min-height: 0;
  padding: 0;
  border-radius: calc(18px * var(--stage-scale));
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  color: #fff7ed;
  background: url("./assets/ui/panels/tower_action_menu_panel.png?v=20260605-shop-info-panel-canvas-layout") center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 calc(14px * var(--stage-scale)) calc(22px * var(--stage-scale)) rgba(0, 0, 0, 0.48));
  pointer-events: auto;
  box-sizing: border-box;
  overflow: visible;
}
.shop-info-panel:not([hidden]) {
  animation: shopInfoPanelPop 0.22s cubic-bezier(0.18, 1.08, 0.32, 1) both;
}
@keyframes shopInfoPanelPop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(12px * var(--stage-scale))) scaleX(0.82) scaleY(0.18);
  }
  58% {
    opacity: 1;
    transform: translateX(-50%) translateY(calc(-1px * var(--stage-scale))) scaleX(1.01) scaleY(1.035);
  }
  78% {
    transform: translateX(-50%) translateY(0) scaleX(1) scaleY(0.97);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
.shop-info-panel[hidden] { display: none !important; }
.shop-info-head {
  display: contents;
}
.shop-info-icon {
  position: absolute;
  left: var(--inner-left);
  top: calc(var(--inner-top) - calc(2px * var(--stage-scale)));
  width: calc(104px * var(--stage-scale));
  height: calc(104px * var(--stage-scale));
  background: url("./assets/ui/panels/shop_icon_panel.png?v=20260604-shop-info-icon") center / contain no-repeat;
  overflow: visible;
}
.shop-info-icon img {
  position: absolute;
  left: 50%;
  bottom: calc(14px * var(--stage-scale));
  width: 82%;
  height: 82%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  filter: drop-shadow(0 calc(6px * var(--stage-scale)) calc(6px * var(--stage-scale)) rgba(0, 0, 0, 0.58));
}
.shop-info-head > div:last-child {
  position: absolute;
  left: calc(var(--inner-left) + calc(124px * var(--stage-scale)));
  top: calc(var(--inner-top) - calc(4px * var(--stage-scale)));
  right: var(--inner-right);
  min-width: 0;
}
.shop-info-title-row {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--stage-scale));
  min-width: 0;
  white-space: nowrap;
}
.shop-info-panel h3 {
  margin: 0;
  font-size: calc(27px * var(--stage-scale));
  line-height: 1;
  color: #ffe08a;
  text-shadow: 0 calc(2px * var(--stage-scale)) calc(2px * var(--stage-scale)) rgba(0, 0, 0, 0.92), 0 calc(4px * var(--stage-scale)) calc(5px * var(--stage-scale)) rgba(0, 0, 0, 0.72);
}
.shop-info-cost {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: calc(5px * var(--stage-scale));
  font-size: calc(19px * var(--stage-scale));
  font-weight: 900;
}
.shop-info-cost .mini-coin {
  display: inline-block;
  width: calc(19px * var(--stage-scale));
  height: calc(19px * var(--stage-scale));
  background: url("./assets/ui/panels/coin_icon.png") center / contain no-repeat;
}
.shop-info-panel p {
  position: absolute;
  left: calc(var(--inner-left) + calc(124px * var(--stage-scale)));
  top: calc(var(--inner-top) + calc(42px * var(--stage-scale)));
  right: calc(var(--inner-right) + calc(6px * var(--stage-scale)));
  height: calc(54px * var(--stage-scale));
  margin: 0;
  color: #fff1c7;
  font-size: calc(15px * var(--stage-scale));
  line-height: 1.26;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  max-width: none;
  text-shadow: 0 calc(2px * var(--stage-scale)) calc(2px * var(--stage-scale)) rgba(0, 0, 0, 0.98), 0 calc(4px * var(--stage-scale)) calc(4px * var(--stage-scale)) rgba(0, 0, 0, 0.86);
}
.shop-info-stats {
  position: absolute;
  left: var(--inner-left);
  right: var(--inner-right);
  bottom: var(--inner-bottom);
  height: calc(90px * var(--stage-scale));
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: calc(2px * var(--stage-scale));
  min-width: 0;
  overflow: hidden;
}
.shop-info-stat {
  display: grid;
  grid-template-columns: calc(44px * var(--stage-scale)) minmax(0, 1fr);
  gap: calc(10px * var(--stage-scale));
  align-items: center;
  color: #e7f6ff;
  font-size: calc(13.5px * var(--stage-scale));
  line-height: 1.12;
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
  overflow: hidden;
  text-shadow: 0 calc(2px * var(--stage-scale)) calc(2px * var(--stage-scale)) rgba(0, 0, 0, 0.96), 0 calc(4px * var(--stage-scale)) calc(4px * var(--stage-scale)) rgba(0, 0, 0, 0.84);
}
.shop-info-stat b {
  color: #fef3c7;
  min-width: 0;
}


/* 20260604: 隐藏测试面板中的 X6 独立开关 */
.level-select-panel {
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}
.level-select-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.speed-test-button {
  width: 100%;
  height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(216, 180, 254, 0.42);
  color: #fde68a;
  background: linear-gradient(180deg, rgba(61, 45, 20, 0.90), rgba(18, 24, 38, 0.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 12px rgba(0,0,0,0.22);
  font: 900 12px/1 "Microsoft YaHei", sans-serif;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.speed-test-button:hover:not(:disabled) { transform: scale(1.03); }
.speed-test-button:active:not(:disabled) { transform: scale(0.92); }
.speed-test-button.is-active {
  color: #f0abfc;
  border-color: rgba(216, 180, 254, 0.82);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.44), inset 0 1px 0 rgba(255,255,255,0.18);
}
.speed-test-button:disabled {
  opacity: 0.54;
  cursor: not-allowed;
}


/* 20260604: 金币大图标与底部数值贴合 */
.bottom-unified-ui .gold-hud .coin-text {
  position: absolute;
  left: 50%;
  bottom: calc(4px * var(--stage-scale));
  transform: translateX(-50%);
  color: #fff7ed;
  font-size: calc(27px * var(--stage-scale));
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  letter-spacing: calc(1px * var(--stage-scale));
  text-shadow: 0 calc(2px * var(--stage-scale)) calc(2px * var(--stage-scale)) rgba(0, 0, 0, 0.95),
               0 calc(5px * var(--stage-scale)) calc(7px * var(--stage-scale)) rgba(0, 0, 0, 0.86);
  filter: drop-shadow(0 calc(4px * var(--stage-scale)) calc(4px * var(--stage-scale)) rgba(0, 0, 0, 0.72));
}
.bottom-unified-ui .gold-hud .coin-times,
.bottom-unified-ui .gold-hud .coin-value {
  display: none !important;
}

.settlement-coin-fly {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 160;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-position: 0% 0%;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.52));
  will-change: transform, opacity, background-position;
  animation: settlementCoinSpin 0.8s steps(1, end) infinite;
}
.settlement-coin-debug-preview {
  opacity: 1;
}
@keyframes settlementCoinSpin {
  0%, 6.249% { background-position: 0% 0%; }
  6.25%, 12.499% { background-position: 33.333% 0%; }
  12.5%, 18.749% { background-position: 66.666% 0%; }
  18.75%, 24.999% { background-position: 100% 0%; }
  25%, 31.249% { background-position: 0% 33.333%; }
  31.25%, 37.499% { background-position: 33.333% 33.333%; }
  37.5%, 43.749% { background-position: 66.666% 33.333%; }
  43.75%, 49.999% { background-position: 100% 33.333%; }
  50%, 56.249% { background-position: 0% 66.666%; }
  56.25%, 62.499% { background-position: 33.333% 66.666%; }
  62.5%, 68.749% { background-position: 66.666% 66.666%; }
  68.75%, 74.999% { background-position: 100% 66.666%; }
  75%, 81.249% { background-position: 0% 100%; }
  81.25%, 87.499% { background-position: 33.333% 100%; }
  87.5%, 93.749% { background-position: 66.666% 100%; }
  93.75%, 100% { background-position: 100% 100%; }
}
.bottom-unified-ui .gold-hud.coin-collect-shake .coin-icon {
  transform-origin: 50% 50%;
  animation: goldCoinIconCollectShake 0.18s ease-in-out infinite !important;
}
@keyframes goldCoinIconCollectShake {
  0% { transform: scale(0.9) rotate(-2deg); }
  50% { transform: scale(1.1) rotate(2deg); }
  100% { transform: scale(0.9) rotate(-2deg); }
}
@keyframes goldCollectShake {
  0% { transform: translate(-50%, -50%) scale(0.9) rotate(-2deg); }
  50% { transform: translate(-50%, -50%) scale(1.1) rotate(2deg); }
  100% { transform: translate(-50%, -50%) scale(0.9) rotate(-2deg); }
}


.bottom-unified-ui .gold-hud.coin-collect-shake {
  animation: goldHudCollectShake 0.18s ease-in-out infinite;
  transform-origin: 50% 50% !important;
}
@keyframes goldHudCollectShake {
  0% { transform: translate(-50%, -50%) scale(0.9); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(0.9); }
}

.bottom-unified-ui .gold-hud.coin-collect-shake {
  transform: translate(-50%, -50%) scale(1) !important;
  animation-name: goldHudCollectShakeImportant;
}
@keyframes goldHudCollectShakeImportant {
  0% { transform: translate(-50%, -50%) scale(0.9); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(0.9); }
}

/* 20260605: 底部 UI 以 bottom-unified-ui 为父节点的实测相对坐标
   来源：正确链接 v=20260603-open2 的实际 DOM 矩形。
   goldRel: center=(9.8434%, 50.2743%), size=(7.9564%, 51.8692%)
   startRel: center=(90.4020%, 51.3358%), size=(8.4290%, 54.9502%)
   规则：B(bottom-unified-ui) 是父画布，C(金币/开战) 只相对 B 定位。 */
.bottom-unified-ui {
  --gold-center-x-p: 9.8434%;
  --gold-center-y-p: 50.2743%;
  --gold-width-p: 7.9564%;
  --gold-height-p: 51.8692%;
  --start-center-x-p: 90.4020%;
  --start-center-y-p: 51.3358%;
  --start-width-p: 8.4290%;
  --start-height-p: 54.9502%;
}

.bottom-unified-ui .gold-hud {
  left: var(--gold-center-x-p) !important;
  top: var(--gold-center-y-p) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--gold-width-p) !important;
  min-width: 0 !important;
  height: var(--gold-height-p) !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: 50% 50% !important;
}

.bottom-unified-ui .gold-hud .coin-icon {
  width: 100% !important;
  height: 100% !important;
  flex-basis: 100% !important;
}

.bottom-unified-ui .start-wave-float {
  left: var(--start-center-x-p) !important;
  top: var(--start-center-y-p) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--start-width-p) !important;
  height: var(--start-height-p) !important;
  transform: translate(-50%, -50%) scale(0.988) !important;
  transform-origin: 50% 50% !important;
}

.bottom-unified-ui .start-wave-float:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.035) !important;
}

.bottom-unified-ui .start-wave-float:active:not(:disabled) {
  transform: translate(-50%, -50%) scale(0.92) !important;
}

body.is-fullscreen .bottom-unified-ui .start-wave-float {
  left: var(--start-center-x-p) !important;
  top: var(--start-center-y-p) !important;
  right: auto !important;
  bottom: auto !important;
}

/* 结算金币收集动画：金币 HUD 本体有 !important 定位 transform，所以只动画内部 coin-icon，避免定位规则覆盖动画 */
.bottom-unified-ui .gold-hud.coin-collect-shake .coin-icon {
  animation: goldCoinIconCollectShakeFinal 0.18s ease-in-out infinite !important;
  transform-origin: 50% 50% !important;
}
@keyframes goldCoinIconCollectShakeFinal {
  0% { transform: scale(0.9) rotate(-2deg); }
  50% { transform: scale(1.1) rotate(2deg); }
  100% { transform: scale(0.9) rotate(-2deg); }
}

/* 20260606: 文字性能优化——用描边替代大半径文字投影，降低多层 text-shadow 开销 */
.level-select-panel span,
.gold-badge,
h2,
.ghost,
.small-danger,
.shop-strip .shop-item-label,
.gold-hud,
.tower-menu-btn,
.shop-cancel-zone,
.shop-card.cant-afford .shop-item-cost,
.shop-card.cant-afford .shop-item-name,
.tower-menu-btn.upgrade.can-upgrade,
.tower-menu-btn.upgrade.cant-upgrade,
.settle-row,
.settle-row strong,
.shop-info-panel,
.shop-info-panel * {
  text-shadow: none !important;
  -webkit-text-stroke-width: max(1.6px, calc(1.6px * var(--stage-scale, 1)));
  paint-order: stroke fill;
}

.level-select-panel span,
.gold-badge,
h2,
.ghost,
.small-danger,
.shop-strip .shop-item-label,
.gold-hud,
.shop-cancel-zone,
.settle-row,
.settle-row strong,
.shop-info-panel,
.shop-info-panel * {
  -webkit-text-stroke-color: rgba(58, 34, 10, 0.92);
}

.tower-menu-btn,
.tower-menu-btn.upgrade.can-upgrade {
  -webkit-text-stroke-color: rgba(11, 68, 37, 0.92);
}

.tower-menu-btn.upgrade.cant-upgrade,
.shop-card.cant-afford .shop-item-cost,
.shop-card.cant-afford .shop-item-name {
  -webkit-text-stroke-color: rgba(92, 22, 22, 0.92);
}

/* 20260606: 最终文字规则微调 */
.wave-settle-panel .settle-row,
.wave-settle-panel .settle-row strong {
  font-weight: 950 !important;
  text-shadow: none !important;
  -webkit-text-stroke-width: max(1.8px, calc(1.8px * var(--stage-scale, 1))) !important;
  -webkit-text-stroke-color: rgba(96, 54, 8, 0.95) !important;
  paint-order: stroke fill !important;
}

.shop-info-panel,
.shop-info-panel * {
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
  paint-order: normal !important;
}

.shop-info-panel p {
  top: calc(var(--inner-top) + calc(38px * var(--stage-scale))) !important;
  height: calc(58px * var(--stage-scale)) !important;
}

/* 20260606: 结算面板最终文字与金币反馈修正 */
.bottom-unified-ui .gold-hud .coin-icon {
  position: relative;
  background: none !important;
  overflow: visible;
}
.bottom-unified-ui .gold-hud .coin-icon-shake-layer {
  position: absolute;
  inset: 0;
  display: block;
  background: url("./assets/ui/panels/coin_icon.png") center / contain no-repeat;
  transform-origin: 50% 50%;
  will-change: transform;
}
.bottom-unified-ui .gold-hud.coin-collect-shake .coin-icon,
.bottom-unified-ui .gold-hud.coin-collect-shake {
  animation: none !important;
}
.bottom-unified-ui .gold-hud.coin-collect-shake .coin-icon-shake-layer {
  animation: goldCoinButtonCollectPulse 0.16s ease-in-out infinite !important;
}
@keyframes goldCoinButtonCollectPulse {
  0% { transform: scale(0.9) rotate(-2deg); }
  50% { transform: scale(1.1) rotate(2deg); }
  100% { transform: scale(0.9) rotate(-2deg); }
}

.wave-settle-panel .settle-row,
.wave-settle-panel .settle-row strong,
.wave-settle-panel .settle-money,
.wave-settle-panel .settle-money span:not(.settle-mini-coin) {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif !important;
  font-weight: 950 !important;
  letter-spacing: calc(0.4px * var(--stage-scale, 1));
  color: #ffe78a !important;
  text-shadow: none !important;
  -webkit-text-stroke-width: max(2.2px, calc(2.2px * var(--stage-scale, 1))) !important;
  -webkit-text-stroke-color: rgba(84, 46, 8, 0.98) !important;
  paint-order: stroke fill !important;
}
.wave-settle-panel .settle-row {
  font-size: min(calc(18px * var(--stage-scale)), 18px) !important;
}
.wave-settle-panel .settle-row > span:first-child {
  color: #fff0ad !important;
}
.wave-settle-panel .settle-money {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: min(calc(5px * var(--stage-scale)), 5px);
  min-width: min(calc(76px * var(--stage-scale)), 76px);
}
.wave-settle-panel .settle-money.negative span:not(.settle-mini-coin) {
  color: #ffb38c !important;
  -webkit-text-stroke-color: rgba(94, 24, 12, 0.98) !important;
}
.wave-settle-panel .settle-mini-coin {
  flex: 0 0 auto;
  width: min(calc(18px * var(--stage-scale)), 18px);
  height: min(calc(18px * var(--stage-scale)), 18px);
  display: inline-block;
  background: url("./assets/ui/panels/coin_icon.png") center / contain no-repeat;
  filter: drop-shadow(0 min(calc(2px * var(--stage-scale)), 2px) min(calc(2px * var(--stage-scale)), 2px) rgba(0,0,0,0.58));
  -webkit-text-stroke-width: 0 !important;
}
.wave-settle-panel .settle-row.total {
  margin-top: min(calc(8px * var(--stage-scale)), 8px) !important;
  padding-top: min(calc(10px * var(--stage-scale)), 10px) !important;
  font-size: min(calc(22px * var(--stage-scale)), 22px) !important;
}
.wave-settle-panel .settle-row.total > span:first-child,
.wave-settle-panel .settle-row.total .settle-money,
.wave-settle-panel .settle-row.total .settle-money span:not(.settle-mini-coin) {
  font-size: min(calc(22px * var(--stage-scale)), 22px) !important;
  color: #ffdf62 !important;
  -webkit-text-stroke-width: max(2.6px, calc(2.6px * var(--stage-scale, 1))) !important;
  -webkit-text-stroke-color: rgba(86, 43, 4, 0.99) !important;
}
.wave-settle-panel .settle-row.total .settle-mini-coin {
  width: min(calc(22px * var(--stage-scale)), 22px);
  height: min(calc(22px * var(--stage-scale)), 22px);
}

/* 20260606: 失败面板重玩按钮改为 16:9 画布内相对定位，避免 demo/移动端位置漂移 */
.restart-float:not(.is-quick-restart) {
  left: 50% !important;
  right: auto !important;
  top: calc(50% + calc(112px * var(--stage-scale))) !important;
  width: calc(302px * var(--stage-scale)) !important;
  height: calc(116px * var(--stage-scale)) !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: 50% 50% !important;
  z-index: 82 !important;
}
.restart-float:not(.is-quick-restart):hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.035) !important;
}
.restart-float:not(.is-quick-restart):active:not(:disabled) {
  transform: translate(-50%, -50%) scale(0.92) !important;
}

/* 20260606: 失败重玩按钮跟随失败面板内容上移，并快速中心缩放弹出 */
.restart-float:not(.is-quick-restart) {
  top: calc(50% + calc(58px * var(--stage-scale))) !important;
}
.restart-float:not(.is-quick-restart):not([hidden]) {
  animation: failRestartButtonPop 0.16s cubic-bezier(0.18, 1.35, 0.35, 1) both;
}
@keyframes failRestartButtonPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
  78% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.restart-float:not(.is-quick-restart):hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.035) !important;
}
.restart-float:not(.is-quick-restart):active:not(:disabled) {
  transform: translate(-50%, -50%) scale(0.92) !important;
}
