:root{color-scheme:dark;--ink:#f8eddb;--soft:#c1bed2;--line:#78739780;--panel:#24283ee8;--gold:#f4cd91}*{box-sizing:border-box}body{margin:0;background:#171d30;color:var(--ink);font-family:system-ui,-apple-system,'Noto Sans TC',sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button{border:1px solid var(--line);background:var(--panel);border-radius:14px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}header{height:66px;padding:12px max(24px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3;background:linear-gradient(#171d30e8,#171d3040)}.brand{font-size:24px;font-weight:800;letter-spacing:.15em}.brand small{font-size:9px;display:inline-block;margin-left:12px;letter-spacing:.2em;color:var(--soft)}#back{padding:9px 18px;font-size:13px}.screen{min-height:calc(100dvh - 66px);padding:18px max(30px,env(safe-area-inset-right)) 30px;background:radial-gradient(ellipse at 20% 40%,#42415d55,transparent 65%)}h1,h2,p{margin:0}h1{font-size:clamp(26px,4vw,46px);font-weight:750;letter-spacing:.06em}h2{font-size:24px}.eyebrow{font-size:12px;letter-spacing:.18em;color:var(--gold);margin-bottom:10px}.primary{display:block;background:#e9c59e;color:#302a3e;border:1px solid #ffdfb3;border-radius:14px;padding:15px 24px;font-weight:750;text-align:center}.home{position:relative;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;padding:0 8vw 32px;overflow:hidden;isolation:isolate}.home:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#171e3060,#171d30ed 76%),url('assets/chapter1-map-v26.png') 10% 40%/auto 120%;filter:blur(2px)}.home-art{height:calc(100dvh - 110px);position:relative;display:flex;align-items:center;justify-content:center}.home-art>img{height:94%;max-width:100%;object-fit:contain;filter:drop-shadow(0 20px 25px #090c24);animation:float 5s ease-in-out infinite}.hero-caption{position:absolute;bottom:4px;left:15%;font-size:18px;font-weight:650;padding:12px 20px;background:#222438d9;border:1px solid var(--line);border-radius:14px}.hero-caption span{font-size:11px;color:#ffd991;margin-left:10px}.hero-caption small{display:block;font-weight:400;font-size:12px;color:var(--soft);margin-top:5px}.home-menu{width:min(390px,100%);justify-self:end}.home-menu h1{font-size:clamp(24px,3.4vw,46px);line-height:1.35;margin-bottom:22px}.home-menu>button{display:flex;align-items:center;gap:16px;width:100%;padding:13px 20px;margin-bottom:9px;text-align:left;font-size:17px;backdrop-filter:blur(10px)}.home-menu b{margin-left:auto;font-weight:400}.menu-icon{font-size:22px;width:30px;text-align:center}.home-foot{position:absolute;bottom:12px;right:8vw;font-size:10px;color:#aba7bf}.page-title{margin:5px 0 24px}.page-title>p:last-child:not(.eyebrow){font-size:13px;color:var(--soft);margin-top:10px}.chip{display:inline-block;border:1px solid #bfac8980;color:var(--gold);background:#282b3de6;border-radius:20px;padding:7px 12px;font-size:11px}.chip.muted{color:#aaa6bb;border-color:#77708466}.map-screen{padding:0;background:#1c2539;position:relative;min-height:0;height:100dvh;overflow:hidden}.map-world{height:100%;width:auto;aspect-ratio:3 / 1;flex:none;position:relative}.map-world>img{height:100%;width:100%;object-fit:contain;user-select:none}#mapViewport{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#a4a1bb #1c2539;cursor:grab;touch-action:pan-x}.stage-hit{position:absolute;transform:translate(-50%,-14%);height:12%;width:10%;min-height:44px;background:transparent;border:2px solid transparent;border-radius:30px}.stage-hit:hover,.stage-hit:focus-visible{background:#ffe1a622;border-color:#fff0cb;box-shadow:0 0 20px #ffd89866}.map-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;pointer-events:none;font-size:11px;border-radius:20px;padding:7px 15px;background:#1d243dc9;color:#f6e3c4}.map-nav{position:absolute;right:20px;bottom:16px;display:flex;gap:8px}.map-nav button{width:38px;height:34px;font-size:24px;background:#24283edd}.empty-card,.settings-card{max-width:600px;margin:0 auto;border:1px solid var(--line);border-radius:22px;background:var(--panel);padding:32px}.empty-card{text-align:center}.empty-card>span{font-size:45px;color:var(--gold)}.empty-card h2{margin:14px}.empty-card p,.settings-card p{font-size:13px;color:var(--soft);line-height:1.7}.empty-card .primary{margin:24px auto 0;max-width:240px}.settings-card label,.settings-card>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 0;border:0;border-bottom:1px solid var(--line);background:none;border-radius:0;font-size:16px}.settings-card input{width:22px;height:22px;accent-color:#dfbfed}.settings-card p{margin-top:20px}.team-active{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:800px}.active-member{display:flex;gap:15px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:12px 20px;background:var(--panel)}.active-member>img{width:115px;height:135px;object-fit:contain}.active-member h2{font-size:20px;margin:6px 0}.active-member p{font-size:12px;color:var(--soft)}.rarity{font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.12em}.sr{color:#d6b1f0}.aqi-preview{width:115px;height:135px;background:url('assets/aqi-motion-v24.png') 0 0/400% 300% no-repeat}.roster-heading{display:flex;align-items:center;gap:18px;margin:24px 0 12px}.roster-heading h2{font-size:18px}.roster-heading small{font-size:11px;color:var(--soft)}.r-lineup{display:grid;grid-template-columns:3fr 5fr;gap:18px}.r-lineup figure{margin:0;padding:16px;background:#33354d;border:1px solid var(--line);border-radius:16px}.r-lineup img{width:100%;height:190px;object-fit:contain}.r-lineup figcaption{font-size:11px;color:var(--soft);text-align:center;margin-top:10px}dialog{color:var(--ink);background:#252a40;border:1px solid #aaa0c1;border-radius:22px;padding:32px;width:min(430px,85vw);box-shadow:0 20px 70px #0009}dialog::backdrop{background:#0e1423b8;backdrop-filter:blur(4px)}dialog h2{margin:6px 0 18px}dialog>p:not(.eyebrow):not(.chip){color:var(--soft);font-size:14px;line-height:1.7}dialog .chip{margin:20px 0}dialog .primary{font-size:14px}.close{position:absolute;right:10px;top:8px;font-size:26px;background:none;border:0;width:34px;height:34px}#rotateLobby{display:none;position:fixed;inset:0;background:#1d243d;z-index:99;align-items:center;justify-content:center;flex-direction:column;gap:20px}#rotateLobby span{font-size:65px;color:var(--gold)}#rotateLobby h2{font-size:20px}.reduce-motion *{animation:none!important;scroll-behavior:auto!important}@keyframes float{50%{transform:translateY(-7px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}@media(max-height:500px){header{height:48px;padding-top:6px;padding-bottom:6px}.brand{font-size:20px}.screen{min-height:calc(100dvh - 48px);padding-top:8px}.home{padding-bottom:22px}.home-art{height:calc(100dvh - 74px)}.home-menu .eyebrow{margin-bottom:5px;font-size:10px}.home-menu h1{font-size:26px;margin-bottom:10px}.home-menu>button{padding:8px 15px;font-size:15px;margin-bottom:6px}.hero-caption{font-size:13px;padding:8px 12px;left:8%}.hero-caption small{font-size:10px}.page-title{margin:4px 0 14px}h1{font-size:28px}.map-screen{padding:0}.empty-card,.settings-card{padding:20px}.settings-card label,.settings-card>button{padding:12px 0}.active-member>img,.aqi-preview{height:110px;width:95px}}@media(orientation:portrait) and (max-width:900px){#rotateLobby{display:flex}}@media(max-width:800px){.brand small{display:none}.r-lineup{grid-template-columns:1fr}.r-lineup img{height:180px}.team-active{gap:10px}.active-member{padding:10px}.home{padding-left:5vw;padding-right:6vw}.home-menu{width:100%}.map-hint{bottom:12px}}
.aqi-preview{flex:0 0 68px;width:68px;height:135px;background-size:600% 200%;margin:0 23px}@media(max-height:500px){.aqi-preview{flex-basis:55px;width:55px;height:110px;margin:0 20px}}
/* Centre the natural-size map when an unusually wide viewport fits it entirely. */
.map-world{margin-inline:auto}

/* Full landmark areas are tappable, with horizontal swipe retained. */
.stage-hit{transform:none;touch-action:pan-x;border-radius:18px}

/* The map and stage briefing share one landscape screen. */
.map-screen:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,32vw,420px);background:#182334}
.map-explore{position:relative;min-width:0;min-height:0;overflow:hidden;border-right:1px solid #a4b1c844}
.map-explore #mapViewport{height:100%;width:100%}
.stage-hit.selected{border-color:#f5d9a799;background:#f6d8950d;box-shadow:inset 0 0 25px #f7d49d22}
.map-explore .map-hint{left:14px;transform:none;bottom:16px;max-width:calc(100% - 120px);font-size:11px}
#selectedCounter{color:#f7d6a2;font-variant-numeric:tabular-nums}
.stage-panel{min-height:0;display:flex;flex-direction:column;gap:14px;padding:24px;background:radial-gradient(ellipse at 100% 0,#51516e55,transparent 65%),linear-gradient(155deg,#293247,#192335);overflow-y:auto;scrollbar-width:thin}
.stage-heading .eyebrow{margin:0 0 7px}.stage-heading h2{font-size:30px;letter-spacing:.06em}
.stage-preview{flex:none;aspect-ratio:1.95;border:1px solid #b1bac355;border-radius:14px;width:100%;object-fit:cover;box-shadow:0 6px 20px #08121b55}
#stageDescription{font-size:14px;line-height:1.7;color:#d3d6df;margin:0}
.stage-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.stage-meta .chip{font-size:11px;margin:0;padding:6px 10px}.stage-mode{font-size:10px;color:#a8b8bb}

.stage-entry{padding-top:8px}.stage-entry .primary{width:100%;font-size:15px;min-height:48px;background:linear-gradient(110deg,#f0d0a5,#d9ad8a);box-shadow:0 4px 18px #0b172755}.stage-entry .unavailable{background:#495260;color:#b5bec6;border-color:#677384;cursor:default;box-shadow:none}.stage-entry>a:last-child:not(.primary){display:block;text-align:center;padding-top:12px;font-size:11px;color:#b6c6cf}
@media(max-height:600px){.stage-panel{gap:9px;padding:14px 18px}.stage-heading h2{font-size:24px}.stage-heading .eyebrow{font-size:10px;margin-bottom:4px}.stage-preview{aspect-ratio:2.5;max-height:130px}.stage-entry{padding-top:2px}.stage-entry .primary{padding:10px 15px;min-height:42px;font-size:13px}#stageDescription{font-size:12px;line-height:1.5}.stage-entry>a:last-child:not(.primary){padding-top:8px;font-size:10px}.stage-meta .chip{padding:4px 8px;font-size:10px}}
@media(max-width:900px){.map-screen:not([hidden]){grid-template-columns:minmax(0,1fr) 285px}.stage-panel{padding-inline:14px}.stage-heading h2{font-size:23px}.map-explore .map-hint{font-size:10px;padding:6px 10px;left:8px}.map-explore .map-nav{right:9px}.map-explore .map-nav button{width:32px}}

/* Keep navigation alongside each title without reserving a separate bar. */

.stage-heading{position:relative;padding-inline-end:90px}
.page-back{position:absolute;inset-block-start:0;inset-inline-end:0;display:grid;place-items:center;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);font-size:13px;white-space:nowrap}
@media(max-height:360px){
  .stage-panel{gap:6px;padding-block:8px}
  .stage-preview{max-height:72px}

}

/* Independent title layers scale with the available landscape viewport. */
.on-home .home{width:100%;height:100dvh;min-height:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;overflow:hidden;background:#141229 url('assets/title-night-bg-v1.png') center 62%/cover no-repeat}
.on-home .home::before{display:none}
.title-stage{width:100%;max-width:1800px;height:100%;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);align-items:center;gap:clamp(12px,2.5vw,50px);padding:clamp(12px,3vh,34px) max(2.7vw,env(safe-area-inset-right),18px) clamp(12px,3vh,34px) max(2.7vw,env(safe-area-inset-left),18px)}
.title-logo{display:block;width:100%;height:auto;max-height:82dvh;object-fit:contain;filter:drop-shadow(0 12px 20px #07041dbb);user-select:none;pointer-events:none}
.title-menu{width:100%;display:grid;align-content:center;gap:clamp(3px,1.1vh,13px)}
.title-menu button{display:grid;place-items:center;width:100%;aspect-ratio:4.2/1;min-height:44px;max-height:110px;padding:0 12%;border:0;border-radius:0;background:transparent url('assets/title-menu-frame-v1.png') center/100% 160% no-repeat;color:#fff0df;font-family:'Noto Serif TC','Songti TC','Noto Serif CJK TC',serif;font-size:clamp(17px,2.35vw,37px);font-weight:800;letter-spacing:.08em;text-shadow:0 2px 2px #27132f,0 0 8px #170a27;white-space:nowrap;box-shadow:none;filter:drop-shadow(0 6px 8px #0b072799)}
.title-menu button:hover,.title-menu button:focus-visible{filter:drop-shadow(0 0 15px #e7a182bd) brightness(1.13);outline:2px solid #ffe4b8;outline-offset:-8px}
.title-menu button:active{transform:translateY(2px) scale(.985)}
@media(max-height:500px){.title-stage{padding-block:8px}.title-logo{max-height:84dvh}.title-menu{gap:2px}.title-menu button{font-size:clamp(16px,2vw,28px);max-height:86px}}

/* Chapter routes share one map so the islands and their ports stay aligned. */
#chapters:not([hidden]){
  height:100dvh;min-height:0;display:flex;flex-direction:column;padding:0;
  overflow:hidden;background:#080f26;
}
#chapters .page-title{
  flex:none;position:relative;margin:0;
  padding:8px max(100px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left));
}
#chapters .page-title h1{font-size:clamp(20px,5vh,36px);line-height:1.08;margin:0}
#chapters .page-title .eyebrow{margin:0 0 4px;font-size:10px}
#chapters .page-back{top:8px;right:max(18px,env(safe-area-inset-right));min-height:36px}
.chapter-sea{flex:1;min-height:0;overflow:auto;display:grid;align-items:center}
.chapter-voyage{
  position:relative;width:min(100%,calc((100dvh - 62px)*3));aspect-ratio:3;
  margin:auto;background:url('assets/chapter-islands-v250.webp') center/100% 100% no-repeat;
}
.chapter-route,.chapter-islands{position:absolute;inset:0;width:100%;height:100%}
.chapter-route{
  pointer-events:none;overflow:visible;fill:none;stroke-width:2;
  /* Keep the rings above the fixed-size labels on short landscape screens. */
  transform:translateY(min(-9px,calc(15% - 56px)));
}
.chapter-route ellipse,.route-later{stroke:#a4bce0;opacity:.6}
.route-later{stroke-dasharray:3 8;stroke-linecap:round}
.route-open,.chapter-route .port-open{stroke:#ffe6a7;filter:drop-shadow(0 0 5px #ffc875);opacity:1}
.voyage-lantern{fill:#fff2ba;filter:drop-shadow(0 0 6px #ffb947)}
.is-travelling .voyage-lantern{animation:cross-to-campus .62s ease-in-out both}
@keyframes cross-to-campus{0%{transform:translate(0,0)}55%{transform:translate(80px,-3px)}100%{transform:translate(137px,-19px)}}
.chapter-islands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.chapter-island{
  min-width:0;position:relative;display:grid;align-content:end;justify-items:center;
  margin:3% 6% 0;padding:0 4px 1%;text-align:center;background:none;border:0;border-radius:22px;
}
.chapter-island-label{
  display:grid;grid-template-columns:auto auto;align-items:baseline;gap:2px 7px;padding:4px 12px;border-radius:10px;background:#081329e6;
  line-height:1.13;text-shadow:0 2px 5px #070c1d;
}
.chapter-island-label small{grid-column:1/-1;font-size:10px;letter-spacing:.14em;color:#b8c9e4}
.chapter-island-label strong{font-size:clamp(15px,4.7vh,30px);letter-spacing:.04em}
.chapter-island-label>span{font-size:11px;color:#c0c9dc}
.chapter-available .chapter-island-label{border:1px solid #ebbb7370}
.chapter-available .chapter-island-label>span{color:#ffe2aa}
.chapter-available:hover .chapter-island-label,.is-travelling .chapter-available .chapter-island-label{
  background:#293345;box-shadow:0 0 20px #f5b55055;
}
@media (orientation:portrait){
  .chapter-voyage{width:max(100%,690px)}
  .chapter-sea{overscroll-behavior-inline:contain}
}

.fullscreen-game{
  position:fixed;inset:0;z-index:100;width:100%;height:100%;
  display:block;border:0;background:#080f26;
}

.title-display-mode{
  width:min(92vw,490px);max-height:calc(100dvh - 24px);
  padding:clamp(18px,5vh,30px);border:1px solid #d2ae7266;border-radius:20px;
  color:var(--ink);background:linear-gradient(115deg,#080f22f2,#172335e0),
    url('assets/school-story/1-1-01.webp') center/cover;
  box-shadow:0 18px 60px #030712b8;
}
.title-display-mode::backdrop{background:#040817b5}
.title-display-mode .eyebrow{margin:0 32px 8px 0;color:var(--gold)}
.title-display-mode h2{margin:0 32px 8px 0;font-size:clamp(20px,5vh,29px)}
#titleDisplayHint,#titleDisplayError{margin:0 0 12px;font-size:13px;line-height:1.55;color:#d7ddea}
#titleDisplayError{color:#ffcf99}
.title-display-close{
  position:absolute;top:10px;right:10px;width:36px;height:36px;
  border:1px solid var(--line);border-radius:10px;background:#111c30;font-size:24px;
}
.title-display-actions{display:flex;flex-wrap:wrap;gap:9px}
.title-display-actions button{
  flex:1 1 auto;min-height:42px;padding:8px 12px;border:1px solid #a8b7cf55;
  border-radius:10px;background:#192a40;color:#e5ebf7;font-size:13px;
}
.title-display-actions .primary{background:linear-gradient(110deg,#f6d5a4,#dca97e);color:#241a20;border-color:#f4cd9180}

.settings-card select {
  max-width: 52%;
  padding: 6px 10px;
  color: var(--ink);
  background: #172038;
  border: 1px solid var(--line);
  border-radius: 7px;
  font: inherit;
}

html[lang="en"] .chapter-island-label {
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 4px 10px;
}
html[lang="en"] .chapter-island-label strong {
  font-size: clamp(12px, 2.1vw, 17px);
  letter-spacing: 0;
}
html[lang="en"] .chapter-island-label small { font-size: 9px; }
html[lang="en"] .chapter-island-label > span { font-size: 10px; }

/* The viewBox uses the same 3:1 dimensions as the map art. */
.map-english-labels {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
html[lang="en"] .map-english-labels { display: block; }
.map-english-labels rect { fill: #263052; }
.map-english-labels text {
  fill: #fff3df;
  font: 700 10.5px system-ui, sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
}
.map-english-heading text:nth-of-type(2) { font-size: 12.5px; }
.map-english-stages rect {
  fill: #222e50;
  stroke: #bfcbe4;
  stroke-width: .85;
}