/* ============================================================
   帝国时代 II · 复古游戏图鉴  —  样式表
   羊皮纸 / 中世纪纹章 / 像素 UI 双美学，纯静态无外部依赖
   ============================================================ */

:root{
  --parchment:#efe0bd;
  --parchment-2:#e6d3a8;
  --ink:#2b1d0e;
  --ink-soft:#4a3826;
  --gold:#b8860b;
  --gold-2:#c8a048;
  --gold-light:#e8c878;
  --red:#8b2e1f;
  --red-2:#a23b2c;
  --green:#4a5d23;
  --stone:#5b6b6e;
  --line:rgba(43,29,14,.22);
  --shadow:0 10px 30px rgba(43,29,14,.28);
  --radius:10px;
  --serif:"Songti SC","STSong","SimSun","Georgia","Times New Roman",serif;
  --display:"Georgia","Times New Roman","Songti SC","STSong",serif;
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 10%, rgba(200,160,72,.10), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(139,46,31,.08), transparent 45%),
    var(--parchment);
  background-attachment:fixed;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* 纸张纹理叠层 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(43,29,14,.022) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(43,29,14,.018) 0 3px, transparent 3px 6px);
  opacity:.55;
}

.wrap{width:min(1120px,92vw);margin-inline:auto;position:relative;z-index:1}

/* ---------- 滚动进度条 ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:4px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--gold),var(--red));
  box-shadow:0 0 8px rgba(184,134,11,.7);
}

/* ---------- 导航 ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem clamp(1rem,4vw,2.4rem);
  background:linear-gradient(180deg, rgba(43,29,14,.92), rgba(43,29,14,.78));
  border-bottom:2px solid var(--gold);
  backdrop-filter:blur(6px);
}
.nav__brand{display:flex;align-items:center;gap:.6rem}
.nav__crest{
  width:30px;height:34px;display:inline-block;
  background:var(--gold);
  clip-path:polygon(50% 0,100% 18%,84% 100%,16% 100%,0 18%);
  box-shadow:inset 0 0 0 3px rgba(43,29,14,.5);
}
.nav__title{font-family:var(--display);font-weight:700;color:var(--gold-light);letter-spacing:.5px;font-size:1.05rem;line-height:1}
.nav__title small{display:block;font-size:.62rem;letter-spacing:3px;color:#d9c79a;font-weight:400}
.nav__links{display:flex;gap:clamp(.5rem,1.6vw,1.3rem);flex-wrap:wrap}
.nav__links a{
  color:#e9dcc0;font-size:.92rem;padding:.3rem .2rem;position:relative;
  transition:color .2s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--gold-light);transition:width .25s;
}
.nav__links a:hover{color:var(--gold-light)}
.nav__links a:hover::after,.nav__links a.active::after{width:100%}
.nav__links a.active{color:var(--gold-light)}
.nav__toggle{display:none;background:none;border:1px solid var(--gold);color:var(--gold-light);
  font-size:1.2rem;border-radius:6px;padding:.1rem .55rem;cursor:pointer}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;color:#f6ecd2}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(1.05) contrast(1.02)}
.hero__veil{position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center, rgba(20,12,4,.25), rgba(20,12,4,.78)),
    linear-gradient(180deg, rgba(20,12,4,.35), rgba(20,12,4,.55));
}
.hero__inner{position:relative;z-index:2;padding:6rem 1rem 4rem;max-width:900px}
.hero__kicker{letter-spacing:5px;font-size:.8rem;color:var(--gold-light);margin-bottom:1rem;
  text-shadow:0 1px 4px #000}
.hero__title{font-family:var(--display);font-weight:800;
  font-size:clamp(2.6rem,8vw,5.4rem);line-height:1.02;
  text-shadow:0 4px 0 rgba(43,29,14,.6),0 10px 26px rgba(0,0,0,.6);
  letter-spacing:2px}
.hero__title span{display:block;font-size:clamp(1.4rem,4.5vw,2.6rem);color:var(--gold-light);
  letter-spacing:10px;margin-top:.4rem;text-shadow:0 2px 10px #000}
.hero__subtitle{margin:1.4rem auto 2rem;max-width:620px;font-size:clamp(.95rem,2vw,1.12rem);
  color:#ecdfc4;text-shadow:0 1px 6px #000}
.hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.6rem}
.hero__stats{display:flex;gap:clamp(1rem,4vw,3rem);justify-content:center;flex-wrap:wrap}
.hero__stats div{display:flex;flex-direction:column;align-items:center}
.hero__stats b{font-family:var(--display);font-size:clamp(1.6rem,5vw,2.6rem);color:var(--gold-light);
  text-shadow:0 2px 8px #000}
.hero__stats span{font-size:.78rem;letter-spacing:1px;color:#d9c79a}
.hero__scroll{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:2;
  color:var(--gold-light);font-size:1.5rem;animation:bob 1.8s infinite;
  text-shadow:0 2px 8px #000}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}

/* ---------- 按钮 ---------- */
.btn{display:inline-block;padding:.7rem 1.6rem;border-radius:8px;font-weight:700;
  letter-spacing:1px;transition:transform .15s,box-shadow .2s;border:2px solid transparent}
