/* 参考图方向：海军蓝指挥界面、红灰军事模型、金色选择反馈。 */
:root{--bg:#07182e;--bg2:#0b2442;--panel:#102c4b;--panel2:#143658;--panel3:#1b4269;--line:#28547a;--line2:#3b709c;--text:#eff6ff;--dim:#abc0d6;--dim2:#849ebc;--accent:#58b9ef;--accentD:#287cae;--accentL:#b8e1ff;--player:#e84437;--gold:#ffd260;--shadow:0 12px 35px #0004}
#viewOverlay{grid-area:view;width:100%;height:100%;pointer-events:none;z-index:2}
#view{touch-action:none}
#renderError{position:absolute;z-index:40;left:50%;top:50%;transform:translate(-50%,-50%);padding:24px;max-width:460px;background:#102b47;border:1px solid #e7a264;border-radius:12px}
#renderError button,#loadRetry{padding:8px 16px;color:#ffdf8b;border:1px solid #8a7547;border-radius:5px}
button:focus-visible,summary:focus-visible{outline:2px solid #ffe080;outline-offset:3px}
#topbar{background:linear-gradient(#15334f,#0b2036);border-bottom-color:#37617f;box-shadow:0 3px 12px #0003}
.logo{background:#e84437;box-shadow:none;clip-path:polygon(50% 0,62% 34%,100% 36%,71% 60%,81% 100%,50% 76%,19% 100%,29% 60%,0 36%,38% 34%)}
.logo:after{display:none}.brandText{text-shadow:none}
#sidebar{background:linear-gradient(135deg,#0e2a46,#0b2036);border-left:1px solid #335677}
#app{grid-template-columns:1fr 268px}
.grid{grid-template-columns:repeat(2,1fr);gap:7px;padding:10px;max-height:calc(100vh - 230px);overflow-y:auto;flex:0 1 auto}
.card{background:linear-gradient(145deg,#183957,#102c48);border-color:#2e5679;min-height:97px;border-radius:7px;padding:5px;gap:3px;box-shadow:none}
.card canvas{width:88px;height:62px;filter:none}.card .cname{font-size:12px;font-weight:600}.card .ccost{font-size:11px}.card .ckey{color:#bed5ea;font-size:10px}
.card:hover:not(.locked){transform:none;background:#214b71;box-shadow:none}.card.active{border-color:#ffd260;box-shadow:0 0 0 1px #ffd260;background:#244662}
#minimapWrap{width:184px;background:#0c233ee8;border-color:#4e7695;box-shadow:0 6px 16px #0003}
#minimap{width:170px;height:170px}.mmHead{font-size:10px}.queue{flex:1;min-height:90px}.qitem{background:#0d2945}.sideFoot{background:#0b2036}
#selbar{background:#102b47ec;border-color:#47708e;max-width:540px;left:calc((100% - 268px)/2)}
.overlay{background:#081c33f5;padding:18px;overflow-y:auto;align-items:flex-start;backdrop-filter:none}
.menuSheet{width:min(1480px,100%);max-width:1480px;background:transparent;border:none;box-shadow:none;padding:0;border-radius:0;overflow:visible;max-height:none;margin:auto}
.menuHero{display:flex;align-items:center;gap:32px;min-height:200px;padding:8px 12px 18px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 82% 60%,#28648c55,transparent 52%)}
.heroBrand{width:280px;flex:none;text-align:center;position:relative}.heroStar{color:#ef4c3f;font-size:72px;line-height:.9;text-shadow:0 3px 0 #9b3028,2px 2px 0 #f3c9a5,-2px -2px 0 #e6ddd0;position:relative}.heroStar:before,.heroStar:after{content:'';position:absolute;top:34px;width:85px;height:14px;background:linear-gradient(#ecedf0,#8d9da7);transform:skewY(8deg);left:10px}.heroStar:after{left:auto;right:10px;transform:skewY(-8deg)}
.heroBrand h1{font-size:46px;line-height:1.12;font-weight:1000;margin:0;color:#ef4d3b;letter-spacing:2px;text-shadow:0 4px 0 #81251f,0 6px 0 #0006,-1px -1px 0 #ffe2c8}.heroBrand>span{display:block;margin:12px auto 0;font-weight:800;font-size:14px;letter-spacing:3px;color:#e6e9ee;border-top:2px solid #9ba5af;border-bottom:2px solid #9ba5af;padding:5px 12px;width:240px}
.heroCopy{position:relative;z-index:2}.eyebrow{font:10px monospace;letter-spacing:2px;color:#73a9d0}.heroCopy h2{font-size:27px;white-space:nowrap;margin:16px 0 10px;letter-spacing:1px}.heroCopy p{font-size:16px;color:#bfd2e5;margin:0 0 14px}.heroTag{color:#8eb3d3;font-size:12px;letter-spacing:2px}
.heroBase{position:relative;flex:1;min-width:220px;align-self:stretch}.heroBase img{position:absolute;height:230px;width:280px;object-fit:contain;right:10px;top:-13px;filter:drop-shadow(0 14px 10px #0004)}.heroBase>span{position:absolute;right:6px;bottom:0;font-weight:800;font-style:italic;font-size:18px;color:#d3eaff;line-height:1.6}
.rosterPanel{background:linear-gradient(125deg,#0b2543,#0b213c);border:1px solid #3775a5;border-radius:12px;padding:13px 16px;box-shadow:inset 0 0 0 1px #22507455;margin-bottom:12px;min-width:0}
.rosterPanel h2{display:flex;align-items:center;gap:9px;font-size:18px;margin:0 0 8px;color:#e8f3ff;letter-spacing:1px}.rosterPanel h2>span{background:#247fbd;border-radius:4px;width:25px;height:25px;text-align:center;line-height:25px;color:#e9f9ff;font-size:19px}.rosterPanel h2 i{font:10px monospace;letter-spacing:2px;margin-left:auto;color:#678daf}
.unitRoster{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.rosterItem{display:flex;flex-direction:column;align-items:center;min-width:0}.rosterItem canvas{width:100%;height:118px;object-fit:contain;filter:drop-shadow(0 6px 3px #0004)}.rosterItem b{font-size:13px;font-weight:700;border-radius:20px;padding:5px 16px;min-width:85px;text-align:center;background:linear-gradient(#204b7d,#183b66);white-space:nowrap;letter-spacing:1px}
.baseRow{display:grid;grid-template-columns:5fr 1.15fr;gap:12px}.buildingRoster{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.buildingRoster .rosterItem canvas{height:118px}.defensePanel .rosterItem canvas{height:118px}.defensePanel h2{font-size:16px}
.setupRow{display:grid;grid-template-columns:3.4fr 1fr;gap:12px}.mapCards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.mapCard{background:#102d50;border:2px solid #315e87;border-radius:9px;padding:0;overflow:hidden;min-width:0;position:relative;box-shadow:none;transition:border-color .15s}
.mapCard canvas{width:100%;height:112px;object-fit:cover;display:block;border-radius:0}.mapCard .mn{display:block;padding:9px 4px 3px;text-align:center}.mapCard .mn b{font-size:15px;letter-spacing:1px}.mapCard .mn .ms{display:none}.mapCard>.ms{font-size:10px;text-align:center;padding:0 4px 10px;color:#adc6df}.mapCard.on{border-color:#ffd45d;box-shadow:0 0 0 1px #ffd45d}.mapCard.on:after{content:'✓';position:absolute;right:0;top:0;width:25px;height:26px;background:#ffd45d;color:#13344a;font-weight:900;font-size:20px;border-bottom-left-radius:10px}.mapCard:hover{transform:none;border-color:#a6cde9;background:#16385c}
#mapDesc{font-size:11px;line-height:1.65;color:#9cb9d4;min-height:32px;margin-top:9px;padding:0;background:none;border:none}
.scaleBtns{display:grid;grid-template-columns:1fr 1fr;gap:9px}.scaleOpt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:linear-gradient(140deg,#163958,#123456);border:2px solid #38658a;border-radius:9px;padding:7px;min-height:81px;color:#adc5df}.scaleOpt.on{border-color:#ffd45d;color:#ffd45d;background:#173954;box-shadow:0 0 0 1px #ffd45d}.scaleGlyph{font-size:22px;line-height:1.2}.scaleOpt b{font-size:15px}.scaleOpt small{font-size:12px}.scaleNote{color:#87a9c8;font-size:10px;line-height:1.6;margin:8px 0}.advanced{border-top:1px solid #294d71;padding-top:6px;font-size:11px}.advanced summary{cursor:pointer;color:#abc6de;padding:5px 0}.advanced .optRow{display:block;margin-top:8px}.advanced .optLabel{display:block;margin-bottom:5px}.advanced .optBtns{gap:3px;flex-wrap:wrap}.advanced .opt{padding:5px 6px;font-size:10px}.advanced .opt small{font-size:8px}
.menuFoot{position:sticky;bottom:-18px;margin:0;padding:13px 0 4px;align-items:center;background:linear-gradient(transparent,#081c33 18%);z-index:3;gap:12px}.readiness{margin-right:auto;display:flex;align-items:center;gap:7px;color:#8bb2d2;font-size:11px}.readyDot{height:6px;width:6px;border-radius:50%;background:#78c9a9}.big{background:linear-gradient(#eec76f,#d5a849);border-color:#ffda87;color:#102d46;border-radius:7px;padding:11px 28px;font-size:15px;box-shadow:0 3px 10px #0003}.big span{padding-left:24px}.big:hover{background:#ffe095;box-shadow:0 0 15px #d9b35c33}.big.ghost{background:#102d49;color:#bad2e7;border-color:#365a79}.big.ghost:hover{background:#1a3d5c}
@media(min-width:1500px){.rosterItem canvas,.buildingRoster .rosterItem canvas,.defensePanel .rosterItem canvas{height:160px}.mapCard canvas{height:150px}.menuHero{min-height:230px}.heroBrand h1{font-size:56px}.heroCopy h2{font-size:35px}.heroBase img{height:270px;width:340px}}
@media(max-width:1100px){.heroBrand{width:230px}.heroBrand h1{font-size:39px}.heroCopy h2{font-size:22px}.heroBase{min-width:140px}.heroBase img{right:-45px;width:240px}.heroBase>span{font-size:14px}.setupRow{grid-template-columns:3fr 1fr}.rosterPanel{padding:11px}.mapCards{gap:6px}.mapCard .mn b{font-size:12px}.mapCard>.ms{font-size:9px}.rosterItem canvas{height:98px}.rosterItem b{font-size:11px}.rosterPanel h2{font-size:16px}.rosterPanel h2 i{display:none}}
@media(max-width:960px){#app{grid-template-columns:minmax(0,1fr)}#selbar{left:12px;max-width:none}#minimapWrap{width:auto}#minimap{width:124px;height:124px}.heroBase{display:none}.menuHero{min-height:170px;justify-content:center;gap:22px}.baseRow{grid-template-columns:5fr 1.3fr}.defensePanel h2{font-size:13px}.setupRow{grid-template-columns:minmax(0,1fr)}.enemyPanel{display:grid;grid-template-columns:1fr 2fr;gap:10px}.scaleBtns{grid-template-columns:repeat(4,1fr)}.enemyPanel .scaleNote,.enemyPanel .advanced{grid-column:1/-1;margin:0}.enemyPanel h2{align-self:center}.scaleOpt{min-height:70px}.buildingRoster .rosterItem canvas,.defensePanel .rosterItem canvas{height:95px}}
@media(max-width:600px){.overlay{padding:10px}.menuHero{min-height:130px;gap:12px;padding:4px 0 14px}.heroBrand{width:180px}.heroStar{font-size:48px}.heroStar:before,.heroStar:after{width:54px;top:23px;height:10px}.heroBrand h1{font-size:29px}.heroBrand>span{width:170px;font-size:9px;letter-spacing:1px;margin-top:9px}.heroCopy h2{white-space:normal;font-size:17px;line-height:1.6;margin-top:4px}.heroCopy p{font-size:12px}.heroTag,.eyebrow{display:none}.unitRoster{grid-template-columns:repeat(3,1fr);gap:10px 5px}.rosterItem canvas{height:90px}.rosterItem b{min-width:72px;padding:4px 8px}.baseRow{grid-template-columns:minmax(0,1fr)}.buildingRoster{grid-template-columns:repeat(3,1fr);gap:8px}.defensePanel{display:flex;align-items:center;justify-content:space-between}.defensePanel #defenseRoster{width:125px}.defensePanel .rosterItem canvas{height:80px}.defensePanel h2{font-size:16px}.mapCards{grid-template-columns:repeat(3,1fr);gap:8px}.mapCard canvas{height:86px}.mapCard .mn b{font-size:13px}.enemyPanel{display:block}.scaleOpt{min-height:76px}.scaleNote{margin:8px 0!important}.menuFoot{bottom:-10px;flex-wrap:wrap;justify-content:space-between;padding:12px 0 4px}.readiness{width:100%;font-size:10px}.big{padding:10px 20px;font-size:13px}.big span{padding-left:10px}#topbar .powerStat{display:none}#topbar .brand{margin-right:0}.grid{max-height:calc(100vh - 240px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.card-purpose{font-size:10px;color:#9bb7bc;line-height:1.3}.card .ccost{color:#dfc47b}

.autoProductionControl{padding:10px 12px;border-bottom:1px solid #294866;background:#122c42}.autoProductionControl label{display:flex;align-items:center;gap:7px;font-size:12px;color:#dce6ec;cursor:pointer}.autoProductionControl input{accent-color:#d8b95c;width:16px;height:16px;margin:0}.autoProductionControl small{display:block;margin-top:5px;color:#99b0bf;font-size:10px;line-height:1.4}

.strategyControl{padding:9px 12px;border-bottom:1px solid #294866;background:#11283d}.strategyLabel{font-size:11px;color:#bbcedc}#strategyButtons{display:flex;gap:5px;margin:7px 0}#strategyButtons button{flex:1;padding:7px 3px;border:1px solid #3c566a;border-radius:5px;background:#192e42;color:#bdd0de;font-size:12px}#strategyButtons button[aria-pressed="true"]{border-color:#d7bb70;background:#435044;color:#ffe1a0}.strategyControl small{font-size:10px;color:#9db4c3;line-height:1.4}

.cameraOption{display:block;font-size:12px;line-height:1.6;margin:8px 0}.cameraOption select{max-width:100%;background:#173046;color:#dce9ee;padding:6px;border:1px solid #456277;border-radius:4px}#btnHome{font-size:11px}#strategyDock{position:absolute;top:60px;left:12px;z-index:8;width:310px;max-width:calc(100% - 24px);border:1px solid #48799b;border-radius:8px;background:#102b47ed}#strategyDock .strategyControl{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 10px;border:0;border-radius:8px;background:transparent}#strategyDock #strategyButtons{margin:0}#strategyDock small{grid-column:1/-1}
@media(max-width:960px){
 #strategyDock{display:block;position:absolute;top:auto;bottom:0;left:0;right:0;width:auto;max-width:none;border:0;border-radius:0;z-index:15;background:#10263a;padding-bottom:env(safe-area-inset-bottom)}
 #strategyDock .strategyControl{display:block;padding:5px 12px;border:0}#strategyDock .strategyLabel,#strategyDock small{display:none}#strategyDock #strategyButtons{margin:0}#strategyDock button{min-height:42px}
 #sidebar{top:auto;bottom:52px;left:0;right:0;width:100%;max-height:58vh;border-radius:12px 12px 0 0;transform:translateY(120%);border:1px solid #3b596e}#sidebar.open{transform:translateY(0)}
 #sidebar .grid{max-height:28vh;grid-template-columns:repeat(3,minmax(0,1fr));overflow-y:auto;touch-action:pan-y}.card{min-height:90px}.queue{max-height:12vh;overflow-y:auto}
 #minimapWrap{display:none}#minimapWrap.map-open{display:block}#armyCommandBar{bottom:62px;max-width:calc(100% - 24px)}#placeHint{bottom:62px;left:10px;right:10px;max-width:calc(100% - 20px)}#phConfirm,#phCancel{min-height:42px;padding:8px 12px}#btnMap{display:block}
}
@media(max-width:600px){#topbar .brandText em{display:none}#topbar .brandText{font-size:10px}#btnSpeed{display:none}#btnHome{padding:5px}#selbar{bottom:62px}}

@media(max-width:600px){#topbar{gap:3px;min-width:0}#vIncome,#btnSound{display:none}#topbar .tb{padding:5px 6px}#topbar .brandText{font-size:11px}}

#armyCommandBar{position:absolute;top:60px;left:calc((100% - 268px)/2);transform:translateX(-50%);z-index:5;pointer-events:none;max-width:calc(100% - 300px);padding:9px 14px;border:1px solid #48799b;border-radius:7px;background:#102b47e8;color:#e0edf8;font-size:12px;text-align:center}
.qline{border:1px solid #294866;border-radius:6px;padding:8px;background:#0b1c30}.qline-title{font-weight:700;color:#e1edf7;font-size:12px}.qline-note{font-size:10px;color:#91adc2;margin:4px 0 8px;line-height:1.5}.qline .qitem{margin-top:6px}.qline .qh{padding-right:23px}.qline .qempty{padding:8px 0;font-size:11px}
@media(max-width:960px){#topbar .mob-hide,#topbar .powerStat{display:none}#armyCommandBar{top:auto;bottom:62px;left:12px;transform:none;max-width:calc(100% - 24px);font-size:11px}}
@media(max-width:600px){#topbar .brandText{display:none}#topbar .brand{margin-right:0;flex-shrink:0}#topbar .stat{padding:3px 5px}#btnHome{font-size:10px}#btnMap{font-size:11px}}

@media(max-width:960px){#placeHint{transform:none;top:auto;bottom:62px;left:10px;right:10px;width:auto;gap:6px;padding:8px}.phText{flex:1;min-width:0}#placeHint .phIcon{flex-shrink:0}#toasts .toast:not(:last-child){display:none}#toasts{max-width:85vw}}

#unitInfoPanel{position:absolute;bottom:14px;left:214px;z-index:11;width:270px;max-width:calc(100% - 24px);padding:11px 13px;background:#102b47f0;border:1px solid #48799b;border-radius:8px;color:#dbeafa}.unitInfoHead{display:flex;align-items:center;justify-content:space-between;font-size:13px}.unitInfoHead button{background:transparent;color:#bcd1e3;border:0;padding:3px 6px;font-size:20px;cursor:pointer}.unitInfoStars{font-size:18px;letter-spacing:2px;margin:2px 0 7px}.unitInfoStars span{color:#ffda72}.unitInfoStars i{font-style:normal;color:#728797}.unitInfoStats{display:flex;gap:18px;font-size:11px;color:#a7bfd3}.unitInfoStats b{color:#edf5ff}.unitInfoXP{margin-top:9px;font-size:11px;color:#c5d7e6}.unitInfoTrack{height:4px;border-radius:3px;overflow:hidden;background:#081b2c;margin:6px 0}.unitInfoTrack i{display:block;height:100%;background:#e5bf61}#unitInfoNote{color:#97b6cd;font-size:10px;line-height:1.5}
@media(max-width:960px){#unitInfoPanel{bottom:62px;left:12px;right:12px;width:auto}.unitInfoHead button{min-width:36px;min-height:36px}.unitInfoStars{font-size:17px}}