#new-year-video-container
{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	z-index: 10001;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
	pointer-events: none;
	width: 100%;
	max-width: 95vw;
	max-height: 95vh;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#new-year-video-container.visible
{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

#new-year-video-container.hidden
{
	display: none;
}

#video-frame
{
	position: relative;
	padding: 30px 20px 20px 20px;
	background: linear-gradient( 135deg, rgba( 139, 69, 19, 0.9 ) 0%, rgba( 101, 50, 10, 0.9 ) 100% );
	border-radius: 15px;
	box-shadow: 0 0 30px rgba( 0, 0, 0, 0.8 ), inset 0 0 20px rgba( 0, 0, 0, 0.3 );
	max-width: 100%;
	max-height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

@media ( min-width: 768px )
{
	#video-frame
	{
		padding: 60px 40px 40px 40px;
		border-radius: 20px;
		max-width: calc( 95vw - 20px );
		max-height: calc( 95vh - 20px );
	}
}

#video-frame::before
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 30px;
	background: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><path d="M0,30 Q25,10 50,30 T100,30" stroke="%23ffffff" stroke-width="2" fill="none" opacity="0.3"/><circle cx="20" cy="25" r="3" fill="%23ff0000"/><circle cx="40" cy="20" r="2.5" fill="%23ffff00"/><circle cx="60" cy="25" r="3" fill="%2300ff00"/><circle cx="80" cy="20" r="2.5" fill="%23ff00ff"/></svg>' ) repeat-x;
	background-size: 100px 30px;
	border-radius: 15px 15px 0 0;
}

@media ( min-width: 768px )
{
	#video-frame::before
	{
		height: 60px;
		background-size: 100px 60px;
		border-radius: 20px 20px 0 0;
	}
}

#video-frame::after
{
	content: '\1F384 \1F381 \1F380 \1F384';
	position: absolute;
	top: 5px;
	left: 50%;
	transform: translateX( -50% );
	font-size: 16px;
	text-shadow: 0 0 10px rgba( 255, 255, 255, 0.8 ), 0 0 20px rgba( 255, 255, 255, 0.5 );
	z-index: 1;
}

@media ( min-width: 768px )
{
	#video-frame::after
	{
		top: 10px;
		font-size: 24px;
	}
}

.frame-decoration-left,
.frame-decoration-right
{
	position: absolute;
	top: 30px;
	width: 25px;
	height: calc( 100% - 30px );
	background: linear-gradient( 90deg, rgba( 34, 139, 34, 0.9 ) 0%, rgba( 0, 100, 0, 0.7 ) 50%, rgba( 34, 139, 34, 0.9 ) 100% );
	background-image:
		repeating-linear-gradient( 45deg, transparent, transparent 8px, rgba( 255, 255, 255, 0.15 ) 8px, rgba( 255, 255, 255, 0.15 ) 9px ),
		repeating-linear-gradient( -45deg, transparent, transparent 8px, rgba( 255, 255, 255, 0.1 ) 8px, rgba( 255, 255, 255, 0.1 ) 9px );
	box-shadow: inset 0 0 20px rgba( 0, 0, 0, 0.3 );
}

@media ( min-width: 768px )
{
	.frame-decoration-left,
	.frame-decoration-right
	{
		top: 60px;
		width: 50px;
		height: calc( 100% - 60px );
		background-image:
			repeating-linear-gradient( 45deg, transparent, transparent 15px, rgba( 255, 255, 255, 0.15 ) 15px, rgba( 255, 255, 255, 0.15 ) 16px ),
			repeating-linear-gradient( -45deg, transparent, transparent 15px, rgba( 255, 255, 255, 0.1 ) 15px, rgba( 255, 255, 255, 0.1 ) 16px );
	}
}

.frame-decoration-left
{
	left: 0;
	border-radius: 0 0 0 20px;
}

.frame-decoration-right
{
	right: 0;
	border-radius: 0 0 20px 0;
}

.frame-decoration-left::before,
.frame-decoration-right::before
{
	content: '\1F332 \1F332';
	position: absolute;
	top: 15px;
	font-size: 16px;
	text-shadow: 0 0 10px rgba( 255, 255, 255, 0.8 ), 0 0 20px rgba( 255, 255, 255, 0.4 );
	line-height: 1.2;
	letter-spacing: 2px;
}

@media ( min-width: 768px )
{
	.frame-decoration-left::before,
	.frame-decoration-right::before
	{
		top: 30px;
		font-size: 28px;
		letter-spacing: 5px;
	}
}

.frame-decoration-left::before
{
	left: 5px;
}

.frame-decoration-right::before
{
	right: 5px;
}

.frame-decoration-left::after,
.frame-decoration-right::after
{
	content: '\2744 \2744 \2744';
	position: absolute;
	top: 50px;
	font-size: 12px;
	opacity: 0.9;
	text-shadow: 0 0 8px rgba( 255, 255, 255, 1 ), 0 0 15px rgba( 255, 255, 255, 0.6 );
	line-height: 1.5;
	letter-spacing: 2px;
}

@media ( min-width: 768px )
{
	.frame-decoration-left::after,
	.frame-decoration-right::after
	{
		top: 100px;
		font-size: 18px;
		letter-spacing: 3px;
	}
}

.frame-decoration-left::after
{
	left: 8px;
}

.frame-decoration-right::after
{
	right: 8px;
}

.frame-ornament
{
	position: absolute;
	font-size: 14px;
	text-shadow: 0 0 12px rgba( 255, 255, 255, 1 ), 0 0 20px rgba( 255, 255, 255, 0.6 );
	z-index: 2;
	animation: twinkle 2s ease-in-out infinite;
}

@media ( min-width: 768px )
{
	.frame-ornament
	{
		font-size: 24px;
	}
}

.frame-ornament::before
{
	content: '';
	display: block;
}

.ornament-gift::before
{
	content: '\1F381';
}

.ornament-bow::before
{
	content: '\1F380';
}

.ornament-bell::before
{
	content: '\1F514';
}

.ornament-star::before
{
	content: '\2B50';
}

.ornament-tree::before
{
	content: '\1F384';
}

.ornament-santa::before
{
	content: '\1F385';
}

.ornament-deer::before
{
	content: '\1F98C';
}

.ornament-confetti::before
{
	content: '\1F38A';
}

.ornament-party::before
{
	content: '\1F389';
}

.ornament-candle::before
{
	content: '\1F56F \FE0F';
}

.ornament-cookie::before
{
	content: '\1F36A';
}

.ornament-sock::before
{
	content: '\1F9E6';
}

.ornament-balloon::before
{
	content: '\1F388';
}

@keyframes twinkle
{
	0%, 100%
	{
		opacity: 1;
		transform: scale( 1 );
	}
	50%
	{
		opacity: 0.7;
		transform: scale( 1.1 );
	}
}

.ornament-top-left
{
	top: 15px;
	left: 25px;
	animation-delay: 0s;
}

.ornament-top-right
{
	top: 15px;
	right: 25px;
	animation-delay: 0.5s;
}

.ornament-left-1
{
	top: 120px;
	left: 12px;
	animation-delay: 1s;
}

.ornament-left-2
{
	top: 250px;
	left: 18px;
	animation-delay: 1.5s;
}

.ornament-left-3
{
	top: 400px;
	left: 15px;
	animation-delay: 2s;
}

.ornament-left-4
{
	top: 550px;
	left: 12px;
	animation-delay: 2.5s;
}

.ornament-left-5
{
	top: 700px;
	left: 18px;
	animation-delay: 3s;
}

.ornament-left-6
{
	top: 850px;
	left: 15px;
	animation-delay: 3.5s;
}

.ornament-left-7
{
	top: 1000px;
	left: 12px;
	animation-delay: 4s;
}

.ornament-left-8
{
	top: 1150px;
	left: 18px;
	animation-delay: 4.5s;
}

.ornament-right-1
{
	top: 120px;
	right: 12px;
	animation-delay: 0.3s;
}

.ornament-right-2
{
	top: 250px;
	right: 18px;
	animation-delay: 0.8s;
}

.ornament-right-3
{
	top: 400px;
	right: 15px;
	animation-delay: 1.3s;
}

.ornament-right-4
{
	top: 550px;
	right: 12px;
	animation-delay: 1.8s;
}

.ornament-right-5
{
	top: 700px;
	right: 18px;
	animation-delay: 2.3s;
}

.ornament-right-6
{
	top: 850px;
	right: 15px;
	animation-delay: 2.8s;
}

.ornament-right-7
{
	top: 1000px;
	right: 12px;
	animation-delay: 3.3s;
}

.ornament-right-8
{
	top: 1150px;
	right: 18px;
	animation-delay: 3.8s;
}

.ornament-top-1
{
	top: 15px;
	left: 80px;
	animation-delay: 0.1s;
}

.ornament-top-2
{
	top: 15px;
	left: 150px;
	animation-delay: 0.2s;
}

.ornament-top-3
{
	top: 15px;
	left: 220px;
	animation-delay: 0.3s;
}

.ornament-top-4
{
	top: 15px;
	left: 290px;
	animation-delay: 0.4s;
}

.ornament-top-5
{
	top: 15px;
	left: 360px;
	animation-delay: 0.5s;
}

.ornament-top-6
{
	top: 15px;
	left: 430px;
	animation-delay: 0.6s;
}

.ornament-top-7
{
	top: 15px;
	left: 500px;
	animation-delay: 0.7s;
}

.ornament-top-8
{
	top: 15px;
	left: 570px;
	animation-delay: 0.8s;
}

.ornament-top-9
{
	top: 15px;
	left: 640px;
	animation-delay: 0.9s;
}

.ornament-top-10
{
	top: 15px;
	right: 80px;
	animation-delay: 1s;
}

.ornament-top-11
{
	top: 15px;
	right: 150px;
	animation-delay: 1.1s;
}

.ornament-top-12
{
	top: 15px;
	right: 220px;
	animation-delay: 1.2s;
}

.ornament-top-13
{
	top: 15px;
	right: 290px;
	animation-delay: 1.3s;
}

.ornament-top-14
{
	top: 15px;
	right: 360px;
	animation-delay: 1.4s;
}

.ornament-top-15
{
	top: 15px;
	right: 430px;
	animation-delay: 1.5s;
}

.ornament-top-16
{
	top: 15px;
	right: 500px;
	animation-delay: 1.6s;
}

/* Мобильные стили для позиций игрушек */
@media ( max-width: 767px )
{
	.ornament-top-left
	{
		top: 8px;
		left: 15px;
	}

	.ornament-top-right
	{
		top: 8px;
		right: 15px;
	}

	.ornament-top-1,
	.ornament-top-2,
	.ornament-top-3,
	.ornament-top-4,
	.ornament-top-5,
	.ornament-top-6,
	.ornament-top-7,
	.ornament-top-8,
	.ornament-top-9,
	.ornament-top-10,
	.ornament-top-11,
	.ornament-top-12,
	.ornament-top-13,
	.ornament-top-14,
	.ornament-top-15,
	.ornament-top-16
	{
		top: 8px;
	}

	.ornament-top-1 { left: 10%; }
	.ornament-top-2 { left: 20%; }
	.ornament-top-3 { left: 30%; }
	.ornament-top-4 { left: 40%; }
	.ornament-top-5 { left: 50%; }
	.ornament-top-6 { left: 60%; }
	.ornament-top-7 { left: 70%; }
	.ornament-top-8 { left: 80%; }
	.ornament-top-9 { left: 90%; }
	.ornament-top-10 { right: 10%; }
	.ornament-top-11 { right: 20%; }
	.ornament-top-12 { right: 30%; }
	.ornament-top-13 { right: 40%; }
	.ornament-top-14 { right: 50%; }
	.ornament-top-15 { right: 60%; }
	.ornament-top-16 { right: 70%; }

	.ornament-left-1 { top: 15%; left: 8px; }
	.ornament-left-2 { top: 25%; left: 10px; }
	.ornament-left-3 { top: 35%; left: 8px; }
	.ornament-left-4 { top: 45%; left: 10px; }
	.ornament-left-5 { top: 55%; left: 8px; }
	.ornament-left-6 { top: 65%; left: 10px; }
	.ornament-left-7 { top: 75%; left: 8px; }
	.ornament-left-8 { top: 85%; left: 10px; }

	.ornament-right-1 { top: 15%; right: 8px; }
	.ornament-right-2 { top: 25%; right: 10px; }
	.ornament-right-3 { top: 35%; right: 8px; }
	.ornament-right-4 { top: 45%; right: 10px; }
	.ornament-right-5 { top: 55%; right: 8px; }
	.ornament-right-6 { top: 65%; right: 10px; }
	.ornament-right-7 { top: 75%; right: 8px; }
	.ornament-right-8 { top: 85%; right: 10px; }
}

#new-year-video-overlay
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba( 0, 0, 0, 0.8 );
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
	overflow: hidden;
}

#new-year-video-overlay.visible
{
	opacity: 1;
	visibility: visible;
}

#snow-container
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

#snow-container.visible
{
	opacity: 1;
	visibility: visible;
}

.snowflake
{
	position: absolute;
	color: #fff;
	font-size: 1em;
	font-family: Arial, sans-serif;
	text-shadow:
		0 0 15px rgba( 255, 255, 255, 1 ),
		0 0 25px rgba( 255, 255, 255, 1 ),
		0 0 35px rgba( 255, 255, 255, 0.9 ),
		0 0 45px rgba( 255, 255, 255, 0.8 ),
		0 0 55px rgba( 255, 255, 255, 0.7 );
	user-select: none;
	pointer-events: none;
	animation: snowfall linear infinite;
	filter: brightness( 2.5 ) drop-shadow( 0 0 10px rgba( 255, 255, 255, 0.8 ) );
}

@keyframes snowfall
{
	0%
	{
		transform: translateY( -100px ) translateX( 0 ) rotate( 0deg );
		opacity: 0;
	}
	3%
	{
		opacity: 1;
	}
	97%
	{
		opacity: 1;
	}
	100%
	{
		transform: translateY( calc( 100vh + 100px ) ) translateX( var( --drift ) ) rotate( 360deg );
		opacity: 0;
	}
}

#new-year-video
{
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: calc( 95vh - 50px );
	object-fit: contain;
	display: block;
}

@media ( min-width: 768px )
{
	#new-year-video
	{
		width: 720px;
		height: auto;
		max-width: calc( 95vw - 160px );
		max-height: calc( 95vh - 200px );
		aspect-ratio: 720 / 1280;
		object-fit: contain;
	}
}

#new-year-greeting
{
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate( -50%, -50% );
	z-index: 10001;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	text-shadow:
		0 0 20px rgba( 255, 255, 255, 1 ),
		0 0 40px rgba( 255, 255, 255, 0.8 ),
		0 0 60px rgba( 255, 255, 255, 0.6 ),
		0 0 80px rgba( 255, 215, 0, 0.8 ),
		0 0 100px rgba( 255, 215, 0, 0.6 );
	max-width: 85%;
	width: 85%;
	line-height: 1.3;
	transition: opacity 1s ease-in-out, visibility 1s ease-in-out, transform 1s ease-in-out;
	padding: 0 10px;
	box-sizing: border-box;
}

@media ( min-width: 768px )
{
	#new-year-greeting
	{
		font-size: 48px;
		max-width: 60%;
		width: 60%;
		padding: 0;
	}
}

@media ( min-width: 768px )
{
	#new-year-greeting
	{
		max-width: 60%;
		width: 60%;
	}
}

#new-year-trigger-btn
{
	position: fixed;
	bottom: 10px;
	left: 20px;
	width: 60px;
	height: 60px;
	background-color: #228B22;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 4px 15px rgba( 0, 0, 0, 0.3 ), 0 0 20px rgba( 34, 139, 34, 0.6 );
	cursor: pointer;
	z-index: 9998;
	display: block;
	font-size: 32px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-indent: 0;
	overflow: visible;
}

#new-year-trigger-btn::before
{
	content: '\1F384';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	font-size: 32px;
	line-height: 1;
	z-index: 1;
}

#new-year-trigger-btn::after
{
	content: '';
}

@media ( min-width: 768px )
{
	#new-year-trigger-btn
	{
		bottom: 30px;
		left: 30px;
	}
}

#new-year-trigger-btn:hover
{
	transform: scale( 1.1 );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.4 ), 0 0 30px rgba( 34, 139, 34, 0.8 );
}

