:root {
  color-scheme: dark;
  --bg: #08050d;
  --ink: #f5ead9;
  --muted: #a994b8;
  --muted-2: #766281;
  --pumpkin: #ff8422;
  --pumpkin-hi: #ffc46b;
  --pumpkin-deep: #8f3f0b;
  --violet: #b184d6;
  --line: #382343;
  --line-strong: #593569;
  --panel: rgba(17, 9, 24, 0.92);
  --mono: "Cascadia Mono", "Courier New", ui-monospace, monospace;
  --sans: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100svh;
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 13% 12%, rgba(255, 233, 196, 0.33) 0 1px, transparent 1.8px),
    radial-gradient(circle at 79% 19%, rgba(255, 233, 196, 0.24) 0 1px, transparent 1.8px),
    radial-gradient(circle at 91% 8%, rgba(255, 233, 196, 0.28) 0 1px, transparent 1.8px),
    radial-gradient(circle at 54% 76%, rgba(209, 178, 226, 0.18) 0 1px, transparent 1.6px),
    radial-gradient(ellipse at 50% 112%, rgba(139, 63, 17, 0.19), transparent 55%),
    radial-gradient(ellipse at 8% -8%, rgba(104, 59, 142, 0.17), transparent 56%),
    radial-gradient(ellipse at 92% 94%, rgba(68, 37, 90, 0.12), transparent 46%),
    linear-gradient(180deg, #07040c 0%, #0c0713 52%, #08050d 100%);
  overflow-x: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(255, 255, 255, 0.014) 3px,
    rgba(255, 255, 255, 0.014) 4px
  );
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background: radial-gradient(ellipse at 50% 46%, transparent 42%, rgba(3, 1, 6, 0.52) 100%);
}

button,
kbd {
  font: inherit;
}

.page {
  --shell-width: min(1280px, calc((100svh - 220px) * 16 / 9));
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(1280px, calc(100% - 48px));
  min-height: 100svh;
  margin: 0 auto;
  padding: 24px 0 20px;
}

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  width: min(100%, var(--shell-width));
  margin: 0 auto 18px;
}

.brand {
  min-width: 0;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 5px;
  height: 5px;
  content: "";
  background: var(--pumpkin);
  box-shadow: 0 0 10px rgba(255, 132, 34, 0.9);
}

.brand h1 {
  display: flex;
  align-items: baseline;
  gap: 13px;
  margin: 7px 0 0;
  color: #f8eddc;
  font-family: var(--sans);
  font-size: clamp(30px, 3.3vw, 43px);
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-shadow: 0 0 26px rgba(255, 153, 67, 0.09);
}

.latin {
  color: #7f698a;
  font-family: var(--mono);
  font-size: 0.36em;
  font-weight: 400;
  letter-spacing: 0.23em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  color: #c3adcf;
  font-size: 15px;
  letter-spacing: 0.09em;
  background: linear-gradient(180deg, rgba(39, 23, 51, 0.72), rgba(20, 11, 28, 0.68));
  border: 1px solid #3c2649;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.status-dot {
  width: 5px;
  height: 5px;
  background: var(--pumpkin);
  box-shadow: 0 0 9px rgba(255, 132, 34, 0.9);
  animation: status-pulse 2.4s steps(2, end) infinite;
}

.game-shell {
  width: min(100%, var(--shell-width));
  min-width: 0;
  margin: 0 auto;
}

.frame {
  position: relative;
  padding: 5px;
  background: linear-gradient(145deg, #21132d 0%, #130b1b 52%, #1c1026 100%);
  border: 1px solid #452b55;
  box-shadow:
    0 0 0 1px rgba(4, 1, 7, 0.9),
    0 22px 70px rgba(0, 0, 0, 0.66),
    0 0 60px rgba(124, 71, 160, 0.06);
}

.frame::before,
.frame::after {
  position: absolute;
  width: 18px;
  height: 18px;
  content: "";
  border-color: rgba(255, 168, 82, 0.5);
  pointer-events: none;
}

.frame::before {
  top: -4px;
  left: -4px;
  border-top: 1px solid;
  border-left: 1px solid;
}

.frame::after {
  right: -4px;
  bottom: -4px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0b0710;
  border: 1px solid #2b1937;
  isolation: isolate;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.screen-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(8, 3, 12, 0.18) 0,
    rgba(8, 3, 12, 0.18) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.38;
}

.screen-fx::after {
  position: absolute;
  inset: 0;
  content: "";
  box-shadow:
    inset 0 0 80px rgba(3, 1, 8, 0.48),
    inset 0 0 18px rgba(0, 0, 0, 0.22);
}

/* ---------- 游戏内 HUD ---------- */

.player-panel {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 290px;
  padding: 15px 16px 13px;
  color: #bda8c7;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.03em;
  pointer-events: none;
  user-select: none;
  background:
    linear-gradient(145deg, rgba(30, 17, 40, 0.97), rgba(11, 7, 16, 0.95));
  border: 1px solid rgba(100, 63, 122, 0.7);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.player-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* 给右上角的折叠按钮让出位置 */
  padding-right: 26px;
}

/* ---------- 右上角面板的折叠 ---------- */

.panel-collapse {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  color: #c9a9d8;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  background: rgba(18, 10, 24, 0.94);
  border: 1px solid rgba(120, 79, 140, 0.72);
}

.panel-collapse:hover,
.panel-collapse:focus-visible {
  color: #ffe2a8;
  border-color: rgba(227, 165, 88, 0.8);
}

.panel-collapse:focus-visible {
  outline: 1px dashed #ffd894;
  outline-offset: 2px;
}

.panel-collapse-mark {
  font-size: 13px;
}

.panel-collapse-label {
  display: none;
}

.panel-compact {
  display: none;
}

/* 第二形态：简省信息版。只留主题、进度和一两条关键数字。 */
.player-panel[data-collapse="compact"] {
  width: 230px;
  padding: 12px 13px 10px;
}

.player-panel[data-collapse="compact"] .panel-theme {
  margin: 3px 0 7px;
  font-size: 17px;
}

.player-panel[data-collapse="compact"] .panel-memorial,
.player-panel[data-collapse="compact"] .panel-sneak,
.player-panel[data-collapse="compact"] .panel-grid,
.player-panel[data-collapse="compact"] .panel-charge,
.player-panel[data-collapse="compact"] .panel-effects,
.player-panel[data-collapse="compact"] .panel-fit-line,
.player-panel[data-collapse="compact"] .panel-bar--fit {
  display: none;
}

.player-panel[data-collapse="compact"] .panel-progress-line {
  margin-bottom: 3px;
}

.player-panel[data-collapse="compact"] .panel-bar {
  margin-bottom: 7px;
}

.player-panel[data-collapse="compact"] .panel-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-top: 7px;
  color: #8e7b99;
  font-size: 13px;
  border-top: 1px dashed rgba(93, 61, 111, 0.38);
}

.panel-compact-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.panel-compact-cell i {
  color: #8e7b99;
  font-style: normal;
}

.panel-compact-cell b {
  color: #f0e1f2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 第三形态：只剩一枚开关，点一下重新展开。 */
.player-panel[data-collapse="switch"] {
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  clip-path: none;
}

.player-panel[data-collapse="switch"] .panel-content {
  display: none;
}

.player-panel[data-collapse="switch"] .panel-collapse {
  position: static;
  height: 26px;
  padding: 0 9px;
  color: #e7c79a;
  background: linear-gradient(145deg, rgba(30, 17, 40, 0.97), rgba(11, 7, 16, 0.95));
  border-color: rgba(168, 132, 84, 0.66);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.36);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

.player-panel[data-collapse="switch"] .panel-collapse-mark {
  color: #ffbf6e;
}

.player-panel[data-collapse="switch"] .panel-collapse-label {
  display: inline;
}

.player-panel.is-parade[data-collapse="switch"] .panel-collapse {
  color: #ffbda2;
  border-color: rgba(196, 86, 72, 0.7);
}

.player-panel.is-parade[data-collapse="switch"] .panel-collapse-mark {
  color: #ff8a6d;
}

.player-panel.is-sneak[data-collapse="switch"] .panel-collapse {
  color: #a6e3d5;
  border-color: rgba(86, 160, 140, 0.7);
}

.player-panel.is-sneak[data-collapse="switch"] .panel-collapse-mark {
  color: #7fd8c2;
}

/* 没有皮鞋的线路：面板与背包都不摆鞋。 */
.player-panel.is-shoeless .panel-fit-line,
.player-panel.is-shoeless .panel-bar--fit {
  display: none;
}

.panel-title {
  color: #d9c4e2;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.panel-mode {
  padding: 2px 6px;
  color: #e7b77c;
  font-size: 13px;
  letter-spacing: 0.1em;
  border: 1px solid rgba(201, 137, 72, 0.4);
}

.panel-theme {
  margin: 6px 0 10px;
  color: #ffe0a6;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* ---------- 追思路线「三盏灯」的玩家面板 ---------- */

.panel-memorial {
  margin: 8px 0 11px;
  padding: 9px 10px 10px;
  background: linear-gradient(160deg, rgba(52, 40, 34, 0.55), rgba(23, 16, 26, 0.5));
  border: 1px solid rgba(168, 132, 84, 0.36);
}

.panel-memorial-row,
.panel-memorial-lights {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: #a48d7b;
  font-size: 14px;
}

.panel-memorial-row > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.panel-memorial-row + .panel-memorial-row {
  margin-top: 5px;
}

.panel-memorial-lights + .panel-memorial-lights {
  margin-top: 5px;
}

.panel-memorial-row b {
  flex: 1 1 auto;
  min-width: 0;
  color: #f0dfc8;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: right;
}

.panel-memorial-body {
  margin: 8px 0 9px;
  color: #c6b39f;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0.02em;
}

/* 人物小传的英文一行：只比中文小一点，颜色压一档，和中文同一段。 */
.panel-memorial-en {
  margin: -5px 0 9px;
  color: #9c8aa8;
  font-family: var(--sans);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.panel-memorial-lights b {
  color: #ffd894;
  font-weight: 700;
}

/* 魑魅魍魉的赛道标签：简单 / 普通 / 困难 */
.panel-parade-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  color: #e8d3b4;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  border-bottom: 1px dashed rgba(168, 132, 84, 0.36);
}

.panel-parade-track b {
  padding: 1px 7px;
  color: #1c1320;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  background: #d9b884;
  border-radius: 2px;
}

.panel-parade-track b[data-loss-rule="sacrifice"] {
  color: #2a0e12;
  background: #e08a7a;
}

.player-panel.is-memorial .panel-charge {
  display: none;
}

.player-panel.is-memorial .panel-theme {
  color: #ffd6a0;
}

.panel-progress-line,
.panel-fit-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: #8e7b99;
  font-size: 14px;
}

.panel-progress-line b,
.panel-fit-line b {
  color: #e8d4ef;
  font-weight: 700;
}

.panel-bar {
  height: 4px;
  margin-bottom: 9px;
  overflow: hidden;
  background: #26162f;
}

.panel-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #cb6d1c, #ffc15c);
  transition: width 220ms ease;
}

.panel-bar--fit {
  margin-bottom: 1px;
}

.panel-bar--fit i {
  background: linear-gradient(90deg, #4e7689, #94dce4);
}

.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 11px;
  margin: 10px 0;
  padding: 9px 0;
  border-top: 1px solid rgba(93, 61, 111, 0.34);
  border-bottom: 1px solid rgba(93, 61, 111, 0.34);
}

.panel-grid div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
}

/* 去掉合脚度后剩下五格，时装独占一行，免得最后一行只站半格。 */
#panelCostumeCell {
  grid-column: 1 / -1;
}

.panel-grid span {
  color: #887391;
  font-size: 14px;
}

.panel-grid b {
  color: #f0e1f2;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.panel-charge {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: #8c7b95;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.panel-charge i {
  width: 6px;
  height: 6px;
  background: #5b4362;
  box-shadow: none;
}

.panel-charge.is-charged {
  color: #8de7ff;
}

.panel-charge.is-charged i {
  background: #77e2ff;
  box-shadow: 0 0 7px rgba(103, 223, 255, 0.9);
  animation: status-pulse 1.6s steps(2, end) infinite;
}

.field-hud {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 3;
  width: 300px;
  padding: 12px 14px 11px;
  color: #91aebc;
  font-family: var(--mono);
  font-size: 13px;
  pointer-events: none;
  user-select: none;
  background:
    linear-gradient(150deg, rgba(11, 17, 27, 0.92), rgba(8, 7, 14, 0.9));
  border: 1px solid rgba(76, 123, 144, 0.55);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(159, 236, 255, 0.04);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: #bbeeff;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.field-head span:last-child {
  color: #6e94a2;
  font-size: 12px;
}

.field-values {
  display: flex;
  gap: 20px;
  margin-bottom: 9px;
  color: #62818e;
}

.field-values span {
  white-space: nowrap;
}

.field-values b {
  color: #d5f6ff;
  font-weight: 700;
}

.field-speed-line,
.field-reading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.field-speed-line {
  margin-bottom: 5px;
  color: #6f8e9b;
}

.field-speed-line b {
  color: #b7f0ff;
  font-weight: 700;
}

.field-speed-track {
  position: relative;
  height: 5px;
  margin-bottom: 6px;
  overflow: hidden;
  background: #172530;
}

.field-speed-track i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #357e91, #8ee6f4);
  transition: width 80ms linear;
}
.field-speed-track i.is-reversed {
  background: linear-gradient(90deg, #7b3030, #ff8a6a);
}

.field-speed-track em {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 1px;
  height: 10px;
  background: #ffd27c;
  box-shadow: 0 0 5px rgba(255, 196, 96, 0.8);
}

.field-reading {
  color: #728893;
  font-size: 12px;
}

.field-reading b {
  color: #d5f6ff;
  font-weight: 700;
}

.field-reading span:last-child {
  color: #b7a06e;
}

.field-status {
  margin-top: 7px;
  padding-top: 6px;
  color: #b3dce5;
  line-height: 1.45;
  border-top: 1px solid rgba(76, 123, 144, 0.24);
}

.field-status.is-alert {
  color: #ffaaa2;
}

.field-status.is-good {
  color: #a7f0cf;
}

.field-controls {
  margin-top: 3px;
  color: #5f8794;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.field-hud--static {
  border-color: rgba(98, 97, 164, 0.55);
  background: linear-gradient(150deg, rgba(14, 15, 31, 0.92), rgba(8, 7, 15, 0.9));
}

.field-hud--static .field-head {
  color: #c3c8ff;
}

.field-hud--static p {
  margin: 4px 0 7px;
  color: #a6a8c8;
  line-height: 1.5;
}

.static-q {
  display: flex;
  justify-content: space-between;
  color: #777da8;
}

.static-q b {
  color: #9deaff;
  font-weight: 700;
}

.interaction-prompt {
  position: absolute;
  bottom: 16px;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  color: #d8e5e9;
  font-family: var(--mono);
  font-size: 16px;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(11, 10, 17, 0.9);
  border: 1px solid rgba(83, 124, 137, 0.55);
  transform: translateX(-50%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

.interaction-prompt.is-locked {
  color: #dca6a4;
  border-color: rgba(143, 75, 75, 0.6);
}

.tutorial-coach {
  position: absolute;
  top: 100px;
  left: 16px;
  z-index: 3;
  width: min(430px, calc(100% - 336px));
  padding: 13px 16px 14px;
  color: #dfedd1;
  font-size: 16px;
  line-height: 1.6;
  pointer-events: auto;
  background:
    linear-gradient(135deg, rgba(21, 28, 20, 0.94), rgba(10, 12, 10, 0.9));
  border: 1px solid rgba(114, 136, 90, 0.55);
  border-left: 3px solid #d59642;
  box-shadow:
    0 9px 26px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.tutorial-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  color: #9aac84;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.09em;
}

.tutorial-coach p {
  margin: 0;
  color: #e4efda;
  letter-spacing: 0.02em;
}

.tutorial-pips {
  display: flex;
  gap: 5px;
  margin-top: 9px;
}

.tutorial-pips i {
  display: block;
  flex: 1 1 0;
  min-width: 4px;
  max-width: 16px;
  height: 3px;
  background: #3a4432;
}

.tutorial-pips i.is-done {
  background: #d29a4e;
}

.tutorial-pips i.is-current {
  background: #f2c777;
  box-shadow: 0 0 5px rgba(255, 198, 105, 0.5);
}

.text-button {
  padding: 2px;
  color: #a391aa;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0.05em;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(164, 140, 174, 0.3);
}

.text-button:hover {
  color: #f2d9b3;
  border-bottom-color: rgba(255, 196, 108, 0.6);
}

.text-button:focus-visible {
  outline: 1px solid #ffd88b;
  outline-offset: 2px;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: clamp(16px, 2.6vw, 36px);
  background:
    radial-gradient(ellipse at 50% 36%, rgba(72, 39, 92, 0.26), transparent 53%),
    linear-gradient(180deg, rgba(7, 4, 11, 0.7), rgba(6, 3, 10, 0.87));
  backdrop-filter: blur(1.5px) saturate(0.85);
}

.overlay[hidden] {
  display: none;
}

.start-panel {
  width: min(100%, 820px);
  max-width: 820px;
  text-align: center;
  animation: panel-in 0.55s steps(7, end) both;
}

.pumpkin-emblem {
  width: clamp(60px, 7.5vw, 90px);
  height: clamp(60px, 7.5vw, 90px);
  margin: 0 auto 14px;
  filter:
    drop-shadow(0 0 14px rgba(255, 116, 22, 0.28))
    drop-shadow(0 6px 0 rgba(7, 3, 11, 0.6));
  animation: emblem-float 4.5s ease-in-out infinite;
}

.pumpkin-emblem svg {
  display: block;
  width: 100%;
  height: 100%;
}

.overlay-kicker {
  margin: 0;
  color: #9b7fac;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  line-height: 1.5;
  text-transform: uppercase;
}

.overlay h2 {
  margin: 11px 0 12px;
  color: #faefdd;
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.08;
  text-shadow:
    0 2px 0 #2b1523,
    0 0 34px rgba(255, 151, 64, 0.12);
}

.overlay-copy {
  margin: 0 0 19px;
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 19px);
  letter-spacing: 0.04em;
  line-height: 1.85;
}

.goal-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 20px;
  padding: 7px 14px;
  color: #e9b878;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  background: rgba(255, 147, 51, 0.035);
  border: 1px dashed rgba(211, 152, 84, 0.4);
}

/* 起始页：标题区收紧，入口排成整齐的两列。
   整个画面按 1280×720 设计，这里的尺寸直接用 px，跟着 UI 一起缩放。 */
.start-brand {
  margin: 0 0 6px;
  color: #c9a970;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  line-height: 1.4;
  text-transform: uppercase;
}

.start-panel .pumpkin-emblem {
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
}

.start-panel .overlay-kicker {
  font-size: 12px;
}

.start-panel h2 {
  margin: 7px 0 9px;
  font-size: 42px;
  letter-spacing: 0.09em;
}

.start-panel .overlay-copy {
  margin-bottom: 9px;
  font-size: 15.5px;
  line-height: 1.7;
}

.start-panel .goal-badge {
  margin: 0 auto 12px;
  padding: 5px 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.start-panel .mini-controls {
  margin-top: 8px;
  font-size: 13.5px;
}

.start-panel .save-reset-button {
  margin-top: 6px;
}

.primary-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-width: 212px;
  padding: 15px 28px;
  color: #261006;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.16em;
  cursor: pointer;
  background: linear-gradient(180deg, #ffc76c 0%, #ff9b31 48%, #fb7a14 100%);
  border: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow:
    0 5px 0 #7f3307,
    0 11px 32px rgba(255, 123, 26, 0.18),
    inset 0 1px 0 rgba(255, 243, 212, 0.7);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    filter 120ms ease;
}

.primary-button:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow:
    0 7px 0 #7f3307,
    0 15px 38px rgba(255, 123, 26, 0.24),
    inset 0 1px 0 rgba(255, 243, 212, 0.7);
}

.primary-button:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 #7f3307,
    0 6px 18px rgba(255, 123, 26, 0.16),
    inset 0 1px 0 rgba(255, 243, 212, 0.6);
}

