* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #07080a; }
body {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #d8dde4;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}
#stage { position: fixed; inset: 0; }
#game { width: 100%; height: 100%; display: block; cursor: crosshair; }

#dragbox {
  position: fixed; border: 1px solid #7dffb0; background: rgba(125, 255, 176, 0.08);
  pointer-events: none; z-index: 30;
}

/* top bar */
#topbar {
  position: fixed; top: 0; left: 0; right: 172px; height: 40px; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(10, 12, 9, 0.92), rgba(10, 12, 9, 0.6));
  border-bottom: 1px solid #2a2f24;
  font-size: 14px; letter-spacing: 0.04em;
}
.tb-left { display: flex; gap: 16px; }
#tb-mission { color: #9aa38e; font-weight: 600; }
#tb-timer { color: #ffb35c; font-variant-numeric: tabular-nums; font-weight: 700; }
#tb-timer.danger { color: #ff5a4a; animation: blink 1s steps(2) infinite; }
.tb-right { display: flex; gap: 14px; align-items: center; }
.credits { color: #ffd257; font-weight: 800; font-variant-numeric: tabular-nums; }
.credits.flash { animation: fundflash 0.5s; }
@keyframes fundflash { 0%, 100% { color: #ffd257; } 50% { color: #ff4040; } }
.power { color: #7dd6ff; font-weight: 600; }
.power.low { color: #ff5a4a; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

/* objectives */
#objectives {
  position: fixed; top: 48px; left: 10px; z-index: 20;
  background: rgba(8, 10, 7, 0.82); border: 1px solid #2a2f24; border-left: 3px solid #ffb35c;
  padding: 8px 12px; font-size: 12.5px; line-height: 1.8; max-width: 280px;
}
#objectives .done { color: #7dffb0; }
#objectives .done::before { content: "✔ "; }
#objectives .todo { color: #c9cfb9; }
#objectives .todo::before { content: "▸ "; color: #ffb35c; }

/* message log */
#msglog {
  position: fixed; left: 10px; bottom: 12px; z-index: 20;
  display: flex; flex-direction: column; gap: 3px; pointer-events: none;
  font-size: 13px; text-shadow: 0 1px 2px #000;
}
#msglog .m { color: #b6c3a4; animation: msgfade 6s forwards; }
#msglog .m.alarm { color: #ff7a6a; font-weight: 700; }
@keyframes msgfade { 0% { opacity: 0; transform: translateX(-8px); } 6% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* sidebar */
#sidebar {
  position: fixed; top: 0; right: 0; bottom: 0; width: 172px; z-index: 25;
  background: linear-gradient(180deg, #14170f, #0d0f0a);
  border-left: 2px solid #2e3524;
  display: flex; flex-direction: column; gap: 8px; padding: 8px;
}
#minimap {
  width: 100%; aspect-ratio: 1; background: #0a0c08;
  border: 1px solid #333a28; cursor: pointer; image-rendering: pixelated;
}
#tabs { display: flex; gap: 4px; }
.tab {
  flex: 1; padding: 7px 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em;
  background: #1b2015; color: #8d976f; border: 1px solid #333a28; cursor: pointer;
}
.tab.active { background: #38412a; color: #e8eddc; border-color: #5a6844; }
#buildlist { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.bitem {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 8px; background: #191d12; border: 1px solid #333a28; cursor: pointer;
  overflow: hidden;
}
.bitem:hover { border-color: #6b7a4d; }
.bitem .ico {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none;
  font-size: 19px; background: #232a18; border: 1px solid #3d4630;
}
.bitem .meta { font-size: 12px; line-height: 1.35; z-index: 1; }
.bitem .meta b { display: block; color: #dfe6cf; font-size: 12.5px; }
.bitem .meta span { color: #ffd257; }
.bitem .prog {
  position: absolute; inset: 0; background: rgba(125, 200, 90, 0.16); width: 0%;
}
.bitem.building { border-color: #7a8a55; }
.bitem.ready { border-color: #ffd257; animation: readypulse 1s ease-in-out infinite; }
.bitem.ready .meta b::after { content: " · 就绪"; color: #ffd257; }
@keyframes readypulse { 50% { box-shadow: inset 0 0 14px rgba(255, 210, 87, 0.35); } }
.bitem.disabled { opacity: 0.38; cursor: not-allowed; }
#sb-hint { font-size: 10.5px; color: #5d6650; line-height: 1.6; text-align: center; }

/* overlays */
.overlay[hidden] { display: none; }
.overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(20, 8, 6, 0.82), rgba(4, 5, 4, 0.95));
  overflow-y: auto; padding: 20px;
}
.panel {
  width: min(560px, 94vw); background: #101208; border: 1px solid #3a4128;
  border-top: 3px solid #c33b2e; padding: 26px 30px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}
.game-logo {
  font-size: clamp(26px, 6vw, 40px); font-weight: 900; letter-spacing: 0.1em;
  color: #ff5a4a; text-shadow: 0 0 24px rgba(255, 60, 40, 0.4);
}
.game-sub { color: #9aa38e; margin: 4px 0 14px; letter-spacing: 0.12em; font-size: 13px; }
.intro-text { font-size: 13.5px; line-height: 1.9; color: #b8c0aa; white-space: pre-line; margin-bottom: 16px; }
#mission-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.mrow {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: #171b0e; border: 1px solid #333a28; cursor: pointer; text-align: left;
  color: inherit; font: inherit; width: 100%;
}
.mrow:hover:not(.locked) { border-color: #c33b2e; background: #1d2112; }
.mrow.locked { opacity: 0.4; cursor: not-allowed; }
.mrow .mnum { font-size: 18px; font-weight: 900; color: #ff5a4a; width: 34px; flex: none; }
.mrow .mname b { display: block; font-size: 14.5px; color: #e6ead9; }
.mrow .mname span { font-size: 11.5px; color: #8d976f; letter-spacing: 0.08em; }
.mrow .mscore { margin-left: auto; font-size: 12px; color: #ffd257; font-variant-numeric: tabular-nums; }
.menu-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.btn {
  padding: 10px 22px; font-size: 14px; font-weight: 700; letter-spacing: 0.05em;
  background: #2a3018; color: #dfe6cf; border: 1px solid #4d5838; cursor: pointer;
  text-decoration: none; display: inline-block; font-family: inherit;
}
.btn:hover { border-color: #8fa065; }
.btn.primary { background: #c33b2e; border-color: #e0604f; color: #fff; }
.btn.primary:hover { background: #d9483a; }
.btn.ghost { background: transparent; }

.brief-code { font-size: 12px; letter-spacing: 0.2em; color: #ff5a4a; font-weight: 800; }
.brief-title { font-size: 30px; font-weight: 900; color: #edf0e2; margin: 4px 0 14px; }
.brief-body { font-size: 13.5px; line-height: 1.95; color: #b8c0aa; }
.brief-body p { margin-bottom: 8px; }
.brief-obj { margin-top: 14px; padding: 10px 14px; background: #171b0e; border-left: 3px solid #ffb35c; font-size: 13px; line-height: 1.9; color: #dcd3ae; }

.over-title { font-size: 28px; font-weight: 900; margin-bottom: 12px; }
.over-title.win { color: #7dffb0; }
.over-title.lose { color: #ff5a4a; }
.over-story { font-size: 13.5px; line-height: 1.9; color: #b8c0aa; margin-bottom: 14px; }
.over-stats { font-size: 14px; line-height: 2; color: #dfe6cf; margin-bottom: 8px; }
.over-stats b { color: #ffd257; font-size: 20px; }
.board { margin: 8px 0; max-height: 180px; overflow-y: auto; }
.board-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; font-size: 12.5px; border-bottom: 1px solid #22271a; }
.board-rank { color: #ff5a4a; font-weight: 800; width: 28px; }
.board-name { color: #dfe6cf; }
.board-meta { color: #6b755a; font-size: 11px; }
.board-score { margin-left: auto; color: #ffd257; font-weight: 700; font-variant-numeric: tabular-nums; }
.board-empty { color: #6b755a; font-size: 12.5px; padding: 8px; }
.submit-row { display: flex; gap: 8px; margin: 10px 0 4px; }
#player-name {
  flex: 1; padding: 10px 12px; font-size: 14px; background: #171b0e;
  border: 1px solid #333a28; color: #e6ead9; font-family: inherit; min-width: 0;
}
#submit-status { font-size: 12.5px; color: #8d976f; min-height: 18px; }
.help-body { font-size: 13.5px; line-height: 1.9; color: #b8c0aa; }
.help-body p { margin-bottom: 8px; }
.help-body b { color: #ffd257; }

@media (max-width: 720px) {
  #sidebar { width: 138px; }
  #topbar { right: 138px; font-size: 12px; }
  .bitem .ico { width: 28px; height: 28px; font-size: 16px; }
  .bitem .meta { font-size: 11px; }
  #sb-hint { display: none; }
}