/* 云端航线 · 样式（仿真统一视觉：低饱和工程配色 · 平面形态 + 1px 钢灰描边 · 与三维沙盘同一语言） */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  /* 纸面 / 雾绿底 —— 对齐沙盘的雾面基调 */
  --paper: #f4f6f1;
  --paper-2: #eef2ec;
  --bg: #dfe7e0;
  --ink: #1c3546;          /* 深蓝灰墨 */
  --muted: #5d6e66;
  --line: #8b9aa6;         /* 钢灰描边 */
  --line-l: #c3cec4;       /* 浅描边 */
  --primary: #2c6e63;      /* 主行动色（深青绿） */
  --primary-d: #245a52;
  --route: #358aa2;        /* 航路青 */
  --earth: #aa7850;        /* 陶土强调（金币/警示族） */
  --good: #39816d;         /* 站点绿 */
  --bad: #a0523c;          /* 砖红 */
  --lock: #b7c2ba;
  --shadow: 0 2px 10px rgba(28, 53, 70, .14);
  --shadow-sm: 0 1px 5px rgba(28, 53, 70, .10);
}

html, body { height: 100%; }
html {
  /* 移动端：禁下拉刷新/边缘橡皮筋（拖拽棋子时页面不跟着弹）；user-scalable=no 时 iOS 不会自作主张放大字号 */
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: var(--ink);
  /* 工程坐标纸：雾绿底 + 28px 细网格 */
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(0deg, rgba(28, 53, 70, .05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(28, 53, 70, .05) 0 1px, transparent 1px 28px);
  background-attachment: fixed;
  display: flex; flex-direction: column; max-width: 980px; margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;   /* iOS 长按棋盘/卡片不弹放大镜与呼出菜单 */
}
/* 触屏手势：消除 300ms 延迟与双击缩放（地图机场、关卡节点、按钮、沙盘卡） */
button, .lv, .slot, .nav-bar button, .ap-picker button { touch-action: manipulation; }
/* iOS Safari 不支持 body 上的 background-attachment: fixed（会退化为局部重绘卡顿）——触屏设备改为随页滚动 */
@media (pointer: coarse) { body { background-attachment: scroll; } }

/* ---------- 顶栏（纸面横幅 + 数据芯片） ---------- */
#topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 14px 8px; flex-wrap: wrap; gap: 6px;
  /* 刘海屏：viewport-fit=cover 后首行内容让位状态栏 */
  padding-top: calc(9px + env(safe-area-inset-top));
  background: rgba(244, 246, 241, .94);
  border-bottom: 1px solid #b8c2b8;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(4px);
}
.brand { font-weight: 700; font-size: 18px; letter-spacing: 2px; color: var(--ink); }
.brand .tagline { font: 700 10.5px Consolas, "Courier New", monospace; color: var(--muted); margin-left: 6px; letter-spacing: 1px; }
.res { display: flex; gap: 7px; }
.chip {
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--line-l); border-radius: 4px;
  padding: 3px 10px; font-size: 12.5px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.chip.coin  { color: #8a6a2c; border-color: #d3c4a8; }
.chip.energy{ color: #2c6e63; border-color: #b5c8c0; }
.chip.net   { color: #39816d; border-color: #b5c8c0; }
.chip.snd { cursor: pointer; color: #2c4a46; border-color: var(--line-l); font-size: 12px; line-height: 1.4; }
.chip.snd:active { transform: translateY(1px); }
.chip.help { cursor: pointer; color: #2c4a46; border-color: var(--line-l); font-size: 12px; line-height: 1.4; }
.chip.help:active { transform: translateY(1px); }

/* ---------- 仓库条（收入累积 + 进度条） ---------- */
#warehouseBar {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 14px 0; padding: 8px 14px 10px;
  background: rgba(244, 246, 241, .92);
  border: 1px solid #b8c2b8; border-left: 4px solid var(--earth); border-radius: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  box-shadow: var(--shadow-sm);
  font-variant-numeric: tabular-nums;
}
#whText { flex: 1 1 auto; line-height: 1.3; }
#whBar { flex-basis: 100%; height: 6px; margin-top: 4px; background: #d8ddd6; border-radius: 3px; overflow: hidden; }
#whBar i { display: block; height: 100%; border-radius: 3px;
  background: var(--route); transition: width .4s ease; }
.copilot-badge { color: #2c6e63; font-weight: 800; }

/* ---------- 底部导航坞（纸面板） ---------- */
#nav {
  position: fixed; z-index: 30; left: 50%; bottom: 10px; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));   /* 底部 Home 指示条让位 */
  width: min(96%, 560px);
  display: flex; gap: 2px; padding: 5px;
  background: rgba(244, 246, 241, .96);
  border: 1px solid #b8c2b8; border-radius: 8px; box-shadow: var(--shadow);
}
#nav .tab {
  flex: 1; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px 6px; border-radius: 4px;
  font-size: 13px; font-weight: 700; letter-spacing: 1px; line-height: 1; color: var(--muted);
  transition: background .15s, color .15s;
}
#nav .tab small { font-size: 11px; font-weight: 700; }
#nav .tab.active { background: #dfe9e2; color: var(--ink); box-shadow: inset 0 -2px 0 var(--primary); }
#nav .tab.pulse { animation: tabPulse 1.1s ease 2; }
@keyframes tabPulse {
  0%, 100% { transform: none; box-shadow: var(--shadow-sm); }
  50% { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(44, 110, 99, .30); }
}
#nav .tab:active { background: #d5e0d8; }

