body {
	font-family: Arial, sans-serif;
	margin: 10px;
	overflow-x: hidden;
}

#deck {
	margin-top: 15px;
}

.card {
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	padding: 8px;
	margin: 4px;
	display: inline-block;
	width: 130px;
	text-align: center;
}

#remaining {
	margin-top: 15px;
	border: 2px solid #ccc;
	padding: 8px;
	width: auto;
}

.highlight {
	background-color: #ffcccc;
}

.header {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #333;
	color: #fff;
	padding: 8px 0;
	text-align: center;
	z-index: 1000;
	box-sizing: border-box;
}

.header-placeholdereholder {
	height: 50px;
	width: 100%;
}

#remaining-counts {
	background-size: cover;
	position: relative;
	margin: 10px 0;
	padding: 8px;
	border: 2px solid #ddd;
	background-color: #f9f9f9;
}

#remaining-counts::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.7);
	z-index: 0;
}

#remaining-counts .category {
	position: relative;
	z-index: 1;
}

.category {
	margin: 8px 0;
	padding: 4px;
	border-bottom: 2px solid #ccc;
}

.category-title {
	font-weight: bold;
	color: #333;
	margin-bottom: 4px;
}

.count-item {
	display: inline-block;
	width: 100px;
	padding: 2px;
	font-size: 13px;
}

footer {
	background-color: #000;
	color: #fff;
	padding: 8px 0;
	text-align: center;
	font-family: Arial, sans-serif;
}

.tooltip-container {
	position: relative;
	display: inline-block;
	margin: 15px;
	margin-left: 2em;
}

.tooltip {
	visibility: hidden;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 4px;
	padding: 6px;
	position: absolute;
	z-index: 1;
	top: 125%;
	opacity: 0;
	transition: opacity 0.3s;
	min-width: 200px;
	max-width: 350px;
	white-space: normal;
	box-sizing: border-box;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
	margin-left: 0;
	margin-right: 0;
	width: auto;
	max-width: calc(100vw - 20px);
	left: calc(50% + 1em) !important;
	transform: translateX(-50%) !important;
}

button {
	margin-right: 8px;
	margin-left: 0;
	padding: 5px 10px;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
}

.tooltip::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #555 transparent;
}

.tooltip.right-align {
	left: auto;
	right: 0;
	transform: none;
}

.tooltip.right-align::after {
	right: 20px;
	left: auto;
	margin-left: 0;
}

.tooltip-container:hover .tooltip {
	visibility: visible;
	opacity: 1;
}

#hand {
	margin: 15px 0;
}

button {
	margin-right: 8px;
}

.phase {
	color: red;
	margin: 8px;
}

.card {
	padding: 6px;
	margin: 3px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: monospace;
}

#log-container {
	border: 2px solid #666;
	border-radius: 8px;
	padding: 8px;
	margin: 15px 0;
	max-height: 150px;
	overflow-y: auto;
	background-color: #f8f8f8;
	display: flex;
	flex-direction: column;
}

#log {
	display: flex;
	flex-direction: column-reverse;
}

#log p {
	margin: 4px 0;
	padding: 2px;
	border-bottom: 1px dotted #ddd;
	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#remaining-counts {
	transition: all 0.3s ease;
	overflow: hidden;
}

.collapsed {
	max-height: 0 !important;
	opacity: 0;
	padding: 0 !important;
	border: none !important;
}

#deck {
	transition: all 0.3s ease;
}

.shuffling {
	position: relative;
	animation: deckShuffle 1.2s cubic-bezier(0.4, 0, 0.2, 1);
	filter: drop-shadow(0 0 12px rgba(255, 215, 64, 0.6));
}

.card.shuffle-item {
	animation: cardShuffle 0.8s ease-in-out both;
	transform-origin: 50% 100%;
}

@keyframes deckShuffle {
	0% {
		transform: translateY(0) rotateZ(0deg);
		opacity: 1;
	}

	30% {
		transform: translateY(-20px) rotateZ(-5deg);
		opacity: 0.9;
	}

	70% {
		transform: translateY(10px) rotateZ(5deg);
		opacity: 0.95;
	}

	100% {
		transform: translateY(0) rotateZ(0deg);
		opacity: 1;
	}
}

@keyframes cardShuffle {
	0% {
		transform: rotateZ(0deg) scale(1);
		z-index: 1;
	}

	25% {
		transform: rotateZ(-15deg) scale(1.05);
		z-index: 2;
	}

	50% {
		transform: rotateZ(15deg) scale(0.95);
		filter: brightness(1.2);
	}

	75% {
		transform: rotateZ(-10deg) scale(1.02);
		filter: brightness(1.1);
	}

	100% {
		transform: rotateZ(0deg) scale(1);
		z-index: 1;
	}
}

