/************************************
TournamentMode
************************************/
article.tournamentMode {
	margin: 0;
	padding-top: 35px;
	min-height: 55vh;
}

article h1 {
	padding: 10px 0;
	font-size: var(--f7);
}

/************************************
User Registration
************************************/
.userRegisterPage {
	background: #f6f8fb;
}

.userRegisterPage h1 {
	max-width: 960px;
	margin: 0 auto 12px;
	padding: 16px 12px 6px;
	font-size: var(--f5);
	font-weight: bold;
	text-align: left;
}

.registrationForm {
	max-width: 960px;
	margin: 0 auto 32px;
}

.registerSection {
	margin-bottom: 18px;
	padding: 22px;
	border: 1px solid rgba(14, 41, 30, 0.12);
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 8px 22px rgba(18, 38, 52, 0.08);
}

.registerSectionPolicy {
	border-color: rgba(86, 116, 132, 0.24);
	background: #eef6f5;
}

.registerSectionLogin {
	border-left: 6px solid #2f6f9f;
	background: #f3f8fc;
}

.registerSectionProfile {
	border-left: 6px solid #4f8f67;
	background: #f5fbf7;
}

.registerSectionEmergency {
	border-left: 6px solid #b35b4b;
	background: #fff7f5;
}

.registerSectionLicense {
	border-left: 6px solid #8a6f2a;
	background: #fffaf0;
}

.registerSectionHeader {
	margin-bottom: 16px;
}

.registerSectionHeader h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: var(--f6);
	font-weight: bold;
	line-height: 1.35;
}

.registerSectionHeader h2 .bi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	aspect-ratio: 1;
	border-radius: 50%;
	color: white;
	background: #17364f;
	font-size: 1.1rem;
}

.registerSectionHeader p,
.fieldHelp {
	margin: 0;
	color: #52616c;
	font-size: var(--f8);
	line-height: 1.6;
}

.registerSection label,
.formLabelText {
	margin-bottom: 6px;
	font-weight: bold;
	color: #1e3128;
}

.registerSection .form-control {
	min-height: 44px;
	border-color: rgba(14, 41, 30, 0.2);
	background-color: rgba(255, 255, 255, 0.96);
}

.registerSection .form-control:focus {
	border-color: var(--mainColor);
	box-shadow: 0 0 0 0.2rem rgba(210, 105, 30, 0.16);
}

.registerPair {
	align-items: center;
}

.registerMatchIcon {
	align-items: center;
	justify-content: center;
	color: #6d7b84;
	font-size: 2rem;
}

.passwordInputWrap {
	position: relative;
}

.passwordInputWrap .form-control {
	padding-right: 54px;
}

.passwordInputWrap .toggle-password {
	position: absolute;
	top: 50%;
	right: 6px;
	width: 40px;
	height: 32px;
	padding: 0;
	transform: translateY(-50%);
}

.inputRule {
	display: inline-flex;
	align-items: center;
	min-height: 1.7em;
	margin-left: 6px;
	padding: 2px 8px;
	border: 1px solid rgba(128, 85, 0, 0.2);
	border-radius: 999px;
	color: #6c4a00;
	background: #fff3cd;
	font-size: var(--f9);
	font-weight: bold;
	line-height: 1.2;
	vertical-align: middle;
}

.postalSearch {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.postalCodeInput {
	max-width: 11em;
}

.postalSearch .btn,
.registerSubmitArea .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.choiceGroup {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.choiceItem {
	display: inline-flex;
	align-items: center;
	min-width: 104px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid rgba(14, 41, 30, 0.18);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.86);
	cursor: pointer;
}

.choiceItem .form-check-input {
	position: static;
	margin: 0 8px 0 0;
}

.licenseDetailArea {
	margin-top: 14px;
	padding: 16px;
	border: 1px solid rgba(138, 111, 42, 0.24);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.7);
}

.registration .registerNotice {
	margin: 10px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	background-color: #fff3cd;
}

.registration .registerNotice dt {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	padding-left: 0;
	font-size: var(--f7);
	font-weight: bold;
}

.registration .registerNotice dd {
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.14);
	line-height: 1.6;
}

.registration .registerNotice dd:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.registerSubmitArea {
	padding: 8px 0 24px;
}

@media screen and (max-width: 767px) {
	.userRegisterPage h1 {
		font-size: var(--f6);
	}

	.registerSection {
		margin-bottom: 14px;
		padding: 16px 12px;
		border-left-width: 4px;
	}

	.registerSectionHeader h2 {
		font-size: var(--f7);
	}

	.registerSectionHeader p,
	.fieldHelp {
		font-size: var(--f9);
	}

	.inputRule {
		display: flex;
		width: fit-content;
		margin: 6px 0 0;
	}

	.postalSearch {
		align-items: stretch;
	}

	.postalCodeInput,
	.postalSearch .btn {
		width: 100%;
		max-width: none;
	}

	.choiceGroup {
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.choiceItem {
		width: 100%;
	}

	.date-select-group .form-control {
		flex: 1 1 30%;
		min-width: 0;
	}
}

.tournamentModeHero {
	height: auto;
	position: relative;
	overflow: hidden;
	margin: 0 0 18px;
	padding: 22px 16px 20px;
	color: #1a2633;
	text-align: center;
	background:
		linear-gradient(135deg, #f8fafc 0%, #c8d0d8 36%, #eef2f5 52%, #9aa7b4 100%);
	box-shadow: 5px 5px 5px rgba(8, 32, 54, 0.18);
	isolation: isolate;
	z-index: 8000;
}

.tournamentModeHero::before {
	content: "";
	position: absolute;
	inset: -55% -20%;
	z-index: 0;
	background:
		linear-gradient(100deg, transparent 0 38%, rgba(255, 255, 255, 0.68) 48%, transparent 58%),
		radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.42), transparent 20%),
		radial-gradient(circle at 82% 18%, rgba(66, 82, 100, 0.16), transparent 18%);
	animation: silverHeroSweep 7s ease-in-out infinite;
}

.tournamentModeHero>* {
	position: relative;
	z-index: 1;
}

.tournamentModeHero h1 {
	max-width: 1040px;
	margin: 0 auto 8px;
	padding: 0;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.25;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.tournamentModeHero .checked {
	padding: 0;
	color: #1a2633;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.tournamentModeHero .statusSubtitle {
	color: white;
	background-color: rgba(26, 38, 51, 0.82);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

@keyframes silverHeroSweep {

	0%,
	100% {
		transform: translateX(-12%) rotate(-3deg);
	}

	50% {
		transform: translateX(12%) rotate(3deg);
	}
}

.checked {
	padding: 10px 0;
	font-size: 4rem;
	font-family: var(--oswald);
	line-height: 1.2;
	text-align: center;
}

.statusSubtitle {
	width: fit-content;
	margin: 8px auto 0;
	padding: 6px 14px;
	border-radius: 999px;
	color: white;
	background-color: var(--mainColor);
	font-family: var(--baseFont);
	font-size: var(--f7);
	font-weight: bold;
	line-height: 1.3;
}

.flightOuter {
	position: relative;
	overflow: hidden;
	height: 40vh;
	min-height: 360px;
	margin: 0 0 16px;
	padding: 0;
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(10, 35, 74, 0.98), rgba(14, 119, 188, 0.92) 52%, rgba(214, 32, 49, 0.94)),
		var(--mainColor);
	box-shadow: 0 16px 30px rgba(8, 32, 54, 0.2);
	isolation: isolate;
}

.flightOuter::before {
	content: "";
	position: absolute;
	inset: -45% -25%;
	z-index: 0;
	background:
		linear-gradient(100deg, transparent 0 38%, rgba(255, 255, 255, 0.32) 48%, transparent 58%),
		radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.32), transparent 20%),
		radial-gradient(circle at 78% 22%, rgba(255, 241, 166, 0.24), transparent 18%);
	animation: checkinHeroSweep 4.6s ease-in-out infinite;
}

.flightOuter::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 0;
	height: 5px;
	border-radius: 999px;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0 18px, rgba(255, 255, 255, 0.22) 18px 32px);
	animation: flightRunway 1.2s linear infinite;
}

