/* ============================================================
   WW3 · CONFLITO GLOBAL — interface funcional
   ============================================================ */
:root{
  --panel:#15171bd9;
  --line:#2a2d31;
  --ink:#e6e6e1;
  --dim:#8f9088;
  --acc:#e3a13b;
  --ok:#8fb573;
  --bad:#d1553f;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0b0c0e;color:var(--ink);
  font-family:var(--sans);font-size:14px}
#map{position:fixed;inset:0;z-index:0;background:#0b0c0e}

/* ---------- barra superior ---------- */
#topbar{position:fixed;top:0;left:0;right:0;height:42px;z-index:1000;
  display:flex;align-items:center;gap:16px;padding:0 14px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.14em;color:#fff}
.sep{width:1px;height:18px;background:#3a3e44}
.item{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:11px}
.item em{font-style:normal;color:var(--dim);font-size:10px;letter-spacing:.1em}
.item b{font-weight:500;color:#fff}
.item b.ok{color:var(--ok)}
.item b.bad{color:var(--bad)}
.item b.wait{color:var(--dim)}
.dot{display:inline-block;width:6px;height:6px;border-radius:2px;background:currentColor;
  margin-right:6px;vertical-align:1px;animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.2}}
.flex{flex:1}

/* ---------- aviso de modo de movimento ---------- */
#modehint{position:fixed;top:52px;left:50%;transform:translateX(-50%);z-index:1001;display:none;
  background:#1a1508;border:1px solid var(--acc);color:var(--acc);
  padding:7px 16px;font-family:var(--mono);font-size:10px;letter-spacing:.1em}
#modehint.on{display:block}

/* ---------- painel de comando ---------- */
#cmdpanel{position:fixed;top:52px;left:10px;width:250px;z-index:1000;
  background:var(--panel);border:1px solid var(--line);padding:12px 14px}
#cmdpanel h3{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.18em;
  color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:4px}
#cmdpanel h3:not(:first-child){margin-top:12px}
#cmdpanel .row b.big{font-size:14px;color:#fff}
.rec{width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:7px 10px;margin-top:6px;background:none;border:1px solid var(--line);
  color:var(--ink);font-family:var(--sans);font-size:12.5px;cursor:pointer}
.rec .cost{font-family:var(--mono);font-size:10px;color:var(--dim)}
.rec:hover:not(:disabled){border-color:var(--acc)}
.rec:hover:not(:disabled) span:first-child{color:var(--acc)}
.rec:disabled{opacity:.35;cursor:default}
#cmd-msg{min-height:15px;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.04em}
#cmd-msg.ok{color:var(--ok)}
#cmd-msg.err{color:var(--bad)}

/* ---------- painel de sistema ---------- */
#syspanel{position:fixed;top:52px;right:10px;width:248px;z-index:1000;
  background:var(--panel);border:1px solid var(--line);padding:12px 14px}
#syspanel h3{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.18em;
  color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:4px}
#syspanel h3:not(:first-child){margin-top:14px}
.row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:12.5px}
.row b{font-family:var(--mono);font-weight:500;font-size:10px;color:var(--dim)}
.row b.ok{color:var(--ok)}
.row b.bad{color:var(--bad)}
.row.now span{color:var(--acc)}
.row.now b{color:var(--acc)}
.row.off{opacity:.4}

/* ---------- registro de operações ---------- */
#eventfeed{position:fixed;right:10px;bottom:38px;width:248px;z-index:999;
  background:var(--panel);border:1px solid var(--line);padding:10px 14px}
#eventfeed h3{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.18em;
  color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:2px}
#eventfeed-list .ev{font-size:11px;color:var(--dim);padding:4px 0;border-bottom:1px solid #1d2023;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#eventfeed-list .ev:last-child{border-bottom:none}
.ev-conquest{color:var(--acc)}
.ev-battle{color:#d98a76}
.ev-recruit{color:var(--ok)}

/* ---------- ficha de país ---------- */
#country-card{position:fixed;left:10px;bottom:38px;width:250px;z-index:1000;display:none;
  background:var(--panel);border:1px solid var(--line);padding:12px 14px}
#country-card.on{display:block}
#cc-close{position:absolute;top:4px;right:6px;width:22px;height:22px;line-height:1;
  background:none;border:none;color:var(--dim);font-family:var(--mono);font-size:14px;cursor:pointer}
#cc-close:hover{color:#fff}
.cc-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:4px}
.cc-head h2{font-size:17px;font-weight:600;color:#fff}
.cc-head span{font-family:var(--mono);font-size:10px;font-weight:500;color:var(--acc);letter-spacing:.1em}
.cc-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:12px}
.cc-row span{color:var(--dim)}
.cc-row b{font-weight:500;color:var(--ink)}
#btn-command{width:100%;margin-top:10px;padding:9px 0;font-family:var(--mono);font-size:11px;
  font-weight:600;letter-spacing:.14em;color:var(--acc);background:transparent;
  border:1px solid #6e5326;cursor:pointer}
#btn-command:hover:not(:disabled){background:var(--acc);color:#141410;border-color:var(--acc)}
#btn-command:disabled{color:var(--dim);border-color:var(--line);cursor:default}
#cc-msg{min-height:15px;margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em}
#cc-msg.ok{color:var(--ok)}
#cc-msg.err{color:var(--bad)}

/* ---------- rodapé ---------- */
#statusbar{position:fixed;left:0;right:0;bottom:0;height:28px;z-index:1000;
  display:flex;align-items:center;gap:14px;padding:0 14px;
  background:var(--panel);border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--dim)}
#coord{color:var(--ink);min-width:200px}

/* ---------- unidades no mapa ---------- */
.unit-box{background:transparent;border:none;cursor:pointer}

/* ---------- controles do Leaflet ---------- */
.leaflet-container{font-family:var(--sans)}
.leaflet-bottom{bottom:28px}
.leaflet-control-attribution{background:#0b0c0ecc!important;color:#6a6b66!important;
  font-size:9px!important;font-family:var(--mono)}
.leaflet-control-attribution a{color:#8f9088!important}
.leaflet-bar{border:1px solid var(--line)!important;box-shadow:none!important;border-radius:0!important}
.leaflet-bar a{background:#15171bd9!important;color:#fff!important;border-radius:0!important;
  border-bottom:1px solid var(--line)!important;font-family:var(--mono)!important}
.leaflet-bar a:hover{background:#232529!important}
.leaflet-control-scale-line{background:#0b0c0ecc!important;color:var(--ink)!important;
  border-color:#8f9088!important;font-family:var(--mono)!important;font-size:9px!important}