@charset "UTF-8";

/* 三极泼墨体 - 本地字体 */
@font-face {
  font-family: "三极泼墨体";
  src: url("assets/fonts/SanJiPoMoTi.woff2?v=20260717-haoran") format("woff2");
  font-display: swap;
}

/*
	Identity by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* Reset */
a {
	text-decoration: none;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
	min-width: 100%;
	min-height: 100%;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

/* Box Model */

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Basic */

@media screen and (max-width: 480px) {

	html, body {
		min-width: 320px;
	}
}

body.is-loading *, body.is-loading *:before, body.is-loading *:after {
	-moz-animation: none !important;
	-webkit-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
	-moz-transition: none !important;
	-webkit-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}

html {
	height: 100%;
	overflow: hidden;
}

body {
	height: 100%;
	/* 水墨风底色(墨黑 + 纸感灰渐变) */
	background-color: #1c1f24;
	background-image:
		/* 右上角水墨剑客 —— 用 ::before 叠 multiply，避免在 background 里吃不到 blend-mode */
		radial-gradient(ellipse 80% 60% at 30% 40%, rgba(60,65,75,0.55), transparent 70%),
		linear-gradient(160deg, #15171b 0%, #23262d 55%, #2e3138 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: center center, center center;
	background-size: cover, cover;
	background-attachment: fixed, fixed;
	color: #e6e8ec;
	position: relative;
}

/* 临时隐藏头像(用户要求) */
.avatar {
	display: none !important;
}
body::before {
	content: "";
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: url("assets/ink-swordsman/swordsman.jpg?v=20260717-real") no-repeat center center / cover;
	opacity: 0.4;   /* 降低不透明度，避免吃掉剑客 */
	filter: brightness(0.85) contrast(1.2);   /* 压暗 + 提对比，让剑客更"墨" */
	pointer-events: none;
	z-index: 0;
}

/* 樱花 canvas 必须在剑客之上，但仍在文字/链接之下 */
#sakura {
	z-index: 1 !important;
}

body:after {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: inherit;
	opacity: 0;
	z-index: 1;
	/*background-color: #ffffff;
	background-image: url("images/overlay.png"), -moz-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35));
	background-image: url("images/overlay.png"), -webkit-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35));
	background-image: url("images/overlay.png"), -ms-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35));
	background-image: url("images/overlay.png"), linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35));
	background-repeat: repeat,			no-repeat;*/
	background-size: 100px 100px, cover;
	background-position: top left,		center center;
	-moz-transition: opacity 1.75s ease-out;
	-webkit-transition: opacity 1.75s ease-out;
	/*-ms-transition: opacity 1.75s ease-out;*/
	transition: opacity 1.75s ease-out;
}

body.is-loading:after {
	opacity: 1;
}

/* Type */

body, input, select, textarea {
	color: #414f57;
	font-family: Arial,Verdana,Sans-serif;
	font-size: 14pt;
	font-weight: 300;
	line-height: 2;
	letter-spacing: 0.2em;
	/*text-transform: uppercase;*/
}

@media screen and (max-width: 1680px) {

	body, input, select, textarea {
		font-size: 11pt;
	}
}

@media screen and (max-width: 480px) {

	body, input, select, textarea {
		font-size: 10pt;
		line-height: 1.75;
	}
}

a {
	-moz-transition: color 0.2s ease, border-color 0.2s ease;
	-webkit-transition: color 0.2s ease, border-color 0.2s ease;
	-ms-transition: color 0.2s ease, border-color 0.2s ease;
	transition: color 0.2s ease, border-color 0.2s ease;
	color: inherit;
  /*color: red;*/
	text-decoration: none;
}

a:before {
	-moz-transition: color 0.2s ease, text-shadow 0.2s ease;
	-webkit-transition: color 0.2s ease, text-shadow 0.2s ease;
	-ms-transition: color 0.2s ease, text-shadow 0.2s ease;
	transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover {
	color: #ff7496;
}

strong, b {
	color: #313f47;
}

em, i {
	font-style: italic;
}

p {
	margin: 0 0 1.5em 0;
}

/* 诗词主题突出 + 特效 */
.poem-container {
  margin: 1.5em 0;
  min-height: 3.8em;
}

.poem-container.typing-done {
  animation: poemGlow 3s ease-in-out infinite;
}

.poem-container .poem {
  font-family: "三极泼墨体", "SanJiPoMoTi", "LXGW WenKai", "霞鹜文楷", "PingFang SC", "Microsoft YaHei", serif;
  font-size: 4em;
  line-height: 1.9;
  letter-spacing: 0.15em;
  font-weight: 500;
  color: #ffffff;
  margin: 0;
  display: inline;
  /* 模拟"墨在宣纸":中心白 + 外围墨晕 */
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.9),
    0 0 8px rgba(255, 255, 255, 0.35),
    0 0 18px rgba(255, 255, 255, 0.15);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
}

/* 打字光标 */
.poem-container .cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  background: #ffffff;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursorBlink 0.8s step-end infinite;
}
.poem-container.typing-done .cursor {
  display: none;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes poemGlow {
  0%, 100% {
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.4),
      0 0 20px rgba(144, 238, 144, 0.3),
      0 0 40px rgba(144, 238, 144, 0.15);
  }
  50% {
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.7),
      0 0 25px rgba(144, 238, 144, 0.7),
      0 0 50px rgba(144, 238, 144, 0.45),
      0 0 100px rgba(100, 200, 100, 0.25),
      0 0 160px rgba(100, 200, 100, 0.12);
  }
}