@media (prefers-reduced-motion: no-preference) {

	.shuffling,
	.card.shuffle-item {
		will-change: transform, filter;
		backface-visibility: hidden;
	}
}

.md5-panel {
	margin: 15px 0;
	padding: 10px;
	border: 2px solid #BBDEFB;
	border-radius: 8px;
	background: #E3F2FD;
	box-shadow: 0 2px 4px rgba(33, 150, 243, 0.1);
}

.md5-display {
	display: flex;
	align-items: center;
	gap: 10px;
}

#md5Value {
	font-family: 'Courier New', monospace;
	font-size: 13px;
	letter-spacing: 1px;
	padding: 6px 10px;
	background: #FFF;
	border: 1px solid #64B5F6;
	border-radius: 4px;
	flex-grow: 1;
	user-select: none;
	min-width: 220px;
	color: #1976D2;
}

.aes-panel {
	margin: 15px 0;
	padding: 10px;
	border: 2px solid #C8E6C9;
	border-radius: 8px;
	background: #E8F5E9;
	box-shadow: 0 2px 4px rgba(76, 175, 80, 0.1);
}

#aesValue {
	font-family: 'Courier New', monospace;
	font-size: 18px;
	letter-spacing: 0.5px;
	padding: 8px;
	background: #fff;
	border: 1px solid #b3e5fc;
	border-radius: 6px;
	flex-grow: 1;
	user-select: none;
	min-width: 240px;
	word-break: break-all;
	white-space: pre-wrap;
	line-height: 1.5;
	color: #01579b;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	max-height: 120px;
	overflow-y: auto;
}

#aesValue:hover {
	border-color: #81d4fa;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

#aesValue::-webkit-scrollbar {
	height: 4px;
	background-color: #E8F5E9;
}

#aesValue::-webkit-scrollbar-thumb {
	background: #4CAF50;
	border-radius: 2px;
}

.md5-buttons {
	flex-shrink: 0;
	margin-left: 10px;
}

.md5-display {
	overflow: visible;
	flex-wrap: nowrap;
}

.md5-button {
	padding: 5px 10px;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
}

#toggleMD5,
#copyMD5 {
	border: 1px solid #2196F3;
	color: #2196F3;
	background: none;
}

#toggleMD5:hover,
#copyMD5:hover {
	background: #2196F3;
	color: white;
}

#toggleAES,
#copyAES {
	border: 1px solid #4CAF50;
	color: #4CAF50;
	background: none;
}

#toggleAES:hover,
#copyAES:hover {
	background: #4CAF50;
	color: white;
}

#verifyResult {
	font-weight: bold;
	padding: 3px 6px;
	border-radius: 3px;
}

#verifyResult[style*="4CAF50"] {
	background: #E8F5E9;
}

#verifyResult[style*="f44336"] {
	background: #FFEBEE;
}

#verifyAESResult {
	font-weight: bold;
	padding: 3px 6px;
	border-radius: 3px;
}

#verifyAESResult:empty {
	display: none;
}

.md5-button.copied {
	background-color: #4CAF50 !important;
	color: white !important;
	transition: all 0.3s ease;
}

.security-alert {
	font-family: '微软雅黑', sans-serif;
	padding: 15px;
	border-radius: 8px;
	background: #f8f9fa;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	max-width: 90%;
	line-height: 1.6;
}

.security-alert strong {
	color: #d32f2f;
}

.security-alert button {
	margin: 8px 4px 0 0;
	padding: 6px 16px;
	border-radius: 4px;
	cursor: pointer;
}

.security-alert .confirm {
	background: #4CAF50 !important;
	color: white;
	border: none;
}

.security-alert .cancel {
	background: #f44336 !important;
	color: white;
	border: none;
}

#md5aes-container {
	transition: all 0.3s ease;
	overflow: hidden;
	max-height: 1500px;
}

#md5aes-container.collapsed {
	max-height: 0 !important;
	opacity: 0;
	padding: 0 !important;
	border: none !important;
}

.chain-dialog button {
	margin: 4px;
	padding: 6px 12px;
	border: 1px solid #666;
	cursor: pointer;
}

.chain-dialog button:hover {
	background: #f0f0f0;
}

#func1 {
	background: #BBDEFB;
}

#func2 {
	background: #C8E6C9;
}

#cancel {
	background: #FFCDD2;
}

#status-area {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 20px;
	padding: 15px;
	background-color: #f8f9fa;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	margin: 15px 0;
	width: 100%;
	box-sizing: border-box;
}

