/* 修仙場景（2026-10-04.30）：武術道館、五大門派、野外（js/xscene.js、js/xian-world.js、js/dojo.js、js/sect.js、js/wild.js） */
.xw-page { display: grid; gap: 10px; }
.xw-head h1 { margin: 0; font: 900 26px/1.15 var(--serif, serif); }
.xw-head p { margin: 2px 0 0; }
.xw-tip { margin: -4px 2px 0; }
.xw-below { display: grid; gap: 10px; }
.xw-below:empty { display: none; }
.xw-intro > summary { cursor: pointer; font-weight: 800; }
.xw-intro[open] > summary { margin-bottom: 8px; }
.xw-none { margin: 0; padding: 10px 12px; }
.xw-elsewhere { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; }
.xw-elsewhere p { margin: 0 4px 0 0; }

/* 狀態列 */
.xw-hud { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: inset 4px 0 0 var(--xn-c, var(--gold)); }
.xw-hud-me { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; flex: 1 1 220px; }
.xw-hud-me b { font-size: 15px; }
.xw-hud-rl { font-size: 13px; font-weight: 700; color: var(--xn-c, var(--gold)); }
.xw-hud-me .xn-bar { flex: 1 1 90px; min-width: 80px; max-width: 220px; }
.xw-hud-cur { display: flex; gap: 10px; font-size: 13px; white-space: nowrap; }
.xw-hud-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; align-items: center; }
.xw-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--surface-2, rgba(0, 0, 0, 0.05)); border: 1px solid var(--line-2); white-space: nowrap; }
.xw-chip.hot { border-color: #e8963a; color: #b8601a; font-weight: 700; animation: xw-pulse 1.6s ease-in-out infinite; }
@keyframes xw-pulse { 50% { box-shadow: 0 0 0 3px rgba(232, 150, 58, 0.25); } }

/* 場景 */
.xw-scenebox { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px var(--xn-c, var(--line-2)), 0 6px 18px rgba(0, 0, 0, 0.18); background: #1a1410; }
.xs { position: relative; width: 100%; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.xs-canvas { display: block; width: 100%; image-rendering: pixelated; image-rendering: crisp-edges; cursor: pointer; }
.xs.locked .xs-canvas { cursor: progress; }
.xs-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.xs-tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 1px 6px 2px; border-radius: 6px; white-space: nowrap;
  background: rgba(20, 14, 10, 0.62); color: #fbf2dc; line-height: 1.15; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.xs-tag b { font-size: 12px; font-weight: 800; }
.xs-tag small { font-size: 10px; opacity: 0.8; }
.xs-tag.me { background: color-mix(in srgb, var(--xs-c, #5a6a8a) 80%, #000); box-shadow: 0 0 0 1px rgba(255, 240, 200, 0.6); }
.xs-tag.mk { padding-top: 2px; }
.xs-mk { position: absolute; top: -15px; font-style: normal; font-size: 13px; font-weight: 900; line-height: 1; padding: 1px 5px; border-radius: 999px; background: #ffd04a; color: #4a2a00;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); animation: xs-bob 1.2s ease-in-out infinite; }
@keyframes xs-bob { 50% { transform: translateY(-3px); } }
.xs-bub { position: absolute; left: 0; top: 0; max-width: 220px; padding: 5px 9px; border-radius: 10px; background: #fffaf0; color: #3a2a18; font-size: 13px; font-weight: 700; line-height: 1.35;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); white-space: normal; text-align: center; }
.xs-bub::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #fffaf0; }
.xw-place { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: grid; justify-items: center; padding: 6px 22px 8px; border-radius: 10px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(16, 10, 6, 0.7) 20%, rgba(16, 10, 6, 0.7) 80%, transparent); color: #fff4d8; transition: opacity 0.9s ease; animation: xw-in 0.8s ease both; }
.xw-place b { font: 900 22px/1.2 var(--serif, serif); letter-spacing: 0.2em; }
.xw-place small { font-size: 11px; opacity: 0.8; letter-spacing: 0.3em; }
.xw-place.out { opacity: 0; }
@keyframes xw-in { from { opacity: 0; transform: translate(-50%, -6px); } }

/* 戰鬥：整個畫面蓋上去 */
.xw-battle { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; gap: 8px; padding: 12px; background: rgba(8, 6, 4, 0.82); opacity: 0; transition: opacity 0.2s ease; }
.xw-battle.open { opacity: 1; }
.xw-battle .exp-scene { width: min(96vw, 900px); max-width: none; }
.xw-battle-t { margin: 0; text-align: center; color: #fbeed3; font: 900 18px/1.2 var(--serif, serif); letter-spacing: 0.08em; }

/* 對話框（2026-10-04.30 版面：左邊人、右邊說的話；清單、選項在下面；手機上人變小、清單和選項拉滿寬） */
.xd { grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: 'pic box' 'pic extra' 'pic opts'; align-items: start; row-gap: 8px; }
.xd > .xd-stage { grid-area: pic; align-self: stretch; }
.xd > .xd-box { grid-area: box; }
.xd > .xd-extra { grid-area: extra; min-width: 0; }
.xd > .xd-opts { grid-area: opts; }
.xd-pic svg { max-width: 132px; height: auto !important; }
@media (max-width: 520px) {
  .xd { grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: 'pic box' 'extra extra' 'opts opts'; column-gap: 8px; }
  .xd > .xd-stage { min-height: 112px; padding: 4px 0 6px; place-items: end center; }
  .xd-pic svg { width: 78px !important; height: auto !important; }
  .xd-pic .xw-foepic { width: 80px; }
  .xd-hall { left: 4px; top: 4px; font-size: 10px; padding: 0 5px; }
  .xd > .xd-box { padding: 8px 10px; }
  .xd-text { font-size: 14px; min-height: 2.6em; }
  .xd-name b { font-size: 15px; }
}
/* 對話框：怪的大圖、丹房的清單 */
.xd-stage.xd-foe { background: linear-gradient(180deg, #3a2430 0%, #2a1a1e 70%, #1a1012 100%); box-shadow: inset 0 0 0 2px #8a2a1a; }
.xw-foepic { display: block; image-rendering: pixelated; max-width: 130px; height: auto; }
.xw-shop .xw-pill.off { opacity: 0.72; }
.xw-shop .xc-pill-ico { font-size: 22px; }
.xd-extra:empty { display: none; }
.xd-list.xm-list .xm-card { margin: 0; }
.xw-bagbody { display: grid; gap: 10px; }
.xw-panel .sheet-body { display: grid; gap: 8px; }
.dj-rules { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

@media (max-width: 520px) {
  .xw-head h1 { font-size: 22px; }
  .xw-hud { padding: 6px 10px; }
  .xw-hud-btns { margin-left: 0; }
  .xw-place b { font-size: 18px; }
  .xs-tag b { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .xs-mk, .xw-chip.hot { animation: none; } }