.command-page {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #0d0f0d;
  color: #f5f1e7;
  font-size: 13px;
  --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));
  --content-top: calc(var(--safe-top) + 50px);
  letter-spacing: 0;
}

/* 覆盖微信 v2 按钮的固定宽度和自动居中，让按钮随所在列布局。 */
.command-page .primary-command {
  width: min(260px,100%);
  margin-left: 0;
  margin-right: 0;
}

.command-backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, #111411 0%, #202522 42%, #2b1d1a 100%);
}

.command-grid {
  position: absolute;
  inset: 0;
  opacity: .055;
  background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 44px 44px;
}

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

.command-hud {
  color: #f4f1e8;
  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;
}

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

.command-hud .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;
}

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

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

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

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

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

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

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

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

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

.command-layer {
  position: absolute;
  z-index: 5;
  top: var(--content-top);
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.command-overview {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,6fr);
  align-items: center;
  gap: 20px;
}

.overview-copy {
  min-width: 0;
}

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

.game-heading .section-kicker {
  font-size: 13px;
  line-height: 18px;
}

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

.overview-accent {
  color: #edcf8b;
}


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

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

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

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

.command-node::before {
  position: absolute;
  bottom: -9px;
  left: 22px;
  width: 1px;
  height: 17px;
  background: rgba(226,189,102,.34);
  content: '';
}

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

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

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

.command-node-title {
  display: block;
  font-size: 14px;
  font-weight: 900;
  line-height: 18px;
  white-space: nowrap;
}

.command-node-type {
  min-width: 3em;
  justify-self: end;
  color: #65c49e;
  font-size: 10px;
  font-weight: 800;
  line-height: 15px;
  text-align: right;
  white-space: nowrap;
}

.act-brief {
  display: grid !important;
  grid-template-columns: 110px minmax(0,1fr);
  align-items: center;
  gap: 22px;
}

.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: #d8a05a;
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
}

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

.act-brief-copy {
  display: flex;
  min-width: 0;
  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: #d8a05a;
}

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

.act-brief-quote {
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 3px solid #e2bd66;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.5);
  font-size: 11px;
  line-height: 1.35;
}

.brief-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px;
  color: rgba(255,255,255,.52);
  font-size: 11px;
  line-height: 15px;
}

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

.command-operation {
  position: absolute;
  z-index: 5;
  top: var(--content-top);
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  display: grid;
  min-height: 0;
  grid-template-rows: 40px minmax(0,1fr) auto;
  gap: 8px;
  overflow: hidden;
}

.game-heading {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(180px,1fr) 120px;
  align-items: center;
  gap: 12px;
}

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

.game-status {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
  color: #edcf8b;
}

.status-label {
  color: rgba(255,255,255,.42);
  font-size: 9px;
}

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

.game-status.failed .status-value {
  color: #ff786d;
}

.game-board {
  position: relative;
  display: grid;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(5,8,7,.82);
  padding: 12px 14px;
}

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

.compact-command {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,.24);
  background: #25302b;
  color: #f5f1e7;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  white-space: normal;
}

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

.game-retry-btn {
  background: #3a4540;
}

.compact-command-hover {
  background: #d25548;
}

.timeline-game {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0,1fr) minmax(0,1fr);
  gap: 8px;
  overflow: hidden;
}

.timeline-game .game-message {
  margin-top: 60px;
  padding: 16px 14px;
  line-height: 1.7;
  background: rgba(226,189,102,.08);
  border-left: 3px solid #e2bd66;
}

.timeline-lane {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: repeat(8,minmax(0,1fr));
  align-items: stretch;
  gap: 6px;
}

.timeline-rail {
  position: absolute;
  top: 50%;
  right: 16px;
  left: 2%;
  height: 3px;
  background: rgba(226,189,102,.45);
}

.timeline-rail::after {
  position: absolute;
  right: -16px;
  top: -9px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid rgba(226,189,102,.7);
  content: '';
}

.timeline-slot {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 6px 4px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(0,0,0,.36);
  color: rgba(255,255,255,.5);
}

.timeline-slot.filled {
  border-color: #65c49e;
  background: rgba(45,126,94,.26);
  color: #b9ead7;
}

.slot-year {
  font-size: 18px;
  font-weight: 900;
  line-height: 20px;
  white-space: nowrap;
}

.slot-event {
  width: 100%;
  min-width: 0;
  font-size: 10px;
  line-height: 13px;
  text-align: center;
  overflow-wrap: break-word;
}

.timeline-events {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: repeat(4,minmax(0,1fr));
  grid-auto-rows: minmax(0,1fr);
  gap: 6px;
}

.timeline-event {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.25);
  background: #25302b;
  color: #f5f1e7;
  font-size: 12px;
  line-height: 1.3;
  white-space: normal;
}

.timeline-event.selected {
  border-color: #e2bd66;
  background: rgba(226,189,102,.14);
  box-shadow: 0 0 14px rgba(226,189,102,.16);
}

.timeline-event.placed {
  opacity: .36;
  pointer-events: none;
}

.timeline-event-label {
  min-width: 0;
  max-width: 100%;
  text-align: center;
  overflow-wrap: break-word;
}

.timeline-event-year {
  display: none;
}

.ship-game {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto 1fr;
  gap: 4px;
  overflow: hidden;
  position: relative;
}

.ship-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
}

.ship-hud-left {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.ship-hud-title {
  color: #edcf8b;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .5px;
}

.ship-hud-step {
  color: rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: 700;
}

.ship-hud-chances {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ship-hud-chances-label {
  color: rgba(255,255,255,.4);
  font-size: 9px;
  font-weight: 700;
}

.ship-chance-list {
  display: flex;
  gap: 4px;
}

.ship-chance-dot {
  font-size: 11px;
  line-height: 14px;
  transition: color .3s;
}

.ship-chance-dot.active { color: #65c49e; text-shadow: 0 0 6px rgba(101,196,158,.5); }
.ship-chance-dot.spent { color: rgba(255,255,255,.12); }

/* ── Main split: left route + right panel ── */
.ship-main {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  overflow: hidden;
}

.ship-route {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(180deg, #07131f 0%, #0b2030 38%, #0d3144 72%, #08202e 100%);
  box-shadow: inset 0 0 calc(30 * var(--rpx)) rgba(0,0,0,.4);
}

.ship-route-sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 10%, rgba(226,189,102,.06) 0%, transparent 50%);
}

.ship-route-sea {
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 110%;
  height: 60%;
}

.ship-route-wave {
  position: absolute;
  bottom: 0;
  left: -8%;
  width: 116%;
  border-radius: 50%;
  opacity: .3;
  animation: shipRouteWave 5s ease-in-out infinite;
}

.ship-route-wave-1 { height: calc(32 * var(--rpx)); background: rgba(20,80,120,.3); bottom: 0; animation-duration: 4.2s; }
.ship-route-wave-2 { height: calc(26 * var(--rpx)); background: rgba(15,65,100,.25); bottom: calc(8 * var(--rpx)); animation-duration: 5.6s; animation-delay: -.8s; }
.ship-route-wave-3 { height: calc(20 * var(--rpx)); background: rgba(10,50,80,.2); bottom: calc(16 * var(--rpx)); animation-duration: 7s; animation-delay: -1.6s; }
.ship-route-wave-4 { height: calc(14 * var(--rpx)); background: rgba(5,35,60,.15); bottom: calc(24 * var(--rpx)); animation-duration: 8.5s; animation-delay: -2.4s; }

.ship-route-fog {
  position: absolute;
  top: 0;
  width: 200%;
  height: 100%;
  background: radial-gradient(ellipse at 30% 50%, rgba(180,195,210,.06) 0%, transparent 60%);
  animation: shipRouteFog 14s linear infinite;
  pointer-events: none;
}
.ship-route-fog-1 { animation-duration: 14s; animation-delay: 0s; }
.ship-route-fog-2 { animation-duration: 20s; animation-delay: -5s; opacity: .5; }
.ship-route-fog-3 { animation-duration: 17s; animation-delay: -10s; opacity: .3; }

.ship-route-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(226,189,102,.6) 0%, rgba(226,189,102,.2) 50%, transparent 100%);
  z-index: 1;
}

.ship-dest {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

.ship-dest-mark {
  font-size: 28px;
  color: #edcf8b;
  line-height: 1;
  text-shadow: 0 0 calc(20 * var(--rpx)) rgba(226,189,102,.5), 0 0 calc(40 * var(--rpx)) rgba(226,189,102,.2);
  animation: shipDestPulse 2s ease-in-out infinite;
}

.ship-dest-text {
  font-size: 8px;
  font-weight: 900;
  color: rgba(226,189,102,.7);
  margin-top: 2px;
  letter-spacing: 1px;
}

.ship-milestone {
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  z-index: 2;
}
.ship-milestone-1 { top: 14%; }
.ship-milestone-2 { top: 24%; }
.ship-milestone-3 { top: 34%; }
.ship-milestone-4 { top: 44%; }
.ship-milestone-5 { top: 54%; }
.ship-milestone-6 { top: 64%; }
.ship-milestone-7 { top: 74%; }

.ship-vessel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(120 * var(--rpx));
  height: calc(90 * var(--rpx));
  z-index: 4;
  transition: bottom .5s cubic-bezier(.4,0,.2,1), left .5s ease, filter .5s;
}

.ship-vessel.correct {
  filter: brightness(1.2);
}

.ship-vessel.wrong {
  left: 38%;
  filter: brightness(.7) saturate(.6);
}

.ship-vessel.passed {
  filter: brightness(1.3) drop-shadow(0 0 calc(20 * var(--rpx)) rgba(226,189,102,.4));
}

.ship-hull-wrap {
  position: absolute;
  bottom: 0;
  left: calc(10 * var(--rpx));
  right: calc(10 * var(--rpx));
  height: calc(40 * var(--rpx));
}

.ship-hull-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(28 * var(--rpx));
  background: linear-gradient(180deg, #4a5a4a, #2a3a2a);
  clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
  border-radius: 0 0 calc(6 * var(--rpx)) calc(6 * var(--rpx));
}

