/* ==========================================================
   MoMoTown · 勋章皮肤层（badge.css）
   加载顺序最后：style → responsive → ui → badge
   目标：把全站“平面框”统一成世界观三枚勋章的语言——
     · 面板：奶油→浅木渐变 + 墨色描边 + 厚底影 + 顶部玻璃高光
     · 图标：彩色圆徽（径向渐变 + 虚线内圈 + 底部暗边）
   本文件只改观感（背景 / 边框 / 阴影 / 图标底座），不改布局尺寸。
   ========================================================== */

:root{
  /* 干净版配色：面板更亮、阴影只保留“实底”不要模糊大影，避免发灰发脏 */
  --wood-1:#FFFDF8; --wood-2:#FFF1DC;
  --panel-shadow:0 5px 0 rgba(92,61,46,.28);
  --panel-shadow-sm:0 3px 0 rgba(92,61,46,.28);
  --sky-1:#EEF8FF; --sky-2:#8FD3FA; --sky-3:#5DB6EE;
  --sand-1:#FFF4E0; --sand-2:#FFD9A0; --sand-3:#F2B45F;
  --lav-1:#F4F0FF; --lav-2:#CFC2FA; --lav-3:#A996F0;
  --ring:rgba(255,255,255,.92);
}

/* ---------- 通用：木牌面板 ---------- */
.hstat,.card,.rar,.sys,.pstep,.tl-item,.reserve-card,.tcard,.rank-card,.rank-row,
.canvas .hud-stat,.canvas .phase-tag,.openable .lid-note,.deal-toast,.nav .logo,
.lang-toggle,.sfx-toggle,.mnav,.field input,.field select{
  background:linear-gradient(180deg,var(--wood-1),var(--wood-2));
  border-color:var(--ink);
  box-shadow:var(--panel-shadow);
}
.card,.sys,.tl-item{border-width:3px;border-style:solid;}
/* 仅非绝对/固定定位的面板需要 relative 承接高光伪元素；.tcard 本身是 absolute，.mnav/开关是 fixed，不动 */
.hstat,.card,.rar,.sys,.pstep,.tl-item,.reserve-card,.rank-card,.rank-row{position:relative;}
.rank-row{border-width:2px;box-shadow:0 2.5px 0 rgba(92,61,46,.25);}
.tcard::after{background:var(--wood-2);}
/* 顶部玻璃高光（用 ::before，避免和 .tcard::after 箭头冲突） */
.hstat::before,.card::before,.rar::before,.sys::before,.pstep::before,.tl-item::before,.reserve-card::before,.tcard::before,.rank-card::before{
  content:'';position:absolute;left:5px;right:5px;top:3px;height:28%;pointer-events:none;z-index:0;
  border-radius:inherit;border-bottom-left-radius:45%;border-bottom-right-radius:45%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));}
.hstat>*,.card>*,.rar>*,.sys>*,.pstep>*,.tl-item>*,.reserve-card>*,.tcard>*,.rank-card>*{position:relative;z-index:1;}
.card .badge-num{z-index:3;}
.pstep .arr{z-index:3;}

