/* ============================================================
   NoteQuest — 纸质规则书拟物风
   palette 锁定：羊皮纸米黄 / 墨黑 / 单一强调「骰子红」
   ============================================================ */
:root {
  /* 基底：羊皮纸与墨 */
  --paper:        #F2EBDC;
  --paper-deep:   #E8DFC9;
  --paper-edge:   #D9CCB0;
  --ink:          #241F1A;
  --ink-soft:     #4A4038;
  --ink-faint:    #8A7B68;
  --rule:         #C9B99B;

  /* 单一强调色：骰子红 */
  --accent:       #A83232;
  --accent-deep:  #7E2424;
  --accent-soft:  #C25A4A;

  /* 功能色（克制使用） */
  --hp:           #7A3B3B;
  --hp-low:       #A83232;
  --gold:         #8A6A2F;

  /* 圆角尺度：全页统一 4px（纸质印刷感，锐而不冷） */
  --r: 4px;

  --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 8px rgba(60,45,25,.14);
  --shadow-lift: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 20px rgba(60,45,25,.22);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--paper-deep);
  color: var(--ink);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* 纸张纹理与暗角 */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(120,90,50,.09), transparent 60%),
    repeating-linear-gradient(0deg, rgba(140,115,75,.028) 0 1px, transparent 1px 3px);
}

/* ---------- 通用 ---------- */
.screen { display: none; position: relative; z-index: 1; min-height: 100vh; }
.screen.active { display: block; }