.primary-button:focus-visible {
  outline: 2px solid #ffe2a7;
  outline-offset: 4px;
}

.button-arrow {
  font-family: var(--mono);
  font-size: 19px;
  transition: transform 150ms ease;
}

.primary-button:hover .button-arrow {
  transform: translateX(3px);
}

.secondary-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 180px;
  padding: 14px 24px;
  color: #dac7e2;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  background: linear-gradient(180deg, #271630, #170e1f);
  border: 1px solid #4b3058;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  box-shadow:
    0 4px 0 #09050d,
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
}

.secondary-button:hover {
  background: linear-gradient(180deg, #33203e, #1c1125);
  border-color: #76518a;
  transform: translateY(-2px);
}

.secondary-button:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 #09050d,
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.secondary-button:focus-visible {
  outline: 2px solid #e3bff2;
  outline-offset: 4px;
}

/* 起始页的入口竖着按主次排开：教程 → 主线 → 附带的夜路。 */
.mode-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.mode-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mode-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 分组标题：左边是类别，右边是这一组的状态（走到第几段 / 是否开放）。 */
.mode-group-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 2px 0;
  color: #a58bb4;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.2em;
}

.mode-group-title b {
  color: #d6c1e2;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* 教程还没走完：分组标题跟着压暗，视线留在教程那一块上。 */
.mode-actions[data-gate="tutorial"] .mode-group-title {
  color: #6e5a7c;
}

.mode-actions[data-gate="tutorial"] .mode-group-title b {
  color: #8a7398;
}

.primary-button.mode-button,
.secondary-button.mode-button {
  width: 100%;
  min-width: 0;
  min-height: 64px;
  flex-direction: column;
  gap: 3px;
  padding: 8px 18px;
  letter-spacing: 0.08em;
}

.primary-button.mode-button {
  color: #261006;
  border: 1px solid rgba(255, 226, 166, 0.58);
  filter: drop-shadow(0 4px 0 rgba(83, 31, 5, 0.72));
}

.primary-button.mode-button:hover {
  filter: brightness(1.06) drop-shadow(0 5px 0 rgba(83, 31, 5, 0.72));
}

.secondary-button.mode-button {
  color: #e5d7ea;
  filter: drop-shadow(0 4px 0 rgba(7, 3, 11, 0.65));
}

/* 教程、主线是起始页的两根主心骨：走教程时教程在上，
   教程走完之后主线顶上来，两块都比旁边高一号。 */
.primary-button.mode-button.mode-button--tutorial {
  min-height: 78px;
}

.primary-button.mode-button.mode-button--tutorial .mode-main,
.primary-button.mode-button.mode-button--memorial .mode-main {
  font-size: 20px;
  letter-spacing: 0.14em;
}

/* 追思路线：南瓜派的暖金，在整片紫黑里亮半格。 */
.primary-button.mode-button.mode-button--memorial {
  min-height: 78px;
  color: #ffe8c6;
  border: 1px solid rgba(255, 190, 108, 0.62);
  background:
    linear-gradient(160deg, rgba(78, 46, 28, 0.98), rgba(26, 16, 24, 0.99));
  box-shadow:
    0 5px 0 #2d1608,
    0 14px 34px rgba(255, 150, 60, 0.16),
    inset 0 1px 0 rgba(255, 214, 150, 0.14);
}

.primary-button.mode-button.mode-button--memorial:hover {
  color: #fff5e2;
  border-color: rgba(255, 196, 118, 0.9);
  filter: brightness(1.05) drop-shadow(0 6px 0 rgba(83, 31, 5, 0.6));
}

.mode-button--memorial .mode-badge {
  color: #ffd489;
  background: #472a0f;
  border-color: rgba(226, 158, 76, 0.55);
}

/* 魑魅魍魉：更深、更红，像一盏被风吹斜的引路灯。 */
.mode-button--parade {
  color: #ffe0d2;
  border-color: rgba(214, 92, 64, 0.55);
  background:
    linear-gradient(160deg, rgba(62, 24, 28, 0.97), rgba(20, 9, 18, 0.99));
}

.mode-button--parade:hover {
  color: #fff0e4;
  border-color: rgba(255, 132, 104, 0.8);
}

.mode-button--parade .mode-badge {
  color: #ffc2a6;
  background: #4d1618;
  border-color: rgba(214, 92, 64, 0.62);
}

/* Trick or Treat：糖纸街的糖紫与暖橙，和其它线路分开。 */
.mode-button--trick {
  color: #ffe6f2;
  border-color: rgba(224, 130, 200, 0.5);
  background:
    linear-gradient(160deg, rgba(58, 28, 58, 0.97), rgba(22, 12, 30, 0.99));
}

.mode-button--trick:hover {
  color: #fff4fa;
  border-color: rgba(255, 180, 235, 0.78);
}

.mode-button--trick .mode-badge {
  color: #ffd0ec;
  background: #4a2448;
  border-color: rgba(224, 130, 200, 0.55);
}

.player-panel.is-trick .panel-charge {
  display: none;
}

.player-panel.is-trick .panel-theme {
  color: #ffd6a0;
}

/* 继续上次的夜路：比其它入口更暖，排在第一位。 */
.primary-button.mode-button.mode-button--continue {
  color: #2a1706;
  border-color: rgba(255, 226, 166, 0.9);
  background:
    linear-gradient(160deg, #f3c972, #d98f3c);
  filter: drop-shadow(0 5px 14px rgba(240, 178, 80, 0.35));
}

.primary-button.mode-button.mode-button--continue:hover {
  filter: brightness(1.06) drop-shadow(0 6px 16px rgba(240, 178, 80, 0.48));
}

.mode-button--continue .mode-badge {
  color: #2a1706;
  background: #ffe6ac;
  border-color: rgba(120, 72, 18, 0.35);
}

.mode-button--continue .mode-sub {
  opacity: 0.78;
}

/* 教程没走完：主线与两条附带的夜路压暗、不跟手，点了只给一句提示。 */
.mode-actions .mode-button.is-locked,
.mode-actions .mode-button.is-locked:hover,
.mode-actions .mode-button.is-locked:active {
  transform: none;
  cursor: not-allowed;
  opacity: 0.58;
  filter: grayscale(0.6);
}

/* 教程走完以后它收成一行小字，把位置让给主线。 */
.start-replay-tutorial {
  align-self: center;
  margin-top: 1px;
  font-size: 12.5px;
}

/* 清档入口只在小字区域出现，不抢主按钮。 */
.save-reset-button {
  margin-top: 10px;
  padding: 4px 10px;
  border: 0;
  background: none;
  color: #8f7c9c;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(143, 124, 156, 0.4);
  text-underline-offset: 3px;
}

.save-reset-button:hover {
  color: #d9c6e4;
}

/* 魑魅魍魉的玩家面板：没有电荷，只有队伍与门；糖果状态来自糖袋。 */
.player-panel.is-parade .panel-charge {
  display: none;
}

.player-panel.is-parade .panel-theme {
  color: #ffbda2;
}

.player-panel.is-parade .panel-bar--fit {
  background: linear-gradient(90deg, #5a2b28, #923f3a);
}

.mode-main {
  font-size: 17.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.mode-sub {
  color: inherit;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.5;
  opacity: 0.78;
}

.mode-badge {
  position: absolute;
  top: 5px;
  right: 8px;
  padding: 3px 7px;
  color: #ffe3ad;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  background: #50230c;
  border: 1px solid #9b5b25;
}

.mini-controls,
.pause-tips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  margin-top: 20px;
  color: #8c7898;
  font-size: 14px;
  letter-spacing: 0.03em;
}

.mini-controls span,
.pause-tips span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  padding: 0 6px;
  color: #dac8e1;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #2a1834, #191020);
  border: 1px solid #4d305c;
  border-bottom-color: #2c1b38;
  border-radius: 2px;
  box-shadow:
    0 2px 0 #08040d,
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pause-overlay {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(67, 37, 86, 0.2), transparent 50%),
    rgba(5, 2, 8, 0.76);
}

.pause-panel {
  width: min(100%, 470px);
  padding: clamp(26px, 4vw, 38px);
  text-align: center;
  background:
    linear-gradient(145deg, rgba(35, 20, 46, 0.93), rgba(14, 8, 20, 0.95));
  border: 1px solid #432a53;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  animation: panel-in 0.25s steps(5, end) both;
}

.pause-panel h2 {
  margin: 12px 0 11px;
  font-size: clamp(29px, 3.4vw, 40px);
  letter-spacing: 0.07em;
}

.pause-panel .primary-button {
  min-width: 190px;
  margin-top: 3px;
  padding-block: 13px;
}

.pause-tips {
  margin-top: 19px;
}

.pause-themes-button {
  display: flex;
  width: 100%;
  margin-top: 11px;
  padding-block: 11px;
}

/* ---------- 主题目录 ---------- */

.theme-overlay,
.inventory-overlay,
.complete-overlay {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(66, 40, 86, 0.24), transparent 56%),
    rgba(5, 2, 8, 0.78);
}

.theme-panel,
.inventory-panel,
.complete-panel {
  width: min(100%, 900px);
  max-height: 100%;
  overflow: auto;
  padding: clamp(22px, 3.6vw, 36px);
  background:
    linear-gradient(145deg, rgba(32, 19, 43, 0.96), rgba(12, 7, 18, 0.97));
  border: 1px solid #4b3059;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  animation: panel-in 0.3s steps(5, end) both;
}

.theme-panel h2,
.inventory-panel h2,
.complete-panel h2 {
  margin: 9px 0 8px;
  font-size: clamp(31px, 3.8vw, 44px);
  letter-spacing: 0.08em;
}

.theme-panel > .overlay-copy,
.complete-panel > .overlay-copy {
  margin-bottom: 12px;
}

/* ---------- 皮鞋的信：主线第一次通关、回到目录时出现一次 ---------- */

.letter-overlay {
  /* 盖在起始页之上；读完才回到目录。 */
  z-index: 9;
  /* 信比较长：矮屏幕从顶上开始排，超出的部分由遮罩自己滚动。 */
  align-items: safe center;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(120, 84, 40, 0.22), transparent 55%),
    rgba(5, 2, 8, 0.84);
}

.letter-panel {
  width: min(100%, 800px);
  padding: clamp(26px, 4vw, 44px);
  color: #3a2a1c;
  text-align: left;
  background:
    linear-gradient(160deg, #f4e8ca 0%, #ecdbb4 55%, #e2cf9f 100%);
  border: 1px solid #c9a86e;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.56),
    inset 0 0 68px rgba(122, 86, 40, 0.16);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  animation: panel-in 0.42s steps(6, end) both;
}

.letter-panel .overlay-kicker {
  color: #9a7b4c;
}

.letter-panel h2 {
  margin: 10px 0 8px;
  color: #4a3218;
  font-size: clamp(31px, 3.8vw, 44px);
  letter-spacing: 0.1em;
  text-shadow: none;
}

.letter-body {
  margin: 14px 0 16px;
  display: grid;
  gap: 14px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 2;
  letter-spacing: 0.02em;
}

.letter-body p {
  margin: 0 0 12px;
}

.letter-body .letter-zh {
  margin: 0;
  line-height: 1.85;
}

.letter-body .letter-en {
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(122, 86, 40, 0.35);
  color: #6b4f2c;
  font-size: 0.94em;
  font-style: italic;
  line-height: 1.7;
}

.letter-body p:last-child {
  margin-bottom: 0;
}

/* 宽屏把中文和英文并排成左右两页，免得信太长要滚动。 */
@media (min-width: 620px) {
  .letter-body {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .letter-body .letter-en {
    padding: 0 0 0 24px;
    border-top: 0;
    border-left: 1px dashed rgba(122, 86, 40, 0.35);
  }
}

.letter-sign {
  margin: 0 0 22px;
  color: #6b4f2c;
  font-style: italic;
  text-align: right;
}

.letter-panel .letter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.letter-panel .letter-actions .primary-button,
.letter-panel .letter-actions .secondary-button {
  flex: 1 1 200px;
  width: auto;
  min-width: 0;
}

/* 没拆开的信封：一段引子，两个选择。 */
.letter-teaser {
  margin: 4px 0 6px;
  color: #5a4022;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.9;
}

.letter-hint {
  margin: 12px 0 0;
  color: #8a6a44;
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* 横屏手机只有三百多像素高：把信排紧，别让「收好这封信」掉到画面外。 */
@media (max-height: 520px) {
  .letter-panel {
    padding: 16px 20px;
  }

  .letter-panel .overlay-kicker {
    display: none;
  }

  .letter-panel h2 {
    margin: 0 0 6px;
    font-size: 24px;
  }

  .letter-body {
    margin: 8px 0;
    gap: 16px;
    font-size: 13px;
    line-height: 1.5;
  }

  .letter-body .letter-zh {
    line-height: 1.5;
  }

  .letter-body .letter-en {
    padding-top: 8px;
    font-size: 0.94em;
    line-height: 1.45;
  }

  .letter-sign {
    margin: 0 0 8px;
    font-size: 13px;
  }

  .letter-panel .primary-button {
    min-height: 40px;
  }
}

/* 再矮的老手机：字号和留白一起收，保证按钮还在画面里。 */
@media (max-height: 440px) {
  .letter-panel {
    padding: 12px 16px;
  }

  .letter-panel h2 {
    font-size: 22px;
  }

  .letter-body {
    font-size: 12px;
    line-height: 1.4;
  }

  .letter-body .letter-zh {
    line-height: 1.42;
  }

  .letter-body .letter-en {
    line-height: 1.4;
  }

  .letter-sign {
    font-size: 12px;
  }

  .letter-panel .primary-button {
    min-height: 36px;
    font-size: 14px;
  }
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin: 18px 0 17px;
}

.theme-card {
  --accent: #ffab5a;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 176px;
  padding: 15px 15px 14px;
  color: #d8c6df;
  text-align: left;
  cursor: pointer;
  background:
    linear-gradient(160deg, rgba(44, 27, 55, 0.92), rgba(17, 10, 23, 0.95));
  border: 1px solid #4d345e;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.theme-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 2px;
  content: "";
  background: var(--accent);
  opacity: 0.75;
}

.theme-card:hover,
.theme-card:focus-visible {
  background:
    linear-gradient(160deg, rgba(56, 34, 68, 0.97), rgba(20, 12, 27, 0.98));
  border-color: var(--accent);
  transform: translateY(-3px);
  outline: none;
}

.theme-card:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 214, 158, 0.3);
}

.theme-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #8d7996;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.theme-difficulty {
  color: var(--accent);
  letter-spacing: 0.06em;
}

.theme-card h3 {
  margin: 11px 0 7px;
  color: #faf0df;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.theme-card p {
  margin: 0;
  color: #9d8aa6;
  font-size: 14px;
  line-height: 1.7;
}

.theme-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  color: #77657f;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.theme-card-foot b {
  color: var(--accent);
  font-weight: 700;
}

.theme-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #6f5e78;
  font-size: 13px;
}

/* ---------- 背包 ---------- */

.inventory-panel {
  width: min(100%, 700px);
}

.inventory-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 9px;
}

.inventory-head h2 {
  margin-bottom: 0;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #b7a3be;
  font-family: var(--mono);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  background: #24142d;
  border: 1px solid #4f355b;
}

.icon-button:hover {
  color: #ffe2b5;
  border-color: #8f6640;
}

.icon-button:focus-visible {
  outline: 2px solid #ffdda4;
  outline-offset: 2px;
}

.inventory-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 12px;
  margin: 12px 0 10px;
}

.inventory-box {
  padding: 15px;
  background: rgba(11, 7, 15, 0.53);
  border: 1px solid #3d2a49;
}

.inventory-label {
  margin: 0 0 10px;
  color: #8d7b98;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.bone-total {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #6f5b76;
  font-family: var(--mono);
}

.bone-total span:first-child {
  color: #f2e4cc;
  font-size: 33px;
  font-weight: 700;
  line-height: 1;
}

.bone-total .bone-total-sep {
  color: #5d4a65;
  font-size: 17px;
}

.bone-total span:last-child {
  font-size: 15px;
}

.inventory-list {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 12px 0 0;
  list-style: none;
  border-top: 1px solid #302237;
}

.inventory-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #ac99b3;
  font-size: 14px;
}

.inventory-list b {
  color: #e4d4e8;
  font-family: var(--mono);
  font-size: 13px;
}