h1, h2, h3, h4, h5, h6 {
	color: #ffffff;
	line-height: 1.5;
	margin: 0 0 0.75em 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: inherit;
	text-decoration: none;
}

h1 {
	font-size: 1.85em;
  /** 增加或减少单词间的空白(即字间隔)*/
	/*letter-spacing: 0.22em;*/
	margin: 0 0 0.525em 0;
}

h2 {
	font-size: 1.25em;
}

h3 {
	font-size: 1em;
}

h4 {
	font-size: 1em;
}

h5 {
	font-size: 1em;
}

h6 {
	font-size: 1em;
}

@media screen and (max-width: 480px) {

	h1 {
		font-size: 1.65em;
	}
}

sub {
	font-size: 0.8em;
	position: relative;
	top: 0.5em;
}

sup {
	font-size: 0.8em;
	position: relative;
	top: -0.5em;
}

hr {
	border: 0;
	border-bottom: solid 1px #c8cccf;
	margin: 3em 0;
}


/* Main */

#main {
	position: relative;
	max-width: 100%;
	min-width: 27em;
	padding: 4.5em 3em 10em 3em;
	border-radius: 4px;
	cursor: default;
	opacity: 0.95;
	text-align: center;
	-moz-transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-moz-transform: rotateX(0deg);
	-webkit-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-moz-transition: opacity 1s ease, -moz-transform 1s ease;
	-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
	-ms-transition: opacity 1s ease, -ms-transform 1s ease;
	transition: opacity 1s ease, transform 1s ease;
	color: #ffffff;
}

#main .avatar {
	position: relative;
	display: block;
	margin-bottom: 1.5em;
}

#main .avatar img {
	display: block;
	margin: 0 auto;
	border-radius: 100%;
	border:2px solid #fff;
}

#main .avatar:before {
	display: block;
	position: absolute;
	top: 50%;
	left: -3em;
	width: calc(100% + 6em);
	height: 1px;
	z-index: -1;
	background: #c8cccf;
}

@media screen and (max-width: 480px) {

	#main {
		min-width: 0;
		width: 100%;
		padding: 4em 2em 2.5em 2em;
	}

	#main .avatar:before {
		left: -2em;
		width: calc(100% + 4em);
	}
}

body.is-loading #main {
	opacity: 0;
	-moz-transform: rotateX(15deg);
	-webkit-transform: rotateX(15deg);
	-ms-transform: rotateX(15deg);
	transform: rotateX(15deg);
}

/* Footer */

#footer {
	-moz-align-self: -moz-flex-end;
	-webkit-align-self: -webkit-flex-end;
	-ms-align-self: -ms-flex-end;
	align-self: flex-end;
	width: 100%;
	padding: 1.5em 0 0 0;
	color: rgba(255, 255, 255, 0.75);
	cursor: default;
	text-align: center;
}

#footer .copyright {
	padding: 0;
	font-size: 0.9em;
	list-style: none;
}

#footer .copyright li {
	display: inline-block;
	margin: 0 0 0 0.45em;
	padding: 0 0 0 0.85em;
	border-left: solid 1px rgba(255, 255, 255, 0.5);
	line-height: 1;
}