.flight {
	z-index: 1;
	width: 100%;
	height: 100%;
	margin-bottom: 10px;
	padding: 18px 10px 38px;
	font-size: 1.8rem;
	text-align: center;
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.flight span {
	display: block;
	font-family: oswald;
	font-size: clamp(13rem, 44vw, 24rem);
	font-weight: bold;
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 0.9;
	text-shadow: 0 8px 26px rgba(0, 0, 0, 0.32);
	animation: 0.95s flightNumberReveal cubic-bezier(0.2, 1.55, 0.35, 1);
	animation-delay: 1.25s;
	animation-fill-mode: both;
}

.flightSpecialMessage {
	position: absolute;
	top: 14px;
	left: 50%;
	z-index: 2;
	width: calc(100% - 28px);
	color: #fff3b0;
	font-family: var(--oswald);
	font-size: clamp(2.6rem, 8vw, 4.8rem);
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0;
	text-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	transform: translateX(-50%);
	animation: 0.8s flightSpecialReveal cubic-bezier(0.2, 1.45, 0.35, 1);
	animation-delay: 0.45s;
	animation-fill-mode: both;
}

.flightCallMessage {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 26px;
	z-index: 2;
	margin: 0;
	padding: 8px 10px;
	font-size: var(--f5);
	font-weight: bold;
	text-align: center;
	color: white;
	animation: 1s callMessageAnimation ease;
	animation-fill-mode: both;
	animation-delay: 2.5s;
}

@keyframes callMessageAnimation {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.flight .flightOrder {
	position: absolute;
	top: 18px;
	left: 50%;
	z-index: 2;
	width: 100%;
	font-family: var(--oswald);
	font-size: clamp(1.9rem, 5.4vw, 3.2rem);
	font-weight: bold;
	letter-spacing: 0;
	text-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
	transform: translateX(-50%);
	animation: 0.8s orderAnimation ease;
	animation-fill-mode: both;
	animation-delay: 0.1s;
}

.flightOuterSpecial .flight .flightOrder {
	top: 70px;
	font-size: clamp(1.5rem, 4.4vw, 2.4rem);
}

@keyframes orderAnimation {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(-12px);
	}

	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

@keyframes flightNumberReveal {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.55) rotate(-7deg);
		filter: blur(6px);
	}

	72% {
		transform: translate(-50%, -50%) scale(1.12) rotate(2deg);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1) rotate(0);
		filter: blur(0);
	}
}

@keyframes flightSpecialReveal {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(-14px) scale(0.86);
	}

	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1);
	}
}

@keyframes flightRunway {
	0% {
		background-position-x: 0;
	}

	100% {
		background-position-x: 32px;
	}
}

.paired {
	padding: 30px 0;
	font-size: 1.5rem;
	text-align: center;
	background-color: red;
	color: white;
}

.paired span {
	display: block;
	font-family: oswald;
	font-size: 3.2rem;
	font-weight: bold;
	color: white;
}

.resultModeWinner::before,
.resultModeWinner::after,
.resultModePodium::before,
.resultModePodium::after {
	content: none;
}

.resultEffectOverlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	overflow: hidden;
	pointer-events: none;
	animation: resultEffectOverlayFade 6s ease-out 1 forwards;
}

.resultEffectCanvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.resultEffectOverlayWinner {
	background-color: rgba(24, 26, 30, 0.88);
}

.resultEffectOverlayPodium {
	background:
		linear-gradient(135deg, rgba(37, 43, 51, 0.94), rgba(91, 103, 116, 0.92) 48%, rgba(48, 55, 64, 0.94));
}

.resultEffectPiece {
	position: absolute;
	display: block;
}

.resultEffectOverlayWinner .resultEffectPiece {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: white;
	box-shadow:
		0 -52px 0 1px rgba(255, 255, 255, 0.95),
		37px -37px 0 1px rgba(210, 218, 228, 0.95),
		52px 0 0 1px rgba(245, 248, 252, 0.95),
		37px 37px 0 1px rgba(175, 188, 202, 0.95),
		0 52px 0 1px rgba(230, 236, 242, 0.95),
		-37px 37px 0 1px rgba(255, 255, 255, 0.95),
		-52px 0 0 1px rgba(180, 192, 206, 0.95),
		-37px -37px 0 1px rgba(245, 248, 252, 0.95);
	animation: resultFireworkLaunchBurst 2.2s ease-out 1 both;
}

.resultEffectOverlayPodium .resultEffectPiece {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow:
		0 0 0 4px rgba(255, 255, 255, 0.28),
		18px -12px 0 -2px currentColor,
		34px -20px 0 -3px currentColor,
		-18px -12px 0 -2px currentColor,
		-34px -20px 0 -3px currentColor,
		22px 10px 0 -3px currentColor,
		-22px 10px 0 -3px currentColor;
	animation: resultCrackerBurst 2.7s ease-out 1 both;
}

.resultEffectOverlayWinner .resultEffectPiece1 { left: 18%; top: 26%; --launch-y: 54vh; animation-delay: 0.1s; }
.resultEffectOverlayWinner .resultEffectPiece2 { left: 76%; top: 20%; --launch-y: 60vh; animation-delay: 0.35s; }
.resultEffectOverlayWinner .resultEffectPiece3 { left: 48%; top: 42%; --launch-y: 42vh; animation-delay: 0.65s; }
.resultEffectOverlayWinner .resultEffectPiece4 { left: 30%; top: 34%; --launch-y: 52vh; animation-delay: 0.95s; }
.resultEffectOverlayWinner .resultEffectPiece5 { left: 84%; top: 50%; --launch-y: 38vh; animation-delay: 1.2s; }
.resultEffectOverlayWinner .resultEffectPiece6 { left: 58%; top: 24%; --launch-y: 58vh; animation-delay: 1.45s; }
.resultEffectOverlayWinner .resultEffectPiece7 { left: 12%; top: 46%; --launch-y: 44vh; animation-delay: 1.7s; }
.resultEffectOverlayWinner .resultEffectPiece8 { left: 70%; top: 40%; --launch-y: 48vh; animation-delay: 1.95s; }
.resultEffectOverlayWinner .resultEffectPiece9 { left: 40%; top: 18%; --launch-y: 64vh; animation-delay: 2.2s; }
.resultEffectOverlayWinner .resultEffectPiece10 { left: 88%; top: 32%; --launch-y: 54vh; animation-delay: 2.45s; }
.resultEffectOverlayWinner .resultEffectPiece11 { left: 24%; top: 48%; --launch-y: 40vh; animation-delay: 2.7s; }
.resultEffectOverlayWinner .resultEffectPiece12 { left: 62%; top: 14%; --launch-y: 68vh; animation-delay: 2.95s; }
.resultEffectOverlayWinner .resultEffectPiece13 { left: 46%; top: 58%; --launch-y: 30vh; animation-delay: 3.2s; }
.resultEffectOverlayWinner .resultEffectPiece14 { left: 8%; top: 30%; --launch-y: 56vh; animation-delay: 3.45s; }
.resultEffectOverlayWinner .resultEffectPiece15 { left: 92%; top: 54%; --launch-y: 34vh; animation-delay: 3.7s; }
.resultEffectOverlayWinner .resultEffectPiece16 { left: 36%; top: 56%; --launch-y: 32vh; animation-delay: 3.95s; }
.resultEffectOverlayWinner .resultEffectPiece17 { left: 74%; top: 62%; --launch-y: 28vh; animation-delay: 4.2s; }
.resultEffectOverlayWinner .resultEffectPiece18 { left: 16%; top: 62%; --launch-y: 30vh; animation-delay: 4.45s; }

