/* ========================================
   旅游 Loading 动画 — 水墨·春涧
   风格：古风水墨 + 现代小清新
   意境：有山有水、瀑布河流、城市剪影
         春光明媚、亲子出游、微风拂柳
   ======================================== */

#travel-loader {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99999;
  /* 天穹 → 晨曦 → 远山 → 青绿大地 */
  background: linear-gradient(180deg,
    #e8f2f8 0%,
    #dceef5 6%,
    #f2efe0 15%,
    #f8f0d5 24%,
    #efe4c8 33%,
    #dce8cc 44%,
    #c8dcb8 55%,
    #b0c8a0 66%,
    #98b488 76%,
    #7a9c70 86%,
    #5c7c58 95%,
    #3d5c3d 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  font-family: 'STKaiti','KaiTi','楷体','STSong','SimSun','宋体','PingFang SC','Microsoft YaHei',sans-serif;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#travel-loader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ============================================
   1. 太阳 —— 温暖金阳 + 光芒扩散 + 射线旋转
   ============================================ */
.tl-sun-wrap {
  position: absolute;
  top: 5%; right: 14%;
  width: 100px; height: 100px;
  z-index: 2;
}
.tl-sun {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 42%,
    rgba(255,245,210,1) 0%,
    rgba(255,225,130,0.98) 15%,
    rgba(255,200,80,0.9) 35%,
    rgba(250,175,40,0.7) 60%,
    rgba(240,150,20,0.3) 85%,
    rgba(225,130,10,0.05) 100%
  );
  box-shadow:
    0 0 25px rgba(255,220,100,0.5),
    0 0 60px rgba(255,190,60,0.35),
    0 0 110px rgba(255,160,30,0.2),
    0 0 180px rgba(255,140,20,0.1);
  animation: sunPulse 4s ease-in-out infinite;
  position: relative;
}
/* 内层光晕扩散 */
.tl-sun::before {
  content: '';
  position: absolute;
  top: -40%; left: -40%;
  width: 180%; height: 180%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,230,120,0.45) 0%,
    rgba(255,200,60,0.25) 30%,
    rgba(255,180,40,0.1) 55%,
    rgba(255,150,20,0.02) 75%,
    transparent 100%
  );
  animation: glowExpandInner 3s ease-in-out infinite;
  pointer-events: none;
}
/* 外层光晕扩散 */
.tl-sun::after {
  content: '';
  position: absolute;
  top: -70%; left: -70%;
  width: 240%; height: 240%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,210,80,0.3) 0%,
    rgba(255,180,40,0.15) 30%,
    rgba(255,150,20,0.05) 55%,
    rgba(255,120,10,0.01) 72%,
    transparent 100%
  );
  animation: glowExpandOuter 5s ease-in-out infinite 1s;
  pointer-events: none;
}
@keyframes sunPulse {
  0%, 100% {
    transform: scale(0.95);
    box-shadow:
      0 0 25px rgba(255,220,100,0.5),
      0 0 60px rgba(255,190,60,0.35),
      0 0 110px rgba(255,160,30,0.2),
      0 0 180px rgba(255,140,20,0.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow:
      0 0 35px rgba(255,230,120,0.7),
      0 0 80px rgba(255,200,80,0.5),
      0 0 140px rgba(255,170,40,0.32),
      0 0 220px rgba(255,150,30,0.18);
  }
}
@keyframes glowExpandInner {
  0%, 100% {
    opacity: 0.55;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.35);
  }
}
@keyframes glowExpandOuter {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.45);
  }
}



/* ============================================
   2. 白云 —— 轻盈飘动
   ============================================ */
.tl-cloud {
  position: absolute;
  background: rgba(255,255,255,0.75);
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  filter: blur(3px);
}
.tl-cloud::before,
.tl-cloud::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.75);
  border-radius: 50%;
}
.tl-cloud.c1 {
  top: 10%; left: -10%;
  width: 90px; height: 35px;
  animation: cloudFloat 22s linear infinite;
}
.tl-cloud.c1::before { width: 45px; height: 45px; left: 12px; top: -18px; }
.tl-cloud.c1::after  { width: 35px; height: 35px; left: 38px; top: -10px; }