#footer .copyright li:first-child {
	border-left: 0;
}

/* Wrapper */

#wrapper {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	-moz-justify-content: space-between;
	-webkit-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-moz-perspective: 1000px;
	-webkit-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;
	position: relative;
	min-height: 100%;
	padding: 1.5em;
	z-index: 2;
}

#wrapper > * {
	z-index: 1;
}

#wrapper:before {
	content: '';
	display: block;
}

@media screen and (max-width: 360px) {

	#wrapper {
		padding: 0.75em;
	}
}

body.is-ie #wrapper {
	height: 100%;
}
canvas {
padding:0;
margin:0;
position: absolute;
z-index: -1;
left:0px;
}
#sakura{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	z-index: 1;
	opacity: 0.5;
	filter: brightness(1.3) saturate(1.4);   /* 适度加深绿色，不过饱和到荧光 */
}

/* 友链 */
#links {
	margin: 2em 0 0 0;
}
#links h2 {
	font-size: 1em;
	letter-spacing: 0.2em;
	margin: 0 0 0.75em 0;
	color: rgba(255, 255, 255, 0.6);
}
#links .links-list {
	list-style: none;
	padding: 0;
}
#links .links-list li {
	display: inline-block;
	margin: 0.3em 0.4em;
}
/* ============== 导航按钮（夸张 hover 特效） ============== */
#links .links-list {
	position: relative;
}

#links .links-list li {
	display: inline-block;
	margin: 0.4em 0.4em;
	/* 让 .charge-mark 能挂到 li 上而不被 a 的 overflow:hidden 切掉 */
	position: relative;
	/* 入场错峰 */
	animation: linkRise 0.9s cubic-bezier(.2,.8,.2,1) backwards;
}
#links .links-list li:nth-child(1) { animation-delay: 0.10s; }
#links .links-list li:nth-child(2) { animation-delay: 0.20s; }
#links .links-list li:nth-child(3) { animation-delay: 0.30s; }
#links .links-list li:nth-child(4) { animation-delay: 0.40s; }
#links .links-list li:nth-child(5) { animation-delay: 0.50s; }

@keyframes linkRise {
	from { opacity: 0; transform: translateY(14px) scale(0.92); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

#links .links-list li a {
	position: relative;
	display: inline-block;
	padding: 0.5em 1.4em;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 6px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9em;
	letter-spacing: 0.18em;
	background: rgba(255, 255, 255, 0.02);
	overflow: hidden;
	isolation: isolate;
	cursor: pointer;
	will-change: transform, box-shadow, color, border-color;
	transition:
		transform 0.45s cubic-bezier(.2,.8,.2,1),
		color 0.35s ease,
		border-color 0.35s ease,
		background 0.35s ease,
		box-shadow 0.5s ease,
		letter-spacing 0.4s ease;
	/* 默认呼吸流光边框 */
	animation: idleGlow 3.6s ease-in-out infinite;
}

@keyframes idleGlow {
	0%, 100% {
		border-color: rgba(255, 255, 255, 0.22);
		box-shadow: 0 0 0 rgba(255, 116, 150, 0);
	}
	50% {
		border-color: rgba(255, 180, 200, 0.45);
		box-shadow: 0 0 12px rgba(255, 116, 150, 0.18);
	}
}

/* 底部扫光条 */
#links .links-list li a::after {
	content: "";
	position: absolute;
	left: -10%;
	bottom: 4px;
	width: 120%;
	height: 1.5px;
	background: linear-gradient(90deg,
		transparent 0%,
		#ff5e8a 25%,
		#ffd166 50%,
		#ff5e8a 75%,
		transparent 100%);
	transform: translateX(-110%) scaleX(0.6);
	transform-origin: left center;
	opacity: 0;
	filter: blur(0.4px);
	transition: transform 0.6s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease;
	z-index: 2;
}

/* 粒子迸发 ::before 容器 */
#links .links-list li a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(circle at 20% 20%, rgba(255, 116, 150, 0.55) 0, transparent 35%),
		radial-gradient(circle at 80% 30%, rgba(255, 209, 102, 0.5) 0, transparent 35%),
		radial-gradient(circle at 50% 80%, rgba(123, 200, 255, 0.45) 0, transparent 40%);
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.45s ease, transform 0.55s cubic-bezier(.2,.8,.2,1);
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 0;
}