.inventory-list .bone-swatch {
  display: inline-block;
  width: 10px;
  height: 4px;
  margin-right: 7px;
  background: #d7c5ab;
  box-shadow: 2px -2px 0 #bca98f;
  vertical-align: middle;
}

.inventory-box--hand {
  border-color: rgba(76, 126, 145, 0.55);
  background:
    radial-gradient(circle at 80% 20%, rgba(80, 189, 224, 0.06), transparent 60%),
    rgba(9, 8, 15, 0.6);
}

.hand-total {
  color: #79ddf7;
  font-family: var(--mono);
  font-size: 29px;
  font-weight: 700;
}

.inventory-note {
  margin: 10px 0 13px;
  color: #8c9ca5;
  font-size: 14px;
  line-height: 1.7;
}

.inventory-note kbd {
  height: 20px;
  min-width: 20px;
  font-size: 14px;
}

.right-rule {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  color: #83a4b0;
  font-family: var(--mono);
  font-size: 13px;
  background: rgba(15, 24, 31, 0.7);
  border: 1px solid rgba(76, 126, 145, 0.35);
}

.right-rule b {
  color: #bcf7ff;
}

.inventory-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #8a7594;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0.03em;
}

.inventory-foot b {
  color: #d7c3df;
  font-weight: 700;
}

/* ---------- 百鬼名册 ---------- */

.roster-panel {
  width: min(100%, 920px);
}

.roster-copy {
  margin: 6px 0 16px;
  color: #c1adc8;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
}

.roster-copy kbd {
  padding: 2px 6px;
  color: #ffe0b0;
  font-size: 13px;
  border: 1px solid #6c4a2f;
  background: #2a1712;
}

.roster-supports {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.roster-support {
  display: inline-flex;
  gap: 7px;
  align-items: baseline;
  padding: 4px 10px;
  border: 1px solid #5b3f6e;
  background: #1c1426;
  color: #d9c6e8;
  font-family: var(--sans);
  font-size: 12.5px;
}

.roster-support b {
  color: #ffcf8a;
  font-weight: 600;
}

.roster-support span {
  color: #a995b8;
}

.roster-support.is-combo {
  border-color: #c98a5a;
  background: linear-gradient(180deg, rgba(82, 47, 28, 0.55), rgba(28, 16, 16, 0.7));
  box-shadow: inset 0 0 0 1px rgba(255, 190, 120, 0.08);
}

.roster-support.is-combo b {
  color: #ffb86c;
}

.roster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.roster-card {
  --accent: #e8b878;
  position: relative;
  padding: 15px 16px 14px;
  color: #ddcadf;
  background:
    linear-gradient(150deg, rgba(46, 24, 36, 0.92), rgba(15, 9, 19, 0.96));
  border: 1px solid rgba(150, 92, 92, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.roster-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--accent);
  opacity: 0.75;
}

.roster-card.is-locked {
  opacity: 0.42;
  filter: grayscale(0.55);
}

.roster-card.is-locked::before {
  opacity: 0.3;
}

.roster-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-left: 4px;
}

.roster-name {
  color: var(--accent);
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.roster-name em {
  margin-left: 6px;
  color: #b9a4bc;
  font-family: var(--mono);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.roster-role {
  color: #8e7a92;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

.roster-trait {
  display: inline-block;
  margin: 10px 0 8px 4px;
  padding: 3px 8px;
  color: #ffddb0;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: rgba(20, 10, 18, 0.55);
}

.roster-body {
  margin: 0 0 0 4px;
  color: #c8b4cb;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
}

.roster-locked {
  margin: 10px 0 0 4px;
  color: #8f7b93;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

.roster-empty {
  grid-column: 1 / -1;
  padding: 20px;
  color: #8f7b93;
  font-family: var(--mono);
  font-size: 14px;
  text-align: center;
  border: 1px dashed #3f2d46;
}

/* ---------- 魑魅魍魉：三条赛道 ---------- */

.track-panel {
  width: min(100%, 980px);
}

.track-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin: 10px 0 18px;
}

.track-card {
  --accent: #ffc76c;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 232px;
  padding: 17px 17px 15px;
  color: #d8c6df;
  text-align: left;
  cursor: pointer;
  background:
    linear-gradient(160deg, rgba(46, 27, 52, 0.94), rgba(15, 9, 20, 0.97));
  border: 1px solid #4d345e;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.track-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  opacity: 0.82;
}

.track-card:hover,
.track-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  background:
    linear-gradient(160deg, rgba(60, 34, 62, 0.96), rgba(20, 12, 24, 0.98));
  outline: none;
}

.track-card--easy {
  --accent: #9fd0a8;
}

.track-card--normal {
  --accent: #ffc76c;
}

.track-card--hard {
  --accent: #e08a7a;
}

.track-tier {
  width: fit-content;
  padding: 2px 9px;
  color: #1b1120;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  background: var(--accent);
}

.track-badge {
  position: absolute;
  top: 17px;
  right: 17px;
  color: #9b86a2;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
}

.track-name {
  color: #f6e9d6;
  font-family: var(--sans);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.track-sub {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.track-detail {
  flex: 1 1 auto;
  color: #c3afc8;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.75;
}

.track-go {
  margin-top: auto;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
}

/* ---------- 困难赛道的送别 ---------- */

.sacrifice-panel {
  width: min(100%, 980px);
  border-color: #6a3a3a;
}

.sacrifice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 18px;
}

.sacrifice-card {
  --accent: #e8b878;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 16px 14px;
  color: #ddcadf;
  text-align: left;
  cursor: pointer;
  background:
    linear-gradient(150deg, rgba(52, 25, 32, 0.94), rgba(16, 9, 17, 0.97));
  border: 1px solid rgba(190, 110, 100, 0.42);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
}

.sacrifice-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--accent);
  opacity: 0.75;
}

.sacrifice-card:hover,
.sacrifice-card:focus-visible {
  transform: translateY(-2px);
  border-color: #e08a7a;
  background:
    linear-gradient(150deg, rgba(70, 31, 36, 0.96), rgba(24, 11, 18, 0.98));
  outline: none;
}

.sacrifice-key {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #f0cfc7;
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid #7a4a44;
  background: #2a1418;
}

.sacrifice-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  padding-right: 24px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.sacrifice-head em {
  color: #b9a4bc;
  font-family: var(--mono);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 400;
}

.sacrifice-trait {
  width: fit-content;
  padding: 2px 7px;
  color: #ffd9c8;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  border: 1px solid rgba(224, 138, 122, 0.45);
  background: rgba(24, 11, 14, 0.55);
}

.sacrifice-body {
  color: #cdb6bd;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
}

.roster-card.is-lost {
  opacity: 0.68;
  filter: saturate(0.45);
  border-color: rgba(190, 110, 100, 0.45);
}

.roster-card.is-lost::before {
  background: #c96a5c;
  opacity: 0.85;
}

.roster-lost-note {
  color: #d7988c;
}

.defeat-panel {
  border-color: #6a3a3a;
}

.defeat-panel h2 {
  color: #f0d3c8;
}

/* ---------- 段落完成 ---------- */

.complete-panel {
  width: min(100%, 560px);
  text-align: center;
}

.complete-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 18px 0;
  background: #3a2944;
  border: 1px solid #3a2944;
}

.complete-stats div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px;
  background: rgba(16, 9, 22, 0.92);
}

.complete-stats span {
  color: #806d8b;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.complete-stats b {
  color: #f1dfe6;
  font-family: var(--mono);
  font-size: 20px;
}

.complete-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.complete-actions .primary-button {
  min-width: 190px;
  padding-block: 13px;
}

.complete-actions .secondary-button {
  min-width: 155px;
}

.control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 3px 0;
  flex-wrap: wrap;
}

.control-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.control-list--secondary {
  gap: 10px 18px;
}

.control-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9a879f;
  font-size: 14px;
  letter-spacing: 0.045em;
  white-space: nowrap;
}

.control-list--secondary .control-hint {
  color: #71607d;
}

.key-pair {
  display: inline-flex;
  gap: 2px;
}

.control-bar kbd {
  height: 22px;
  min-width: 22px;
  padding: 0 5px;
  color: #c7b3d0;
  font-size: 14px;
  box-shadow: 0 1px 0 #08040d;
}

.page-note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: min(100%, var(--shell-width));
  margin: 14px auto 0;
  padding: 0 3px;
  color: #5f4e6a;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* 页脚第一行是三条线路的名字，比下面的英文类型行大一档。 */
.page-note-title {
  color: #9b86a2;
  font-size: 15px;
  letter-spacing: 0.16em;
}

.quest-track {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  width: min(360px, calc(100% - 330px));
  min-width: 190px;
  padding: 10px 13px 11px;
  color: #f3dec0;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(38, 22, 16, 0.96), rgba(16, 8, 10, 0.94));
  border: 1px solid rgba(214, 160, 84, 0.58);
  border-left: 3px solid #f0b45a;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: border-color 120ms ease, background 120ms ease;
}

.quest-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quest-flag {
  flex: 0 0 auto;
  padding: 1px 5px;
  color: #24130a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  background: #f0b45a;
}

.quest-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.45;
}

.quest-time {
  flex: 0 0 auto;
  color: #ffcf7a;
  font-size: 13px;
  font-weight: 700;
}

.quest-progress {
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
  background: rgba(93, 57, 30, 0.5);
}

.quest-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #c9782c, #ffcf7a);
  transition: width 120ms linear;
}

/* 任务面板底下的「退出任务」：面板本身不吃指针，只有这颗按钮吃。 */
.quest-foot {
  display: none;
  justify-content: flex-end;
  margin-top: 8px;
}

.quest-foot.is-open {
  display: flex;
}

.quest-exit {
  pointer-events: auto;
  padding: 3px 10px;
  color: #ffd9a6;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  background: rgba(58, 30, 22, 0.86);
  border: 1px solid rgba(214, 160, 84, 0.55);
  cursor: pointer;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

.quest-exit:hover,
.quest-exit:focus-visible {
  color: #fff1d2;
  background: rgba(96, 54, 30, 0.94);
  border-color: #f0b45a;
}

.quest-exit.is-armed {
  color: #24130a;
  background: #f0b45a;
  border-color: #f0b45a;
  font-weight: 700;
}

.quest-track.is-alarm {
  color: #ffe1dd;
  background:
    linear-gradient(135deg, rgba(58, 10, 12, 0.97), rgba(24, 5, 8, 0.95));
  border-color: #ff5a52;
  border-left-color: #ff5a52;
  animation: quest-alarm 0.5s steps(2, end) infinite;
}

.quest-track.is-alarm .quest-flag {
  color: #1b0506;
  background: #ff5a52;
}

.quest-track.is-alarm .quest-time {
  color: #ff8b84;
}

.quest-track.is-alarm .quest-progress i {
  background: #ff5a52;
}

.screen.has-quest .toast {
  top: 92px;
}

.screen.is-alarm::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  content: "";
  pointer-events: none;
  border: 3px solid rgba(255, 70, 64, 0.9);
  box-shadow: inset 0 0 46px rgba(255, 20, 20, 0.34);
  animation: screen-alarm 0.5s steps(2, end) infinite;
}

@keyframes quest-alarm {
  50% {
    filter: brightness(1.55);
  }
}

@keyframes screen-alarm {
  50% {
    opacity: 0.28;
  }
}

.toast {
  position: absolute;
  top: 18px;
  left: 16px;
  z-index: 6;
  width: fit-content;
  max-width: min(420px, calc(100% - 338px));
  padding: 11px 17px;
  color: #e3d3ea;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 1.65;
  text-align: left;
  white-space: pre-line;
  pointer-events: none;
  background: rgba(13, 7, 19, 0.9);
  border: 1px solid #493056;
  opacity: 0;
  transform: translateY(-7px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 开场车程：画面正上方的开场白与折叠教程 ---------- */

.opening-card {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  /* 开场白尽量铺开：中文一行放得下整句，换行不会只剩两三个字。 */
  width: min(1160px, calc(100% - 64px));
  max-height: calc(100% - 32px);
  padding: 16px 32px 13px;
  text-align: center;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 7, 15, 0.9), rgba(10, 7, 15, 0.72) 68%, rgba(10, 7, 15, 0));
  transform: translateX(-50%);
}

.opening-card[hidden] {
  display: none;
}

.opening-cn {
  margin: 0;
  color: #ffedcd;
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-shadow:
    0 2px 0 rgba(8, 5, 10, 0.9),
    0 0 22px rgba(255, 207, 114, 0.28);
}

.opening-en {
  margin: -2px 0 0;
  color: #d8c5d7;
  font-family: var(--sans);
  font-size: 23px;
  font-style: italic;
  line-height: 1.55;
  letter-spacing: 0.015em;
  text-shadow: 0 1px 0 rgba(8, 5, 10, 0.9);
}

.opening-card.is-new-beat .opening-cn,
.opening-card.is-new-beat .opening-en {
  animation: opening-beat-in 460ms ease-out both;
}

@keyframes opening-beat-in {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.opening-tutorial-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 2px;
  padding: 6px 14px;
  color: #cfe3dc;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
  pointer-events: auto;
  background: rgba(9, 18, 18, 0.78);
  border: 1px solid rgba(159, 199, 196, 0.5);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.opening-tutorial-toggle:hover,
.opening-tutorial-toggle:focus-visible {
  color: #fff3d2;
  background: rgba(28, 42, 38, 0.9);
  border-color: rgba(255, 207, 114, 0.66);
}

.opening-tutorial-toggle[hidden] {
  display: none;
}

.opening-tutorial-mark {
  padding-left: 7px;
  color: #ffcf72;
  font-size: 11px;
  border-left: 1px solid rgba(159, 199, 196, 0.35);
}

.opening-tutorial {
  width: 100%;
  max-height: 42vh;
  padding: 14px 20px 15px;
  overflow-y: auto;
  text-align: left;
  pointer-events: auto;
  background: rgba(7, 12, 16, 0.95);
  border: 1px solid rgba(159, 199, 196, 0.42);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.opening-tutorial[hidden] {
  display: none;
}

.opening-tutorial-cn {
  margin: 0;
  color: #dfece7;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.03em;
}

.opening-skip {
  margin: 2px 0 0;
  color: rgba(220, 205, 230, 0.62);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
}

.opening-skip[hidden] {
  display: none;
}

/* 开场白需要整个画面上方，右上角的旅人手记先让开。 */
.player-panel.is-opening-hidden {
  display: none;
}

/* ---------- 通关一段之后的祝福 ---------- */

.blessing-card {
  position: absolute;
  top: 22px;
  left: 50%;
  z-index: 5;
  width: min(600px, calc(100% - 40px));
  padding: 14px 24px 16px;
  text-align: center;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(17, 10, 22, 0.95), rgba(10, 6, 14, 0.9));
  border: 1px solid rgba(159, 199, 196, 0.55);
  box-shadow:
    0 0 34px -12px rgba(159, 199, 196, 0.85),
    0 18px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 320ms ease, transform 320ms ease;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

.blessing-card[hidden] {
  display: none;
}

.blessing-card.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.blessing-kicker {
  display: block;
  color: #93b8b0;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
}

.blessing-cn {
  margin: 7px 0 0;
  color: #fff0d5;
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.blessing-en {
  margin: 5px 0 0;
  color: #b9c9c4;
  font-family: var(--sans);
  font-size: 19px;
  font-style: italic;
  line-height: 1.6;
  /* 旧的祝福小卡偶尔还会用到，同样认文案里的硬换行。 */
  white-space: pre-line;
}

.blessing-en[hidden] {
  display: none;
}

/* 第三段的第二行是文言：隶书笔画细，比正文那档字号再大一档才看得清。 */
.blessing-en.is-verse {
  font-size: 23px;
  line-height: 1.75;
  letter-spacing: 0.1em;
}

/* ---------- 路牌：一句中文，下面一句英文 ---------- */

.sign-card {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8;
  width: min(820px, calc(100% - 48px));
  max-height: calc(100% - 48px);
  padding: 22px 28px 18px;
  overflow-y: auto;
  color: #ffe6c4;
  background:
    linear-gradient(165deg, rgba(28, 18, 21, 0.97), rgba(9, 7, 12, 0.97));
  border: 1px solid rgba(180, 128, 82, 0.72);
  box-shadow:
    0 0 42px -14px rgba(255, 207, 114, 0.55),
    0 22px 50px rgba(0, 0, 0, 0.62);
  transform: translate(-50%, -50%);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.sign-card[hidden] {
  display: none;
}

.sign-card-kicker {
  display: block;
  color: #c8a37c;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
}

.sign-card-cn {
  margin: 12px 0 0;
  color: #ffe9c9;
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1.75;
  letter-spacing: 0.03em;
  /* 一块路牌可以有两行中文：\n 就照原样换行，别挤成一段。 */
  white-space: pre-line;
}

.sign-card-en {
  margin: 13px 0 0;
  padding-top: 13px;
  color: #c3b0c8;
  font-family: var(--sans);
  font-size: 18px;
  font-style: italic;
  line-height: 1.65;
  /* 英文同样按原文分行：一块牌子上下各两行。 */
  white-space: pre-line;
  border-top: 1px dashed rgba(200, 163, 124, 0.38);
}

.sign-card-close {
  display: block;
  margin-top: 16px;
  color: #8f7d97;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-align: right;
  cursor: pointer;
}

/* 第三段的路牌译文是文言：隶书笔画细，18px 摆在 22px 的中文下面太不起眼，
   单独放大到比正文还大一点。 */
.sign-card-en.is-verse {
  font-size: 25px;
  line-height: 1.9;
  letter-spacing: 0.1em;
}

/* ---------- 落幕：碑前那一幕的旁白与片尾名单 ---------- */

/* 这一幕的文字全部排在 HUD 层：网页字体，清晰，不跟像素画面一起放大。 */
.ending-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  user-select: none;
}

/* 旁白压在画面上方：墓园和坐在碑前的人留在下面。
   字后面垫一圈夜色，雪光和月亮不会把字吃掉。 */
/* 病症第一次发作：居中放大念一遍，之后同段再发作只走左上角 toast。 */
.trigger-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9;
  width: min(900px, calc(100% - 80px));
  padding: 22px 34px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.45s ease;
}

.trigger-banner.is-visible {
  opacity: 1;
}

/* 一块很淡的暗底，压住底下跑动的地图和右边的旅人手记，字才读得清。 */
.trigger-banner::before {
  content: '';
  position: absolute;
  inset: -14% -6%;
  z-index: -1;
  border-radius: 28px;
  background: radial-gradient(
    closest-side,
    rgba(4, 3, 8, 0.78),
    rgba(4, 3, 8, 0.52) 62%,
    rgba(4, 3, 8, 0)
  );
}

.trigger-cn {
  margin: 0;
  color: #ffe6c4;
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-shadow:
    0 0 1px rgba(4, 3, 8, 0.95),
    0 0 10px rgba(4, 3, 8, 0.9),
    0 2px 0 rgba(6, 4, 10, 0.9),
    0 0 34px rgba(255, 207, 114, 0.25);
}

.trigger-en {
  margin: 14px 0 0;
  color: #d8c5d7;
  font-family: var(--sans);
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: 0.015em;
  text-shadow:
    0 0 1px rgba(4, 3, 8, 0.95),
    0 0 9px rgba(4, 3, 8, 0.85),
    0 1px 0 rgba(6, 4, 10, 0.85);
}

.trigger-en:empty {
  display: none;
}

.ending-caption {
  position: absolute;
  top: 56px;
  left: 50%;
  width: min(1040px, calc(100% - 96px));
  padding: 10px 30px;
  text-align: center;
  transform: translateX(-50%);
  opacity: 0;
}

.ending-cn {
  margin: 0;
  color: #ffedcd;
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.03em;
  text-shadow:
    0 0 1px rgba(4, 3, 8, 0.95),
    0 0 8px rgba(4, 3, 8, 0.85),
    0 2px 0 rgba(6, 4, 10, 0.9),
    0 0 26px rgba(255, 207, 114, 0.16);
}

.ending-en {
  margin: 10px 0 0;
  color: #d8c5d7;
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.7;
  letter-spacing: 0.015em;
  text-shadow:
    0 0 1px rgba(4, 3, 8, 0.95),
    0 0 8px rgba(4, 3, 8, 0.8),
    0 1px 0 rgba(6, 4, 10, 0.85);
}

.ending-en:empty {
  display: none;
}

/* 落幕 story 段：中英成对、同字号，一行中文一行英文逐对出现。 */
.ending-caption.is-pairs .ending-cn {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.7;
}

.ending-caption.is-pairs .ending-en {
  font-size: 24px;
  line-height: 1.6;
}

/* 「We are the Pharmakon」→「Pumpkin Avatar」：字母一个个挪到新位置。 */
.ending-morph {
  position: relative;
  height: 46px;
  margin: 12px 0 4px;
}

.ending-morph-line {
  position: absolute;
  inset: 0;
}

.ending-morph-char {
  position: absolute;
  top: 0;
  color: #ffdf9e;
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(6, 4, 10, 0.9),
    0 0 24px rgba(255, 207, 114, 0.4);
  transition:
    left 1.05s cubic-bezier(0.22, 0.9, 0.24, 1),
    transform 1.05s cubic-bezier(0.22, 0.9, 0.24, 1),
    opacity 0.55s linear;
  will-change: left, transform, opacity;
}

.ending-note {
  max-width: 860px;
  margin: 10px auto 0;
  color: #93a6bd;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(4, 3, 8, 0.9);
}

/* 最后一句：打字机效果，一中文一英文。 */
.ending-final {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1000px, calc(100% - 100px));
  color: #fff3dc;
  text-align: center;
  transform: translate(-50%, -50%);
}

.ending-final-line {
  display: block;
  font-family: var(--sans);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-shadow:
    0 2px 0 rgba(5, 4, 10, 0.9),
    0 0 28px rgba(255, 207, 114, 0.22);
}

.ending-final-line--en {
  margin-top: 18px;
  color: #d9c9dd;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.ending-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: currentColor;
  animation: ending-caret 0.9s steps(1) infinite;
}

.ending-caret[hidden] {
  display: none;
}

@keyframes ending-caret {
  50% {
    opacity: 0;
  }
}

/* 片尾名单：和游戏里的字一样用网页字体，不再画像素字。 */
.ending-credits {
  position: absolute;
  top: 64px;
  left: 50%;
  width: min(760px, calc(100% - 120px));
  text-align: center;
  transform: translateX(-50%);
}

.ending-credits-title {
  margin: 0;
  color: #faefdd;
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow: 0 0 24px rgba(255, 207, 114, 0.28);
}

.ending-credits-latin {
  margin: 8px 0 0;
  color: #9b7fac;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.22em;
}

.ending-credit-rows {
  margin-top: 34px;
}

.ending-credit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  align-items: start;
  margin-top: 14px;
}

