/* ==========================================================
   MoMoTown · 02 自由经营 FREEDOM TO BUILD
   桌面：左侧三条路线（勋章木牌）+ 右侧大图 + 说明
   手机：顶部三格路线切换 + 图 + 说明
   ========================================================== */

.fr-headline{font-family:'Baloo 2','Noto Sans SC',sans-serif;font-weight:800;color:var(--ink);
  font-size:clamp(22px,3.2vw,36px);line-height:1.2;letter-spacing:1px;margin:2px 0 8px;}
.fr-headline::after{content:'';display:block;width:64px;height:5px;border-radius:999px;margin-top:8px;
  background:linear-gradient(90deg,var(--gold-1),var(--sunset-1));}
.fr-lede{max-width:760px;}

.fr-wrap{display:grid;grid-template-columns:280px 1fr;gap:26px;margin-top:22px;align-items:start;}
/* 平板/手机：说明卡跨整行，排在图下 */
.fr-desc{grid-column:1 / -1;}

/* ---------- 左：路线木牌 ---------- */
.fr-routes{display:flex;flex-direction:column;gap:12px;}
.fr-route{position:relative;display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  padding:12px 14px 12px 12px;border:3px solid var(--ink);border-radius:20px;cursor:pointer;font-family:inherit;color:var(--ink);
  background:linear-gradient(180deg,#FFFDF8,#FFF1DC);box-shadow:0 5px 0 rgba(92,61,46,.28);
  transition:transform .3s var(--bounce),background .3s,box-shadow .3s;}
.fr-route::before{content:'';position:absolute;left:5px;right:5px;top:3px;height:30%;border-radius:16px 16px 45% 45%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none;}
.fr-route>*{position:relative;z-index:1;}
.fr-route:hover{transform:translateX(6px);}
.fr-route.active{background:linear-gradient(180deg,#FFF6DF,#FFE3AE);box-shadow:0 5px 0 rgba(92,61,46,.28),0 0 0 4px rgba(255,214,120,.55);}
.fr-route.active .fr-route-arr{background:var(--ink);color:#FFF3E0;}
.fr-medal{flex:0 0 auto;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--ink);
  box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.92),inset 0 -4px 0 rgba(0,0,0,.09),0 3px 0 rgba(92,61,46,.3);position:relative;}
.fr-medal::before{content:'';position:absolute;left:22%;top:12%;width:34%;height:20%;border-radius:50%;
  background:rgba(255,255,255,.75);transform:rotate(-25deg);pointer-events:none;}
.fr-medal svg{width:27px;height:27px;position:relative;z-index:1;}
.m-market{background:radial-gradient(circle at 35% 30%,#FFF0F4,var(--peach-1) 55%,var(--peach-2));}
.m-brand{background:radial-gradient(circle at 35% 30%,#FFF3E0,#FFB86B 55%,var(--sunset-1));}
.m-trade{background:radial-gradient(circle at 35% 30%,#EFF8EC,var(--moss-1) 55%,var(--moss-2));}
.m-town{background:radial-gradient(circle at 35% 30%,#EEF8FF,#8FD3FA 55%,#5DB6EE);}
.fr-route-txt{display:flex;flex-direction:column;line-height:1.1;flex:1;min-width:0;}
.fr-route-txt b{font-size:17px;font-weight:900;}
.fr-route-txt small{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:10px;letter-spacing:1.6px;color:var(--sunset-2);margin-top:3px;}
.fr-route-arr{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(92,61,46,.08);color:var(--ink);transition:background .3s,color .3s;}
.fr-route-arr .ico{width:14px;height:14px;}

/* ---------- 右：大图 + 说明 ---------- */
.fr-stage{min-width:0;}
.fr-canvas{position:relative;aspect-ratio:16/9;border:4px solid var(--ink);border-radius:26px;overflow:hidden;background:#FFF6E8;
  box-shadow:0 8px 0 rgba(92,61,46,.35);}
.fr-canvas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);transition:opacity .55s ease,transform .8s var(--bounce);}
.fr-canvas img.show{opacity:1;transform:scale(1);}
.fr-canvas img{object-position:center 45%;}
.fr-step{position:absolute;right:14px;top:12px;z-index:2;font-size:12px;font-weight:800;letter-spacing:2px;color:var(--ink);
  background:linear-gradient(180deg,#FFFDF8,#FFF1DC);border:2.5px solid var(--ink);border-radius:999px;padding:4px 12px;
  box-shadow:0 3px 0 rgba(92,61,46,.28);}
.fr-desc{margin-top:12px;padding:12px 18px 14px;border:3px solid var(--ink);border-radius:22px;position:relative;
  background:linear-gradient(180deg,#FFFDF8,#FFF1DC);box-shadow:0 5px 0 rgba(92,61,46,.28);}
.fr-desc::before{content:'';position:absolute;left:5px;right:5px;top:3px;height:30%;border-radius:18px 18px 45% 45%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none;}
.fr-desc>*{position:relative;z-index:1;}
.fr-desc h4{font-size:22px;font-weight:900;color:var(--ink);}
.fr-desc p{font-family:'Noto Sans SC';font-size:14px;line-height:1.75;margin-top:6px;color:var(--ink);}
.fr-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.fr-tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--ink);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-1));border:2px solid var(--ink);border-radius:999px;padding:3px 11px;
  box-shadow:0 2px 0 rgba(92,61,46,.3);}
.fr-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--sunset-1);border:1.5px solid var(--ink);}
.fr-detail{font-size:12.5px!important;opacity:.78;margin-top:10px!important;padding-top:10px;border-top:2px dashed rgba(92,61,46,.25);}
.fr-desc.swap{animation:frSwap .45s ease;}
@keyframes frSwap{0%{opacity:.35;transform:translateY(6px);}100%{opacity:1;transform:none;}}

/* ---------- iPad ---------- */
@media (min-width:1025px){
  /* 桌面：整块 ≤ 一屏（约 700px）——说明卡放到路线列下方，图占满右侧 */
  .fr-wrap{grid-template-columns:260px 1fr;grid-template-rows:auto auto;}
  .fr-routes{grid-row:1;}
  .fr-stage{grid-row:1 / span 2;}
  .fr-desc{grid-column:1;grid-row:2;margin-top:0;padding:10px 14px 12px;}
  .fr-desc h4{font-size:17px;}
  .fr-desc p{font-size:12.5px;line-height:1.55;margin-top:4px;}
  .fr-tags{margin-top:6px;gap:5px;}
  .fr-tag{font-size:11px;padding:2px 9px;}
  .fr-detail{display:none;}
  .fr-stage{align-self:stretch;}
  .fr-canvas{aspect-ratio:auto;height:100%;min-height:340px;}
  .fr-route{padding:7px 12px;gap:10px;}
  .fr-medal{width:42px;height:42px;}
  .fr-medal svg{width:22px;height:22px;}
  .fr-route-txt b{font-size:14.5px;}
  .fr-routes{gap:8px;}
  .fr-headline{font-size:clamp(20px,2.4vw,28px);margin:0 0 6px;}
  .fr-headline::after{margin-top:6px;height:4px;}
  .fr-lede{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px;}
  .fr-wrap{margin-top:12px;gap:16px 22px;}
}
@media (max-width:1024px){
  .fr-wrap{grid-template-columns:250px 1fr;gap:18px;}
  .fr-medal{width:48px;height:48px;}
  .fr-medal svg{width:24px;height:24px;}
  .fr-route-txt b{font-size:15.5px;}
}

/* ---------- 手机 ---------- */
@media (max-width:760px){
  .fr-headline{font-size:20px;margin:0 0 6px;}
  .fr-headline::after{width:44px;height:4px;margin-top:6px;}
  .fr-wrap{grid-template-columns:1fr;gap:10px;margin-top:12px;}
  .fr-routes{flex-direction:row;gap:6px;}
  .fr-route{flex:1 1 0;min-width:0;flex-direction:column;align-items:center;gap:4px;text-align:center;
    padding:8px 4px 7px;border-width:2.5px;border-radius:16px;box-shadow:0 3px 0 rgba(92,61,46,.28);}
  .fr-route:hover{transform:none;}
  .fr-route::before{height:28%;border-radius:13px 13px 45% 45%;}
  .fr-medal{width:38px;height:38px;border-width:2.5px;}
  .fr-medal svg{width:22px;height:22px;}
  .fr-route-txt{align-items:center;}
  .fr-route-txt b{font-size:11.5px;}
  .fr-route-txt small{font-size:8px;letter-spacing:.5px;margin-top:2px;white-space:nowrap;}
  .fr-route-arr{display:none;}
  .fr-canvas{border-width:3px;border-radius:16px;box-shadow:0 4px 0 rgba(92,61,46,.3);}
  .fr-step{right:8px;top:8px;font-size:10px;padding:3px 9px;border-width:2px;}
  .fr-desc{margin-top:10px;padding:12px 14px 13px;border-width:2.5px;border-radius:16px;box-shadow:0 3px 0 rgba(92,61,46,.28);}
  .fr-desc h4{font-size:16.5px;}
  .fr-desc p{font-size:12.5px;line-height:1.65;margin-top:4px;}
  .fr-tags{gap:6px;margin-top:8px;}
  .fr-tag{font-size:10.5px;padding:2px 9px;border-width:2px;}
  .fr-detail{font-size:11.5px!important;margin-top:8px!important;padding-top:8px;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
}