#links .links-list li a span.label {
	position: relative;
	z-index: 3;
}

/* ============== HOVER 状态 ============== */
#links .links-list li a:hover {
	color: #fff;
	border-color: transparent;
	background: rgba(255, 116, 150, 0.08);
	letter-spacing: 0.28em;
	transform: translateY(-5px) scale(1.06) rotate(-1.2deg);
	box-shadow:
		0 0 0 1px rgba(255, 116, 150, 0.9),
		0 0 18px rgba(255, 116, 150, 0.75),
		0 0 40px rgba(255, 116, 150, 0.55),
		0 0 80px rgba(255, 90, 160, 0.35),
		0 14px 30px rgba(0, 0, 0, 0.45);
	animation: none;
}

/* 整组错峰抖动（每个按钮偏移一点相位） */
#links .links-list li:nth-child(1) a:hover { animation: btnShake 0.55s ease; }
#links .links-list li:nth-child(2) a:hover { animation: btnShake 0.55s ease 0.04s; }
#links .links-list li:nth-child(3) a:hover { animation: btnShake 0.55s ease 0.08s; }
#links .links-list li:nth-child(4) a:hover { animation: btnShake 0.55s ease 0.12s; }
#links .links-list li:nth-child(5) a:hover { animation: btnShake 0.55s ease 0.16s; }

@keyframes btnShake {
	0%   { transform: translateY(-5px) scale(1.06) rotate(-1.2deg); }
	20%  { transform: translateY(-7px) scale(1.09) rotate(1.5deg); }
	40%  { transform: translateY(-3px) scale(1.05) rotate(-2deg); }
	60%  { transform: translateY(-6px) scale(1.08) rotate(0.8deg); }
	80%  { transform: translateY(-5px) scale(1.07) rotate(-1deg); }
	100% { transform: translateY(-5px) scale(1.06) rotate(-1.2deg); }
}

#links .links-list li a:hover::after {
	opacity: 1;
	transform: translateX(10%) scaleX(1);
}

#links .links-list li a:hover::before {
	opacity: 1;
	transform: scale(1.15);
	animation: particleBurst 0.9s ease-out;
}

@keyframes particleBurst {
	0%   { transform: scale(0.4) rotate(0deg);   opacity: 0; }
	35%  { transform: scale(1.25) rotate(8deg);  opacity: 1; }
	100% { transform: scale(1.15) rotate(0deg);  opacity: 1; }
}

/* ============== HOVER 滞留呼吸 ============== */
/* hover 超过 1.2s 还没点，按钮开始缓慢一呼一吸。
   用 :hover.idle 双重选择器：因为同等特异性下后写赢前写，
   后面的 animation 会覆盖上面 hover 的 btnShake，避免 transform 打架。 */
#links .links-list li a:hover.idle {
	animation: btnBreath 0.8s ease-in-out infinite !important;
	/* 保持 hover 的位置 + 加大辉光层 */
	box-shadow:
		0 0 0 1px rgba(255, 116, 150, 1),
		0 0 24px rgba(255, 116, 150, 0.85),
		0 0 50px rgba(255, 116, 150, 0.65),
		0 0 100px rgba(255, 90, 160, 0.45),
		0 0 160px rgba(255, 90, 160, 0.25),
		0 14px 30px rgba(0, 0, 0, 0.45);
}
/* 5 个按钮呼吸相位错开（不同时放大，看着有"轮流呼吸"的活感） */
#links .links-list li:nth-child(1) a:hover.idle { animation-delay: 0s;     }
#links .links-list li:nth-child(2) a:hover.idle { animation-delay: 0.15s;  }
#links .links-list li:nth-child(3) a:hover.idle { animation-delay: 0.30s;  }
#links .links-list li:nth-child(4) a:hover.idle { animation-delay: 0.45s;  }
#links .links-list li:nth-child(5) a:hover.idle { animation-delay: 0.60s;  }

