/* ui.css —— 按钮 / HUD / 面板 / 星级 / 屏幕 */

/* ---------- 通用按钮 ---------- */
.chip-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--cream);
  border: 4px solid var(--navy);
  box-shadow: var(--shadow-s);
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.chip-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(36, 49, 92, 0.16); }

.text-chip {
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--cream);
  border: 4px solid var(--navy);
  box-shadow: var(--shadow-s);
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}
.text-chip:active { transform: translateY(3px); }
@media (max-width: 800px) {
  .text-chip { height: 34px; font-size: 12px; padding: 0 8px; border-width: 3px; }
}
body.building #btnRestart,
body.building #btnRebuild { display: none !important; }

#btnMusic.music-off {
  background: #e7e4dc;
  color: #8a90a8;
  box-shadow: none;
}

.level-tag {
  background: rgba(255, 248, 238, 0.92);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  box-shadow: 0 3px 0 rgba(36, 49, 92, 0.12);
}

.score-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 248, 238, 0.92);
  border-radius: 999px;
  padding: 7px 16px 7px 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  box-shadow: 0 3px 0 rgba(36, 49, 92, 0.12);
}

.star-ico { color: var(--gold); font-size: 19px; }
.badge-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--navy);
  display: inline-block;
}

/* 「全景 / 跟随」图标：四角取景框 */
.ico-fit {
  position: relative;
  width: 22px;
  height: 22px;
  display: block;
}
.ico-fit::before,
.ico-fit::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 4px solid var(--navy);
}
.ico-fit::before { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; }
.ico-fit::after { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 3px 0; }

#btnFit.on { background: var(--gold); }

/* ---------- 大操控按钮 ---------- */
.pad-btn,
.round-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--cream);
  border: 5px solid var(--navy);
  box-shadow: var(--shadow);
  color: var(--navy);
  transition: transform 0.07s ease, box-shadow 0.07s ease, filter 0.12s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.pad-btn { width: 108px; height: 108px; border-radius: 30px; }
.round-btn { width: 82px; height: 82px; border-radius: 50%; }

.pad-btn em,
.round-btn em {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}

.round-btn em { font-size: 12px; }

.pad-btn .ico,
.round-btn .ico { display: block; }

