/* ============================================================
   高达机体图鉴 · SEED 战场主题 (Mobile Suit Gundam SEED Fleet)
   背景: Strike Freedom vs Destiny 高清战斗图 + 机械装帧元素
   ============================================================ */
:root {
  --sr-red:    #e6223a;
  --sr-bright: #ff3b4e;
  --sr-blue:   #2f6fe0;
  --sr-cyan:   #3fd4ff;
  --sr-gold:   #f5c542;
  --sr-orange: #ff8a2a;
  --sr-dark:   #070b14;
  --sr-panel:  rgba(10,16,30,.82);
  --sr-panel2: rgba(16,24,44,.75);
  --sr-line:   rgba(63,180,255,.25);
  --sr-text:   #e8f0ff;
  --sr-muted:  #8fa3c8;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--sr-text);
  min-height: 100vh;
  /* 日本机体站风格: 战斗图清晰可见, 顶部局部加暗保可读, 中下渐变透明 */
  background:
    linear-gradient(180deg,
      rgba(6,10,20,.72) 0%,
      rgba(8,12,24,.45) 26%,
      rgba(10,16,30,.34) 55%,
      rgba(8,12,22,.55) 100%),
    url('./assets/media/bg-battle-4k.jpg') center/cover no-repeat fixed;
  overflow-x: hidden;
}

/* 图片主体视觉加权亮: 机体主角清晰 */
.bar-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 5px;
  background: linear-gradient(90deg, var(--sr-red), var(--sr-orange) 25%,
              var(--sr-gold) 45%, var(--sr-blue) 70%, var(--sr-cyan));
  box-shadow: 0 2px 12px rgba(63,212,255,.2);
}

/* ===== 顶部机械装帧条 + 警示斜纹 (定义见上) ===== */

/* ===== 光束粒子层 (战场漂浮粒子) ===== */
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.particle {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--sr-cyan); opacity: 0;
  box-shadow: 0 0 6px 1px rgba(63,212,255,.5);
  animation: floatUp 9s linear infinite;
}
@keyframes floatUp {
  0%   { transform: translateY(105vh); opacity: 0; }
  15%  { opacity: .7; }
  85%  { opacity: .5; }
  100% { transform: translateY(-5vh); opacity: 0; }
}

/* ===== 主容器 ===== */
.main { position: relative; z-index: 2; max-width: 1340px; margin: 0 auto; padding: 42px 20px 170px; }

/* ===== Hero ===== */
.hero { text-align: center; padding: 60px 0 44px; position: relative; }
.hero-brand {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--sr-panel);
  border: 1px solid var(--sr-line);
  padding: 8px 18px; border-radius: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 3px; color: var(--sr-cyan);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  margin-bottom: 24px;
}
.hero-brand::before, .hero-brand::after {
  content: '▸▸'; opacity: .4;
}
.hero-title {
  font-size: 56px; font-weight: 900; letter-spacing: 3px; line-height: 1.1;
  background: linear-gradient(180deg, #fff 20%, var(--sr-cyan) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 24px rgba(63,212,255,.28));
}
.hero-title .red { -webkit-text-fill-color: var(--sr-bright); }
.hero-sub {
  font-size: 15px; color: var(--sr-muted); margin-top: 12px; letter-spacing: 2px;
}
.stats {
  margin-top: 26px; font-size: 13px; color: var(--sr-muted);
  display: inline-flex; gap: 8px; align-items: center;
  background: var(--sr-panel); padding: 10px 20px; border-radius: 30px;
  border: 1px solid var(--sr-line); backdrop-filter: blur(6px);
}
.stats b {
  color: #fff; font-weight: 800; padding: 2px 10px;
  background: linear-gradient(90deg, var(--sr-red), var(--sr-orange));
  border-radius: 20px; font-size: 12px;
}

/* ===== 作品区块 ===== */
.works { margin-top: 48px; }
.work-section { margin-bottom: 60px; }
.work-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px; padding: 16px 20px;
  background: rgba(240,246,255,.10);
  backdrop-filter: blur(9px) saturate(1.2);
  border: 1.5px solid rgba(255,255,255,.24);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
  position: relative; overflow: hidden;
}
/* 作品标题左侧红色警示斜纹 */
.work-header::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(-45deg, var(--sr-red) 0 8px, transparent 8px 16px);
}
.work-index {
  color: var(--sr-gold); font-size: 13px; font-weight: 800; letter-spacing: 1px;
  padding: 5px 12px; margin-left: 8px;
  border: 1px solid rgba(245,197,66,.4); border-radius: 5px; flex-shrink: 0;
  text-shadow: 0 0 12px rgba(245,197,66,.3);
}
.work-name { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: 2px; }
.work-count {
  font-size: 12px; color: var(--sr-cyan); margin-left: auto; flex-shrink: 0;
  background: rgba(63,212,255,.12); padding: 5px 14px; border-radius: 20px;
  border: 1px solid var(--sr-line); font-weight: 700;
}

