/* custom.css */

/* lnk */

.lnk {
	text-decoration: underline;
	color: inherit;
}

.lnk:hover {
	text-decoration: none;
}

/* cookie */

.cookie {
	animation: cookieShow 1s ease forwards;
	color: rgba(255, 255, 255, 1);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	border-radius: 0;
	border: 0;
	background: rgba(36, 28, 24, 0.55);
	padding: 30px;
	box-sizing: border-box;
	opacity: 0;
	display: none;
	backdrop-filter: blur(6px);
	box-shadow: 0 0 30px #000000b2;
}

.cookie_pos {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
}

@media (min-width: 540px) {
	.cookie {
		font-size: 16px;
	}
}

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

	100% {
		opacity: 1;
	}
}

.cookie__body {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 10px 20px;
	max-width: calc(var(--container-width) + var(--margin) * 4);
	margin: 0 auto;
	padding-right: calc(var(--margin) * 2);
	padding-left: calc(var(--margin) * 2);
	box-sizing: border-box;
}

@media (min-width: 720px) {
	.cookie__body {
		flex-direction: row;
	}
}

.cookie__content {
	flex-grow: 1;
	min-width: 0;
}

.cookie__btns {
	display: flex;
	justify-content: center;
	align-items: center;
}
.streamers-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
	gap:28px;
}
.stream-time{
	display:flex;
	align-items:center;
	gap:10px;
	margin-top:6px;
	font-size:13px;
	font-weight:800;
}

.live-dot{
	width:10px;
	height:10px;
	background:#ff2d55;
	border-radius:50%;
	box-shadow:0 0 12px rgba(255,45,85,.9);
	animation:pulseDot 1.2s infinite;
}

@keyframes pulseDot{
	0%{ box-shadow:0 0 0 0 rgba(255,45,85,.8); }
	70%{ box-shadow:0 0 0 10px rgba(255,45,85,0); }
	100%{ box-shadow:0 0 0 0 rgba(255,45,85,0); }
}

.live-label{
	color:#ff4b6e;
	letter-spacing:.1em;
	text-shadow:0 0 12px rgba(255,70,120,.8);
}

.live-timer{
	color:#ffffff;
	font-weight:900;
	font-size:14px;
	letter-spacing:.08em;
	background:linear-gradient(90deg,#9b8cff,#ffffff);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}

.stream-viewers{
	font-size:13px;
	font-weight:700;
	color:#9b8cff;
}

.stream-card{
	position:relative;
	border-radius:20px;
	overflow:hidden;
	background:linear-gradient(145deg,#1a1635,#0c0a1e);
	transition:.35s;
}

.stream-card:hover{
	transform:translateY(-6px) scale(1.02);
}

.stream-player{
	position:relative;
	aspect-ratio:16/9;
	overflow:hidden;
}

.stream-player iframe{
	width:100%;
	height:100%;
	border:0;
}

.live-badge{
	position:absolute;
	top:14px;
	left:14px;
	background:#ff2d55;
	padding:6px 14px;
	border-radius:20px;
	font-weight:900;
	font-size:12px;
	color:#fff;
	letter-spacing:.08em;
	box-shadow:0 0 18px rgba(255,45,85,.8);
	animation:pulse 1.4s infinite;
	z-index:5;
}

@keyframes pulse{
	0%{ box-shadow:0 0 0 0 rgba(255,45,85,.7);}
	70%{ box-shadow:0 0 0 14px rgba(255,45,85,0);}
	100%{ box-shadow:0 0 0 0 rgba(255,45,85,0);}
}

.stream-info{
	padding:16px 18px;
	background:linear-gradient(180deg,rgba(15,10,35,.6),rgba(5,3,15,.95));
	backdrop-filter:blur(10px);
}

.stream-header{
	display:flex;
	align-items:center;
	gap:14px;
}

.stream-avatar{
	width:54px;
	height:54px;
	border-radius:50%;
	object-fit:cover;
}
.stream-card a,
.stream-card a:hover,
.stream-card a:focus,
.stream-card a:active{
	text-decoration:none !important;
}
.stream-meta{
	flex:1;
}

.stream-name{
	font-size:18px;
	font-weight:800;
	color:#fff;
	line-height:1.1;
}

.stream-desc{
	margin-top:4px;
	font-size:13px;
	color:#bba9ff;
}