.resultEffectOverlayPodium .resultEffectPiece1 { left: 8%; bottom: 6%; color: #ffffff; background-color: #ffffff; --burst-x: 18vw; --burst-y: -54vh; animation-delay: 0s; }
.resultEffectOverlayPodium .resultEffectPiece2 { left: 12%; bottom: 4%; color: #ffc7d5; background-color: #ffc7d5; --burst-x: 30vw; --burst-y: -46vh; animation-delay: 0.05s; }
.resultEffectOverlayPodium .resultEffectPiece3 { left: 18%; bottom: 5%; color: #b5deff; background-color: #b5deff; --burst-x: 20vw; --burst-y: -62vh; animation-delay: 0.1s; }
.resultEffectOverlayPodium .resultEffectPiece4 { left: 22%; bottom: 3%; color: #d6c8ff; background-color: #d6c8ff; --burst-x: 36vw; --burst-y: -58vh; animation-delay: 0.15s; }
.resultEffectOverlayPodium .resultEffectPiece5 { left: 28%; bottom: 7%; color: #ffeeaf; background-color: #ffeeaf; --burst-x: 26vw; --burst-y: -50vh; animation-delay: 0.2s; }
.resultEffectOverlayPodium .resultEffectPiece6 { left: 34%; bottom: 4%; color: #beefd7; background-color: #beefd7; --burst-x: 34vw; --burst-y: -66vh; animation-delay: 0.25s; }
.resultEffectOverlayPodium .resultEffectPiece7 { right: 8%; bottom: 6%; color: #ffceb8; background-color: #ffceb8; --burst-x: -18vw; --burst-y: -54vh; animation-delay: 0s; }
.resultEffectOverlayPodium .resultEffectPiece8 { right: 12%; bottom: 4%; color: #ffffff; background-color: #ffffff; --burst-x: -30vw; --burst-y: -46vh; animation-delay: 0.05s; }
.resultEffectOverlayPodium .resultEffectPiece9 { right: 18%; bottom: 5%; color: #ffc7d5; background-color: #ffc7d5; --burst-x: -20vw; --burst-y: -62vh; animation-delay: 0.1s; }
.resultEffectOverlayPodium .resultEffectPiece10 { right: 22%; bottom: 3%; color: #b5deff; background-color: #b5deff; --burst-x: -36vw; --burst-y: -58vh; animation-delay: 0.15s; }
.resultEffectOverlayPodium .resultEffectPiece11 { right: 28%; bottom: 7%; color: #d6c8ff; background-color: #d6c8ff; --burst-x: -26vw; --burst-y: -50vh; animation-delay: 0.2s; }
.resultEffectOverlayPodium .resultEffectPiece12 { right: 34%; bottom: 4%; color: #ffeeaf; background-color: #ffeeaf; --burst-x: -34vw; --burst-y: -66vh; animation-delay: 0.25s; }
.resultEffectOverlayPodium .resultEffectPiece13 { left: 46%; bottom: 2%; color: #beefd7; background-color: #beefd7; --burst-x: -18vw; --burst-y: -70vh; animation-delay: 0.45s; }
.resultEffectOverlayPodium .resultEffectPiece14 { left: 50%; bottom: 3%; color: #ffceb8; background-color: #ffceb8; --burst-x: 18vw; --burst-y: -68vh; animation-delay: 0.5s; }
.resultEffectOverlayPodium .resultEffectPiece15 { left: 54%; bottom: 2%; color: #ffffff; background-color: #ffffff; --burst-x: -10vw; --burst-y: -58vh; animation-delay: 0.55s; }
.resultEffectOverlayPodium .resultEffectPiece16 { left: 58%; bottom: 3%; color: #ffc7d5; background-color: #ffc7d5; --burst-x: 10vw; --burst-y: -60vh; animation-delay: 0.6s; }
.resultEffectOverlayPodium .resultEffectPiece17 { left: 62%; bottom: 2%; color: #b5deff; background-color: #b5deff; --burst-x: -24vw; --burst-y: -56vh; animation-delay: 0.65s; }
.resultEffectOverlayPodium .resultEffectPiece18 { left: 66%; bottom: 3%; color: #d6c8ff; background-color: #d6c8ff; --burst-x: 24vw; --burst-y: -58vh; animation-delay: 0.7s; }

.resultRevealOuter {
	position: relative;
	overflow: hidden;
	min-height: 34vh;
	margin: 0 0 16px;
	padding: 24px 14px;
	border-radius: 8px;
	color: white;
	text-align: center;
	background:
		linear-gradient(135deg, rgba(9, 36, 73, 0.98), rgba(14, 119, 188, 0.92) 58%, rgba(0, 142, 114, 0.9));
	box-shadow: 0 16px 30px rgba(8, 32, 54, 0.22);
	isolation: isolate;
}

.resultRevealOuter::before {
	content: "";
	position: absolute;
	inset: -50% -20%;
	z-index: 0;
	background:
		linear-gradient(100deg, transparent 0 38%, rgba(255, 255, 255, 0.28) 48%, transparent 58%),
		radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.28), transparent 20%);
	animation: checkinHeroSweep 4.8s ease-in-out infinite;
}

.resultRevealOuter.is-winner {
	border: 2px solid rgba(255, 226, 103, 0.92);
	background:
		linear-gradient(135deg, rgba(55, 35, 7, 0.98), rgba(172, 116, 24, 0.96) 44%, rgba(255, 224, 111, 0.92) 62%, rgba(80, 49, 8, 0.98));
}

.resultRevealOuter.is-podium {
	border: 2px solid rgba(235, 241, 247, 0.92);
	background:
		linear-gradient(135deg, rgba(45, 55, 66, 0.98), rgba(151, 164, 176, 0.96) 44%, rgba(238, 242, 246, 0.94) 62%, rgba(90, 102, 116, 0.98));
}

.resultReveal {
	position: relative;
	z-index: 1;
	display: flex;
	min-height: calc(34vh - 48px);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.resultRevealLabel {
	font-family: var(--oswald);
	font-size: clamp(2.2rem, 7vw, 4rem);
	font-weight: bold;
	line-height: 1;
	text-shadow: 0 4px 14px rgba(0, 0, 0, 0.26);
}

.resultRevealValue {
	max-width: 100%;
	font-family: var(--oswald);
	font-size: clamp(5rem, 18vw, 10rem);
	font-weight: bold;
	line-height: 0.95;
	text-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
	animation: resultRevealBounce 0.9s cubic-bezier(0.2, 1.45, 0.35, 1) both;
}

.resultWinnerText {
	display: inline-block;
	font-size: clamp(4.2rem, 14vw, 8.2rem);
	white-space: nowrap;
	animation: resultWinnerTextBounce 1.1s cubic-bezier(0.2, 1.45, 0.35, 1) infinite;
}

.resultPodiumText {
	color: #f6f9fc;
	text-shadow: 0 4px 14px rgba(50, 60, 70, 0.48);
}

.resultRevealSub {
	margin: 0;
	padding: 7px 16px;
	border-radius: 999px;
	color: white;
	background-color: rgba(20, 30, 48, 0.58);
	font-family: var(--oswald);
	font-size: clamp(1.8rem, 5vw, 2.8rem);
	font-weight: bold;
	line-height: 1;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

@keyframes resultRevealBounce {
	0% {
		opacity: 0;
		transform: scale(0.62) translateY(20px);
	}

	72% {
		transform: scale(1.08) translateY(0);
	}

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

@keyframes resultWinnerTextBounce {
	0%,
	100% {
		transform: translateY(0) scale(1);
	}

	45% {
		transform: translateY(-5px) scale(1.06);
	}
}

@keyframes resultEffectOverlayFade {
	0% {
		opacity: 1;
	}

	72% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		visibility: hidden;
		display: none;
	}
}

@keyframes resultFireworkBurst {
	0% {
		opacity: 0;
		transform: scale(0.12);
		filter: blur(4px);
	}

	22% {
		opacity: 1;
		filter: blur(0);
	}

	58% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.45);
	}
}

@keyframes resultFireworkLaunchBurst {
	0% {
		opacity: 0;
		transform: translateY(var(--launch-y, 55vh)) scale(0.2);
		filter: blur(3px);
	}

	32% {
		opacity: 1;
		transform: translateY(0) scale(0.34);
		filter: blur(0);
	}

	48% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	100% {
		opacity: 0;
		transform: translateY(0) scale(1.55);
	}
}

@keyframes resultConfettiPiece {
	0% {
		opacity: 1;
		transform: translateY(0) rotate(0deg);
	}

	78% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translateY(118vh) rotate(540deg);
	}
}

@keyframes resultCrackerBurst {
	0% {
		opacity: 0;
		transform: translate(0, 0) rotate(0deg) scale(0.4);
	}

	12% {
		opacity: 1;
	}

	58% {
		opacity: 1;
		transform: translate(var(--burst-x, 20vw), var(--burst-y, -56vh)) rotate(360deg) scale(1);
	}

	100% {
		opacity: 0;
		transform: translate(calc(var(--burst-x, 20vw) * 1.12), 18vh) rotate(620deg) scale(0.9);
	}
}

.tournamentFooter {
	text-align: center;
}

.tournamentModeNav {
	padding: 2px 0;
	font-size: 1.78rem;
	font-family: var(--oswald);
	text-align: center;
	background-color: red;
	color: white;
}

.status {
	padding: 30px 0;
	text-align: center;
}

.status .main {
	margin-top: 40px;
	font-size: 3rem;
	font-weight: bold;
}

.status .sub {
	font-size: 2rem;
}

.checkinHero {
	position: relative;
	overflow: hidden;
	margin: 18px 0 24px;
	padding: 28px 18px 24px;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 8px;
	color: white;
	background:
		linear-gradient(135deg, rgba(214, 32, 49, 0.96), rgba(14, 119, 188, 0.94) 56%, rgba(7, 28, 53, 0.98)),
		var(--mainColor);
	box-shadow: 3px 3px 8px rgba(8, 32, 54, 0.22);
	isolation: isolate;
}

.checkinHero::before {
	content: "";
	position: absolute;
	inset: -40% -20%;
	z-index: 0;
	background:
		linear-gradient(90deg, transparent 0 38%, rgba(255, 255, 255, 0.28) 48%, transparent 58%),
		radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35), transparent 22%),
		radial-gradient(circle at 78% 18%, rgba(255, 242, 160, 0.24), transparent 18%);
	animation: checkinHeroSweep 4.8s ease-in-out infinite;
}

.checkinHero::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 12px;
	z-index: 0;
	width: 86px;
	height: 86px;
	border: 2px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	box-shadow: inset 0 0 0 12px rgba(255, 255, 255, 0.08);
}

.checkinHero>* {
	position: relative;
	z-index: 1;
}

.checkinHeroBadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 14px;
	padding: 7px 16px;
	border-radius: 999px;
	color: var(--mainColor);
	background-color: rgba(255, 255, 255, 0.94);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
	font-size: var(--f7);
	font-weight: bold;
}

.checkinHeroBadge .material-symbols-rounded {
	font-size: 2rem;
	line-height: 1;
}

.checkinHero .main {
	margin: 0 0 8px;
	font-size: clamp(3.8rem, 11vw, 6.4rem);
	line-height: 0.95;
	text-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	animation: checkinHeroPop 0.75s cubic-bezier(0.2, 1.45, 0.35, 1) both;
}

.checkinHeroLead {
	margin: 0;
	font-weight: bold;
	color: #fff3b0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}

.checkinHeroMessage {
	max-width: 30em;
	margin: 10px auto 0;
	font-size: var(--f7);
	font-weight: bold;
	line-height: 1.6;
}

.checkinHeroSignal {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}

.checkinHeroSignal span {
	display: block;
	width: 34px;
	height: 6px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.85);
	animation: checkinHeroSignal 1.2s ease-in-out infinite;
}

.checkinHeroSignal span:nth-child(2) {
	animation-delay: 0.16s;
}

.checkinHeroSignal span:nth-child(3) {
	animation-delay: 0.32s;
}

@keyframes checkinHeroPop {
	0% {
		opacity: 0;
		transform: scale(0.86) translateY(14px);
	}

	72% {
		transform: scale(1.04) translateY(0);
	}

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

@keyframes checkinHeroSweep {

	0%,
	100% {
		transform: translateX(-10%) rotate(-4deg);
	}

	50% {
		transform: translateX(10%) rotate(4deg);
	}
}

@keyframes checkinHeroSignal {

	0%,
	100% {
		opacity: 0.42;
		transform: translateY(0);
	}

	50% {
		opacity: 1;
		transform: translateY(-4px);
	}
}

.returnHero,
.resultsPendingHero {
	position: relative;
	overflow: hidden;
	margin: 18px 0 24px;
	padding: 28px 18px 24px;
	border-radius: 8px;
	color: white;
	box-shadow: 0 16px 30px rgba(8, 32, 54, 0.2);
	isolation: isolate;
}

.returnHero {
	border: 2px solid rgba(255, 255, 255, 0.88);
	background:
		linear-gradient(135deg, rgba(0, 142, 114, 0.96), rgba(32, 105, 189, 0.94) 58%, rgba(10, 35, 74, 0.98)),
		var(--subColor2);
}

.resultsPendingHero {
	border: 2px solid rgba(255, 225, 141, 0.72);
	background:
		linear-gradient(135deg, rgba(20, 30, 48, 0.98), rgba(143, 93, 32, 0.94) 55%, rgba(214, 32, 49, 0.95)),
		var(--mainColor);
}

.returnHero::before,
.resultsPendingHero::before {
	content: "";
	position: absolute;
	inset: -40% -25%;
	z-index: 0;
	background:
		linear-gradient(90deg, transparent 0 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%),
		radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.28), transparent 20%),
		radial-gradient(circle at 78% 22%, rgba(255, 241, 166, 0.22), transparent 18%);
	animation: checkinHeroSweep 5.4s ease-in-out infinite;
}

.returnHero::after,
.resultsPendingHero::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 10px;
	z-index: 0;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.22);
	box-shadow: inset 0 0 0 12px rgba(255, 255, 255, 0.08);
}

.returnHero>*,
.resultsPendingHero>* {
	position: relative;
	z-index: 1;
}

.returnHeroBadge,
.resultsPendingBadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 14px;
	padding: 7px 16px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.94);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
	font-size: var(--f7);
	font-weight: bold;
}

.returnHeroBadge {
	color: var(--subColor2);
}

.resultsPendingBadge {
	color: #8f5d20;
}

.returnHeroBadge .material-symbols-rounded,
.resultsPendingBadge .material-symbols-rounded {
	font-size: 2rem;
	line-height: 1;
}

.returnHero .main,
.resultsPendingHero .main {
	margin: 0 0 8px;
	font-size: clamp(3.4rem, 10vw, 5.8rem);
	line-height: 0.98;
	text-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	animation: checkinHeroPop 0.75s cubic-bezier(0.2, 1.45, 0.35, 1) both;
}

.returnHeroLate {
	color: #fff3b0;
}

.returnHeroLead,
.resultsPendingLead {
	margin: 0;
	font-weight: bold;
	color: #fff3b0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}

.returnHeroMessage,
.resultsPendingMessage {
	max-width: 31em;
	margin: 10px auto 0;
	font-size: var(--f7);
	font-weight: bold;
	line-height: 1.6;
}

.returnHeroProgress {
	overflow: hidden;
	max-width: 260px;
	height: 8px;
	margin: 18px auto 0;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.28);
}

.returnHeroProgress span {
	display: block;
	width: 44%;
	height: 100%;
	border-radius: inherit;
	background-color: rgba(255, 255, 255, 0.92);
	animation: returnHeroProgress 1.9s ease-in-out infinite;
}

.resultsPendingDots {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin-top: 18px;
}

.resultsPendingDots span {
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	animation: resultsPendingDots 1.2s ease-in-out infinite;
}

.resultsPendingDots span:nth-child(2) {
	animation-delay: 0.16s;
}

.resultsPendingDots span:nth-child(3) {
	animation-delay: 0.32s;
}

@keyframes returnHeroProgress {
	0% {
		transform: translateX(-115%);
	}

	55%,
	100% {
		transform: translateX(260%);
	}
}

@keyframes resultsPendingDots {

	0%,
	100% {
		opacity: 0.42;
		transform: scale(0.86);
	}

	50% {
		opacity: 1;
		transform: scale(1.18);
	}
}

/****************************
マイページ
****************************/
.mypageSectionTitle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 30px 0 16px;
	color: var(--mainColor);
	font-family: var(--oswald);
	font-size: clamp(3rem, 9vw, 4.6rem);
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
}

.mypageSectionTitle .material-symbols-rounded {
	display: grid;
	width: 54px;
	height: 54px;
	place-items: center;
	border-radius: 18px;
	color: white;
	font-size: 3.4rem;
	background-color: var(--mainColor);
	box-shadow: 0 6px 16px rgba(14, 41, 30, 0.16);
}

.myResultsTitle {
	margin-top: 36px;
}

.guestActionGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.guestActionCard {
	display: flex;
	min-height: 245px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 22px 16px;
	border: 2px solid var(--mainColor);
	border-radius: 10px;
	text-align: center;
	background:
		linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(253, 216, 142, 0.42));
	box-shadow: 0 10px 22px rgba(14, 41, 30, 0.12);
}

.guestActionLogin {
	background:
		linear-gradient(135deg, rgba(210, 105, 30, 0.94), rgba(100, 85, 56, 0.96));
	color: white;
}

.guestActionLogin h2 {
	color: var(--thinColor2);
}

.guestActionRegister {
	background:
		linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(86, 209, 199, 0.24));
}

.guestActionIcon {
	display: grid;
	width: 64px;
	height: 64px;
	place-items: center;
	border-radius: 20px;
	color: white;
	font-size: 3.8rem;
	background-color: var(--mainColor);
}

.guestActionLogin .guestActionIcon {
	background-color: rgba(255, 255, 255, 0.2);
}

.guestActionCard h2 {
	margin: 0;
	font-size: var(--f5);
	font-weight: bold;
	line-height: 1.25;
}

.guestActionCard p {
	margin: 0;
	font-size: var(--f7);
	font-weight: bold;
	line-height: 1.45;
}

.guestActionBtn,
.guestForgotLink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 24px;
	border-radius: 999px;
	font-size: var(--f7);
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
}

.guestActionBtn {
	width: min(100%, 260px);
	color: var(--mainColor);
	background-color: white;
}

.guestActionBtn:hover {
	color: var(--deepColor);
	text-decoration: none;
}

.guestActionBtnOutline {
	border: 2px solid var(--mainColor);
	color: white;
	background-color: var(--mainColor);
}

.guestActionBtnOutline:hover {
	color: white;
	background-color: var(--deepColor);
}

.guestForgotLink {
	border: 2px solid var(--thinColor);
	color: var(--text);
	background-color: var(--thinColor2);
}

.guestForgotLink:hover {
	color: var(--text);
	text-decoration: none;
}

.userLoginPage {
	padding-top: 76px;
}

.userLoginPanel {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px 18px;
	border: 3px solid var(--mainColor);
	border-radius: 12px;
	background:
		linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(253, 216, 142, 0.42));
	box-shadow: 0 16px 34px rgba(14, 41, 30, 0.16);
}

.userLoginHeader {
	margin-bottom: 18px;
	text-align: center;
}

.userLoginIcon {
	display: grid;
	width: 70px;
	height: 70px;
	margin: 0 auto 12px;
	place-items: center;
	border-radius: 22px;
	color: white;
	font-size: 4.2rem;
	background-color: var(--mainColor);
	box-shadow: 0 8px 20px rgba(14, 41, 30, 0.18);
}

.userLoginHeader h1 {
	margin: 0;
	color: var(--mainColor);
	font-family: var(--oswald);
	font-size: clamp(3rem, 10vw, 4.6rem);
	font-weight: bold;
	line-height: 1;
}

.userLoginHeader p {
	margin: 10px 0 0;
	font-size: var(--f7);
	font-weight: bold;
	line-height: 1.45;
}

.userLoginForm {
	display: grid;
	gap: 14px;
	margin-top: 18px;
}

.userLoginField label {
	font-size: var(--f7);
	font-weight: bold;
}

.userLoginField .form-control {
	min-height: 48px;
	border: 2px solid var(--mainColor);
	border-radius: 8px;
	font-size: var(--f7);
}

.userLoginSubmit {
	margin-top: 8px;
	text-align: center;
}

.userLoginButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: min(100%, 320px);
	min-height: 54px;
	border: 0;
	border-radius: 999px;
	color: white;
	font-size: var(--f6);
	font-weight: bold;
	background-color: var(--mainColor);
	box-shadow: 0 8px 18px rgba(14, 41, 30, 0.18);
}

