:root {
  --bg: #06080c;
  --panel: rgba(13, 17, 23, .88);
  --panel-2: rgba(19, 24, 32, .92);
  --line: rgba(232, 163, 61, .20);
  --line-2: rgba(140, 160, 180, .14);
  --amber: #e8a33d;
  --amber-2: #ffc978;
  --rust: #c8552f;
  --ice: #6fa8d8;
  --ok: #68d391;
  --bad: #ff5a5a;
  --violet: #a98bff;
  --text: #e6ebf2;
  --dim: #8b96a5;
  --dim2: #5c6674;
  --num: "Bahnschrift", "DIN Alternate", "Oswald", "Microsoft YaHei", system-ui, sans-serif;
  --cn: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%; background: #000; overflow: hidden;
  font-family: var(--cn); color: var(--text);
  user-select: none;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 4px);
  opacity: .30; mix-blend-mode: multiply;
}
#app { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 40%, #0d1015, #000 70%); }
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  background: #06080c; overflow: hidden;
  box-shadow: 0 0 120px rgba(232,163,61,.07), 0 0 0 1px rgba(255,255,255,.04);
}
#game { position: absolute; inset: 0; width: 1920px; height: 1080px; }
#vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,.38) 100%);
}
.hud-top {
  position: absolute; left: 0; right: 0; top: 0; height: 78px;
  display: flex; align-items: center; gap: 22px; padding: 0 24px;
  background: linear-gradient(180deg, rgba(6,8,12,.96), rgba(6,8,12,.55) 78%, transparent);
  z-index: 30;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand b {
  font-family: var(--num); font-size: 26px; letter-spacing: 3px;
  background: linear-gradient(120deg, #ffd79a, var(--amber) 40%, var(--rust));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}
.brand small { color: var(--dim2); font-size: 11px; letter-spacing: 2px; }
.top-sep { width: 1px; height: 40px; background: var(--line-2); }
.layer-box { display: flex; align-items: center; gap: 12px; }
.layer-num { font-family: var(--num); font-weight: 800; font-size: 34px; line-height: 1; color: var(--amber-2); }
.layer-num i { font-size: 15px; font-style: normal; color: var(--dim); margin-right: 3px; }
.layer-meta { display: flex; flex-direction: column; gap: 2px; }
.layer-meta .area { font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.layer-meta .theme { font-size: 11px; color: var(--dim2); letter-spacing: 1px; }
.mods { display: flex; gap: 6px; flex-wrap: wrap; max-width: 420px; }
.mod-chip {
  display: flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 4px 9px;
  border: 1px solid rgba(232,163,61,.28); border-radius: 4px;
  background: rgba(232,163,61,.08); color: var(--amber-2); white-space: nowrap;
}
.mod-chip.bad { border-color: rgba(255,90,90,.3); background: rgba(255,90,90,.08); color: #ff9c9c; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.wall-meter { width: 210px; }
.wall-meter .lbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); margin-bottom: 4px; }
.wall-meter .lbl b { font-family: var(--num); color: var(--text); font-size: 12px; }
.bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; position: relative; }
.bar > i { display: block; height: 100%; border-radius: 4px; transition: width .25s; }
.bar.green > i { background: linear-gradient(90deg, #2f7d55, #68d391); }
.bar.amber > i { background: linear-gradient(90deg, #7a4d16, #e8a33d); }
.bar.red > i { background: linear-gradient(90deg, #7a1a1a, #ff5a5a); }
.bar.ice > i { background: linear-gradient(90deg, #23577f, #6fa8d8); }
.icon-btn {
  width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.04); color: var(--dim); cursor: pointer;
  font-size: 17px; display: grid; place-items: center; transition: .15s;
}
.icon-btn:hover { color: var(--amber); border-color: rgba(232,163,61,.5); background: rgba(232,163,61,.1); }
.res-panel {
  position: absolute; left: 24px; top: 92px; width: 424px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  backdrop-filter: blur(10px); overflow: hidden; z-index: 20;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 10px; border-bottom: 1px solid var(--line-2);
  font-size: 12px; letter-spacing: 2px; color: var(--dim);
}
.panel-head b { color: var(--amber); font-weight: 700; letter-spacing: 1px; font-size: 13px; }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); }
.res-cell { background: rgba(10,13,18,.9); padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.res-cell .ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; flex: none; }
.res-cell .txt { min-width: 0; }
.res-cell .nm { font-size: 11px; color: var(--dim); letter-spacing: 1px; }
.res-cell .vl { font-family: var(--num); font-size: 18px; font-weight: 700; line-height: 1.15; }
.res-cell .sub { font-size: 10.5px; color: var(--dim2); font-family: var(--num); }
.res-cell.wide { grid-column: span 2; }
.ic.wood { background: rgba(155,214,122,.12); color: #9bd67a; }
.ic.gold { background: rgba(232,163,61,.12); color: var(--amber); }
.ic.core { background: rgba(169,139,255,.12); color: var(--violet); }
.ic.tech { background: rgba(111,168,216,.12); color: var(--ice); }
.ic.merit { background: rgba(255,120,90,.12); color: #ff8a5c; }
.ic.exp { background: rgba(104,211,145,.12); color: var(--ok); }
.ic.pt { background: rgba(255,201,120,.12); color: var(--amber-2); }
.power-box { padding: 12px 16px 14px; border-top: 1px solid var(--line-2); }
.power-box .t { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); margin-bottom: 8px; }
.power-box .t b { font-family: var(--num); color: var(--text); }
.bus { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11px; }
.bus .n { width: 46px; color: var(--dim); }
.bus .bar { flex: 1; height: 6px; }
.bus .v { width: 58px; text-align: right; font-family: var(--num); font-size: 12px; }
.march-panel {
  position: absolute; right: 24px; top: 92px; width: 380px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  backdrop-filter: blur(10px); z-index: 20; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.kill-prog { padding: 14px 16px; }
.kill-prog .row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--dim); margin-bottom: 7px; }
.kill-prog .row b { font-family: var(--num); color: var(--text); font-size: 14px; }
.ratio-bar { height: 10px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; }
.ratio-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #6b4a12, var(--amber), #ffd79a); transition: width .2s; }
.ratio-bar.full > i { background: linear-gradient(90deg, #2f7d55, #68d391); }
.army-mini { padding: 12px 16px; border-top: 1px solid var(--line-2); }
.army-mini .row { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--dim); margin-bottom: 8px; }
.army-mini .row b { font-family: var(--num); color: var(--text); }
.unit-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.uchip {
  font-size: 10.5px; padding: 3px 7px; border-radius: 4px;
  background: rgba(111,168,216,.1); border: 1px solid rgba(111,168,216,.22); color: #a8d0ee;
}
.uchip.none { background: rgba(255,255,255,.03); border-color: var(--line-2); color: var(--dim2); }
.vs-box { padding: 12px 16px; border-top: 1px solid var(--line-2); }
.vs-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; margin-bottom: 7px; }
.vs-row .k { width: 74px; color: var(--dim); }
.vs-row .bar { flex: 1; height: 8px; }
.verdict { margin-top: 6px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 2px; padding: 6px; border-radius: 6px; }
.verdict.strong { color: var(--ok); background: rgba(104,211,145,.1); }
.verdict.even { color: var(--amber); background: rgba(232,163,61,.1); }
.verdict.weak { color: var(--bad); background: rgba(255,90,90,.1); }
.verdict.unknown { color: var(--dim); background: rgba(255,255,255,.03); }
.march-btn {
  display: block; width: calc(100% - 32px); margin: 4px 16px 16px; height: 54px;
  border: none; border-radius: 10px; cursor: pointer; font-family: var(--cn);
  font-size: 17px; font-weight: 800; letter-spacing: 4px; color: #1a1207;
  background: linear-gradient(135deg, #ffd79a, var(--amber) 55%, #c8853a);
  box-shadow: 0 8px 24px rgba(232,163,61,.28), inset 0 1px 0 rgba(255,255,255,.4);
  transition: .16s;
}
.march-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(232,163,61,.4); }
.march-btn:disabled { background: rgba(255,255,255,.07); color: var(--dim2); box-shadow: none; cursor: not-allowed; }
.march-btn.ready { animation: pulseBtn 1.6s infinite; }
@keyframes pulseBtn {
  0%, 100% { box-shadow: 0 8px 24px rgba(232,163,61,.28); }
  50% { box-shadow: 0 10px 40px rgba(232,163,61,.62); }
}
.seg { display: flex; gap: 0; border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; }
.seg button {
  flex: 1; padding: 6px 0; font-size: 11px; background: transparent; border: none;
  color: var(--dim); cursor: pointer; font-family: var(--cn); transition: .15s;
}
.seg button.on { background: rgba(232,163,61,.16); color: var(--amber-2); }
.hud-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  display: flex; align-items: center; gap: 10px; padding: 0 24px;
  background: linear-gradient(0deg, rgba(6,8,12,.98), rgba(6,8,12,.6) 70%, transparent);
  z-index: 30;
}
.nav-group { display: flex; gap: 8px; }
.nav-btn {
  min-width: 96px; height: 62px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.035);
  color: var(--dim); cursor: pointer; font-family: var(--cn);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: .15s; position: relative;
}
.nav-btn:hover { border-color: rgba(232,163,61,.45); color: var(--amber-2); background: rgba(232,163,61,.08); transform: translateY(-2px); }
.nav-btn .ico { font-size: 19px; line-height: 1; }
.nav-btn .lb { font-size: 11.5px; letter-spacing: 1px; }
.nav-btn .dot {
  position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bad); box-shadow: 0 0 8px var(--bad);
}
.nav-btn.on { border-color: var(--amber); color: var(--amber-2); background: rgba(232,163,61,.12); }
.speed-group { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.spd-btn {
  width: 46px; height: 62px; border-radius: 9px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.035); color: var(--dim); cursor: pointer; font-family: var(--num);
  font-size: 15px; font-weight: 700; transition: .15s;
}
.spd-btn.on { border-color: var(--amber); color: var(--amber-2); background: rgba(232,163,61,.12); }
.modal-layer {
  position: absolute; inset: 0; z-index: 100; display: none;
  background: rgba(3,5,8,.72); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
.modal-layer.show { display: flex; }
.modal {
  width: 1360px; max-height: 900px; background: linear-gradient(180deg, #10141b, #0a0d12);
  border: 1px solid rgba(232,163,61,.24); border-radius: 18px;
  box-shadow: 0 40px 120px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
  display: flex; flex-direction: column; overflow: hidden;
  animation: modalIn .22s ease-out;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.modal-head {
  display: flex; align-items: center; gap: 14px; padding: 20px 26px;
  border-bottom: 1px solid var(--line-2); flex: none;
}
.modal-head h2 { font-size: 20px; letter-spacing: 3px; font-weight: 800; }
.modal-head .sub { font-size: 12px; color: var(--dim2); letter-spacing: 1px; }
.modal-head .x {
  margin-left: auto; width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--dim);
  font-size: 18px; display: grid; place-items: center;
}
.modal-head .x:hover { color: var(--bad); border-color: rgba(255,90,90,.45); background: rgba(255,90,90,.1); }
.modal-body { padding: 22px 26px; overflow-y: auto; flex: 1; }
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb { background: rgba(232,163,61,.28); border-radius: 4px; }
.modal-foot { padding: 14px 26px; border-top: 1px solid var(--line-2); display: flex; gap: 10px; align-items: center; }
.bld-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card {
  background: rgba(255,255,255,.025); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 16px; transition: .15s; position: relative;
}
.card:hover { border-color: rgba(232,163,61,.35); background: rgba(232,163,61,.04); }
.card.disabled { opacity: .45; }
.card .hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.card .hd .nm { font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.card .hd .lv { margin-left: auto; font-family: var(--num); font-size: 13px; color: var(--amber); }
.card .desc { font-size: 12px; color: var(--dim); line-height: 1.6; min-height: 38px; }
.card .eff { font-size: 12px; color: var(--ok); margin: 8px 0; line-height: 1.55; }
.card .cost { display: flex; gap: 10px; font-size: 12px; color: var(--dim); margin-bottom: 10px; font-family: var(--num); }
.card .cost .no { color: var(--bad); }
.btn {
  padding: 8px 14px; border-radius: 7px; border: 1px solid rgba(232,163,61,.35);
  background: rgba(232,163,61,.1); color: var(--amber-2); cursor: pointer;
  font-family: var(--cn); font-size: 12.5px; letter-spacing: 1px; transition: .15s;
}
.btn:hover { background: rgba(232,163,61,.2); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: linear-gradient(135deg, #ffd79a, var(--amber)); color: #1a1207; font-weight: 700; border: none; }
.btn.ghost { background: transparent; border-color: var(--line-2); color: var(--dim); }
.btn.ghost:hover { color: var(--text); border-color: var(--line-2); background: rgba(255,255,255,.05); }
.btn.sm { padding: 5px 9px; font-size: 11.5px; }
.btn.danger { border-color: rgba(255,90,90,.4); background: rgba(255,90,90,.1); color: #ff9c9c; }
.tower-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pad-card {
  border: 1px solid var(--line-2); border-radius: 12px; padding: 12px;
  background: rgba(255,255,255,.025); text-align: center; cursor: pointer; transition: .15s;
}
.pad-card:hover { border-color: rgba(232,163,61,.4); }
.pad-card.empty { border-style: dashed; color: var(--dim2); }
.pad-card.locked { opacity: .35; cursor: not-allowed; }
.pad-card .nm { font-size: 13px; font-weight: 700; margin: 6px 0 3px; }
.pad-card .st { font-family: var(--num); font-size: 11px; color: var(--dim); font-size: 11px; }
.unit-row {
  display: grid; grid-template-columns: 150px 1fr 200px 120px; gap: 14px; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid var(--line-2);
}
.unit-row:last-child { border-bottom: none; }
.unit-row .nm { font-size: 14px; font-weight: 700; }
.unit-row .nm small { display: block; font-size: 11px; color: var(--dim2); font-weight: 400; margin-top: 3px; }
.unit-row .stats { display: flex; gap: 14px; font-family: var(--num); font-size: 12px; color: var(--dim); }
.unit-row .stats b { color: var(--text); font-size: 13px; }
.ctrl { display: flex; align-items: center; gap: 6px; }
.ctrl button {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.04); color: var(--text); cursor: pointer; font-size: 15px;
}
.ctrl button:hover { border-color: var(--amber); color: var(--amber); }
.ctrl .cnt { width: 46px; text-align: center; font-family: var(--num); font-size: 15px; font-weight: 700; }
.power-sliders { display: grid; grid-template-columns: 1fr 340px; gap: 26px; }
.slider-row { margin-bottom: 22px; }
.slider-row .top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
.slider-row .top b { font-family: var(--num); font-size: 18px; color: var(--amber-2); }
input[type=range] {
  width: 100%; height: 8px; -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.08); border-radius: 4px; outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #ffd79a, var(--amber)); cursor: pointer;
  box-shadow: 0 0 0 4px rgba(232,163,61,.15);
}
.readout { background: rgba(255,255,255,.025); border: 1px solid var(--line-2); border-radius: 12px; padding: 16px; }
.readout .k { display: flex; justify-content: space-between; font-size: 12.5px; padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }
.readout .k:last-child { border: none; }
.readout .k span { color: var(--dim); }
.readout .k b { font-family: var(--num); color: var(--text); }
.card-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pick-card {
  border: 1px solid rgba(232,163,61,.28); border-radius: 14px; padding: 22px;
  background: linear-gradient(170deg, rgba(232,163,61,.10), rgba(255,255,255,.02));
  cursor: pointer; transition: .18s; text-align: center;
}
.pick-card:hover { transform: translateY(-4px); border-color: var(--amber); box-shadow: 0 16px 40px rgba(232,163,61,.22); }
.pick-card .ic { font-size: 34px; margin-bottom: 10px; }
.pick-card .nm { font-size: 16px; font-weight: 800; letter-spacing: 2px; margin-bottom: 8px; }
.pick-card .ds { font-size: 12.5px; color: var(--dim); line-height: 1.65; }
.gear-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.gear-slot {
  border: 1px solid var(--line-2); border-radius: 10px; padding: 12px; min-height: 78px;
  background: rgba(255,255,255,.02);
}
.gear-slot .sl { font-size: 10.5px; color: var(--dim2); letter-spacing: 1px; }
.gear-slot .gn { font-size: 13px; font-weight: 700; margin-top: 5px; }
.gear-slot .gi { font-family: var(--num); font-size: 11px; color: var(--dim); margin-top: 3px; }
.toast-layer { position: absolute; left: 50%; top: 100px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.u-toast {
  padding: 10px 22px; border-radius: 8px; font-size: 13px; letter-spacing: 1px;
  background: rgba(10,13,18,.94); border: 1px solid rgba(232,163,61,.35); color: var(--amber-2);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: tin .25s;
}
.u-toast.bad { border-color: rgba(255,90,90,.4); color: #ff9c9c; }
.u-toast.ok { border-color: rgba(104,211,145,.4); color: var(--ok); }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mt { margin-top: 16px; }
.dim { color: var(--dim); }
.small { font-size: 12px; }
.mono { font-family: var(--num); }
.tag { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 10.5px; background: rgba(232,163,61,.12); color: var(--amber-2); border: 1px solid rgba(232,163,61,.2); }
.intro { text-align: center; padding: 20px 40px 30px; }
.intro h1 {
  font-family: var(--num); font-size: 58px; letter-spacing: 14px; font-weight: 800;
  background: linear-gradient(120deg, #ffd79a, var(--amber) 45%, var(--rust));
  -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 6px;
}
.intro .en { font-family: var(--num); font-size: 12px; letter-spacing: 8px; color: var(--dim2); margin-bottom: 26px; }
.intro .loop { display: flex; justify-content: center; gap: 0; margin: 26px 0; flex-wrap: wrap; }
.intro .loop div {
  padding: 10px 18px; font-size: 13px; color: var(--dim); position: relative;
}
.intro .loop div b { color: var(--amber-2); }
.intro .loop div + div::before { content: "→"; position: absolute; left: -6px; color: var(--dim2); }
.intro p { font-size: 13.5px; color: var(--dim); line-height: 2; max-width: 700px; margin: 0 auto 10px; }