.tl-cloud.c2 {
  top: 16%; left: -15%;
  width: 120px; height: 42px;
  animation: cloudFloat 28s linear infinite 7s;
}
.tl-cloud.c2::before { width: 55px; height: 55px; left: 18px; top: -22px; }
.tl-cloud.c2::after  { width: 42px; height: 42px; left: 50px; top: -14px; }

.tl-cloud.c3 {
  top: 8%; left: -18%;
  width: 75px; height: 30px;
  animation: cloudFloat 25s linear infinite 14s;
}
.tl-cloud.c3::before { width: 38px; height: 38px; left: 10px; top: -14px; }
.tl-cloud.c3::after  { width: 28px; height: 28px; left: 30px; top: -8px; }

.tl-cloud.c4 {
  top: 13%; left: -12%;
  width: 105px; height: 38px;
  animation: cloudFloat 30s linear infinite 3s;
}
.tl-cloud.c4::before { width: 50px; height: 50px; left: 15px; top: -20px; }
.tl-cloud.c4::after  { width: 38px; height: 38px; left: 42px; top: -12px; }

@keyframes cloudFloat {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 200px)); }
}

/* ============================================
   3. 飞鸟 —— 远处天空剪影
   ============================================ */
.tl-birds { position: absolute; top: 12%; left: 20%; z-index: 4; pointer-events: none; }
.tl-bird {
  position: absolute;
  width: 14px; height: 6px;
  animation: birdFly 6s ease-in-out infinite;
}
.tl-bird::before,
.tl-bird::after {
  content: ''; position: absolute; top: 0;
  width: 8px; height: 6px;
  border-top: 2px solid rgba(80,70,55,0.5);
  border-radius: 50%;
}
.tl-bird::before { left: 0; transform: rotate(-8deg); }
.tl-bird::after  { right: 0; transform: rotate(8deg); }
.tl-bird.b1 { top: 0; left: 0; animation-delay: 0s; }
.tl-bird.b2 { top: 8px; left: 25px; animation-delay: 2s; }
.tl-bird.b3 { top: 5px; left: 50px; animation-delay: 4s; }
.tl-bird.b4 { top: -4px; left: 35px; animation-delay: 1.5s; }
@keyframes birdFly {
  0%, 100% { transform: translate(0, 0); opacity: 0.6; }
  25% { transform: translate(12px, -8px); opacity: 0.8; }
  50% { transform: translate(20px, -3px); opacity: 0.7; }
  75% { transform: translate(8px, 5px); opacity: 0.5; }
}

/* ============================================
   4. 水墨远山 —— 4层淡彩山峦
   ============================================ */
