/* style.css — 坦克大战 */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #0b0d10;
  color: #dfe6ee;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

#app { width: 100%; height: 100%; position: relative; }

.screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
}
.hidden { display: none !important; }

/* ---------- 菜单 ---------- */
#menu, #level-select, #custom-screen {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(70, 110, 60, .25), transparent 60%),
    linear-gradient(#10141a, #0b0d10);
}

.menu-box {
  width: min(92vw, 480px);
  max-height: 96vh;
  overflow-y: auto;
  text-align: center;
  padding: 24px 20px;
  background: rgba(20, 26, 33, .9);
  border: 1px solid #2c3a48;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}

.game-title {
  font-size: 52px;
  letter-spacing: 10px;
  color: #f2c14e;
  text-shadow: 0 3px 0 #7a5a12, 0 6px 18px rgba(0,0,0,.7);
}
.game-sub { color: #8fa3b8; margin: 6px 0 18px; letter-spacing: 2px; font-size: 13px; }

.menu-btns { display: flex; flex-direction: column; gap: 10px; align-items: center; }

.mbtn {
  width: 240px;
  padding: 12px 0;
  font-size: 17px;
  letter-spacing: 4px;
  color: #e8eef5;
  background: #22303d;
  border: 1px solid #3b5064;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.mbtn:hover { background: #2e4152; }
.mbtn:active { transform: scale(.97); }
.mbtn.primary { background: #b3821f; border-color: #e0aa35; color: #fff8e6; }
.mbtn.primary:hover { background: #d09a27; }
.mbtn.small { width: 200px; padding: 8px 0; font-size: 14px; letter-spacing: 2px; }
.mbtn.back-btn { margin-top: 14px; background: #333d47; }
.mbtn:disabled { opacity: .35; cursor: default; }

.best-line { margin-top: 14px; color: #9fb4c9; font-size: 14px; }
.best-line span { color: #f2c14e; font-weight: bold; }

.help-box {
  margin-top: 14px; padding: 10px 12px;
  background: rgba(0,0,0,.3); border-radius: 8px;
  font-size: 12px; color: #7f93a6; text-align: left; line-height: 1.8;
}

/* ---------- 选关 ---------- */
.level-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 18px 0 4px;
}
.level-btn {
  aspect-ratio: 1;
  font-size: 20px;
  font-weight: bold;
  color: #e8eef5;
  background: #22303d;
  border: 1px solid #3b5064;
  border-radius: 8px;
  cursor: pointer;
}
.level-btn:hover:not(:disabled) { background: #b3821f; }
.level-btn:disabled { opacity: .3; cursor: default; }
.level-btn small { display: block; font-size: 10px; font-weight: normal; color: #8fa3b8; margin-top: 2px; }

/* ---------- 自定义关卡 ---------- */
.custom-list { margin: 14px 0; display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.custom-item {
  display: flex; align-items: center; gap: 8px;
  background: #1a242e; border: 1px solid #2c3a48; border-radius: 8px; padding: 8px 10px;
}
.custom-item .cname { flex: 1; text-align: left; color: #e8eef5; }
.custom-item button {
  padding: 6px 14px; font-size: 13px; border-radius: 6px; cursor: pointer;
  border: 1px solid #3b5064; background: #22303d; color: #e8eef5;
}
.custom-item button.play { background: #b3821f; border-color: #e0aa35; }
.custom-item button.del { background: #5a2323; border-color: #8a3535; }
.custom-empty { color: #7f93a6; padding: 20px 0; }

/* ---------- 编辑器 ---------- */
#editor-screen { background: #10141a; }
.editor-wrap { display: flex; gap: 12px; align-items: flex-start; max-width: 96vw; }
.editor-side {
  width: 170px; padding: 10px;
  background: rgba(20,26,33,.95); border: 1px solid #2c3a48; border-radius: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.editor-side h3 { color: #f2c14e; font-size: 15px; text-align: center; }
.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.pal-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 6px; font-size: 12px; color: #dfe6ee;
  background: #1a242e; border: 1px solid #2c3a48; border-radius: 6px; cursor: pointer;
}
.pal-btn.active { border-color: #f2c14e; background: #33404d; }
.pal-swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; }
#editor-name {
  padding: 7px 8px; border-radius: 6px; border: 1px solid #3b5064;
  background: #101820; color: #e8eef5; font-size: 13px; width: 100%;
}
.editor-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.editor-btns .mbtn { width: 72px; padding: 7px 0; font-size: 13px; letter-spacing: 1px; }
.editor-msg { font-size: 12px; color: #7fc97f; min-height: 18px; text-align: center; }
.editor-msg.err { color: #e07070; }
#editor-canvas { background: #14181d; border: 1px solid #2c3a48; border-radius: 6px; max-width: 100%; height: auto; }

/* ---------- 游戏 ---------- */
#game-screen { background: #05070a; justify-content: flex-start; }
#hud {
  width: 100%; max-width: 660px;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px;
  font-size: 14px; color: #c9d6e2;
  background: #12181f; border-bottom: 1px solid #2c3a48;
}
#hud span { white-space: nowrap; }
#hud-score { color: #f2c14e; }
#hud-lives { color: #ff8a7a; }
#hud-enemies { color: #9fd08a; }
.hud-btn {
  margin-left: auto; padding: 5px 12px; font-size: 13px;
  background: #22303d; color: #e8eef5; border: 1px solid #3b5064; border-radius: 6px; cursor: pointer;
}
#canvas-wrap {
  position: relative;
  width: 100%; max-width: 640px;
  touch-action: none;
}
#game-canvas {
  display: block; width: 100%; height: auto;
  background: #14181d;
}

/* ---------- 触控摇杆 ---------- */
#touch-ui { position: absolute; inset: 0; pointer-events: none; }
.stick { position: absolute; bottom: 8%; width: 120px; height: 120px; opacity: .5; }
#stick-l { left: 6%; }
#stick-r { right: 6%; }
.stick-base {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.25);
}
.stick-knob {
  position: absolute; left: 50%; top: 50%;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.3); border: 2px solid rgba(255,255,255,.5);
  transform: translate(-50%, -50%);
}
.stick.active { opacity: .85; }

/* ---------- 弹层 ---------- */
#overlay {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(4, 6, 9, .72);
  display: flex; align-items: center; justify-content: center;
}
.panel-box {
  width: min(90vw, 380px);
  text-align: center;
  padding: 26px 22px;
  background: rgba(22, 29, 37, .97);
  border: 1px solid #3b5064;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.7);
}
.panel-box h2 { color: #f2c14e; letter-spacing: 6px; margin-bottom: 10px; }
.panel-box h2.danger { color: #ff7a6a; }
.panel-box p { color: #9fb4c9; font-size: 14px; line-height: 1.9; }
.panel-box .big-score { font-size: 34px; color: #f2c14e; font-weight: bold; margin: 8px 0; }
.panel-box .new-record { color: #7fc97f; font-weight: bold; }
.panel-box .row-btns { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; align-items: center; }

@media (max-width: 720px) {
  .editor-wrap { flex-direction: column; align-items: center; }
  .editor-side { width: min(92vw, 480px); }
  .game-title { font-size: 40px; }
  #hud { font-size: 12px; gap: 8px; }
}