新人制卡师（卡牌立绘）

ai{
  --bg:#030813;
  --bg2:#07101d;
  --panel:rgba(10,22,38,.82);
  --panel2:rgba(14,31,51,.88);
  --text:#eef7ff;
  --soft:#a9bfd3;
  --faint:#71879b;
  --cyan:#70e4ff;
  --blue:#2bc8f0;
  --purple:#b99cff;
  --gold:#ffd780;
  --green:#69e7ab;
  --red:#ff7e9b;
  --line:rgba(151,213,255,.15);
  --line2:rgba(112,228,255,.38);
  position:relative;
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:980px;
  margin:0 auto;
  overflow:hidden;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:18px;
  background:
    radial-gradient(circle at 8% 3%,rgba(43,200,240,.15),transparent 28%),
    radial-gradient(circle at 92% 12%,rgba(185,156,255,.13),transparent 25%),
    radial-gradient(circle at 50% 100%,rgba(105,231,171,.06),transparent 32%),
    linear-gradient(145deg,var(--bg),var(--bg2) 48%,#0b1828);
  box-shadow:
    0 22px 70px rgba(0,0,0,.4),
    inset 0 1px rgba(255,255,255,.04);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px;
  line-height:1.78;
  isolation:isolate;
}

ai::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%2370e4ff' stroke-opacity='.18'%3E%3Cpath d='M44 3 49 39 85 44 49 49 44 85 39 49 3 44 39 39Z'/%3E%3Ccircle cx='44' cy='44' r='27' stroke-dasharray='2 8'/%3E%3C/g%3E%3C/svg%3E");
  background-size:150px 150px;
  mask-image:linear-gradient(to bottom,#000,transparent 58%);
}

ai::after{
  content:"";
  position:absolute;
  z-index:6;
  top:0;
  left:-45%;
  width:35%;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cyan),#fff,transparent);
  box-shadow:0 0 14px var(--cyan);
  animation:aiTopScan 7s linear infinite;
}

ai hd{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:52px;
  padding:9px 15px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(90deg,rgba(112,228,255,.08),transparent 45%),
    rgba(4,12,22,.72);
  box-shadow:0 8px 28px rgba(0,0,0,.16);
}

ai hd::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  bottom:11px;
  width:3px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(var(--cyan),var(--purple));
  box-shadow:0 0 14px var(--cyan);
}

ai hd b{
  color:var(--text);
  font-size:15px;
  font-weight:900;
  letter-spacing:.08em;
  text-shadow:0 0 18px rgba(112,228,255,.3);
}

ai hd i{
  color:var(--soft);
  font-size:12px;
  font-style:normal;
  text-align:right;
  letter-spacing:.03em;
}

ai>main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(245px,310px);
  gap:16px;
  align-items:start;
  padding:16px;
}

ai>main>article{
  position:relative;
  min-width:0;
  padding:4px 3px;
  color:#dceaf5;
}

ai>main>article::before{
  content:"NARRATIVE STREAM";
  display:block;
  margin-bottom:13px;
  color:var(--cyan);
  font-size:10px;
  font-weight:800;
  line-height:1;
  letter-spacing:.2em;
  opacity:.75;
}

ai>main>article p{
  margin:0 0 13px;
  text-align:justify;
  overflow-wrap:anywhere;
}

ai>main>article p:first-of-type::first-letter{
  float:left;
  margin:7px 7px 0 0;
  color:var(--cyan);
  font-size:34px;
  font-weight:900;
  line-height:.8;
  text-shadow:0 0 18px rgba(112,228,255,.4);
}

ai q{
  position:relative;
  display:block;
  margin:17px 0 7px;
  padding:13px 14px 13px 17px;
  color:var(--text);
  border-left:2px solid var(--purple);
  border-radius:0 11px 11px 0;
  background:
    linear-gradient(90deg,rgba(185,156,255,.12),rgba(112,228,255,.025));
  box-shadow:inset 12px 0 26px rgba(185,156,255,.035);
  font-style:normal;
}

ai q::before{
  content:"SYSTEM";
  display:block;
  margin-bottom:4px;
  color:var(--purple);
  font-size:9px;
  font-weight:900;
  line-height:1;
  letter-spacing:.2em;
}

ai q::after{
  content:"";
}

