:root{
  --bg:#0d0b08;
  --bg2:#14110c;
  --panel:#17130d;
  --panel2:#1d1812;
  --ink:#e9dfc8;
  --ink-dim:#b6a888;
  --ink-faint:#7c705c;
  --gold:#d4af6a;
  --gold-bright:#ecd59a;
  --vermillion:#c0392b;
  --vermillion-deep:#9c2b1f;
  --blood:#8e1f16;
  --sage:#7d8f6a;
  --line:rgba(212,175,106,.28);
  --line-strong:rgba(212,175,106,.55);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Serif SC",serif;
  line-height:1.85;
  overflow-x:hidden;
}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#0d0b08}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--vermillion-deep),var(--gold));border-radius:6px;border:2px solid #0d0b08}
::selection{background:var(--vermillion);color:#fff}

/* parchment texture */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:radial-gradient(rgba(212,175,106,.5) 1px,transparent 1px);
  background-size:4px 4px;
}

/* loading */
#loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .7s ease,visibility .7s ease}
#loader.done{opacity:0;visibility:hidden}
#loader .seal{width:86px;height:86px;border:2px solid var(--vermillion);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:"Ma Shan Zheng",cursive;color:var(--vermillion);font-size:44px;transform:rotate(-4deg);box-shadow:0 0 26px rgba(192,57,43,.45), inset 0 0 14px rgba(192,57,43,.25);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 20px rgba(192,57,43,.35)}50%{box-shadow:0 0 46px rgba(212,175,106,.7)}}
#loader .lt{color:var(--ink-dim);letter-spacing:6px;font-size:15px}
#loader .bar{width:260px;height:3px;background:#241d14;border-radius:3px;overflow:hidden;position:relative}
#loader .bar i{position:absolute;left:0;top:0;height:100%;width:40%;background:linear-gradient(90deg,var(--vermillion),var(--gold));border-radius:3px;animation:load 1.1s ease-in-out infinite}
@keyframes load{0%{left:-40%}100%{left:100%}}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,4vw,46px);background:linear-gradient(180deg,rgba(10,8,6,.92),rgba(10,8,6,.55));backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
nav .brand .seal{width:38px;height:38px;border:1.5px solid var(--vermillion);border-radius:6px;transform:rotate(-4deg);display:flex;align-items:center;justify-content:center;font-family:"Ma Shan Zheng",cursive;color:var(--vermillion);font-size:22px;background:rgba(192,57,43,.06)}
nav .brand b{font-family:"Ma Shan Zheng",cursive;font-size:24px;color:var(--gold-bright);letter-spacing:2px;font-weight:400}
nav .links{display:flex;gap:clamp(10px,2vw,26px);flex-wrap:wrap}
nav .links a{color:var(--ink-dim);text-decoration:none;font-size:14px;letter-spacing:2px;position:relative;transition:color .2s;font-family:"Noto Sans SC",sans-serif}
nav .links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--vermillion);transition:width .3s}
nav .links a:hover,nav .links a.active{color:var(--gold-bright)}
nav .links a:hover::after,nav .links a.active::after{width:100%}
nav .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
nav .burger span{width:24px;height:2px;background:var(--gold)}
@media(max-width:880px){
  nav .links{position:fixed;top:66px;right:0;flex-direction:column;background:rgba(13,11,8,.97);padding:18px 24px;gap:16px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(100%);transition:transform .3s}
  nav .links.open{transform:translateX(0)}
  nav .burger{display:flex}
}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:120px 20px 60px}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;transform:scale(1.06)}
.hero .vin{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 42%,rgba(10,8,6,0) 0%,rgba(10,8,6,.72) 62%,rgba(10,8,6,.96) 100%),linear-gradient(180deg,rgba(10,8,6,.35) 0%,rgba(10,8,6,.15) 45%,rgba(13,11,8,.97) 100%)}
.hero .smoke{position:absolute;left:50%;top:-60px;width:700px;height:700px;transform:translateX(-50%);z-index:-1;opacity:.5;background:radial-gradient(circle,rgba(212,175,106,.12),transparent 65%);filter:blur(6px)}
.hero .kicker{font-family:"Noto Sans SC",sans-serif;letter-spacing:8px;color:var(--gold);font-size:14px;margin-bottom:26px;text-shadow:0 0 18px rgba(212,175,106,.4)}
.hero h1{font-family:"Ma Shan Zheng",cursive;font-size:clamp(54px,11vw,128px);font-weight:400;background:linear-gradient(180deg,var(--gold-bright),var(--gold) 45%,var(--vermillion-deep));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1;letter-spacing:6px;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.hero .eighteen{font-family:"Ma Shan Zheng",cursive;color:var(--ink-faint);font-size:clamp(20px,3.4vw,30px);letter-spacing:10px;margin-top:8px}
.hero .sub{max-width:760px;margin:26px auto 0;color:var(--ink-dim);font-size:clamp(15px,2vw,18px);letter-spacing:2px;line-height:2}
.hero .orn{display:flex;align-items:center;gap:18px;justify-content:center;margin:34px auto 0;color:var(--gold)}
.hero .orn::before,.hero .orn::after{content:"";height:1px;width:110px;background:linear-gradient(90deg,transparent,var(--gold))}
.hero .orn::after{background:linear-gradient(90deg,var(--gold),transparent)}
.hero .orn .diamond{width:10px;height:10px;border:1px solid var(--gold);transform:rotate(45deg)}
.hero .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--ink-faint);font-size:12px;letter-spacing:3px;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero .scroll-hint .mouse{width:22px;height:34px;border:1.5px solid var(--ink-faint);border-radius:12px;position:relative}
.hero .scroll-hint .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;background:var(--gold);border-radius:2px;animation:wheel 1.4s infinite}
@keyframes wheel{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(10px)}}

