/* ============================================
   本周轮换看板
   依赖 assets/style.css 的 :root 变量
   ============================================ */

/* 返回链接 */
.back-link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; color:var(--ink-soft); text-decoration:none;
  padding:8px 16px 8px 12px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  margin-bottom:20px;
  transition:transform .18s, box-shadow .18s, color .18s;
}
.back-link:hover{ transform:translateX(-3px); color:var(--ink); box-shadow:0 4px 14px rgba(122,130,168,.13); }

/* ---------- 页头 ---------- */
.board-hero{
  position:relative; overflow:hidden;
  border-radius:var(--radius-lg);
  padding:38px 36px;
  margin-bottom:26px;
  background:linear-gradient(125deg,#EAF9F2 0%,#F0F4FF 50%,#FFF4EA 100%);
  box-shadow:var(--shadow);
}
.board-hero::after{
  content:""; position:absolute; right:-80px; top:-90px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle,rgba(168,230,207,.5) 0%,transparent 68%);
  pointer-events:none;
}
.board-hero h1{
  font-size:clamp(26px,3.6vw,38px); font-weight:800;
  letter-spacing:.8px; line-height:1.28; position:relative; z-index:1;
}
.board-hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--mint-deep),var(--lilac-deep),var(--peach-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.board-hero .week-range{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:14px; font-size:15px; font-weight:700;
  color:#4E8F76; letter-spacing:.4px;
  position:relative; z-index:1;
}
.board-hero .week-range .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--mint-deep);
  box-shadow:0 0 0 4px rgba(111,207,151,.22);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(111,207,151,.22); }
  50%    { box-shadow:0 0 0 7px rgba(111,207,151,.10); }
}
.board-hero .reset-note{
  margin-top:11px; font-size:12.5px; color:var(--ink-soft);
  position:relative; z-index:1;
}
.board-hero .cd-box{
  margin-top:20px; display:inline-flex; align-items:center; gap:12px;
  padding:11px 20px; border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.95);
  position:relative; z-index:1;
}
.cd-box .cd-ico{
  width:32px; height:32px; border-radius:10px; flex:0 0 32px;
  background:linear-gradient(135deg,var(--lemon),var(--peach));
  display:grid; place-items:center; font-size:15px;
}
.cd-box .cd-label{ font-size:11px; color:var(--ink-faint); }
.cd-box .cd-val{
  font-size:17px; font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--ink); letter-spacing:.5px;
}

/* ---------- 分区 ---------- */
.sec{ margin-bottom:30px; }
.sec-title{
  display:flex; align-items:center; gap:11px;
  margin-bottom:15px;
}
.sec-title h2{
  font-size:19px; font-weight:800; letter-spacing:.6px;
  display:flex; align-items:center; gap:9px;
}
.sec-title h2::before{
  content:""; width:5px; height:19px; border-radius:4px;
  background:linear-gradient(180deg,var(--mint-deep),var(--lilac-deep));
}
.sec-title .cnt{
  font-size:11.5px; font-weight:700;
  background:#EAF9F2; color:#4E8F76;
  padding:3px 10px; border-radius:999px;
}
.sec-title .hint{
  margin-left:auto; font-size:11.5px; color:var(--ink-faint);
}

/* ---------- 突袭 / 地牢 大卡 ---------- */
.duo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }

.activity-card{
  position:relative; overflow:hidden;
  border-radius:var(--radius);
  padding:26px 24px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  min-height:132px;
  display:flex; flex-direction:column; justify-content:center;
  transition:transform .22s, box-shadow .22s;
}
.activity-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.activity-card .a-slot{
  position:absolute; top:16px; right:18px;
  font-size:10.5px; font-weight:800; letter-spacing:1.2px;
  color:rgba(74,74,92,.42);
}
.activity-card .a-name{
  font-size:21px; font-weight:800; letter-spacing:1px;
  line-height:1.3; margin-bottom:7px;
}
.activity-card .a-desc{ font-size:12.3px; color:var(--ink-soft); }
.activity-card .a-tag{
  display:inline-block; margin-top:11px;
  font-size:10.5px; font-weight:700;
  padding:3px 11px; border-radius:999px;
  background:rgba(255,255,255,.75); color:var(--ink-soft);
  align-self:flex-start;
}

