:root {
  --gold: #e2c98e;
  --ink: #e8eef2;
  --dim: #9eb0bc;
  --panel: #0d1822;
  --edge: #5a6c78;
  --console-height: 168px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: #0a1218;
  color: var(--ink);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
#app {
  max-width: 430px;
  margin: 0 auto;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #0c141c;
}
#stage {
  display: block;
  width: 100%;
  height: 100%;
  background: #6a8aa0;
}
.vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 38%, transparent 58%, rgba(8, 14, 20, .28) 100%);
}
.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(#0d1822f0, #0d182200);
}
.brand {
  color: var(--gold);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 3px;
  font-size: 15px;
  padding: 6px 8px;
  border: 1px solid var(--edge);
  background: #14202a;
}
.operation {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.operation b {
  font-size: 10px;
  letter-spacing: 1.4px;
  color: #c9d6de;
}
.operation span { color: var(--gold); font-size: 12px; letter-spacing: 1px; }
.toolbar { display: flex; gap: 6px; }
.icon-button {
  border: 1px solid var(--edge);
  background: #14202a;
  color: var(--ink);
  font-size: 11px;
  padding: 5px 8px;
  cursor: pointer;
}
.xp-bar {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--console-height) - 8px);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 22px;
  padding: 0 16px;
  pointer-events: none;
  background: linear-gradient(#02070c00, #02070ccc 40%, #02070c00);
}
.xp-bar span { font-size: 11px; color: var(--gold); letter-spacing: 1px; white-space: nowrap; }
.xp-track {
  flex: 1;
  height: 7px;
  background: #1a2630;
  border: 1px solid #3a4a54;
  overflow: hidden;
}
.xp-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c9a24a, #f2d493); }
.powers {
  position: absolute;
  top: 52px;
  right: 8px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.powers-head {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 0 1px 3px #000;
}
.powers-head b { margin-left: 6px; }
.power-button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid #52626c;
  background: radial-gradient(circle at 40% 30%, #2a3a44, #101820);
  color: var(--ink);
  cursor: pointer;
  position: relative;
}
.power-button span {
  position: absolute;
  right: 58px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 11px;
  color: var(--gold);
  pointer-events: none;
}
.power-button kbd {
  font-size: 12px;
  font-family: inherit;
}
.power-button.big { width: 58px; height: 58px; }
.power-button.locked { opacity: .42; cursor: default; }
.power-button:disabled { opacity: .45; }
.hud {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 8;
  height: var(--console-height);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: 1.05fr 1.15fr 0.85fr;
  gap: 6px;
  background: linear-gradient(#152028, #0b141c);
  border-top: 1px solid var(--edge);
}
.instrument-heading {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.tactical-body { display: flex; gap: 6px; align-items: center; }
.radar-screen {
  position: relative;
  width: 92px;
  flex: none;
}
.radar-screen canvas {
  width: 92px;
  height: 54px;
  display: block;
  background: #6a9aac;
  border: 1px solid #3a5a68;
}
.radar-screen span {
  position: absolute;
  left: 4px; bottom: 2px;
  font-size: 8px;
  letter-spacing: 1px;
  color: #123038;
}
.score-readout small { display: block; font-size: 10px; color: var(--dim); }
.score-readout b { font-size: 26px; line-height: 1; color: #f2d493; }
.score-readout span { display: block; font-size: 10px; color: #8de4ff; }
.line-track {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 10px;
  color: var(--dim);
}
.line-track b { margin-left: auto; color: var(--ink); }
.line-meter {
  flex: 1;
  height: 6px;
  background: #1a2630;
  border: 1px solid #3a4a54;
  overflow: hidden;
}
.line-meter i { display: block; height: 100%; width: 100%; background: #48c8b4; }
.hud-selection { display: flex; gap: 7px; align-items: center; }
.unit-portrait {
  width: 44px;
  flex: none;
}
.unit-portrait img {
  width: 44px;
  height: 54px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--edge);
}
.unit-portrait span { display: none; }
.unit-info small { display: none; }
.unit-info .instrument-heading {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.unit-info strong { color: var(--ink); font-size: 12px; letter-spacing: 1px; }
.unit-numbers {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--dim);
}
.unit-numbers b { color: var(--ink); font-size: 15px; }
.integrity {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
}
.integrity div {
  flex: 1;
  height: 6px;
  background: #1a2630;
  overflow: hidden;
}
.integrity i { display: block; height: 100%; width: 100%; background: #48c8b4; }
.orders { display: none; }
.roster {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
.roster button {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--edge);
  background: #14202a;
  cursor: pointer;
  flex-shrink: 0;
}
.roster button.ready { outline: 1px solid var(--gold); }
.roster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.roster b {
  position: absolute;
  right: 1px; bottom: 0;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}
.welcome {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(var(--console-height) + 18px);
  z-index: 9;
  background: linear-gradient(#152028f5, #0d1822f5);
  border: 1px solid var(--edge);
  padding: 12px;
}
.playing .welcome, .playing .deploy-foot { display: none; }
.eyebrow {
  display: block;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.welcome h1 {
  margin: 0 0 6px;
  letter-spacing: 4px;
  font-size: 22px;
}
.welcome p { margin: 0 0 10px; color: var(--dim); font-size: 13px; line-height: 1.55; }
.primary, .secondary {
  width: 100%;
  border: 1px solid #8a6a30;
  background: linear-gradient(#c9a24a, #8a6a28);
  color: #1a1208;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 10px;
  cursor: pointer;
}
.secondary {
  background: #14202a;
  color: var(--ink);
  border-color: var(--edge);
  margin-top: 8px;
}
.controls-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--dim);
}
kbd {
  border: 1px solid #4a5a64;
  background: #101820;
  padding: 1px 5px;
  font-size: 10px;
}
.console-record {
  margin-top: 8px;
  font-size: 12px;
  color: var(--dim);
}
.console-record b { color: var(--gold); }
.deploy-foot {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  z-index: 9;
  text-align: center;
  font-size: 11px;
  color: #7a8a94;
}
.levelup {
  position: absolute;
  inset: 0;
  z-index: 14;
  background: #02070c99;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.levelup[hidden] { display: none !important; }
.levelup-card {
  width: 100%;
  max-width: 380px;
  background: linear-gradient(#1a2832, #0d1822);
  border: 1px solid var(--edge);
  padding: 14px;
}
.levelup-card h2 { margin: 4px 0 6px; letter-spacing: 3px; color: var(--gold); }
.levelup-card > p { margin: 0 0 10px; color: var(--dim); font-size: 13px; }
.levelup-options { display: flex; flex-direction: column; gap: 8px; }
.levelup-opt {
  text-align: left;
  border: 1px solid var(--edge);
  background: #14202a;
  color: var(--ink);
  padding: 10px 12px;
  cursor: pointer;
}
.levelup-opt:hover, .levelup-opt:focus { border-color: var(--gold); }
.levelup-opt b { display: block; color: var(--gold); letter-spacing: 1px; margin-bottom: 4px; }
.levelup-opt span { font-size: 12px; color: var(--dim); line-height: 1.45; }

.modal {
  position: absolute;
  inset: 0;
  z-index: 12;
  background: #02070c88;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.modal[hidden] { display: none !important; }
.modal-card {
  width: 100%;
  background: linear-gradient(#152028, #0d1822);
  border: 1px solid var(--edge);
  padding: 16px;
}
.modal-card h2 { margin: 6px 0 8px; letter-spacing: 3px; }
.modal-card p { color: var(--dim); line-height: 1.55; }
.modal-card p b { color: var(--ink); }
.text-link {
  display: block;
  text-align: center;
  margin-top: 10px;
  color: var(--dim);
  font-size: 12px;
}
@media (max-height: 720px) {
  :root { --console-height: 132px; }
  .hud { grid-template-columns: 1fr 1fr; }
  .hud-command { display: none; }
  .power-button span { display: none; }
}