/* ============================================================================
   wild-signal-species.css —— 页尾「八物种卡」（2026-10-22）
   ----------------------------------------------------------------------------
   设计源：Figma HANXINBO / node 107:1196（画板 1440，组 1060 × 590）
     · 卡面      220 × 220 —— 4 列 × 2 行
     · 列距      60（= 卡的 27.27%）   行距 26（= 卡的 11.82%）
     · 卡→文字   20（= 卡的 9.09%）    文字块 42（名称 20 + 状态 20 + 2 间距）
     · 名称      18 / 行高 20 / Semibold / 字距 1.44(0.08em) / #FFFFFF / 居中
     · 状态      14 / 行高 20 / Light   / 字距 1.12(0.08em) / #FFFFFF / 居中
     · 阴影      设计稿 = offset (10,10)、radius 0、无扩散、rgb(24,24,11) = #18180B
                 （2× 渲染取样 std = 0 ⇒ 纯不透明硬边）。**2026-10-22 定：不用这道，
                 只留素材自带的羽化投影**；素材已把抠图残留的紫红色压成 #18180B 同色系。

   卡片材质沿用原设计 `paper-square-plate`（446 × 411，纸面外留 2.7% 透明边）。
   原设计把纸卡按 110% 宽、-3% 偏移贴在一个 1.0852 的盒子上；设计稿的卡是 1:1，
   所以这里把纸卡改成 110% × 110% 非等比铺满 —— 纸纹各向异性拉 8%，
   肉眼不可辨（素材是皱纸纹理，无字无直线），撕边连续、出血量不变。

   倾斜/摆动：整套 hover 类名原样沿用原设计卡（`hover:rotate-[--rotate]` 与
   `[&:hover~.X]` / `[.X:has(~&:hover)]` 两个邻卡半角联动），只是把外层从
   原设计那张「数字 + 兽图」的卡片换成「纸卡 + 名称」的卡片。
   ============================================================================ */

.ws-species {
	--card: 220px;                            /* 设计稿卡面边长 */
	--gap-x: calc(var(--card) * 0.272727);    /* 60 / 220 */
	--gap-y: calc(var(--card) * 0.118182);    /* 26 / 220 */
	--label-gap: calc(var(--card) * 0.090909);/* 20 / 220 */
	--ink-inset: 7%;                          /* 线稿盒留边（纸质内边距） */

	display: grid;
	grid-template-columns: repeat(4, var(--card));
	column-gap: var(--gap-x);
	row-gap: var(--gap-y);
	justify-content: center;
	justify-items: center;
	width: 100%;
}

.ws-species__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* 纸卡：正方卡面，纸卡 110% 出血（原设计的 -3% / 110% 几何不变） */
.ws-species__plate {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
}

.ws-species__sheet {
	position: absolute;
	left: -3%;
	top: -3%;
	width: 110%;
	height: 110%;
	max-width: none;   /* 必须显式解除 —— preflight 的 img{max-width:100%} 会把 110% 钉回 100% */
	object-fit: fill;
	/* 阴影只有一层：素材 alpha 边缘自带（向右下的羽化投影），
	     2026-10-22 定 —— 不要设计稿那道 CSS 硬影，删掉 drop-shadow。
	     素材已把原本的紫红色（抠图残留红墙色）压成 #18180B 同色系。 */
}

/* 线稿：白底黑墨，multiply 让纸纹透出来（与原设计同一手法） */
.ws-species__ink {
	position: absolute;
	left: var(--ink-inset);
	top: var(--ink-inset);
	width: calc(100% - var(--ink-inset) * 2);
	height: calc(100% - var(--ink-inset) * 2);
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ws-species__label {
	margin-top: var(--label-gap);
	text-align: center;
	color: #fff;
	font-family: "PingFang SC", "Hiragino Sans GB", "Songti SC", "Microsoft YaHei", sans-serif;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
}

.ws-species__name {
	font-size: max(13px, calc(var(--card) * 0.081818));  /* 18 / 220（150px 卡时按比例只有 12.3px，给 13px 下限） */
	line-height: max(16px, calc(var(--card) * 0.090909));/* 20 / 220 */
	font-weight: 600;
	letter-spacing: 0.08em;
}

.ws-species__status {
	margin-top: calc(var(--card) * 0.009091); /* 2 / 220：设计稿名称与等级之间 2px 空档 */
	font-size: max(11px, calc(var(--card) * 0.063636));  /* 14 / 220（下限 11px） */
	line-height: max(14px, calc(var(--card) * 0.090909));/* 20 / 220 */
	font-weight: 300;
	letter-spacing: 0.08em;
}

@media (max-width: 1124px) {
	.ws-species { --card: 150px; }            /* 4 × 150 + 3 × 41 = 723，1024 宽屏仍是一排四张 */
}

@media (max-width: 820px) {
	.ws-species {
		--card: min(40vw, 220px);
		--gap-x: calc(var(--card) * 0.12);
		--gap-y: calc(var(--card) * 0.16);
		grid-template-columns: repeat(2, var(--card));
	}
}