/* =========================================================
 * 代码帝国 · 放置挂机游戏 样式(深色极客风,移动端优先)
 * ========================================================= */
:root {
  --bg: #0d1117;
  --panel: #161b22;
  --panel2: #1c2330;
  --line: #2d333b;
  --txt: #e6edf3;
  --dim: #8b949e;
  --acc: #3fb950;
  --acc-d: #2ea043;
  --blue: #58a6ff;
  --gold: #e3b341;
  --danger: #f85149;
  --purple: #bc8cff;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
}
svg { width: 1em; height: 1em; vertical-align: -0.15em; }
b, .num { font-variant-numeric: tabular-nums; }

#app { max-width: 960px; margin: 0 auto; padding: 0 10px 86px; }

/* ---------------- 顶部资源栏 ---------------- */
#hud {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #161b22 85%, rgba(22,27,34,.85));
  border-bottom: 1px solid var(--line);
  padding: 8px 4px; margin: 0 -10px 8px; padding-left: 12px; padding-right: 12px;
}
.res {
  display: flex; align-items: center; gap: 7px;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 5px 9px; flex: 1; min-width: 0;
}
.res-ic { font-size: 20px; display: inline-flex; flex-shrink: 0; }
.ic-code { color: var(--acc); } .ic-coin { color: var(--gold); } .ic-star { color: var(--purple); }
.res-txt { min-width: 0; line-height: 1.15; }
.res-txt b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-txt small { color: var(--dim); font-size: 11px; white-space: nowrap; }
.res.pulse b { animation: pulse .3s; }
@keyframes pulse { 50% { transform: scale(1.15); color: var(--acc); } }
.hbtn {
  background: var(--panel2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 10px; width: 38px; height: 38px; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.hbtn:active { transform: scale(.92); }

/* ---------------- 增益栏 ---------------- */
#buffBar { display: flex; gap: 6px; flex-wrap: wrap; min-height: 4px; margin-bottom: 4px; }
.buff {
  font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid;
  animation: pulse 1s infinite;
}
.buff.good { color: var(--acc); border-color: var(--acc-d); background: rgba(63,185,80,.12); }
.buff.bad { color: var(--danger); border-color: var(--danger); background: rgba(248,81,73,.12); }

/* ---------------- 主面板 ---------------- */
.panel { display: none; animation: fadeIn .2s; }
.panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } }
.panel-tip {
  color: var(--dim); font-size: 12px; background: var(--panel);
  border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; margin: 10px 0;
}