.mech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
}

/* ===== 机体卡片 (机库面板 + 光束扫描hover) ===== */
.mech-card {
  position: relative;
  background: rgba(240,246,255,.10);
  backdrop-filter: blur(9px) saturate(1.2);
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.28);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  display: flex; flex-direction: column;
}
/* 顶部光束能量条 */
.mech-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sr-cyan), var(--sr-blue), var(--sr-red));
  opacity: .6; transition: opacity .22s;
}
/* 卡片角标记(机体框) */
.mech-card::after {
  content: ''; position: absolute; right: 10px; top: 10px;
  width: 22px; height: 22px;
  border-top: 2px solid var(--sr-gold); border-right: 2px solid var(--sr-gold);
  opacity: .5;
}
.mech-card:hover {
  transform: translateY(-6px);
  border-color: rgba(63,212,255,.6);
  box-shadow: 0 20px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(63,212,255,.2);
}
.mech-card:hover::before { opacity: 1; }

/* 光束扫描动画(悬浮) */
.beam-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(63,212,255,.08), transparent);
  transition: opacity .25s;
}
.mech-card:hover .beam-scan { opacity: 1; animation: scan .9s linear infinite; }
@keyframes scan { 0% { transform: translateY(-100%);} 100% { transform: translateY(100%);} }

.mech-thumb {
  aspect-ratio: 1/1; object-fit: contain; width: 100%;
  background:
    radial-gradient(circle at 50% 55%, rgba(47,111,224,.20), transparent 60%),
    linear-gradient(180deg, rgba(210,225,250,.14), rgba(190,210,245,.05));
  padding: 16px;
  transition: transform .3s ease, filter .2s; position: relative; z-index: 0;
}
/* 背景统一: 浅底图 multiply(白隐入深), 深底图 screen(黑隐入深) */
.mech-thumb.blend-light { mix-blend-mode: multiply; }
.mech-thumb.blend-dark  { mix-blend-mode: screen; opacity: .92; }
/* blend后略提亮保证机体清晰 */
.mech-card:hover .mech-thumb.blend-light { filter: brightness(1.15) contrast(1.05); }
.mech-card:hover .mech-thumb.blend-dark  { filter: brightness(1.15); }
.mech-card:hover .mech-thumb { transform: scale(1.05); }

