:root{color-scheme:light;--paper:#f2efe7;--ink:#26332f;--muted:#65716b;--green:#203c34;--line:#d5d8cc;--accent:#ad5039;--gold:#d5bb83;--max:1320px}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.8 "PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;-webkit-text-size-adjust:100%}img{display:block;max-width:100%;height:auto}figure,p,h1,h2,h3,ul,ol{margin:0}a{color:inherit}button,input{font:inherit}.wrap{width:100%;max-width:var(--max);padding:0 36px;margin:auto}section{padding:88px 0;scroll-margin-top:80px}h1,h2,h3{font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif}h2{font-size:clamp(29px,3.2vw,43px);line-height:1.4;font-weight:600;letter-spacing:.01em;text-wrap:balance}h3{font-size:23px;line-height:1.5;font-weight:600}p{max-width:44em}.lead{margin-top:17px;color:var(--muted);font-size:18px;line-height:1.95}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:30px;margin-bottom:34px}.section-heading p{color:var(--muted);font-size:16px;max-width:34em}.small-note,figcaption{font-size:14px;line-height:1.7;color:var(--muted);margin-top:12px}.tag{display:inline-block;vertical-align:middle;font:400 10px/1.6 system-ui;margin-left:12px;border:1px solid #79877a;padding:2px 7px;border-radius:2px;letter-spacing:.03em}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 23px;min-height:46px;font:600 15px/1.5 system-ui;text-decoration:none;border-radius:3px;border:1px solid transparent;cursor:pointer}.btn-main{background:var(--accent);color:white;border-color:#b96148}.btn-main:hover{background:#943c29}.btn-ghost{border-color:#e1e4d390;color:#f4f3e8;background:#0b211b70}.btn-sm{font-size:15px;padding:8px 15px;min-height:36px}:focus-visible{outline:3px solid #bb804b;outline-offset:4px}
nav{position:fixed;z-index:20;inset:0 0 auto;background:#142c25dc;color:#f3f1e6;border-bottom:1px solid #ffffff20;backdrop-filter:blur(8px)}nav.solid{background:#142c25f7}nav .wrap{height:64px;display:flex;align-items:center;gap:25px}nav .brand{font:700 21px "PingFang TC","Noto Sans TC",system-ui,sans-serif;letter-spacing:.08em;text-decoration:none;white-space:nowrap}nav ul{display:flex;gap:23px;list-style:none;padding:0;margin-left:auto;font-size:15px}nav ul a{text-decoration:none;color:#dce2d7}nav ul a:hover{color:#fff}nav .btn{margin-left:auto}
.hero{position:relative;height:82svh;min-height:600px;max-height:900px;display:flex;align-items:flex-end;color:white;background:#13291f;isolation:isolate;overflow:hidden}.reel,.reel video{position:absolute;inset:0;width:100%;height:100%}.reel{z-index:-2;background:#13291f url(img/battle1-poster.jpg) center/cover}.reel video{object-fit:cover;opacity:0;transition:opacity 1.4s}.reel video.on{opacity:1}.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#081e18de,#081e1870 39%,transparent 75%),linear-gradient(0deg,#081e18b0,transparent 65%)}.hero .wrap{margin-top:auto;margin-bottom:0;padding-bottom:80px}.hero h1{font-size:clamp(52px,6.4vw,88px);line-height:1.2;letter-spacing:.06em;font-weight:600;text-shadow:0 2px 10px #0006}.hero h1 small{display:block;font-size:26px;letter-spacing:.3em;color:#e2cfa3;margin-top:16px}.hero .status{font-size:13px;color:#e2dfce;margin-bottom:24px}.hero .slogan{font-size:23px;font-weight:500;margin-top:25px}.hero .sub{font-size:16px;line-height:1.9;max-width:29em;margin-top:14px;color:#e0e6db}.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}.hero .by{font-size:13px;color:#c1cbbd;margin-top:24px}.reel-ctl{position:absolute;right:20px;bottom:20px;z-index:4;width:42px;height:42px;background:#13291fc9;color:white;border:1px solid #cdd4c080;border-radius:3px;cursor:pointer}.mist,.fx{display:none}
.stats{background:var(--green);color:#e5e8dd}.stats .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:25px;padding-bottom:25px}.stat{display:flex;align-items:baseline;justify-content:center;gap:11px;border-right:1px solid #ffffff25;min-width:0}.stat:last-child{border:0}.stat b{font:600 34px/1.4 "PingFang TC","Noto Sans TC",system-ui,sans-serif;color:#e0c796}.stat span{font-size:14px}
.intro{padding-bottom:60px}.intro-copy{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:end;margin-bottom:34px}.intro-copy p{color:var(--muted);font-size:17px;line-height:1.95}.scene-image{width:100%;max-height:680px;object-fit:cover;aspect-ratio:16/9}.intro .small-note{display:flex;justify-content:space-between;gap:20px}.intro .small-note span{color:#879084;font-size:13px}
#play{background:#e7e9df}.play-layout{display:grid;grid-template-columns:1fr 2fr;gap:45px;align-items:center}.play-layout ul{padding-left:18px;color:var(--muted);font-size:16px;margin:22px 0 0}.play-layout li{margin:10px 0}.shot video{display:block;width:100%;aspect-ratio:2/1;background:#173126;object-fit:cover}.shot .cap{font-size:14px;color:var(--muted);margin-top:12px}.world-shot{margin-top:42px}.world-shot img{width:100%;height:auto}.world-shot figcaption{margin-top:10px}.section-links{display:flex;gap:25px;flex-wrap:wrap;font-size:15px;color:#4d6457;margin-top:25px}
.unit-section{padding-top:68px}.unit-lineup{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;align-items:end;margin-top:35px}.unit-lineup figure{text-align:center;min-width:0}.unit-lineup img{width:100%;height:195px;object-fit:contain;object-position:bottom}.unit-lineup figcaption{font-size:15px;margin-top:10px;color:#43574a}.building-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px;margin-top:35px}.building-shelf figure{min-width:0}.building-shelf img{width:100%;height:275px;object-fit:contain;object-position:bottom}.building-shelf figcaption{font-size:16px;text-align:center;color:#4a5d4f}.building-section{padding-top:30px;padding-bottom:85px}
#ages{border-top:1px solid var(--line);padding-top:65px}.ages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:30px}.age .pic{aspect-ratio:1/1.1;display:flex;align-items:flex-end;background:radial-gradient(ellipse at 50% 85%,#d5d7c654,transparent 64%)}.age .pic img{width:100%}.age h3{font-size:22px;margin-top:19px}.age .n{font-size:14px;color:#798373;margin-top:12px}.age p{font-size:15px;color:var(--muted);margin-top:9px}.age .pic:before{content:none}
#civs{background:#dfe5d8;color:#253b2c}.region-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:65px 45px;margin-top:38px}.region-view{min-width:0}.region-art{height:360px;display:flex;align-items:flex-end;gap:0;background:radial-gradient(ellipse at 50% 90%,#98a58f33,transparent 70%);padding:0 0 10px}.region-art img{width:32%;height:80%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 8px 5px #3b54371c)}.region-art img:first-child{width:45%;height:100%;margin-right:-7%}.region-view header{display:flex;align-items:baseline;gap:15px;margin-top:24px}.region-view header h3{font-size:26px}.region-view header span{font-size:14px;color:#6a775f}.region-view p{font-size:16px;color:#62715a;margin-top:12px;max-width:37em}.region-view .art-note{font-size:13px;margin-top:9px;color:#818a75}.concept-fold{margin-top:40px;border-top:1px solid #b9c5b0;border-bottom:1px solid #b9c5b0;padding:15px 0}.concept-fold summary{font-size:15px;cursor:pointer}.concept-fold img{width:100%;margin-top:20px}.concept-fold p{font-size:14px;color:#62715a;margin-top:12px}
#legends{padding-bottom:65px}.story-layout{display:grid;grid-template-columns:2fr 1fr;gap:45px;align-items:center;margin-top:30px}.story-art img{width:100%}.story-art figcaption{font-size:14px}.chapters{display:grid;gap:28px}.chapter h3{font-size:23px}.chapter p{font-size:16px;color:var(--muted);margin-top:7px}.story-layout .small-note{margin-top:23px}
#mist{background:#e4e9e0}.rpg-art{display:grid;grid-template-columns:1.7fr 1fr;gap:35px;align-items:center;margin-top:35px}.chars img{width:100%}.npcs{display:flex;align-items:flex-end;justify-content:center;gap:4px;padding:25px 10px 0;background:#d8dfcd}.npcs img{max-width:33%;height:245px;object-fit:contain;object-position:bottom}.rpg-notes{font-size:16px;color:#64715c;padding-left:19px;margin-top:25px}.rpg-notes li{margin:12px 0}.road-section{padding:45px 0;border-bottom:1px solid var(--line)}.road-section summary{cursor:pointer;font-size:17px;color:#566853}.road{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:28px}.road h3{font-size:21px}.road p{font-size:15px;color:var(--muted);margin-top:10px}
#fair{padding:65px 0}.fair-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:65px;align-items:start}.fair-layout h2{font-size:32px}.fair-layout .lead{font-size:16px}.pledge{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 30px}.pledge article{border-top:1px solid #c6cfbd;padding-top:17px}.pledge h3{font:600 18px/1.6 system-ui}.pledge p{font-size:15px;color:var(--muted);margin-top:8px}.legal-note{font-size:14px;color:#737d6d;margin-top:28px;max-width:none}
#faq{background:#e7e9e0;padding:65px 0}.faq-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:65px}.faq-layout h2{font-size:32px}.faq-list details{border-bottom:1px solid #c5cdbd;padding:17px 0}.faq-list details:first-child{border-top:1px solid #c5cdbd}.faq-list summary{font-size:16px;cursor:pointer;list-style:none;padding-right:25px;position:relative}.faq-list summary:after{content:"＋";position:absolute;right:0;color:#6d7d61}.faq-list details[open] summary:after{content:"－"}.faq-list p{font-size:15px;color:var(--muted);margin-top:11px}
.final{background:#203c34;color:#edf0e5;padding:70px 0}.join-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.final h2{font-size:32px}.final p{font-size:16px;color:#c4cebd;margin-top:18px}.final form{display:flex;gap:10px;flex-wrap:wrap}.final label{width:100%;font-size:14px;color:#c9d0bf}.final input{flex:1;min-width:0;border:1px solid #89977f;background:#193129;border-radius:2px;padding:10px 13px;color:#fff;font-size:16px}.final input::placeholder{color:#bdc5b5}.final .note,.final .msg{font-size:14px;color:#cbd1be;margin-top:14px;line-height:1.8}.msg:empty{display:none}footer{padding:30px 0;background:#192f29;color:#aebba6;font-size:13px}footer .wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:35px}footer b{font-family:"PingFang TC","Noto Sans TC",system-ui,sans-serif;color:#e0e4d5;font-size:17px}footer p{margin-top:8px;max-width:52em}footer a{margin-right:15px;text-decoration:none;color:#c3cbb9}.publisher{color:#b8c4aa}.sticky-cta{display:none}.reveal{opacity:1;transform:none}.mobile-break{display:none}
@media(max-width:1100px){nav ul{gap:14px}.wrap{padding:0 28px}.region-art{height:300px}.unit-lineup{grid-template-columns:repeat(4,minmax(0,1fr))}.unit-lineup img{height:180px}.building-shelf img{height:230px}.play-layout{grid-template-columns:1fr 1.65fr;gap:30px}.hero h1{font-size:68px}}
@media(max-width:900px){nav ul{display:none}.intro-copy{gap:35px}.section-heading{display:block}.section-heading p{margin-top:14px}.story-layout,.play-layout{grid-template-columns:1fr;gap:30px}.play-layout .lead{max-width:43em}.story-layout .story-art{order:0}.story-layout .chapters{order:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.chapter h3{font-size:21px}.region-list{gap:40px 25px}.region-art{height:250px}.rpg-art{grid-template-columns:1.5fr 1fr;gap:20px}.npcs img{height:190px}.fair-layout,.faq-layout{grid-template-columns:1fr;gap:30px}.ages{gap:18px}.join-layout{gap:35px}}
@media(max-width:700px){body{font-size:18px}.wrap{padding:0 22px}section{padding:56px 0;scroll-margin-top:75px}h2{font-size:28px}.section-heading{margin-bottom:25px}.section-heading p,.lead{font-size:16px}nav .wrap{height:59px;gap:15px}nav .brand{font-size:18px}.btn-sm{font-size:14px;padding:7px 11px}.btn{font-size:15px}.intro{padding:50px 0}.intro-copy{display:block;margin-bottom:25px}.intro-copy p{font-size:16px;margin-top:18px}.scene-image{aspect-ratio:4/3;object-position:50% 55%}.intro .small-note{display:block}.intro .small-note span{display:block;margin-top:4px}.stats .wrap{padding-top:15px;padding-bottom:15px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 0}.stat{gap:8px;justify-content:flex-start;padding:3px 14px}.stat:nth-child(even){border:0}.stat b{font-size:27px}.stat span{font-size:13px}.play-layout ul{font-size:15px}.world-shot{margin-top:30px}.shot .cap{font-size:13px}.unit-section{padding-top:55px}.unit-lineup{gap:24px 7px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px}.unit-lineup img{height:135px}.unit-lineup figcaption{font-size:13px}.building-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 15px;margin-top:25px}.building-shelf img{height:175px}.building-shelf figcaption{font-size:14px}.building-section{padding-top:25px;padding-bottom:55px}.ages{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px}.age h3{font-size:22px;margin-top:8px}.age p{font-size:14px}.age .n{font-size:13px}.region-list{grid-template-columns:1fr;gap:42px;margin-top:25px}.region-art{height:310px}.region-view header{margin-top:18px}.region-view header h3{font-size:25px}.region-view p{font-size:15px}.story-layout .chapters{grid-template-columns:1fr;gap:23px}.chapter p{font-size:15px}.rpg-art{grid-template-columns:1fr;gap:25px}.npcs img{height:220px}.rpg-notes{font-size:15px}.road{grid-template-columns:1fr;gap:25px}.road-section{padding:32px 0}.pledge{grid-template-columns:1fr;gap:22px}.legal-note{font-size:13px}.fair-layout,.faq-layout{gap:25px}.fair-layout h2,.faq-layout h2{font-size:28px}.faq-list summary{font-size:15px}.join-layout{grid-template-columns:1fr;gap:28px}.final h2{font-size:28px}.final input{flex-basis:100%;width:100%;min-height:45px}.final .btn{width:100%}footer .wrap{display:block}footer .links{margin-top:20px}.sticky-cta.is-visible{display:flex;position:fixed;bottom:12px;right:14px;left:14px;z-index:25;box-shadow:0 3px 12px #0003}.mobile-break{display:block}}
@media(max-width:700px) and (orientation:portrait){.hero{height:87svh;min-height:690px;max-height:920px}.hero .wrap{padding-bottom:70px}.hero h1{font-size:clamp(37px,10.4vw,54px)}.hero h1 small{font-size:22px;margin-top:12px}.hero .status{font-size:9px;margin-bottom:19px}.hero .slogan{font-size:19px;margin-top:20px}.hero .sub{font-size:15px;max-width:24em}.hero .cta{margin-top:23px;gap:9px}.hero .cta .btn{padding:11px 16px;font-size:14px}.hero .by{margin-top:19px;font-size:9px}.hero:before{background:linear-gradient(180deg,transparent 16%,#081e181a 30%,#081e18db 57%,#081e18f5 88%)}.reel{background-image:url(img/battle1-mobile-poster.jpg)}.reel video{object-position:50% 35%}.reel-ctl{width:42px;height:42px;right:14px;bottom:14px}}
@media(max-width:360px){.region-art{height:260px}.unit-lineup img{height:115px}.building-shelf img{height:150px}.stat{padding-left:8px;padding-right:8px;gap:6px}.stat span{font-size:9px}.stat b{font-size:25px}}
@media(max-height:500px) and (orientation:landscape){.hero{min-height:480px;max-height:none;height:auto}.hero .wrap{padding-top:105px;padding-bottom:65px}.hero h1{font-size:50px}.hero .status{margin-bottom:14px}.hero .slogan{font-size:20px;margin-top:18px}}
@media(prefers-reduced-motion:reduce){.reel video{transition:none}}

/* Larger Traditional Chinese sans-serif type, requested by the user. */
h1,h2,h3{font-weight:700}h2{font-size:clamp(32px,3.2vw,46px)}
.hero .sub{font-size:16px}.hero .by,.hero .status{font-size:13px}
nav ul{font-size:15px}.small-note,figcaption{font-size:14px}
@media(max-width:900px){.intro-copy{gap:28px}.section-heading p{max-width:38em}}
@media(max-width:700px){body{font-size:17px}h2{font-size:30px}nav .brand{font-size:19px}nav .btn-sm{font-size:13px}.lead,.intro-copy p,.section-heading p,.play-layout ul,.chapter p,.region-view p,.rpg-notes,.final p{font-size:16px;line-height:1.9}.unit-lineup figcaption,.building-shelf figcaption,.small-note,.age p,.region-view .art-note,.shot .cap{font-size:14px}.hero .sub{font-size:15px}.hero .by,.hero .status{font-size:12px}.hero .cta .btn{font-size:14px}.stat{flex-direction:column;align-items:center;justify-content:center;gap:1px}.stat b{font-size:29px}.stat span{font-size:13px}.stats .wrap{gap:14px 0}.region-view header{flex-wrap:wrap;gap:5px 15px}.region-view header span{font-size:14px}.faq-list summary,.faq-list p{font-size:16px}.legal-note,.final .note,.final .msg{font-size:13px}.hero{min-height:735px}.unit-lineup{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:360px){.hero .cta .btn{font-size:13px;padding-left:13px;padding-right:13px}.unit-lineup{grid-template-columns:repeat(2,minmax(0,1fr))}.unit-lineup img{height:165px}.building-shelf img{height:155px}.region-art{height:270px}.stat b{font-size:28px}.stat span{font-size:12px}nav .wrap{gap:12px}}

/* Original island-and-gate brand icon. */
nav .brand{display:flex;align-items:center;gap:10px}nav .brand-icon{width:36px;height:36px;flex:none}
@media(max-width:700px){nav .brand{gap:8px}nav .brand-icon{width:30px;height:30px}}