/* ==========================================================================
   AnYiの世界 —— hud.css
   游戏界面四区：#hud-top / #hud-left / #scene-stage / #map-mini
   纯黑白灰阶 · 方角 · 细网格线 · 半透明黑遮罩
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * 1. #page-game 总布局：顶栏一行，下面左右两栏
 * ------------------------------------------------------------------ */
#page-game.active {
  grid-template-columns: var(--hud-left-w) minmax(0, 1fr);
  grid-template-rows: var(--hud-top-h) minmax(0, 1fr);
  grid-template-areas:
    "top  top"
    "left stage";
  gap: 0;
  background: var(--c-ink);
}

#hud-top {
  grid-area: top;
}

#hud-left {
  grid-area: left;
}

#scene-stage {
  grid-area: stage;
}

/* ------------------------------------------------------------------ *
 * 2. #hud-top 顶栏
 * ------------------------------------------------------------------ */
#hud-top {
  position: relative;
  z-index: var(--z-hud);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(10px, 1.4vw, 26px);
  height: var(--hud-top-h);
  padding: 0 clamp(8px, 1vw, 18px);
  background: var(--c-ink);
  border-bottom: var(--bw-2) solid var(--c-ink);
  box-shadow: 0 var(--bw-2) 0 0 var(--c-line);
  color: var(--c-paper);
  font-size: var(--fs-sm);
  line-height: 1;
  overflow: hidden;
}

#hud-top>* {
  white-space: nowrap;
}

.hud-gold,
.hud-time,
.hud-week,
.hud-weather {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  color: var(--c-paper);
}

/* 项目符号，用文本前缀而非图标 */
.hud-gold::before {
  content: "金";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: .82em;
  font-weight: 700;
  letter-spacing: 0;
}

.hud-time::before {
  content: "时";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border: var(--bw-1) solid var(--c-line-strong);
  color: var(--c-dim-3);
  font-family: var(--font-ui);
  font-size: .82em;
  letter-spacing: 0;
}

/* 时间用大一号的等宽字，像档案打字机 */
.hud-time {
  font-size: var(--fs-md);
  font-weight: 700;
}

.hud-week {
  padding: 0 .5em;
  background: var(--c-panel-2);
  border: var(--bw-1) solid var(--c-line);
  color: var(--c-dim-3);
  line-height: 1.9;
}

.hud-weather {
  color: var(--c-dim-2);
}

.hud-weather::before {
  content: "天";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border: var(--bw-1) solid var(--c-line);
  color: var(--c-dim);
  font-family: var(--font-ui);
  font-size: .82em;
  letter-spacing: 0;
}

/* 顶栏里靠右的按钮组 */
#hud-top .hud-spacer,
#hud-top .grow {
  flex: 1 1 auto;
  min-width: 0;
}

/* 顶栏右侧的两个小按钮：【⛶ 全屏】和【⚙ 设置】 */
#btn-fullscreen,
#btn-settings {
  flex: 0 0 auto;
  padding: .3em .9em;
  min-height: 1.9em;
  background: transparent;
  color: var(--c-paper);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  font-size: var(--fs-xs);
  letter-spacing: .24em;
  transition: background var(--t-fast), color var(--t-fast);
}

/* 由【全屏】把这一组推到最右，设置跟在它后面 */
#btn-fullscreen {
  margin-left: auto;
}

#btn-settings {
  margin-left: var(--sp-2);
}

#btn-fullscreen:hover,
#btn-settings:hover {
  background: var(--c-paper);
  color: var(--c-ink);
}

#btn-fullscreen:active,
#btn-settings:active {
  background: var(--c-dim-3);
  color: var(--c-ink);
}

/* ------------------------------------------------------------------ *
 * 3. #hud-left 左侧状态栏（可滚动）
 * ------------------------------------------------------------------ */
#hud-left {
  position: relative;
  z-index: var(--z-hud);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: var(--sp-3) var(--sp-3) var(--sp-5);
  background: var(--c-ink);
  border-right: var(--bw-2) solid var(--c-line);
  color: var(--c-paper);
  font-size: var(--fs-sm);
}

/* 侧栏顶部的角色铭牌 */
#hud-left .hud-name,
#hud-left .hud-portrait {
  flex: 0 0 auto;
}

#hud-left .hud-name {
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-paper);
  color: var(--c-ink);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: .18em;
}

#hud-left .hud-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 34vh;
  overflow: hidden;
  background: var(--c-panel-2);
  border: var(--bw-2) solid var(--c-line-strong);
  filter: grayscale(1) contrast(1.05);
}

