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

/* 尺寸变量：把原本写死在公式里的魔数集中到一处
   --page-pad-x : 页面左右内边距合计（小屏媒体查询里会改）
   --reserved-h : 画布以外的纵向占用（页眉 + HUD + 底部说明 + 间距）
                  由 game.js 的 measureReservedHeight() 按实际排版实测后覆盖，
                  这样切换模式（生存会隐藏 HUD 与页脚）时无需再维护第二组数字 */
:root {
  --page-pad-x: 32px;
  --reserved-h: 190px;
}

body {
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  background: #1a1a2e;
  color: #eee;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 16px;
}

#game-wrap {
  /* 自适应屏幕：宽度取两个约束的较小值——
     1) 视口宽度减去页面左右内边距
     2) 视口剩余高度换算出的 16:9 宽度（保证画布纵向不出血）
     这里不再设 960px 上限：窗口最大化时画布会等比放大填满可用区域，
     内部逻辑分辨率仍是 960×540，点击坐标由 JS 按 getBoundingClientRect 换算 */
  width: min(calc(100vw - var(--page-pad-x)), calc((100vh - var(--reserved-h)) * 16 / 9));
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

header {
  text-align: center;
}
header h1 {
  font-size: 26px;
  letter-spacing: 4px;
  color: #e0e0e0;
}
#round-info {
  font-size: 15px;
  color: #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.p1-tag { color: #4aa3ff; font-weight: 700; }
.p2-tag { color: #ff5a5a; font-weight: 700; }

#hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
}
.hp-side { display: flex; flex-direction: column; gap: 4px; }
.hp-side.right { align-items: flex-end; }
.hp-label { font-size: 14px; }
.hp-bar {
  width: 100%;
  height: 20px;
  background: #33334d;
  border: 2px solid #555;
  border-radius: 4px;
  overflow: hidden;
}
.hp-side.right .hp-bar { transform: scaleX(-1); }
.hp-fill {
  height: 100%;
  width: 100%;
  transition: width 0.15s linear;
}
.hp-fill.p1 { background: linear-gradient(90deg, #2b7fff, #6cc6ff); }
.hp-fill.p2 { background: linear-gradient(90deg, #ff3b3b, #ff9a6c); }
.weapon-cd { font-size: 11px; color: #aaa; height: 14px; }
#p1-status, #p2-status { font-size: 14px; margin: 0 4px; }

#win-marks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 70px;
}
.win-row { display: flex; gap: 4px; height: 12px; }
.win-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #555; background: transparent;
}
.win-dot.on.p1 { background: #4aa3ff; border-color: #4aa3ff; }
.win-dot.on.p2 { background: #ff5a5a; border-color: #ff5a5a; }
#vs { font-weight: 700; font-size: 15px; color: #ccc; }

/* 画布按容器宽度等比缩放（内部逻辑分辨率保持 960×540 不变，点击坐标由 JS 按 rect 换算） */
#stage {
  position: relative; /* 覆盖层以此为定位基准，随画布缩放一起居中 */
}
#game {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #6fb7db;
  border: 3px solid #444;
  border-radius: 8px;
  display: block;
  image-rendering: crisp-edges;
  touch-action: none; /* 手机上触摸画布不触发页面滚动/缩放 */
}
/* 窗口很大时画布是被"放大"的（内部仍是 960×540）：
   此时最近邻缩放会让火柴人的线条出现明显锯齿，改回浏览器默认的平滑缩放更好看 */
#game.upscaled { image-rendering: auto; }

#overlay {
  position: absolute;
  inset: 0; /* 覆盖整个画布区域 */
}
#overlay-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 任意缩放下都居中于画布 */
  background: rgba(10,10,30,0.86);
  border: 2px solid #555;
  border-radius: 10px;
  padding: 28px 40px;
  text-align: center;
  width: min(360px, 82%);
}
#overlay-content h2 { font-size: 26px; margin-bottom: 8px; }
#overlay-content p { color: #bbb; margin-bottom: 18px; }
#start-btn {
  font-size: 18px;
  padding: 10px 28px;
  border: none;
  border-radius: 6px;
  background: #4aa3ff;
  color: #07101f;
  font-weight: 700;
  cursor: pointer;
}
#start-btn:hover { background: #6cc6ff; }
/* 结算/开场结束时要连容器一起移除：
   #overlay 是 position:absolute + inset:0，铺满整个画布区，
   只隐藏里面的 #overlay-content 会让这层透明容器仍然覆盖在画布上方，
   于是画布上所有点击（生存模式的菜单、背包里的合成/关闭按钮）都被它吃掉，
   表现为「点了没反应」。display:none 后它既不可见也不再参与命中测试。 */