.btn--gold{background:linear-gradient(180deg,var(--gold-light),var(--gold));
  color:#2b1d0e;box-shadow:0 4px 0 #7a5a08,var(--shadow)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 6px 0 #7a5a08,var(--shadow)}
.btn--ghost{border-color:var(--gold-light);color:var(--gold-light);
  background:rgba(43,29,14,.35)}
.btn--ghost:hover{background:rgba(200,160,72,.18);transform:translateY(-2px)}

/* ---------- 通用区块 ---------- */
.section{padding:clamp(3.5rem,8vw,6rem) 0;position:relative;z-index:1}
.section--alt{
  background:linear-gradient(180deg, rgba(43,29,14,.05), rgba(43,29,14,.09));
  border-block:1px solid var(--line);
}
.sec-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.sec-head__num{
  font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--parchment);
  background:var(--red);width:2.4rem;height:2.4rem;display:grid;place-items:center;
  border-radius:8px;box-shadow:inset 0 0 0 2px var(--gold),var(--shadow);
  flex:none;
}
.sec-head__title{font-family:var(--display);font-size:clamp(1.5rem,4vw,2.2rem);
  color:var(--ink);letter-spacing:1px;position:relative}
.sec-head__title::after{content:"";display:block;height:3px;width:64px;margin-top:.4rem;
  background:linear-gradient(90deg,var(--gold),transparent)}
.lead{max-width:760px;color:var(--ink-soft);margin-bottom:2rem;font-size:1.02rem}
.callout{display:flex;gap:1rem;align-items:flex-start;margin-top:2rem;
  background:rgba(200,160,72,.14);border:1px solid var(--gold);border-left:5px solid var(--gold);
  border-radius:var(--radius);padding:1.1rem 1.3rem}
.callout__icon{font-size:1.6rem;line-height:1}
.callout p{margin:0;color:var(--ink-soft)}

/* ---------- 简介 ---------- */
.intro-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:2.4rem;align-items:start}
.intro-text p{margin-bottom:1rem}
.intro-text strong{color:var(--red)}
.timeline{list-style:none;border-left:3px solid var(--gold);padding-left:1.2rem;display:flex;flex-direction:column;gap:1.1rem}
.timeline li{position:relative}
.timeline li::before{content:"";position:absolute;left:-1.5rem;top:.35rem;width:14px;height:14px;
  background:var(--red);border:3px solid var(--gold);border-radius:50%}
.tl__year{display:block;font-family:var(--display);font-weight:800;color:var(--red);font-size:1.05rem}
.tl__txt{font-size:.95rem;color:var(--ink-soft)}