#hud-left .hud-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

/* 侧栏分组标题（纸档案的分栏线） */
#hud-left .hud-section-title,
#hud-left .hud-group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-bottom: 2px;
  border-bottom: var(--bw-1) solid var(--c-line);
  color: var(--c-dim);
  font-size: var(--fs-xs);
  letter-spacing: .3em;
}

#hud-left .hud-group::after {
  content: "";
  flex: 1 1 auto;
  height: var(--bw-1);
  background: var(--c-line);
}

/* 状态一行：名字左 / 数值右 */
.stat-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 1px 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.stat-row .stat-name {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--c-dim-2);
  letter-spacing: .14em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-row .stat-val {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--c-paper);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  text-align: right;
  white-space: nowrap;
}

/* 数值告急：只靠反相加粗，不使用颜色 */
.stat-row.is-critical .stat-name,
.stat-row.is-critical .stat-val {
  font-weight: 700;
  color: var(--c-paper);
}

.stat-row.is-critical .stat-val {
  background: var(--c-paper);
  color: var(--c-ink);
  padding: 0 .35em;
}

.stat-row.is-critical .stat-name::before {
  content: "!";
  margin-right: .3em;
}

/* 细进度条：黑底白填充 */
.stat-bar {
  position: relative;
  width: 100%;
  height: clamp(4px, .72vh, 8px);
  margin: 2px 0 var(--sp-2);
  background: var(--c-ink);
  border: var(--bw-1) solid var(--c-line-strong);
  overflow: hidden;
}

.stat-bar .stat-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-paper);
  transition: width var(--t-slow);
}

/* 低值时反相：白框内黑填充，视觉上"空掉" */
.stat-bar .stat-fill.low,
.stat-bar.low .stat-fill {
  background: var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-paper);
}

.stat-bar .stat-fill.critical,
.stat-bar.critical .stat-fill {
  background: repeating-linear-gradient(90deg,
      var(--c-paper) 0 3px,
      var(--c-ink) 3px 6px);
}

/* 一组 stat（名字 + 数值 + 条） */
.stat-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--sp-1) 0;
}

/* 穿戴栏 */
.slot-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 2px var(--sp-2);
  border: var(--bw-1) solid transparent;
  border-bottom-color: var(--c-panel-2);
  font-size: var(--fs-xs);
  line-height: 1.7;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.slot-row .slot-name {
  flex: 0 0 auto;
  min-width: 3.6em;
  color: var(--c-dim);
  letter-spacing: .18em;
}

.slot-row .slot-val {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  color: var(--c-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-row .slot-val.empty,
.slot-row.empty .slot-val {
  color: var(--c-line);
}

.slot-row:hover {
  background: var(--c-panel-2);
  border-color: var(--c-line);
}

/* ★ 可点击的状态栏行（头饰/饰品/衣物/武器/背包）：鼠标手型 + 名字后面加 › */
.slot-row.clickable {
  cursor: pointer;
}

.slot-row.clickable .slot-name::after {
  content: " ›";
  color: var(--c-line-strong);
}

/* buff 列表 */
.buff-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  min-height: 1.9em;
  padding: 2px 0;
}

.buff-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .1em .5em;
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-1) solid var(--c-paper);
  border-radius: var(--radius-0);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  line-height: 1.7;
  white-space: nowrap;
}

/* 【】由 CSS 生成，保证统一书写的符号 */
.buff-tag::before {
  content: "【";
  opacity: .85;
}

.buff-tag::after {
  content: "】";
  opacity: .85;
}

/* 负面 buff 用反相加粗区分 */
.buff-tag.bad,
.buff-tag.negative {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-ink);
  font-weight: 700;
}

.buff-tag.empty {
  border-style: dashed;
  border-color: var(--c-line);
  color: var(--c-dim);
  background: transparent;
}

.buff-tag.empty::before,
.buff-tag.empty::after {
  content: "";
}

/* 性别认知 */
#hud-gender {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--c-panel-2);
  border: var(--bw-1) solid var(--c-line);
  border-left: var(--bw-3) solid var(--c-paper);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
}

#hud-gender .gender-label {
  color: var(--c-dim);
}

#hud-gender .gender-value {
  color: var(--c-paper);
  font-weight: 700;
  letter-spacing: .22em;
}

/* 侧栏底部快捷按钮组 */
#hud-left .hud-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: var(--bw-1) solid var(--c-line);
}

#hud-left .hud-actions .btn {
  flex: 1 1 44%;
  padding: .3em .4em;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
}

