/* ============================================================
   字灵阁 · 卡片视觉系统 v2.0（增量增强层）
   在 style.css 之后加载，覆盖并深化卡面表现；不改动任何 DOM id。
   设计：国风宣纸 + 鎏金浮雕 + 稀有度分层材质 + 3D 光泽
   ============================================================ */

:root{
  --mat-n:#9fb2c9; --mat-r:#4fc3f7; --mat-sr:#b388ff;
  --mat-ssr:#ffb300; --mat-ur:#ff4d6d;
  --paper:#efe6cf; --paper2:#d9c9a3; --ink2:#2a2418;
}

/* ---------- 稀有度通用变量：每张卡用 --tc 传入主色 ---------- */
.pr-card,.dex-cell,.lore-card{ --tc:#9fb2c9; --tc-soft:rgba(159,178,201,.35); }

/* ============================================================
   一、抽卡结果卡（.pr-card）
   ============================================================ */
.pr-grid{gap:8px;}

.pr-card{
  position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;
  transform:rotateY(90deg) scale(.86);opacity:0;
  background:#11141f;
  border:1px solid color-mix(in srgb,var(--tc) 55%, #1a1f33);
  box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
  will-change:transform;
  /* 内联 --tc 由 JS 设置 */
}
.pr-card.flip{animation:zFlip .5s cubic-bezier(.2,.8,.25,1) forwards;}
@keyframes zFlip{
  0%{transform:rotateY(90deg) scale(.86) translateZ(0);opacity:0;}
  60%{opacity:1;}
  100%{transform:rotateY(0) scale(1);opacity:1;}
}

/* 卡面主体：宣纸质感 + 稀有度色晕 */
.pr-card .pc-frame{
  position:absolute;inset:3px;border-radius:9px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb,var(--tc) 30%, transparent), transparent 70%),
    linear-gradient(165deg,#1c2338 0%,#0d101c 100%);
}
/* 宣纸纤维纹理（细密斜线 + 噪点感） */
.pr-card .pc-frame::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.10) 0 1px, transparent 1px 5px);
  mix-blend-mode:overlay;
}
/* 内描金双框 */
.pr-card .pc-frame::after{
  content:"";position:absolute;inset:5px;border-radius:6px;
  border:1px solid color-mix(in srgb,var(--tc) 45%, transparent);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
  pointer-events:none;
}

