/* ==========================================================================
   css-battle-hud.css · 战斗 HUD 外观（gametank.html 与 online.html 共用）
   --------------------------------------------------------------------------
   本文件只作用于 body.gametank-shell 与 body.online-shell。
   game.html 不引用本文件，且本文件没有任何无作用域的选择器，
   因此不会影响旧入口的外观。

   布局契约：HUD 不再逐个手调像素，全部坐标由下面这组「布局带」变量推导。
   顶部 = 两行（芯片行 / 行动顺序 + 行动值行）；两侧 = 固定宽度侧栏；底部 = 操作条。
   #wrap（战场）被 --ct-lane / --ct-top-band / --ct-bottom-band 内缩到中间，
   所以除了瞬时的 toast 之外，没有 HUD 面板会压在战场上。
   ========================================================================== */

body.gametank-shell,
body.online-shell {
  /* —— 配色 —— */
  --ct-bg: #0b1016;
  --ct-bg-deep: #06090d;
  --ct-surface: rgba(17, 24, 34, 0.88);
  --ct-surface-raised: rgba(26, 36, 49, 0.94);
  --ct-surface-sunken: rgba(7, 11, 16, 0.66);
  --ct-stroke: rgba(150, 172, 198, 0.16);
  --ct-stroke-soft: rgba(150, 172, 198, 0.09);
  --ct-stroke-active: rgba(232, 201, 122, 0.55);
  --ct-accent: #e8c97a;
  --ct-accent-soft: rgba(232, 201, 122, 0.12);
  --ct-text: #e9eef5;
  --ct-muted: #8494a6;
  --ct-dim: #5d6b7c;
  --ct-team-a: #4f97ff;
  --ct-team-b: #ff6f5e;
  --ct-ok: #6bd39a;
  --ct-warn: #ffc861;
  --ct-bad: #ff7d6b;

  --ct-r-sm: 6px;
  --ct-r-md: 10px;
  --ct-r-lg: 14px;

  --ct-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --ct-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.32);

  /* —— 布局带 —— */
  --ct-pad: 14px;
  --ct-gap: 10px;
  --ct-rail: 264px;
  --ct-chips-h: 36px;
  --ct-toast-h: 36px;
  --ct-ctrl-h: 140px;
  --ct-minimap-h: 116px;

  /* online 用顶栏高度覆盖，本地保持 0 */
  --ct-hud-top: 0px;

  /* 中列可用宽度永远要避开两条侧栏；--ct-lane 只负责战场内缩，窄屏会降为 0。 */
  --ct-center-inset: calc(var(--ct-rail) + var(--ct-pad) + var(--ct-gap));
  --ct-lane: var(--ct-center-inset);
  /* 顶部两行：第一行芯片，第二行行动顺序 + 行动值（两行同高、同左边界）。 */
  --ct-turn-top: calc(var(--ct-pad) + var(--ct-chips-h) + var(--ct-gap));
  --ct-top-band: calc(var(--ct-turn-top) + var(--ct-chips-h) + var(--ct-gap));
  --ct-bottom-band: calc(var(--ct-pad) + var(--ct-ctrl-h) + var(--ct-gap));
  --ct-rail-free: calc(100vh - var(--ct-hud-top) - var(--ct-pad) - var(--ct-bottom-band));
}

/* 侧栏在窄屏逐级收窄；1120px 以下退回浮层，优先保证战场面积。 */
@media (max-width: 1600px) {
  body.gametank-shell,
  body.online-shell { --ct-rail: 236px; }
}
@media (max-width: 1360px) {
  body.gametank-shell,
  body.online-shell { --ct-rail: 208px; --ct-pad: 10px; }
}
@media (max-width: 1120px) {
  body.gametank-shell,
  body.online-shell { --ct-lane: 0px; }
}

/* ==========================================================================
   战场与 HUD 容器
   ========================================================================== */

body.gametank-shell,
body.online-shell {
  color: var(--ct-text);
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(79, 151, 255, 0.07), transparent 60%),
    radial-gradient(ellipse 100% 70% at 50% 110%, rgba(232, 201, 122, 0.05), transparent 60%),
    var(--ct-bg-deep);
}

body:is(.gametank-shell, .online-shell) #wrap {
  top: calc(var(--ct-hud-top) + var(--ct-top-band));
  left: var(--ct-lane);
  right: var(--ct-lane);
  bottom: var(--ct-bottom-band);
  background: transparent;
}