.tl-mountains {
  position: absolute; bottom: 24%; left: 0; width: 100%; height: 52%;
  pointer-events: none; z-index: 4;
}
.tl-mt {
  position: absolute; bottom: 0; width: 100%;
}
/* 最远层：淡烟青 */
.tl-mt.m4 {
  height: 32%;
  background: linear-gradient(180deg,
    rgba(170,190,200,0.28) 0%,
    rgba(155,178,190,0.38) 40%,
    rgba(140,165,178,0.32) 100%);
  clip-path: polygon(
    0% 100%, 4% 68%, 8% 74%, 12% 60%, 16% 66%, 20% 54%, 24% 58%,
    28% 48%, 32% 55%, 36% 45%, 40% 52%, 44% 42%, 48% 48%,
    52% 40%, 56% 46%, 60% 38%, 64% 43%, 68% 50%, 72% 42%,
    76% 48%, 80% 40%, 84% 48%, 88% 42%, 92% 50%, 96% 44%, 100% 48%
  );
  animation: mtFar 15s ease-in-out infinite;
}
/* 第三层：薄青绿 */
.tl-mt.m3 {
  height: 42%;
  background: linear-gradient(180deg,
    rgba(140,170,155,0.4) 0%,
    rgba(125,158,142,0.5) 35%,
    rgba(108,145,128,0.42) 100%);
  clip-path: polygon(
    0% 100%, 5% 55%, 9% 62%, 14% 48%, 18% 55%, 23% 42%, 28% 48%,
    33% 38%, 38% 44%, 42% 35%, 47% 40%, 52% 32%, 57% 38%,
    62% 44%, 66% 35%, 70% 42%, 75% 34%, 79% 40%, 83% 34%,
    88% 42%, 92% 36%, 96% 44%, 100% 40%
  );
  animation: mtMid 16s ease-in-out infinite 3s;
}
/* 第二层：青翠山 */
.tl-mt.m2 {
  height: 48%;
  background: linear-gradient(180deg,
    rgba(110,150,128,0.52) 0%,
    rgba(95,140,112,0.6) 30%,
    rgba(80,128,98,0.55) 70%,
    rgba(65,115,85,0.48) 100%);
  clip-path: polygon(
    0% 100%, 3% 52%, 8% 58%, 13% 44%, 18% 50%, 22% 38%, 26% 44%,
    31% 34%, 36% 40%, 41% 30%, 47% 36%, 52% 28%, 57% 34%,
    61% 40%, 66% 32%, 70% 38%, 75% 30%, 80% 36%, 84% 30%,
    89% 38%, 93% 32%, 97% 40%, 100% 35%
  );
  animation: mtNear 18s ease-in-out infinite 6s;
}
/* 最近层：墨绿近山 */
.tl-mt.m1 {
  height: 38%;
  background: linear-gradient(180deg,
    rgba(70,115,85,0.6) 0%,
    rgba(55,100,70,0.68) 30%,
    rgba(42,88,58,0.62) 70%,
    rgba(30,75,45,0.55) 100%);
  clip-path: polygon(
    0% 100%, 4% 50%, 9% 56%, 14% 44%, 20% 49%, 25% 40%, 30% 45%,
    35% 36%, 41% 42%, 46% 32%, 52% 38%, 57% 30%, 62% 35%,
    67% 42%, 72% 34%, 77% 40%, 82% 32%, 87% 38%, 92% 42%,
    96% 34%, 100% 40%
  );
  animation: mtFront 17s ease-in-out infinite 9s;
}
@keyframes mtFar  { 0%,100%{opacity:.28} 50%{opacity:.40} }
@keyframes mtMid  { 0%,100%{opacity:.42} 50%{opacity:.55} }
@keyframes mtNear { 0%,100%{opacity:.55} 50%{opacity:.68} }
@keyframes mtFront { 0%,100%{opacity:.62} 50%{opacity:.76} }

/* ============================================
   5. 天空中的飞机 —— 斜飞远去
   ============================================ */
.tl-airplane {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  left: 22%;
  bottom: 62%;
  animation: planeFly 15s ease-in infinite 3s;
}
/* 尾迹云（机身 ::after） */
.tl-airplane::after {
  content: '';
  position: absolute;
  right: 100%;
  top: 7px;
  width: 160px;
  height: 5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.32) 15%,
    rgba(255,255,255,0.55) 40%,
    rgba(255,255,255,0.3) 75%,
    transparent 100%
  );
  border-radius: 3px;
  filter: blur(2.5px);
  transform: rotate(-2deg);
  animation: contrailPulse 3s ease-in-out infinite;
}
@keyframes contrailPulse {
  0%, 100% { opacity: .55; width: 160px; }
  50% { opacity: .78; width: 200px; }
}

/* 机身 */
.tl-airplane-body {
  width: 55px;
  height: 12px;
  background: linear-gradient(90deg,
    rgba(245,248,252,0.95) 0%,
    rgba(255,255,255,0.92) 35%,
    rgba(235,240,250,0.88) 75%,
    rgba(200,210,228,0.8) 100%
  );
  border-radius: 8px 3px 3px 8px;
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
/* 舷窗亮点 */
.tl-airplane-body::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 12px;
  width: 7px;
  height: 4px;
  background: rgba(140,170,210,0.5);
  border-radius: 2px;
}
/* 机翼 */
.tl-airplane-wing {
  position: absolute;
  top: 10px;
  left: 18px;
  width: 36px;
  height: 20px;
  background: linear-gradient(180deg,
    rgba(230,240,252,0.88) 0%,
    rgba(200,218,240,0.82) 45%,
    rgba(220,235,248,0.86) 100%
  );
  border-radius: 3px 3px 2px 2px;
  /* 透视微斜 */
  transform: perspective(12px) rotateX(6deg);
  box-shadow: 0 0 3px rgba(255,255,255,0.5);
}
/* 尾翼 */
.tl-airplane-tail {
  position: absolute;
  right: 2px;
  top: -12px;
  width: 6px;
  height: 22px;
  background: linear-gradient(180deg,
    rgba(240,248,255,0.88) 0%,
    rgba(200,218,240,0.82) 50%,
    rgba(230,242,252,0.85) 100%
  );
  border-radius: 2px 0 0 2px;
}

