/* 即時更新banner */
.live-update-banner {
	color: #1f2937;
	border-radius: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	max-width: 300px;
	margin: 0.75rem auto 0 auto;
}

.live-indicator {
	width: 12px;
	height: 12px;
	background-color: #ef4444;
	border-radius: 50%;
	animation: pulse-live 2s infinite;
	box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}

.live-text {
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.025em;
	color: #1f2937;
}

/* 閃爍動畫 */
@keyframes pulse-live {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
	}
}

.fade-in-down {
	animation: fade-in-down 0.6s ease-out;
}


/* 翻頁動畫 */
@keyframes flipScore {
	0% {
		transform: perspective(400px) rotateY(0deg);
	}
	50% {
		transform: perspective(400px) rotateY(90deg);
		background-color: #fbbf24;
		box-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
	}
	100% {
		transform: perspective(400px) rotateY(0deg);
	}
}

/* 高亮脈動動畫 */
@keyframes pulseHighlight {
	0% {
		box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(251, 191, 36, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
	}
}

/* 應用動畫的類別 */
.score-flip {
	animation: flipScore 0.8s ease-in-out;
}

.score-highlight {
	animation: pulseHighlight 1.5s ease-out;
}

/* 確保動畫期間保持3D效果 */
.score-circle {
	transition: all 0.3s ease;
	transform-style: preserve-3d;
}

/* 比賽卡片容器 */
.match-card {
	background-color: #ffffff;
	border-radius: 1rem;
	padding: 1rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease-in-out;
	transform: translateY(0);
	position: relative;
}

.match-card:hover {
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	transform: translateY(-0.25rem);
}

/* 場地標題 */
.field-title {
	text-align: center;
	font-weight: 800;
	font-size: 1.125rem;
	color: #1f2937;
	margin-bottom: 0.75rem;
	border-bottom: 2px solid #fed7aa;
	padding-bottom: 0.5rem;
}

/* 標籤樣式 */
.match-label {
	position: absolute;
	top: 0.75rem;
	padding: 0.25rem 0.5rem;
	border-radius: 9999px;
	font-weight: 600;
	font-size: 0.75rem;
}

.set-label {
	right: 0.75rem;
	background-color: #fed7aa;
	color: #9a3412;
}

.match-number-label {
	left: 0.75rem;
	background-color: #bfdbfe;
	color: #1e40af;
}

/* 主要內容容器 */
.match-content {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	gap: 0.75rem;
}

/* 隊伍容器 */
.team-container {
	flex: 1;
	text-align: center;
}

/* 隊伍名稱 */
.team-name {
	font-size: 1.05rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: 0.5rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.25;
}

/* 分數圓圈 */
.score-circle {
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	color: #ffffff;
	font-size: 2rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	transform-style: preserve-3d;
}

.score-circle.team1 {
	background-color: #3b82f6;
}

.score-circle.team2 {
	background-color: #ef4444;
}

/* 中間比分區域 */
.center-score {
	font-size: 2rem;
	font-weight: 700;
	color: #f97316;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* 各局比分標題 */
.sets-title {
	margin-top: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #374151;
}

/* 各局比分容器 */
.sets-container {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.75rem;
	color: #4b5563;
	margin-top: 0.25rem;
}

/* 單局比分 */
.set-score {
	padding: 0.25rem 0.25rem;
	border-radius: 0.375rem;
	text-align: center;
	width: 3rem;
	font-weight: 600;
	font-size: 0.75rem;
}

.set-score.team1-win {
	background-color: #dbeafe;
	color: #1d4ed8;
}

.set-score.team2-win {
	background-color: #fecaca;
	color: #dc2626;
}

.set-score.no-result {
	background-color: #f3f4f6;
	color: #6b7280;
}

/* 錯誤狀態樣式 */
.error-state {
	grid-column: 1 / -1;
	text-align: center;
	padding: 3rem;
}

.error-title {
	color: #ef4444;
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.error-message {
	color: #4b5563;
}

@media (max-width: 480px) {
	/* 手機版即時更新橫幅調整 */
	.live-update-banner {
		padding: 0.625rem 1.25rem;
		margin-bottom: 0.5rem;
		max-width: 280px;
	}
	
	.live-text {
		font-size: 0.875rem;
	}
	
	.live-indicator {
		width: 10px;
		height: 10px;
	}

	/* 手機版比賽卡片調整 */
	.match-card {
		padding: 1.5rem;
	}

	.field-title {
		font-size: 1.25rem;
		margin-bottom: 1rem;
	}

	.match-label {
		top: 1rem;
		font-size: 0.875rem;
		padding: 0.375rem 0.75rem;
	}

	.set-label {
		right: 1rem;
	}

	.match-number-label {
		left: 1rem;
	}

	.match-content {
		gap: 1.5rem;
	}

	.team-name {
		font-size: 1rem;
		height: 5rem;
	}

	.score-circle {
		width: 5rem;
		height: 5rem;
		font-size: 1.875rem;
	}

	.center-score {
		font-size: 1.875rem;
	}

	.sets-title {
		margin-top: 1rem;
		font-size: 0.875rem;
	}

	.sets-container {
		margin-top: 0.5rem;
		font-size: 0.875rem;
	}

	.set-score {
		padding: 0.25rem 0.5rem;
		width: 4rem;
		font-size: 0.875rem;
	}
}

@media (min-width: 1024px) {
	.team-name {
		font-size: 1.125rem;
	}

	.score-circle {
		width: 6rem;
		height: 6rem;
		font-size: 1.875rem;
	}

	.center-score {
		font-size: 2.25rem;
	}
}

/* 人氣投票區域樣式 */
.voting-section {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
}

.voting-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: #6b7280;
	margin-bottom: 0.75rem;
}

.voting-icon {
	width: 1rem;
	height: 1rem;
	color: #ef4444;
}

.voting-options {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.vote-heart {
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid transparent;
	border-radius: 50%;
	background-color: #f9fafb;
	cursor: pointer;
	transition: all 0.3s ease;
}

.vote-heart:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vote-team1:hover {
	border-color: #3b82f6;
	background-color: rgba(59, 130, 246, 0.1);
}

.vote-team1:hover .heart-icon {
	color: #3b82f6;
}

.vote-team2:hover {
	border-color: #ef4444;
	background-color: rgba(239, 68, 68, 0.1);
}

.vote-team2:hover .heart-icon {
	color: #ef4444;
}

.heart-icon {
	width: 1.5rem;
	height: 1.5rem;
	color: #9ca3af;
	transition: all 0.3s ease;
}

.vote-progress-container {
	flex: 1;
	margin: 0 0.75rem;
}

.vote-percentages {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.25rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.percentage-left {
	color: #3b82f6;
}

.percentage-right {
	color: #ef4444;
}

.vote-progress {
	height: 1.5rem;
	background-color: #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
	display: flex;
	position: relative;
}

.vote-bar {
	height: 100%;
	transition: width 0.8s ease-in-out;
	position: relative;
}

.team1-bar {
	background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.team2-bar {
	background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* 投票後的效果 */
.vote-heart.voted {
	opacity: 0.6;
	cursor: not-allowed;
}

.vote-heart.voted .heart-icon {
	color: #9ca3af;
	transform: scale(0.9);
}

/* 用戶已投票的按鈕高亮 */
.vote-heart.user-voted {
	background-color: #f97316;
	border-color: #f97316;
	opacity: 1 !important;
	transform: scale(1.05);
	box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
}

.vote-heart.user-voted .heart-icon {
	color: #ffffff;
	transform: scale(1.1);
}

/* 已投票指示器 */
.voted-indicator {
	font-size: 0.875rem;
	color: #059669;
	font-weight: 600;
	margin-left: 0.5rem;
}

/* 投票訊息樣式 */
.vote-message {
	position: fixed;
	top: 2rem;
	left: 50%;
	transform: translateX(-50%) translateY(-100px);
	z-index: 1000;
	opacity: 0;
	transition: all 0.3s ease-in-out;
	pointer-events: none;
}

.vote-message.show {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.vote-message-content {
	background-color: #ffffff;
	border-radius: 0.75rem;
	padding: 1rem 1.5rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 300px;
	border-left: 4px solid;
}

.vote-message-success .vote-message-content {
	border-left-color: #10b981;
	background-color: #f0fdf4;
}

.vote-message-warning .vote-message-content {
	border-left-color: #f59e0b;
	background-color: #fffbeb;
}

.vote-message-info .vote-message-content {
	border-left-color: #3b82f6;
	background-color: #eff6ff;
}

.vote-message-text {
	flex: 1;
	font-weight: 600;
	color: #374151;
}

.vote-message-success .vote-message-text {
	color: #065f46;
}

.vote-message-warning .vote-message-text {
	color: #92400e;
}

.vote-message-info .vote-message-text {
	color: #1e40af;
}

.vote-message-close {
	background: none;
	border: none;
	font-size: 1.25rem;
	color: #6b7280;
	cursor: pointer;
	padding: 0.25rem;
	line-height: 1;
	transition: color 0.2s ease;
}

.vote-message-close:hover {
	color: #374151;
}

/* 手機版調整 */
@media (max-width: 480px) {
	.voting-title {
		font-size: 0.8rem;
	}
	
	.vote-heart {
		width: 2.5rem;
		height: 2.5rem;
	}
	
	.heart-icon {
		width: 1.25rem;
		height: 1.25rem;
	}
	
	.vote-percentages {
		font-size: 0.8rem;
	}
	
	.vote-progress {
		height: 1.25rem;
	}
	
	.vote-progress-container {
		margin: 0 0.5rem;
	}
}

/* 無比賽狀態的樣式 */
.match-card.no-match {
	opacity: 0.8;
	background: linear-gradient(to bottom right, #f3f4f6, #e5e7eb);
	border: 1px solid #e5e7eb;
}

.match-card.no-match .field-title {
	color: #afb5c1;
	border-bottom: 2px solid #afb5c1;
}

.match-card.no-match .match-label.set-label {
	color: #afb5c1;
	font-style: italic;
}

.match-card.no-match .team-name,
.match-card.no-match [data-game-score] {
	color: #afb5c1;
}

.match-card.no-match .score-circle {
	background: #f4f3f3;
	border-color: #e5e7eb;
	color: #afb5c1;
}

.match-card.no-match .set-score {
	background: #f3f4f6;
	border-color: #e5e7eb;
	color: #afb5c1;
}

.match-card.no-match .sets-title{
	color: #afb5c1;
	font-weight: 600;
}

.match-card.no-match .voting-title{
	color: #afb5c1;
	font-weight: 600;
}

.match-card.no-match .voting-icon {
	color: #afb5c1;
}

/* 無比賽訊息的樣式 */
.no-match-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    color: #6b7280;
    font-size: 1rem;
	font-weight: bold;
}

.no-match-message .info-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #6b7280;
}

/* 隱藏元素的通用樣式 */
.hidden {
    display: none !important;
}