* { box-sizing: border-box; }
body {
  margin: 0;
  background: #14161c;
  color: #d8dce5;
  font: 14px/1.4 "Segoe UI", system-ui, sans-serif;
}
header {
  background: #1c1f28;
  border-bottom: 1px solid #2a2f3c;
  padding: 10px 18px;
}
header h1 { margin: 0 0 8px 0; font-size: 18px; font-weight: 600; color: #f2c94c; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  background: transparent;
  border: 1px solid #2a2f3c;
  color: #9aa3b3;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 13px;
}
.tab:hover { color: #fff; border-color: #3a4054; }
.tab.active { background: #2a2f3c; color: #fff; border-color: #3a4054; }
.status {
  float: right; margin-top: -28px; font-size: 12px; color: #6b7388;
}
.picker { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 12px; color: #9aa3b3; }
.picker select { background: #23273a; color: #d8dce5; border: 1px solid #2a2f3c; padding: 4px 6px; border-radius: 3px; font-size: 12px; }
.alliance-combo { position: relative; }
#alliance-btn {
  background: #23273a; color: #d8dce5; border: 1px solid #3a4054;
  padding: 4px 10px; border-radius: 3px; font-size: 12px; min-width: 220px;
  text-align: left; cursor: pointer;
}
#alliance-btn:hover { border-color: #4a5170; }
#alliance-btn::after { content: " ▾"; color: #6b7388; float: right; }
#alliance-dropdown {
  display: none; position: absolute; top: 100%; right: 0; margin-top: 3px;
  background: #1c1f28; border: 1px solid #3a4054; border-radius: 3px;
  width: 340px; max-height: 420px; overflow-y: auto; z-index: 50;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
#alliance-dropdown.open { display: block; }
#alliance-filter {
  width: 100%; background: #23273a; color: #d8dce5; border: none;
  border-bottom: 1px solid #2a2f3c; padding: 8px 10px; font-size: 12px;
  position: sticky; top: 0;
}
#alliance-list .row {
  padding: 7px 10px; cursor: pointer; border-bottom: 1px solid #23273a22;
  display: flex; align-items: center; gap: 6px;
}
#alliance-list .row:hover { background: #2a2f3c; }
#alliance-list .row.current { background: #23273a; }
#alliance-list .row .abbr { color: #f2c94c; font-weight: 600; min-width: 60px; }
#alliance-list .row .name { flex: 1; color: #d8dce5; }
#alliance-list .row .meta { color: #6b7388; font-size: 11px; font-family: ui-monospace, monospace; }
#alliance-list .row .badge { background: #27ae60; color: #0c0e13; font-size: 10px; padding: 1px 5px; border-radius: 2px; font-weight: 600; }
#alliance-list .row .badge-map { background: #56ccf2; }
main { padding: 16px 18px; max-width: 1400px; margin: 0 auto; }
.panel { display: none; }
.panel.active { display: block; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.card {
  background: #1c1f28;
  border: 1px solid #2a2f3c;
  border-radius: 4px;
  padding: 12px 14px;
}
.card .label { color: #6b7388; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.card .value { font-size: 22px; font-weight: 600; color: #f2c94c; margin-top: 3px; }
.card.win    { border-left: 3px solid #27ae60; }
.card.loss   { border-left: 3px solid #eb5757; }
.card.prog   { border-left: 3px solid #f2c94c; }
.card.pend   { border-left: 3px solid #6b7388; opacity: 0.6; }
table {
  width: 100%;
  border-collapse: collapse;
  background: #1c1f28;
  border: 1px solid #2a2f3c;
  font-size: 13px;
}
th, td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid #23273278;
}
th { background: #23273a; color: #9aa3b3; font-weight: 500; cursor: pointer; user-select: none; }
th:hover { color: #fff; }
tr:hover td { background: #23273a; }
.toolbar { margin: 10px 0; display: flex; gap: 12px; align-items: center; }
.toolbar input, .toolbar select {
  background: #23273a; color: #d8dce5;
  border: 1px solid #2a2f3c; padding: 5px 8px; border-radius: 3px; font-size: 13px;
}
.online { color: #27ae60; }
.offline { color: #6b7388; }
#map-canvas { background: #0c0e13; border: 1px solid #2a2f3c; display: block; margin: 10px 0; cursor: crosshair; }
.map-wrap { position: relative; display: inline-block; }
.map-tooltip {
  position: absolute; pointer-events: none;
  background: rgba(28, 31, 40, 0.95); color: #d8dce5;
  border: 1px solid #3a4054; border-radius: 3px;
  padding: 4px 7px; font-size: 12px; font-family: ui-monospace, monospace;
  white-space: nowrap; z-index: 20;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  display: none;
}
.map-tooltip.show { display: block; }
.map-tooltip .abbr { color: #f2c94c; font-weight: 600; }
.map-tooltip .coord { color: #6b7388; }
.search-box { position: relative; }
.search-box input { width: 220px; }
#map-search-results {
  position: absolute;
  top: 28px; left: 0;
  background: #1c1f28;
  border: 1px solid #3a4054;
  border-radius: 3px;
  min-width: 280px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 10;
  display: none;
}
#map-search-results.open { display: block; }
#map-search-results .row {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid #23273a;
}
#map-search-results .row:hover { background: #2a2f3c; }
#map-search-results .row .coord { color: #6b7388; font-family: ui-monospace, monospace; margin-right: 6px; }
#map-search-results .row .abbr  { color: #f2c94c; font-size: 11px; margin-left: 4px; }
#map-search-results .row.ours   { background: #23273a; }
.hover-info { font-family: ui-monospace, monospace; color: #9aa3b3; font-size: 12px; }
#map-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #9aa3b3; margin-top: 6px; }
#map-legend .chip { display: inline-flex; align-items: center; gap: 5px; }
#map-legend .dot { width: 10px; height: 10px; border-radius: 50%; }
ol#power-leader { padding-left: 20px; font-size: 13px; }
ol#power-leader li { margin: 3px 0; }
ol#power-leader b { color: #f2c94c; }
canvas#power-chart { max-height: 320px; background: #1c1f28; border: 1px solid #2a2f3c; border-radius: 4px; padding: 10px; }