:root{--bg:#162326;--panel:#1c2c2e;--line:#ffffff14;--text:#e9eddf;--muted:#92a4a2;--accent:#eac087;--red:#e48564;--mint:#b5d2be;--shadow:0 10px 35px #10201e2b}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font:13px -apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer;border:0;background:transparent;transition:background .16s,border-color .16s,transform .16s}button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:hover{filter:brightness(1.08)}button:active{transform:translateY(1px)}header{height:76px;display:flex;align-items:center;padding:0 26px;gap:34px;background:#18282a;border-bottom:1px solid #bbcfb91c;box-shadow:0 2px 12px #16232220;position:relative;z-index:2}.brand{display:flex;gap:12px;align-items:center;min-width:235px}.brand-mark{display:flex;align-items:center;justify-content:center;width:38px;height:42px;color:var(--red)}.brand-mark svg{width:36px;height:36px}.brand b{font-size:21px;letter-spacing:5px;font-weight:650}.brand small{display:block;font:9px ui-monospace,monospace;letter-spacing:2px;color:#a0ae9f;margin-top:6px}.operation{display:flex;gap:11px;align-items:center;color:#c7d3c6;font-size:11px;white-space:nowrap}.operation em{font:9px ui-monospace,monospace;margin-left:9px;color:#889e9c;font-style:normal}.live{display:inline-block;width:5px;height:5px;background:#b4d4a9;border-radius:50%;box-shadow:0 0 8px #b5d69e30}.divider{height:17px;width:1px;background:#ffffff1c;margin:0 7px}#clock{font:13px ui-monospace,monospace;letter-spacing:1px;color:#d8decd}.resources{display:flex;margin-left:auto;gap:30px}.resources>span{display:grid;grid-template-columns:24px auto;column-gap:8px;align-items:center}.resources i{color:#e4bc83;font-size:24px;font-style:normal;grid-row:span 2;font-family:serif}.resources b{font:19px ui-monospace,monospace;letter-spacing:-.5px;white-space:nowrap;color:#eee8d2}.resources small{font-size:9px;letter-spacing:2px;color:#91a5a1;margin-top:3px}.header-actions{display:flex;gap:6px}.header-actions button{border:1px solid #ffffff18;border-radius:6px;height:32px;min-width:32px;color:#b8c6bc;font-size:13px;background:#ffffff04}.header-actions button:hover{background:#ffffff0f}.header-actions #sound{font:9px ui-monospace;padding:0 9px}main{display:grid;grid-template-columns:minmax(0,1fr) 304px;height:calc(100% - 76px)}.battlefield{position:relative;overflow:hidden;background:#8fa47e;isolation:isolate}.battlefield:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;box-shadow:inset 0 0 90px #112c2a2b}#game{width:100%;height:100%;display:block;touch-action:none;user-select:none}.mission-tag{position:absolute;left:24px;top:22px;pointer-events:none;background:linear-gradient(115deg,#192c2ce8,#192c2caa);padding:15px 24px 14px 17px;border:1px solid #d5dfc62e;border-radius:8px;box-shadow:var(--shadow);backdrop-filter:blur(14px);z-index:1}.mission-tag:before{content:'';position:absolute;left:-1px;top:17px;bottom:17px;width:3px;background:var(--accent);border-radius:2px}.mission-tag>span{display:block;font:9px ui-monospace,monospace;letter-spacing:2px;color:var(--accent);margin-bottom:9px}.mission-tag>b{display:block;font-size:15px;font-weight:550;letter-spacing:.7px}.mission-tag small{display:block;color:#b2c1ad;font-size:10px;margin-top:8px}.map-label{position:absolute;bottom:120px;left:26px;pointer-events:none;font-size:9px;color:#ecedd7;letter-spacing:1.5px;text-shadow:0 1px 6px #24392b}.map-label span{margin-left:12px;opacity:.65;font:9px ui-monospace}.bottom-bar{position:absolute;bottom:25px;left:24px;right:24px;background:#1d3030ef;border:1px solid #d3d8ba35;border-radius:10px;display:flex;align-items:center;justify-content:space-between;min-height:80px;padding:8px 12px 8px 9px;box-shadow:var(--shadow);backdrop-filter:blur(14px);z-index:1}.selection{display:flex;align-items:center;gap:13px}.selection b{font-size:13px;font-weight:550;letter-spacing:.6px}.selection small{display:block;color:#a3b5a8;font-size:10px;margin-top:9px}#portrait{background:radial-gradient(ellipse at 50% 35%,#53675b,#2a403a);border:1px solid #ced8b92b;border-radius:6px;width:60px;height:60px}.command-actions{display:flex;gap:3px;height:54px}.command-actions button{padding:0 13px;min-width:61px;border-radius:5px;color:#c7d5c4}.command-actions button:hover{background:#ffffff0a}.command-actions button>span{display:block;font-size:23px;line-height:29px}.command-actions small{font-size:9px;color:#b0c0ad}kbd{font:9px ui-monospace,monospace;border:1px solid #bac9ad3b;border-radius:3px;padding:1px 3px;margin-left:4px;color:#c5d2b9}.view-controls{position:absolute;right:24px;bottom:121px;display:flex;gap:8px;z-index:1}.pan-button,.zoom{background:#213736e8;border:1px solid #ced8bb40;border-radius:6px;box-shadow:0 3px 12px #1a2d2520}.pan-button{display:flex;align-items:center;gap:7px;padding:0 12px;height:33px;color:#dbe3c9;font-size:10px}.pan-button svg{width:15px;height:15px}.pan-button.active{background:#d8b886;color:#243632;border-color:#efd4a8}.pan-button.active kbd{color:#243632;border-color:#273a3140}.zoom{display:flex;align-items:center}.zoom button{width:28px;height:31px;font-size:17px}.zoom span{font:10px ui-monospace;min-width:37px;text-align:center;color:#d6ddc6}.keyhint{position:absolute;left:27px;bottom:6px;font-size:9px;color:#dbe4ca;text-shadow:0 1px 4px #243e2d}.keyhint span{margin:0 8px}aside{background:linear-gradient(160deg,#203332,#182829);border-left:1px solid #c6d6c21c;display:flex;flex-direction:column;padding:0 16px;overflow:auto;scrollbar-width:thin;scrollbar-color:#5c7365 transparent;position:relative;z-index:2}.sidebar-title{display:flex;justify-content:space-between;align-items:center;padding:18px 1px 14px;font-size:11px;letter-spacing:2px}.sidebar-title small{font-size:9px;letter-spacing:0;color:#9db6a2}.sidebar-title i{margin-right:5px}.minimap-wrap{position:relative;border:1px solid #96aa8a40;padding:5px;background:#122725;border-radius:8px;box-shadow:inset 0 2px 8px #11232350}#minimap{display:block;width:100%;height:143px;cursor:crosshair;border-radius:3px;touch-action:none}.minimap-caption{display:block;font-size:9px;color:#a7b99c;padding:8px 5px 4px;letter-spacing:1.5px}.minimap-caption span{float:right;color:var(--accent);font:10px ui-monospace}.faction{display:flex;align-items:center;gap:11px;padding:17px 2px 12px}.faction-emblem{width:31px;height:35px;display:flex;justify-content:center;align-items:center;color:#c7d3b3;font-size:29px}.faction b{font-size:12px;letter-spacing:1px;font-weight:550}.faction small{font:8px ui-monospace;display:block;letter-spacing:1px;margin-top:6px;color:#9aac99}.faction>span{margin-left:auto;color:#647f75;font:25px ui-monospace}nav{display:flex;border:1px solid #8eaa9230;border-radius:6px;background:#10232160;padding:3px;margin:3px 0 12px;gap:3px}nav button{flex:1;padding:9px 0;color:#97aea1;font-size:11px;border-radius:4px}nav .active{color:#efd8b2;background:#41534a;box-shadow:0 1px 5px #10221c30}.catalog{display:grid;grid-template-columns:1fr 1fr;gap:9px}.card{position:relative;background:linear-gradient(145deg,#e0e1cf,#c5ccb4);border:1px solid #f4f1db33;border-radius:7px;text-align:left;padding:0 10px 10px;overflow:hidden;min-height:113px;box-shadow:0 3px 9px #0a1e1b1f;color:#273e35}.card:before{content:'';position:absolute;inset:0;background:linear-gradient(165deg,#ffffed42,transparent 50%);pointer-events:none}.card:hover{border-color:#f3cf91;transform:translateY(-2px);box-shadow:0 5px 14px #091c1838;background:linear-gradient(145deg,#e9e7d3,#d3d8c0)}.card.unavailable{opacity:.47;filter:saturate(.4)}.card canvas{display:block;width:100%;height:71px;object-fit:contain;position:relative;z-index:1}.card b{display:block;font-size:11px;font-weight:600;letter-spacing:.2px;position:relative}.card small{display:flex;justify-content:space-between;margin-top:6px;color:#405c47;font:11px ui-monospace;position:relative}.card small span{color:#637362;font-size:9px}.card .card-index{position:absolute;top:7px;left:8px;color:#7d8a71;font:9px ui-monospace}.queue-head{display:flex;justify-content:space-between;margin:17px 1px 9px;font-size:10px;letter-spacing:1px}.queue-head small{color:#96ad9b;font:10px ui-monospace}.queue{display:flex;min-height:39px;gap:5px;flex-wrap:wrap}.queue-empty{font-size:10px;border:1px dashed #93a98e35;border-radius:5px;width:100%;display:flex;align-items:center;justify-content:center;color:#779282;background:#11272233}.queue-item{position:relative;background:#405746;border:1px solid #a1b2883b;border-radius:4px;padding:10px 7px;font-size:9px;min-width:55px;overflow:hidden}.queue-item i{position:absolute;left:0;bottom:0;height:3px;background:var(--accent)}.intel{border-top:1px solid var(--line);margin-top:17px;padding:14px 2px 5px}.intel>span{font-size:9px;color:#cdbb90;letter-spacing:2px}.intel p{font-size:10px;line-height:1.9;color:#99af9e;margin:8px 0}.sidebar-footer{margin-top:auto;border-top:1px solid var(--line);padding:13px 1px;font-size:8px;color:#839e90;display:flex;align-items:center;gap:7px;white-space:nowrap}.sidebar-footer>span:last-child{margin-left:auto;font:9px ui-monospace}#toast{position:absolute;left:50%;top:24px;transform:translateX(-50%);background:#243a33f5;border:1px solid #d1c09788;border-radius:7px;color:#f1dfb8;padding:12px 20px;pointer-events:none;opacity:0;transition:opacity .2s;font-size:11px;max-width:90%;white-space:nowrap;box-shadow:var(--shadow);z-index:3}#toast.show{opacity:1}#mode{position:absolute;top:137px;left:24px;font-size:11px;color:#f8dea4;background:#223a32ed;padding:10px 14px;border:1px solid #d7bd8880;border-radius:6px;display:none;pointer-events:none;z-index:1}.modal-backdrop{position:fixed;inset:0;background:#142a2480;backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;z-index:10}.hidden{display:none!important}.briefing{width:570px;text-align:center;background:radial-gradient(ellipse at 50% 5%,#3a5145,#203533 65%);padding:34px 48px;border:1px solid #dbd9b247;border-radius:14px;box-shadow:0 28px 100px #0a1e1960;position:relative;overflow:hidden}.briefing:before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent 56px,#b8ccab05 56px,#b8ccab05 57px)}.eyebrow{font:9px ui-monospace;letter-spacing:3px;color:var(--accent)}.briefing-icon{height:122px;margin:16px auto 0;position:relative;background:radial-gradient(ellipse at 50% 65%,#d5cca91c,transparent 67%)}.briefing-icon img{position:absolute;width:218px;height:218px;object-fit:contain;left:50%;top:-51px;transform:translateX(-50%);filter:drop-shadow(8px 14px 8px #091f1744)}.briefing h1{font-size:46px;letter-spacing:11px;margin:3px 0 0;font-weight:850;padding-left:11px;color:#f1ead1}.subtitle{font:12px ui-monospace!important;letter-spacing:7px;color:#b3c2a5!important;margin:11px 0 21px!important}.brief-line{height:1px;background:linear-gradient(90deg,transparent,#bfd0a63b,transparent);margin:22px 0}.briefing h2{font-size:14px;font-weight:550;letter-spacing:.3px}.briefing p,.dialog p{font-size:12px;color:#b4c4af;line-height:1.9}.brief-controls{display:flex;justify-content:space-around;gap:9px;margin:24px 0}.brief-controls span{font-size:10px;color:#97ad97}.brief-controls b{display:block;color:#dfe6cf;font-size:11px;margin-bottom:8px;font-weight:550}.primary{width:100%;padding:15px 20px;background:linear-gradient(120deg,#edca98,#dca86f);color:#273b30;border:1px solid #f3d6ab;border-radius:6px;font-weight:650;text-align:left;font-size:13px;box-shadow:0 3px 10px #14251e20}.primary span{float:right;font-size:17px;line-height:16px}.brief-note{display:block;font-size:9px;color:#829b87;margin-top:16px}.dialog{padding:34px;width:430px;background:linear-gradient(145deg,#2b433a,#1d3230);border:1px solid #cbd4ac44;border-radius:12px;box-shadow:0 30px 100px #06191170}.dialog h2{font-size:25px;margin:20px 0 8px;font-weight:600}.dialog p{margin:16px 0 24px}.secondary{width:100%;margin-top:10px;border:1px solid #9db38e44;border-radius:6px;padding:12px;color:#c6d3b8}.help-dialog{width:590px;max-height:94vh;overflow:auto}.help-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:12px;font-size:11px;margin:24px 0}.help-grid b{font-weight:550;color:#dedcc1}.help-grid span{color:#a9bfa8}
@media(min-height:930px){#minimap{height:165px}.card{min-height:128px}.card canvas{height:86px}.intel{padding-bottom:16px}.faction{padding-top:21px;padding-bottom:18px}}@media(max-height:800px){.sidebar-title{padding-top:12px;padding-bottom:10px}#minimap{height:117px}.faction{padding:12px 2px 9px}.card{min-height:99px}.card canvas{height:58px}.intel{display:none}.queue-head{margin-top:12px}.sidebar-footer{padding:11px 1px}.briefing{padding:25px 42px}.briefing-icon{height:97px}.briefing h1{font-size:39px}.brief-controls{margin:18px 0}}
@media(max-width:1150px){header{gap:14px;padding:0 18px}.operation{display:none}.resources{gap:22px}main{grid-template-columns:minmax(0,1fr) 270px}.brand{min-width:213px}.command-actions button{padding:0 8px;min-width:49px}.selection small{max-width:210px}aside{padding:0 12px}.card{min-height:104px}.card canvas{height:65px}.bottom-bar{left:18px;right:18px}.mission-tag{left:18px}.view-controls{right:18px}}@media(max-width:760px){header{height:62px;padding:0 12px}.brand{min-width:0;gap:8px}.brand b{font-size:15px;letter-spacing:2px}.brand small{font-size:6px;letter-spacing:1px}.brand-mark{width:26px}.brand-mark svg{width:26px}.resources{gap:10px}.resources>span{grid-template-columns:14px auto;column-gap:4px}.resources b{font-size:13px}.resources small{display:none}.resources i{font-size:17px}.header-actions #sound{display:none}.header-actions button{min-width:26px;height:28px}main{height:calc(100% - 62px);grid-template-columns:minmax(0,1fr) 206px}.mission-tag{left:12px;top:12px;padding:11px}.mission-tag b{font-size:11px}.mission-tag small{display:none}.bottom-bar{left:10px;right:10px;bottom:25px;padding:6px;min-height:70px}.command-actions{display:none}.selection{gap:8px}.selection small{font-size:9px}.selection b{font-size:11px}#portrait{width:48px;height:48px}.briefing{width:min(94vw,550px);padding:25px}.briefing h1{font-size:36px}.keyhint{font-size:8px;left:10px;max-width:90%;overflow:hidden;white-space:nowrap}.card{padding:0 6px 8px;min-height:93px}.card canvas{height:56px}.card b{font-size:10px}.faction small{font-size:6px}.faction>span{display:none}.view-controls{right:10px;bottom:107px;gap:5px}.pan-button{padding:0 9px}.pan-button kbd{display:none}.map-label{display:none}.help-dialog{width:94vw}.help-grid{font-size:10px}}
/* Campaign setup and tactical systems */
.campaign-briefing{width:min(960px,94vw);max-height:94vh;overflow:auto;text-align:left;padding:32px 38px;background:radial-gradient(ellipse at 5% 0%,#3b5142,#1b302d 70%)}.campaign-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.campaign-heading h1{font-size:32px;letter-spacing:4px;margin:15px 0 6px;padding:0}.campaign-heading p{margin:0;color:#aabdac}.campaign-version{font:54px ui-monospace;color:#d8bc87;opacity:.7}.campaign-version span{display:block;font:9px sans-serif;letter-spacing:4px;text-align:center;margin-top:4px}.battle-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}.battle-card{text-align:left;padding:0 0 16px;border:1px solid #adc2a52b;border-radius:8px;overflow:hidden;background:#10282280;position:relative}.battle-card.active{border-color:#eccb94;box-shadow:0 0 0 1px #eccb9460;background:#31473a}.battle-card.active:after{content:'已选择';position:absolute;top:12px;right:12px;background:#e8c48c;color:#23382f;padding:5px 8px;border-radius:3px;font-size:10px}.battle-card canvas{display:block;width:100%;height:auto;border-bottom:1px solid #adc2a51a}.battle-card>span{display:block;font:8px ui-monospace;letter-spacing:1.5px;color:#9fb0a1;margin:14px 16px 8px}.battle-card>b{display:block;font-size:20px;letter-spacing:3px;margin:0 16px 7px}.battle-card>small{color:#aabead;font-size:10px;margin:0 16px}.battle-description{min-height:42px;margin:16px 0!important;padding:0 2px}.setup-options{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid #bfd0a626;padding-top:18px}.setup-options label{font-size:10px;letter-spacing:2px;color:#b8cbb7}.setup-options select{display:block;width:100%;padding:12px;margin-top:9px;background:#172d27;border:1px solid #9db38e44;border-radius:5px;color:#e7e7d2;font:12px sans-serif}.mode-description{margin:10px 0 18px!important;font-size:11px!important;color:#d2bc96!important}.campaign-actions{display:flex;gap:12px}.campaign-actions .secondary{margin:0;width:40%}.campaign-actions .primary{flex:1}.campaign-briefing .brief-note{text-align:center;line-height:1.6}.strategy-panel{border-top:1px solid #ffffff14;margin-top:12px;padding-top:12px}.strategy-panel summary{cursor:pointer;color:#d0d5bd;font-size:10px;letter-spacing:1px;margin-bottom:9px}.support-grid,.upgrade-grid{display:grid;gap:5px;margin-bottom:6px}.support-grid{grid-template-columns:1fr 1fr}.upgrade-grid{grid-template-columns:repeat(3,1fr)}.strategy-panel button{border:1px solid #aab89930;border-radius:4px;padding:9px 3px;background:#ffffff05;font-size:9px;color:#e4d3ac;white-space:nowrap}.strategy-panel button:disabled{opacity:.45;cursor:default}.strategy-panel>small{font-size:8px;color:#94aa98;line-height:1.6}.map-label b{font-weight:400}.map-label span{white-space:nowrap}#mission-title{font-variant-numeric:tabular-nums}@media(max-width:780px){.campaign-briefing{padding:23px 20px}.battle-cards{gap:8px}.battle-card>b{font-size:16px;margin-left:9px}.battle-card>small{font-size:9px;margin-left:9px}.battle-card>span{font-size:7px;margin-left:9px;letter-spacing:0}.campaign-heading h1{font-size:25px}.setup-options{gap:10px}.campaign-version{font-size:40px}}
nav{grid-template-columns:repeat(3,1fr)}nav button{padding-left:3px;padding-right:3px}.strategy-panel{margin-top:0;border:1px solid #d6c69a20;border-radius:7px;padding:16px 12px;background:#ffffff03}.strategy-panel h3{font-size:12px;letter-spacing:2px;color:#dfc797;margin:4px 0 12px}.strategy-panel p{font-size:10px;line-height:1.9;color:#9fb5a6;margin:0 0 15px}.strategy-panel .support-grid{grid-template-columns:1fr;margin-bottom:22px}.strategy-panel .upgrade-grid{grid-template-columns:1fr;margin-bottom:15px}.strategy-panel button{font-size:11px;padding:13px 8px;text-align:left}.strategy-panel>small{display:block;margin-bottom:15px;font-size:9px}