:root{--paper:#fffaf3;--ink:#343c37;--orange:#df704b;--muted:#8c9187;--line:#e6e1d5}*{box-sizing:border-box}body{margin:0;color:var(--ink);font:14px/1.65 'Noto Sans TC','PingFang TC',Arial,sans-serif;background:#86b9b9}button,input,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--line);background:#fffdf8;border-radius:9px;padding:9px 13px;transition:background .2s,transform .2s}button:hover{background:#f6e6d7}button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}button.active,.primary{background:var(--ink);color:#fff;border-color:var(--ink)}[hidden]{display:none!important}#world,canvas{position:fixed;inset:0;width:100%;height:100%;display:block}canvas{touch-action:none}.depth{position:fixed;inset:0 310px 0 0;pointer-events:none;box-shadow:inset 0 40px 50px -40px #e2e3d180,inset 0 -38px 34px -35px #e7e8dbb0;}.brand{position:absolute;top:24px;left:25px;display:flex;align-items:center;gap:18px;padding:15px 20px;background:var(--paper);box-shadow:0 7px 24px #394e4320;border-radius:17px;text-decoration:none;color:var(--ink);z-index:4}.brand b{font-size:29px;line-height:.92;letter-spacing:-1.5px;color:var(--orange)}.brand span{font-size:17px;font-weight:bold;letter-spacing:2px}.brand small{display:block;font-size:10px;font-weight:400;letter-spacing:1px;margin-top:6px}.toolbar{position:absolute;left:calc((100% - 310px)/2);transform:translateX(-50%);top:25px;display:flex;align-items:center;background:var(--paper);border-radius:35px;padding:5px;box-shadow:0 8px 25px #334f4520;z-index:5;gap:1px}.toolbar button{border:0;background:none;border-radius:28px;padding:5px 9px;min-width:36px;font-size:21px;line-height:1.05;height:49px}.toolbar button small{display:block;font-size:9px;line-height:1.7;white-space:nowrap}.toolbar button.active{background:#35433b;color:#fff}.times{display:flex}.toolbar i{height:28px;border-left:1px solid var(--line);margin:0 3px}.view-tools{position:absolute;right:330px;top:96px;display:flex;gap:5px;z-index:5}.view-tools button{font-size:12px;padding:8px 10px;background:var(--paper)}#index{position:absolute;right:0;top:0;bottom:0;width:310px;background:var(--paper);padding:30px 22px 22px;overflow:auto;z-index:6;border-left:1px solid #f0ede4}.eyebrow{font:9px/1.6 monospace;letter-spacing:2.7px;color:var(--orange);font-weight:bold}h1{font-size:24px;letter-spacing:-.6px;line-height:1.3;margin:13px 0 10px}h2{line-height:1.4;font-size:23px;margin:12px 0 16px}h3{font-size:12px;margin-top:25px;letter-spacing:1px}p{margin:10px 0}#totals{font-size:12px;margin-bottom:0}.muted{color:var(--muted);font-size:11px;margin-top:2px}.quiz-card{display:block;text-align:left;width:100%;margin:22px 0 16px;border:1px solid #e5b9a4;background:#fff5e9;padding:13px}.quiz-card b{font-size:12px}.quiz-card span{float:right;color:var(--orange)}.quiz-card small{display:block;font-size:10px;margin-top:3px;color:#8c8476}.search{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px}.search input{width:100%;border:0;outline:0;font-size:11px;background:none}.search kbd{color:#aaa}.index-tabs{display:flex;gap:5px;margin:12px 0}.index-tabs button{flex:1;font-size:11px;padding:8px 0}#searchStatus{font-size:10px;color:var(--muted)}.index-row{display:flex;align-items:center;width:100%;padding:18px 5px;text-align:left;border:0;border-bottom:1px solid #eee7db;background:transparent;border-radius:0;gap:14px}.index-row em{font:italic 26px Georgia;color:var(--orange)}.index-row b{font-size:13px;flex:1}.index-row small{font-size:11px;color:#8b897f}.index-section{font-size:11px;display:block;width:calc(100% - 30px);margin-left:30px;text-align:left;background:none;border:0;color:#777;padding:8px}.index-row.selected{background:#f9ebdf}.add-button{width:100%;margin-top:24px;border-color:#deb8a2;color:var(--orange)}.source-button{width:100%;border:0;background:none;font-size:11px;margin-top:12px;color:#8a8c80}.source-button small{font-size:9px}#detail{position:absolute;top:138px;left:25px;bottom:62px;width:325px;background:#fffaf4f5;border:1px solid #fff;border-radius:18px;padding:24px;overflow:auto;z-index:7;box-shadow:0 15px 45px #34544825;scrollbar-width:thin}#close,.corner{position:absolute;right:12px;top:10px;border:0;background:none;font-size:23px;padding:0 5px}#detail h2{font-size:23px;margin-top:12px}#detail p,#detail li{font-size:12px;line-height:1.8;overflow-wrap:anywhere}#detail ul{padding-left:17px}#detail li::marker{color:var(--orange)}#detail a{color:#417a7a;text-decoration:none}#detail .tag{font-size:10px;color:var(--orange);letter-spacing:1px;margin:4px 18px 15px 0}.quote{border-left:3px solid var(--orange);padding:9px 12px;background:#f9efe5;font-size:12px}.chips{display:flex;flex-wrap:wrap;gap:5px;margin:15px 0}.chip{font-size:10px;border:1px solid #e5dfd2;border-radius:20px;padding:3px 8px;background:#fff}.section-row{display:flex;width:100%;text-align:left;align-items:center;gap:9px;margin:7px 0;padding:10px;background:#fff;font-size:11px}.section-row i{font-style:normal;color:var(--orange);font-size:14px}.section-row small{margin-left:auto;color:#aaa}.timeline{display:flex;gap:3px;margin:10px 0}.timeline span{flex:1;text-align:center;font-size:9px;border-top:5px solid #e4dfd2;padding-top:6px}.timeline .current{border-color:var(--orange);color:var(--orange);font-weight:bold}.evidence{margin:12px 0;padding:12px;background:#f0eee4;border-radius:9px}.bottom-note{position:absolute;bottom:22px;left:30px;z-index:3;display:flex;gap:20px;align-items:center;font-size:10px;color:#fff;text-shadow:0 1px 4px #456}.bottom-note b{font-size:11px;background:#fffaf3;color:#60695d;border-radius:20px;padding:7px 15px;text-shadow:none}.compass{position:absolute;right:340px;bottom:22px;color:#fffc;font-size:11px;text-align:center}.compass span{display:block;font-size:35px;line-height:1}.label{position:absolute;transform:translate(-50%,-50%);z-index:2;white-space:nowrap;pointer-events:auto;cursor:pointer}.island-label{font-size:11px;font-weight:bold;padding:6px 13px;background:#fffaf3;border-radius:22px;box-shadow:0 3px 7px #36584b20}.island-label em{font-style:normal;color:var(--orange);margin-right:7px;font-size:10px}.pin{font-size:10px;background:#fffaf4;border:1px solid #ead4ba;border-radius:20px;padding:3px 9px 3px 3px;box-shadow:0 2px 5px #3453}.pin b{display:inline-grid;place-items:center;border-radius:50%;background:var(--orange);color:white;width:20px;height:20px;margin-right:5px}.pin:after{content:'';height:24px;width:1px;background:#df704b;position:absolute;top:100%;left:12px}.title-label,.player-label{background:var(--paper);padding:3px 12px;border-radius:15px;font-size:10px;max-width:260px;white-space:normal}.player-label{color:var(--orange);font-weight:bold}.bridge-label{display:none}#list{position:absolute;inset:120px 330px 70px 25px;background:var(--paper);border-radius:18px;padding:25px;overflow:auto;z-index:8}.paper-row{display:block;width:100%;text-align:left;margin:7px 0}.paper-row small,.added-item small{display:block;color:#8a8d82;font-size:11px}#logPanel{position:absolute;right:0;top:0;bottom:0;width:310px;background:var(--paper);z-index:9;padding:30px 22px}#logPanel p{font-size:10px}.live{color:#62a17c;font-size:10px;font-weight:bold}#logFilter{width:100%;padding:8px;font-size:11px;border:1px solid var(--line);border-radius:7px;background:white}#events{height:calc(100% - 155px);overflow:auto;margin-top:14px}.event{font-size:11px;border-bottom:1px solid var(--line);padding:12px 0;cursor:pointer}.event time{font:9px monospace;color:#999}.event b{font-size:9px;color:#df704b;margin-right:8px}.event small{display:block;margin-top:5px;color:#929287;font-size:9px}.event em{font-style:normal;background:#e3ede6;color:#618b7c;font-size:9px;padding:2px 5px;border-radius:4px}.addition-result{padding:12px;background:#f8e7ed;border-radius:8px}.addition-result select{width:100%;margin-bottom:7px}.addition-result label{display:block}dialog{border:1px solid #fff;background:var(--paper);color:var(--ink);border-radius:20px;padding:35px;width:min(500px,90vw);box-shadow:0 25px 100px #2347;max-height:85vh;overflow:auto}dialog::backdrop{background:#23464b55;backdrop-filter:blur(4px)}dialog input{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;margin:10px 0}dialog .primary{margin:12px 0}.added-item{width:100%;text-align:left;margin-top:10px;font-size:12px}#quizBody button{display:block;width:100%;text-align:left;margin:10px 0}#tour h2{font-size:28px}#tour p{margin-bottom:24px}#tourSkip{border:0;background:none;font-size:12px;margin-left:15px}#characterPanel{position:absolute;bottom:23px;left:calc((100% - 310px)/2);transform:translateX(-50%);background:var(--paper);border-radius:15px;padding:14px 20px;display:flex;align-items:center;gap:14px;z-index:8;white-space:nowrap;font-size:11px}#characterPanel label{display:flex;align-items:center;gap:5px}#charName{width:95px;padding:5px;border:1px solid var(--line);border-radius:5px}input[type=color]{width:28px;height:26px;border:0;background:none;padding:0}#characterPanel span{font-size:10px;color:#888}#loading{position:fixed;inset:0;background:var(--paper);z-index:99;display:grid;place-content:center;font-size:45px;font-weight:bold;color:var(--orange)}#loading small{font-size:12px;color:#999;font-weight:normal;text-align:center}@media(max-width:1100px){.toolbar{top:110px}.view-tools{top:180px}.brand{transform:scale(.85);transform-origin:top left}#detail{top:180px;width:290px}#characterPanel{flex-wrap:wrap;width:550px;white-space:normal}}@media(max-width:700px){#index{width:230px;padding:20px 12px}.toolbar{left:10px;transform:none;top:105px;max-width:calc(100% - 240px);overflow:auto}.view-tools{right:240px;top:170px;flex-wrap:wrap;max-width:120px}.brand{left:10px;top:15px;transform:scale(.7)}#detail{left:10px;right:240px;width:auto;min-width:190px;top:240px;bottom:75px;padding:15px}#list{inset:230px 240px 65px 10px}.bottom-note span{display:none}#characterPanel{width:calc(100% - 250px);left:10px;transform:none}#characterPanel span{display:none}}
#detail:has(.timeline) h2{font-size:19px}#detail:has(.timeline) h3{margin-top:17px;margin-bottom:7px}#detail:has(.timeline) p,#detail:has(.timeline) li{font-size:11px;line-height:1.6}#detail details summary{font-size:11px;color:#7f9183;cursor:pointer}#detail .timeline{margin-top:5px}#detail:has(.timeline) .chips{margin:10px 0}

.view-tools button.active{background:var(--ink);color:#fff}

/* Nine research districts fit a compact index; each row remains a large click target. */
.index-row{padding:12px 5px}.index-row em{font-size:23px}.index-row b{font-size:12px}
#index .quiz-card{margin:16px 0 12px}.index-section{padding:5px 8px}.paper-row{overflow-wrap:anywhere}
#detail h3 small{font-size:9px;font-weight:normal;letter-spacing:0}.pin{max-width:190px;overflow:hidden;text-overflow:ellipsis}
/* TASK9: reading essentials fit a 1600 × 900 viewport. */
#detail:has(.paper-detail){width:430px;padding:20px;top:132px;bottom:28px}
#detail .paper-essentials h2{font-size:20px;line-height:1.35;margin:7px 0}
#detail .paper-essentials .tag{margin-bottom:6px;font-size:9px}
#detail .paper-essentials h3{margin:12px 0 4px}
#detail .paper-essentials p,#detail .paper-essentials li{font-size:12px;line-height:1.5;margin:5px 0}
#detail .paper-essentials ul{margin:6px 0 12px}
#detail .paper-more>details{border-top:1px solid var(--line);padding:10px 0}
.parent-count{font-size:12px;padding:10px 5px;background:#f1ede2;margin-top:6px}.parent-count small{display:block;font-size:9px;color:#787e73}
#detail .paper-essentials h2{overflow-wrap:anywhere}
#detail .paper-essentials h2.long-title{font-size:16px;line-height:1.3}

/* TASK10: contents wrappers leave all original desktop containing blocks intact. */
#mobileSheet,#sheetContent,#mobileMenuPanel{display:contents}
#sheetHeader,#mobileMenuToggle{display:none}
#indexToggle{position:fixed;right:318px;top:8px;z-index:10;height:44px;font-size:12px;background:var(--paper)}
#indexToggle.sidebar-closed{right:8px}
#index.desktop-collapsed{display:none}

@media (max-width:768px){
 :root{--sheet-height:calc(80px + env(safe-area-inset-bottom,0px))}
 html,body{width:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
 body{font-size:14px}
 button,input,select,a,summary{min-width:44px;min-height:44px}
 button,input,select{font-size:14px}
 input,select{font-size:16px}
 a{display:inline-flex;align-items:center;overflow-wrap:anywhere;max-width:100%}
 summary{display:flex;align-items:center;cursor:pointer}
 summary::before{content:'›';margin-right:8px;color:var(--orange)}
 details[open]>summary::before{content:'⌄'}
 button{overflow-wrap:anywhere}
 small,.muted{font-size:12px}
 #world,canvas{height:100dvh;touch-action:none}
 .depth{inset:0}
 .brand{position:fixed;left:max(16px,env(safe-area-inset-left));top:calc(14px + env(safe-area-inset-top));transform:none;padding:11px 14px;border-radius:14px;min-height:58px}
 .brand b{font-size:21px;letter-spacing:-1px}
 .brand span{display:none}
 #indexToggle{display:none}
 #mobileMenuToggle{display:block;position:fixed;right:max(16px,env(safe-area-inset-right));top:calc(14px + env(safe-area-inset-top));z-index:12;background:var(--paper);box-shadow:0 4px 18px #3453;border-radius:24px;padding:9px 16px}
 #mobileMenuPanel{display:none;position:fixed;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));top:calc(84px + env(safe-area-inset-top));z-index:11;background:var(--paper);padding:14px;border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 40px #3455;max-height:calc(100dvh - 184px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain}
 body.mobile-menu-open #mobileMenuPanel{display:block}
 .toolbar{position:static;left:auto;top:auto;transform:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;max-width:none;overflow:visible;border-radius:0;padding:0;box-shadow:none}
 .times{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:6px}
 .toolbar i{display:none}
 .toolbar button{height:52px;min-width:44px;border-radius:12px;padding:4px;font-size:21px;background:#f0ede3}
 .toolbar button small{font-size:12px;line-height:1.5}
 .view-tools{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-width:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
 .view-tools button{font-size:14px;padding:9px}
 #mobileSheet{display:flex;flex-direction:column;position:fixed;inset:auto 0 0;width:100%;height:calc(80px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom,0px);scroll-margin-top:env(safe-area-inset-top,0px);background:var(--paper);border:1px solid #e6e1d5;border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -8px 32px #3453;z-index:10;overflow:hidden;transition:height .2s ease}
 #mobileSheet[data-state=half]{height:50dvh}
 #mobileSheet[data-state=full]{height:calc(100dvh - env(safe-area-inset-top) - 12px)}
 #mobileSheet.dragging{transition:none}
 #sheetHeader{display:flex;position:relative;flex:0 0 79px;touch-action:none;user-select:none}
 #sheetToggle{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;width:100%;border:0;border-radius:22px 22px 0 0;padding:13px calc(62px + env(safe-area-inset-right)) 8px max(20px,env(safe-area-inset-left));background:var(--paper);text-align:left;touch-action:none}
 .sheet-grip{position:absolute;top:7px;left:calc(50% - 19px);width:38px;height:4px;border-radius:3px;background:#c9c8b9}
 #sheetToggle .eyebrow{font-size:9px;letter-spacing:2px;line-height:1.4}
 #sheetToggle strong{font-size:18px;letter-spacing:-.3px;line-height:1.5}
 #sheetHint{position:absolute;right:calc(19px + env(safe-area-inset-right));top:35px;font-size:12px;color:#7c8377}
 #mobileSheet:not([data-state=collapsed]) #sheetHint{display:none}
 #sheetCollapse{position:absolute;right:calc(12px + env(safe-area-inset-right));top:23px;width:44px;height:44px;padding:0;font-size:25px;border-radius:50%;background:#f0ede3}
 #mobileSheet[data-state=collapsed] #sheetCollapse{display:none}
 #sheetContent{display:block;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;padding:0 max(16px,env(safe-area-inset-right)) 20px max(16px,env(safe-area-inset-left));overflow-wrap:anywhere}
 #mobileSheet[data-state=collapsed] #sheetContent{visibility:hidden}
 #index,#detail,#detail:has(.paper-detail),#list,#logPanel{position:relative;inset:auto;transform:none;width:100%;min-width:0;max-width:100%;height:auto;max-height:none;overflow:visible;padding:10px 0 16px;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent}
 #mobileSheet #index{display:block}
 #mobileSheet[data-view=detail] #index,#mobileSheet[data-view=list] #index,#mobileSheet[data-view=log] #index{display:none}
 #mobileSheet:not([data-view=detail]) #detail,#mobileSheet:not([data-view=list]) #list,#mobileSheet:not([data-view=log]) #logPanel{display:none}
 #index>.eyebrow,#index>h1{display:none}
 #totals{font-size:14px;margin-top:0}
 #index .muted{font-size:12px}
 .quiz-card b{font-size:14px}
 .quiz-card small,.source-button,.source-button small{font-size:12px}
 .search{padding:0 10px;gap:6px}
 .search input{font-size:16px;min-width:0;height:44px}
 .index-tabs button{font-size:14px}
 #searchStatus{font-size:12px}
 .index-row{gap:10px;min-height:60px}
 .index-row b{font-size:14px;min-width:0}
 .index-row small,.index-section{font-size:12px}
 .index-section{min-height:44px}
 .parent-count{font-size:14px;padding:10px}
 .parent-count small{font-size:12px}
 #close,#logClose{position:sticky;float:right;right:0;top:0;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;padding:0;background:var(--paper);z-index:2;font-size:25px}
 #detail h2,#detail:has(.timeline) h2{font-size:22px}
 #detail p,#detail li,#detail:has(.timeline) p,#detail:has(.timeline) li,#detail .paper-essentials p,#detail .paper-essentials li{font-size:14px;line-height:1.7}
 #detail .tag,#detail .paper-essentials .tag{font-size:12px;letter-spacing:.5px;padding-right:44px}
 #detail h3,#detail details summary{font-size:14px}
 #detail h3 small,.paper-row small,.added-item small{font-size:12px}
 #detail .paper-essentials h2{font-size:22px}
 #detail .paper-essentials h2.long-title{font-size:18px}
 .chip{font-size:12px;max-width:100%;white-space:normal}
 button.chip{padding:10px}
 .section-row{font-size:14px;min-width:0}
 .section-row small{font-size:12px}
 .timeline span{font-size:10px}
 #detail a,dialog a{padding:8px 4px;min-width:44px;min-height:44px}
 #list h1{font-size:23px}
 #list h2{font-size:19px;margin-top:24px}
 #mapTab{position:sticky;top:0;z-index:1;background:var(--paper)}
 #logPanel p,#logFilter,.event{font-size:14px}
 .event time,.event small,.event b,.event em,.live{font-size:12px}
 #events{height:auto;overflow:visible}
 .event{min-height:44px}
 .bottom-note{position:fixed;bottom:calc(var(--sheet-height) + 12px);left:max(16px,env(safe-area-inset-left));max-width:calc(100% - 82px);gap:0}
 .bottom-note span{display:none}
 .bottom-note b{font-size:12px;padding:7px 13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .compass{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(var(--sheet-height) + 12px);font-size:12px;pointer-events:none}
 body:has(#mobileSheet[data-state=full]) .bottom-note,body:has(#mobileSheet[data-state=full]) .compass{visibility:hidden}
 body:has(#mobileSheet[data-state=full]) #mobileMenuToggle{visibility:hidden}
 .island-label,.pin{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:12px}
 .island-label em{font-size:12px}
 .pin{max-width:190px}
 #characterPanel{position:fixed;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:calc(var(--sheet-height) + 14px);transform:none;width:auto;max-height:calc(100dvh - 190px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;white-space:normal;display:flex;flex-wrap:wrap;gap:10px;padding:16px;font-size:14px}
 #characterPanel>b{width:100%}
 #characterPanel label{font-size:14px}
 #charName{width:140px;height:44px}
 #characterPanel input[type=color]{width:44px;height:44px}
 #characterPanel span{display:none}
 dialog{inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);width:calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:500px;max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:52px 20px 24px;margin:auto;overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere}
 dialog h2,#tour h2{font-size:23px}
 dialog .corner{width:44px;height:44px;top:8px;right:8px;padding:0}
 #tourSkip{margin-left:0}
 #addForm{min-width:0}
 #addInput{min-width:0}
 .addition-result select{min-width:0;max-width:100%;height:44px}
 #loading{font-size:34px}
}