/* ===== ナビ ===== */
.site-nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;
  padding:14px 24px;background:rgba(23,18,49,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--card-edge);
}
.site-nav .brand{font-weight:900;font-size:.95rem;color:var(--text);text-decoration:none;transform:skewX(-6deg)}
.site-nav .brand .sq{color:var(--ink-a)}
.site-nav a.nav-link{
  color:var(--text-dim);text-decoration:none;font-size:.82rem;font-weight:800;
  padding:4px 14px;border-radius:999px;border:1.5px solid transparent;transform:skewX(-6deg);
  transition:all .2s;
}
.site-nav a.nav-link:hover{color:var(--ink-c);border-color:var(--ink-c)}
.site-nav a.nav-link.current{background:var(--ink-a);color:#171231}

/* ===== ヒーロー（ブキページ） ===== */
.hero.wpn-hero{min-height:64vh}

/* ===== ブキ種カード ===== */
.wpn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.wpn-card{
  background:var(--card);border:1.5px solid var(--card-edge);border-radius:20px;
  padding:22px 20px 18px;text-align:left;cursor:pointer;color:var(--text);
  font-family:inherit;position:relative;overflow:hidden;
  opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s,border-color .2s;
}
.wpn-card.show{opacity:1;transform:translateY(0)}
.wpn-card:hover{transform:translateY(-6px) rotate(-1deg);border-color:var(--accent)}
.wpn-card.selected{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.wpn-card::after{
  content:"";position:absolute;right:-30px;top:-30px;width:100px;height:100px;
  border-radius:62% 38% 55% 45%;opacity:.14;background:var(--accent);
}
.wpn-icon{width:58px;height:58px;color:var(--accent);margin-bottom:10px;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 45%,transparent))}
.wpn-icon svg{width:100%;height:100%}
.wpn-en{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--accent);font-weight:900}
.wpn-name{font-weight:900;font-size:1.12rem;transform:skewX(-4deg);margin:2px 0 8px}
.wpn-count{font-size:.78rem;color:var(--text-dim)}
.wpn-count .num{font-family:var(--mono);font-weight:900;font-size:1.5rem;color:var(--text);margin-right:2px}
.wpn-bar{display:flex;height:8px;border-radius:99px;overflow:hidden;margin:10px 0 6px;background:var(--bg)}
.wpn-bar .seg.b{background:var(--ink-a)}
.wpn-bar .seg.m{background:var(--ink-c)}
.wpn-bar .seg.n{background:var(--ink-b)}
.wpn-legend{display:flex;gap:12px;font-family:var(--mono);font-size:.7rem;font-weight:900}
.wpn-legend .b{color:var(--ink-a)}
.wpn-legend .m{color:var(--ink-c)}
.wpn-legend .n{color:var(--ink-b)}

/* ===== ブキ実画像（ゲーム内アセット） ===== */
.wpn-img{
  width:58px;height:58px;margin-bottom:10px;
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 45%,transparent));
}
.wpn-img img{width:100%;height:100%;object-fit:contain}
.wpn-img.sm{width:48px;height:48px;margin-bottom:8px}
.d-icon.img{padding:12px}
.d-icon.img img{width:100%;height:100%;object-fit:contain;filter:none}

