.map-container {
  position: relative;
  max-width: min(1100px, 96vw);
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  /*
   * 「已使用」划线：Steps / Camera 面板 / Memory Card 用 --usage-draw-img；覆盖比例 --usage-draw-size
   * 右侧三组圆点「已用」叠图单独用 --prop-dot-draw-img（white draw lines.png）
   */
  --usage-draw-img: url('../draw lines.png');
  --usage-draw-size: 170%;
  --prop-dot-draw-img: url('../white draw lines.png');
}
/* 只作用于背景地图（直接子级），勿用 .map-container img，否则会误伤路径上的 camera 小图标 */
.map-container > img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.path-btn {
  /*
   * 【地图已放置相机图标大小】改下面 --path-camera-size 的数值（像素 = 宽高）。
   * 实际显示尺寸由 .path-camera-icon 的 width/height 引用此变量；只改这一处即可统一调整。
   */
  --path-camera-size: 70px;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 4%;
  aspect-ratio: 1;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  z-index: 3;
}
.path-btn:hover:not(.placed) {
  background: rgba(255,255,255,0.5);
  transform: translate(-50%, -50%) scale(1.1);
}
/* 已放置：透明背景 + 带字母的素材图（cameras/camera_A.png～camera_F.png） */
.path-btn.placed {
  width: auto;
  height: auto;
  min-width: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  /* 避免从空位态的半透明白底 transition 到透明时出现「闪一下白底」 */
  transition: transform 0.2s ease;
}
.path-btn.placed:hover {
  transform: translate(-50%, -50%) scale(1.06);
}
.path-btn-placed {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* 图标宽高：由 .path-btn 的 --path-camera-size 控制，要调大小去上面改该变量 */
.path-camera-icon {
  width: var(--path-camera-size);
  height: var(--path-camera-size);
  max-width: var(--path-camera-size);
  max-height: var(--path-camera-size);
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
.steps-grid {
  position: absolute;
  /* Steps 整体位置：可微调 left / bottom */
  left: 9.8%;
  bottom: 5.9%;
  /* Steps 整体尺寸：可微调 width / height */
  width: 33.4%;
  height: 14%;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(3, 1fr);
  /* 格子间距：相对本网格容器尺寸，随地图缩放 */
  gap: 0.5%;
  z-index: 2;
}
.step-cell {
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}
.step-cell:hover:not(.step-used):not(.step-f-used):not(.step-f-unlocked) {
  background: rgba(255,255,255,0.22);
}
.step-cell.step-used {
  background-color: rgba(255,255,255,0.15);
  background-image: var(--usage-draw-img);
  background-size: var(--usage-draw-size);
  background-position: center;
  background-repeat: no-repeat;
  border-color: rgba(255,255,255,0.35);
}
.step-cell.step-used:hover {
  background-color: rgba(255,255,255,0.22);
}
/* 第 26～30 格三态：已用 = 解锁视觉 + 叠加划线（--usage-draw-* 在 .map-container） */
.step-cell.step-f-unlocked {
  background: rgba(255, 255, 255, 0.15);
  border: 3px solid rgb(100, 190, 255);
  border-radius: 4px;
  box-shadow: none;
}
.step-cell.step-f-unlocked:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgb(130, 210, 255);
}
.step-cell.step-f-used {
  background-color: rgba(255, 255, 255, 0.15);
  background-image: var(--usage-draw-img);
  background-size: var(--usage-draw-size);
  background-position: center;
  background-repeat: no-repeat;
  border: 3px solid rgb(100, 190, 255);
  border-radius: 4px;
  box-shadow: none;
}
.step-cell.step-f-used:hover {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgb(130, 210, 255);
}

/* ========== 左下角 Camera 面板（A～F，3 行×2 列；仅展示，pointer-events: none）========== */
/*
 * 【在哪改】index.html → <style> → 搜「左下角 Camera」或 .camera-panel
 *
 * 布局：第 1 行 A B，第 2 行 C D，第 3 行 E F（横向顺序 A→F）
 *
 * 整块「位置 + 大小」只改下面 .camera-panel 里的 4 行（已用中文标在属性右侧）：
 *   left       — 距地图左边缘，越大越靠右
 *   bottom     — 距地图下边缘，越大越靠上
 *   width      — 整块占地图宽度比例，越大整组格子越大
 *   max-width  — 最大宽度(px)，防止大屏上格子过大
 * 格子间距：gap（相对整块宽度）
 * 单个格子圆角：.camera-panel-cell 的 border-radius
 */
.camera-panel {
  position: absolute;
  left: 54.8%; /* 【坐标-横】距地图容器左边缘 */
  bottom: 5.7%; /* 【坐标-纵】距地图容器下边缘 */
  width: 6.8%; /* 【宽度】整块占地图宽度 */
  max-width: 200px; /* 【最大宽度】px，与 width 一起决定实际大小 */
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0.1%; /* 【格子间距】六格之间的缝 */
  pointer-events: none;
  box-sizing: border-box;
}
.camera-panel-cell {
  box-sizing: border-box;
  min-height: 0;
  aspect-ratio: 1; /* 正方形；整体大小由上面 .camera-panel 的 width 决定 */
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px; /* 【单格圆角】 */
  transition: background 0.2s ease, border-color 0.2s ease;
}
.camera-panel-cell.camera-panel-cell--used {
  background-color: rgba(255, 255, 255, 0.15);
  background-image: var(--usage-draw-img);
  background-size: var(--usage-draw-size);
  background-position: center;
  background-repeat: no-repeat;
  border-color: rgba(255, 255, 255, 0.35);
}

/* ========== Memory Card（仅本区块 + 下方注释区，勿改其它）========== */
/*
 * ▼▼▼ 手动改 Memory Card 位置：在下方 .memory-card-wrap 里改这 3 个 ▼▼▼
 *    right  — 距地图右边缘（越大整块越靠左）
 *    bottom — 距地图下边缘（越大整块越靠上）
 *    width  — 整块占地图宽度的比例（越大格子越宽）
 * ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
 * 可调参数一览（改数值即可）：
 * 整块宽度 width（.memory-card-wrap）：占地图宽度比例，与 right/bottom 一起调
 * --mc-col-gap / --mc-row-gap：列间距、行间距（相对本块尺寸）
 * 格子：列等分 + aspect-ratio，随整块宽度缩放
 * .memory-card-wrap 的 right/bottom：整块相对地图右下的位置
 * Total 坐标：见下方「.memory-total-value」内注释（right / bottom，纵向为中轴比例）
 * 逐列：.memory-col[data-col="X"] 下改 margin / transform / width
 * 逐格：.memory-col[data-col="X"] .memory-cell:nth-child(n) 下改 margin / transform
 */
.memory-card-wrap {
  /* 【整块宽度】相对 .map-container；须设宽，内部 % 间距才稳定 */
  width: 18%;
  --mc-col-gap: 3%;
  --mc-row-gap: 2%;
  --mc-cell-border-w: max(1px, 0.12%);
  --mc-cell-radius: 2px; /* 格子圆角，越小越方 */
  --mc-cell-border-color: rgba(176, 141, 236, 0.75);
  --mc-cell-border-filled: rgba(150, 104, 230, 0.75);
  position: absolute;
  z-index: 2;
  /* ——— Memory Card 位置（手动改下面三行）——— */
  right: 9.7%;
  bottom: 8.33%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35%;
  box-sizing: border-box;
}
.memory-cols {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--mc-col-gap);
}
.memory-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mc-row-gap);
  /* 【单列】整列水平微调：在 [data-col="A"]…[data-col="F"] 中分别覆盖 */
}
.memory-col .memory-cell {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 22 / 16;
  height: auto;
  border: var(--mc-cell-border-w) solid var(--mc-cell-border-color);
  background: rgba(255,255,255,0.15);
  border-radius: var(--mc-cell-radius);
  cursor: pointer;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.memory-col .memory-cell:hover:not(.memory-cell-filled) {
  background: rgba(255,255,255,0.22);
  border-color: rgba(120, 75, 175, 0.9);
}
.memory-col .memory-cell.memory-cell-filled {
  background-color: rgba(255, 255, 255, 0.15);
  background-image: var(--usage-draw-img);
  background-size: var(--usage-draw-size);
  background-position: center;
  background-repeat: no-repeat;
  border-color: var(--mc-cell-border-filled);
}
.memory-col .memory-cell.memory-cell-filled:hover {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgba(235, 210, 255, 0.95);
}
/* —— 逐列微调（左右平移整列，默认 0；需要时取消注释并改数值）—— */
/* .memory-col[data-col="A"] { transform: translateX(0); } */
/* .memory-col[data-col="B"] { transform: translateX(0); } */
/* .memory-col[data-col="C"] { transform: translateX(0); } */
/* .memory-col[data-col="D"] { transform: translateX(0); } */
/* .memory-col[data-col="E"] { transform: translateX(0); } */
/* .memory-col[data-col="F"] { transform: translateX(0); } */
/* —— 逐格微调（某列第 1～4 格单独偏移，nth-child 从上往下 1→4）—— */
/* 例：.memory-col[data-col="A"] .memory-cell:nth-child(1) { margin-top: 0; } */
/* 例：.memory-col[data-col="A"] .memory-cell:nth-child(2) { margin-top: 0; } */

/*
 * ========== Total 数字：位置与样式（只改本选择器即可微调）==========
 * 元素：HTML 里 <span class="memory-total-value" id="memoryCardTotalValue">
 * 定位参考：.map-container（position:relative），故 right 为距右缘比例；bottom 为垂直中轴距底边比例（见 transform）
 */
.memory-total-value {
  position: absolute;
  /* 【坐标-横向】数字右边缘距地图容器右边缘的距离，数值越大越靠左 */
  right: 15%;
  /* 【坐标-纵向】数字垂直中轴距地图容器底边的比例；translateY(50%) 与 bottom 配合实现以中轴为基准 */
  bottom: 5.1%;
  transform: translateY(50%);
  min-width: 1.2em;
  font-family: "FrauncesSoftWonk", serif;
  /* 【字号】可用固定 px 或 clamp；改大/小数字体 */
  font-size: clamp(8px, 1.4vw, 20px);
  /* 【色调】深紫色字；想再深/再浅可改 # 色值 */
  color: #4a148c;
  z-index: 2;
  pointer-events: none;
  line-height: 1;
}
body.lang-zh .memory-total-value {
  font-family: "GenWanMinF", "PingFang SC", "Microsoft YaHei", sans-serif;
}