/* ============================================================
   KARDS 军械库 —— 打印工坊 & 卡牌 DIY 样式
   记忆点：卡纸质感 + 裁切标记，屏幕所见即打印所得
   ============================================================ */

/* ---------- 控制面板 ---------- */
.ctrl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
}

.guide-steps {
  margin: 0;
  padding-left: 1.3em;
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text-2);
}
.guide-steps li { margin-bottom: var(--space-2); }
.guide-steps strong { color: var(--color-accent); }
.guide-steps b { color: var(--color-danger); }

/* ============================================================
   打印容器
   屏幕预览用 transform 缩放，打印时用真实毫米
   ============================================================ */
#printRoot {
  display: block;
}

.screen-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding-top: var(--space-4);
}

/* 屏幕下按 1mm ≈ 3.4px 缩放预览（96dpi 下 1mm≈3.78px，缩到 0.9 便于阅读） */
.page {
  position: relative;
  background: #fff;
  transform: scale(var(--preview-scale, 1));
  transform-origin: top left;
  box-shadow: var(--shadow-3);
  margin-bottom: calc(var(--space-6) - 40px);
  overflow: hidden;
  /* 纸张纹理 */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.015) 0, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.015) 0, transparent 50%);
}

.page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.page-grid {
  display: grid;
  justify-content: center;
  align-items: start;
}

/* ---------- 单个卡位 ---------- */
.pcell {
  position: relative;
  overflow: hidden;
  background: #fff;
  /* 裁切线：仅在勾选裁切标记时显示 */
  outline: 0.2mm dashed rgba(0, 0, 0, 0.32);
  outline-offset: -0.2mm;
}
.pcell:not(.with-crop) { outline: none; }

.pcell img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

/* 四角裁切标记：屏幕增强，打印时淡化但保留 */
.crop {
  position: absolute;
  width: 3.2mm;
  height: 3.2mm;
  pointer-events: none;
  z-index: 3;
}
.crop.tl { top: 0; left: 0; border-top: 0.25mm solid rgba(0,0,0,.5); border-left: 0.25mm solid rgba(0,0,0,.5); }
.crop.tr { top: 0; right: 0; border-top: 0.25mm solid rgba(0,0,0,.5); border-right: 0.25mm solid rgba(0,0,0,.5); }
.crop.bl { bottom: 0; left: 0; border-bottom: 0.25mm solid rgba(0,0,0,.5); border-left: 0.25mm solid rgba(0,0,0,.5); }
.crop.br { bottom: 0; right: 0; border-bottom: 0.25mm solid rgba(0,0,0,.5); border-right: 0.25mm solid rgba(0,0,0,.5); }

/* 卡背 */
.pcard-back {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5mm;
  background:
    repeating-linear-gradient(45deg, rgba(30,38,22,.94) 0 3px, rgba(38,48,28,.94) 3px 6px);
  border: 0.6mm solid rgba(224,161,58,.35);
}
.back-mark {
  font-family: var(--font-display);
  font-size: 7mm;
  letter-spacing: -0.02em;
  color: var(--color-accent);
}
.back-sub {
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 2.6mm;
  letter-spacing: 0.4em;
  color: rgba(224,161,58,.7);
}

/* ============================================================
   DIY 卡牌
   ============================================================ */

/* 页面顶部的 tag / 说明文字不应被 flex 拉伸导致大片空白 */
.layout > .tag { align-self: flex-start; }
.layout > p { margin-top: var(--space-3); }

.diy-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}

/* DIY 卡面：仿官方卡面结构，纸质卡牌质感 */
.diy-card {
  width: var(--dw);
  height: var(--dh);
  position: relative;
  flex-shrink: 0;
}
.diy-inner {
  width: 100%;
  height: 100%;
  padding: 4px;
  background: linear-gradient(160deg, #efe9d8, #ded7c0);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(6,8,3,.5), inset 0 0 0 1px rgba(0,0,0,.08);
}
.diy-frame {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f4efe0;
  border: 2px solid var(--dc);
  border-radius: 5px;
  overflow: hidden;
  /* 字号由 JS 按卡片实际宽度换算后注入，保证任意尺寸都清晰 */
  font-size: var(--diy-fs, 13px);
  line-height: 1.45;
}

/* 卡头：名称 + 费用 */
.diy-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3.5% 5%;
  background: var(--dc);
  color: #fff;
  flex-shrink: 0;
}
.diy-name {
  flex: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.diy-cost {
  flex-shrink: 0;
  min-width: 2.4em;
  padding: 0.1em 0.35em;
  text-align: center;
  font-weight: 700;
  font-size: 1.15em;
  color: #1a1a14;
  background: #f0d47a;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

/* 插图区 */
.diy-art {
  flex-shrink: 0;
  height: 42%;
  overflow: hidden;
  background: #cfc8b2;
}
.diy-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.diy-art-ph {
  display: grid;
  place-items: center;
  font-size: 1.1em;
  color: #8b8471;
  background:
    repeating-linear-gradient(45deg, #d8d1bb 0 6px, #d0c9b1 6px 12px);
}

/* 分隔线 */
.diy-frame-line {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--dc), transparent);
  flex-shrink: 0;
}

.diy-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2%;
  padding: 3% 5%;
  overflow: hidden;
  min-height: 0;
}

/* 攻防数值 */
.diy-stats {
  display: flex;
  gap: 3%;
  justify-content: center;
  flex-shrink: 0;
}
.diy-stat {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25em;
  padding: 1.5% 0;
  background: rgba(0,0,0,.05);
  border-radius: 2px;
}
.diy-stat .v {
  font-size: 1.55em;
  font-weight: 700;
  color: var(--dc);
  line-height: 1;
}
.diy-stat .k {
  font-size: 0.82em;
  color: #6b6455;
}

/* 词条 */
.diy-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  flex-shrink: 0;
}
.diy-attr {
  padding: 0.05em 0.4em;
  font-size: 0.82em;
  font-weight: 600;
  color: #fff;
  background: var(--dc);
  border-radius: 2px;
  opacity: .9;
}

/* 描述 */
.diy-text {
  flex: 1;
  overflow: hidden;
  font-size: 0.92em;
  line-height: 1.42;
  color: #33302a;
  min-height: 0;
}

/* 卡脚 */
.diy-footer {
  display: flex;
  justify-content: space-between;
  padding: 2% 5%;
  font-size: 0.8em;
  color: #8b8471;
  border-top: 1px solid rgba(0,0,0,.09);
  background: rgba(0,0,0,.02);
  flex-shrink: 0;
}

/* ---------- DIY 编辑器 ---------- */
.diy-form { display: flex; flex-direction: column; gap: var(--space-4); }
.diy-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.diy-form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.diy-attr-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 30px;
  padding: 6px;
  background: var(--color-bg-deep);
  border: var(--hairline);
  border-radius: var(--radius-xs);
}

.diy-preview-wrap {
  position: sticky;
  top: calc(var(--topbar-h) + var(--space-5));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.diy-preview-wrap .tag { align-self: center; }
.diy-preview-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-faint);
  text-align: center;
  max-width: 40ch;
  line-height: 1.7;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .diy-layout { grid-template-columns: minmax(0, 1fr); }
  .diy-preview-wrap { position: static; }
}
@media (max-width: 720px) {
  .ctrl-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .diy-form-grid { grid-template-columns: minmax(0, 1fr); }
}