/* ------------------------------------------------------------------ *
 * 4. #scene-stage 场景区
 * ------------------------------------------------------------------ */
#scene-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--c-ink);
}

/* 上面的 .bg-layer 铺满整个 stage（base.css 已定义尺寸） */
#scene-stage>.bg-layer {
  z-index: 0;
}

/* 场景名：左上角大字 + 黑色半透明底条 */
#scene-name {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  max-width: 78%;
  padding: .35em 1.4em .35em .8em;
  background: var(--c-shade-60);
  border-left: var(--bw-3) solid var(--c-paper);
  border-bottom: var(--bw-1) solid var(--c-line);
  color: var(--c-paper);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: .3em;
  line-height: 1.35;
  text-shadow: 0 0 8px var(--c-ink), 0 0 2px var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 场景切换：轻微淡入 + 闪白 */
#scene-stage.scene-enter {
  animation: scene-enter .34s ease-out both;
}

#scene-stage.flash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--c-veil-62);
  pointer-events: none;
  animation: scene-flash .28s ease-out both;
}

@keyframes scene-enter {
  from {
    opacity: .35;
  }

  to {
    opacity: 1;
  }
}

@keyframes scene-flash {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* 对话区：贴场景下方，不压住背景中心 */
/* ★ 对话框 + 收起按钮的容器：贴在整个场景区的底部
   （按钮和框是兄弟，不是父子 —— 收起按钮绝不能被裁掉） */
#dlg-wrap,
.dlg-wrap {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* 展开时按钮贴在框的上沿右侧 */
  flex: 0 0 auto;
  margin-top: auto;
  width: 100%;
}

/* 收起后整个容器只剩按钮那么高，这时把按钮挪到左边：
   右下角是小地图【展开】按钮的位置，会叠在一起 */
#dlg-wrap.folded,
.dlg-wrap.folded {
  align-items: flex-start;
}

#dialogue-box {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-height: min(46vh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(10px, 1.6vh, 20px) clamp(14px, 1.6vw, 30px);
  background: var(--c-veil-82);
  color: var(--c-ink);
  border: var(--bw-2) solid var(--c-ink);
  border-bottom: 0;
  border-right: 0;
  border-left: 0;
  border-radius: var(--radius-0);
  font-size: var(--fs-md);
  line-height: 1.85;
  transition: max-height var(--t-mid), padding var(--t-mid), border-top-width var(--t-mid);
}

/* ★ 收起态：整块框向上缩没（不是往下推 —— 推出去的话按钮的位置就没法固定了） */
#dialogue-box.folded {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  overflow: hidden;
}

/* 收起 / 展开按钮：贴在框的上沿右侧，不占正文的位置、也不会盖住文字 */
#btn-fold,
.dlg-fold {
  flex: 0 0 auto;
  padding: .3em 1em;
  min-height: 1.9em;
  background: var(--c-veil-82);
  color: var(--c-ink);
  border: var(--bw-2) solid var(--c-ink);
  border-bottom: 0;
  border-radius: var(--radius-0);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

#btn-fold:hover,
#btn-fold:focus-visible,
.dlg-fold:hover,
.dlg-fold:focus-visible {
  background: var(--c-paper);
  outline: none;
}

/* 第一版对话文本 */
#dialogue-box .dlg-text,
#dialogue-box .dialogue-text {
  margin-bottom: var(--sp-3);
  color: var(--c-ink);
  text-shadow: none;
  white-space: pre-wrap;
  word-break: break-word;
}

#dialogue-box .dlg-text:last-child {
  margin-bottom: 0;
}

#dialogue-box .dlg-speaker {
  display: block;
  margin-bottom: var(--sp-1);
  padding-bottom: 2px;
  border-bottom: var(--bw-1) solid var(--c-ink);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .28em;
}

/* 对话区里的黑底白字提示条（消耗/时间等） */
#dialogue-box .dlg-meta {
  display: block;
  margin-bottom: var(--sp-2);
  padding: .1em .5em;
  background: var(--c-ink);
  color: var(--c-paper);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
}

/* 继续提示的小三角（用文本字符，非 emoji） */
#dialogue-box .dlg-continue {
  display: block;
  margin-top: var(--sp-2);
  color: var(--c-ink);
  font-size: var(--fs-xs);
  letter-spacing: .3em;
  text-align: right;
  opacity: .7;
}

#dialogue-box .dlg-continue::after {
  content: "\25BC";
  margin-left: .4em;
  animation: blink 1.1s steps(2, end) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* ------------------------------------------------------------------ *
 * 5. #option-list 选项：一行一个、等宽
 * ------------------------------------------------------------------ */
