/* Small contextual surfaces; the battlefield remains the primary view. */
#resumePanel{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:14px 18px;background:#e6f5ed;border:1px solid #a6c8b7;border-radius:18px;box-shadow:var(--shadow)}
#resumePanel b,#resumePanel small{display:block}#resumePanel small{margin-top:4px;color:#536e65;line-height:1.6}#resumePanel .big{flex:none}
#restartConfirm{z-index:45;align-items:center;justify-content:center;background:#eee3f2ed}
#renderError{z-index:60}
.restartSheet{max-width:440px;padding:24px;border-radius:24px}.restartSheet h2{margin:0;color:#547668;font-size:21px}.restartSheet p{line-height:1.9;color:var(--dim)}.restartSheet>div{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
#drawerClose{display:none}
#powerStat{cursor:pointer;min-height:32px}#powerStat:hover{box-shadow:inset 0 0 0 1px #a6c8b7}#powerStat.low .k{color:#835b28;font-weight:700}
#powerRules{scroll-margin-top:72px;background:#fff3de;border:1px solid #dec5a0;border-radius:16px;padding:12px 16px;margin:8px 0 16px;line-height:1.7;font-size:12px}#powerRules h3{margin:0;color:#805c32}#powerRules p{font-weight:600;margin:6px 0}#powerRules ul{padding-left:20px;margin:8px 0 0}#powerRules li{margin:6px 0}
#experienceRail{position:absolute;top:162px;left:12px;width:310px;max-width:calc(100% - 24px);z-index:8;border:1px solid #dcc9df;border-radius:16px;background:#fffdf7f5;box-shadow:var(--shadow)}
#openingGuide{display:flex;align-items:center;gap:7px;padding:10px}
#openingGuide>div{flex:1;min-width:0}#openingGuide b,#frontlineGo b{font-size:12px;display:block}#openingGuide small,#frontlineGo small{display:block;color:var(--dim);font-size:11px;line-height:1.5;margin-top:3px}
.guideBuddy{flex:none;width:44px;height:48px;align-self:center;background:#fff0dc;border:1px solid #ebccb7;border-radius:15px 15px 12px 12px;overflow:hidden}.guideBuddy svg{display:block;width:100%;height:100%}.guideEyebrow{display:block;color:#9b526f;font-size:10px;font-weight:700;letter-spacing:1px;margin-bottom:4px}#guideGo{flex:none;padding:9px 7px;font-size:11px;border-radius:10px;background:#e0f1e9;color:#3b695b;border:1px solid #a9c9b8}#guideDismiss{align-self:flex-start;padding:0;min-width:22px;min-height:26px;font-size:18px;color:var(--dim)}
#frontlineGo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;width:100%;text-align:left;border-radius:16px;background:#fff0d9}#frontlineGo>span:first-child{font-size:26px;color:#b67a48}#frontlineGo>span:nth-child(2){flex:1}#frontlineGo>span:last-child{font-size:22px}
.helpSheet{max-width:900px;padding:0 22px 18px}.helpHeader{position:sticky;top:-1px;background:#fffdf7;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 10px}.helpHeader h2{margin:0;font-size:19px}.helpHeader button{min-width:42px;min-height:42px;border-radius:12px;background:#f4eaf7;font-size:25px}
.quickHelp{margin:8px 0 18px;padding-left:26px;line-height:1.7}.quickHelp li{padding:7px 0}.quickHelp b{display:block;font-size:14px}.quickHelp span{color:var(--dim);font-size:12px}
.helpDetails summary{padding:14px 2px;font-weight:600;cursor:pointer;border-top:1px dashed var(--line2);color:#467b78}.helpDetails .helpGrid{padding-top:12px}.helpFoot{position:sticky;bottom:-1px;background:#fffdf7;padding:10px 0 0;margin-top:10px}.helpFoot .big{min-height:44px}
#topbar .tb{min-height:36px}#btnSidebar{font-size:18px}#btnPause,#btnHelp,#btnMenu{min-width:36px}
@media(max-width:1180px) and (min-width:961px){#topbar .brandText em,#vIncome,.stat.mob-hide{display:none}#topbar{gap:5px;padding:0 8px}#topbar .stat{padding:4px 7px}.pbar{width:35px}#topbar .tb{padding:5px 8px}}
@media(max-width:960px){
 #app{grid-template-rows:84px minmax(0,1fr)}
 #topbar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:30px 40px;gap:4px;padding:5px 8px;min-width:0}
 #topbar .brand,#topbar .spacer,#topbar .mob-hide,#topbar #btnSound,#topbar #btnAuto,#topbar .pbar,#vIncome{display:none}
 #topbar>.stat{margin:0;min-width:0;box-shadow:none;justify-content:center;gap:4px;padding:2px 4px;grid-row:1}
 #topbar>.stat:nth-child(2){grid-column:1/4}#topbar>.powerStat{display:flex;grid-column:4/6;min-height:30px}#topbar>.armyStat{display:flex;grid-column:6/8}
 #topbar .stat .v{font-size:12px}#topbar .stat .k{font-size:11px}
 #topbar .tb,#topbar #btnHome{display:block;grid-row:2;min-width:0;min-height:40px;padding:4px 0;font-size:13px;border-radius:12px}
 #topbar #btnSidebar{font-size:0}#topbar #btnSidebar:before{content:'建造';font-size:13px}
 #topbar #btnHome{font-size:11px}#topbar #btnHelp{font-size:16px}
 #experienceRail{top:96px;left:10px;width:330px;max-width:calc(100% - 20px)}#openingGuide{padding:8px;gap:6px}#guideGo{min-height:40px}#guideDismiss{min-width:28px;min-height:36px}
 #sidebar{max-height:45vh;max-height:45dvh;box-shadow:0 -4px 20px #8c659818}#sidebar .grid{max-height:22vh;flex:1 1 auto;min-height:70px}#sidebar .queue{min-height:0;max-height:9vh;flex:0 1 auto}#sidebar .sideFoot{display:none}
 #sidebar .tabs{flex:none;min-height:44px;align-items:stretch}#sidebar .tab{font-size:12px;padding:8px 3px;min-width:0}#drawerClose{display:block;min-width:40px;font-size:24px}#sidebar .autoProductionControl{padding:7px 10px;flex:none}#sidebar .autoProductionControl small{font-size:10px;line-height:1.5}#sidebar .qhead{flex:none;padding:6px 10px}
 #minimapWrap{top:96px}#alertBar{top:96px}#toasts{top:96px;max-width:calc(100% - 20px)}#toasts .toast:nth-last-child(n+3){display:none}
 #resumePanel{align-items:flex-start;flex-wrap:wrap;padding:12px}#resumePanel .big{width:100%;min-height:44px}#resumePanel small{font-size:11px}.helpSheet{padding:0 14px 12px}.helpHeader h2{font-size:17px}
}

/* A calm closing postcard; results and retry semantics remain unchanged. */
#over .overSheet{border:2px solid #ddbdc8;border-radius:26px;background:#fffaf0;box-shadow:0 7px 0 #d3adb955;padding:26px}
#over .overEyebrow{display:inline-block;background:#e4f1e2;border:1px solid #b8ceaf;color:#48694d;border-radius:20px;padding:6px 12px;font-size:12px;transform:rotate(-3deg);margin-bottom:14px}
#over #overTitle{letter-spacing:0;font-size:26px;margin:4px 0 12px}#over #overSub{line-height:1.85;color:#725b6e}
#over #overTitle.win{color:#4b7964}#over #overTitle.lose{color:#93637b}
#over .overStats{border-radius:16px;overflow:hidden}#over .overFoot button{min-height:44px;border-radius:14px}
@media(max-width:600px){#over .overSheet{padding:20px 16px}#over #overTitle{font-size:22px}}

/* Actual model portraits: the former inline 42x30 size hid faces and silhouettes. */
#sidebar .card{padding:6px 5px 8px;gap:4px;flex-shrink:0}
#sidebar .card canvas.cardPortrait{width:88px;height:70px;max-width:100%;object-fit:contain;border-radius:12px;background:radial-gradient(ellipse at 50% 72%,#f4e6db 0%,#fff6e9 58%,transparent 60%)}
#sidebar .card .cname{font-size:13px;line-height:1.35;font-weight:750}#sidebar .card .card-role{font-size:10px;line-height:1.4;color:#82566d;background:#fbe8ee;border-radius:10px;padding:2px 6px}
#sidebar .card .card-purpose{font-size:10px;line-height:1.45}#sidebar .card .ccost{font-size:11px}#sidebar .card.locked .card-role{background:#ece7ef}
@media(max-width:960px){#sidebar .card{padding:5px 3px 6px;gap:3px}#sidebar .card canvas.cardPortrait{width:70px;height:56px}#sidebar .card .cname{font-size:12px}#sidebar .card .card-role{font-size:9px;padding:1px 4px}#sidebar .card .card-purpose{font-size:9px}}

#sidebar .grid{grid-auto-rows:max-content;align-content:start;scrollbar-width:thin;scrollbar-color:#c4a7be transparent}

/* Milestones share the existing guide instead of adding another battlefield panel. */
#guidePortrait{width:48px;height:56px;flex:none;background:#fce9dd;border:1px solid #e5bec7;border-radius:15px;overflow:hidden}#guidePortrait canvas{width:100%;height:100%;object-fit:contain}
#guideProgress{display:block;font-size:10px;color:#47695d;font-weight:700;margin-bottom:3px}
.productionStateRow{display:flex;align-items:center;gap:8px;margin:6px 0 2px;min-height:36px}.productionStateRow b{flex:1;font-size:11px;line-height:1.5;color:#3f6258}.productionStateRow button{flex:none;min-height:36px;padding:5px 9px;border:1px solid #94b4a7;border-radius:10px;background:#fffdf5;color:#3d6657;font-size:11px;font-weight:700}
.autoProductionControl[data-state="missing"] .productionStateRow,.autoProductionControl[data-state="power"] .productionStateRow{padding:6px;background:#fff5e0;border-radius:10px}.autoProductionControl[data-state="power"] .productionStateRow b{color:#775326}
#sidebar .card.recommended{outline:2px solid #568e7b;outline-offset:-2px;background:#f0faec}#sidebar .card.locked{opacity:.72;filter:grayscale(.35)}
.companionActivity{display:flex;align-items:center;gap:10px;margin:6px 0}.companionActivity>span{flex:none;width:60px;height:52px;border-radius:12px;background:#faecdf}.companionActivity canvas{width:100%;height:100%;object-fit:contain}.companionActivity>b{font-size:12px;line-height:1.6;color:#47675a}
#overKeepsakes{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:12px 0}.keepsake{display:flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid #d2c5b1;background:#f5f3df;border-radius:12px}.keepsake b{font-size:11px;color:#52674f}
@media(max-width:960px){.productionStateRow{gap:5px;margin:4px 0 0}.productionStateRow button{font-size:11px;padding:4px 7px;min-height:36px}#sidebar .productionStateRow b{font-size:11px}.companionActivity>b{font-size:11px}}
@media(max-width:960px){#sidebar[data-production-page="true"][data-idle-queue="true"] .qhead,#sidebar[data-production-page="true"][data-idle-queue="true"] .queue{display:none}}
@media(max-width:960px){#sidebar[data-production-page="true"][data-idle-queue="false"]{max-height:54vh;max-height:54dvh}#sidebar[data-production-page="true"] .grid{min-height:138px}}
#journeyStrip{display:flex;gap:5px;padding:0 10px 8px;font-size:10px;color:#776875}#journeyStrip span{flex:1;text-align:center;white-space:nowrap;border:1px dashed #d7c5cb;border-radius:9px;padding:4px 1px}#journeyStrip .done{color:#426456;background:#e5f1df;border:1px solid #b7cda9}
.localSaveHelp{padding:12px;border:1px solid #b7cdbb;border-radius:14px;background:#edf6e8;line-height:1.6}.localSaveHelp b,.localSaveHelp span{display:block;font-size:12px}.localSaveHelp span{color:#596c60;margin-top:4px}.localSaveHelp button{margin-top:8px;min-height:40px}
.productionBudget{color:#665341!important;font-weight:650}.productionDetails summary{font-size:11px;color:#536c61;cursor:pointer;padding:5px 0}.productionDetails small{margin:0 0 5px}.productionDetails[open]{max-height:100px;overflow:auto}
.productionOverview{margin:0 0 8px;padding:8px;border:1px solid #b6cfbd;border-radius:12px;background:#fffdf3;color:#456b58}.productionOverview>div{display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;font-size:12px}.productionOverview p{margin:5px 0 0;font-size:11px;font-weight:650;line-height:1.5}.productionOverview small.productionTimeBasis{font-size:10px;color:#6b6873}#sidebar .card .card-time{display:block;padding:3px 5px;border-radius:7px;background:#e5f1e5;color:#46634d;font-size:11px;font-weight:700;line-height:1.4}
@media(max-width:960px){#sidebar[data-production-page="true"]{max-height:54vh;max-height:54dvh}.productionOverview{margin-bottom:6px;padding:6px 8px}.productionOverview>div{font-size:12px}#sidebar[data-production-page="true"] .autoProductionControl{max-height:31vh;max-height:31dvh;overflow-y:auto}}
@media(max-width:960px){#sidebar .autoProductionControl small.productionBudget{font-size:11px;line-height:1.5}.productionDetails summary{min-height:28px;padding:4px 0}.productionDetails[open]{max-height:80px}#journeyStrip{padding:0 8px 7px;font-size:9px}}

#guideRest{min-height:40px;padding:6px 9px;border:1px solid #b9c8a3;border-radius:12px;background:#e7f1d8;color:#536850;font-weight:700;white-space:nowrap}

/* Tactical stickers use relation colours, independent of pastel faction paint. */
#minimapWrap{--mini-size:190px;width:calc(var(--mini-size) + 14px);max-width:calc(100vw - 20px)}
#minimapWrap.expanded{--mini-size:260px}
#minimap{width:var(--mini-size);height:var(--mini-size);max-width:none}
.mmHead{align-items:center;padding:0 1px 3px;gap:5px;font-size:11px;color:#584866}
#miniSize{padding:3px 7px;min-height:28px;border:1px solid #cfbcd6;border-radius:9px;background:#f4ecf8;color:#66516e;font-size:10px}
.miniMeta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 5px;font-size:9px;color:#66516e;margin:1px 1px 5px}
.miniLegend{display:flex;justify-content:center;gap:14px;padding:6px 0 4px;font-size:10px;color:#584866}
.miniLegend span:before{content:'';display:inline-block;width:7px;height:7px;margin-right:5px;box-shadow:0 0 0 1px #473a58;border:1px solid #fffdf5;vertical-align:0}
.miniLegend .mine:before{background:#207b78;border-radius:50%}.miniLegend .foe:before{background:#c43e65;transform:rotate(45deg)}.miniLegend .facility:before{background:#fffdf5;border:2px solid #473a58}
#miniAlert{display:block;width:100%;min-height:30px;padding:4px 3px;background:#f6edf6;color:#76506c;border:1px solid #debed3;border-radius:9px;font-size:10px}
#miniAlert:disabled{background:transparent;color:#73647c;border-color:transparent;cursor:default;opacity:1}
#miniAlert.threat{background:#ffe1e6;color:#9a3153;border-color:#d98aa4;font-weight:700}
.miniDesktopHint,.miniTouchHint{display:block;margin-top:4px;text-align:center;font-size:9px;color:#73647c}.miniTouchHint{display:none}
#over .overSheet{max-width:760px}
#honorsBoard{margin-top:24px;text-align:left;border-top:1px dashed #ddbdc8;padding-top:18px}
.honorsHeading{display:flex;justify-content:space-between;align-items:center;gap:12px}.honorsHeading small{color:#916277;font-size:11px}.honorsHeading h3{margin:3px 0;color:#65485f;font-size:21px}.honorsHeading>span{font-size:11px;color:#73647c}
#honorsNote{font-size:11px;line-height:1.7;color:#73647c;margin:8px 0 12px}
.honorsTabs{display:flex;gap:7px}.honorsTabs button{flex:1;min-height:40px;padding:7px;border-radius:12px;border:1px solid #dbc6db;background:#f7eff8;color:#74576d}.honorsTabs button[aria-pressed="true"]{background:#dff1e8;border-color:#8bb7a6;color:#35695c;font-weight:700}
.honorsSort{display:flex;align-items:center;gap:10px;font-size:11px;color:#74576d;margin:13px 0}.honorsSort select{min-height:36px;flex:1;padding:7px;border:1px solid #ddc8d8;border-radius:10px;background:#fffdf7;color:#65485f}
.honorCard{border:1px solid #e3ccdb;background:#fffdf7;border-radius:14px;margin:7px 0;overflow:hidden}.honorCard summary{display:flex;align-items:center;gap:9px;padding:10px;cursor:pointer;list-style:none}.honorCard summary::-webkit-details-marker{display:none}.honorCard summary:after{content:'⌄';color:#98728a}.honorCard[open] summary:after{transform:rotate(180deg)}
.honorRank{display:grid;place-items:center;width:24px;height:28px;flex:none;background:#f8dfb5;color:#88602d;border-radius:9px;font-size:12px}.honorCard summary canvas{width:58px!important;height:46px!important;object-fit:contain;flex:none}.honorName{flex:1;min-width:0}.honorName b{display:block;font-size:13px;color:#65485f}.honorName small{display:block;font-size:10px;color:#836b7e;margin-top:5px}.honorScore{flex:none;text-align:right}.honorScore b{display:block;color:#396f63;font-size:15px}.honorScore small{display:block;color:#836b7e;font-size:10px;margin-top:3px}
.honorStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px;border-top:1px dashed #e3ccdb;background:#faf4f7}.honorStats small,.honorStats b{display:block}.honorStats small{font-size:10px;color:#836b7e}.honorStats b{font-size:12px;color:#65485f;margin-top:3px;overflow-wrap:anywhere}
.honorsPages{display:flex;align-items:center;justify-content:space-between;gap:7px;margin:12px 0}.honorsPages button{min-height:38px;border:1px solid #dbc6db;border-radius:10px;background:#f6edf8;color:#74576d;padding:6px 10px}.honorsPages span,.honorsEmpty{font-size:11px;color:#836b7e}.honorsEmpty{padding:18px 8px;line-height:1.8;text-align:center}
@media(max-width:600px){.honorCard summary{gap:6px;padding:8px}.honorCard summary canvas{width:42px!important;height:38px!important}.honorRank{width:21px}.honorName b{font-size:11px}.honorName small{font-size:9px}.honorScore b{font-size:12px}.honorStats{grid-template-columns:repeat(2,minmax(0,1fr))}.honorsHeading{align-items:flex-start;flex-direction:column;gap:2px}}
@media(max-width:960px){
 #minimapWrap{--mini-size:180px;padding:6px}
 #minimapWrap.expanded{--mini-size:min(246px,calc(100vw - 36px))}
 #miniSize{min-height:34px;min-width:44px}#miniAlert{min-height:36px}
 .miniDesktopHint{display:none}.miniTouchHint{display:block}
}
#phBenefit{font-size:11px;color:#796477;line-height:1.6}

/* Soft workshop meters. Widths come from actual progress; no CSS timer or easing. */
.qitem{box-shadow:none;padding:8px 9px;border-color:#e1ccdd;background:#fff9f4}
.qitem .qh{padding-right:28px;font-weight:650;align-items:center}.qitem .num{color:#94718d}
.qitem .qsrc{color:#826a81;font-size:10px;margin-top:3px;line-height:1.5}
.qitem .qb{height:9px;margin-top:6px;border-radius:999px;background:#eee4ed}
.qitem .qb i{position:relative;border-radius:999px;background:linear-gradient(90deg,#efb3c5,#f3c6ba);transition:none}
.qitem .qb i::after{content:'♥';position:absolute;right:3px;top:-1px;font:9px sans-serif;color:#fffaf2}
.qitem[data-state="queued"]{background:#faf6fc}.qitem[data-state="queued"] .qb i{background:#c7badb}
.qitem[data-state="paused"] .qb i,.qitem[data-state="low"] .qb i,.qitem[data-state="blocked"] .qb i{background:#e3c58f}
.qitem[data-state="ready"] .qb i{background:#a9cfbc}.qitem[data-state="ready"] .qsrc{color:#56836e}
.qitem .qsrc{font-size:11px;line-height:1.5}.qitem[data-state="working"] .qsrc{color:#476e58}.qitem[data-state="low"] .qsrc,.qitem[data-state="blocked"] .qsrc{color:#86612f}
.qitem .qx{width:26px;height:26px;border-radius:9px;background:#f4e8f1;color:#98708f;display:grid;place-items:center;top:4px;right:4px}
@media(max-width:960px){.qitem .qx{width:34px;height:34px}.qitem .qh{padding-right:36px}}

.qitem.blocked{border-color:#d9c3a4}

.qitem .qb i{overflow:hidden}.qitem .qb i::after{top:0;font-size:8px}
@media(max-width:960px){#sidebar[data-production-page="true"][data-idle-queue="false"] .queue{max-height:14vh;max-height:14dvh;min-height:116px}#sidebar[data-production-page="true"][data-idle-queue="false"] .autoProductionControl{flex:0 1 auto;min-height:100px}.qline{padding:5px}.qline-note{margin:3px 0 5px;font-size:9px}}

/* Keep capacity visible while the secondary controls scroll independently. */
@media(max-width:960px){#sidebar[data-production-page="true"] .withOverview{display:flex;flex-direction:column;overflow:clip}.withOverview .productionOverview{flex:none;padding:5px 8px;margin-bottom:4px}.withOverview .productionOverview p{margin:2px 0 0;font-size:10px}.withOverview .productionOverview small{margin-top:2px;line-height:1.3}.withOverview .productionTimeBasis{font-size:9px}.withOverview .productionOptions{flex:1 1 auto;min-height:36px;overflow-y:auto;scrollbar-width:thin}}

@media(max-width:960px){#sidebar[data-production-page="true"][data-idle-queue="false"] .withOverview{min-height:140px}#sidebar[data-production-page="true"][data-idle-queue="false"] .grid{min-height:120px}}
@media(max-width:960px) and (max-height:740px){#sidebar[data-production-page="true"]{max-height:64vh;max-height:64dvh}#sidebar[data-production-page="true"][data-idle-queue="false"] .grid{min-height:100px}#sidebar[data-production-page="true"][data-idle-queue="false"] .queue{min-height:96px}}