/*
 * paper-doll-layout.css — 关键布局规则（Critical CSS）
 *
 * 目的：Planner paper-doll 只使用 .equipment-paper-doll + .paper-doll-*
 * 的绝对定位布局。旧嵌入视图的 .d4t-Paperdoll Grid 布局必须保持隔离，
 * 否则相同节点会因 CSS 到达顺序不同而混用两套布局。
 *
 * paper-doll-* 相关规则如果只在懒加载 CSS 中定义，首屏会出现 FOUC：
 * .paper-doll-armor-slots / .paper-doll-jewelry-slots / .paper-doll-item-labels
 * 全部塌成流布局，堆到容器左上角（对应 bugs/1.png 截图现象）。
 *
 * 解决：把最小必需的定位规则通过 root.tsx 的 SSR <link> 直出，
 * 保证 DOM 挂载时布局立刻可见。详细视觉规则仍在懒加载 CSS 中覆盖。
 *
 * 添加时机：2026-07-11
 * 详见：bugs/1.png 与相关分析
 */

/* ── 容器：绝对定位坐标系 ── */
.equipment-paper-doll {
  --paper-doll-layout-ready: 1;
  width: min(100%, 700px);
  height: 650px;
  position: relative;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  padding: 24px 8px 12px;
  box-sizing: border-box;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* ── 背景层 ── */
.paper-doll-main-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 32px #000;
}

.paper-doll-main-bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.58) 28%, transparent 50%, rgba(0, 0, 0, 0.58) 72%);
}

/* ── 装备槽位（左侧防具 5 件、右侧饰品 3 件） ── */
.paper-doll-armor-slots {
  position: absolute;
  left: 22px;
  top: 30px;
  bottom: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 3;
}

.paper-doll-jewelry-slots {
  position: absolute;
  right: 22px;
  top: 72px;
  bottom: 318px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 3;
}

/* ── 武器槽（左/右/中） ── */
.paper-doll-weapon {
  position: absolute;
  bottom: 118px;
  z-index: 3;
}

.paper-doll-weapon-left {
  left: 22px;
}

.paper-doll-weapon-right {
  right: 22px;
}

.paper-doll-weapon-center {
  left: 50%;
  margin-left: -39px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paper-doll-weapon-stack {
  position: absolute;
  bottom: 70px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.paper-doll-weapon-stack-left {
  left: 22px;
  align-items: flex-start;
}

.paper-doll-weapon-stack-right {
  right: 30px;
  align-items: flex-end;
}

/* ── 装备图标（尺寸；bg-image 由懒加载 CSS 补齐） ── */
.paper-doll-icon {
  position: relative;
  width: 49px;
  height: 73px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ── item-labels：绝对定位覆盖层 ── */
/* 关键：子元素的 inline style top/left/right 依赖父层 position:absolute。
   若未加载，标签会因父层为 static 而失去坐标锚点，全部堆到左上角。 */
.paper-doll-item-labels {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  pointer-events: none;
}

.paper-doll-item-label {
  position: absolute;
  width: min(196px, 29%);
  min-height: var(--paper-doll-label-height, 63px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #f1f1f1;
  line-height: 1.12;
  text-shadow:
    0 0 2px #000,
    0 0 2px #000,
    0 0 2px #000,
    0 0 2px #000;
}

.paper-doll-item-label--left {
  left: 72px;
  text-align: left;
}

.paper-doll-item-label--right {
  right: 72px;
  text-align: right;
}