:root {
  --design-width: 1920;
  --design-height: 1080;
  --stage-scale: 0.88;
  --viewport-occupancy: 0.88;
  --page-bg: #071019;

  /*
   * Boss 待机态固定构图（1920×1080 逻辑坐标）
   * 参考已确认的战斗镜头：
   * 左侧预留主角近景，Boss 位于中右区域并保持大体量压迫感。
   */
  --boss-x: 450px;
  --boss-y: 145px;
  --boss-width: 1340px;

  /*
   * Game Frame 内部实际战斗可视区。
   * 这组数值来自透明边框本身的“中央透明开口”，
   * 而不是边框外缘。这样战斗内容不会出现在顶部金属横梁背后。
   * 数值锁定在 1920×1080 逻辑坐标中，不随浏览器改变。
   */
  --battle-inset-top: 140px;
  --battle-inset-right: 140px;
  --battle-inset-bottom: 140px;
  --battle-inset-left: 140px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--page-bg);
}

body {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.web-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: #071019;
}

/* L0｜浏览器全屏世界背景：原有“左光明 / 右深渊”不变 */
.web-bg {
  position: absolute;
  inset: -2%;
  z-index: 0;
  background:
    url("./assets/web-background.jpg")
    center center / cover no-repeat;
  transform: scale(1.02);
}

/* 外围轻微收边，不干扰中央战斗舞台 */
.web-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(5, 10, 17, 0.00) 0%,
      rgba(5, 10, 17, 0.06) 58%,
      rgba(2, 5, 10, 0.26) 100%
    );
}

/* 固定 1920×1080 逻辑舞台；浏览器仅整体 FIT 缩放 */
.game-shell {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 1920px;
  height: 1080px;
  transform:
    translate(-50%, -50%)
    scale(var(--stage-scale));
  transform-origin: 50% 50%;
  will-change: transform;
}

.game-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
}

/* 保持透明。真实战斗内容由 battle-viewport 承载。 */
.game-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: transparent;
}

/*
 * 战斗视口：
 * - 始终保持 1920×1080 逻辑坐标；
 * - 使用从现有透明边框计算出的精确内部开口 mask；
 * - 后续 Boss / Player / Weak Point / FX / UI 都放进这里；
 * - 内容不会穿出 Game Frame。
 */
.battle-viewport {
  position: absolute;

  /*
   * BUG FIX v2:
   * 不再使用 mask / clip-path。
   * 直接把 battle-viewport 本身做成 Game Frame 内部的真实矩形窗口，
   * 再依靠 overflow:hidden 进行硬裁切。
   */
  top: var(--battle-inset-top);
  right: var(--battle-inset-right);
  bottom: var(--battle-inset-bottom);
  left: var(--battle-inset-left);

  overflow: hidden;
  isolation: isolate;
  contain: paint;
}

/*
 * battle-world 仍然是完整的 1920×1080 世界。
 * 反向偏移 viewport 的 inset，让内部所有对象继续使用原来的舞台坐标。
 *
 * 例如 Boss 的 x=360 / y=70 不需要改变。
 */
.battle-world {
  position: absolute;
  left: calc(-1 * var(--battle-inset-left));
  top: calc(-1 * var(--battle-inset-top));

  width: 1920px;
  height: 1080px;
}

/* 任务 02 的 L0：纯战斗背景 */
.battle-background {
  position: absolute;
  inset: 0;
  z-index: 0;

  display: block;
  width: 1920px;
  height: 1080px;

  object-fit: cover;
  object-position: center center;

  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* 后续战斗分层的统一基类 */
.battle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.boss-layer {
  z-index: 20;
}

/*
 * L1｜Boss：深渊领主
 *
 * 关键原则：
 * 1. 位置与尺寸全部使用 1920×1080 的固定逻辑像素；
 * 2. 不使用 vw / vh / 百分比重新布局；
 * 3. 浏览器变化时，由 game-shell 统一 scale，Boss 比例关系不会变化；
 * 4. boss-anchor 是未来受击、后退、震动、死亡动画的运动节点。
 */
.boss-anchor {
  position: absolute;
  left: var(--boss-x);
  top: var(--boss-y);
  width: var(--boss-width);
  height: auto;

  /*
   * 参考当前战斗构图，把运动中心放在 Boss 身体偏下区域，
   * 后面做后仰/震动时会比以图片中心旋转自然。
   */
  transform-origin: 62% 82%;
  will-change: transform, opacity, filter;
}

.boss-sprite {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;

  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* 后续状态机可直接复用这些基础 class。当前默认不启用。 */
.boss-anchor.is-hit {
  animation: boss-hit-shake 180ms ease-out;
}

.boss-anchor.is-heavy-hit {
  animation: boss-heavy-hit 300ms ease-out;
}

.boss-anchor.is-dead {
  opacity: 0;
  transform: translate3d(40px, 55px, 0) rotate(2deg) scale(0.985);
  filter: brightness(1.25) saturate(1.15);
  transition:
    transform 620ms cubic-bezier(.18,.78,.2,1),
    opacity 620ms ease,
    filter 240ms ease;
}

@keyframes boss-hit-shake {
  0%   { transform: translate3d(0, 0, 0); }
  28%  { transform: translate3d(14px, -2px, 0) rotate(.25deg); }
  58%  { transform: translate3d(-7px, 1px, 0) rotate(-.12deg); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes boss-heavy-hit {
  0%   { transform: translate3d(0, 0, 0) rotate(0); }
  24%  { transform: translate3d(34px, -9px, 0) rotate(1deg); }
  62%  { transform: translate3d(12px, 4px, 0) rotate(.35deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0); }
}

.player-layer {
  z-index: 30;
}

.weak-point-layer {
  z-index: 40;
  pointer-events: auto;
}

.fx-layer {
  z-index: 50;
}

.damage-layer {
  z-index: 60;
}

.battle-ui-layer {
  z-index: 70;
  pointer-events: auto;
}

/* 原有透明 PNG 边框保持最上层 */
.game-frame {
  position: absolute;
  inset: 0;
  z-index: 100;

  display: block;
  width: 1920px;
  height: 1080px;

  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 调试 */
.debug-panel {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 9999;
  display: none;
  padding: 8px 10px;
  color: rgba(255,255,255,.86);
  background: rgba(0,0,0,.66);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 6px;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  pointer-events: none;
  white-space: pre;
}

.debug .debug-panel {
  display: block;
}

.debug .game-stage {
  outline: 2px solid rgba(0, 193, 255, .7);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .game-shell {
    will-change: auto;
  }
}