/* 四角回纹角饰 */
.pr-card .pc-corner{position:absolute;width:11px;height:11px;z-index:3;
  border-color:color-mix(in srgb,var(--tc) 80%, #fff);opacity:.85;}
.pr-card .pc-corner.tl{top:4px;left:4px;border-top:2px solid;border-left:2px solid;border-top-left-radius:3px;}
.pr-card .pc-corner.tr{top:4px;right:4px;border-top:2px solid;border-right:2px solid;border-top-right-radius:3px;}
.pr-card .pc-corner.bl{bottom:4px;left:4px;border-bottom:2px solid;border-left:2px solid;border-bottom-left-radius:3px;}
.pr-card .pc-corner.br{bottom:4px;right:4px;border-bottom:2px solid;border-right:2px solid;border-bottom-right-radius:3px;}

/* 主体汉字 */
.pr-card .pc{
  position:absolute;top:20%;left:0;right:0;text-align:center;z-index:2;
  font-size:clamp(26px,8.4vw,40px);font-weight:900;line-height:1;
  color:var(--tc);
  font-family:"STKaiti","KaiTi","Kaiti SC","PingFang SC",serif;
  text-shadow:0 2px 0 rgba(0,0,0,.5), 0 0 16px color-mix(in srgb,var(--tc) 55%, transparent);
}
/* 字底圆形印章光 */
.pr-card .pc-seal{
  position:absolute;top:15%;left:50%;transform:translateX(-50%);
  width:62%;aspect-ratio:1;border-radius:50%;z-index:1;
  background:radial-gradient(circle, color-mix(in srgb,var(--tc) 26%, transparent) 0%, transparent 68%);
  border:1px solid color-mix(in srgb,var(--tc) 22%, transparent);
}
/* 拼音 */
.pr-card .pc-py{
  position:absolute;top:7%;left:0;right:0;text-align:center;z-index:2;
  font-size:8px;letter-spacing:1px;color:color-mix(in srgb,var(--tc) 75%, #fff);
  opacity:.8;text-transform:uppercase;
}
/* 本义 */
.pr-card .pc-mean{
  position:absolute;bottom:19%;left:6px;right:6px;text-align:center;z-index:2;
  font-size:8px;color:var(--paper);opacity:.62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 稀有度绶带 */
.pr-card .pt{
  position:absolute;bottom:0;left:0;right:0;z-index:3;text-align:center;
  font-size:8px;font-weight:800;letter-spacing:2px;padding:3px 0;
  color:#0d0f1a;background:linear-gradient(90deg,
    color-mix(in srgb,var(--tc) 60%, #000),var(--tc),color-mix(in srgb,var(--tc) 60%, #000));
}
/* NEW / 今日 角标（去 emoji，用中文） */
.pr-card .newb,.pr-card .daily{
  position:absolute;top:5px;z-index:5;font-size:7px;font-weight:900;
  padding:1px 4px;border-radius:4px;letter-spacing:.5px;
}
.pr-card .newb{right:5px;background:#ff4d6d;color:#fff;box-shadow:0 0 8px #ff4d6d99;
  animation:newPulse 1.2s ease-in-out infinite alternate;}
.pr-card .daily{left:5px;background:linear-gradient(135deg,#ffce6b,#ff9d4d);color:#3a2a10;}
@keyframes newPulse{to{box-shadow:0 0 14px #ff4d6d;transform:scale(1.06);}}

/* 光泽扫过层：跟随 pointer 的 --mx */
.pr-card .pc-shine{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.35;
  background:radial-gradient(60% 45% at var(--mx,50%) var(--my,35%),
    rgba(255,255,255,.55),transparent 70%);
  mix-blend-mode:screen;
}

/* ---------- 按稀有度分层材质 ---------- */

/* N：素宣 · 淡墨 */
.pr-card.tier-N .pc-frame{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(159,178,201,.14), transparent 70%),
    linear-gradient(165deg,#222a3c,#12161f);
}
.pr-card.tier-N .pc{color:#c9d4e2;text-shadow:0 2px 0 rgba(0,0,0,.5);}

/* R：青瓷釉 · 水波 */
.pr-card.tier-R .pc-frame{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(79,195,247,.28), transparent 70%),
    repeating-linear-gradient(115deg, rgba(79,195,247,.05) 0 6px, transparent 6px 14px),
    linear-gradient(165deg,#16344a,#0d1622);
}
.pr-card.tier-R .pc-frame::after{border-color:rgba(120,220,255,.55);}

/* SR：紫晶星辉 · 斜镭射 */
.pr-card.tier-SR .pc-frame{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(179,136,255,.34), transparent 70%),
    linear-gradient(165deg,#2a1e4a,#140f26);
}
.pr-card.tier-SR .pc-foil{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.28;
  background:linear-gradient(115deg,transparent 30%,rgba(224,190,255,.55) 48%,transparent 62%);
  background-size:220% 100%;animation:foilSlide 3.2s linear infinite;mix-blend-mode:screen;
}
@keyframes foilSlide{0%{background-position:120% 0;}100%{background-position:-120% 0;}}

/* SSR：鎏金浮雕 · 流光 + 光晕 */
.pr-card.tier-SSR{border-color:#ffce6b;box-shadow:0 0 0 1px #ffce6b55,0 0 18px rgba(255,206,107,.55),0 6px 20px rgba(0,0,0,.6);}
.pr-card.tier-SSR .pc-frame{
  background:
    radial-gradient(120% 85% at 50% 5%, rgba(255,206,107,.5), transparent 72%),
    conic-gradient(from 210deg at 50% 120%, rgba(255,157,77,.25),transparent 40%,rgba(255,224,150,.28),transparent 75%),
    linear-gradient(165deg,#4a3410,#1a1206);
}
.pr-card.tier-SSR .pc-frame::after{border-color:rgba(255,224,150,.85);box-shadow:inset 0 0 12px rgba(255,206,107,.35);}
.pr-card.tier-SSR .pc{color:#fff3cf;text-shadow:0 2px 0 #7a4a10,0 0 22px #ffb300,0 0 40px #ff9d4d;}
.pr-card.tier-SSR .pc-foil{
  position:absolute;inset:-40%;z-index:2;pointer-events:none;opacity:.5;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,240,190,.85) 22deg,transparent 46deg,
    transparent 180deg,rgba(255,230,160,.7) 202deg,transparent 226deg);
  animation:spinGold 5s linear infinite;mix-blend-mode:screen;
}
@keyframes spinGold{to{transform:rotate(360deg);}}

/* UR：神话 · 彩虹镭射 + 呼吸金框 + 放射光 */
.pr-card.tier-UR{border-color:#ffe6a0;
  box-shadow:0 0 0 1px #ff4d6d,0 0 22px #ff4d6d,0 0 40px rgba(255,77,109,.5),0 6px 22px rgba(0,0,0,.7);
  animation:urBreathe 1.8s ease-in-out infinite alternate;}
@keyframes urBreathe{to{box-shadow:0 0 0 1px #ffe6a0,0 0 30px #ffce6b,0 0 58px rgba(255,206,107,.7),0 6px 22px rgba(0,0,0,.7);}}
.pr-card.tier-UR .pc-frame{
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(255,120,150,.5), transparent 72%),
    linear-gradient(165deg,#3a1230,#1a0a1e);
}
.pr-card.tier-UR .pc-frame::after{
  border-color:#ffe6a0;box-shadow:inset 0 0 16px rgba(255,120,160,.5),0 0 8px #ffce6b;
}
.pr-card.tier-UR .pc{
  color:#fff;text-shadow:0 0 12px #ff4d6d,0 0 28px #ffce6b,0 0 48px #fff;
  animation:urGlyph 2.4s ease-in-out infinite alternate;
}
@keyframes urGlyph{to{text-shadow:0 0 18px #ffce6b,0 0 38px #fff,0 0 60px #ff4d6d;}}
.pr-card.tier-UR .pc-foil{
  position:absolute;inset:-30%;z-index:2;pointer-events:none;opacity:.45;
  background:conic-gradient(from 0deg,#ff8fbf55,#ffe06655,#8ff0c055,#8fd9ff55,#c7a6ff55,#ff8fbf55);
  filter:blur(8px);animation:spinGold 6s linear infinite;mix-blend-mode:screen;
}
.pr-card.tier-UR .pc-rays{
  position:absolute;top:15%;left:50%;width:180%;aspect-ratio:1;transform:translateX(-50%);
  z-index:1;pointer-events:none;opacity:.35;
  background:conic-gradient(from 0deg at 50% 50%,#ffe6a022 0deg,transparent 14deg,#ffe6a022 28deg,
    transparent 42deg,#ffe6a022 56deg,transparent 70deg,#ffe6a022 84deg,transparent 98deg,
    #ffe6a022 112deg,transparent 126deg,#ffe6a022 140deg,transparent 154deg,#ffe6a022 168deg,
    transparent 182deg,#ffe6a022 196deg,transparent 210deg,#ffe6a022 224deg,transparent 238deg,
    #ffe6a022 252deg,transparent 266deg,#ffe6a022 280deg,transparent 294deg,#ffe6a022 308deg,
    transparent 322deg,#ffe6a022 336deg,transparent 350deg);
  animation:spinGold 18s linear infinite;
}

/* 旧 .rare 光晕保留兼容 */
.pr-card.rare{box-shadow:0 0 20px color-mix(in srgb,var(--tc) 60%, transparent);}

/* 出货爆闪（高稀卡翻牌瞬间由 JS 同时加 .flip + .flash-hit） */
.pr-card.flip.flash-hit{animation:zFlip .5s cubic-bezier(.2,.8,.25,1) forwards, hitFlash .75s ease-out .3s;}
@keyframes hitFlash{0%{filter:brightness(3.2) saturate(1.5);}100%{filter:none;}}

/* ============================================================
   二、图鉴卡（.dex-cell）
   ============================================================ */
.dex-cell{
  border-radius:10px;
  background:linear-gradient(165deg,#1b2136,#0e111d);
  border:1px solid color-mix(in srgb,var(--tc) 40%, #232a44);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  transition:transform .18s, box-shadow .2s;
}
.dex-cell::before{
  content:"";position:absolute;inset:3px;border-radius:7px;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--tc) 25%, transparent);
}
.dex-cell::after{ /* 顶部稀有度光晕 */
  content:"";position:absolute;top:-30%;left:-10%;right:-10%;height:70%;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,color-mix(in srgb,var(--tc) 22%, transparent),transparent 70%);
}
.dex-cell .dc{
  position:relative;z-index:2;font-size:30px;font-weight:900;
  font-family:"STKaiti","KaiTi","Kaiti SC",serif;color:var(--tc);
  text-shadow:0 0 12px color-mix(in srgb,var(--tc) 45%, transparent);
}
.dex-cell .dt{position:relative;z-index:2;font-size:8px;letter-spacing:1px;
  color:color-mix(in srgb,var(--tc) 80%, #fff);opacity:.9;margin-top:3px;}
.dex-cell .cnt{top:4px;right:5px;z-index:3;font-size:9px;font-weight:800;
  background:#0d0f1acc;border:1px solid var(--tc);color:var(--gold);
  padding:0 4px;border-radius:8px;}
.dex-cell .cost{bottom:7px;z-index:3;font-size:9px;font-weight:800;color:#ffce6b;
  background:#0d0f1acc;padding:1px 5px;border-radius:8px;}
.dex-cell .tier-bar{height:3px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--tc),transparent) !important;
  box-shadow:0 0 8px var(--tc);}
.dex-cell.locked{background:linear-gradient(165deg,#141826,#0b0d16);}
.dex-cell.locked::after{opacity:.25;}
.dex-cell.locked .dc{color:#39405c;text-shadow:none;filter:none;opacity:.7;}
.dex-cell.locked .dt{color:#39405c;opacity:.6;}
.dex-cell:active{transform:scale(.93) rotate(-1deg);}
/* 图鉴高稀卡微弱流光 */
.dex-cell[data-hi="1"]{box-shadow:0 0 10px color-mix(in srgb,var(--tc) 45%, transparent),inset 0 0 0 1px rgba(255,255,255,.03);}
.dex-cell[data-hi="1"] .dc{animation:dexGlow 2.4s ease-in-out infinite alternate;}
@keyframes dexGlow{to{text-shadow:0 0 20px var(--tc),0 0 30px color-mix(in srgb,var(--tc) 60%,transparent);}}

/* ============================================================
   三、字灵详情大卡（.lore-card）—— 国风立绘 + 3D 光泽
   ============================================================ */
.lore-card{
  position:relative;padding:22px 20px 18px;border-radius:20px;
  background:
    radial-gradient(130% 60% at 50% -5%, color-mix(in srgb,var(--tc) 26%, transparent), transparent 65%),
    linear-gradient(165deg,#1c2336 0%,#0f121e 100%);
  border:1px solid color-mix(in srgb,var(--tc) 55%, #2a3050);
  box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.04);
  transform-style:preserve-3d;will-change:transform;
}
/* 立绘背景：山纹 + 回纹描金 */
.lore-card::before{
  content:"";position:absolute;inset:7px;border-radius:14px;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--tc) 40%, transparent);
  background:
    /* 远山剪影 */
    radial-gradient(60% 22% at 20% 100%, color-mix(in srgb,var(--tc) 18%, transparent), transparent 70%),
    radial-gradient(70% 26% at 82% 100%, color-mix(in srgb,var(--tc) 14%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 6px);
  opacity:.9;
}
/* 跟随 pointer 的光泽 */
.lore-card::after{
  content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:radial-gradient(45% 40% at var(--mx,50%) var(--my,25%),
    rgba(255,255,255,.16),transparent 70%);
  mix-blend-mode:screen;opacity:.8;
}
.lore-card>*{position:relative;z-index:2;}

/* 顶部稀有度徽记 */
.lore-card .lore-badge{
  position:absolute;top:12px;right:14px;z-index:3;
  font-size:9px;font-weight:900;letter-spacing:2px;padding:3px 9px;border-radius:20px;
  color:#0d0f1a;background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 70%,#fff),var(--tc));
  box-shadow:0 0 12px color-mix(in srgb,var(--tc) 60%,transparent);
}
/* 印章（左上朱文） */
.lore-card .lore-seal{
  position:absolute;top:12px;left:14px;z-index:3;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;border-radius:5px;
  background:linear-gradient(135deg,#c0392b,#8e2b20);color:#ffe9c9;
  font-size:11px;font-weight:900;font-family:"STKaiti","KaiTi",serif;line-height:1.05;
  box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,220,180,.4);
  transform:rotate(-6deg);text-align:center;
}

/* 主体汉字：大字框 */
.lore-char{
  margin:26px auto 4px;width:150px;height:150px;display:flex;align-items:center;justify-content:center;
  font-family:"STKaiti","KaiTi","Kaiti SC",serif;font-size:96px;font-weight:900;line-height:1;
  border-radius:16px;color:var(--tc);
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--tc) 18%, transparent),rgba(0,0,0,.25));
  border:2px solid color-mix(in srgb,var(--tc) 60%,transparent);
  box-shadow:inset 0 0 30px color-mix(in srgb,var(--tc) 20%, transparent),
             0 0 26px color-mix(in srgb,var(--tc) 35%, transparent);
  text-shadow:0 3px 0 rgba(0,0,0,.45),0 0 30px color-mix(in srgb,var(--tc) 60%,transparent);
  transform:translateZ(24px);
}
.lore-meta{font-size:11px;letter-spacing:1px;color:color-mix(in srgb,var(--tc) 65%,#c9cfe0);
  margin:10px 0 4px;padding-bottom:10px;border-bottom:1px dashed color-mix(in srgb,var(--tc) 30%,transparent);}
.lore-name{font-size:22px;font-weight:900;letter-spacing:3px;color:var(--gold);
  font-family:"STKaiti","KaiTi",serif;text-shadow:0 0 16px rgba(255,206,107,.4);}
.lore-vibe{display:inline-block;font-size:11px;letter-spacing:2px;color:#0d0f1a;
  background:linear-gradient(135deg,#ffe6a8,#ffb74d);padding:2px 10px;border-radius:20px;margin:8px 0 12px;font-weight:800;}
.lore-poem{font-size:16px;line-height:2;font-style:normal;color:var(--paper);
  font-family:"STKaiti","KaiTi",serif;letter-spacing:1px;margin-bottom:10px;}
.lore-story{font-size:12px;color:#aab0c4;line-height:1.8;
  background:rgba(255,255,255,.03);border-radius:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.05);}

/* 稀有度专属大卡光效 */
.lore-card.tier-SSR .lore-char,.lore-card.tier-UR .lore-char{
  animation:loreShine 3s ease-in-out infinite alternate;
}
@keyframes loreShine{to{box-shadow:inset 0 0 40px color-mix(in srgb,var(--tc) 30%,transparent),
  0 0 44px color-mix(in srgb,var(--tc) 60%,transparent);}}
.lore-card.tier-UR{border-color:#ffe6a0;box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 34px rgba(255,77,109,.4);}

/* 深度解读 / 按钮沿用原样式，仅微调圆角；空容器不渲染紫条 */
.lore-deep{border-radius:10px;}
.lore-deep:empty{display:none;}
.lore-deep-btn,.lore-exchange,.lore-close{border-radius:12px;letter-spacing:1px;}

/* ============================================================
   四、抽卡机胶囊：卡面化点缀（不改交互）
   ============================================================ */
.pr-close{letter-spacing:3px;font-weight:900;
  background:linear-gradient(135deg,#ffe6a8,#ffb300,#ff9d4d);
  box-shadow:0 6px 18px rgba(255,179,0,.35);}

/* 减少动效偏好 */
@media(prefers-reduced-motion:reduce){
  .pr-card .pc-foil,.pr-card.tier-UR .pc-rays,.pr-card.tier-UR,
  .dex-cell[data-hi="1"] .dc,.lore-card.tier-SSR .lore-char{animation:none !important;}
}