.conduct-page {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #08100d;
  color: #f4f1e8;
  font-size: 13px;
  letter-spacing: 0;
  /* 横屏刘海/挖孔/摄像头：部分机型 env 为 0，必须给左侧足够兜底，避免文字被挡 */
  --safe-left: max(56px, calc(env(safe-area-inset-left, 0px) + 24px));
  --safe-right: max(48px, calc(env(safe-area-inset-right, 0px) + 16px));
  --safe-top: max(8px, env(safe-area-inset-top, 0px));
  --safe-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  /* 旧版 iOS 兜底 */
  --safe-left-fallback: max(56px, calc(constant(safe-area-inset-left) + 24px));
  --safe-right-fallback: max(48px, calc(constant(safe-area-inset-right) + 16px));
}

.conduct-backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, #07100d 0%, #10241d 52%, #2d281e 100%);
}

.conduct-grid {
  position: absolute;
  inset: 0;
  opacity: .07;
  background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 46px 46px;
}








.conduct-grain {
  position: absolute;
  inset: 0;
  opacity: .025;
  background: repeating-linear-gradient(110deg, transparent 0, transparent 4px, #fff 5px);
  pointer-events: none;
}

.conduct-hud {
  position: absolute;
  z-index: 50;
  top: var(--safe-top);
  /* 右侧多留空：避让胶囊，并把状态值/知识命中/用时整体左移 */
  right: max(132px, calc(var(--safe-right) + 28px));
  left: var(--safe-left);
  display: grid;
  min-width: 0;
  height: 44px;
  grid-template-columns: minmax(160px,1fr) minmax(160px,300px) minmax(140px,1fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.16);
  box-sizing: border-box;
}

.conduct-hud-left {
  display: flex;
  min-width: 0;
  align-items: center;
}

.hud-icon-button {
  position: relative;
  z-index: 2;
  display: flex;
  width: 34px;
  height: 34px;
  min-width: 34px;
  max-width: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(0,0,0,.28);
  color: #f5f1e7;
  font-size: 22px;
  line-height: 30px;
  pointer-events: auto;
}

.conduct-brand {
  display: flex;
  min-width: 0;
  margin-left: 8px;
  flex-direction: column;
}

.conduct-brand-title {
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  line-height: 16px;
}

.conduct-progress {
  min-width: 0;
}

.conduct-progress-track {
  overflow: hidden;
  height: 3px;
  background: rgba(255,255,255,.14);
}

.conduct-progress-fill {
  height: 100%;
  background: #db5b4c;
  transition: width .35s ease;
}

.conduct-stage-dots {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
}

.conduct-stage-dot {
  color: rgba(255,255,255,.34);
  font-size: 9px;
  font-weight: 900;
  line-height: 14px;
}

.conduct-stage-dot.active { color: #e2bd66; }
.conduct-stage-dot.completed { color: #65c49e; }

.conduct-hud-right {
  display: flex;
  min-width: 0;
  justify-content: flex-end;
  gap: 14px;
  margin-right: 8px;
  padding-right: 4px;
}

.hud-metric {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  flex-direction: column;
}

.hud-metric-label {
  color: rgba(255,255,255,.48);
  font-size: 9px;
  line-height: 12px;
}

.hud-metric-value {
  margin-top: 0;
  font-size: 13px;
  font-weight: 900;
  line-height: 16px;
  white-space: nowrap;
}

.hud-metric-value.danger { color: #ff7f72; }

.conduct-layer {
  position: absolute;
  z-index: 4;
  top: 58px;
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  /* 高度由 top/bottom 决定，不要再写 height:100%，否则会撑出视口把底部按钮裁掉 */
  height: auto;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
}

.section-kicker {
  display: block;
  color: #e2bd66;
  font-size: 10px;
  font-weight: 900;
  line-height: 14px;
}

.conduct-overview {
  display: grid !important;
  height: auto;
  grid-template-columns: minmax(260px,40%) minmax(0,1fr);
  align-items: center;
  gap: 20px;
  overflow: hidden;
}

.overview-copy {
  min-width: 0;
  padding-left: 8px;
}

.overview-title {
  display: block;
  max-width: 620px;
  margin-top: 6px;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.12;
  overflow-wrap: break-word;
}

.overview-accent { color: #e96152; }


.primary-command {
  display: flex;
  width: min(260px,100%);
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 6px 14px;
  border-left: 4px solid #e2bd66;
  background: #be4b40;
  color: #fff;
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
  flex-shrink: 0;
}

.command-arrow {
  flex-shrink: 0;
  margin-left: 10px;
  font-size: 18px;
}

.campaign-map {
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  justify-content: center;
  flex-direction: column;
  padding: 4px 0;
  overflow: hidden;
}

.campaign-node {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  flex: 1;
  max-height: 56px;
  grid-template-columns: 36px minmax(0,1fr) 56px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.campaign-node::before {
  position: absolute;
  bottom: -10px;
  left: 26px;
  width: 1px;
  height: 18px;
  background: rgba(226,189,102,.36);
  content: '';
}

.campaign-node:last-child::before { display: none; }

.campaign-node-index {
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226,189,102,.5);
  border-radius: 50%;
  color: #edcf8b;
  font-size: 10px;
  font-weight: 900;
}

.campaign-node-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.campaign-node-title {
  font-size: 13px;
  font-weight: 900;
  line-height: 16px;
  overflow-wrap: break-word;
}

.campaign-node-type {
  justify-self: end;
  color: #65c49e;
  font-size: 10px;
  font-weight: 800;
  line-height: 15px;
}

.stage-brief {
  display: grid !important;
  height: auto;
  grid-template-columns: 100px minmax(280px,1fr) minmax(160px,.55fr);
  align-items: center;
  gap: 16px;
  overflow: hidden;
}

.stage-brief-index {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.stage-index-label {
  color: rgba(255,255,255,.42);
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
}

.stage-index-number {
  color: #e35e4f;
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
}

.stage-index-total {
  color: rgba(255,255,255,.36);
  font-size: 12px;
  line-height: 16px;
}

.stage-brief-copy {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.stage-brief-title {
  display: block;
  margin-top: 4px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.12;
  overflow-wrap: break-word;
}

.stage-brief-subtitle {
  display: block;
  margin-top: 3px;
  color: #edcf8b;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.stage-brief-rule {
  width: 48px;
  height: 3px;
  margin: 8px 0;
  background: #d85a4d;
  flex-shrink: 0;
}

.stage-brief-body {
  display: block;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: break-word;
  min-height: 0;
  overflow: hidden;
}

.stage-brief-instruction {
  display: grid;
  min-width: 0;
  flex-shrink: 0;
  grid-template-columns: 36px minmax(0,1fr);
  gap: 8px;
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,.05);
}

.instruction-code {
  color: #65c49e;
  font-size: 10px;
  font-weight: 900;
  line-height: 16px;
}

.instruction-copy {
  min-width: 0;
  color: rgba(255,255,255,.67);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.stage-start { margin-top: 10px; }

.stage-brief-quote {
  position: relative;
  max-width: 280px;
  max-height: 100%;
  padding: 16px 12px 12px;
  border-top: 1px solid rgba(226,189,102,.36);
  border-bottom: 1px solid rgba(226,189,102,.36);
  color: rgba(255,255,255,.58);
  font-size: 11px;
  line-height: 1.45;
  overflow: hidden;
  overflow-wrap: break-word;
}

.quote-mark {
  position: absolute;
  top: -10px;
  left: 0;
  color: #e2bd66;
  font-size: 36px;
  line-height: 36px;
}

.conduct-operation {
  position: absolute;
  z-index: 5;
  top: 54px;
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: 40px minmax(0,1fr);
  overflow: hidden;
  box-sizing: border-box;
}

.operation-heading {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(160px,.7fr) minmax(220px,1.4fr) 70px;
  align-items: center;
  gap: 12px;
}

.operation-heading-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.operation-heading-title {
  overflow: hidden;
  margin-top: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-heading-instruction {
  min-width: 0;
  color: rgba(255,255,255,.6);
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.operation-timer {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  color: #edcf8b;
}

.operation-timer.urgent { color: #ff786d; }
.timer-label { margin-right: 4px; color: rgba(255,255,255,.42); font-size: 9px; }
.timer-value { font-size: 20px; font-weight: 900; line-height: 22px; }
.timer-unit { margin-left: 2px; font-size: 9px; }

.image-game-board {
  display: grid;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(5,10,8,.78);
}

.image-game-visual {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  background: #101713;
}

.mission-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.image-scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,9,7,.26), transparent 54%), repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255,255,255,.025) 4px);
  pointer-events: none;
}

.image-caption {
  position: absolute;
  right: 10px;
  bottom: 8px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  background: rgba(4,8,6,.78);
  backdrop-filter: blur(3px);
}

.image-caption-code { color: #e2bd66; font-size: 9px; font-weight: 900; }
.image-caption-label { font-size: 11px; font-weight: 900; }

.image-game-console {
  position: relative;
  overflow: hidden;
  display: flex;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  padding: 10px 12px;
  background: #111914;
}

.console-progress {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,.48);
  font-size: 9px;
  line-height: 13px;
}

.console-progress-dots { display: flex; gap: 4px; }
.console-progress-dot { width: 6px; height: 6px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.console-progress-dot.active { border-color: #e2bd66; background: #e2bd66; }
.console-progress-dot.completed { border-color: #65c49e; background: #65c49e; }

.console-question {
  display: block;
  flex: 0 0 auto;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.console-options {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
  margin-top: 6px;
  overflow: hidden;
}

.console-option {
  display: grid;
  box-sizing: border-box;
  min-width: 0;
  min-height: 32px;
  flex: 0 0 auto;
  grid-template-columns: 22px minmax(0,1fr) 16px;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.035);
}

.console-option.correct { border-color: #4eb58f; background: rgba(50,133,101,.2); }
.console-option.wrong { border-color: #d85a4d; background: rgba(157,55,47,.22); }

.console-option-code {
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 50%;
  color: #e2bd66;
  font-size: 9px;
}

.console-option-copy { min-width: 0; font-size: 11px; line-height: 1.25; overflow-wrap: break-word; }
.console-option-state { text-align: center; font-size: 11px; }

.console-feedback {
  display: grid;
  min-width: 0;
  flex: 0 0 auto;
  grid-template-columns: 56px minmax(0,1fr);
  gap: 6px;
  margin-top: 6px;
  padding: 4px 6px;
  border-left: 3px solid #4eb58f;
  background: rgba(255,255,255,.04);
  font-size: 10px;
  line-height: 1.25;
  max-height: 40px;
  overflow: hidden;
}

.console-feedback.wrong { border-left-color: #d85a4d; }
.console-feedback-label { color: #74d1ad; font-weight: 900; }
.console-feedback.wrong .console-feedback-label { color: #f09289; }
.console-feedback-copy { min-width: 0; overflow-wrap: break-word; }

.compact-command {
  display: flex;
  box-sizing: border-box;
  width: auto;
  min-width: 140px;
  max-width: 100%;
  min-height: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin: 6px 0 0 auto;
  padding: 0 12px;
  border-radius: 4px;
  background: #be4b40;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 34px;
  white-space: nowrap;
  text-align: center;
}

.image-game-console.answered .compact-command,
.console-next-btn {
  width: 100%;
  margin-top: 6px;
}

.console-next-btn-hover {
  background: #d25548;
}

.compact-command.disabled { opacity: .36; }

.spot-game-board {
  display: grid;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-rows: minmax(0,1fr) 72px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(5,10,8,.8);
}

.spot-scenes {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 4px;
  background: #070b09;
}

.spot-scene { position: relative; overflow: hidden; min-width: 0; min-height: 0; background: #0a100d; }
.spot-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.spot-scene-tag {
  position: absolute;
  z-index: 6;
  top: 8px;
  left: 8px;
  display: flex;
  padding: 5px 8px;
  flex-direction: column;
  border-left: 3px solid #62c59e;
  background: rgba(5,9,7,.82);
  color: rgba(255,255,255,.72);
  font-size: 10px;
  line-height: 14px;
  pointer-events: none;
}

.spot-scene-tag.actual-tag { border-left-color: #df5a4c; }
.spot-scene-tag .spot-tag-title { color: #fff; font-size: 11px; font-weight: 900; }

/* 未找到：完全隐形，只保留可点热区；找到后才显示对勾 */
.difference-hotspot {
  position: absolute;
  z-index: 8;
  display: flex;
  width: 56px;
  height: 56px;
  min-width: 56px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
}

.difference-hotspot.hidden {
  /* 保持可点：不用 opacity:0，避免部分机型点不中 */
  border: 0;
  background: rgba(0, 0, 0, 0.01);
  color: transparent;
}

.difference-hotspot.found {
  border: 2px solid #60c89f;
  background: rgba(37,112,83,.72);
  box-shadow: 0 0 0 3px rgba(96,200,159,.22);
  color: #fff;
}

.difference-code {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.spot-console {
  display: grid;
  min-width: 0;
  grid-template-columns: 72px minmax(0,1fr) minmax(80px,160px) 150px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid rgba(255,255,255,.13);
  background: #111914;
}

.spot-count { display: flex; align-items: baseline; }
.spot-count-value { color: #e2bd66; font-size: 24px; font-weight: 900; line-height: 28px; }
.spot-count-label { margin-left: 3px; color: rgba(255,255,255,.46); font-size: 9px; }
.spot-detail { display: flex; min-width: 0; flex-direction: column; }
.spot-detail-title { font-size: 11px; font-weight: 900; line-height: 14px; }
.spot-detail-copy { overflow: hidden; margin-top: 1px; color: rgba(255,255,255,.58); font-size: 9px; line-height: 13px; text-overflow: ellipsis; white-space: nowrap; }
.spot-feedback { color: #e9c575; font-size: 9px; line-height: 13px; overflow-wrap: break-word; }
.spot-console .compact-command,
.spot-submit-btn {
  width: 150px;
  margin: 0;
  min-height: 32px;
  height: 32px;
  line-height: 32px;
}
.spot-submit-btn.disabled {
  opacity: .36;
  pointer-events: none;
}

.match-game-board {
  display: grid;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(200px,1fr) 120px minmax(200px,1fr);
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(5,10,8,.78);
}

.match-column {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: 20px repeat(6,minmax(0,1fr));
  gap: 4px;
}

.match-column-title { color: rgba(255,255,255,.5); font-size: 9px; font-weight: 900; line-height: 16px; }

.match-card {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 22px minmax(0,1fr);
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.035);
}

.match-card.response { grid-template-columns: 26px minmax(0,1fr); }
.match-card.selected { border-color: #e2bd66; background: rgba(226,189,102,.12); }
.match-card.wrong-select { border-color: #df5a4c; background: rgba(159,50,43,.2); }
.match-card.matched { border-color: #52b98f; background: rgba(42,121,88,.22); }
.match-card-index { color: #e2bd66; font-size: 9px; font-weight: 900; }
.match-card-icon { display: flex; width: 22px; height: 22px; align-items: center; justify-content: center; border: 1px solid rgba(226,189,102,.5); border-radius: 50%; color: #e6c77f; font-size: 9px; }
.match-card-copy { min-width: 0; font-size: 10px; font-weight: 800; line-height: 1.25; overflow-wrap: break-word; }

.match-core {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 6px 4px;
  border-right: 1px solid rgba(255,255,255,.1);
  border-left: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
}

.match-core-value { color: #e2bd66; font-size: 36px; font-weight: 900; line-height: 1; }
.match-core-label { margin-top: 1px; color: rgba(255,255,255,.42); font-size: 10px; }
.match-core-line { width: 36px; height: 2px; margin: 8px 0; background: #d75749; }
.match-core-copy {
  max-width: 100%;
  color: rgba(255,255,255,.62);
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: break-word;
}

.match-submit {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 30px;
  min-height: 30px;
  margin: 10px 0 0;
  padding: 0 6px;
  border-radius: 4px;
  background: #be4b40;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 30px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-submit-hover {
  background: #d25548;
}

.quote-game-board {
  display: grid;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-columns: 160px minmax(0,1fr);
  grid-template-rows: minmax(0,.7fr) minmax(0,.6fr) 52px;
  gap: 8px 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(5,10,8,.78);
}

.quote-status {
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-row: 1/4;
  justify-content: center;
  padding: 10px;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.11);
  overflow: hidden;
}

.quote-status-kicker { color: #e2bd66; font-size: 9px; font-weight: 900; line-height: 13px; }
.quote-status-title { margin-top: 4px; font-size: 13px; font-weight: 900; line-height: 1.3; overflow-wrap: break-word; }
.quote-score { display: flex; align-items: baseline; margin-top: 10px; }
.quote-score-value { color: #65c49e; font-size: 36px; font-weight: 900; line-height: 1; }
.quote-score-label { margin-left: 4px; color: rgba(255,255,255,.42); font-size: 10px; }

.quote-target {
  display: flex;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px;
  border: 1px dashed rgba(226,189,102,.48);
  background: rgba(226,189,102,.045);
}

.quote-placeholder { width: 100%; color: rgba(255,255,255,.34); font-size: 11px; line-height: 15px; text-align: center; }
.quote-typewriter { display: flex; min-width: 0; align-self: center; color: #f4dfaa; font-size: 14px; font-weight: 900; line-height: 1.4; overflow-wrap: break-word; }
.quote-caret { flex-shrink: 0; margin-left: 2px; color: #e2bd66; animation: quoteCaret .72s steps(1,end) infinite; }

.quote-selected-token,
.quote-token {
  display: flex;
  min-height: 30px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.2);
  background: #1b2822;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.quote-selected-token { border-color: rgba(101,196,158,.55); background: rgba(45,126,94,.22); }
.quote-remove { margin-left: 6px; color: rgba(255,255,255,.45); }

.quote-pool {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  background: rgba(0,0,0,.22);
  overflow: hidden;
}

.quote-token { position: relative; z-index: 2; box-shadow: 0 4px 10px rgba(0,0,0,.24); }
.quote-token-grip { margin-right: 5px; color: #e2bd66; }

.quote-console {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
}

.quote-feedback { min-width: 0; color: #edc779; font-size: 10px; line-height: 1.3; overflow-wrap: break-word; }
.quote-feedback.success { color: #75d3ad; }
.quote-actions { display: flex; flex-shrink: 0; gap: 5px; }
.quote-actions .compact-command { min-width: 96px; margin: 0; min-height: 30px; }
.pass-command { background: #327f64; }

.ghost-command {
  min-width: 88px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.26);
  color: rgba(255,255,255,.78);
  font-size: 11px;
  line-height: 1.3;
}

.timed-failure {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  flex-direction: column;
  background: rgba(3,7,5,.9);
  backdrop-filter: blur(5px);
}

.failure-symbol { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid #df5a4c; border-radius: 50%; color: #ef7569; font-size: 22px; font-weight: 900; }
.failure-title { margin-top: 8px; font-size: 18px; font-weight: 900; line-height: 22px; }
.failure-copy { margin-top: 4px; color: rgba(255,255,255,.58); font-size: 12px; line-height: 16px; text-align: center; }
.timed-failure .primary-command { width: 200px; margin-top: 12px; }

.quiz-layer {
  /* 与 conduct-layer 同一节点：用横向 flex，高度只靠 top/bottom */
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  overflow: hidden;
  box-sizing: border-box;
  width: auto;
  height: auto;
  max-height: none;
  border: 1px solid rgba(255,255,255,.22);
  background: #101713;
}

.quiz-side {
  display: flex;
  box-sizing: border-box;
  width: 96px;
  min-width: 96px;
  max-width: 96px;
  flex: 0 0 96px;
  min-height: 0;
  justify-content: space-between;
  padding: 10px 8px;
  flex-direction: column;
  background: #25302b;
  overflow: hidden;
}

.quiz-side-kicker { color: rgba(255,255,255,.55); font-size: 9px; font-weight: 900; line-height: 12px; }
.quiz-side-index { color: #df5a4c; font-size: 34px; font-weight: 900; line-height: 1; }
.quiz-stage-progress,
.quiz-total-progress { display: flex; flex-direction: column; color: rgba(255,255,255,.48); font-size: 9px; line-height: 12px; }
.quiz-stage-progress { margin-top: auto; }
.quiz-stage-progress .quiz-progress-value,
.quiz-total-progress .quiz-progress-value { margin-top: 1px; color: #fff; font-size: 13px; font-weight: 900; line-height: 16px; }
.quiz-total-progress { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); }

/* 主区：上内容 + 下固定操作条，操作条永远可见 */
.quiz-main {
  display: flex;
  box-sizing: border-box;
  width: 0;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  background: #101713;
}

.quiz-content {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 10px 14px 8px;
  overflow: hidden;
}

.quiz-content > .section-kicker {
  flex: 0 0 auto;
}

.quiz-question {
  display: block;
  flex: 0 0 auto;
  max-width: 100%;
  margin-top: 4px;
  color: #f5f1e7;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: break-word;
}

.quiz-options {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 8px;
  overflow-x: hidden;
  overflow-y: auto;
}

.quiz-option {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  flex: 0 0 auto;
  grid-template-columns: 26px minmax(0,1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: #f5f1e7;
}

.quiz-option-hover {
  border-color: #e2bd66;
  background: rgba(226,189,102,.12);
}

.quiz-option.correct { border-color: #4eb58f; background: rgba(44,128,97,.28); }
.quiz-option.wrong { border-color: #d85047; background: rgba(158,55,48,.28); }
.quiz-option-code {
  display: flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226,189,102,.55);
  border-radius: 50%;
  color: #e2bd66;
  font-size: 10px;
  font-weight: 900;
}
.quiz-option-copy {
  min-width: 0;
  color: #f5f1e7;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: break-word;
}
.quiz-option-state { color: #f5f1e7; text-align: center; font-size: 12px; font-weight: 900; }

.quiz-feedback {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  grid-template-columns: 72px minmax(0,1fr);
  gap: 8px;
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 3px solid #4eb58f;
  background: rgba(255,255,255,.06);
  color: #f5f1e7;
  font-size: 11px;
  line-height: 1.3;
  max-height: 42px;
  overflow: hidden;
}

.quiz-feedback.wrong { border-left-color: #d85047; }
.quiz-feedback-state { color: #80d9b8; font-weight: 900; }
.quiz-feedback.wrong .quiz-feedback-state { color: #f0968f; }
.quiz-feedback-copy { min-width: 0; color: rgba(255,255,255,.78); overflow-wrap: break-word; }

/* 固定底栏：始终占位，按钮一定可见 */
.quiz-footer {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  flex: 0 0 48px;
  align-items: center;
  justify-content: flex-end;
  padding: 0 14px;
  border-top: 1px solid rgba(255,255,255,.16);
  background: #16201b;
}

.quiz-next-btn {
  display: flex;
  box-sizing: border-box;
  width: 200px;
  height: 34px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #be4b40;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  line-height: 34px;
  text-align: center;
}

.quiz-next-btn.is-disabled {
  background: #3a4540;
  color: rgba(255,255,255,.45);
}

.quiz-next-btn-hover {
  background: #d25548;
}

.stage-result {
  display: grid !important;
  height: auto;
  grid-template-columns: 140px minmax(0,1fr);
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
}

.stage-result-index { display: flex; align-items: center; flex-direction: column; color: rgba(255,255,255,.44); font-size: 9px; font-weight: 900; }
.stage-result-index .stage-result-number { margin-top: 2px; color: #65c49e; font-size: 64px; line-height: 1; }
.stage-result-copy { min-width: 0; min-height: 0; overflow: hidden; }
.stage-result-title { display: block; margin-top: 4px; font-size: 24px; font-weight: 900; line-height: 1.15; overflow-wrap: break-word; }
.stage-result-quote { display: block; margin-top: 8px; padding: 8px 10px; border-left: 3px solid #e2bd66; background: rgba(255,255,255,.05); color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.4; overflow-wrap: break-word; }
.stage-result-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.stage-result-stat { padding: 4px 7px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.6); font-size: 10px; }

.campaign-result {
  display: grid !important;
  height: auto;
  grid-template-columns: 140px minmax(0,1fr);
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
}

.campaign-rating { display: flex; align-items: center; flex-direction: column; }
.campaign-rating-value { display: flex; width: 110px; height: 110px; align-items: center; justify-content: center; border: 2px solid #e2bd66; border-radius: 50%; color: #e2bd66; font-size: 56px; font-weight: 900; line-height: 1; box-shadow: inset 0 0 0 6px rgba(255,255,255,.025); }
.campaign-rating-label { margin-top: 6px; color: rgba(255,255,255,.44); font-size: 9px; font-weight: 900; }
.campaign-result-copy { min-width: 0; min-height: 0; overflow: hidden; }
.campaign-result-title { display: block; margin-top: 4px; font-size: 24px; font-weight: 900; line-height: 1.15; overflow-wrap: break-word; }
.campaign-result-body { display: block; margin-top: 6px; color: rgba(255,255,255,.67); font-size: 12px; line-height: 1.4; overflow-wrap: break-word; }
.campaign-result-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 8px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.result-stat { display: flex; align-items: center; flex-direction: column; border-right: 1px solid rgba(255,255,255,.11); }
.result-stat:last-child { border-right: 0; }
.result-stat-value { font-size: 16px; font-weight: 900; line-height: 20px; }
.result-stat-label { margin-top: 1px; color: rgba(255,255,255,.45); font-size: 9px; line-height: 13px; }
.campaign-result-actions { display: flex; gap: 8px; margin-top: 10px; flex-shrink: 0; }
.campaign-result-actions .primary-command { width: min(280px,100%); margin: 0; }
.campaign-result-actions .ghost-command { min-width: 100px; }



@media (max-width: 1050px) {
  .conduct-hud { grid-template-columns: minmax(160px,1fr) minmax(140px,240px) minmax(160px,1fr); gap: 8px; }
  .conduct-hud-right { gap: 8px; }
  .conduct-overview { gap: 14px; }
  .overview-copy { padding-left: 4px; }
  .conduct-page {
    --safe-left: max(52px, calc(env(safe-area-inset-left, 0px) + 20px));
    --safe-right: max(44px, calc(env(safe-area-inset-right, 0px) + 14px));
  }
  .overview-title { font-size: 26px; }
  .stage-brief { grid-template-columns: 80px minmax(240px,1fr) minmax(140px,.5fr); gap: 12px; }
  .stage-index-number { font-size: 48px; }
  .stage-brief-title { font-size: 22px; }
  .image-game-board { grid-template-columns: minmax(0,1fr) minmax(250px,.95fr); }
  .spot-console { grid-template-columns: 60px minmax(0,1fr) 140px; }
  .spot-feedback { display: none; }
  .match-game-board { grid-template-columns: minmax(180px,1fr) 100px minmax(180px,1fr); gap: 6px; padding: 6px; }
  .match-core-value { font-size: 28px; }
  .quote-game-board { grid-template-columns: 130px minmax(0,1fr); }
  .stage-brief-quote { display: none; }
}

@media (max-height: 400px) {
  .overview-title { font-size: 22px; }
  .primary-command { min-height: 34px; margin-top: 8px; font-size: 12px; }
  .stage-brief-title { font-size: 20px; }
  .stage-brief-body { font-size: 11px; line-height: 1.3; }
  .console-question { font-size: 12px; }
  .console-option-copy { font-size: 10px; }
  .compact-command { min-height: 30px; height: 30px; font-size: 10px; line-height: 30px; }
  .quiz-question { font-size: 12px; }
  .quiz-option { min-height: 30px; padding: 5px 8px; }
  .quiz-option-copy { font-size: 11px; }
  .quiz-footer { height: 44px; min-height: 44px; max-height: 44px; flex-basis: 44px; }
  .quiz-next-btn { width: 180px; height: 30px; min-height: 30px; font-size: 12px; line-height: 30px; }
  .stage-result-title { font-size: 18px; }
  .campaign-result-title { font-size: 18px; }
  .campaign-rating-value { width: 84px; height: 84px; font-size: 40px; }
}

@keyframes spotPulse {
  from { opacity: .8; transform: scale(.75); }
  to { opacity: 0; transform: scale(1.3); }
}

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

.scenario-stage {
  display: grid;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-rows: auto minmax(0,1fr) auto auto;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(5,10,8,.78);
}

.scenario-text {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.scenario-options {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  overflow-y: auto;
}

.scenario-option {
  display: grid;
  grid-template-columns: 26px minmax(0,1fr) 18px;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  min-height: 36px;
}

.scenario-option-hover {
  border-color: #e2bd66;
  background: rgba(226,189,102,.12);
}

.scenario-option.correct {
  border-color: #4eb58f;
  background: rgba(44,128,97,.28);
}

.scenario-option.wrong {
  border-color: #d85047;
  background: rgba(158,55,48,.28);
}

.scenario-option-code {
  display: flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226,189,102,.55);
  border-radius: 50%;
  color: #e2bd66;
  font-size: 10px;
  font-weight: 900;
}

.scenario-option-copy {
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.scenario-option-state {
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.scenario-feedback {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  gap: 8px;
  padding: 6px 8px;
  border-left: 3px solid #4eb58f;
  background: rgba(255,255,255,.06);
  font-size: 11px;
  line-height: 1.3;
}

.scenario-feedback.wrong {
  border-left-color: #d85047;
}

.scenario-feedback-label {
  color: #80d9b8;
  font-weight: 900;
}

.scenario-feedback.wrong .scenario-feedback-label {
  color: #f0968f;
}

.scenario-feedback-copy {
  color: rgba(255,255,255,.78);
  overflow-wrap: break-word;
}

.scenario-next-btn {
  width: 100%;
  max-width: 200px;
  margin-left: auto;
}

.scenario-heading {
  display: grid;
  grid-template-columns: minmax(160px,.7fr) minmax(220px,1.4fr) 80px;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.scenario-heading-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.scenario-heading-theme {
  font-size: 13px;
  font-weight: 900;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scenario-meta {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  color: #edcf8b;
}

.scenario-meta-label {
  margin-right: 3px;
  color: rgba(255,255,255,.42);
  font-size: 9px;
}

.scenario-meta-value {
  font-size: 20px;
  font-weight: 900;
  line-height: 22px;
}

.act-brief {
  display: grid !important;
  height: auto;
  grid-template-columns: 100px minmax(0,1fr);
  align-items: center;
  gap: 20px;
  overflow: hidden;
}

.act-brief-index {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.act-index-label {
  color: rgba(255,255,255,.42);
  font-size: 10px;
  font-weight: 800;
}

.act-index-number {
  color: #d99a42;
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
}

.act-index-total {
  color: rgba(255,255,255,.36);
  font-size: 12px;
}

.act-brief-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.act-brief-title {
  margin-top: 4px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.12;
  overflow-wrap: break-word;
}

.act-brief-subtitle {
  margin-top: 3px;
  color: #edcf8b;
  font-size: 14px;
  font-weight: 800;
}

.act-brief-rule {
  width: 48px;
  height: 3px;
  margin: 8px 0;
  background: #d99a42;
  flex-shrink: 0;
}

.act-brief-body {
  color: rgba(255,255,255,.7);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.act-start {
  margin-top: 10px;
}

.act-result {
  display: grid !important;
  height: auto;
  grid-template-columns: 140px minmax(0,1fr);
  align-items: center;
  gap: 20px;
  overflow: hidden;
}

.act-result-index {
  display: flex;
  align-items: center;
  flex-direction: column;
  color: rgba(255,255,255,.44);
  font-size: 9px;
  font-weight: 900;
}

.act-result-number {
  margin-top: 2px;
  color: #d99a42;
  font-size: 64px;
  line-height: 1;
}

.act-result-copy {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.act-result-title {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}

.act-result-quote {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid #e2bd66;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.4;
}

.act-result-quote-body {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.4;
}

.act-result-quote-source {
  display: block;
  color: rgba(255,255,255,.5);
  font-size: 16px;
  line-height: 1.35;
}

.act-result-quote-body + .act-result-quote-source {
  margin-top: 6px;
}

.act-result-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.act-result-stat {
  padding: 4px 7px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.6);
  font-size: 10px;
}

.conduct-map {
  display: flex;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
  padding: 4px 0;
  min-width: 0;
  overflow: hidden;
}

.conduct-node {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 36px minmax(0,1fr) 56px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  min-height: 0;
  flex: 1;
  max-height: 56px;
}

.conduct-node::before {
  position: absolute;
  bottom: -10px;
  left: 26px;
  width: 1px;
  height: 18px;
  background: rgba(226,189,102,.36);
  content: '';
}

.conduct-node:last-child::before { display: none; }

.conduct-node-index {
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226,189,102,.5);
  border-radius: 50%;
  color: #edcf8b;
  font-size: 10px;
  font-weight: 900;
}

.conduct-node-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.conduct-node-title {
  font-size: 13px;
  font-weight: 900;
  line-height: 16px;
  overflow-wrap: break-word;
}

.conduct-node-type {
  justify-self: end;
  color: #65c49e;
  font-size: 10px;
  font-weight: 800;
  line-height: 15px;
  white-space: nowrap;
}

/* 与其它篇章使用相同的列表可用空间，五行均分高度，上限保持 56px。 */
@media (max-width: 700px), (max-height: 400px) {
  .conduct-overview {
    top: calc(var(--safe-top) + 46px);
    right: max(40px, calc(env(safe-area-inset-right, 0px) + 12px));
    left: max(44px, calc(env(safe-area-inset-left, 0px) + 14px));
    grid-template-columns: minmax(0,5fr) minmax(0,6fr);
    gap: 12px;
  }

  .conduct-overview .overview-copy {
    padding-left: 0;
  }

  .conduct-overview .overview-title {
    font-size: 20px;
  }

  .conduct-overview .primary-command {
    width: min(260px,100%);
    margin-left: 0;
    margin-right: 0;
  }

  .conduct-node {
    grid-template-columns: 30px minmax(0,1fr) auto;
    gap: 6px;
    padding: 3px 6px;
  }

  .conduct-node::before {
    left: 18px;
  }

  .conduct-node-index {
    width: 24px;
    height: 24px;
    font-size: 9px;
  }

  .conduct-node-title {
    font-size: 12px;
    line-height: 15px;
  }

  .conduct-node-type {
    font-size: 9px;
    line-height: 13px;
  }
}

@media (max-width: 560px), (max-height: 320px) {
  .conduct-overview .overview-title {
    font-size: 17px;
  }

  .conduct-node {
    grid-template-columns: 26px minmax(0,1fr);
    row-gap: 1px;
    align-content: center;
  }

  .conduct-node::before {
    left: 17px;
  }

  .conduct-node-index {
    grid-column: 1;
    grid-row: 1/3;
    width: 22px;
    height: 22px;
  }

  .conduct-node-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .conduct-node-type {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    line-height: 12px;
  }
}

.conduct-operation {
  position: absolute;
  z-index: 5;
  top: 54px;
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  display: grid;
  grid-template-rows: 40px minmax(0,1fr);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}
.game-heading {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(160px,.7fr) minmax(220px,1.4fr) 90px;
  align-items: center;
  gap: 12px;
}

.game-heading-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.game-heading-title {
  overflow: hidden;
  margin-top: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-timer {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  color: #edcf8b;
}

.game-timer.urgent { color: #ff786d; }
.game-timer .timer-label { margin-right: 4px; color: rgba(255,255,255,.42); font-size: 9px; }
.game-timer .timer-value { font-size: 20px; font-weight: 900; line-height: 22px; }
.game-timer .timer-unit { margin-left: 2px; font-size: 9px; }

.game-board {
  position: relative;
  display: grid;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-rows: minmax(0,1fr);
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(5,10,8,.78);
}

.reaction-game,
.morale-game,
.road-game {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.reaction-prompt {
  max-width: 760px;
  padding: 12px 16px;
  border-left: 4px solid #d99a42;
  background: rgba(217,154,66,.12);
  color: #f7e7c4;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: break-word;
}

.reaction-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.reaction-button {
  width: 150px;
  min-height: 44px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.28);
  background: #25302b;
  color: #f5f1e7;
  font-size: 15px;
  font-weight: 900;
}

.reaction-button.reaction-a { border-color: rgba(101,196,158,.6); background: rgba(45,126,94,.3); }
.reaction-button.reaction-b { border-color: rgba(216,90,77,.6); background: rgba(157,55,47,.3); }
.reaction-button[disabled] { opacity: .45; }

.reaction-score {
  display: flex;
  gap: 16px;
  color: rgba(255,255,255,.52);
  font-size: 11px;
}

.reaction-score-item {
  padding: 4px 8px;
  background: rgba(255,255,255,.05);
}

.game-message {
  color: #e9c575;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: break-word;
}

.morale-bar {
  position: relative;
  overflow: hidden;
  width: min(620px,80%);
  height: 34px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(0,0,0,.32);
}

.morale-fill {
  height: 100%;
  background: linear-gradient(90deg, #b84a42, #efd276);
  transition: width .12s ease;
}

.morale-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}

.morale-hint {
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

.morale-button {
  width: 220px;
  min-height: 52px;
  margin: 0;
  border: 1px solid rgba(239,210,118,.5);
  background: #b84a42;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.morale-button.done { background: #2f7d61; }
.morale-button[disabled] { opacity: .55; }

.road-game {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}

.road-scene {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

.road-segment {
  position: relative;
  display: flex;
  width: 130px;
  min-height: 82px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.22);
  background: #343b36;
  color: rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: 900;
}

.road-segment.current {
  border-color: #efd276;
  background: #5a5140;
  color: #f7e7c4;
  box-shadow: 0 0 22px rgba(239,210,118,.26);
}

.road-segment.done {
  border-color: #65c49e;
  background: #2f5b49;
  color: #b9ead7;
}

.road-segment-strip {
  width: 64px;
  height: 10px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(0,0,0,.28);
}

.road-segment.current .road-segment-strip {
  border-color: rgba(239,210,118,.6);
  background: rgba(239,210,118,.16);
}

.road-progress {
  position: relative;
  overflow: hidden;
  width: min(560px,80%);
  height: 30px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.32);
}

.road-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8a6a3a, #d99a42);
  transition: width .1s ease;
}

.road-progress-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}

.road-event {
  display: flex;
  width: min(560px,80%);
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-left: 4px solid #d85a4d;
  background: rgba(216,90,77,.12);
}

.road-event-prompt {
  color: #ffe0b0;
  font-size: 16px;
  font-weight: 900;
}

.road-event-actions {
  display: flex;
  gap: 8px;
}

.road-event-button {
  width: 84px;
  min-height: 36px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.3);
  background: #25302b;
  color: #f5f1e7;
  font-size: 13px;
  font-weight: 900;
}

.road-event-button.road-event-correct {
  border-color: rgba(101,196,158,.7);
  background: rgba(45,126,94,.36);
}

.road-event-button.road-event-wrong {
  border-color: rgba(216,90,77,.7);
  background: rgba(157,55,47,.36);
}

.road-event-button[disabled] { opacity: .45; }

.road-meta {
  display: flex;
  gap: 14px;
  color: rgba(255,255,255,.48);
  font-size: 10px;
}

.road-button {
  width: 220px;
  min-height: 52px;
  margin: 0;
  border: 1px solid rgba(239,210,118,.5);
  background: #8a6a3a;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.road-button.done { background: #2f7d61; }
.road-button[disabled] { opacity: .55; }

.game-next-btn,
.game-retry-btn {
  width: 200px;
  justify-self: end;
  margin: 8px 0 0 auto;
}

.game-retry-btn { background: #3a4540; }
.compact-command-hover { background: #d25548; }

.find-game {
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  gap: 6px;
}

.find-head {
  display: flex;
  min-width: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.find-scene-title {
  min-width: 0;
  overflow: hidden;
  color: #e2bd66;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.find-count {
  flex-shrink: 0;
  color: rgba(255,255,255,.66);
  font-size: 12px;
  font-weight: 800;
}

.find-scene {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  flex-wrap: wrap;
  align-content: space-evenly;
  justify-content: center;
  gap: 8px 10px;
  overflow: hidden;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  background:
    radial-gradient(circle at 20% 18%, rgba(226,189,102,.05), transparent 42%),
    linear-gradient(160deg, rgba(32,41,28,.92), rgba(15,20,13,.96));
}

.find-item {
  display: flex;
  width: 124px;
  box-sizing: border-box;
  align-items: center;
  flex-direction: column;
  padding: 7px 6px 6px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: rgba(255,255,255,.05);
}

.find-item.viol { border-style: dashed; border-color: rgba(240,155,145,.5); }
.find-item.found {
  opacity: .38;
  border-color: rgba(101,196,158,.8);
  background: rgba(44,128,97,.16);
}
.find-item-hover { border-color: #e2bd66; background: rgba(226,189,102,.1); }

.find-item-icon { font-size: 24px; line-height: 1.2; }

.find-item-name {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  color: #cdd8c1;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.find-meta {
  display: flex;
  min-width: 0;
  flex-shrink: 0;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,.55);
  font-size: 11px;
}

.find-fb {
  min-height: 16px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.find-fb.ok { color: #65c49e; }
.find-fb.bad { color: #ef8a76; }

@media (max-height: 400px) {
  .reaction-prompt { font-size: 16px; padding: 8px 12px; }
  .reaction-button { min-height: 36px; font-size: 13px; }
  .morale-button, .road-button { min-height: 40px; }
  .find-item { width: 106px; padding: 5px 5px 4px; }
  .find-item-icon { font-size: 20px; }
  .find-item-name { font-size: 11px; }
  .find-fb { font-size: 11px; min-height: 14px; }
}
.morale-gauge {
  width: min(620px,80%);
}


.gauge-track {
  position: relative;
  height: 40px;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.22);
}

.gauge-sweet {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(239,210,118,.18);
  border-left: 1px solid rgba(239,210,118,.5);
  border-right: 1px solid rgba(239,210,118,.5);
  transition: left .08s linear, width .08s linear;
}

.gauge-cursor {
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  margin-left: -2px;
  background: #efd276;
  box-shadow: 0 0 10px rgba(239,210,118,.6);
  transition: left .08s linear;
}

.gauge-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  color: rgba(255,255,255,.38);
  font-size: 9px;
}

.gauge-mark.mark-center {
  color: #efd276;
  font-weight: 800;
}

.morale-meta {
  display: flex;
  gap: 14px;
  color: rgba(255,255,255,.48);
  font-size: 10px;
}

.morale-meta-item.cold {
  color: #8fc9f0;
  font-weight: 800;
}

.game-message.cold-msg {
  color: #8fc9f0;
  font-weight: 800;
}

.conduct-node.unlocked {
  background: rgba(255,255,255,.04);
}

.conduct-node.completed .conduct-node-index {
  border-color: rgba(101,196,158,.8);
  color: #65c49e;
}

.conduct-node.completed .conduct-node-type {
  color: #65c49e;
}

.conduct-node.locked {
  opacity: .48;
}

.conduct-node.locked .conduct-node-type {
  color: rgba(255,255,255,.42);
}

.conduct-node.unlocked:active {
  background: rgba(226,189,102,.12);
}

.level-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  align-items: center;
}

.level-result-actions .primary-command,
.level-result-actions .ghost-command {
  margin-top: 0;
}

.level-result-actions .ghost-command {
  min-height: 42px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-size: 13px;
  font-weight: 800;
}

.inline-buddy {
  display: block;
  margin: calc(12 * var(--rpx)) 0;
}
.game-buddy,
.daily-buddy,
.scenario-buddy,
.ship-buddy {
  max-width: 92%;
}

/* level-buddy layout */

.inline-buddy,
.checkpoint-buddy,
.result-buddy,
.quiz-buddy,
.scenario-buddy,
.daily-buddy,
.game-buddy,
.ship-buddy,
.failure-buddy,
.campaign-buddy {
  display: block;
  margin-top: calc(8 * var(--rpx));
  margin-bottom: calc(4 * var(--rpx));
  max-width: 100%;
}

/* 篇章入口页：篇章名调大 */
.overview-copy .section-kicker {
  font-size: 16px;
  line-height: 22px;
}

/* 灯语传令 signalRelay */
.signal-game {
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  gap: 8px;
}

.signal-status,
.signal-hint {
  display: flex;
  min-width: 0;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
}

.signal-meta-item {
  color: rgba(255,255,255,.62);
  font-size: 11px;
  font-weight: 800;
}

.signal-meta-item.noise {
  color: #ff9a8c;
}

.signal-wall {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 0%, rgba(226,189,102,.08), transparent 55%),
    linear-gradient(180deg, rgba(24,30,25,.92), rgba(10,14,11,.96));
}

.signal-wall-label {
  color: rgba(255,255,255,.52);
  font-size: 10px;
  letter-spacing: 3px;
}

.signal-beacon {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 3px;
  vertical-align: -1px;
  border-radius: 50%;
  border: 1px solid rgba(226,189,102,.45);
  background: rgba(226,189,102,.18);
}

.signal-beacon.on {
  border-color: #e2bd66;
  background: #e2bd66;
  box-shadow: 0 0 14px rgba(226,189,102,.85);
}

.signal-pads {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(0, 1fr);
  gap: 8px;
}

.signal-pad {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 22%, rgba(226,189,102,.05), transparent 60%),
    rgba(255,255,255,.04);
}

.signal-pad-icon {
  color: rgba(255,255,255,.66);
  font-size: 20px;
  line-height: 1;
}

.signal-pad-name {
  color: rgba(255,255,255,.5);
  font-size: 10px;
  font-weight: 800;
}

.signal-pad.lit {
  border-color: #e2bd66;
  background: rgba(226,189,102,.22);
  box-shadow: 0 0 16px rgba(226,189,102,.5);
}

.signal-pad.lit .signal-pad-icon {
  color: #f0d290;
}

.signal-pad.noise {
  border-color: #e05a4d;
  background: rgba(216,90,77,.26);
  box-shadow: 0 0 16px rgba(216,90,77,.55);
}

.signal-pad.noise .signal-pad-icon {
  color: #ff9a8c;
}

.signal-pad.hit {
  border-color: #4eb58f;
  background: rgba(44,128,97,.32);
}

.signal-pad.hit .signal-pad-icon {
  color: #7fd7b5;
}

.signal-pad.miss {
  border-color: #d85047;
  background: rgba(158,55,48,.3);
}

.signal-pad.miss .signal-pad-icon {
  color: #ff9a8c;
}

.signal-pad-hover {
  border-color: rgba(226,189,102,.6);
}

/* 军民分派台 dispatchBoard */
.dispatch-game {
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  gap: 8px;
}

.dispatch-status {
  display: flex;
  min-width: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dispatch-meta-item {
  color: rgba(255,255,255,.62);
  font-size: 11px;
  font-weight: 800;
}

.dispatch-road {
  position: relative;
  flex: 0 0 auto;
  height: 96px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(30,38,31,.55) 0%, rgba(24,30,25,.35) 50%, rgba(15,20,16,.6) 100%);
  overflow: hidden;
}

.dispatch-road::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(255,255,255,.14);
}

.dispatch-road-label {
  position: absolute;
  top: 6px;
  left: 10px;
  color: rgba(255,255,255,.4);
  font-size: 9px;
  letter-spacing: 2px;
}

.dispatch-card {
  position: absolute;
  top: 50%;
  left: 100%;
  display: flex;
  width: 184px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  border: 1px solid rgba(226,189,102,.68);
  border-radius: 8px;
  background: linear-gradient(160deg, #37301d, #1f1b10);
  box-shadow: 0 3px 12px rgba(0,0,0,.55);
  transform: translateY(-50%) translateX(-100%);
}

.dispatch-card.empty {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  transform: translate(0, -50%);
  right: 12px;
  left: auto;
}

.dispatch-card-name {
  color: rgba(255,255,255,.96);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
}

.dispatch-teams {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(0, 1fr);
  gap: 8px;
}

.dispatch-team {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 22%, rgba(226,189,102,.05), transparent 60%),
    rgba(255,255,255,.04);
}

.dispatch-team-icon {
  font-size: 20px;
  line-height: 1.2;
}

.dispatch-team-name {
  color: rgba(255,255,255,.62);
  font-size: 11px;
  font-weight: 800;
}

.dispatch-team-hover {
  border-color: #e2bd66;
  background: rgba(226,189,102,.14);
}

/* 小游戏结果弹窗（不挤压游戏区） */
.game-result-overlay {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 16px;
  background: rgba(3,7,5,.9);
  backdrop-filter: blur(5px);
}

.game-result-symbol {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 900;
}

.game-result-symbol.pass {
  border: 1px solid #4eb58f;
  color: #7fd7b5;
}

.game-result-symbol.fail {
  border: 1px solid #df5a4c;
  color: #ef7569;
}

.game-result-title {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 900;
  line-height: 22px;
}

.game-result-copy {
  margin-top: 6px;
  color: rgba(255,255,255,.6);
  font-size: 12px;
}

.game-result-button {
  margin-top: 14px;
  width: min(320px, 100%);
  min-height: 40px;
}