.ship-hull-deck {
  position: absolute;
  bottom: calc(24 * var(--rpx));
  left: calc(-2 * var(--rpx));
  right: calc(-2 * var(--rpx));
  height: calc(10 * var(--rpx));
  background: linear-gradient(180deg, #6a7a6a, #4a5a4a);
  border-radius: calc(2 * var(--rpx));
}

.ship-bow {
  position: absolute;
  bottom: calc(12 * var(--rpx));
  right: calc(-8 * var(--rpx));
  width: calc(20 * var(--rpx));
  height: calc(20 * var(--rpx));
  background: radial-gradient(ellipse at 100% 50%, rgba(200,200,180,.12) 0%, transparent 70%);
  border-radius: 50%;
}

.ship-stern {
  position: absolute;
  bottom: calc(12 * var(--rpx));
  left: calc(-8 * var(--rpx));
  width: calc(14 * var(--rpx));
  height: calc(14 * var(--rpx));
  background: radial-gradient(ellipse at 0% 50%, rgba(0,0,0,.2) 0%, transparent 70%);
  border-radius: 50%;
}

.ship-structure {
  position: absolute;
  bottom: calc(32 * var(--rpx));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ship-structure-base { width: calc(56 * var(--rpx)); height: calc(16 * var(--rpx)); background: linear-gradient(180deg, #5a6a6a, #3a4a4a); border-radius: calc(2 * var(--rpx)) calc(2 * var(--rpx)) 0 0; }
.ship-structure-mid { width: calc(40 * var(--rpx)); height: calc(14 * var(--rpx)); background: linear-gradient(180deg, #4a5a4a, #2a3a2a); border-radius: calc(2 * var(--rpx)) calc(2 * var(--rpx)) 0 0; }
.ship-structure-top { width: calc(24 * var(--rpx)); height: calc(10 * var(--rpx)); background: linear-gradient(180deg, #3a4a3a, #1a2a1a); border-radius: calc(2 * var(--rpx)) calc(2 * var(--rpx)) 0 0; }
.ship-radar { width: calc(2 * var(--rpx)); height: calc(20 * var(--rpx)); background: #8a7a5a; position: relative; }
.ship-radar::after { content: ""; position: absolute; top: calc(-3 * var(--rpx)); left: calc(-5 * var(--rpx)); width: calc(12 * var(--rpx)); height: calc(3 * var(--rpx)); background: #8a7a5a; border-radius: calc(2 * var(--rpx)); }
.ship-antenna { position: absolute; top: calc(-6 * var(--rpx)); left: 50%; width: calc(1 * var(--rpx)); height: calc(12 * var(--rpx)); background: rgba(200,200,180,.25); }

.ship-flag {
  position: absolute;
  top: 0;
  right: calc(-8 * var(--rpx));
  width: calc(18 * var(--rpx));
  height: calc(12 * var(--rpx));
  background: linear-gradient(135deg, #b9433b, #8a2a2a);
  border-radius: 0 calc(2 * var(--rpx)) calc(2 * var(--rpx)) 0;
  animation: shipFlag 2.5s ease-in-out infinite;
  transform-origin: left center;
}

.ship-flag::after {
  content: "★";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5px;
  color: #edcf8b;
  line-height: 1;
}

.ship-bow-foam {
  position: absolute;
  bottom: calc(2 * var(--rpx));
  right: calc(10 * var(--rpx));
  width: calc(28 * var(--rpx));
  height: calc(6 * var(--rpx));
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4));
  border-radius: calc(3 * var(--rpx));
  animation: shipBowFoam 1.8s ease-in-out infinite;
}

.ship-wake-1, .ship-wake-2 {
  position: absolute;
  bottom: calc(1 * var(--rpx));
  height: calc(4 * var(--rpx));
  background: linear-gradient(90deg, rgba(255,255,255,.3), transparent);
  border-radius: calc(2 * var(--rpx));
  animation: shipWake 2.2s ease-in-out infinite;
}
.ship-wake-1 { left: calc(-20 * var(--rpx)); width: calc(36 * var(--rpx)); }
.ship-wake-2 { left: calc(-36 * var(--rpx)); width: calc(24 * var(--rpx)); animation-delay: .4s; opacity: .5; }

.ship-correct-glow {
  position: absolute;
  top: calc(-8 * var(--rpx));
  left: 50%;
  width: calc(24 * var(--rpx));
  height: calc(24 * var(--rpx));
  margin-left: calc(-12 * var(--rpx));
  border-radius: 50%;
  background: rgba(226,189,102,.3);
  opacity: 0;
  transition: all .5s;
}
.ship-correct-glow.active {
  opacity: 1;
  background: rgba(226,189,102,.7);
  box-shadow: 0 0 calc(30 * var(--rpx)) rgba(226,189,102,.5), 0 0 calc(60 * var(--rpx)) rgba(226,189,102,.2);
  animation: shipGlow .8s ease-in-out infinite;
}

.ship-wrong-glow {
  position: absolute;
  top: calc(-8 * var(--rpx));
  left: 50%;
  width: calc(24 * var(--rpx));
  height: calc(24 * var(--rpx));
  margin-left: calc(-12 * var(--rpx));
  border-radius: 50%;
  background: rgba(216,90,77,.3);
  opacity: 0;
  transition: all .5s;
}
.ship-wrong-glow.active {
  opacity: 1;
  background: rgba(216,90,77,.7);
  box-shadow: 0 0 calc(30 * var(--rpx)) rgba(216,90,77,.5), 0 0 calc(60 * var(--rpx)) rgba(216,90,77,.2);
  animation: shipGlow .8s ease-in-out infinite;
}

.command-backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, #111411 0%, #202522 42%, #2b1d1a 100%);
}

.command-grid {
  position: absolute;
  inset: 0;
  opacity: .055;
  background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 44px 44px;
}

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

.command-hud {
  color: #f4f1e8;
  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;
}

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

.command-hud .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;
}

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

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

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

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

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

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

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

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

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

.command-layer {
  position: absolute;
  z-index: 5;
  top: var(--content-top);
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.command-overview {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,6fr);
  align-items: center;
  gap: 20px;
}

.overview-copy {
  min-width: 0;
}

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

.game-heading .section-kicker {
  font-size: 13px;
  line-height: 18px;
}

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

.overview-accent {
  color: #edcf8b;
}


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

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

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

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

.command-node::before {
  position: absolute;
  bottom: -9px;
  left: 22px;
  width: 1px;
  height: 17px;
  background: rgba(226,189,102,.34);
  content: '';
}

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

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

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

.command-node-title {
  display: block;
  font-size: 14px;
  font-weight: 900;
  line-height: 18px;
  white-space: nowrap;
}

.command-node-type {
  min-width: 3em;
  justify-self: end;
  color: #65c49e;
  font-size: 10px;
  font-weight: 800;
  line-height: 15px;
  text-align: right;
  white-space: nowrap;
}

.act-brief {
  display: grid !important;
  grid-template-columns: 110px minmax(0,1fr);
  align-items: center;
  gap: 22px;
}

.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: #d8a05a;
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
}

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

.act-brief-copy {
  display: flex;
  min-width: 0;
  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: #d8a05a;
}

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

.act-brief-quote {
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 3px solid #e2bd66;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.5);
  font-size: 11px;
  line-height: 1.35;
}

.brief-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px;
  color: rgba(255,255,255,.52);
  font-size: 11px;
  line-height: 15px;
}

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

.command-operation {
  position: absolute;
  z-index: 5;
  top: var(--content-top);
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  display: grid;
  min-height: 0;
  grid-template-rows: 40px minmax(0,1fr) auto;
  gap: 8px;
  overflow: hidden;
}

.game-heading {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(180px,1fr) 120px;
  align-items: center;
  gap: 12px;
}

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

.game-status {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
  color: #edcf8b;
}

.status-label {
  color: rgba(255,255,255,.42);
  font-size: 9px;
}

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

.game-status.failed .status-value {
  color: #ff786d;
}

.game-board {
  position: relative;
  display: grid;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(5,8,7,.82);
  padding: 12px 14px;
}

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

.compact-command {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,.24);
  background: #25302b;
  color: #f5f1e7;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  white-space: normal;
}

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

.game-retry-btn {
  background: #3a4540;
}

.compact-command-hover {
  background: #d25548;
}

.timeline-game {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0,1fr) minmax(0,1fr);
  gap: 8px;
  overflow: hidden;
}

.timeline-game .game-message {
  margin-top: 60px;
  padding: 16px 14px;
  line-height: 1.7;
  background: rgba(226,189,102,.08);
  border-left: 3px solid #e2bd66;
}


.timeline-lane {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: repeat(8,minmax(0,1fr));
  align-items: stretch;
  gap: 6px;
}

.timeline-rail {
  position: absolute;
  top: 50%;
  right: 16px;
  left: 2%;
  height: 3px;
  background: rgba(226,189,102,.45);
}

.timeline-rail::after {
  position: absolute;
  right: -16px;
  top: -9px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid rgba(226,189,102,.7);
  content: '';
}

.timeline-slot {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 6px 4px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(0,0,0,.36);
  color: rgba(255,255,255,.5);
}

.timeline-slot.filled {
  border-color: #65c49e;
  background: rgba(45,126,94,.26);
  color: #b9ead7;
}

.slot-year {
  font-size: 18px;
  font-weight: 900;
  line-height: 20px;
  white-space: nowrap;
}

.slot-event {
  width: 100%;
  min-width: 0;
  font-size: 10px;
  line-height: 13px;
  text-align: center;
  overflow-wrap: break-word;
}

.timeline-events {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: repeat(4,minmax(0,1fr));
  grid-auto-rows: minmax(0,1fr);
  gap: 6px;
}

.timeline-event {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.25);
  background: #25302b;
  color: #f5f1e7;
  font-size: 12px;
  line-height: 1.3;
  white-space: normal;
}

.timeline-event.selected {
  border-color: #e2bd66;
  background: rgba(226,189,102,.14);
  box-shadow: 0 0 14px rgba(226,189,102,.16);
}

.timeline-event.placed {
  opacity: .36;
  pointer-events: none;
}

.timeline-event-label {
  min-width: 0;
  max-width: 100%;
  text-align: center;
  overflow-wrap: break-word;
}

.timeline-event-year {
  display: none;
}

.ship-game {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto 1fr;
  gap: 4px;
  overflow: hidden;
  position: relative;
}

.ship-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
}

.ship-hud-left {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.ship-hud-title {
  color: #edcf8b;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .5px;
}

.ship-hud-step {
  color: rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: 700;
}

.ship-hud-chances {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ship-hud-chances-label {
  color: rgba(255,255,255,.4);
  font-size: 9px;
  font-weight: 700;
}

.ship-chance-list {
  display: flex;
  gap: 4px;
}

.ship-chance-dot {
  font-size: 11px;
  line-height: 14px;
  transition: color .3s;
}

.ship-chance-dot.active { color: #65c49e; text-shadow: 0 0 6px rgba(101,196,158,.5); }
.ship-chance-dot.spent { color: rgba(255,255,255,.12); }

/* ── Main split: left route + right panel ── */
.ship-main {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  overflow: hidden;
}

.ship-route {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(180deg, #07131f 0%, #0b2030 38%, #0d3144 72%, #08202e 100%);
  box-shadow: inset 0 0 calc(30 * var(--rpx)) rgba(0,0,0,.4);
}

.ship-route-sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 10%, rgba(226,189,102,.06) 0%, transparent 50%);
}

.ship-route-sea {
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 110%;
  height: 60%;
}

.ship-route-wave {
  position: absolute;
  bottom: 0;
  left: -8%;
  width: 116%;
  border-radius: 50%;
  opacity: .3;
  animation: shipRouteWave 5s ease-in-out infinite;
}

.ship-route-wave-1 { height: calc(32 * var(--rpx)); background: rgba(20,80,120,.3); bottom: 0; animation-duration: 4.2s; }
.ship-route-wave-2 { height: calc(26 * var(--rpx)); background: rgba(15,65,100,.25); bottom: calc(8 * var(--rpx)); animation-duration: 5.6s; animation-delay: -.8s; }
.ship-route-wave-3 { height: calc(20 * var(--rpx)); background: rgba(10,50,80,.2); bottom: calc(16 * var(--rpx)); animation-duration: 7s; animation-delay: -1.6s; }
.ship-route-wave-4 { height: calc(14 * var(--rpx)); background: rgba(5,35,60,.15); bottom: calc(24 * var(--rpx)); animation-duration: 8.5s; animation-delay: -2.4s; }

.ship-route-fog {
  position: absolute;
  top: 0;
  width: 200%;
  height: 100%;
  background: radial-gradient(ellipse at 30% 50%, rgba(180,195,210,.06) 0%, transparent 60%);
  animation: shipRouteFog 14s linear infinite;
  pointer-events: none;
}
.ship-route-fog-1 { animation-duration: 14s; animation-delay: 0s; }
.ship-route-fog-2 { animation-duration: 20s; animation-delay: -5s; opacity: .5; }
.ship-route-fog-3 { animation-duration: 17s; animation-delay: -10s; opacity: .3; }

.ship-route-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(226,189,102,.6) 0%, rgba(226,189,102,.2) 50%, transparent 100%);
  z-index: 1;
}

.ship-dest {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

.ship-dest-mark {
  font-size: 28px;
  color: #edcf8b;
  line-height: 1;
  text-shadow: 0 0 calc(20 * var(--rpx)) rgba(226,189,102,.5), 0 0 calc(40 * var(--rpx)) rgba(226,189,102,.2);
  animation: shipDestPulse 2s ease-in-out infinite;
}

.ship-dest-text {
  font-size: 8px;
  font-weight: 900;
  color: rgba(226,189,102,.7);
  margin-top: 2px;
  letter-spacing: 1px;
}

.ship-milestone {
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  z-index: 2;
}
.ship-milestone-1 { top: 14%; }
.ship-milestone-2 { top: 24%; }
.ship-milestone-3 { top: 34%; }
.ship-milestone-4 { top: 44%; }
.ship-milestone-5 { top: 54%; }
.ship-milestone-6 { top: 64%; }
.ship-milestone-7 { top: 74%; }

.ship-vessel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(120 * var(--rpx));
  height: calc(90 * var(--rpx));
  z-index: 4;
  transition: bottom .5s cubic-bezier(.4,0,.2,1), left .5s ease, filter .5s;
}

.ship-vessel.correct {
  filter: brightness(1.2);
}

.ship-vessel.wrong {
  left: 38%;
  filter: brightness(.7) saturate(.6);
}

.ship-vessel.passed {
  filter: brightness(1.3) drop-shadow(0 0 calc(20 * var(--rpx)) rgba(226,189,102,.4));
}

.ship-hull-wrap {
  position: absolute;
  bottom: 0;
  left: calc(10 * var(--rpx));
  right: calc(10 * var(--rpx));
  height: calc(40 * var(--rpx));
}

.ship-hull-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(28 * var(--rpx));
  background: linear-gradient(180deg, #4a5a4a, #2a3a2a);
  clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
  border-radius: 0 0 calc(6 * var(--rpx)) calc(6 * var(--rpx));
}

.ship-hull-deck {
  position: absolute;
  bottom: calc(24 * var(--rpx));
  left: calc(-2 * var(--rpx));
  right: calc(-2 * var(--rpx));
  height: calc(10 * var(--rpx));
  background: linear-gradient(180deg, #6a7a6a, #4a5a4a);
  border-radius: calc(2 * var(--rpx));
}

.ship-bow {
  position: absolute;
  bottom: calc(12 * var(--rpx));
  right: calc(-8 * var(--rpx));
  width: calc(20 * var(--rpx));
  height: calc(20 * var(--rpx));
  background: radial-gradient(ellipse at 100% 50%, rgba(200,200,180,.12) 0%, transparent 70%);
  border-radius: 50%;
}

.ship-stern {
  position: absolute;
  bottom: calc(12 * var(--rpx));
  left: calc(-8 * var(--rpx));
  width: calc(14 * var(--rpx));
  height: calc(14 * var(--rpx));
  background: radial-gradient(ellipse at 0% 50%, rgba(0,0,0,.2) 0%, transparent 70%);
  border-radius: 50%;
}

.ship-structure {
  position: absolute;
  bottom: calc(32 * var(--rpx));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ship-structure-base { width: calc(56 * var(--rpx)); height: calc(16 * var(--rpx)); background: linear-gradient(180deg, #5a6a5a, #3a4a3a); border-radius: calc(2 * var(--rpx)) calc(2 * var(--rpx)) 0 0; }
.ship-structure-mid { width: calc(40 * var(--rpx)); height: calc(14 * var(--rpx)); background: linear-gradient(180deg, #4a5a4a, #2a3a2a); border-radius: calc(2 * var(--rpx)) calc(2 * var(--rpx)) 0 0; }
.ship-structure-top { width: calc(24 * var(--rpx)); height: calc(10 * var(--rpx)); background: linear-gradient(180deg, #3a4a3a, #1a2a1a); border-radius: calc(2 * var(--rpx)) calc(2 * var(--rpx)) 0 0; }
.ship-radar { width: calc(2 * var(--rpx)); height: calc(20 * var(--rpx)); background: #8a7a5a; position: relative; }
.ship-radar::after { content: ""; position: absolute; top: calc(-3 * var(--rpx)); left: calc(-5 * var(--rpx)); width: calc(12 * var(--rpx)); height: calc(3 * var(--rpx)); background: #8a7a5a; border-radius: calc(2 * var(--rpx)); }
.ship-antenna { position: absolute; top: calc(-6 * var(--rpx)); left: 50%; width: calc(1 * var(--rpx)); height: calc(12 * var(--rpx)); background: rgba(200,200,180,.25); }

.ship-flag {
  position: absolute;
  top: 0;
  right: calc(-8 * var(--rpx));
  width: calc(18 * var(--rpx));
  height: calc(12 * var(--rpx));
  background: linear-gradient(135deg, #b9433b, #8a2a2a);
  border-radius: 0 calc(2 * var(--rpx)) calc(2 * var(--rpx)) 0;
  animation: shipFlag 2.5s ease-in-out infinite;
  transform-origin: left center;
}

.ship-flag::after {
  content: "★";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5px;
  color: #edcf8b;
  line-height: 1;
}

.ship-bow-foam {
  position: absolute;
  bottom: calc(2 * var(--rpx));
  right: calc(10 * var(--rpx));
  width: calc(28 * var(--rpx));
  height: calc(6 * var(--rpx));
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4));
  border-radius: calc(3 * var(--rpx));
  animation: shipBowFoam 1.8s ease-in-out infinite;
}

.ship-wake-1, .ship-wake-2 {
  position: absolute;
  bottom: calc(1 * var(--rpx));
  height: calc(4 * var(--rpx));
  background: linear-gradient(90deg, rgba(255,255,255,.3), transparent);
  border-radius: calc(2 * var(--rpx));
  animation: shipWake 2.2s ease-in-out infinite;
}
.ship-wake-1 { left: calc(-20 * var(--rpx)); width: calc(36 * var(--rpx)); }
.ship-wake-2 { left: calc(-36 * var(--rpx)); width: calc(24 * var(--rpx)); animation-delay: .4s; opacity: .5; }

.ship-correct-glow {
  position: absolute;
  top: calc(-8 * var(--rpx));
  left: 50%;
  width: calc(24 * var(--rpx));
  height: calc(24 * var(--rpx));
  margin-left: calc(-12 * var(--rpx));
  border-radius: 50%;
  background: rgba(226,189,102,.3);
  opacity: 0;
  transition: all .5s;
}
.ship-correct-glow.active {
  opacity: 1;
  background: rgba(226,189,102,.7);
  box-shadow: 0 0 calc(30 * var(--rpx)) rgba(226,189,102,.5), 0 0 calc(60 * var(--rpx)) rgba(226,189,102,.2);
  animation: shipGlow .8s ease-in-out infinite;
}

.ship-wrong-glow {
  position: absolute;
  top: calc(-8 * var(--rpx));
  left: 50%;
  width: calc(24 * var(--rpx));
  height: calc(24 * var(--rpx));
  margin-left: calc(-12 * var(--rpx));
  border-radius: 50%;
  background: rgba(216,90,77,.3);
  opacity: 0;
  transition: all .5s;
}
.ship-wrong-glow.active {
  opacity: 1;
  background: rgba(216,90,77,.7);
  box-shadow: 0 0 calc(30 * var(--rpx)) rgba(216,90,77,.5), 0 0 calc(60 * var(--rpx)) rgba(216,90,77,.2);
  animation: shipGlow .5s ease-in-out infinite;
}

.ship-track-progress {
  position: absolute;
  left: calc(12 * var(--rpx));
  top: 6%;
  bottom: 6%;
  width: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  z-index: 2;
  overflow: hidden;
}

.ship-track-progress-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, #2d8068, #65c49e, #e2bd66);
  border-radius: 2px;
  transition: height .5s ease;
}

.ship-distance {
  position: absolute;
  bottom: calc(4 * var(--rpx));
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.25);
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
  z-index: 2;
}

/* ── Right panel ── */
.ship-right {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
  overflow: hidden;
}

.ship-scene-card {
  padding: calc(8 * var(--rpx)) calc(12 * var(--rpx)) calc(10 * var(--rpx));
  background: rgba(10,15,12,.7);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ship-scene-badge {
  display: inline-block;
  padding: calc(2 * var(--rpx)) calc(10 * var(--rpx));
  background: rgba(226,189,102,.12);
  border: 1px solid rgba(226,189,102,.25);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 900;
  color: #edcf8b;
  letter-spacing: .5px;
}

.ship-scene-count {
  flex-shrink: 0;
  margin: 0;
  color: rgba(255,255,255,.45);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.ship-scene-title {
  margin: calc(4 * var(--rpx)) 0 calc(4 * var(--rpx));
  color: #f5f1e7;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
}

.ship-scene-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255,255,255,.72);
}

.ship-actions {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  transition: opacity .25s;
}

.ship-actions.locked {
  opacity: .35;
  pointer-events: none;
}

.ship-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: calc(6 * var(--rpx)) calc(10 * var(--rpx));
  border-radius: 6px;
  transition: transform .15s, box-shadow .15s, border-color .2s;
}

.ship-btn:active {
  transform: scale(.98);
}

.ship-btn-correct {
  background: linear-gradient(135deg, rgba(30,70,140,.5), rgba(20,50,110,.3));
  border: 1px solid rgba(60,120,200,.35);
}

.ship-btn-correct:active {
  border-color: rgba(60,120,200,.7);
  box-shadow: 0 0 calc(16 * var(--rpx)) rgba(60,120,200,.25);
}

.ship-btn-wrong {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.15);
}

.ship-btn-wrong:active {
  border-color: rgba(216,90,77,.5);
  box-shadow: 0 0 calc(16 * var(--rpx)) rgba(216,90,77,.15);
}

.ship-btn-arrow {
  flex-shrink: 0;
  width: calc(24 * var(--rpx));
  height: calc(24 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  border-radius: 4px;
  margin-top: calc(1 * var(--rpx));
}

.ship-btn-correct .ship-btn-arrow {
  background: rgba(60,120,200,.25);
  color: #7ab8ff;
}

.ship-btn-wrong .ship-btn-arrow {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.4);
}

.ship-btn-content {
  min-width: 0;
  flex: 1;
}

.ship-btn-label {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: #f5f1e7;
  margin-bottom: 1px;
}

.ship-btn-desc {
  display: block;
  flex: 1;
  min-width: 0;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(255,255,255,.5);
}

.ship-feedback {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: calc(6 * var(--rpx)) calc(10 * var(--rpx));
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
  animation: shipFeedbackIn .35s ease;
}

.ship-feedback.correct {
  background: rgba(45,126,94,.2);
  border: 1px solid rgba(101,196,158,.35);
  color: #b9ead7;
}

.ship-feedback.wrong {
  background: rgba(157,55,47,.2);
  border: 1px solid rgba(216,90,77,.35);
  color: #f0968f;
}

.ship-feedback-icon {
  flex-shrink: 0;
  width: calc(16 * var(--rpx));
  height: calc(16 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  border-radius: 50%;
}

.ship-feedback.correct .ship-feedback-icon { background: rgba(101,196,158,.25); color: #65c49e; }
.ship-feedback.wrong .ship-feedback-icon { background: rgba(216,90,77,.25); color: #d85a4d; }

.ship-overlay {
  position: absolute;
  z-index: 100;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.55);
  animation: shipFadeIn .3s ease;
}

.ship-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: calc(460 * var(--rpx));
  padding: calc(36 * var(--rpx)) calc(28 * var(--rpx));
  background: linear-gradient(145deg, #1a1f1a, #0d0f0d);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  animation: shipModalIn .35s cubic-bezier(.34,1.56,.64,1);
}

.ship-modal.passed { border-color: rgba(226,189,102,.4); box-shadow: 0 0 calc(50 * var(--rpx)) rgba(226,189,102,.1); }
.ship-modal.failed { border-color: rgba(216,90,77,.35); box-shadow: 0 0 calc(40 * var(--rpx)) rgba(216,90,77,.08); }
.ship-modal-badge { font-size: 48px; line-height: 1; color: #edcf8b; }
.ship-modal.failed .ship-modal-badge { color: #d85a4d; }
.ship-modal-title { font-size: 18px; font-weight: 900; text-align: center; color: #f5f1e7; letter-spacing: .5px; }
.ship-modal-desc { font-size: 12px; line-height: 1.45; text-align: center; color: rgba(255,255,255,.55); }
.ship-modal-btn { margin-top: 6px; padding: calc(14 * var(--rpx)) calc(48 * var(--rpx)); border: 1px solid rgba(226,189,102,.45); background: linear-gradient(135deg, #8a6a3a, #6a4a2a); color: #fff; font-size: 13px; font-weight: 900; border-radius: 6px; text-align: center; min-width: calc(220 * var(--rpx)); }
.ship-modal-btn:active { transform: scale(.96); }
.ship-modal-btn-retry { background: linear-gradient(135deg, #6a3a3a, #4a2a2a); border-color: rgba(216,90,77,.45); }

.ship-noise {
  position: absolute; z-index: 50; inset: 0; pointer-events: none; opacity: .06;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, #fff 2px, #fff 4px);
  animation: shipNoiseShake .2s steps(4) infinite;
}

@keyframes shipRouteWave {
  0%, 100% { transform: translateX(0) scaleY(1); }
  50% { transform: translateX(calc(15 * var(--rpx))) scaleY(1.1); }
}

@keyframes shipRouteFog {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes shipDestPulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.1); opacity: 1; }
}

@keyframes shipFlag {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(18deg); }
}

@keyframes shipBowFoam {
  0%, 100% { opacity: .4; width: calc(28 * var(--rpx)); }
  50% { opacity: .9; width: calc(40 * var(--rpx)); }
}

@keyframes shipWake {
  0%, 100% { opacity: .3; width: calc(36 * var(--rpx)); }
  50% { opacity: .7; width: calc(50 * var(--rpx)); }
}

@keyframes shipGlow {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.2); opacity: 1; }
}

@keyframes shipFeedbackIn {
  from { opacity: 0; transform: translateY(calc(8 * var(--rpx))); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shipFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shipModalIn { from { opacity: 0; transform: scale(.85) translateY(calc(20 * var(--rpx))); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes shipNoiseShake {
  0% { transform: translate(0,0); }
  25% { transform: translate(-1px,1px); }
  50% { transform: translate(1px,-1px); }
  75% { transform: translate(-1px,-1px); }
}

.game-message {
  color: #edcf8b;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: break-word;
}
.relay-game {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0,1fr) auto auto;
  gap: 10px;
  overflow: hidden;
}

.relay-stage-head {
  min-width: 0;
}

.relay-stage-title {
  display: block;
  font-size: 15px;
  font-weight: 900;
  line-height: 20px;
}

.relay-stage-instruction {
  display: block;
  margin-top: 2px;
  color: rgba(255,255,255,.58);
  font-size: 11px;
  line-height: 16px;
}

.relay-select-list {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
  overflow-y: auto;
  align-content: start;
}

.relay-item {
  display: grid;
  min-height: 48px;
  grid-template-columns: 22px minmax(0,1fr) 42px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  line-height: 1.3;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, opacity .2s ease;
}

.relay-item.flash-in {
  border-color: #e2bd66;
  background: rgba(226,189,102,.2);
  box-shadow: 0 0 18px rgba(226,189,102,.2);
  transform: scale(1.02);
  animation: relayFlashPulse .5s ease-in-out infinite alternate;
}

.relay-item.correct {
  border-color: #65c49e;
  background: rgba(45,126,94,.34);
  transform: scale(1);
}

.relay-item.wrong {
  border-color: #d85a4d;
  background: rgba(216,90,77,.3);
  transform: scale(.97);
}

.relay-item.miss {
  border-color: #d85a4d;
  background: rgba(216,90,77,.16);
  opacity: .72;
}

.relay-item.dimmed {
  opacity: .34;
  pointer-events: none;
}

.relay-item.selected {
  border-color: #65c49e;
  background: rgba(45,126,94,.2);
}

.relay-item-check {
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  color: #9ce0c7;
  font-size: 12px;
}

.relay-item-text {
  min-width: 0;
  overflow-wrap: break-word;
}

.relay-item-type {
  justify-self: end;
  color: rgba(255,255,255,.38);
  font-size: 10px;
}

.relay-item.selected .relay-item-type {
  color: #9ce0c7;
}

.relay-options {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  align-content: center;
}

.relay-option {
  display: grid;
  min-height: 54px;
  grid-template-columns: 26px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.04);
  transition: border-color .15s ease, background .15s ease, opacity .2s ease, transform .15s ease;
}

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

.relay-option.correct {
  border-color: #65c49e;
  background: rgba(45,126,94,.3);
  box-shadow: 0 0 16px rgba(101,196,158,.16);
}

.relay-option.wrong {
  border-color: #d85a4d;
  background: rgba(216,90,77,.3);
}

.relay-option.dimmed {
  opacity: .36;
}

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

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

.relay-obstacles {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.relay-obstacle {
  display: grid;
  min-height: 48px;
  grid-template-columns: minmax(0,1fr) minmax(100px,30%) 110px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-left: 4px solid #d85a4d;
  background: rgba(216,90,77,.1);
  transition: border-color .2s ease, background .2s ease, transform .12s ease;
}

.relay-obstacle:active {
  transform: scale(.985);
}

.relay-obstacle.resolved {
  border-color: #65c49e;
  background: rgba(45,126,94,.18);
}

.relay-obstacle-text {
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.relay-obstacle-progress {
  overflow: hidden;
  height: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.32);
}

.relay-obstacle-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #d85a4d, #e2bd66, #65c49e);
  transition: width .12s ease;
}

.relay-obstacle-action {
  flex-shrink: 0;
  color: #9ce0c7;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.relay-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
  color: rgba(255,255,255,.5);
  font-size: 10px;
}

.relay-confirm-wrap {
  display: flex;
  justify-content: center;
}

.relay-confirm {
  width: 220px;
  min-height: 38px;
  margin: 0;
  padding: 5px 12px;
  border: 1px solid rgba(226,189,102,.55);
  background: #8a6a3a;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.relay-confirm[disabled] {
  opacity: .45;
}

@keyframes relayFlashPulse {
  0% { box-shadow: 0 0 12px rgba(226,189,102,.16); }
  100% { box-shadow: 0 0 24px rgba(226,189,102,.34); }
}

.gucai-game {
  display: grid;
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 6px;
  overflow: hidden;
}

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

.gucai-stations {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.gucai-station {
  display: flex;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.42);
}

.gucai-station.active {
  border-color: #e2bd66;
  color: #f0cf88;
  box-shadow: 0 0 0 1px rgba(226,189,102,.18);
}

.gucai-station.completed {
  border-color: #65c49e;
  color: #9ce0c7;
}

.gucai-station-index {
  font-size: 10px;
  font-weight: 900;
}

.gucai-station-title {
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
}

.gucai-frags {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.gucai-frag {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: rgba(255,255,255,.28);
  font-size: 11px;
  font-weight: 900;
}

.gucai-frag.on {
  border-color: #e2bd66;
  color: #edcf8b;
  background: rgba(185,67,59,.35);
  box-shadow: 0 0 8px rgba(226,189,102,.28);
}

.gucai-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.gucai-hunt {
  grid-template-columns: minmax(0, 1.35fr) minmax(160px, .75fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.gucai-hall {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(226,189,102,.28);
  background: #1a120e;
}

/* 由 onGucaiHallImageLoad 按 contain 计算后写入 left/top/width/height */
.gucai-hall-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  line-height: 0;
}

.gucai-hall-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.gucai-hall-dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,.28);
  pointer-events: none;
  transition: background .35s ease;
}

.gucai-hunt.lit .gucai-hall-dim {
  background: rgba(0,0,0,.04);
}

.gucai-hunt.lit .gucai-hall {
  box-shadow: inset 0 0 30px rgba(226,189,102,.2);
}

.gucai-hotspot-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.gucai-hotspot {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
}

.gucai-hotspot:not(.found):not(.missed) {
  background: transparent;
}

.gucai-hotspot-ring {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(226,189,102,.35);
  border-radius: 50%;
  background: rgba(226,189,102,.08);
  box-shadow: 0 0 0 0 rgba(226,189,102,.15);
  opacity: .55;
}

.gucai-hotspot.hint .gucai-hotspot-ring {
  opacity: .95;
  border-color: rgba(226,189,102,.8);
  background: rgba(226,189,102,.14);
  animation: gucai-float 1.6s ease-in-out infinite, gucai-glow 1.6s ease-in-out infinite;
}

.gucai-hotspot.found .gucai-hotspot-ring {
  opacity: 1;
  border-color: #65c49e;
  background: rgba(101,196,158,.28);
  box-shadow: 0 0 10px rgba(101,196,158,.4);
  animation: none;
}

.gucai-hotspot.missed .gucai-hotspot-ring {
  opacity: .45;
  border-color: rgba(233,97,82,.55);
  background: rgba(233,97,82,.12);
  animation: none;
}

.gucai-hotspot-label {
  max-width: 64px;
  padding: 1px 5px;
  border: 1px solid rgba(226,189,102,.35);
  background: rgba(0,0,0,.62);
  color: #edcf8b;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.gucai-hotspot.missed .gucai-hotspot-label {
  border-color: rgba(233,97,82,.45);
  color: #f0a29a;
}

.gucai-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.gucai-legend-title {
  color: #edcf8b;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 2px;
}

.gucai-legend-item {
  color: rgba(255,255,255,.68);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.gucai-side {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(226,189,102,.22);
  background: rgba(255,255,255,.04);
}

.gucai-side-title {
  color: #edcf8b;
  font-size: 13px;
  font-weight: 900;
}

.gucai-side-desc {
  color: rgba(255,255,255,.7);
  font-size: 11px;
  line-height: 1.4;
}

.gucai-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}

.gucai-chip {
  padding: 2px 6px;
  border: 1px solid rgba(226,189,102,.35);
  color: #edcf8b;
  font-size: 10px;
  font-weight: 800;
  background: rgba(185,67,59,.18);
}

.gucai-swipe {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
}

.gucai-swipe-guide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 700;
}

.gucai-swipe-left { color: #f0a29a; }
.gucai-swipe-right { color: #9ce0c7; }

.gucai-card-stack {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gucai-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(360px, 72%);
  min-height: 158px;
  padding: 0;
  border: 1px solid rgba(226,189,102,.35);
  background: #161210;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  overflow: hidden;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}

.gucai-card.back {
  z-index: 1;
  width: min(340px, 68%);
  min-height: 148px;
  transform: translate(-50%, -44%) scale(0.97);
  pointer-events: none;
  border-color: rgba(226,189,102,.2);
  background: #1c1714;
  box-shadow: 0 6px 14px rgba(0,0,0,.28);
}

.gucai-card.top {
  z-index: 5;
  background: #161210;
}

.gucai-card-swipe {
  width: 100%;
  min-height: 158px;
  padding: 14px 16px;
  box-sizing: border-box;
  background:
    linear-gradient(160deg, rgba(185,67,59,.30), rgba(12,10,9,1) 55%, #161210 100%);
}

.gucai-card.back .gucai-card-body {
  min-height: 148px;
  padding: 14px 16px;
  background:
    linear-gradient(160deg, rgba(185,67,59,.12), rgba(18,14,12,1) 60%, #1c1714 100%);
}

.gucai-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 130px;
  flex-direction: column;
}

.gucai-card-body-muted {
  justify-content: center;
  opacity: 0.4;
}

.gucai-card.wrong {
  border-color: rgba(233,97,82,.7);
}

.gucai-card.wrong .gucai-card-swipe {
  animation: gucai-shake .35s ease;
}

.gucai-card-cat {
  display: block;
  color: #edcf8b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}

.gucai-card-text {
  display: block;
  margin-top: 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4;
}

.gucai-card-tags {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  gap: 8px;
}

.gucai-card-tag {
  font-size: 10px;
  font-weight: 800;
  opacity: .7;
}

.gucai-card-tag.keep { color: #9ce0c7; }
.gucai-card-tag.drop { color: #f0a29a; }

.gucai-card-empty {
  color: #edcf8b;
  font-size: 14px;
  font-weight: 800;
}

.gucai-puzzle {
  grid-template-columns: minmax(0, 1.15fr) minmax(180px, .85fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
}

.gucai-puzzle-board {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: #1a1512;
}

.gucai-puzzle-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(1) brightness(0.42) contrast(0.9);
  transform: scale(1.02);
  transition: filter .4s ease, transform .4s ease;
}

.gucai-puzzle-board.stage-1 .gucai-puzzle-image {
  filter: grayscale(0.7) brightness(0.58) contrast(0.95);
}

.gucai-puzzle-board.stage-2 .gucai-puzzle-image {
  filter: grayscale(0.35) brightness(0.78) contrast(1);
}

.gucai-puzzle-board.stage-3 .gucai-puzzle-image,
.gucai-puzzle-board.done .gucai-puzzle-image {
  filter: none;
  transform: scale(1);
}

.gucai-puzzle-fog {
  position: absolute;
  inset: 0;
  background: rgba(8,6,5,.28);
  pointer-events: none;
  transition: opacity .4s ease;
}

.gucai-puzzle-board.stage-1 .gucai-puzzle-fog { opacity: 0.7; }
.gucai-puzzle-board.stage-2 .gucai-puzzle-fog { opacity: 0.35; }
.gucai-puzzle-board.stage-3 .gucai-puzzle-fog,
.gucai-puzzle-board.done .gucai-puzzle-fog { opacity: 0; }

.gucai-puzzle-piece {
  position: absolute;
  opacity: 0.55;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.35);
  transition: opacity .35s ease, background .35s ease, border-color .35s ease;
}

.gucai-puzzle-piece.on {
  opacity: 0;
  border-color: transparent;
  background: transparent;
}

.gucai-puzzle-piece.p0 {
  left: 0;
  top: 0;
  width: 50%;
  height: 55%;
}

.gucai-puzzle-piece.p1 {
  left: 50%;
  top: 0;
  width: 50%;
  height: 55%;
}

.gucai-puzzle-piece.p2 {
  left: 0;
  top: 55%;
  width: 100%;
  height: 45%;
}

.gucai-puzzle-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 6px 8px;
  text-align: center;
  color: rgba(255,255,255,.82);
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  pointer-events: none;
}

.gucai-feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-content: center;
  min-height: 0;
}

.gucai-feature {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-height: 40px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}

.gucai-feature.selected {
  border-color: #65c49e;
  background: rgba(45,126,94,.22);
}

.gucai-feature-mark {
  color: #edcf8b;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.gucai-feature-text {
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.gucai-relay-stage {
  min-height: 0;
}

.gucai-track-wrap {
  position: relative;
  display: grid;
  min-height: 0;
  height: 100%;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(226,189,102,.28);
  background:
    linear-gradient(180deg, rgba(185,67,59,.12), rgba(8,10,9,.85));
  overflow: hidden;
}

.gucai-track-wrap.holding {
  box-shadow: inset 0 0 0 1px rgba(226,189,102,.28);
}

.gucai-track-line {
  position: relative;
  height: 8px;
  margin: 8px 8px 0;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  overflow: visible;
}

.gucai-track-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b9433b, #e2bd66);
  transition: width .05s linear;
}

.gucai-track-dot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe29a, #b9433b 70%);
  box-shadow: 0 0 12px rgba(226,189,102,.7);
}

.gucai-track-nodes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}

.gucai-track-node {
  min-width: 0;
  padding: 4px 2px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.2);
  color: rgba(255,255,255,.4);
  text-align: center;
}

.gucai-track-node.lit,
.gucai-track-node.reached {
  border-color: rgba(226,189,102,.45);
  color: #edcf8b;
  background: rgba(226,189,102,.1);
}

.gucai-track-year {
  display: block;
  font-size: 10px;
  font-weight: 900;
}

.gucai-track-label {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.2;
}

.gucai-silhouette {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed rgba(226,189,102,.25);
  background:
    radial-gradient(circle at 50% 40%, rgba(226,189,102,.12), transparent 55%),
    rgba(0,0,0,.18);
}

.gucai-sil-title {
  color: #edcf8b;
  font-size: 18px;
  font-weight: 900;
}

.gucai-sil-note {
  color: rgba(255,255,255,.7);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  padding: 0 12px;
}

.gucai-hold-tip {
  justify-self: center;
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 800;
}

.gucai-finale-poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
    radial-gradient(circle at 50% 40%, rgba(185,67,59,.45), rgba(8,10,9,.92));
  z-index: 5;
  animation: gucai-poster-in .45s ease;
}

.gucai-finale-title {
  color: #edcf8b;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 2px;
}

.gucai-finale-sub {
  color: rgba(255,255,255,.8);
  font-size: 13px;
}

.gucai-popup {
  min-height: 28px;
  padding: 5px 8px;
  border-left: 3px solid #65c49e;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.82);
  font-size: 11px;
  line-height: 1.35;
}

.gucai-popup.bad {
  border-left-color: #d85a4d;
  color: #f0a29a;
}

.gucai-popup.good {
  border-left-color: #65c49e;
  color: #9ce0c7;
}

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

.gucai-msg {
  min-width: 0;
  flex: 1;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  line-height: 1.35;
}

.gucai-confirm {
  width: 210px;
  min-height: 34px;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid rgba(226,189,102,.5);
  background: #b9433b;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  flex-shrink: 0;
}

.gucai-confirm[disabled] {
  opacity: .42;
}

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

@keyframes gucai-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226,189,102,.15); }
  50% { box-shadow: 0 0 0 6px rgba(226,189,102,.12), 0 0 12px rgba(226,189,102,.35); }
}

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

@keyframes gucai-poster-in {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

.reduced .gucai-hotspot.hint .gucai-hotspot-ring,
.reduced .gucai-obj.hint .gucai-obj-icon,
.reduced .gucai-finale-poster,
.reduced .gucai-card.wrong {
  animation: none;
}

@media (max-width: 760px) {
  .gucai-hunt {
    grid-template-columns: minmax(0, 1.35fr) minmax(150px, .75fr);
  }
  .gucai-puzzle {
    grid-template-columns: minmax(0, 1.15fr) minmax(170px, .85fr);
  }
  .gucai-track-nodes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.daily-game {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0,1fr) auto auto;
  gap: 6px;
  overflow: hidden;
}

.daily-layout {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(200px,.85fr) minmax(280px,1.15fr);
  gap: 10px;
  overflow: hidden;
}

.daily-scene {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(226,189,102,.25);
  background: rgba(0,0,0,.35);
}

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

.daily-scene-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(226,189,102,.07);
}

.daily-scene-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.18) 70%, transparent);
  pointer-events: none;
}

.daily-scene-title {
  display: block;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  color: #edcf8b;
  overflow-wrap: break-word;
  text-shadow: 0 1px 4px rgba(0,0,0,.75);
}

.daily-scene-brief {
  flex: 0 0 auto;
  padding: 0 0 2px;
}

.daily-scene-text {
  display: block;
  color: rgba(255,255,255,.78);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.daily-progress {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  overflow: hidden;
  height: 22px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.55);
}

.daily-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #b9433b, #e2bd66);
  transition: width .25s ease;
}

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

.daily-options {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

.daily-option {
  display: grid;
  flex: 1 1 0;
  min-height: 0;
  grid-template-columns: 22px minmax(0,1fr);
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.045);
  font-size: 11px;
  line-height: 1.3;
}

.daily-option.correct {
  border-color: #65c49e;
  background: rgba(45,126,94,.24);
}

.daily-option.wrong {
  border-color: #d85a4d;
  background: rgba(157,55,47,.24);
}

.daily-option.locked {
  pointer-events: none;
}

.daily-option-code {
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226,189,102,.55);
  border-radius: 50%;
  color: #edcf8b;
  font-size: 9px;
  font-weight: 900;
  flex-shrink: 0;
}

.daily-option-text {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.daily-feedback {
  display: grid;
  grid-template-columns: 84px minmax(0,1fr);
  gap: 6px;
  padding: 4px 6px;
  border-left: 3px solid #65c49e;
  background: rgba(255,255,255,.05);
  font-size: 10px;
  line-height: 1.3;
}

.daily-feedback.bad {
  border-left-color: #d85a4d;
}

.daily-feedback-title {
  color: #9ce0c7;
  font-weight: 900;
}

.daily-feedback.bad .daily-feedback-title {
  color: #f0968f;
}

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

.daily-next {
  width: 200px;
  min-height: 32px;
  justify-self: end;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid rgba(226,189,102,.5);
  background: #b9433b;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.daily-next[disabled] {
  opacity: .42;
}

.scenario-heading {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(180px,.8fr) minmax(260px,1.2fr) 90px;
  align-items: center;
  gap: 12px;
}

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

.scenario-heading-theme {
  font-size: 13px;
  font-weight: 900;
  line-height: 17px;
  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;
}

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

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

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

.scenario-option {
  display: grid;
  min-height: 36px;
  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);
}

.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 {
  min-width: 0;
  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 #65c49e;
  background: rgba(255,255,255,.05);
  font-size: 11px;
  line-height: 1.35;
}

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

.scenario-feedback-label {
  color: #9ce0c7;
  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: 220px;
  margin-left: auto;
}

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

.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: #d8a05a;
  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;
  overflow-wrap: break-word;
}

.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: 14px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

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

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

.campaign-result {
  display: grid !important;
  grid-template-columns: 140px minmax(0,1fr);
  align-items: center;
  gap: 22px;
  padding: 12px 16px;
}

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

.campaign-result-actions .primary-command {
  width: min(280px,100%);
  margin: 0;
}

.campaign-result-actions .ghost-command {
  min-width: 110px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.3;
}

@media (max-width: 1050px) {
  .command-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));
  }

  .command-hud {
    grid-template-columns: minmax(160px,1fr) minmax(140px,240px) minmax(160px,1fr);
    gap: 8px;
  }

  .command-hud-right {
    gap: 8px;
  }

  .command-overview {
    gap: 14px;
  }

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

  .daily-layout {
    grid-template-columns: minmax(220px,.9fr) minmax(300px,1.1fr);
    gap: 8px;
  }
}

