html,
body {
  user-select: none;
  -webkit-user-select: none;
  margin: 0;
  width: 100%;
  min-height: 100%;
}

:root {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  /* 主题色变量 — 深色（默认） */
  --text-primary: #f3f4f6;
  --text-secondary: #a0a8b8;
  --text-desc: #e0e4ec;
  --bg-body: radial-gradient(circle at top, #6b7079, #50545c 60%);
  --bg-card: rgba(20, 22, 28, 0.45);
  --bg-input: rgba(30, 34, 42, 0.8);
  --bg-modal: #232833;
  --bg-stats: rgba(35, 40, 51, 0.98);
  --bg-tooltip: rgba(20, 22, 28, 0.92);
  --bg-minimap: rgba(0, 0, 0, 0.35);
  --border-color: rgba(255, 255, 255, 0.24);
  --border-light: rgba(255, 255, 255, 0.15);
  --border-medium: rgba(255, 255, 255, 0.3);
  --border-map: rgba(255, 255, 255, 0.34);
  --map-bg: #8e949e;
  --stat-border: rgba(255, 255, 255, 0.1);
  --tutorial-border: rgba(255, 123, 84, 0.6);
  color: var(--text-primary);
}

:root[data-theme="light"] {
  --text-primary: #1a1d23;
  --text-secondary: #5a6270;
  --text-desc: #3a4050;
  --bg-body: radial-gradient(circle at top, #dde1e8, #c8cdd6 60%);
  --bg-card: rgba(255, 255, 255, 0.75);
  --bg-input: rgba(240, 242, 248, 0.9);
  --bg-modal: #f0f2f6;
  --bg-stats: rgba(245, 247, 252, 0.98);
  --bg-tooltip: rgba(245, 247, 252, 0.95);
  --bg-minimap: rgba(255, 255, 255, 0.5);
  --border-color: rgba(0, 0, 0, 0.12);
  --border-light: rgba(0, 0, 0, 0.08);
  --border-medium: rgba(0, 0, 0, 0.15);
  --border-map: rgba(0, 0, 0, 0.18);
  --map-bg: #c8cdd5;
  --stat-border: rgba(0, 0, 0, 0.08);
  --tutorial-border: rgba(255, 123, 84, 0.7);
}

* { box-sizing: border-box; }
body { background: var(--bg-body); }
.hidden { display: none !important; }

.home-page,
.game-page { min-height: 100vh; padding: 10px; }
.home-page { display: grid; place-items: center; }
.home-card,
.status-hint {
  width: min(97vw, 1800px);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 14px;
}
.home-card { width: min(860px, 100%); padding: 24px; }
.map-name { opacity: 0.9; font-weight: 600; }
.home-links {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
}
.home-links a,
.privacy-card a {
  color: #ffd46e;
  font-weight: 700;
  text-decoration: none;
}
.home-links a:hover,
.privacy-card a:hover {
  text-decoration: underline;
}

/* 地图选择器 */
.map-selector {
  margin: 14px 0;
}
.map-selector label {
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 8px;
}
.map-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.map-card {
  flex: 1 1 120px;
  max-width: 160px;
  background: var(--bg-input);
  border: 2px solid var(--border-light);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, transform 0.15s;
}
.map-card:hover {
  border-color: rgba(255, 123, 84, 0.5);
  transform: translateY(-2px);
}
.map-card.selected {
  border-color: #ff7b54;
  background: rgba(255, 123, 84, 0.12);
}
.map-card canvas {
  display: block;
  margin: 0 auto 6px;
  border-radius: 4px;
}
.map-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.difficulty-selector {
  margin: 16px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.difficulty-selector label {
  font-weight: 600;
  color: var(--text-primary);
}

.difficulty-select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-medium);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.difficulty-select:hover {
  border-color: #ff7b54;
}

.difficulty-select:focus {
  border-color: #ff7b54;
  box-shadow: 0 0 0 2px rgba(255, 123, 84, 0.2);
}

.btn {
  border: 0;
  border-radius: 10px;
  background: #ff7b54;
  color: white;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.btn-secondary { background: #7a8394; }

.volume-slider {
  width: 60px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  vertical-align: middle;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff7b54;
  cursor: pointer;
}
.btn-small { padding: 6px 10px; font-size: 12px; }

.top-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.top-bar__left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.top-bar__left h2 { margin: 0; font-size: 19px; }

.buff-hint { margin-bottom: 8px; font-weight: 700; color: #ffe0af; }
.board-wrapper { display: grid; justify-items: center; gap: 8px; position: relative; }

.map-board {
  width: min(97vw, 2000px);
  height: 84vh;
  max-height: 1100px;
  border-radius: 16px;
  border: 1px solid var(--border-map);
  touch-action: none;
}

.region-path {
  stroke: rgba(243, 245, 248, 0.9);
  stroke-width: 1.35;
  transition: filter 120ms ease, stroke-width 120ms ease;
}
.region-path.source { stroke: #fff7a0 !important; stroke-width: 3.2; }
.region-path.target.legal-target { stroke: #83ff89 !important; stroke-width: 3.8; filter: drop-shadow(0 0 6px rgba(131, 255, 137, 0.6)); }
.region-path.incoming-attack {
  stroke: #ff3b3b !important;
  stroke-width: 4;
  filter: drop-shadow(0 0 8px rgba(255, 59, 59, 0.95));
  animation: incomingPulse 0.3s ease-out;
}
@keyframes incomingPulse {
  0% { stroke-width: 2; filter: drop-shadow(0 0 2px rgba(255, 59, 59, 0.4)); }
  50% { stroke-width: 6; filter: drop-shadow(0 0 14px rgba(255, 59, 59, 1)); }
  100% { stroke-width: 4; filter: drop-shadow(0 0 8px rgba(255, 59, 59, 0.95)); }
}
.region-path.frontline { stroke: #ffe18c; stroke-width: 2.8; filter: drop-shadow(0 0 4px rgba(255, 225, 140, 0.45)); }
.region-path.neutral-cell { opacity: 0.86; }
.region-path.fog { fill: #4a4e56 !important; opacity: 0.5; }
.region-path.selected-region { stroke: #ff44ff !important; stroke-width: 3.5; filter: drop-shadow(0 0 8px rgba(255, 68, 255, 0.7)); }

/* Buff激活特效 — 统一动画，颜色通过 CSS 变量区分 */
.region-path[class*="buff-"] {
  animation: buffPulse 1.5s ease-in-out infinite;
}
.region-path.buff-growth        { --buff-color: 100, 255, 100; }
.region-path.buff-supply        { --buff-color: 100, 200, 255; }
.region-path.buff-breakthrough  { --buff-color: 255, 100, 100; }
.region-path.buff-defense       { --buff-color: 255, 215, 0; }
.region-path.buff-trap          { --buff-color: 255, 100, 200; }
.region-path.buff-portal        { --buff-color: 200, 100, 255; }

/* 持续被动型特殊地块 — 拥有时持续脉冲 */
.region-path.passive-turret     { --buff-color: 255, 80, 30; animation: buffPulse 1.5s ease-in-out infinite; }
.region-path.passive-shield     { --buff-color: 60, 200, 255; animation: buffPulse 2s ease-in-out infinite; }
.region-path.passive-mine       { --buff-color: 255, 200, 50; animation: buffPulse 2s ease-in-out infinite; }

/* 炮塔射击闪烁 */
.region-path.turret-firing {
  animation: turretFire 0.25s ease-out !important;
}
@keyframes turretFire {
  0%   { filter: drop-shadow(0 0 16px rgba(255, 60, 30, 1)) brightness(1.6); }
  100% { filter: none; }
}

@keyframes buffPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(var(--buff-color), 0.4)); }
  50%      { filter: drop-shadow(0 0 12px rgba(var(--buff-color), 1)); }
}

/* 占领动画 */
.region-path.captured {
  animation: captureFlash 0.6s ease-out;
}

@keyframes captureFlash {
  0% { filter: brightness(2) drop-shadow(0 0 10px white); }
  50% { filter: brightness(1.5) drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)); }
  100% { filter: brightness(1); }
}

.special-marker-active {
  animation: specialBlink 1s ease-in-out infinite;
  font-size: 15px;
}

/* SVG 图标组样式 */
.special-icon-group {
  opacity: 0.92;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}
.special-icon-group.special-marker-active {
  animation: iconPulse 1.2s ease-in-out infinite;
  font-size: unset;
}
@keyframes iconPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6)); }
}

@keyframes specialBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

.region-troops {
  font-size: 29px;
  fill: #f8fbff;
  font-weight: 900;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 2px;
  pointer-events: none;
}
.region-growth { font-size: 11px; fill: #e8edf5; font-weight: 700; opacity: 0.88; pointer-events: none; }
.region-max { font-size: 10px; fill: #d8deea; opacity: 0.58; font-weight: 600; pointer-events: none; }
.special-marker { font-size: 13px; font-weight: 900; fill: #ffd46e; opacity: 0.92; pointer-events: none; }

.drag-line {
  stroke: url(#dragGradient);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 15 10;
  opacity: 0.95;
  filter: drop-shadow(0 0 8px rgba(255, 245, 170, 0.9)) drop-shadow(0 0 15px rgba(255, 200, 100, 0.6));
  pointer-events: none;
  animation: dragPulse 0.8s ease-in-out infinite;
}

@keyframes dragPulse {
  0%, 100% { stroke-width: 8; opacity: 0.95; }
  50% { stroke-width: 10; opacity: 1; }
}

#selectionLines line, #particleLayer circle, #particleLayer text { pointer-events: none; }

.selection-line-primary {
  stroke: #fff3a0;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.9;
  filter: drop-shadow(0 0 3px rgba(255, 243, 160, 0.7));
  pointer-events: none;
  stroke-dasharray: 8 4;
  animation: lineDash 0.6s linear infinite;
}

.selection-line-secondary {
  stroke: #ff7b54;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.6;
  filter: drop-shadow(0 0 2px rgba(255, 123, 84, 0.5));
  pointer-events: none;
  stroke-dasharray: 6 6;
  animation: lineDash 0.6s linear infinite;
}

@keyframes lineDash {
  to { stroke-dashoffset: -12; }
}

.reinforce-line {
  stroke: #83ff89;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.5;
  stroke-dasharray: 5 5;
  pointer-events: none;
  animation: lineDash 0.8s linear infinite;
}

.particle-dot {
  fill: #fff7a8;
  opacity: 0.95;
  filter: drop-shadow(0 0 3px rgba(255, 247, 168, 0.8));
  pointer-events: none;
}

/* 添加渐变定义 */
svg defs {
  display: block;
}

.modal-mask { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.52); }
.modal-card { width: min(430px, 92vw); background: var(--bg-modal); border-radius: 12px; padding: 20px; text-align: center; }
.modal-actions { display: flex; justify-content: center; gap: 12px; }

/* 统计面板 */
.stats-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-stats);
  border: 2px solid var(--border-medium);
  border-radius: 16px;
  padding: 24px;
  min-width: 320px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.stats-panel h3 {
  margin: 0 0 16px 0;
  text-align: center;
  color: #ff7b54;
  font-size: 20px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--stat-border);
}

.stat-label {
  color: var(--text-secondary);
}

.stat-value {
  font-weight: 700;
  color: var(--text-primary);
}

.stat-value.highlight {
  color: #ffd700;
}

.storage-notice {
  position: fixed;
  left: 50%;
  bottom: 18px;
  width: min(560px, calc(100vw - 28px));
  transform: translateX(-50%);
  padding: 10px 14px;
  border: 1px solid rgba(255, 212, 110, 0.75);
  border-radius: 8px;
  background: rgba(35, 30, 20, 0.94);
  color: #ffe3a3;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  z-index: 1300;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
}

.privacy-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
}
.privacy-card {
  width: min(760px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  color: var(--text-primary);
}
.privacy-card h1 {
  margin: 0 0 12px;
  font-size: 26px;
}
.privacy-card h2 {
  margin: 22px 0 8px;
  font-size: 18px;
  color: #ffb38f;
}
.privacy-card p,
.privacy-card li {
  color: var(--text-desc);
  line-height: 1.7;
}
.privacy-card ul {
  padding-left: 20px;
}
.privacy-actions {
  margin-top: 22px;
}

/* 势力占比进度条 */
.progress-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  margin-bottom: 6px;
  border: 1px solid var(--border-light);
}
.pb-seg { height: 100%; transition: width 0.4s ease; }
.pb-player { background: #ff7b54; }
.pb-ai1 { background: #4b8ff0; }
.pb-ai2 { background: #8b63d9; }
.pb-neutral { background: #bcc3cc; }

/* 拖拽提示框 */
.drag-tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--bg-tooltip);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  z-index: 999;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.drag-tooltip.can-capture { border-color: #83ff89; color: #83ff89; }
.drag-tooltip.cannot-capture { border-color: #ff7b54; color: #ffb89a; }

/* 兵力变化动画 */
.troop-increase {
  animation: troopUp 0.35s ease-out;
}
.troop-decrease {
  animation: troopDown 0.35s ease-out;
}
@keyframes troopUp {
  0% { fill: #83ff89; font-size: 36px; }
  100% { fill: #f8fbff; font-size: 29px; }
}
@keyframes troopDown {
  0% { fill: #ff6b6b; font-size: 36px; }
  100% { fill: #f8fbff; font-size: 29px; }
}

/* 战斗日志面板 */
.battle-log {
  position: fixed;
  right: 8px;
  top: 80px;
  width: 240px;
  max-height: 50vh;
  background: var(--bg-tooltip);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(4px);
}
.battle-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
}
.battle-log-content {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.5;
}
.battle-log-content .log-entry {
  padding: 2px 0;
  border-bottom: 1px solid var(--stat-border);
}
.log-entry.log-capture { color: #83ff89; }
.log-entry.log-attack { color: #ffb89a; }
.log-entry.log-turret { color: #ff6633; }
.log-entry.log-buff { color: #ffd46e; }

/* 区域信息面板 */
.region-info {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--bg-tooltip);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-desc);
  pointer-events: none;
  backdrop-filter: blur(4px);
  min-width: 140px;
  z-index: 10;
}
.region-info b { color: #ff7b54; }
.region-info .ri-owner { font-weight: 700; }
.region-info .ri-special { color: #ffd46e; }
.region-info .ri-frontline { color: #ffe18c; }

/* 迷你地图 */
.minimap {
  position: absolute;
  bottom: 52px;
  right: 12px;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  background: var(--bg-minimap);
  opacity: 0.88;
  pointer-events: none;
}

/* 教程覆盖层 */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1100;
}
.tutorial-card {
  width: min(480px, 92vw);
  background: var(--bg-modal);
  border: 2px solid var(--tutorial-border);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
}
.tutorial-card h3 {
  margin: 0 0 12px 0;
  color: #ff7b54;
  font-size: 22px;
}
.tutorial-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-desc);
  margin: 0 0 20px 0;
}
.tutorial-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}
.tutorial-step {
  font-size: 12px;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .map-board { height: 72vh; }
  .region-troops { font-size: 22px; }
  @keyframes troopUp {
    0% { fill: #83ff89; font-size: 28px; }
    100% { fill: #f8fbff; font-size: 22px; }
  }
  @keyframes troopDown {
    0% { fill: #ff6b6b; font-size: 28px; }
    100% { fill: #f8fbff; font-size: 22px; }
  }
}