/* 统一显示主题：奶油纸卡、桃子粉、薄荷绿与淡紫贴纸；不改变控件布局和交互。 */
:root{
 --bg:#faf0f4;--bg2:#fff6ed;--panel:#fffdf7;--panel2:#f7eef9;--panel3:#f0e5f7;--panel4:#e7ddf2;
 --line:#e7d8e6;--line2:#cfbcd6;--line3:#aa89b7;--text:#584866;--dim:#73647c;--dim2:#73647c;
 --accent:#467b78;--accentD:#3d6a67;--accentL:#3d6a67;--player:#f486a4;--playerD:#a95f7a;
 --danger:#a8493e;--warn:#886425;--ok:#35674c;--army:#806329;--gold:#806329;
 --shadow:0 8px 24px #8c659816;--glow:none;--glow-red:none;
}
html,body{font-family:ui-rounded,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
button:focus-visible,summary:focus-visible{outline:3px solid #467b78;outline-offset:3px}
button,input,select{accent-color:#467b78}
button{transition:background .15s,border-color .15s,box-shadow .15s}
#topbar{background:#fff8f2;border-bottom:1px solid var(--line);box-shadow:0 2px 12px #8c659812}
.logo{clip-path:none;border-radius:50%;background:#ffd4df}
.logo:after{content:'✿';position:absolute;inset:0;display:grid;place-items:center;font-size:22px;line-height:1;color:#a06182;background:none;transform:none}
.brandText,.stat b,#topbar .stat .v{color:var(--text);text-shadow:none}.brandText em{color:var(--dim)}
#topbar .stat{background:#f5edf8;border-color:var(--line);border-radius:10px}
#topbar .stat.powerStat.low{background:#f9e5cf;border-color:#d2ad82}#topbar .stat.powerStat.low .v{color:#835b28}
#topbar .tb{background:#fff6f5;color:var(--text);border-color:var(--line2);border-radius:11px}
#topbar .tb:hover{background:#f9e2ec}#topbar .tb.on{background:#dff3ec;border-color:#87bdb0}
#sidebar{background:#fff8f2;border-color:var(--line);box-shadow:-4px 0 20px #8c65980a}
.tabs{background:#f4edf8;border-color:var(--line)}.tab{background:#f4edf8;color:var(--dim);border-color:transparent;border-radius:12px 12px 0 0}
.tab:hover{background:#f9e5ef;color:#795271}
.tab.on,.tab.active{background:#ffdeea;border-color:#daa3be;color:#794465}
.card{background:#fffdf8;border-color:#e5d6e6;border-radius:14px;box-shadow:0 3px 0 #e7d4e35c}
.card:hover:not(.locked){background:#fff0f5;border-color:#d9a1bf;box-shadow:0 3px 0 #e7d4e3}
.card.active{background:#ffe0e9;border-color:#d48ba8;box-shadow:0 0 0 1px #d48ba8}
.card .cname{color:var(--text)}.card .ckey,.card-purpose{color:var(--dim)}.card .ccost{color:#866027}.card .lock{color:#84778b}
.autoProductionControl{background:#e9f5f0;border-color:var(--line)}
.autoProductionControl label,.strategyLabel{color:var(--text)}.autoProductionControl small,.strategyControl small{color:var(--dim)}
.autoProductionControl input{accent-color:#538c82}.sideFoot{background:#f7eef6;color:var(--dim);border-color:var(--line)}
.queue{background:transparent}.qline,.qitem{background:#f7f0fb;border-color:var(--line);border-radius:10px}
.qline-title,.qitem .qh{color:var(--text)}.qline-note{color:var(--dim)}.qbar,.qitem .qb,.unitInfoTrack{background:#e9e1f0}.qbar i,.unitInfoTrack i{background:#b59bc8}
#strategyDock{background:#fffdf7f2;border-color:#d2bfdf;box-shadow:var(--shadow);border-radius:14px}
#strategyDock .strategyControl{background:transparent;border-radius:14px}
#strategyButtons button{background:#faf3fc;color:#725c7d;border-color:#d8c5e0;border-radius:10px}
#strategyButtons button[aria-pressed="true"]{background:#dcf2e9;border-color:#87b8a7;color:#37675c;box-shadow:inset 0 0 0 1px #87b8a733}
#minimapWrap{background:#fffdf7ed;border-color:#d0bede;box-shadow:var(--shadow);border-radius:14px}
#minimap{border-radius:8px}.mmHead{color:var(--dim)}
#selbar,#unitInfoPanel,#armyCommandBar,#placeHint{background:#fffdf7f5;color:var(--text);border-color:#d0bede;border-radius:14px;box-shadow:var(--shadow)}
.unitInfoHead button,.unitInfoStats,.unitInfoXP,#unitInfoNote{color:var(--dim)}.unitInfoStats b{color:var(--text)}
.unitInfoStars span{color:#9a6c21}.unitInfoStars i{color:#82917a}
#phConfirm,#phCancel,#selbar button{background:#f6ebf6;border:1px solid #d4bedc;color:#705477;border-radius:10px}
#phConfirm{background:#d8f0e7;border-color:#8fbfae}#phState{color:#3b7463}
#phSuggest,#phExpand{background:#f9edcf;border:1px solid #dec78f;color:#786137;border-radius:10px;min-height:36px}
#placeHint.shore{flex-wrap:wrap;max-width:min(720px,calc(100% - 24px))}
#placeHint.shore .phText{flex:1;min-width:180px}
@media(max-width:960px){#placeHint.shore .phText{flex-basis:calc(100% - 48px);min-width:0}#placeHint.shore>button{flex:1;min-height:42px;padding:8px}}
#placeHint.shore:not(.hide)~#toasts .toast:nth-last-child(n+3){display:none}
@media(min-width:961px){#placeHint.shore:not(.hide)~#toasts{top:auto;bottom:16px}}
.phText b,.selCount span:first-child,.selInfo b{color:var(--text)}.selIcons canvas{background:#f2e5f1}
#selbar .cmd.danger{color:#9b493c;background:#f9e4d8;border-color:#d6a18b}#selbar .cmd.danger:hover{background:#f4d3c2}
#placeHint.bad{background:#fff2e7;border-color:#d7a28c;box-shadow:none}#placeHint.bad #phState{color:#975440}
.toast{background:#fffdf7f5;color:#655370;border-color:#dfcde7;box-shadow:0 4px 14px #8c659812;border-radius:10px}
#alertBar,#alertBar.warn{background:#f8dec9;color:#7d4334;border-color:#d3a087;box-shadow:var(--shadow)}
#alertBar.info{background:#dff2ea;color:#3e7163;border-color:#9ac6b5}
#tooltip,#cursorHint{background:#fffdf7fa;color:var(--text);border-color:#ccb5d9;box-shadow:var(--shadow);border-radius:13px}
#tooltip h4,#tooltip td:last-child{color:var(--text)}
.overlay{background:#f4eaf7f7}.sheet,.panel,#renderError{background:#fffdf7;color:var(--text);border-color:#d5bfe0;box-shadow:var(--shadow)}
.helpSheet h2,.helpCol h3,.rules b,.overStats b{color:#3d6a67}.overStats div{background:#f7eefa}.overSheet h2{text-shadow:none}
.cameraOption select,.opt,.big.ghost{background:#f7eff9;border:1px solid #cdb8d8;color:#705c7c;border-radius:10px}
.mini{background:#f5ebf8;color:#705c7c}.mini:hover{background:#ecdff2;color:#654d75}
.big{background:#dcf0e9;color:#3f7068;border-color:#99c1b6;border-radius:12px}.big:hover{background:#cde9df;color:#654d75;box-shadow:var(--shadow)}
.opt:hover,.big.ghost:hover{background:#eee0f4;color:#705477}.opt.on{background:#d8f0e7;color:#37675c;border-color:#97bbab;box-shadow:none}
#renderError button,#loadRetry{color:#80523c;border-color:#cba184;background:#fae8d9;border-radius:9px}kbd{background:#f5eaf8;color:#6c597a;border-color:#d5bcdf}
@media(max-width:960px){#strategyDock{border-radius:0;background:#fff8f2}#sidebar{border-radius:20px 20px 0 0}#minimapWrap{border-radius:14px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* Each strategy keeps its own readable candy accent. */
#strategyButtons [data-strategy="attack"][aria-pressed="true"]{background:#ffe0e8;border-color:#d994ad;color:#87445f}
#strategyButtons [data-strategy="defend"][aria-pressed="true"]{background:#e9e0ff;border-color:#b39bd6;color:#6c518e}
#strategyButtons [data-strategy="patrol"][aria-pressed="true"]{background:#d9f2e9;border-color:#87bda9;color:#376957}

/* Shore placement keeps a visible pointer and one explicit next step. */
#placeHint.shore{width:min(610px,calc(100% - 24px));gap:8px;padding:12px;box-sizing:border-box}
#placeHint.shore .phText{flex-basis:calc(100% - 46px);min-width:0;gap:5px;line-height:1.5}
#placeHint.shore .phText b{font-size:14px}#placeHint.shore #phState{font-size:12px;font-weight:650}
#placeHint.shore #phHelp{color:#796477;font-size:12px;font-weight:400;line-height:1.65}
#placeHint.shore .phIcon{width:34px;align-self:flex-start}
#placeHint.shore>button{min-height:40px;padding:8px 11px;border:1px solid #d4bedc;border-radius:10px;background:#f6ebf6;color:#705477}
#placeHint.shore #phConfirm,#placeHint.shore #phExplore{background:#d8f0e7;border-color:#8fbfae;color:#315e50;font-weight:700}
@media(max-width:960px){#placeHint.shore{bottom:64px;gap:6px;padding:10px}#placeHint.shore>button{flex:1 1 calc(50% - 6px);min-height:42px}#placeHint.shore #phConfirm{order:1}#placeHint.shore #phCancel{order:2}}

@media(min-width:961px){#placeHint.shore{left:auto;right:280px;transform:none}}
@media(min-width:961px) and (max-width:1240px){#placeHint.shore{top:144px}}

/* Placement reads as one compact card; the battlefield keeps the actual guides. */
#placeHint:not(.shore){box-sizing:border-box;width:min(540px,calc(100% - 24px));gap:8px;padding:10px 12px;flex-wrap:wrap}
#placeHint:not(.shore) .phText{flex:1;min-width:0;gap:4px;line-height:1.45}
#phLegend{font-size:11px;color:#4d7669;font-style:normal;line-height:1.5}
#phSpacing{font-size:11px;color:#77608a;line-height:1.5}
#phSpacing.caution{color:#8a622f}
#placeHint:not(.shore) #phState{font-size:12px;font-weight:650}
#placeHint:not(.shore)>button{min-height:40px;padding:8px 11px;flex-shrink:0}
@media(min-width:961px){#placeHint:not(.shore){left:auto;right:280px;transform:none}}
@media(min-width:961px) and (max-width:1240px){#placeHint:not(.shore){top:144px}}
@media(max-width:960px){
 #placeHint:not(.shore){left:12px;right:12px;width:auto;transform:none;top:auto;bottom:64px;gap:6px;padding:10px}
 #placeHint:not(.shore) .phText{flex-basis:calc(100% - 46px)}
 #placeHint:not(.shore)>button{flex:1;min-height:42px}
}

@media(min-width:961px){#placeHint:not(.hide)~#toasts{top:auto;bottom:16px}}

#phFind{background:#f9edcf;border:1px solid #dec78f;color:#786137;border-radius:10px}
#placeHint:not(.shore) .phText{flex-basis:calc(100% - 46px)}

/* Automatic infantry recovery stays in the existing read-only companion panel. */
#unitInfoRecovery{margin:7px 0;padding:6px 8px;border:1px solid #c5e5d7;border-radius:9px;background:#e8f6ee;color:#407962;font-size:11px;line-height:1.6;overflow-wrap:anywhere}