@media (max-height: 420px) {
  .overview-title {
    font-size: 20px;
  }


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

  .act-brief-title {
    font-size: 22px;
  }

  .act-index-number {
    font-size: 48px;
  }

  .scenario-text {
    font-size: 13px;
  }

  .scenario-option {
    min-height: 30px;
    padding: 4px 8px;
    font-size: 12px;
  }


  .daily-option {
    min-height: 44px;
  }
}

/* 八个年份均分上排，八张事件卡片分两行，随剩余高度伸缩。 */
.command-operation.timeline-game-mode {
  grid-template-rows: 32px minmax(0,1fr);
  gap: 6px;
}

.timeline-game-mode .game-board {
  grid-template-rows: minmax(0,1fr);
  padding: 8px;
}

.timeline-game.timeline-complete {
  grid-template-rows: minmax(0,1fr);
}

@media (max-width: 700px), (max-height: 400px) {
  .command-operation.timeline-game-mode {
    gap: 4px;
  }

  .timeline-game-mode .game-board {
    padding: 6px;
  }

  .timeline-game {
    gap: 6px;
  }

  .timeline-lane,
  .timeline-events {
    gap: 4px;
  }

  .timeline-slot {
    gap: 3px;
    padding: 4px 2px;
  }

  .slot-year {
    font-size: 16px;
    line-height: 18px;
  }

  .timeline-event {
    padding: 4px 6px;
    font-size: 11px;
    line-height: 13px;
  }
}

