/* Immersive, viewport-first island shell. Existing educational components retained. */
:root{--sidebar:318px;--panel:360px;--shell-surface:rgba(251,251,244,.94);--chrome-line:#d2ddd0;--shell-shadow:0 10px 35px #24493e13}
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:#bfd6cd;color:#29463a;font-family:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif}button,input{font-family:inherit}button{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #bb744b;outline-offset:3px}.exploration{position:fixed;inset:0;width:100%;height:100dvh;min-height:0;max-width:none;padding:0;margin:0;border:0;border-radius:0;background:#bfd6cd;overflow:hidden}.map-area{position:absolute;inset:0 var(--sidebar) 0 0;width:auto;height:auto;margin:0;overflow:hidden;border-radius:0}.webgl-stage,.scene-labels,.npc-markers{position:absolute;inset:0}.webgl-stage canvas{display:block;width:100%;height:100%;touch-action:none}.island-brand{position:absolute;z-index:12;top:max(18px,env(safe-area-inset-top));left:30px;display:block;width:auto;height:auto;max-width:280px;margin:0;padding:0;border:0;pointer-events:none}.island-brand .brand{pointer-events:auto;display:flex;gap:9px;align-items:center;margin:0;padding:0;color:#24493e;text-align:left;font-size:32px;line-height:1;letter-spacing:.3px}.island-brand .brand-mark{width:36px;height:38px;font-size:31px;border-radius:0;background:none;color:#4c7560}.brand-title{display:block;font-size:31px;line-height:1.1;font-weight:850;letter-spacing:2px}.island-brand .brand small{font-family:Arial,sans-serif;font-size:10px;letter-spacing:1.25px;margin:7px 0 0;line-height:1;font-weight:700}.island-brand .author-credit{display:block;margin:11px 0 0 3px;font-size:10px;line-height:1.5;color:#506d5d;letter-spacing:0}.map-toolbar{position:absolute;z-index:30;top:max(28px,env(safe-area-inset-top));right:calc(var(--sidebar) + 20px);display:flex;gap:8px;align-items:center;margin:0}.toolbar-button{height:44px;min-width:52px;padding:0 13px;border:1px solid #ffffffb8;border-radius:13px;background:#fcfcf2e8;box-shadow:0 4px 16px #294e3c12;font-size:13px;font-weight:650}.toolbar-button:hover{background:#fff}.toolbar-button[aria-expanded=true]{background:#365e49;color:white;border-color:#365e49}.toolbar-button.round{width:44px;min-width:44px;padding:0;font-size:18px;border-radius:50%}.scene-tools{position:absolute;z-index:13;left:30px;top:114px;right:auto;bottom:auto;display:block;width:auto;pointer-events:auto}.scene-hud{display:flex;align-items:center;gap:5px;flex-wrap:wrap;max-width:480px;padding:5px;background:#fafaf0da;border:1px solid #fff9;border-radius:11px;box-shadow:0 4px 15px #24493e0b}.scene-hud button{padding:8px 10px;min-height:36px;font-size:11px;border-radius:7px;white-space:nowrap}.scene-hud button[aria-pressed=true]{background:#e1e9d6}.scene-status{font-size:10px;color:#56755f;padding:0 8px;white-space:nowrap}.settings-panel{position:absolute;z-index:40;right:calc(var(--sidebar) + 20px);top:84px;width:310px;padding:18px;background:var(--shell-surface);border:1px solid #fff;border-radius:18px;box-shadow:0 15px 60px #29493e30;backdrop-filter:blur(18px)}.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:14px}.settings-heading .icon-button{width:32px;height:32px;font-size:23px}.time-tools{display:flex;gap:4px;flex-wrap:wrap;background:#edf1e3;border:0;border-radius:8px;padding:4px}.time-tools button{flex:1;min-width:45px;min-height:36px;padding:6px 8px;font-size:12px;border-radius:5px}.time-tools button[aria-pressed=true]{background:#365e49;color:white}.camera-tools{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-start;background:none;border:0;box-shadow:none;padding:0;margin-top:12px}.camera-tools button{min-height:40px;min-width:40px;border:1px solid #d4ddc9;border-radius:7px;padding:6px 10px;font-size:12px}.camera-tools button:nth-child(-n+4){font-size:20px}.settings-panel .caption{font-size:10px;line-height:1.8;margin:12px 0 0}.scene-instructions{position:absolute;z-index:8;left:30px;bottom:20px;right:auto;transform:none;font-size:11px;color:#4d7160;background:#f8fbefb8;padding:6px 12px;border-radius:20px;max-width:calc(100% - var(--sidebar) - 60px)}
.explorer-sidebar{position:absolute;z-index:22;top:0;right:0;bottom:0;width:var(--sidebar);background:var(--shell-surface);backdrop-filter:blur(16px);border-left:1px solid #fff9;display:flex;flex-direction:column;min-height:0;box-shadow:-4px 0 30px #24493e08}.sidebar-top{flex-shrink:0;padding:24px 20px 0}.sidebar-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.sidebar-heading h1{font-size:22px;line-height:1.5;font-weight:750;letter-spacing:.2px;margin:0}.sidebar-heading p{font-size:12px;line-height:1.6;margin:5px 0 18px;color:#74816a}.sidebar-heading .icon-button{display:none}.sheet-grip{display:none}.sidebar-tabs{display:flex;gap:3px;padding:4px;border:1px solid #d6dfcf;background:#eef2e7;border-radius:10px;margin-bottom:17px}.sidebar-tabs button{flex:1;padding:7px 8px;min-height:36px;border-radius:7px;font-size:13px}.sidebar-tabs [aria-pressed=true]{background:#355c49;color:#fff}.sidebar-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;flex:1;padding:0 20px 15px;scrollbar-width:thin;scrollbar-color:#b4c2a8 transparent}.list-area,.resident-area{padding:0;margin:0;min-height:0}.search-label{font-size:11px;margin-bottom:7px}input[type=search]{font-size:14px;padding:10px 12px;min-height:42px;border-radius:9px;margin-bottom:14px;background:#fffef7}.topic-list,.resident-list,.mission-list{display:flex;flex-direction:column;gap:0}.topic-card{border:0;border-bottom:1px solid #dce3d4;background:transparent;border-radius:0;min-height:91px;padding:16px 0;gap:11px;box-shadow:none;width:100%;align-items:center}.topic-card:hover,.resident-card:hover{background:#e9f0e0}.topic-card .topic-icon{width:29px;height:29px;font-size:15px}.topic-card strong{font-size:15px;line-height:1.6}.topic-card p{font-size:11px;line-height:1.7;color:#78866d;margin:3px 0 0}.topic-card .card-arrow{font-size:15px;flex-shrink:0;margin-left:auto}.resident-area-head .eyebrow,.resident-area-head h2{display:none}.resident-area-head p{font-size:12px;line-height:1.8;margin:0 0 12px}.life-progress{font-size:10px;line-height:1.8;padding:7px 9px;margin-bottom:5px;width:100%}.resident-card{border:0;border-bottom:1px solid #dce3d4;border-radius:0;background:transparent;padding:16px 0;gap:10px;min-height:96px;width:100%}.resident-card .resident-avatar{width:38px;height:44px;border-radius:13px;font-size:22px}.resident-card strong{font-size:16px}.resident-card small{font-size:10px}.resident-card p{font-size:11px}.fiction-note{font-size:10px}.island-life{margin:0;padding:0}.life-heading{display:block;margin:0 0 12px}.life-heading .eyebrow,.life-heading h2{display:none}.life-heading p{font-size:12px;line-height:1.8}.mission-card{min-height:0;padding:17px 0;border:0;border-bottom:1px solid #dce3d4;border-radius:0;background:none}.mission-card:hover{background:#e9f0e0}.mission-card h3{font-size:15px;font-weight:650;line-height:1.6;margin:6px 0 4px}.mission-card p{font-size:10px;margin-bottom:9px}.mission-status{font-size:10px}.mission-arrow{right:3px;bottom:18px;font-size:17px}.street-log{padding:13px 0;margin:15px 0 0}.street-log summary{font-size:12px}.street-log summary span{display:block;margin:4px 0 0 15px;font-size:10px}.street-log ol{padding-left:16px;font-size:11px}.sidebar-footer{flex-shrink:0;padding:14px 20px max(15px,env(safe-area-inset-bottom));border-top:1px solid #d5dfcc;background:#f5f7ec;display:grid;grid-template-columns:1fr 1fr;gap:9px 10px}.sidebar-footer .journey-copy{grid-column:1/-1;gap:2px}.sidebar-footer .journey-copy strong{font-size:11px;line-height:1.7}.sidebar-footer .journey-copy span{font-size:10px;line-height:1.7}.sidebar-footer .progress-dots{grid-column:1/-1;justify-content:flex-start;margin:0 0 4px;gap:6px}.sidebar-footer .progress-dots span{width:7px;height:7px}.sidebar-footer .primary{padding:10px 12px;font-size:12px;gap:10px;min-height:42px;border-radius:8px}.sidebar-footer .primary span{font-size:11px}.sidebar-footer .text-button{font-size:11px;justify-content:center;gap:5px;margin:0}
.side-detail{position:fixed;z-index:25;left:30px;right:auto;top:124px;bottom:24px;width:var(--panel);max-width:calc(100vw - 60px);height:auto;max-height:none;margin:0;padding:0;overflow:hidden;border:1px solid #fff;border-radius:22px;background:rgba(253,253,247,.96);backdrop-filter:blur(22px);box-shadow:0 12px 50px #24493e24;animation:none}.side-detail[open]{display:flex;flex-direction:column}.side-detail .dialog-top{flex-shrink:0;padding:14px 15px 12px 20px;margin:0;border-bottom:1px solid #dfe5d6;gap:7px;min-height:63px}.side-detail .dialog-top .eyebrow{font-size:8px;letter-spacing:1px;line-height:1.7;flex:1;min-width:0}.side-detail .icon-button{width:36px;height:36px;min-width:36px;font-size:25px}.panel-expand{min-height:36px;border:1px solid #d5dfca;border-radius:8px;padding:5px 9px;font-size:11px;white-space:nowrap}.panel-scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:20px 20px 25px;scrollbar-width:thin;scrollbar-color:#aebe9f transparent}.side-detail.expanded{left:30px;top:18px;bottom:24px;width:calc(100vw - var(--sidebar) - 60px);max-width:none}.side-detail h2{font-size:24px}.side-detail .chapter-header h2{font-size:23px}.side-detail .chapter-header{gap:10px}.side-detail .chapter-header .topic-icon{width:41px;height:41px;font-size:21px}.side-detail .lesson-lead{font-size:21px;line-height:1.7}.side-detail .lesson-copy,.side-detail .about-copy{font-size:13px}.side-detail .lesson-box{padding:14px}.side-detail .quiz-option{font-size:12px;padding:12px;line-height:1.8}.side-detail .habit-choice{padding:11px;gap:8px}.side-detail .habit-choice span{font-size:12px}.side-detail .habit-choice button{font-size:10px;padding:6px 8px}.side-detail .detail-footer{flex-wrap:wrap;gap:10px}.side-detail .resident-heading{gap:12px}.side-detail .resident-heading .resident-avatar{width:56px;height:62px;font-size:30px}.side-detail .resident-speech{font-size:16px;padding:16px}.side-detail .resident-personality{font-size:12px}.side-detail #residentContent>h3{font-size:17px}.side-detail .resident-actions{gap:9px}.side-detail .resident-actions .primary{padding:11px 14px;font-size:12px}.side-detail .resident-actions .secondary{font-size:11px}.side-detail .mission-plan-row{display:block}.side-detail .mission-plan-row small{display:block;margin-top:4px}.side-detail .day-checks{gap:4px}.side-detail .day-check{min-width:0;width:calc((100% - 24px)/7);height:44px;font-size:9px}.side-detail .plan-item{padding:13px}.side-detail .plan-tools{gap:8px;flex-wrap:wrap}.side-detail .plan-tools .secondary{font-size:11px}.side-detail .plan-tools .text-button{font-size:10px}.side-detail .mission-steps{font-size:13px;padding-left:22px}.side-detail .source-inline{font-size:10px;overflow-wrap:anywhere}.small-dialog{z-index:80;padding:25px;border-radius:18px}.small-dialog::backdrop{background:#1c3b326b;backdrop-filter:blur(3px)}.toast{z-index:100;max-width:calc(100vw - 30px);white-space:normal;width:max-content;bottom:max(20px,env(safe-area-inset-bottom))}.scene-fallback,.scene-loading{position:absolute;inset:0;max-width:none;margin:0;padding:140px 28px 70px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:0;border-radius:0;box-shadow:none;background:#deeadf}.scene-fallback h2{max-width:450px;font-size:25px;text-align:center;margin:10px 0}.scene-fallback p{max-width:460px;font-size:13px;line-height:1.9;text-align:center}.scene-fallback small{max-width:460px;text-align:center;font-size:10px;line-height:1.8}.fallback-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:13px 0}.fallback-actions .primary,.fallback-actions .secondary{font-size:12px;padding:11px 14px;min-height:42px}.fallback-label{top:auto;bottom:20px;left:30px;right:auto;z-index:8;font-size:11px;background:#f8fbefda;border:1px solid #fff;border-radius:9px;padding:7px 11px}.scene-label{font-size:12px}.skip{z-index:110}
@media(min-width:1280px){.scene-tools{top:29px;left:300px}.scene-hud{max-width:calc(100vw - var(--sidebar) - 580px)}.scene-hud .scene-status{display:none}}
@media(min-width:801px) and (max-width:1279px){body[data-detail=true] .scene-tools{visibility:hidden}}
@media(max-width:800px){:root{--sidebar:0px}.map-area{inset:0}.island-brand{top:max(16px,env(safe-area-inset-top));left:18px;max-width:calc(100vw - 112px)}.island-brand .brand{gap:5px}.brand-title{font-size:26px;letter-spacing:1px}.island-brand .brand small{font-size:8px;letter-spacing:1px;margin-top:6px}.island-brand .brand-mark{width:28px;height:31px;font-size:26px}.island-brand .author-credit{font-size:9px;margin-top:9px;line-height:1.7}.map-toolbar{top:max(20px,env(safe-area-inset-top));right:15px;display:flex;flex-direction:column;gap:7px;align-items:center}.toolbar-button{min-width:44px;width:44px;height:44px;padding:0;font-size:12px;border-radius:13px}.toolbar-button.round{font-size:18px}.scene-tools{position:static;left:auto;right:auto;top:auto;bottom:auto;margin-top:12px}.scene-hud{padding:4px;max-width:none;justify-content:flex-start;box-shadow:none}.scene-hud .scene-status{display:none}.scene-hud button{flex:1;font-size:11px;padding:8px 6px;min-height:40px}.scene-instructions{display:none!important}.settings-panel{position:absolute;left:8px;right:8px;bottom:max(10px,env(safe-area-inset-bottom));top:auto;width:auto;max-height:calc(100dvh - 115px);overflow-y:auto;padding:16px 18px;border-radius:19px;overscroll-behavior:contain}.explorer-sidebar{position:fixed;top:auto;left:0;right:0;bottom:0;width:100%;height:52dvh;min-height:270px;max-height:calc(100dvh - 16px);border:1px solid #fff;border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -8px 40px #24493e22;transform:translateY(105%);visibility:hidden;pointer-events:none;transition:transform .22s ease,visibility .22s}.explorer-sidebar.expanded{height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}body[data-sidebar=open] .explorer-sidebar{transform:translateY(0);visibility:visible;pointer-events:auto}.sidebar-top{padding:0 17px}.sheet-grip{display:block;margin:0 auto;width:70px;height:22px;padding:8px 18px}.sheet-grip span{display:block;width:34px;height:4px;background:#adbaa2;border-radius:4px}.sidebar-heading{position:absolute;top:6px;right:12px;z-index:3}.sidebar-heading>div{display:none}.sidebar-heading .icon-button{display:block;width:34px;height:34px;font-size:24px}.sidebar-tabs{margin:0 44px 12px 0;padding:3px;min-height:42px;max-width:360px}.sidebar-tabs button{min-height:34px;font-size:13px}.sidebar-scroll{padding:0 17px 15px}.search-label{display:none}input[type=search]{font-size:16px;min-height:42px;margin-bottom:0;padding:9px 12px}.topic-card{min-height:83px;padding:13px 2px}.topic-card strong{font-size:15px}.topic-card p{font-size:11px}.resident-card{padding:12px 0;min-height:88px}.resident-card p{font-size:12px}.resident-area-head p{font-size:12px}.resident-list{gap:0}.sidebar-footer{padding:10px 17px max(12px,env(safe-area-inset-bottom));grid-template-columns:1fr 1fr;gap:0 9px}.sidebar-footer .journey-copy,.sidebar-footer .progress-dots{display:none}.sidebar-footer .primary{min-height:42px;font-size:12px;padding:8px 10px}.sidebar-footer .text-button{font-size:11px}.side-detail{left:8px;right:8px;top:auto;bottom:0;width:auto;height:34dvh;min-height:220px;max-height:calc(100dvh - 10px);max-width:none;border-radius:22px 22px 0 0;margin:0}.side-detail.expanded{left:8px;right:8px;top:auto;bottom:0;width:auto;height:calc(100dvh - 10px);max-height:calc(100dvh - 10px)}.side-detail .dialog-top{padding:10px 12px 9px 17px;min-height:58px}.side-detail .dialog-top .eyebrow{font-size:8px;letter-spacing:1px}.side-detail .panel-expand{min-height:36px}.side-detail .icon-button{width:36px;height:36px}.panel-scroll{padding:17px 18px max(20px,env(safe-area-inset-bottom))}.side-detail h2{font-size:24px}.side-detail .lesson-copy,.side-detail .about-copy,.side-detail .quiz-option{font-size:13px}.side-detail .dialog-intro{font-size:13px}.side-detail .resident-speech{font-size:16px}.side-detail .mission-steps{font-size:13px}.side-detail .day-check{height:44px;font-size:9px}.scene-fallback,.scene-loading{padding:150px 18px 35px;justify-content:center}.scene-fallback .eyebrow{font-size:8px;letter-spacing:1px}.scene-fallback h2{font-size:21px;max-width:280px}.scene-fallback p{font-size:12px;max-width:300px}.scene-fallback small{font-size:10px;max-width:290px}.fallback-actions{max-width:300px;gap:7px}.fallback-actions .primary,.fallback-actions .secondary{font-size:11px;padding:10px 11px;min-height:42px}.fallback-label{left:12px;bottom:max(15px,env(safe-area-inset-bottom));font-size:10px;max-width:calc(100vw - 24px)}.scene-label{font-size:11px}.scene-label .scene-full{display:none}.scene-label .scene-short{display:inline}.npc-marker.with-name{font-size:10px}.mission-list{display:flex;gap:0}.mission-card{min-height:0;padding:15px 0}.mission-card h3{font-size:15px}.mission-status{font-size:10px}.toast{font-size:12px}.small-dialog{width:calc(100% - 28px);min-height:0;height:auto;max-height:calc(100dvh - 28px);padding:22px}}
@media(max-height:580px){.sidebar-top{padding-top:12px}.sidebar-heading p{margin-bottom:10px}.sidebar-footer .journey-copy{display:none}.side-detail{top:100px;bottom:12px}.side-detail.expanded{top:10px;bottom:10px}.scene-fallback{padding-top:110px;padding-bottom:20px}.scene-fallback h2{font-size:20px}.scene-fallback p{font-size:11px;margin:5px 0}.scene-fallback small{display:none}}
@media(max-width:800px) and (max-height:580px){.side-detail{top:auto;bottom:0}.side-detail.expanded{top:auto;bottom:0}.explorer-sidebar{min-height:220px}.sidebar-top{padding-top:0}}
@media(prefers-reduced-motion:reduce){.explorer-sidebar{transition:none}html{scroll-behavior:auto}}
/* Restore normal flow inside the settings popover; legacy scene controls were absolute. */
.settings-panel .time-tools,.settings-panel .camera-tools{position:static;inset:auto;transform:none;width:auto}.settings-panel .camera-tools{flex-direction:row}

.fallback-label{transform:none}

@media(max-width:800px){.explorer-sidebar.expanded,.side-detail.expanded{z-index:45}}
.small-dialog{inset:0;margin:auto;height:fit-content}

/* Topic classification sits inside the existing scrollable index, preserving the approved shell. */
.topic-filters{display:flex;gap:4px;margin:3px 0 8px}.topic-filters button{flex:1;min-height:34px;border:1px solid #d6dfcf;border-radius:7px;padding:6px 4px;font-size:11px;background:#f6f8ee}.topic-filters button[aria-pressed=true]{background:#e1ead8;border-color:#9bb291;color:#294f3d;font-weight:700}.topic-count{margin:0;font-size:10px;line-height:1.7;color:#75836d}.topic-group{display:block;font-size:9px;line-height:1.6;letter-spacing:.3px;color:#647b5b;margin-bottom:2px}.sidebar-footer .progress-dots{flex-wrap:wrap}.topic-card{min-height:98px}@media(max-width:800px){.topic-filters{margin-top:9px}.topic-card{min-height:90px}}

.map-area[data-view=fallback]>.island{left:0;width:100%;height:100%;object-fit:contain}@media(max-width:800px){.map-node{padding:3px;border-radius:50%;min-width:32px;min-height:32px;justify-content:center}.map-node>span:not(.node-num){display:none}.map-node .node-num{width:26px;height:26px;font-size:11px}}