/* ========================================
 * 游历系统 V2 样式 - 旅行青蛙风格
 * 温馨治愈、不确定性、明信片系统
 * ======================================== */

/* ──────────────────────────────────────────────
 * 明信片通知
 * ────────────────────────────────────────────── */
.youli-postcard-notification,
.youli-return-notification {
  position: fixed;
  top: 10.6667vw /* 80px */;
  right: 2.1333vw /* 16px */;
  background: linear-gradient(135deg, #faf6ee 0%, #f5ede0 100%);
  border: 1px solid rgba(180, 140, 70, 0.3);
  border-radius: 2.1333vw /* 16px */;
  padding: 1.6vw /* 12px */ 2.1333vw /* 16px */;
  display: flex;
  align-items: center;
  gap: 1.6vw /* 12px */;
  box-shadow: 0 0.5333vw /* 4px */ 2.6667vw /* 20px */ rgba(0, 0, 0, 0.15);
  z-index: 1000;
  cursor: pointer;
  animation: slideInRight 0.4s ease-out;
  max-width: 37.3333vw /* 280px */;
}

.youli-postcard-notification.fade-out,
.youli-return-notification.fade-out {
  animation: slideOutRight 0.4s ease-in forwards;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.postcard-notify-icon,
.return-notify-icon {
  font-size: 2.5vw /* 18.75px */;
  flex-shrink: 0;
}

.postcard-notify-text,
.return-notify-text {
  flex: 1;
}

.postcard-notify-title,
.return-notify-title {
  font-size: 1.2vw /* 9px */;
  font-weight: bold;
  color: #5a3e1a;
  margin-bottom: 0.2667vw /* 2px */;
}

.postcard-notify-sub,
.return-notify-sub {
  font-size: 1vw /* 7.5px */;
  color: rgba(90, 62, 26, 0.7);
}

/* ──────────────────────────────────────────────
 * 游历日记页面 V2
 * ────────────────────────────────────────────── */
.youli-empty-state {
  text-align: center;
  padding: 8vw /* 60px */ 2.6667vw /* 20px */;
  color: rgba(255, 255, 255, 0.6);
}

.youli-empty-icon {
  font-size: 5vw /* 37.5px */;
  margin-bottom: 2.1333vw /* 16px */;
  opacity: 0.8;
}

.youli-empty-title {
  font-size: 1.5vw /* 11.25px */;
  color: #c8b078;
  margin-bottom: 1.0667vw /* 8px */;
  letter-spacing: 0.1em;
}

.youli-empty-desc {
  font-size: 1.15vw /* 8.6px */;
  line-height: 1.8;
  color: rgba(200, 176, 120, 0.7);
}

/* 日记卡片 V2 */
.youli-diary-card-v2 {
  background: linear-gradient(160deg, rgba(20, 25, 40, 0.9) 0%, rgba(15, 20, 35, 0.95) 100%);
  border: 1px solid rgba(200, 176, 120, 0.2);
  border-radius: 2.1333vw /* 16px */;
  padding: 2.6667vw /* 20px */;
  margin-bottom: 2.1333vw /* 16px */;
}

.youli-diary-header {
  margin-bottom: 1.6vw /* 12px */;
  padding-bottom: 1.6vw /* 12px */;
  border-bottom: 1px solid rgba(200, 176, 120, 0.15);
}

.youli-diary-date {
  font-size: 1.05vw /* 7.9px */;
  color: rgba(200, 176, 120, 0.8);
  margin-bottom: 0.5333vw /* 4px */;
}

.youli-diary-location {
  font-size: 1.35vw /* 10px */;
  color: #c8b078;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.youli-diary-scenery {
  font-size: 1.15vw /* 8.6px */;
  color: rgba(200, 176, 120, 0.6);
  font-style: italic;
  margin-bottom: 2.1333vw /* 16px */;
  padding: 1.0667vw /* 8px */ 1.6vw /* 12px */;
  background: rgba(200, 176, 120, 0.05);
  border-radius: 1.0667vw /* 8px */;
  border-left: 0.4vw /* 3px */ solid rgba(200, 176, 120, 0.3);
}

.youli-diary-story {
  font-size: 1.25vw /* 9.4px */;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.9;
  text-align: justify;
}

/* ──────────────────────────────────────────────
 * 明信片区域
 * ────────────────────────────────────────────── */
.youli-postcards-section {
  margin-bottom: 2.1333vw /* 16px */;
}

.youli-section-title {
  font-size: 1.2vw /* 9px */;
  color: #c8b078;
  margin-bottom: 1.6vw /* 12px */;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 1.0667vw /* 8px */;
}

.youli-postcards-list {
  display: flex;
  flex-direction: column;
  gap: 1.3333vw /* 10px */;
}

.youli-postcard-item {
  background: linear-gradient(135deg, rgba(250, 246, 238, 0.95) 0%, rgba(245, 237, 224, 0.95) 100%);
  border: 1px solid rgba(180, 140, 70, 0.25);
  border-radius: 1.6vw /* 12px */;
  padding: 1.6vw /* 12px */ 2.1333vw /* 16px */;
  display: flex;
  align-items: center;
  gap: 1.6vw /* 12px */;
  cursor: pointer;
  transition: all 0.2s ease;
}

.youli-postcard-item:hover {
  transform: translateX(0.5333vw /* 4px */);
  box-shadow: 0 0.2667vw /* 2px */ 1.6vw /* 12px */ rgba(200, 176, 120, 0.2);
}

.postcard-item-stamp {
  font-size: 2.25vw /* 16.9px */;
  flex-shrink: 0;
}

.postcard-item-info {
  flex: 1;
}

.postcard-item-title {
  font-size: 1.2vw /* 9px */;
  color: #5a3e1a;
  font-weight: bold;
  margin-bottom: 0.2667vw /* 2px */;
}

.postcard-item-place {
  font-size: 1vw /* 7.5px */;
  color: rgba(90, 62, 26, 0.6);
}

/* ──────────────────────────────────────────────
 * 特产区域
 * ────────────────────────────────────────────── */
.youli-techan-section {
  margin-bottom: 2.1333vw /* 16px */;
}

.youli-techan-card {
  background: linear-gradient(135deg, rgba(200, 176, 120, 0.15) 0%, rgba(180, 160, 96, 0.08) 100%);
  border: 1px solid rgba(200, 176, 120, 0.25);
  border-radius: 2.1333vw /* 16px */;
  padding: 2.1333vw /* 16px */;
  display: flex;
  align-items: flex-start;
  gap: 2.1333vw /* 16px */;
}

.techan-emoji {
  font-size: 3.75vw /* 28px */;
  flex-shrink: 0;
  line-height: 1;
}

.techan-info {
  flex: 1;
}

.techan-name {
  font-size: 1.35vw /* 10px */;
  color: #c8b078;
  font-weight: bold;
  margin-bottom: 0.8vw /* 6px */;
}

.techan-desc {
  font-size: 1.15vw /* 8.6px */;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin-bottom: 1.3333vw /* 10px */;
}

.techan-effect {
  font-size: 1.05vw /* 7.9px */;
  color: #70d890;
  background: rgba(112, 216, 144, 0.1);
  padding: 0.8vw /* 6px */ 1.6vw /* 12px */;
  border-radius: 1.0667vw /* 8px */;
  display: inline-block;
}

/* ──────────────────────────────────────────────
 * 游历按钮动画（继承dc-style.css的基础样式，只添加动画）
 * ────────────────────────────────────────────── */
.youli-float-btn.traveling {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0.5333vw /* 4px */ 2.6667vw /* 20px */ rgba(200, 151, 58, 0.4);
  }
  50% {
    box-shadow: 0 0.5333vw /* 4px */ 4vw /* 30px */ rgba(200, 151, 58, 0.7);
  }
}

.youli-notify-bubble {
  position: absolute;
  top: -0.1667rem /* -8px */;
  right: -0.1667rem /* -8px */;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  font-size: 0.7em;
  padding: 0.5333vw /* 4px */ 1.3333vw /* 10px */;
  border-radius: 1.6vw /* 12px */;
  white-space: nowrap;
  box-shadow: 0 0.2667vw /* 2px */ 1.0667vw /* 8px */ rgba(231, 76, 60, 0.4);
  animation: bounce 1s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.0625rem /* -3px */); }
}