.userLoginLinks {
	display: grid;
	gap: 10px;
	margin-top: 22px;
	text-align: center;
}

.userLoginRegisterLink,
.userLoginForgotLink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: var(--f7);
	font-weight: bold;
}

.userLoginRegisterLink {
	color: white;
	background-color: var(--deepColor);
}

.userLoginRegisterLink:hover {
	color: white;
	text-decoration: none;
}

.userLoginForgotLink {
	border: 2px solid var(--thinColor);
	color: var(--text);
	background-color: white;
}

.userLoginForgotLink:hover {
	color: var(--text);
	text-decoration: none;
}

.entryNowList {
	display: grid;
	gap: 14px;
}

.entryNowCard {
	border: 2px solid var(--mainColor);
	border-radius: 10px;
	background:
		linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(253, 216, 142, 0.42));
	box-shadow: 0 10px 22px rgba(14, 41, 30, 0.12);
	overflow: hidden;
}

.entryNowCardInner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px;
}

.entryBoxLeft {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}

.entryBoxLeft a {
	display: block;
	color: var(--text);
}

.entryBoxLeft a:hover {
	color: var(--text);
	text-decoration: none;
}

.entryTournamentName {
	font-size: var(--f6);
	font-weight: bold;
	line-height: 1.35;
}