#overlay.hidden { display: none; }

/* 生存模式：隐藏对战模式的 HUD 与底部操作说明（生存模式 HUD 直接绘制在画布上） */
body.survival #hud,
body.survival #round-info,
body.survival footer#controls { display: none; }

footer#controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}
.ctrl-card {
  background: #232342;
  border: 1px solid #3a3a5c;
  border-radius: 8px;
  padding: 10px 14px;
}
.ctrl-card h3 { font-size: 15px; margin-bottom: 6px; }
.ctrl-card ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: #ccc; }
.ctrl-card b {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  background: #3a3a5c;
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 4px;
  color: #fff;
}
.ctrl-card i { color: #8fd38f; font-style: normal; font-size: 12px; }

/* 小屏幕微调：缩小页眉字号，为画布腾出更多空间 */
@media (max-width: 640px) {
  body { padding: 8px; }
  :root { --page-pad-x: 16px; }   /* 页面内边距变小，公式随之调整 */
  header h1 { font-size: 18px; letter-spacing: 2px; }
  #round-info { font-size: 12px; }
  footer#controls { grid-template-columns: 1fr; gap: 6px; }
}

/* 窗口高度不足时隐藏底部「操作说明」，把纵向空间让给画布。
   为什么是 820px：1080p 全屏与 1440×900 都高于它（画布已有 ~600px 高，说明留着有用）；
   而 768/800 这类笔记本或"没最大化的窗口"里，操作说明会折行占掉 150~250px，
   画布被压到两三百像素。隐藏后 --reserved-h 由 game.js 实测自动变小，画布随之变大。
   手机版不受影响（body.mobile 已隐藏页脚）。 */
@media (max-height: 820px) {
  footer#controls { display: none; }
}

/* ============================================================
   移动端「双人同屏」：由 mobile.js 给 <body> 加 .mobile 后才生效
   目标是把除触控按键外的高度全部给画布，两侧各放一组按键
   ============================================================ */
body.mobile {
  padding: 0;
  height: 100vh;
  height: 100dvh;      /* dvh 会随手机地址栏收起而变化，vh 作为回退 */
  overflow: hidden;
  align-items: stretch;
  touch-action: none;  /* 关闭页面滚动与双击缩放，避免误触影响游戏 */
  /* 按键尺寸以视口高度为基准：横屏时高度小，按高度换算才不会被挤掉 */
  --btn: clamp(38px, 13vh, 58px);
  --pad-h: calc(var(--btn) * 2 + 26px);
}
body.mobile #game-wrap {
  width: 100%;
  height: 100%;
  gap: 2px;
  /* 底部留出触控按键区，并避开刘海屏的安全区域 */
  padding: 2px 4px calc(var(--pad-h) + env(safe-area-inset-bottom, 0px));
}
body.mobile header,
body.mobile footer#controls { display: none; }

/* 血条压缩成细条，尽量把纵向空间让给画布 */
body.mobile #hud { grid-template-columns: 1fr auto 1fr; gap: 6px; }
body.mobile .hp-label { font-size: 11px; }
body.mobile .hp-bar { height: 10px; border-width: 1px; }
body.mobile .weapon-cd { font-size: 9px; height: 11px; }
/* 冷却/装备行没有内容时不占位：手机纵向空间紧张，空行留着纯属浪费 */
body.mobile .weapon-cd:empty { display: none; }
body.mobile #win-marks { min-width: 46px; gap: 1px; }
body.mobile .win-row { height: 8px; }
body.mobile .win-dot { width: 8px; height: 8px; border-width: 1px; }
body.mobile #vs { font-size: 11px; }