body:is(.gametank-shell, .online-shell) #gameCanvas {
  border-radius: var(--ct-r-md);
  box-shadow:
    0 0 0 1px var(--ct-stroke),
    0 24px 70px rgba(0, 0, 0, 0.62);
}

body:is(.gametank-shell, .online-shell) #hud {
  top: var(--ct-hud-top);
}

/* ==========================================================================
   顶部第一行：状态芯片（与第二行共用左边界）
   ========================================================================== */

body:is(.gametank-shell, .online-shell) .bar {
  top: var(--ct-pad);
  left: var(--ct-center-inset);
  right: auto;
  transform: none;
  justify-content: flex-start;
  height: var(--ct-chips-h);
  gap: 8px;
  flex-wrap: nowrap;
  max-width: calc(100% - var(--ct-center-inset) * 2);
}

body:is(.gametank-shell, .online-shell) .chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--ct-chips-h);
  padding: 0 14px;
  border: 1px solid var(--ct-stroke);
  border-radius: var(--ct-r-md);
  background: var(--ct-surface);
  box-shadow: var(--ct-shadow-sm);
  backdrop-filter: blur(10px);
  color: var(--ct-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

body:is(.gametank-shell, .online-shell) .chip b {
  margin-left: 0;
  color: var(--ct-text);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 当前回合的队伍色由 JS 写入 --turn-color。 */
body:is(.gametank-shell, .online-shell) .chip.turn-active {
  border-color: color-mix(in srgb, var(--turn-color, var(--ct-accent)) 52%, transparent);
  background: color-mix(in srgb, var(--turn-color, var(--ct-accent)) 13%, var(--ct-surface));
}
body:is(.gametank-shell, .online-shell) .chip.turn-active b {
  color: var(--turn-color, var(--ct-accent));
}

body:is(.gametank-shell, .online-shell) .chip.wind {
  min-width: 0;
  padding: 0 14px;
  border-color: var(--ct-stroke);
  background: var(--ct-surface);
  font-size: 12px;
}
body:is(.gametank-shell, .online-shell) .chip.wind b {
  margin-left: 0;
  color: #8fd0ff;
  font-size: 15px;
}
body:is(.gametank-shell, .online-shell) .chip.wind .wind-arrow {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  text-shadow: none;
}
body:is(.gametank-shell, .online-shell) .chip.wind.wind-left {
  border-color: rgba(143, 208, 255, 0.4);
}
body:is(.gametank-shell, .online-shell) .chip.wind.wind-right {
  border-color: rgba(232, 201, 122, 0.4);
}

/* ==========================================================================
   顶部第二行：行动顺序 / 行动值，铺满中列
   ========================================================================== */

body:is(.gametank-shell, .online-shell) .turn-info-panel {
  top: var(--ct-turn-top);
  left: var(--ct-center-inset);
  right: var(--ct-center-inset);
  transform: none;
  display: flex;
  align-items: center;
  gap: 16px;
  width: auto;
  min-width: 0;
  height: var(--ct-chips-h);
  padding: 0 16px;
  border: 1px solid var(--ct-stroke);
  border-radius: var(--ct-r-md);
  background: var(--ct-surface);
  box-shadow: var(--ct-shadow-sm);
  backdrop-filter: blur(10px);
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.04em;
}

body:is(.gametank-shell, .online-shell) .turn-order-text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ct-muted);
}

body:is(.gametank-shell, .online-shell) .action-value-text {
  flex: 0 0 auto;
  padding-left: 16px;
  border-left: 1px solid var(--ct-stroke);
  color: var(--ct-accent);
  white-space: nowrap;
}

/* 行动值明细只在宽到放得下的屏幕上展开，否则让位给行动顺序。
   1800px 起中列足够摆下「明细 + 完整行动顺序」。 */
body:is(.gametank-shell, .online-shell) .action-value-detail {
  display: none;
}
@media (min-width: 1800px) {
  body:is(.gametank-shell, .online-shell) .action-value-detail {
    display: inline;
    color: var(--ct-muted);
  }
}

/* ==========================================================================
   toast：不再预留整条带，改为浮在画面顶部（短暂出现）
   ========================================================================== */

body:is(.gametank-shell, .online-shell) #toast {
  top: calc(var(--ct-hud-top) + var(--ct-top-band) + 14px);
  display: inline-flex;
  align-items: center;
  height: var(--ct-toast-h);
  padding: 0 18px;
  border: 1px solid var(--ct-stroke-active);
  border-radius: 999px;
  background: rgba(12, 18, 26, 0.86);
  box-shadow: var(--ct-shadow);
  backdrop-filter: blur(12px);
  color: var(--ct-text);
  font-size: 13px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ==========================================================================
   侧栏面板通用外观（小地图、战斗记录、回放、退出提示）
   ========================================================================== */