@keyframes btnBreath {
	0%, 100% {
		transform: translateY(-5px) scale(1.06) rotate(-1.2deg);
		box-shadow:
			0 0 0 1px rgba(255, 116, 150, 1),
			0 0 24px rgba(255, 116, 150, 0.85),
			0 0 50px rgba(255, 116, 150, 0.65),
			0 0 100px rgba(255, 90, 160, 0.45),
			0 0 160px rgba(255, 90, 160, 0.25),
			0 14px 30px rgba(0, 0, 0, 0.45);
	}
	50% {
		transform: translateY(-7px) scale(1.10) rotate(-1.2deg);
		box-shadow:
			0 0 0 1px rgba(255, 200, 100, 1),
			0 0 32px rgba(255, 180, 120, 0.95),
			0 0 65px rgba(255, 130, 150, 0.75),
			0 0 130px rgba(255, 110, 180, 0.55),
			0 0 200px rgba(255, 110, 180, 0.30),
			0 14px 30px rgba(0, 0, 0, 0.45);
	}
}

/* 呼吸期间 ::before 渐变层跟着脉动，加强"活着"的感觉 */
#links .links-list li a:hover.idle::before {
	animation: idleHalo 0.8s ease-in-out infinite;
}
@keyframes idleHalo {
	0%, 100% { transform: scale(1.10) rotate(0deg);  opacity: 0.85; }
	50%      { transform: scale(1.30) rotate(5deg);  opacity: 1.0;  }
}

/* ============== 充能态（3 次点击） ============== */
/* charge-1: 第 1 次点击后 */
#links .links-list li a.charge-1 {
	border-color: rgba(255, 180, 80, 0.9) !important;
	background: rgba(255, 180, 80, 0.10) !important;
	box-shadow:
		0 0 0 1px rgba(255, 180, 80, 0.9),
		0 0 24px rgba(255, 180, 80, 0.6),
		0 0 50px rgba(255, 130, 60, 0.35) !important;
	animation: none !important;  /* 屏蔽 idle/btnShake */
}
#links .links-list li a.charge-1:hover {
	transform: translateY(-3px) scale(1.04) rotate(-0.6deg);
}

/* charge-2: 第 2 次点击后 */
#links .links-list li a.charge-2 {
	border-color: rgba(255, 210, 100, 1) !important;
	background: rgba(255, 210, 100, 0.14) !important;
	box-shadow:
		0 0 0 1px rgba(255, 210, 100, 1),
		0 0 24px rgba(255, 210, 100, 0.85),
		0 0 50px rgba(255, 170, 80, 0.6),
		0 0 100px rgba(255, 140, 60, 0.35) !important;
	animation: charge2Pulse 0.7s ease-in-out infinite !important;
	color: #fff8e8 !important;
}
#links .links-list li a.charge-2:hover {
	transform: translateY(-4px) scale(1.05) rotate(-0.8deg);
}
@keyframes charge2Pulse {
	0%, 100% { transform: translateY(-2px) scale(1.02) rotate(-0.4deg); }
	50%      { transform: translateY(-4px) scale(1.06) rotate(-1deg);  }
}

/* charge-3: 第 3 次点击瞬间（白闪 + 巨光 + 同步碎片迸发） */
#links .links-list li a.charge-3 {
	border-color: #fff !important;
	background: rgba(255, 255, 255, 0.25) !important;
	animation: charge3Flash 0.5s ease-out !important;
	/* 不让用户再 hover 走形 */
	pointer-events: none;
}
@keyframes charge3Flash {
	0%   { transform: scale(1.06); }
	25%  { transform: scale(1.25) rotate(6deg); }
	60%  { transform: scale(0.85) rotate(-12deg); }
	100% { transform: scale(0.55) rotate(-22deg); }
}

/* charge-3 时复用 .burst 的碎片 + 圆环 + 白闪伪元素动画 */
#links .links-list li a.charge-3 .shard {
	animation: shardFly 0.85s cubic-bezier(.18, .7, .3, 1) forwards;
}
#links .links-list li a.charge-3::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 200%;
	margin-left: -50%;
	margin-top: -100%;
	border: 3px solid #fff;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	z-index: 6;
	animation: shockRing 0.85s cubic-bezier(.2, .8, .2, 1) forwards;
}
#links .links-list li a.charge-3::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 80%;
	height: 240%;
	margin-left: -40%;
	margin-top: -120%;
	background: radial-gradient(ellipse at center,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 240, 200, 0.95) 20%,
		rgba(255, 180, 80, 0.5) 45%,
		rgba(255, 116, 150, 0) 70%);
	opacity: 0;
	pointer-events: none;
	z-index: 4;
	animation: coreFlash 0.5s ease-out forwards;
	mix-blend-mode: screen;
}