/* ===== メインブキ図鑑（mains.html） ===== */
.wpn-grid.mains{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.wpn-grid.mains .wpn-card{padding:18px 16px 14px}
.wpn-icon.sm{width:42px;height:42px;margin-bottom:8px}
.main-kits{
  font-size:.68rem;color:var(--text-dim);font-family:var(--mono);
  margin:-4px 0 8px;letter-spacing:.02em;
}
.wpn-card.hidden{display:none}

/* ===== 詳細パネル ===== */
.detail-panel{background:var(--card);border:1.5px solid var(--card-edge);border-radius:24px;padding:34px;margin-top:8px}
.d-head{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;margin-bottom:26px}
.d-icon{
  width:96px;height:96px;flex:none;color:var(--accent,#2ee6d6);
  background:color-mix(in srgb,var(--accent,#2ee6d6) 12%,transparent);
  border:1.5px solid color-mix(in srgb,var(--accent,#2ee6d6) 45%,transparent);
  border-radius:60% 40% 55% 45%;padding:18px;
  filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent,#2ee6d6) 40%,transparent));
}
.d-icon svg{width:100%;height:100%}
.d-en{font-family:var(--mono);font-size:.7rem;letter-spacing:.25em;color:var(--accent,#2ee6d6);font-weight:900}
.d-name{font-size:1.6rem;font-weight:900;transform:skewX(-4deg);margin:2px 0 6px}
.d-desc{font-size:.85rem;color:var(--text-dim);max-width:520px}
.d-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.badge.buff{background:rgba(232,255,46,.12);color:var(--ink-a);border:1px solid var(--ink-a-dim)}
.badge.mix{background:rgba(46,230,214,.15);color:var(--ink-c);border:1px solid var(--ink-c)}
.badge.nerf{background:rgba(160,92,255,.15);color:var(--ink-b);border:1px solid var(--ink-b)}

.trend-box{position:relative;height:260px;margin-bottom:30px}

.d-timeline{display:flex;flex-direction:column}
.d-row{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px dashed var(--card-edge);font-size:.86rem;
  border-left:4px solid transparent;border-radius:4px;
}
.d-row:last-child{border-bottom:none}
.d-row.k-b{border-left-color:var(--ink-a)}
.d-row.k-n{border-left-color:var(--ink-b)}
.d-row.k-m{border-left-color:var(--ink-c)}
.d-ver{font-family:var(--mono);font-weight:900;min-width:84px}
.d-date{font-family:var(--mono);font-size:.74rem;color:var(--text-dim)}
.d-kind{font-weight:900;font-size:.76rem;min-width:96px}
.d-row.k-b .d-kind{color:var(--ink-a)}
.d-row.k-n .d-kind{color:var(--ink-b)}
.d-row.k-m .d-kind{color:var(--ink-c)}
.d-note{color:var(--text-dim);flex:1;min-width:220px}

@media (max-width:760px){
  .detail-panel{padding:24px 18px}
  .d-icon{width:72px;height:72px;padding:14px}
}

/* ===== 軌跡モーダル ===== */
.trj-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.trj-modal[hidden]{display:none}
.trj-backdrop{position:absolute;inset:0;background:rgba(10,8,25,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.trj-card{
  position:relative;width:min(760px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1.5px solid var(--card-edge);border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  opacity:0;transform:translateY(16px) scale(.985);transition:opacity .25s,transform .25s;
}
.trj-modal.open .trj-backdrop{opacity:1}
.trj-modal.open .trj-card{opacity:1;transform:none}
.trj-toolbar{
  flex:none;display:flex;align-items:center;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--card-edge);
  background:color-mix(in srgb,var(--card) 94%,transparent);
}
.trj-count{flex:1;text-align:center;font-family:var(--mono);font-size:.8rem;color:var(--text-dim);font-weight:900}
.trj-btn{
  font-family:inherit;font-weight:900;cursor:pointer;border-radius:999px;
  border:1.5px solid var(--card-edge);background:var(--bg);color:var(--text);
  padding:7px 14px;font-size:.82rem;transition:border-color .18s,color .18s;
}
.trj-btn.nav:hover{border-color:var(--ink-c);color:var(--ink-c)}
.trj-btn.close{width:38px;height:38px;padding:0;font-size:1rem;line-height:1;flex:none}
.trj-btn.close:hover{border-color:var(--ink-b);color:var(--ink-b)}
.trj-body{overflow-y:auto;padding:26px 30px 34px}
.trj-body .d-head{margin-bottom:14px}
.trj-lead{font-size:.8rem;color:var(--text-dim);margin:0 0 20px}

@media (max-width:760px){
  .trj-modal{padding:0}
  .trj-card{width:100%;height:100%;max-height:100%;border-radius:0}
  .trj-body{padding:22px 18px 30px}
  .trj-btn{padding:9px 14px}
}