:root{--paper:#f0ecdf;--ink:#354968;--muted:#8a908b;--rule:#9faeb22b;--rust:#ae7355;--green:#84927b}*{box-sizing:border-box}body{margin:0;background:#e2ded0;color:var(--ink);font:12px 'Space Grotesk','Noto Sans SC',sans-serif;overflow:hidden}button,a{color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;background:none;transition:background .15s,transform .15s}button:hover{background:#8e9b851d}button:active{transform:translateY(1px)}button:focus-visible{outline:2px dashed #607899;outline-offset:3px}.app{height:100dvh;min-height:560px;display:flex;flex-direction:column;background:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.047' filter='url(%23n)'/%3E%3C/svg%3E")}header{height:90px;flex-shrink:0;margin:0 30px;display:flex;align-items:center;border-bottom:1px solid #7d8c9e50;gap:28px;z-index:2}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:200px}.brand svg{width:43px;height:48px;stroke:var(--ink);stroke-width:1.3;fill:none;transform:rotate(-5deg)}.brand b{font:800 29px 'Noto Serif SC',serif;letter-spacing:2px}.brand b>span{color:var(--rust);margin-left:-7px}.brand small{display:block;font-size:8px;letter-spacing:3.3px;margin-top:4px}.resources{display:flex;justify-content:space-around;gap:22px;flex:1;max-width:530px}.resources>div{position:relative;display:grid;grid-template-columns:24px auto;column-gap:7px;min-width:62px}.resource-symbol{grid-row:1/3;align-self:center;font-size:29px;color:#75836b}.resource-symbol.food{color:#ac7c57;transform:rotate(25deg)}.resource-symbol.stone{color:#8c9090;font-size:33px}.resource-symbol.gold{color:#b18b43}.resources b{font-size:18px;font-weight:500;white-space:nowrap;line-height:23px}.resources small{font-size:9px;color:#8c928a;letter-spacing:1px}.population{border-left:1px solid #a5ae9c55;padding-left:20px;min-width:101px!important}.era{display:flex;align-items:center;gap:9px;border-left:1px solid #a5ae9c55;padding-left:22px;margin-left:auto;white-space:nowrap}.era>i{height:6px;width:6px;border-radius:50%;background:#ae8256}.era b{font:600 13px 'Noto Serif SC',serif;letter-spacing:1px}.era small{display:block;font-size:8px;margin-top:5px;color:#929184}.era>span{font:italic 33px Georgia;color:#b0ad98;margin-left:15px}nav{display:flex;align-items:center;gap:12px;margin-left:auto}nav button{padding:7px 5px;font-size:16px}nav button>span{font-size:10px;margin-left:4px}nav button>i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#b1b3a5;margin-left:6px}nav button.active>i{background:#6e9277;box-shadow:0 0 0 3px #8ca48c22}.round{border:1px solid #aab0af;border-radius:50%;width:27px;height:27px;padding:0;font-size:13px}main{flex:1;position:relative;min-height:0;overflow:hidden;background:repeating-linear-gradient(0deg,transparent,transparent 29px,#8da0b326 29px,#8da0b326 30px)}#world{width:100%;height:100%;display:block;touch-action:none;cursor:default}.book-seam{position:absolute;left:50%;top:0;bottom:0;width:40px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#8d856312 38%,#756d5329 48%,#fffefa22 55%,transparent);pointer-events:none}.margin-line{position:absolute;top:0;bottom:0;left:65px;border-left:1px solid #bc8a813b;pointer-events:none}.chapter{position:absolute;top:30px;left:95px;pointer-events:none;text-shadow:0 0 9px var(--paper)}.chapter>small{font-size:8px;letter-spacing:2.25px;color:#8a928d}.chapter h1{font:700 38px 'Noto Serif SC',serif;letter-spacing:6px;margin:8px 0 7px}.chapter h1>span{color:#a97b56;margin-left:-4px}.chapter p{font:11px 'Noto Serif SC',serif;letter-spacing:2px;color:#7e8a83;margin:0}.chapter>div{display:flex;align-items:center;gap:10px;margin-top:19px;font-size:9px;color:#93998b;letter-spacing:1px}.chapter-line{width:25px;height:1px;background:#adb198}.journal{position:absolute;right:33px;top:36px;width:212px;padding:19px 19px 13px;transform:rotate(2deg);background:#eee8d4e8;border:1px solid #c8c6b19c;box-shadow:2px 4px 1px #7166440e}.tape{position:absolute;width:75px;height:22px;background:#d7d0b180;top:-11px;left:65px;transform:rotate(-6deg)}#journalToggle{font-size:9px;letter-spacing:2px;color:#8d927e;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0;text-align:left}#journalToggle>span{font-size:18px}.journal h2{font:600 18px/1.9 'Noto Serif SC',serif;letter-spacing:1px;margin:10px 0 16px}.journal-body>p{font:10px/1.9 'Noto Serif SC',serif;color:#92927e;border-top:1px dashed #b9bda465;padding-top:11px;margin:15px 0 0}.journal.folded .journal-body{display:none}.journal.folded{padding-bottom:18px}.objective{display:flex;gap:7px;font-size:10px;line-height:1.6;margin-top:9px;align-items:center;color:#7a877e}.objective>i{font-style:normal;width:11px;height:11px;border:1px solid #9dA590;display:grid;place-items:center;font-size:10px;flex-shrink:0}.objective.done{color:#849568}.objective>b{margin-left:auto;font-size:9px;font-weight:400}.sketch-arrow{position:absolute;right:19px;bottom:8px;font:36px Georgia;color:#9ca184;transform:rotate(15deg)}.camera-tools{position:absolute;left:24px;top:43%;display:flex;flex-direction:column;align-items:center;gap:9px}.camera-tools button{width:25px;height:27px;font-size:24px;padding:0;color:#6e7e91}.camera-tools>span{width:16px;height:1px;background:#aeb5ab;margin:2px 0}.atmosphere{position:absolute;bottom:51px;left:94px;display:flex;gap:10px;align-items:center;font-size:9px;color:#798779;pointer-events:none}.sun{font-size:23px;color:#b4975f}.atmosphere i{height:3px;width:3px;border-radius:50%;background:#a1a998;margin:0 3px}.location{position:absolute;bottom:21px;left:95px;font-size:10px;letter-spacing:1px;color:#657b72;pointer-events:none}.location>span{font-size:15px;margin-right:6px}.location small{font-size:8px;letter-spacing:1px;color:#949b8b;margin-left:12px}.page-number{position:absolute;bottom:22px;right:33px;font-size:8px;letter-spacing:1.5px;color:#99a08f;pointer-events:none}.page-number>span{margin:0 10px;color:#b8baa6}.field-note{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:10px;color:#859480;background:#f0ecdf99;padding:5px 10px;pointer-events:none;white-space:nowrap}.command-bar{height:174px;margin:0 30px;display:flex;align-items:center;gap:25px;border-top:1px solid #76869465;border-bottom:1px solid #8b988240;flex-shrink:0;z-index:2}.unit-panel{display:flex;gap:16px;align-items:center;min-width:280px}.portrait{width:88px;height:101px;background:#e4e6d670;border:1px solid #a5afa0;position:relative;transform:rotate(-2deg)}.portrait canvas{width:88px;height:90px}.portrait>span{position:absolute;bottom:-6px;right:-6px;background:#f0ecdf;border:1px solid #9daa9e;min-width:23px;text-align:center;font-size:10px;padding:3px}.unit-description{min-width:158px}.unit-description>small{font-size:8px;letter-spacing:1px;color:#929c8c}.unit-description h2{font:700 21px 'Noto Serif SC',serif;margin:9px 0 8px;letter-spacing:2px}.unit-description p{font-size:10px;color:#8c9588;margin:0 0 11px;max-width:170px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.health-track{height:4px;background:#d5d9c9;width:145px}.health-track>i{height:100%;display:block;background:#809579;width:100%}.unit-description>span{font-size:8px;color:#7f8d7e;display:block;margin-top:5px}.orders{flex:1;border-left:1px solid #adb69e4a;padding-left:25px;min-width:300px}.orders-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:9px;color:#7d8b80;letter-spacing:1px}.orders-heading>span:last-child{font-size:8px;color:#9aA28f;letter-spacing:.5px}.actions{display:flex;gap:10px;min-height:66px}.action{padding:0;position:relative;width:61px;flex-shrink:0;text-align:center;display:flex;align-items:center;flex-direction:column;gap:5px}.action .action-icon{width:49px;height:46px;border:1px solid #9eac9e;background:#e7e9da66;display:grid;place-items:center;font:29px Georgia;color:#627868}.action:nth-child(even) .action-icon{transform:rotate(2deg)}.action.upgrade .action-icon{background:#e5d8b777;border-color:#b4a17e;color:#9a8156}.action:disabled{opacity:.42;cursor:not-allowed}.action>small{font-size:9px;white-space:nowrap}.action .cost{display:none;position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#34485beb;padding:7px 11px;color:#eee9d8;font-size:10px;white-space:nowrap;z-index:3;pointer-events:none}.action:hover .cost{display:block}.action.active .action-icon{background:#bfcbb47a;border-color:#6d896d;box-shadow:0 0 0 2px #8eaa7f30}.queue{height:13px;margin-top:9px;display:flex;gap:5px;align-items:center}.queue-item{height:13px;min-width:38px;border:1px solid #aab39d;position:relative;font-size:7px;padding:0 4px;text-align:center}.queue-item>i{position:absolute;inset:0;right:auto;background:#9bac8550;pointer-events:none}.field-guide{border-left:1px solid #adb69e4a;padding-left:21px;min-width:174px}.field-guide>small{font-size:8px;letter-spacing:1.6px;color:#9ca28c}.field-guide>p{font:11px/1.9 'Noto Serif SC',serif;color:#7e8b79;margin:10px 0 12px}.field-guide button{padding:5px 8px;border:1px solid #aab39d;font-size:9px}.field-guide button>b{font-weight:500;margin-left:9px}.field-guide kbd{margin-left:10px;font-size:10px}.minimap-wrap{flex-shrink:0;width:215px}.minimap-wrap>canvas{width:215px;height:130px;display:block;border:1px solid #9fae9c;transform:rotate(1deg);cursor:crosshair;background:#e7e6d6}.minimap-wrap>div{display:flex;justify-content:space-between;align-items:center;font-size:8px;color:#8f9b87;letter-spacing:.8px;margin-top:5px}.minimap-wrap button{font-size:14px;padding:0;line-height:15px}footer{height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;margin:0 30px;font-size:8px;color:#969f8f}footer kbd{font-family:inherit;font-size:8px;border:1px solid #b5bea951;padding:0 3px;color:#859382}footer em{font-style:normal;margin:0 7px;color:#b5bbaa}footer>span:last-child{font-size:7px;letter-spacing:1.3px}footer b{font-size:18px;color:#77896f;margin-left:15px;vertical-align:middle}.toast{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);background:#354c58ec;color:#f3efe3;font-size:11px;padding:10px 21px;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap}.toast.show{opacity:1}.announcement{position:absolute;top:27px;left:50%;transform:translateX(-50%) rotate(-1deg);font:600 17px 'Noto Serif SC',serif;letter-spacing:2px;background:#f0ecdfeb;border-bottom:1px solid #869979;padding:9px 20px;opacity:0;pointer-events:none;transition:opacity .3s;white-space:nowrap}.announcement.show{opacity:1}.selection-box{position:absolute;background:#6a8e9920;border:1px solid #537b95;pointer-events:none;display:none}.hidden{display:none!important}.modal{position:fixed;inset:0;z-index:20;background:#354b4138;backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px}.paper{position:relative;width:min(690px,95vw);max-height:90vh;overflow:auto;padding:38px 43px;background:var(--paper);background-image:repeating-linear-gradient(0deg,transparent,transparent 29px,#8da0b31c 29px,#8da0b31c 30px);border:1px solid #97a68e;box-shadow:6px 7px 0 #41513b25}.paper>small{font-size:9px;color:#889579;letter-spacing:2px}.paper h2{font:700 28px 'Noto Serif SC',serif;margin:13px 0}.intro{font-size:12px;line-height:1.9;color:#86917e}.close{position:absolute;right:13px;top:9px;font-size:27px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 25px;margin:24px 0}.help-grid b{font:600 14px 'Noto Serif SC',serif}.help-grid p{font-size:11px;line-height:1.9;color:#85917d;margin-bottom:0}.help-note{border-top:1px dashed #a4b195;padding:16px 0 22px;font-size:11px;color:#8f8f75;line-height:1.8}.primary{padding:13px 18px;width:100%;background:#3f574c;color:#f0ecdf;text-align:left;letter-spacing:1px;border:1px solid #3f574c}.primary:hover{background:#567161}.primary span{float:right}.compact{max-width:430px;text-align:center}.compact .primary{margin-top:15px}.secondary{display:block;padding:11px;width:100%;font-size:12px;border-bottom:1px solid #aab79a30}
@media(min-width:1600px){header{gap:38px;margin:0 40px}.resources{max-width:630px;gap:32px}.command-bar{height:188px;gap:36px;margin:0 40px}.unit-panel{min-width:310px}.actions{gap:17px}.action{width:67px}.action .action-icon{width:57px;height:51px}.field-guide{min-width:210px}.minimap-wrap{width:240px}.minimap-wrap>canvas{width:240px;height:142px}}
@media(max-width:1250px){header{gap:18px;margin:0 22px}.brand{min-width:160px}.brand b{font-size:25px}.resources{gap:14px}.resources>div{min-width:52px}.population{padding-left:11px;min-width:90px!important}.era{padding-left:13px}.era>span{display:none}.era small{font-size:7px}nav{gap:7px}nav button>span{display:none}.command-bar{gap:17px;margin:0 22px}.unit-panel{min-width:235px;gap:11px}.portrait{width:73px;height:90px}.portrait canvas{width:73px;height:82px}.unit-description{min-width:140px}.unit-description h2{font-size:18px}.unit-description p{max-width:145px}.orders{padding-left:18px;min-width:280px}.actions{gap:6px}.action{width:53px}.action .action-icon{width:44px;height:44px}.field-guide{display:none}.minimap-wrap{width:195px}.minimap-wrap>canvas{width:195px;height:121px}.journal{width:190px;right:25px}.journal h2{font-size:16px}.chapter{left:90px}.chapter h1{font-size:33px}}
@media(max-width:900px){header{height:77px;gap:13px;margin:0 16px}.brand{min-width:126px;gap:5px}.brand svg{width:33px}.brand b{font-size:22px;letter-spacing:0}.brand small{font-size:6px;letter-spacing:2px}.resources{gap:8px}.resources>div{min-width:43px;grid-template-columns:17px auto;gap:4px}.resources b{font-size:15px}.resource-symbol{font-size:23px!important}.resources small{font-size:8px}.population{min-width:74px!important;padding-left:8px}.era{display:none}.command-bar{height:158px;margin:0 16px;gap:12px}.unit-panel{min-width:200px;gap:8px}.portrait{width:62px;height:79px}.portrait canvas{width:62px;height:73px}.unit-description{min-width:120px}.unit-description h2{font-size:17px}.unit-description p{font-size:9px;max-width:128px}.health-track{width:120px}.orders{padding-left:12px;min-width:245px}.actions{gap:4px;flex-wrap:wrap}.action{width:43px}.action .action-icon{width:38px;height:37px;font-size:24px}.action>small{font-size:8px}.minimap-wrap{width:145px}.minimap-wrap>canvas{width:145px;height:107px}.journal{width:172px;padding:17px 13px 11px}.journal h2{font-size:15px}.objective{font-size:9px}.journal-body>p{font-size:9px}.chapter>small{font-size:7px}.chapter h1{font-size:30px}.chapter p{font-size:10px}.chapter>div{font-size:8px}footer{margin:0 16px}footer>span:last-child{display:none}.page-number{display:none}.field-note{left:auto;right:23px;transform:none;font-size:8px}.location small{display:none}}
@media(max-width:650px){.app{min-height:620px}header{height:100px;flex-wrap:wrap;gap:0 12px;padding:9px 0}.brand{height:39px;min-width:130px}.brand b{font-size:22px}.brand svg{height:34px}.brand small{margin-top:1px}.resources{order:3;max-width:none;flex-basis:100%;margin-top:5px;justify-content:space-between}.resources>div{display:flex;align-items:center;gap:5px}.resources small{display:none}.resources b{font-size:14px}.resource-symbol{font-size:21px!important}.population{padding-left:8px;min-width:75px!important}.resources .resource-symbol.stone{font-size:25px!important}nav{gap:10px}.chapter{left:58px;top:19px}.chapter>small{font-size:6px;letter-spacing:1.1px}.chapter h1{font-size:27px;margin-top:5px}.chapter p{font-size:9px;letter-spacing:1px}.chapter>div{margin-top:10px;font-size:7px}.journal{display:none}.margin-line{left:43px}.camera-tools{left:8px}.atmosphere{left:56px;bottom:40px;font-size:8px;gap:6px}.location{left:56px;bottom:18px;font-size:9px}.field-note{right:10px;bottom:15px;font-size:7px;max-width:145px;overflow:hidden;text-overflow:ellipsis}.command-bar{height:184px;flex-wrap:wrap;gap:7px 12px;padding:10px 0;align-content:center}.unit-panel{min-width:210px;flex:1;gap:9px;height:64px}.portrait{width:55px;height:60px}.portrait canvas{width:55px;height:57px}.unit-description>small{font-size:6px}.unit-description h2{font-size:15px;margin:2px 0 4px}.unit-description p{font-size:8px;margin-bottom:5px}.unit-description>span{font-size:7px;margin-top:3px}.minimap-wrap{order:2;width:89px}.minimap-wrap>canvas{width:89px;height:64px}.minimap-wrap>div{display:none}.orders{order:3;flex-basis:100%;border:0;padding:0;min-width:0}.orders-heading{margin-bottom:7px;font-size:8px}.actions{min-height:45px;gap:7px}.action{width:42px;gap:3px}.action .action-icon{height:31px;width:37px;font-size:22px}.action>small{font-size:7px}.queue{margin-top:5px;height:10px}.queue-item{height:11px}.announcement{font-size:12px;top:140px;max-width:92%;letter-spacing:1px;white-space:normal;text-align:center}.toast{font-size:10px;max-width:95%;white-space:normal;text-align:center}.paper{padding:30px 23px}.paper h2{font-size:23px}.help-grid{gap:14px}.help-grid p{font-size:10px}footer{font-size:6px;height:27px;white-space:nowrap}footer kbd{font-size:6px}footer em{margin:0 3px}}
/* A notebook passed around at the back of a history classroom. */
:root{--paper:#f1eee3;--ink:#304c72;--rust:#956658}header .brand b{font-size:25px;letter-spacing:1px}.brand{min-width:206px}.brand small{letter-spacing:2px;font-size:7px}.app{background-color:var(--paper)}.chapter h1{font-weight:600;transform:rotate(-2deg);font-size:34px;letter-spacing:5px}.chapter{top:24px;opacity:.93}.chapter>small{font-size:7px;letter-spacing:1.9px}.chapter>div{margin-top:13px}.chapter button{pointer-events:auto;border:1px solid #8b9b985e;border-radius:2px;padding:4px 9px;margin-top:15px;background:#f1eee3d9;font-size:10px;transform:rotate(-1deg)}#modeStatus{font-size:8px;margin-left:10px;color:#8a978a}.pencil-note{position:absolute;right:40px;bottom:61px;color:#778a87;font:13px 'Noto Serif SC',serif;transform:rotate(-6deg);pointer-events:none;letter-spacing:2px;text-decoration:underline;text-decoration-style:wavy;text-decoration-color:#81939a40;text-underline-offset:6px}.mode-options{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:25px 0 3px}.mode-options>button{border:1px solid #92a18f;background:#e9ebdd66;padding:19px 14px;text-align:left;transform:rotate(-1deg)}.mode-options>button:nth-child(2){transform:rotate(1deg)}.mode-options>button:hover{background:#d9e0cd77;border-color:#607f77}.mode-options b{font:600 17px 'Noto Serif SC',serif}.mode-options p{font-size:11px;line-height:2;color:#82917f;min-height:90px}.mode-options small{font-size:9px;color:#ab8a5d}.journal{background:#f0ecdcd9}.command-bar{background:transparent}.book-seam{opacity:.65}
@media(max-width:1250px){.brand{min-width:183px}.brand b{font-size:23px}.resources{gap:11px}.chapter h1{font-size:29px}.chapter{max-width:330px}}
@media(max-width:900px){.brand{min-width:155px}.brand b{font-size:20px}.brand small{font-size:6px}.chapter h1{font-size:27px}.pencil-note{display:none}.resources{gap:6px}.population{min-width:70px!important}}
@media(max-width:650px){.brand{min-width:180px}.brand b{font-size:22px}.chapter h1{font-size:26px}.chapter{top:15px}.chapter button{font-size:8px;margin-top:9px;padding:3px 7px}#modeStatus{font-size:7px;margin-left:6px}.chapter>small{font-size:6px;letter-spacing:1px}.chapter>div{font-size:7px;margin-top:10px}.mode-options{grid-template-columns:1fr;gap:9px}.mode-options>button{padding:13px}.mode-options p{min-height:0;margin:7px 0;line-height:1.8}.mode-options b{font-size:16px}.mode-options small{font-size:8px}}
.chapter{padding:8px 14px 12px;left:81px;background:linear-gradient(90deg,#f1eee3f0,#f1eee3dc 73%,#f1eee300);border-radius:2px;min-width:350px}.chapter h1,.journal h2,.pencil-note{font-family:'KaiTi','STKaiti','Noto Serif SC',serif}.chapter h1{font-size:36px}.chapter p{font-family:'KaiTi','STKaiti','Noto Serif SC',serif;font-size:13px}.journal h2{font-size:21px;line-height:1.7}.pencil-note{font-size:16px}.mode-options button p{font-family:'Noto Serif SC',serif}
@media(max-width:900px){.chapter{min-width:290px;left:74px}.chapter h1{font-size:30px}.chapter p{font-size:11px}.journal h2{font-size:18px}}
@media(max-width:650px){.chapter{left:48px;min-width:280px;padding:5px 9px}.chapter h1{font-size:29px}.chapter p{font-size:11px}}
.journal h2{font-size:18px;letter-spacing:.4px}
@media(max-width:900px){.journal h2{font-size:15px}}
/* Era field guide and touch command surface. */
.app{min-height:0}body{overscroll-behavior:none;user-select:none;-webkit-user-select:none}.resources .copper{color:#a17451}header{gap:17px}.resources{max-width:570px;gap:14px}.resources>div{min-width:52px}.era{padding-left:12px}.era>span{margin-left:3px}#techBtn{font-size:21px}#techProgressLabel{font-size:9px;max-width:115px}.command-bar{height:202px;gap:20px}.orders{min-width:0;overflow:hidden;padding-top:4px;padding-bottom:4px}.orders-heading{margin-bottom:5px}.build-tabs{display:flex;gap:5px;margin-bottom:7px}.build-tabs button{border-bottom:1px solid #9caa9555;padding:5px 10px;font-size:10px}.build-tabs button.active{border-color:#537468;background:#829b7824}.actions{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-width:100%;padding:3px 0 5px;min-height:85px;scrollbar-width:thin;scrollbar-color:#99a68d transparent;touch-action:pan-x;gap:8px}.action{width:89px;gap:4px}.action>small{font-size:10px}.action .cost,.action:hover .cost{display:block;position:static;transform:none;background:none;white-space:normal;color:#7b826d;font-size:8px;line-height:1.4;padding:0 2px;min-height:22px;max-width:100%;text-wrap:balance}.queue{height:19px;margin-top:2px}.queue-item{height:19px;font-size:9px}.touch-bar{display:none}.tech-paper{width:min(870px,96vw);padding:28px 32px}.tech-paper>h3{font:600 18px 'KaiTi','Noto Serif SC',serif;margin:25px 0 14px}.tech-resources{border-top:1px dashed #9cab924f;border-bottom:1px dashed #9cab924f;padding:10px 0;color:#6d7c66;font-size:12px;line-height:1.8}.era-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.era-card{border-left:2px solid #b9bfa755;padding:7px 12px}.era-card.current{border-color:#a08457;background:#d7cca02a}.era-card small,.tech-card>small{font-size:9px;color:#89927c}.era-card h3,.tech-card h3{font:600 17px 'KaiTi','Noto Serif SC',serif;margin:8px 0}.era-card p{font-size:11px;line-height:1.8;margin:0;color:#7a8772}.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tech-card{display:flex;flex-direction:column;border:1px solid #a4af9588;padding:14px;background:#e3e6d438}.tech-card.learned{border-color:#7d9774;background:#c9d7b82a}.tech-card p{font-size:11px;line-height:1.8;min-height:40px;margin:0 0 8px;color:#748169}.tech-card>span{font-size:10px;line-height:1.5;color:#9a825b;margin-bottom:9px}.tech-card button{margin-top:auto;border:1px solid #879b77;padding:9px;background:#d3debe50;min-height:44px}.tech-card button:disabled{opacity:.55;cursor:default}.research-queue{margin:15px 0;font-size:11px;color:#839076}.research-queue button{display:block;text-align:left;width:100%;min-height:44px;border-bottom:1px dashed #95a18455}.landmark-list{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin:8px 0 20px}.landmark-list p{font-size:10px;line-height:1.8;color:#969b89}.landmark-list b{display:block;color:#7e8e77}.landmark-list .discovered{color:#6b805f}.close{min-width:44px;min-height:44px}.modal{touch-action:pan-y}.paper{overscroll-behavior:contain}.minimap-wrap canvas{touch-action:none;transform:none}
.touch-ui .touch-bar{display:flex;position:absolute;left:50%;bottom:51px;transform:translateX(-50%);gap:5px;background:#f1eee3ef;border:1px solid #abb69b;padding:4px;z-index:4;white-space:nowrap}.touch-bar button{min-height:44px;min-width:64px;padding:5px 9px;font-size:11px}.touch-bar button.active{background:#9bad8738;border-bottom:2px solid #729268}.touch-ui .camera-tools{left:8px;gap:2px}.touch-ui .camera-tools button{width:44px;height:44px;background:#f1eee3bd}.touch-ui .round,.touch-ui nav button{min-width:44px;min-height:44px}.touch-ui #modeBtn{min-height:44px}.touch-ui .build-tabs button{min-height:36px}.touch-ui .queue-item{min-height:28px}.touch-ui .command-bar{height:218px}.touch-ui .field-note{bottom:25px}.touch-ui .atmosphere{bottom:112px}.touch-ui .location{bottom:6px}.touch-ui .toast{bottom:122px}.touch-ui .page-number{display:none}.touch-ui .field-guide{display:none}.touch-ui .action .action-icon{min-height:44px;min-width:44px}.touch-ui .action{min-width:78px}.touch-ui .pencil-note{display:none}.touch-ui footer>span:first-child{font-size:0}.touch-ui footer>span:first-child:after{content:'单指拖图 · 双指缩放 · 点选族人后点目标下令';font-size:10px}.touch-ui footer>span:first-child *{display:none}
@media(max-width:1250px){#techProgressLabel{display:none}.era{display:none}.unit-panel{min-width:225px}.resources{gap:10px}.command-bar{gap:16px}.action{width:82px}.orders{min-width:0}.brand{min-width:180px}}
@media(max-width:900px){header{gap:10px}.brand{min-width:155px}.resources{gap:7px}.resources>div{min-width:38px}.resource-symbol{display:none}.resources>div{display:block}.population{min-width:63px!important}.command-bar{height:208px;gap:13px}.action{width:76px}.minimap-wrap{width:140px}.minimap-wrap>canvas{width:140px}.unit-panel{min-width:180px}.unit-description{min-width:105px}.portrait{display:none}.field-guide{display:none}.journal{display:none}.touch-ui .brand{min-width:140px}.touch-ui .brand svg{display:none}.touch-ui header{gap:7px}.touch-ui nav{gap:3px}.chapter{opacity:.8;min-width:270px}}
@media(max-width:650px){header{height:102px;margin:0 12px}.brand{min-width:150px}.resources{gap:6px;flex-basis:100%;margin-top:3px}.resources>div{display:grid;grid-template-columns:1fr;gap:0;min-width:0;text-align:center}.resources small{display:block;font-size:8px}.resources b{font-size:13px}.resources .resource-symbol{display:none}.population{min-width:61px!important;padding-left:5px}.command-bar,.touch-ui .command-bar{height:246px;margin:0 12px;padding:8px 0;gap:6px 10px}.unit-panel{min-width:170px;height:47px}.unit-description>small,.unit-description p{display:none}.unit-description h2{font-size:15px;margin:0 0 4px}.unit-description>span{margin-top:2px}.minimap-wrap{width:82px}.minimap-wrap>canvas{height:53px;width:82px}.orders{padding:0;flex-basis:100%;max-width:100%}.actions{min-height:88px}.action{width:80px}.action .action-icon{height:44px;width:44px}.action>small{font-size:9px}.action .cost{font-size:8px}.build-tabs{margin-bottom:3px}.build-tabs button{padding:4px 10px;min-height:30px}.queue{min-height:19px;margin-top:3px}.touch-ui .touch-bar{bottom:38px;width:max-content;max-width:calc(100% - 16px);gap:1px;padding:2px}.touch-bar button{min-width:60px;padding:4px 8px;font-size:10px}.touch-ui .field-note{bottom:16px;left:50%;right:auto;transform:translateX(-50%);max-width:95%;font-size:9px}.touch-ui .atmosphere{bottom:97px}.touch-ui .location{display:none}.touch-ui .camera-tools{top:40%}.chapter{left:50px;min-width:0;max-width:calc(100% - 55px)}.chapter>div{display:none}.chapter h1{font-size:24px}.chapter>small{font-size:5px}.chapter p{font-size:10px}footer{height:25px;margin:0 12px}.tech-paper{padding:23px 17px}.era-cards{grid-template-columns:1fr;gap:6px}.era-card:not(.current) p{display:none}.tech-grid{grid-template-columns:1fr 1fr;gap:8px}.tech-card{padding:10px}.tech-card h3{font-size:15px}.landmark-list{grid-template-columns:1fr}.tech-card p{min-height:60px}.touch-ui .brand{min-width:130px}.touch-ui nav{gap:2px}.touch-ui nav button{min-width:41px;padding:3px}}
@media(max-height:600px) and (min-width:651px){header{height:62px}.command-bar,.touch-ui .command-bar{height:169px}.orders-heading{margin-bottom:2px}.actions{min-height:76px}.action .cost{font-size:7px}.build-tabs{margin-bottom:0}.build-tabs button,.touch-ui .build-tabs button{min-height:25px;padding:3px 8px}.minimap-wrap>canvas{height:92px}.chapter{top:2px}.chapter h1,.chapter>small,.chapter p{display:none}.chapter button{margin:0}.touch-ui .touch-bar{bottom:12px;left:auto;right:12px;transform:none}.touch-ui .field-note,.atmosphere,.location{display:none}.touch-ui .camera-tools{top:8px;flex-direction:row}.touch-ui .camera-tools>span{display:none}.chapter{left:220px}.touch-ui .toast{bottom:69px}footer{height:20px}}
.touch-ui #techBtn::after{content:"科技";display:block;font-size:8px;line-height:10px}.touch-ui #techBtn{line-height:22px}

/* Full-screen RTS HUD: the map is the application surface.  Information is
   pinned to the edges like a classic strategy game instead of creating a
   document with a header, body and footer. */
.app{position:relative;display:block;width:100vw;height:100dvh;min-height:0;overflow:hidden}
header{position:absolute;top:0;left:0;right:0;width:auto;height:64px;margin:0;padding:8px 18px;border:0;display:flex;align-items:flex-start;gap:14px;background:linear-gradient(180deg,#eef0e5e8 0%,#eef0e500 100%);pointer-events:none;z-index:8}
header>*{pointer-events:auto}.brand{min-width:150px;height:45px;background:#eef0e5d9;border:1px solid #87988870;padding:5px 9px;gap:6px;box-shadow:2px 2px 0 #3d52621c}.brand svg{width:29px;height:33px}.brand b{font-size:18px;letter-spacing:1px}.brand small{font-size:6px;letter-spacing:1.8px}
.resources{flex:0 1 auto;max-width:none;gap:3px;padding:3px 7px;background:#eef0e5e8;border:1px solid #87988870;box-shadow:2px 2px 0 #3d52621c}.resources>div{min-width:67px;grid-template-columns:18px auto;column-gap:3px}.resources b{font-size:14px;line-height:16px}.resources small{font-size:8px}.resource-symbol{font-size:21px!important}
.era{margin-left:0;padding:5px 10px;border:1px solid #87988870;background:#eef0e5e8;box-shadow:2px 2px 0 #3d52621c;gap:7px}.era b{font-size:11px}.era small{font-size:7px;margin-top:2px}.era>span{font-size:22px;margin-left:4px}
nav{margin-left:auto;padding:2px 5px;gap:2px;background:#eef0e5dd;border:1px solid #87988870;box-shadow:2px 2px 0 #3d52621c}nav button{min-width:36px;min-height:36px;padding:4px;font-size:14px}.round{width:32px;height:32px;min-width:32px!important;min-height:32px!important}
main#field{position:absolute;inset:0;width:100%;height:100%;min-height:0;overflow:hidden;display:block;background:repeating-linear-gradient(0deg,transparent,transparent 29px,#8da0b326 29px,#8da0b326 30px)}
.chapter{top:77px;left:18px;min-width:0;width:270px;padding:7px 11px;background:#eef0e5b8;border-left:3px solid #879888;pointer-events:none}.chapter h1{font-size:23px;margin:1px 0 3px}.chapter p{font-size:10px}.chapter>small,.chapter>div{display:none}.chapter button{pointer-events:auto;margin-top:7px;font-size:9px}.journal{top:78px;right:18px;width:190px;padding:10px 13px;background:#eef0e5c9}.journal h2{font-size:15px;margin:4px 0 8px}.journal-body>p,.sketch-arrow{display:none}
.camera-tools{left:14px;top:50%;z-index:5}.camera-tools button{width:36px;height:36px;background:#eef0e5c9;border:1px solid #87988870}.atmosphere{left:18px;bottom:13px;background:#eef0e5bd;padding:3px 7px}.location{left:18px;bottom:48px;background:#eef0e5a8;padding:3px 7px}.field-note{bottom:47px;background:#eef0e5cf;border:1px solid #87988870}.pencil-note,.page-number{display:none}
.command-bar{position:absolute;left:14px;right:14px;bottom:12px;width:auto;height:142px;margin:0;padding:8px;display:block;border:0;background:linear-gradient(90deg,#eef0e5e8,#eef0e5c7 72%,#eef0e500);pointer-events:none;z-index:7}.command-bar>*{pointer-events:auto}.unit-panel{position:absolute;left:8px;bottom:8px;width:245px;min-width:0;height:112px;padding:7px;background:#eef0e5e8;border:1px solid #87988870;box-shadow:2px 2px 0 #3d52621c}.portrait{width:68px;height:88px}.portrait canvas{width:68px;height:80px}.unit-description{min-width:0}.unit-description h2{font-size:17px;margin:4px 0}.unit-description p{max-width:135px}.orders{position:absolute;left:264px;bottom:8px;width:min(640px,calc(100% - 520px));height:112px;min-width:300px;padding:8px 12px;background:#eef0e5e8;border:1px solid #87988870;box-shadow:2px 2px 0 #3d52621c}.orders-heading{margin-bottom:4px}.actions{min-height:68px}.action{width:78px}.field-guide{display:none}.minimap-wrap{position:absolute;right:8px;bottom:8px;width:210px;padding:5px;background:#eef0e5e8;border:1px solid #87988870;box-shadow:2px 2px 0 #3d52621c}.minimap-wrap>canvas{width:200px;height:118px}.minimap-wrap>div{margin-top:2px}footer{display:none}
.touch-ui .touch-bar{position:fixed;left:50%;right:auto;bottom:168px;transform:translateX(-50%);z-index:12;background:#eef0e5ed;box-shadow:2px 2px 0 #3d52621c}.touch-ui .field-note{bottom:164px}.touch-ui .toast{bottom:180px}.touch-ui .announcement{top:75px}
@media(max-width:900px){header{height:57px;padding:5px 7px;gap:5px}.brand{min-width:112px;width:112px;padding:4px 6px}.brand svg{display:none}.brand b{font-size:15px}.brand small{font-size:5px}.resources{gap:0;padding:3px}.resources>div{min-width:48px}.resources b{font-size:12px}.resources small{display:block;font-size:7px}.era{display:none}nav{gap:0;margin-left:auto}nav button{min-width:34px;min-height:34px}.chapter{top:67px;left:9px;width:220px}.journal{display:none}.command-bar{left:7px;right:7px;bottom:7px;height:154px;padding:4px}.unit-panel{left:4px;bottom:4px;width:210px;height:92px;padding:4px}.portrait{display:none}.unit-description h2{font-size:14px}.unit-description p{display:none}.orders{left:225px;bottom:4px;width:calc(100% - 445px);height:92px;min-width:245px;padding:5px 7px}.actions{min-height:56px;gap:5px}.action{width:69px}.action .action-icon{width:40px;height:40px;font-size:23px}.action .cost{font-size:7px;min-height:15px}.minimap-wrap{right:4px;bottom:4px;width:202px;height:92px}.minimap-wrap>canvas{width:190px;height:70px}.minimap-wrap>div{display:none}.touch-ui .touch-bar{bottom:162px}.touch-ui .field-note{bottom:158px}.touch-ui .camera-tools{top:auto;bottom:180px}.touch-ui .atmosphere,.touch-ui .location{display:none}}
@media(max-width:650px){header{height:48px;padding:3px 4px}.brand{width:86px;min-width:86px;height:36px}.brand b{font-size:12px}.brand small{font-size:4px}.resources{flex:1;width:auto;justify-content:space-between}.resources>div{min-width:30px}.resources b{font-size:10px}.resources small{display:none}nav button{min-width:32px!important;min-height:32px!important;padding:1px;font-size:13px}nav button span{display:none}.chapter{top:55px;left:5px;width:176px;padding:4px 7px}.chapter h1{font-size:18px}.chapter p{font-size:8px}.command-bar{left:4px;right:4px;bottom:4px;height:146px}.unit-panel{width:144px;height:84px}.unit-description h2{font-size:12px}.unit-description>small,.unit-description>span{font-size:7px}.health-track{width:100px}.orders{left:153px;right:4px;width:auto;min-width:0;height:84px;z-index:3}.orders-heading{font-size:7px}.build-tabs{overflow:hidden;white-space:nowrap}.build-tabs button{font-size:7px;padding:3px 5px}.actions{min-height:46px;gap:3px}.action{min-width:55px;width:55px}.action .action-icon{width:33px;height:33px;font-size:18px}.action>small{font-size:7px}.action .cost{display:none}.minimap-wrap{right:4px;top:2px;bottom:auto;width:125px;height:53px;z-index:2}.minimap-wrap>canvas{width:115px;height:45px}.touch-ui .touch-bar{bottom:151px;max-width:calc(100% - 8px);overflow:hidden}.touch-bar button{min-width:53px;font-size:9px}.touch-ui .field-note{bottom:147px}.touch-ui .camera-tools{bottom:165px;left:4px}.touch-ui .camera-tools button{width:34px;height:34px}}

/* The earlier touch sizing rules were written for the old stacked layout.
   Keep the compact command deck when the viewport is touch-enabled too. */
@media(max-width:900px){.touch-ui .command-bar{height:154px}.touch-ui .orders{height:92px}.touch-ui .unit-panel{height:92px}}
@media(max-width:650px){.touch-ui .command-bar{height:146px}.touch-ui .orders{height:84px}.touch-ui .unit-panel{height:84px}}
/* Final classic RTS cleanup */
.chapter,.journal,.pencil-note,.page-number,.location{display:none!important}
#modeStatus{display:none!important}
@media(max-width:650px){.action .cost{display:block;font-size:6px;line-height:1.1;min-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* Mobile RTS command deck: keep building names readable instead of reducing
   the action strip to icon-only buttons. */
@media(max-width:650px){
 .touch-ui .command-bar,.command-bar{left:4px;right:4px;bottom:4px;height:174px;padding:4px;background:linear-gradient(180deg,#eef0e5f2,#eef0e5db)}
 .touch-ui .unit-panel,.unit-panel{left:4px;top:4px;bottom:auto;width:138px;height:64px;padding:4px;background:#eef0e5f5}
 .touch-ui .orders,.orders{left:4px;right:4px;bottom:4px;width:auto!important;height:96px;min-width:0;padding:4px 6px;background:#eef0e5f7;z-index:4}
 .touch-ui .orders-heading,.orders-heading{font-size:8px;margin-bottom:3px}
 .touch-ui .build-tabs,.build-tabs{display:flex;gap:3px;margin-bottom:3px;overflow-x:auto}
 .touch-ui .build-tabs button,.build-tabs button{font-size:8px;padding:3px 7px;min-height:25px;white-space:nowrap}
 .touch-ui .actions,.actions{display:flex;flex-wrap:nowrap;gap:5px;min-height:59px;overflow-x:auto;overflow-y:hidden;padding:1px 0 3px}
 .touch-ui .action,.action{flex:0 0 72px;width:72px;min-width:72px;gap:2px}
 .touch-ui .action .action-icon,.action .action-icon{width:38px;height:35px;font-size:20px}
 .touch-ui .action>small,.action>small{display:block;font-size:8px;line-height:1.15;max-width:72px;white-space:normal;overflow:visible;text-overflow:clip;text-align:center;min-height:18px}
 .touch-ui .action .cost,.action .cost{display:block;position:static;transform:none;background:none;color:#7b826d;font-size:6px;line-height:1.1;padding:0;min-height:10px;max-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .touch-ui .queue,.queue{height:13px;margin-top:1px}
 .touch-ui .minimap-wrap,.minimap-wrap{right:4px;top:4px;bottom:auto;width:108px;height:53px;padding:2px;z-index:5}
 .touch-ui .minimap-wrap>canvas,.minimap-wrap>canvas{width:100px;height:43px}
 .touch-ui .minimap-wrap>div,.minimap-wrap>div{display:none}
 .touch-ui .unit-description h2,.unit-description h2{font-size:12px;margin:1px 0 3px}
 .touch-ui .unit-description>small,.unit-description>small{font-size:7px}
 .touch-ui .unit-description>span,.unit-description>span{font-size:7px}
 .touch-ui .field-note{bottom:183px}
 .touch-ui .touch-bar{bottom:183px}
}