/* ============================================================
   cards.css — v2
   · 供给牌 .ccard.supply(五色猫条 + 工期成本徽 + tier)
   · 面板模块卡 .mcard(货架感:类别色条 + 基线 r/w + 新鲜度横条,
     .low 红光呼吸 / .warn 黄光)
   · 商业化牌 .jcard(v1:金框黑底,左上乘区,右上 heat)
   阶层感:内容是货架商品,商业化是神器——一眼可辨。
   ============================================================ */

/* ============================================================
   供给手牌 .ccard.supply(改造自 v1 .ccard)
   ============================================================ */
.ccard{
  --cw:106px;--ch:148px;
  --cat:var(--dim);
  position:relative;flex:none;
  width:var(--cw);height:var(--ch);
  padding:30px 9px 8px;   /* 顶部让位给成本徽章/类别角标,防文字重叠 */
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:10px;
  background:linear-gradient(168deg,#1d2739 0%,#131b2a 62%,#101724 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .25s ease;
  user-select:none;
  animation:fly-in .32s cubic-bezier(.2,.9,.3,1);
}
.ccard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:var(--cat);
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.ccard:is(.cat-玩法,[data-cat="玩法"],.cat-play){--cat:var(--blue)}
.ccard:is(.cat-副本,[data-cat="副本"],.cat-dungeon){--cat:var(--green)}
.ccard:is(.cat-角色,[data-cat="角色"],.cat-char){--cat:var(--gold)}
.ccard:is(.cat-活动,[data-cat="活动"],.cat-event){--cat:#b48ce0}
.ccard:is(.cat-技术,[data-cat="技术"],.cat-tech){--cat:var(--dim)}

.ccard :is(.cname,.name,.card-name,h4){
  font-size:calc(var(--cw)*.115);font-weight:700;line-height:1.35;
  color:var(--text);letter-spacing:.02em;
  margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ccard :is(.r,.num-r){
  font-family:var(--mono),monospace;font-variant-numeric:tabular-nums;
  font-size:calc(var(--cw)*.22);font-weight:700;line-height:1;
  color:var(--green);
}
.ccard :is(.w,.num-w){
  font-family:var(--mono),monospace;font-variant-numeric:tabular-nums;
  font-size:calc(var(--cw)*.22);font-weight:700;line-height:1;
  color:var(--blue);
}
.ccard :is(.nums,.rw){
  display:flex;align-items:baseline;gap:10px;margin:auto 0 2px;
}
.ccard :is(.nums,.rw) :is(.r,.w){margin:0}

/* 类别角标 */
.ccard :is(.cat,.badge,.corner){
  position:absolute;top:9px;right:7px;
  font-size:calc(var(--cw)*.082);letter-spacing:.1em;
  color:var(--cat);opacity:.9;
  border:1px solid currentColor;border-radius:4px;
  padding:1px 4px;line-height:1.4;
}
/* 工期成本徽(左上,排期的货币) */
.ccard .cost-badge{
  position:absolute;top:8px;left:7px;
  font-family:var(--mono),monospace;
  font-size:calc(var(--cw)*.085);font-weight:700;letter-spacing:.02em;
  color:#241a05;
  background:linear-gradient(180deg,#d8c56a,#b99a3e);
  border-radius:4px;
  padding:1px 5px;line-height:1.5;
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.ccard .cost-badge.mid{background:linear-gradient(180deg,#e8b96a,#c88a3e)}
.ccard .cost-badge.big{
  background:linear-gradient(180deg,#e88a6a,#c85a3e);
  color:#fff;
  animation:cost-big-pulse 1.8s ease-in-out infinite;
}
@keyframes cost-big-pulse{
  0%,100%{box-shadow:0 1px 3px rgba(0,0,0,.5)}
  50%{box-shadow:0 1px 3px rgba(0,0,0,.5),0 0 10px rgba(232,138,106,.6)}
}
.ccard .tier{
  margin-top:auto;
  font-size:10px;opacity:.7;
}

#hand-cards .ccard{--cw:104px;--ch:146px}
#hand-cards .ccard:not(.disabled):hover{
  transform:translateY(-8px) scale(1.05);
  z-index:6;
  border-color:rgba(240,201,106,.55);
  box-shadow:0 14px 26px rgba(0,0,0,.55),0 0 16px rgba(240,201,106,.14),inset 0 1px 0 rgba(255,255,255,.08);
}
@keyframes fly-in{
  from{opacity:.25;transform:translateY(26px) scale(1.12)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ============================================================
   面板模块卡 .mcard(8 槽货架,永久驻留)
   ============================================================ */
.mcard{
  --cat:var(--dim);
  position:relative;
  display:flex;flex-direction:column;
  padding:26px 8px 6px;   /* 顶部让位给类别角标/翻新标记 */
  border:1px solid var(--line);border-radius:9px;
  background:linear-gradient(168deg,#1a2436 0%,#121a29 60%,#101724 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  cursor:pointer;
}
.mcard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--cat);
}
.mcard.cat-play{--cat:var(--blue)}
.mcard.cat-dungeon{--cat:var(--green)}
.mcard.cat-char{--cat:var(--gold)}
.mcard.cat-event{--cat:#b48ce0}
.mcard.cat-tech{--cat:var(--dim)}

.mcard .mname{
  font-size:12px;font-weight:700;line-height:1.3;
  color:var(--text);
  margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mcard .cat{
  position:absolute;top:7px;right:6px;
  font-size:9px;letter-spacing:.08em;
  color:var(--cat);opacity:.9;
  border:1px solid currentColor;border-radius:3px;
  padding:0 3px;line-height:1.4;
}
.mcard .reno-tag{
  position:absolute;top:7px;left:6px;
  font-size:9px;color:var(--blue);
  border:1px solid rgba(110,168,254,.6);border-radius:3px;
  padding:0 3px;line-height:1.4;
  background:rgba(10,20,36,.8);
}
.mcard .nums{
  display:flex;align-items:baseline;gap:8px;margin:4px 0 2px;
}
.mcard .r{
  font-family:var(--mono),monospace;font-size:17px;font-weight:700;line-height:1;
  color:var(--green);
}
.mcard .w{
  font-family:var(--mono),monospace;font-size:13px;font-weight:700;line-height:1;
  color:var(--blue);
}
.mcard .ver-tag{
  position:absolute;bottom:4px;right:6px;
  font-size:9px;
}

/* 新鲜度横条(死亡螺旋提前可视化) */
.mcard .fresh{
  position:relative;
  margin-top:auto;
  height:8px;
  border:1px solid var(--line);border-radius:5px;
  background:#0a101c;
  overflow:visible;
}
.mcard .fresh-bar{
  height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--red) 0%,#d8c56a 55%,var(--green) 100%);
  background-size:100px 100%;
  transition:width .45s cubic-bezier(.3,.8,.3,1);
}
.mcard .fresh-num{
  position:absolute;right:3px;top:-2px;transform:translateY(-100%);
  font-family:var(--mono),monospace;font-size:9px;font-weight:700;
  color:var(--text);text-shadow:0 1px 3px #000,0 0 4px #000;
}

/* 黄光预警 ≤50 / 红光呼吸 ≤40(SPEC §5.1 冻结) */
.mcard.warn{border-color:rgba(216,197,106,.6)}
.mcard.warn .fresh-num{color:#d8c56a}
.mcard.low{
  border-color:rgba(229,96,92,.75);
  animation:mcard-low 1.6s ease-in-out infinite;
}
.mcard.low .fresh-num{color:var(--red)}
.mcard.low::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 100%, rgba(229,96,92,.14), transparent 65%);
}
@keyframes mcard-low{
  0%,100%{box-shadow:0 3px 8px rgba(0,0,0,.35),0 0 0 rgba(229,96,92,0)}
  50%{box-shadow:0 3px 8px rgba(0,0,0,.35),0 0 16px rgba(229,96,92,.55)}
}

/* 选择态(翻新模式 / 下架换新) */
.mcard.selectable{
  border-color:rgba(110,168,254,.8);
  box-shadow:0 0 12px rgba(110,168,254,.35);
  cursor:crosshair;
}
.mcard.selectable:hover{transform:translateY(-3px)}
.mcard.danger{
  border-color:rgba(229,96,92,.85);
  box-shadow:0 0 12px rgba(229,96,92,.4);
  cursor:crosshair;
}
.mcard.danger:hover{transform:translateY(-3px)}

/* 空槽:货架虚线 */
.mcard.empty{
  border:1px dashed rgba(38,50,74,.8);
  background:transparent;
  box-shadow:none;
  cursor:default;
}
.mcard.empty::after{
  content:"+";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:rgba(125,138,165,.3);font-size:22px;
}

/* ============================================================
   商业化牌 .jcard(v1:金框黑底,印钞机气质)
   ============================================================ */
.jcard{
  --jw:100px;--jh:138px;
  position:relative;flex:none;
  width:var(--jw);height:var(--jh);
  padding:24px 8px 7px;    /* 顶部让位给 heat 角标 */
  display:flex;flex-direction:column;
  border:1px solid rgba(240,201,106,.8);border-radius:10px;
  background:
    radial-gradient(150% 90% at 18% -5%, rgba(240,201,106,.17), transparent 55%),
    linear-gradient(172deg,#181206 0%,#0b0906 45%,#040308 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.85),
    inset 0 0 20px rgba(240,201,106,.07),
    0 6px 16px rgba(0,0,0,.5);
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  user-select:none;
}
.jcard::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(240,201,106,.55),transparent);
}
.jcard :is(.mult,.x,.jm){
  font-family:var(--mono),monospace;
  font-size:calc(var(--jw)*.21);font-weight:700;line-height:1;
  color:var(--gold);
  text-shadow:0 0 10px rgba(240,201,106,.45),0 1px 0 #000;
  align-self:flex-start;
}
.jcard :is(.heat,.jh){
  position:absolute;top:7px;right:6px;
  font-family:var(--mono),monospace;
  font-size:calc(var(--jw)*.1);font-weight:700;line-height:1.3;
  color:var(--red);opacity:.92;
  text-align:right;white-space:nowrap;
}
.jcard :is(.jname,.name,h4){
  margin-top:6px;
  font-size:calc(var(--jw)*.12);font-weight:700;line-height:1.35;
  color:#e8ddc0;letter-spacing:.02em;
}
.jcard :is(.desc,.letter-note,small){
  margin-top:auto;
  font-size:calc(var(--jw)*.095);line-height:1.5;
  color:var(--dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.jcard:not(.tired):hover{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.85),
    inset 0 0 26px rgba(240,201,106,.12),
    0 12px 24px rgba(0,0,0,.55),
    0 0 22px rgba(240,201,106,.3);
}
#modal-box .jcard{--jw:112px;--jh:154px}
.jcard.new{animation:jc-new .6s ease-out}
@keyframes jc-new{
  0%{box-shadow:0 0 0 0 rgba(240,201,106,0);filter:brightness(1)}
  30%{box-shadow:0 0 30px 8px rgba(240,201,106,.6);filter:brightness(1.6)}
  60%{box-shadow:0 0 14px 3px rgba(240,201,106,.3);filter:brightness(1.15)}
  100%{box-shadow:0 0 0 1px rgba(0,0,0,.85);filter:brightness(1)}
}

/* 1024 兜底 */
@media (max-width:1120px){
  #hand-cards .ccard{--cw:94px;--ch:134px}
  #modal-box .jcard{--jw:104px;--jh:146px}
}