/* ──────────────────────────────────────────────
 * 游历弹窗（V3新版）- 750设计：更大字体，更宽弹窗
 * ────────────────────────────────────────────── */
.youli-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 4vw /* 30px */;
}

.youli-modal-content {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 3.5vw /* 26px */;
  width: 95%;
  max-width: 85vw /* 638px - 750设计更大 */;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 4vw /* 30px */ 10vw /* 75px */ rgba(0, 0, 0, 0.6);
  border: 0.4vw /* 3px */ solid rgba(200, 151, 58, 0.4);
}

.youli-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.5vw /* 26px */ 4vw /* 30px */;
  border-bottom: 0.2vw /* 1.5px */ solid rgba(200, 151, 58, 0.25);
}

.youli-modal-header h3 {
  margin: 0;
  color: #d4af5a;
  font-size: 5vw /* 37.5px - 750设计更大 */;
  font-weight: bold;
}

.youli-modal-close {
  background: none;
  border: none;
  color: #aaa;
  font-size: 7vw /* 52.5px - 750设计更大 */;
  cursor: pointer;
  padding: 0;
  width: 8vw /* 60px */;
  height: 8vw /* 60px */;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s;
  line-height: 1;
}

.youli-modal-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.youli-modal-body {
  padding: 4vw /* 30px */;
}

/* 开场动画 */
.youli-opening {
  text-align: center;
  padding: 2.6667vw /* 20px */ 0;
}

.youli-opening-video {
  width: 100%;
  height: 26.6667vw /* 200px */;
  background: linear-gradient(180deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  border-radius: 1.6vw /* 12px */;
  overflow: hidden;
  position: relative;
  margin-bottom: 2.6667vw /* 20px */;
}

.youli-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.youli-video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.youli-cloud-animation {
  position: relative;
  width: 100%;
  height: 100%;
}

.youli-cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 13.3333vw /* 100px */;
  animation: float-cloud 3s ease-in-out infinite;
}

.youli-cloud:nth-child(1) {
  width: 10.6667vw /* 80px */;
  height: 5.3333vw /* 40px */;
  top: 30%;
  left: 20%;
  animation-delay: 0s;
}

.youli-cloud:nth-child(2) {
  width: 8vw /* 60px */;
  height: 4vw /* 30px */;
  top: 50%;
  right: 20%;
  animation-delay: 1s;
}

.youli-cloud:nth-child(3) {
  width: 13.3333vw /* 100px */;
  height: 6.6667vw /* 50px */;
  top: 60%;
  left: 40%;
  animation-delay: 2s;
}

@keyframes float-cloud {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-0.2083rem /* -10px */) translateX(0.6667vw /* 5px */); }
}

.youli-opening-text {
  color: #d4af5a;
  margin-bottom: 2.6667vw /* 20px */;
}

.youli-opening-text p {
  margin: 1.0667vw /* 8px */ 0;
  font-size: 1.1em;
}

.youli-opening-sub {
  color: #888;
  font-size: 0.9em !important;
}

.youli-progress-bar {
  width: 100%;
  height: 0.5333vw /* 4px */;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.2667vw /* 2px */;
  overflow: hidden;
}

.youli-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #d4af5a 0%, #f4d03f 100%);
  transition: width 3s linear;
}

/* 结果展示 */
.youli-result .youli-modal-body {
  padding: 3.2vw /* 24px */;
}

.youli-result-destination {
  text-align: center;
  margin-bottom: 3.2vw /* 24px */;
  padding-bottom: 2.6667vw /* 20px */;
  border-bottom: 1px solid rgba(200, 151, 58, 0.2);
}

.youli-result-region {
  color: #d4af5a;
  font-size: 4vw /* 30px - 750设计更大 */;
  margin-bottom: 1.5vw /* 11px */;
}

.youli-result-place {
  color: #fff;
  font-size: 5vw /* 37.5px - 750设计更大 */;
  font-weight: bold;
  margin-bottom: 2vw /* 15px */;
}

.youli-result-scenery {
  color: #aaa;
  font-size: 3.5vw /* 26px - 750设计更大 */;
  line-height: 1.6;
}

.youli-result-techan {
  display: flex;
  align-items: center;
  gap: 2.1333vw /* 16px */;
  background: rgba(200, 151, 58, 0.1);
  padding: 2.1333vw /* 16px */;
  border-radius: 1.6vw /* 12px */;
  margin-bottom: 3.2vw /* 24px */;
}

.youli-techan-icon {
  font-size: 3em;
  flex-shrink: 0;
}

.youli-techan-info {
  flex: 1;
}

.youli-techan-name {
  color: #d4af5a;
  font-weight: bold;
  margin-bottom: 1.5vw /* 11px */;
  font-size: 4vw /* 30px - 750设计更大 */;
}

.youli-techan-desc {
  color: #bbb;
  font-size: 3.5vw /* 26px - 750设计更大 */;
  margin-bottom: 2vw /* 15px */;
  line-height: 1.5;
}

.youli-techan-bonus {
  color: #27ae60;
  font-size: 3.2vw /* 24px - 750设计更大 */;
  font-weight: bold;
}

.youli-result-actions {
  display: flex;
  gap: 1.6vw /* 12px */;
}

.youli-btn-primary,
.youli-btn-secondary {
  flex: 1;
  padding: 2.5vw /* 19px */ 4vw /* 30px */;
  border-radius: 2vw /* 15px */;
  border: none;
  cursor: pointer;
  font-size: 3.5vw /* 26px - 750设计更大 */;
  font-weight: bold;
  transition: all 0.3s;
}

.youli-btn-primary {
  background: linear-gradient(135deg, #d4af5a 0%, #c8973a 100%);
  color: #1a1a2e;
  font-weight: bold;
}

.youli-btn-primary:hover {
  transform: translateY(-0.0417rem /* -2px */);
  box-shadow: 0 0.5333vw /* 4px */ 1.6vw /* 12px */ rgba(212, 175, 90, 0.4);
}

.youli-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #888;
}

.youli-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ──────────────────────────────────────────────
 * 游历动画
 * ────────────────────────────────────────────── */
.youli-anim-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1a1f2e 0%, #0f141f 100%);
}

.youli-anim-clouds {
  position: relative;
  width: 26.6667vw /* 200px */;
  height: 13.3333vw /* 100px */;
  margin-bottom: 5.3333vw /* 40px */;
}

.youli-cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6.6667vw /* 50px */;
  animation: float-cloud 3s ease-in-out infinite;
}

.youli-cloud-1 {
  width: 10.6667vw /* 80px */;
  height: 5.3333vw /* 40px */;
  top: 2.6667vw /* 20px */;
  left: 2.6667vw /* 20px */;
  animation-delay: 0s;
}

.youli-cloud-2 {
  width: 8vw /* 60px */;
  height: 4vw /* 30px */;
  top: 6.6667vw /* 50px */;
  left: 13.3333vw /* 100px */;
  animation-delay: 1s;
}

.youli-cloud-3 {
  width: 9.3333vw /* 70px */;
  height: 4.6667vw /* 35px */;
  top: 1.3333vw /* 10px */;
  left: 16vw /* 120px */;
  animation-delay: 2s;
}

@keyframes float-cloud {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(1.3333vw /* 10px */) translateY(-0.1042rem /* -5px */); }
}

.youli-anim-text {
  font-size: 1.5em;
  color: #c8b078;
  letter-spacing: 0.2em;
  margin-bottom: 2.6667vw /* 20px */;
  animation: fade-pulse 2s ease-in-out infinite;
}

@keyframes fade-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.youli-anim-hint {
  font-size: 0.9em;
  color: rgba(200, 176, 120, 0.5);
}

.youli-anim-close-hint {
  position: absolute;
  bottom: 5.3333vw /* 40px */;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.1em;
}

/* ──────────────────────────────────────────────
 * 响应式适配
 * ────────────────────────────────────────────── */
@media (max-width: 52vw /* 390px */) {
  .youli-postcard-notification,
  .youli-return-notification {
    left: 2.1333vw /* 16px */;
    right: 2.1333vw /* 16px */;
    max-width: none;
  }
  
  .youli-diary-card-v2 {
    padding: 2.1333vw /* 16px */;
  }
  
  .youli-techan-card {
    flex-direction: column;
    text-align: center;
  }
  
  .techan-emoji {
    font-size: 4em;
  }
}