@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Permanent+Marker&family=Sedgwick+Ave+Display&display=swap');

@media (min-width: 768px) {
	.mobile-v2-shell {
		display: none !important;
	}
}

@media (max-width: 767.98px) {
	body {
		padding-bottom: 104px;
	}

	#wrapper {
		padding-bottom: 16px;
	}

	#wrapper > div[th\:insert],
	#wrapper > div[th\:unless],
	#wrapper > div[th\:if] {
		max-width: 100%;
	}

	.day-bar,
	.mode-bar-container,
	#navbar2,
	#navbar3,
	.sub-bar {
		display: none !important;
	}

	.mobile-v2-shell {
		--mobile-v2-bg: rgba(7, 12, 26, 0.88);
		--mobile-v2-card: rgba(15, 23, 42, 0.96);
		--mobile-v2-line: rgba(255, 255, 255, 0.1);
		--mobile-v2-text: rgba(255, 255, 255, 0.9);
		--mobile-v2-muted: rgba(255, 255, 255, 0.56);
		--mobile-v2-accent: #ff2d86;
		--mobile-v2-accent-2: #a855f7;
	}

	.mobile-v2-shell [hidden] {
		display: none !important;
	}

	.mobile-v2-sticky-zone {
		position: sticky;
		top: 0;
		z-index: 20;
		padding: 12px 12px 8px;
	}

	.mobile-v2-match-toggle,
	.mobile-v2-trend-pills,
	.mobile-v2-day-strip {
		display: flex;
		align-items: center;
		gap: 10px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.mobile-v2-match-toggle {
		justify-content: center;
		width: max-content;
		max-width: calc(100vw - 24px);
		margin: 0 auto;
		padding: 3px;
		border: 0;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.045);
		box-shadow: none;
	}

	.mobile-v2-trend-pills,
	.mobile-v2-day-strip {
		justify-content: flex-start;
	}

	.mobile-v2-day-strip,
	.mobile-v2-trend-strip {
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: calc(90px + env(safe-area-inset-bottom));
		z-index: 1049;
		padding: 8px;
		border: 0;
		border-radius: 26px;
		background: rgba(13, 18, 35, 0.78);
		-webkit-backdrop-filter: blur(18px);
		backdrop-filter: blur(18px);
		box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045);
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 4px;
		overflow: hidden;
		opacity: 0;
		transform: translateY(14px) scale(0.98);
		transform-origin: bottom center;
		pointer-events: none;
		transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
		will-change: opacity, transform;
	}

	.mobile-v2-day-strip.is-open,
	.mobile-v2-trend-strip.is-open {
		opacity: 1;
		transform: translateY(0) scale(1);
		pointer-events: auto;
	}

	.mobile-v2-match-toggle::-webkit-scrollbar,
	.mobile-v2-trend-pills::-webkit-scrollbar,
	.mobile-v2-day-strip::-webkit-scrollbar {
		display: none;
	}

	.mobile-v2-pill {
		min-height: 40px;
		padding: 0 16px;
		border: 1px solid transparent;
		border-radius: 999px;
		background: transparent;
		color: var(--mobile-v2-muted) !important;
		font-weight: 800;
		font-size: 0.86rem;
		letter-spacing: 0.01em;
		text-decoration: none !important;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		white-space: nowrap;
		box-shadow: none;
	}

	.mobile-v2-pill.active,
	.mobile-v2-pill:hover,
	.mobile-v2-pill:focus {
		color: #fff !important;
		border-color: rgba(255, 45, 134, 0.72);
		background: rgba(255, 45, 134, 0.11);
		box-shadow: 0 0 0 1px rgba(255, 45, 134, 0.16), 0 10px 28px rgba(255, 45, 134, 0.12);
	}

	.mobile-v2-match-toggle .mobile-v2-pill {
		min-height: 34px;
		padding: 0 13px;
		border: 0;
		border-radius: 999px;
		font-size: 0.78rem;
		gap: 7px;
		background: transparent;
		box-shadow: none;
	}

	.mobile-v2-match-toggle .mobile-v2-pill i {
		font-size: 0.9rem;
	}

	.mobile-v2-match-toggle .mobile-v2-pill.active {
		color: #fff !important;
		background: rgba(255, 45, 134, 0.18);
	}

	.mobile-v2-match-toggle .mobile-v2-pill:not(.active):hover,
	.mobile-v2-match-toggle .mobile-v2-pill:not(.active):focus {
		color: rgba(255, 255, 255, 0.78) !important;
		background: rgba(255, 255, 255, 0.045);
		outline: none;
	}

	.mobile-v2-search-panel {
		position: fixed;
		left: 10px;
		right: 10px;
		top: calc(10px + env(safe-area-inset-top));
		z-index: 1049;
		padding: 12px 14px;
		border-radius: 18px;
		background: linear-gradient(180deg, rgba(16, 24, 43, 0.96), rgba(9, 14, 28, 0.96));
		-webkit-backdrop-filter: blur(18px);
		backdrop-filter: blur(18px);
		border: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
		opacity: 0;
		transform: translateY(-14px) scale(0.98);
		transform-origin: top center;
		pointer-events: none;
		transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
		will-change: opacity, transform;
	}

	.mobile-v2-search-panel.is-open {
		opacity: 1;
		transform: translateY(0) scale(1);
		pointer-events: auto;
	}

	.mobile-v2-search-label {
		display: block;
		margin: 0 0 6px;
		color: var(--mobile-v2-muted);
		font-size: 0.72rem;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	.mobile-v2-search-input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
	}

	.mobile-v2-search-input {
		width: 100%;
		height: 44px;
		padding: 0 44px 0 14px;
		border-radius: 16px;
		border: 1px solid var(--mobile-v2-line);
		background: var(--mobile-v2-card);
		color: var(--mobile-v2-text);
		outline: none;
	}

	.mobile-v2-search-clear {
		position: absolute;
		right: 8px;
		top: 50%;
		transform: translateY(-50%);
		width: 32px;
		height: 32px;
		border: none;
		background: rgba(255, 255, 255, 0.08);
		border-radius: 50%;
		color: var(--mobile-v2-muted);
		font-size: 0.9rem;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 160ms ease, color 160ms ease;
	}

	.mobile-v2-search-clear:hover,
	.mobile-v2-search-clear:focus {
		background: rgba(255, 45, 134, 0.18);
		color: #fff;
		outline: none;
	}

	.mobile-v2-search-input::placeholder {
		color: var(--mobile-v2-muted);
	}

	.mobile-v2-search-input:focus {
		border-color: rgba(255, 45, 134, 0.68);
		box-shadow: 0 0 0 3px rgba(255, 45, 134, 0.16);
	}

	.mobile-v2-login-panel {
		position: fixed;
		left: 16px;
		right: 16px;
		top: calc(10px + env(safe-area-inset-top));
		z-index: 1049;
		padding: 16px;
		border-radius: 26px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		background: linear-gradient(180deg, rgba(16, 24, 43, 0.97), rgba(9, 14, 28, 0.97));
		-webkit-backdrop-filter: blur(18px);
		backdrop-filter: blur(18px);
		box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
		opacity: 0;
		transform: translateY(-14px) scale(0.98);
		transform-origin: top center;
		pointer-events: none;
		transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
		will-change: opacity, transform;
	}

	.mobile-v2-login-panel.is-open {
		opacity: 1;
		transform: translateY(0) scale(1);
		pointer-events: auto;
	}

	.mobile-v2-login-head {
		margin: 0 0 12px;
		color: var(--mobile-v2-muted);
		font-size: 0.72rem;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	.mobile-v2-login-form {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.mobile-v2-login-field {
		display: flex;
		flex-direction: column;
		gap: 5px;
		margin: 0;
	}

	.mobile-v2-login-label {
		color: var(--mobile-v2-muted);
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.02em;
	}

	.mobile-v2-login-input {
		width: 100%;
		height: 44px;
		padding: 0 14px;
		border-radius: 14px;
		border: 1px solid var(--mobile-v2-line);
		background: var(--mobile-v2-card);
		color: var(--mobile-v2-text);
		font-size: 0.92rem;
		outline: none;
	}

	.mobile-v2-login-input::placeholder {
		color: var(--mobile-v2-muted);
	}

	.mobile-v2-login-input:focus {
		border-color: rgba(255, 45, 134, 0.68);
		box-shadow: 0 0 0 3px rgba(255, 45, 134, 0.16);
	}

	.mobile-v2-login-submit {
		margin-top: 4px;
		min-height: 46px;
		border: 0;
		border-radius: 14px;
		background: linear-gradient(180deg, #ff4ba1 0%, #ff2d86 100%);
		color: #fff;
		font-weight: 800;
		font-size: 0.95rem;
		letter-spacing: 0.01em;
		cursor: pointer;
		transition: transform 160ms ease;
	}

	.mobile-v2-login-submit:hover,
	.mobile-v2-login-submit:focus {
		transform: translateY(-1px);
		outline: none;
	}

	.mobile-v2-login-submit:active {
		transform: translateY(0);
	}

	.mobile-v2-login-switch {
		margin-top: 12px;
		text-align: center;
		color: var(--mobile-v2-muted);
		font-size: 0.82rem;
	}

	.mobile-v2-login-switch a {
		color: var(--mobile-v2-accent);
		font-weight: 800;
		text-decoration: none;
	}

	.mobile-v2-login-switch a:hover,
	.mobile-v2-login-switch a:focus {
		text-decoration: underline;
	}

	.mobile-v2-day-option {
		min-width: 0;
		min-height: 56px;
		padding: 7px 4px;
		border-radius: 18px;
		border: 1px solid transparent;
		background: transparent;
		color: var(--mobile-v2-muted) !important;
		text-decoration: none !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		line-height: 1.05;
		overflow: hidden;
		transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
	}

	.mobile-v2-day-option:hover,
	.mobile-v2-day-option:focus {
		background: rgba(255, 255, 255, 0.045);
		outline: none;
	}

	.mobile-v2-day-option span {
		font-family: "Bangers", "Permanent Marker", "Sedgwick Ave Display", cursive;
		font-size: 1.42rem;
		font-weight: 400;
		letter-spacing: 0.02em;
		color: var(--mobile-v2-text);
		transform: rotate(-1deg);
	}

	.mobile-v2-day-option small {
		margin-top: 3px;
		max-width: 100%;
		font-size: 0.58rem;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: -0.02em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mobile-v2-day-option.active {
		border-color: rgba(255, 45, 134, 0.72);
		background: linear-gradient(180deg, rgba(255, 45, 134, 0.2), rgba(255, 45, 134, 0.08));
		transform: translateY(-1px);
	}

	.mobile-v2-day-option.active span,
	.mobile-v2-day-option.active small {
		color: #fff;
	}

	@media (prefers-reduced-motion: reduce) {
		.mobile-v2-day-strip,
		.mobile-v2-trend-strip,
		.mobile-v2-login-panel,
		.mobile-v2-day-option {
			transition: none;
		}
	}

	.mobile-v2-bottom-nav {
		position: fixed;
		left: 10px;
		right: 10px;
		bottom: calc(20px + env(safe-area-inset-bottom));
		z-index: 1050;
		height: 60px;
		padding: 6px 8px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 28px;
		background: linear-gradient(180deg, rgba(16, 24, 43, 0.96), rgba(9, 14, 28, 0.96));
		-webkit-backdrop-filter: blur(18px);
		backdrop-filter: blur(18px);
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 2px;
	}

	.mobile-v2-nav-item {
		appearance: none;
		border: 0;
		background: transparent;
		padding: 0;
		min-width: 0;
		color: var(--mobile-v2-muted) !important;
		text-decoration: none !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		font-size: 0;
		font-weight: 800;
		line-height: 1;
	}

	.mobile-v2-nav-item i {
		font-size: 1.6rem;
	}

	.mobile-v2-trend-icon-wrap {
		position: relative;
		display: inline-flex;
		line-height: 1;
	}

	.mobile-v2-trend-badge {
		position: absolute;
		right: -0.5rem;
		bottom: -0.34rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.05rem;
		height: 1.05rem;
		border-radius: 50%;
		background: var(--mobile-v2-card);
		color: var(--mobile-v2-accent);
	}

	.mobile-v2-nav-item .mobile-v2-trend-badge i {
		font-size: 0.6rem !important;
		color: inherit;
	}

	.mobile-v2-nav-item.is-locked {
		color: var(--mobile-v2-muted) !important;
		opacity: 0.5;
		cursor: not-allowed;
		pointer-events: none;
	}

	.mobile-v2-lock-badge {
		position: absolute;
		right: -0.5rem;
		bottom: -0.34rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.05rem;
		height: 1.05rem;
		border-radius: 50%;
		background: var(--mobile-v2-card);
		color: rgba(255, 255, 255, 0.75);
	}

	.mobile-v2-nav-item .mobile-v2-lock-badge i {
		font-size: 0.55rem !important;
		color: inherit;
	}


	.mobile-v2-shell .fa-fire.fa-shake {
		animation-name: mobile-v2-fire-shake;
		animation-duration: 1.6s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: 1;
		transform-origin: center 70%;
	}

	@keyframes mobile-v2-fire-shake {
		0% { transform: rotate(0deg); }
		12% { transform: rotate(-10deg); }
		24% { transform: rotate(8deg); }
		38% { transform: rotate(-6deg); }
		52% { transform: rotate(5deg); }
		66% { transform: rotate(-3deg); }
		80% { transform: rotate(2deg); }
		100% { transform: rotate(0deg); }
	}



	.mobile-v2-nav-item svg {
		width: 1.6rem;
		height: 1.6rem;
	}

	.mobile-v2-stadium-icon {
		width: 1.6rem;
		height: 1.6rem;
	}

	.mobile-v2-nav-item.active,
	.mobile-v2-nav-item:focus-visible {
		color: var(--mobile-v2-accent) !important;
		outline: none;
	}

	.mobile-v2-nav-item[data-mobile-v2-section="search"]:not(.is-open).active,
	.mobile-v2-nav-item[data-mobile-v2-section="search"]:not(.is-open):focus-visible {
		color: var(--mobile-v2-muted) !important;
	}

	.mobile-v2-nav-item.is-open {
		color: var(--mobile-v2-accent) !important;
	}

	.mobile-v2-nav-day {
		position: relative;
		gap: 2px;
		justify-content: center;
		overflow: visible;
	}

	.mobile-v2-nav-day::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 52px;
		height: 52px;
		border-radius: 16px;
		background: linear-gradient(180deg, #ff4ba1 0%, #ff2d86 100%);
		box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
		transform: translate(-50%, -50%);
		z-index: -1;
		pointer-events: none;
	}

	.mobile-v2-nav-day strong,
	.mobile-v2-nav-day small {
		color: #070c1a;
		text-transform: uppercase;
	}

	.mobile-v2-nav-day strong {
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		z-index: 1;
		font-family: "Bangers", "Permanent Marker", "Sedgwick Ave Display", cursive;
		font-size: 1.7rem;
		font-weight: bold;
		line-height: 0.82;
		letter-spacing: 0.03em;
		text-align: center;
		transform: translateY(-16px) rotate(-2deg) skewX(-2deg);
		pointer-events: none;
	}

	.mobile-v2-nav-day small {
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		z-index: 1;
		font-size: 0.52rem;
		font-weight: 900;
		line-height: 1;
		text-align: center;
		transform: translateY(10px);
		pointer-events: none;
	}

	body.mobile-v2-search-active .match-item,
	body.mobile-v2-search-active .league-card-head {
		transition: opacity 0.16s ease;
	}

	.mobile-v2-search-hidden {
		display: none !important;
	}

	.mobile-v2-trend-strip {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.mobile-v2-trend-option {
		min-width: 0;
		min-height: 56px;
		padding: 7px 4px;
		border-radius: 18px;
		border: 1px solid transparent;
		background: transparent;
		color: var(--mobile-v2-muted) !important;
		text-decoration: none !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		line-height: 1.05;
		overflow: hidden;
		font-weight: 800;
		font-size: 0.74rem;
		letter-spacing: 0.01em;
		transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
	}

	.mobile-v2-trend-option i {
		font-size: 1.2rem;
		color: var(--mobile-v2-text);
	}

	.mobile-v2-trend-option small {
		font-size: 0.6rem;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: -0.01em;
	}

	.mobile-v2-trend-option:hover,
	.mobile-v2-trend-option:focus-visible,
	.mobile-v2-trend-option:active {
		background: rgba(255, 255, 255, 0.045);
		outline: none;
	}

	.mobile-v2-trend-option.active {
		border-color: rgba(255, 45, 134, 0.72);
		background: linear-gradient(180deg, rgba(255, 45, 134, 0.2), rgba(255, 45, 134, 0.08));
		transform: translateY(-1px);
	}

	.mobile-v2-trend-option.active,
	.mobile-v2-trend-option.active i {
		color: #fff !important;
	}

	.mobile-v2-trend-option.is-locked {
		position: relative;
		opacity: 0.45;
		cursor: not-allowed;
		pointer-events: none;
	}

	.mobile-v2-trend-option.is-locked i {
		color: var(--mobile-v2-muted);
	}

	.mobile-v2-trend-option .mobile-v2-lock-badge {
		top: 6px;
		right: 14px;
		bottom: auto;
		width: 0.9rem;
		height: 0.9rem;
		background: rgba(0, 0, 0, 0.4);
	}

	.mobile-v2-trend-option .mobile-v2-lock-badge i {
		font-size: 0.48rem !important;
		color: rgba(255, 255, 255, 0.8);
	}

}