body:is(.gametank-shell, .online-shell) #minimapWrap {
  padding: 8px;
  border: 1px solid var(--ct-stroke);
  border-radius: var(--ct-r-md);
  background: var(--ct-surface);
  box-shadow: var(--ct-shadow);
  backdrop-filter: blur(10px);
}

body:is(.gametank-shell, .online-shell) #minimapWrap:hover {
  border-color: var(--ct-stroke-active);
}

body:is(.gametank-shell, .online-shell) #minimapWrap .mini-label {
  margin-bottom: 5px;
  color: var(--ct-dim);
  font-size: 9px;
  letter-spacing: 0.18em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 画布尺寸保持 240×78 原生像素，避免缩放发虚；点击映射用的是 rect 比例。 */
body:is(.gametank-shell, .online-shell) #minimap {
  margin: 0 auto;
  border-radius: var(--ct-r-sm);
  background: #101c26;
  box-shadow: inset 0 0 0 1px var(--ct-stroke-soft);
}

/* ==========================================================================
   参战名单：贴在两侧栏底部，横向永远不越过战场
   ========================================================================== */

body:is(.gametank-shell, .online-shell) #unitRoster {
  left: var(--ct-pad);
  right: var(--ct-pad);
  bottom: var(--ct-bottom-band);
  gap: var(--ct-gap);
  align-items: flex-end;
}

body:is(.gametank-shell, .online-shell) .roster-team {
  width: var(--ct-rail);
  padding: 9px 10px 10px;
  border: 1px solid var(--ct-stroke);
  border-radius: var(--ct-r-md);
  background: var(--ct-surface);
  box-shadow:
    inset 0 2px 0 color-mix(in srgb, var(--team-color) 80%, transparent),
    var(--ct-shadow);
  backdrop-filter: blur(10px);
}
body:is(.gametank-shell, .online-shell) .roster-team:nth-child(even) {
  box-shadow:
    inset 0 2px 0 color-mix(in srgb, var(--team-color) 80%, transparent),
    var(--ct-shadow);
}

body:is(.gametank-shell, .online-shell) .roster-team-title {
  margin-bottom: 7px;
  color: color-mix(in srgb, var(--team-color) 78%, #ffffff);
  font-size: 10px;
  letter-spacing: 0.18em;
}
body:is(.gametank-shell, .online-shell) .roster-team:nth-child(even) .roster-team-title {
  justify-content: flex-start;
}

body:is(.gametank-shell, .online-shell) .roster-dot {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 10px var(--team-color);
}

/* 两行网格：名字/状态一行，血条一行，数值贴右——比原来的三行矮约 25%。 */
body:is(.gametank-shell, .online-shell) .roster-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head meta"
    "hp   hp";
  gap: 4px 10px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--ct-r-sm);
  background: var(--ct-surface-sunken);
}
body:is(.gametank-shell, .online-shell) .roster-unit + .roster-unit {
  margin-top: 5px;
}
body:is(.gametank-shell, .online-shell) .roster-unit.current {
  border-color: color-mix(in srgb, var(--team-color) 62%, transparent);
  background: color-mix(in srgb, var(--team-color) 14%, var(--ct-surface-sunken));
}
body:is(.gametank-shell, .online-shell) .roster-unit.dead {
  opacity: 0.4;
  filter: grayscale(0.85);
}

body:is(.gametank-shell, .online-shell) .roster-unit-head {
  grid-area: head;
  margin-bottom: 0;
  gap: 6px;
}
body:is(.gametank-shell, .online-shell) .roster-unit-meta {
  grid-area: meta;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 0;
}
body:is(.gametank-shell, .online-shell) .roster-hp-row {
  grid-area: hp;
  gap: 6px;
}

body:is(.gametank-shell, .online-shell) .roster-unit-name {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ct-text);
}
body:is(.gametank-shell, .online-shell) .roster-status {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--team-color) 75%, #ffffff);
}

body:is(.gametank-shell, .online-shell) .hp-track {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}
body:is(.gametank-shell, .online-shell) .hp-fill {
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--team-color) 70%, #000000),
    var(--team-color)
  );
}
/* 血条里的名字与上一行重复，隐藏后血条读数更干净。 */
body:is(.gametank-shell, .online-shell) .hp-track-name {
  display: none;
}