#option-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

#option-list:empty {
  display: none;
}

button.opt,
.opt {
  display: block;
  width: 100%;
  min-width: 0;
  padding: .42em .9em;
  background: var(--c-paper);
  color: var(--c-ink);
  border: var(--bw-2) solid var(--c-ink);
  border-radius: var(--radius-0);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: .16em;
  line-height: 1.75;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), letter-spacing var(--t-fast);
}

/* 选项内两栏：正文 + 右侧小字提示 */
button.opt .opt-main,
button.opt .opt-text {
  display: inline-block;
  vertical-align: middle;
}

button.opt .opt-note,
.opt-note {
  float: right;
  margin-left: var(--sp-3);
  color: var(--c-dim);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  font-weight: 400;
}

button.opt::after,
.opt::after {
  content: "";
  display: block;
  clear: both;
}

button.opt:hover:not(:disabled),
button.opt:focus-visible:not(:disabled),
.opt:hover:not(:disabled),
.opt:focus-visible:not(:disabled) {
  background: var(--c-ink);
  color: var(--c-paper);
  letter-spacing: .22em;
  box-shadow: inset 0 0 0 var(--bw-1) var(--c-paper), 4px 0 0 0 var(--c-ink);
}

button.opt:hover:not(:disabled) .opt-note,
button.opt:focus-visible:not(:disabled) .opt-note,
.opt:hover:not(:disabled) .opt-note,
.opt:focus-visible:not(:disabled) .opt-note {
  color: var(--c-dim-3);
}

/* 禁用：灰底灰字，不反相 */
button.opt:disabled,
.opt:disabled,
.opt.disabled {
  background: var(--c-dim-3);
  color: var(--c-dim);
  border-color: var(--c-line);
  border-style: dashed;
  cursor: not-allowed;
  letter-spacing: .16em;
  box-shadow: none;
  opacity: 1;
}

button.opt:disabled .opt-note,
.opt.disabled .opt-note {
  color: var(--c-line);
}

/* ★ 野外遭遇的选项边框颜色（黑白世界里的另一处例外，和小地图同理）
   绿 = 宝箱 / 橙 = 可以讨伐的敌人 / 红 = 威胁（会封路的那种） */
.opt.green {
  border-color: #22c55e;
  box-shadow: inset 0 0 0 var(--bw-1) rgba(34, 197, 94, .35);
}

.opt.orange {
  border-color: #ff8c00;
  box-shadow: inset 0 0 0 var(--bw-1) rgba(255, 140, 0, .35);
}

.opt.red {
  border-color: #e5484d;
  box-shadow: inset 0 0 0 var(--bw-1) rgba(229, 72, 77, .45);
}

/* 已选中的选项（键盘/手柄导航） */
button.opt.selected,
.opt.selected {
  background: var(--c-ink);
  color: var(--c-paper);
  box-shadow: inset 0 0 0 var(--bw-2) var(--c-paper);
}

/* ------------------------------------------------------------------ *
 * 6. #map-mini 右下角小地图
 *    - 最左侧竖槽里是【收起】/【展开】按钮，收起后整块面板只剩这个按钮
 *    - 当前位置 = 橙框，可以走过去的区域 = 绿框（点击即移动）
 * ------------------------------------------------------------------ */
#map-mini {
  position: absolute;
  right: clamp(8px, 1vw, 18px);
  bottom: clamp(8px, 1.2vh, 18px);
  z-index: var(--z-map);
  width: clamp(190px, 17vw, 260px);
  height: clamp(200px, 26vh, 285px);
  /* 面板本身不留内边距：若 JS 直接把 .map-cell 挂在这里，
     left/top 的百分比就精确对应整块面板，不会有偏移。
     ★ 最左侧留出一条 --map-gutter 宽的竖槽给【收起】按钮，格子从竖槽右边开始 */
  padding: 0;
  background: var(--c-shade-72);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  color: var(--c-paper);
  box-shadow: 0 0 0 var(--bw-1) var(--c-ink), 0 4px 14px var(--c-shade-60);
  overflow: hidden;
  transition: width var(--t-mid), height var(--t-mid);
}

/* ★ 收起态：向下折起来，整块面板只剩最左侧那个【展开】按钮
   （宽高都要算上面板自己的 2px 边框，否则按钮会被 overflow 裁掉一点） */
#map-mini.collapsed {
  width: calc(var(--map-gutter) + var(--bw-2) * 2);
  height: calc(var(--map-toggle-h) + var(--bw-2) * 2);
}