.entryTournamentDate {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	color: var(--deepColor);
	font-size: var(--f8);
	font-weight: bold;
}

.entryTournamentDate .material-symbols-rounded {
	font-size: 1.8rem;
}

.entryBoxright {
	width: auto;
	flex: 0 0 34%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	text-align: center;
}

.entryStatusBadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 10px;
	border-radius: 999px;
	font-size: var(--f8);
	font-weight: bold;
	line-height: 1;
}

.entryStatusEntered {
	color: white;
	background-color: var(--accentDeep);
}

.entryStatusToday {
	color: var(--text);
	background-color: var(--thinColor);
}

.entryStatusNote {
	color: var(--pair);
	font-size: var(--f8);
	font-weight: bold;
	line-height: 1.35;
}

.entryApplyBtn,
.entryDisabledBtn,
.entryCancelBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 42px;
	padding: 8px 10px;
	border-radius: 999px;
	font-size: var(--f8);
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
}

.entryApplyBtn {
	color: white;
	background-color: var(--mainColor);
}

.entryApplyBtn:hover {
	color: white;
	text-decoration: none;
	background-color: var(--deepColor);
}

.entryCancelBtn {
	width: fit-content;
	min-height: 34px;
	margin: 0 auto;
	padding: 6px 14px;
	border: 2px solid var(--pair);
	color: var(--pair);
	background-color: white;
}

.entryDisabledBtn {
	border: 2px solid #aaa;
	color: #777;
	background-color: #eee;
}

.actionRequiredPanel {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 28px;
	padding: 16px;
	border: 3px solid var(--pair);
	border-radius: 12px;
	background:
		linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(238, 189, 180, 0.5));
	box-shadow: 0 12px 26px rgba(14, 41, 30, 0.14);
}

.actionRequiredIcon {
	flex: 0 0 auto;
	display: grid;
	width: 70px;
	height: 70px;
	place-items: center;
	border-radius: 22px;
	color: white;
	background-color: var(--pair);
}

.actionRequiredIcon .material-symbols-rounded {
	font-size: 4rem;
}

.actionRequiredBody {
	flex: 1 1 auto;
	min-width: 0;
}

.actionRequiredBody h2 {
	margin: 0 0 8px;
	color: var(--pair);
	font-size: var(--f4);
	font-weight: bold;
	line-height: 1;
}

.actionRequiredBody p {
	margin: 0 0 8px;
	font-size: var(--f7);
	font-weight: bold;
	line-height: 1.45;
}

.actionRequiredLink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 4px;
	padding: 9px 18px;
	border-radius: 999px;
	color: white;
	font-size: var(--f7);
	font-weight: bold;
	background-color: var(--pair);
}

.actionRequiredLink:hover {
	color: white;
	text-decoration: none;
	background-color: var(--deepColor);
}

.myResults {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	margin-bottom: 28px;
}

.latestCompetition,
.myResults .ranking {
	display: flex;
	min-width: 0;
	min-height: 150px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px 10px;
	border: 2px solid var(--mainColor);
	border-radius: 8px;
	text-align: center;
	background:
		linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(253, 216, 142, 0.48));
	box-shadow: 0 8px 18px rgba(14, 41, 30, 0.12);
}

.latestCompetition {
	position: relative;
	overflow: hidden;
	grid-column: 1 / -1;
	min-height: 170px;
	border-width: 3px;
	background:
		linear-gradient(135deg, rgba(210, 105, 30, 0.95), rgba(100, 85, 56, 0.95));
	color: white;
}

.latestCompetition.is-winner {
	border-color: rgba(255, 222, 115, 0.9);
	background:
		linear-gradient(135deg, rgba(68, 44, 11, 0.98), rgba(184, 129, 32, 0.96) 42%, rgba(255, 223, 112, 0.92) 58%, rgba(96, 59, 12, 0.98));
	box-shadow: 0 14px 28px rgba(111, 75, 18, 0.28);
}

.latestCompetition.is-winner::before {
	content: "";
	position: absolute;
	inset: -50% -20%;
	background:
		linear-gradient(100deg, transparent 0 38%, rgba(255, 255, 255, 0.42) 48%, transparent 58%),
		radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.28), transparent 20%);
	animation: latestWinnerShine 4.6s ease-in-out infinite;
}

.latestCompetition.is-winner > * {
	position: relative;
	z-index: 1;
}

.latestCompetition.is-podium {
	border-color: rgba(235, 241, 247, 0.92);
	background:
		linear-gradient(135deg, rgba(45, 55, 66, 0.98), rgba(151, 164, 176, 0.96) 42%, rgba(238, 242, 246, 0.94) 58%, rgba(90, 102, 116, 0.98));
	box-shadow: 0 14px 28px rgba(70, 84, 98, 0.25);
}

.latestCompetition.is-podium::before {
	content: "";
	position: absolute;
	inset: -50% -20%;
	background:
		linear-gradient(100deg, transparent 0 38%, rgba(255, 255, 255, 0.5) 48%, transparent 58%),
		radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.32), transparent 20%);
	animation: latestPodiumShine 5.4s ease-in-out infinite;
}

.latestCompetition.is-podium > * {
	position: relative;
	z-index: 1;
}

.latestWinner {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	color: #fff3b0;
	background-color: rgba(36, 24, 8, 0.62);
	box-shadow: inset 0 0 0 1px rgba(255, 236, 160, 0.55), 0 8px 18px rgba(0, 0, 0, 0.22);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
	animation: latestWinnerBounce 1.15s cubic-bezier(0.2, 1.45, 0.35, 1) infinite;
}

.myResults .series {
	grid-column: span 3;
}

.myResults .data {
	grid-column: span 2;
}

.myResults h3 {
	margin: 0;
	padding: 0;
	font-size: var(--f7);
	font-weight: bold;
	line-height: 1.25;
}

.latestCompetition h3 {
	color: rgba(255, 255, 255, 0.86);
	font-family: var(--oswald);
	font-size: var(--f5);
}

.latestCompetition p,
.myResults .ranking p {
	margin: 0;
}

.latestCompetition p {
	font-weight: bold;
	line-height: 1.35;
}

.latestCompetition p span,
.myResults .ranking .myPlace {
	font-family: var(--oswald);
	font-size: var(--f4);
	font-weight: bold;
	line-height: 1;
}

.myResults .ranking.data p {
	font-weight: bold;
	line-height: 1.35;
}

.myResultsIcon {
	display: grid;
	width: 50px;
	height: 50px;
	place-items: center;
	border-radius: 16px;
	color: white;
	font-size: 3rem;
	background-color: var(--mainColor);
}

.latestCompetition .myResultsIcon {
	background-color: rgba(255, 255, 255, 0.22);
}

.latestCompetition.is-winner .myResultsIcon {
	color: #5a3608;
	background-color: rgba(255, 243, 176, 0.92);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.latestCompetition.is-podium .myResultsIcon {
	color: #455260;
	background-color: rgba(246, 249, 252, 0.94);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

@keyframes latestWinnerBounce {

	0%,
	100% {
		transform: translateY(0) scale(1);
	}

	45% {
		transform: translateY(-5px) scale(1.08);
	}
}

@keyframes latestWinnerShine {

	0%,
	100% {
		transform: translateX(-10%) rotate(-4deg);
	}

	50% {
		transform: translateX(10%) rotate(4deg);
	}
}

@keyframes latestPodiumShine {

	0%,
	100% {
		transform: translateX(-10%) rotate(-3deg);
	}

	50% {
		transform: translateX(10%) rotate(3deg);
	}
}

.myResults .myResultsAoy {
	grid-column: 1 / -1;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 237, 191, 0.82));
}

@media screen and (max-width: 767px) {
	.guestActionGrid {
		grid-template-columns: 1fr;
	}

	.entryNowCardInner {
		flex-direction: column;
		align-items: stretch;
	}

	.entryBoxright {
		flex-basis: auto;
		width: 100%;
	}

	.actionRequiredPanel {
		flex-direction: column;
		text-align: center;
	}
}

p.main .limitTimeMessage {
	background-color: var(--mainColor);
	padding: 2px;
	font-size: var(--f5);
	color: white;
}

