/* ClashFarm Travel scene refresh — 2026.10.25 */

.travel-page {
  --travel-amber: #f0bd63;
  --travel-amber-soft: #ffe4a3;
  --travel-plum: #4b294f;
  --travel-indigo: #17182f;
  --travel-ink: #090a16;
  --travel-text: #fff2d5;
  background:
    radial-gradient(circle at 50% 7%, rgba(126, 69, 128, .28), transparent 55%),
    #080914;
}

.travel-frame {
  width: min(100%, var(--game-shell-width, 430px));
  max-width: var(--game-shell-width, 430px);
  background-color: #17172b;
  background-image:
    linear-gradient(180deg, rgba(9, 9, 25, .16) 0%, rgba(13, 13, 29, .24) 38%, rgba(7, 7, 16, .7) 100%),
    url('/assets/travel-background-v20261025-1.webp') !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow: 0 0 44px rgba(0, 0, 0, .72);
}

.travel-frame::before {
  background:
    linear-gradient(90deg, rgba(7, 7, 18, .36), transparent 20%, transparent 80%, rgba(7, 7, 18, .36)),
    linear-gradient(180deg, rgba(14, 12, 31, .14), rgba(12, 11, 26, .32) 36%, rgba(7, 7, 16, .76) 100%),
    radial-gradient(ellipse at 78% 20%, rgba(255, 170, 72, .09), transparent 42%);
}

.travel-content {
  max-width: 760px;
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

.travel-content::-webkit-scrollbar,
.travel-confirm-modal::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.travel-back-button {
  color: var(--travel-amber-soft);
  background: linear-gradient(180deg, rgba(85, 49, 72, .97), rgba(28, 23, 45, .98));
  border-color: rgba(255, 210, 125, .4);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .11),
    inset 0 -8px 14px rgba(11, 8, 24, .2),
    0 5px 14px rgba(0, 0, 0, .34);
}

.travel-title-box {
  background:
    linear-gradient(135deg, rgba(73, 40, 76, .94), rgba(23, 21, 44, .94) 64%, rgba(12, 12, 27, .94));
  border-color: rgba(255, 211, 125, .38);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .1),
    inset 0 0 18px rgba(240, 163, 70, .035),
    0 7px 18px rgba(0, 0, 0, .34);
  backdrop-filter: blur(7px);
}

.travel-title {
  color: #ffdc8e;
}

.travel-subtitle {
  color: rgba(255, 237, 207, .77);
}

.travel-message,
.travel-card {
  color: var(--travel-text);
  background:
    linear-gradient(145deg, rgba(55, 34, 67, .92), rgba(20, 20, 39, .95) 62%, rgba(10, 10, 23, .96));
  border-color: rgba(255, 206, 114, .34);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .085),
    inset 0 0 22px rgba(237, 151, 55, .025),
    0 10px 25px rgba(0, 0, 0, .39);
  backdrop-filter: blur(7px);
}

.travel-message-title,
.travel-minutes-wrap label,
.travel-confirm-title {
  color: #ffdb89;
}

.travel-reward-chip {
  color: #fff0cd;
  background: linear-gradient(180deg, rgba(77, 48, 75, .96), rgba(23, 21, 42, .97));
  border-color: rgba(255, 207, 115, .38);
}

.travel-reward-chip.xp {
  color: #e4f8d5;
  background: linear-gradient(180deg, rgba(50, 70, 60, .96), rgba(17, 29, 30, .97));
  border-color: rgba(176, 222, 158, .35);
}

.travel-message-event,
.travel-minutes-wrap,
.travel-empty-time {
  background: rgba(9, 9, 22, .56);
  border-color: rgba(255, 220, 155, .15);
}

.travel-timer {
  color: #ffd47d;
  background: linear-gradient(180deg, rgba(17, 17, 39, .94), rgba(39, 25, 49, .94));
  border-color: rgba(255, 207, 112, .5);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .09),
    inset 0 0 15px rgba(247, 163, 63, .05),
    0 6px 16px rgba(0, 0, 0, .38);
}

.travel-minute-button {
  color: #ffe4a8;
  background: linear-gradient(180deg, rgba(92, 53, 79, .98), rgba(34, 27, 50, .98));
  border-color: rgba(255, 207, 119, .38);
}

.travel-minute-button.travel-minute-jump {
  color: #dbcde2;
  background: linear-gradient(180deg, rgba(66, 51, 79, .98), rgba(25, 24, 43, .98));
  border-color: rgba(220, 198, 231, .25);
}

.travel-minute-value {
  color: #fff3dc;
  background: linear-gradient(180deg, rgba(12, 12, 29, .97), rgba(42, 29, 49, .97));
  border-color: rgba(255, 208, 117, .48);
}

.travel-action-button,
.travel-confirm-confirm {
  color: #fff2d2;
  background: linear-gradient(180deg, #a26925, #d79a38 48%, #7d491d);
  border-color: rgba(255, 229, 164, .68);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .25),
    inset 0 -9px 14px rgba(91, 42, 15, .13),
    0 5px 14px rgba(0, 0, 0, .36);
}

.travel-action-button.is-cancel,
.travel-confirm-cancel {
  color: #eee9f2;
  background: linear-gradient(180deg, #5d5066, #2b293d);
  border-color: rgba(229, 213, 235, .25);
}

.travel-confirm-overlay {
  background:
    radial-gradient(circle at 50% 34%, rgba(91, 46, 91, .25), transparent 48%),
    rgba(5, 5, 14, .8);
}

.travel-confirm-modal {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
  color: var(--travel-text);
  background: linear-gradient(145deg, rgba(67, 39, 72, .99), rgba(18, 18, 37, .99) 68%);
  border-color: rgba(255, 210, 124, .5);
}

.travel-confirm-info span {
  color: #ffd77f;
}

@media (min-width: 700px) {
  .travel-content {
    max-width: 660px;
  }
}

@media (max-height: 720px) {
  .travel-frame {
    background-position: center 35% !important;
  }
}