.victory-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));
}

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

.victory-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;
}

.victory-sweep {
  position: absolute;
  top: 23%;
  right: 8%;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(232,192,98,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 56px rgba(232,192,98,.018), 0 0 0 112px rgba(232,192,98,.012);
}

.victory-sweep::before,
.victory-sweep::after {
  position: absolute;
  background: rgba(232,192,98,.12);
  content: '';
}

.victory-sweep::before { top: 50%; left: -28%; width: 156%; height: 1px; }
.victory-sweep::after { top: -28%; left: 50%; width: 1px; height: 156%; }

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

.victory-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;
}

.victory-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;
}

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

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

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

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

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

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

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

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

.victory-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; }

.victory-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;
}

.campaign-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);
  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: 14px;
  line-height: 1.5;
  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,.7);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

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

.victory-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: 15px;
  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-x: hidden;
  overflow-y: auto;
}

.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: 13px; 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; }

.mine-traverse-board {
  position: relative;
  display: grid;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 8px 12px 7px;
  border: 1px solid rgba(255, 255, 255, .18);
  background:
    radial-gradient(circle at 74% 16%, rgba(224, 187, 94, .13), transparent 25%),
    linear-gradient(145deg, #111b14, #0a110d 72%);
  box-sizing: border-box;
}

.mine-traverse-topbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border-bottom: 1px solid rgba(226, 189, 102, .19);
}