ai cp{
  --a:var(--cyan);
  --t:var(--cyan);
  position:relative;
  display:flex;
  box-sizing:border-box;
  flex-direction:column;
  width:100%;
  max-width:310px;
  min-width:0;
  justify-self:center;
  padding:10px;
  overflow:hidden;
  color:#edfaff;
  border:1px solid var(--a);
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 28%,rgba(112,228,255,.16),transparent 31%),
    linear-gradient(150deg,#12263c,#07111f 60%,#030813);
  box-shadow:
    0 24px 55px rgba(0,0,0,.46),
    0 0 30px color-mix(in srgb,var(--a) 19%,transparent),
    inset 0 0 34px rgba(112,228,255,.025);
  transform:perspective(850px) rotateY(-2deg) rotateX(1deg);
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;
}

ai cp:hover{
  transform:perspective(850px) rotateY(0) rotateX(0) translateY(-5px);
  box-shadow:
    0 31px 65px rgba(0,0,0,.52),
    0 0 44px color-mix(in srgb,var(--a) 29%,transparent),
    inset 0 0 38px color-mix(in srgb,var(--a) 6%,transparent);
}

ai cp::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:6px;
  pointer-events:none;
  border:1px solid color-mix(in srgb,var(--a) 38%,transparent);
  border-radius:15px;
  background:
    linear-gradient(135deg,var(--a),transparent 11%) 0 0/34px 1px no-repeat,
    linear-gradient(135deg,var(--a),transparent 11%) 0 0/1px 34px no-repeat,
    linear-gradient(315deg,var(--a),transparent 11%) 100% 100%/34px 1px no-repeat,
    linear-gradient(315deg,var(--a),transparent 11%) 100% 100%/1px 34px no-repeat;
  opacity:.72;
}

ai cp::after{
  content:"";
  position:absolute;
  z-index:1;
  top:-60%;
  left:-70%;
  width:45%;
  height:220%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
  transform:rotate(21deg);
  animation:aiCardShine 6.5s ease-in-out infinite;
}