/* 画布占据剩余高度：横屏按高度撑满（左右留黑边），竖屏按宽度撑满 */
body.mobile #stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (orientation: landscape) { body.mobile #game { height: 100%; width: auto; } }
@media (orientation: portrait)  { body.mobile #game { width: 100%; height: auto; } }
/* 横屏时 HUD 悬浮在画布顶部（画面最上方一般是天空，不遮挡关键内容）：
   手机横屏纵向只有 300~400px，HUD 若排在流内会吃掉 60px 画布高度 */
@media (orientation: landscape) {
  body.mobile #game-wrap { position: relative; }
  body.mobile #hud {
    position: absolute;
    top: 2px; left: 4px; right: 4px;
    z-index: 20;
    pointer-events: none; /* 悬浮层不拦截触控按键 */
  }
}
body.mobile #game { border-width: 1px; border-radius: 4px; }
body.mobile #overlay-content { padding: 14px 20px; }
body.mobile #overlay-content h2 { font-size: 19px; }
body.mobile #overlay-content p { font-size: 12px; margin-bottom: 12px; }
body.mobile #start-btn { font-size: 15px; padding: 8px 20px; }

/* ---------- 触控按键 ---------- */
#pads {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--pad-h);
  padding: 4px 10px calc(4px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;  /* 容器本身不拦截点击，只有按键可点 */
  z-index: 30;
}
.pad-side {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  touch-action: none;
}
.pad-side.p1 { align-items: flex-start; }
.pad-side.p2 { align-items: flex-end; }
/* P2 整行镜像：按键区靠右、动作键朝向屏幕中心，符合右手拇指位置 */
.pad-side.p2 .pad-row,
.pad-side.p2 .pad-tools { flex-direction: row-reverse; }

.pad-row, .pad-tools, .pad-tabrow { display: flex; gap: 10px; align-items: center; }
.pad-tools { gap: 6px; }
.pad-group { display: flex; gap: 6px; }

.pad-btn {
  width: var(--btn);
  height: var(--btn);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: calc(var(--btn) * 0.34);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pad-btn.on { background: rgba(255, 255, 255, 0.42); }
.pad-side.p1 .pad-btn { border-color: rgba(74, 163, 255, 0.6); }
.pad-side.p2 .pad-btn { border-color: rgba(255, 90, 90, 0.6); }

/* 工具键做成小胶囊，尽量少占纵向空间 */
.pad-tool {
  width: auto;
  height: calc(var(--btn) * 0.54);
  min-width: calc(var(--btn) * 0.86);
  padding: 0 8px;
  border-radius: 999px;
  font-size: calc(var(--btn) * 0.26);
}
.pad-tab {
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
  color: #ddd;
  font-size: 11px;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.pad-tab.on { background: #4aa3ff; color: #07101f; border-color: #4aa3ff; }
#pads .hidden { display: none; }

/* 全屏开关：iOS 不支持元素全屏时 mobile.js 不会生成这个按钮 */
.chip-btn {
  position: fixed;
  top: 3px; right: 6px;
  z-index: 31;
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(10, 10, 30, 0.55);
  color: #ddd;
  font-size: 11px;
  pointer-events: auto;
}
/* 横屏时 HUD 悬浮在顶部，全屏按钮上移会与 P2 血条重叠，因此移到按键区上方 */
@media (orientation: landscape) {
  body.mobile .chip-btn { top: auto; bottom: calc(var(--pad-h) + 6px); }
}

/* 竖屏提示：双人同屏的按键只能横屏放下 */
#rotate-hint {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(10, 10, 30, 0.92);
  text-align: center;
  padding: 24px;
}
#rotate-hint b { font-size: 22px; letter-spacing: 2px; }
#rotate-hint span { color: #bbb; font-size: 13px; }
@media (orientation: portrait) {
  body.mobile #rotate-hint { display: flex; }
}