.ending-credit-role,
.ending-credit-name {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  white-space: pre-line;
}

.ending-credit-role {
  color: #c9a970;
  text-align: right;
}

.ending-credit-name {
  color: #f0e9d9;
  text-align: left;
}

.ending-skip {
  position: absolute;
  top: 14px;
  right: 18px;
  color: #cdd5e6;
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(4, 3, 8, 0.9);
  animation: ending-skip-pulse 2.4s ease-in-out infinite;
}

@keyframes ending-skip-pulse {
  50% {
    opacity: 0.45;
  }
}

/* 手机横屏：画面只有 844×390 左右，HUD 不缩放，落幕的字要自己小一档。 */
html.is-mobile .ending-caption {
  top: 8px;
  width: calc(100% - 20px);
  padding: 4px 8px;
  background: linear-gradient(
    180deg,
    rgba(5, 4, 10, 0.72),
    rgba(5, 4, 10, 0.4) 68%,
    rgba(5, 4, 10, 0)
  );
}

html.is-mobile .trigger-cn {
  font-size: 19px;
}

html.is-mobile .trigger-en {
  font-size: 15px;
}

/* 发作横幅右下角的跳过：横幅本身不吃点击，只有这颗按钮能点。 */
.trigger-skip {
  position: absolute;
  right: -6px;
  bottom: -30px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 226, 186, 0.32);
  border-radius: 999px;
  background: rgba(8, 6, 14, 0.62);
  color: rgba(255, 234, 205, 0.82);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  pointer-events: auto;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.trigger-skip:hover,
.trigger-skip:focus-visible {
  border-color: rgba(255, 226, 186, 0.7);
  background: rgba(20, 14, 26, 0.82);
  color: #ffeacd;
}

/*
  门后的祝福：整屏先白一下（穿门的那道光），再黑下来，
  白字带引号，一句中文一句译文，从左到右打出来。
*/
.blessing-scene {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 8vh 7vw;
  background: #050409;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.62s ease;
}

.blessing-scene.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* 进门那一下不要淡入：整屏直接亮起来，再往下退。 */
.blessing-scene.is-instant {
  transition: none;
}

/* 穿门那一瞬的白光，压在黑幕上面，很快就会退掉。 */
.blessing-flash {
  position: absolute;
  inset: 0;
  background: #fff6e2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.blessing-scene.is-flashing .blessing-flash {
  opacity: 1;
  transition-duration: 0.22s;
}

.blessing-stage {
  position: relative;
  width: min(1020px, 100%);
  text-align: center;
}

.blessing-kicker {
  margin: 0 0 26px;
  color: rgba(206, 190, 214, 0.62);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* 这一行小字也跟着一起浮，不要比正文更早跳出来。 */
#blessingScene .blessing-kicker {
  opacity: 0;
  transition: opacity 1.3s ease;
}

#blessingScene .blessing-kicker.is-shown {
  opacity: 1;
}

/* 这三条都挂在 #blessingScene 里，免得和旧的祝福小卡（.blessing-cn / .blessing-en）混在一起。 */
#blessingScene .blessing-cn,
#blessingScene .blessing-en {
  margin: 0;
  color: #fff3dc;
  font-style: normal;
  /* 文案里带 \n 的地方就是硬换行（比如第四段那句英文按句子断成两行）。 */
  white-space: pre-line;
  text-shadow:
    0 2px 0 rgba(5, 4, 10, 0.9),
    0 0 30px rgba(255, 207, 114, 0.2);
  /* 字不是一个个蹦出来的：整句从夜色里慢慢浮上来，像落幕那几句一样。
     时长跟 main.js 里的 BLESSING_CN_FADE_MS / BLESSING_EN_FADE_MS 对齐。 */
  opacity: 0;
  transform: translateY(7px);
  transition:
    opacity 1.7s ease,
    transform 1.7s ease;
}

#blessingScene .blessing-cn.is-shown,
#blessingScene .blessing-en.is-shown {
  opacity: 1;
  transform: none;
}

/* 换页的瞬间先把上一页的字直接抹掉，别让它跟着补一段淡出。
   选择器要带上 id，否则压不过上面那几条 #blessingScene 的 transition。 */
#blessingScene.is-resetting .blessing-cn,
#blessingScene.is-resetting .blessing-en,
#blessingScene.is-resetting .blessing-kicker {
  transition: none;
}

#blessingScene .blessing-cn {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.85;
  letter-spacing: 0.045em;
  min-height: 3.2em;
}

#blessingScene .blessing-en {
  margin-top: 20px;
  color: #d9c9dd;
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  min-height: 2.4em;
}

/* 文言译文（第三段）不跟着正文的斜体走，字体由全局的 .is-verse 管；
   字号比普通译文再大两档，隶书在那个尺寸才立得住。 */
#blessingScene .blessing-en.is-verse {
  font-size: 28px;
  font-style: normal;
  line-height: 1.9;
  letter-spacing: 0.12em;
}

.blessing-skip {
  position: absolute;
  right: 26px;
  bottom: 22px;
  padding: 6px 14px;
  border: 1px solid rgba(206, 190, 214, 0.35);
  border-radius: 999px;
  background: transparent;
  color: rgba(226, 214, 232, 0.72);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.blessing-skip:hover,
.blessing-skip:focus-visible {
  border-color: rgba(255, 226, 186, 0.7);
  color: #ffeacd;
}

/* 一页打完停在这儿：不自己走，等玩家按一下才翻过去。 */
.blessing-next {
  margin-top: 38px;
  padding: 9px 24px;
  border: 1px solid rgba(255, 226, 186, 0.34);
  border-radius: 999px;
  background: rgba(255, 240, 214, 0.05);
  color: rgba(255, 236, 205, 0.8);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.45s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.blessing-next[hidden] {
  display: none;
}

.blessing-next.is-visible {
  opacity: 1;
  animation: blessing-next-breathe 2.6s ease-in-out 0.45s infinite;
}

.blessing-next:hover,
.blessing-next:focus-visible {
  border-color: rgba(255, 226, 186, 0.8);
  background: rgba(255, 240, 214, 0.12);
  color: #fff3dd;
  animation: none;
  opacity: 1;
}

@keyframes blessing-next-breathe {
  0%,
  100% {
    opacity: 0.42;
  }
  50% {
    opacity: 1;
  }
}

html.is-mobile #blessingScene .blessing-cn {
  font-size: 18.5px;
  min-height: 3em;
}

html.is-mobile #blessingScene .blessing-en {
  font-size: 15px;
  min-height: 2.2em;
}

/* 手机上文言也要比普通译文大出一档。 */
html.is-mobile #blessingScene .blessing-en.is-verse {
  font-size: 21px;
}

html.is-mobile .blessing-next {
  margin-top: 24px;
  padding: 6px 16px;
  font-size: 11.5px;
  letter-spacing: 0.12em;
}

html.is-mobile #blessingScene .blessing-kicker {
  margin-bottom: 18px;
  font-size: 11px;
  letter-spacing: 0.22em;
}

html.is-mobile .blessing-skip {
  right: 14px;
  bottom: 14px;
}


html.is-mobile .ending-cn {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

html.is-mobile .ending-morph {
  height: 26px;
  margin: 6px 0 2px;
}

html.is-mobile .ending-morph-char {
  font-size: 19px;
}

html.is-mobile .ending-en {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
}

/* 手机同样让 story 段中英一致，不再一句特别大。 */
html.is-mobile .ending-caption.is-pairs .ending-cn {
  font-size: 14px;
}

html.is-mobile .ending-caption.is-pairs .ending-en {
  font-size: 16px;
}

html.is-mobile .ending-note {
  max-width: 94%;
  margin-top: 5px;
  font-size: 10.5px;
  line-height: 1.6;
}

html.is-mobile .ending-final {
  width: calc(100% - 28px);
}

html.is-mobile .ending-final-line {
  font-size: 18px;
  line-height: 1.6;
}

html.is-mobile .ending-final-line--en {
  margin-top: 8px;
  font-size: 13px;
}

html.is-mobile .ending-credits {
  top: 16px;
  width: calc(100% - 40px);
}

html.is-mobile .ending-credits-title {
  font-size: 20px;
}

html.is-mobile .ending-credits-latin {
  margin-top: 4px;
  font-size: 9px;
}

html.is-mobile .ending-credit-rows {
  margin-top: 14px;
}

html.is-mobile .ending-credit-row {
  column-gap: 28px;
  margin-top: 7px;
}

html.is-mobile .ending-credit-role,
html.is-mobile .ending-credit-name {
  font-size: 11.5px;
  line-height: 1.55;
}

html.is-mobile .ending-skip {
  top: auto;
  right: 10px;
  bottom: 8px;
  font-size: 10.5px;
}

/* ---------- 拿到一颗糖：卡片弹出，再缩着飞进糖袋的计数 ---------- */

.candy-reward {
  --accent: #ffcf72;
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.candy-reward[hidden] {
  display: none;
}

.candy-reward-flash {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  background: radial-gradient(circle, var(--accent), transparent 68%);
  border-radius: 50%;
  opacity: 0;
  animation: candy-reward-flash 620ms ease-out both;
}

.candy-reward-card {
  position: absolute;
  top: 40%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 190px;
  padding: 14px 26px 12px;
  text-align: center;
  background: linear-gradient(180deg, rgba(38, 21, 46, 0.96), rgba(12, 6, 17, 0.95));
  border: 1px solid var(--accent);
  border-radius: 12px;
  box-shadow:
    0 0 30px -8px var(--accent),
    0 18px 40px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  animation: candy-reward-pop 460ms cubic-bezier(0.18, 1.4, 0.42, 1) both;
  will-change: transform, opacity;
}

.candy-reward-glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 5px;
  color: #1a0f20;
  font-family: var(--sans);
  font-size: 28px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  background: radial-gradient(circle at 34% 26%, #fffdf4, var(--accent) 70%);
  border-radius: 50%;
  box-shadow: 0 0 22px -2px var(--accent);
}

.candy-reward-glyph::before {
  position: absolute;
  inset: -8px;
  content: "";
  border: 2px dashed var(--accent);
  border-radius: 50%;
  opacity: 0.55;
  animation: candy-reward-spin 3s linear infinite;
}

.candy-reward-kicker {
  color: #b79cc4;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
}

.candy-reward-name {
  color: #fff4e2;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow: 0 0 18px var(--accent);
}

.candy-reward-tag {
  color: var(--accent);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

.candy-reward-count {
  margin-top: 7px;
  padding: 2px 11px;
  color: #1a0f20;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--accent);
  border-radius: 999px;
}

.candy-reward-count.is-full {
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
}

.candy-reward-sparks {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 0;
  height: 0;
}

.candy-reward-sparks i {
  position: absolute;
  top: -3px;
  left: -3px;
  width: var(--s, 5px);
  height: var(--s, 5px);
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent);
  opacity: 0;
  animation: candy-reward-spark 820ms ease-out 60ms both;
}

.candy-reward.is-collecting .candy-reward-card {
  animation: candy-reward-fly 640ms cubic-bezier(0.55, 0, 0.8, 0.45) both;
}

.candy-reward.is-collecting .candy-reward-flash,
.candy-reward.is-collecting .candy-reward-sparks {
  opacity: 0;
  transition: opacity 160ms ease;
}

/* 糖落进袋子那一下，计数上扩一圈光。 */
.candy-reward-ping {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: candy-reward-ping 640ms ease-out both;
}

/* 卡片飞到位以后，糖袋里那个数字亮一下。 */
.panel-memorial-row b.is-candy-bump {
  animation: pouch-count-bump 640ms ease-out;
}

@keyframes candy-reward-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55) rotate(-5deg);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.07) rotate(1.5deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

@keyframes candy-reward-flash {
  0% {
    opacity: 0.7;
    transform: scale(0.25);
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes candy-reward-spark {
  0% {
    opacity: 0;
    transform: rotate(var(--a, 0deg)) translateX(92px) scale(0.9);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--a, 0deg)) translateX(var(--d, 170px)) scale(0.35);
  }
}

@keyframes candy-reward-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes candy-reward-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  30% {
    opacity: 1;
    transform: translate(calc(-50% + var(--fly-mx, 0px)), calc(-50% + var(--fly-my, 0px)))
      scale(0.82);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--fly-x, 0px)), calc(-50% + var(--fly-y, 0px)))
      scale(0.08);
  }
}

@keyframes pouch-count-bump {
  0% {
    color: #fff;
    text-shadow: 0 0 16px var(--accent, #ffcf72), 0 0 30px var(--accent, #ffcf72);
  }
  100% {
    color: #f0dfc8;
    text-shadow: none;
  }
}

@keyframes candy-reward-ping {
  0% {
    opacity: 0.9;
    transform: scale(0.45);
  }
  100% {
    opacity: 0;
    transform: scale(4.4);
  }
}

/* ---------- 走完一段：那一双鞋跟在身后 ----------
   和拿到一颗糖同一套节奏：卡片弹出、停一下，再缩成一点落进
   旅人手记里「身后」那一格（结算页上是「身后的鞋」）。
   中间画的是路上跟着的那双鞋本身，不是图标。 */

.shoe-reward {
  --accent: #c6b3e0;
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.shoe-reward[hidden] {
  display: none;
}

.shoe-reward-flash {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  background: radial-gradient(circle, var(--accent), transparent 68%);
  border-radius: 50%;
  opacity: 0;
  animation: candy-reward-flash 620ms ease-out both;
}

.shoe-reward-card {
  position: absolute;
  top: 40%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 210px;
  max-width: min(560px, calc(100% - 32px));
  padding: 13px 26px 12px;
  text-align: center;
  background: linear-gradient(180deg, rgba(38, 21, 46, 0.96), rgba(12, 6, 17, 0.95));
  border: 1px solid var(--accent);
  border-radius: 12px;
  box-shadow:
    0 0 30px -8px var(--accent),
    0 18px 40px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  animation: candy-reward-pop 460ms cubic-bezier(0.18, 1.4, 0.42, 1) both;
  will-change: transform, opacity;
}

/* 桌面端祝福和鞋卡同时出现：祝福卡高一些时，鞋卡往下让一让，别压住英文。 */
html:not(.is-mobile) .shoe-reward.has-blessing .shoe-reward-card {
  top: 48%;
}

/* 鞋画在卡片正中：底下垫一圈这段的记忆色，让黑鞋在暗底板上也能看清。 */
.shoe-reward-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 190px;
  height: 96px;
  margin: 2px 0 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.085));
  border-radius: 10px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.shoe-reward-art::before {
  position: absolute;
  inset: 6px 4px;
  content: "";
  background: radial-gradient(ellipse at 50% 66%, var(--accent), transparent 70%);
  border-radius: 50%;
  opacity: 0.22;
}