.limitTime {
	border: 1px solid #333;
}

/************************************
RealTimeMode
************************************/
.resultConfirmation,
.resultConmfimation,
.resultVerification {
	border-radius: 10px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.resultConfirmation,
.resultConmfimation {
	background-color: var(--mainColor);
}

.resultConfirmationFirstView {
	position: relative;
	overflow: hidden;
	margin: 10px 0 14px;
	border: 2px solid rgba(255, 255, 255, 0.6) !important;
	background:
		radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.28), transparent 26%),
		linear-gradient(135deg, var(--mainColor) 0%, #0f7b87 45%, #f2b705 100%);
	background-size: 180% 180%;
	animation: resultConfirmationBgFlow 5.5s ease infinite;
}

.resultConfirmationFirstView::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.24) 46%, transparent 58%);
	transform: translateX(-100%);
	animation: resultConfirmationShine 2.8s ease-in-out infinite;
	pointer-events: none;
}

.resultConfirmationFirstView .inner {
	position: relative;
	z-index: 1;
}

.resultVerification {
	background-color: var(--subColor1);
}

.resultVerificationAppeal {
	background-color: var(--pair);
}

.resultConfirmation a,
.resultConmfimation a,
.resultVerification a {
	color: white;
}

.catchKeepingGuide {}

.guide {
	margin-bottom: 10px;
}

.guide h2 {
	margin: 28px 0 10px !important;
	padding: 0 !important;
	font-size: var(--f5) !important;
	border-bottom: none !important;
	text-align: center !important;
}

.guide.resultConfirmation h2,
.guide.resultConmfimation h2,
.guide.resultVerification h2 {
	padding-top: 60px !important;
	position: relative;
	font-size: var(--f3) !important;
	color: white;
}

.guide.resultConfirmationFirstView h2 {
	font-size: clamp(3.2rem, 12vw, 7rem) !important;
	line-height: 0.95;
	text-shadow:
		2px 2px 0 rgba(0, 0, 0, 0.45),
		-2px 2px 0 rgba(0, 0, 0, 0.35),
		0 7px 20px rgba(0, 0, 0, 0.35);
	animation: resultConfirmationZoomBounce 0.92s cubic-bezier(0.18, 1.45, 0.36, 1) both;
}

.guide.resultConfirmationFirstView h3 {
	animation: resultConfirmationZoomBounce 0.72s cubic-bezier(0.18, 1.35, 0.36, 1) 0.42s both;
}

.guide.resultConfirmation h2::before,
.guide.resultConmfimation h2::before,
.guide.resultVerification h2::before {
	content: '\e762';
	font-family: 'Material Symbols Outlined';
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	font-size: 6rem;
	color: rgb(243, 224, 53);
	animation: 0.6s iconZoom ease;
	animation-fill-mode: both;
}

.guide.resultVerification h2::before {
	content: '\eb5f';
}

.guide.resultVerificationAppeal h2::before {
	content: '\e002';
	color: #fff35a;
}

@keyframes iconZoom {
	0% {
		transform: translateX(-50%) scale(0);
	}

	96% {
		transform: translateX(-50%) scale(1.1);
	}

	97% {
		transform: translateX(-50%) scale(0.9);
	}

	98% {
		transform: translateX(-50%) scale(1.05);
	}

	99% {
		transform: translateX(-50%) scale(0.95);
	}

	100% {
		transform: translateX(-50%) scale(1);
	}
}

@keyframes resultConfirmationZoomBounce {
	0% {
		opacity: 0;
		transform: scale(0.18);
	}

	58% {
		opacity: 1;
		transform: scale(1.18);
	}

	76% {
		transform: scale(0.92);
	}

	90% {
		transform: scale(1.06);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes resultConfirmationBgFlow {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@keyframes resultConfirmationShine {

	0%,
	35% {
		transform: translateX(-120%);
	}

	70%,
	100% {
		transform: translateX(120%);
	}
}

.guide h3 {
	margin: 2px 0;
	padding: 0;
	text-align: center;
}

.guide.resultConfirmation h3,
.guide.resultConmfimation h3,
.guide.resultVerification h3 {
	margin-bottom: 10px;
	font-size: var(--f5);
	color: white;
}

.appealUrgentMessage {
	margin: 0 12px 12px;
	padding: 10px;
	border: 2px solid rgba(255, 255, 255, 0.75);
	border-radius: 8px;
	background-color: rgba(0, 0, 0, 0.18);
	color: white;
	text-align: center;
	font-size: var(--f5);
	font-weight: bold;
}

.realtimePendingCatch {
	margin: 12px;
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.16);
	color: white;
}

.realtimeAppealedCatch {
	border-color: rgba(255, 255, 255, 0.9);
	background-color: rgba(0, 0, 0, 0.2);
}

.realtimeCatchInfo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 12px;
	padding-left: 0;
}

.realtimeCatchInfo div {
	padding: 8px;
	border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.9);
	color: #222;
}

.realtimeCatchInfo dt {
	margin-bottom: 3px;
	font-size: var(--f7);
	font-weight: bold;
	color: #555;
	text-indent: 0;
}

.realtimeCatchInfo dt::before {
	content: "";
}

.realtimeCatchInfo dd {
	margin: 0;
	font-size: var(--f7);
	font-weight: bold;
	line-height: 1.25;
}

.realtimeCatchInfo .catchWeight {
	font-family: var(--oswald);
	font-size: var(--f5);
	color: var(--mainColor);
}

.realtimeCatchAction {
	display: block;
	width: 100%;
	padding: 12px 16px;
	font-size: 1.2rem;
	font-weight: bold;
}

.realtimeCatchLimit {
	margin: 10px 0 0;
	font-weight: bold;
	text-align: center;
}

.realtimeCatchLimit span {
	font-size: var(--f5);
}

.realtimeListPendingCatch {
	background-color: var(--mainColor);
}

.realtimeListPendingCatch h3 {
	margin-bottom: 10px;
	color: white;
}

.realtimeListConfirmAction {
	margin: 10px 0 0;
	text-align: center;
}

.tournamentCountdownInfo {
	position: relative;
	overflow: hidden;
	min-height: 40vh;
	padding: 16px;
	border: 2px solid rgba(255, 255, 255, 0.78);
	border-radius: 8px;
	color: white;
	background:
		linear-gradient(135deg, rgba(9, 36, 73, 0.98), rgba(14, 119, 188, 0.92) 58%, rgba(0, 142, 114, 0.9)),
		var(--mainColor);
	box-shadow: 0 14px 28px rgba(8, 32, 54, 0.2);
	isolation: isolate;
}

.tournamentCountdownInfo::before {
	content: "LIVE INFO";
	position: absolute;
	left: -10px;
	right: -10px;
	bottom: 10%;
	z-index: 0;
	color: rgba(255, 255, 255, 0.14);
	font-family: var(--oswald);
	font-size: clamp(5.8rem, 18vw, 11rem);
	font-weight: bold;
	line-height: 0.85;
	letter-spacing: 0;
	text-align: center;
	white-space: nowrap;
	transform: translateY(-44%) rotate(-8deg);
	pointer-events: none;
}

.tournamentCountdownInfo::after {
	content: "";
	position: absolute;
	inset: -45% -25%;
	z-index: 0;
	background:
		linear-gradient(100deg, transparent 0 38%, rgba(255, 255, 255, 0.24) 48%, transparent 58%),
		radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.24), transparent 20%);
	animation: checkinHeroSweep 5.2s ease-in-out infinite;
}

.tournamentCountdownInfo>* {
	position: relative;
	z-index: 1;
}

.tournamentCountdownInfo.countdown-urgent-120 {
	background:
		linear-gradient(135deg, rgba(8, 64, 104, 0.98), rgba(14, 119, 188, 0.94) 58%, rgba(0, 142, 114, 0.9)),
		var(--mainColor);
}

.tournamentCountdownInfo.countdown-urgent-60 {
	border-color: rgba(255, 214, 102, 0.82);
	background:
		linear-gradient(135deg, rgba(103, 75, 10, 0.98), rgba(197, 137, 16, 0.94) 56%, rgba(214, 32, 49, 0.88));
}

.tournamentCountdownInfo.countdown-urgent-30,
.tournamentCountdownInfo.countdown-urgent-expired {
	border-color: rgba(255, 255, 255, 0.86);
	background:
		linear-gradient(135deg, rgba(96, 8, 22, 0.98), rgba(214, 32, 49, 0.96) 58%, rgba(20, 30, 48, 0.96));
	animation: countdownUrgentPulse 1.25s ease-in-out infinite;
}

.tournamentInfo {
	color: white;
}

.tournamentInfo [data-countdown-container] {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 10px;
}

.tournamentInfo.returnInfo [data-countdown-container] {
	display: block;
	padding: 10px;
	border: 1px solid white;
	text-align: center;
	color: var(--text);
	background-color: var(--thinColor2);
}

.tournamentInfo.returnInfo .returnCompleteMessage {
	display: block;
	width: 100%;
	padding: 12px;
	border: 1px solid white;
	text-align: center;
	color: var(--text);
	background-color: var(--thinColor2);
}