@media (max-width: 560px) {
  .timeline-slot {
    gap: 2px;
    padding: 2px 1px;
  }

  .slot-year {
    font-size: 14px;
    line-height: 16px;
  }

  .slot-event {
    font-size: 9px;
    line-height: 12px;
  }

  .timeline-event {
    padding: 2px 4px;
    font-size: 10px;
    line-height: 12px;
  }
}

.timeline-drag-card {
  position: absolute;
  z-index: 999;
  display: flex;
  min-width: 120px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 2px solid #e2bd66;
  border-radius: 6px;
  background: rgba(35,40,35,.96);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 4px 20px rgba(0,0,0,.6), 0 0 0 2px rgba(226,189,102,.3);
  pointer-events: none;
}



.ship-scene-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--rpx));
  margin-bottom: calc(4 * var(--rpx));
}



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

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

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

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

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

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


/* ===== 烽火传令 beaconRelay ===== */
.beacon-game {
  display: grid;
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  overflow: hidden;
}

.beacon-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 0;
}

.beacon-hud-left {
  min-width: 0;
}

.beacon-hud-title {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: #edcf8b;
}

.beacon-hud-sub {
  display: block;
  margin-top: 2px;
  color: rgba(255,255,255,.58);
  font-size: 10px;
}

.beacon-hud-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.beacon-timer {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-right: 8px;
  padding: 2px 8px;
  border: 1px solid rgba(226,189,102,.35);
  background: rgba(226,189,102,.08);
}