/* 左侧状态信息 */
.status-left {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#damage-counter {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	background-color: #ffeef0;
	border-radius: 6px;
	border-left: 4px solid #f44336;
}

#total-damage,
#turn-damage {
	font-size: 14px;
	font-weight: bold;
}

#kill-counter,
#zhuge-status,
#peach-counter,
#wine-counter {
	padding: 10px;
	background-color: #e3f2fd;
	border-radius: 6px;
	border-left: 4px solid #2196F3;
	font-size: 14px;
	font-weight: bold;
}


#kill-counter {
	font-weight: bold;
	color: #c62828;
	margin: 4px 0;
}

#zhuge-status {
	color: #2e7d32;
	margin: 4px 0;
}

.disabled {
	opacity: 0.5;
	pointer-events: none;
}

.tooltip-container button::after {
	content: attr(data-shortcut);
	margin-left: 6px;
	color: #666;
	font-size: 0.8em;
}

button {
	position: relative;
}

button::after {
	content: attr(data-shortcut);
	position: absolute;
	right: 6px;
	bottom: 2px;
	font-size: 0.8em;
	color: #666;
}

.tooltip#cardSelector {
	max-width: 500px;
	padding: 12px;
}

.tooltip#cardSelector button {
	min-width: 80px;
	padding: 4px;
	font-size: 13px;
}

.card-selector-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	padding: 15px;
	border: 2px solid #666;
	z-index: 10000;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
	max-width: 90%;
	max-height: 90vh;
	overflow-y: auto;
}

.modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
}

.card-button {
	margin: 4px;
	padding: 6px 12px;
	min-width: 100px;
}

.site-footer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
	padding: 1.5rem 3%;
}

.buttoncopy {
	color: white !important;
	text-decoration: none !important;
	display: inline-block;
	padding: 10px 20px;
	border-radius: 4px;
	background: #C71D23;
	font-weight: 500;
	transition: all 0.3s ease;
	border: 2px solid transparent;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.buttoncopy:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
	background: #A3171C;
}

.buttoncopy:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.site-footer a {
	text-decoration: none !important;
	color: #ADD8E6 !important;
}

.license-link:hover {
	opacity: 0.8;
	text-decoration: underline !important;
}

.i18n-annotation {
	color: rgba(255, 255, 255, 0.7) !important;
}

#testUniformBtn {
	background-color: #4CAF50;
	color: white;
}

#testPerfBtn {
	background-color: #2196F3;
	color: white;
}

.security-alert strong {
	color: #d32f2f;
	font-size: 1.1em;
	display: block;
	margin-bottom: 12px;
}

.security-alert ul {
	margin: 8px 0;
	padding-left: 20px;
}

.security-alert li {
	list-style-type: '▸ ';
	margin: 6px 0;
	color: #666;
}

.security-alert .confirm {
	background: #4CAF50 !important;
}

.security-alert .cancel {
	background: #f44336 !important;
}

.scrollable-panel {
	overflow-y: auto;
	max-height: 90vh;
}

.scrollable-panel::-webkit-scrollbar {
	width: 10px;
}

.scrollable-panel::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 10px;
}

.scrollable-panel::-webkit-scrollbar-thumb {
	background: #4CAF50;
	border-radius: 10px;
}

.scrollable-panel::-webkit-scrollbar-thumb:hover {
	background: #3e8e41;
}

@media (max-width: 768px) {
	body {
		margin: 8px;
	}

	.header {
		width: 90%;
		left: 5%;
		right: 5%;
		padding: 6px 0;
		font-size: 14px;
	}

	.header-placeholder {
		height: 45px;
	}

	.card {
		width: 110px;
	}

	#remaining {
		width: auto;
	}

	.count-item {
		width: 90px;
		font-size: 12px;
	}

	.md5-panel,
	.aes-panel {
		padding: 10px;
	}

	#md5Value,
	#aesValue {
		font-size: 12px;
		min-width: 180px;
	}

	.buttoncopy {
		padding: 8px 16px;
	}

	.security-alert {
		padding: 12px;
	}

	.card-selector-modal {
		max-width: 95%;
	}

	.scrollable-panel {
		width: 95% !important;
		padding: 15px !important;
	}

	#rerunTest,
	#closePanel {
		display: block;
		width: 100%;
		margin: 8px 0;
	}

	.scrollable-panel h2 {
		margin-top: 30px;
	}

	.scrollable-panel>div>div {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		flex-direction: column;
	}

	.monospace {
		font-size: 12px !important;
	}

	progress {
		height: 6px;
	}
}