.mine-traverse-title-wrap {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.mine-traverse-kicker {
  color: rgba(226, 189, 102, .56);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.3px;
  line-height: 10px;
}

.mine-traverse-title {
  margin-top: 1px;
  color: #f0d58d;
  font-size: 16px;
  font-weight: 900;
  line-height: 19px;
}

.mine-traverse-message {
  overflow: hidden;
  margin-top: 1px;
  color: rgba(255, 255, 255, .58);
  font-size: 9px;
  line-height: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mine-traverse-stats {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mine-traverse-stat,
.mine-traverse-countdown {
  display: flex;
  align-items: baseline;
  color: #e2bd66;
}

.mine-traverse-stat-value {
  font-family: "DIN Alternate", "Arial Narrow", sans-serif;
  font-size: 23px;
  font-weight: 900;
  line-height: 25px;
}

.mine-traverse-stat-label,
.mine-traverse-countdown text:last-child {
  margin-left: 2px;
  color: rgba(255, 255, 255, .48);
  font-size: 9px;
  line-height: 12px;
}

.mine-traverse-countdown text:first-child {
  font-family: "DIN Alternate", "Arial Narrow", sans-serif;
  font-size: 21px;
  font-weight: 900;
  line-height: 23px;
}

.mine-traverse-board.preview .mine-traverse-countdown {
  color: #e96d55;
  animation: mine-countdown-pulse .85s ease-in-out infinite alternate;
}

.mine-traverse-grid {
  display: grid;
  align-self: stretch;
  justify-self: center;
  width: min(1080px, 100%);
  min-width: 0;
  min-height: 0;
  gap: 6px;
}

.mine-success-overlay {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 18px;
  background: rgba(5, 12, 8, .82);
  backdrop-filter: blur(4px);
  animation: mine-success-in .34s ease-out both;
}

.mine-success-buddy {
  margin-top: 0;
}

.mine-quiz-button {
  width: min(230px, 100%);
  margin-top: 14px;
}

.mine-route-cell {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(94, 111, 93, .3);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(31, 43, 32, .96), rgba(18, 28, 20, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 3px 7px rgba(0, 0, 0, .22);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.mine-route-cell::after {
  position: absolute;
  inset: 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  content: '';
  pointer-events: none;
}

.mine-route-cell.start {
  border-color: rgba(105, 196, 119, .68);
  background: linear-gradient(145deg, rgba(44, 76, 47, .98), rgba(26, 49, 30, .98));
  box-shadow: inset 0 1px rgba(194, 240, 162, .18), 0 0 15px rgba(84, 180, 94, .16);
}

.mine-route-cell.end {
  border-color: rgba(225, 179, 91, .7);
  background: linear-gradient(145deg, rgba(74, 57, 39, .98), rgba(51, 39, 29, .98));
  box-shadow: inset 0 1px rgba(255, 224, 155, .18), 0 0 15px rgba(221, 167, 74, .14);
}

.mine-route-cell.obstacle-visible {
  border-color: rgba(193, 154, 96, .82);
  background: linear-gradient(145deg, #4b4030, #302a21);
  color: #e7c38d;
  box-shadow: inset 0 1px rgba(255, 226, 174, .13);
}

.mine-route-cell.available {
  border-color: rgba(226, 189, 102, .78);
  box-shadow: inset 0 0 0 1px rgba(226, 189, 102, .18), 0 0 13px rgba(226, 189, 102, .18);
  transform: translateY(-1px);
}

.mine-route-cell.available::after {
  border-color: rgba(238, 207, 129, .23);
  animation: mine-cell-breathe 1.25s ease-in-out infinite alternate;
}

.mine-route-cell.visited {
  border-color: rgba(93, 188, 149, .68);
  background: linear-gradient(145deg, rgba(29, 65, 49, .95), rgba(18, 42, 32, .98));
}

.mine-route-cell.current {
  box-shadow: inset 0 0 0 2px rgba(239, 207, 121, .27), 0 0 17px rgba(100, 194, 148, .27);
  transform: scale(.98);
}

.mine-route-hover {
  filter: brightness(1.16);
}

.mine-route-cell.blocked {
  border-color: #d7945c;
  background: repeating-linear-gradient(135deg, rgba(220, 158, 86, .13) 0 7px, transparent 7px 14px), #4b3428;
  color: #f3c38e;
  box-shadow: inset 0 0 0 2px rgba(215, 148, 92, .25);
}

.mine-route-symbol {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .55);
}

.wire-obstacle {
  display: block;
  width: min(78%, 80px);
  height: min(78%, 56px);
  flex: 0 0 auto;
  overflow: visible;
  pointer-events: none;
}

.start-symbol {
  color: #bce985;
  font-size: 30px;
  line-height: 1;
}

.end-symbol {
  color: #f1d48e;
  font-size: 30px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(239, 195, 102, .55);
}

.current-symbol {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(246, 222, 147, .86);
  border-radius: 50%;
  background: #4a9c76;
  color: #d8f0c1;
  font-size: 10px;
  box-shadow: 0 0 14px rgba(91, 205, 153, .52);
  animation: mine-current-pulse 1.1s ease-in-out infinite alternate;
}

.footstep-symbol {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #78d1a7;
  box-shadow: 0 0 9px rgba(101, 206, 158, .6);
  color: transparent;
  font-size: 0;
}

.mine-traverse-footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .52);
  font-size: 9px;
  line-height: 12px;
  text-align: center;
}

.mine-traverse-board.failed .mine-traverse-footer { color: #ef9a88; }
.mine-traverse-board.won .mine-traverse-footer { color: #9ee2bf; }

@keyframes mine-success-in {
  from { opacity: 0; transform: scale(.97); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes mine-cell-breathe {
  from { opacity: .45; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes mine-current-pulse {
  from { box-shadow: 0 0 5px rgba(91, 205, 153, .28); }
  to { box-shadow: 0 0 16px rgba(91, 205, 153, .68); }
}

@keyframes mine-countdown-pulse {
  from { opacity: .58; }
  to { opacity: 1; }
}

.reduced .mine-route-cell.available::after,
.reduced .mine-route-cell.current,
.reduced .mine-traverse-board.preview .mine-traverse-countdown,
.reduced .mine-success-overlay {
  animation: none;
}

.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 {
  /* 与 victory-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: 15px;
  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: 5px;
  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: 13px;
  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: 14px; 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) {
  .victory-hud { grid-template-columns: minmax(160px,1fr) minmax(140px,240px) minmax(160px,1fr); gap: 8px; }
  .victory-hud-right { gap: 8px; }
  .campaign-overview { gap: 14px; }
  .overview-copy { padding-left: 4px; }
  .victory-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); 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; }
  .mine-traverse-board { padding: 6px 8px 5px; grid-template-rows: minmax(0, 1fr); }
  .mine-traverse-grid { gap: 4px; width: min(860px, 100%); }
  .mine-route-cell { border-radius: 11px; }
  .mine-traverse-title { font-size: 14px; line-height: 17px; }
  .mine-traverse-message { font-size: 8px; line-height: 10px; }
  .mine-traverse-kicker { font-size: 7px; line-height: 9px; }
  .start-symbol, .end-symbol { font-size: 24px; }
  .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); }
}

@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: 13px; }
  .console-option-copy { font-size: 12px; }
  .compact-command { min-height: 30px; height: 30px; font-size: 10px; line-height: 30px; }
  .quiz-question { font-size: 13px; }
  .quiz-option { min-height: 30px; padding: 5px 8px; }
  .quiz-option-copy { font-size: 12px; }
  .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; }
  .mine-traverse-board { padding: 4px 6px 4px; grid-template-rows: minmax(0, 1fr); gap: 0; }
  .mine-traverse-topbar { padding: 0 4px; }
  .mine-traverse-grid { gap: 3px; }
  .mine-traverse-title { font-size: 12px; line-height: 14px; }
  .mine-traverse-message, .mine-traverse-footer { font-size: 8px; line-height: 10px; }
  .mine-traverse-stat-value { font-size: 18px; line-height: 20px; }
  .mine-traverse-countdown text:first-child { font-size: 17px; line-height: 19px; }
  .start-symbol, .end-symbol { font-size: 20px; }
  .current-symbol { width: 19px; height: 19px; }
}

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

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



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

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

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

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

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

.campaign-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: 40px;
  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-top: calc(14 * var(--rpx));
}
.failure-buddy {
  margin: 0 0 calc(12 * var(--rpx));
}
.campaign-buddy {
  margin: calc(12 * var(--rpx)) 0 calc(18 * var(--rpx));
}

/* 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;
}

/* === 小屏手机兜底（如小米 6 等 16:9 横屏机型）：列表页与 HUD 自适应窄视口 === */
@media (max-width: 700px), (max-height: 400px) {
  .victory-page {
    --safe-left: max(44px, calc(env(safe-area-inset-left, 0px) + 14px));
    --safe-right: max(40px, calc(env(safe-area-inset-right, 0px) + 12px));
  }

  .victory-hud {
    right: max(108px, calc(var(--safe-right) + 20px));
    grid-template-columns: minmax(0,1fr) minmax(100px,190px) minmax(0,1.1fr);
    gap: 8px;
  }

  .victory-layer {
    top: 54px;
  }

  .campaign-overview {
    grid-template-columns: minmax(0,5fr) minmax(0,6fr);
    gap: 12px;
  }

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

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

  .primary-command {
    margin-top: 10px;
  }

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

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

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

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

@media (max-width: 560px), (max-height: 320px) {
  .victory-hud {
    right: max(100px, calc(var(--safe-right) + 16px));
    grid-template-columns: 34px minmax(80px,1fr) minmax(0,auto);
  }

  .victory-brand {
    display: none;
  }

  .victory-hud-right {
    gap: 10px;
  }

  .hud-metric-label {
    font-size: 8px;
    line-height: 11px;
  }

  .hud-metric-value {
    font-size: 12px;
    line-height: 14px;
  }

  .overview-title {
    font-size: 17px;
  }

  .primary-command {
    min-height: 34px;
    margin-top: 8px;
    font-size: 12px;
  }

  /* 节点改为两行：状态放到标题下方，标题单行省略 */
  .campaign-node {
    grid-template-columns: 26px minmax(0,1fr);
    row-gap: 1px;
  }

  .campaign-node-index {
    width: 22px;
    height: 22px;
  }

  .campaign-node-copy {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }

  .campaign-node-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

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