.beacon-timer.urgent {
  border-color: rgba(233,97,82,.55);
  background: rgba(233,97,82,.12);
}

.beacon-timer-label {
  color: rgba(255,255,255,.5);
  font-size: 10px;
  font-weight: 700;
}

.beacon-timer-value {
  color: #edcf8b;
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.beacon-timer.urgent .beacon-timer-value {
  color: #f0a29a;
}

.beacon-time-bar {
  margin-top: 8px;
  height: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}

.beacon-time-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #e2bd66, #b9433b);
  transition: width .1s linear;
}

.beacon-time-fill.urgent {
  background: linear-gradient(90deg, #e96152, #b9433b);
}

.beacon-miss-label {
  color: rgba(255,255,255,.5);
  font-size: 10px;
  font-weight: 700;
}

.beacon-miss-list {
  display: flex;
  gap: 4px;
}

.beacon-miss-dot {
  font-size: 11px;
  color: rgba(255,255,255,.2);
}

.beacon-miss-dot.active { color: #65c49e; }
.beacon-miss-dot.spent { color: rgba(233,97,82,.55); }

.beacon-main {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.1fr);
  gap: 12px;
  overflow: hidden;
}

.beacon-order-card {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 10px 12px;
  border: 1px solid rgba(226,189,102,.28);
  background:
    linear-gradient(160deg, rgba(185,67,59,.18), rgba(8,12,10,.55)),
    rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.beacon-order-card.ok-card {
  border-color: rgba(101,196,158,.45);
}
.beacon-order-card.bad-card {
  border-color: rgba(233,97,82,.45);
}
.beacon-order-card.suspect {
  border-color: rgba(233,97,82,.35);
  background:
    linear-gradient(160deg, rgba(233,97,82,.12), rgba(8,12,10,.55)),
    rgba(255,255,255,.03);
}

.beacon-order-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.beacon-order-tag {
  color: #edcf8b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

.beacon-order-score {
  color: rgba(255,255,255,.55);
  font-size: 10px;
}

.beacon-order-text {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.beacon-seals {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.beacon-seal {
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(226,189,102,.55);
  color: #edcf8b;
  font-size: 13px;
  font-weight: 900;
  background: rgba(226,189,102,.08);
}

.beacon-seal.bad {
  border-color: rgba(233,97,82,.55);
  color: #f0a29a;
  background: rgba(233,97,82,.1);
}

.beacon-seal-tip {
  display: block;
  margin-top: auto;
  padding-top: 10px;
  color: rgba(255,255,255,.45);
  font-size: 10px;
  line-height: 1.4;
}

.beacon-chain {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  padding: 8px 4px;
}

.beacon-chain-line {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 42%;
  height: 2px;
  background: linear-gradient(90deg, rgba(226,189,102,.15), rgba(226,189,102,.55), rgba(226,189,102,.15));
  pointer-events: none;
}

.beacon-tower {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
}

.beacon-flame {
  width: 10px;
  height: 14px;
  border-radius: 50% 50% 40% 40%;
  background: transparent;
  opacity: 0;
  transition: opacity .15s linear;
}

.beacon-flame.on {
  opacity: 1;
  background: radial-gradient(circle at 50% 70%, #ffe29a 0%, #e2bd66 35%, #b9433b 75%, transparent 100%);
  box-shadow: 0 0 10px rgba(226,189,102,.55);
  animation: beacon-flicker 1s ease-in-out infinite;
}

.beacon-tower-ring {
  position: relative;
  display: flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(0,0,0,.28);
}

.beacon-tower.active .beacon-tower-ring {
  border-color: #e2bd66;
  box-shadow: 0 0 0 3px rgba(226,189,102,.15);
}

.beacon-tower.kindling .beacon-tower-ring {
  animation: beacon-pulse 0.9s ease-in-out infinite;
}

.beacon-tower.lit .beacon-tower-ring {
  border-color: #65c49e;
  background: rgba(101,196,158,.12);
}

.beacon-tower-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(226,189,102,.15), rgba(185,67,59,.75));
  transition: height .05s linear;
}

.beacon-tower-short {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.beacon-tower-name {
  color: rgba(255,255,255,.78);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.beacon-tower-state {
  color: rgba(255,255,255,.42);
  font-size: 9px;
}

.beacon-tower.active .beacon-tower-state {
  color: #edcf8b;
}

.beacon-tower.lit .beacon-tower-state {
  color: #65c49e;
}

.beacon-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 42px;
}

.beacon-actions-hint {
  justify-content: center;
}

.beacon-btn {
  min-width: 132px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 40px;
}

.beacon-btn-intercept {
  border: 1px solid rgba(233,97,82,.55);
  background: rgba(233,97,82,.14);
  color: #f3b3ac;
}

.beacon-btn-transmit {
  border-left: 4px solid #e2bd66;
  background: #b9433b;
  color: #fff;
}

.beacon-hint,
.beacon-feedback {
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 700;
}

.beacon-feedback.good { color: #65c49e; }
.beacon-feedback.bad { color: #f0a29a; }

@keyframes beacon-flicker {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.15); opacity: 1; }
}

@keyframes beacon-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(226,189,102,.15); }
  50% { box-shadow: 0 0 0 6px rgba(226,189,102,.28); }
}

.reduced .beacon-flame.on {
  animation: none;
}

.reduced .beacon-tower.kindling .beacon-tower-ring {
  animation: none;
}

@media (max-width: 860px), (max-height: 420px) {
  .command-operation {
    gap: 6px;
  }

  .game-heading {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .game-board {
    padding: 8px 10px;
  }

  .beacon-game {
    gap: 6px;
  }

  .beacon-hud {
    padding: 0;
  }

  .beacon-hud-title {
    font-size: 12px;
  }

  .beacon-hud-sub {
    margin-top: 1px;
    font-size: 9px;
  }

  .beacon-hud-right {
    gap: 4px;
  }

  .beacon-timer {
    margin-right: 0;
    padding: 1px 5px;
  }

  .beacon-timer-label {
    font-size: 9px;
  }

  .beacon-timer-value {
    font-size: 11px;
  }

  .beacon-miss-dot {
    font-size: 10px;
  }

  .beacon-main {
    grid-template-columns: minmax(190px, .9fr) minmax(210px, 1.1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 8px;
  }

  .beacon-order-card {
    padding: 6px 8px;
  }

  .beacon-order-tag,
  .beacon-order-score {
    font-size: 9px;
  }

  .beacon-time-bar {
    margin-top: 5px;
    height: 3px;
  }

  .beacon-order-text {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .beacon-seals {
    gap: 6px;
    margin-top: 7px;
  }

  .beacon-seal {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .beacon-seal-tip {
    padding-top: 5px;
    font-size: 9px;
    line-height: 1.3;
  }

  .beacon-chain {
    gap: 6px;
    padding: 3px 2px;
  }

  .beacon-flame {
    width: 8px;
    height: 11px;
  }

  .beacon-tower {
    gap: 2px;
    padding: 2px;
  }

  .beacon-tower-ring {
    width: 38px;
    height: 38px;
  }

  .beacon-tower-short {
    font-size: 13px;
  }

  .beacon-tower-name {
    font-size: 9px;
    line-height: 1.2;
  }

  .beacon-tower-state {
    font-size: 8px;
    line-height: 1.2;
  }

  .beacon-actions {
    min-height: 34px;
    gap: 8px;
  }

  .beacon-btn {
    min-width: 116px;
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 32px;
  }

  .beacon-hint,
  .beacon-feedback {
    font-size: 11px;
  }
}

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

/* 英模翻牌配对 memoryMatch */
.command-operation.memory-game-mode {
  grid-template-rows: 48px minmax(0, 1fr);
  gap: 6px;
}

.memory-game-mode .game-heading {
  grid-template-columns: minmax(180px, 1fr) 120px;
}

.memory-game-mode .game-heading-copy .section-kicker {
  font-size: 22px;
  line-height: 1.2;
}

.memory-game {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.memory-grid {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  align-content: stretch;
  justify-items: stretch;
  gap: 8px;
  box-sizing: border-box;
  overflow: hidden;
}

.memory-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  cursor: pointer;
  box-sizing: border-box;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

.memory-card.matched {
  pointer-events: none;
}

.memory-card.flipped .memory-card-inner {
  transform: rotateY(180deg);
}

.memory-card.matched .memory-card-open {
  border-color: rgba(101,196,158,.72);
  background:
    linear-gradient(160deg, rgba(45,126,94,.48), rgba(101,196,158,.08) 60%, rgba(8,12,10,.72));
}

.memory-card-hover {
  opacity: .9;
}

.memory-card-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .42s ease;
}

.memory-card-face {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(185,67,59,.9);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.memory-card-front {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(185,67,59,.28), rgba(8,12,10,.82)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 6px);
  color: rgba(255,255,255,.78);
  border: 1px solid rgba(226,189,102,.46);
  box-shadow: inset 0 0 0 1px rgba(226,189,102,.18), inset 0 0 22px rgba(185,67,59,.22);
}

.memory-card-open {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(160deg, rgba(226,189,102,.24), rgba(185,67,59,.18) 68%, rgba(8,12,10,.74));
  color: #fff7e0;
  transform: rotateY(180deg);
}

.memory-card-open.hero-face {
  background:
    linear-gradient(160deg, rgba(226,189,102,.3), rgba(185,67,59,.18) 68%, rgba(8,12,10,.72));
  color: #fff7e0;
}

.memory-card-open.deed-face {
  background:
    linear-gradient(160deg, rgba(185,67,59,.34), rgba(226,189,102,.1) 62%, rgba(8,12,10,.72));
  color: #fff1eb;
}

.memory-card-mark {
  display: block;
  flex-shrink: 0;
  color: #edcf8b;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

.memory-card-label {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: break-word;
  white-space: normal;
}

.memory-card-open.hero-face .memory-card-label {
  font-size: 23px;
}

.memory-card.wrong {
  animation: memory-wrong-shake .36s ease;
}

.memory-card.wrong .memory-card-open {
  background:
    linear-gradient(160deg, rgba(233,97,82,.48), rgba(185,67,59,.18) 62%, rgba(8,12,10,.72));
  box-shadow: 0 0 12px rgba(233,97,82,.3);
}

@media (max-width: 760px) {
  .memory-card-label {
    padding: 6px 8px;
    font-size: 18px;
  }

  .memory-card-open.hero-face .memory-card-label {
    font-size: 22px;
  }
}

@media (max-height: 420px) {
  .memory-card-label {
    padding: 5px 7px;
    font-size: 16px;
    line-height: 1.25;
  }

  .memory-card-open.hero-face .memory-card-label {
    font-size: 20px;
  }
}

.game-result-overlay {
  position: absolute;
  z-index: 30;
  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: game-result-in .34s ease-out both;
}

.game-result-overlay.failed {
  background: rgba(3, 7, 5, .9);
  backdrop-filter: blur(5px);
}

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

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

.reduced .game-result-overlay {
  animation: none;
}

@keyframes memory-wrong-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@keyframes memory-card-reveal {
  from {
    opacity: .35;
    transform: scale(.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.reduced .memory-card-inner,
.reduced .memory-card.wrong .memory-card-inner,
.reduced .memory-card-hover {
  transition: none;
}

.reduced .memory-card-front {
  animation: none;
}

.reduced .memory-card.wrong .memory-card-inner {
  animation: none;
}

@media (max-width: 760px) {
  .game-overlay-button {
    width: 170px;
  }
}

@media (max-height: 420px) {
  .memory-grid {
    gap: 5px;
  }
}

.command-operation.minesweeper-game-mode {
  position: absolute;
  z-index: 6;
  top: var(--content-top);
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: var(--safe-bottom);
  left: max(12px, env(safe-area-inset-left, 0px));
  display: flex;
  width: auto;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

.command-operation.minesweeper-game-mode .game-heading {
  display: grid;
  flex: 0 0 36px;
  min-height: 36px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 3px 2px;
  background: rgba(9, 12, 10, .72);
}

.command-operation.minesweeper-game-mode .game-heading-copy .section-kicker {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-operation.minesweeper-game-mode .game-heading-copy .section-kicker {
  color: #edcf8b;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .4px;
}

.command-operation.minesweeper-game-mode .game-board.mine-game-board {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  align-items: stretch;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
  overflow: hidden;
}

.minesweeper-game {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  align-items: stretch;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.mine-board {
  display: grid;
  /* 雷区由游戏处理触摸，避免安卓把按住时的轻微位移接管为页面滚动。 */
  touch-action: none;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  margin: 0 auto;
  box-sizing: border-box;
  border: 2px solid rgba(226,189,102,.36);
  border-radius: 4px;
  background: rgba(0,0,0,.34);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.42), 0 8px 18px rgba(0,0,0,.22);
  overflow: hidden;
}

.mine-cell {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 4px;
  color: #f5f1e7;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* 旗标文字会在长按时增删；触摸始终落在格子上，确保松手事件仍能送达。 */
.mine-cell > * {
  pointer-events: none;
}

.mine-cell.closed {
  border-color: rgba(152,178,145,.28);
  background:
    linear-gradient(145deg, rgba(52,67,54,.96), rgba(24,32,25,.98)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.1), inset -1px -1px 0 rgba(0,0,0,.34);
}

.mine-cell.closed:active {
  background:
    linear-gradient(145deg, rgba(73,91,72,.98), rgba(31,44,33,.98)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 1px, transparent 1px 5px);
}

.mine-cell-hover {
  filter: brightness(1.12);
}

.mine-cell.flagged {
  border-color: rgba(255,82,103,.84);
  background:
    linear-gradient(145deg, rgba(123,45,55,.92), rgba(48,22,28,.96)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 1px, transparent 1px 5px);
  color: #ff6377;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.1),
    inset -1px -1px 0 rgba(0,0,0,.3),
    0 0 8px rgba(255,67,88,.16);
}

.mine-cell.flagged .mine-cell-text {
  color: #ff526b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 900;
  line-height: .9;
  text-shadow: 0 0 5px rgba(255,82,107,.55), 0 1px 2px rgba(0,0,0,.72);
}

.mine-cell.revealed {
  border-color: rgba(255,255,255,.12);
  background: rgba(42,53,44,.95);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

.mine-cell.revealed.empty {
  background: rgba(48,59,49,.92);
}

.mine-cell.mine,
.mine-cell.exploded {
  border-color: rgba(255,118,105,.82);
  background:
    radial-gradient(circle at 50% 43%, rgba(255,128,103,.24), transparent 45%),
    linear-gradient(145deg, #66392d, #4b2923);
  color: #fff;
}

.mine-cell.exploded {
  animation: mine-explode .42s ease-out;
  box-shadow: 0 0 0 2px rgba(255,118,105,.22), 0 0 16px rgba(255,86,66,.42);
}

.mine-cell.number-1 { color: #8dcbf0; }
.mine-cell.number-2 { color: #72d7aa; }
.mine-cell.number-3 { color: #ff927c; }
.mine-cell.number-4 { color: #d8afff; }
.mine-cell.number-5 { color: #ffd276; }
.mine-cell.number-6 { color: #ff9ca2; }
.mine-cell.number-7 { color: #f4f4e8; }
.mine-cell.number-8 { color: #c9c6bc; }

.mine-cell-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding: 0 1px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.66);
  white-space: nowrap;
}

.mine-glyph {
  position: relative;
  display: flex;
  width: 72%;
  height: 72%;
  min-width: 14px;
  min-height: 14px;
  align-items: center;
  justify-content: center;
}

.mine-glyph-symbol {
  display: block;
  color: #ed4774;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 4px rgba(237,71,116,.5);
  transform: rotate(8deg);
}

.mine-glyph::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffd36a;
  box-shadow: 0 0 4px rgba(255,211,106,.9);
  content: '';
  transform: translate(-50%, -50%);
}

.command-operation.minesweeper-game-mode .game-next-btn,
.command-operation.minesweeper-game-mode .game-retry-btn {
  flex: 0 0 auto;
  width: min(220px, 100%);
  margin: 0 auto 2px;
}

@keyframes mine-explode {
  0% { transform: scale(.78); opacity: .55; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

.reduced .mine-cell.exploded {
  animation: none;
  transition: none;
}

@media (max-width: 760px) {
  .mine-cell.flagged .mine-cell-text {
    font-size: 18px;
  }

  .mine-glyph-symbol {
    font-size: 20px;
  }
}

@media (max-height: 420px) {
  .command-operation.minesweeper-game-mode {
    bottom: max(6px, env(safe-area-inset-bottom, 0px));
    gap: 4px;
  }

  .command-operation.minesweeper-game-mode .game-heading {
    flex-basis: 32px;
    min-height: 32px;
    gap: 4px;
    padding: 2px;
  }

  .command-operation.minesweeper-game-mode .game-heading-copy .section-kicker {
    font-size: 16px;
    line-height: 1.15;
  }

  .command-operation.minesweeper-game-mode .game-board.mine-game-board {
    padding: 4px 6px;
  }

  .mine-cell-text {
    font-size: 12px;
  }

  .mine-cell.flagged .mine-cell-text {
    font-size: 16px;
  }

  .mine-glyph {
    min-width: 12px;
    min-height: 12px;
  }

  .mine-glyph-symbol {
    font-size: 17px;
  }

  .command-operation.minesweeper-game-mode .game-next-btn,
  .command-operation.minesweeper-game-mode .game-retry-btn {
    width: min(170px, 100%);
    min-height: 28px;
    padding: 3px 8px;
    font-size: 10px;
  }
}

/* 第四关 · 炮火校射 */
.command-operation.artillery-game-mode {
  grid-template-rows: 40px minmax(0, 1fr) auto;
  gap: 7px;
}

.artillery-game-mode .game-heading-copy .section-kicker,
.daily-game-mode .game-heading-copy .section-kicker {
  font-size: 12px;
  line-height: 16px;
}

.artillery-game-mode .game-board.artillery-game-board {
  display: block;
  padding: 0;
  border-color: rgba(216, 167, 93, .32);
  background: #111813;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .48), 0 12px 30px rgba(0, 0, 0, .2);
}

.artillery-game {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: 44px minmax(0, 1fr);
  overflow: hidden;
  background: #172018;
}

.artillery-hudbar {
  position: relative;
  z-index: 12;
  display: grid;
  min-width: 0;
  grid-template-columns: 150px minmax(220px, 1fr) 130px;
  align-items: center;
  gap: 12px;
  padding: 5px 14px;
  border-bottom: 1px solid rgba(226, 189, 102, .25);
  background: linear-gradient(180deg, rgba(29, 39, 31, .98), rgba(12, 18, 14, .96));
  box-shadow: 0 5px 16px rgba(0, 0, 0, .34);
}

.artillery-score-block,
.artillery-range-readout {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.artillery-range-readout { align-items: flex-end; }

.artillery-hud-label {
  color: rgba(234, 225, 199, .5);
  font-size: 8px;
  font-weight: 800;
  line-height: 10px;
  letter-spacing: 1.2px;
}

.artillery-hit-count {
  display: flex;
  align-items: baseline;
  margin-top: 1px;
}

.artillery-hit-value {
  color: #f0ce7d;
  font-family: "DIN Alternate", "Arial Narrow", sans-serif;
  font-size: 19px;
  font-weight: 900;
  line-height: 20px;
  text-shadow: 0 0 12px rgba(226, 189, 102, .34);
}

.artillery-hit-target {
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
  font-weight: 800;
}

.artillery-range-value {
  color: #f5e7bd;
  font-family: "DIN Alternate", "Arial Narrow", sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 20px;
}

.artillery-range-unit {
  margin-left: 2px;
  color: rgba(255, 255, 255, .52);
  font-size: 9px;
}

.artillery-shot-rack {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.artillery-shot-slot {
  position: relative;
  display: flex;
  width: 26px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid rgba(255, 255, 255, .16);
  transition: border-color .25s ease, opacity .25s ease, transform .25s ease;
}

.mini-shell {
  position: relative;
  width: 7px;
  height: 21px;
  border: 1px solid rgba(244, 222, 157, .45);
  border-radius: 48% 48% 2px 2px;
  background: linear-gradient(90deg, #67552d, #c6a555 44%, #7d6635 72%, #3c3523);
  box-shadow: inset 1px 0 rgba(255, 244, 199, .35), 0 2px 4px rgba(0, 0, 0, .5);
  clip-path: polygon(25% 0, 75% 0, 100% 28%, 100% 100%, 0 100%, 0 28%);
}

.mini-shell-band {
  position: absolute;
  right: -1px;
  bottom: 3px;
  left: -1px;
  height: 3px;
  background: #d2a54f;
  box-shadow: 0 1px rgba(26, 22, 12, .7);
}

.artillery-shot-number {
  position: absolute;
  right: -8px;
  bottom: 0;
  color: rgba(255, 255, 255, .28);
  font-size: 7px;
  line-height: 8px;
}

.artillery-shot-slot.hit {
  border-color: #77d0a6;
  transform: translateY(-1px);
}

.artillery-shot-slot.hit .mini-shell {
  border-color: #a1e4c2;
  background: linear-gradient(90deg, #245944, #7bd1a7 48%, #2f6c53);
  box-shadow: 0 0 9px rgba(91, 207, 155, .62);
}

.artillery-shot-slot.miss {
  border-color: #d86559;
  opacity: .48;
}

.artillery-shot-slot.miss .mini-shell {
  filter: grayscale(.65);
  transform: rotate(12deg) translateY(2px);
}

.artillery-field {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 24%, rgba(239, 202, 125, .24), transparent 19%),
    linear-gradient(180deg, #687369 0%, #455147 39%, #29372e 71%, #172019 100%);
  isolation: isolate;
}

.artillery-field::before {
  position: absolute;
  z-index: 9;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 10, 7, .25), transparent 24%, transparent 72%, rgba(8, 11, 8, .3)),
    repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255, 255, 255, .017) 4px);
  content: '';
  pointer-events: none;
}

.artillery-field::after {
  position: absolute;
  z-index: 10;
  inset: 0;
  box-shadow: inset 0 0 46px rgba(3, 7, 4, .68);
  content: '';
  pointer-events: none;
}

.artillery-sky-glow {
  position: absolute;
  z-index: 0;
  top: -35%;
  right: 6%;
  width: 42%;
  height: 88%;
  border-radius: 50%;
  background: rgba(237, 210, 145, .18);
  filter: blur(24px);
}

.artillery-cloud {
  position: absolute;
  z-index: 1;
  height: 16%;
  border-radius: 50%;
  background: rgba(24, 34, 28, .38);
  filter: blur(15px);
  animation: artillery-cloud-drift 14s ease-in-out infinite alternate;
}

.artillery-cloud.cloud-one { top: 10%; left: 15%; width: 31%; }
.artillery-cloud.cloud-two { top: 24%; right: 9%; width: 26%; opacity: .62; animation-delay: -5s; }

.artillery-mountain {
  position: absolute;
  right: -3%;
  bottom: 19%;
  left: -3%;
  transform-origin: bottom;
}

.artillery-mountain.mountain-far {
  z-index: 1;
  height: 54%;
  background: linear-gradient(180deg, #49594d, #26352c);
  clip-path: polygon(0 100%, 0 76%, 8% 62%, 17% 72%, 29% 38%, 37% 63%, 49% 48%, 58% 74%, 67% 29%, 76% 62%, 88% 44%, 100% 70%, 100% 100%);
  opacity: .72;
}

.artillery-mountain.mountain-near {
  z-index: 2;
  height: 38%;
  background: linear-gradient(180deg, #35443a, #16231b);
  clip-path: polygon(0 100%, 0 58%, 11% 43%, 21% 72%, 34% 31%, 45% 66%, 56% 42%, 68% 74%, 81% 28%, 92% 60%, 100% 52%, 100% 100%);
  opacity: .92;
}

.artillery-tree-line {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 18%;
  left: 0;
  height: 18%;
  opacity: .75;
  background:
    linear-gradient(61deg, transparent 48%, #122018 49% 57%, transparent 58%) 0 100% / 37px 60px repeat-x,
    linear-gradient(-61deg, transparent 48%, #14221a 49% 57%, transparent 58%) 17px 100% / 43px 70px repeat-x;
}

.artillery-ground {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  height: 21%;
  border-top: 2px solid rgba(205, 174, 105, .2);
  background:
    radial-gradient(ellipse at 18% 12%, rgba(115, 99, 58, .38) 0 3%, transparent 4%),
    radial-gradient(ellipse at 76% 20%, rgba(108, 91, 52, .32) 0 2.5%, transparent 3.5%),
    repeating-linear-gradient(168deg, transparent 0 17px, rgba(0, 0, 0, .11) 18px 20px),
    linear-gradient(180deg, #273126, #131a14);
  box-shadow: 0 -8px 28px rgba(8, 14, 9, .35);
}

.ground-rut {
  position: absolute;
  height: 5px;
  border: 1px solid rgba(7, 10, 7, .44);
  border-radius: 50%;
  transform: rotate(-4deg);
}

.ground-rut.rut-one { top: 36%; left: 7%; width: 25%; }
.ground-rut.rut-two { right: 5%; bottom: 22%; width: 34%; transform: rotate(3deg); }

.artillery-range-scale {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 20%;
  left: 0;
  height: 1px;
  border-top: 1px dashed rgba(239, 211, 145, .13);
  pointer-events: none;
}

.range-tick {
  position: absolute;
  bottom: -5px;
  width: 1px;
  height: 10px;
  background: rgba(242, 215, 151, .25);
}

.range-tick text {
  position: absolute;
  top: 11px;
  left: 50%;
  color: rgba(244, 230, 192, .27);
  font-family: "DIN Alternate", monospace;
  font-size: 7px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.range-tick.tick-300 { left: 42%; }
.range-tick.tick-400 { left: 56%; }
.range-tick.tick-520 { left: 70%; }
.range-tick.tick-650 { left: 84%; }

.artillery-target-model {
  position: absolute;
  z-index: 6;
  width: 1px;
  height: 1px;
  transform-origin: 50% 100%;
  animation: artillery-target-breathe 3.8s ease-in-out infinite;
}

.target-distance-tag {
  position: absolute;
  bottom: 38px;
  left: 0;
  padding: 2px 6px;
  border: 1px solid rgba(228, 200, 131, .3);
  border-radius: 2px;
  background: rgba(10, 15, 11, .78);
  color: #ead59d;
  font-family: "DIN Alternate", sans-serif;
  font-size: 8px;
  font-weight: 800;
  transform: translateX(-50%);
  white-space: nowrap;
}

.target-face {
  position: absolute;
  z-index: 5;
  top: -29px;
  left: -29px;
  width: 58px;
  height: 58px;
  border: 3px solid #272923;
  border-radius: 50%;
  background: radial-gradient(circle, #9e342d 0 10%, #e5d6ad 11% 25%, #9e342d 26% 43%, #ddcda6 44% 64%, #5a5b4d 65% 100%);
  box-shadow: inset -6px -7px 12px rgba(0, 0, 0, .32), inset 5px 5px 9px rgba(255, 246, 210, .2), 0 5px 12px rgba(0, 0, 0, .45);
  transition: filter .2s ease, transform .2s ease;
}

.target-face::after {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  content: '';
}

.target-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(57, 44, 31, .34);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.target-ring.ring-outer { width: 47px; height: 47px; }
.target-ring.ring-middle { width: 31px; height: 31px; }
.target-ring.ring-inner { width: 15px; height: 15px; }

.target-bullseye {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #321611;
  box-shadow: 0 0 0 2px rgba(242, 206, 125, .62);
  transform: translate(-50%, -50%);
}

.target-rivet {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c3b68f;
  box-shadow: inset -1px -1px #514b3d;
}

.target-rivet.rivet-a { top: 7px; left: 17px; }
.target-rivet.rivet-b { right: 15px; bottom: 7px; }

.target-support {
  position: absolute;
  z-index: 3;
  top: 17px;
  width: 5px;
  height: 62px;
  border: 1px solid #272b25;
  background: linear-gradient(90deg, #343b31, #77745d 48%, #2a3028);
  box-shadow: 2px 3px 4px rgba(0, 0, 0, .32);
  transform-origin: top;
}

.target-support.support-left { left: -16px; transform: rotate(9deg); }
.target-support.support-right { right: -16px; transform: rotate(-9deg); }

.target-shadow {
  position: absolute;
  z-index: 1;
  top: 64px;
  left: -42px;
  width: 84px;
  height: 13px;
  border-radius: 50%;
  background: rgba(4, 7, 5, .48);
  filter: blur(3px);
}

.target-sandbags {
  position: absolute;
  z-index: 4;
  top: 55px;
  left: -43px;
  width: 86px;
  height: 22px;
}

.sandbag {
  position: absolute;
  width: 28px;
  height: 12px;
  border: 1px solid #3d3c2b;
  border-radius: 45%;
  background: linear-gradient(165deg, #847b51, #514d35 56%, #302f25);
  box-shadow: inset 0 2px rgba(224, 207, 149, .13), 0 2px 3px rgba(0, 0, 0, .35);
}

.sandbag.bag-a { top: 0; left: 16px; transform: rotate(3deg); }
.sandbag.bag-b { top: 0; right: 15px; transform: rotate(-4deg); }
.sandbag.bag-c { bottom: 0; left: 0; }
.sandbag.bag-d { bottom: 0; left: 29px; transform: rotate(2deg); }
.sandbag.bag-e { right: 0; bottom: 0; transform: rotate(-3deg); }

.artillery-target-model.hit .target-face {
  filter: brightness(1.28) saturate(1.25);
  animation: artillery-target-hit .56s cubic-bezier(.22, .8, .32, 1);
}

.artillery-target-model.hit .target-distance-tag {
  border-color: #77d0a6;
  color: #a7e7c7;
  box-shadow: 0 0 12px rgba(86, 204, 151, .38);
}

.artillery-cannon-model {
  position: absolute;
  z-index: 7;
  bottom: 3%;
  left: 6%;
  width: 200px;
  height: 150px;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .38));
}

.cannon-ground-shadow {
  position: absolute;
  bottom: 2px;
  left: -7px;
  width: 190px;
  height: 22px;
  border-radius: 50%;
  background: rgba(4, 7, 4, .56);
  filter: blur(5px);
}

.cannon-trail {
  position: absolute;
  z-index: 1;
  bottom: 16px;
  left: 68px;
  width: 112px;
  height: 13px;
  border: 5px solid #252b25;
  border-left: 0;
  border-radius: 0 60% 60% 0;
  background: linear-gradient(180deg, #515848, #292f28);
  box-shadow: inset 0 2px rgba(189, 192, 158, .13), 0 3px 5px rgba(0, 0, 0, .42);
  transform-origin: left;
}

.cannon-trail.trail-left { transform: rotate(9deg); }
.cannon-trail.trail-right { bottom: 7px; transform: rotate(-7deg); }

.cannon-wheel {
  position: absolute;
  z-index: 5;
  bottom: 4px;
  width: 61px;
  height: 61px;
  border: 5px solid #222821;
  border-radius: 50%;
  background: radial-gradient(circle, #2c332b 0 18%, #5f6655 19% 24%, #252c25 25% 49%, #777a64 50% 54%, #242921 55% 100%);
  box-shadow: inset 0 0 0 2px rgba(172, 175, 143, .18), 0 5px 8px rgba(0, 0, 0, .48);
}

.cannon-wheel.wheel-left { left: 21px; }
.cannon-wheel.wheel-right { left: 83px; transform: scale(.82); opacity: .76; }

.wheel-rim {
  position: absolute;
  inset: 4px;
  border: 2px solid #858570;
  border-radius: 50%;
  opacity: .45;
}

.wheel-spoke {
  position: absolute;
  top: 50%;
  left: 8%;
  width: 84%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3e443a, #8b8e76 48%, #393f36);
  transform-origin: center;
}

.wheel-spoke.spoke-a { transform: translateY(-50%); }
.wheel-spoke.spoke-b { transform: translateY(-50%) rotate(60deg); }
.wheel-spoke.spoke-c { transform: translateY(-50%) rotate(120deg); }

.wheel-hub {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid #292f28;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 33%, #aaa98c, #535a4c 43%, #232923 70%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .45);
  transform: translate(-50%, -50%);
}

.cannon-carriage {
  position: absolute;
  z-index: 4;
  bottom: 34px;
  left: 45px;
  width: 82px;
  height: 45px;
  border: 2px solid #252b24;
  border-radius: 15px 8px 7px 12px;
  background: linear-gradient(145deg, #727966, #424b40 52%, #252d27);
  box-shadow: inset 0 4px rgba(196, 198, 160, .12), 0 4px 6px rgba(0, 0, 0, .4);
  clip-path: polygon(3% 14%, 82% 0, 100% 46%, 83% 100%, 11% 89%, 0 58%);
}

.carriage-highlight {
  position: absolute;
  top: 8px;
  left: 15px;
  width: 46px;
  height: 3px;
  border-radius: 50%;
  background: rgba(221, 217, 168, .18);
  transform: rotate(-7deg);
}

.carriage-bolt {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b0ae8d, #474e43 55%, #1d221e);
}

.carriage-bolt.bolt-a { top: 17px; left: 19px; }
.carriage-bolt.bolt-b { right: 14px; bottom: 9px; }

.cannon-breech {
  position: absolute;
  z-index: 8;
  top: 59px;
  left: 54px;
  width: 43px;
  height: 31px;
  border: 2px solid #252b24;
  border-radius: 11px 7px 8px 13px;
  background: linear-gradient(145deg, #7b826c, #475044 48%, #242b25);
  box-shadow: inset 0 3px rgba(215, 216, 178, .13), 0 4px 5px rgba(0, 0, 0, .44);
}

.breech-cap {
  position: absolute;
  top: 5px;
  left: -9px;
  width: 13px;
  height: 20px;
  border: 2px solid #222821;
  border-radius: 6px 2px 2px 6px;
  background: #555d4f;
}

.breech-lock {
  position: absolute;
  right: 7px;
  bottom: -9px;
  width: 5px;
  height: 15px;
  border-radius: 2px;
  background: #343b33;
  transform: rotate(24deg);
}

.cannon-elevation {
  position: absolute;
  z-index: 7;
  top: 69px;
  left: 70px;
  width: 130px;
  height: 1px;
  transform-origin: 0 50%;
  transition: transform .14s ease-out;
}

.cannon-cradle {
  position: absolute;
  top: -10px;
  left: -13px;
  width: 46px;
  height: 20px;
  border: 2px solid #252b24;
  border-radius: 9px;
  background: linear-gradient(#6c7461, #333c33);
  box-shadow: inset 0 3px rgba(215, 213, 173, .14);
}

.cannon-barrel {
  position: absolute;
  top: -7px;
  left: 0;
  width: 130px;
  height: 14px;
  border: 2px solid #222821;
  border-radius: 6px 2px 2px 6px;
  background: linear-gradient(180deg, #91977d 0%, #5b6454 28%, #3b443a 66%, #202720 100%);
  box-shadow: inset 0 2px rgba(229, 225, 183, .18), 0 3px 5px rgba(0, 0, 0, .45);
  clip-path: polygon(0 8%, 100% 22%, 100% 78%, 0 100%);
  transform-origin: left center;
}

.artillery-cannon-model.recoil .cannon-barrel,
.artillery-cannon-model.recoil .cannon-cradle {
  animation: artillery-cannon-recoil .22s cubic-bezier(.2, .8, .35, 1);
}

.barrel-highlight {
  position: absolute;
  top: 2px;
  right: 12px;
  left: 18px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 250, 210, .17), rgba(255, 250, 210, .36), transparent);
}

.barrel-band {
  position: absolute;
  top: -2px;
  width: 7px;
  height: 16px;
  border: 1px solid #252b24;
  background: linear-gradient(180deg, #858b74, #3c453b);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .35);
}

.barrel-band.band-one { left: 20px; }
.barrel-band.band-two { right: 14px; width: 5px; }

.cannon-muzzle {
  position: absolute;
  top: -4px;
  right: -8px;
  width: 14px;
  height: 20px;
  border: 2px solid #222721;
  border-radius: 2px 6px 6px 2px;
  background: linear-gradient(180deg, #838971, #444c40 55%, #252b25);
  box-shadow: inset 1px 2px rgba(218, 216, 174, .13);
}

.muzzle-bore {
  position: absolute;
  top: 3px;
  right: -2px;
  width: 6px;
  height: 10px;
  border-radius: 0 50% 50% 0;
  background: #090d0a;
  box-shadow: inset 2px 0 #323a31;
}

.muzzle-flash {
  position: absolute;
  z-index: 15;
  top: 50%;
  left: calc(100% + 5px);
  width: 55px;
  height: 55px;
  transform: translateY(-50%);
  pointer-events: none;
}

.flash-core {
  position: absolute;
  top: 50%;
  left: 0;
  width: 45px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at left, #fff8cf 0 18%, #ffc34d 36%, #ef7129 58%, transparent 73%);
  filter: drop-shadow(0 0 7px #f2a640);
  transform: translateY(-50%);
  animation: artillery-muzzle-flash .18s ease-out both;
}

.flash-spike {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 42px;
  height: 8px;
  background: linear-gradient(90deg, #fff2ae, #f48b32, transparent);
  clip-path: polygon(0 50%, 43% 18%, 100% 50%, 43% 82%);
  transform-origin: left;
}

.flash-spike.spike-one { transform: translateY(-50%) rotate(24deg); }
.flash-spike.spike-two { transform: translateY(-50%) rotate(-24deg); }

.muzzle-smoke {
  position: absolute;
  top: 9px;
  left: 15px;
  width: 38px;
  height: 28px;
  border-radius: 50%;
  background: rgba(202, 206, 187, .56);
  filter: blur(7px);
  animation: artillery-muzzle-smoke .55s ease-out both;
}

.artillery-trail-layer {
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
}

.artillery-trail-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f5d27b;
  box-shadow: 0 0 7px rgba(255, 194, 81, .8);
  transform: translate(-50%, -50%);
}

.artillery-projectile {
  position: absolute;
  z-index: 13;
  display: flex;
  width: 29px;
  height: 10px;
  align-items: center;
  filter: drop-shadow(-4px 3px 3px rgba(0, 0, 0, .48)) drop-shadow(0 0 5px rgba(238, 191, 91, .35));
  transform-origin: center;
  pointer-events: none;
}

.projectile-nose {
  width: 8px;
  height: 10px;
  flex: 0 0 8px;
  background: linear-gradient(180deg, #c2b579, #71643c 58%, #403820);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.projectile-body {
  position: relative;
  width: 16px;
  height: 10px;
  border-top: 1px solid rgba(248, 230, 165, .48);
  border-bottom: 1px solid #312c1d;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(180deg, #a7985e, #5e5332 58%, #302b1c);
}

.projectile-band {
  position: absolute;
  top: -1px;
  right: 2px;
  width: 3px;
  height: 10px;
  background: #d2a849;
  box-shadow: -1px 0 #4a3d23;
}

.projectile-glint {
  position: absolute;
  top: 2px;
  right: 5px;
  left: 2px;
  height: 1px;
  background: rgba(255, 244, 196, .5);
}

.projectile-tail {
  width: 5px;
  height: 8px;
  border-left: 2px solid #332e20;
  background: #756942;
  clip-path: polygon(0 0, 100% 14%, 100% 86%, 0 100%);
}

.artillery-impact {
  position: absolute;
  z-index: 14;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.impact-core {
  position: absolute;
  top: -23px;
  left: -23px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff9cf 0 10%, #ffc547 24%, #ea6c24 45%, rgba(161, 49, 24, .66) 60%, transparent 72%);
  filter: drop-shadow(0 0 12px rgba(244, 142, 41, .82));
  animation: artillery-impact-core .58s ease-out both;
}

.artillery-impact.miss .impact-core {
  background: radial-gradient(circle, #d9c58f 0 8%, #8b7950 30%, rgba(57, 53, 39, .62) 56%, transparent 74%);
  filter: drop-shadow(0 0 7px rgba(184, 151, 81, .45));
}

.impact-ring {
  position: absolute;
  top: -18px;
  left: -18px;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(255, 210, 96, .72);
  border-radius: 50%;
  animation: artillery-impact-ring .7s ease-out both;
}

.artillery-impact.miss .impact-ring { border-color: rgba(203, 184, 130, .48); }

.impact-ray {
  position: absolute;
  top: -2px;
  left: -31px;
  width: 62px;
  height: 4px;
  background: linear-gradient(90deg, transparent, #f7c956, transparent);
  clip-path: polygon(0 50%, 43% 18%, 100% 50%, 43% 82%);
  animation: artillery-impact-ray .46s ease-out both;
}

.artillery-impact.miss .impact-ray { display: none; }
.impact-ray.ray-a { transform: rotate(0deg); }
.impact-ray.ray-b { transform: rotate(45deg); }
.impact-ray.ray-c { transform: rotate(90deg); }
.impact-ray.ray-d { transform: rotate(135deg); }

.impact-smoke {
  position: absolute;
  border-radius: 50%;
  background: rgba(81, 82, 71, .78);
  filter: blur(3px);
  animation: artillery-impact-smoke .9s ease-out both;
}

.impact-smoke.smoke-a { top: -11px; left: -25px; width: 23px; height: 21px; }
.impact-smoke.smoke-b { top: -25px; left: -6px; width: 29px; height: 27px; animation-delay: .04s; }
.impact-smoke.smoke-c { top: -9px; left: 11px; width: 21px; height: 19px; animation-delay: .08s; }

.artillery-feedback-card {
  position: absolute;
  z-index: 20;
  top: 10px;
  left: 50%;
  display: flex;
  width: min(410px, 58%);
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  border: 1px solid rgba(233, 202, 128, .45);
  border-left: 4px solid #d8a75d;
  border-radius: 3px;
  background: linear-gradient(110deg, rgba(17, 25, 19, .96), rgba(31, 36, 27, .92));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .06);
  transform: translateX(-50%);
  animation: artillery-feedback-in .3s cubic-bezier(.2, .82, .3, 1.08) both;
}

.artillery-feedback-card.hit {
  border-color: rgba(105, 207, 159, .58);
  border-left-color: #72cda3;
  background: linear-gradient(110deg, rgba(15, 37, 27, .97), rgba(27, 54, 39, .93));
}

.artillery-feedback-card.miss {
  border-color: rgba(222, 111, 95, .5);
  border-left-color: #d66759;
}

.feedback-emblem {
  display: flex;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #e4bd6a;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 0 12px rgba(226, 189, 102, .22);
}

.artillery-feedback-card.hit .feedback-emblem { color: #87d8b3; }
.artillery-feedback-card.miss .feedback-emblem { color: #ed8174; }

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

.feedback-title {
  color: #f2dfaa;
  font-size: 14px;
  font-weight: 900;
  line-height: 17px;
}

.artillery-feedback-card.hit .feedback-title { color: #a3e4c3; }
.artillery-feedback-card.miss .feedback-title { color: #f0a095; }

.artillery-fire-control {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.fire-button-ring {
  position: relative;
  display: flex;
  width: 150px;
  height: 60px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(220, 170, 82, .55);
  border-radius: 30px;
  background: repeating-conic-gradient(from 0deg, rgba(225, 182, 91, .52) 0 5deg, transparent 5deg 14deg);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), inset 0 0 13px rgba(236, 183, 70, .14);
  transition: transform .12s ease, filter .12s ease;
}

.fire-button-core {
  position: absolute;
  display: flex;
  inset: 4px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #7f2924;
  border-radius: 25px;
  background: radial-gradient(circle at 45% 34%, #d76858, #a53831 45%, #5b201d 100%);
  box-shadow: inset 0 2px rgba(255, 218, 185, .17), inset 0 -5px rgba(67, 15, 13, .32), 0 3px 8px rgba(0, 0, 0, .44);
  color: #fff5de;
  text-shadow: 0 1px 2px rgba(40, 5, 4, .72);
}

.fire-crosshair {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 239, 195, .16);
  border-radius: 50%;
}

.fire-crosshair::before,
.fire-crosshair::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(255, 239, 195, .15);
  content: '';
  transform: translate(-50%, -50%);
}

.fire-crosshair::before { width: 42px; height: 1px; }
.fire-crosshair::after { width: 1px; height: 42px; }

.fire-button-title {
  position: relative;
  z-index: 2;
  font-size: 12px;
  font-weight: 900;
  line-height: 15px;
  letter-spacing: 1px;
}

.artillery-fire-control.charging .fire-button-ring {
  border-color: #f0c864;
  filter: drop-shadow(0 0 9px rgba(238, 168, 60, .68));
  transform: scale(.96);
  animation: artillery-charge-ring .58s ease-in-out infinite alternate;
}

.artillery-fire-control.charging .fire-button-core {
  background: radial-gradient(circle at 45% 34%, #f28b5e, #cf4436 46%, #751f1a 100%);
}

.artillery-fire-control.locked:not(.charging) .fire-button-ring {
  filter: grayscale(.65);
  opacity: .72;
}

.artillery-game.state-flying .artillery-field { box-shadow: inset 0 0 26px rgba(238, 168, 64, .11); }

@keyframes artillery-cloud-drift {
  from { transform: translateX(-8px) scale(1); }
  to { transform: translateX(18px) scale(1.06); }
}

@keyframes artillery-target-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@keyframes artillery-target-hit {
  0% { transform: rotate(0) scale(1); }
  24% { transform: rotate(-8deg) scale(1.12); }
  52% { transform: rotate(5deg) scale(.96); }
  100% { transform: rotate(0) scale(1); }
}

@keyframes artillery-cannon-recoil {
  0% { transform: translateX(0); }
  38% { transform: translateX(-13px); }
  100% { transform: translateX(0); }
}

@keyframes artillery-muzzle-flash {
  0% { opacity: 0; transform: translateY(-50%) scale(.35); }
  28% { opacity: 1; transform: translateY(-50%) scale(1.18); }
  100% { opacity: 0; transform: translateY(-50%) scale(.82); }
}

@keyframes artillery-muzzle-smoke {
  0% { opacity: .75; transform: translate(0, 0) scale(.4); }
  100% { opacity: 0; transform: translate(25px, -12px) scale(1.7); }
}

@keyframes artillery-impact-core {
  0% { opacity: .2; transform: scale(.2); }
  32% { opacity: 1; transform: scale(1.38); }
  100% { opacity: 0; transform: scale(.72); }
}

@keyframes artillery-impact-ring {
  0% { opacity: .9; transform: scale(.25); }
  100% { opacity: 0; transform: scale(2.5); }
}

@keyframes artillery-impact-ray {
  0% { opacity: 0; width: 20px; margin-left: 21px; }
  28% { opacity: 1; }
  100% { opacity: 0; width: 76px; margin-left: -7px; }
}

@keyframes artillery-impact-smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(.35); }
  28% { opacity: .8; }
  100% { opacity: 0; transform: translate(0, -27px) scale(1.5); }
}

@keyframes artillery-feedback-in {
  from { opacity: 0; transform: translate(-50%, -9px) scale(.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes artillery-charge-ring {
  from { box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 0 6px rgba(241, 176, 59, .24); }
  to { box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 0 18px rgba(241, 176, 59, .72); }
}

.paused .artillery-cloud,
.paused .artillery-target-model,
.paused .artillery-fire-control.charging .fire-button-ring,
.reduced .artillery-cloud,
.reduced .artillery-target-model,
.reduced .artillery-fire-control.charging .fire-button-ring,
.reduced .artillery-target-model.hit .target-face,
.reduced .impact-core,
.reduced .impact-ring,
.reduced .impact-ray,
.reduced .impact-smoke,
.reduced .muzzle-flash,
.reduced .muzzle-smoke,
.reduced .artillery-feedback-card,
.reduced .artillery-cannon-model.recoil .cannon-barrel,
.reduced .artillery-cannon-model.recoil .cannon-cradle {
  animation: none;
}

@media (max-width: 820px) {
  .artillery-hudbar {
    grid-template-columns: 112px minmax(170px, 1fr) 100px;
    gap: 6px;
    padding-right: 9px;
    padding-left: 9px;
  }

  .artillery-shot-rack { gap: 8px; }
  .fire-button-ring { width: 128px; }
  .artillery-cannon-model { transform: scale(.88); transform-origin: left bottom; }
  .artillery-feedback-card { width: min(380px, 66%); }
}

@media (max-height: 420px) {
  .command-operation.artillery-game-mode { gap: 4px; }
  .artillery-game { grid-template-rows: 35px minmax(0, 1fr); }
  .artillery-hudbar { padding-top: 3px; padding-bottom: 3px; }
  .artillery-shot-slot { height: 27px; }
  .mini-shell { height: 17px; }
  .artillery-hit-value, .artillery-range-value { font-size: 15px; line-height: 16px; }
  .artillery-cannon-model { bottom: -2%; transform: scale(.72); transform-origin: left bottom; }
  .target-face { top: -23px; left: -23px; width: 46px; height: 46px; }
  .target-ring.ring-outer { width: 37px; height: 37px; }
  .target-ring.ring-middle { width: 25px; height: 25px; }
  .target-ring.ring-inner { width: 12px; height: 12px; }
  .target-distance-tag { bottom: 29px; }
  .target-support { top: 12px; height: 47px; }
  .target-support.support-left { left: -13px; }
  .target-support.support-right { right: -13px; }
  .target-sandbags { top: 42px; transform: scale(.8); transform-origin: center top; }
  .target-shadow { top: 52px; }
  .fire-button-ring { width: 125px; height: 49px; }
  .fire-button-title { font-size: 10px; line-height: 12px; }
  .fire-crosshair { width: 24px; height: 24px; }
  .artillery-feedback-card { top: 6px; min-height: 34px; padding: 3px 8px; }
  .feedback-emblem { width: 25px; height: 25px; flex-basis: 25px; font-size: 14px; }
  .feedback-title { font-size: 11px; line-height: 13px; }
}

/* 炮管直拖与炮场悬浮控件 */
.artillery-game {
  position: relative;
}

.artillery-field {
  grid-row: 2;
}

.artillery-target-model {
  transition: left .58s cubic-bezier(.2, .75, .25, 1), top .58s cubic-bezier(.2, .75, .25, 1);
}

.target-support {
  height: 15vh;
}

.target-sandbags {
  top: calc(15vh - 8px);
}

.target-shadow {
  top: calc(15vh + 1px);
}

.artillery-cannon-model {
  touch-action: none;
}

.artillery-cannon-model::after {
  position: absolute;
  z-index: 20;
  top: 18px;
  right: -6px;
  bottom: 0;
  left: 0;
  border: 1px dashed transparent;
  border-radius: 30px;
  content: '';
  pointer-events: none;
  transition: border-color .18s ease, background .18s ease;
}

.artillery-cannon-model.dragging::after {
  border-color: rgba(239, 205, 124, .42);
  background: radial-gradient(circle at 44% 43%, rgba(230, 191, 101, .1), transparent 52%);
}

.cannon-angle-pivot {
  position: absolute;
  z-index: 18;
  top: -15px;
  left: -15px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(239, 211, 146, .35);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 210, 136, .4) 0 2px, rgba(28, 35, 29, .68) 3px 8px, rgba(232, 199, 119, .18) 9px, transparent 10px);
  box-shadow: 0 0 8px rgba(225, 183, 87, .18);
  pointer-events: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.artillery-cannon-model.dragging .cannon-angle-pivot {
  box-shadow: 0 0 16px rgba(238, 194, 88, .6);
  transform: scale(1.2);
}

.cannon-barrel::after {
  position: absolute;
  top: -7px;
  left: 47%;
  width: 35px;
  height: 26px;
  border: 1px dashed rgba(242, 216, 154, .38);
  border-radius: 14px;
  background: rgba(229, 193, 107, .07);
  content: '';
  pointer-events: none;
  transform: translate(-50%, -1px);
}

.artillery-cannon-model.dragging .cannon-barrel::after {
  border-style: solid;
  border-color: rgba(248, 220, 151, .72);
  box-shadow: 0 0 12px rgba(234, 190, 84, .35);
}

/* 炮场内悬浮控件：压力竖向显示，蓄力按钮置于原引导位置 */
.artillery-power-rail {
  position: absolute;
  z-index: 18;
  top: 18px;
  bottom: 112px;
  left: 14px;
  display: flex;
  width: 28px;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.power-rail-track {
  position: relative;
  width: 8px;
  min-height: 76px;
  flex: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 5px;
  background: rgba(7, 12, 8, .72);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6), 0 2px 7px rgba(0, 0, 0, .22);
}

.power-rail-track::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent calc(10% - 1px), rgba(4, 8, 5, .55) calc(10% - 1px), rgba(4, 8, 5, .55) 10%);
  content: '';
}

.power-rail-fill {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 0;
  background: linear-gradient(0deg, #4f9c79, #d4b057 67%, #d25948);
  box-shadow: 0 0 10px rgba(221, 175, 80, .5);
  transition: height .04s linear;
}

.artillery-power-rail.high .power-rail-fill {
  box-shadow: 0 0 13px rgba(224, 91, 67, .72);
}

.power-rail-gloss {
  position: absolute;
  z-index: 3;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  width: 2px;
  background: rgba(255, 255, 255, .16);
}

.power-rail-value {
  margin-top: 5px;
  color: #f0cf82;
  font-family: "DIN Alternate", "Arial Narrow", sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 15px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

.artillery-fire-control-field {
  position: absolute;
  z-index: 18;
  bottom: 16px;
  left: calc(6% + 152px);
  width: 150px;
  height: 60px;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.artillery-fire-control-field .fire-button-ring {
  width: 142px;
  height: 52px;
  pointer-events: auto;
}

@media (max-width: 820px) {
  .artillery-power-rail {
    top: 14px;
    bottom: 94px;
    left: 9px;
    width: 24px;
  }

  .power-rail-track { width: 7px; }
  .power-rail-value { font-size: 12px; line-height: 14px; }

  .artillery-fire-control-field {
    bottom: 14px;
    left: calc(6% + 128px);
    width: 132px;
    height: 52px;
  }

  .artillery-fire-control-field .fire-button-ring {
    width: 124px;
    height: 46px;
  }
}

@media (max-height: 420px) {
  .artillery-game {
    grid-template-rows: 35px minmax(0, 1fr);
  }

  .artillery-power-rail {
    top: 10px;
    bottom: 76px;
    left: 7px;
    width: 22px;
  }

  .power-rail-value { margin-top: 3px; font-size: 11px; line-height: 12px; }

  .artillery-fire-control-field {
    bottom: 10px;
    left: calc(6% + 108px);
    width: 124px;
    height: 46px;
  }

  .artillery-fire-control-field .fire-button-ring {
    width: 117px;
    height: 40px;
  }
}

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

/* 与能打胜仗入口保持相同的安全边距，小屏下优先保留返回入口和完整状态文字。 */
@media (max-width: 700px), (max-height: 400px) {
  .command-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));
    --content-top: calc(var(--safe-top) + 46px);
  }

  .command-hud {
    right: max(108px, calc(var(--safe-right) + 20px));
    /* 统计位数增加时保留内容宽度，让左侧栏收缩，避免挤入胶囊区域。 */
    grid-template-columns: minmax(0,1fr) minmax(100px,190px) minmax(max-content,1.1fr);
    gap: 8px;
  }

  .command-overview {
    gap: 12px;
  }

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

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

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

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

  .command-node-title {
    font-size: 12px;
    line-height: 16px;
  }

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

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

  .command-brand {
    display: none;
  }

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

  /* 编号跨两行，通关状态排在标题下方，避免末字被右边界裁切。 */
  .command-node {
    grid-template-columns: 26px minmax(0,1fr);
    row-gap: 1px;
    align-content: center;
  }

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

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

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

  .command-node-type {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    line-height: 12px;
    text-align: left;
  }
}