/* ---------- 四时代 ---------- */
.ages{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.age-card{border-radius:var(--radius);overflow:hidden;background:var(--parchment);
  border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .2s}
.age-card:hover{transform:translateY(-6px)}
.age-card__top{padding:1.2rem 1rem;color:#f6ecd2;text-align:center;position:relative}
.age-card__lv{font-family:var(--display);font-size:2.4rem;font-weight:800;display:block;
  text-shadow:0 2px 6px rgba(0,0,0,.4);opacity:.9}
.age-card__top h3{font-family:var(--display);font-size:1.25rem;letter-spacing:2px}
.age-card__top em{font-style:normal;font-size:.72rem;letter-spacing:2px;opacity:.85}
.age-card__top--dark{background:linear-gradient(160deg,#3a2c1a,#241a0e)}
.age-card__top--feudal{background:linear-gradient(160deg,#4a5d23,#33421a)}
.age-card__top--castle{background:linear-gradient(160deg,#8b2e1f,#5e1e14)}
.age-card__top--imperial{background:linear-gradient(160deg,#7a5a0c,#5c4408)}
.age-card__body{padding:1rem 1.1rem 1.3rem}
.age-card__body p{font-size:.92rem;color:var(--ink-soft);margin-bottom:.7rem}
.age-card__body ul{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.age-card__body li{font-size:.82rem;color:var(--ink);padding-left:1rem;position:relative}
.age-card__body li::before{content:"◆";position:absolute;left:0;color:var(--gold);font-size:.7rem;top:.1rem}

/* ---------- 资源 ---------- */
.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.res-card{border-radius:var(--radius);padding:1.4rem 1.2rem;background:var(--parchment);
  border:1px solid var(--line);box-shadow:var(--shadow);text-align:center;transition:transform .2s}
.res-card:hover{transform:translateY(-5px)}
.res-card__icon{font-size:2.4rem;line-height:1;margin-bottom:.6rem}
.res-card h3{font-family:var(--display);font-size:1.2rem;margin-bottom:.5rem;letter-spacing:1px}
.res-card p{font-size:.9rem;color:var(--ink-soft)}
.res-card--food{border-top:5px solid #8a9a3a}
.res-card--wood{border-top:5px solid #7a5a2e}
.res-card--gold{border-top:5px solid var(--gold)}
.res-card--stone{border-top:5px solid var(--stone)}

/* ---------- 文明筛选 ---------- */
.civ-filter{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.6rem}
.chip{border:1px solid var(--gold);background:transparent;color:var(--ink);
  padding:.35rem 1rem;border-radius:999px;cursor:pointer;font-size:.88rem;transition:.2s}
.chip:hover{background:rgba(200,160,72,.18)}
.chip--on{background:var(--gold);color:#2b1d0e;font-weight:700}
.civ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.1rem}
.civ-card{background:var(--parchment);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem 1rem 1.3rem;text-align:center;box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s;cursor:default}
.civ-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(43,29,14,.34)}
.civ-card__shield{width:74px;height:84px;margin:0 auto .5rem}
.civ-card__name{font-family:var(--display);font-size:1.18rem;letter-spacing:1px}
.civ-card__en{font-size:.7rem;letter-spacing:2px;color:var(--ink-soft);text-transform:uppercase}
.civ-card__unit{display:inline-block;margin:.5rem 0;font-size:.82rem;color:var(--red);
  border:1px dashed var(--red);border-radius:6px;padding:.1rem .55rem}
.civ-card__bonus{font-size:.84rem;color:var(--ink-soft);min-height:2.6em}
.civ-card__region{font-size:.72rem;letter-spacing:1px;color:var(--gold);margin-top:.4rem}

/* ---------- 兵种 ---------- */
.unit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.unit-card{background:var(--parchment);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem 1.1rem;box-shadow:var(--shadow);position:relative;transition:transform .2s}
.unit-card:hover{transform:translateY(-5px)}
.unit-card h3{font-family:var(--display);font-size:1.08rem;margin-bottom:.5rem;letter-spacing:1px}
.unit-card p{font-size:.88rem;color:var(--ink-soft)}
.unit-card__tag{position:absolute;top:.9rem;right:.9rem;font-size:.68rem;letter-spacing:1px;
  color:var(--parchment);background:var(--green);padding:.12rem .5rem;border-radius:999px}
.counter-note{margin-top:1.6rem;background:rgba(74,93,35,.12);border:1px solid var(--green);
  border-left:5px solid var(--green);border-radius:var(--radius);padding:1rem 1.2rem;color:var(--ink-soft)}

/* ---------- 战役 ---------- */
.camp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.camp-card{background:var(--parchment);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem 1.1rem;box-shadow:var(--shadow);border-top:5px solid var(--red);
  transition:transform .2s}
.camp-card:hover{transform:translateY(-5px)}
.camp-card h3{font-family:var(--display);font-size:1.2rem;letter-spacing:1px}
.camp-card__civ{display:block;font-size:.76rem;letter-spacing:2px;color:var(--gold);
  text-transform:uppercase;margin-bottom:.5rem}
.camp-card p{font-size:.9rem;color:var(--ink-soft)}

/* ---------- 模式 ---------- */
.mode-list{display:flex;flex-direction:column;gap:.7rem}
.mode-row{display:flex;gap:1.2rem;align-items:baseline;background:var(--parchment);
  border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:8px;
  padding:.9rem 1.2rem;box-shadow:var(--shadow)}
.mode-row__name{font-family:var(--display);font-weight:700;font-size:1.05rem;min-width:230px;
  color:var(--red);letter-spacing:1px}
.mode-row__desc{font-size:.92rem;color:var(--ink-soft)}

/* ---------- 传承 ---------- */
.legacy-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:2.4rem;align-items:start}
.legacy-text p{margin-bottom:1rem;color:var(--ink-soft)}
.legacy-text strong{color:var(--red)}
.legacy-facts{list-style:none;display:flex;flex-direction:column;gap:.8rem}
.legacy-facts li{background:var(--parchment);border:1px solid var(--line);border-radius:8px;
  padding:.7rem 1rem;box-shadow:var(--shadow);font-size:.92rem;color:var(--ink-soft)}
.legacy-facts b{color:var(--gold);font-family:var(--display);margin-right:.4rem;letter-spacing:1px}

/* ---------- 图廊 ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gallery__item{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);border:3px solid var(--parchment)}
.gallery__item--wide{grid-column:span 2}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gallery__item:hover img{transform:scale(1.06)}
.gallery__item figcaption{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(0deg,rgba(20,12,4,.85),transparent);color:#f3e7c9;
  font-size:.82rem;padding:.6rem .8rem}

/* ---------- 页脚 ---------- */
.footer{background:linear-gradient(180deg,#2b1d0e,#1c130a);color:#d9c79a;
  border-top:3px solid var(--gold);padding:2.4rem 0 2rem;position:relative;z-index:1}
.footer__inner{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.footer__brand{font-family:var(--display);font-size:1.1rem;color:var(--gold-light);margin-bottom:.5rem;letter-spacing:1px}
.footer__note{font-size:.82rem;max-width:560px;line-height:1.6;color:#b8a87e}
.footer__meta{font-size:.8rem;color:#9a8a64;text-align:right;line-height:1.7}
.footer__meta strong{color:var(--gold-light)}

/* ---------- 入场动画 ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
@media(max-width:980px){
  .intro-grid,.legacy-grid{grid-template-columns:1fr}
  .ages,.res-grid,.unit-grid{grid-template-columns:repeat(2,1fr)}
  .camp-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .nav__links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:rgba(43,29,14,.97);padding:1rem 1.4rem;gap:.4rem;border-bottom:2px solid var(--gold)}
  .nav__links.open{display:flex}
  .nav__toggle{display:block}
  .ages,.res-grid,.unit-grid,.camp-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .gallery__item--wide{grid-column:span 1}
  .mode-row{flex-direction:column;gap:.3rem}
  .mode-row__name{min-width:0}
  .footer__inner{flex-direction:column}
  .footer__meta{text-align:left}
}