ai cp[r="普通"]{--a:#9db2c4}
ai cp[r="精良"]{--a:#69e7ab}
ai cp[r="稀有"]{--a:#70e4ff}
ai cp[r="史诗"]{--a:#b99cff}
ai cp[r="传说"]{--a:#ffd780}
ai cp[r="概念级"]{
  --a:#f5d8ff;
  border-color:#d9bdff;
  background:
    radial-gradient(circle at 18% 14%,rgba(112,228,255,.2),transparent 27%),
    radial-gradient(circle at 83% 32%,rgba(255,126,155,.16),transparent 25%),
    radial-gradient(circle at 48% 78%,rgba(255,215,128,.11),transparent 30%),
    linear-gradient(145deg,#19132e,#071523 55%,#130b20);
  animation:aiConceptAura 4s ease-in-out infinite;
}

ai cp[tp="物资卡"]{--t:#70e4ff}
ai cp[tp="建筑卡"]{--t:#ffd780}
ai cp[tp="召唤卡"]{--t:#b99cff}
ai cp[tp="技能卡"]{--t:#69e7ab}
ai cp[tp="自定义卡"]{--t:#ff8fb3}

ai cp>em,
ai cp>top,
ai cp>pic,
ai cp>h2,
ai cp>tx,
ai cp>rule,
ai cp>fit,
ai cp>ft{
  position:relative;
  z-index:2;
}

ai cp>em{
  display:block;
  padding:3px 7px 8px;
  color:var(--a);
  font-size:9px;
  font-style:normal;
  font-weight:900;
  line-height:1;
  letter-spacing:.18em;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 0 11px color-mix(in srgb,var(--a) 55%,transparent);
}

ai cp>top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border-top:1px solid color-mix(in srgb,var(--a) 22%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--a) 22%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--t) 10%,transparent),transparent);
}

ai cp>top b{
  color:var(--t);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}

ai cp>top b::before{
  content:"◇";
  margin-right:5px;
  text-shadow:0 0 10px currentColor;
}

ai cp[tp="物资卡"]>top b::before{content:"▣"}
ai cp[tp="建筑卡"]>top b::before{content:"⌂"}
ai cp[tp="召唤卡"]>top b::before{content:"✦"}
ai cp[tp="技能卡"]>top b::before{content:"⚡"}
ai cp[tp="自定义卡"]>top b::before{content:"∞"}

ai cp>top i{
  color:var(--a);
  font-size:10px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.1em;
}

ai pic{
  position:relative;
  display:block;
  aspect-ratio:1.22;
  margin:10px 0 9px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--a) 44%,transparent);
  border-radius:11px;
  background:
    radial-gradient(circle,var(--a) 0 1px,transparent 2px) 0 0/18px 18px,
    radial-gradient(circle at center,color-mix(in srgb,var(--a) 20%,transparent),transparent 62%),
    #071321;
  box-shadow:
    inset 0 0 28px rgba(0,0,0,.45),
    0 0 20px color-mix(in srgb,var(--a) 10%,transparent);
}

ai pic::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(135deg,rgba(255,255,255,.11),transparent 24%),
    linear-gradient(to bottom,transparent 54%,rgba(2,7,14,.86));
}

ai pic::after{
  content:"IMAGE MANIFEST";
  position:absolute;
  z-index:3;
  top:8px;
  right:8px;
  padding:3px 6px;
  color:#dff9ff;
  border:1px solid rgba(255,255,255,.16);
  border-radius:5px;
  background:rgba(2,8,15,.58);
  backdrop-filter:blur(6px);
  font-size:7px;
  font-weight:800;
  line-height:1;
  letter-spacing:.13em;
}

ai pic img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(1.08) contrast(1.04);
  transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .4s ease;
}

ai cp:hover pic img{
  transform:scale(1.045);
  filter:saturate(1.18) contrast(1.06) brightness(1.04);
}

ai pic u{
  position:absolute;
  z-index:4;
  right:9px;
  bottom:7px;
  left:9px;
  overflow:hidden;
  color:#c4d5e3;
  font-size:9px;
  line-height:1.35;
  text-align:center;
  text-decoration:none;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 1px 5px #000;
}

ai cp>h2{
  margin:4px 7px 7px;
  color:#f4fbff;
  font-size:21px;
  font-weight:900;
  line-height:1.25;
  letter-spacing:.015em;
  text-align:center;
  overflow-wrap:anywhere;
  text-shadow:
    0 0 16px color-mix(in srgb,var(--a) 25%,transparent),
    0 2px 4px rgba(0,0,0,.45);
}

ai cp>h2::after{
  content:"";
  display:block;
  width:44px;
  height:1px;
  margin:7px auto 0;
  background:linear-gradient(90deg,transparent,var(--a),transparent);
  box-shadow:0 0 8px var(--a);
}

ai tx{
  display:block;
  min-height:65px;
  padding:4px 8px 10px;
  color:#b9ccdc;
  font-size:12px;
  line-height:1.65;
  text-align:center;
  overflow-wrap:anywhere;
}

ai rule{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:2px 8px;
  margin:0 6px;
  padding:8px 9px;
  border-top:1px solid color-mix(in srgb,var(--a) 23%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--a) 23%,transparent);
  background:rgba(255,255,255,.018);
}

ai rule i{
  color:var(--faint);
  font-size:9px;
  font-style:normal;
  line-height:1.55;
  letter-spacing:.08em;
}

ai rule b{
  min-width:0;
  color:#dce9f2;
  font-size:10px;
  font-weight:600;
  line-height:1.55;
  text-align:right;
  overflow-wrap:anywhere;
}

ai fit{
  display:block;
  margin:8px 6px 0;
  padding:7px 8px;
  color:#849bad;
  border-left:2px solid var(--t);
  border-radius:0 7px 7px 0;
  background:color-mix(in srgb,var(--t) 5%,transparent);
  font-size:9px;
  line-height:1.55;
  overflow-wrap:anywhere;
}

ai fit b{
  display:block;
  margin-bottom:2px;
  color:var(--t);
  font-size:8px;
  letter-spacing:.12em;
}

ai ft{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  margin:9px 6px 2px;
  padding-top:7px;
  color:#698094;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:8px;
  line-height:1.2;
  letter-spacing:.08em;
}

ai ft i{
  font-style:normal;
}

ai ft b{
  color:var(--a);
  font-size:8px;
  text-align:right;
  text-shadow:0 0 9px color-mix(in srgb,var(--a) 50%,transparent);
}

ai>details{
  position:relative;
  margin:0 16px 16px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:
    linear-gradient(145deg,rgba(112,228,255,.035),transparent 28%),
    rgba(7,17,30,.78);
  box-shadow:
    0 13px 35px rgba(0,0,0,.23),
    inset 0 1px rgba(255,255,255,.025);
}

ai>details>summary{
  position:relative;
  display:flex;
  alig

/* 预览已截断；下载 CSS 可查看完整内容。 */

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。