:root{--navy:#183753;--ink:#24435a;--muted:#61778b;--paper:#fff8e7;--gold:#edb953;--sea:#1275d8;--line:#dfd6bd;--body:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;--display:"Iowan Old Style","Songti TC","Noto Serif TC",serif}
*{box-sizing:border-box}body{margin:0;background:#1679d6;color:var(--ink);font-family:var(--body);font-size:14px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #fdbb35;outline-offset:3px}button{transition:background .2s,transform .2s}button:hover:not(:disabled){filter:brightness(1.04)}[hidden]{display:none!important}.masthead{position:absolute;z-index:4;top:22px;left:24px;right:24px;height:76px;background:#fff8e7f5;border:1px solid #ffe1a0;border-radius:15px;display:flex;align-items:center;gap:14px;padding:12px 18px;box-shadow:0 6px 0 #174b7e20,0 16px 40px #124c7e18}.brand-stamp{width:48px;height:48px;border-radius:50%;background:var(--navy);border:2px solid #c69b49;color:#ffe0a0;font-size:26px;display:grid;place-content:center;text-align:center;line-height:1.05;flex:none}.brand-stamp span{font-size:6px;letter-spacing:1px;margin-top:3px}.brand-copy{display:flex;flex-direction:column;gap:5px}.brand-copy strong{font-size:19px;letter-spacing:1px}.brand-copy>span{font-size:11px;color:var(--muted);letter-spacing:1px}.edition{margin-left:auto;font-size:9px;letter-spacing:2px;color:#8f7850;display:flex;align-items:center;gap:18px}.edition b{font-size:10px;letter-spacing:1px;border:1px solid #dbc28c;border-radius:5px;padding:7px 10px;font-weight:500}.icon-btn{border:0;background:none;color:var(--ink);font-size:24px;padding:5px 10px}.archipelago{position:relative;height:100svh;min-height:760px;margin-right:370px;overflow:hidden}#world{position:absolute;inset:0}#world canvas{display:block;width:100%;height:100%;touch-action:none}#labels{position:absolute;inset:0;pointer-events:none}.island-label{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;border:1px solid #fff4d3;background:#fff8e7ed;color:var(--navy);border-radius:8px;padding:7px 10px;box-shadow:0 4px 0 #19385825,0 5px 14px #14385920;white-space:nowrap;line-height:1.15;will-change:left,top;transition:background .3s,box-shadow .3s}.island-label b{font-family:Georgia,serif;font-size:18px;letter-spacing:1px;margin-right:6px}.island-label span{font-size:11px}.island-label::after{content:"";position:absolute;width:1px;height:13px;top:100%;left:50%;background:#fff5ce}.island-label.active{background:white;box-shadow:0 0 12px white,0 0 40px #ffffffcc;z-index:3!important;border-color:white}.island-label.dim{opacity:.65}.map-intro{position:absolute;left:36px;top:130px;pointer-events:none;max-width:330px;color:white;text-shadow:0 2px 12px #17518c45}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:600;margin:0 0 12px}.map-intro h1{font-family:var(--display);font-size:36px;letter-spacing:1px;line-height:1.38;margin:0 0 15px;font-weight:700}.map-intro h1 em{font-style:normal;color:#ffe5a3}.map-intro>p:not(.eyebrow){font-size:12px;line-height:1.9;letter-spacing:.5px;margin-bottom:17px}.ship-tour{pointer-events:auto;background:var(--paper);border:1px solid #ffe2a0;border-radius:7px;color:var(--navy);font-size:11px;padding:11px 13px;box-shadow:0 4px 0 #144f8c33}#tour-status{display:block;font-size:11px;margin-top:10px;color:#fff4ce;min-height:16px}.map-guide{position:absolute;left:36px;bottom:102px;color:#e7f5ff;display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.7px}.gold-dot{width:6px;height:6px;border-radius:50%;background:#ffd374}.map-controls{position:absolute;left:28px;bottom:43px;display:flex;align-items:center;border-radius:10px;border:1px solid #ffe5a9;background:var(--paper);padding:5px;box-shadow:0 5px 15px #17487933}.map-controls button{border:0;background:none;padding:9px 12px;font-size:12px;color:var(--navy)}.map-controls button+button{border-left:1px solid #e2d3ad}.ship-caption{position:absolute;bottom:90px;right:28px;display:flex;gap:10px;align-items:center;color:#fff5d7}.ship-caption b{font:italic 28px Georgia,serif;letter-spacing:1px}.ship-caption span{font-size:9px;line-height:1.8}.sea-note{position:absolute;bottom:20px;left:36px;color:#d7ecff;font-size:9px;letter-spacing:1px}.sky-panel{position:absolute;right:24px;top:124px;bottom:24px;width:330px;z-index:3;background:#fff9ebf7;border:1px solid #fff5d4;border-radius:22px 22px 13px 13px;box-shadow:0 14px 40px #174e8233;display:flex;flex-direction:column;padding:20px;max-height:920px}.cloud-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px}.cloud-top>span{font:700 15px var(--display);letter-spacing:1px}.cloud-top small{font-size:9px;color:#8d7c5b}.sky-heading{padding:17px 0 10px}.sky-heading .eyebrow{color:#a57f39;margin-bottom:8px}.sky-heading h2{font:700 26px/1.35 var(--display);margin:0 0 10px;letter-spacing:.5px}.sky-heading>p:last-child{font-size:10px;color:var(--muted);margin:0;line-height:1.6}.filter-label{font-size:9px;color:#7c705c;margin:0 0 6px}select{width:100%;border:1px solid #d8cba9;border-radius:6px;background:#fffef7;color:var(--ink);padding:8px;font-size:11px;flex:none}.route-list{overflow-y:auto;min-height:110px;flex:1;margin:12px -7px 12px 0;padding-right:7px;scrollbar-width:thin;scrollbar-color:#c9b991 transparent}.route-card{text-align:left;width:100%;border:1px solid #e6ddc4;border-radius:9px;background:#fffdf5;padding:11px 12px;margin-bottom:8px;color:var(--ink);display:block}.route-card .route-tag{font-size:9px;letter-spacing:.5px;color:#8b7446;display:block;margin-bottom:5px}.route-card strong{font-size:12px;display:block;font-weight:600}.route-card small{display:block;font-size:10px;line-height:1.5;color:var(--muted);margin-top:5px}.route-card.selected{border-color:#b18a3c;background:#f8edcf;box-shadow:inset 3px 0 #c2943e}.route-preview{background:#f0e5c8;border-radius:8px;padding:12px;margin-bottom:10px;flex:none;min-height:80px}.route-preview .eyebrow{font-size:9px;color:#94702e}.route-preview p{font-size:11px;line-height:1.7;margin:4px 0 0}.route-preview strong{font-size:13px}.primary{border:1px solid #d7ac51;border-radius:7px;background:var(--navy);color:#ffdf96;padding:13px;font-size:12px;box-shadow:0 3px 0 #12283d;flex:none}.demo-note{font-size:9px;color:#8b7e66;text-align:center;line-height:1.6;margin:10px 0 0}.logic-panel{position:absolute;z-index:7;left:24px;right:378px;bottom:24px;background:#fff9ebfa;border:1px solid #ffecba;border-radius:15px;box-shadow:0 15px 50px #12365c50;padding:20px 24px;max-height:70svh;overflow-y:auto}.logic-header{display:flex;justify-content:space-between;align-items:start}.route-tag{font-size:10px;color:#a07c31;letter-spacing:1px}.logic-header h2{font-size:16px;margin:5px 0 15px}.logic-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:18px}.step-chip{font-size:10px;border:1px solid #d5c8a8;background:none;border-radius:6px;padding:9px 3px;color:#6e756f}.step-chip.active{background:var(--navy);border-color:var(--navy);color:#ffe5a5}.step-chip.done{background:#e5e9d4;color:#536d54}.logic-content{display:grid;grid-template-columns:1fr 1fr;gap:24px}.logic-story .eyebrow{color:#947238}.logic-story h3{font:700 22px/1.4 var(--display);margin:7px 0 10px}.logic-story p{font-size:12px;line-height:1.9;margin:0}.cargo{border:1px dashed #bfb18b;background:#f5eedb;border-radius:8px;padding:14px;min-height:135px}.cargo>span{font-size:9px;letter-spacing:1px;color:#907143}.cargo>p{font:12px/1.8 ui-monospace,"SFMono-Regular",var(--body);overflow-wrap:anywhere;margin:9px 0}.cargo>div{border-top:1px solid #dbceb0;padding-top:10px;font-size:10px;line-height:1.8;color:#64725e}.logic-controls{margin-top:18px;border-top:1px solid #ded3b5;padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:12px}.logic-controls>span{font-size:10px;color:#7a795f}.logic-controls>div{display:flex;gap:7px}.logic-controls button{padding:7px 9px;font-size:10px;border:1px solid #cec09b;border-radius:5px;background:#fffdf5;color:var(--ink)}.logic-controls #play{background:var(--navy);color:#ffe5a3;border-color:var(--navy)}dialog{color:var(--ink);border:1px solid #f1d58a;background:var(--paper);border-radius:16px;box-shadow:0 20px 100px #122e5360;max-height:85svh;overflow:auto;padding:32px}dialog::backdrop{background:#102e5066;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:28px;color:var(--ink);padding:0 8px}.island-dialog{width:740px;max-width:calc(100vw - 32px)}.island-title{display:flex;align-items:center;gap:18px;margin-bottom:20px}.island-title>b{font:700 52px Georgia,serif;color:var(--accent)}.island-title h2{font:700 24px var(--display);margin:0 0 5px}.island-title p{font-size:10px;color:var(--muted);margin:0}.island-purpose{font-size:14px;line-height:1.8;margin:0 0 5px}.silo{font-size:12px;color:#9a644b;background:#f1e3ca;padding:10px 12px;border-radius:6px}.floors{display:flex;flex-direction:column-reverse;gap:10px;margin-top:20px}.floor{border:1px solid #ddd2b2;border-left:4px solid var(--accent);border-radius:8px;padding:14px;display:grid;grid-template-columns:100px 1fr;gap:12px;background:#fffdf5}.floor-title strong{font:700 30px Georgia,serif;color:var(--accent);display:block}.floor-title span{font-size:12px;font-weight:600}.floor dl{margin:0;display:grid;grid-template-columns:65px 1fr;gap:7px;font-size:11px;line-height:1.7}.floor dt{color:#987a45}.floor dd{margin:0}.floor.base-floor{background:#eef2dc}.island-footer{font-size:10px;color:var(--muted);line-height:1.8;margin-top:15px}.about-dialog{width:620px;max-width:calc(100vw - 32px)}.about-dialog h2{font:700 30px/1.4 var(--display)}.about-dialog p{font-size:13px;line-height:1.9}.about-dialog h3{font-size:14px}.about-dialog a{display:block;color:#356b8e;font-size:12px;margin:10px 0;line-height:1.5}.fine-print{color:#837b67;font-size:10px!important}#toast{position:fixed;z-index:20;bottom:28px;left:50%;transform:translate(-50%,10px);padding:12px 20px;border-radius:8px;background:#173752;color:#fff2cb;opacity:0;pointer-events:none;font-size:12px;max-width:90vw;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}.fallback{position:absolute;top:40%;left:15%;color:white;width:65%;font-size:16px;line-height:2}
@media(min-width:1600px){.map-intro{left:48px;top:148px}.map-intro h1{font-size:44px}.sky-panel{width:360px}.archipelago{margin-right:405px}.logic-panel{right:408px}.sky-heading h2{font-size:30px}}
@media(max-height:850px) and (min-width:901px){.sky-heading{padding:12px 0}.sky-heading h2{font-size:22px}.sky-heading h2 br{display:none}.cloud-top{padding-bottom:10px}.sky-panel{padding:16px}.route-preview{min-height:65px;padding:10px}.map-intro h1{font-size:30px}.map-intro{top:130px}.logic-story h3{font-size:19px}}
@media(max-width:1150px) and (min-width:901px){.archipelago{margin-right:325px}.sky-panel{width:300px;right:16px}.logic-panel{right:330px;left:16px;padding:16px}.map-intro{left:24px}.map-intro h1{font-size:29px}.logic-content{gap:14px}.logic-controls{align-items:start;flex-direction:column}.island-label{padding:6px 7px}.island-label b{font-size:15px}.island-label span{font-size:9px}.ship-caption{right:10px;bottom:115px}}
@media(max-width:900px){body{overflow-x:hidden}.masthead{position:relative;top:auto;left:auto;right:auto;margin:12px;height:66px;padding:10px 12px;gap:10px}.brand-copy strong{font-size:15px}.brand-copy>span{font-size:9px;letter-spacing:.3px}.brand-stamp{width:40px;height:40px;font-size:22px}.edition{display:none}.masthead .icon-btn{margin-left:auto}.archipelago{margin-right:0;height:680px;min-height:0}.map-intro{top:15px;left:24px;max-width:270px}.map-intro h1{font-size:29px;margin-bottom:8px}.map-intro .eyebrow{font-size:8px}.map-intro>p:not(.eyebrow){font-size:11px;margin-top:7px;margin-bottom:12px}.map-guide{left:24px;bottom:94px}.map-controls{left:18px;bottom:38px}.map-controls button{padding:9px 10px;font-size:11px}.sea-note{left:24px;bottom:15px;font-size:8px}.ship-caption{right:20px;bottom:98px}.sky-panel{position:relative;top:auto;bottom:auto;right:auto;width:auto;margin:0 16px 20px;max-height:none;padding:20px}.cloud-top small{font-size:10px}.sky-heading h2 br{display:none}.sky-heading h2{font-size:25px}.route-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-height:330px;min-height:180px;margin-bottom:14px}.route-card{margin:0}.route-preview{margin-top:0}.logic-panel{position:fixed;left:12px;right:12px;bottom:12px;max-height:78svh;padding:17px;z-index:10}.logic-content{gap:14px}.logic-header h2{font-size:15px}.logic-story h3{font-size:20px}.logic-controls{align-items:start;flex-direction:column}.logic-controls>div{width:100%;justify-content:space-between}.logic-controls button{padding:8px 10px}.island-label b{font-size:15px}.island-label span{font-size:9px}.island-label{padding:6px 8px}}
@media(max-width:520px){.archipelago{height:650px}.map-intro{left:20px}.map-intro h1{font-size:27px}.ship-caption{right:18px;bottom:112px}.ship-caption span{font-size:8px}.island-label{padding:5px 6px}.island-label b{font-size:14px;margin-right:4px}.island-label span{font-size:9px}.island-label::after{height:8px}.logic-content{grid-template-columns:1fr}.cargo{min-height:90px;padding:10px}.logic-story h3{font-size:19px;margin-bottom:6px}.logic-story p{font-size:11px;line-height:1.7}.logic-steps{gap:4px;margin-bottom:12px}.step-chip{font-size:9px;padding:8px 2px}.logic-header h2{margin-bottom:12px}.logic-controls{margin-top:12px;padding-top:10px;gap:8px}.logic-controls button{font-size:9px;padding:8px}.floor{grid-template-columns:1fr;padding:12px}.floor-title{display:flex;gap:10px;align-items:center}.floor-title strong{font-size:24px}.floor dl{grid-template-columns:55px 1fr;font-size:10px;gap:5px}.island-title{gap:10px}.island-title>b{font-size:36px}.island-title h2{font-size:20px}dialog{padding:25px 18px}.route-list{gap:7px}.route-card{padding:10px}.route-card strong{font-size:11px}.route-card small{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
/* 示範沿用天空面板的位置，讓兩座發光城堡始終留在地圖裡。 */
@media(min-width:901px){.logic-panel{left:auto;right:24px;top:124px;bottom:24px;width:330px;max-height:920px;padding:20px;display:flex;flex-direction:column}.logic-content{grid-template-columns:1fr;gap:16px;flex:1;align-content:start}.logic-steps{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:18px}.logic-header h2{font:700 23px/1.4 var(--display);margin-bottom:18px}.logic-header .icon-btn{padding-right:0}.logic-story h3{font-size:22px}.logic-story p{font-size:12px;line-height:1.9}.cargo{min-height:130px}.logic-controls{align-items:start;flex-direction:column;gap:10px}.logic-controls>div{display:grid;grid-template-columns:1fr 1fr;width:100%}.logic-controls button{font-size:11px;padding:10px}.logic-controls>span{line-height:1.7}}
@media(min-width:1600px){.logic-panel{width:360px}}
@media(min-width:901px) and (max-width:1150px){.logic-panel{width:300px;right:16px;padding:16px}.logic-header h2{font-size:21px}}