.tournamentInfo.returnInfo .returnCompleteMessage p:first-child {
	margin-bottom: 8px;
	font-size: var(--f5);
	font-weight: bold;
}

.tournamentInfo.returnInfo .returnCompleteMessage strong {
	font-size: var(--f4);
	color: var(--mainColor);
}

.tournamentInfo.returnInfo [data-countdown-sub] {
	margin-bottom: 8px;
	font-size: var(--f5);
	font-weight: bold;
}

.tournamentInfo .flightInfo,
.tournamentInfo .endTimeInfo {
	display: flex;
	min-height: calc(40vh - 36px);
	flex-direction: column;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 7px;
	padding: 14px 10px;
	text-align: center;
	color: var(--text);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.tournamentInfo .flightInfo {
	width: calc(48% - 5px);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(231, 242, 250, 0.94));
}

.tournamentInfo .flightInfo .flightNo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 16px 8px;
	border: 2px solid rgba(14, 119, 188, 0.24);
	border-radius: 8px;
	background-color: white;
	font-weight: bold;
	line-height: 1.15;
	box-shadow: 0 8px 18px rgba(8, 32, 54, 0.12);
}

.tournamentInfo .flightInfo span.flightNo {
	display: block;
	margin-top: 12px;
	padding: 8px 14px;
	border-radius: 8px;
	background-color: var(--thinColor2);
	font-family: var(--oswald);
	font-size: clamp(8rem, 24vw, 14rem);
	font-weight: bold;
	color: var(--accentDeep);
	line-height: 0.85;
	box-shadow: 5px 5px 5px #66666666;
	text-shadow: 0 3px 0 rgba(255, 255, 255, 0.72);
}

.tournamentInfo .endTimeInfo {
	width: calc(52% - 5px);
	color: var(--text);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(240, 245, 249, 0.94));
}

.tournamentInfo .endTimeInfo .limitTimeMessage {
	background-color: inherit !important;
	padding: 2px;
	font-size: var(--f6);
	color: var(--mainColor);
	font-weight: bold;
}

.tournamentInfo .endTimeInfo p[data-countdown-sub] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0 0 16px;
	padding: 16px 10px;
	border: 2px solid rgba(14, 119, 188, 0.34);
	border-radius: 8px;
	color: var(--text);
	background-color: white;
	font-weight: bold;
	box-shadow: 0 6px 14px rgba(8, 32, 54, 0.1);
}

.tournamentInfo .endTimeInfo p[data-countdown-sub] strong {
	display: block;
	margin-top: 8px;
	padding: 8px 14px;
	border-radius: 8px;
	background-color: var(--thinColor2);
	font-size: clamp(3rem, 8vw, 4.8rem);
	color: var(--mainColor);
	line-height: 1;
	box-shadow: 5px 5px 5px #66666666;
}

.tournamentInfo .endTimeInfo p[data-countdown-line] {
	margin: 0;
	padding: 16px 8px;
	border: 1px solid rgba(14, 119, 188, 0.18);
	border-radius: 8px;
	background-color: rgba(14, 119, 188, 0.08);
}

.countdownInfoIcon {
	display: inline-grid;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 50%;
	color: white;
	background-color: var(--mainColor);
	font-size: 2.2rem;
	line-height: 1;
}

.countdownSubText {
	display: inline-block;
	line-height: 1.35;
}

.tournamentCountdownInfo [data-countdown-value] {
	display: inline-block;
	font-family: var(--oswald);
	font-size: clamp(3rem, 9vw, 5rem);
	line-height: 1;
	letter-spacing: 0;
	text-shadow: 0 2px 0 rgba(255, 255, 255, 0.68);
	transition: color 0.2s ease, transform 0.2s ease;
}

.tournamentCountdownInfo.countdown-urgent-60 [data-countdown-value],
.tournamentCountdownInfo.countdown-urgent-30 [data-countdown-value] {
	transform: scale(1.05);
}

.realtimeMode .tournamentInfo .tournamentCountdownInfo {
	overflow: visible;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: white;
	background: transparent;
	box-shadow: none;
	animation: none;
	isolation: auto;
}

.realtimeMode .tournamentInfo .tournamentCountdownInfo::before,
.realtimeMode .tournamentInfo .tournamentCountdownInfo::after {
	content: none;
}

.realtimeMode .tournamentInfo [data-countdown-container] {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 10px;
}

.realtimeMode .tournamentInfo .flightInfo,
.realtimeMode .tournamentInfo .endTimeInfo {
	display: block;
	min-height: 0;
	border: 1px solid white;
	border-radius: 0;
	padding: 5px;
	text-align: center;
	color: var(--text);
	box-shadow: none;
}

.realtimeMode .tournamentInfo .flightInfo {
	width: calc(48% - 5px);
	background: var(--subColor1);
}

.realtimeMode .tournamentInfo .flightInfo .flightNo {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-weight: normal;
	line-height: 1.3;
}

.realtimeMode .tournamentInfo .flightInfo span.flightNo {
	display: block;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	font-family: inherit;
	font-size: var(--f3);
	font-weight: bold;
	color: var(--accentDeep);
	line-height: 1.2;
	box-shadow: none;
	text-shadow: none;
}

.realtimeMode .tournamentInfo .endTimeInfo {
	width: calc(52% - 5px);
	color: var(--text);
	background: var(--thinColor2);
}

.realtimeMode .tournamentInfo .endTimeInfo .limitTimeMessage {
	padding: 2px;
	font-size: var(--f7);
	color: white;
	font-weight: normal;
}

.realtimeMode .tournamentInfo .endTimeInfo p[data-countdown-sub] {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--text);
	background: transparent;
	box-shadow: none;
	font-weight: normal;
}

.realtimeMode .tournamentInfo .endTimeInfo p[data-countdown-sub] strong {
	display: block;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	font-size: var(--f4);
	color: var(--mainColor);
	line-height: 1.2;
	box-shadow: none;
}

.realtimeMode .tournamentInfo .endTimeInfo p[data-countdown-line] {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.realtimeMode .tournamentInfo .countdownInfoIcon {
	display: none;
}

.realtimeMode .tournamentInfo .countdownSubText {
	display: inline;
}

.realtimeMode .tournamentInfo [data-countdown-value] {
	font-family: inherit;
	font-size: inherit;
	text-shadow: none;
}

@keyframes countdownUrgentPulse {

	0%,
	100% {
		box-shadow: 0 14px 28px rgba(8, 32, 54, 0.2);
	}

	50% {
		box-shadow: 0 18px 34px rgba(214, 32, 49, 0.34);
	}
}

.confirmBtn {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.confirmBtn .btn {
	display: flex;
	flex: 1 1 0;
	aspect-ratio: 1/1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px;
	font-size: var(--f7);
	font-weight: bold;
	line-height: 1.25;
	text-align: center;
	white-space: normal;
}

.confirmBtn .confirmBtnIcon {
	display: block;
	font-size: clamp(3.5rem, 16vw, 6rem);
	line-height: 0.85;
	font-weight: bold;
}

.catchConfirmCard {
	margin: 12px 0 16px;
	background-color: var(--mainColor);
}

.catchConfirmBtn {
	justify-content: center;
	margin: 16px 8px 0;
}

.catchConfirmBtn .btn {
	flex: 0 1 calc(50% - 10px);
	max-width: 180px;
}

.catchConfirmBtn .confirmBtnIcon {
	font-size: clamp(3rem, 12vw, 5rem);
}

.realtimeVerifyForm {
	display: grid;
	gap: 12px;
}

.realtimeVerifyField {
	padding: 12px;
	border: 2px solid var(--mainColor);
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 6px 14px rgba(14, 41, 30, 0.1);
}

.realtimeVerifyField label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	color: var(--mainColor);
	font-size: var(--f6);
	font-weight: bold;
	line-height: 1.2;
}

.realtimeVerifyField label .material-symbols-rounded {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 12px;
	color: white;
	font-size: 2.6rem;
	background-color: var(--mainColor);
}

.realtimeVerifyHelp {
	margin: -2px 0 8px;
	font-size: var(--f8);
	font-weight: bold;
	color: var(--deepColor);
}

.realtimeVerifyImageField {
	background-color: var(--thinColor2);
}

.bigFishImageGuide {
	margin: 8px 0 12px;
	padding: 8px;
	border: 2px solid white;
	border-radius: 8px;
	background-color: white;
	text-align: center;
}

.bigFishImageGuide img {
	width: 100%;
	border-radius: 6px;
}

.bigFishImageGuide figcaption {
	margin-top: 8px;
	color: var(--text);
	font-size: var(--f7);
	font-weight: bold;
	line-height: 1.35;
}

.submitCatchBtn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 12px 28px;
}

.submitCatchBtn .submitCatchBtnIcon {
	font-family: 'Material Symbols Outlined';
	font-size: 3.6rem;
	line-height: 1;
	font-weight: normal;
}

.guide .flexInner {
	padding: 4px;
}

.guide p {
	margin: 0 4px;
	font-size: var(--f7);
	line-height: 1.3;
}

.guide p img {
	margin-bottom: 5px;
}

.guide ul {}

.guide ul li {
	padding-left: 15px;
	margin-bottom: 3px;
	text-indent: -15px;
	font-size: var(--f7);
	line-height: 1.3;
}

