/*
 * Light Train · 骨架与游玩屏（菜单与浮层在 screens.css）。
 * 只做手机：#app 由共用组件库的「手机画布锁定」收成手机画布；这里不写任何不带 max-height 的 min-width 媒体查询。
 * 元素的位置由 JS 按 SCREEN_SPEC 的矩形摆（layout.mjs）；这里只管外观。
 */
html, body { margin: 0; height: 100%; background: #07061A; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
/* 入口根容器钉满视口；宽视口时由 ui.css 末尾的「手机画布锁定」收成手机画布（这里不另写桌面版式） */
#app { position: fixed; inset: 0; overflow: hidden; }
.lt-root {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--lt-ink);
  color: #fff;
  font-family: var(--lt-font-body);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.lt-root img { -webkit-user-drag: none; }
.lt-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 18% 22%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 72% 12%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 34%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 86% 41%, rgba(255, 255, 255, 0.6), transparent 60%),
    linear-gradient(180deg, var(--sky, #110E33) 0%, var(--sky-hi, #1D1852) 100%);
}
.lt-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 240ms ease-out;
}
.lt-bg-img.is-on { opacity: 1; }
.lt-safe {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  left: env(safe-area-inset-left, 0px);
}
.lt-host { position: absolute; left: 0; right: 0; bottom: 0; top: 0; }
.lt-bars { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.lt-bars > * { pointer-events: auto; }
.lt-sr {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lt-icon { width: 24px; height: 24px; display: block; pointer-events: none; }

/* ───────── 游玩屏 ───────── */
.lt-run { position: absolute; inset: 0; }
.lt-run[hidden] { display: none; }
.lt-hud {
  position: absolute;
  box-sizing: border-box;
  z-index: 5;
  background: linear-gradient(180deg, rgba(7, 6, 26, 0.92), rgba(17, 14, 51, 0.82));
  border-bottom: 1px solid rgba(91, 95, 214, 0.55);
}
.lt-run[data-orientation="landscape"] .lt-hud {
  border: 1px solid rgba(91, 95, 214, 0.55);
  border-radius: 16px;
}
.lt-hud > * { position: absolute; box-sizing: border-box; }
.lt-hud [hidden] { display: none !important; }
.lt-hud-btn {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  border-radius: 999px;
  border: 2px solid var(--lt-rim);
  background: radial-gradient(circle at 50% 35%, #29246E, #17143F 70%);
  color: #fff;
  font: 800 15px/1 var(--lt-font-display);
  cursor: pointer;
  touch-action: manipulation;
}
.lt-hud-btn.is-down, .lt-hud-btn:active { filter: brightness(0.75); }
.lt-hud-btn:focus-visible { outline: 3px solid var(--lt-track-0); outline-offset: 2px; }
.lt-pause { padding: 0; }
.lt-pause .lt-icon { width: 26px; height: 26px; }
.lt-skip { border-color: var(--lt-track-2); box-shadow: 0 0 10px rgba(255, 95, 184, 0.45); }

.lt-progress {
  border-radius: 999px;
  background: rgba(7, 6, 26, 0.85);
  border: 1px solid rgba(63, 230, 255, 0.45);
  overflow: visible;
}
.lt-progress-fill {
  position: absolute;
  left: 2px; top: 2px; bottom: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lt-track-0), var(--lt-track-1) 55%, var(--lt-track-2));
  box-shadow: 0 0 8px rgba(63, 230, 255, 0.6);
  max-width: calc(100% - 4px);
}
.lt-progress-ticks { position: absolute; inset: 0; }
.lt-tick {
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--lt-amber);
  box-shadow: 0 0 4px rgba(255, 181, 71, 0.8);
}
.lt-progress-mark {
  position: absolute;
  top: 50%;
  width: 18px; height: 24px;
  transform: translate(-50%, -50%);
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255, 244, 201, 0.9));
}
.lt-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(23, 20, 63, 0.92);
  border: 1px solid rgba(155, 107, 255, 0.6);
  font: 800 20px/1 var(--lt-font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.lt-lamps { display: flex; align-items: center; justify-content: center; gap: 4px; }
.lt-lamp-row { display: flex; gap: 4px; align-items: center; }
.lt-lamp { width: 32px; height: 32px; object-fit: contain; }
/* 4 盏灯的局：灯一行、「4 lamps」胶囊在下一行——并排时 4 × 26 + 胶囊 ≈ 175 px，SPEC 的灯分区只有画布宽的 30%（375 宽时 112 px），
   胶囊伸出屏幕右缘、第一盏灯压到进度条上 */
.lt-lamps.has-assist { flex-direction: column; gap: 2px; }
.lt-lamps.has-assist .lt-lamp-row { gap: 3px; }
.lt-lamps.has-assist .lt-lamp { width: 21px; height: 21px; }
.lt-lamps.has-assist .lt-assist-chip { flex: none; font-size: 11px; line-height: 1.3; padding: 1px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lt-assist-chip {
  font: 700 12px/1 var(--lt-font-body);
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 216, 107, 0.18);
  border: 1px solid var(--lt-lamp-on);
  color: var(--lt-lamp-on);
  white-space: nowrap;
}
.lt-dots { display: flex; gap: 8px; align-items: center; justify-content: center; }
.lt-dot { width: 12px; height: 12px; border-radius: 50%; background: #3A3560; border: 1px solid #5B5FD6; }
.lt-dot.is-on { background: var(--lt-track-1); box-shadow: 0 0 8px rgba(98, 255, 180, 0.8); }
.lt-dot.is-done { background: var(--lt-track-0); }

.lt-stage {
  position: absolute;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  outline: none;
}
.lt-board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.lt-stage > :not(.lt-board) { position: absolute; pointer-events: none; box-sizing: border-box; }
.lt-side { position: absolute; pointer-events: none; }
.lt-side[hidden] { display: none; }
.lt-side > * { position: absolute; pointer-events: none; box-sizing: border-box; }

.lt-cars {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 14px;
  background: rgba(17, 14, 51, 0.85);
  border: 2px solid var(--tier, #C9CBEF);
  box-shadow: 0 0 10px color-mix(in srgb, var(--tier, #C9CBEF) 50%, transparent);
  font: 800 16px/1.05 var(--lt-font-display);
  white-space: nowrap;
}
.lt-cars.is-on { display: flex; }
.lt-cars.is-bump { animation: lt-bump 180ms ease-out; }
.lt-cars-row { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.lt-cars-row .lt-icon { width: 1em; height: 1em; }
.lt-cars.is-tight .lt-cars-row .lt-icon { display: none; }
.lt-mult {
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--tier, #C9CBEF);
  color: var(--lt-text-dark);
}
.lt-callout {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 16px/1 var(--lt-font-display);
  color: var(--lt-track-1);
  text-shadow: 0 1px 2px #07061A, 0 0 6px rgba(7, 6, 26, 0.9);
  opacity: 0;
  white-space: nowrap;
}
/* 竖屏的就地提示在舞台里：字号跟舞台宽（hud.mjs 写 --lt-fs），高按内容（格只 56 设计 px，窄档 ≈ 10 px 装不下一行） */
.lt-stage .lt-callout { font-size: var(--lt-fs, 16px); height: auto !important; min-height: 1.2em; }
.lt-callout[data-kind="crash"] { color: var(--lt-danger); }
.lt-callout[data-kind="late"] { color: #fff; }
.lt-callout[data-kind="late"] { white-space: normal; text-align: center; }
.lt-callout[data-kind="delivered"], .lt-callout[data-kind="gold"] { color: var(--lt-gold); }
.lt-callout.is-on { animation: lt-callout 800ms ease-out forwards; }
.lt-coach {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 16px;
  background: var(--lt-cream);
  color: var(--lt-text-dark);
  font: 800 16px/1.2 var(--lt-font-display);
  text-align: center;
  box-shadow: 0 6px 16px rgba(7, 6, 26, 0.5);
}
.lt-tip { opacity: 0; transition: opacity 200ms ease-out; }
.lt-tip.is-on { opacity: 1; }
.lt-run[data-mode="run"] .lt-tut-text { display: none; }
.lt-run[data-mode="tutorial"] .lt-tip { display: none; }
.lt-tut-text[hidden] { display: none; }
.lt-countin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(7, 6, 26, 0.55);
  border: 2px solid rgba(185, 166, 255, 0.6);
  text-shadow: 0 0 12px rgba(155, 107, 255, 0.9);
}
.lt-countin[hidden] { display: none; }
/* 预备圈 = 舞台宽的 42%（最大 220）：342×403 一档只剩 ≈ 80 px，固定 18 / 76 px 让「Prepare-se」折两行、数字顶出圈——字号跟圈走 */
.lt-countin { container-type: inline-size; }
.lt-countin-label { font: 800 clamp(10px, 15cqi, 18px)/1 var(--lt-font-display); white-space: nowrap; }
.lt-countin-num { font: 900 clamp(28px, 62cqi, 76px)/1 var(--lt-font-display); }
.lt-hand { object-fit: contain; filter: drop-shadow(0 4px 6px rgba(7, 6, 26, 0.6)); }
.lt-hand[hidden] { display: none; }

/* ───────── 横条（InlineBar：坏档 / 离线；不遮罩、不圈焦点） ───────── */
.lt-bar {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 8px 6px 12px;
  border-radius: 16px;
  background: rgba(17, 14, 51, 0.94);
  border: 2px solid var(--lt-amber);
  color: #fff;
  font: 700 14px/1.25 var(--lt-font-body);
}
/*
 * 横条按 SPEC 的 notice 矩形定高摆放（ui.mjs placeAt）。共用库在 ≤ 380 px 视口 flex-wrap，把「关闭」挤到第二行、掉出条外
 * （320 / 342 两档关闭钮落在舞台上）：这里不换行，正文按条高定字号（两行塞进条里，最小 10 px），条至少 48 px 高让 44 px 的钮在条内。
 * 两个图标是 <img> 引的线性 SVG（currentColor 描边）——<img> 继承不到 color，原样是黑的、压在深靛底上看不见：反相成白。
 */
.lt-bar { flex-wrap: nowrap; min-height: 48px; container-type: size; }
.lt-bar .gs-inline-bar__text { flex: 1; margin: 0; min-width: 0; font-size: clamp(10px, 30cqh, 14px); line-height: 1.15; }
.lt-bar .gs-inline-bar__icon { width: 28px; height: 28px; flex: none; filter: invert(1); }
.lt-bar .gs-inline-bar__actions { flex: none; width: auto; display: flex; gap: 8px; }
.lt-bar-close { min-width: 44px; min-height: 44px; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25); }
.lt-bar-close .lt-icon { filter: invert(1); }

/* ───────── 启动兜底（ui.mjs 都拿不到时） ───────── */
.lt-fallback { display: flex; align-items: center; justify-content: center; }
.lt-fallback-box { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; text-align: center; }
.lt-fallback-art { width: 120px; height: 160px; object-fit: contain; }
.lt-fallback-text { font: 700 16px/1.35 var(--lt-font-body); margin: 0; }
.lt-fallback-btn {
  min-height: 52px; min-width: 200px; display: flex; gap: 8px; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: var(--lt-track-1); color: var(--lt-text-dark); font: 800 18px/1 var(--lt-font-display);
}
.lt-fallback-btn img { width: 24px; height: 24px; }

@keyframes lt-bump { 50% { transform: scale(1.08); } }
@keyframes lt-callout {
  0% { opacity: 0; transform: translateY(6px); }
  15% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}
.lt-root.is-reduced .lt-cars.is-bump { animation: none; }
.lt-root.is-reduced .lt-callout.is-on { animation: lt-fade 800ms linear forwards; }
@keyframes lt-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lt-cars.is-bump { animation: none; }
}