.mech-info {
  padding: 15px 17px 17px;
  border-top: 1px solid rgba(255,255,255,.18);
  position: relative;
}
/* 机体编号徽章 */
.mech-code {
  position: absolute; left: 17px; top: -9px;
  font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #fff;
  background: rgba(245,197,66,.75); padding: 2px 8px; border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.mech-name { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.35; padding-top: 4px; }
.mech-en { font-size: 11px; color: var(--sr-muted); font-weight: 500; margin-top: 2px; letter-spacing: .3px; }
.mech-model { font-size: 12px; color: var(--sr-cyan); font-weight: 600; margin-top: 3px; letter-spacing: .3px; }
.mech-tag {
  display: inline-block; margin-top: 10px;
  font-size: 11px; color: #ffd6dd;
  background: rgba(230,34,58,.18); border: 1px solid rgba(230,34,58,.4);
  padding: 3px 10px; border-radius: 4px; font-weight: 700; letter-spacing: .4px;
}

/* ===== header 作品快速定位导航 ===== */
.crumb-nav {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px;
  margin: 26px auto 0; padding: 8px;
  max-width: 760px;
}
.crumb-sep { color: var(--sr-cyan); opacity: .6; font-size: 12px; user-select: none; }
.crumb-seg {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--sr-text); text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: .5px;
  padding: 10px 18px; border-radius: 10px;
  background: rgba(240,246,255,.07);
  backdrop-filter: blur(8px);
  border: 1px solid var(--sr-line);
  transition: all .18s ease;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.crumb-seg:hover { background: rgba(63,212,255,.14); border-color: rgba(63,212,255,.45); color: #fff; transform: translateY(-2px); }
.crumb-name { text-shadow: 0 0 10px rgba(63,212,255,.15); }
.crumb-count {
  font-size: 11px; font-weight: 700; color: var(--sr-cyan);
  background: rgba(63,212,255,.14); padding: 1px 8px; border-radius: 10px;
  border: 1px solid rgba(63,212,255,.25);
}
.crumb-seg.active {
  background: linear-gradient(90deg, rgba(230,34,58,.28), rgba(63,212,255,.2));
  border-color: rgba(63,212,255,.55);
  color: #fff;
  box-shadow: 0 0 16px rgba(63,212,255,.25);
}
.crumb-seg.active .crumb-count { background: var(--sr-red); color: #fff; border-color: var(--sr-red); }

@media (max-width: 640px) {
  .crumb-nav { gap: 8px; margin-top: 20px; }
  .crumb-seg { font-size: 12.5px; padding: 8px 12px; }
  .crumb-count { display: none; }
}
.no-results { text-align: center; padding: 80px 0; color: var(--sr-muted); font-size: 16px; }
.no-results b { color: var(--sr-bright); }

/* ===== 详情页 ===== */
.detail-main { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 48px 20px 170px; }
.detail-back { margin-bottom: 24px; }
.detail-back a {
  color: var(--sr-cyan); font-size: 14px; font-weight: 600; text-decoration: none; letter-spacing: 1px;
}
.detail-back a:hover { color: #fff; }
.detail-card {
  display: grid; grid-template-columns: 420px 1fr; gap: 38px;
  background: var(--sr-panel); backdrop-filter: blur(12px);
  border-radius: 18px; padding: 34px;
  border: 1px solid var(--sr-line); box-shadow: 0 16px 44px rgba(0,0,0,.5);
  position: relative; overflow: hidden;
}
.detail-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--sr-red), var(--sr-orange), var(--sr-gold), var(--sr-cyan));
}
.detail-img {
  width: 100%; aspect-ratio: 1/1; object-fit: contain;
  background: radial-gradient(circle at 50% 55%, rgba(47,111,224,.16), transparent 65%),
              linear-gradient(180deg, rgba(10,16,30,.4), rgba(5,8,16,.6));
  border-radius: 12px; border: 1px solid var(--sr-line); padding: 18px;
}
.detail-right { min-width: 0; }
.detail-work {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #fff;
  background: linear-gradient(90deg, var(--sr-red), var(--sr-orange));
  padding: 6px 16px; border-radius: 5px; margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(230,34,58,.3);
}
.detail-name { font-size: 34px; font-weight: 900; color: #fff; letter-spacing: 1px; }
.detail-english { font-size: 15px; color: var(--sr-cyan); font-weight: 600; margin-top: 9px; }
.detail-kanji { font-size: 13px; color: var(--sr-muted); margin-top: 5px; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.detail-tag {
  font-size: 12px; font-weight: 600; color: var(--sr-text);
  background: rgba(30,60,120,.3); padding: 6px 14px; border-radius: 5px;
  border: 1px solid var(--sr-line);
}
.section-title {
  font-size: 15px; font-weight: 800; color: var(--sr-gold);
  margin: 22px 0 10px; padding-bottom: 8px;
  border-bottom: 2px solid var(--sr-blue);
  display: inline-block; letter-spacing: 1px;
}
.detail-desc { font-size: 14.5px; line-height: 1.9; color: #c8d8f0; }

/* ===== 功能性 UI（搜索 / 入场动画 / 翻页，复用主题变量） ===== */
.search {
  margin: 24px auto 0; max-width: 560px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--sr-line); border-radius: 12px;
  background: var(--sr-panel); padding: 4px 6px 4px 16px;
  backdrop-filter: blur(6px);
  transition: border-color .2s, box-shadow .2s;
}
.search:focus-within { border-color: var(--sr-cyan); box-shadow: 0 0 18px rgba(63,212,255,.22); }
.search .prompt { color: var(--sr-cyan); font-weight: 800; font-size: 15px; }
.search input {
  flex: 1; background: transparent; border: 0; outline: 0; color: var(--sr-text);
  font-size: 14px; padding: 10px 0; font-family: var(--font);
}
.search input::placeholder { color: var(--sr-muted); }
.search .kbd {
  font-size: 10px; color: var(--sr-muted); white-space: nowrap;
  border: 1px solid var(--sr-line); border-radius: 6px; padding: 4px 9px;
}
.mech-pilot { font-size: 11px; color: var(--sr-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.anim-in { animation: fadeUp .55s cubic-bezier(0.22,1,0.36,1) both; animation-delay: var(--d,0ms); }
.row-in { animation: fadeUp .45s cubic-bezier(0.22,1,0.36,1) both; animation-delay: var(--d,0ms); }
.detail-card.pop-in { animation: fadeUp .5s cubic-bezier(0.22,1,0.36,1) both; }
.detail-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.detail-pager a {
  flex: 1; color: var(--sr-text); text-decoration: none; font-size: 13px; font-weight: 700;
  padding: 12px 16px; border-radius: 10px; background: var(--sr-panel);
  border: 1px solid var(--sr-line); transition: all .18s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.detail-pager a:hover { border-color: var(--sr-cyan); color: #fff; transform: translateY(-2px); }
.detail-pager a span { color: var(--sr-cyan); }
@media (prefers-reduced-motion: reduce) { .anim-in, .row-in, .detail-card.pop-in { animation: none; } }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .hero-title { font-size: 36px; letter-spacing: 1px; }
  .mech-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
  .work-count { display: none; }
  .detail-card { grid-template-columns: 1fr; padding: 22px 18px; }
  .detail-img { max-width: 340px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .hero { padding: 46px 8px 36px; }
  .hero-title { font-size: 30px; }
  .mech-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 14px; }
  .mech-name { font-size: 13px; }
  .mech-info { padding: 13px 12px 15px; }
}