/* layout */
main{position:relative;z-index:1}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
section{padding:clamp(60px,9vw,110px) 0;position:relative}
.section-head{text-align:center;margin-bottom:clamp(40px,6vw,64px)}
.section-head .tag{font-family:"Noto Sans SC",sans-serif;font-size:12px;letter-spacing:6px;color:var(--vermillion);margin-bottom:14px}
.section-head h2{font-family:"Ma Shan Zheng",cursive;font-size:clamp(34px,6vw,58px);font-weight:400;color:var(--gold-bright);letter-spacing:4px;line-height:1.2}
.section-head .rule{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.section-head .rule::before,.section-head .rule::after{content:"";height:1px;width:64px;background:var(--line-strong)}
.section-head .rule .diamond{width:9px;height:9px;border:1px solid var(--gold);transform:rotate(45deg)}
.section-head p{color:var(--ink-dim);max-width:720px;margin:18px auto 0;font-size:15px;letter-spacing:1px}

/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}

/* panel */
.panel{background:linear-gradient(180deg,rgba(29,24,18,.65),rgba(21,17,12,.65));border:1px solid var(--line);border-radius:6px;position:relative;padding:26px 28px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.panel::before,.panel::after{content:"";position:absolute;width:16px;height:16px;border:1px solid var(--gold);opacity:.6}
.panel::before{top:-1px;left:-1px;border-right:none;border-bottom:none;border-radius:6px 0 0 0}
.panel::after{bottom:-1px;right:-1px;border-left:none;border-top:none;border-radius:0 0 6px 0}

/* intro */
.intro-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:stretch}
@media(max-width:880px){.intro-grid{grid-template-columns:1fr}}
.intro-grid .panel p{color:var(--ink-dim);margin-bottom:14px;font-size:15.5px;text-align:justify}
.intro-grid .panel p b{color:var(--gold-bright);font-weight:600}
.intro-grid .panel h3{font-family:"Ma Shan Zheng",cursive;font-weight:400;color:var(--gold-bright);font-size:24px;margin-bottom:14px;letter-spacing:2px}
.fact-card{display:flex;flex-direction:column;gap:14px;justify-content:center}
.fact{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px dashed var(--line)}
.fact:last-child{border-bottom:none}
.fact .ny{font-family:"Noto Sans SC",sans-serif;font-weight:700;font-size:20px;color:var(--gold);min-width:64px}
.fact .txt{color:var(--ink-dim);font-size:14.5px}
.fact .txt b{color:var(--gold-bright)}
@media(max-width:520px){.fact{flex-direction:column;align-items:flex-start;gap:4px}}

/* states */
.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.state{background:linear-gradient(180deg,rgba(35,29,20,.6),rgba(22,18,12,.6));border:1px solid var(--line);border-radius:5px;padding:14px 12px;text-align:center;cursor:pointer;position:relative;transition:transform .25s,border-color .25s,box-shadow .25s;overflow:hidden}
.state::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,transparent,var(--vermillion),transparent);transform:scaleX(0);transition:transform .3s}
.state:hover{transform:translateY(-4px);border-color:var(--vermillion);box-shadow:0 12px 26px rgba(192,57,43,.22)}
.state:hover::after{transform:scaleX(1)}
.state .sname{font-family:"Ma Shan Zheng",cursive;font-size:26px;color:var(--gold-bright);letter-spacing:2px}
.state .snow{font-size:12px;color:var(--ink-faint);margin-top:3px;letter-spacing:1px}
.state .szone{display:inline-block;margin-top:8px;font-size:11px;padding:2px 9px;border:1px solid var(--line-strong);border-radius:20px;color:var(--gold);letter-spacing:2px}
.state .szone.dai{color:var(--sage);border-color:rgba(125,143,106,.5)}
.state.active{border-color:var(--gold-bright);box-shadow:0 0 0 1px var(--gold-bright),0 12px 30px rgba(212,175,106,.25)}
.state-detail{display:none;margin-top:24px}
.state-detail.show{display:block}
.state-detail .panel b{color:var(--gold-bright)}

/* timeline */
.timeline{position:relative;max-width:900px;margin:0 auto;padding:10px 0}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,var(--vermillion),var(--gold),transparent);transform:translateX(-50%)}
.tl-item{position:relative;width:50%;padding:0 42px 44px}
.tl-item:nth-child(odd){left:0;text-align:right}
.tl-item:nth-child(even){left:50%;text-align:left}
.tl-item .yr{font-family:"Noto Sans SC",sans-serif;font-weight:700;font-size:clamp(22px,3.4vw,30px);color:var(--vermillion);text-shadow:0 0 18px rgba(192,57,43,.35);letter-spacing:2px;line-height:1.1}
.tl-item:nth-child(even) .yr{color:var(--gold)}
.tl-item .dot{position:absolute;top:6px;width:14px;height:14px;border-radius:50%;background:var(--vermillion);border:2.5px solid var(--bg);box-shadow:0 0 0 2px var(--vermillion),0 0 16px rgba(192,57,43,.6)}
.tl-item:nth-child(odd) .dot{right:-7px}
.tl-item:nth-child(even) .dot{left:-7px;background:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 16px rgba(212,175,106,.6)}
.tl-item .tt{font-size:16px;color:var(--gold-bright);margin:6px 0 4px;font-weight:600}
.tl-item .td{font-size:14px;color:var(--ink-dim)}
.tl-item .td b{color:var(--ink)}
@media(max-width:720px){
  .timeline::before{left:12px}
  .tl-item,.tl-item:nth-child(even){width:100%;left:0;text-align:left;padding:0 0 40px 40px}
  .tl-item .dot,.tl-item:nth-child(even) .dot{left:5px;right:auto}
  .figures{grid-template-columns:1fr}
  .figure{grid-template-columns:110px 1fr;gap:16px;padding:16px 16px 20px}
}
@media(max-width:460px){
  .figure{grid-template-columns:1fr}
  .figure .portrait{max-width:150px}
}

/* battles */
.battles{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:26px}
.battle{background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;position:relative;transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column}
.battle:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(0,0,0,.55),0 0 0 1px var(--gold)}
.battle .thumb{position:relative;height:190px;background-size:cover;background-position:center}
.battle .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,11,8,.1),rgba(13,11,8,.92))}
.battle .thumb .ch{position:absolute;left:14px;top:12px;z-index:2;display:flex;gap:6px}
.battle .thumb .ch span{font-family:"Noto Sans SC",sans-serif;font-size:11px;padding:3px 9px;border-radius:3px;letter-spacing:1px}
.battle .thumb .ch .c-red{background:rgba(142,30,22,.85);color:#f6d9c8}
.battle .thumb .ch .c-gold{background:rgba(145,110,45,.85);color:#f6e7c0}
.battle .thumb .mission{position:absolute;left:14px;bottom:12px;z-index:2;color:var(--ink);font-size:12px;letter-spacing:2px;font-family:"Noto Sans SC",sans-serif;opacity:.9}
.battle .body{padding:20px 22px 26px;display:flex;flex-direction:column;flex:1}
.battle .body .head{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.battle .body .name{font-family:"Ma Shan Zheng",cursive;font-size:26px;color:var(--gold-bright);letter-spacing:1px;font-weight:400}
.battle .body .date{font-family:"Noto Sans SC",sans-serif;font-size:13px;color:var(--vermillion);letter-spacing:1px;border:1px solid rgba(192,57,43,.5);padding:2px 10px;border-radius:20px}
.battle .body .desc{color:var(--ink-dim);font-size:14.5px;line-height:1.95}
.battle .body .desc b{color:var(--gold-bright)}
.battle .body .resp{margin-top:14px;padding:10px 14px;border-left:3px solid var(--vermillion);background:rgba(192,57,43,.08);font-size:13.5px;color:var(--ink)}
.battle .body .resp i{color:var(--gold);font-style:normal}
.log{list-style:none;margin-top:14px;font-family:"Noto Sans SC",sans-serif;font-size:13px;display:flex;flex-direction:column;gap:7px}
.log li{display:flex;gap:10px;align-items:baseline;color:var(--ink-dim)}
.log li .tag{flex-shrink:0;color:var(--gold);letter-spacing:1px}
.log li.win .tag{color:var(--vermillion)}
.log li.lose .tag{color:var(--sage)}

/* figures */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:24px}
.figure{background:linear-gradient(180deg,rgba(32,26,18,.7),rgba(20,16,11,.7));border:1px solid var(--line);border-radius:6px;padding:20px 24px 22px;position:relative;transition:transform .3s,border-color .3s;display:grid;grid-template-columns:150px 1fr;gap:22px;overflow:hidden}
.figure:hover{transform:translateY(-5px);border-color:var(--vermillion)}
.figure .portrait{position:relative;align-self:start}
.figure .portrait img{width:100%;border-radius:4px;display:block;border:1px solid var(--line-strong);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.figure .portrait .pno{position:absolute;top:8px;left:8px;background:rgba(9,6,3,.75);color:var(--gold-bright);font-family:"Ma Shan Zheng",cursive;font-size:20px;padding:0 9px;border:1px solid var(--line-strong);border-radius:3px;letter-spacing:1px}
.figure .fbody{min-width:0}
.figure .rank{position:absolute;top:14px;right:16px;font-family:"Ma Shan Zheng",cursive;color:var(--vermillion);font-size:30px;opacity:.35}
.figure .nm{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-right:32px}
.figure .nm h3{font-family:"Ma Shan Zheng",cursive;font-size:30px;color:var(--gold-bright);font-weight:400}
.figure .nm .sub{font-size:13px;color:var(--ink-faint);font-family:"Noto Sans SC",sans-serif;letter-spacing:1px}
.figure .life{font-size:13px;color:var(--vermillion);margin-top:2px;letter-spacing:1px}
.figure .bio{color:var(--ink-dim);font-size:14px;margin-top:12px;line-height:1.95}
.figure .bio b{color:var(--gold-bright)}
.figure .stats{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.figure .stat .lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-faint);font-family:"Noto Sans SC",sans-serif;letter-spacing:1px}
.figure .stat .lbl i{font-style:normal;color:var(--gold)}
.figure .track{height:6px;background:#241d13;border-radius:4px;margin-top:4px;overflow:hidden}
.figure .track b{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--vermillion-deep),var(--vermillion),var(--gold));width:0;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.figure .track.b-gold b{background:linear-gradient(90deg,#8a6a2f,var(--gold),var(--gold-bright))}
.figure.in .track b{width:var(--w)}

/* legacy */
.legacy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.legacy{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:24px 26px;position:relative;overflow:hidden;transition:transform .3s,border-color .3s}
.legacy:hover{transform:translateY(-4px);border-color:var(--gold)}
.legacy .idx{font-family:"Ma Shan Zheng",cursive;font-size:44px;color:var(--vermillion);opacity:.35;line-height:1;margin-bottom:6px}
.legacy h3{font-family:"Ma Shan Zheng",cursive;font-weight:400;font-size:24px;color:var(--gold-bright);margin-bottom:10px;letter-spacing:1px}
.legacy p{color:var(--ink-dim);font-size:14.5px}
.legacy p b{color:var(--gold-bright)}

/* sources */
.srcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.source{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px 18px;display:flex;gap:16px;align-items:flex-start;transition:border-color .3s}
.source:hover{border-color:var(--gold)}
.source .sno{font-family:"Noto Sans SC",sans-serif;color:var(--vermillion);font-size:22px;font-weight:700;min-width:34px}
.source .sbody h4{font-size:15px;color:var(--gold-bright);font-weight:600;margin-bottom:2px}
.source .sbody p{font-size:13px;color:var(--ink-dim)}
.source .sbody a{color:var(--sage);word-break:break-all;font-size:12.5px;text-decoration:none;border-bottom:1px dotted var(--sage)}
.source .sbody a:hover{color:var(--gold-bright)}
.img-note{margin-top:22px;text-align:center;font-size:12.5px;color:var(--ink-faint)}
.img-note a{color:var(--gold);text-decoration:none;border-bottom:1px dotted var(--gold)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:8px}
.gallery figure{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#0c0a07;transition:transform .3s}
.gallery figure:hover{transform:translateY(-4px)}
.gallery img{width:100%;height:170px;object-fit:cover;display:block;filter:sepia(.18);transition:filter .3s}
.gallery figure:hover img{filter:none}
.gallery figcaption{padding:9px 12px;font-size:12px;color:var(--ink-faint);letter-spacing:1px;border-top:1px solid var(--line)}
.gallery figcaption b{color:var(--gold)}

/* quote */
.quote{max-width:860px;margin:0 auto;text-align:center;padding:14px 10px}
.quote .mark{font-family:"Ma Shan Zheng",cursive;font-size:90px;color:var(--vermillion);line-height:.6;opacity:.5;display:block;margin-bottom:10px}
.quote p{font-size:clamp(17px,2.6vw,22px);color:var(--ink);letter-spacing:3px;line-height:2.1;font-family:"Ma Shan Zheng",cursive}
.quote cite{display:block;margin-top:18px;color:var(--gold);font-size:14px;letter-spacing:3px;font-style:normal}

/* footer */
footer{border-top:1px solid var(--line);padding:44px 0 50px;text-align:center;background:linear-gradient(180deg,transparent,rgba(0,0,0,.5));position:relative}
footer .fseal{width:56px;height:56px;margin:0 auto 16px;border:1.5px solid var(--vermillion);border-radius:7px;transform:rotate(-4deg);display:flex;align-items:center;justify-content:center;font-family:"Ma Shan Zheng",cursive;color:var(--vermillion);font-size:30px}
footer p{color:var(--ink-faint);font-size:13px;letter-spacing:2px}
footer p b{color:var(--gold)}

/* to top */
#toTop{position:fixed;right:22px;bottom:22px;z-index:900;width:46px;height:46px;border-radius:6px;border:1px solid var(--gold);background:rgba(20,16,11,.85);color:var(--gold);font-size:20px;cursor:pointer;opacity:0;visibility:hidden;transition:all .3s}
#toTop.show{opacity:1;visibility:visible}
#toTop:hover{background:var(--vermillion);color:#fff}