/* 点击区 */
.click-zone { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0 6px; }
.big-click {
  width: 168px; height: 168px; border-radius: 50%;
  border: 3px solid var(--acc-d);
  background: radial-gradient(circle at 35% 30%, #2ea043, #176f2c 70%);
  color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  box-shadow: 0 0 24px rgba(63,185,80,.35), inset 0 -6px 14px rgba(0,0,0,.35);
  transition: transform .08s;
  touch-action: manipulation;
}
.big-click:active { transform: scale(.94); }
.big-click.tap { animation: tapA .18s; }
@keyframes tapA { 40% { transform: scale(1.05); box-shadow: 0 0 40px rgba(63,185,80,.6); } }
.kc-ic { font-size: 46px; display: inline-flex; }
.kc-txt { font-size: 20px; font-weight: 700; letter-spacing: 2px; }
.kc-sub { font-size: 12px; opacity: .9; }
.prod-stats { display: flex; gap: 8px; width: 100%; }
.ps-item {
  flex: 1; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px; text-align: center;
}
.ps-item span { display: block; color: var(--dim); font-size: 11px; }
.ps-item b { color: var(--acc); font-size: 15px; }
.ps-item:nth-child(2) b { color: var(--gold); }
.ps-item:nth-child(3) b { color: var(--purple); }

/* 购买数量切换 */
.buybar { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; color: var(--dim); font-size: 12px; }

/* ---------------- 区域 / 卡片 ---------------- */
.zone {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px; margin: 10px 0;
}
.zone.locked { opacity: .75; }
.zone-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.zone-ic { font-size: 26px; color: var(--blue); display: inline-flex; }
.zone-head b { font-size: 15px; }
.zone-head small { display: block; color: var(--dim); font-size: 11px; }
.lock-box { padding: 6px 2px; }
.lock-text { color: var(--gold); font-size: 12px; margin-bottom: 6px; }

.bar { height: 8px; background: #0a0d12; border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.bar .fill { height: 100%; background: linear-gradient(90deg, var(--acc-d), var(--acc)); border-radius: 99px; transition: width .3s; }
.bar .fill.done { background: linear-gradient(90deg, #b8860b, var(--gold)); }

.card {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; margin: 8px 0;
}
.card-ic { font-size: 24px; color: var(--blue); flex-shrink: 0; margin-top: 2px; display: inline-flex; }
.card-main { flex: 1; min-width: 0; }
.card-title { font-weight: 600; font-size: 14px; }
.card-desc { color: var(--dim); font-size: 12px; margin: 2px 0; }
.card-sub { color: var(--acc); font-size: 11px; margin: 2px 0; }
.card-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.card-side { flex-shrink: 0; align-self: center; }
.badge {
  display: inline-block; background: #0a0d12; border: 1px solid var(--line);
  color: var(--blue); font-size: 11px; border-radius: 6px; padding: 0 6px; margin-left: 4px;
}
.badge.lv { color: var(--gold); }

/* ---------------- 按钮 ---------------- */
.btn {
  background: var(--panel); color: var(--txt);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 12px; font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: transform .06s, filter .15s;
  touch-action: manipulation;
}
.btn:active { transform: scale(.95); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.buy { border-color: var(--acc-d); color: var(--acc); }
.btn.buy:not(:disabled):hover { background: rgba(63,185,80,.12); }
.btn.up { border-color: #1f6feb; color: var(--blue); }
.btn.up:not(:disabled):hover { background: rgba(88,166,255,.12); }
.btn.sm { padding: 3px 10px; font-size: 11px; }
.btn.sm.on { background: var(--acc-d); border-color: var(--acc-d); color: #fff; }
.btn.big { font-size: 15px; padding: 11px 22px; border-radius: 12px; }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.prestige-btn {
  background: linear-gradient(135deg, #6e40c9, #bc8cff);
  border-color: #8957e5; color: #fff; font-weight: 700;
}
.prestige-btn:disabled { background: var(--panel); color: var(--dim); border-color: var(--line); }

/* ---------------- 科技树 ---------------- */
.tech-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tech-node {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.tech-node .tech-ic { font-size: 22px; color: var(--dim); display: inline-flex; }
.tech-node small { color: var(--dim); font-size: 11px; }
.tech-node .req { color: var(--gold); }
.tech-node.owned { border-color: var(--acc-d); background: rgba(63,185,80,.08); }
.tech-node.owned .tech-ic { color: var(--acc); }
.tech-node.open .tech-ic { color: var(--blue); }
.tech-node.locked { opacity: .55; }
.tech-state { color: var(--acc); font-size: 12px; font-weight: 600; }

/* ---------------- 成就 ---------------- */
.card.ach .card-ic { color: var(--dim); }
.card.ach.got { border-color: #9e6a03; background: rgba(227,179,65,.07); }
.card.ach.got .card-ic { color: var(--gold); }
.ach-state { flex-shrink: 0; font-size: 11px; color: var(--dim); align-self: center; }
.card.ach.got .ach-state { color: var(--gold); }

/* ---------------- 重生 ---------------- */
.prestige-box {
  background: linear-gradient(160deg, #1c1530, #161b22);
  border: 1px solid #3b2d63; border-radius: 16px;
  padding: 18px; text-align: center; margin-top: 10px;
}
.pre-ic { font-size: 42px; color: var(--purple); display: inline-flex; }
.prestige-box h2 { margin: 6px 0; color: var(--purple); }
.prestige-box p { color: var(--dim); font-size: 12px; margin: 6px 0; }
.pre-gain { background: rgba(188,140,255,.08); border: 1px dashed #3b2d63; border-radius: 10px; padding: 10px; margin: 10px 0; font-size: 13px; }
.pre-gain .hl { color: var(--purple); font-size: 22px; }
.prestige-box .bar { margin: 8px 0 4px; }
.prestige-box small { color: var(--dim); }
.prestige-box .btn { margin-top: 12px; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.stat span { display: block; color: var(--dim); font-size: 11px; }
.stat b { font-size: 14px; }

/* ---------------- 设置 ---------------- */
.set-group { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 10px 0; }
.set-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.set-row span { color: var(--dim); }
.set-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.note { color: var(--dim); font-size: 12px; margin: 5px 0; line-height: 1.5; }

/* ---------------- 底部选项卡 ---------------- */
#tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; background: #11151c; border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
#tabs button {
  flex: 1; background: none; border: none; color: var(--dim);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 0 6px; font-size: 11px; cursor: pointer;
}
#tabs button .ti { font-size: 19px; display: inline-flex; }
#tabs button.active { color: var(--acc); }
#tabs button:active { transform: scale(.92); }

/* ---------------- 飘字 ---------------- */
#floatLayer { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.float-txt {
  position: absolute; color: var(--acc); font-weight: 800; font-size: 17px;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
  animation: floatUp .9s ease-out forwards;
}
@keyframes floatUp {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-70px); }
}

/* ---------------- 提示 ---------------- */
#toastBox {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 78px; z-index: 95; display: flex; flex-direction: column; gap: 6px;
  width: min(92vw, 420px); pointer-events: none;
}
.toast {
  background: #1c2330; border: 1px solid var(--acc-d); color: var(--txt);
  border-radius: 10px; padding: 9px 14px; font-size: 13px; text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  animation: toastIn .25s;
}
.toast.ach { border-color: var(--gold); color: var(--gold); }
.toast.good { border-color: var(--acc); color: var(--acc); }
.toast.bad { border-color: var(--danger); color: var(--danger); }
.toast.out { opacity: 0; transition: opacity .4s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------------- 随机事件横幅 ---------------- */
#eventBanner {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  width: min(94vw, 460px); z-index: 80; cursor: pointer;
  background: linear-gradient(135deg, #3d2e04, #1c2330);
  border: 1px solid var(--gold); border-radius: 14px;
  display: flex; align-items: center; gap: 10px; padding: 12px 14px 16px;
  box-shadow: 0 0 24px rgba(227,179,65,.35);
  animation: bannerIn .3s;
}
@keyframes bannerIn { from { opacity: 0; transform: translate(-50%, -14px); } }
#eventBanner.hidden { display: none; }
.eb-ic { font-size: 26px; color: var(--gold); display: inline-flex; animation: pulse 1s infinite; }
.eb-main { flex: 1; min-width: 0; }
.eb-main b { color: var(--gold); font-size: 14px; }
.eb-main small { display: block; color: var(--txt); font-size: 12px; }
.eb-cta { color: var(--gold); font-size: 12px; border: 1px solid var(--gold); border-radius: 8px; padding: 3px 8px; flex-shrink: 0; }
.eb-timer { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 4px; background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden; }
.eb-timer div { height: 100%; background: var(--gold); }

/* ---------------- 弹窗 ---------------- */
#modalRoot {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(2,4,8,.72); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
#modalRoot.hidden { display: none; }
.modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; width: min(94vw, 440px); text-align: center;
  animation: fadeIn .2s; max-height: 86vh; overflow-y: auto;
}
.modal h3 { margin-bottom: 12px; font-size: 17px; }
.modal p { color: var(--dim); font-size: 13px; margin: 8px 0; line-height: 1.5; }
.modal .hl { color: var(--purple); font-size: 20px; }
.modal textarea {
  width: 100%; background: #0a0d12; color: var(--acc); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px; font-size: 11px; font-family: monospace;
  resize: vertical; margin: 8px 0; user-select: text; -webkit-user-select: text;
}
.modal-btns { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.offline-gain {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(63,185,80,.08); border: 1px dashed var(--acc-d);
  border-radius: 10px; padding: 12px; margin: 12px 0; font-size: 15px; color: var(--acc);
}

/* ---------------- 桌面端适配 ---------------- */
@media (min-width: 720px) {
  body { font-size: 15px; }
  #app { padding-bottom: 96px; }
  .click-zone { flex-direction: row; justify-content: center; gap: 30px; }
  .prod-stats { max-width: 420px; }
  .big-click { width: 190px; height: 190px; }
  .tech-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  #tabs { max-width: 960px; left: 50%; right: auto; transform: translateX(-50%); width: 100%; border: 1px solid var(--line); border-bottom: none; border-radius: 14px 14px 0 0; }
  .res-txt b { font-size: 18px; }
}