/* ---------- 屏幕通用 ---------- */
#app { flex: 1; padding: 14px 14px 86px; overflow-y: auto; position: relative; z-index: 1; }
.screen { display: none; animation: fadeIn .25s ease; }
.screen.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
.screen-head {
  background: var(--paper);
  border: 1px solid var(--line-l); border-radius: 8px;
  padding: 11px 16px 10px; margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.screen-head h2 { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: 1px; }
.hint { color: var(--muted); font-size: 12.5px; margin-top: 3px; line-height: 1.5; }
.hint b { color: #8a6a2c; }
.btn {
  background: var(--primary); color: #fff; border: 1px solid var(--primary-d); border-radius: 5px;
  padding: 8px 18px; font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .08s, background .08s;
}
.btn:active { transform: translateY(1px); background: var(--primary-d); }
.btn.small { padding: 4px 12px; font-size: 12px; border-radius: 4px; }
.btn.ghost { background: var(--paper); color: #2c4a46; border: 1px solid var(--line); box-shadow: none; }
.btn.ghost:active { background: #e8ece6; }
.btn:disabled { background: #b9c1ba; border-color: #a4ada7; color: #f0f2ee; cursor: not-allowed; box-shadow: none; }
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(28, 53, 70, .45); display: flex; align-items: center; justify-content: center; }
.modal-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 20px 24px;
  width: min(88%, 380px); text-align: center; box-shadow: var(--shadow);
}
.modal-card h3 { margin-bottom: 10px; }
.ad-progress { height: 10px; border-radius: 3px; background: #d8ddd6; overflow: hidden; margin: 12px 0 8px; border: 1px solid var(--line-l); }
#adFill { height: 100%; width: 0%; background: var(--route); }
#toast {
  position: fixed; z-index: 99; left: 50%; bottom: 92px; transform: translateX(-50%);
  background: rgba(28, 53, 70, .92); color: #eef2ec; font-size: 13px; font-weight: 600;
  padding: 9px 18px; border-radius: 5px; max-width: 86%; text-align: center;
  animation: toastIn .25s ease; box-shadow: var(--shadow);
}
#toast.hidden, .hidden { display: none !important; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- 地图：研究仓「立体网络地图」1:1 复刻（iframe 嵌入 sandbox/net/，WebGL 沙盘） ---------- */
#mapBox {
  position: relative; width: 100%; aspect-ratio: 1000 / 640; max-height: 560px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid #8b9aa6;
  box-shadow: 0 8px 20px rgba(35, 70, 110, .20);
  background: radial-gradient(ellipse at center, #d8e8dc, #bfcec4);
}
#netMap { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
#mapLegend {
  display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 6px 2px;
  font: 600 11.5px/1.4 Consolas, "Courier New", monospace; color: #47575f;
}
#mapLegend span { white-space: nowrap; }

/* ---------- 航线经营层（第三十一轮）：一张"哪条线在赚钱"的表 ---------- */
.map-routes { margin-top: 10px; }
.mr-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 0 2px 6px; }
.mr-head b { font: 800 12.5px/1.2 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink); }
.mr-sum {
  font: 700 11px/1.4 Consolas, "Courier New", monospace; color: var(--primary-d);
  background: #eaf3ea; border: 1px solid #cfe0cf; border-radius: 999px; padding: 1px 8px;
}
.mr-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; font: 600 10px/1.4 Consolas, "Courier New", monospace; color: var(--muted); }
.mr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 6px; }
.mr-row {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "od km" "n pay" "rate rate";
  gap: 1px 8px; padding: 6px 9px; text-align: left;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
  cursor: pointer; font: 600 10.5px/1.35 Consolas, "Courier New", monospace;
}
.mr-row:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.mr-row .mr-od { grid-area: od; font: 800 12px/1.25 "Segoe UI", "Microsoft YaHei", sans-serif; }
.mr-row .mr-od span { color: var(--muted); padding: 0 2px; }
.mr-row .mr-km { grid-area: km; color: var(--muted); text-align: right; }
.mr-row .mr-n { grid-area: n; color: var(--ink); }
.mr-row .mr-pay { grid-area: pay; text-align: right; color: var(--good); font-weight: 800; }
.mr-row .mr-rate { grid-area: rate; color: var(--muted); }
.mr-row.hot { border-color: #bcd6bc; background: #f6fbf6; }
.mr-row.locked { border-style: dashed; background: #f1f3f2; color: var(--muted); cursor: not-allowed; }
.mr-row.locked .mr-pay { color: var(--muted); }
@media (max-width: 560px) {
  .mr-legend { display: none; }          /* 窄屏让数字说话，图例收起来 */
  .mr-list { grid-template-columns: 1fr 1fr; }
  .mr-row { padding: 6px 7px; }
}

/* ---------- 机场：游戏侧独立建模沙盘 + 独立建设系统（第二十轮） ----------
   模型在 js/diorama.js（纯几何，无贴字）；这一层只管 HUD、浮标、托盘与调度条 */
#screen-airport { position: relative; }
.ap-hud {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line-l); border-radius: 8px;
  padding: 7px 9px; box-shadow: var(--shadow-sm);
}
.ap-back {
  flex: none; width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font: 800 14px/1 Consolas, monospace; cursor: pointer;
}
.ap-back:active { background: #e8ece6; }
.ap-who { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.ap-who b {
  font: 800 15px/1.15 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink); letter-spacing: .6px;
  white-space: nowrap;
}
.ap-stats { font: 700 11px Consolas, "Courier New", monospace; color: var(--primary-d); white-space: nowrap; }
.ap-picker { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.ap-picker button {
  background: #fff; border: 1px solid #98a6ad; color: #47575f; border-radius: 999px;
  padding: 5px 11px; cursor: pointer;
  font: 700 11.5px "Segoe UI", "Microsoft YaHei", sans-serif;
}
.ap-picker button.active { border-color: #176a54; color: #fff; background: var(--primary); }

/* 沙盘画幅：一块"摆在纸面上"的模型台，圆角 + 内高光 + 外投影 */
.ap-dio {
  position: relative; margin-top: 10px; height: clamp(390px, 56vh, 620px);
  border: 1px solid #b3c1b6; border-radius: 10px; overflow: hidden;
  background: radial-gradient(118% 86% at 52% 4%, #f6f8f2 0%, #e9efe6 46%, #dae4da 78%, #cfdbd1 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 22px rgba(28, 53, 70, .16);
}
.ap-dio canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none; cursor: grab;
}
.ap-dio canvas:active { cursor: grabbing; }
.ap-dio-badge {
  position: absolute; left: 10px; bottom: 10px; z-index: 3; pointer-events: none;
  font: 700 10.5px Consolas, "Courier New", monospace; color: #5d6e66;
  background: rgba(244, 246, 241, .84); border: 1px solid rgba(139, 154, 166, .55);
  border-radius: 999px; padding: 4px 10px;
}
/* 建设模式：托盘从底部升起时把画幅压扁，模型仍完整露在卡片上方（不是被盖住） */
body.ap-building .ap-dio { height: clamp(214px, 33vh, 312px); }
body.ap-building .ap-dio-badge { display: none; }
.ap-dio.no3d::after {
  content: "此环境不支持 WebGL · 用 ?view=research 看研究视图";
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 12px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted);
}
/* 右侧动作列（浮在模型上，游戏式 FAB） */
.ap-fabs {
  position: absolute; right: 10px; bottom: 10px; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.ap-fab {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--primary-d); background: var(--primary);
  color: #f4f8f5; font: 800 13px "Segoe UI", "Microsoft YaHei", sans-serif;
  padding: 9px 16px; box-shadow: 0 4px 14px rgba(28, 53, 70, .28);
  transition: transform .08s, background .12s;
}
.ap-fab:active { transform: translateY(1px); background: var(--primary-d); }
.ap-fab .cnt {
  background: rgba(244, 246, 241, .22); border-radius: 999px; padding: 1px 7px;
  font: 700 11px Consolas, monospace;
}
.ap-fab-build.on { background: var(--primary-d); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.ap-fab-ops { background: var(--paper); color: #2c4a46; border-color: var(--line); }
.ap-fab-ops:active { background: #e8ece6; }
.ap-fab-ops.on { background: var(--route); border-color: #2b7b90; color: #fff; }

/* 悬停 / 点选浮标（文字只在这里出现，模型上永远干净） */
.ap-tip {
  position: fixed; z-index: 40; transform: translate(-50%, -118%);
  min-width: 120px; max-width: 236px;
  background: rgba(244, 246, 241, .97); border: 1px solid #7d8f9c; border-radius: 7px;
  padding: 7px 10px; box-shadow: 0 6px 18px rgba(20, 34, 44, .24); pointer-events: none;
}
.ap-tip.hidden { display: none; }
.ap-tip b { display: block; font: 800 12px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink); }
.ap-tip i {
  display: block; font: 700 10.5px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
  font-style: normal; color: var(--muted);
}
.ap-tip .p {
  display: inline-block; margin-top: 3px; font: 800 11px Consolas, "Courier New", monospace;
  color: var(--primary-d);
}
.ap-tip .p.warn { color: var(--bad); }

/* 建设托盘：从底部升起的一块"零件盘"，四个分区横向铺开。
   遮罩刻意压得很淡（.12）：托盘开着的时候，玩家的眼睛应该还在模型上——
   旧值 .30 会把沙盘压暗三成，模型看起来像被关了灯的橱窗。 */
.ap-build-panel {
  position: fixed; inset: 0; z-index: 46;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(20, 34, 44, .12);
}
.ap-build-panel.hidden { display: none; }
.ap-bp-card {
  width: min(98%, 760px); max-height: min(70vh, 560px); display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid #7d8f9c; border-top-left-radius: 14px; border-top-right-radius: 14px;
  box-shadow: 0 -8px 30px rgba(20, 34, 44, .32);
  animation: dioDock .22s ease both;
}
@keyframes dioDock { from { transform: translateY(22px); opacity: .55; } to { transform: none; opacity: 1; } }
.ap-bp-head {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px 9px; flex: none;
  border-bottom: 1px solid var(--line-l);
}
.ap-bp-head h3 { font: 800 14px/1.2 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink); }
.ap-bp-funds { font: 700 12px Consolas, "Courier New", monospace; color: var(--primary-d); margin-left: auto; }
.ap-bp-close {
  background: none; border: 1px solid var(--line); border-radius: 4px; color: var(--muted);
  width: 26px; height: 26px; cursor: pointer; font: 700 12px Consolas, monospace; line-height: 1;
}
.ap-bp-close:hover { color: var(--bad); border-color: var(--bad); }
.ap-bp-body { overflow: auto; padding: 6px 12px 6px; }
.ap-bp-hint {
  margin: 0; padding: 8px 14px 12px; border-top: 1px dashed var(--line-l);
  font: 700 11px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted);
}

/* 分区签：只在窄屏出现（窄屏托盘改成"一屏一区"的横向滑动，见文件末尾 @media 560） */
.ap-zone-pager { display: none; }

.ap-zone { margin: 8px 0 10px; }
.ap-zone header {
  display: flex; align-items: baseline; gap: 8px; padding: 2px 2px 7px;
}
.ap-zone header b { font: 800 12.5px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink); }
.ap-zone header .zd { font: 10.5px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); }
.ap-zone header .zc { margin-left: auto; font: 700 11px Consolas, "Courier New", monospace; color: var(--muted); }
.ap-zone-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 8px;
  overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin;
}

.ap-card {
  display: flex; flex-direction: column; gap: 5px; padding: 9px 10px 10px;
  background: #fff; border: 1px solid #6b7a84; border-radius: 8px;
  box-shadow: 0 1px 4px rgba(28, 53, 70, .12); cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .08s;
}
.ap-card:active { transform: translateY(1px); }
.ap-card.sel { border-color: var(--accent, #d7a24c); box-shadow: 0 0 0 2px rgba(215, 162, 76, .34); }
.ap-card .ico {
  display: flex; align-items: center; justify-content: flex-start; flex: none;
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 5px;
  color: var(--ink); background: var(--paper-2);
}
.ap-card .b-ico { width: 20px; height: 20px; display: block; margin: 0 auto; }
.ap-card .lk-ico { width: 16px; height: 16px; display: block; margin: 0 auto; }
.ap-card .bd { flex: 1; min-width: 0; }
.ap-card .bd b { display: block; font: 800 12px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink); }
.ap-card .bd i { display: block; font: 10.5px/1.45 "Segoe UI", "Microsoft YaHei", sans-serif; font-style: normal; color: var(--muted); }
.ap-card .btn { margin: 0; flex: none; width: 100%; font: 700 11.5px Consolas, "Courier New", monospace; }
.ap-card .tag {
  flex: none; align-self: flex-start; font: 700 10px Consolas, monospace; color: var(--good);
  border: 1px solid var(--good); border-radius: 3px; padding: 2px 7px;
  background: rgba(57, 129, 109, .08);
}
.ap-card.built { border-color: var(--good); background: #f2faf5; }
.ap-card.built .ico { color: var(--good); border-color: rgba(57, 129, 109, .45); }
.ap-card.plan { border-style: dashed; color: var(--muted); box-shadow: none; background: rgba(244, 246, 241, .6); }
.ap-card.plan .ico { color: #9aa8a0; border-color: var(--line-l); }
.ap-card.plan .bd b { color: #7d8f9c; }
/* 研究视图（?view=research）：原沙盘 iframe 一并保留，便于对照血统 */
.ap-sandbox-wrap { margin-top: 10px; height: min(72vh, 720px); border: 1px solid var(--line-l); border-radius: 8px; overflow: hidden; }
.ap-sandbox-wrap.hidden { display: none; }
.ap-sandbox-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 通用矢量图标（BICONS / M3ICONS 单路径，currentColor） */
.b-ico { display: inline-block; vertical-align: -0.15em; }
.t-ico { display: block; }
.lk-ico { width: 16px; height: 16px; display: block; opacity: .85; }

/* ---------- 出港调度条（第十三轮双速制 → 第二十轮折叠成一条，点开才是表单） ---------- */
.ap-ops {
  background: var(--paper); border: 1px solid var(--line-l); border-radius: 10px;
  box-shadow: var(--shadow-sm); margin-top: 10px; overflow: hidden;
}
.ap-ops-toggle {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; background: none; border: 0; cursor: pointer; text-align: left;
}
.ap-ops-toggle b { flex: none; font: 800 12.5px/1.2 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink); }
.ot-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 0 3px rgba(57, 129, 109, .16);
}
.ot-est {
  margin-left: auto; font: 700 11px Consolas, "Courier New", monospace;
  color: var(--primary-d); text-align: right;
}
.ot-caret { flex: none; font: 700 11px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); }
.ap-ops:not(.open) .fl-mode-tabs,
.ap-ops:not(.open) .ap-orders,
.ap-ops:not(.open) .ap-ops-form,
.ap-ops:not(.open) #flightChips { display: none; }
.ap-ops.open {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 78px;
  width: min(96%, 620px); max-height: 72vh; overflow: auto; z-index: 44;
  box-shadow: 0 12px 34px rgba(20, 34, 44, .30);
}
.ap-ops.open .ap-ops-toggle {
  position: sticky; top: 0; z-index: 1; background: var(--paper);
  border-bottom: 1px solid var(--line-l);
}
.ap-ops-form { display: flex; align-items: stretch; flex-direction: column; gap: 7px; margin: 8px 0 4px; padding: 0 13px; }
/* 三运力页签（第十七轮）：航空 / 公路 / 铁路——与机库页签同一套视觉语言 */
.fl-mode-tabs { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; padding: 0 13px; }
.fl-mode-tab {
  font: 800 11.5px/1 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; cursor: pointer;
}
.fl-mode-tab.on { color: #fff; background: var(--primary); border-color: var(--primary-d); box-shadow: 0 1px 4px rgba(28, 53, 70, .25); }
.fl-mode-tab.locked { color: var(--muted); background: #eef1ef; border-style: dashed; }
.fl-mode-tab:active { transform: translateY(1px); }

/* ---- 今日货单（第二十九轮）：需求侧——每天 3 张客户单子，接单才按单结算 ---- */
.ap-orders {
  margin: 8px 13px 2px; padding: 6px 8px 7px; border: 1px solid #ddc98f; border-radius: 9px;
  background: linear-gradient(#fffdf5, #fdf6e5);
}
.ao-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font: 700 11px "Segoe UI", "Microsoft YaHei", sans-serif; color: #7c6130; }
.ao-head b { font: 800 11.5px "Segoe UI", "Microsoft YaHei", sans-serif; color: #58400f; }
.ao-count { font: 800 10.5px Consolas, "Courier New", monospace; background: #f1dca8; color: #58400f; border-radius: 999px; padding: 1px 7px; }
.ao-hint { font-weight: 600; color: #8b7a53; }
.ao-refresh {
  margin-left: auto; font: 700 10.5px "Segoe UI", "Microsoft YaHei", sans-serif; color: #7c6130;
  background: #fff; border: 1px solid #dcc78b; border-radius: 999px; padding: 3px 9px; cursor: pointer;
}
.ao-refresh:active { transform: translateY(1px); }
.ao-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(164px, 1fr)); gap: 6px; margin-top: 5px; }
.ao-card {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid #e3d7b8; border-radius: 7px; padding: 5px 7px 6px;
  font: 600 10.5px/1.35 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted);
}
.ao-card:hover { border-color: #c9a44e; background: #fffdf7; }
.ao-card.on { border-color: #b8892b; background: #fffaf0; box-shadow: 0 0 0 2px rgba(184, 137, 43, .18); }
.ao-card.done { opacity: .5; cursor: default; }
.ao-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.ao-to { font: 800 11.5px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink); }
.ao-pay { font: 800 11.5px Consolas, "Courier New", monospace; color: #8a5b00; }
.ao-sub { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ao-tag { font: 800 9.5px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; background: #f3e6c4; color: #7a5c22; border-radius: 4px; padding: 0 4px; }
.ao-tag.rush { background: #fbe6c8; color: #8a5b00; }
.ao-tag.done { background: #e2e8e4; color: #5c6b62; }
.ao-empty { font: 600 10.5px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); }

/* ---- 第三十二轮：今日货量 · 方式结构（实际结构条 + 模型配比一行） ----
   ＊条用三段 flex 宽度表示 kg 占比；标签只在段够宽（≥22%）时显示，避免 1% 的段里挤出字。
   ＊颜色沿用运力徽标：航空蓝 / 公路棕 / 铁路紫，读者不用重新学一套色。 */
.ap-split {
  margin-top: 7px; padding: 6px 8px 7px; background: #fbf8f1; border: 1px solid #e6dcc6; border-radius: 8px;
}
.ms-head { display: flex; align-items: baseline; gap: 6px; font: 800 10.5px "Segoe UI", "Microsoft YaHei", sans-serif; color: #6b5a33; }
.ms-sum { margin-left: auto; font: 600 10px Consolas, "Courier New", monospace; color: #7a6a45; }
.ms-bar { display: flex; height: 14px; margin-top: 5px; border-radius: 4px; overflow: hidden; background: #efe9db; }
.ms-seg { display: flex; align-items: center; justify-content: center; gap: 3px; overflow: hidden; transition: width .25s ease; }
.ms-seg b { font: 800 9px "Segoe UI", "Microsoft YaHei", sans-serif; color: #fff; }
.ms-seg i { font: 700 9px Consolas, monospace; color: rgba(255,255,255,.9); font-style: normal; }
.ms-seg.mode-air { background: linear-gradient(90deg, #4f9ed6, #7ec8ff); }
.ms-seg.mode-road { background: linear-gradient(90deg, #a8916b, #cbb389); }
.ms-seg.mode-rail { background: linear-gradient(90deg, #8371a6, #b7abd6); }
.ms-model { margin-top: 5px; font: 600 10px/1.45 "Segoe UI", "Microsoft YaHei", sans-serif; color: #7a6a45; }

/* HUD 账本：今日货单营收 / 准点率（第二十九轮） */
.ap-ledger {
  font: 700 10.5px/1 Consolas, "Courier New", monospace; color: #2c5e42; white-space: nowrap;
  background: #eaf6ee; border: 1px solid #cfe6d8; border-radius: 999px; padding: 4px 8px;
}
.ap-ledger.warn { color: #7c6130; background: #fdf3dc; border-color: #ecd9a8; }

/* 落地结算卡（第二十九轮）：准点/超时的即时回报，2.8 秒淡出 */
.ap-settle {
  position: fixed; left: 50%; bottom: 152px; z-index: 70; min-width: 264px; max-width: min(92%, 420px);
  transform: translateX(-50%) translateY(10px); opacity: 0; pointer-events: none;
  background: #fff; border: 1px solid #c9d6cc; border-left: 4px solid #3f8f5f; border-radius: 9px;
  padding: 8px 12px; box-shadow: 0 10px 26px rgba(20, 34, 44, .22);
  font: 600 11.5px/1.55 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink);
  transition: opacity .18s ease, transform .18s ease;
}
.ap-settle.hidden { display: none; }
.ap-settle.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ap-settle.late { border-left-color: #c0504d; }
.ap-settle b { display: block; font: 800 12.5px "Segoe UI", "Microsoft YaHei", sans-serif; }
.ap-settle .as-line { color: var(--muted); }
.ap-settle .as-money { font: 800 12.5px Consolas, "Courier New", monospace; color: #2f7a4f; }
.ap-settle.late .as-money { color: #b4453f; }
.fl-field { display: flex; align-items: center; gap: 6px; font: 700 11px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); }
.fl-field select {
  font: 700 11.5px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 5px;
  padding: 5px 6px; max-width: 190px; min-height: 30px;
}
.fl-launch { color: #fff; background: var(--primary); border: 1px solid var(--primary-d); }
.fl-launch:active { background: var(--primary-d); }
.fl-tail { color: #6a4f2c; border-color: #d3c4a8; background: #fdf6e4; }
.fl-ad { color: var(--route); border-color: #9dbecd; background: #eaf3f7; }
.fl-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 8px; margin-top: 8px; padding: 0 13px 13px; }
.fl-empty { font: 10.5px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); padding: 4px 2px; }
.fl-chip { background: rgba(255, 255, 255, .95); border: 1px solid #6b7a84; border-radius: 6px; padding: 7px 9px; box-shadow: 0 1px 4px rgba(28, 53, 70, .14); }
.fl-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fl-top b { font: 800 12px Consolas, "Courier New", monospace; color: var(--ink); }
.fl-pl { font: 700 11px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--primary-d); }
.fl-cg { font: 10.5px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); }
.fl-pay { margin-left: auto; font: 800 12px Consolas, "Courier New", monospace; color: var(--good); }
.fl-bar { height: 5px; border-radius: 3px; background: #e2e8e4; border: 1px solid var(--line-l); margin: 5px 0 3px; overflow: hidden; }
.fl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--route)); }
.fl-sub { font: 700 10px Consolas, "Courier New", monospace; color: var(--muted); }
/* 在途芯片的运力徽标（航空/公路/铁路各一色，与页签呼应） */
.fl-md { font: 800 10px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); border: 1px solid var(--line-l); border-radius: 999px; padding: 2px 7px; }
.fl-chip.mode-road .fl-md { color: #6a4f2c; border-color: #d3c4a8; background: #fdf6e4; }
.fl-chip.mode-rail .fl-md { color: #5a4d7a; border-color: #b7abd6; background: #f0edf7; }
.fl-chip.mode-road .fl-bar i { background: linear-gradient(90deg, #b59a6a, #d3c4a8); }
.fl-chip.mode-rail .fl-bar i { background: linear-gradient(90deg, #9b8ab8, #b7abd6); }

/* 顶栏时流芯片：平时墨绿，广告加倍时航路蓝 + 呼吸 */
.chip.flow { cursor: pointer; color: #2c6e63; border-color: #b5c8c0; }
.chip.flow:active { transform: translateY(1px); }
.chip.flow.boost { color: var(--route); border-color: #9dbecd; background: #eaf3f7; }
.chip.flow.pulse { animation: flowPulse .45s ease-out; }
@keyframes flowPulse { 30% { transform: translateY(-2px) scale(1.06); background: #e8f3ee; } }

/* 沙盘 iframe：整页原样嵌入（内部样式由 sandbox/style.css 等自带） */
#apSandboxWrap {
  height: clamp(560px, 82vh, 1100px);
  height: clamp(560px, 82dvh, 1100px);   /* iOS 地址栏伸缩时 dvh 才是真实视口 */
  border: 1px solid #8b9aa6; border-radius: 10px; overflow: hidden;
  background: #e9f2f1; box-shadow: 0 8px 20px rgba(35, 70, 110, .2);
  -webkit-overflow-scrolling: touch;
}
#apSandbox { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* ---------- 机库展厅（三运力：页签 + 卡片网格两级容器） ---------- */
.hg-wrap { display: block; }
.hg-tabs { display: flex; gap: 6px; margin: 2px 0 12px; flex-wrap: wrap; }
.hg-tab {
  font: 800 12px/1 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 16px; cursor: pointer;
}
.hg-tab.on { color: #fff; background: var(--primary); border-color: var(--primary-d); box-shadow: 0 1px 4px rgba(28, 53, 70, .25); }
.hg-tab.locked { color: var(--muted); background: #eef1ef; border-style: dashed; }
.hg-tab:active { transform: translateY(1px); }
.plane-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.plane-card {
  position: relative; background: var(--paper); border: 1px solid var(--line-l);
  border-radius: 8px; padding: 14px 12px 12px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.plane-card .stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }
.plane-card h4 { font-size: 14.5px; margin-bottom: 5px; }
.plane-card .specs { font-size: 11.5px; color: #47575f; line-height: 1.7; font-variant-numeric: tabular-nums; }
.plane-card .specs b { color: #2c6076; }
.plane-card .own { margin: 6px 0; font-size: 12px; font-weight: 800; color: #39816d; }
.plane-card .desc { font-size: 11px; color: var(--muted); line-height: 1.5; margin-bottom: 8px; }
.plane-card .acts { text-align: center; }
.plane-card.locked { background: #eef1ec; }
.plane-card.locked .own { color: #8494a4; }

/* ---------- 关卡：工程图底 + 航图站点符号 ---------- */
#levelGrid {
  position: relative; overflow-y: auto; overflow-x: hidden;
  height: clamp(400px, calc(100vh - 330px), 660px);
  height: clamp(400px, calc(100dvh - 330px), 660px);
  border-radius: 8px; border: 1px solid #8b9aa6;
  background:
    repeating-linear-gradient(0deg, rgba(28, 53, 70, .06) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(28, 53, 70, .06) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, #eef2ec 0%, #e4eae2 100%);
  box-shadow: var(--shadow);
  -webkit-overflow-scrolling: touch;
}
#levelGrid .lv-space { display: block; }
/* 关卡批次翻页（第十七轮无尽环线）：上一批 / 第 X-Y 关 / 下一批 */
.lv-pages { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; white-space: nowrap; }
.lv-pages b { font: 800 11.5px Consolas, "Courier New", monospace; color: var(--primary-d); }
#levelGrid svg.lv-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.chapter-sep {
  position: absolute; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: #6d7d64; color: #f4f6f1;
  border: 1px solid #56604f; border-radius: 4px; padding: 6px 14px;
  font-size: 12px; font-weight: 700;
  box-shadow: var(--shadow-sm); cursor: default;
}
.chapter-sep.locked { background: #a7b2a6; border-color: #8b968b; }
.chapter-sep .mech { font-size: 10.5px; font-weight: 700; opacity: .85; }

.lv {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  width: 60px; height: 60px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #fbfcfa; color: var(--ink);
  border: 2px solid #596d8d;
  box-shadow: 0 2px 6px rgba(28, 53, 70, .20);
  transition: transform .12s;
}
.lv .n { font: 700 19px Consolas, "Courier New", monospace; font-variant-numeric: tabular-nums; }
/* 限时关角标（第二十二轮）：关卡链上先亮明"这关有倒计时" */
.lv .tm {
  position: absolute; top: -5px; right: -5px; z-index: 4;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1;
  background: #f6ece8; color: #a0523c; border: 1.5px solid #c0863e;
  box-shadow: 0 1px 3px rgba(28, 53, 70, .18);
}
.lv:active { transform: translate(-50%, -50%) scale(.92); }
.lv.done { background: #39816d; border-color: #2c6655; color: #fff; }
.lv.done .st { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  font: 700 11px Consolas, "Courier New", monospace; letter-spacing: 1px; color: #2c6655; white-space: nowrap; }
.lv.current {
  background: #aa7850; border-color: #8a6038; color: #fff;
  animation: lvPulse 1.6s ease-in-out infinite;
}
@keyframes lvPulse { 0%, 100% { box-shadow: 0 2px 6px rgba(28, 53, 70, .20), 0 0 0 0 rgba(170, 120, 80, .50); } 50% { box-shadow: 0 2px 6px rgba(28, 53, 70, .20), 0 0 0 12px rgba(170, 120, 80, 0); } }
.lv.current .marker {
  position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  font-size: 16px; line-height: 1; color: #aa7850;
  animation: markerBob 1.2s ease-in-out infinite alternate;
}
@keyframes markerBob { to { transform: translate(-50%, -6px); } }
.lv.boss { width: 74px; height: 74px; background: #a0523c; border-color: #7e4030; }
.lv.boss .n { font-size: 22px; }
.lv.boss::before { content: "BOSS"; position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  font: 700 9px Consolas, "Courier New", monospace; letter-spacing: 1px;
  background: #1c3546; color: #e8ecef; padding: 2px 6px; border-radius: 3px; }
.lv.lock {
  background: #cfd6cc; border-color: #a8b3a8; color: #7d8a82;
  box-shadow: 0 1px 4px rgba(28, 53, 70, .12);
}
.lv.lock .foglv {
  position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 246, 241, .92) 30%, rgba(244, 246, 241, .70) 55%, transparent 72%);
  filter: blur(1px); animation: fogBob 3.2s ease-in-out infinite alternate;
}
@keyframes fogBob { to { transform: translateY(-4px); } }

/* ---------- 商店 ---------- */
.store-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .store-cols { grid-template-columns: 1fr; } }
.store-col { background: var(--paper); border: 1px solid var(--line-l); border-radius: 8px; padding: 12px; box-shadow: var(--shadow-sm); }
.store-col h3 { font-size: 14px; margin-bottom: 9px; }
.store-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 8px;
  background: var(--paper-2); border: 1px solid #d8ddd6;
  border-radius: 6px; text-align: left;
}
.store-item .info { flex: 1; }
.store-item .nm { font-size: 13px; font-weight: 700; }
.store-item .ds { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.store-col:last-child .store-item { background: #eef3ef; border-color: #ccdcd2; }
.store-item .price { font-size: 13px; font-weight: 800; color: #8a6a2c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.store-item .price.sim { color: #8494a4; }

/* ---------- 对局屏 ---------- */
body.playing #nav, body.playing #warehouseBar { display: none; }
body.playing #app { padding-bottom: 14px; }
.play-screen.active { display: flex; flex-direction: column; gap: 10px; min-height: calc(100vh - 130px); min-height: calc(100dvh - 130px); }
.play-top { display: flex; align-items: center; gap: 10px; }
.play-title {
  flex: 1; text-align: center; font-weight: 700; font-size: 14px; letter-spacing: 1px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-l); border-radius: 5px; padding: 7px 10px;
  box-shadow: var(--shadow-sm);
}
.play-moves {
  min-width: 84px; text-align: center; font-weight: 800; font-size: 13px; color: #8a6038;
  background: var(--paper); border: 1.5px solid var(--earth); border-radius: 5px; padding: 6px 12px;
  font-variant-numeric: tabular-nums; box-shadow: var(--shadow-sm);
}
.play-moves.warn { color: #a0523c; border-color: #a0523c; background: #f6ece8; animation: warnShake .5s ease-in-out infinite; }
@keyframes warnShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg); } 75% { transform: rotate(2.5deg); } }

/* 星级进度（第二十二轮）：三枚小星一直亮着"现在收工能拿几星"，掉档闪一下 */
.play-stars { display: flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 5px;
  background: var(--paper); border: 1px solid var(--line-l); box-shadow: var(--shadow-sm); cursor: help; }
.play-stars i {
  width: 11px; height: 11px; display: block; border-radius: 2px;
  background: #dfe4dc; box-shadow: inset 0 0 0 1px rgba(28, 53, 70, .10);
  transition: background .22s, transform .22s;
}
.play-stars i.on { background: linear-gradient(#f0cf82, #d7a24c); box-shadow: inset 0 0 0 1px rgba(160, 110, 30, .28); }
.play-stars.lost { animation: starLost .42s ease-out; }
@keyframes starLost { 0% { transform: scale(1); } 35% { transform: scale(1.18); border-color: #c0863e; } 100% { transform: scale(1); } }
@media (max-width: 560px) {
  .play-stars { padding: 4px 6px; gap: 2px; }
  .play-stars i { width: 9px; height: 9px; }
}

/* 每日航线卡（第二十四轮）：关卡页头部的一条"今日班次"，不抢地图的戏 */
.daily-card { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; padding: 9px 12px;
  border: 1px solid rgba(215, 162, 76, .38); border-radius: 10px;
  background: linear-gradient(100deg, rgba(215, 162, 76, .12), rgba(215, 162, 76, .03)); }
.daily-card .dc-badge { flex: 0 0 auto; font-size: 11px; letter-spacing: .04em; padding: 3px 7px; border-radius: 6px;
  background: rgba(215, 162, 76, .9); color: #2a2418; font-weight: 700; }
.daily-card .dc-main { flex: 1 1 auto; min-width: 0; }
.daily-card .dc-title { font-size: 13px; font-weight: 600; color: #2c3a42; }
.daily-card .dc-sub { font-size: 11.5px; color: #6a7a82; margin-top: 2px; }
.daily-card .dc-sub b { color: #a8762a; }
.daily-card .dc-cd { font-variant-numeric: tabular-nums; color: #6a7a82; }
.daily-card.done { border-color: rgba(120, 150, 130, .42); background: linear-gradient(100deg, rgba(96, 140, 116, .12), rgba(96, 140, 116, .03)); }
.daily-card.done .dc-badge { background: rgba(96, 140, 116, .92); color: #f2f7f3; }
.daily-card .btn { flex: 0 0 auto; min-height: 30px; }
@media (max-width: 560px) {
  .daily-card { flex-wrap: wrap; gap: 6px 8px; padding: 8px 10px; }
  .daily-card .dc-main { flex: 1 1 100%; order: 2; }
  .daily-card .dc-badge { order: 1; }
  .daily-card .btn { order: 3; width: 100%; min-height: 38px; }   /* 窄屏按钮整行，落指面积 38px */
}
/* 新手分层引导的"照亮"（第二十三轮）：只加一圈呼吸金边，不改布局、不挡点击 */
.tip { animation: tipGlow 1.05s ease-in-out infinite alternate; }
@keyframes tipGlow {
  from { box-shadow: 0 0 0 0 rgba(215, 162, 76, 0); outline: 2px solid rgba(215, 162, 76, .35); outline-offset: 1px; }
  to   { box-shadow: 0 0 0 6px rgba(215, 162, 76, .18); outline: 2px solid rgba(215, 162, 76, .85); outline-offset: 3px; }
}
.play-tools { border-radius: 8px; }

.play-goals { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.goal {
  display: flex; align-items: center; gap: 7px;
  background: #fff; border-radius: 5px; padding: 5px 12px 5px 7px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line-l);
  cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s;
}
.goal:hover, .goal:focus-visible { border-color: #d7a24c; box-shadow: 0 2px 8px rgba(215, 162, 76, .28); }
.goal:active { transform: translateY(1px); }
.goal .g-ico { font-size: 19px; line-height: 1; }
.goal .g-svg { width: 21px; height: 21px; display: block; flex: none; }
.goal .g-num { font-size: 13px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.goal .g-bar { width: 44px; height: 6px; border-radius: 3px; background: #dfe4dc; overflow: hidden; }
.goal .g-bar i { display: block; height: 100%; border-radius: 3px; background: #39816d; transition: width .3s; }
.goal.done { border-color: #8fb8a5; background: #eff5ef; }
.goal.done .g-bar i { background: #2c6e63; }

.play-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
#boardCv { touch-action: none; border-radius: 10px; box-shadow: 0 6px 18px rgba(28, 53, 70, .22); }

.play-tools { display: flex; gap: 10px; justify-content: center; }
.tool {
  position: relative; width: 60px; height: 60px; border-radius: 6px; border: 1.5px solid var(--line);
  cursor: pointer; background: var(--paper);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: transform .1s, border-color .1s;
}
.tool .t-ico { width: 26px; height: 26px; color: var(--ink); }
.tool b { font-size: 10.5px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.tool:active { transform: translateY(1px); }
.tool:disabled { background: #e4e8e2; border-color: #c3ccc4; box-shadow: none; cursor: not-allowed; }
.tool:disabled .t-ico { color: #a4ada7; }
.tool.on { background: #dfeaf0; border-color: var(--route); box-shadow: 0 0 0 3px rgba(53, 138, 162, .22); }
.tool.on .t-ico { color: #2c6076; }
.tool b.cnt {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 18px; border-radius: 9px;
  background: #a0523c; color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
  border: 1.5px solid #f4f6f1;
}
.tool .cnt-in { font-size: 11px; color: var(--muted); font-weight: 800; }

/* ---------- 结算卡 ---------- */
.result-card {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28, 53, 70, .5); animation: fadeIn .2s ease;
}
.result-card .rc {
  width: min(88%, 340px); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 20px 18px 14px;
  text-align: center; box-shadow: 0 14px 34px rgba(28, 53, 70, .32);
  animation: rcPop .3s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes rcPop { from { transform: scale(.85); opacity: 0; } }
.result-card .r-title { font-size: 21px; font-weight: 800; color: #2c6e63; letter-spacing: 1px; }
.result-card .r-title.lose { color: #a0523c; }
.result-card .r-stars { font-size: 34px; margin: 6px 0 2px; letter-spacing: 3px; color: #aa7850; }
.result-card .r-stars .off { color: #c3cec4; }
.result-card .r-stars .on { animation: starPop .5s cubic-bezier(.34, 1.4, .64, 1) both; }
.result-card .r-stars .on:nth-child(2) { animation-delay: .15s; }
.result-card .r-stars .on:nth-child(3) { animation-delay: .3s; }
@keyframes starPop { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.35) rotate(10deg); } 100% { transform: scale(1); opacity: 1; } }
.result-card .r-rewards { font-size: 14px; font-weight: 700; color: #8a6a2c; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.result-card .r-coins { font-size: 18px; }
.result-card .r-rewards .r-tip { animation: tipIn .3s ease both; }
.result-card .r-rewards .r-tip:nth-of-type(2) { animation-delay: .1s; }
.result-card .r-rewards .r-tip:nth-of-type(3) { animation-delay: .2s; }
@keyframes tipIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------- 结算演出（第十四轮）：胜利迸发 + 金币飞行 ---------- */
.win-burst { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; border-radius: 8px; }
.win-burst .flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(244, 246, 241, .55), rgba(244, 246, 241, 0) 70%);
  animation: burstFlash .5s ease both;
}
@keyframes burstFlash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.win-burst i {
  position: absolute; top: var(--y0); left: var(--x);
  width: var(--w); height: calc(var(--w) * .42);
  border-radius: 2px; opacity: .95;
  animation: confettiFall .9s cubic-bezier(.2, .6, .4, 1) var(--d) both;
}
@keyframes confettiFall {
  0% { transform: translate(0, -30px) rotate(-14deg); }
  100% { transform: translate(var(--dx), 460px) rotate(var(--rot)); opacity: 0; }
}
.fly-coin {
  position: fixed; z-index: 80; width: 11px; height: 11px; border-radius: 50%;
  background: #d9a62e; border: 1.5px solid #8a6a2c;
  box-shadow: 0 1px 0 rgba(28, 40, 46, .3);
  pointer-events: none;
  animation: coinFly .7s cubic-bezier(.3, .1, .6, 1) both;
}
@keyframes coinFly {
  0% { transform: translate(0, 0) scale(.85); opacity: .9; }
  15% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; }
}

/* ---------- 对局 · 连消横幅 ---------- */
#comboFx {
  position: absolute; left: 0; right: 0; top: 40%;
  text-align: center; pointer-events: none; z-index: 6;
  font: 800 26px Consolas, "Courier New", monospace; color: #2c6076;
  text-shadow: 0 1px 0 rgba(244, 246, 241, .9);
  opacity: 0;
}
#comboFx.show { animation: comboPop .85s ease both; }
@keyframes comboPop {
  0%   { opacity: 0; transform: scale(.4) translateY(12px); }
  16%  { opacity: 1; transform: scale(1.12); }
  28%  { transform: scale(1); }
  68%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1) translateY(-16px); }
}

/* ---------- 玩法指南弹层 ---------- */
.help-ov {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28, 53, 70, .55); animation: fadeIn .2s ease;
}
.help-ov .hc {
  width: min(92%, 400px); max-height: 82vh; overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 20px 16px 14px;
  box-shadow: 0 14px 34px rgba(28, 53, 70, .32);
  animation: rcPop .3s cubic-bezier(.2, .9, .3, 1.1);
}
.help-ov .h-title { font-size: 19px; font-weight: 800; color: #2c6e63; letter-spacing: 1px; margin-bottom: 10px; }
.help-ov .loop { font-size: 13px; font-weight: 700; color: #2c6e63; line-height: 1.8; margin: 4px 0 8px; }
.help-ov h5 { margin: 12px 0 4px; font-size: 14px; color: #8a6038; }
.help-ov p, .help-ov li { font-size: 13px; line-height: 1.65; color: var(--ink); margin: 0; }
.help-ov ol { padding-left: 20px; margin: 2px 0; }
.help-ov .btn { margin-top: 14px; }

/* ---------- 关于 / 素材致谢弹层（第三十七轮） ---------- */
.about-ov .hc { width: min(92%, 460px); }
.about-ov .about-sub { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 2px 0 6px; }
.about-ov .h-title { margin-bottom: 4px; }
.about-ov .about-kv { display: grid; grid-template-columns: 72px 1fr; gap: 5px 9px; margin: 4px 0 2px; }
.about-ov .about-kv b { font-size: 12px; font-weight: 700; color: #8a6038; line-height: 1.5; }
.about-ov .about-kv span { font-size: 12.5px; line-height: 1.55; color: var(--ink); }
.about-ov .about-credits { margin: 2px 0 4px; padding-left: 18px; }
.about-ov .about-credits li { font-size: 12px; line-height: 1.65; color: var(--ink); }
.about-ov .about-mark { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.about-ov .about-mark span {
  font-size: 11px; color: #2c6e63; background: #f1f8f5;
  border: 1px solid #cfe3db; border-radius: 999px; padding: 2px 9px;
}
.about-ov code { font-size: 11.5px; background: #f4f1ea; border-radius: 3px; padding: 0 3px; }
.result-card .r-tip { font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
/* 第三十五轮：结算卡的「货场入库」——不是金币，是一条条真实货票（kg/m³/票面） */
.result-card .r-drop {
  margin: 2px auto 12px; padding: 8px 10px; max-width: 320px; text-align: left;
  background: #f6f1e6; border: 1px dashed #c9b48c; border-radius: 10px;
}
.result-card .r-drop b { display: block; font-size: 12.5px; color: #7a5d3a; margin-bottom: 4px; }
.result-card .rd-lot {
  display: block; font-size: 12px; color: var(--ink); line-height: 1.6;
  padding-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.result-card .rd-tip { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.result-card .rd-warn { color: #b1481f; }
/* 第四十九轮：没掉货也说话——虚线框留白太多会像"结算漏了"，改成实底浅灰 */
.result-card .r-drop.r-miss { background: #f4f4f2; border-style: solid; border-color: #dcdcd6; }
.result-card .r-drop.r-miss b { color: #6d6a63; }
.result-card .r-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- 窄屏 ---------- */
@media (max-width: 560px) {
  #app { padding: 10px 10px 84px; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .screen-head { padding: 10px 13px; }
  #apSandboxWrap { height: clamp(480px, 70vh, 900px); height: clamp(480px, 70dvh, 900px); }
  .ap-build-btn { margin-left: auto; padding: 5px 11px; }
  .ap-bp-card { max-height: 92vh; max-height: 92dvh; }
  .ap-ops-form { gap: 6px; }
  /* 第三十一轮：390 宽实测——调度条内容 830px 高于可视 606px，"出港"会掉到折叠区外。
     ① 放开一点高度；② 把出港那一行吸在滚动区底部，滚动时永远够得着。 */
  .ap-ops.open { max-height: 80vh; max-height: 80dvh; }
  .ap-ops-form .fl-go {
    position: sticky; bottom: 0; z-index: 2;
    padding: 6px 0 5px; margin-top: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 34%);
  }
  .fl-hub .fh-btn { min-height: 30px; padding: 5px 10px; }
  .fl-field select { max-width: 150px; }
  .fl-chips { grid-template-columns: 1fr; }
  #flEstimate { flex: 1 1 100%; text-align: left; }
  /* 托盘分区：窄屏不再纵向摞四块（旧版一列排下来，越滑越长），改成一屏一区、横滑换区 */
  .ap-bp-body {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 8px; padding: 2px 12px 4px;
    scrollbar-width: none;
  }
  .ap-bp-body::-webkit-scrollbar { display: none; }
  .ap-zone { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; margin: 0; }
  .ap-zone header { padding: 0 2px 6px; }
  .ap-zone-grid {
    grid-auto-flow: row; grid-template-columns: 1fr 1fr;
    grid-auto-columns: auto; gap: 7px;
    overflow: visible; padding-bottom: 0;
  }
  .ap-zone-pager {
    display: flex; flex: none; gap: 6px; padding: 9px 12px 3px;
    overflow-x: auto; scrollbar-width: none;
  }
  .ap-zone-pager::-webkit-scrollbar { display: none; }
  .ap-zone-pager .zp {
    flex: none; padding: 5px 11px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line); background: rgba(255, 255, 255, .72);
    color: var(--muted); font: 700 11.5px "Segoe UI", "Microsoft YaHei", sans-serif;
    transition: background .14s, color .14s, border-color .14s;
  }
  .ap-zone-pager .zp.on {
    background: var(--accent, #d7a24c); border-color: var(--accent, #d7a24c);
    color: #fff; box-shadow: 0 1px 5px rgba(215, 162, 76, .4);
  }
  .ap-card .ico { width: 34px; height: 34px; }
  .tool { width: 54px; height: 54px; }
  .tool .t-ico { width: 23px; height: 23px; }
  .play-moves { min-width: 74px; }
  /* 触摸目标：芯片与面板购买键加大到 ≥34px 高（指腹可按） */
  .chip { padding: 5px 11px; }
  .ap-card .btn { min-height: 34px; padding: 6px 13px; }
  .ap-ops-form .btn { min-height: 34px; }
  .fl-field select { min-height: 34px; }
  #nav .tab { padding: 9px 2px 8px; }
  /* 关卡蛇形路径（窄屏）：节点缩到 54px、BOSS 64px，与 main.js 的 NARROW 口径一一对应；
     BOSS 74px 在 360 宽上会压到邻列、贴边框（实测越界 10 个节点） */
  .lv { width: 54px; height: 54px; }
  .lv .n { font-size: 17px; }
  .lv.boss { width: 64px; height: 64px; }
  .lv.boss .n { font-size: 19px; }
  .lv.done .st { font-size: 10px; bottom: -17px; }
  .chapter-sep { font-size: 11px; padding: 5px 10px; gap: 6px; }
  .chapter-sep .mech { font-size: 9.5px; }
}

/* ============================================================
   第十九轮：片头动画 + 功能坞 + 功能浮层（一个界面装下所有功能）
   ============================================================ */

/* ---------- 片头（标题 / 航线描绘 / 点击进入） ---------- */
.intro {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 28%, #f8faf5, #dfe7e0 58%, #ccd8d0);
  color: var(--ink); overflow: hidden; cursor: pointer;
  transition: opacity .5s ease, visibility .5s ease;
}
.intro.out { opacity: 0; visibility: hidden; }
.intro-grid {
  position: absolute; inset: -12% -12% -6%;
  background-image:
    linear-gradient(rgba(44, 74, 70, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 74, 70, .07) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(620px) rotateX(56deg) translateY(-4%);
  mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
  animation: ivGrid 6s linear infinite;
}
@keyframes ivGrid { to { background-position: 0 44px, 44px 0; } }
.intro-inner { position: relative; text-align: center; padding: 0 22px; }
.intro-kicker {
  font: 700 10.5px/1 Consolas, "Courier New", monospace; letter-spacing: 3px; color: var(--muted);
  opacity: 0; animation: ivIn .7s .1s ease forwards;
}
.intro-title {
  font-size: clamp(38px, 9vw, 60px); font-weight: 800; color: var(--ink);
  letter-spacing: clamp(6px, 2.2vw, 16px); margin: 10px 0 2px; text-indent: clamp(6px, 2.2vw, 16px);
  opacity: 0; transform: translateY(16px);
  animation: ivRise .9s .16s cubic-bezier(.2, .8, .2, 1) forwards;
}
.intro-sub {
  font: 700 12.5px "Segoe UI", "Microsoft YaHei", sans-serif; color: #47575f; letter-spacing: 1px;
  opacity: 0; animation: ivIn .7s .5s ease forwards;
}
.intro-route { width: min(88vw, 500px); height: auto; margin: 16px 0 2px; overflow: visible; }
.ir-line {
  fill: none; stroke: var(--route); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 620; stroke-dashoffset: 620; animation: irDraw 2.1s .35s ease forwards;
}
@keyframes irDraw { to { stroke-dashoffset: 0; } }
.ir-dots circle {
  fill: #fff; stroke: var(--route); stroke-width: 2.2;
  opacity: 0; animation: ivPop .42s ease forwards;
}
.ir-dots circle:nth-child(1) { animation-delay: .55s; }
.ir-dots circle:nth-child(2) { animation-delay: .90s; }
.ir-dots circle:nth-child(3) { animation-delay: 1.25s; }
.ir-dots circle:nth-child(4) { animation-delay: 1.60s; }
.ir-dots circle:nth-child(5) { animation-delay: 1.95s; }
.ir-dots circle:nth-child(6) { animation-delay: 2.30s; }
@keyframes ivPop { from { opacity: 0; transform: scale(.3); transform-origin: center; } to { opacity: 1; transform: none; } }
.ir-plane { fill: var(--earth); filter: drop-shadow(0 1px 2px rgba(28, 53, 70, .35)); }
.intro-legend {
  font: 700 11px/1.4 Consolas, "Courier New", monospace; color: #5c6b64;
  opacity: 0; animation: ivIn .6s 2.3s ease forwards;
}
.intro-go {
  margin-top: 20px; padding: 10px 30px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .78); color: var(--primary-d);
  border: 1.5px solid var(--primary); letter-spacing: 2px;
  font: 800 13px "Segoe UI", "Microsoft YaHei", sans-serif;
  opacity: 0; animation: ivIn .6s 2.7s ease forwards, ivPulse 1.9s 3.2s ease-in-out infinite;
}
@keyframes ivIn { to { opacity: 1; } }
@keyframes ivRise { to { opacity: 1; transform: none; } }
@keyframes ivPulse { 50% { box-shadow: 0 0 0 8px rgba(44, 110, 99, .12); background: #fff; } }
/* 片头按住不自动关（截图用）：?intro=hold */
.intro.hold .intro-go { animation: ivIn .6s 2.7s ease forwards; }
/* 兜底静态态：CSS 动画不推进的环境（无头虚拟时钟 / 强制减弱动效）
 * 或 ?intro=static —— 直接把片头定格在收尾画面，不会留下半透明的空白层 */
.intro.static .intro-kicker,
.intro.static .intro-title,
.intro.static .intro-sub,
.intro.static .intro-legend,
.intro.static .intro-go { animation: none; opacity: 1; transform: none; }
.intro.static .ir-line { animation: none; stroke-dashoffset: 0; }
.intro.static .ir-dots circle { animation: none; opacity: 1; transform: none; }
.intro.static .ir-plane { display: none; }

/* ---------- 功能坞：只在机场页出现（地图页与对局页都不占位） ---------- */
#nav { display: none; }
body.hub:not(.playing) #nav { display: flex; }
body.playing #nav { display: none; }

/* ---------- 功能浮层：接单 / 机库 / 商店 浮在机场沙盘之上 ---------- */
.screen.sheet.active {
  display: block; position: fixed; inset: 22px 0 0; z-index: 45;
  border-radius: 16px 16px 0 0;
  padding: 12px 14px calc(26px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #f8faf5, #eef2ec 62%, #e6ece5);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-shadow: 0 -12px 44px rgba(20, 34, 44, .35);
  animation: sheetIn .26s cubic-bezier(.2, .8, .2, 1);
}
@keyframes sheetIn { from { transform: translateY(26px); opacity: .35; } to { transform: none; opacity: 1; } }
.screen.sheet .screen-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  position: sticky; top: 0; z-index: 2;
  backdrop-filter: blur(4px);
}
.screen.sheet .screen-head h2 { margin-right: auto; }
.sheet-close { order: 9; margin-left: auto; }
.ap-back { order: -1; margin-right: 2px; }

@media (max-width: 560px) {
  .intro-route { width: 94vw; }
  .intro-title { letter-spacing: 8px; text-indent: 8px; }
  .screen.sheet.active { inset: 10px 0 0; padding: 10px 10px calc(20px + env(safe-area-inset-bottom)); }
  /* 机场：小屏把画幅压低、HUD 收紧、托盘卡片变窄（模型是同一块，只是取景更近） */
  .ap-dio { height: clamp(300px, 46vh, 480px); }
  body.ap-building .ap-dio { height: clamp(178px, 25vh, 236px); }
  body.ap-building .ap-fab { padding: 7px 11px; font-size: 11.5px; }
  .ap-hud { padding: 6px 8px; gap: 6px; }
  .ap-who b { font-size: 13.5px; }
  .ap-stats { font-size: 10px; }
  .ap-picker button { padding: 4px 9px; font-size: 11px; }
  .ap-fab { padding: 8px 13px; font-size: 12px; }
  .ap-dio-badge { font-size: 9.5px; padding: 3px 8px; }
  .ap-bp-card { max-height: 78vh; }
  .ap-tip { max-width: 200px; }
  .ot-est { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-grid { animation: none; }
  .ir-line { animation-duration: .01s; }
  .ir-dots circle, .intro-go, .intro-title, .intro-kicker, .intro-sub, .intro-legend { animation-delay: 0s !important; animation-duration: .01s !important; }
}

/* ================= 无障碍（第二十五轮） =================
 * 三件事：屏幕阅读器可用的 live region、键盘焦点不靠"浏览器虚线框"（焦点画在画布内）、
 * 以及"减弱动效"的统一开闸（系统偏好与游戏内设置共用一个类名 body.rm）。 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 焦点框由画布内的键盘光标框承担（四角角标 + 描边），不再叠一层浏览器虚线 */
#boardCv:focus, #boardCv:focus-visible { outline: none; }

/* 设置行：整行是一个开关按钮（不是 checkbox + label 的错位组合），触摸高度 40px */
.opt-rows { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; }
.opt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 40px; padding: 8px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.opt-row:hover { border-color: #9db3ab; }
.opt-row:focus-visible { outline: 2px solid #2c6e63; outline-offset: 2px; }
.opt-row .opt-k { display: flex; flex-direction: column; gap: 2px; font-weight: 700; }
.opt-row .opt-t { font-weight: 400; font-size: 11px; color: var(--muted); }
.opt-row .opt-v {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px;
}
.opt-row.on .opt-v { color: #fff; background: #2c6e63; border-color: #2c6e63; }
.opt-row.on { border-color: #9dc3b8; background: #f4faf7; }

/* 减弱动效：一次收掉所有装饰动画（棋盘内的震屏/粒子由 JS 侧关，见 main.js / match3.js） */
body.rm *, body.rm *::before, body.rm *::after {
  animation-duration: .001s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001s !important;
  transition-delay: 0s !important;
}
body.rm .intro-grid { animation: none; }
@media (max-width: 560px) {
  .opt-row { min-height: 44px; }        /* 窄屏触摸目标再放大一点 */
}

/* ===========================================================================
   第二十八轮 · 机场屏"看得懂的玩法"
   ① 出港调度拆成 ①②③ 三段（飞哪里 / 带什么货 / 怎么走），每段一张卡
   ② 新手教程浮层：聚光灯挖洞（box-shadow 9999px）把注意力照到该点的地方
   =========================================================================== */
.fl-step { border: 1px solid var(--line-l); border-radius: 8px; background: #fbfcfb; padding: 7px 9px 8px; }
.fl-step.on { border-color: #8fb8c9; background: #f2f9fb; box-shadow: 0 0 0 2px rgba(53, 125, 148, .16); }
.fs-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px; flex-wrap: wrap; }
.fs-no {
  flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); color: #fff;
  font: 800 10.5px/16px "Segoe UI", "Microsoft YaHei", sans-serif; text-align: center;
}
.fs-head b { font: 800 12px/1.2 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink); }
.fs-hint { font: 700 10px/1.2 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); }
.fs-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 6px 8px; align-items: end; }
/* 三段卡里字段改成"标签在上、控件满宽"，三个下拉才不会挤成一条 */
.fl-step .fl-field { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.fl-step .fl-field select { max-width: none; width: 100%; }
.fs-fact {
  grid-column: 1 / -1;
  margin: 3px 0 0; font: 700 10.5px/1.55 "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--muted);
}
.fs-fact.warn { color: var(--bad); }
.fs-fact.ok { color: var(--good); }
.fl-transit { display: flex; gap: 6px; flex-wrap: wrap; grid-column: 1 / -1; }
.fl-tr {
  display: flex; flex-direction: column; gap: 1px; flex: 1 1 0; min-width: 82px; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink);
  cursor: pointer; text-align: left;
}
.fl-tr b { font: 800 11.5px/1.25 "Segoe UI", "Microsoft YaHei", sans-serif; }
.fl-tr i { font: 700 9.5px/1.2 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); font-style: normal; }
.fl-tr.on { border-color: var(--primary-d); background: var(--primary); color: #fff; box-shadow: 0 1px 4px rgba(28, 53, 70, .22); }
.fl-tr.on i { color: rgba(255, 255, 255, .86); }
.fl-tr.locked { border-style: dashed; background: #eef1ef; color: var(--muted); cursor: not-allowed; }
.fl-go { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.fl-go .fl-launch { padding: 9px 22px; font-size: 12.5px; }

/* 第三十轮：中转站升级条（只在选了经停时出现） */
.fl-hub {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 8px; border: 1px dashed var(--line); border-radius: 7px; background: #fbfcfb;
}
.fl-hub.hidden { display: none; }
.fl-hub .fh-txt { font: 700 10.5px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); }
.fl-hub .fh-txt b { color: var(--ink); }
.fl-hub .fh-btn {
  padding: 3px 9px; border: 1px solid var(--primary-d); border-radius: 6px;
  background: var(--primary); color: #fff; cursor: pointer;
  font: 800 10.5px/1.4 "Segoe UI", "Microsoft YaHei", sans-serif;
}
.fl-hub .fh-btn:hover { filter: brightness(1.06); }

/* 教程浮层：容器不吃事件（玩家随时能自己点），只有说明卡接事件 */
.ap-tut { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.ap-tut.hidden { display: none; }
.ap-tut-card { pointer-events: auto; }
.ap-tut-spot {
  position: absolute; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(12, 22, 28, .55);
  border: 2px solid #7fd6c2; transition: all .18s ease;
}
.ap-tut-card {
  position: absolute; width: min(92vw, 340px); background: var(--paper); border-radius: 12px;
  padding: 12px 14px 11px; box-shadow: 0 18px 40px rgba(10, 20, 26, .38); border: 1px solid var(--line-l);
}
.att-top { display: flex; align-items: center; justify-content: space-between; }
.att-step { font: 800 10.5px Consolas, "Courier New", monospace; color: var(--route); letter-spacing: .04em; }
.att-close { border: 0; background: none; color: var(--muted); font: 700 13px/1 "Segoe UI", sans-serif; cursor: pointer; padding: 2px 4px; }
.att-title { display: block; margin: 3px 0 5px; font: 800 14px/1.35 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink); }
.att-text { margin: 0 0 10px; font: 400 12px/1.7 "Segoe UI", "Microsoft YaHei", sans-serif; color: #33424a; }
.att-actions { display: flex; align-items: center; gap: 8px; }
.att-skip {
  margin-right: auto; border: 0; background: none; color: var(--muted); text-decoration: underline;
  font: 700 10.5px "Segoe UI", "Microsoft YaHei", sans-serif; cursor: pointer;
}
.ap-help {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--muted); font: 800 12px/1 "Segoe UI", sans-serif; cursor: pointer;
}
.ap-help:active { background: #eef1ef; }
@media (max-width: 560px) {
  .fl-tr { min-width: 70px; padding: 5px 7px; }
  .att-text { font-size: 11.5px; }
}

/* ================= 第三十四轮：班期配载台 =================
   玩法壳：左侧时刻表（载重/体积两根条实时涨）、中间货票、右侧装载与发车。
   视觉沿用"纸质时刻表"：纸底 + 钢灰描边 + 三条色（航空青 / 公路陶土 / 铁路紫）。 */
.ap-fab-yard { background: #7a5d3a; border-color: #5f4728; position: relative; }
.ap-fab-yard:active { background: #5f4728; }
/* 第三十五轮：入口徽标 = 货场里还有几张票（0 张不显示） */
.fab-n {
  position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: #c2542f; color: #fff; font: 800 11px/17px "Segoe UI", sans-serif;
  text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.28);
}
.ap-yard {
  position: fixed; inset: 0; z-index: 48;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 34, 44, .22); padding: 12px;
}
.ap-yard.hidden { display: none; }
.ay-card {
  width: min(100%, 1080px); max-height: min(90vh, 720px); display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid #7d8f9c; border-radius: 13px;
  box-shadow: 0 18px 44px rgba(20, 34, 44, .34); overflow: hidden;
  animation: dioDock .2s ease both;
}
.ay-head {
  display: flex; align-items: center; gap: 12px; padding: 10px 13px;
  border-bottom: 1px solid var(--line-l); background: var(--paper-2); flex: none;
}
.ay-when { display: flex; align-items: baseline; gap: 7px; }
.ay-when b { font: 800 20px/1 Consolas, "Courier New", monospace; color: var(--ink); letter-spacing: .5px; }
.ay-when span { font: 700 11px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); }
.ay-kpis { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.ay-kpi {
  font: 700 11.5px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted);
  background: #fff; border: 1px solid var(--line-l); border-radius: 999px; padding: 3px 9px;
}
.ay-kpi b { color: var(--ink); font-family: Consolas, monospace; }
.ay-close {
  border: 1px solid var(--line-l); background: #fff; color: var(--muted); cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%; font: 700 12px/1 sans-serif; flex: none;
}
.ay-close:hover { color: var(--bad); border-color: var(--bad); }
.ay-grid {
  display: grid; grid-template-columns: 1.08fr .94fr 1fr; gap: 10px;
  padding: 10px 12px 12px; overflow: auto; flex: 1 1 auto; min-height: 0;
}
.ay-col { display: flex; flex-direction: column; min-width: 0; gap: 6px; }
.ay-h {
  display: flex; align-items: baseline; gap: 7px; font: 800 12.5px "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--ink); border-bottom: 1px solid var(--line-l); padding-bottom: 4px;
}
.ay-sub { font: 600 10.5px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); margin-left: auto; }
.ay-deps, .ay-lots { display: flex; flex-direction: column; gap: 6px; overflow: auto; max-height: 46vh; }
.ay-dep {
  display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; gap: 6px;
  text-align: left; cursor: pointer; padding: 7px 8px; border-radius: 8px;
  border: 1px solid var(--line-l); background: #fff; color: var(--ink);
  font: 700 11.5px "Segoe UI", "Microsoft YaHei", sans-serif;
}
.ay-dep:hover { border-color: var(--line); }
.ay-dep.on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: #f2f8f4; }
.ay-dep.gone { opacity: .45; cursor: default; }
.ad-time { font: 800 12.5px Consolas, monospace; }
.ad-mode { font: 700 10px/1 "Segoe UI", sans-serif; color: #fff; border-radius: 4px; padding: 2px 5px; }
.ad-mode.mode-air { background: #4f9ed6; }
.ad-mode.mode-road { background: #a8916b; }
.ad-mode.mode-rail { background: #8371a6; }
.ad-to { font: 800 12px "Segoe UI", sans-serif; color: var(--route); }
.ad-veh { font: 600 10.5px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-bars { display: inline-flex; flex-direction: column; gap: 2px; width: 46px; }
.ad-bars i { display: block; height: 4px; border-radius: 2px; max-width: 100%; }
.ad-bars .ab-kg { background: var(--primary); }
.ad-bars .ab-m3 { background: var(--route); }
.ad-num { grid-column: 1 / -1; font: 600 10px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); }
.ay-lot {
  display: grid; grid-template-columns: auto 1fr auto; grid-auto-rows: min-content;
  gap: 2px 7px; text-align: left; cursor: pointer; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--line-l); background: #fff; color: var(--ink);
}
.ay-lot:hover { border-color: var(--primary); }
.ay-lot.off { opacity: .45; }
.ay-lot.risk { border-style: dashed; border-color: var(--bad); }
.al-i { grid-row: span 2; font: 700 17px/1 sans-serif; }
.al-n { font: 800 12px "Segoe UI", "Microsoft YaHei", sans-serif; }
.al-pay { font: 800 12px Consolas, monospace; color: var(--primary-d); grid-row: span 2; align-self: center; }
.al-w, .al-to, .al-dl { font: 600 10.5px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); }
.al-dl { color: var(--earth); }
.ay-meter { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; margin-bottom: 5px; }
.am-l { font: 700 11px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); }
.am-t { text-align: right; font: 700 11px Consolas, monospace; color: var(--ink); }
.am-bar { grid-column: 1 / -1; height: 7px; background: #e2e8e2; border-radius: 4px; overflow: hidden; }
.am-bar b { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #6fb5a3); }
.ay-meter[data-k="m3"] .am-bar b { background: linear-gradient(90deg, var(--route), #8fd0e2); }
.ay-loads { display: flex; flex-wrap: wrap; gap: 5px; min-height: 30px; }
.ay-chip {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  font: 700 10.5px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink);
  background: #eef4ee; border: 1px solid var(--line-l); border-radius: 999px; padding: 3px 8px;
}
.ay-chip.risk { border-color: var(--bad); color: var(--bad); background: #fbf0ec; }
.ay-fact { font: 600 10.5px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); min-height: 30px; }
.ay-go { align-self: flex-start; }
.ay-go:disabled { opacity: .45; cursor: not-allowed; }
.ay-empty { font: 600 11px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); margin: 2px 0; }
.ay-result {
  margin-top: 6px; padding: 8px 10px; border-radius: 9px; background: #f2f6f0;
  border: 1px solid var(--line-l); display: flex; flex-direction: column; gap: 3px;
}
.ay-result.hidden { display: none; }
.ar-t { font: 800 13px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--earth); letter-spacing: 1px; }
.ar-row { font: 700 11px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); }
.ar-row b { color: var(--ink); font-family: Consolas, monospace; }
.ar-row.warn { color: var(--bad); }
.ay-again { align-self: flex-start; margin-top: 3px; }
@media (max-width: 720px) {
  .ay-grid { grid-template-columns: 1fr; }
  .ay-card { max-height: 94vh; max-height: 94dvh; }
  .ay-kpis { gap: 6px; }
  .ay-kpi { font-size: 10.5px; padding: 2px 7px; }
  .ay-when b { font-size: 17px; }
}
/* ===== 第四十六轮：合同市场（货源主阀）=====
   一张卡 = 一单：目的地 / 票数 / 总重体积 / 期限 / 报价 / 弃单罚金。
   已签=绿左边条，已结=灰底 + 结果标签；动作只有两个：签约、弃单。 */
.ap-fab-contract { background: #2f5d7a; border-color: #234a62; position: relative; }
.ap-fab-contract:active { background: #234a62; }
.ac-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 9px;
  padding: 11px 12px 6px; overflow: auto; flex: 1 1 auto; min-height: 0;
}
.ac-card {
  display: flex; flex-direction: column; gap: 5px; padding: 9px 10px; border-radius: 10px;
  border: 1px solid var(--line-l); background: #fff; border-left: 4px solid #2f5d7a;
}
.ac-card.signed { border-left-color: var(--primary); background: #f6faf6; }
.ac-card.done { opacity: .74; border-left-color: #98a6ad; background: #f7f7f4; }
.ac-h { display: flex; align-items: baseline; gap: 7px; }
.ac-to { font: 800 13px "Segoe UI", sans-serif; color: var(--route); }
.ac-km { font: 600 10.5px Consolas, monospace; color: var(--muted); margin-left: auto; }
.ac-n { font: 600 10.5px Consolas, monospace; color: var(--muted); }
.ac-mid { display: flex; gap: 9px; font: 700 11px Consolas, monospace; color: var(--ink); }
.ac-dl { color: var(--earth); margin-left: auto; font: 600 10.5px "Segoe UI", "Microsoft YaHei", sans-serif; }
.ac-lots { display: flex; flex-wrap: wrap; gap: 4px; }
.ac-lot {
  font: 600 10px "Segoe UI", "Microsoft YaHei", sans-serif; color: #3c4b52; font-style: normal;
  background: #eef2ee; border-radius: 999px; padding: 2px 7px;
}
.ac-f { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ac-pay { font: 800 14px Consolas, monospace; color: var(--primary-d); }
.ac-fine { font: 600 10px "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--muted); }
.ac-f .btn { margin-left: auto; }
.ac-tag {
  margin-left: auto; font: 800 10.5px "Segoe UI", "Microsoft YaHei", sans-serif;
  border-radius: 999px; padding: 2px 8px; background: #e8ece6; color: #47575f;
}
.ac-tag.ontime { background: #e2f2e6; color: #176a54; }
.ac-tag.late { background: #fbf2e2; color: var(--earth); }
.ac-tag.missed, .ac-tag.abandon { background: #fbe6e0; color: var(--bad); }
@media (max-width: 560px) {
  .ac-list { grid-template-columns: 1fr; }
}
/* ===== 打板装箱（第四十七轮）：12 格 ULD 货舱 + 3D 摆货 =====
   左边是票（点一票选中），右边是货舱的三维视图（点空格摆上去）；
   利用率 = 摆得紧不紧，结算乘子最多 ×1.06，「跳过」按 85% 折算 ×1.0375。 */
.ay-go-row { display: flex; gap: 6px; }
.ay-go-row .btn { flex: 1; }
.ay-pack { border-style: dashed; }
.pk-card { width: min(940px, 94vw); }
.pk-grid { display: grid; grid-template-columns: 224px 1fr; gap: 10px; padding: 0 12px; }
.pk-col { display: flex; flex-direction: column; min-width: 0; }
.pk-boxes { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; padding-right: 2px; }
.pk-box {
  display: grid; grid-template-columns: auto 1fr auto; gap: 3px 8px; align-items: center;
  background: #fff; border: 1px solid #98a6ad; border-radius: 10px; padding: 6px 8px; cursor: pointer;
  text-align: left; font: 600 12px "Segoe UI", "Microsoft YaHei", sans-serif; color: #2b3a41;
  box-shadow: var(--shadow-sm);
}
.pk-box.on { border-color: var(--primary); border-width: 2px; padding: 5px 7px; }
.pk-box.placed { opacity: .5; cursor: default; }
.pk-box .pb-i { font-size: 16px; grid-row: 1 / 3; }
.pk-box .pb-n { font-weight: 800; }
.pk-box .pb-c { font-weight: 800; color: var(--primary); }
.pk-box .pb-w { grid-column: 2 / 4; color: #63737c; font-weight: 600; font-size: 11.5px; }
.pk-stage {
  position: relative; border-radius: 12px; overflow: hidden; min-height: 300px;
  background: linear-gradient(160deg, #101b24, #1e2d38);
}
.pk-canvas { display: block; width: 100%; height: 100%; min-height: 300px; touch-action: none; cursor: crosshair; }
.pk-hint { padding: 8px 12px 0; }
.pk-foot { display: flex; gap: 8px; padding: 10px 12px 14px; }
.pk-foot .btn { flex: 1; }
@media (max-width: 720px) {
  .pk-grid { grid-template-columns: 1fr; }
  .pk-boxes { max-height: 30vh; }
  .pk-stage, .pk-canvas { min-height: 240px; }
}
/* ===== 排班闸门（第四十八轮）：班次预算 · 机位 · 跑道 =====
   配载台多一个「班次 n/9」读数与一个「＋ 加班机」入口；加班板只干一件事：
   选方式、选目的站、拨时刻，然后告诉你"能排/排不进去、最近空档在哪、要付多少"。 */
.ay-kpi-slot b { color: var(--primary); }
.ay-extra {
  margin-left: auto; background: #fff; border: 1px dashed #98a6ad; color: #47575f;
  border-radius: 999px; padding: 3px 10px; cursor: pointer;
  font: 700 11.5px "Segoe UI", "Microsoft YaHei", sans-serif;
}
.ay-extra:hover { border-color: var(--primary); color: var(--primary); }
.ay-extra:disabled { opacity: .5; cursor: not-allowed; border-style: solid; }
.ay-h { display: flex; align-items: center; gap: 6px; }
.sp-card { width: min(560px, 94vw); }
.sp-body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.sp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-lab { font: 700 12px "Segoe UI", "Microsoft YaHei", sans-serif; color: #63737c; min-width: 44px; }
.sp-modes { display: flex; gap: 6px; flex: 1; }
.sp-mode {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #fff; border: 1px solid #98a6ad; color: #47575f; border-radius: 9px;
  padding: 6px 8px; cursor: pointer;
  font: 700 12px "Segoe UI", "Microsoft YaHei", sans-serif; box-shadow: var(--shadow-sm);
}
.sp-mode i { font-style: normal; font-weight: 600; font-size: 11px; color: #7b8a92; }
.sp-mode.on { border-color: var(--primary); border-width: 2px; padding: 5px 7px; color: var(--primary); }
.sp-mode:disabled { opacity: .45; cursor: not-allowed; border-style: dashed; }
.sp-sel {
  flex: 1; min-width: 0; background: #fff; border: 1px solid #98a6ad; border-radius: 9px;
  padding: 7px 9px; font: 600 12.5px "Segoe UI", "Microsoft YaHei", sans-serif; color: #2b3a41;
}
.sp-step, .sp-best {
  background: #fff; border: 1px solid #98a6ad; color: #47575f; border-radius: 999px;
  padding: 5px 12px; cursor: pointer;
  font: 700 12px "Segoe UI", "Microsoft YaHei", sans-serif;
}
.sp-step:active, .sp-best:active { background: #e8ece6; }
.sp-why { margin: 0; padding: 8px 10px; border-radius: 10px; font: 600 12px/1.6 "Segoe UI", "Microsoft YaHei", sans-serif; }
.sp-why.ok { background: #eaf5ee; color: #1d6b46; border: 1px solid #b9dcc6; }
.sp-why.bad { background: #fdeeee; color: #a52a2a; border: 1px solid #f0c3c3; }
.sp-go { display: flex; }
.sp-go .btn { flex: 1; }
@media (max-width: 720px) {
  .sp-modes { flex-wrap: wrap; }
  .sp-mode { min-width: 30%; }
}
   /* ===== 站场切换（第四十轮）：航空站 / 汽车货运站 / 火车站 =====
   三段按钮是"看哪座站"，与出港调度的三运力页签联动；没有铁路的站显示为虚线锁定态，
   title 写明原因（支线站不修专用线 / 山地站走索道），不把按钮藏起来。 */
.ap-kinds { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 7px; }
.ap-kinds .ak {
  background: #fff; border: 1px solid #98a6ad; color: #47575f; border-radius: 999px;
  padding: 6px 14px; cursor: pointer; box-shadow: var(--shadow-sm);
  font: 700 12px "Segoe UI", "Microsoft YaHei", sans-serif;
}
.ap-kinds .ak:active { background: #e8ece6; }
.ap-kinds .ak.on { border-color: #176a54; color: #fff; background: var(--primary); }
.ap-kinds .ak.locked { color: #8a9298; border-style: dashed; background: #f3f4f0; cursor: not-allowed; }
/* ===== 地图图层（第四十轮）：空中网 / 陆侧网 =====
   两段按钮回答"看哪张网"；点站进入哪个站场由图层决定（陆侧网 → 该站汽车货运站）。
   与机场屏的三段切换条同一套视觉（白底 + 主色实心 on 态），玩家不用再学第二种按钮。 */
.map-layers { display: flex; gap: 6px; align-items: center; margin: 8px 0 6px; }
.map-layers .ml {
  background: #fff; border: 1px solid #98a6ad; color: #47575f; border-radius: 999px;
  padding: 6px 16px; cursor: pointer; box-shadow: var(--shadow-sm);
  font: 700 12px "Segoe UI", "Microsoft YaHei", sans-serif;
}
.map-layers .ml:active { background: #e8ece6; }
.map-layers .ml.on { border-color: #176a54; color: #fff; background: var(--primary); }

/* ===== 第五十轮：现货竞价台 =====
 * 两个维度（承诺 / 报价）压成一条曲线：上方是货主愿付，下方是成本，
 * 中间的净空就是期望毛利。玩家只拖一根承诺、调一个报价。 */
.ap-fab-auction { background: var(--primary-d); }
.au-card { width: min(720px, 94vw); }
.au-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; padding: 10px 14px 14px; }
@media (max-width: 720px) { .au-grid { grid-template-columns: 1fr; } }
.au-col, .au-side { min-width: 0; }
.au-curve {
  width: 100%; height: 150px; display: block; margin: 4px 0 8px;
  background: #f7f4ec; border: 1px solid var(--line, #d8d2c2); border-radius: 10px;
}
.au-curve .au-w { fill: none; stroke: #2c6e63; stroke-width: 2; }
.au-curve .au-c { fill: none; stroke: #b5651d; stroke-width: 2; stroke-dasharray: 4 3; }
.au-curve .au-fill { fill: rgba(44, 110, 99, .12); }
.au-curve .au-mark { stroke: #1b2a26; stroke-width: 1.2; stroke-dasharray: 2 3; }
.au-curve .au-dot { fill: #1b2a26; }
.au-curve .au-lb { font: 700 9px Consolas, monospace; fill: #6d6a63; }
.au-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.au-lb { flex: 0 0 34px; font: 700 12px "Microsoft YaHei", sans-serif; color: #4a4a45; }
.au-range { flex: 1 1 auto; accent-color: #2c6e63; }
.au-bid {
  width: 96px; padding: 5px 8px; text-align: right; font: 800 14px Consolas, monospace;
  border: 1px solid var(--line, #d8d2c2); border-radius: 8px; background: #fff; color: #1b2a26;
}
.au-pwin { font: 700 12px Consolas, monospace; color: #2c6e63; min-width: 74px; }
.au-quick { display: flex; gap: 6px; margin-top: 8px; }
.au-quick .btn { flex: 1 1 0; }
/* 价值拆解横条：成本 / 利润 / 风险准备金 / 货主剩余 */
.au-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line, #d8d2c2); background: #f4f1e8; }
.au-bar > span { display: block; height: 100%; }
.au-bar .b-cost { background: #8fb3a0; }
.au-bar .b-profit { background: #2c6e63; }
.au-bar .b-risk { background: #d9a441; }
.au-bar .b-left { background: #e7e2d3; }
.au-bar-lab { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; font: 700 11px "Microsoft YaHei", sans-serif; color: #4a4a45; }
.au-bar-lab i { font-style: normal; font-family: Consolas, monospace; }
.au-go { margin-top: 10px; }
.au-go .btn { width: 100%; }
.au-result { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line, #d8d2c2); }
.au-result.win { border-color: #2c6e63; background: #f2f9f4; }
.au-result.lose { border-color: #c9a7a7; background: #fdf5f4; }
.au-result b { display: block; margin-bottom: 4px; }
.au-result p { margin: 4px 0 0; font: 13px/1.6 "Microsoft YaHei", sans-serif; color: #3a3a36; }
.au-result .au-opp { display: block; font: 11px/1.5 Consolas, monospace; color: #6d6a63; }

/* 复盘卡：每次出价都留在账本里，能点开看"当时还能怎么选" */
.au-review { margin-top: 10px; border-top: 1px dashed var(--line, #d8d2c2); padding-top: 8px; }
.au-review summary { cursor: pointer; font: 700 12px "Microsoft YaHei", sans-serif; color: #4a4a45; }
.au-review-body { margin-top: 6px; font: 11px/1.7 Consolas, monospace; color: #5d5a54; }
.au-review-body div { padding: 3px 0; border-bottom: 1px dotted #e7e2d3; }
.au-review-body b { color: #1b2a26; }
.au-review-body .rv-win { color: #2c6e63; }
.au-review-body .rv-lose { color: #b5651d; }