:root {
  --bg:        #08090b;
  --panel:     #0d0e11;
  --panel-2:   #101114;
  --line:      rgba(255, 255, 255, .075);
  --line-2:    rgba(255, 255, 255, .14);
  --amber:     #e8a33d;
  --amber-2:   #f2b85c;
  --amber-dim: rgba(232, 163, 61, .16);
  --red:       #d6453a;
  --green:     #4f9f6a;
  --text:      #dcdcd8;
  --dim:       #7a7a80;
  --dim2:      #55555b;
  --num:       "Bahnschrift", "DIN Alternate", "Roboto Condensed", sans-serif;
  --cn:        "Microsoft YaHei", "PingFang SC", sans-serif;
}
body { background: #050608; }
#stage {
  background:
    radial-gradient(60% 55% at 52% 92%, rgba(232, 163, 61, .10), transparent 70%),
    radial-gradient(40% 40% at 50% 40%, rgba(255, 255, 255, .02), transparent 70%),
    #08090b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 90px rgba(0, 0, 0, .8);
}
.hud-top {
  background: linear-gradient(180deg, #0b0c0f 0%, #0a0b0d 100%);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.brand b { letter-spacing: 3px; color: #f0ede6; font-weight: 700; }
.brand small { color: var(--dim2); letter-spacing: 3px; }
.top-sep { background: var(--line-2); }
.layer-num i { color: var(--dim); font-style: normal; }
.layer-num span { color: var(--amber); }
.layer-meta .area { color: #e9e6df; }
.layer-meta .theme { color: var(--dim); }
.mods .chip {
  background: transparent;
  border: 1px solid rgba(232, 163, 61, .45);
  color: var(--amber-2);
  border-radius: 2px;
  letter-spacing: 1px;
}
.mods .chip.bad { border-color: rgba(214, 69, 58, .5); color: #e0786c; }
.wall-meter .lbl span { color: var(--dim); letter-spacing: 1px; }
.icon-btn {
  background: transparent; border: 1px solid var(--line-2);
  border-radius: 2px; color: var(--dim);
}
.icon-btn:hover { border-color: var(--amber); color: var(--amber); }
.res-panel, .march-panel {
  background: rgba(11, 12, 15, .92);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: none;
  backdrop-filter: none;
}
.panel-head {
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  letter-spacing: 3px;
  font-size: 11px;
  background: transparent;
}
.panel-head b { color: var(--amber); font-family: var(--num); }
.res-grid { gap: 0; }
.res-cell {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 12px;
}
.res-cell:nth-child(2n) { border-right: 0; }
.res-cell.wide { border-right: 0; }
.res-cell .ic {
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--dim);
  font-size: 12px;
}
.res-cell .nm { color: var(--dim2); letter-spacing: 1.5px; font-size: 10.5px; }
.res-cell .vl { color: #ece9e2; font-family: var(--num); font-weight: 600; }
.res-cell .sub { color: var(--dim2); font-size: 10.5px; }
.power-box { border-top: 1px solid var(--line); background: transparent; }
.power-box .t { color: var(--dim); letter-spacing: 2px; }
.power-box .t b { color: #dcdcd8; }
.power-box .bus .n { color: var(--dim); }
.power-box .bus .v { color: var(--amber-2); font-family: var(--num); }
.bar, .ratio-bar, .vs-row .bar {
  background: rgba(255, 255, 255, .06);
  border-radius: 0;
  height: 3px;
  overflow: hidden;
}
.bar > i, .ratio-bar > i, .vs-row .bar > i { border-radius: 0; }
.bar.green > i, .ratio-bar > i { background: var(--green); }
.bar.red > i { background: var(--red); }
.bar.ice > i { background: var(--amber); }
.kill-prog, .army-mini, .vs-box { border-bottom: 1px solid var(--line); background: transparent; }
.kill-prog .row span, .army-mini .row span { color: var(--dim); letter-spacing: 1px; }
.kill-prog .row b, .army-mini .row b { color: #e6e3dc; font-family: var(--num); }
.vs-row .k { color: var(--dim); }
.verdict {
  border-radius: 2px;
  border: 1px solid var(--line-2);
  background: transparent;
  letter-spacing: 1px;
}
.verdict.strong { color: #7fc494; border-color: rgba(79, 159, 106, .5); }
.verdict.even   { color: var(--amber-2); border-color: rgba(232, 163, 61, .5); }
.verdict.weak   { color: #e0786c; border-color: rgba(214, 69, 58, .5); }
.unit-chips .uchip {
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  color: var(--dim);
}
.unit-chips .uchip b { color: #e6e3dc; font-family: var(--num); }
.unit-chips .uchip.none { border-style: dashed; color: var(--dim2); }
.seg {
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 0;
  gap: 0;
}
.seg button {
  background: transparent; border: 0; border-right: 1px solid var(--line);
  border-radius: 0; color: var(--dim); letter-spacing: 1px;
  height: 28px;
}
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--amber-dim); color: var(--amber-2); }
.march-btn {
  background: transparent;
  border: 1px solid var(--amber);
  border-radius: 2px;
  color: var(--amber);
  letter-spacing: 8px;
  font-weight: 600;
  box-shadow: none;
  animation: none;
  margin: 12px 16px 16px;
}
.march-btn:hover:not(:disabled) { background: var(--amber-dim); color: var(--amber-2); }
.march-btn:not(:disabled) { animation: pulseBtn 2.6s infinite; }
.march-btn:disabled {
  border-color: var(--line-2); color: var(--dim2); background: transparent;
}
.hud-bottom {
  background: linear-gradient(180deg, #0a0b0d 0%, #08090b 100%);
  border-top: 1px solid var(--line);
  box-shadow: none;
}
.nav-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--dim);
  position: relative;
  transition: border-color .15s, color .15s;
}
.nav-btn:hover { border-color: var(--amber); color: var(--amber-2); background: transparent; }
.nav-btn .ico { color: inherit; opacity: .8; }
.nav-btn .lb { letter-spacing: 1px; }
.nav-btn .dot { display: none; }
.nav-btn .badge {
  position: absolute; top: 4px; right: 5px;
  font-family: var(--num); font-size: 10px; line-height: 1;
  color: var(--amber); letter-spacing: 0;
}
.spd-btn {
  background: transparent; border: 1px solid var(--line);
  border-radius: 2px; color: var(--dim); font-family: var(--num);
}
.spd-btn.on { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }
.modal-layer { background: rgba(3, 4, 6, .82); backdrop-filter: none; }
.modal {
  background: #0b0c0f;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .9);
}
.modal-head {
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.modal-head h2 { letter-spacing: 3px; font-weight: 700; color: #f0ede6; }
.modal-head .sub { color: var(--dim2); letter-spacing: 1px; }
.modal-head .x {
  background: transparent; border: 1px solid var(--line-2);
  border-radius: 2px; color: var(--dim);
}
.modal-head .x:hover { border-color: var(--amber); color: var(--amber); }
.modal-foot { border-top: 1px solid var(--line); background: transparent; }
.card {
  background: #0f1013;
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: none;
}
.card:hover { border-color: rgba(232, 163, 61, .55); background: #111216; }
.card .hd .nm { color: #e9e6df; letter-spacing: 1px; }
.card .hd .lv { color: var(--amber); font-family: var(--num); }
.card .desc { color: var(--dim); }
.card .eff { color: var(--amber-2); }
.card .small, .card .dim { color: var(--dim2); }
.card.disabled { opacity: .45; }
.bld-grid { gap: 8px; }
.btn {
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  color: #cfccc5;
  letter-spacing: 1px;
  transition: border-color .15s, color .15s, background .15s;
}
.btn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber-2); }
.btn.primary { border-color: var(--amber); color: var(--amber); background: transparent; }
.btn.primary:hover { background: var(--amber-dim); }
.btn.danger { border-color: rgba(214, 69, 58, .55); color: #e0786c; }
.btn.danger:hover { background: rgba(214, 69, 58, .12); }
.btn:disabled { border-color: var(--line); color: var(--dim2); background: transparent; }
.unit-row { border-bottom: 1px solid var(--line); background: transparent; }
.unit-row:hover { background: rgba(255, 255, 255, .018); }
.unit-row .nm { color: #e9e6df; letter-spacing: 1px; }
.unit-row .stats span { color: var(--dim); }
.unit-row .stats b { color: #e6e3dc; font-family: var(--num); }
.pad-card {
  background: #0f1013;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.pad-card:hover { border-color: rgba(232, 163, 61, .5); }
.pad-card.empty { border-style: dashed; color: var(--dim2); }
.pad-card.sel { border-color: var(--amber); background: rgba(232, 163, 61, .06); }
.tower-card {
  background: #0f1013;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.tower-card:hover { border-color: rgba(232, 163, 61, .5); }
.tower-card .cost { color: var(--amber-2); font-family: var(--num); }
.pick-card {
  background: #0f1013;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.pick-card:hover { border-color: var(--amber); background: #131418; }
.pick-card .tag { color: var(--amber); letter-spacing: 1px; }
input[type="range"] { accent-color: var(--amber); }
.toast {
  background: #0f1013;
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--amber);
  border-radius: 2px;
  color: #dcdcd8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .7);
}
.toast.bad { border-left-color: var(--red); }
.toast.ok { border-left-color: var(--green); }
.intro h1 { letter-spacing: 14px; font-weight: 700; }
.intro .loop > div {
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: transparent;
  color: var(--dim);
}
.intro .loop b { color: var(--amber); }
.intro p { color: #b9b6ae; }
.intro p.dim { color: var(--dim); }
body::after { display: none; }
#vignette { display: none; }