@media (max-width: 480px) {
	.scrollable-panel {
		max-height: 85vh !important;
	}

	.md5-button,
	.dialog-button {
		padding: 8px 12px !important;
		font-size: 14px !important;
	}

	.log-panel {
		max-height: 200px;
		overflow-y: auto;
	}

	.header {
		width: 95%;
		left: 2.5%;
		right: 2.5%;
		padding: 6px 0;
		font-size: 14px;
	}
}

.update-log-container {
	max-width: 900px;
	margin: 0 auto;
	background-color: white;
	border-radius: 12px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.update-log-header {
	background: linear-gradient(to right, #8e0e00, #1f1c18);
	color: #f1c40f;
	text-align: center;
	padding: 30px 20px;
	position: relative;
}

.update-log-header h1 {
	font-size: 32px;
	margin-bottom: 5px;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
	letter-spacing: 1px;
}

.update-log-subtitle {
	font-size: 18px;
	opacity: 0.9;
	max-width: 600px;
	margin: 0 auto;
	color: #ecf0f1;
}

.update-log-logo {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 80px;
	height: 80px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50,15 L65,40 L95,45 L75,65 L80,95 L50,80 L20,95 L25,65 L5,45 L35,40 Z" fill="%23f1c40f"/></svg>') no-repeat center;
	background-size: contain;
	opacity: 0.7;
}

.update-log-content {
	padding: 30px;
}

.update-section {
	margin-bottom: 30px;
	border-bottom: 1px solid #eee;
	padding-bottom: 20px;
}

.update-section:last-child {
	border-bottom: none;
}

.version-title {
	color: #8e0e00;
	font-size: 22px;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid #f1c40f;
	display: flex;
	align-items: center;
}


.version-list {
	padding-left: 30px;
	list-style-type: none;
}

.version-list ul {
	padding-left: 25px;
	margin-top: 8px;
	list-style-type: none;
}

.version-list li {
	margin-bottom: 12px;
	position: relative;
	padding-left: 25px;
}

.version-list li:before {
	content: "▶";
	position: absolute;
	left: 0;
	color: #8e0e00;
	font-size: 12px;
}

.update-log-footer {
	text-align: center;
	padding: 20px;
	color: #7f8c8d;
	background-color: #ecf0f1;
	font-size: 14px;
}

.highlight {
	color: #e74c3c;
	font-weight: bold;
}

@media (max-width: 600px) {
	body {
		padding: 10px;
	}

	.update-log-content {
		padding: 20px 15px;
	}

	h1 {
		font-size: 24px;
	}

	.update-log-subtitle {
		font-size: 14px;
	}

	.version-title {
		font-size: 18px;
	}
}

.nav-buttons {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 20px 0 30px;
}

.nav-button {
	position: relative;
	padding: 10px 20px;
	background: linear-gradient(to bottom, #8e0e00, #1f1c18);
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.nav-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	background: linear-gradient(to bottom, #a52a2a, #351c1c);
}

.nav-button a {
	color: white;
	text-decoration: none;
}

.nav-button:active {
	transform: translateY(1px);
}


.cd-body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.6;
	color: #333;
	background: linear-gradient(135deg, #f5f7fa 0%, #e4ecf4 100%);
	min-height: 100vh;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cd-container {
	width: 100%;
	max-width: 900px;
	background: white;
	border-radius: 10px;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	margin-bottom: 20px;
}

.cd-header {
	background: linear-gradient(to right, #8e0e00, #1f1c18);
	color: white;
	text-align: center;
	padding: 30px 20px;
}

.cd-header h1 {
	font-size: 2.5rem;
	margin-bottom: 15px;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.cd-nav-buttons {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 25px;
	flex-wrap: wrap;
}

.cd-nav-button {
	position: relative;
	padding: 10px 20px;
	background: linear-gradient(to bottom, #8e0e00, #1f1c18);
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	text-decoration: none;
	display: inline-block;
}

.cd-nav-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	background: linear-gradient(to bottom, #a52a2a, #351c1c);
}

.cd-nav-button:active {
	transform: translateY(1px);
}

.cd-code-display {
	display: flex;
	flex-direction: column;
	background: #f8f9fa;
	min-height: 60vh;
	max-height: 65vh;
}

.cd-code-header {
	padding: 15px 20px;
	background: #e9ecef;
	border-bottom: 1px solid #dee2e6;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cd-code-header h2 {
	color: #2c3e50;
	font-size: 1.4rem;
}

.cd-copy-instructions {
	color: #666;
	font-size: 14px;
	margin-top: 5px;
}

.cd-code-content {
	flex: 1;
	padding: 20px;
	overflow: auto;
	background: #011627;
	color: #d6deeb;
	font-family: 'Fira Code', 'Consolas', monospace;
	font-size: 14px;
	line-height: 1.5;
	position: relative;
	scrollbar-width: thin;
	scrollbar-color: #4a5568 #011627;
}

.cd-code-content::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.cd-code-content::-webkit-scrollbar-track {
	background: #011627;
}

.cd-code-content::-webkit-scrollbar-thumb {
	background: #4a5568;
	border-radius: 5px;
}

.cd-code-content::-webkit-scrollbar-thumb:hover {
	background: #718096;
}

.cd-pre {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
	tab-size: 4;
	user-select: all;
	cursor: text;
	min-height: 100%;
}

.cd-html-tag {
	color: #e06c75;
}

.cd-html-attr {
	color: #d19a66;
}

.cd-html-string {
	color: #98c379;
}

.cd-html-comment {
	color: #5c6370;
	font-style: italic;
}

.cd-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #aaa;
	font-size: 18px;
}

.cd-selection-hint {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 10px 20px;
	border-radius: 4px;
	font-size: 14px;
	animation: cd-fadeInOut 3s forwards;
	z-index: 1000;
}

@keyframes cd-fadeInOut {
	0% {
		opacity: 0;
	}

	20% {
		opacity: 1;
	}

	80% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.cd-highlight {
	background-color: rgba(255, 255, 0, 0.3);
	transition: background-color 0.3s;
}

.site-footer {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: space-between;
	background: #1f1c18;
	color: white;
	border-radius: 10px;
	margin-top: 20px;
}

.author-info,
.code-update,
.license-notice {
	flex: 1;
	min-width: 250px;
	padding: 15px;
}

.author-info p,
.license-notice p {
	margin-bottom: 15px;
	line-height: 1.6;
}

.author-info a,
.license-notice a {
	color: #4CAF50;
	text-decoration: none;
	transition: all 0.3s;
}

.author-info a:hover,
.license-notice a:hover {
	color: #66BB6A;
	text-decoration: underline;
}

.code-update {
	display: flex;
	flex-direction: column;
	gap: 15px;
}


.license-link {
	color: #4CAF50;
	font-weight: bold;
}

.i18n-annotation {
	font-size: 0.9rem;
	color: #aaa;
	margin-top: 5px;
}

/* 新添加的按钮样式 */
.bili-btn {
	display: block;
	padding: 14px 20px;
	background: linear-gradient(135deg, #ff9bce, #ff6b8b);
	color: #b0e0e6;
	border-radius: 6px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	border: none;
	transition: all 0.3s;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	text-decoration: none;
	cursor: pointer;
}

.bili-btn:hover {
	background: linear-gradient(135deg, #ff8cc2, #ff5b7c);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

.github-btn {
	display: block;
	padding: 14px 20px;
	background: linear-gradient(135deg, #a63232, #8a1c1c);
	color: #f0f0f0;
	border-radius: 6px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	border: none;
	transition: all 0.3s;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	text-decoration: none;
	cursor: pointer;
}

.github-btn:hover {
	background: linear-gradient(135deg, #b93737, #9d2525);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

.gitcode-btn {
	display: block;
	padding: 14px 20px;
	background: linear-gradient(135deg, #da203e, #831325);
	color: #f0f0f0;
	border-radius: 6px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	border: none;
	transition: all 0.3s;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	text-decoration: none;
	cursor: pointer;
}

.gitcode-btn:hover {
	background: linear-gradient(135deg, #b91a38, #761025);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

@media (max-width: 768px) {
	.cd-code-header {
		flex-direction: column;
		gap: 15px;
		text-align: center;
	}

	.cd-code-content {
		padding: 15px;
		font-size: 13px;
	}

	.site-footer {
		flex-direction: column;
		gap: 20px;
	}

	.author-info,
	.code-update,
	.license-notice {
		min-width: 100%;
	}

	.cd-nav-buttons {
		flex-direction: column;
		align-items: center;
	}

	.cd-nav-button {
		width: 100%;
		max-width: 300px;
		margin-bottom: 10px;
	}

	.bili-btn,
	.github-btn,
	.gitcode-btn {
		display: block;
		width: 80%;
		margin-bottom: 10px;
	}

	#status-area {
		grid-template-columns: 1fr;
	}

	#delay-area {
		flex-direction: column;
	}

	.delay-section {
		min-width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.cd-header h1 {
		font-size: 2rem;
	}

	.cd-code-header h2 {
		font-size: 1.2rem;
	}

	.cd-copy-instructions {
		font-size: 12px;
	}

	.bili-btn,
	.github-btn,
	.gitcode-btn {
		display: block;
		width: 80%;
		margin-bottom: 10px;
	}

	#status-area {
		grid-template-columns: 1fr;
	}

	#delay-area {
		flex-direction: column;
	}

	.delay-section {
		min-width: 100%;
		max-width: 100%;
	}
}

.hero-section {
	background: linear-gradient(135deg, #8e0e00 0%, #1f1c18 100%);
	color: #fff;
	text-align: center;
	padding: 60px 20px 40px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hero-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><pattern id="pattern" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M0 0 L20 0 L20 20 Z" fill="rgba(255,255,255,0.03)"/></pattern><rect width="100%" height="100%" fill="url(%23pattern)"/></svg>');
	opacity: 0.3;
}

.hero-title {
	font-size: 36px;
	margin-bottom: 15px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
	color: #f1c40f;
	position: relative;
}

h2.hero-title {
	font-size: 24px;
}

h3.hero-title {
	font-size: 16px;
}
h4.hero-title {
	font-size: 10px;
}

.hero-subtitle {
	font-size: 18px;
	max-width: 700px;
	margin: 0 auto 30px;
	color: #ecf0f1;
	opacity: 0.9;
	position: relative;
}

.main-content {
	flex: 1;
	max-width: 1200px;
	margin: 30px auto;
	padding: 0 20px;
	width: 100%;
	box-sizing: border-box;
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-bottom: 50px;
}

.feature-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.feature-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.card-image {
	height: 180px;
	background: linear-gradient(135deg, #a52a2a 0%, #8b0000 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 24px;
}

.card-content {
	padding: 25px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.card-title {
	font-size: 24px;
	margin: 0 0 15px;
	color: #8e0e00;
}

.card-description {
	margin-bottom: 20px;
	color: #666;
	flex-grow: 1;
}

.icon-lg {
	font-size: 60px;
	margin-bottom: 15px;
}

.btn-primary {
	display: inline-block;
	background: linear-gradient(to right, #8e0e00, #a52a2a);
	color: white;
	padding: 12px 28px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	text-align: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	margin-top: 10px;
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 14px rgba(0, 0, 0, 0.15);
	background: linear-gradient(to right, #a52a2a, #8e0e00);
}

.update-highlight {
	padding: 25px;
	background: linear-gradient(to right, rgba(142, 14, 0, 0.05), rgba(31, 28, 24, 0.05));
	border-radius: 12px;
	border: 1px solid rgba(142, 14, 0, 0.15);
	margin-bottom: 40px;
	box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.03);
}

.update-title {
	color: #8e0e00;
	text-align: center;
	font-size: 28px;
	margin-bottom: 20px;
}

.update-content {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	align-items: center;
}

.update-btn {
	flex: 1;
	min-width: 250px;
	max-width: 400px;
}

.about-section {
	padding: 40px 0;
}

.section-title {
	font-size: 32px;
	text-align: center;
	color: #8e0e00;
	margin-bottom: 30px;
	position: relative;
}

.section-title::after {
	content: "";
	display: block;
	width: 80px;
	height: 4px;
	background: linear-gradient(to right, #8e0e00, #f1c40f);
	margin: 10px auto;
	border-radius: 2px;
}

.btn input {
	background-color: #ff8726;
	color: #FFFFFF;
	border: none;
}

/* 定义回到顶部按钮的样式 */
#backToTopBtn {
	position: fixed;
	/* 固定位置 */
	bottom: 20px;
	/* 距离底部20像素 */
	right: 20px;
	/* 距离右侧20像素 */
	display: none;
	/* 初始隐藏 */
	padding: 10px 20px;
	/* 内边距 */
	background-color: #ff8726;
	/* 蓝色背景 */
	color: white;
	/* 白色文字 */
	border: none;
	/* 无边框 */
	border-radius: 5px;
	/* 圆角 */
	cursor: pointer;
	/* 鼠标悬停时显示手型 */
	z-index: 1000;
	/* 确保按钮在最上层 */
	font-size: 14px;
	/* 字体大小 */
	outline: none;
	/* 去掉点击时的边框 */
	transition: opacity 0.3s ease;
	/* 透明度过渡效果 */
}

#backToTopBtn:hover {
	opacity: 0.8;
	/* 鼠标悬停时降低透明度 */
}

/* 滚到底部按钮CSS */
#scrollToBottomBtn {
	position: fixed;
	bottom: 60px;
	/* 放置在回到顶部按钮上方 */
	right: 20px;
	padding: 10px 20px;
	background-color: #3498db;
	/* 蓝色背景 */
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	z-index: 1000;
	/* 确保在最上层 */
	font-size: 14px;
	outline: none;
	transition: background-color 0.3s, transform 0.3s;
	/* 只保留颜色和位置变换的过渡 */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	font-weight: 600;
}

#scrollToBottomBtn:hover {
	background-color: #2980b9;
	transform: translateY(-2px);
	/* 悬停时轻微上移 */
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

#scrollToBottomBtn:active {
	transform: translateY(1px);
	/* 点击时轻微下移 */
}

.function-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.function-header {
	text-align: center;
	margin-bottom: 30px;
	padding-bottom: 15px;
	border-bottom: 2px solid #8e0e00;
}

.function-item {
	margin: 20px 0;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border-left: 4px solid #1a73e8;
	transition: all 0.3s ease;
}

.function-item:hover {
	background: #e8f0fe;
	transform: translateY(-2px);
}

.function-name {
	font-weight: bold;
	font-size: 18px;
	color: #1a73e8;
	cursor: help;
	display: inline-block;
	padding: 5px 10px;
	border-radius: 4px;
	position: relative;
}

.function-name:hover {
	background: rgba(26, 115, 232, 0.1);
}

.function-tooltip {
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 600px;
	max-width: 90vw;
	background: #f8f9fa;
	color: #202124;
	text-align: left;
	border-radius: 8px;
	padding: 15px;
	z-index: 1000;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
	border: 1px solid #dadce0;
	font-family: 'Consolas', 'Monaco', monospace;
	font-size: 13px;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow: auto;
	max-height: 400px;
	display: none;
}

.function-name:hover .function-tooltip {
	display: block;
}

.function-tooltip code {
	display: block;
	background: #2d2d2d;
	color: #f8f8f2;
	padding: 15px;
	border-radius: 4px;
	overflow-x: auto;
}

.function-description {
	margin-top: 10px;
	color: #5f6368;
	font-size: 14px;
}

.function-category {
	margin-top: 40px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e0e0e0;
	color: #8e0e00;
	font-weight: bold;
	font-size: 20px;
}

.instructions {
	background: #e8f5e9;
	padding: 15px;
	border-radius: 8px;
	margin: 30px 0;
	border-left: 4px solid #4CAF50;
}

.key-points {
	background: #e3f2fd;
	padding: 15px;
	border-radius: 8px;
	margin: 15px 0;
	border-left: 4px solid #2196F3;
}

.key-points h3 {
	margin-top: 0;
	color: #0d47a1;
}

.key-points ul {
	padding-left: 20px;
}

.key-points li {
	margin-bottom: 8px;
}

/* 配套CSS部分样式 */
.css-section {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px dashed #ddd;
}

.css-name {
	font-weight: bold;
	color: #e91e63;
	cursor: help;
	display: inline-block;
	padding: 3px 8px;
	border-radius: 3px;
	position: relative;
}

.css-name:hover {
	background: rgba(233, 30, 99, 0.1);
}

.css-tooltip {
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 600px;
	max-width: 90vw;
	background: #f8f9fa;
	color: #202124;
	text-align: left;
	border-radius: 8px;
	padding: 15px;
	z-index: 1000;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
	border: 1px solid #dadce0;
	font-family: 'Consolas', 'Monaco', monospace;
	font-size: 13px;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow: auto;
	max-height: 400px;
	display: none;
}

.css-name:hover .css-tooltip {
	display: block;
}

.css-tooltip code {
	display: block;
	background: #2d2d2d;
	color: #f8f8f2;
	padding: 15px;
	border-radius: 4px;
	overflow-x: auto;
}

/* 延时锦囊区域样式 */
#delay-area {
	display: flex;
	gap: 15px;
	justify-content: space-between;
}

.delay-section {
	flex: 1;
	min-width: 120px;
	max-width: 200px;
	border: 1px solid #b38b6d;
	border-radius: 8px;
	padding: 10px;
	background: #fff8e1;
	display: flex;
	flex-direction: column;
}

.delay-section h4 {
	margin: 0 0 8px;
	text-align: center;
	color: #8d6e63;
	font-size: 14px;
	border-bottom: 1px solid #b38b6d;
	padding-bottom: 5px;
}

.delay-cards {
	flex-grow: 1;
	min-height: 80px;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: center;
	align-items: flex-start;
}

.delay-card {
	padding: 6px;
	margin: 3px 0;
	background-color: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-align: center;
	font-size: 12px;
	flex: 0 0 calc(50% - 10px);
}


.delay-card.disabled {
	color: #999;
	font-style: italic;
}

/* 延时锦囊区域标题样式 */
.delay-section h4 {
	margin: 10px 0 5px;
	font-size: 14px;
	color: #555;
}

.modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.card-selector-modal {
	background: white;
	padding: 25px;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	min-width: 400px;
	max-width: 90vw;
	text-align: center;
}

.dialog-button {
	padding: 12px 20px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 16px;
	transition: all 0.2s;
	margin-top: 15px;
}

.dialog-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 可选择的延时锦囊样式 */
.delay-card-selectable {
	padding: 10px;
	border: 2px solid #8d6e63;
	border-radius: 8px;
	background: #fff8e1;
	cursor: pointer;
	transition: all 0.3s;
	min-width: 100px;
	text-align: center;
}

.delay-card-selectable:hover {
	transform: translateY(-5px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
	background: #ffecb3;
}

/* 不同锦囊类型的颜色区分 */
.delay-card-selectable:nth-child(odd) {
	background: #e8f5e9;
	/* 乐不思蜀浅绿色 */
}

.delay-card-selectable:nth-child(even) {
	background: #fff8e1;
	/* 兵粮寸断浅黄色 */
}

/* 可选择的延时锦囊样式 */
.delay-card-selectable {
	padding: 10px;
	border: 2px solid #4caf50;
	/* 绿色边框表示获取 */
	border-radius: 8px;
	background: #e8f5e9;
	/* 浅绿色背景 */
	cursor: pointer;
	transition: all 0.3s;
	min-width: 100px;
	text-align: center;
	margin-bottom: 8px;
}

.delay-card-selectable:hover {
	transform: translateY(-5px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
	background: #c8e6c9;
	/* 悬停时加深背景色 */
}

/* 不同锦囊类型的颜色区分 */
.delay-card-selectable.bingliang {
	border-color: #ff9800;
	/* 兵粮寸断橙色边框 */
	background: #fff3e0;
	/* 兵粮寸断浅橙色背景 */
}

.delay-card-selectable.lebu {
	border-color: #2196f3;
	/* 乐不思蜀蓝色边框 */
	background: #e3f2fd;
	/* 乐不思蜀浅蓝色背景 */
}

#status-area {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 20px;
	padding: 15px;
	background-color: #f8f9fa;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	margin: 15px 0;
	transition: none;
}

#status-area.collapsed {
	display: none;
}

#status-area:not(.collapsed) {
	display: grid;
	/* 保持网格布局 */
	width: 100%;
	/* 强制100%宽度 */
}

/* 整理手牌按钮样式 */
#organizeHandBtn {
	transition: all 0.3s ease;
	cursor: pointer;
}

#organizeHandBtn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#organizeHandBtn:disabled {
	cursor: not-allowed;
}

/* 火攻对话框样式 */
.huogong-dialog,
.huogong-options,
.discard-options {
	z-index: 10002;
}

.discard-card {
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 10px;
	cursor: pointer;
	background: white;
	transition: all 0.3s;
	min-width: 80px;
}

.discard-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	background: #fff9c4;
}

/* 青龙偃月刀弹窗样式 */
.qinglong-dialog {
	background: linear-gradient(135deg, #ffecb3, #ffe082);
}

.qinglong-dialog h3 {
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.kill-option:hover {
	background: #fff3e0;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#qinglongUsedCards {
	font-family: monospace;
	font-size: 14px;
}

#qrDemo svg {
	width: 200px;
	height: 200px;
	max-width: 100%;
	display: inline-block;
	image-rendering: crisp-edges;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
	transition: width .3s, height .3s;
	cursor: pointer;
}

@media (max-width: 768px) {
	#qrDemo svg {
		width: 160px;
		height: 160px;
	}
}

@media (max-width: 480px) {
	#qrDemo svg {
		width: 140px;
		height: 140px;
	}
}

@media (min-width: 1200px) {
	#qrDemo svg {
		width: 240px;
		height: 240px;
	}
}

#qrDemo p {
	margin: 8px 0 0;
	font-size: 13px;
	color: #555;
	word-break: keep-all;
}

#qrDemo {
	position: fixed;
	right: 20px;
	bottom: 70px;
	z-index: 1000;
	text-align: center;
	font-size: 12px;
	color: #555;
	transform: scale(0.65);
	transform-origin: right bottom;
}

.wine-box {
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 6px 10px;
	margin: 4px 0;
	background: #fafafa;
	display: inline-block;
}

.wine-box>div {
	line-height: 1.5;
}

#wine-buff {
	font-size: 13px;
	color: #666;
}

#wine-buff.active {
	color: #ff9800;
	font-weight: bold;
}