/* 《火星殖民地》Mars Colony —— 科幻火星 UI */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --mars: #ff6b4a;
  --mars-dim: #b54a32;
  --amber: #ffb14d;
  --cyan: #4dd8ff;
  --bg: #0d0a08;
  --panel: rgba(16, 14, 18, 0.92);
  --line: rgba(255, 107, 74, 0.25);
  --txt: #f2e8e0;
  --txt-dim: #a89a90;
}
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg); color: var(--txt);
  user-select: none; -webkit-user-select: none;
}
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ============ 标题屏 ============ */
#start-screen { position: fixed; inset: 0; z-index: 50; overflow-y: auto; }
#star-canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
.title-wrap {
  position: relative; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; text-align: center;
}
.mars-orb {
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e88a5f, #b54a32 55%, #5e2318);
  box-shadow: 0 0 60px rgba(255, 107, 74, 0.5);
  margin-bottom: 28px; animation: float 5s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-10px); } }
#start-screen h1 {
  font-size: clamp(52px, 10vw, 110px); letter-spacing: 0.12em; line-height: 1.05;
  background: linear-gradient(180deg, #fff, var(--mars));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 80px rgba(255, 107, 74, 0.25);
}
#start-screen h1 span { letter-spacing: 0.28em; }
.tagline { color: var(--txt-dim); letter-spacing: 0.2em; margin: 14px 0 36px; font-size: 14px; }
.menu { display: flex; flex-direction: column; gap: 12px; width: min(340px, 90vw); }
.mbtn {
  padding: 14px 18px; font-size: 16px; letter-spacing: 0.12em;
  background: rgba(255, 107, 74, 0.08); color: var(--txt);
  border: 1px solid var(--line); border-radius: 10px; transition: all 0.2s;
}
.mbtn:hover { background: rgba(255, 107, 74, 0.2); border-color: var(--mars); transform: translateY(-1px); }
.mbtn.primary { background: linear-gradient(135deg, #d9532f, #a83a20); border-color: var(--mars); font-weight: 700; }
.mbtn.danger { border-color: rgba(255, 70, 70, 0.5); color: #ff9a9a; }
.mbtn.sm { padding: 6px 12px; font-size: 13px; }
.mbtn.disabled { opacity: 0.35; pointer-events: none; }
.slots {
  width: min(560px, 94vw); margin-top: 18px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 16px; text-align: left;
}
.slots h3 { margin-bottom: 10px; color: var(--amber); }
.slot-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.slot-row span { color: var(--txt-dim); font-size: 12px; margin-left: 10px; }
.brand { margin-top: 34px; color: var(--txt-dim); font-size: 12px; letter-spacing: 0.3em; }
.fine { color: var(--txt-dim); font-size: 12px; margin: 8px 0 12px; line-height: 1.7; }

/* ============ 游戏屏 ============ */
#game-screen { position: fixed; inset: 0; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }

/* 顶部资源栏 */
#topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; gap: 6px; padding: 8px 12px; padding-right: 190px;
  background: linear-gradient(180deg, rgba(10,8,10,0.92), rgba(10,8,10,0.55) 80%, transparent);
  overflow-x: auto; scrollbar-width: none; z-index: 10;
}
#topbar::-webkit-scrollbar { display: none; }
.res {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px; padding: 5px 9px; font-size: 13px;
}
.res-icon { font-size: 15px; }
.res-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.res-cap { color: var(--txt-dim); font-size: 11px; }
.res-sub { color: var(--cyan); font-size: 11px; }
.res-flow { font-size: 11px; font-variant-numeric: tabular-nums; }
.res-flow.pos { color: #7dff9a; } .res-flow.neg { color: #ff8a8a; }
.res.warn { border-color: #ff4646; animation: blink 1s infinite; }
@keyframes blink { 50% { background: rgba(255,70,70,0.25); } }

/* 左侧工具栏 */
#toolbar {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 10;
}
#toolbar button {
  width: 64px; height: 64px; border-radius: 14px; font-size: 24px;
  background: var(--panel); border: 1px solid var(--line); color: var(--txt);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: all 0.15s;
}
#toolbar button span { font-size: 11px; color: var(--txt-dim); }
#toolbar button:hover { border-color: var(--mars); transform: scale(1.05); }
#toolbar button.on { border-color: var(--cyan); box-shadow: 0 0 14px rgba(77,216,255,0.4); }

/* 右侧面板 */
#side-panel {
  position: absolute; right: 12px; top: 64px; bottom: 150px; width: 320px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(8px); z-index: 10; display: flex; flex-direction: column; overflow: hidden;
}
.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.panel-head h3 { font-size: 16px; }
.panel-head .rp { color: var(--cyan); font-size: 13px; margin-left: 8px; }
.panel-head .x { background: none; border: none; color: var(--txt-dim); font-size: 16px; }
.panel-head .x:hover { color: #fff; }
.cat-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
.cat-tab {
  padding: 6px 10px; font-size: 12px; border-radius: 20px;
  background: rgba(255,255,255,0.06); border: 1px solid transparent; color: var(--txt-dim);
}
.cat-tab.on { background: rgba(255,107,74,0.2); border-color: var(--mars); color: #fff; }
.build-list { overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.build-card {
  display: flex; gap: 10px; padding: 10px; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer; transition: all 0.15s;
}
.build-card:hover { border-color: var(--mars); }
.build-card.poor { opacity: 0.55; }
.build-card.done { border-color: rgba(125,255,154,0.4); }
.bc-icon { font-size: 30px; }
.bc-name { font-weight: 700; font-size: 14px; }
.bc-size { color: var(--txt-dim); font-weight: 400; font-size: 12px; }
.bc-desc { color: var(--txt-dim); font-size: 12px; margin: 4px 0; line-height: 1.5; }
.bc-cost { color: var(--amber); font-size: 12px; }
.tag { font-size: 11px; background: rgba(125,255,154,0.15); color: #7dff9a; padding: 2px 8px; border-radius: 10px; }
.tag.hot { background: rgba(255,177,77,0.2); color: var(--amber); }
.mreq { font-size: 12px; color: var(--txt-dim); margin: 3px 0; }
.mreq.ok { color: #7dff9a; }
.empty-tip { padding: 24px; color: var(--txt-dim); line-height: 1.8; font-size: 14px; }

/* 建筑信息 */
.binfo { padding: 12px 14px; }
.brow { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 14px; }
.brow span { color: var(--txt-dim); }
.brow.rates b { font-size: 12px; line-height: 1.8; text-align: right; }
.pos { color: #7dff9a; } .neg { color: #ff8a8a; }
.bdesc { color: var(--txt-dim); font-size: 13px; margin: 10px 0; line-height: 1.6; }
.b-actions { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.btn {
  padding: 10px; border-radius: 9px; font-size: 14px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: var(--txt);
}
.btn.primary { background: linear-gradient(135deg, #d9532f, #a83a20); border-color: var(--mars); }
.btn.danger { border-color: rgba(255,70,70,0.5); color: #ff9a9a; background: rgba(255,70,70,0.08); }
.btn.sm { padding: 7px 10px; font-size: 12px; margin-top: 8px; }
.btn.disabled { opacity: 0.4; }
.slot-btns { display: flex; gap: 6px; margin-top: 6px; }
.slot-btns .btn { margin-top: 0; }
.menu-foot { padding: 12px 14px; display: flex; gap: 8px; border-top: 1px solid var(--line); }

/* 事件日志 */
#event-log {
  position: absolute; left: 12px; bottom: 12px; width: min(430px, 60vw); z-index: 10;
  display: flex; flex-direction: column; gap: 3px; pointer-events: none;
}
.log-line {
  font-size: 12px; background: rgba(10,8,10,0.72); border-left: 2px solid var(--mars);
  padding: 5px 10px; border-radius: 0 8px 8px 0; color: var(--txt);
}
.log-t { color: var(--amber); margin-right: 8px; font-variant-numeric: tabular-nums; }

/* 时间控制 */
.time-controls {
  position: absolute; top: 64px; right: 12px; z-index: 10;
  display: flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px;
}
#clock { font-size: 13px; font-weight: 700; color: var(--amber); margin-right: 4px; font-variant-numeric: tabular-nums; }
.time-controls button {
  background: rgba(255,255,255,0.06); border: 1px solid transparent; color: var(--txt);
  border-radius: 7px; padding: 5px 9px; font-size: 13px;
}
.time-controls button.on { border-color: var(--cyan); color: var(--cyan); }

/* 告警与放置提示 */
#alerts { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 11; display: flex; flex-direction: column; gap: 6px; }
.alert {
  padding: 8px 18px; border-radius: 10px; font-size: 13px; font-weight: 700;
  background: rgba(20,10,10,0.92); border: 1px solid #ff4646; animation: blink 1.2s infinite;
}
.alert.danger { color: #ffb3b3; }
#place-hint {
  position: absolute; top: 110px; left: 50%; transform: translateX(-50%); z-index: 11;
  background: rgba(10,20,14,0.92); border: 1px solid #50ff8c; color: #c9ffd9;
  padding: 8px 18px; border-radius: 10px; font-size: 13px; white-space: nowrap;
}

/* 移动端 */
@media (max-width: 760px) {
  #topbar { padding-right: 8px; top: 0; }
  .time-controls { top: auto; bottom: 12px; right: 12px; }
  #side-panel { left: 8px; right: 8px; top: auto; bottom: 64px; width: auto; max-height: 46vh; }
  #toolbar { top: auto; bottom: 120px; transform: none; left: 8px; flex-direction: row; }
  #toolbar button { width: 56px; height: 56px; }
  #event-log { bottom: 190px; width: calc(100vw - 24px); }
  #alerts, #place-hint { top: 56px; max-width: 94vw; }
}

/* ============ 降落过场 ============ */
#descent-screen {
  position: fixed; inset: 0; z-index: 70;
  background: #000; cursor: pointer;
}
#descent-canvas { width: 100%; height: 100%; display: block; }

/* 标题屏小火星球已被 canvas 大火星取代 */
.mars-orb { display: none; }