body:is(.gametank-shell, .online-shell) .roster-ai-tag {
  padding: 0 5px;
  border-color: rgba(232, 201, 122, 0.5);
  border-radius: var(--ct-r-sm);
  background: var(--ct-accent-soft);
  color: var(--ct-accent);
  font-size: 9px;
  line-height: 14px;
}

body:is(.gametank-shell, .online-shell) .hp-num {
  color: var(--ct-text);
  font-size: 10px;
  font-weight: 700;
}
body:is(.gametank-shell, .online-shell) .roster-action-value {
  color: var(--ct-dim);
  font-size: 9px;
}

/* ==========================================================================
   底部操作条
   ========================================================================== */

body:is(.gametank-shell, .online-shell) #controls {
  bottom: var(--ct-pad);
  display: flex;
  flex-direction: column;
  width: min(1180px, calc(100vw - var(--ct-pad) * 2));
  height: var(--ct-ctrl-h);
  padding: 10px 18px 4px;
  border: 1px solid var(--ct-stroke);
  border-radius: var(--ct-r-lg);
  background: linear-gradient(180deg, rgba(22, 30, 42, 0.94), rgba(12, 17, 25, 0.96));
  box-shadow: var(--ct-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
}

/* 队伍归属只用顶边一道色线表示，不再整块染色。 */
body:is(.gametank-shell, .online-shell) #controls[data-team-id="team-a"] {
  border-color: color-mix(in srgb, var(--ct-team-a) 38%, transparent);
  background: linear-gradient(180deg, rgba(22, 33, 50, 0.94), rgba(12, 17, 25, 0.96));
  box-shadow: var(--ct-shadow), inset 0 2px 0 var(--ct-team-a);
}
body:is(.gametank-shell, .online-shell) #controls[data-team-id="team-b"] {
  border-color: color-mix(in srgb, var(--ct-team-b) 38%, transparent);
  background: linear-gradient(180deg, rgba(40, 24, 28, 0.94), rgba(16, 13, 18, 0.96));
  box-shadow: var(--ct-shadow), inset 0 2px 0 var(--ct-team-b);
}

body:is(.gametank-shell, .online-shell) .ctrl-spread {
  flex: 1 1 auto;
  align-items: center;
  gap: 0;
  min-height: 0;
}

body:is(.gametank-shell, .online-shell) .ctrl-block {
  justify-content: center;
  padding: 0 18px;
}
body:is(.gametank-shell, .online-shell) .ctrl-block:first-child { padding-left: 0; }
body:is(.gametank-shell, .online-shell) .ctrl-block:last-child { padding-right: 0; }
body:is(.gametank-shell, .online-shell) .ctrl-block + .ctrl-block {
  border-left: 1px solid var(--ct-stroke-soft);
}
body:is(.gametank-shell, .online-shell) .ctrl-block.weps { flex: 0 1 250px; }
body:is(.gametank-shell, .online-shell) .ctrl-block.aim { flex: 0 0 184px; }
body:is(.gametank-shell, .online-shell) .ctrl-block.power { flex: 1 1 320px; }
body:is(.gametank-shell, .online-shell) .ctrl-block.move { flex: 0 0 128px; }