#new-year-trigger-btn:active
{
	transform: scale( 0.95 );
}

#new-year-greeting.visible
{
	opacity: 1;
	visibility: visible;
	transform: translate( -50%, -50% ) scale( 1 );
	animation: greetingPulse 2s ease-in-out infinite;
}

#new-year-greeting.hidden
{
	opacity: 0;
	visibility: hidden;
	transform: translate( -50%, -50% ) scale( 0.8 );
}

@keyframes greetingPulse
{
	0%, 100%
	{
		transform: translate( -50%, -50% ) scale( 1 );
		text-shadow:
			0 0 20px rgba( 255, 255, 255, 1 ),
			0 0 40px rgba( 255, 255, 255, 0.8 ),
			0 0 60px rgba( 255, 255, 255, 0.6 ),
			0 0 80px rgba( 255, 215, 0, 0.8 ),
			0 0 100px rgba( 255, 215, 0, 0.6 );
	}
	50%
	{
		transform: translate( -50%, -50% ) scale( 1.05 );
		text-shadow:
			0 0 30px rgba( 255, 255, 255, 1 ),
			0 0 50px rgba( 255, 255, 255, 0.9 ),
			0 0 70px rgba( 255, 255, 255, 0.7 ),
			0 0 90px rgba( 255, 215, 0, 1 ),
			0 0 110px rgba( 255, 215, 0, 0.8 );
	}
}