* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0e1420; }
[hidden] { display: none !important; }
body {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #e8eef8; user-select: none; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#stage { position: fixed; inset: 0; }
#stage.shake { animation: shake 0.35s ease-out; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, -1px); }
  80% { transform: translate(3px, 1px); }
}
#game { width: 100%; height: 100%; display: block; cursor: crosshair; }

#load-overlay {
  position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; gap: 14px;
  background: radial-gradient(ellipse at center, rgba(20,35,55,.92), rgba(8,12,20,.98));
  text-align: center; font-size: 14px; color: #a0c8ff;
}
.load-spinner {
  width: 36px; height: 36px; margin: 0 auto; border-radius: 50%;
  border: 3px solid rgba(112,160,224,.25); border-top-color: #70a0e0;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
#topbar {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px; font-size: 13px; font-weight: 700;
}
#topbar .hud-btn { pointer-events: auto; margin-left: auto; min-height: 32px; padding: 4px 12px; }
#hp-wrap { display: inline-flex; flex-direction: column; gap: 3px; min-width: 72px; }
#hp-meter {
  width: 72px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden;
}
#hp-fill {
  display: block; height: 100%; width: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #44cc66, #88eeaa);
  transition: width 0.25s ease;
}
#tip {
  position: absolute; left: 50%; top: 14%; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 8px; background: rgba(0,0,0,.45);
  font-size: 14px; color: #ffe9b0; max-width: 90vw; text-align: center;
}
#tip:empty { display: none; }

#tower-bar {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 22;
  display: flex; gap: 8px; padding: 8px; border-radius: 10px;
  background: rgba(10,16,28,.75); border: 1px solid rgba(255,255,255,.12);
}
.tower-btn {
  padding: 8px 12px; font-size: 12px; font-weight: 700; font-family: inherit;
  background: #243048; color: #dce8ff; border: 1px solid #486080; border-radius: 6px;
  cursor: pointer; min-height: 40px;
}
.tower-btn.active { border-color: #70a0e0; box-shadow: 0 0 0 1px #70a0e0; background: #304868; }
.tower-btn.disabled { opacity: 0.45; cursor: not-allowed; }

#wave-bar {
  position: fixed; right: max(14px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom)); z-index: 22;
}
.wave-btn { min-width: 120px; min-height: 44px; pointer-events: auto; }
.wave-btn.pulse { animation: wavePulse 1.6s ease-in-out infinite; }
@keyframes wavePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(112,160,224,.35); }
  50% { box-shadow: 0 0 0 6px rgba(112,160,224,0); }
}

#sel-panel {
  position: fixed; left: max(14px, env(safe-area-inset-left));
  bottom: max(72px, calc(env(safe-area-inset-bottom) + 56px)); z-index: 22;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(10,16,28,.8); border: 1px solid rgba(255,255,255,.12);
  font-size: 12px; font-weight: 600;
}

.btn {
  padding: 10px 14px; font-size: 13px; font-weight: 700; background: #243048; color: #e8eef8;
  border: 1px solid #486080; cursor: pointer; font-family: inherit; text-decoration: none;
  display: inline-block; border-radius: 6px; min-height: 40px;
}
.btn.primary { background: #3a6090; border-color: #70a0e0; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(30,50,80,.8), rgba(8,12,20,.95));
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow-y: auto;
}
.panel {
  width: min(520px, 94vw); background: #141e30; border: 1px solid #486080;
  border-top: 3px solid #70a0e0; padding: 22px 24px; border-radius: 4px;
}
.panel.wide { width: min(560px, 96vw); }
.logo { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.04em; color: #a0c8ff; }
.logo.sm { font-size: 1.2rem; margin-bottom: 12px; }
.sub { font-size: 13px; color: #8098b8; margin: 6px 0 14px; }
.intro { font-size: 14px; line-height: 1.55; color: #c0d0e8; margin-bottom: 16px; }
.menu-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.help-body p { margin-bottom: 10px; font-size: 14px; line-height: 1.5; color: #c0d0e8; }
.submit-row { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.submit-row input {
  flex: 1; min-width: 120px; padding: 10px; border: 1px solid #486080;
  background: #0e1420; color: #e8eef8; border-radius: 6px; font-family: inherit;
}
#submit-status { font-size: 12px; color: #80c0a0; min-height: 1.2em; }
.board { margin: 10px 0; font-size: 12px; }
.board-row { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.board-rank { width: 2em; color: #8098b8; }
.board-name { flex: 1; font-weight: 600; }
.board-meta { font-size: 10px; color: #8098b8; }
.board-score { font-weight: 700; color: #a0c8ff; }
.board-empty { color: #8098b8; font-size: 12px; padding: 8px 0; }

.level-grid {
  display: grid; grid-template-columns: 1fr; gap: 8px; margin: 12px 0 16px;
}
.level-card {
  text-align: left; padding: 12px 14px; border-radius: 6px; cursor: pointer;
  background: #1a2840; border: 1px solid #486080; color: #e8eef8; font-family: inherit;
}
.level-card b { display: block; font-size: 14px; }
.level-card small { color: #8098b8; font-size: 11px; }
.level-card.locked { opacity: 0.4; cursor: not-allowed; }