/* ★ 小地图可以拖着换位置（鼠标 / 手指都行）
   - touch-action: none：手指按住拖动时不要变成滚页面
   - 抓手光标给个提示；双击地图标题可以还原到右下角 */
#map-mini {
  cursor: grab;
  touch-action: none;
}

#map-mini.dragging {
  cursor: grabbing;
  box-shadow: 0 0 0 var(--bw-1) var(--c-paper), 0 10px 26px var(--c-shade-60);
}

/* 拖过之后改用 left/top 定位（内联样式由 JS 写） */
#map-mini.map-floating {
  right: auto;
  bottom: auto;
}

#map-mini.collapsed .map-title,
#map-mini.collapsed .map-body {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: bottom center;
  pointer-events: none;
}

/* ★ 小地图最左侧的【收起】/【展开】按钮（竖排文字） */
#map-mini .map-toggle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: var(--map-gutter);
  height: var(--map-toggle-h);
  padding: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  border: none;
  border-right: var(--bw-2) solid var(--c-ink);
  border-radius: var(--radius-0);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  /* vertical-rl 下：line-height 管横向居中，text-align 管纵向居中 */
  line-height: var(--map-gutter);
  letter-spacing: .16em;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

#map-mini .map-toggle:hover,
#map-mini .map-toggle:focus-visible {
  background: var(--c-ink);
  color: var(--c-paper);
}

#map-mini .map-title {
  position: absolute;
  top: 0;
  left: var(--map-gutter);
  z-index: 2;
  padding: 0 .5em;
  background: var(--c-paper);
  color: var(--c-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .26em;
  line-height: 1.7;
  transition: opacity var(--t-fast), transform var(--t-mid);
}

/* 承载 .map-cell 的定位上下文（JS 传 left/top/width/height 百分比） */
#map-mini .map-grid,
#map-mini .map-body {
  position: absolute;
  inset: 0 0 0 var(--map-gutter);
  padding: clamp(6px, .8vh, 10px);
  background-image: linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size: 10% 10%;
  background-clip: content-box;
  transition: opacity var(--t-fast), transform var(--t-mid);
}

.map-cell {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
  background: var(--c-shade-45);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius-0);
  color: var(--c-dim-3);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  line-height: 1.15;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.map-cell:hover {
  background: var(--c-shade-72);
  border-color: var(--c-paper);
  color: var(--c-paper);
}

/* ★ 可以走过去的区域：绿色边框 + 可点击（点一下就走过去） */
.map-cell.can-go {
  border: var(--bw-2) solid var(--c-map-go);
  color: var(--c-paper);
  cursor: pointer;
}

.map-cell.can-go:hover,
.map-cell.can-go:focus-visible {
  background: var(--c-shade-72);
  border-color: var(--c-map-go);
  color: var(--c-paper);
  box-shadow: 0 0 0 var(--bw-2) var(--c-map-go);
}

/* ★ 当前所在：白底黑字 + 橙色边框
   （写在 .can-go 之后：万一同时命中，橙色优先） */
.map-cell.current {
  z-index: 3;
  background: var(--c-paper);
  color: var(--c-ink);
  border: var(--bw-2) solid var(--c-map-cur);
  box-shadow: 0 0 0 var(--bw-2) var(--c-paper), 0 0 0 4px var(--c-map-cur);
  font-weight: 700;
  letter-spacing: .1em;
}

.map-cell.current::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: var(--bw-1) dotted var(--c-map-cur);
  pointer-events: none;
}

/* 未解锁 / 不可去 */
.map-cell.locked,
.map-cell.disabled {
  background: var(--c-ink);
  border-style: dashed;
  border-color: var(--c-panel-2);
  color: var(--c-line);
}

/* ------------------------------------------------------------------ *
 * 7. #page-end 退出感谢页
 * ------------------------------------------------------------------ */
#page-end {
  color: var(--c-paper);
}

#page-end .end-title,
#page-end h1 {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: .5em;
  text-align: center;
}

#page-end .end-text,
#page-end p {
  max-width: min(760px, 80vw);
  margin: var(--sp-5) auto 0;
  color: var(--c-dim-2);
  font-size: var(--fs-md);
  line-height: 2;
  letter-spacing: .18em;
  text-align: center;
}

#page-end .end-hr {
  width: min(420px, 50vw);
  height: var(--bw-2);
  margin: var(--sp-5) auto;
  background: var(--c-paper);
  border: 0;
}

#page-end .btn {
  margin-top: var(--sp-6);
  padding: .5em 2.2em;
  font-size: var(--fs-sm);
  letter-spacing: .34em;
}