.hub-page{font-family:var(--series-font);color:#183e66}
.hub-stage{padding:0 4cqw;isolation:isolate;background:#b7ebff url('assets/game/game-landscape.webp') center/100% 100% no-repeat}
.hub-stage::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,#e6f8fff5 4%,#def5ffe8 49%,#d1f0ff66 75%,#ddf9ff11)}
.hub-top{height:6.3cqw;display:flex;justify-content:space-between;align-items:center;border-bottom:.17cqw dashed #82afc3;color:#3d6784;font-size:1.1cqw;font-weight:750}
.hub-top>.mono{font-size:.95cqw;letter-spacing:.045em}
.hub-count{background:#fff6d3;border:.14cqw solid #78a7b7;padding:.55cqw .9cqw;border-radius:.55cqw;box-shadow:.2cqw .22cqw 0 #a1c9d5}
.hub-hero{height:26.2cqw;display:grid;grid-template-columns:64% 36%;align-items:center;position:relative}
.hub-heading{z-index:1;padding-bottom:1cqw}
.hub-kicker{display:inline-block;color:#476584;background:#ffdc73;border:.13cqw solid #ab985a;border-radius:.5cqw;padding:.65cqw 1cqw;font-size:.96cqw;box-shadow:.18cqw .25cqw 0 #b4c5b0;transform:rotate(-2deg);margin-bottom:1.3cqw}
.hub-heading h1{font-size:6.7cqw;line-height:1.13;letter-spacing:-.05em;margin:0;font-weight:900;color:#fffdf1;-webkit-text-stroke:.11cqw #245b85;text-shadow:.14cqw .23cqw 0 #245b85,.3cqw .45cqw 0 #83bbcf;white-space:nowrap}
.hub-heading h1 span{color:#1768ad;-webkit-text-stroke:0;text-shadow:.17cqw .23cqw 0 #f8fded;font-size:6.2cqw;letter-spacing:-.07em}
.hub-heading .hub-subtitle{font-size:3.3cqw;line-height:1.25;color:#174b76;font-weight:850;margin:1.1cqw 0 0;letter-spacing:-.04em;white-space:nowrap}
.hub-heading .hub-intro{font-size:1.65cqw;margin:1.4cqw 0 0;line-height:1.55;color:#47718a}
.hub-mascot{height:27cqw;position:relative;display:flex;align-items:center;justify-content:center;align-self:center}
.hub-mascot>img{width:25cqw;height:25.8cqw;object-fit:contain;filter:drop-shadow(.2cqw .5cqw .25cqw #39728b20);transform:rotate(3deg)}
.hub-mascot-badge{position:absolute;bottom:1.25cqw;right:0;background:#fff7d7;border:.16cqw solid #547d8e;border-radius:.5cqw;padding:.6cqw 1cqw;color:#365b70;font-size:1.15cqw;font-weight:750;box-shadow:.25cqw .3cqw 0 #8ebfbf;transform:rotate(-3deg)}
.hub-chapters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.1cqw;position:relative;z-index:1}
.hub-chapter{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--world-color);border:.2cqw solid var(--world-shadow);border-radius:.9cqw;background:var(--world-soft);box-shadow:0 .6cqw 0 var(--world-shadow),0 .8cqw .7cqw #32617720;padding:1.3cqw 1.1cqw;min-height:18.7cqw;transition:transform .18s,box-shadow .18s;overflow:hidden}
.hub-chapter:hover{transform:translateY(-.5cqw);box-shadow:0 1cqw 0 var(--world-shadow),0 1.3cqw 1.2cqw #32617720}
.hub-chapter:focus-visible{outline:3px solid #1c658f;outline-offset:6px}
.hub-chapter-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.35cqw}
.hub-chapter-number{font-size:2.5cqw;line-height:1;color:var(--world-color)}
.hub-chapter-count{font-size:1.35cqw;font-weight:650;color:var(--world-color);white-space:nowrap}
.hub-chapter h2{font-size:2.25cqw;line-height:1.4;letter-spacing:-.055em;color:var(--world-color);margin:0;font-weight:900;white-space:nowrap}
.hub-chapter p{color:var(--world-color);font-size:1.55cqw;line-height:1.55;margin:.65cqw 0 0}
.hub-chapter-bottom{display:flex;justify-content:space-between;align-items:center;gap:.5cqw;margin-top:auto;padding-top:1.4cqw;font-size:1.6cqw;font-weight:750}
.hub-chapter-arrow{display:inline-flex;align-items:center;justify-content:center;width:2.9cqw;height:2.9cqw;border:.14cqw solid var(--world-shadow);border-radius:50%;background:#fffefa99;font-size:1.8cqw}
.hub-foot{display:flex;align-items:center;justify-content:space-between;margin-top:1.7cqw;color:#305a73;font-size:1.15cqw;font-weight:600}
.hub-foot .mono{font-size:.85cqw}
.hub-toolbar{height:80px;max-width:1800px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:16px;color:#38657e}
.hub-toolbar .tool-button{font-family:var(--series-font);font-size:14px;color:#285876}.hub-toolbar .tool-button span:first-child{font-size:21px}
.hub-toolbar .hub-toolbar-label{font-size:13px;color:#4c7389}
.hub-page .hub-overview-button{display:flex;align-items:center;gap:9px;border:2px solid #81a8b5;background:#fff3bc;padding:8px 14px;border-radius:8px;box-shadow:0 3px 0 #a2c3cd;font-family:var(--series-font);font-size:15px;color:#305975;font-weight:750}
.hub-overview-button .mono{font-size:11px;margin-left:8px}
@media(max-height:760px) and (min-width:901px){.hub-toolbar{height:58px}}
@media(max-width:680px) and (orientation:portrait){
 .hub-stage{height:calc(100dvh - 124px);padding:0 6cqw 8cqw;background-size:auto 100%;background-position:65% center}
 .hub-stage{background-image:linear-gradient(#e5f7ffe8,#e5f7ffe8),url('assets/game/game-landscape.webp')}
 .hub-stage::before{display:none}
 .hub-top{height:16cqw;font-size:3cqw;border-width:1px;gap:4cqw}.hub-top>.mono{font-size:2.1cqw}.hub-count{padding:1.6cqw 2cqw;border-width:1px;border-radius:1.5cqw;white-space:nowrap}
 .hub-hero{height:auto;min-height:75cqw;display:block;padding:7cqw 0 27cqw}.hub-heading{padding:0}.hub-kicker{font-size:2.5cqw;padding:2cqw 3cqw;border-width:1px;border-radius:1.5cqw;margin-bottom:4cqw;box-shadow:.5cqw .7cqw 0 #b4c5b0}
 .hub-heading h1{font-size:12.8cqw;-webkit-text-stroke:.25cqw #245b85;text-shadow:.4cqw .5cqw 0 #245b85,.8cqw 1cqw 0 #83bbcf}.hub-heading h1 span{font-size:12cqw;text-shadow:.3cqw .5cqw 0 #fff9ed}
 .hub-heading .hub-subtitle{font-size:6.8cqw;margin-top:3cqw;line-height:1.3}.hub-heading .hub-intro{font-size:16px;margin-top:5cqw;max-width:51cqw}
 .hub-mascot{position:absolute;width:34cqw;height:36cqw;right:-2cqw;bottom:-2cqw}.hub-mascot>img{width:33cqw;height:34cqw}.hub-mascot-badge{display:none}
 .hub-chapters{grid-template-columns:1fr;gap:4.5cqw}.hub-chapter{min-height:0;padding:4cqw 4.5cqw;border-width:2px;border-radius:3cqw;box-shadow:0 1.3cqw 0 var(--world-shadow);display:grid;grid-template-columns:12cqw minmax(0,1fr) 10cqw;column-gap:4cqw;align-items:center;overflow:visible}
 .hub-chapter-top{display:contents}.hub-chapter-number{font-size:7.5cqw;grid-row:1/4;grid-column:1}.hub-chapter-count{grid-column:2;grid-row:3;font-size:13px;margin-top:1.2cqw}.hub-chapter h2{grid-column:2;grid-row:1;font-size:21px;line-height:1.35;letter-spacing:-.03em}.hub-chapter p{grid-column:2;grid-row:2;font-size:15px;margin-top:1.2cqw;line-height:1.5}.hub-chapter-bottom{display:contents}.hub-chapter-bottom>span:first-child{display:none}.hub-chapter-arrow{grid-column:3;grid-row:1/4;width:9cqw;height:9cqw;font-size:5.5cqw;border-width:1px}
 .hub-foot{font-size:13px;margin-top:6cqw;display:block}.hub-foot .mono{display:none}.hub-toolbar{height:67px;padding:0 16px;gap:10px}.hub-toolbar-label{display:none}.hub-page .hub-overview-button{font-size:14px;padding:7px 12px}.hub-overview-button .mono{font-size:10px;margin-left:0}
}
@media(prefers-reduced-motion:reduce){.hub-chapter{transition:none}}
@media print{.hub-toolbar{display:none}.hub-stage{width:1600px;height:900px;print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* Japanese strings need more horizontal breathing room than the zh-Hant cover. */
.hub-heading h1{font-size:5.65cqw;letter-spacing:-.06em}
.hub-heading h1 span{font-size:5.15cqw}
.hub-hero{height:25.2cqw}
.hub-chapter{min-height:19.7cqw;padding:1.15cqw 1cqw}
.hub-chapter-top{margin-bottom:1cqw}
.hub-chapter-count{font-size:1.05cqw}
.hub-chapter h2{font-size:1.68cqw;line-height:1.35;white-space:normal;min-height:4.55cqw;display:flex;align-items:flex-start}
.hub-chapter p{font-size:1.02cqw;line-height:1.5;margin:.45cqw 0 0}
.hub-chapter-bottom{font-size:1.2cqw;padding-top:1cqw}
.hub-chapter-arrow{width:2.45cqw;height:2.45cqw;font-size:1.45cqw}
.hub-foot{margin-top:1.25cqw}
@media(max-width:680px) and (orientation:portrait){
 .hub-heading h1{font-size:10.5cqw}.hub-heading h1 span{font-size:9.8cqw}
 .hub-hero{height:auto;min-height:75cqw}
 .hub-chapter{min-height:0;padding:4cqw 4.5cqw}
 .hub-chapter h2{font-size:21px;line-height:1.35;min-height:0}
 .hub-chapter p{font-size:15px;line-height:1.5;margin-top:1.2cqw}
 .hub-chapter-count{font-size:13px}
 .hub-chapter-arrow{width:9cqw;height:9cqw;font-size:5.5cqw}
}