/* —— 武器与道具 —— */
body:is(.gametank-shell, .online-shell) .weapon-row {
  gap: 6px;
  margin-bottom: 7px;
}
body:is(.gametank-shell, .online-shell) .weapon-slot {
  padding: 6px 9px;
  border: 1px solid var(--ct-stroke);
  border-radius: var(--ct-r-sm);
  background: var(--ct-surface-sunken);
  color: var(--ct-dim);
  font-size: 10px;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
body:is(.gametank-shell, .online-shell) .weapon-slot:hover:not(.locked) {
  border-color: var(--ct-stroke-active);
}
body:is(.gametank-shell, .online-shell) .weapon-slot.active {
  border-color: var(--ct-stroke-active);
  background: var(--ct-accent-soft);
  color: var(--ct-text);
  box-shadow: inset 0 0 0 1px rgba(232, 201, 122, 0.14);
}
body:is(.gametank-shell, .online-shell) .weapon-slot b {
  margin-bottom: 2px;
  color: var(--ct-dim);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
body:is(.gametank-shell, .online-shell) .weapon-slot.active b { color: var(--ct-accent); }

body:is(.gametank-shell, .online-shell) .item-row { gap: 5px; }
body:is(.gametank-shell, .online-shell) .item-btn {
  padding: 5px 3px;
  border: 1px solid var(--ct-stroke);
  border-radius: var(--ct-r-sm);
  background: var(--ct-surface-sunken);
  color: var(--ct-dim);
  font-size: 9px;
  letter-spacing: 0.04em;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
body:is(.gametank-shell, .online-shell) .item-btn b {
  color: var(--ct-muted);
  font-size: 10px;
  font-weight: 700;
}
body:is(.gametank-shell, .online-shell) .item-btn:hover:not(:disabled) {
  border-color: var(--ct-stroke-active);
  background: var(--ct-accent-soft);
}
body:is(.gametank-shell, .online-shell) .item-btn.active {
  border-color: var(--ct-stroke-active);
  background: var(--ct-accent-soft);
  color: var(--ct-text);
}
body:is(.gametank-shell, .online-shell) .item-btn.active b { color: var(--ct-accent); }

/* —— 射界 —— */
/* 表盘按 148×84 的比例缩到 72 高，省下的竖直空间全部让给战场。
   画布内部仍按原生尺寸绘制，只是显示变小。 */
body:is(.gametank-shell, .online-shell) #aimGauge {
  width: 127px;
  height: 72px;
}
body:is(.gametank-shell, .online-shell) .aim-caption {
  margin-top: 3px;
  color: var(--ct-muted);
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* —— 力度 —— */
body:is(.gametank-shell, .online-shell) .power-head {
  margin-bottom: 8px;
  color: var(--ct-muted);
  font-size: 11px;
  letter-spacing: 0.1em;
}
body:is(.gametank-shell, .online-shell) .power-head b {
  color: var(--ct-accent);
  font-size: 24px;
  font-weight: 800;
  text-shadow: 0 0 18px rgba(232, 201, 122, 0.28);
}
body:is(.gametank-shell, .online-shell) .power-segment {
  border-color: var(--ct-stroke);
  background: var(--ct-surface-sunken);
}
body:is(.gametank-shell, .online-shell) .power-segment-fill {
  background: var(--ct-ok);
  box-shadow: none;
}
body:is(.gametank-shell, .online-shell) .power-segment:nth-child(n + 4) .power-segment-fill {
  background: var(--ct-warn);
}
body:is(.gametank-shell, .online-shell) .power-segment:nth-child(n + 7) .power-segment-fill {
  background: var(--ct-bad);
}
body:is(.gametank-shell, .online-shell) .power-segments.charging .power-segment {
  border-color: var(--ct-stroke-active);
}
body:is(.gametank-shell, .online-shell) .power-marker::before {
  background: #fff4c8;
  box-shadow: 0 0 8px rgba(255, 224, 130, 0.9);
}
body:is(.gametank-shell, .online-shell) .power-marker::after {
  border-top-color: #fff4c8;
}

/* —— 移动力 —— */
body:is(.gametank-shell, .online-shell) .move-mini-label {
  color: var(--ct-muted);
  font-size: 11px;
  letter-spacing: 0.1em;
}
body:is(.gametank-shell, .online-shell) .move-mini-label b {
  color: var(--ct-ok);
  font-size: 13px;
  font-weight: 700;
}
body:is(.gametank-shell, .online-shell) .meter.move-mini {
  height: 6px;
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}
body:is(.gametank-shell, .online-shell) .meter .fill.move {
  border-radius: 999px;
  background: linear-gradient(90deg, #3f9e73, var(--ct-ok));
}

/* —— 快捷键提示 —— */
body:is(.gametank-shell, .online-shell) .hint {
  flex: 0 0 auto;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--ct-stroke-soft);
  color: var(--ct-dim);
  font-size: 10px;
  letter-spacing: 0.06em;
}
body:is(.gametank-shell, .online-shell) .hint kbd {
  padding: 1px 6px;
  border: 1px solid var(--ct-stroke);
  border-radius: 4px;
  background: var(--ct-surface-sunken);
  color: var(--ct-muted);
  font-size: 10px;
}

/* ==========================================================================
   短屏兜底：高度不够时收紧操作条与顶部带，避免面板挤在一起
   ========================================================================== */
@media (max-height: 820px) {
  body.gametank-shell,
  body.online-shell {
    --ct-ctrl-h: 128px;
    --ct-toast-h: 32px;
    --ct-pad: 10px;
  }
  body:is(.gametank-shell, .online-shell) #aimGauge { width: 113px; height: 64px; }
  body:is(.gametank-shell, .online-shell) .power-head b { font-size: 20px; }
}