@charset "UTF-8";
/* Official site, 2026-10-27 redesign after the game sites the user pointed to (燕雲十六聲 HMT, 明日之後 TW):
   a full-page home (one wheel step per screen, a side index, a chevron to the next screen) whose screens
   each have their own look: key visual, a light news page, professions on a brush stroke, a feature
   route, and the call to action with the footer.
   Colours stay the site's own: ink black, vermilion, paper. */
@font-face { font-family:Display; src:url(fonts/display.ttf) format("truetype"); font-display:swap; }
:root {
  --bg:#07080c; --bg-2:#0e1016; --ink:#111318; --muted:#6a655c; --line:#d8d2c8; --accent:#d63a22; --accent-2:#b02c17;
  --paper:#f1ece2; --panel:#fffcf6; --white:#f3efe7; --dim:#b9b4aa;
  --font:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --serif:"Headline TC","Headline SC","Noto Serif TC","Songti TC","PMingLiU",serif;
  --kai:"Kai TC","Kai SC","BiauKai","STKaiti","DFKai-SB",serif;
  --top:68px; --wide:1240px; --gutter:96px; color-scheme:light;
}
:root:lang(zh-Hans) { --serif:"Headline SC","Headline TC","Noto Serif SC","Songti SC",serif; --kai:"Kai SC","Kai TC","STKaiti",serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.65 var(--font); overflow-wrap:anywhere; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
img { max-width:100%; }
h1,h2,h3,p { margin:0; }
[hidden] { display:none!important; }
.skip { position:fixed; left:20px; top:-80px; z-index:100; background:var(--paper); padding:12px; }
.skip:focus { top:12px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* --- Top bar --- */
/* Header after 燕雲十六聲's: a dark-to-clear gradient with a fine paper grain over the art, a gold rule
   with a centre diamond along the foot, line icons before the items, a gold active mark, and a framed
   download plaque. */
.topbar { position:fixed; inset:0 0 auto; z-index:40; height:var(--top); display:flex; align-items:center; gap:28px; padding:0 32px; color:var(--white);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .7 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#07080ce6 0%,#0b0c10b8 55%,#0b0c1073 100%);
  -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2); transition:background .3s; }
.topbar::after { content:""; position:absolute; inset:auto 0 -1px; height:1px; background:linear-gradient(90deg,transparent,#c9a86a66 18%,#e2c88fb3 50%,#c9a86a66 82%,transparent); }
.topbar::before { content:""; position:absolute; left:50%; bottom:-4px; width:7px; height:7px; margin-left:-3.5px; background:#e2c88f; transform:rotate(45deg); box-shadow:0 0 8px #e2c88f88; }
.topbar.solid, body:not([data-page=home]) .topbar { background-color:#07080c; }
.brand { display:block; width:150px; flex:none; }
.brand img { display:block; width:100%; height:44px; object-fit:contain; object-position:left center; filter:drop-shadow(0 2px 6px #000a); }
.topbar nav { display:flex; gap:2px; margin:0 auto; }
.topbar nav a { position:relative; display:inline-flex; align-items:center; gap:7px; height:var(--top); padding:0 13px; font-size:15px; letter-spacing:.08em; color:#d9d3c7; white-space:nowrap; transition:color .2s; }
.nav-icon { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
.topbar nav a:hover { color:#f3e3bd; }
.topbar nav a:hover .nav-icon { opacity:1; }
.topbar nav a[aria-current=page] { color:#e9cf97; text-shadow:0 0 12px #e2c88f55; }
.topbar nav a[aria-current=page] .nav-icon { opacity:1; }
.topbar nav a[aria-current=page]::after { content:""; position:absolute; left:16px; right:16px; bottom:14px; height:1px; background:linear-gradient(90deg,transparent,#e2c88f,transparent); }
.topbar-actions { display:flex; align-items:center; gap:12px; flex:none; }
.top-play { display:inline-flex; align-items:center; height:36px; padding:0 16px; font-size:14px; letter-spacing:.06em; color:#e9dfc8; border:1px solid #c9a86a80; background:#07080c66; white-space:nowrap; }
.top-play:hover { border-color:#e2c88f; color:#fff2d6; }
/* The download plaque: vermilion ground, a gold double frame, a diamond on each side. */
.top-download { position:relative; display:inline-flex; align-items:center; height:38px; padding:0 30px; font-size:15px; font-weight:700; letter-spacing:.12em; color:#fff3dc; white-space:nowrap;
  background:linear-gradient(180deg,#c9412a,#8e2414); border:1px solid #e2c88f; box-shadow:inset 0 0 0 2px #8e2414,inset 0 0 0 3px #e2c88f88,0 4px 14px #0008; text-shadow:0 1px 2px #0008; }
.top-download::before,.top-download::after { content:""; position:absolute; top:50%; width:5px; height:5px; margin-top:-2.5px; background:#e2c88f; transform:rotate(45deg); }
.top-download::before { left:11px; } .top-download::after { right:11px; }
.top-download:hover { background:linear-gradient(180deg,#d84a31,#9c2918); }
.lang-switch { display:inline-flex; border:1px solid #c9a86a66; overflow:hidden; }
.lang-switch button { width:32px; height:34px; border:0; background:transparent; color:#d9d3c7; font-size:13px; }
.lang-switch button[aria-pressed=true] { background:#e2c88f; color:#1b140c; font-weight:700; }
.menu-toggle { display:none; width:40px; height:40px; border:0; background:transparent; padding:9px; flex-direction:column; justify-content:space-between; }
.menu-toggle span { display:block; height:2px; background:var(--white); }

/* --- Home screens --- */
/* A screen's content is laid out in the part below the fixed header, --gutter in from both sides. */
.screen { position:relative; height:100svh; min-height:640px; padding-top:var(--top); overflow:hidden; background:var(--bg); color:var(--white); isolation:isolate; display:flex; flex-direction:column; justify-content:center; justify-content:safe center; }
.screen-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.screen-shade { position:absolute; inset:0; z-index:-1; }
.screen-inner { width:min(var(--wide),100% - 2 * var(--gutter)); margin:0 auto; padding:0 0 56px; }
/* Section title: Chinese headline, a small English label under a vermilion rule (as on 明日之後). */
.section-title { margin-bottom:34px; }
.section-title h2 { font:900 clamp(32px,3.2vw,46px)/1.2 var(--serif); letter-spacing:.14em; }
.section-title span { display:inline-flex; align-items:center; gap:10px; margin-top:10px; font:13px/1 Display,sans-serif; letter-spacing:.4em; color:var(--dim); }
.section-title span::before { content:""; width:56px; height:2px; background:var(--accent); }
.light .section-title span { color:var(--muted); }
/* Every screen ends with the same chevron to the next one. */
.next-screen { position:absolute; left:50%; bottom:22px; width:30px; height:30px; margin-left:-15px; z-index:3; animation:nudge 2s ease-in-out infinite; }
.next-screen::before,.next-screen::after { content:""; position:absolute; left:7px; width:14px; height:14px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); opacity:.85; }
.next-screen::before { top:0; } .next-screen::after { top:9px; opacity:.45; }
@keyframes nudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(6px); } }
/* Content of a screen rises in when the screen arrives. */
.reveal { opacity:0; transform:translateY(36px); transition:opacity .8s ease .25s,transform .9s cubic-bezier(.2,.7,.2,1) .25s; }
.screen.active .reveal { opacity:1; transform:none; }
.screen.active .reveal + .reveal { transition-delay:.45s; }

.btn-primary,.btn-ghost { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; min-height:56px; min-width:210px; padding:6px 30px; border-radius:2px; white-space:nowrap; transition:background .2s,border-color .2s,transform .2s; }
.btn-primary b,.btn-ghost b { font-size:17px; letter-spacing:.08em; }
.btn-primary small,.btn-ghost small { font-size:11px; opacity:.8; }
.btn-primary { background:var(--accent); color:white; box-shadow:0 10px 30px -10px #d63a22cc; }
.btn-primary:hover { background:var(--accent-2); transform:translateY(-2px); }
.btn-ghost { border:1px solid #f3efe799; color:var(--white); background:#07080c66; backdrop-filter:blur(6px); }
.btn-ghost:hover { border-color:white; transform:translateY(-2px); }

/* 1. Key visual: the game's calligraphy logo is the headline (as game sites show their title art),
   with the slogan in kaishu, a ruled subtitle and one row of actions, at the lower left so the art's
   rider stays clear on the right. */
.kv { justify-content:center; }
.kv .screen-shade { background:linear-gradient(90deg,#07080ce0 0%,#07080c8c 32%,transparent 58%),linear-gradient(180deg,#07080c99,transparent 22%,transparent 62%,#07080ccc); }
.kv-copy { width:min(var(--wide),100% - 2 * var(--gutter)); margin:0 auto; padding-bottom:4vh; }
.kv-logo { display:block; width:clamp(300px,32vw,520px); height:auto; margin-left:-12px; filter:drop-shadow(0 10px 30px #000d); }
.kv-slogan { margin:6px 0 0; font:700 clamp(26px,2.4vw,38px)/1.5 var(--kai); letter-spacing:.32em; color:#f6efe2; text-shadow:0 3px 16px #000; }
.kv-slogan::after { content:""; display:block; width:min(420px,100%); height:1px; margin:18px 0 0; background:linear-gradient(90deg,var(--accent),#d63a2200); }
.kv-description { margin:16px 0 34px; font-size:15px; letter-spacing:.32em; color:#ddd6ca; text-shadow:0 2px 12px #000; }
.kv-actions { display:flex; gap:16px; flex-wrap:wrap; }

/* 2. News: a light, paper-toned screen between dark ones (as 燕雲十六聲 does). */
.light { background:var(--paper); color:var(--ink); }
.news-screen { background:radial-gradient(ellipse at 85% 10%,#ffffffcc,transparent 45%),radial-gradient(ellipse at 10% 95%,#d8cfbf88,transparent 50%),var(--paper); }
.news-screen::before { content:""; position:absolute; inset:auto -5% -8% -5%; height:42%; z-index:-1; opacity:.16; background:url(art/mountain-pass.jpg) center bottom/cover; filter:grayscale(1) contrast(1.2);
  mask-image:linear-gradient(transparent,#000 60%); -webkit-mask-image:linear-gradient(transparent,#000 60%); }
.news-screen .next-screen { color:var(--ink); }
.news-board { display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:44px; align-items:start; }
.home-banner { position:relative; width:100%; height:min(420px,50vh); overflow:hidden; background:var(--bg); box-shadow:0 24px 50px -24px #11131888; }
.banner-slide { position:absolute; inset:0; display:block; color:var(--white); }
.banner-slide img { width:100%; height:100%; object-fit:cover; transition:transform 6s; }
.banner-slide:hover img { transform:scale(1.05); }
.banner-copy { position:absolute; inset:auto 0 0; padding:70px 24px 40px; background:linear-gradient(transparent,#07080ce6); }
.banner-copy h3 { font:900 22px/1.4 var(--serif); margin-top:8px; }
.banner-copy .news-meta { color:#ddd7cc; }
.banner-copy .category-label { color:white; background:var(--accent); }
.banner-dots { position:absolute; left:24px; bottom:16px; display:flex; gap:8px; }
.banner-dots button { width:20px; height:3px; padding:0; border:0; background:#ffffff66; }
.banner-dots button[aria-pressed=true] { background:var(--accent); width:32px; }
.news-panel { min-width:0; display:flex; flex-direction:column; }
.home-news { border-top:2px solid var(--ink); }
.home-news .loading,.home-news .empty { padding:24px 0; text-align:left; }
.news-row { display:grid; grid-template-columns:76px minmax(0,1fr); gap:18px; align-items:center; padding:16px 4px; border-bottom:1px solid #11131822; transition:background .2s,padding .2s; }
.news-row:hover { background:#ffffff8c; padding-left:12px; }
.news-day { display:grid; text-align:center; line-height:1.1; }
.news-day strong { font:24px/1 Display,sans-serif; letter-spacing:.04em; }
.news-day small { font:11px Display,sans-serif; letter-spacing:.2em; color:var(--muted); margin-top:4px; }
.news-row-copy { display:flex; align-items:center; gap:12px; min-width:0; }
.news-row-board { flex:none; font-size:12px; padding:1px 8px; color:#b0301a; border:1px solid #b0301a66; }
.news-row-copy strong { font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.news-row:hover .news-row-copy strong { color:var(--accent); }
.news-row .pin-mark { flex:none; font-size:12px; font-weight:700; color:var(--accent); }
.more-link { align-self:flex-end; display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:14px; color:var(--muted); }
.more-link i { font-style:normal; font-size:18px; color:var(--accent); }
.more-link:hover { color:var(--ink); }

/* 3. Professions: dark, a slanted vermilion brush stroke behind the portrait (after 燕雲's gold stroke). */
.heroes { background:radial-gradient(ellipse at 68% 45%,#2b1d18,#0b0c10 62%,#07080c); }
.brush { position:absolute; z-index:-3; right:6%; top:-10%; width:46%; height:130%; transform:rotate(18deg); opacity:.85;
  background:linear-gradient(90deg,transparent 0 6%,#d63a22 6% 9%,transparent 9% 14%,#8c2414 14% 30%,#d63a22cc 30% 34%,transparent 34%);
  mask-image:linear-gradient(transparent,#000 15%,#000 80%,transparent); -webkit-mask-image:linear-gradient(transparent,#000 15%,#000 80%,transparent); filter:blur(.5px); }
.heroes-shade { background:linear-gradient(90deg,#07080cf2 0%,#07080cb0 36%,transparent 62%); }
.character-art { position:absolute; inset:var(--top) 0 0 34%; z-index:-2; }
.character-art img { position:absolute; right:6%; bottom:0; height:100%; width:auto; max-width:none; opacity:0; transform:translateX(60px); transition:opacity .6s,transform .9s cubic-bezier(.2,.7,.2,1);
  mask-image:linear-gradient(to top,transparent,#000 18%); -webkit-mask-image:linear-gradient(to top,transparent,#000 18%); }
.character-art img.on { opacity:1; transform:none; }
.heroes-body { display:grid; grid-template-columns:150px minmax(0,420px); gap:56px; align-items:start; }
.hero-names { display:grid; gap:4px; border-left:1px solid #f3efe72a; }
.hero-names button { display:flex; align-items:baseline; gap:12px; padding:12px 16px; margin-left:-1px; border:0; border-left:2px solid transparent; background:transparent; color:var(--dim); text-align:left; }
.hero-names button small { font:13px Display,sans-serif; letter-spacing:.1em; }
.hero-names button strong { font:900 21px/1.3 var(--serif); letter-spacing:.2em; }
.hero-names button:hover { color:white; }
.hero-names button[aria-pressed=true] { color:white; border-left-color:var(--accent); background:linear-gradient(90deg,#d63a2233,transparent); }
.character-index { display:flex; align-items:flex-end; gap:12px; }
.character-index>span { font:80px/.85 Display,sans-serif; color:transparent; -webkit-text-stroke:1.5px #f3efe78c; }
.character-index small { font:15px Display,sans-serif; letter-spacing:.3em; color:var(--dim); }
.character-copy h3 { font:900 48px/1.2 var(--serif); letter-spacing:.14em; margin:14px 0 12px; }
.character-tag { display:inline-block; padding:4px 12px; font-size:13px; background:var(--accent); }
.character-quote { font:900 20px/1.6 var(--serif); margin-top:18px; }
.character-description { margin:10px 0 24px; color:#cfc9bf; line-height:1.9; }
.character-arrows { display:flex; gap:10px; }
.character-arrows button { width:46px; height:46px; border-radius:50%; border:1px solid #f3efe766; background:#07080c66; color:white; font-size:18px; }
.character-arrows button:hover { border-color:white; }

/* 4. Features: a full-bleed scene with a marching route along the foot (after 燕雲's world map line). */
.features { justify-content:flex-start; padding-top:calc(var(--top) + 40px); }
/* The slides do not form their own layer: the picture sits under the shade, the copy above it. */
.feature-slides,.feature-slide { position:absolute; inset:0; }
.feature-slide .screen-bg { animation:feature-zoom 14s ease-out both; }
.feature-slide:nth-child(3) .screen-bg { object-position:center 70%; }
@keyframes feature-zoom { from { transform:scale(1.1); } to { transform:scale(1); } }
.features-shade { background:linear-gradient(90deg,#07080ce6,#07080c77 42%,transparent 70%),linear-gradient(180deg,#07080caa,transparent 26%,transparent 62%,#07080ce6); }
.feature-copy { position:absolute; z-index:1; left:max(var(--gutter),calc((100% - var(--wide))/2)); top:calc(50% + var(--top) / 2); transform:translateY(-50%); width:min(460px,100% - 2 * var(--gutter)); }
.feature-copy span { font:76px/1 Display,sans-serif; color:transparent; -webkit-text-stroke:1.5px var(--accent); }
.feature-copy h3 { font:900 clamp(36px,3.6vw,54px)/1.25 var(--serif); letter-spacing:.16em; margin:10px 0 16px; }
.feature-copy p { font-size:16px; line-height:1.9; color:#ddd7cc; }
.feature-route { position:absolute; left:50%; bottom:80px; transform:translateX(-50%); width:min(760px,100% - 2 * var(--gutter)); }
.screen.active .feature-route.reveal { transform:translateX(-50%); }
.feature-route.reveal { transform:translate(-50%,36px); }
.route-nodes { position:relative; display:flex; justify-content:space-between; }
.route-nodes::before { content:""; position:absolute; left:8px; right:8px; top:8px; border-top:2px dashed #f3efe766; }
.route-nodes button { position:relative; display:grid; justify-items:center; gap:12px; padding:0; border:0; background:none; color:var(--dim); font:900 18px/1 var(--serif); letter-spacing:.2em; }
.route-nodes button::before { content:""; width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid #f3efe7aa; transition:all .3s; }
.route-nodes button[aria-pressed=true] { color:white; }
.route-nodes button[aria-pressed=true]::before { background:var(--accent); border-color:#ffd2c8; box-shadow:0 0 0 6px #d63a2244; }
.route-count { display:block; text-align:center; margin-top:18px; font:14px Display,sans-serif; letter-spacing:.3em; color:var(--dim); }

/* 5. Join: the call to action, with the footer's notices on the same screen. */
.join { justify-content:center; text-align:center; }
.join { background:radial-gradient(ellipse at 50% 40%,#2a1714,#0b0c10 60%,#050609); }
.join::before { content:"戰"; position:absolute; z-index:-1; left:50%; top:46%; transform:translate(-50%,-50%); font:900 min(70vh,640px)/1 var(--serif); color:#d63a2214; pointer-events:none; }
.join-inner { padding:0 24px 90px; }
.join-logo { width:min(360px,70vw); height:auto; filter:drop-shadow(0 8px 30px #000); }
.join h2 { font:900 clamp(30px,3vw,44px)/1.3 var(--serif); letter-spacing:.18em; margin:12px 0 22px; }
.join-specs { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.join-specs span { padding:6px 14px; border:1px solid #f3efe733; background:#f3efe70f; font-size:13px; color:#ddd7cc; }
.join-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; }
.join-guide { display:inline-block; margin-top:20px; font-size:14px; color:var(--dim); }
.join-guide:hover { color:white; }
.join-footer { position:absolute; inset:auto 0 0; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:18px max(var(--gutter),calc((100% - var(--wide))/2)); border-top:1px solid #f3efe71a; background:#050609cc; text-align:left; }
.join-footer .rating-notice ul { font-size:12px; }
.join-footer nav { display:flex; gap:20px; font-size:13px; color:var(--dim); flex-wrap:wrap; }
.join-footer nav a:hover { color:white; }
.maintenance { position:fixed; top:var(--top); inset-inline:0; z-index:35; padding:10px 32px; text-align:center; color:white; background:#842f20; }

/* Short windows: the screens tighten up rather than run under the header. */
@media(max-height:820px) and (min-width:961px) {
  .screen-inner { padding-bottom:44px; }
  .section-title { margin-bottom:20px; }
  .section-title h2 { font-size:32px; }
  .news-row { padding:10px 4px; }
  .news-day strong { font-size:20px; }
  .home-banner { height:min(360px,46vh); }
  .character-index>span { font-size:60px; }
  .character-copy h3 { font-size:38px; margin:8px 0; }
  .hero-names button { padding:9px 16px; }
  .kv-copy { padding-bottom:2vh; }
  .kv-logo { width:clamp(260px,26vw,420px); }
}

/* Full-page mode (desktop): the track moves one screen per wheel step; the page itself does not scroll. */
html.fullpage,html.fullpage body { height:100%; overflow:hidden; }
html.fullpage #home-view { height:100vh; overflow:hidden; }
html.fullpage .home-track { transition:transform .95s cubic-bezier(.77,0,.18,1); will-change:transform; }
html.fullpage .screen { height:100vh; min-height:0; }
html.fullpage body[data-page=home] .footer { display:none; }

/* --- Footer --- */
.footer { background:#050609; color:var(--dim); }
.footer-inner { width:min(var(--wide),100% - 64px); margin:0 auto; padding:40px 0 28px; }
.footer-top { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid #f3efe714; margin-bottom:24px; }
.footer .brand img { height:46px; }
.footer nav { display:flex; flex-wrap:wrap; gap:24px; font-size:14px; }
.footer nav a:hover { color:white; }
.rating-notice { display:flex; align-items:flex-start; gap:18px; }
.rating-notice>img { width:52px; height:52px; flex:none; }
.rating-notice ul { list-style:none; margin:0; padding:0; font-size:13px; line-height:1.8; color:#9d988e; }
.site-notice { margin-top:16px; font-size:11px; color:#7d786f; }

/* --- Inner pages: one banner, one body width --- */
.inner-view { min-height:70vh; }
.page-banner { position:relative; height:240px; display:flex; align-items:flex-end; padding-top:var(--top); color:var(--white);
  background:linear-gradient(90deg,#07080cf0,#07080c99),url(art/fortress-dusk.jpg) center 35%/cover; }
.page-banner.slim { height:calc(var(--top) + 20px); background:var(--bg); }
.page-banner-inner { width:min(var(--wide),100% - 64px); margin:0 auto; padding-bottom:34px; }
.page-banner-inner span { font:14px/1 Display,sans-serif; letter-spacing:.5em; color:var(--accent); }
.page-banner-inner h1 { font:900 38px/1.3 var(--serif); letter-spacing:.14em; margin-top:10px; }
.page-body { width:min(var(--wide),100% - 64px); margin:0 auto; padding:32px 0 80px; }
.page-body.narrow { width:min(860px,100% - 48px); }
.page-tools { display:flex; justify-content:flex-end; margin-bottom:16px; }
.news-search { display:flex; border:1px solid var(--line); background:var(--panel); }
.news-search input { border:0; background:none; width:240px; min-width:0; padding:10px 14px; font:inherit; font-size:14px; }
.news-search button { border:0; background:none; color:var(--accent); padding:0 16px; }
.loading,.empty { padding:40px 12px; color:var(--muted); text-align:center; }
.retry { color:var(--accent); background:transparent; border:1px solid var(--line); padding:8px 18px; margin-top:12px; }
.news-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--muted); }
.banner-copy .news-meta { color:#ddd7cc; }
.category-label { display:inline-flex; padding:2px 10px; color:#b0301a; background:#b8321c1a; font-weight:700; }
.banner-copy .category-label { color:white; background:var(--accent); }
.pinned { color:var(--accent); font-weight:700; }
.featured-mark { color:#2f7d32; font-weight:700; }

/* Board list (Discuz style) */
.board-info { background:var(--panel); border:1px solid var(--line); padding:16px 20px; margin-bottom:16px; }
.board-info-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; font-size:14px; }
.board-info-head strong { font-size:16px; margin-right:10px; }
.board-info-head .board-stat { color:var(--muted); }
.board-info-head em { font-style:normal; color:var(--accent); font-weight:700; }
.board-info-head .board-sep { color:var(--line); margin:0 4px; }
.board-notice { margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); color:var(--muted); font-size:13px; white-space:pre-line; }
.thread-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.thread-toolbar.bottom { margin:14px 0 0; }
.thread-back { display:inline-flex; align-items:center; height:34px; padding:0 14px; border:1px solid var(--line); background:var(--panel); font-size:13px; }
.thread-pager { display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:13px; }
.thread-pager button { min-width:34px; height:34px; padding:0 8px; border:1px solid var(--line); background:var(--panel); color:var(--ink); }
.thread-pager button.wide { padding:0 12px; }
.thread-pager button:hover { border-color:var(--accent); color:var(--accent); }
.thread-pager button[aria-current=page] { background:var(--ink); border-color:var(--ink); color:var(--paper); font-weight:700; }
.thread-pager .gap { padding:0 4px; color:var(--muted); }
.thread-pager .jump { display:inline-flex; align-items:center; gap:6px; margin-left:4px; color:var(--muted); }
.thread-pager .jump input { width:52px; height:34px; border:1px solid var(--line); background:var(--panel); text-align:center; font:inherit; }
.thread-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.thread-tabs button { height:34px; padding:0 16px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:13px; }
.thread-tabs button[aria-pressed=true] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.thread-list { background:var(--panel); border:1px solid var(--line); }
.thread-head,.thread-row { display:grid; align-items:center; gap:12px; padding:0 18px; }
.thread-head { grid-template-columns:minmax(0,1fr) 150px 80px 150px; padding-left:52px; min-height:48px; background:#1113180a; border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); }
.thread-filters { display:flex; gap:18px; }
.thread-filters a { color:var(--ink); padding:4px 0; border-bottom:2px solid transparent; }
.thread-filters a[aria-current] { color:var(--accent); border-bottom-color:var(--accent); font-weight:700; }
.thread-row { grid-template-columns:22px minmax(0,1fr) 150px 80px 150px; min-height:52px; border-bottom:1px solid #d8d2c880; }
.thread-row:hover { background:#1113180a; }
.thread-row.pinned-row { background:#d63a2209; }
.thread-icon { width:16px; height:16px; }
.thread-icon.folder { background:linear-gradient(#e9c46a,#d4a24c); clip-path:polygon(0 15%,40% 15%,50% 0,100% 0,100% 100%,0 100%); }
.thread-icon.pin,.thread-icon.global { display:grid; place-items:center; width:18px; height:18px; font-size:11px; font-weight:700; color:white; background:#8a847a; }
.thread-icon.global { background:var(--accent); }
.thread-title { min-width:0; font-size:14px; line-height:1.5; padding:12px 0; }
.thread-row.pinned-row .thread-title>span:nth-child(2) { font-weight:700; }
.thread-board { color:#b0301a; }
.thread-mark { display:inline-block; margin-left:6px; padding:0 5px; font-size:11px; line-height:17px; vertical-align:1px; color:white; }
.thread-mark.digest { background:#2a9d8f; }
.thread-mark.image { background:#7a9a3a; }
.thread-new { margin-left:6px; font-size:11px; font-weight:700; color:var(--accent); }
.thread-author,.thread-last { display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.thread-author strong { font-size:13px; color:#1f5fa8; font-weight:600; }
.thread-author small,.thread-last small { color:var(--muted); font-size:12px; }
.thread-views { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.thread-divider { padding:6px 18px 6px 52px; font-size:12px; color:var(--muted); background:#1113180d; border-bottom:1px solid var(--line); }

/* Board index: each group a titled table of boards (forum index) */
.boards-list { display:grid; gap:28px; }
.board-group { background:var(--panel); border:1px solid var(--line); }
.board-group>h2 { display:flex; align-items:center; gap:10px; padding:14px 22px; font:900 18px/1.4 var(--serif); letter-spacing:.12em; background:var(--bg); color:var(--white); }
.board-group>h2::before { content:""; width:4px; height:18px; background:var(--accent); }
.board-row { display:grid; grid-template-columns:56px minmax(0,1fr) 110px minmax(0,300px); gap:18px; align-items:center; padding:18px 22px; border-top:1px solid var(--line); }
.board-row:hover { background:#1113180a; }
.board-icon { width:56px; height:56px; object-fit:cover; display:grid; place-items:center; background:var(--bg); color:var(--white); font:900 24px/1 var(--serif); }
.board-row h3 { font-size:17px; }
.board-row p { margin-top:4px; font-size:13px; color:var(--muted); }
.board-count { text-align:center; font-size:12px; color:var(--muted); }
.board-count strong { display:block; font:22px/1.2 Display,sans-serif; color:var(--ink); }
.board-latest { min-width:0; font-size:13px; display:grid; gap:2px; }
.board-latest span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.board-latest em { font-style:normal; color:var(--accent); font-size:12px; }
.board-latest time { font-size:12px; color:var(--muted); }

/* Article */
.back-link { display:inline-block; font-size:13px; color:var(--muted); margin:8px 0 24px; }
.article-page>h1 { font:900 34px/1.45 var(--serif); letter-spacing:.04em; margin:18px 0; }
.article-summary { font-size:16px; line-height:1.9; color:var(--muted); margin-bottom:24px; }
.article-cover { width:100%; max-height:460px; object-fit:cover; display:block; margin:24px 0; }
.article-prose { font-size:16px; line-height:2; color:#3d3128; }
.article-prose p,.article-prose ul,.article-prose ol,.article-prose figure,.article-prose blockquote,.article-prose pre,.article-prose table { margin:18px 0; }
.article-prose h2 { font-size:24px; margin:36px 0 16px; }
.article-prose h3,.article-prose h4 { font-size:19px; margin:28px 0 14px; }
.article-prose a { color:var(--accent); text-decoration:underline; }
.article-prose img { display:block; max-width:100%; height:auto; margin:auto; }
.article-prose figcaption { font-size:12px; color:var(--muted); text-align:center; margin-top:8px; }
.article-prose ol { padding-left:1.6em; }
.article-prose li[data-list=bullet] { list-style-type:disc; }
.article-prose li[data-list=ordered] { list-style-type:decimal; }
.article-prose blockquote { border-left:4px solid var(--accent); padding:4px 0 4px 18px; color:var(--muted); }
.article-prose pre,.article-prose .ql-code-block-container { background:#1113180d; padding:14px 18px; overflow-x:auto; font:14px/1.6 ui-monospace,monospace; white-space:pre-wrap; }
.article-prose table { border-collapse:collapse; width:100%; }
.article-prose th,.article-prose td { border:1px solid var(--line); padding:8px 12px; }
.article-prose .ql-align-center { text-align:center; }
.article-prose .ql-align-right { text-align:right; }
.article-prose .ql-align-justify { text-align:justify; }
.article-prose .ql-size-small { font-size:.8em; }
.article-prose .ql-size-large { font-size:1.4em; }
.article-prose .ql-size-huge { font-size:2em; }
.article-prose iframe.ql-video { display:block; width:100%; aspect-ratio:16/9; height:auto; border:0; margin:24px 0; background:#000; }
.article-prose .ql-indent-1 { padding-left:2em; } .article-prose .ql-indent-2 { padding-left:4em; } .article-prose .ql-indent-3 { padding-left:6em; } .article-prose .ql-indent-4 { padding-left:8em; }
.article-prose .ql-indent-5 { padding-left:10em; } .article-prose .ql-indent-6 { padding-left:12em; } .article-prose .ql-indent-7 { padding-left:14em; } .article-prose .ql-indent-8 { padding-left:16em; }
.article-end { margin-top:44px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:13px; color:var(--muted); }
.article-end button { background:transparent; border:0; color:var(--accent); }

/* Download page */
.download-panel { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; background:var(--panel); padding:36px 40px; border:1px solid var(--line); }
.download-panel .eyebrow { font-size:13px; letter-spacing:.2em; color:var(--accent); }
.download-panel h2 { font:900 34px/1.3 var(--serif); letter-spacing:.1em; margin:8px 0 10px; }
.download-panel p { color:var(--muted); font-size:14px; }
.download-button { display:inline-flex; align-items:center; gap:16px; padding:14px 28px; background:var(--accent); color:white; font-weight:700; font-size:17px; }
.download-button:hover { background:var(--accent-2); }
.download-button small { display:block; font-size:12px; font-weight:400; opacity:.85; }
.download-arrow { font-size:24px; }
.install-steps { list-style:none; padding:0; margin:28px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.install-steps li { display:flex; gap:16px; align-items:center; padding:18px 20px; background:var(--panel); border:1px solid var(--line); }
.install-steps span { font:24px Display,sans-serif; color:var(--accent); }
.all-link { display:inline-block; padding:10px 20px; border:1px solid var(--line); background:var(--panel); font-size:14px; }
.checksums { margin-top:20px; font-size:12px; color:var(--muted); }
.checksums code { display:block; word-break:break-all; }

/* --- Platforms: Windows, Mac and the web version, as one row of buttons and as download cards --- */
.platforms { display:flex; gap:12px; flex-wrap:wrap; }
.platform { display:inline-flex; align-items:center; gap:12px; min-width:178px; padding:10px 22px 10px 16px; color:var(--white);
  background:linear-gradient(90deg,#f3efe72e,#f3efe70a); box-shadow:inset 0 1px 0 #ffffff26; transition:background .2s,transform .2s; }
.platform:hover { background:linear-gradient(90deg,#f3efe74d,#f3efe714); transform:translateY(-2px); }
.platform.primary { background:linear-gradient(90deg,#d63a22,#a92a16); box-shadow:inset 0 1px 0 #ffffff33,0 10px 30px -12px #d63a22cc; }
.platform.primary:hover { background:linear-gradient(90deg,#e04528,#b02c17); }
.platform>span { display:grid; line-height:1.25; }
.platform b { font-size:16px; letter-spacing:.06em; }
.platform small { font-size:11px; opacity:.8; }
.platform.soon { opacity:.55; cursor:default; }
.platform.soon:hover { transform:none; background:linear-gradient(90deg,#f3efe72e,#f3efe70a); }
.os-icon { width:26px; height:26px; flex:none; fill:currentColor; }
.os-icon.line { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.join-actions .platforms { justify-content:center; }
.download-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.download-card { display:grid; justify-items:start; gap:8px; padding:30px 28px; background:linear-gradient(160deg,#fffcf6,#fffcf680); transition:transform .2s,box-shadow .2s; }
.download-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px -24px #11131866; }
.download-card .os-icon { width:40px; height:40px; color:var(--ink); }
.download-card h2 { font:900 26px/1.3 var(--serif); letter-spacing:.1em; }
.download-card p { color:var(--muted); font-size:14px; }
.download-card .download-button { margin-top:8px; padding:10px 20px; font-size:15px; }
.download-card small { color:var(--muted); font-size:12px; line-height:1.6; }
.download-card.soon { opacity:.6; }
.download-card.soon .download-button { background:linear-gradient(90deg,#8a847a,#6a655c); }

/* --- Soft surfaces (user 2026-10-27「每一頁都要半透，不要都要有方框，要有點漸層」): panels are translucent
   gradients without frames; dividers are hairlines that fade out at both ends. --- */
:root { --fade-line:linear-gradient(90deg,transparent,#11131826 12%,#11131826 88%,transparent); --fade-line-light:linear-gradient(90deg,transparent,#f3efe733 12%,#f3efe733 88%,transparent); }
.btn-ghost { border:0; background:linear-gradient(90deg,#f3efe733,#f3efe70d); box-shadow:inset 0 1px 0 #ffffff26; }
.btn-ghost:hover { border:0; background:linear-gradient(90deg,#f3efe74d,#f3efe714); }
.btn-primary { background:linear-gradient(90deg,#d63a22,#b02c17); }
/* News screen */
.home-banner { box-shadow:none; -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent); mask-image:linear-gradient(180deg,#000 82%,transparent); }
.news-panel { padding:6px 28px 18px; background:linear-gradient(90deg,#fffcf6d9,#fffcf666 70%,#fffcf600); }
.home-news { border-top:0; }
.news-row { position:relative; border-bottom:0; }
.news-row::after { content:""; position:absolute; inset:auto 0 0; height:1px; background:var(--fade-line); }
.news-row:hover { background:linear-gradient(90deg,#ffffffb3,#ffffff00); }
.news-row-board,.category-label { border:0; background:linear-gradient(90deg,#d63a2226,#d63a2208); color:#a52a16; }
/* Professions */
.hero-names { border-left:0; }
.hero-names button { border-left:0; }
.hero-names button[aria-pressed=true] { background:linear-gradient(90deg,#d63a2259,#d63a2200); box-shadow:inset 2px 0 0 var(--accent); }
.character-arrows button { border:0; background:linear-gradient(135deg,#f3efe733,#f3efe70d); }
/* Join */
.join-specs span { border:0; background:linear-gradient(90deg,#f3efe71f,#f3efe705); }
.join-footer { border-top:0; background:linear-gradient(180deg,#05060900,#050609e6 40%); }
.route-nodes::before { border-top:0; height:1px; background:linear-gradient(90deg,transparent,#f3efe799 10%,#f3efe799 90%,transparent); }
/* Inner pages */
.page-banner { background:linear-gradient(90deg,#07080cf0,#07080c80 60%,#07080c33),url(art/fortress-dusk.jpg) center 35%/cover; }
.board-info,.thread-list,.board-group,.download-panel,.install-steps li,.news-search,.thread-back,.thread-pager button,.thread-pager .jump input,.thread-tabs button,.all-link,.retry {
  border:0; background:linear-gradient(90deg,#fffcf6e6,#fffcf68c); }
.board-info { background:linear-gradient(90deg,#fffcf6,#fffcf600); }
.board-notice { border-top:0; position:relative; }
.board-notice::before { content:""; position:absolute; inset:0 0 auto; height:1px; background:var(--fade-line); }
.thread-pager button[aria-current=page],.thread-tabs button[aria-pressed=true] { background:linear-gradient(90deg,var(--ink),#2a2c33); color:var(--paper); }
.thread-pager button:hover,.thread-tabs button:hover { background:linear-gradient(90deg,#fff,#fffcf6); color:var(--accent); }
.thread-head { border-bottom:0; background:linear-gradient(90deg,#1113180f,#11131800); }
.thread-row { position:relative; border-bottom:0; }
.thread-row::after,.board-row::after { content:""; position:absolute; inset:auto 0 0; height:1px; background:var(--fade-line); }
.thread-row:hover,.board-row:hover { background:linear-gradient(90deg,#ffffffcc,#ffffff00); }
.thread-row.pinned-row { background:linear-gradient(90deg,#d63a2214,#d63a2200); }
.thread-divider { border-bottom:0; background:linear-gradient(90deg,#11131812,#11131800); }
.board-group>h2 { background:linear-gradient(90deg,var(--bg),#07080cb3 60%,#07080c00); }
.board-row { position:relative; border-top:0; }
.board-icon { background:linear-gradient(135deg,#1d1f26,#07080c); }
.article-end { border-top:0; position:relative; }
.article-end::before { content:""; position:absolute; inset:0 0 auto; height:1px; background:var(--fade-line); }
.footer-top { border-bottom:0; position:relative; }
.footer-top::after { content:""; position:absolute; inset:auto 0 0; height:1px; background:var(--fade-line-light); }

/* --- Smaller screens --- */
@media(max-width:1180px) {
  .topbar { gap:16px; padding:0 20px; }
  .topbar nav a { padding:0 8px; font-size:14px; gap:5px; }
  .nav-icon { display:none; }
  .top-play { display:none; }
  :root { --gutter:56px; }
  .news-board { grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:28px; }
}
@media(max-width:960px) {
  :root { --top:60px; }
  .topbar nav { position:fixed; inset:var(--top) 0 auto; flex-direction:column; gap:0; margin:0; padding:8px 0; background:#07080cf7; display:none; }
  .topbar nav.open { display:flex; }
  .topbar nav a { height:auto; padding:14px 24px; font-size:16px; }
  .topbar nav .nav-icon { display:inline; }
  .topbar nav a[aria-current=page]::after { left:24px; right:auto; width:40px; bottom:8px; }
  .topbar::before { display:none; }
  .topbar-actions { margin-left:auto; }
  .menu-toggle { display:flex; }
  .brand { width:120px; }
  .next-screen { display:none; }
  :root { --gutter:20px; }
  .screen { height:auto; min-height:100svh; }
  .screen-inner { padding:36px 0 56px; }
  .features { padding-top:var(--top); }
  .section-title { margin-bottom:24px; }
  .kv { min-height:88svh; }
  .kv-copy { padding-bottom:64px; }
  .news-board { grid-template-columns:1fr; }
  .home-banner { height:auto; aspect-ratio:16/10; }
  .brush { width:80%; right:-20%; opacity:.5; }
  .heroes-shade { background:linear-gradient(180deg,#07080c55,#07080cdd 62%); }
  .character-art { inset:0; opacity:.5; }
  .heroes-body { grid-template-columns:1fr; gap:24px; }
  .hero-names { grid-template-columns:repeat(4,1fr); border-left:0; border-bottom:1px solid #f3efe72a; }
  .hero-names button { justify-content:center; padding:10px 4px; border-left:0; border-bottom:2px solid transparent; margin:0 0 -1px; }
  .hero-names button small { display:none; }
  .hero-names button strong { font-size:18px; letter-spacing:.1em; }
  .hero-names button[aria-pressed=true] { border-bottom-color:var(--accent); background:transparent; }
  .character-copy h3 { font-size:38px; }
  .features { min-height:100svh; }
  .feature-copy { left:20px; width:calc(100% - 40px); top:auto; bottom:170px; transform:none; }
  .feature-route { width:calc(100% - 40px); bottom:48px; }
  .route-nodes button { font-size:15px; letter-spacing:.1em; }
  .join { min-height:100svh; padding-bottom:180px; }
  .join-footer { flex-direction:column; align-items:flex-start; padding:18px 20px; }
  .thread-head { grid-template-columns:1fr; padding-left:18px; }
  .thread-head>span { display:none; }
  .thread-row { grid-template-columns:22px minmax(0,1fr); padding-bottom:10px; }
  .thread-author { grid-column:2; flex-direction:row; gap:8px; align-items:baseline; }
  .thread-views,.thread-last,.thread-pager .jump { display:none; }
  .board-row { grid-template-columns:48px minmax(0,1fr); }
  .board-icon { width:48px; height:48px; }
  .board-count,.board-latest { display:none; }
  .install-steps { grid-template-columns:1fr; }
  .download-cards { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .top-download { display:none; }
  .kv-logo { width:min(300px,78vw); }
  .kv-slogan { font-size:24px; letter-spacing:.18em; }
  .kv-description { font-size:13px; letter-spacing:.14em; }
  .kv-actions .platform,.join-actions .platform { flex:1 1 100%; }
  .btn-primary,.btn-ghost { min-width:0; }
  .page-banner { height:180px; }
  .page-banner-inner h1 { font-size:28px; }
  .page-body { width:calc(100% - 32px); }
  .page-tools,.news-search,.news-search input { width:100%; }
  .download-panel { padding:24px; }
  .footer-inner { width:calc(100% - 40px); }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .feature-slide .screen-bg,.next-screen { animation:none; } .reveal { transition:none; } }