.card {
  background: linear-gradient(180deg, #F7F1E4, var(--paper));
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card-title {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.btn {
  font-family: inherit; font-size: 14px; cursor: pointer;
  padding: 10px 18px; border-radius: var(--r);
  border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink);
  transition: transform .08s, box-shadow .16s, background .16s;
}
.btn:hover { box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  border-color: var(--accent-deep); color: #FBF6EC;
  font-weight: 600; letter-spacing: .06em;
}
.btn-primary:hover { background: linear-gradient(180deg, #CE6656, #B23A3A); }
.btn-ghost { background: transparent; }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn:disabled:hover { box-shadow: none; }

/* ---------- 开始画面 ---------- */
.start-wrap {
  max-width: 520px; margin: 0 auto;
  padding: 8vh 24px; text-align: center;
}
.logo-mark {
  font-size: 40px; color: var(--accent);
  line-height: 1; margin-bottom: 12px;
}
.game-title {
  font-size: 46px; letter-spacing: .04em; font-weight: 700;
  color: var(--ink);
}
.game-sub {
  color: var(--ink-faint); margin-top: 6px;
  letter-spacing: .3em; font-size: 13px;
}
/* （.start-quote 已移除：封面引言被删） */
/* ★ 引言删除后这里要自己撑开标题与按钮之间的间距 */
.start-actions { display: flex; flex-direction: column; gap: 10px; max-width: 300px; margin: 34px auto 0; }
.start-or { color: var(--ink-faint); font-size: 12px; letter-spacing: .2em; margin: 4px 0; }
.start-note {
  margin-top: 34px; font-size: 12px; color: var(--ink-faint);
  line-height: 1.8;
}

/* ---------- 自选/结束面板 ---------- */
.panel-narrow {
  max-width: 460px; margin: 0 auto; padding: 7vh 24px;
}
.panel-title {
  font-size: 22px; margin-bottom: 20px; letter-spacing: .05em;
  border-bottom: 2px solid var(--accent); padding-bottom: 10px;
}
.field { display: block; margin-bottom: 16px; }
.field > span {
  display: block; font-size: 12px; letter-spacing: .16em;
  color: var(--ink-faint); margin-bottom: 6px;
}
.field input, .field select {
  width: 100%; padding: 10px 12px; font-family: inherit; font-size: 15px;
  background: #FDFAF3; border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--ink);
}
.field select:focus, .field input:focus {
  outline: 2px solid var(--accent); outline-offset: -1px;
}
.preview {
  background: rgba(255,255,255,.5); border: 1px dashed var(--rule);
  border-radius: var(--r); padding: 12px; margin-bottom: 20px;
  font-size: 13.5px; line-height: 1.9; min-height: 60px;
}
.preview .hl { color: var(--accent); font-weight: 700; }
.panel-actions { display: flex; gap: 10px; }
.panel-actions .btn { flex: 1; }
.panel-actions.center { justify-content: center; }
.panel-actions.center .btn { flex: 0 0 auto; min-width: 180px; }

/* ---------- 主布局 ---------- */
.game-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 300px;
  gap: 16px;
  max-width: 1400px; margin: 0 auto; padding: 16px;
  align-items: start;
}
.col-left, .col-mid, .col-right { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1080px) {
  .game-grid { grid-template-columns: 1fr; }
}

/* 角色卡 */
.char-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.char-avatar {
  width: 46px; height: 46px; flex: 0 0 46px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #EFE4CE, #DCCDB0);
  border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--accent); font-size: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.char-name { font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.char-race { font-size: 12.5px; color: var(--ink-faint); }

.stat-label {
  font-size: 11px; letter-spacing: .18em; color: var(--ink-faint);
  text-transform: uppercase; margin-bottom: 5px;
  font-family: "Noto Sans SC", sans-serif;
}
.hp-bar {
  height: 14px; background: #DCCFB4; border: 1px solid var(--rule);
  border-radius: 2px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(60,45,25,.22);
}
.hp-fill {
  height: 100%; width: 100%;
  background: linear-gradient(180deg, #9A5050, var(--hp));
  transition: width .35s cubic-bezier(.4,0,.2,1), background .3s;
}
.hp-fill.low { background: linear-gradient(180deg, #C4553F, var(--hp-low)); }
.hp-fill.crit { background: linear-gradient(180deg, #D46A3A, #B23A1E); }
.stat-value {
  font-size: 13px; text-align: right; margin-top: 4px;
  font-variant-numeric: tabular-nums; color: var(--ink-soft);
}

.res-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
  margin: 14px 0;
}
.res {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 1px;
  background: rgba(255,255,255,.44);
  border: 1px solid var(--rule); border-radius: var(--r);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  min-width: 0;
}
.res-icon { font-size: 14px; line-height: 1; }
.res small { font-size: 9.5px; color: var(--ink-faint); font-weight: 400; }
/* ★ 状态栏第 4 格「咒语」是文字标签（不是数字），单独缩小避免撑破格子 */
.res-spell-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; white-space: nowrap; }

/* （.loadout / .loadout-line 已移除：那行「咒语 无」是冗余信息，现已删除） */

.ability-box {
  margin-top: 12px; padding: 10px 12px;
  background: rgba(168,50,50,.06);
  border-left: 3px solid var(--accent);
  font-size: 12.5px; line-height: 1.75; color: var(--ink-soft);
}
.ability-box .lbl {
  font-size: 11px; letter-spacing: .16em; color: var(--accent);
  text-transform: uppercase; display: block; margin-bottom: 3px;
  font-family: "Noto Sans SC", sans-serif;
}

/* 背包 */
.inv-list { list-style: none; }
.inv-list li {
  padding: 8px 0; font-size: 13px;
  border-bottom: 1px dashed var(--rule);
  display: flex; justify-content: space-between; gap: 8px;
  align-items: flex-start;
}
.inv-list li:last-child { border-bottom: none; }
.inv-list li.empty-hint, .empty-hint {
  color: var(--ink-faint); font-style: italic; font-size: 12.5px;
  border: none;
}
.inv-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.inv-name { font-weight: 600; }
.inv-desc { font-size: 11px; color: var(--ink-soft); line-height: 1.45; }
.inv-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.inv-use {
  cursor: pointer; font-size: 11.5px; font-family: inherit;
  padding: 2px 9px; border-radius: 4px;
  border: 1px solid var(--accent); background: rgba(168,50,50,.07);
  color: var(--accent); font-weight: 600;
  transition: background .14s, color .14s;
}
.inv-use:hover { background: var(--accent); color: #FDFAF3; }
.inv-del {
  cursor: pointer; color: var(--ink-faint); font-size: 12px;
  border: none; background: none; font-family: inherit;
}
.inv-del:hover { color: var(--accent); }

/* ---------- 探索区 ---------- */
.map-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 2px 0;
}
.dungeon-name { font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.dungeon-meta { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.depth-badge {
  font-size: 13px; font-weight: 700; color: var(--accent);
  border: 1.5px solid var(--accent); border-radius: var(--r);
  padding: 4px 10px; letter-spacing: .08em;
}

.depth-track {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px;
}
.depth-dot {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1.5px solid var(--rule); border-radius: 50%;
  font-size: 12px; font-weight: 700; color: var(--ink-faint);
  background: rgba(255,255,255,.4);
}
.depth-dot.done { border-color: var(--accent); color: var(--accent); }
.depth-dot.cur {
  background: var(--accent); border-color: var(--accent-deep);
  color: #FBF6EC;
}
.depth-line { flex: 1; height: 1.5px; background: var(--rule); }

/* 地图 */
.map-card .map-list {
  max-height: 300px; overflow-y: auto;
  display: flex; flex-direction: column-reverse; gap: 6px;
}
.map-entry {
  padding: 9px 12px; border-radius: var(--r);
  border: 1px solid var(--rule);
  background: rgba(255,255,255,.42);
  font-size: 13px; line-height: 1.6;
  animation: slideIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.map-entry .tag {
  display: inline-block; font-size: 10.5px; letter-spacing: .12em;
  padding: 1.5px 6px; border-radius: 2px; margin-right: 8px;
  font-family: "Noto Sans SC", sans-serif; font-weight: 600;
  vertical-align: 1px;
}
.tag-entrance { background: #DFD5BD; color: var(--ink-soft); }
.tag-corridor { background: #E7E0CD; color: var(--ink-faint); }
.tag-room     { background: #EADFC4; color: #7A6440; }
.tag-stairs   { background: #D8E0DC; color: #3E5F53; }
.tag-final    { background: var(--accent); color: #FBF6EC; }
.map-entry .sub {
  display: block; color: var(--ink-soft); font-size: 12.5px;
  padding-left: 2px; margin-top: 3px;
}
.map-entry .mon {
  display: block; color: var(--accent); font-size: 12.5px;
  margin-top: 3px; font-weight: 600;
}
.map-entry.cleared { opacity: .62; }
.map-entry.current { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(168,50,50,.2); }

/* 日志（最新在最上） */
.log {
  max-height: 260px; overflow-y: auto;
  font-size: 13px; line-height: 1.8;
  display: flex; flex-direction: column; gap: 4px;
}
.log-line {
  padding: 5px 10px; border-left: 2px solid var(--rule);
  background: rgba(255,255,255,.3);
  animation: slideIn .25s cubic-bezier(.2,.8,.2,1);
}
.log-line.k-dice   { border-color: var(--accent); }
.log-line.k-combat { border-color: #8A5A2F; background: rgba(138,90,47,.07); }
.log-line.k-loot   { border-color: var(--gold); background: rgba(138,106,47,.09); }
.log-line.k-death  { border-color: #000; background: rgba(0,0,0,.09); font-weight: 700; }
.log-line.k-good   { border-color: #4A6B4A; background: rgba(74,107,74,.09); }

/* ---------- 咒语栏 ---------- */
.spell-list { display: flex; flex-direction: column; gap: 8px; }
.spell-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "name count tag" "eff eff eff";
  gap: 3px 8px;
  text-align: left; width: 100%;
  padding: 9px 11px; cursor: pointer;
  background: linear-gradient(180deg, #FDFAF3, #F7F1E4);
  border: 1.5px solid var(--rule);
  border-radius: var(--r);
  font-family: inherit;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.sp-count {
  grid-area: count; align-self: center;
  font-size: 13px; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sp-count i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-faint); }
.sp-count.empty { color: #A83232; opacity: .6; }
.spell-card:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40,30,15,.14);
}
.spell-card .sp-name { grid-area: name; font-size: 14px; font-weight: 700; color: var(--ink); }
.spell-card .sp-tag {
  grid-area: tag; font-size: 10.5px; letter-spacing: .06em;
  padding: 1px 6px; border-radius: 9px;
  background: rgba(105,169,78,.16); color: #3F6B2E;
  align-self: center; white-space: nowrap;
}
.spell-card .sp-eff {
  grid-area: eff; font-size: 11.5px; color: var(--ink-soft); line-height: 1.5;
}
.spell-card .sp-reason {
  grid-column: 1 / -1; font-size: 11px; color: #A83232; font-weight: 600;
}
.spell-card.disabled { opacity: .5; cursor: not-allowed; }
.spell-card.disabled .sp-tag { background: rgba(120,120,120,.14); color: var(--ink-faint); }
/* 浮层里的选择列表 */
.choice-list { display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
.choice-list .btn { width: 100%; }

/* ---------- 楼层切换标签 ---------- */
.layer-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}
.layer-tab {
  font: inherit; font-size: 11.5px; padding: 4px 10px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: rgba(255,255,255,.6); color: var(--ink-soft);
  cursor: pointer; transition: all .15s;
}
.layer-tab:hover { border-color: var(--accent); color: var(--accent); }
.layer-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.layer-tab.here::after { content: ''; }

/* ---------- 装备面板 ---------- */
.equip-panel { margin: 10px 0 4px; }
.equip-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--ink-faint); margin: 8px 0 5px;
}
.equip-row { display: flex; flex-direction: column; gap: 4px; }
.equip-cell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 5px 8px; border-radius: 6px;
  background: rgba(140, 116, 80, .08);
  border: 1px solid rgba(140, 116, 80, .22);
  font-size: 12px;
}
.equip-cell.empty { background: rgba(140, 116, 80, .04); border-style: dashed; }
.equip-cell .ec-slot {
  flex: 0 0 42px; font-weight: 700; color: var(--ink-soft);
}
.equip-cell .ec-body { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equip-cell .ec-name { font-weight: 600; }
.equip-cell .ec-sub { font-size: 10.5px; color: var(--ink-faint); margin-left: 6px; }
/* 魔法前缀效果因护甲损坏而失效 */
.equip-cell .ec-sub.ec-off { color: #b04a3a; text-decoration: line-through; opacity: .8; }
.equip-cell .ec-none { color: var(--ink-faint); font-style: italic; }
.equip-btn {
  flex: 0 0 auto; font: inherit; font-size: 11px; padding: 3px 9px;
  border-radius: 5px; cursor: pointer;
  border: 1px solid rgba(120, 96, 60, .35);
  background: rgba(255, 252, 244, .9); color: var(--ink);
}
.equip-btn:hover { background: #fff; border-color: var(--accent); }
.equip-btn.danger { color: #a83232; border-color: rgba(168, 50, 50, .35); }
.equip-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ════ 传送选房模式 ════ */
/* 可选为传送目标的房间：高亮 + 脉冲呼吸 */
.mg-seg.mg-teleport {
  cursor: pointer !important;
  outline: 3px solid #7B5CD6;
  outline-offset: -3px;
  background: rgba(123, 92, 214, .18) !important;
  box-shadow: 0 0 0 0 rgba(123, 92, 214, .55);
  animation: tpPulse 1.4s ease-in-out infinite;
  z-index: 5;
}
.mg-seg.mg-teleport:hover {
  background: rgba(123, 92, 214, .32) !important;
  outline-width: 4px;
}
@keyframes tpPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123, 92, 214, .5); }
  50%      { box-shadow: 0 0 0 6px rgba(123, 92, 214, 0); }
}

/* 传送提示条 */
.tp-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; line-height: 1.6;
  padding: 8px 12px; margin-bottom: 10px;
  border-radius: 7px;
  background: rgba(123, 92, 214, .1);
  border-left: 3px solid #7B5CD6;
  color: var(--ink);
}
.tp-hint .tp-ico {
  color: #7B5CD6; font-size: 14px;
  animation: tpIcoSpin 3s linear infinite;
  display: inline-block;
}
@keyframes tpIcoSpin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* 未探索（重进地牢后需重新走过去） */
.map-entry.unvisited { opacity: .55; }
.map-entry .unvisited-tag { color: #b06a3a; font-style: italic; }

/* ════ 地上的物品 ════ */
.ground-item { background: rgba(105, 169, 78, .07); border-left: 3px solid rgba(105, 169, 78, .5); }
.ground-item .inv-name { color: #3d6b2c; }
.ground-actions { display: flex; justify-content: flex-end; padding: 6px 8px 2px; }

/* ════ 副手栏（默认锁火把 / 有光源解锁 / 双手武器占用）════ */
.offhand-cell.locked { background: rgba(120, 120, 120, .09); }
.offhand-cell.locked .ec-slot,
.offhand-cell.locked .ec-none { color: #8a8a8a; }
.offhand-cell.twohanded { background: rgba(123, 92, 214, .08); }
.offhand-cell .ec-dim { color: #7a7a7a; font-style: italic; }

/* ════ 房间内容描述（决策区顶部）════ */
.room-content {
  margin: 0 0 10px; padding: 9px 12px;
  background: rgba(234, 199, 114, .14);
  border-left: 3px solid #EAC772;
  border-radius: 4px;
  font-size: 13.5px; line-height: 1.7; color: #6b5420;
}

/* ════ 被动道具（大师钥匙）════ */
.inv-passive {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  font-size: 10px; line-height: 15px; border-radius: 8px;
  background: rgba(123, 92, 214, .14); color: #6b4fc4;
  border: 1px solid rgba(123, 92, 214, .35);
}

/* ════ 状态栏可点击资源（背包）════ */
.res-clickable { cursor: pointer; border-radius: 6px; transition: background .15s; }
.res-clickable:hover { background: rgba(105, 169, 78, .12); }
.res-clickable:active { background: rgba(105, 169, 78, .2); }
/* 状态栏「咒语」按钮的文字标签（不显示数字，只写「咒语」） */
.res-spell-label { font-size: 15px; font-weight: 600; color: var(--ink-soft); letter-spacing: .5px; }

/* ════ 背包弹窗 ════ */
.bag-modal { max-width: 420px; width: 92vw; }
.bag-modal .bag-count { font-size: 13px; color: var(--ink-faint); margin-left: 6px; font-weight: 400; }
.bag-modal-list { max-height: 52vh; overflow-y: auto; padding: 4px 0; }

/* ════ 咒语弹窗（比背包更大，避免「光照术」这类名字换行）════ */
.spell-modal { max-width: 680px; width: 94vw; text-align: left; }
.spell-modal .dice-label { text-align: center; }
.spell-modal-list { max-height: 68vh; overflow-y: auto; padding: 4px 0; }
.spell-modal-list li {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 11px 4px;
}
.spell-modal-list .inv-name { white-space: nowrap; font-size: 14px; font-weight: 600; }
.spell-modal-list .inv-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.spell-modal-list .sp-count { white-space: nowrap; }
.spell-modal-list .sp-tag { white-space: nowrap; }
.spell-modal-list .btn { white-space: nowrap; padding: 4px 12px; font-size: 12.5px; }
.spell-modal-list .inv-passive { margin-left: 0; white-space: nowrap; }
/* 窄屏（手机）→ 退回两行布局，名字仍不换行 */
@media (max-width: 560px) {
  .spell-modal-list li { grid-template-columns: 1fr auto; row-gap: 4px; }
  .spell-modal-list .inv-desc { grid-column: 1 / -1; }
}

/* ---------- 2D 地图网格 ---------- */
.map-scroll {
  overflow: auto; max-height: 340px; padding: 10px;
  background: rgba(255,255,255,.34);
  border: 1px solid var(--rule); border-radius: var(--r);
  margin-bottom: 12px;
  background-image:
    linear-gradient(rgba(120,105,80,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,105,80,.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.map-grid { position: relative; min-width: 100%; min-height: 60px; }
.mg-seg {
  position: absolute; box-sizing: border-box;
  border: 1.5px solid var(--ink-soft);
  border-radius: 3px;
  background: rgba(253,250,243,.86);
  display: grid; place-items: center;
  transition: box-shadow .15s, border-color .15s;
}
.mg-seg .mg-ico { font-size: 13px; font-weight: 700; color: var(--ink-soft); opacity: .75; }
.mg-entrance { background: rgba(105,169,78,.2); border-color: #69A94E; }
.mg-corridor { background: rgba(141,192,200,.25); border-color: #8DC0C8; }
.mg-room     { background: rgba(234,199,114,.19); border-color: #C9A94E; }
.mg-stairs   { background: rgba(53,93,115,.18); border-color: #355D73; }
.mg-stairs .mg-ico { color: #355D73; opacity: 1; }
.mg-final    { background: rgba(168,50,50,.18); border-color: #A83232; }
.mg-final .mg-ico { color: #A83232; opacity: 1; font-size: 16px; }
.mg-entrance .mg-ico { color: #3F6B2E; opacity: 1; }
.mg-seg.cleared { opacity: .55; }
.mg-seg.cur {
  border-color: var(--accent); border-width: 2.5px;
  box-shadow: 0 0 0 3px rgba(168,50,50,.16), 0 3px 10px rgba(0,0,0,.14);
  opacity: 1; z-index: 3;
}
/* 可点击移动的片段 */
.mg-seg.mg-clickable { cursor: pointer; }
.mg-seg.mg-clickable:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(168,50,50,.2), 0 3px 10px rgba(0,0,0,.16);
  transform: translateY(-1px);
  z-index: 3;
}
.mg-mon {
  position: absolute; top: 1px; right: 2px;
  font-size: 9.5px; font-weight: 700; color: #A83232;
  background: rgba(255,255,255,.85); border-radius: 6px; padding: 0 3px;
}
.mg-chest {
  position: absolute; bottom: 1px; right: 2px;
  font-size: 11px; color: #A9832F;
}
.mg-door {
  position: absolute; z-index: 2;
  background: var(--ink); border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.7);
}
/* 门：画在片段边界线上。已开=绿色实心，未开=红色虚框（一眼看出还能往哪探索） */
.mg-door2 {
  position: absolute; z-index: 6; border-radius: 2px;
  pointer-events: none;
}
.mg-door2.open {
  background: #3E8E41;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.9), 0 1px 4px rgba(0,0,0,.3);
}
.mg-door2.closed {
  background: repeating-linear-gradient(45deg, #D98C1F, #D98C1F 3px, #fff 3px, #fff 6px);
  border: 1.5px solid #B8720F;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.9);
  animation: doorPulse 2.2s ease-in-out infinite;
}
@keyframes doorPulse {
  0%, 100% { opacity: .95; }
  50% { opacity: .55; }
}
.mg-you {
  position: absolute; z-index: 4;
  font-size: 17px; color: var(--accent);
  text-shadow: 0 0 4px rgba(255,255,255,.9);
  animation: pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.86); } }
.map-card .map-list { max-height: 200px; overflow-y: auto; }

/* ---------- 行动区 ---------- */
.action-sub {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
  padding: 10px 2px 2px; margin-top: 4px;
  border-top: 1px dashed var(--rule);
}
.action-body > .action-sub:first-child { border-top: none; margin-top: 0; }
.combat-hint {
  font-size: 11.5px; color: var(--ink-faint); line-height: 1.6;
  padding: 6px 2px; border-top: 1px dashed var(--rule);
}
.action-body { display: flex; flex-direction: column; gap: 8px; }
.action-body .btn { width: 100%; text-align: left; }
.action-body .btn .hint {
  display: block; font-size: 11.5px; color: var(--ink-faint);
  font-weight: 400; margin-top: 2px;
}
.action-body .btn-primary .hint { color: rgba(251,246,236,.75); }

/* 战斗单位 */
.foe-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.foe {
  padding: 9px 11px; border: 1px solid var(--rule); border-radius: var(--r);
  background: rgba(255,255,255,.46);
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
  text-align: left; font-family: inherit; font-size: 13px; color: var(--ink);
  width: 100%;
}
.foe:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.foe:disabled { cursor: default; opacity: .5; }
.foe-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.foe-name { font-weight: 700; }
.foe-dmg { color: var(--accent); font-size: 12px; font-weight: 600; }

.foe-hpbar {
  height: 6px; margin-top: 6px; background: #DCCFB4;
  border-radius: 2px; overflow: hidden;
}
.foe-hpfill { height: 100%; background: linear-gradient(90deg, #B23A3A, #8A2C2C); transition: width .3s; }
.foe-affix {
  font-size: 11px; color: #7A6440; margin-top: 4px;
  letter-spacing: .04em;
}
.foe.dead { opacity: .34; text-decoration: line-through; }

.status-card .row {
  display: flex; justify-content: space-between;
  font-size: 13px; padding: 4px 0;
  border-bottom: 1px dashed var(--rule);
}
.status-card .row:last-child { border-bottom: none; }
.status-card .row .v { color: var(--accent); font-weight: 600; }

/* ---------- 掷骰浮层 ---------- */
.dice-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(36,31,26,.42);
  display: grid; place-items: center;
  animation: fadeIn .18s ease;
}
/* hidden 属性必须能盖过上面的 display:grid，否则浮层永驻且挡住交互 */
.dice-overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.dice-modal {
  background: linear-gradient(180deg, #F7F1E4, var(--paper));
  border: 1.5px solid var(--accent);
  border-radius: var(--r);
  padding: 26px 34px; text-align: center;
  box-shadow: 0 16px 48px rgba(40,30,15,.4);
  animation: popIn .26s cubic-bezier(.2,1.1,.4,1);
  min-width: 240px;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.9) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.dice-label {
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 16px;
  font-family: "Noto Sans SC", sans-serif;
}
.dice-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
/* 骰子：3x3 九宫格，用圆点(pip)表示点数 */
.die {
  width: 52px; height: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 7px; gap: 2px;
  background: #FDFAF3; border: 1.5px solid var(--ink-soft);
  border-radius: 8px;
  box-shadow: var(--shadow);
  animation: tumble .75s cubic-bezier(.3,.9,.4,1) both;
}
.die .pip {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--ink);
  align-self: center; justify-self: center;
  transform: scale(.82);
}
@keyframes tumble {
  0%   { transform: rotate(-32deg) scale(.5); opacity: 0; }
  55%  { transform: rotate(10deg) scale(1.12); opacity: 1; }
  75%  { transform: rotate(-4deg) scale(.97); }
  100% { transform: rotate(0) scale(1); }
}
.die:nth-child(2) { animation-delay: .14s; }
.die:nth-child(3) { animation-delay: .28s; }
.die:nth-child(4) { animation-delay: .42s; }
.die.d1 .pip, .die.d6 .pip { background: var(--accent); }
.die.d1, .die.d6 { border-color: var(--accent); }
.dice-total {
  font-size: 24px; font-weight: 700; color: var(--accent);
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.dice-total small { font-size: 13px; color: var(--ink-faint); font-weight: 400; }
/* 判定结论大字 */
.dice-verdict {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--rule);
  font-size: 21px; font-weight: 800; color: var(--ink);
  letter-spacing: .06em; line-height: 1.5;
  animation: fadeIn .3s ease;
}
.dice-verdict:empty { display: none; }
.dice-actions { margin-top: 18px; }
.dice-actions .btn { min-width: 130px; }

/* ---------- 结束 ---------- */

/* ★ 单页合并（用户 2026-10-02）：大世界屏幕的适配
   #screen-world 是 .screen（display:block），里面装 .wh-page（flex 纵向布局）。
   给屏幕本身一个 100vh 高度约束，让 .wh-page 的 flex 能正确分配空间。 */
#screen-world { height: 100vh; }
#screen-world.active { display: block; }
#screen-world .wh-page { height: 100vh; }

/* ★ 诅咒装备（用户 2026-10-01 定案）：灰显 + 无法卸下 */
.ec-name.ec-cursed { color: #6B6B6B; font-style: italic; }
.ec-sub.ec-cursed { color: #A83232; font-weight: 600; }

/* ★ 被种族恩怨禁止进入的城市（规则书 p20） */
.city-banned {
  padding: 12px 14px; margin: 6px 0;
  background: #F6E7E7; border: 2px solid var(--accent);
  border-radius: 4px; color: #7A2828;
  font-size: 13px; line-height: 1.8;
}

/* ★ 简单确认框（赌博用命下注等） */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(36,31,26,.45);
  display: flex; align-items: center; justify-content: center;
}
.confirm-box {
  background: var(--paper); border: 3px solid var(--ink);
  border-radius: 4px; padding: 20px 22px;
  max-width: 420px; width: 88vw;
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.confirm-title { font-weight: 700; font-size: 15px; margin-bottom: 10px; color: var(--ink); }
.confirm-text { font-size: 13px; line-height: 1.85; color: var(--ink-soft); margin-bottom: 16px; }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.over-panel { text-align: center; }
.over-icon { font-size: 52px; margin-bottom: 12px; color: var(--accent); }
.over-text { color: var(--ink-soft); margin-bottom: 20px; line-height: 1.9; }
.over-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 26px; text-align: left;
}
.over-stats .item {
  padding: 10px 12px; background: rgba(255,255,255,.46);
  border: 1px solid var(--rule); border-radius: var(--r); font-size: 13px;
}
.over-stats .item .lbl { display: block; font-size: 11px; color: var(--ink-faint); letter-spacing: .14em; }
.over-stats .item .val { font-size: 17px; font-weight: 700; color: var(--accent); }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }