/* ============================================================
   旅行 · 我的 · 游戏
   ============================================================ */

/* ---------- 地图 ---------- */
.map-box{
  position:relative;width:100%;aspect-ratio:1/0.86;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(165deg,#EAF6FF 0%,#F6FBFF 50%,#FFF6FA 100%);
  border:1px solid #E3F0F7;box-shadow:var(--sh);
}
.map-svg{position:absolute;inset:0;width:100%;height:100%}
.map-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(110,195,245,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(110,195,245,.07) 1px,transparent 1px);
  background-size:26px 26px;
}
.map-pin{
  position:absolute;transform:translate(-50%,-50%);cursor:pointer;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.map-dot{
  width:11px;height:11px;border-radius:50%;background:var(--p);border:2.5px solid #fff;
  box-shadow:0 2px 8px rgba(255,111,145,.45);transition:transform .2s var(--ease);
}
.map-pin:active .map-dot{transform:scale(1.4)}
.map-pin.visited .map-dot{background:var(--mint);box-shadow:0 2px 8px rgba(79,203,168,.45)}
.map-pin.plan .map-dot{background:var(--lav);box-shadow:0 2px 8px rgba(167,139,250,.45)}
.map-pin.wish .map-dot{background:var(--sun);box-shadow:0 2px 8px rgba(255,199,95,.45)}
.map-lb{
  font-size:9.5px;font-weight:700;color:var(--ink-2);background:rgba(255,255,255,.86);
  padding:1px 5px;border-radius:100px;white-space:nowrap;
}
.map-legend{
  display:flex;gap:12px;justify-content:center;margin-top:10px;font-size:11.5px;color:var(--sub);
}
.map-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.map-stat-row{display:flex;gap:8px;margin-top:14px}

/* ---------- 目的地卡片 ---------- */
.dest-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);
  border:1px solid var(--line-2);margin-bottom:11px;background:var(--card);
}
.dest-cover{width:100%;height:118px;object-fit:cover;background:linear-gradient(140deg,#FFE8EF,#EAF6FF)}
.dest-badge{
  position:absolute;top:10px;right:10px;padding:3px 10px;border-radius:100px;
  font-size:11px;font-weight:800;backdrop-filter:blur(6px);
}
.dest-badge.visited{background:rgba(79,203,168,.94);color:#fff}
.dest-badge.plan{background:rgba(167,139,250,.94);color:#fff}
.dest-badge.wish{background:rgba(255,199,95,.96);color:#fff}
.dest-body{padding:13px 15px}
.dest-body h4{font-size:15.5px;font-weight:800}
.dest-body p{font-size:12.5px;color:var(--sub);margin-top:3px}
.dest-meta{display:flex;gap:12px;margin-top:9px;font-size:11.5px;color:var(--sub)}
.dest-meta span{display:flex;align-items:center;gap:3px}

/* ---------- 行程卡 ---------- */
.trip-card{
  display:flex;gap:12px;padding:13px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--line-2);box-shadow:var(--sh);margin-bottom:9px;position:relative;overflow:hidden;
}
.trip-card.ongoing{
  background:linear-gradient(135deg,#FFF3F8,#F2FBFF);border-color:#FFD9E6;
}
.trip-card.ongoing::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--p),var(--sky));
}
.trip-cover{
  flex:0 0 auto;width:74px;height:74px;border-radius:15px;object-fit:cover;
  background:linear-gradient(140deg,#FFE8EF,#EAF6FF);
}
.trip-main{flex:1;min-width:0}
.trip-main h4{font-size:15px;font-weight:800;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.trip-main p{font-size:12px;color:var(--sub);margin-top:3px}
.trip-foot{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}

/* 进行中提示 */
.ongoing-banner{
  border-radius:var(--r-lg);padding:15px 16px;margin-bottom:14px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,#FF8FA8,#FF6F91 45%,#B497FF);
  box-shadow:0 12px 32px rgba(255,111,145,.28);
}
.ongoing-banner::after{
  content:'';position:absolute;right:-30px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%);
}
.ob-tag{
  display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:100px;
  background:rgba(255,255,255,.26);color:#fff;font-size:11px;font-weight:800;backdrop-filter:blur(4px);
}
.ob-tag i{width:6px;height:6px;border-radius:50%;background:#fff;font-style:normal;
  animation:pulse 1.4s infinite}
.ob-title{margin-top:9px;font-size:19px;font-weight:800;color:#fff;position:relative;z-index:2}
.ob-sub{font-size:12.5px;color:rgba(255,255,255,.9);margin-top:4px;position:relative;z-index:2}
.ob-btn{
  margin-top:12px;display:inline-flex;align-items:center;gap:5px;padding:9px 17px;border-radius:100px;
  background:#fff;color:var(--p-d);font-size:13px;font-weight:800;position:relative;z-index:2;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.ob-btn svg{width:15px;height:15px}

/* ---------- 旅行基金 ---------- */
.fund-card{
  border-radius:var(--r-lg);padding:15px;background:var(--card);
  border:1px solid var(--line-2);box-shadow:var(--sh);margin-bottom:10px;
}
.fc-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.fc-emo{
  width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:20px;background:linear-gradient(140deg,#FFF6E8,#FFEEDC);
}
.fc-main{flex:1;min-width:0}
.fc-main h4{font-size:14.5px;font-weight:800}
.fc-main p{font-size:11.5px;color:var(--sub);margin-top:1px}
.fc-num{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.fc-num b{font-size:20px;font-weight:900;color:var(--p-d)}
.fc-num span{font-size:12px;color:var(--sub)}
.fc-actions{display:flex;gap:7px;margin-top:11px}
.fc-actions .btn{flex:1}

/* ---------- 花销 ---------- */
.exp-row{
  display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);
}
.exp-ico{
  width:32px;height:32px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:15px;background:var(--p-xxl);
}
.exp-main{flex:1;min-width:0}
.exp-main h5{font-size:13.5px;font-weight:700}
.exp-main p{font-size:11px;color:var(--sub)}
.exp-amt{font-size:15px;font-weight:800;color:var(--p-d)}

/* ============================================================
   我的
   ============================================================ */
.profile-hero{
  border-radius:var(--r-lg);padding:22px 18px 18px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#FFE9F0,#FFF6FA 55%,#F1E9FF);border:1px solid #FFE0EA;
}
.pf-pair{display:flex;align-items:center;justify-content:center;gap:10px}
.pf-name{margin-top:12px;font-size:18px;font-weight:800}
.pf-sub{font-size:12.5px;color:var(--sub);margin-top:4px}
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}

.set-group{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--sh)}
.set-item{
  display:flex;align-items:center;gap:12px;padding:14px 15px;background:var(--card);
  border-bottom:1px solid var(--line-2);cursor:pointer;transition:background .2s;
}
.set-item:last-child{border-bottom:none}
.set-item:active{background:var(--p-xxl)}
.si-ico{
  flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-size:16px;
}
.si-main{flex:1;min-width:0}
.si-main h5{font-size:14px;font-weight:700}
.si-main p{font-size:11.5px;color:var(--sub);margin-top:1px}
.si-val{font-size:13px;color:var(--sub);font-weight:600}
.si-arrow{color:var(--sub-2)}
.si-arrow svg{width:15px;height:15px}

/* 邀请卡 */
.invite-box{
  border-radius:var(--r-lg);padding:22px 18px;text-align:center;
  background:linear-gradient(150deg,#FFF6FA,#F4EEFF);border:1px dashed var(--p-l);
}
.invite-code{
  margin:14px 0;font-size:32px;font-weight:900;letter-spacing:6px;color:var(--p-d);
  font-family:ui-monospace,"SF Mono",Consolas,monospace;word-break:break-all;
}
.invite-qr{
  width:150px;height:150px;margin:14px auto 0;background:#fff;padding:9px;border-radius:16px;
  box-shadow:var(--sh);
}
.invite-qr canvas,.invite-qr img{width:100% !important;height:100% !important}

/* 成就 */
.ach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.ach-item{text-align:center;padding:12px 4px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--line-2);transition:.2s}
.ach-item.locked{opacity:.38;filter:grayscale(1)}
.ach-emo{font-size:24px;line-height:1;margin-bottom:5px}
.ach-name{font-size:10.5px;color:var(--sub);font-weight:600;line-height:1.35}

/* ============================================================
   小游戏
   ============================================================ */
.game-area{
  position:relative;width:100%;height:330px;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,#FFF1F7,#F6F0FF);
  border:1px solid #FFE2EE;touch-action:manipulation;
}
.game-score,.game-timer{
  position:absolute;top:12px;z-index:9;padding:5px 13px;border-radius:100px;
  background:rgba(255,255,255,.9);font-weight:800;font-size:14px;backdrop-filter:blur(4px);
}
.game-score{left:12px;color:var(--p-d)}
.game-timer{right:12px;color:var(--ink-2)}
.game-item{
  position:absolute;font-size:30px;cursor:pointer;user-select:none;z-index:5;
  filter:drop-shadow(0 3px 6px rgba(255,111,145,.28));
}
@keyframes fallDown{from{transform:translateY(-40px)}to{transform:translateY(360px)}}
@keyframes catchPop{to{transform:scale(1.7);opacity:0}}
.game-over{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(255,255,255,.93);backdrop-filter:blur(6px);z-index:20;
}
.game-over h3{font-size:21px;font-weight:800;margin-bottom:6px}

/* 翻牌 */
.flip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.flip-card{
  position:relative;aspect-ratio:1;perspective:700px;cursor:pointer;
}
.flip-inner{
  position:relative;width:100%;height:100%;transition:transform .45s var(--ease);
  transform-style:preserve-3d;
}
.flip-card.open .flip-inner,.flip-card.matched .flip-inner{transform:rotateY(180deg)}
.flip-face{
  position:absolute;inset:0;border-radius:15px;display:flex;align-items:center;justify-content:center;
  backface-visibility:hidden;font-size:29px;
}
.flip-back{
  background:linear-gradient(140deg,var(--p-l),var(--p));color:#fff;font-size:22px;
  box-shadow:0 6px 16px rgba(255,111,145,.26);
}
.flip-front{background:#fff;border:1.5px solid var(--line);transform:rotateY(180deg)}
.flip-card.matched .flip-front{background:#E8F9F2;border-color:#B6E9D6}

/* 抽签 */
.lots-box{
  border-radius:var(--r-lg);padding:26px 18px;text-align:center;
  background:linear-gradient(150deg,#FFF1F7,#F1EBFF);border:1px solid #FFE2EE;
}
.lots-q{font-size:15px;color:var(--sub);margin-bottom:18px;font-weight:600}
.lots-result{
  font-size:27px;font-weight:900;color:var(--p-d);min-height:44px;display:flex;
  align-items:center;justify-content:center;letter-spacing:1px;
}
.lots-result.rolling{animation:shake .18s infinite}

/* 游戏列表 */
.game-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.game-entry{
  border-radius:var(--r-lg);padding:16px 14px;text-align:left;position:relative;overflow:hidden;
  border:1px solid var(--line-2);box-shadow:var(--sh);transition:transform .2s var(--ease);
}
.game-entry:active{transform:scale(.97)}
.game-entry h4{font-size:15px;font-weight:800;position:relative;z-index:2}
.game-entry p{font-size:11.5px;color:var(--sub);margin-top:4px;position:relative;z-index:2;line-height:1.6}
.game-entry .ge-emo{font-size:30px;position:absolute;right:10px;bottom:6px;opacity:.35;z-index:1}
.ge-1{background:linear-gradient(140deg,#FFE9F1,#FFF6FA)}
.ge-2{background:linear-gradient(140deg,#EAF6FF,#F5FBFF)}
.ge-3{background:linear-gradient(140deg,#E7FBF3,#F2FEF9)}
.ge-4{background:linear-gradient(140deg,#FFF6E4,#FFFCF2)}
.ge-5{background:linear-gradient(140deg,#F3EDFF,#FAF7FF)}