.pad-btn.power { background: #d6f5c7; }
.pad-btn.brake { background: #ffd9d4; }
.round-btn.whistle { background: #ffe9a8; }
.round-btn.switch { background: #d9e6ff; }
.round-btn.action { background: #d6f5e2; }
.round-btn.car-minus { background: #ffd9d4; }
.round-btn.car-plus { background: #d6f5c2; }
.round-btn.next { background: #efe4ff; }
.round-btn.reverse { background: #ffd7a8; }
.rev-arrow { font-size: 28px; font-weight: 900; line-height: 1; color: var(--navy); }

.ico-next {
  width: 26px;
  height: 26px;
  border: 4px solid var(--navy);
  border-radius: 50%;
  border-right-color: transparent;
  position: relative;
}
.ico-next::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 1px;
  border-left: 7px solid var(--navy);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.pad-btn.on,
.round-btn.on {
  transform: translateY(6px) scale(0.97);
  box-shadow: 0 2px 0 rgba(36, 49, 92, 0.2);
  filter: saturate(1.35) brightness(1.04);
}

.pad-btn:disabled,
.round-btn:disabled {
  opacity: 0.42;
  filter: grayscale(0.6);
  box-shadow: 0 3px 0 rgba(36, 49, 92, 0.14);
}

/* 图标：纯 CSS 绘制，无外部素材 */
.ico-power {
  width: 0; height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid var(--leaf-deep);
  border-radius: 4px;
}

.ico-brake {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--coral-deep);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.16);
}

.ico-whistle {
  width: 34px; height: 20px;
  border-radius: 4px 14px 14px 4px;
  background: var(--gold-deep);
  position: relative;
}
.ico-whistle::after {
  content: "";
  position: absolute;
  left: -8px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gold-deep);
}

.ico-switch {
  width: 34px; height: 26px;
  position: relative;
}
.ico-switch::before,
.ico-switch::after {
  content: "";
  position: absolute;
  height: 7px;
  border-radius: 4px;
  background: var(--navy);
}
.ico-switch::before { left: 0; top: 4px; width: 30px; transform: rotate(-18deg); }
.ico-switch::after { left: 6px; bottom: 0; width: 26px; transform: rotate(22deg); }

.ico-action {
  width: 30px; height: 30px;
  border: 6px solid var(--leaf-deep);
  border-radius: 8px;
}

.ico-minus,
.ico-plus {
  width: 32px; height: 7px;
  border-radius: 4px;
  position: relative;
  background: var(--coral-deep);
}
.ico-plus { background: var(--leaf-deep); }
.ico-plus::after {
  content: "";
  position: absolute;
  left: 12px; top: -12px;
  width: 7px; height: 31px;
  border-radius: 4px;
  background: var(--leaf-deep);
}

/* ---------- 速度表 ---------- */
.gauge { width: 132px; height: 78px; display: block; }
.gauge-bg { fill: none; stroke: rgba(36, 49, 92, 0.18); stroke-width: 12; stroke-linecap: round; }
.gauge-fill {
  fill: none;
  stroke: var(--leaf);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 151 151;
  stroke-dashoffset: 151;
  transition: stroke 0.2s ease;
}
#gaugeTicks line { stroke: rgba(36, 49, 92, 0.45); stroke-width: 2; }

.gauge-label {
  margin-top: -26px;
  font-weight: 700;
  color: var(--navy);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8);
}
.gauge-label span { font-size: 26px; }
.gauge-label i { font-size: 11px; font-style: normal; margin-left: 3px; opacity: 0.7; }

.weight-tag {
  margin-top: 6px;
  display: inline-block;
  background: rgba(255, 248, 238, 0.92);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
}

/* ---------- 到站播报字幕 ---------- */
.announce {
  position: absolute;
  left: 50%;
  bottom: 196px;
  transform: translateX(-50%);
  width: min(560px, 72vw);
  z-index: 30;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  pointer-events: none;
  background: rgba(255, 248, 238, 0.96);
  border: 4px solid var(--navy);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
}
.announce b {
  flex: none;
  background: #ff8a78;
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 14px;
  border: 3px solid var(--navy);
}
.announce p {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--navy);
}
.announce .now { color: #cf2f24; }
.announce-close {
  flex: none;
  pointer-events: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff8ee;
  border: 3px solid var(--navy);
  box-shadow: var(--shadow-s);
  color: var(--navy);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
}
.announce-close:active { transform: translateY(2px); }
body.building .announce { display: none !important; }

/* ---------- 小火车面板：多列火车分开控制 ---------- */
#fleetLayer { z-index: 35; }
.fleet-bar {
  position: absolute;
  right: calc(12px + var(--safe-r));
  top: calc(62px + var(--safe-t));
  width: 196px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: rgba(255, 248, 238, 0.94);
  border: 4px solid var(--navy);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
}
.fleet-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fleet-title { font-size: 14px; font-weight: 900; color: var(--navy); letter-spacing: 1px; }
.fleet-mini {
  font-size: 11px;
  font-weight: 800;
  color: var(--navy);
  background: #ffe9a8;
  border: 3px solid var(--navy);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.fleet-mini[aria-pressed="false"] { background: #e7e4dc; color: #8a90a8; }
.fleet-mini:active { transform: translateY(2px); }
.fleet-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 40vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.fleet-item { display: flex; align-items: center; gap: 6px; }
.fleet-item .fi-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fffdf8;
  border: 3px solid var(--navy);
  border-radius: 12px;
  padding: 5px 7px;
}
.fleet-item.on .fi-main { background: var(--gold); }
.fi-dot {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--c, #3d7ee8);
  border: 2px solid var(--navy);
}
.fi-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fi-speed { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--navy); opacity: 0.72; }
.fi-run {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #d6f5c7;
  border: 3px solid var(--navy);
  box-shadow: var(--shadow-s);
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
}
.fleet-item.running .fi-run { background: var(--leaf); color: #fff; }
.fleet-item.running .fi-run:active { transform: translateY(2px); }
.fleet-foot { display: flex; gap: 6px; }
.fleet-all {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
  border: 3px solid var(--navy);
  border-radius: 12px;
  box-shadow: var(--shadow-s);
  padding: 7px 4px;
}
.fleet-all.go { background: #d6f5c7; }
.fleet-all.stop { background: #ffd9d4; }
.fleet-all:active { transform: translateY(2px); }
body.building #fleetLayer { display: none !important; }
@media (max-width: 800px) {
  .fleet-bar { width: 164px; padding: 7px; }
  .fi-name { font-size: 11px; }
  .fi-run { width: 30px; height: 30px; }
}

/* ---------- 竞速赛面板：计时器 / 检查点 / 实时名次 ---------- */
#raceLayer { z-index: 36; }
#raceCount { z-index: 38; }
.race-top {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(58px + var(--safe-t));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.race-clock {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 16px;
  background: rgba(255, 248, 238, 0.94);
  border: 4px solid var(--navy);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.race-clock b {
  font-size: 26px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.race-clock i { font-style: normal; font-size: 12px; font-weight: 800; color: var(--navy); opacity: 0.7; }
.race-clock.live b { color: #cf2f24; }
.race-info { display: flex; gap: 5px; }
.race-info span {
  font-size: 11px;
  font-weight: 800;
  color: var(--navy);
  padding: 2px 9px;
  background: rgba(255, 248, 238, 0.9);
  border: 3px solid var(--navy);
  border-radius: 999px;
}
.race-info #raceBest { background: #ffe9a8; }

.race-runners {
  position: absolute;
  right: calc(12px + var(--safe-r));
  top: calc(62px + var(--safe-t));
  width: 190px;
  padding: 8px;
  background: rgba(255, 248, 238, 0.94);
  border: 4px solid var(--navy);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
}
.race-runners-head {
  font-size: 12px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.race-runner-list { display: flex; flex-direction: column; gap: 5px; }
.rr-item { display: flex; align-items: center; gap: 5px; }
.rr-rank {
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff8ee;
  border: 3px solid var(--navy);
  color: var(--navy);
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.rr-item.rr-1 .rr-rank { background: #ffd43b; }
.rr-body { flex: 1; min-width: 0; }
.rr-name {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.rr-bar {
  height: 10px;
  border-radius: 999px;
  background: #e7e4dc;
  border: 2px solid var(--navy);
  overflow: hidden;
}
.rr-fill { height: 100%; width: 0; background: var(--c, #3d7ee8); }
.rr-item.me .rr-name { color: #cf2f24; }
.rr-item.done .rr-fill { background: #49d17c; }

/* 三、二、一、出发 */
.race-count {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  font-size: min(26vh, 190px);
  font-weight: 900;
  color: #fff8ee;
  -webkit-text-stroke: 6px var(--navy);
  text-shadow: 0 8px 0 rgba(36, 49, 92, 0.32);
  pointer-events: none;
}
.race-count.pop { animation: raceCountPop 0.52s ease-out; }
.race-count.go { color: #ffd43b; }
@keyframes raceCountPop {
  0% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
  45% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.92; }
}
body.building #raceLayer,
body.building #raceCount { display: none !important; }

@media (max-width: 800px) {
  .race-runners { width: 152px; padding: 6px; }
  .rr-name { font-size: 10px; }
  .race-clock b { font-size: 21px; }
}

/* 冲刺（氮气）：按钮 + 氮气条 */
.round-btn.boost { background: linear-gradient(180deg, #fff0b8, #ffc83d); border-color: var(--navy); }
.round-btn.boost .ico-boost {
  width: 30px;
  height: 34px;
  background: #e8871e;
  clip-path: polygon(60% 0, 14% 54%, 44% 54%, 30% 100%, 86% 42%, 52% 42%);
}
.round-btn.boost.empty { opacity: 0.45; filter: grayscale(0.7); }
.round-btn.boost:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(36, 49, 92, 0.25); }

.race-nitro { display: flex; align-items: center; gap: 4px; }
.race-nitro i {
  display: block;
  width: 34px;
  height: 12px;
  border: 3px solid var(--navy);
  border-radius: 999px;
  background: #e7e4dc;
  overflow: hidden;
}
.race-nitro i > b {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ffc83d, #ff8a2b);
  transition: width 0.08s linear;
}
.race-nitro em {
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: 1px;
}
.race-nitro.slip em { color: #cf2f24; }
.race-nitro.slip i { border-color: #cf2f24; }

/* 竞速入口与成绩单 */
.big-btn.race { background: linear-gradient(180deg, #ffe7a3, #ffc83d); }
.preset-box.race-pick { background: #fff3cf; }
.result-row.big b { font-size: 20px; color: #cf2f24; }
.result-row.newbest b { color: #cf2f24; }
.result-row.slim { padding: 2px 0; font-size: 12px; }

/* 竞速：对手数量 */
.rival-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0;
  padding: 7px 9px;
  background: #eaf3ff;
  border: 4px solid var(--navy);
  border-radius: 16px;
  box-shadow: var(--shadow-s);
}
.rival-label { font-size: 12px; font-weight: 900; color: var(--navy); letter-spacing: 1px; }
.rival-chip {
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
  background: #fff8ee;
  border: 3px solid var(--navy);
  border-radius: 999px;
  box-shadow: var(--shadow-s);
  padding: 4px 10px;
}
.rival-chip.on { background: var(--gold); }
.rival-chip:active { transform: translateY(2px); }
.rival-tip { font-size: 10px; font-weight: 700; color: var(--navy); opacity: 0.62; }

/* 赛道选中态 + 出发按钮 */
.preset-chip.on {
  background: var(--gold);
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(36, 49, 92, 0.22);
}
.big-btn.go { background: linear-gradient(180deg, #d6f5c7, #86d977); }
.lap-title {
  font-size: 12px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: 1px;
  margin: 7px 0 3px;
}

/* ---------- 提示气泡 ---------- */
.coach span {
  display: inline-block;
  background: rgba(255, 248, 238, 0.96);
  border: 4px solid var(--navy);
  border-radius: 18px;
  padding: 10px 20px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  box-shadow: var(--shadow-s);
  animation: pop 0.24s ease;
}

@keyframes pop {
  from { transform: scale(0.82); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------- 全屏界面 ---------- */
.sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 用 auto 外边距做居中：内容超出时顶部依然可滚动，不会被裁掉 */
  justify-content: flex-start;
  gap: 16px;
  padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
  background: linear-gradient(180deg, rgba(143, 212, 245, 0.94) 0%, rgba(255, 231, 168, 0.96) 100%);
  overflow-y: auto;
  animation: fade 0.22s ease;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet > *:first-child { margin-top: auto; }
.sheet > *:last-child { margin-bottom: auto; }

.title {
  font-size: clamp(26px, 6vw, 46px);
  font-weight: 900;
  color: var(--navy);
  text-shadow: 0 4px 0 #fff, 0 8px 0 rgba(36, 49, 92, 0.18);
  letter-spacing: 2px;
}

.subtitle { font-size: 15px; color: var(--ink-2); font-weight: 700; }

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 168px));
  gap: 14px;
  justify-content: center;
  width: 100%;
  max-width: 760px;
}

.level-card {
  background: var(--panel);
  border: 5px solid var(--navy);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
  padding: 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.1s ease;
}
.level-card:active { transform: translateY(5px); }
.level-card .lv-no {
  align-self: flex-start;
  background: var(--navy);
  color: #fff;
  border-radius: 8px;
  font-size: 11px;
  padding: 2px 8px;
  font-weight: 700;
}
.level-card .lv-name { font-size: 17px; font-weight: 800; color: var(--navy); }
.level-card .lv-desc { font-size: 12px; color: var(--ink-2); line-height: 1.35; min-height: 32px; }
.level-card .lv-stars { font-size: 17px; color: var(--gold); letter-spacing: 2px; }
.level-card .lv-stars i { color: rgba(36, 49, 92, 0.18); font-style: normal; }

.big-btn {
  background: var(--gold);
  border: 5px solid var(--navy);
  border-radius: 999px;
  box-shadow: var(--shadow);
  padding: 14px 42px;
  font-size: 20px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: 2px;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.big-btn:active { transform: translateY(6px); box-shadow: 0 3px 0 rgba(36, 49, 92, 0.2); }
.big-btn.ghost { background: var(--cream); }
.big-btn.small { font-size: 16px; padding: 10px 26px; }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------- 结算 ---------- */
.result-card {
  background: var(--panel);
  border: 6px solid var(--navy);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
  padding: 22px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: min(90vw, 380px);
}

.big-stars { display: flex; gap: 10px; font-size: 52px; line-height: 1; color: rgba(36, 49, 92, 0.16); }
.big-stars span.on { color: var(--gold); animation: starIn 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) backwards; }
.big-stars span:nth-child(2) { animation-delay: 0.15s; }
.big-stars span:nth-child(3) { animation-delay: 0.3s; }

@keyframes starIn {
  from { transform: scale(0.2) rotate(-40deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.result-rows { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.result-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  border-bottom: 2px dashed rgba(36, 49, 92, 0.14);
  padding-bottom: 5px;
}
.result-row b { color: var(--navy); }

/* ---------- 矮屏（横屏手机）压缩排版 ---------- */
@media (max-height: 470px) {
  .sheet {
    gap: 8px;
    padding: calc(8px + var(--safe-t)) 12px calc(8px + var(--safe-b));
  }
  .title { font-size: 24px; letter-spacing: 1px; }
  .subtitle { font-size: 12px; }
  .level-grid { grid-template-columns: repeat(auto-fit, minmax(116px, 146px)); gap: 8px; max-width: 660px; }
  .level-card { padding: 7px 9px; gap: 3px; border-width: 4px; border-radius: 14px; }
  .level-card .lv-no { font-size: 10px; padding: 1px 7px; }
  .level-card .lv-name { font-size: 14px; }
  .level-card .lv-desc { font-size: 11px; line-height: 1.25; min-height: 0; }
  .level-card .lv-stars { font-size: 13px; }
  .big-btn { padding: 8px 24px; font-size: 16px; }
  .result-card { padding: 12px 18px; gap: 7px; }
  .big-stars { font-size: 34px; }
  .result-row { font-size: 12px; padding-bottom: 3px; }
}

/* ---------- 建造模式：整栏在地图旁边，不盖住铁路 ---------- */
body.building {
  --dock-w: 304px;
  --dock-h: 0px;
}
body.building #stage {
  width: calc(100% - var(--dock-w));
  height: calc(100% - var(--dock-h));
  right: auto;
  bottom: auto;
}
body.building #screens {
  inset: auto;
  top: 0;
  right: 0;
  bottom: var(--dock-h);
  left: auto;
  width: var(--dock-w);
  height: auto;
  pointer-events: auto;
  background: #fff6ea;
  border-left: 5px solid var(--navy);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.building #topbar,
body.building #hud {
  right: var(--dock-w);
  left: 0;
}
body.building #hud {
  top: calc(64px + var(--safe-t));
  bottom: var(--dock-h);
  height: auto;
}
body.building .coach {
  top: 8px;
  bottom: auto;
}

.build-dock {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: calc(10px + var(--safe-t)) 10px calc(10px + var(--safe-b));
  gap: 8px;
  pointer-events: auto;
}
.dock-head {
  font-size: 18px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: 1px;
  padding: 0 4px;
}
.dock-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  touch-action: pan-y;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
/* 一键地形套餐 */
.preset-box {
  background: #eaf3ff;
  border: 4px solid var(--navy);
  border-radius: 18px;
  padding: 8px;
  box-shadow: var(--shadow-s);
}
.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.preset-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  background: #fff8ee;
  border: 3px solid var(--navy);
  border-radius: 11px;
  box-shadow: var(--shadow-s);
  padding: 4px 5px;
  text-align: left;
}
.preset-chip em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preset-swatch {
  flex: none;
  width: 20px;
  height: 15px;
  border-radius: 5px;
  border: 2px solid var(--navy);
  background: linear-gradient(135deg, var(--sw1) 0 34%, var(--sw2) 34% 67%, var(--sw3) 67% 100%);
}
.preset-swatch.rand {
  background: conic-gradient(#ff6b5a, #ffc83d, #7ed07a, #4fb8e8, #c99bf0, #ff6b5a);
}
.preset-chip.random { background: #fff3cf; }
.preset-chip:active { transform: translateY(2px); }

/* 红绿灯秒数设置：点中地图上的灯才会出现 */
.signal-box {
  background: #fff3d6;
  border: 4px solid var(--navy);
  border-radius: 18px;
  padding: 8px;
  box-shadow: var(--shadow-s);
}
.sig-rows { display: flex; flex-direction: column; gap: 5px; }
.sig-row { display: flex; align-items: center; gap: 6px; }
.sig-name {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
}
.sig-lamp {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--navy);
}
.sig-lamp.red { background: #ff4b3e; }
.sig-lamp.green { background: #49d17c; }
.sig-lamp.yellow { background: #ffc83d; }
.sig-btn {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff8ee;
  border: 3px solid var(--navy);
  box-shadow: var(--shadow-s);
  color: var(--navy);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
}
.sig-btn:active { transform: translateY(2px); }
.sig-val {
  flex: none;
  min-width: 34px;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
  color: var(--coral-deep);
}
.sig-del {
  margin-top: 7px;
  width: 100%;
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
  background: #ffd9d4;
  border: 3px solid var(--navy);
  border-radius: 12px;
  box-shadow: var(--shadow-s);
  padding: 7px 4px;
}
.sig-del:active { transform: translateY(2px); }
@media (max-height: 470px) {
  .signal-box { padding: 6px; }
  .sig-btn { width: 28px; height: 28px; font-size: 15px; }
  .sig-val { font-size: 13px; min-width: 26px; }
}

/* 地形、新铁路、车站：和铺轨按钮分开，颜色一眼能认出来 */
.special-box {
  background: #fff3cf;
  border: 4px solid var(--navy);
  border-radius: 18px;
  padding: 8px;
  box-shadow: var(--shadow-s);
}
.special-label {
  font-size: 13px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: 1px;
  padding: 0 4px 6px;
}
.special-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.tool-btn.special { min-height: 72px; border-width: 4px; }
.tool-btn.special em { font-size: 11px; }
.tool-btn.special.terrain { background: #c6f3b8; }
.tool-btn.special.line { background: #c5e4ff; }
.tool-btn.special.station { background: #ffd0c2; }
.tool-btn.special.signal { background: #ffe3b0; }
.tool-btn.special.terrain.on { background: #8edc78; }
.tool-btn.special.line.on { background: #8ec8ff; }
.tool-btn.special.station.on { background: #ffb09a; }
.tool-btn.special.signal.on { background: #ffc45e; }

.dock-foot {
  display: flex;
  gap: 8px;
}
.dock-foot .tool-btn { flex: 1; min-width: 0; min-height: 64px; }
.dock-foot .go { flex: 1.35; }

.tool-btn {
  background: var(--cream);
  border: 4px solid var(--navy);
  border-radius: 16px;
  box-shadow: var(--shadow-s);
  padding: 6px 4px 7px;
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.1;
}
.tool-btn em { font-style: normal; font-size: 12px; font-weight: 800; }
.tool-btn .tool-ico { width: 36px; height: 36px; display: block; }
.tool-btn .tool-ico svg,
.chip-tool .tool-ico svg,
.menu-train .tool-ico svg { width: 100%; height: 100%; display: block; }
.tool-btn.on { background: var(--gold); transform: translateY(3px); box-shadow: 0 2px 0 rgba(36, 49, 92, 0.2); }
.tool-btn.go { background: #ffc83d; }

.menu-train { width: 120px; height: 78px; }
.menu-train .tool-ico { width: 120px; height: 78px; display: block; }

/* 建造模式里的车厢数量调节 */
.car-counter {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--cream);
  border: 4px solid var(--navy);
  border-radius: 16px;
  box-shadow: var(--shadow-s);
  padding: 5px 8px;
}
.car-counter .tool-ico { width: 42px; height: 32px; display: block; }
.car-counter .tool-ico svg { width: 100%; height: 100%; display: block; }
.car-btn {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--navy);
  border-radius: 12px;
  background: #fff8ee;
  color: var(--navy);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.car-btn:active { transform: translateY(2px); }
.car-btn:disabled { opacity: 0.35; }
.car-num { font-size: 13px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.car-num b { font-size: 17px; color: var(--coral-deep); }

/* 地形、车站、房子都收在建造栏里，点了再展开，不铺到地图上 */
.chip-row {
  width: 100%;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.line-row {
  width: 100%;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.line-chip {
  min-width: 52px;
  height: 48px;
  border-radius: 14px;
  border: 4px solid var(--navy);
  box-shadow: var(--shadow-s);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  padding: 2px 8px;
}
.line-chip b { font-size: 15px; }
.line-chip small { font-size: 11px; font-weight: 800; }
.line-chip.on { transform: translateY(2px); box-shadow: 0 0 0 3px #fff, 0 2px 0 rgba(36, 49, 92, 0.2); }

.chip-tool {
  background: #fff8ee;
  border: 3px solid var(--navy);
  border-radius: 12px;
  box-shadow: var(--shadow-s);
  padding: 4px 8px 5px;
  min-width: 58px;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.chip-tool em { font-style: normal; font-size: 12px; font-weight: 800; }
.chip-tool .tool-ico { width: 34px; height: 34px; display: block; }
.chip-tool.on {
  background: var(--gold);
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(36, 49, 92, 0.2);
}

/* 建造时不需要开车按钮，免得挡住下面的工具 */
body.building .hud-left,
body.building .hud-right,
body.building .hud-center,
body.building .gauge-wrap { display: none !important; }

.tool-btn,
.car-counter,
.line-chip { flex-shrink: 0; }

/* 窄屏时建造栏改到地图下面，左右不再抢宽度 */
@media (max-width: 820px) {
  body.building {
    --dock-w: 0px;
    --dock-h: min(300px, 46vh);
  }
  body.building #screens {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: var(--dock-h);
    border-left: 0;
    border-top: 5px solid var(--navy);
  }
  body.building #topbar { right: 0; }
  .tool-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .preset-grid { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .build-dock { padding-top: 8px; }
}

/* ---------- 矮屏（横屏手机）：建造按钮再压扁一点 ---------- */
@media (max-height: 470px) {
  .build-dock { gap: 4px; padding: 6px 8px calc(6px + var(--safe-b)); }
  .dock-head { font-size: 14px; }
  .tool-grid { gap: 4px; }
  .dock-foot .tool-btn { min-height: 48px; }
  .tool-btn.special { min-height: 52px; }
  .special-box { padding: 6px; }
  .preset-box { padding: 6px; }
  .preset-swatch { width: 16px; height: 13px; border-width: 2px; }
  .preset-chip { padding: 3px 4px; border-width: 3px; }
  .preset-chip em { font-size: 10px; }
  .announce { bottom: 150px; width: min(480px, 70vw); }
  .announce p { font-size: 15px; }
  .tool-btn { padding: 3px 4px 4px; font-size: 12px; border-width: 3px; border-radius: 12px; min-width: 0; }
  .tool-btn .tool-ico, .chip-tool .tool-ico { width: 26px; height: 26px; }
  .tool-btn em, .chip-tool em { font-size: 10px; }
  .line-chip { height: 36px; min-width: 42px; border-width: 3px; }
  .line-chip b { font-size: 12px; }
  .line-chip small { font-size: 9px; }
  .car-counter { padding: 3px 6px; gap: 4px; border-width: 3px; border-radius: 12px; }
  .car-btn { width: 40px; height: 40px; font-size: 20px; border-width: 3px; border-radius: 10px; }
  .car-num { font-size: 10px; }
  .car-num b { font-size: 13px; }
  /* 车站和建筑太多，排成一行左右滑动，比堆成四行省一半高度 */
  .chip-row {
    gap: 6px;
    padding: 0 2px 5px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    touch-action: pan-x;
    scrollbar-width: none;          /* 横滑但不显示滚动条，省一行高度 */
  }
  .chip-row::-webkit-scrollbar { height: 0; display: none; }
  .chip-row .chip-tool { touch-action: pan-x; }
  .chip-tool { padding: 5px 10px; font-size: 12px; border-width: 3px; border-radius: 10px; }
  /* 建造时不驱动火车，把没用的操控收起来 */
  body.building .hud-left,
  body.building .hud-right,
  body.building .hud-center,
  body.building .gauge-wrap { display: none; }
  .coach { bottom: 152px; }
  body.building .coach { top: 4px; bottom: auto; }
}

/* 屏幕一闪（事故/提示） */
.flash { position: absolute; inset: 0; background: rgba(255, 75, 62, 0.18); opacity: 0; pointer-events: none; }
.flash.on { animation: flashAnim 0.5s ease; }
@keyframes flashAnim { 0% { opacity: 1; } 100% { opacity: 0; } }

/* 旋转图标 */
.rotate-ico {
  width: 62px; height: 96px;
  border: 6px solid var(--navy);
  border-radius: 12px;
  position: relative;
  animation: rotateHintAnim 1.8s ease-in-out infinite;
}
.rotate-ico::after {
  content: "";
  position: absolute;
  inset: 6px 6px auto 6px;
  height: 8px;
  border-radius: 4px;
  background: var(--navy);
}
@keyframes rotateHintAnim {
  0%, 40% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}