.shoe-reward-art canvas {
  position: relative;
  display: block;
  width: 168px;
  height: 84px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px var(--accent)) brightness(1.14);
  animation: shoe-reward-hover 2.4s ease-in-out infinite;
}

.shoe-reward-kicker {
  color: #b79cc4;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
}

.shoe-reward-name {
  color: #fff4e2;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow: 0 0 18px var(--accent);
}

.shoe-reward-tag {
  max-width: 56ch;
  color: var(--accent);
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

/* 人物小传的英文：和中文同一张卡片，只比中文小一点。 */
.shoe-reward-en {
  max-width: 56ch;
  margin-top: 2px;
  color: rgba(233, 220, 238, 0.76);
  font-family: var(--sans);
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
  letter-spacing: 0.015em;
}

.shoe-reward-en[hidden] {
  display: none;
}

/* 第三段那张鞋卡的译文也是文言：隶书小字发虚，放大一档。 */
.shoe-reward-en.is-verse {
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.1em;
}

/* 追思小径的第二行：一、二段是英文，第三段换成了文言。
   文言不跟着正文走斜体：字面换成隶书（没有隶书就退到楷体），行距也松一点。
   这里要 !important：路牌、祝福卡几处正文各自把 font-family 写成了 sans，
   优先级比这条高，不加就还是黑体。 */
.is-verse {
  font-family:
    "STLiti", "LiSu", "华文隶书", "隶书", "STKaiti", "KaiTi", "Kaiti SC",
    "Noto Serif SC", "Songti SC", serif !important;
  font-style: normal !important;
  letter-spacing: 0.12em;
  line-height: 1.8;
}

.shoe-reward-count {
  margin-top: 7px;
  padding: 2px 11px;
  color: #1a0f20;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--accent);
  border-radius: 999px;
}

/* 卡片不自己赖着走：想早点看下一段，点这里就把鞋收起来。 */
.shoe-reward-close {
  margin-top: 9px;
  padding: 4px 14px;
  border: 1px solid rgba(198, 179, 224, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(233, 220, 238, 0.78);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  cursor: pointer;
  /* 整层鞋卡不吃鼠标，只有这个按钮要接得住点击。 */
  pointer-events: auto;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.shoe-reward-close:hover,
.shoe-reward-close:focus-visible {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.11);
  color: #fff4e2;
}

.shoe-reward-sparks {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 0;
  height: 0;
}

.shoe-reward-sparks i {
  position: absolute;
  top: -3px;
  left: -3px;
  width: var(--s, 5px);
  height: var(--s, 5px);
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent);
  opacity: 0;
  animation: candy-reward-spark 820ms ease-out 60ms both;
}

.shoe-reward.is-collecting .shoe-reward-card {
  animation: candy-reward-fly 640ms cubic-bezier(0.55, 0, 0.8, 0.45) both;
}

.shoe-reward.is-collecting .shoe-reward-flash,
.shoe-reward.is-collecting .shoe-reward-sparks {
  opacity: 0;
  transition: opacity 160ms ease;
}

/* 鞋落进「身后」那一格时，那一行亮一下。 */
.is-shoe-bump {
  animation: pouch-count-bump 640ms ease-out;
}

.shoe-reward-ping {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: candy-reward-ping 640ms ease-out both;
}

@keyframes shoe-reward-hover {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes emblem-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes status-pulse {
  0%,
  46% {
    opacity: 1;
  }
  55%,
  100% {
    opacity: 0.35;
  }
}

@media (max-width: 720px) {
  .page {
    width: calc(100% - 24px);
    padding-block: 16px;
  }

  .topbar {
    align-items: center;
    margin-bottom: 11px;
  }

  .latin {
    display: none;
  }

  .brand h1 {
    font-size: 29px;
  }

  .eyebrow {
    font-size: 12px;
    letter-spacing: 0.16em;
  }

  .status-chip {
    padding: 7px 9px;
    font-size: 13px;
    letter-spacing: 0.04em;
  }

  .frame {
    padding: 3px;
  }

  .control-bar {
    gap: 8px 12px;
    padding-top: 10px;
  }

  .control-list {
    gap: 7px 12px;
  }

  .control-list--secondary {
    display: none;
  }

  .page-note {
    margin-top: 9px;
    font-size: 11px;
  }

  .page-note-title {
    font-size: 13px;
  }

  .page-note span:last-child {
    display: none;
  }

  .overlay {
    padding: 10px;
  }

  .start-panel {
    max-width: 100%;
  }

  .overlay h2 {
    margin-block: 8px;
    font-size: 36px;
  }

  .overlay-copy {
    margin-bottom: 11px;
    font-size: 16px;
    line-height: 1.7;
  }

  .goal-badge {
    margin-bottom: 14px;
    font-size: 14px;
  }

  .primary-button {
    min-width: 180px;
    padding: 12px 20px;
    font-size: 17px;
  }

  .mode-actions {
    gap: 8px;
  }

  .primary-button.mode-button,
  .secondary-button.mode-button {
    min-width: 0;
    min-height: 58px;
    padding: 8px 12px;
  }

  .mode-main {
    font-size: 16px;
  }

  .mode-sub {
    font-size: 11.5px;
  }

  .mini-controls {
    margin-top: 12px;
    gap: 6px 10px;
    font-size: 14px;
  }

  .player-panel {
    top: 9px;
    right: 9px;
    width: 190px;
    padding: 10px 11px;
  }

  .player-panel[data-collapse="compact"] {
    width: 186px;
    padding: 9px 10px;
  }

  .panel-collapse {
    top: 7px;
    right: 7px;
    min-width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .player-panel-head {
    padding-right: 25px;
  }

  .player-panel[data-collapse="switch"] .panel-collapse {
    height: 24px;
    font-size: 11px;
  }

  .panel-theme {
    font-size: 18px;
  }

  .panel-grid {
    gap: 4px 6px;
    margin: 7px 0;
    padding: 6px 0;
  }

  .panel-grid span,
  .panel-charge,
  .panel-progress-line,
  .panel-fit-line {
    font-size: 12px;
  }

  .panel-grid b {
    font-size: 13px;
  }

  .panel-effects-label {
    font-size: 11px;
  }

  .effect-chip {
    gap: 5px;
    padding: 2px 6px;
    font-size: 11px;
  }

  .field-hud {
    bottom: 58px;
    left: 9px;
    width: 216px;
  }

  .interaction-prompt {
    bottom: 11px;
    max-width: calc(100% - 20px);
    font-size: 13px;
  }

  .tutorial-coach {
    top: 88px;
    left: 9px;
    bottom: auto;
    width: calc(100% - 220px);
    padding: 9px 11px;
    font-size: 14px;
  }

  .theme-panel {
    width: 100%;
  }

  .theme-grid {
    grid-template-columns: 1fr;
    gap: 7px;
    margin: 12px 0;
  }

  .theme-card {
    min-height: 0;
  }

  .inventory-grid {
    grid-template-columns: 1fr;
  }

  .roster-grid {
    grid-template-columns: 1fr;
  }

  .track-grid,
  .sacrifice-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .track-card {
    min-height: 0;
  }

  .inventory-panel {
    width: 100%;
  }

  .inventory-foot {
    flex-wrap: wrap;
  }

  .quest-track {
    top: 10px;
    left: 9px;
    width: calc(100% - 220px);
    min-width: 150px;
    padding: 7px 9px 8px;
    font-size: 13px;
  }

  .screen.has-quest .toast {
    top: 76px;
  }

  .toast {
    top: 10px;
    left: 9px;
    max-width: calc(100% - 218px);
    font-size: 14px;
  }
}

@media (max-height: 740px) {
  .page {
    justify-content: flex-start;
    padding-top: 14px;
  }

  .overlay:not(.start-overlay) h2 {
    margin-block: 5px;
    font-size: 33px;
  }

  .overlay:not(.start-overlay) .overlay-copy {
    margin-bottom: 9px;
    line-height: 1.55;
  }

  .overlay:not(.start-overlay) .goal-badge {
    margin-bottom: 10px;
  }

  .overlay:not(.start-overlay) .mini-controls {
    margin-top: 10px;
  }

  .page-note {
    display: none;
  }
}

/* 起始页按画面本身的高度收放：窗口不是标准 16:9 时，
   矮下去的是游戏画面，而不是浏览器窗口。 */
.feedback-entry {
  display: block;
  width: max-content;
  margin: 12px auto 0;
  color: #ffd08d;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.start-panel { padding-bottom: 26px; }
.community-count {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(8px, env(safe-area-inset-bottom));
  color: #ead3b2;
  font-size: 12px;
  padding: 5px 8px;
  background: rgba(24, 16, 28, .85);
  border-radius: 6px;
  pointer-events: none;
}
.start-overlay {
  container-type: size;
  align-items: safe center;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255, 132, 34, 0.13), transparent 46%),
    radial-gradient(ellipse at 12% 82%, rgba(125, 155, 76, 0.07), transparent 46%),
    radial-gradient(ellipse at 88% 76%, rgba(177, 132, 214, 0.14), transparent 52%),
    linear-gradient(180deg, rgba(10, 5, 14, 0.82), rgba(6, 3, 10, 0.94));
}

@container (max-height: 600px) {
  html:not(.is-mobile) .start-panel .pumpkin-emblem,
  html:not(.is-mobile) .start-panel .overlay-kicker {
    display: none;
  }

  html:not(.is-mobile) .start-panel h2 {
    margin: 6px 0 8px;
    font-size: 32px;
  }

  html:not(.is-mobile) .start-panel .overlay-copy {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.55;
  }

  html:not(.is-mobile) .start-panel .goal-badge {
    margin-bottom: 8px;
    font-size: 11px;
  }

  html:not(.is-mobile) .primary-button.mode-button,
  html:not(.is-mobile) .secondary-button.mode-button {
    min-height: 56px;
    padding: 7px 14px;
  }

  html:not(.is-mobile) .mode-main {
    font-size: 16px;
  }

  html:not(.is-mobile) .start-panel .mini-controls {
    margin-top: 8px;
    font-size: 12px;
  }
}

@container (max-height: 470px) {
  html:not(.is-mobile) .start-panel .overlay-copy,
  html:not(.is-mobile) .start-panel .goal-badge,
  html:not(.is-mobile) .start-panel .mini-controls,
  html:not(.is-mobile) .start-panel .mode-group-title,
  html:not(.is-mobile) .start-panel .save-reset-button {
    display: none;
  }

  html:not(.is-mobile) .start-panel .start-brand {
    margin-bottom: 2px;
  }

  html:not(.is-mobile) .primary-button.mode-button,
  html:not(.is-mobile) .secondary-button.mode-button {
    min-height: 46px;
    padding: 5px 12px;
  }

  html:not(.is-mobile) .mode-sub {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- v0.3 additions ---------- */

.panel-charge.is-positive {
  color: #ffd58d;
}

.panel-charge.is-positive i {
  background: #ffbd5d;
  box-shadow: 0 0 7px rgba(255, 183, 80, 0.9);
}

.panel-charge.is-negative {
  color: #8de7ff;
}

.panel-charge.is-negative i {
  background: #77e2ff;
  box-shadow: 0 0 7px rgba(103, 223, 255, 0.9);
}

.placement-panel {
  margin: 0 0 14px;
  padding: 13px;
  background:
    radial-gradient(circle at 14% 0%, rgba(106, 216, 245, 0.06), transparent 52%),
    rgba(10, 8, 16, 0.72);
  border: 1px solid rgba(83, 126, 146, 0.55);
}

.placement-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.placement-head .inventory-label {
  margin-bottom: 4px;
  color: #89b3c3;
}

.placement-head h3 {
  margin: 0;
  color: #e1f6fb;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.placement-tip {
  flex: 0 0 auto;
  color: #678694;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.placement-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.placement-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 10px;
  color: #c4dce3;
  font-family: var(--sans);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  background: rgba(20, 17, 27, 0.85);
  border: 1px solid #3d3747;
  transition:
    border-color 120ms ease,
    background 120ms ease;
}

.placement-item:hover:not(:disabled) {
  background: rgba(37, 48, 57, 0.9);
  border-color: #7aa8b8;
}

.placement-item:focus-visible {
  outline: 1px solid #b8f0ff;
  outline-offset: 2px;
}

.placement-item:disabled {
  cursor: default;
  opacity: 0.32;
}

.placement-key {
  display: grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: #8199a2;
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid #46525a;
}

.placement-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.placement-item b {
  color: #e5d8e8;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}

.placement-action {
  color: #7ca9b6;
  font-family: var(--mono);
  font-size: 11px;
}

.placement-note {
  margin: 9px 0 0;
  color: #6f6876;
  font-size: 13px;
  line-height: 1.55;
}

.placement-empty {
  grid-column: 1 / -1;
  margin: 3px 0;
  color: #8f7e93;
  font-size: 14px;
}

@media (max-width: 720px) {
  .placement-items {
    grid-template-columns: 1fr;
  }

  .placement-head {
    flex-direction: column;
    gap: 4px;
  }

  .field-values {
    gap: 10px;
  }
}

.placement-item .bone-swatch {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 3px;
  background: #d7c5ab;
  box-shadow: 2px -2px 0 #bca98f;
}

/* ---------- 背包里的糖袋 ---------- */

.pouch-section {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(88, 56, 76, 0.55);
}

.pouch-hint {
  margin: 6px 0 0;
  color: #8f7e93;
  font-size: 12px;
  line-height: 1.6;
}

.pouch-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px;
  color: #b78ea9;
  font-size: 13px;
  line-height: 1.6;
  background: rgba(30, 15, 26, 0.7);
  border: 1px dashed rgba(120, 84, 134, 0.5);
}

.pouch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.pouch-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px 10px;
  background:
    linear-gradient(160deg, rgba(46, 28, 54, 0.72), rgba(23, 13, 28, 0.88));
  border: 1px solid rgba(120, 84, 134, 0.42);
  border-left: 2px solid var(--accent, #ffcf72);
  border-radius: 4px;
}

.pouch-card.is-empty {
  opacity: 0.55;
}

.pouch-card-top {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pouch-key {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  color: #a995b1;
  font-family: var(--mono);
  font-size: 10px;
  background: rgba(10, 5, 14, 0.55);
  border: 1px solid rgba(120, 84, 134, 0.38);
  border-radius: 3px;
}

.pouch-glyph {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  color: var(--accent, #ffcf72);
  font-family: var(--sans);
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--accent, #ffcf72);
  border-radius: 50%;
}

.pouch-amount {
  margin-left: auto;
  color: var(--accent, #ffcf72);
  font-family: var(--mono);
  font-size: 13px;
}

.pouch-card strong {
  color: #f1dfe9;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.pouch-card em {
  color: var(--accent, #ffcf72);
  font-size: 11.5px;
  font-style: normal;
  letter-spacing: 0.04em;
}

.pouch-card p {
  flex: 1;
  margin: 3px 0 7px;
  color: #a08aa8;
  font-size: 11.5px;
  line-height: 1.5;
}

.pouch-use {
  align-self: flex-start;
  min-width: 76px;
  padding: 4px 12px;
  color: #17101c;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  background: var(--accent, #ffcf72);
  border: 1px solid var(--accent, #ffcf72);
  border-radius: 3px;
}

.pouch-use:hover {
  filter: brightness(1.08);
}

.pouch-use:focus-visible {
  outline: 2px solid #fff0cf;
  outline-offset: 2px;
}

.pouch-use:disabled {
  color: #8b7c90;
  cursor: default;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(120, 84, 134, 0.32);
  filter: none;
}

/* 糖纸街的人物对话 */
.trick-door-panel {
  width: min(100%, 760px);
  max-height: 100%;
  padding: 16px 18px 15px;
  overflow: auto;
  color: #e8d9ea;
  background:
    linear-gradient(150deg, rgba(42, 24, 48, 0.98), rgba(15, 8, 20, 0.98));
  border: 1px solid var(--accent, #ffcf72);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.trick-door-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

#trickDoorPortrait {
  flex: 0 0 auto;
  width: 112px;
  height: 128px;
  image-rendering: pixelated;
  background:
    radial-gradient(ellipse at 50% 62%, rgba(255, 207, 114, 0.16), transparent 68%),
    rgba(10, 5, 14, 0.5);
  border: 1px solid rgba(255, 207, 114, 0.42);
  border-radius: 4px;
}

.trick-door-copy {
  flex: 1;
  min-width: 0;
}

.trick-door-copy h2 {
  margin: 2px 0 6px;
  color: #fff4e4;
  font-size: 25px;
  letter-spacing: 0.06em;
}

.trick-door-line {
  margin: 0;
  color: #bfa9c8;
  font-size: 14px;
  line-height: 1.65;
}

.trick-door-task {
  margin: 13px 0 12px;
  padding-top: 11px;
  border-top: 1px dashed rgba(255, 207, 114, 0.38);
}

.trick-door-candy {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.trick-door-candy .pouch-glyph {
  width: 24px;
  height: 24px;
  font-size: 13px;
}

.trick-door-task-text {
  margin: 0;
  color: #d8c6dc;
  font-size: 14px;
  line-height: 1.65;
}

/* 捣蛋不再是随机糖：面板里先把「抢了就跑」的规则说清楚。 */
.trick-door-trick {
  margin: 8px 0 0;
  padding: 7px 10px;
  color: #f0d9b8;
  font-size: 13px;
  line-height: 1.6;
  background: rgba(255, 176, 90, 0.08);
  border-left: 2px solid var(--accent, #ffcf72);
  border-radius: 2px;
}

.trick-door-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.trick-door-actions .primary-button,
.trick-door-actions .secondary-button {
  min-height: 44px;
  padding: 9px 18px;
  font-size: 14px;
}

.trick-door-actions .text-button {
  margin-left: auto;
}

html.is-mobile .trick-door-panel {
  width: min(100%, 760px);
  padding: 12px 14px;
}

html.is-mobile #trickDoorPortrait {
  width: 84px;
  height: 96px;
}

html.is-mobile .trick-door-copy h2 {
  font-size: 21px;
}

html.is-mobile .trick-door-line,
html.is-mobile .trick-door-task-text,
html.is-mobile .trick-door-trick {
  font-size: 13px;
}

@media (max-width: 640px) {
  .trick-door-head {
    gap: 10px;
  }

  #trickDoorPortrait {
    width: 84px;
    height: 96px;
  }
}

/* 糖纸街的门上谜题 */
.trick-puzzle-panel {
  width: min(100%, 880px);
  max-height: 100%;
  padding: 16px 20px 14px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  color: #e8d9ea;
  background:
    linear-gradient(150deg, rgba(42, 24, 48, 0.98), rgba(15, 8, 20, 0.98));
  border: 1px solid var(--accent, #ffcf72);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.trick-puzzle-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.trick-puzzle-heading {
  flex: 1;
  min-width: 0;
}

.trick-puzzle-heading h2 {
  margin: 2px 0 6px;
  color: #fff4e4;
  font-size: 25px;
  letter-spacing: 0.06em;
}

.trick-puzzle-intro {
  margin: 0;
  color: #bfa9c8;
  font-size: 14px;
  line-height: 1.65;
}

.trick-puzzle-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 8px 2px;
  color: #9a86a4;
  font-size: 12px;
  letter-spacing: 0.08em;
  border-top: 1px dashed rgba(255, 207, 114, 0.3);
  border-bottom: 1px dashed rgba(255, 207, 114, 0.3);
}

.trick-puzzle-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-height: 300px;
  padding: 10px 0;
}

.trick-puzzle-feedback {
  min-height: 22px;
  margin: 0 0 10px;
  color: #bfa9c8;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.trick-puzzle-feedback.is-success {
  color: #9ff2c2;
}

.trick-puzzle-feedback.is-wrong {
  color: #ff9aa8;
}

.trick-puzzle-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  color: #8e7b99;
  font-size: 12px;
  border-top: 1px dashed rgba(255, 207, 114, 0.3);
}

.puzzle-question {
  margin: 0;
  color: #fff4e4;
  font-size: 19px;
  line-height: 1.55;
  text-align: center;
}

.puzzle-question-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  color: var(--accent, #ffcf72);
  font-size: 11px;
  letter-spacing: 0.1em;
  vertical-align: 2px;
  border: 1px solid rgba(255, 207, 114, 0.36);
  border-radius: 2px;
}

/* 几何题的图：夹在题干和选项中间，窄屏跟着缩。 */
.puzzle-figure {
  display: flex;
  justify-content: center;
  width: 100%;
}

.puzzle-figure svg {
  display: block;
  width: min(100%, 380px);
  height: auto;
  overflow: visible;
}

/* 横屏手机只有三百多像素高：图收小一点，别把选项挤到看不见。 */
@media (max-height: 520px) {
  .puzzle-figure svg {
    width: min(100%, 260px);
  }
}

.puzzle-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
}

.puzzle-option {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 8px 14px;
  color: #ead8ee;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  background: rgba(30, 17, 40, 0.92);
  border: 1px solid rgba(255, 207, 114, 0.26);
  border-radius: 3px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.puzzle-option:hover {
  background: rgba(48, 28, 60, 0.96);
  border-color: var(--accent, #ffcf72);
}

.puzzle-option:focus-visible {
  outline: 2px solid #fff0cf;
  outline-offset: 2px;
}

.puzzle-option.is-right {
  color: #eafff2;
  background: rgba(80, 190, 120, 0.2);
  border-color: #8ff0b0;
}

.puzzle-option.is-wrong {
  color: #ffc4cb;
  background: rgba(190, 60, 80, 0.16);
  border-color: #ff8f9a;
}

.puzzle-option:disabled {
  cursor: default;
}

.puzzle-option-text {
  flex: 1;
  min-width: 0;
}

.puzzle-option-unit {
  color: #9a86a4;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.puzzle-number {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #17101c;
  font-size: 15px;
  font-weight: 900;
  background: var(--accent, #ffcf72);
  border-radius: 2px;
}

.puzzle-option-letter {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--accent, #ffcf72);
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255, 207, 114, 0.34);
  border-radius: 2px;
}

/* 判断题只有两个选项：按钮放大、居中，像门上的两扇小窗。 */
.puzzle-options.is-judge {
  max-width: 420px;
}

.puzzle-option.is-judge {
  justify-content: center;
  min-height: 68px;
  font-size: 21px;
  letter-spacing: 0.16em;
}

.puzzle-option.is-judge .puzzle-option-text {
  flex: 0 1 auto;
  text-align: center;
}

.puzzle-sequence {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}

.puzzle-bone-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 52px;
  padding: 5px 7px 3px;
  background: rgba(30, 17, 40, 0.78);
  border-bottom: 2px solid rgba(242, 228, 204, 0.32);
}

.puzzle-bone-chip b {
  color: #fff4e4;
  font-size: 23px;
  line-height: 1.1;
}

.puzzle-bone-chip.is-blank {
  border-bottom-color: var(--accent, #ffcf72);
  border-bottom-style: dashed;
}

.puzzle-bone-chip.is-blank b {
  color: var(--accent, #ffcf72);
}

.puzzle-bone-icon {
  image-rendering: pixelated;
}

.puzzle-equations {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.puzzle-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 34px;
  padding: 2px 8px;
  color: #d8c6dc;
}

.puzzle-equation.is-question {
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 207, 114, 0.3);
}

.puzzle-icon-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.puzzle-inline-icon,
.puzzle-memory-icon,
.puzzle-window-cell canvas {
  image-rendering: pixelated;
}

.puzzle-equals {
  color: var(--accent, #ffcf72);
  font-size: 20px;
  font-weight: 900;
}

.puzzle-question-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #17101c;
  font-size: 18px;
  font-weight: 900;
  background: var(--accent, #ffcf72);
  border-radius: 50%;
}

.puzzle-scale {
  position: relative;
  width: min(390px, 92%);
  margin: 2px auto 0;
  padding-top: 14px;
}

.puzzle-scale::after {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 2px;
  height: 86px;
  content: '';
  background: linear-gradient(180deg, rgba(255, 207, 114, 0.42), rgba(255, 207, 114, 0.06));
  transform: translateX(-50%);
}

.puzzle-scale-beam {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 94px;
  border-top: 3px solid rgba(255, 207, 114, 0.55);
  transform: rotate(var(--tilt, 0deg));
  transform-origin: center top;
  transition: transform 0.25s ease;
}

.puzzle-scale-beam.is-even {
  border-top-color: #9ff2c2;
}

.puzzle-pan {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 96px;
  min-height: 54px;
  padding-top: 14px;
}

.puzzle-pan::before {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 1px;
  height: 14px;
  content: '';
  background: rgba(255, 207, 114, 0.45);
}

.puzzle-pan-candy {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 5px;
  color: #fff4e4;
  font-size: 15px;
  background: rgba(30, 17, 40, 0.84);
  border: 1px solid rgba(255, 207, 114, 0.28);
  border-radius: 3px;
}

.puzzle-scale-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.puzzle-step-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #17101c;
  font-size: 23px;
  font-weight: 900;
  cursor: pointer;
  background: var(--accent, #ffcf72);
  border: 1px solid var(--accent, #ffcf72);
  border-radius: 3px;
}

.puzzle-step-button:hover {
  filter: brightness(1.08);
}

.puzzle-step-button:disabled {
  color: #8b7c90;
  cursor: default;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(120, 84, 134, 0.32);
  filter: none;
}

.puzzle-scale-value {
  min-width: 66px;
  color: #fff4e4;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}

.puzzle-weigh {
  min-height: 44px;
  padding: 8px 18px;
  font-size: 14px;
}

.puzzle-memory-grid {
  display: grid;
  grid-template-columns: repeat(var(--puzzle-columns, 4), minmax(0, 1fr));
  gap: 8px;
  width: min(320px, 100%);
  margin: 0 auto;
}

.puzzle-memory-card {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(58, 37, 68, 0.9), rgba(26, 14, 32, 0.95));
  border: 1px solid rgba(255, 207, 114, 0.26);
  border-radius: 3px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.puzzle-memory-card:hover {
  border-color: var(--accent, #ffcf72);
}

.puzzle-memory-card:focus-visible {
  outline: 2px solid #fff0cf;
  outline-offset: 2px;
}

.puzzle-bandage {
  display: block;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(230, 207, 156, 0.16) 0 5px,
      rgba(230, 207, 156, 0.03) 5px 11px
    );
}

.puzzle-memory-card.is-open {
  background: rgba(36, 23, 46, 0.96);
  border-color: rgba(255, 207, 114, 0.5);
}

.puzzle-memory-card.is-matched {
  background: rgba(255, 207, 114, 0.1);
  border-color: var(--accent, #ffcf72);
  box-shadow: inset 0 0 14px rgba(255, 207, 114, 0.18);
}

/* 绷带记号：上面一排进度格，下面一排可以点的记号。 */
.puzzle-echo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.puzzle-echo-status {
  margin: 0;
  color: #bfa9c8;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.puzzle-echo-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.puzzle-echo-slot {
  display: block;
  width: 12px;
  height: 12px;
  background: rgba(230, 207, 156, 0.07);
  border: 1px solid rgba(230, 207, 156, 0.24);
  border-radius: 50%;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.puzzle-echo-slot.is-lit {
  background: var(--accent, #ffcf72);
  border-color: var(--accent, #ffcf72);
  box-shadow: 0 0 8px rgba(255, 207, 114, 0.5);
}

.puzzle-echo-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(320px, 100%);
}

.puzzle-echo-button {
  display: grid;
  place-items: center;
  padding: 8px;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(58, 37, 68, 0.9), rgba(26, 14, 32, 0.95));
  border: 1px solid rgba(230, 207, 156, 0.26);
  border-radius: 4px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.puzzle-echo-button:hover {
  border-color: var(--accent, #ffcf72);
}

.puzzle-echo-button:focus-visible {
  outline: 2px solid #fff0cf;
  outline-offset: 2px;
}

.puzzle-echo-button.is-on {
  border-color: var(--accent, #ffcf72);
  box-shadow: 0 0 14px rgba(255, 207, 114, 0.45);
  transform: translateY(-1px);
}

/* 古堡灯阵：一排排窗格，亮着的暖、灭着的冷。 */
.puzzle-lantern-grid {
  display: grid;
  grid-template-columns: repeat(var(--lantern-size, 3), minmax(0, 1fr));
  gap: 8px;
  width: min(300px, 100%);
  margin: 0 auto;
}

.puzzle-lantern-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  cursor: pointer;
  background: rgba(20, 12, 26, 0.92);
  border: 1px solid rgba(140, 120, 160, 0.26);
  border-radius: 3px;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.puzzle-lantern-cell:hover {
  border-color: rgba(255, 207, 114, 0.6);
}

.puzzle-lantern-cell:focus-visible {
  outline: 2px solid #fff0cf;
  outline-offset: 2px;
}

.puzzle-lantern-cell.is-lit {
  background: rgba(255, 207, 114, 0.12);
  border-color: var(--accent, #ffcf72);
  box-shadow:
    inset 0 0 12px rgba(255, 207, 114, 0.22),
    0 0 10px rgba(255, 207, 114, 0.24);
}

.puzzle-spot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.puzzle-window {
  padding: 10px;
  background: rgba(10, 5, 14, 0.46);
  border: 2px solid rgba(255, 207, 114, 0.22);
  border-radius: 4px;
}

.puzzle-window-label {
  margin: 0 0 8px;
  color: #bfa9c8;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-align: center;
}

.puzzle-window-grid {
  display: grid;
  grid-template-columns: repeat(var(--puzzle-columns, 4), minmax(0, 1fr));
  gap: 5px;
}

.puzzle-window-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 2px;
}

button.puzzle-window-cell {
  cursor: pointer;
}

button.puzzle-window-cell:hover {
  border-color: rgba(255, 207, 114, 0.5);
}

.puzzle-window-cell.is-empty {
  opacity: 0.35;
}

.puzzle-window-cell.is-found {
  background: rgba(143, 240, 176, 0.08);
  border-color: #8ff0b0;
  box-shadow:
    inset 0 0 0 1px #8ff0b0,
    0 0 10px rgba(143, 240, 176, 0.32);
}

.puzzle-window-cell.is-wrong {
  border-color: #ff8f9a;
  animation: puzzle-shake 0.3s ease;
}

@keyframes puzzle-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

html.is-mobile .trick-puzzle-panel {
  width: min(100%, 880px);
  padding: 12px 14px;
}

html.is-mobile .trick-puzzle-heading h2 {
  font-size: 21px;
}

html.is-mobile .trick-puzzle-intro,
html.is-mobile .trick-puzzle-feedback {
  font-size: 13px;
}

@media (max-width: 640px) {
  .trick-puzzle-panel {
    padding: 12px 12px 10px;
  }

  .trick-puzzle-heading h2 {
    font-size: 21px;
  }

  .trick-puzzle-stage {
    min-height: 0;
    padding: 10px 0;
  }

  .puzzle-options {
    grid-template-columns: 1fr;
  }

  .puzzle-spot {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .puzzle-memory-grid {
    gap: 6px;
  }

  .puzzle-question {
    font-size: 17px;
  }
}

/* 手机横屏只有三百多像素高：把谜题收小一点，避免牌桌压到标题上。 */
@media (max-height: 520px) {
  .trick-puzzle-panel {
    padding: 10px 12px 8px;
  }

  .trick-puzzle-heading h2 {
    font-size: 19px;
  }

  .trick-puzzle-intro {
    font-size: 12px;
    line-height: 1.45;
  }

  .trick-puzzle-meta {
    margin-top: 6px;
    padding: 5px 2px;
  }

  .trick-puzzle-stage {
    flex: 0 0 auto;
    min-height: 0;
    gap: 8px;
    padding: 6px 0;
  }

  .puzzle-question {
    font-size: 16px;
  }

  .puzzle-memory-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    width: min(440px, 100%);
    gap: 5px;
  }

  .puzzle-spot {
    gap: 10px;
  }

  .puzzle-window {
    padding: 6px;
  }

  .puzzle-window-label {
    margin-bottom: 4px;
    font-size: 11px;
  }

  .puzzle-window-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
  }

  .puzzle-equations {
    gap: 2px;
  }

  .puzzle-equation {
    min-height: 24px;
    padding: 0 4px;
    gap: 6px;
  }

  .puzzle-equation.is-question {
    padding-top: 2px;
  }

  .puzzle-scale {
    width: min(300px, 92%);
    padding-top: 8px;
  }

  .puzzle-scale::after {
    top: 8px;
    height: 58px;
  }

  .puzzle-scale-beam {
    min-height: 64px;
  }

  .puzzle-pan {
    min-height: 38px;
    padding-top: 10px;
  }

  .puzzle-scale-controls {
    gap: 8px;
    margin-top: 0;
  }

  .puzzle-step-button {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .puzzle-weigh {
    min-height: 38px;
    padding: 6px 14px;
  }

  .trick-puzzle-feedback {
    margin-bottom: 6px;
  }

  .trick-puzzle-foot {
    padding-top: 6px;
  }
}

/* 角色面板里的糖果状态条 */
.panel-pouch-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 4px;
  color: #8e7b99;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.panel-pouch-line b {
  margin-left: auto;
  color: #ffd6a0;
  font-size: 14px;
}

.panel-pouch-line kbd {
  opacity: 0.68;
}

.player-panel[data-collapse="compact"] .panel-pouch-line {
  display: none;
}

.panel-effects {
  margin-bottom: 9px;
  padding-top: 7px;
  border-top: 1px dashed rgba(93, 61, 111, 0.38);
}

.panel-effects-label {
  display: block;
  margin-bottom: 5px;
  color: #9a86a4;
  font-size: 13px;
  letter-spacing: 0.14em;
}

.effect-chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.effect-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  overflow: hidden;
  color: #f0e1f2;
  font-size: 13px;
  background: rgba(19, 10, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 2px solid var(--accent, #ffcf4a);
}

.effect-chip::before {
  position: absolute;
  inset: 0;
  width: var(--remain, 0%);
  content: '';
  pointer-events: none;
  background: var(--accent, #ffcf4a);
  opacity: 0.16;
  transition: width 120ms linear;
}

.effect-chip > * {
  position: relative;
}

.effect-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--accent, #ffcf4a);
  box-shadow: 0 0 6px var(--accent, #ffcf4a);
  animation: status-pulse 1.4s steps(2, end) infinite;
}

.effect-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.effect-time {
  flex: 0 0 auto;
  color: var(--accent, #ffcf4a);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.wardrobe-panel {
  margin: 0 0 12px;
  padding: 12px;
  background:
    radial-gradient(circle at 10% 0%, rgba(207, 166, 255, 0.06), transparent 52%),
    rgba(10, 8, 16, 0.72);
  border: 1px solid #4b345e;
}

.wardrobe-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.wardrobe-head .inventory-label {
  margin-bottom: 4px;
  color: #b79ac9;
}

.wardrobe-head h3 {
  margin: 0;
  color: #f0e2f5;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.wardrobe-progress {
  margin: 0 0 10px;
  color: #cbb7d8;
  font-size: 14px;
  letter-spacing: 0.03em;
}

.wardrobe-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.wardrobe-card {
  --accent: #ffb347;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px;
  background:
    linear-gradient(165deg, rgba(40, 24, 52, 0.9), rgba(14, 8, 20, 0.94));
  border: 1px solid #4a3459;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.wardrobe-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 2px;
  content: "";
  background: var(--accent);
  opacity: 0.7;
}

.wardrobe-card.is-equipped {
  border-color: var(--accent);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 226, 181, 0.08), transparent 62%),
    linear-gradient(165deg, rgba(46, 28, 60, 0.94), rgba(15, 9, 22, 0.96));
}

.wardrobe-card-top {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  color: #8d7998;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.wardrobe-difficulty {
  color: var(--accent);
}

.wardrobe-card h4 {
  margin: 0;
  color: #f7edf8;
  font-size: 18px;
  line-height: 1.2;
}

.wardrobe-card h4 em {
  color: #9c88a8;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
}

.wardrobe-parts {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
  border-top: 1px solid #33243e;
}

.wardrobe-parts li {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #71617e;
  font-size: 13px;
  line-height: 1.25;
}

.wardrobe-parts li.is-found {
  color: #d9cbe0;
}

.wardrobe-check {
  display: grid;
  flex: 0 0 13px;
  place-items: center;
  width: 13px;
  height: 13px;
  color: #7a6886;
  font-family: var(--mono);
  font-size: 13px;
  font-style: normal;
  border: 1px solid #453450;
}

.wardrobe-parts li.is-found .wardrobe-check {
  color: #1b1020;
  background: var(--accent);
  border-color: var(--accent);
}

.wardrobe-parts li span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wardrobe-parts li b {
  color: #9f8caa;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}

.wardrobe-rarity {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.04em;
}

.rarity-common {
  color: #9bb27d;
}

.rarity-uncommon {
  color: #78c7e8;
}

.rarity-rare {
  color: #d79bff;
}

.wardrobe-equip {
  margin-top: auto;
  padding: 6px;
  color: #e8d8ee;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
  background: rgba(33, 20, 43, 0.9);
  border: 1px solid #5c4170;
  transition:
    color 120ms ease,
    background 120ms ease,
    border-color 120ms ease;
}

.wardrobe-equip:hover:not(:disabled) {
  color: #1c0f22;
  background: var(--accent);
  border-color: var(--accent);
}

.wardrobe-equip:focus-visible {
  outline: 1px solid #ffe2b5;
  outline-offset: 2px;
}

.wardrobe-equip:disabled {
  cursor: default;
  opacity: 0.42;
}

.wardrobe-card.is-equipped .wardrobe-equip {
  color: #1c0f22;
  background: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 720px) {
  .wardrobe-grid {
    grid-template-columns: 1fr;
  }

  .wardrobe-head {
    flex-direction: column;
    gap: 4px;
  }
}

/* ---------- 全屏游玩 ---------- */

/* 游戏铺满整个窗口：页头、底部操作条和页脚说明都收起来，只留 16:9 的画面。
   窗口不是 16:9 时，画面居中，四周留夜色。 */
.page {
  width: 100%;
  min-height: 100svh;
  padding: 0;
  justify-content: center;
}

.topbar,
.control-bar,
.page-note {
  display: none;
}

.game-shell {
  display: grid;
  width: 100%;
  height: 100svh;
  margin: 0;
  place-items: center;
}

.frame {
  width: min(100vw, calc(100svh * 16 / 9));
  height: min(100svh, calc(100vw * 9 / 16));
  padding: 0;
  background: #05030a;
  border: 0;
  box-shadow: none;
}

.frame::before,
.frame::after {
  display: none;
}

.screen {
  width: 100%;
  height: 100%;
  border: 0;
}

/* HUD 与面板以 1280×720 为设计基准：全屏时整块等比放大，
   和 512×288 的像素画面保持同一比例。 */
.screen-ui {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: calc(100% / var(--ui-scale, 1));
  height: calc(100% / var(--ui-scale, 1));
  transform: scale(var(--ui-scale, 1));
  transform-origin: 0 0;
}

/* 闹钟红框压在 HUD 下面：缩放层现在是独立的层叠上下文。 */
.screen.is-alarm::after {
  z-index: 2;
}

/* 浏览器全屏时把外围也涂成夜色，别露出白边。 */
html:fullscreen,
html:fullscreen body {
  background: #05030a;
}

.fullscreen-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 7px 14px;
  color: #b7a2c4;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  cursor: pointer;
  background: rgba(27, 15, 37, 0.68);
  border: 1px solid #3f2a50;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.fullscreen-toggle:hover,
.fullscreen-toggle:focus-visible {
  color: #ffe0b0;
  background: rgba(48, 28, 20, 0.8);
  border-color: rgba(255, 164, 86, 0.62);
}

.fullscreen-toggle kbd {
  height: 20px;
  min-width: 20px;
  font-size: 12px;
}

/* 常驻在画面右下角，不挤占任何面板的排版。 */
.screen-fullscreen {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 7;
  margin-top: 0;
  opacity: 0.55;
}

.screen-fullscreen:hover,
.screen-fullscreen:focus-visible {
  opacity: 1;
}

/* 左上角常驻的「目录 / 提示」：任何一局里都能看见。
   提示不离开这一局，先让玩法停住，看完再继续。 */
.screen-corner {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 7;
  display: flex;
  gap: 8px;
  opacity: 0.6;
  transition: opacity 120ms ease;
}

.screen-corner:hover,
.screen-corner:focus-within {
  opacity: 1;
}

.screen-corner[hidden] {
  display: none;
}

.screen-corner .fullscreen-toggle {
  margin-top: 0;
  padding: 6px 12px;
  font-size: 12px;
}

.screen-corner .fullscreen-toggle[hidden] {
  display: none;
}

.screen-menu {
  color: #d9c5a6;
}

.screen-hint {
  color: #9fd7e8;
}

/* 教程提示框里的按键总表：每一步都写明该按什么。 */
.tutorial-coach .tutorial-keys {
  margin-top: 8px;
  color: #9aac84;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.9;
  letter-spacing: 0.01em;
}

.tutorial-coach .tutorial-keys kbd {
  margin: 0 2px;
}

/* ---------- 提示面板 ---------- */

.hint-panel {
  width: min(100%, 760px);
}

.hint-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 2px 0 16px;
}

.hint-title {
  margin: 0;
  color: #f0e2c6;
  font-size: 19px;
  letter-spacing: 0.04em;
}

.hint-step {
  margin: 3px 0 0;
  color: #b7a2c4;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.hint-objective {
  max-width: 48%;
  margin: 0;
  color: #cdbfae;
  font-size: 13px;
  line-height: 1.65;
  text-align: right;
}

.hint-list {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.hint-list li {
  display: flex;
  gap: 10px;
  color: #e7ddce;
  font-size: 14.5px;
  line-height: 1.7;
}

.hint-list li b {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: #f0b562;
  font-family: var(--mono);
  font-size: 12px;
  background: rgba(213, 150, 66, 0.16);
  border-radius: 50%;
}

.hint-keys {
  margin-bottom: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hint-keys-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 16px;
  margin-top: 8px;
  color: #b9c0cf;
  font-family: var(--mono);
  font-size: 12px;
}

.hint-keys-grid span {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hint-head {
    flex-direction: column;
    gap: 8px;
  }

  .hint-objective {
    max-width: 100%;
    text-align: left;
  }

  .hint-keys-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 手机上「全部按键」写的是虚拟键，字比键盘表长：两列、允许换行，
   不然 nowrap 会让相邻两列的说明叠在一起。 */
html.is-mobile .hint-keys-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  font-size: 12.5px;
}

html.is-mobile .hint-keys-grid span {
  white-space: normal;
  line-height: 1.5;
}

/* ---------- 触屏 / 移动端网页 ---------- */

/* 手机横屏时把页面外壳收掉，只留 16:9 的游戏画面。
   画面两侧的留白涂成夜色，触屏按键叠在画面底部两角。 */
html.is-mobile {
  --touch-btn: clamp(52px, 9.5vmin, 76px);
  height: 100%;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

html.is-mobile body {
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  background: #05030a;
  overscroll-behavior: none;
  touch-action: manipulation;
}

html.is-mobile body::before,
html.is-mobile body::after {
  display: none;
}

html.is-mobile .page {
  --shell-width: 100%;
  width: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  padding: 0;
  justify-content: center;
}

html.is-mobile .topbar,
html.is-mobile .control-bar,
html.is-mobile .page-note,
html.is-mobile .screen-fullscreen,
html.is-mobile .screen-corner,
html.is-mobile .sneak-legend {
  display: none;
}

html.is-mobile .game-shell {
  display: grid;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  margin: 0;
  place-items: center;
}

html.is-mobile .frame {
  width: min(100vw, calc(100svh * 16 / 9));
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(100svh, calc(100vw * 9 / 16));
  height: min(100dvh, calc(100vw * 9 / 16));
  padding: 0;
  background: #05030a;
  border: 0;
  box-shadow: none;
}

html.is-mobile .frame::before,
html.is-mobile .frame::after {
  display: none;
}

html.is-mobile .screen {
  width: 100%;
  height: 100%;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html.is-mobile #game {
  touch-action: none;
}

html.is-mobile .overlay {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* ---------- 起始页与弹层 ---------- */

html.is-mobile .overlay {
  padding: 8px;
  align-items: safe center;
  justify-items: center;
}

html.is-mobile .start-panel {
  width: 100%;
  max-width: 760px;
}

html.is-mobile .start-panel .pumpkin-emblem,
html.is-mobile .start-panel .overlay-kicker,
html.is-mobile .goal-badge {
  display: none;
}

html.is-mobile .start-brand {
  margin: 0 0 2px;
  font-size: 11px;
}

html.is-mobile .overlay h2 {
  margin: 0 0 3px;
  font-size: clamp(22px, 3.4vmin + 10px, 30px);
  letter-spacing: 0.08em;
}

html.is-mobile .overlay-copy {
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.45;
}

html.is-mobile .mode-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0;
}

html.is-mobile .mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

html.is-mobile .mode-group {
  gap: 4px;
}

html.is-mobile .mode-group-title {
  margin: 0 2px;
  font-size: 11px;
  letter-spacing: 0.16em;
}

html.is-mobile .mode-group-title b {
  font-size: 10.5px;
}

html.is-mobile .primary-button.mode-button,
html.is-mobile .secondary-button.mode-button {
  width: 100%;
  min-width: 0;
  min-height: 49px;
  padding: 5px 10px;
  gap: 2px;
}

html.is-mobile .primary-button.mode-button.mode-button--tutorial,
html.is-mobile .primary-button.mode-button.mode-button--memorial {
  min-height: 58px;
}

html.is-mobile .primary-button.mode-button.mode-button--tutorial .mode-main,
html.is-mobile .primary-button.mode-button.mode-button--memorial .mode-main {
  font-size: 18px;
}

html.is-mobile .mode-main {
  font-size: 16px;
  letter-spacing: 0.1em;
}

html.is-mobile .mode-sub {
  font-size: 11px;
  line-height: 1.38;
}

html.is-mobile .mode-badge {
  top: 3px;
  right: 5px;
  padding: 1px 4px;
  font-size: 9px;
}

html.is-mobile .pouch-grid {
  gap: 6px;
}

html.is-mobile .pouch-card {
  padding: 7px 8px;
}

html.is-mobile .pouch-card p {
  font-size: 11px;
}

.mobile-controls {
  display: none;
}

html.is-mobile .mini-controls:not(.mobile-controls) {
  display: none;
}

html.is-mobile .mini-controls.mobile-controls {
  display: flex;
  gap: 5px 14px;
  margin-top: 5px;
  color: #9c86a8;
  font-size: 12px;
}

html.is-mobile .save-reset-button {
  margin-top: 4px;
  font-size: 10.5px;
}

html.is-mobile .inventory-panel,
html.is-mobile .track-panel,
html.is-mobile .roster-panel,
html.is-mobile .sacrifice-panel,
html.is-mobile .theme-panel,
html.is-mobile .complete-panel,
html.is-mobile .pause-panel {
  width: min(100%, 760px);
  max-height: calc(100% - 4px);
  padding: 13px 15px;
}

html.is-mobile .overlay h2,
html.is-mobile .inventory-panel h2,
html.is-mobile .pause-panel h2,
html.is-mobile .complete-panel h2 {
  font-size: 24px;
}

html.is-mobile .icon-button {
  width: 44px;
  height: 44px;
  font-size: 26px;
}

html.is-mobile .inventory-foot,
html.is-mobile .placement-tip,
html.is-mobile .inventory-foot kbd,
html.is-mobile .placement-tip kbd {
  font-size: 12px;
}

html.is-mobile .placement-tip {
  display: none;
}

html.is-mobile .inventory-foot kbd,
html.is-mobile .placement-tip kbd {
  display: none;
}

html.is-mobile .track-grid,
html.is-mobile .sacrifice-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

html.is-mobile .track-card {
  min-height: 0;
}

html.is-mobile .wardrobe-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.is-mobile .sacrifice-key {
  display: none;
}

html.is-mobile .pause-tips {
  display: none;
}

html.is-mobile .text-button {
  min-height: 34px;
  padding: 4px 10px;
}

.touch-restart-button {
  display: none;
}

html.is-mobile .touch-restart-button {
  display: flex;
}

/* ---------- 游戏内 HUD ---------- */

html.is-mobile .player-panel {
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  font-size: 13.5px;
}

html.is-mobile .player-panel[data-collapse="compact"] {
  width: 196px;
  padding: 9px 10px;
}

html.is-mobile .panel-theme {
  font-size: 16px;
}

html.is-mobile .panel-collapse {
  top: 9px;
  right: 9px;
  min-width: 32px;
  height: 32px;
  font-size: 13px;
}

html.is-mobile .player-panel[data-collapse="switch"] .panel-collapse {
  height: 34px;
  padding: 0 11px;
  font-size: 13px;
}

html.is-mobile .quest-track {
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  width: calc(100% - 220px);
  min-width: 150px;
  font-size: 12px;
}

/* 手机上没有 X：退出任务靠这颗按钮，按得下去才重要。 */
html.is-mobile .quest-exit {
  padding: 10px 16px;
  min-height: 42px;
  font-size: 14px;
}

html.is-mobile .tutorial-coach {
  top: max(54px, calc(env(safe-area-inset-top) + 46px));
  left: max(8px, env(safe-area-inset-left));
  width: calc(100% - 220px);
  padding: 9px 11px;
  font-size: 14px;
}

/* 手机上用的是虚拟按键，教程框里的键盘总表让位给画面。 */
html.is-mobile .tutorial-coach .tutorial-keys {
  display: none;
}

html.is-mobile .toast {
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  max-width: calc(100% - 220px);
  padding: 8px 11px;
  font-size: 13.5px;
}

html.is-mobile .screen.has-quest .toast {
  top: 78px;
}

html.is-mobile .candy-reward-card {
  min-width: 152px;
  padding: 10px 18px 9px;
}

html.is-mobile .candy-reward-glyph {
  width: 42px;
  height: 42px;
  font-size: 21px;
}

html.is-mobile .candy-reward-name {
  font-size: 17px;
}

html.is-mobile .shoe-reward-card {
  min-width: 172px;
  padding: 10px 18px 9px;
}

html.is-mobile .shoe-reward-art {
  width: 156px;
  height: 80px;
  margin: 0 0 2px;
}

html.is-mobile .shoe-reward-art canvas {
  width: 140px;
  height: 70px;
}

html.is-mobile .shoe-reward-name {
  font-size: 17px;
}

html.is-mobile .shoe-reward-tag {
  font-size: 15px;
  line-height: 1.5;
}

html.is-mobile .shoe-reward-en {
  font-size: 14.5px;
  line-height: 1.5;
}

/* 电磁长夜的信息面板原本占着左下角，手机上让给方向键，挪到左上。 */
html.is-mobile .field-hud {
  top: max(8px, env(safe-area-inset-top));
  bottom: auto;
  left: max(8px, env(safe-area-inset-left));
  width: min(280px, calc(100% - 220px));
  padding: 9px 10px;
  font-size: 12px;
}

html.is-mobile .field-controls {
  font-size: 11px;
}

html.is-mobile .interaction-prompt {
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--touch-btn, 52px) * 0.9 + 10px);
  max-width: calc(100% - 20px);
  padding: 7px 10px;
  font-size: 13px;
}

html.is-mobile .interaction-prompt kbd {
  display: none;
}

/* 双人潜行时「互动」挪到了正下方中间，提示条再往上让出一格，别压住它。 */
html.is-duo-touch .interaction-prompt {
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--touch-btn, 52px) * 2.05);
}

/* ---------- 虚拟按键 ---------- */

.touch-controls {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.touch-pad {
  position: absolute;
  display: grid;
  gap: calc(var(--touch-btn) * 0.12);
}

/* 左手只管左右：两块并排，贴着左下角。 */
.touch-pad--move {
  bottom: max(10px, env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: repeat(2, var(--touch-btn));
  grid-template-rows: var(--touch-btn);
}

/* 右手管上下和互动：↑ 在右下角（最常按），↓ 压在它上面一格，
   互动在左下方和 ↑ 并排，拇指不用来回找。 */
.touch-pad--action {
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: var(--touch-btn) calc(var(--touch-btn) * 1.15);
  grid-template-rows: calc(var(--touch-btn) * 0.82) calc(var(--touch-btn) * 1.15);
  align-items: stretch;
}

.touch-pad--move .touch-btn--left {
  grid-area: 1 / 1;
}

.touch-pad--move .touch-btn--right {
  grid-area: 1 / 2;
}

.touch-pad--action .touch-btn--down {
  grid-area: 1 / 2;
}

.touch-pad--action .touch-btn--interact {
  grid-area: 2 / 1;
}

.touch-pad--action .touch-btn--jump {
  grid-area: 2 / 2;
}

.touch-btn {
  display: grid;
  place-items: center;
  width: var(--touch-btn);
  height: var(--touch-btn);
  padding: 0;
  color: #f3ddc0;
  font-family: var(--mono);
  font-size: calc(var(--touch-btn) * 0.46);
  font-weight: 700;
  line-height: 1;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  background: rgba(19, 11, 26, 0.42);
  border: 1px solid rgba(255, 178, 94, 0.38);
  border-radius: 9px;
  box-shadow:
    0 3px 0 rgba(4, 1, 8, 0.35),
    inset 0 0 18px rgba(255, 150, 60, 0.06);
  opacity: 0.9;
  transition: background 90ms linear, border-color 90ms linear, transform 90ms linear;
  -webkit-tap-highlight-color: transparent;
}

/* 右手这一摞按键按格子撑满：↓ 扁一点，互动和 ↑ 一样高。 */
.touch-pad--action .touch-btn--jump,
.touch-pad--action .touch-btn--interact,
.touch-pad--action .touch-btn--down {
  width: 100%;
  height: 100%;
}

.touch-btn--down {
  font-size: calc(var(--touch-btn) * 0.36);
}

.touch-btn--interact {
  font-family: var(--sans);
  font-size: calc(var(--touch-btn) * 0.25);
  letter-spacing: 0.06em;
}

.touch-btn.is-down {
  background: rgba(255, 139, 42, 0.34);
  border-color: rgba(255, 208, 142, 0.86);
  box-shadow:
    0 1px 0 rgba(4, 1, 8, 0.55),
    0 0 18px rgba(255, 139, 42, 0.32);
  transform: translateY(2px);
  opacity: 1;
}

.touch-menu {
  position: absolute;
  bottom: max(11px, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.touch-btn--menu {
  width: calc(var(--touch-btn) * 0.78);
  height: calc(var(--touch-btn) * 0.78);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.05em;
  border-radius: 7px;
  opacity: 0.72;
}

.touch-btn[hidden] {
  display: none;
}

.touch-pad[hidden] {
  display: none;
}

.touch-btn--menu.is-down {
  opacity: 1;
}

/* ---------- 第三段：手机上的两组方向键 ----------
 * 这一段是双人潜行，一个人要同时带主角和回音。
 * 左手这一块凑成 2×2：上排 ↑ / ↓（主角跳与蹲），下排 ← / →（主角左右）；
 * 右手整块 2×2 交给回音；「互动」挪到正下方中间，两只拇指都够得着。
 * 没有 .is-duo 的时候这套完全不生效，别的关卡和电脑端还是原来那一套。
 */
.touch-controls.is-duo .touch-pad--solo,
.touch-controls.is-duo .touch-pad--echo {
  display: grid;
  grid-template-columns: repeat(2, var(--touch-btn));
  align-items: stretch;
}

/* 主角这一组只有一排（↑ / ↓），正好压在原来 ← / → 上面，凑成一个 2×2。 */
.touch-controls.is-duo .touch-pad--solo {
  grid-template-rows: var(--touch-btn);
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--touch-btn) * 1.12);
  left: max(10px, env(safe-area-inset-left));
}

/* 回音这一组是完整的两排：上排 ↑ / ↓，下排 ← / →。 */
.touch-controls.is-duo .touch-pad--echo {
  grid-template-rows: repeat(2, var(--touch-btn));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
}

.touch-controls.is-duo .touch-pad--solo .touch-btn--jump,
.touch-controls.is-duo .touch-pad--echo .touch-btn--jump {
  grid-area: 1 / 1;
}

.touch-controls.is-duo .touch-pad--solo .touch-btn--down,
.touch-controls.is-duo .touch-pad--echo .touch-btn--down {
  grid-area: 1 / 2;
}

.touch-controls.is-duo .touch-pad--echo .touch-btn--left {
  grid-area: 2 / 1;
}

.touch-controls.is-duo .touch-pad--echo .touch-btn--right {
  grid-area: 2 / 2;
}

/* 两组方向键都按格子撑满，手指按哪一格都算数。 */
.touch-controls.is-duo .touch-pad--solo .touch-btn,
.touch-controls.is-duo .touch-pad--echo .touch-btn {
  width: 100%;
  height: 100%;
}

/* 两组键各自挂一个小标签，一眼分清谁是谁。 */
.touch-controls.is-duo .touch-pad-tag {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  color: rgba(243, 221, 192, 0.58);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  pointer-events: none;
}

/* 原来的右手那一摞在双人模式下只剩「互动」，收到中间去。 */
.touch-controls.is-duo .touch-pad--action {
  right: auto;
  left: 50%;
  bottom: calc(max(11px, env(safe-area-inset-bottom)) + var(--touch-btn) * 0.98);
  grid-template-columns: var(--touch-btn);
  grid-template-rows: calc(var(--touch-btn) * 0.82);
  transform: translateX(-50%);
}

.touch-controls.is-duo .touch-pad--action .touch-btn--jump,
.touch-controls.is-duo .touch-pad--action .touch-btn--down {
  display: none;
}

.touch-controls.is-duo .touch-pad--action .touch-btn--interact {
  grid-area: 1 / 1;
}

/* ---------- 竖屏提示 ---------- */

.rotate-prompt {
  display: none;
}

@media (orientation: portrait) {
  html.is-mobile .rotate-prompt {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    padding:
      calc(24px + env(safe-area-inset-top))
      24px
      calc(24px + env(safe-area-inset-bottom));
    text-align: center;
    place-items: center;
    background:
      radial-gradient(ellipse at 50% 38%, rgba(78, 42, 100, 0.32), transparent 55%),
      linear-gradient(180deg, #07040c, #0b0612 55%, #050309);
  }

  html.is-mobile .rotate-card {
    max-width: 340px;
  }

  html.is-mobile .rotate-mark {
    display: inline-block;
    color: #ffb35e;
    font-size: 58px;
    line-height: 1;
    text-shadow: 0 0 26px rgba(255, 139, 42, 0.35);
    animation: rotate-nudge 2.2s ease-in-out infinite;
  }

  html.is-mobile .rotate-card h2 {
    margin: 12px 0 8px;
    color: #f8ead6;
    font-size: 27px;
    letter-spacing: 0.12em;
  }

  html.is-mobile .rotate-card p {
    margin: 0;
    color: #a994b8;
    font-size: 14px;
    line-height: 1.7;
  }
}

/* 皮鞋的话：屏幕下方居中的一句话气泡。 */
.shoe-voice {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 7;
  max-width: min(400px, calc(100% - 32px));
  padding: 9px 14px;
  color: #e8dcc8;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.02em;
  line-height: 1.6;
  text-align: left;
  pointer-events: none;
  background: rgba(13, 7, 19, 0.88);
  border: 1px solid #493056;
  border-left: 3px solid #7f5046;
  border-radius: 3px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
}

.shoe-voice.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.shoe-voice::before {
  content: "鞋";
  margin-right: 8px;
  padding: 0 4px;
  color: #b98d68;
  font-size: 11px;
  letter-spacing: 0.08em;
  border: 1px solid #5a3f45;
  border-radius: 2px;
  vertical-align: 2px;
}

.is-mobile .shoe-voice {
  bottom: calc(var(--touch-btn, 56px) * 2 + 26px);
  max-width: calc(100% - 24px);
  padding: 8px 12px;
  font-size: 13px;
}

@keyframes rotate-nudge {
  0%,
  100% {
    transform: rotate(0deg);
  }
  45% {
    transform: rotate(-90deg);
  }
  70% {
    transform: rotate(-90deg);
  }
}

/* ---------- 手机：开场白、路牌与祝福都收窄一档 ---------- */

.is-mobile .opening-card,
html.is-mobile .opening-card {
  top: max(6px, env(safe-area-inset-top));
  width: calc(100% - 20px);
  max-height: calc(100% - 16px);
  padding: 10px 12px 8px;
  gap: 6px;
}

.is-mobile .opening-cn,
html.is-mobile .opening-cn {
  font-size: 17px;
  line-height: 1.45;
}

.is-mobile .opening-en,
html.is-mobile .opening-en {
  font-size: 15.5px;
  line-height: 1.5;
}

.is-mobile .opening-tutorial-toggle,
html.is-mobile .opening-tutorial-toggle {
  padding: 5px 10px;
  font-size: 11.5px;
}

.is-mobile .opening-tutorial,
html.is-mobile .opening-tutorial {
  max-height: 44vh;
  padding: 10px 12px 11px;
}

.is-mobile .opening-tutorial-cn,
html.is-mobile .opening-tutorial-cn {
  font-size: 13px;
  line-height: 1.75;
}

.is-mobile .blessing-card,
html.is-mobile .blessing-card {
  top: max(6px, env(safe-area-inset-top));
  width: calc(100% - 20px);
  padding: 10px 14px 11px;
}

.is-mobile .blessing-cn,
html.is-mobile .blessing-cn {
  font-size: 16px;
}

.is-mobile .blessing-en,
html.is-mobile .blessing-en {
  font-size: 15px;
  line-height: 1.55;
}

/* 手机上文言同样要比普通译文大一档。 */
.is-mobile .blessing-en.is-verse,
html.is-mobile .blessing-en.is-verse {
  font-size: 18px;
  line-height: 1.75;
}

.is-mobile .sign-card,
html.is-mobile .sign-card {
  width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  padding: 14px 16px 12px;
}

.is-mobile .sign-card-cn,
html.is-mobile .sign-card-cn {
  font-size: 16px;
  line-height: 1.65;
}

.is-mobile .sign-card-en,
html.is-mobile .sign-card-en {
  font-size: 15px;
  line-height: 1.6;
}

.is-mobile .sign-card-en.is-verse,
html.is-mobile .sign-card-en.is-verse {
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.08em;
}

/* 手机上，鞋卡和祝福占着画面时，旅人手记先让开。 */
.is-mobile .player-panel.is-rewarding,
html.is-mobile .player-panel.is-rewarding {
  display: none;
}

/* 手机上祝福放在画面正中：上方是任务条与飘字，两边都不和它抢地方。 */
.is-mobile .blessing-card,
html.is-mobile .blessing-card {
  top: 50%;
  transform: translate(-50%, calc(-50% - 8px));
}

.is-mobile .blessing-card.is-visible,
html.is-mobile .blessing-card.is-visible {
  transform: translate(-50%, -50%);
}

/* ---------- 背包里的鞋架 ---------- */

.shoe-rack-section {
  margin: 18px 0 4px;
  padding: 14px 16px 16px;
  background: linear-gradient(150deg, rgba(39, 23, 50, 0.55), rgba(15, 9, 22, 0.55));
  border: 1px solid #3a2748;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.shoe-rack-section[hidden] {
  display: none;
}

.shoe-rack {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.shoe-card {
  display: flex;
  flex: 1 1 200px;
  align-items: center;
  gap: 10px;
  min-width: 188px;
  padding: 8px 12px 8px 8px;
  color: #e8dbee;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(160deg, rgba(34, 20, 45, 0.9), rgba(16, 9, 23, 0.92));
  border: 1px solid #3c2a4a;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition:
    border-color 120ms ease,
    background 120ms ease,
    transform 120ms ease;
}

.shoe-card:hover {
  border-color: var(--accent, #76518a);
  transform: translateY(-1px);
}

.shoe-card.is-selected {
  background: linear-gradient(160deg, rgba(58, 34, 72, 0.95), rgba(24, 13, 33, 0.95));
  border-color: var(--accent, #ffcf72);
  box-shadow: inset 0 0 0 1px var(--accent, #ffcf72);
}

.shoe-card-art {
  flex: 0 0 auto;
  width: 120px;
  height: 60px;
  background: radial-gradient(ellipse at 50% 68%, rgba(255, 255, 255, 0.05), transparent 70%);
  image-rendering: pixelated;
}

.shoe-card-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.shoe-card-copy b {
  font-size: 17px;
  letter-spacing: 0.03em;
  color: #f6eddf;
}

.shoe-card-copy em {
  color: #a996b9;
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.shoe-card--letter {
  flex: 0 1 230px;
  border-style: dashed;
}

.shoe-card-letter {
  flex: 0 0 auto;
  width: 44px;
  font-size: 30px;
  line-height: 1;
  text-align: center;
  color: #ffcf72;
}

.shoe-rack-detail {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(10, 6, 15, 0.5);
  border-left: 3px solid var(--accent, #ffcf72);
}

.shoe-detail-kicker {
  margin: 0;
  color: var(--accent, #ffcf72);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.shoe-detail-title {
  margin: 4px 0 10px;
  color: #f6eddf;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.shoe-fit-bar {
  height: 8px;
  background: #1a1022;
  border: 1px solid #3c2a4a;
}

.shoe-fit-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffb347, #ffcf72);
}

.shoe-detail-copy {
  margin: 10px 0 0;
  color: #d7c8e2;
  font-size: 15px;
  line-height: 1.75;
}

.shoe-detail-line {
  margin: 8px 0 0;
  color: #c6b3e0;
  font-size: 15px;
  font-style: italic;
  line-height: 1.7;
}

.shoe-detail-blessing {
  margin: 10px 0 0;
  padding-top: 10px;
  color: #e0d2ea;
  font-size: 14px;
  line-height: 1.75;
  border-top: 1px dashed rgba(198, 179, 224, 0.28);
}

.shoe-detail-theory {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(255, 207, 114, 0.06);
  border: 1px dashed rgba(255, 207, 114, 0.32);
}

.shoe-theory-title {
  margin: 0 0 6px;
  color: #ffcf72;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.shoe-detail-theory p:last-child {
  margin: 0;
  color: #d9c9b5;
  font-size: 14px;
  line-height: 1.8;
}

.shoe-detail-talk {
  margin-top: 12px;
}

.shoe-detail-hint {
  margin: 10px 0 0;
  color: #a996b9;
  font-size: 13px;
}

/* ---------- 与皮鞋对话 ---------- */

.shoe-talk-overlay {
  /* 盖在背包和目录之上：这一幕不接管游戏状态。 */
  z-index: 10;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(120, 84, 40, 0.18), transparent 55%),
    rgba(5, 2, 8, 0.86);
}

.shoe-talk-panel {
  width: min(100%, 880px);
  max-height: 100%;
  overflow: auto;
  padding: clamp(18px, 2.6vw, 30px);
  background: linear-gradient(145deg, rgba(32, 19, 43, 0.97), rgba(12, 7, 18, 0.98));
  border: 1px solid #4b3059;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  animation: panel-in 0.3s steps(5, end) both;
}

.shoe-talk-head {
  margin-bottom: 10px;
}

.shoe-talk-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  min-height: 220px;
  max-height: 52vh;
  overflow: hidden;
  background: #08050d;
  border: 1px solid #3a2748;
}

#shoeTalkCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.shoe-talk-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.shoe-talk-bubble {
  position: absolute;
  max-width: min(48%, 320px);
  margin: 0;
  padding: 10px 14px;
  color: #2c1c10;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  background: #f4e8ca;
  border: 1px solid #c9a86e;
  border-radius: 10px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.shoe-talk-bubble.is-visible {
  opacity: 1;
  transform: none;
}

.shoe-talk-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: #f4e8ca;
  border-right: 1px solid #c9a86e;
  border-bottom: 1px solid #c9a86e;
  transform: rotate(45deg);
}

/* 气泡正对着说话的人：左边是主角，右边是鞋。 */
.shoe-talk-bubble.is-shoe {
  left: 67.5%;
  right: auto;
  bottom: 48%;
  max-width: 42%;
  transform: translate(-50%, 8px) scale(0.96);
}

.shoe-talk-bubble.is-shoe::after {
  right: auto;
  left: 50%;
  margin-left: -6px;
}

.shoe-talk-bubble.is-player {
  left: 35%;
  right: auto;
  bottom: 67%;
  max-width: 40%;
  background: #ded0f2;
  border-color: #9a7fb2;
  transform: translate(-50%, 8px) scale(0.96);
}

.shoe-talk-bubble.is-player::after {
  right: auto;
  left: 50%;
  margin-left: -6px;
  background: #ded0f2;
  border-color: #9a7fb2;
}

.shoe-talk-bubble.is-shoe.is-visible,
.shoe-talk-bubble.is-player.is-visible {
  transform: translate(-50%, 0);
}

.shoe-talk-bubble.is-thought {
  color: #7d6a8c;
  font-weight: 800;
  letter-spacing: 0.3em;
}

.shoe-talk-theory {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(255, 207, 114, 0.06);
  border: 1px dashed rgba(255, 207, 114, 0.4);
}

.shoe-talk-theory-title {
  margin: 0 0 6px;
  color: #ffcf72;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.shoe-talk-theory p:last-child {
  margin: 0;
  color: #e2d3c2;
  font-size: 14.5px;
  line-height: 1.8;
}

.shoe-talk-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 0 4px;
  background: linear-gradient(180deg, rgba(12, 7, 18, 0) 0%, rgba(12, 7, 18, 0.97) 38%);
}

.shoe-talk-theory-button {
  color: #ffcf72;
}

.shoe-talk-theory-button.is-hinting {
  animation: shoe-theory-nudge 1.4s ease-in-out infinite;
}

@keyframes shoe-theory-nudge {
  0%,
  100% {
    text-shadow: 0 0 0 rgba(255, 207, 114, 0);
  }
  50% {
    text-shadow: 0 0 12px rgba(255, 207, 114, 0.75);
  }
}

.shoe-talk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.shoe-talk-actions .primary-button,
.shoe-talk-actions .secondary-button {
  min-width: 150px;
}

@media (max-width: 980px) {
  .shoe-card,
  .shoe-card--letter {
    flex-basis: calc(50% - 5px);
  }
}

@media (max-width: 640px) {
  .shoe-rack-detail {
    padding: 12px 13px;
  }

  .shoe-card,
  .shoe-card--letter {
    flex-basis: 100%;
    min-width: 0;
  }

  .shoe-card-art {
    width: 120px;
    height: 60px;
  }

  .shoe-talk-stage {
    aspect-ratio: 4 / 3;
    min-height: 190px;
    max-height: 46vh;
  }

  .shoe-talk-bubble {
    max-width: 62%;
    padding: 8px 11px;
    font-size: 14px;
    line-height: 1.5;
  }

  .shoe-talk-bubble.is-shoe {
    bottom: 46%;
  }

  .shoe-talk-bubble.is-player {
    bottom: 63%;
  }

  .shoe-talk-actions {
    width: 100%;
  }

  .shoe-talk-actions .primary-button,
  .shoe-talk-actions .secondary-button {
    flex: 1 1 140px;
  }
}

/* 起始页：选了「稍后再看」的信，留一个安静入口。 */
.start-letter-button {
  margin-top: 12px;
  color: #ffcf72;
  border-bottom-color: rgba(255, 207, 114, 0.4);
}

.start-letter-button[hidden] {
  display: none;
}

/* 展开「皮鞋学习论」时把舞台收起来：短的横屏上也能把说明完整读完。 */
.shoe-talk-panel.is-showing-theory .shoe-talk-stage {
  display: none;
}

.shoe-talk-panel.is-showing-theory .shoe-talk-theory {
  margin-top: 16px;
}

.shoe-talk-panel.is-showing-theory .shoe-talk-theory p:last-child {
  font-size: 15.5px;
  line-height: 1.9;
}