.guide ul li::before {
	display: inline-block;
	width: 15px;
	left: 0;
	content: '●';
	font-size: 8px;
	color: var(--mainColor);
	text-indent: 4px;
}

.guide .flexInner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
}

.operationMenuPanel {
	padding: 14px;
	border: 3px solid var(--mainColor) !important;
	border-radius: 12px;
	background:
		linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(253, 216, 142, 0.35));
	box-shadow: 0 12px 26px rgba(14, 41, 30, 0.14);
}

.guide .operationMenuTitle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 14px !important;
	padding: 10px !important;
	border-radius: 10px;
	color: white;
	font-family: var(--oswald);
	font-size: var(--f4) !important;
	font-weight: bold;
	line-height: 1;
	background-color: var(--mainColor);
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12);
}

.operationMenuTitle .material-symbols-rounded {
	font-size: 3.2rem;
}

.guide .flexInner .keepItem,
.guide .flexInner .operationItem {
	width: calc(50% - 5px);
}

.guide .flexInner .operationItem.is-disabled {
	position: relative;
	pointer-events: none;
}

.guide .flexInner .operationItem.is-disabled::before {
	content: 'Disabled';
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	padding: 4px 8px;
	font-family: var(--oswald);
	font-size: var(--f6);
	font-weight: bold;
	line-height: 1;
	background-color: rgba(0, 0, 0, 0.65);
	color: white;
}

.guide .flexInner .operationItem.is-disabled img {
	opacity: 0.6;
}

.guide.results .flexInner {
	padding-left: 0 !important;
}

.guide.results .flexInner dt {
	width: 30%;
}

.guide.results .flexInner dt::before {
	content: '' !important;
}

.guide.results .flexInner dd {
	width: 70%;
}

.circleImg {
	width: 100%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	border: 5px solid var(--mainColor);
	box-shadow: 3px 3px 4px rgba(14, 41, 30, 0.64);
	overflow: hidden;
	transition: 0.6s box-shadow ease, 0.6s border-color ease;
}

.circleImg:hover {
	box-shadow: 0 0 0px rgba(255, 255, 255, 0.9);
	border: 5px solid var(--deepColor);
}

.operationItem a .circleImg img {
	transition: transform 0.6s ease;
}

.operationItem a:hover .circleImg img,
.operationItem a:focus .circleImg img {
	transform: scale(1.2);
}

#realtimeMode .results {
	width: 100%;
}

.realtimeMode .results th,
.realtimeMode .results td {
	padding: 8px;
	border: 1px solid var(--mainColor);
}

.realtimeMode .results th {
	width: 30%;
	font-weight: bold;
	background-color: var(--thinColor);
}

.realtimeMode .results td.oswald {
	font-size: var(--f5);
	font-weight: bold;
	line-height: 1.1;
}

.realtimeMode .results td.oswald.official {
	background-color: var(--thinColor2);
}

.realtimeMode .results td.oswald span {
	font-size: var(--f7);
}

.realtimeTopBack {
	margin: 0 0 12px;
	text-align: center;
}

.currentResultPanel {
	padding: 14px;
	border: 3px solid var(--subColor1) !important;
	border-radius: 12px;
	background:
		linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(86, 209, 199, 0.24));
	box-shadow: 0 12px 26px rgba(14, 41, 30, 0.14);
}

.guide .currentResultTitle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 14px !important;
	padding: 10px !important;
	border-radius: 10px;
	color: white;
	font-family: var(--oswald);
	font-size: var(--f4) !important;
	font-weight: bold;
	line-height: 1;
	background-color: var(--subColor2);
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12);
}

.currentResultTitle .material-symbols-rounded {
	font-size: 3.2rem;
}

.realtimeCurrentResult .flexInner {
	display: flex;
	gap: 10px;
}

.realtimeCurrentResult .currentResultItem {
	flex: 1 1 0;
	padding: 14px 10px;
	border: 2px solid white;
	border-radius: 8px;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.88);
	box-shadow: 0 6px 14px rgba(14, 41, 30, 0.1);
}

.realtimeCurrentResult .currentResultItem p:first-child {
	font-weight: bold;
}

.realtimeCurrentResult .currentResultItem .oswald {
	font-size: var(--f3);
	font-weight: bold;
	line-height: 1;
}

.realtimeCurrentResult .currentResultItem .oswald span {
	margin-left: 2px;
	font-size: var(--f6);
}

.currentResultDetailLink {
	margin: 18px 0 6px !important;
	text-align: center;
}

.currentResultDetailLink .btn {
	padding: 10px 18px;
	font-size: var(--f7);
	font-weight: bold;
}

/******************************
RealTimeModeResultsList
******************************/
.realtimeResultsList table {
	width: 100%;
	border: 1px solid var(--mainColor);
}

.realtimeResultsList table th,
.realtimeResultsList table td {
	padding: 5px 2px;
	border: 1px solid var(--mainColor);
}

.realtimeResultsList table th {
	background-color: var(--thinColor2);
	text-align: center;
	font-weight: bold;
}

.realtimeResultsList table td {
	text-align: center;
}

.realtimeResultsList table tr.officialLimitCatch td {
	background-color: var(--thinColor2);
}

.realtimeResultsList table .weight {
	font-size: var(--f5);
	font-weight: bold;
	font-family: var(--oswald);
}

.realtimeResultsList table .witnessName {
	text-align: left;
}

.expiredCatchesList table .expiredTime {
	font-weight: bold;
	color: var(--pair);
}

.userManagePanel {
	margin-top: 28px;
}

.userManagePanel h2 {
	margin-bottom: 14px;
	color: var(--subColor2);
	font-family: var(--oswald);
	font-size: var(--f4);
	text-align: center;
}

.userManageGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}

.userManageItem {
	display: flex;
	aspect-ratio: 1 / 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 10px;
	border: 2px solid var(--subColor1);
	border-radius: 8px;
	color: var(--text);
	text-align: center;
	background:
		linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(86, 209, 199, 0.28));
	box-shadow: 0 8px 18px rgba(14, 41, 30, 0.12);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.userManageItem:hover {
	color: var(--text);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(14, 41, 30, 0.18);
}

.userManageIcon {
	display: grid;
	width: 54px;
	height: 54px;
	place-items: center;
	border-radius: 18px;
	color: white;
	font-size: 3.2rem;
	background-color: var(--subColor2);
}

.userManageTitle {
	font-size: var(--f7);
	font-weight: bold;
	line-height: 1.25;
}

.userManageText {
	font-size: var(--f8);
	line-height: 1.25;
}

.userManageItem.is-disabled {
	opacity: 0.56;
	filter: grayscale(0.45);
}

.userManageItemAlert {
	border-color: var(--pair);
	background:
		linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(238, 189, 180, 0.55));
}

.userManageItemAlert .userManageIcon {
	background-color: var(--pair);
}

@media (min-width: 768px) {
	.userManageGrid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/****************************
釣果投稿画面
*****************************/
.realtimeOperationNav {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	align-items: stretch;
	gap: 8px;
	margin: 0 0 14px;
	padding: 8px;
	border: 2px solid var(--mainColor);
	border-radius: 8px;
	background-color: white;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
}

.realtimeOperationNavConfirm {
	grid-template-columns: 1fr 1fr 2fr;
}

.realtimeOperationNavTop {
	grid-template-columns: 1fr 2fr 1fr;
}

.realtimeOperationNavItem,
.realtimeOperationNavCurrent {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid var(--mainColor);
	border-radius: 6px;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
}

.realtimeOperationNavIcon {
	display: block;
	margin-bottom: 4px;
	font-size: 28px;
	line-height: 1;
}

.realtimeOperationNavItem {
	color: var(--mainColor);
	background-color: var(--thinColor2);
	font-size: 1.4rem;
	font-weight: normal;
}

.realtimeOperationNavItem:hover,
.realtimeOperationNavItem:focus {
	color: white;
	background-color: var(--mainColor);
	text-decoration: none;
}

.realtimeOperationNavItem.is-disabled,
.realtimeOperationNavCurrent.is-disabled {
	opacity: 0.42;
	filter: grayscale(0.85);
	pointer-events: none;
}

.realtimeOperationNavItem.is-disabled {
	color: #666;
	background-color: #e9e9e9;
	border-color: #aaa;
}

.realtimeOperationNavCurrent {
	color: white;
	background-color: var(--mainColor);
	font-size: 1.8rem;
	font-weight: bold;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.36);
}

.realtimeOperationNavCurrent span {
	display: block;
}

.realtimeOperationNavHome::before,
.realtimeOperationNavHome::after {
	position: absolute;
	top: 50%;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: white;
	background-color: var(--mainColor);
	font-size: 16px;
	font-weight: bold;
	line-height: 24px;
	text-align: center;
	transform: translateY(-50%);
}

.realtimeOperationNavHome::before {
	content: "◀";
	left: -12px;
}

.realtimeOperationNavHome::after {
	content: "▶";
	right: -12px;
}

.operations p {
	line-height: 1.6;
	margin-bottom: 10px;
}

.operations select {
	font-size: var(--f6);
}

.operations select option {
	font-size: var(--f6);
}

.operations input#weight {
	width: 100%;
	font-size: var(--f4);
	padding: 5px;
}