/* 卡片配色 */
.act-mint { background:linear-gradient(135deg,#E4F8EF,#CDEFE1); }
.act-peach{ background:linear-gradient(135deg,#FFF0E3,#FFDCC4); }
.act-lilac{ background:linear-gradient(135deg,#EDEFFB,#D8DEF5); }
.act-lemon{ background:linear-gradient(135deg,#FFFAE0,#FFF0A8); }

/* ---------- 宗师 ---------- */
.gm-card{
  border-radius:var(--radius);
  padding:24px 26px;
  background:linear-gradient(130deg,#FFF3F2 0%,#FFF8EE 60%,#F4F1FF 100%);
  border:1px solid #FBE6E2;
  box-shadow:var(--shadow);
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.gm-main{ flex:1 1 260px; }
.gm-name{
  font-size:19px; font-weight:800; letter-spacing:.6px;
  margin-bottom:6px;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.gm-loc{ font-size:12.5px; color:var(--ink-soft); margin-bottom:10px; }
.gm-mods{ display:flex; gap:7px; flex-wrap:wrap; }
.gm-mod{
  font-size:11px; font-weight:700;
  padding:3px 11px; border-radius:999px;
  background:#fff; color:#C06B66; border:1px solid #FBE0DC;
}
.gm-drop{
  flex:0 0 auto; text-align:center;
  padding:14px 22px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.9);
  border:1px solid #FBE6E2;
  min-width:132px;
}
.gm-drop .gd-label{ font-size:10.5px; color:var(--ink-faint); letter-spacing:.6px; }
.gm-drop .gd-name{ font-size:14.5px; font-weight:800; color:#C06B66; margin:4px 0 2px; }
.gm-drop .gd-type{ font-size:11px; color:var(--ink-soft); }
.gm-note{
  width:100%; font-size:11.5px; color:var(--ink-faint);
  padding-top:14px; border-top:1px dashed #F5E3DF;
}

/* ---------- 遗失区域 ---------- */
.ls-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ls-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:16px 17px;
  box-shadow:var(--shadow);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.ls-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:rgba(199,206,234,.8); }
.ls-area{
  font-size:10.5px; font-weight:700; letter-spacing:.8px;
  color:var(--ink-faint); margin-bottom:5px;
}
.ls-name{
  font-size:15px; font-weight:800; margin-bottom:11px;
  letter-spacing:.3px;
}
.ls-row{
  display:flex; gap:6px; align-items:flex-start;
  font-size:11.5px; color:var(--ink-soft);
  margin-bottom:6px; line-height:1.6;
}
.ls-row .k{
  flex:0 0 34px; color:var(--ink-faint); font-size:10.5px;
  padding-top:1px;
}
.ls-row .v{ flex:1; }
.ls-chips{ display:flex; gap:4px; flex-wrap:wrap; }
.mini-chip{
  font-size:10px; padding:1.5px 7px; border-radius:999px;
  background:#F5F3FA; color:#7A6BB0; font-weight:600;
}
.mini-chip.shield{ background:#FFF1E6; color:#B9713F; }

/* ---------- 每小时轮换 ---------- */
.hourly-wrap{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 24px;
  box-shadow:var(--shadow);
}
.hourly-now{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:16px 20px; border-radius:var(--radius-sm);
  background:linear-gradient(120deg,#EAF9F2,#F0F4FF);
  border:1px solid #DCF0E6;
  margin-bottom:18px;
}
.hn-left{ flex:1 1 200px; }
.hn-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:800; letter-spacing:.8px;
  color:#3E7D64; margin-bottom:7px;
}
.hn-badge .live{
  width:7px; height:7px; border-radius:50%;
  background:#6FCF97;
  animation:pulse 1.6s infinite;
}
.hn-dest{ font-size:19px; font-weight:800; letter-spacing:.6px; margin-bottom:4px; }
.hn-time{ font-size:12px; color:var(--ink-soft); }
.hn-right{ flex:0 0 auto; text-align:right; }
.hn-count{
  font-size:20px; font-weight:800; font-variant-numeric:tabular-nums;
  color:#4E8F76;
}
.hn-count-label{ font-size:10.5px; color:var(--ink-faint); }
.hn-loot{ font-size:11.5px; color:var(--ink-soft); margin-top:5px; }

/* 7 小时时间格 */
.hour-slots{
  display:grid; grid-template-columns:repeat(7,1fr); gap:9px;
  margin-bottom:18px;
}
.hour-slot{
  text-align:center;
  padding:11px 6px; border-radius:11px;
  background:#FBF9FE; border:1px solid var(--line);
  transition:all .2s;
}
.hour-slot .hs-label{
  font-size:9.5px; font-weight:700; color:var(--ink-faint);
  letter-spacing:.5px; margin-bottom:5px;
}
.hour-slot .hs-time{
  font-size:11px; color:var(--ink-soft); font-variant-numeric:tabular-nums;
  margin-bottom:4px;
}
.hour-slot .hs-dest{
  font-size:11.5px; font-weight:700; color:var(--ink);
  line-height:1.35;
}
.hour-slot.now{
  background:linear-gradient(135deg,#E4F8EF,#D3F2E6);
  border-color:#A8E6CF;
  box-shadow:0 3px 12px rgba(111,207,151,.22);
}
.hour-slot.now .hs-label{ color:#3E7D64; }
.hour-slot.now .hs-dest{ color:#2F6B54; }

/* 掉落明细 */
.loot-panel{
  border-top:1px dashed var(--line);
  padding-top:16px;
}
.loot-head{
  font-size:12.5px; font-weight:800; color:#4E8F76;
  margin-bottom:11px; display:flex; align-items:center; gap:7px;
}
.loot-head::before{
  content:""; width:4px; height:13px; border-radius:3px;
  background:linear-gradient(180deg,var(--mint-deep),var(--lilac-deep));
}
.loot-items{ display:flex; gap:8px; flex-wrap:wrap; }
.loot-item{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 13px; border-radius:999px;
  background:#F8FAFF; border:1px solid #E8EEFA;
  font-size:11.5px; color:var(--ink-soft);
}
.loot-item b{ color:var(--ink); font-weight:700; }
.loot-item .lt{ font-size:10px; color:var(--ink-faint); }
.loot-item.armor{ background:#FFFBF0; border-color:#F7EBCF; }

/* ---------- 商人 ---------- */
.vendor-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px; margin-bottom:16px;
  box-shadow:var(--shadow);
}
.vendor-head{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:15px;
  border-bottom:1px dashed var(--line);
}
.vendor-name{ font-size:16px; font-weight:800; letter-spacing:.4px; }
.vendor-sub{ font-size:12px; color:var(--ink-faint); }
.vendor-cnt{
  margin-left:auto; font-size:11px; font-weight:700;
  background:#EAF9F2; color:#4E8F76;
  padding:3px 10px; border-radius:999px;
}
.vendor-note{
  font-size:11px; color:#B9713F;
  background:#FFF4E8; padding:3px 10px; border-radius:999px;
}

/* 着色器网格 */
.shader-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.shader-item{
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:11px;
  background:#FBF9FE; border:1px solid var(--line);
}
.shader-swatch{
  width:26px; height:26px; border-radius:8px; flex:0 0 26px;
  background:linear-gradient(135deg,var(--mint),var(--lilac),var(--peach));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
.shader-info .sh-name{ font-size:12.5px; font-weight:700; }
.shader-info .sh-price{ font-size:10.5px; color:var(--ink-faint); margin-top:1px; }

/* 武器表格 */
.wtable-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.wtable{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:11.5px; min-width:820px;
}
.wtable th{
  text-align:left; font-size:10.5px; font-weight:700;
  color:var(--ink-faint); letter-spacing:.5px;
  padding:9px 11px; background:#FBF9FE;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.wtable th:first-child{ border-radius:9px 0 0 0; }
.wtable th:last-child { border-radius:0 9px 0 0; }
.wtable td{
  padding:11px; border-bottom:1px solid #F7F5FB;
  color:var(--ink-soft); line-height:1.6;
}
.wtable tr:last-child td{ border-bottom:none; }
.wtable tr:hover td{ background:#FCFBFF; }
.wtable td.w-name{ font-weight:800; color:var(--ink); white-space:nowrap; }
.wtable td.w-name .wn-type{
  display:block; font-size:10px; font-weight:500;
  color:var(--ink-faint); margin-top:1px;
}
.wtable .locked{
  display:inline-block; font-size:9.5px; font-weight:700;
  background:#F0EDF8; color:#8A7FBE;
  padding:1.5px 7px; border-radius:999px; margin-left:6px;
}

/* ---------- 状态 ---------- */
.state-box{
  text-align:center; padding:52px 24px;
  background:#fff; border:1px dashed var(--line);
  border-radius:var(--radius);
  color:var(--ink-soft); font-size:13.5px;
}
.state-box .s-ico{ font-size:30px; margin-bottom:11px; opacity:.75; }
.state-box .s-title{ font-size:15px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.state-box .s-detail{ font-size:12.5px; color:var(--ink-faint); line-height:1.75; }
.state-box code{ background:#F5F3FA; padding:2px 7px; border-radius:5px; font-size:12px; color:#7A6BB0; }

.skeleton{
  height:132px; border-radius:var(--radius);
  background:linear-gradient(90deg,#F7F5FB 25%,#EFECF7 50%,#F7F5FB 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .ls-grid{ grid-template-columns:repeat(2,1fr); }
  .hour-slots{ grid-template-columns:repeat(4,1fr); }
  .shader-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .board-hero{ padding:28px 20px; border-radius:22px; }
  .duo-grid{ grid-template-columns:1fr; }
  .ls-grid{ grid-template-columns:1fr; }
  .activity-card{ min-height:112px; padding:22px 20px; }
  .activity-card .a-name{ font-size:18px; }
  .gm-card{ padding:18px; gap:16px; }
  .gm-drop{ width:100%; text-align:left; min-width:0; }
  .hour-slots{ grid-template-columns:repeat(2,1fr); }
  .hourly-wrap{ padding:16px 15px; }
  .hn-right{ text-align:left; }
  .shader-grid{ grid-template-columns:1fr; }
  .vendor-card{ padding:16px; }
  .sec-title h2{ font-size:17px; }
  .sec-title .hint{ display:none; }
}