
/* ECHELON global UI redesign — official palette
   Void Black #050505 | Armor Steel #D8D0C6 | Signal Red #E03A23 | Ember Orange #F15430
   Field Charcoal #24201E | Iron Gray #837B73 | Blood Crimson #8D1B12 | Ash White #EFE9DF */
:root{
  color-scheme:dark;
  --bg:#050505;
  --panel:#181412;
  --panel2:#24201E;
  --edge:#4e4039;
  --text:#EFE9DF;
  --muted:#837B73;
  --accent:#F15430;
  --blue:#D8D0C6;
  --red:#E03A23;
  --green:#D8D0C6;
  --danger:#8D1B12;
  --steel:#D8D0C6;
  --char:#24201E;
  --ash:#EFE9DF;
  --iron:#837B73;
}
html,body{background:linear-gradient(180deg,#050505,#0d0a09 65%,#050505);color:var(--text)}
#app{color:var(--text)}
.control,
.btn,
.pill,
.metric,
.map-card,.inspector,.log-card,
.inventory-grid>div,
.status,.orders,.formation-card,.tactbox,
.schedule-view,.schedule-row,
.intel-briefing,.dossier-section,
.scoreboard-totals>div,
.scoreboard-table th,
.scoreboard-table td,
.status-state,.compact-unit-summary,
.macro-fold,.support-fold,.inspector-fold,
.sector-toolbar,.scenario-evidence,
.float-chip,.recon-readout,.event,
.map-foot,.map-toolbar,.front-campaign-card,.front-campaign-detail,.front-graphics-card,
.assault-dialog,.dossier-dialog{
  box-shadow:none;
}
.topbar{padding-bottom:16px}
.pill{border-color:#5d4a40;color:#d8d0c6;background:rgba(36,32,30,.65)}
.control{background:linear-gradient(180deg,#26211f,#1a1513);border:1px solid #5f4d45;color:var(--ash)}
.control:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{background:linear-gradient(180deg,#2b2522,#1a1513);border:1px solid #66544b;color:var(--ash)}
.btn:hover{background:linear-gradient(180deg,#3a2b24,#261916);border-color:#a65843}
.btn.gold{background:linear-gradient(180deg,#f15430,#e03a23);border-color:#ff8b6e;color:#fff4ed}
.btn.gold:hover{background:linear-gradient(180deg,#ff6a41,#f15430);border-color:#ff9a78}
.btn.active{background:linear-gradient(180deg,#5f271d,#431813);border-color:#f15430;color:#fff0ea}
.btn.red{border-color:#a93329;color:#ffc0b8;background:linear-gradient(180deg,#381412,#221010)}
.btn:focus-visible,.tab:focus-visible,.layer:focus-visible,.sector-btn:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px}

.metric{background:linear-gradient(180deg,#1b1715,#14100f);border:1px solid #3f332e}
.metric-label{color:#9d9188}
.metric-value{color:#f1e9de}
.metric-value small,.muted{color:#9d9188}

.map-card,.inspector,.log-card{background:linear-gradient(180deg,#171311,#100d0c);border:1px solid #3c302b}
.map-toolbar{background:linear-gradient(180deg,#1b1614,#16110f);border-bottom:1px solid #40332d}
.map-shell{background:#0d0b0a}
.map-foot{background:linear-gradient(180deg,#15110f,#100d0c);border-top:1px solid #40332d;color:#cbbfb4}
.float-chip{background:rgba(20,13,11,.92);border:1px solid #5a4740;color:#efe9df}
.zoom-controls button{background:#1b1513;border:1px solid #665147;color:#efe9df}
.zoom-controls button:hover{background:#311d18;border-color:#f15430}

.tab{color:#b8aea6}
.tab.active{background:linear-gradient(180deg,#5f271d,#421713);color:#fff2ec;border-color:#e76b4a}
.layer{background:#1c1715;border-color:#504139;color:#ccc1b8}
.layer.active{background:linear-gradient(180deg,#f15430,#e03a23);border-color:#ff916f;color:#fff6f0}

.eyebrow,.metric-label,.heading,.legend .legendlabel,.formation-name,.log-head strong,.dossier-section h3,.front-page-top,.front-menu-footer,.front-menu-epoch{color:#d8d0c6}
.big-symbol{border-color:#e03a23;color:#efe9df;background:linear-gradient(160deg,#3a1612,#21110f)}
.unit-title,.stat strong,.event b,.legend .legendlabel{color:#efe9df}
.unit-sub,.stat,.help,.status,.event,.inventory-grid span,.inventory-grid b,.schedule-row small,.dossier-header p,.dossier-rows,.dossier-rows .label{color:#c9beb4}
.heading{border-bottom-color:#4d3d36}
.meter{background:#352925}
.meter i{background:linear-gradient(90deg,#f15430,#e03a23)}
.divider{background:#41342e}
.status{background:#120f0e;border:1px solid #3f322d;color:#d9cec4}
.orders{border:1px solid #6a3c31;background:rgba(73,25,18,.38);color:#f4ddd5}
.objective{color:#f15430}

.scenario-evidence{background:#15110f;border-bottom:1px solid #3f332d;color:#c9beb4}
.scenario-evidence a{color:#ff936f}
.sector-toolbar{background:#171311}
.sector-toolbar #campaignSynopsis{color:#cec1b7}
.sector-btn{background:#221c1a;border:1px solid #51423b;color:#d8cdc2}
.sector-btn.active{background:linear-gradient(180deg,#5f271d,#421713);border-color:#f15430;color:#fff0ea}
.formation-card{background:#120f0e;border:1px solid #40342f}
.subrow{border-top-color:#332a26;color:#bfb4aa}
.status-inline{color:#f3b08d}
.tactbox{border:1px solid #6d4538;background:#221816;color:#eadfd5}
.map-disclaimer{color:#a99d93}
.inventory-grid>div{background:#141110;border:1px solid #3d322d}
.status-state{border-color:#5f4b42;background:#1f1917;color:#efe2d7}
.status-state.warning{border-color:#b27840;background:#2b1f14;color:#ffd59d}
.status-state.critical{border-color:#c04b3e;background:#341916;color:#ffb0a5}
.objective-score,.timeline-date,.metric-value .date-small,.schedule-row b,.recon-readout strong,.intel-strength{color:#ffb18d}
.recon-readout{background:#221916;border-left:3px solid #f15430}
.recon-readout span{color:#c2aca0}
.recon-readout small{color:#e3d9cf}

.macro-fold,.support-fold,.inspector-fold{border:1px solid rgba(113,87,75,.7);background:rgba(28,21,19,.7)}
.macro-fold>summary,.support-fold>summary,.inspector-fold>summary{color:#efe6da}
.macro-fold>summary::after,.support-fold>summary::after,.inspector-fold>summary::after{color:#f15430}
.schedule-view{border:1px solid #4a3a34;background:#181311;color:#e9dfd4}
.schedule-view summary{color:#ffb08b}
.schedule-row{border:1px solid #443731;background:#201917}

.intel-briefing{background:linear-gradient(180deg,#1a1513,#151110);border:1px solid #5f4b42}
.intel-heading{color:#ffb08b}
.intel-description,.intel-assets{color:#ddd2c8}
#unitDossier{background:rgba(5,5,5,.88)}
.dossier-dialog{background:linear-gradient(180deg,#1b1614,#110f0e);border:1px solid #5c4d47;color:#efe9df}
.dossier-toolbar{border-bottom-color:#473a34;color:#efe9df}
.dossier-header .unit-badge{border:1px solid #614e44;background:#171311}
.dossier-section{border:1px solid #4a3b35;background:#181311}
.command-readout{color:#ffb08b}
.command-readout.isolated{color:#ff9583}
.command-readout.weak{color:#f3c178}

.scoreboard-table{color:#efe7dc}
.scoreboard-table th,.scoreboard-table td{border-bottom:1px solid #463732}
.scoreboard-table th{background:#211916;color:#f1e4d4}
.scoreboard-totals>div{background:#171311;border:1px solid #4b3d37}
.scoreboard-totals b{color:#fff1e9}
.scoreboard-totals small{color:#a6988d}

.assault-modal{background:rgba(5,5,5,.86)}
.assault-dialog{background:linear-gradient(180deg,#201917,#151110);color:#efe9df;border:1px solid #6a554d}
.unit-badge{background:#2a1b18;color:#efe9df}
#fireModal .assault-dialog,#defenseModal .assault-dialog{border-color:#7a5a50;background:linear-gradient(180deg,#241b18,#16110f)}
.toast{border:1px solid #7a5648;background:#201613;color:#f5e7df;box-shadow:0 10px 40px rgba(0,0,0,.65)}

.owner-blue{color:#efe9df}
.owner-red{color:#ff9b8a}
.owner-contested{color:#ffc18c}

/* Main menu refresh, extending the existing Echelon branding to all menu screens */
.front-menu{background:#050505;color:#efe9df}
/* Reuse the embedded main-menu artwork from v1.1.10.
   Do not replace .front-menu-ambient background shorthand here:
   the original offline image stack remains defined in #frontline-v1110-menu-background. */
.front-menu-ambient::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,5,5,.15) 0%,rgba(5,5,5,.15) 40%,rgba(5,5,5,.64) 100%)}
.front-menu-header,.front-menu-footer{border-color:rgba(216,208,198,.14)}
.front-menu-footer{color:#8f847c}
.front-identity strong,.front-menu h1,.front-menu h2{color:#efe9df}
.front-identity small,.front-menu-page p,.front-lead,.front-note,.front-menu-epoch{color:#c4b9af}
.front-menu button:disabled{opacity:.58}
.front-primary,.front-secondary{border-radius:4px}
.front-primary{background:linear-gradient(180deg,#f15430,#e03a23);border:1px solid #ff936f;color:#fff7f1}
.front-primary:hover{background:linear-gradient(180deg,#ff6f46,#f15430)}
.front-secondary{background:rgba(27,21,19,.86);border:1px solid rgba(216,208,198,.28);color:#efe9df}
.front-secondary:not(:disabled):hover{background:rgba(55,29,23,.96);border-color:#f15430}
.front-primary span,.front-secondary span,.front-secondary small{color:inherit;opacity:.62}
.front-campaign-card{background:rgba(25,20,18,.92);border:1px solid rgba(131,123,115,.6);color:#efe9df}
.front-campaign-card:hover{border-color:#f15430;background:rgba(47,27,23,.95)}
.front-campaign-card[aria-selected="true"]{background:rgba(74,32,24,.97);border-color:#f15430;box-shadow:inset 3px 0 #e03a23}
.front-card-number,.front-kicker,.front-detail-top,.front-detail-block>b,.front-play-as>strong{color:#f15430}
.front-card-date,.front-page-top,.front-detail-metadata{color:#a79b91}
.front-campaign-detail{background:rgba(18,15,14,.95);border:1px solid rgba(216,208,198,.22);color:#efe9df}
.front-detail-block{border-color:rgba(131,123,115,.27)}
.front-detail-block p,.front-detail-block ul{color:#ddd2c8}
.front-sides label{background:rgba(36,32,30,.76);border-color:rgba(131,123,115,.6);color:#efe9df}
.front-sides label:has(input:checked){background:rgba(84,33,24,.82);border-color:#f15430}
.front-sides input{accent-color:#f15430}
.front-sides small{color:#aa9c92}
.front-graphics-card{background:rgba(30,25,23,.92);border:1px solid rgba(131,123,115,.55)}
.front-graphics-card select{background:#24201E;color:#efe9df;border:1px solid #837B73}
.front-back{color:#d8d0c6}
.front-back:hover{color:#f15430}

/* scrollbars */
*{scrollbar-color:#6b4c40 #181311}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#181311}
::-webkit-scrollbar-thumb{background:#6b4c40;border-radius:999px;border:2px solid #181311}
::-webkit-scrollbar-thumb:hover{background:#a85a45}

@media(max-width:790px){
  .metric{padding:10px}
  .map-toolbar,.map-foot{padding:9px 10px}
}

/* Keep the game menu controls above its artwork and expose the public lobby feed. */
#frontlineMainMenu .front-menu-inner{position:relative;z-index:1}
#frontlineMainMenu .front-menu-page{position:relative}
#frontlineMainMenu .front-main-actions,#frontlineMainMenu .front-public-chat{position:relative;z-index:2;pointer-events:auto}
.front-home-layout{display:grid;grid-template-columns:minmax(320px,670px) minmax(290px,390px);gap:clamp(18px,3vw,38px);align-items:start;justify-content:center;max-width:1120px;margin:0 auto}
.front-home-layout .front-main-actions{max-width:none}
.front-public-chat{padding:19px;background:rgba(16,14,13,.95);border:1px solid rgba(216,208,198,.24);box-shadow:0 16px 48px #0009;text-align:left}
.front-public-chat-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid rgba(216,208,198,.18);font-size:9px;font-weight:900;letter-spacing:.12em;color:#aaa198}
.front-public-chat-live{display:flex;align-items:center;gap:8px;color:#efe9df}
.front-public-chat-live i{width:7px;height:7px;border-radius:50%;background:#f15430;box-shadow:0 0 12px #f15430aa}
.front-public-chat-status{min-height:20px;margin:12px 0;color:#aaa198;font-size:10px;line-height:1.5}
.front-public-chat-messages{display:grid;gap:8px;min-height:86px;max-height:240px;overflow:auto;list-style:none;margin:0;padding:0}
.front-public-chat-messages li{padding:9px 11px;background:rgba(36,32,30,.68);border-left:2px solid #e03a23}
.front-public-chat-messages li strong{display:block;color:#f15430;font-size:9px;letter-spacing:.08em}
.front-public-chat-messages li p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:4px 0 0;color:#efe9df;font-size:11px;line-height:1.45;overflow-wrap:anywhere}
.front-chat-join{display:flex;justify-content:space-between;gap:15px;margin-top:13px;padding:12px 13px;background:#e03a23;border:1px solid #ff936f;color:#fff7f1;font-size:9px;font-weight:900;letter-spacing:.11em;text-decoration:none}
.front-chat-join:hover{background:#f15430}
@media(max-width:960px){.front-home-layout{grid-template-columns:minmax(0,670px)}.front-public-chat{max-width:670px;width:100%;margin:0 auto}}
@media(max-width:620px){.front-home-layout{grid-template-columns:minmax(0,1fr)}.front-menu-inner{padding-inline:16px}.front-public-chat{padding:14px}.front-public-chat-head{align-items:flex-start;flex-direction:column}}
