* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Courier New", "Consolas", monospace;
  user-select: none;
}

#game-root { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

.hud-label {
  font-size: 12px; letter-spacing: 3px; color: #9fd8ff;
  text-shadow: 0 0 6px rgba(80,180,255,.8);
  margin-bottom: 4px;
}

#hud-top {
  position: absolute; top: 18px; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 0 28px;
}

#score { font-size: 28px; color: #fff; text-shadow: 0 0 8px #4fc3ff; font-weight: bold; }

#boss-box { width: 42%; text-align: center; }
#boss-box .hud-label { color: #ff8484; text-shadow: 0 0 6px rgba(255,60,60,.8); }
#boss-bar-outer {
  height: 14px; border: 2px solid #ff6a6a; background: rgba(60,0,0,.5);
  box-shadow: 0 0 10px rgba(255,60,60,.5), inset 0 0 8px rgba(255,0,0,.3);
}
#boss-bar { height: 100%; width: 100%; background: linear-gradient(90deg,#ff3b3b,#ffb13b); transition: width .15s; }

#dist-box { width: 160px; text-align: right; }
#dist-bar-outer { height: 8px; border: 1px solid #6fc3ff; background: rgba(0,20,50,.5); }
#dist-bar { height: 100%; width: 0%; background: #6fe3ff; box-shadow: 0 0 6px #6fe3ff; }

#hud-bottom {
  position: absolute; bottom: 20px; left: 28px; right: 28px;
  display: flex; align-items: flex-end; gap: 28px;
}

#shield-box { width: 260px; }
#shield-bar-outer {
  height: 16px; border: 2px solid #58e0ff; background: rgba(0,30,60,.55);
  box-shadow: 0 0 10px rgba(60,200,255,.4);
}
#shield-bar { height: 100%; width: 100%; background: linear-gradient(90deg,#2bd9ff,#7bffb0); transition: width .12s; }
#shield-bar.low { background: linear-gradient(90deg,#ff4040,#ff9440); }

#weapon-box { display: flex; gap: 18px; font-size: 15px; color: #cfeaff; text-shadow: 0 0 6px rgba(80,180,255,.7); }
#buff-box { display: flex; gap: 10px; }
.buff-tag {
  font-size: 12px; padding: 3px 8px; border: 1px solid currentColor;
  border-radius: 3px; text-shadow: 0 0 6px currentColor; background: rgba(0,0,0,.35);
}

/* ---------- 通讯框 ---------- */
#radio-box {
  position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%);
  width: 520px; max-width: 86vw;
  display: flex; gap: 12px; align-items: center;
  background: rgba(4,16,38,.82);
  border: 2px solid #3f8fdf; border-radius: 4px;
  padding: 10px 14px;
  box-shadow: 0 0 18px rgba(60,140,255,.35);
}
#radio-face {
  width: 52px; height: 52px; flex: none;
  border: 2px solid #58e0ff; border-radius: 3px;
  image-rendering: pixelated; background: #06305d;
}
#radio-name { font-size: 12px; letter-spacing: 2px; color: #7bd6ff; margin-bottom: 3px; }
#radio-text { font-size: 15px; color: #eaf6ff; line-height: 1.35; min-height: 20px; }

/* ---------- 全屏效果 ---------- */
#flash {
  position: absolute; inset: 0; background: #fff; opacity: 0;
  pointer-events: none; z-index: 8;
}
#damage-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 7; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255,0,0,0) 55%, rgba(255,30,30,.55) 100%);
}
#scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 9; opacity: .18;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px);
}

/* ---------- 标题 / 结算 ---------- */
#title-screen, #end-screen {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, rgba(10,40,90,.55), rgba(0,2,10,.88) 75%);
}
.title-inner { text-align: center; color: #d9efff; padding: 20px; }

.game-logo {
  font-size: clamp(44px, 9vw, 96px);
  font-weight: 900; letter-spacing: 8px; color: #fff; font-style: italic;
  text-shadow: 0 0 14px #3fa9ff, 0 0 40px rgba(63,169,255,.6), 4px 4px 0 #0a3f7d;
}
.game-logo span { color: #ffd23f; text-shadow: 0 0 14px #ff9a3f, 0 0 40px rgba(255,170,60,.6), 4px 4px 0 #7d4a0a; }
.game-sub { font-size: clamp(15px, 2.4vw, 22px); letter-spacing: 6px; margin: 10px 0 22px; color: #8fd0ff; }

.title-desc { font-size: 15px; line-height: 1.8; color: #b9d9f5; margin-bottom: 24px; }

.controls-grid {
  display: grid; grid-template-columns: repeat(2, minmax(200px, 260px));
  gap: 8px 24px; justify-content: center; margin-bottom: 20px; font-size: 14px; color: #cfe7ff;
}
.controls-grid b { color: #ffd23f; margin-right: 10px; font-weight: bold; }

.pickup-hint { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; max-width: 640px; }
.pk { font-size: 12px; padding: 3px 9px; border: 1px solid currentColor; border-radius: 3px; background: rgba(0,0,0,.3); }
.pk-l { color: #58a6ff; } .pk-s { color: #6dff9e; } .pk-b { color: #ff6d6d; }
.pk-r { color: #ffe14d; } .pk-h { color: #d08bff; } .pk-i { color: #ffffff; } .pk-g { color: #ffc44d; }

#start-btn, #restart-btn {
  font-family: inherit; font-size: 20px; letter-spacing: 4px;
  color: #001b33; background: linear-gradient(180deg,#8fe0ff,#3fa9ff);
  border: none; padding: 14px 46px; cursor: pointer; font-weight: bold;
  border-radius: 4px; box-shadow: 0 0 22px rgba(63,169,255,.55);
  animation: pulse 1.4s ease-in-out infinite;
}
#start-btn:hover, #restart-btn:hover { filter: brightness(1.15); }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

#end-stats { font-size: 17px; line-height: 2.1; margin-bottom: 26px; color: #d5ecff; }
#end-stats b { color: #ffd23f; font-size: 22px; }
#end-title.fail { text-shadow: 0 0 14px #ff5340, 0 0 40px rgba(255,80,60,.6), 4px 4px 0 #7d1c0a; }

@media (max-width: 700px) {
  .controls-grid { grid-template-columns: 1fr; }
  #shield-box { width: 150px; }
  #radio-box { bottom: 110px; }
}