@keyframes planeFly {
  0% {
    transform: translate(0, 0) rotate(-20deg);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translate(-38vw, -46vh) rotate(-23deg);
    opacity: 0;
  }
}


/* ============================================
   9. 岸边小花小草
   ============================================ */
.tl-shore {
  position: absolute; bottom: 20%; left: 0; width: 100%;
  z-index: 7; pointer-events: none;
  height: 30px;
}
.tl-grass {
  position: absolute; bottom: 0;
  width: 3px;
  border-radius: 0 0 50% 0;
  transform-origin: bottom center;
  animation: grassSway 3s ease-in-out infinite;
}
.tl-grass:nth-child(odd) {
  background: rgba(100,155,80,0.55);
}
.tl-grass:nth-child(even) {
  background: rgba(120,170,95,0.5);
}
@keyframes grassSway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
/* 小花朵 */
.tl-flower {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  animation: flowerBob 2.5s ease-in-out infinite;
}
.tl-flower:nth-child(3n)  { background: #f8c8d0; box-shadow: 0 0 3px #f0a0b0; }
.tl-flower:nth-child(3n+1){ background: #ffe8a0; box-shadow: 0 0 3px #f0d060; }
.tl-flower:nth-child(3n+2){ background: #f0d0d8; box-shadow: 0 0 3px #e8a8b8; }
@keyframes flowerBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ============================================
   11. 山路 & 巴士
   ============================================ */
.tl-road-wrap {
  position: absolute; bottom: 4%; left: 0; width: 100%; height: 15%;
  z-index: 9; pointer-events: none; overflow: visible;
}
.tl-road-svg {
  width: 100%; height: 100%; overflow: visible;
}
/* 路基外轮廓 */
.tl-road-base-outline {
  fill: none;
  stroke: rgba(160,135,105,0.18);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 路面底色 */
.tl-road-base {
  fill: none;
  stroke: rgba(185,155,120,0.28);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 进度亮线 */
.tl-road-fill {
  fill: none;
  stroke: url(#tl-road-grad);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(180,140,80,0.55));
}
/* 拖尾光点 */
.tl-trail-dot { pointer-events: none; }
.tl-trail-dot.td1 { fill: #f5d080; r: 4.5; opacity: 0.9; filter: drop-shadow(0 0 5px rgba(240,200,120,0.7)); }
.tl-trail-dot.td2 { fill: #e8c060; r: 3.5; opacity: 0.7; filter: drop-shadow(0 0 4px rgba(220,180,100,0.5)); }
.tl-trail-dot.td3 { fill: #d8a840; r: 2.8; opacity: 0.52; filter: drop-shadow(0 0 3px rgba(200,160,80,0.4)); }
.tl-trail-dot.td4 { fill: #c89028; r: 2.2; opacity: 0.36; filter: drop-shadow(0 0 2px rgba(180,140,60,0.3)); }
.tl-trail-dot.td5 { fill: #b07818; r: 1.8; opacity: 0.22; filter: drop-shadow(0 0 1px rgba(160,120,40,0.2)); }

/* 光标 */
.tl-route-cursor {
  fill: #fff;
  filter: drop-shadow(0 0 8px rgba(220,180,100,0.8)) drop-shadow(0 0 14px rgba(200,150,80,0.45));
}

/* 巴士 */
.tl-bus-group {
  position: absolute; z-index: 10; pointer-events: none;
  transition: left 0.3s ease-out;
}
.tl-bus-body {
  width: 48px; height: 26px;
  background: linear-gradient(180deg, #f8f0e0, #e8d5b0);
  border: 2px solid #c8a878;
  border-radius: 6px 6px 3px 3px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.tl-bus-body::before {
  content: '';
  position: absolute; top: -5px; left: 3px;
  width: 28px; height: 7px;
  background: rgba(255,255,255,0.4);
  border-radius: 3px 3px 0 0;
}
.tl-bus-window {
  position: absolute; top: 4px; left: 5px;
  width: 12px; height: 9px;
  background: #d8eaf5;
  border-radius: 2px;
  box-shadow: 16px 0 0 0 #d8eaf5, 32px 0 0 0 #d8eaf5;
}
.tl-bus-wheel {
  position: absolute; bottom: -6px;
  width: 10px; height: 10px;
  background: #4a3828;
  border-radius: 50%;
  border: 2px solid #8b7355;
  animation: whSpin 1.8s linear infinite;
}
.tl-bus-wheel.left { left: 6px; }
.tl-bus-wheel.right { right: 6px; }
@keyframes whSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================
   12. 路径标记点
   ============================================ */
.tl-road-markers {
  position: absolute; bottom: 11%; left: 0; width: 100%; height: 50px;
  z-index: 10; pointer-events: none;
}
.tl-road-pin {
  position: absolute; bottom: 0;
  width: 36px; height: 36px;
  border-radius: 8px;
  transform: rotate(45deg);
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
              filter 0.5s ease, box-shadow 0.5s ease;
  display: flex; align-items: center; justify-content: center;
  filter: saturate(0.4) brightness(0.85);
  box-shadow: 2px 2px 6px rgba(0,0,0,0.08);
}
.tl-road-pin .pin-icon {
  transform: rotate(-45deg);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.tl-road-pin.p1 { left: 10%; bottom: 16px; background: #c4a078; }
.tl-road-pin.p2 { left: 31%; bottom: 12px; background: #88b898; }
.tl-road-pin.p3 { left: 52%; bottom: 18px; background: #78a0b8; }
.tl-road-pin.p4 { left: 73%; bottom: 14px; background: #b89090; }
.tl-road-pin.p5 { left: 90%; bottom: 15px; background: #c4a060; }

.tl-road-pin.lit {
  filter: saturate(1) brightness(1.2);
  transform: rotate(45deg) scale(1.28);
  box-shadow: 0 0 18px rgba(200,160,80,0.55), 2px 2px 8px rgba(0,0,0,0.1);
  animation: pinPop 0.55s ease-out;
}
@keyframes pinPop {
  0% { transform: rotate(45deg) scale(1); }
  35% { transform: rotate(45deg) scale(1.5); }
  70% { transform: rotate(45deg) scale(1.18); }
  100% { transform: rotate(45deg) scale(1.28); }
}

/* ============================================
   13. 城市名弹窗
   ============================================ */
.tl-city-popup {
  position: absolute;
  bottom: 22%;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.55s cubic-bezier(0.34,1.56,0.64,1);
}
.tl-city-popup.show {
  opacity: 1;
  transform: translateY(0);
}
.tl-city-popup-inner {
  background: rgba(45,38,30,0.88);
  color: #f8eed8;
  padding: 7px 18px;
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: 2px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  border: 1px solid rgba(210,175,130,0.25);
  position: relative;
  font-family: 'STKaiti','KaiTi','楷体','STSong','SimSun','宋体','PingFang SC',sans-serif;
}
.tl-city-popup-inner::after {
  content: '';
  position: absolute; bottom: -7px; left: 50%;
  margin-left: -7px;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(45,38,30,0.88);
}

/* ============================================
   15. 中央文字区
   ============================================ */
.tl-text {
  text-align: center; position: relative; z-index: 11;
  margin-top: 5%;
}
.tl-title {
  display: flex; justify-content: center; gap: 4px;
  margin-bottom: 10px;
}
.tl-title span {
  display: inline-block;
  font-size: 36px; font-weight: 700;
  color: rgba(55,40,28,0.85);
  text-shadow: 0 1px 4px rgba(180,150,110,0.25);
  animation: titleChar 2.4s ease-in-out infinite;
  animation-delay: var(--cw);
}
.tl-title .tl-sep {
  font-size: 22px;
  color: rgba(160,120,70,0.65);
  width: 12px;
  animation: sepBlink 2.6s ease-in-out infinite;
}
@keyframes titleChar {
  0%, 100% { transform: translateY(0); opacity: 0.88; }
  30% { transform: translateY(-7px); opacity: 1; }
  55% { transform: translateY(0); opacity: 0.82; }
}
@keyframes sepBlink {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  55% { opacity: 0.75; transform: scale(1.2); }
}
.tl-subtitle {
  font-size: 15px; color: rgba(65,48,32,0.55);
  letter-spacing: 6px; margin-bottom: 16px;
  animation: subPulse 3s ease-in-out infinite;
}
@keyframes subPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.75; }
}
.tl-dots {
  display: flex; justify-content: center; gap: 10px; margin-bottom: 18px;
}
.tl-dots span {
  width: 7px; height: 7px;
  background: rgba(90,70,45,0.45);
  border-radius: 50%;
  animation: dotBreathe 1.5s ease-in-out infinite;
}
.tl-dots span:nth-child(2) { animation-delay: 0.3s; }
.tl-dots span:nth-child(3) { animation-delay: 0.6s; }
@keyframes dotBreathe {
  0%, 80%, 100% { transform: scale(0.45); opacity: 0.25; }
  40% { transform: scale(1.35); opacity: 0.75; }
}

/* 进度条 */
.tl-progress-wrap {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.tl-progress {
  position: relative;
  width: 280px; height: 8px;
  background: rgba(80,60,40,0.08);
  border-radius: 10px; overflow: visible;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.tl-progress-bar {
  position: absolute; top: 0; left: 0;
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #a0c888, #80b868, #d0b878, #b89848);
  border-radius: 10px;
  transition: width 0.2s linear;
  box-shadow: 0 0 8px rgba(160,140,100,0.4);
}
.tl-progress-bar.full {
  box-shadow: 0 0 18px rgba(180,150,100,0.65), 0 0 32px rgba(140,120,80,0.35);
}
.tl-progress-plane {
  position: absolute; top: -12px;
  font-size: 12px; color: rgba(140,110,80,0.85);
  transform: translateX(-50%);
  transition: left 0.2s linear;
}
.tl-progress-text {
  font-size: 18px; font-weight: 700;
  color: rgba(55,40,28,0.65);
  min-width: 44px; text-align: left;
  letter-spacing: 1px;
  transition: color 0.3s;
}
.tl-progress-text.done {
  color: #a08048;
  animation: doneGlow 0.6s ease-in-out;
}
@keyframes doneGlow {
  0%, 100% { text-shadow: 0 0 6px rgba(140,120,80,0.25); }
  50% { text-shadow: 0 0 22px rgba(180,150,100,0.65), 0 0 40px rgba(180,150,100,0.3); }
}

/* ============================================
   16. 响应式
   ============================================ */
@media (max-width: 768px) {
  .tl-sun-wrap { width: 70px; height: 70px; top: 5%; right: 8%; }
  .tl-title span { font-size: 26px; }
  .tl-subtitle { font-size: 13px; letter-spacing: 4px; }
  .tl-progress { width: 180px; }
  .tl-progress-text { font-size: 15px; }
  .tl-bus-body { width: 38px; height: 22px; }
  .tl-bus-window { width: 10px; height: 7px; box-shadow: 13px 0 0 0 #d8eaf5, 26px 0 0 0 #d8eaf5; }
  .tl-road-wrap { bottom: 2%; height: 11%; }
  .tl-road-markers { bottom: 8%; }
  .tl-mountains { bottom: 26%; }
  .tl-city-popup-inner { font-size: 12px; padding: 5px 13px; letter-spacing: 1px; }
  .tl-road-pin { width: 28px; height: 28px; }
  .tl-road-pin .pin-icon { font-size: 11px; }
  .tl-airplane { left: 10%; bottom: 55%; }
  .tl-airplane-body { width: 36px; height: 8px; }
  .tl-airplane-wing { width: 22px; height: 13px; left: 10px; }
  .tl-airplane-tail { width: 4px; height: 14px; top: -8px; }
}