/* 稀有度卡保留各自底色，但换成木牌质感的深浅渐变 */
.rar-ur{background:linear-gradient(180deg,#FFF6DF,#FFE3AE);}
.rar-ssr{background:linear-gradient(180deg,#FFF3F6,#FFD9E4);}
.rar-sr{background:linear-gradient(180deg,#F1F9EE,#D8EED2);}
.rar-r{background:linear-gradient(180deg,var(--wood-1),var(--wood-2));}

/* 卡片缩略图：厚木框 */
.card .thumb{border:3px solid var(--ink);box-shadow:inset 0 0 0 3px rgba(255,255,255,.6);}

/* ---------- 圆徽底座：系统图鉴 / 时间轴 / 开镖月份 / 悬赏标题 ---------- */
.sys .ic,.tl-item .dot,.rstep .moon,.pstep h4 .ico,.reserve-card h3 .ico,.rank-title .ico,.tcard h4 .ico{
  position:relative;border-radius:50%;display:grid;place-items:center;
  border:2.5px solid var(--ink);
  /* 珐琅徽章：墨边内一圈实心白环 + 底部淡暗边 + 实底影 */
  box-shadow:inset 0 0 0 2.5px var(--ring),inset 0 -4px 0 rgba(0,0,0,.09),0 2.5px 0 rgba(92,61,46,.28);}
/* 左上一粒椭圆高光，代替原来的虚线圈 */
.sys .ic::before,.tl-item .dot::before,.rstep .moon::before{
  content:'';position:absolute;left:22%;top:14%;width:34%;height:20%;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.75);transform:rotate(-25deg);filter:blur(.4px);}
.sys .ic .ico,.tl-item .dot .ico,.rstep .moon .ico{position:relative;z-index:1;}

/* 系统图鉴：11 枚圆徽，按主题着色 */
.sys .ic{width:56px;height:56px;margin:0 auto 4px;font-size:0;
  background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold-1) 55%,var(--gold-2));}
.sys .ic .ico{width:24px;height:24px;color:var(--ink);opacity:1;}
.sys:nth-child(1) .ic{background:radial-gradient(circle at 35% 30%,#FFF0F4,var(--peach-1) 55%,var(--peach-2));}   /* 家园 */
.sys:nth-child(2) .ic{background:radial-gradient(circle at 35% 30%,var(--sky-1),var(--sky-2) 55%,var(--sky-3));}    /* 交易所 */
.sys:nth-child(3) .ic{background:radial-gradient(circle at 35% 30%,#FFF3E0,#FFB86B 55%,var(--sunset-1));}          /* 加工店 */
.sys:nth-child(4) .ic{background:radial-gradient(circle at 35% 30%,#EFF8EC,var(--moss-1) 55%,var(--moss-2));}      /* 人才 */
.sys:nth-child(5) .ic{background:radial-gradient(circle at 35% 30%,var(--sand-1),var(--sand-2) 55%,var(--sand-3));}/* 仓库 */
.sys:nth-child(6) .ic{background:radial-gradient(circle at 35% 30%,var(--lav-1),var(--lav-2) 55%,var(--lav-3));}   /* 加工厂 */
.sys:nth-child(7) .ic{background:radial-gradient(circle at 35% 30%,#EFF8EC,var(--moss-1) 55%,var(--moss-2));}      /* 回收 */
.sys:nth-child(8) .ic{background:radial-gradient(circle at 35% 30%,#FFF0F4,var(--peach-1) 55%,var(--peach-2));}    /* 商城 */
.sys:nth-child(9) .ic{background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold-1) 55%,var(--gold-2));}/* 银行 */
.sys:nth-child(10) .ic{background:radial-gradient(circle at 35% 30%,var(--sky-1),var(--sky-2) 55%,var(--sky-3));}   /* 广告牌 */
.sys:nth-child(11) .ic{background:radial-gradient(circle at 35% 30%,#EFF8EC,var(--moss-1) 55%,var(--moss-2));}     /* 景观 */
.sys b{font-weight:900;}
.sys span{opacity:.8;}
/* 系统图鉴外框：双线木框（墨边 + 内白环）+ 与圆徽同色的浅底，像一枚枚成就牌 */
.sys{border-width:3px;border-radius:22px;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.85),0 5px 0 rgba(92,61,46,.28);}
.sys::before{left:8px;right:8px;top:6px;}
.sys:nth-child(1),.sys:nth-child(8){background:linear-gradient(180deg,#FFFDF8,#FFDDE6);}
.sys:nth-child(2),.sys:nth-child(10){background:linear-gradient(180deg,#FFFDF8,#D6EDFC);}
.sys:nth-child(3){background:linear-gradient(180deg,#FFFDF8,#FFDCBE);}
.sys:nth-child(4),.sys:nth-child(7),.sys:nth-child(11){background:linear-gradient(180deg,#FFFDF8,#DAF0D3);}
.sys:nth-child(5){background:linear-gradient(180deg,#FFFDF8,#FFE8C4);}
.sys:nth-child(6){background:linear-gradient(180deg,#FFFDF8,#E4DCFA);}
.sys:nth-child(9){background:linear-gradient(180deg,#FFFDF8,#FFEAB8);}

/* 集市时间轴：选中项金色木牌，圆徽保留 c1/c2 底色 */
.tl-item{border-color:var(--ink);box-shadow:var(--panel-shadow-sm);}
.tl-item.active{background:linear-gradient(180deg,#FFF6DF,#FFE3AE);box-shadow:var(--panel-shadow);}
.tl-item .dot{border-width:2.5px;}

/* 开镖月份圆徽：着色 + 点亮态金色外圈 */
.rstep .moon{border-width:3px;background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold-1) 55%,var(--gold-2));}
.rstep:nth-child(2) .moon{background:radial-gradient(circle at 35% 30%,var(--sand-1),var(--sand-2) 55%,var(--sand-3));}
.rstep:nth-child(3) .moon{background:radial-gradient(circle at 35% 30%,#EFF8EC,var(--moss-1) 55%,var(--moss-2));}
.rstep:nth-child(4) .moon{background:radial-gradient(circle at 35% 30%,#FFF3E0,#FFB86B 55%,var(--sunset-1));}
.rstep:nth-child(5) .moon{background:radial-gradient(circle at 35% 30%,var(--sky-1),var(--sky-2) 55%,var(--sky-3));}
.rstep:nth-child(6) .moon{background:radial-gradient(circle at 35% 30%,#FFF0F4,var(--peach-1) 55%,var(--peach-2));}
.rstep.lit .moon{border-color:var(--ink);box-shadow:inset 0 0 0 2.5px var(--ring),inset 0 -4px 0 rgba(0,0,0,.09),0 4px 0 rgba(92,61,46,.28),0 0 0 6px rgba(255,214,120,.6);}
.rstep .m{color:var(--sunset-2);}

/* 悬赏 / 预约 / 榜单 / 热区卡：标题小圆徽 */
.pstep h4 .ico,.reserve-card h3 .ico,.rank-title .ico,.tcard h4 .ico{
  box-sizing:content-box;padding:5px;color:var(--ink);
  background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold-1) 55%,var(--gold-2));}
.pstep:nth-child(1) h4 .ico{background:radial-gradient(circle at 35% 30%,#FFF3E0,#FFB86B 55%,var(--sunset-1));}
.pstep:nth-child(2) h4 .ico{background:radial-gradient(circle at 35% 30%,var(--sky-1),var(--sky-2) 55%,var(--sky-3));}
.pstep:nth-child(3) h4 .ico{background:radial-gradient(circle at 35% 30%,#EFF8EC,var(--moss-1) 55%,var(--moss-2));}
.pstep:nth-child(4) h4 .ico{background:radial-gradient(circle at 35% 30%,#FFF0F4,var(--peach-1) 55%,var(--peach-2));}
.pstep .coin-tag{background:linear-gradient(180deg,var(--gold-hi),var(--gold-1));border:2.5px solid var(--ink);border-radius:999px;
  padding:4px 12px;box-shadow:0 2.5px 0 rgba(92,61,46,.35);color:var(--ink);font-weight:800;}
.pstep .coin-tag .ico{color:var(--sunset-2);}
.tcard h4{display:flex;align-items:center;gap:7px;}
.tcard .tag,.tcard .rate{border-color:var(--ink);box-shadow:0 2px 0 rgba(92,61,46,.3);}

/* Hero 数据卡：数字改为实色深橙 + 白色底光，不再用浅色渐变透字 */
.hstat b{background:none;-webkit-background-clip:initial;background-clip:initial;color:#D9541E;
  -webkit-text-fill-color:#D9541E;text-shadow:0 2px 0 #FFF8EA;}
.hstat span{opacity:.92;color:#5C3D2E;font-weight:600;}

/* Hero logo：去掉大范围奶油光晕（会和暖色背景融在一起），改为紧贴的奶油描边 + 实底阴影 */
.hero-logo{background:none;
  filter:drop-shadow(0 0 1.5px #FFF9F0) drop-shadow(0 0 1.5px #FFF9F0) drop-shadow(0 6px 0 rgba(92,61,46,.45)) drop-shadow(0 14px 22px rgba(92,61,46,.28));}
.hero .tagline{color:#FFFDF8;text-shadow:0 0 2px var(--ink),0 0 2px var(--ink),0 2px 0 var(--ink),0 6px 14px rgba(92,61,46,.45);}

/* 所有可点元素统一小手光标 */
a,button,label[for],select,summary,[role="button"],[onclick],
.ths,.tl-item,.rstep,.cslide,.cnav,.card.openable,.card.openable .thumb,.feat,.sys,.hstat,.rar,.pstep,.wx-badge,
.lang-toggle,.sfx-toggle,.mnav a,.rank-close,.trailer .fsbtn,.tcard .x,#rankBtn,.plaque{cursor:pointer;}
button:disabled{cursor:not-allowed;}

/* 标签胶囊：mini-tag / ur-tag / lid-note / phase-tag / hud-stat 统一加底影 */
.mini-tag{background:linear-gradient(180deg,var(--wood-1),var(--wood-2));border:2px solid var(--ink);color:var(--ink);
  box-shadow:0 2px 0 rgba(92,61,46,.3);font-weight:800;}
.openable .lid-note,.canvas .phase-tag,.canvas .hud-stat{box-shadow:var(--panel-shadow-sm);}
.ur-tag{box-shadow:var(--panel-shadow-sm);}
/* 木牌匾额（今日集市 / 镖局快报）：保持深色木头 + 奶油字，与面板区分 */
.plaque{background:linear-gradient(180deg,#D9975F 0%,#B8734A 100%);color:#FFF8EA;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.28),0 5px 0 rgba(92,61,46,.4);}
.field input,.field select{box-shadow:inset 0 2px 0 rgba(92,61,46,.08),0 2.5px 0 rgba(92,61,46,.25);}
.field input:focus,.field select:focus{box-shadow:inset 0 2px 0 rgba(92,61,46,.08),0 0 0 4px rgba(255,214,120,.55);}
.btn-lg.reserve-btn{box-shadow:0 5px 0 rgba(92,61,46,.4);}
.mnav{box-shadow:0 4px 0 rgba(92,61,46,.4),0 8px 20px rgba(92,61,46,.12);}

/* 天气角标：可点击按钮态 */
.wx-badge{cursor:pointer;font-family:inherit;color:var(--ink);font-weight:800;
  background:linear-gradient(180deg,var(--wood-1),var(--wood-2));border-color:var(--ink);
  transition:opacity .6s ease,transform .25s var(--bounce);}
.wx-badge:hover{transform:translateY(-2px);}
.wx-badge:active{transform:translateY(1px);}
.wx-badge .wx-next{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;margin-left:2px;
  background:var(--ink);color:#FFF3E0;}
.wx-badge .wx-next .ico{width:11px;height:11px;padding:0;border:0;background:none;color:#FFF3E0;}
.wx-badge.pop{animation:wxPop .45s var(--bounce);}
@keyframes wxPop{0%{transform:scale(.92);}60%{transform:scale(1.08);}100%{transform:scale(1);}}

/* ============ 手机 ≤760 ============ */
@media (max-width:760px){
  .hstat,.card,.rar,.sys,.pstep,.tl-item,.reserve-card,.tcard,.rank-card,.rank-row{box-shadow:var(--panel-shadow-sm);}

  /* ---- 世界观三枚勋章：图下一行三枚紧凑横向小牌（圆徽左、字右，不显示英文副标） ---- */
  .fullbleed .fb-inner{position:static;}
  .world-tags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 16px 0;width:100%;
    overflow:visible;-webkit-mask-image:none;mask-image:none;}
  .feat{min-width:0;}
  .feat{display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:left;gap:6px;
    padding:5px 6px 5px 5px;border-width:2px;border-radius:12px;box-shadow:0 2.5px 0 rgba(92,61,46,.28);}
  .feat:hover{transform:none;}
  .feat::after{inset:2px 2px auto 2px;height:30%;border-radius:10px 10px 40% 40%;}
  .feat-medal{width:28px;height:28px;margin:0;border-width:2px;flex:0 0 auto;}
  .feat-medal svg{width:17px;height:17px;}
  .feat-txt{align-items:flex-start;line-height:1.1;min-width:0;}
  .feat-txt b{font-size:11px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  .feat-txt small{display:none;}

  /* ---- 造镇系统图鉴：4 列小牌，只显示圆徽 + 名称（副标隐藏），11 枚三行约 220px ---- */
  .sys-grid{grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px;}
  .sys{padding:7px 3px 6px;border-width:2px;border-radius:12px;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),0 2.5px 0 rgba(92,61,46,.28);}
  .sys::before{left:4px;right:4px;top:3px;}
  .sys .ic{width:30px;height:30px;border-width:2px;margin-bottom:0;}
  .sys .ic .ico{width:16px;height:16px;}
  .sys b{font-size:10.5px;margin-top:4px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sys span{display:none;}
  .rstep .moon{border-width:2.5px;}
  .pstep h4 .ico,.reserve-card h3 .ico{padding:4px;}
  .pstep .coin-tag{padding:3px 10px;border-width:2px;}
  .wx-badge{padding:4px 10px 4px 6px;gap:6px;}
  .wx-badge .ico{width:20px;height:20px;padding:3px;}
  .wx-badge .wx-next{width:16px;height:16px;}
  .wx-badge .wx-next .ico{width:10px;height:10px;}

  /* 造镇热区弹卡：手机端整体缩小一档 */
  .tcard{width:196px;padding:9px 11px 10px;border-width:2.5px;border-radius:14px;}
  .tcard .tag{font-size:9.5px;padding:1px 8px;margin-bottom:4px;}
  .tcard h4{font-size:13.5px;gap:5px;}
  .tcard h4 .ico{width:12px;height:12px;padding:3px;}
  .tcard .en{font-size:8.5px;margin-bottom:3px;}
  .tcard p{font-size:11px;line-height:1.55;}
  .tcard .rate{font-size:10px;padding:2px 9px;margin-top:5px;gap:4px;}
  .tcard .rate .ico{width:11px;height:11px;}
  .tcard .x{top:5px;right:8px;}
  .tcard .x .ico{width:12px;height:12px;}
  .tcard::after{width:12px;height:12px;bottom:-8px;border-width:2.5px;}
  .tcard.up::after{top:-8px;}
}