/* 充能数字（JS 动态注入到 li 上，挂在按钮外，浮在左上角） */
.charge-mark {
	position: absolute;
	/* 胶囊底边骑在按钮左上角边缘外：胶囊底部略低于按钮顶部 */
	top: -8px;
	/* 左端稍超出按钮左边缘，让胶囊"骑"在按钮左上角 */
	left: -8px;
	min-width: 30px;
	height: 22px;
	padding: 0 8px;
	border-radius: 11px;
	background: linear-gradient(135deg, #ff8a5e, #ffd166);
	color: #2a1810;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 22px;
	text-align: center;
	box-shadow:
		0 2px 8px rgba(0,0,0,0.5),
		0 0 14px rgba(255,180,80,0.7);
	pointer-events: none;
	z-index: 20;
	animation: chargeMarkPop 0.7s cubic-bezier(.2,.8,.2,1) forwards;
}
.charge-mark.c2 {
	background: linear-gradient(135deg, #ff5e8a, #ffd166);
	color: #fff;
	box-shadow:
		0 2px 8px rgba(0,0,0,0.5),
		0 0 18px rgba(255,120,160,0.8);
}
.charge-mark.c3 {
	background: linear-gradient(135deg, #fff, #ffd166);
	color: #2a1810;
	box-shadow:
		0 2px 12px rgba(0,0,0,0.6),
		0 0 28px rgba(255,255,255,1);
}
@keyframes chargeMarkPop {
	0%   { opacity: 0; transform: translate(0, 6px)    scale(0.4); }
	15%  { opacity: 1; transform: translate(0, -2px)   scale(1.15); }
	30%  { opacity: 1; transform: translate(0, 0)      scale(1);    }
	70%  { opacity: 1; transform: translate(-30px, -50px) scale(0.9) rotate(-6deg); }
	/* 80% 爆开，胶囊瞬间胀大亮一下，碎片从这里四散 */
	80%  { opacity: 1; transform: translate(-40px, -68px) scale(1.4) rotate(-8deg); }
	100% { opacity: 0; transform: translate(-90px, -150px) scale(0.5) rotate(-12deg); }
}

/* 胶囊爆裂碎片：18 块（360° 每 20°），JS 算胶囊屏幕绝对位置后挂到 body 上 */
.mark-shard {
	position: fixed;
	width: 6px;
	height: 6px;
	border-radius: 1.5px;
	background: var(--shard-color, #ffd166);
	pointer-events: none;
	opacity: 0;
	z-index: 9999;
	animation: markShardFly 0.7s cubic-bezier(.18, .7, .3, 1) forwards;
}
.mark-shard.ms1  { --ang: 0deg;   --dist: 48px; background: var(--mark-color-1, #ff8a5e); }
.mark-shard.ms2  { --ang: 20deg;  --dist: 42px; background: var(--mark-color-2, #ffd166); }
.mark-shard.ms3  { --ang: 40deg;  --dist: 55px; background: var(--mark-color-3, #fff);    }
.mark-shard.ms4  { --ang: 60deg;  --dist: 46px; background: var(--mark-color-1, #ff8a5e); }
.mark-shard.ms5  { --ang: 80deg;  --dist: 52px; background: var(--mark-color-2, #ffd166); }
.mark-shard.ms6  { --ang: 100deg; --dist: 44px; background: var(--mark-color-3, #fff);    }
.mark-shard.ms7  { --ang: 120deg; --dist: 58px; background: var(--mark-color-1, #ff8a5e); }
.mark-shard.ms8  { --ang: 140deg; --dist: 48px; background: var(--mark-color-2, #ffd166); }
.mark-shard.ms9  { --ang: 160deg; --dist: 54px; background: var(--mark-color-3, #fff);    }
.mark-shard.ms10 { --ang: 180deg; --dist: 46px; background: var(--mark-color-1, #ff8a5e); }
.mark-shard.ms11 { --ang: 200deg; --dist: 52px; background: var(--mark-color-2, #ffd166); }
.mark-shard.ms12 { --ang: 220deg; --dist: 44px; background: var(--mark-color-3, #fff);    }
.mark-shard.ms13 { --ang: 240deg; --dist: 56px; background: var(--mark-color-1, #ff8a5e); }
.mark-shard.ms14 { --ang: 260deg; --dist: 50px; background: var(--mark-color-2, #ffd166); }
.mark-shard.ms15 { --ang: 280deg; --dist: 48px; background: var(--mark-color-3, #fff);    }
.mark-shard.ms16 { --ang: 300deg; --dist: 54px; background: var(--mark-color-1, #ff8a5e); }
.mark-shard.ms17 { --ang: 320deg; --dist: 46px; background: var(--mark-color-2, #ffd166); }
.mark-shard.ms18 { --ang: 340deg; --dist: 52px; background: var(--mark-color-3, #fff);    }

@keyframes markShardFly {
	0% {
		opacity: 0;
		transform: translate(0, 0) scale(0.4) rotate(0deg);
	}
	18% {
		opacity: 1;
		transform:
			translate(
				calc(cos(var(--ang)) * 3px),
				calc(sin(var(--ang)) * 3px)
			)
			scale(1.5) rotate(60deg);
	}
	100% {
		opacity: 0;
		transform:
			translate(
				calc(cos(var(--ang)) * var(--dist)),
				calc(sin(var(--ang)) * var(--dist))
			)
			scale(0.2) rotate(280deg);
	}
}

/* ============== 点击瞬间反馈 ============== */
#links .links-list li a:active {
	transform: translateY(-2px) scale(1.02) rotate(0deg) !important;
	box-shadow:
		0 0 0 1px rgba(255, 116, 150, 0.9),
		0 0 24px rgba(255, 116, 150, 0.9),
		0 4px 10px rgba(0, 0, 0, 0.4) !important;
	transition-duration: 0.08s;
}

/* ============== 爆裂飞出（点击瞬间） ============== */
/* 8 个碎片块由 HTML 注入：<i class="shard" style="--i:0">…<i class="shard" style="--i:7"> */
#links .links-list li a .shard {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	margin-top: -5px;
	border-radius: 2px;
	background: var(--shard-color, #ff5e8a);
	pointer-events: none;
	opacity: 0;
	z-index: 5;
	will-change: transform, opacity;
}
#links .links-list li a.burst {
	/* 主体飞出：放大+上抛+翻转+淡出 */
	animation: burstFly 0.55s cubic-bezier(.4, .1, .6, 1) forwards !important;
	/* 关键：不设 pointer-events:none —— 会让 mousedown/mouseup hit test
	   不在同一元素，浏览器不开新窗口。让 800ms JS 冷却去防狂点即可。 */
}
@keyframes burstFly {
	0% {
		opacity: 1;
		transform: translateY(-5px) scale(1.06) rotate(-1.2deg);
		filter: brightness(1) blur(0);
	}
	20% {
		opacity: 1;
		transform: translateY(-22px) scale(1.25) rotate(8deg);
		filter: brightness(1.6) blur(0);
	}
	100% {
		opacity: 0;
		transform: translateY(-120px) scale(0.55) rotate(28deg);
		filter: brightness(2.2) blur(1.5px);
	}
}
/* 8 块碎片向 8 个方向射出，距离/旋转随机错落 */
#links .links-list li a.burst .shard {
	animation: shardFly 0.7s cubic-bezier(.18, .7, .3, 1) forwards;
}
#links .links-list li a.burst .shard.s1 { animation-delay: 0ms;   --ang: 0deg;   --dist: 95px; }
#links .links-list li a.burst .shard.s2 { animation-delay: 22ms;  --ang: 45deg;  --dist: 88px; }
#links .links-list li a.burst .shard.s3 { animation-delay: 44ms;  --ang: 90deg;  --dist: 100px; }
#links .links-list li a.burst .shard.s4 { animation-delay: 66ms;  --ang: 135deg; --dist: 82px; }
#links .links-list li a.burst .shard.s5 { animation-delay: 88ms;  --ang: 180deg; --dist: 96px; }
#links .links-list li a.burst .shard.s6 { animation-delay: 110ms; --ang: 225deg; --dist: 90px; }
#links .links-list li a.burst .shard.s7 { animation-delay: 132ms; --ang: 270deg; --dist: 84px; }
#links .links-list li a.burst .shard.s8 { animation-delay: 154ms; --ang: 315deg; --dist: 102px; }
/* 5 个按钮各自配色（与 hover 主题辉光匹配） */
#links .links-list li:nth-child(1) a .shard.s1,
#links .links-list li:nth-child(1) a .shard.s3,
#links .links-list li:nth-child(1) a .shard.s5,
#links .links-list li:nth-child(1) a .shard.s7 { --shard-color: #ff5e8a; }
#links .links-list li:nth-child(1) a .shard.s2,
#links .links-list li:nth-child(1) a .shard.s4,
#links .links-list li:nth-child(1) a .shard.s6,
#links .links-list li:nth-child(1) a .shard.s8 { --shard-color: #ffd166; }
#links .links-list li:nth-child(2) a .shard.s1,
#links .links-list li:nth-child(2) a .shard.s3,
#links .links-list li:nth-child(2) a .shard.s5,
#links .links-list li:nth-child(2) a .shard.s7 { --shard-color: #7bc8ff; }
#links .links-list li:nth-child(2) a .shard.s2,
#links .links-list li:nth-child(2) a .shard.s4,
#links .links-list li:nth-child(2) a .shard.s6,
#links .links-list li:nth-child(2) a .shard.s8 { --shard-color: #b388ff; }
#links .links-list li:nth-child(3) a .shard.s1,
#links .links-list li:nth-child(3) a .shard.s3,
#links .links-list li:nth-child(3) a .shard.s5,
#links .links-list li:nth-child(3) a .shard.s7 { --shard-color: #6ee7b7; }
#links .links-list li:nth-child(3) a .shard.s2,
#links .links-list li:nth-child(3) a .shard.s4,
#links .links-list li:nth-child(3) a .shard.s6,
#links .links-list li:nth-child(3) a .shard.s8 { --shard-color: #ff5e8a; }
#links .links-list li:nth-child(4) a .shard.s1,
#links .links-list li:nth-child(4) a .shard.s3,
#links .links-list li:nth-child(4) a .shard.s5,
#links .links-list li:nth-child(4) a .shard.s7 { --shard-color: #ffd166; }
#links .links-list li:nth-child(4) a .shard.s2,
#links .links-list li:nth-child(4) a .shard.s4,
#links .links-list li:nth-child(4) a .shard.s6,
#links .links-list li:nth-child(4) a .shard.s8 { --shard-color: #ff8a5e; }
#links .links-list li:nth-child(5) a .shard.s1,
#links .links-list li:nth-child(5) a .shard.s3,
#links .links-list li:nth-child(5) a .shard.s5,
#links .links-list li:nth-child(5) a .shard.s7 { --shard-color: #b388ff; }
#links .links-list li:nth-child(5) a .shard.s2,
#links .links-list li:nth-child(5) a .shard.s4,
#links .links-list li:nth-child(5) a .shard.s6,
#links .links-list li:nth-child(5) a .shard.s8 { --shard-color: #7bc8ff; }

@keyframes shardFly {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
	}
	15% {
		opacity: 1;
		transform:
			translate(
				calc(-50% + cos(var(--ang)) * 6px),
				calc(-50% + sin(var(--ang)) * 6px)
			)
			scale(1.1) rotate(20deg);
	}
	100% {
		opacity: 0;
		transform:
			translate(
				calc(-50% + cos(var(--ang)) * var(--dist)),
				calc(-50% + sin(var(--ang)) * var(--dist))
			)
			scale(0.2) rotate(180deg);
	}
}
/* 冲击波圆环 */
#links .links-list li a.burst::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 200%;
	margin-left: -50%;
	margin-top: -100%;
	border: 2px solid #ff5e8a;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	z-index: 6;
	animation: shockRing 0.65s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes shockRing {
	0%   { transform: scale(0.4);  opacity: 0;   border-color: #ff5e8a; }
	20%  { transform: scale(0.8);  opacity: 1;   border-color: #ffd166; }
	100% { transform: scale(2.6);  opacity: 0;   border-color: rgba(255, 94, 138, 0); }
}
/* 中心白闪 */
#links .links-list li a.burst::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60%;
	height: 200%;
	margin-left: -30%;
	margin-top: -100%;
	background: radial-gradient(ellipse at center,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 220, 200, 0.8) 20%,
		rgba(255, 116, 150, 0) 60%);
	opacity: 0;
	pointer-events: none;
	z-index: 4;
	animation: coreFlash 0.35s ease-out forwards;
	mix-blend-mode: screen;
}
@keyframes coreFlash {
	0%   { opacity: 0;   transform: scale(0.3); }
	30%  { opacity: 1;   transform: scale(1.1); }
	100% { opacity: 0;   transform: scale(1.6); }
}