/* ============================================================
   v2.css —— v2.0 新增控件样式：图层立体效果（平面/凸起/凹陷）、
   厚度滑块、拉丝强度、彩色图层标记
   ============================================================ */

/* 分隔小标题：──── 立体效果 ──── */
.relief-sep {
  margin: 12px 0 6px; color: var(--text-dim); font-size: 11px;
  text-align: center; letter-spacing: 2px;
  display: flex; align-items: center; gap: 8px;
}
.relief-sep::before, .relief-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* 平面 / 凸起 / 凹陷 三选一按钮 */
.relief-row { display: flex; gap: 6px; margin: 4px 0 2px; }
.relief-row .rbtn {
  flex: 1; padding: 6px 0; font-size: 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text); cursor: pointer;
}
.relief-row .rbtn:hover { border-color: var(--accent); }
.relief-row .rbtn.active {
  border-color: var(--accent); color: var(--accent-2);
  background: rgba(216, 171, 90, .12);
}

/* 厚度 / 深度数值 */
.rh-v { color: var(--accent-2); }

/* 彩色图层标记 */
.color-tag {
  display: inline-block; font-style: normal; font-size: 10px;
  padding: 0 5px; border-radius: 6px; vertical-align: 1px;
  border: 1px solid var(--accent); color: var(--accent-2);
}

/* 图层内的窄滑块（厚度/拉丝） */
.layer .mini input[type="range"].in-relief-h,
.layer .mini input[type="range"].in-brush { width: 96px; }

/* ---------- 顶栏品牌图标 ---------- */
.brand .logo-img {
  width: 22px; height: 22px; border-radius: 5px;
  align-self: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* ---------- 成品柜（DOM 图层卡） ----------
   结构：.gm-card（perspective 透视）> .gm-rotator（rotateX/Y 倾斜）
        > canvas 纸形图层 + .gm-foil 全息层（mask-image 限制在烫色区域）
   无底板、无描边，仅柔和 box-shadow。 */

#gallery-grid {
  display: flex; flex-wrap: wrap; gap: 26px; margin-top: 16px;
  padding-top: 10px; min-height: 60px;
}
.gallery-item { position: relative; display: inline-block; margin-bottom: 8px; }

.gm-card {
  perspective: 800px;
  width: 226px;
}
.gm-rotator {
  position: relative;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  cursor: pointer;
}
.gm-rotator canvas.gm-paper {
  width: 100%; display: block; border-radius: 6px;
}

/* 全息层：mask-image 精准限制在烫色图案上；multiply 适配浅色纸面 */
.gm-foil {
  /* pokemon-cards-css 的效果依赖 .card 作用域变量 → 在 .gm-foil 上补齐
     （纹理图片位于 assets/cards/img/） */
  --glitter: url("../assets/cards/img/glitter.png");
  --glittersize: 25%;
  --imgsize: cover;
  --grain: url("../assets/cards/img/grain.webp");
  --red: #f80e35;
  --yellow: #eedf10;
  --green: #21e985;
  --blue: #0dbde9;
  --violet: #c929f1;
  --clip: none;
  position: absolute; inset: 0;
  -webkit-mask-image: var(--mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mix-blend-mode: multiply;
  filter: saturate(1.05);
  pointer-events: none;
}
/* 原版效果的着色目标 .card__shine：铺满全息层 */
.gm-foil .card__shine,
.gm-foil .card__shine::before,
.gm-foil .card__shine::after {
  position: absolute; inset: 0; width: auto; height: auto;
}

/* 6 种镭射配方（专为浅色纸面设计：明亮光谱色 + 指针驱动的流动） */
.gm-foil[data-pat="0"] {   /* 镭射·光谱 */
  background-image: linear-gradient(115deg,
    #ff2d55, #ff9500, #ffd60a, #34c759, #00c7be, #007aff, #af52de, #ff2d55);
  background-size: 300% 300%;
  background-position: var(--pointer-x) var(--pointer-y);
  mix-blend-mode: normal;
  opacity: 0.92;
}
.gm-foil[data-pat="1"] {   /* 镭射·棱镜 */
  background-image: conic-gradient(from calc(var(--px-num) * 360deg) at var(--pointer-x) var(--pointer-y),
    #ff2d55, #ff9500, #ffd60a, #34c759, #00c7be, #007aff, #af52de, #ff2d55);
  mix-blend-mode: normal;
  opacity: 0.9;
}
.gm-foil[data-pat="2"] {   /* 镭射·波浪 */
  background-image: repeating-linear-gradient(125deg,
    #ff2d55 0 14px, #ff9500 14px 28px, #ffd60a 28px 42px, #34c759 42px 56px,
    #00c7be 56px 70px, #007aff 70px 84px, #af52de 84px 98px);
  background-position: calc(var(--px-num) * 160px) calc(var(--py-num) * 100px);
  mix-blend-mode: normal;
  opacity: 0.85;
}
.gm-foil[data-pat="3"] {   /* 镭射·金辉 */
  background-image: linear-gradient(105deg,
    #b8860b 0%, #ffd700 18%, #fff8dc 30%, #ffe066 42%, #fff8dc 50%,
    #d4a017 62%, #fff8dc 74%, #ffd700 86%, #b8860b 100%);
  background-size: 280% 100%;
  background-position: var(--pointer-x) center;
  mix-blend-mode: normal;
}
.gm-foil[data-pat="4"] {   /* 镭射·极光 */
  background-image:
    linear-gradient(120deg, rgba(175, 82, 222, 0.55), rgba(0, 199, 190, 0.5) 45%, rgba(255, 214, 10, 0.55)),
    linear-gradient(60deg, rgba(0, 122, 255, 0.4), rgba(52, 199, 89, 0.35));
  background-size: 260% 260%, 220% 220%;
  background-position: var(--pointer-x) var(--pointer-y),
    calc(100% - var(--pointer-x)) calc(100% - var(--pointer-y));
  mix-blend-mode: normal;
  opacity: 0.9;
}
.gm-foil[data-pat="5"] {   /* 镭射·碎钻 */
  background-image: url("../assets/cards/img/glitter.png"),
    linear-gradient(115deg, #ff9500, #ffd60a, #00c7be, #af52de, #ff2d55);
  background-size: 34% 34%, 300% 300%;
  background-position: center, var(--pointer-x) var(--pointer-y);
  background-blend-mode: screen;
  mix-blend-mode: normal;
  opacity: 0.9;
}

.gallery-del {
  position: absolute; top: 4px; right: 4px; z-index: 60;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.85);
  color: #444; cursor: pointer; display: none; font-size: 11px; line-height: 1;
}
.gallery-del:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.gallery-item:hover .gallery-del { display: block; }

/* ---------- 使用教程弹窗 ---------- */
.tutorial-card { width: 460px; }
.tut-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; color: var(--accent-2); font-size: 15px;
}
.tut-head span { color: var(--text-dim); font-size: 12px; }
.tut-body { color: var(--text); font-size: 13px; line-height: 1.9; min-height: 190px; }
.tut-body b { color: var(--accent-2); }
.tut-body .kbd {
  display: inline-block; padding: 0 6px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--panel-2);
  font-size: 11px; color: var(--text-dim); margin: 0 1px;
}
.tut-dots { display: flex; gap: 6px; margin: 4px 0 14px; }
.tut-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); transition: background .2s;
}
.tut-dots i.on { background: var(--accent); }